Options
All
  • Public
  • Public/Protected
  • All
Menu

An abstract base class designed to standardize the behavior for a multi-select UI component. Multi-select components return an array of values as part of form submission. Different implementations may provide different experiences around how inputs are presented to the user.

abstract
internal
fires

change

Hierarchy

Index

Constructors

Properties

form: HTMLFormElement = null

The form this custom element belongs to, if any.

_options: any[]

Predefined elements which were defined in the original HTML.

_choices: Object = {}

An object which maps option values to displayed labels.

_chosen: Set<string> = ...

An array of identifiers which have been chosen.

#formDataHandler: Function = null

The bound form data handler method

Accessors

  • get name(): string
  • set name(value: string): void
  • The name of the multi-select input element.

    Returns string

  • The name of the multi-select input element.

    Parameters

    • value: string

    Returns void

  • get value(): string[]
  • set value(values: string[]): void
  • The values of the multi-select input are expressed as an array of strings.

    Returns string[]

  • The values of the multi-select input are expressed as an array of strings.

    Parameters

    • values: string[]

    Returns void

Methods

  • connectedCallback(): void
  • Activate the custom element when it is attached to the DOM.

    inheritdoc

    Returns void

  • disconnectedCallback(): void
  • Deactivate the custom element when it is detached from the DOM.

    inheritdoc

    Returns void

  • select(value: string): void
  • Mark a choice as selected.

    Parameters

    • value: string

      The value to add to the chosen set

    Returns void

  • unselect(value: string): void
  • Mark a choice as un-selected.

    Parameters

    • value: string

      The value to delete from the chosen set

    Returns void

  • _initializeOptions(): void
  • Preserve existing elements which are defined in the original HTML.

    Returns void

  • _buildElements(): HTMLElement[]
  • Create the HTML elements that should be included in this custom element. Elements are returned as an array of ordered children.

    Returns HTMLElement[]

  • _refresh(): void
  • Refresh the active state of the custom element by reflecting changes to the _chosen set.

    Returns void

  • _activateListeners(): void
  • Activate event listeners which add dynamic behavior to the custom element.

    Returns void

  • #onFormData(event: FormDataEvent): void
  • Add the value of the custom element to processed FormData.

    Parameters

    • event: FormDataEvent

    Returns void

Events

onChange: any

The "change" event is emitted when the values of the multi-select element are changed.

param event

A "change" event passed to event listeners.