@carbon/web-components 2.0.0-beta.0 → 2.0.0-beta.2

package/es/components/dropdown/dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/dropdown/dropdown.ts"],"names":[],"mappings":"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","file":"dropdown.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { LitElement, html, TemplateResult } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport ChevronDown16 from '@carbon/icons/lib/chevron--down/16';\nimport WarningFilled16 from '@carbon/icons/lib/warning--filled/16';\nimport FocusMixin from '../../globals/mixins/focus';\nimport FormMixin from '../../globals/mixins/form';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport ValidityMixin from '../../globals/mixins/validity';\nimport HostListener from '../../globals/decorators/host-listener';\nimport {\n  find,\n  forEach,\n  indexOf,\n} from '../../globals/internal/collection-helpers';\nimport {\n  DROPDOWN_COLOR_SCHEME,\n  DROPDOWN_KEYBOARD_ACTION,\n  DROPDOWN_SIZE,\n  DROPDOWN_TYPE,\n  NAVIGATION_DIRECTION,\n} from './defs';\nimport BXDropdownItem from './dropdown-item';\nimport styles from './dropdown.scss';\n\nexport {\n  DROPDOWN_COLOR_SCHEME,\n  DROPDOWN_KEYBOARD_ACTION,\n  DROPDOWN_SIZE,\n  DROPDOWN_TYPE,\n  NAVIGATION_DIRECTION,\n};\n\n/**\n * Dropdown.\n *\n * @element cds-dropdown\n * @csspart label-text The label text.\n * @csspart helper-text The helper text.\n * @csspart trigger-button The trigger button.\n * @csspart menu-body The menu body.\n * @csspart validity-message The validity message.\n * @fires cds-dropdown-beingselected\n *   The custom event fired before a dropdown item is selected upon a user gesture.\n *   Cancellation of this event stops changing the user-initiated selection.\n * @fires cds-dropdown-beingtoggled\n *   The custom event fired before the open state of this dropdown is toggled upon a user gesture.\n *   Cancellation of this event stops the user-initiated toggling.\n * @fires cds-dropdown-selected - The custom event fired after a dropdown item is selected upon a user gesture.\n * @fires cds-dropdown-toggled - The custom event fired after the open state of this dropdown is toggled upon a user gesture.\n */\n@customElement(`${prefix}-dropdown`)\nclass BXDropdown extends ValidityMixin(\n  HostListenerMixin(FormMixin(FocusMixin(LitElement)))\n) {\n  /**\n   * The latest status of this dropdown, for screen reader to accounce.\n   */\n  protected _assistiveStatusText?: string;\n\n  /**\n   * The content of the selected item.\n   */\n  protected _selectedItemContent: DocumentFragment | null = null;\n\n  /**\n   * `true` if the trigger button should be focusable.\n   * Derived class can set `false` to this if the trigger button contains another primary focusable element (e.g. `<input>`).\n   */\n  protected _shouldTriggerBeFocusable = true;\n\n  /**\n   * The list box `<div>` node.\n   */\n  @query(`.${prefix}--list-box`)\n  protected _listBoxNode!: HTMLDivElement;\n\n  /**\n   * The `<slot>` element for the helper text in the shadow DOM.\n   */\n  @query('slot[name=\"helper-text\"]')\n  protected _slotHelperTextNode!: HTMLSlotElement;\n\n  /**\n   * The `<slot>` element for the label text in the shadow DOM.\n   */\n  @query('slot[name=\"label-text\"]')\n  protected _slotLabelTextNode!: HTMLSlotElement;\n\n  /**\n   * @param itemToSelect A dropdown item. Absense of this argument means clearing selection.\n   * @returns `true` if the selection of this dropdown should change if the given item is selected upon user interaction.\n   */\n  protected _selectionShouldChange(itemToSelect?: BXDropdownItem) {\n    return !itemToSelect || itemToSelect.value !== this.value;\n  }\n\n  /**\n   * A callback that runs after change in dropdown selection upon user interaction is confirmed.\n   *\n   * @param itemToSelect\n   *   A dropdown item.\n   *   Absense of this argument means clearing selection, which may be handled by a derived class.\n   */\n  protected _selectionDidChange(itemToSelect?: BXDropdownItem) {\n    if (itemToSelect) {\n      this.value = itemToSelect.value;\n      forEach(\n        this.querySelectorAll(\n          (this.constructor as typeof BXDropdown).selectorItemSelected\n        ),\n        (item) => {\n          (item as BXDropdownItem).selected = false;\n        }\n      );\n      itemToSelect.selected = true;\n      this._assistiveStatusText = this.selectedItemAssistiveText;\n      this._handleUserInitiatedToggle(false);\n    }\n  }\n\n  /**\n   * Handles `click` event on the top-level element in the shadow DOM.\n   *\n   * @param event The event.\n   */\n  protected _handleClickInner(event: MouseEvent) {\n    if (this.shadowRoot!.contains(event.target as Node)) {\n      this._handleUserInitiatedToggle();\n    } else {\n      const item = (event.target as Element).closest(\n        (this.constructor as typeof BXDropdown).selectorItem\n      ) as BXDropdownItem;\n      if (this.contains(item)) {\n        this._handleUserInitiatedSelectItem(item);\n      }\n    }\n  }\n\n  /**\n   * Handler for the `keydown` event on the top-level element in the shadow DOM.\n   */\n  protected _handleKeydownInner(event: KeyboardEvent) {\n    const { key } = event;\n    const action = (this.constructor as typeof BXDropdown).getAction(key);\n    if (!this.open) {\n      switch (action) {\n        case DROPDOWN_KEYBOARD_ACTION.NAVIGATING:\n          this._handleUserInitiatedToggle(true);\n          // If this menu gets open with an arrow key, reset the highlight\n          this._clearHighlight();\n          break;\n        default:\n          break;\n      }\n    } else {\n      switch (action) {\n        case DROPDOWN_KEYBOARD_ACTION.CLOSING:\n          this._handleUserInitiatedToggle(false);\n          break;\n        case DROPDOWN_KEYBOARD_ACTION.NAVIGATING:\n          this._navigate(NAVIGATION_DIRECTION[key]);\n          break;\n        default:\n          break;\n      }\n    }\n  }\n\n  /**\n   * Handler for the `keypress` event on the top-level element in the shadow DOM.\n   */\n  protected _handleKeypressInner(event: KeyboardEvent) {\n    const { key } = event;\n    const action = (this.constructor as typeof BXDropdown).getAction(key);\n    if (!this.open) {\n      switch (action) {\n        case DROPDOWN_KEYBOARD_ACTION.TRIGGERING:\n          this._handleUserInitiatedToggle(true);\n          break;\n        default:\n          break;\n      }\n    } else {\n      switch (action) {\n        case DROPDOWN_KEYBOARD_ACTION.TRIGGERING:\n          {\n            const constructor = this.constructor as typeof BXDropdown;\n            const highlightedItem = this.querySelector(\n              constructor.selectorItemHighlighted\n            ) as BXDropdownItem;\n            if (highlightedItem) {\n              this._handleUserInitiatedSelectItem(highlightedItem);\n            } else {\n              this._handleUserInitiatedToggle(false);\n            }\n          }\n          break;\n        default:\n          break;\n      }\n    }\n  }\n\n  /**\n   * Handles `blur` event handler on the document this element is in.\n   *\n   * @param event The event.\n   */\n  @HostListener('focusout')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  protected _handleFocusOut(event: FocusEvent) {\n    if (!this.contains(event.relatedTarget as Node)) {\n      this._handleUserInitiatedToggle(false);\n    }\n  }\n\n  /**\n   * Handles `slotchange` event for the `<slot>` for helper text.\n   */\n  protected _handleSlotchangeHelperText() {\n    this.requestUpdate();\n  }\n\n  /**\n   * Handles `slotchange` event for the `<slot>` for label text.\n   */\n  protected _handleSlotchangeLabelText() {\n    this.requestUpdate();\n  }\n\n  /**\n   * Handles user-initiated selection of a dropdown item.\n   *\n   * @param [item] The dropdown item user wants to select. Absense of this argument means clearing selection.\n   */\n  protected _handleUserInitiatedSelectItem(item?: BXDropdownItem) {\n    if (this._selectionShouldChange(item)) {\n      const init = {\n        bubbles: true,\n        composed: true,\n        detail: {\n          item,\n        },\n      };\n      const constructor = this.constructor as typeof BXDropdown;\n      const beforeSelectEvent = new CustomEvent(constructor.eventBeforeSelect, {\n        ...init,\n        cancelable: true,\n      });\n      if (this.dispatchEvent(beforeSelectEvent)) {\n        this._selectionDidChange(item);\n        const afterSelectEvent = new CustomEvent(constructor.eventSelect, init);\n        this.dispatchEvent(afterSelectEvent);\n      }\n    }\n  }\n\n  /**\n   * Handles user-initiated toggling the open state.\n   *\n   * @param [force] If specified, forces the open state to the given one.\n   */\n  protected _handleUserInitiatedToggle(force: boolean = !this.open) {\n    const { eventBeforeToggle, eventToggle } = this\n      .constructor as typeof BXDropdown;\n\n    const { disabled } = this;\n    const init = {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      detail: {\n        open: force,\n      },\n    };\n    if (!disabled) {\n      if (this.dispatchEvent(new CustomEvent(eventBeforeToggle, init))) {\n        this.open = force;\n        if (this.open) {\n          this._assistiveStatusText = this.selectingItemsAssistiveText;\n        } else {\n          const {\n            selectedItemAssistiveText,\n            triggerContent,\n            _assistiveStatusText: assistiveStatusText,\n            _selectedItemContent: selectedItemContent,\n          } = this;\n          const selectedItemText =\n            (selectedItemContent && selectedItemContent.textContent) ||\n            triggerContent;\n          if (\n            selectedItemText &&\n            assistiveStatusText !== selectedItemAssistiveText\n          ) {\n            this._assistiveStatusText = selectedItemText;\n          }\n          forEach(\n            this.querySelectorAll(\n              (this.constructor as typeof BXDropdown).selectorItemHighlighted\n            ),\n            (item) => {\n              (item as BXDropdownItem).highlighted = false;\n            }\n          );\n        }\n        this.requestUpdate();\n        this.dispatchEvent(new CustomEvent(eventToggle, init));\n      }\n    }\n  }\n\n  /**\n   * Clears the selection of dropdown items.\n   */\n  protected _clearHighlight() {\n    forEach(\n      this.querySelectorAll(\n        (this.constructor as typeof BXDropdown).selectorItem\n      ),\n      (item) => {\n        (item as BXDropdownItem).highlighted = false;\n      }\n    );\n  }\n\n  /**\n   * Navigate through dropdown items.\n   *\n   * @param direction `-1` to navigate backward, `1` to navigate forward.\n   */\n  protected _navigate(direction: number) {\n    const constructor = this.constructor as typeof BXDropdown;\n    const items = this.querySelectorAll(constructor.selectorItem);\n    const highlightedItem = this.querySelector(\n      constructor.selectorItemHighlighted\n    );\n    const highlightedIndex = indexOf(items, highlightedItem!);\n    let nextIndex = highlightedIndex + direction;\n    if (nextIndex < 0) {\n      nextIndex = items.length - 1;\n    }\n    if (nextIndex >= items.length) {\n      nextIndex = 0;\n    }\n    forEach(items, (item, i) => {\n      (item as BXDropdownItem).highlighted = i === nextIndex;\n    });\n\n    const nextItem = items[nextIndex];\n    // Using `{ block: 'nearest' }` to prevent scrolling unless scrolling is absolutely necessary.\n    // `scrollIntoViewOptions` seems to work in latest Safari despite of MDN/caniuse table.\n    // IE falls back to the old behavior.\n    nextItem.scrollIntoView({ block: 'nearest' });\n\n    const nextItemText = nextItem.textContent;\n    if (nextItemText) {\n      this._assistiveStatusText = nextItemText;\n    }\n    this.requestUpdate();\n  }\n\n  /* eslint-disable class-methods-use-this */\n  /**\n   * @returns The content preceding the trigger button.\n   */\n  protected _renderPrecedingTriggerContent(): TemplateResult | void {\n    return undefined;\n  }\n  /* eslint-enable class-methods-use-this */\n\n  /**\n   * @returns The main content of the trigger button.\n   */\n  protected _renderTriggerContent(): TemplateResult {\n    const { triggerContent, _selectedItemContent: selectedItemContent } = this;\n    return html`\n      <span id=\"trigger-label\" class=\"${prefix}--list-box__label\"\n        >${selectedItemContent || triggerContent}</span\n      >\n    `;\n  }\n\n  /* eslint-disable class-methods-use-this */\n  /**\n   * @returns The content following the trigger button.\n   */\n  protected _renderFollowingTriggerContent(): TemplateResult | void {\n    return undefined;\n  }\n  /* eslint-enable class-methods-use-this */\n\n  /**\n   * Handles event to include selected value on the parent form.\n   *\n   * @param event The event.\n   */\n  _handleFormdata(event: Event) {\n    const { formData } = event as any; // TODO: Wait for `FormDataEvent` being available in `lib.dom.d.ts`\n    const { disabled, name, value } = this;\n    if (!disabled) {\n      formData.append(name, value);\n    }\n  }\n\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = DROPDOWN_COLOR_SCHEME.REGULAR;\n\n  /**\n   * `true` if this dropdown should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * The helper text.\n   */\n  @property({ attribute: 'helper-text' })\n  helperText = '';\n\n  /**\n   * `true` to show the UI of the invalid state.\n   */\n  @property({ type: Boolean, reflect: true })\n  invalid = false;\n\n  /**\n   * The label text.\n   */\n  @property({ attribute: 'label-text' })\n  labelText = '';\n\n  /**\n   * Name for the dropdown in the `FormData`\n   */\n  @property()\n  name = '';\n\n  /**\n   * `true` if this dropdown should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * `true` if the value is required.\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * The special validity message for `required`.\n   */\n  @property({ attribute: 'required-validity-message' })\n  requiredValidityMessage = 'Please fill out this field.';\n\n  /**\n   * An assistive text for screen reader to announce, telling the open state.\n   */\n  @property({ attribute: 'selecting-items-assistive-text' })\n  selectingItemsAssistiveText =\n    'Selecting items. Use up and down arrow keys to navigate.';\n\n  /**\n   * An assistive text for screen reader to announce, telling that an item is selected.\n   */\n  @property({ attribute: 'selected-item-assistive-text' })\n  selectedItemAssistiveText = 'Selected an item.';\n\n  /**\n   * Dropdown size.\n   */\n  @property({ reflect: true })\n  size = DROPDOWN_SIZE.REGULAR;\n\n  /**\n   * The `aria-label` attribute for the UI indicating the closed state.\n   */\n  @property({ attribute: 'toggle-label-closed' })\n  toggleLabelClosed = '';\n\n  /**\n   * The `aria-label` attribute for the UI indicating the open state.\n   */\n  @property({ attribute: 'toggle-label-open' })\n  toggleLabelOpen = '';\n\n  /**\n   * The content of the trigger button.\n   */\n  @property({ attribute: 'trigger-content' })\n  triggerContent = '';\n\n  /**\n   * `true` if this dropdown should use the inline UI variant.\n   */\n  @property({ reflect: true })\n  type = DROPDOWN_TYPE.REGULAR;\n\n  /**\n   * The validity message.\n   */\n  @property({ attribute: 'validity-message' })\n  validityMessage = '';\n\n  /**\n   * The value of the selected item.\n   */\n  @property({ reflect: true })\n  value = '';\n\n  shouldUpdate(changedProperties) {\n    const { selectorItem } = this.constructor as typeof BXDropdown;\n    if (changedProperties.has('size')) {\n      forEach(this.querySelectorAll(selectorItem), (elem) => {\n        (elem as BXDropdownItem).size = this.size;\n      });\n    }\n    if (changedProperties.has('value')) {\n      // `<cds-multi-select>` updates selection beforehand\n      // because our rendering logic for `<cds-multi-select>` looks for selected items via `qSA()`\n      forEach(this.querySelectorAll(selectorItem), (elem) => {\n        (elem as BXDropdownItem).selected =\n          (elem as BXDropdownItem).value === this.value;\n      });\n      const item = find(\n        this.querySelectorAll(selectorItem),\n        (elem) => (elem as BXDropdownItem).value === this.value\n      );\n      if (item) {\n        const range = this.ownerDocument!.createRange();\n        range.selectNodeContents(item);\n        this._selectedItemContent = range.cloneContents();\n      } else {\n        this._selectedItemContent = null;\n      }\n    }\n    return true;\n  }\n\n  updated(changedProperties) {\n    const { helperText, type } = this;\n    const inline = type === DROPDOWN_TYPE.INLINE;\n    const { selectorItem } = this.constructor as typeof BXDropdown;\n    if (changedProperties.has('disabled')) {\n      const { disabled } = this;\n      // Propagate `disabled` attribute to descendants until `:host-context()` gets supported in all major browsers\n      forEach(this.querySelectorAll(selectorItem), (elem) => {\n        (elem as BXDropdownItem).disabled = disabled;\n      });\n    }\n    if (\n      (changedProperties.has('helperText') || changedProperties.has('type')) &&\n      helperText &&\n      inline\n    ) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        'Found `helperText` property/attribute usage in inline mode, that is not supported, at:',\n        this\n      );\n    }\n  }\n\n  render() {\n    const {\n      colorScheme,\n      disabled,\n      helperText,\n      invalid,\n      labelText,\n      open,\n      toggleLabelClosed,\n      toggleLabelOpen,\n      size,\n      type,\n      validityMessage,\n      _assistiveStatusText: assistiveStatusText,\n      _shouldTriggerBeFocusable: shouldTriggerBeFocusable,\n      _handleClickInner: handleClickInner,\n      _handleKeydownInner: handleKeydownInner,\n      _handleKeypressInner: handleKeypressInner,\n      _handleSlotchangeHelperText: handleSlotchangeHelperText,\n      _handleSlotchangeLabelText: handleSlotchangeLabelText,\n      _slotHelperTextNode: slotHelperTextNode,\n      _slotLabelTextNode: slotLabelTextNode,\n    } = this;\n    const inline = type === DROPDOWN_TYPE.INLINE;\n    const selectedItemsCount = this.querySelectorAll(\n      (this.constructor as typeof BXDropdown).selectorItemSelected\n    ).length;\n    const classes = classMap({\n      [`${prefix}--dropdown`]: true,\n      [`${prefix}--list-box`]: true,\n      [`${prefix}--list-box--${colorScheme}`]: colorScheme,\n      [`${prefix}--list-box--disabled`]: disabled,\n      [`${prefix}--list-box--inline`]: inline,\n      [`${prefix}--list-box--expanded`]: open,\n      [`${prefix}--list-box--${size}`]: size,\n      [`${prefix}--dropdown--invalid`]: invalid,\n      [`${prefix}--dropdown--inline`]: inline,\n      [`${prefix}--dropdown--selected`]: selectedItemsCount > 0,\n    });\n    const labelClasses = classMap({\n      [`${prefix}--label`]: true,\n      [`${prefix}--label--disabled`]: disabled,\n    });\n    const helperClasses = classMap({\n      [`${prefix}--form__helper-text`]: true,\n      [`${prefix}--form__helper-text--disabled`]: disabled,\n    });\n    const iconContainerClasses = classMap({\n      [`${prefix}--list-box__menu-icon`]: true,\n      [`${prefix}--list-box__menu-icon--open`]: open,\n    });\n    const toggleLabel =\n      (open ? toggleLabelOpen : toggleLabelClosed) || undefined;\n    const hasHelperText =\n      helperText ||\n      (slotHelperTextNode && slotHelperTextNode.assignedNodes().length > 0);\n    const hasLabelText =\n      labelText ||\n      (slotLabelTextNode && slotLabelTextNode.assignedNodes().length > 0);\n    const helper = !invalid\n      ? html`\n          <div\n            part=\"helper-text\"\n            class=\"${helperClasses}\"\n            ?hidden=\"${inline || !hasHelperText}\">\n            <slot name=\"helper-text\" @slotchange=\"${handleSlotchangeHelperText}\"\n              >${helperText}</slot\n            >\n          </div>\n        `\n      : html`\n          <div part=\"validity-message\" class=${`${prefix}--form-requirement`}>\n            <slot name=\"validity-message\">${validityMessage}</slot>\n          </div>\n        `;\n    const validityIcon = !invalid\n      ? undefined\n      : WarningFilled16({\n          class: `${prefix}--list-box__invalid-icon`,\n          'aria-label': toggleLabel,\n        });\n    const menuBody = !open\n      ? undefined\n      : html`\n          <div\n            id=\"menu-body\"\n            part=\"menu-body\"\n            class=\"${prefix}--list-box__menu\"\n            role=\"listbox\"\n            tabindex=\"-1\">\n            <slot></slot>\n          </div>\n        `;\n    return html`\n      <label\n        part=\"label-text\"\n        class=\"${labelClasses}\"\n        ?hidden=\"${!hasLabelText}\">\n        <slot name=\"label-text\" @slotchange=\"${handleSlotchangeLabelText}\"\n          >${labelText}</slot\n        >\n      </label>\n      <div\n        role=\"listbox\"\n        class=\"${classes}\"\n        ?data-invalid=${invalid}\n        @click=${handleClickInner}\n        @keydown=${handleKeydownInner}\n        @keypress=${handleKeypressInner}>\n        ${validityIcon}\n        <div\n          part=\"trigger-button\"\n          role=\"${ifDefined(!shouldTriggerBeFocusable ? undefined : 'button')}\"\n          class=\"${prefix}--list-box__field\"\n          tabindex=\"${ifDefined(!shouldTriggerBeFocusable ? undefined : '0')}\"\n          aria-labelledby=\"trigger-label\"\n          aria-expanded=\"${String(open)}\"\n          aria-haspopup=\"listbox\"\n          aria-owns=\"menu-body\"\n          aria-controls=\"menu-body\">\n          ${this._renderPrecedingTriggerContent()}${this._renderTriggerContent()}${this._renderFollowingTriggerContent()}\n          <div class=\"${iconContainerClasses}\">\n            ${ChevronDown16({ 'aria-label': toggleLabel })}\n          </div>\n        </div>\n        ${menuBody}\n      </div>\n      ${helper}\n      <div\n        class=\"${prefix}--assistive-text\"\n        role=\"status\"\n        aria-live=\"assertive\"\n        aria-relevant=\"additions text\">\n        ${assistiveStatusText}\n      </div>\n    `;\n  }\n\n  /**\n   * Symbols of keys that triggers opening/closing menu and selecting/deselecting menu item.\n   */\n  static TRIGGER_KEYS = new Set([' ', 'Enter']);\n\n  /**\n   * A selector that will return highlighted items.\n   */\n  static get selectorItemHighlighted() {\n    return `${prefix}-dropdown-item[highlighted]`;\n  }\n\n  /**\n   * A selector that will return dropdown items.\n   */\n  static get selectorItem() {\n    return `${prefix}-dropdown-item`;\n  }\n\n  /**\n   * A selector that will return selected items.\n   */\n  static get selectorItemSelected() {\n    return `${prefix}-dropdown-item[selected]`;\n  }\n\n  /**\n   * The name of the custom event fired before a dropdown item is selected upon a user gesture.\n   * Cancellation of this event stops changing the user-initiated selection.\n   */\n  static get eventBeforeSelect() {\n    return `${prefix}-dropdown-beingselected`;\n  }\n\n  /**\n   * The name of the custom event fired after a a dropdown item is selected upon a user gesture.\n   */\n  static get eventSelect() {\n    return `${prefix}-dropdown-selected`;\n  }\n\n  /**\n   * The name of the custom event fired before this dropdown item is being toggled upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of toggling this dropdown item.\n   */\n  static get eventBeforeToggle() {\n    return `${prefix}-dropdown-beingtoggled`;\n  }\n\n  /**\n   * The name of the custom event fired after this dropdown item is toggled upon a user gesture.\n   */\n  static get eventToggle() {\n    return `${prefix}-dropdown-toggled`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles;\n\n  /**\n   * @returns A action for dropdown for the given key symbol.\n   */\n  static getAction(key: string) {\n    if (key === 'Escape') {\n      return DROPDOWN_KEYBOARD_ACTION.CLOSING;\n    }\n    if (key in NAVIGATION_DIRECTION) {\n      return DROPDOWN_KEYBOARD_ACTION.NAVIGATING;\n    }\n    if (this.TRIGGER_KEYS.has(key)) {\n      return DROPDOWN_KEYBOARD_ACTION.TRIGGERING;\n    }\n    return DROPDOWN_KEYBOARD_ACTION.NONE;\n  }\n}\n\nexport default BXDropdown;\n"]}
+{"version":3,"sources":["components/dropdown/dropdown.ts"],"names":[],"mappings":"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","file":"dropdown.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { LitElement, html, TemplateResult } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport ChevronDown16 from '@carbon/icons/lib/chevron--down/16';\nimport WarningFilled16 from '@carbon/icons/lib/warning--filled/16';\nimport WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16';\nimport FocusMixin from '../../globals/mixins/focus';\nimport FormMixin from '../../globals/mixins/form';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport ValidityMixin from '../../globals/mixins/validity';\nimport HostListener from '../../globals/decorators/host-listener';\nimport {\n  find,\n  forEach,\n  indexOf,\n} from '../../globals/internal/collection-helpers';\nimport {\n  DROPDOWN_DIRECTION,\n  DROPDOWN_KEYBOARD_ACTION,\n  DROPDOWN_SIZE,\n  DROPDOWN_TYPE,\n  NAVIGATION_DIRECTION,\n} from './defs';\nimport CDSDropdownItem from './dropdown-item';\nimport styles from './dropdown.scss';\n\nexport {\n  DROPDOWN_KEYBOARD_ACTION,\n  DROPDOWN_DIRECTION,\n  DROPDOWN_SIZE,\n  DROPDOWN_TYPE,\n  NAVIGATION_DIRECTION,\n};\n\n/**\n * Dropdown.\n *\n * @element cds-dropdown\n * @csspart label-text The label text.\n * @csspart helper-text The helper text.\n * @csspart trigger-button The trigger button.\n * @csspart menu-body The menu body.\n * @csspart validity-message The validity message.\n * @fires cds-dropdown-beingselected\n *   The custom event fired before a dropdown item is selected upon a user gesture.\n *   Cancellation of this event stops changing the user-initiated selection.\n * @fires cds-dropdown-beingtoggled\n *   The custom event fired before the open state of this dropdown is toggled upon a user gesture.\n *   Cancellation of this event stops the user-initiated toggling.\n * @fires cds-dropdown-selected - The custom event fired after a dropdown item is selected upon a user gesture.\n * @fires cds-dropdown-toggled - The custom event fired after the open state of this dropdown is toggled upon a user gesture.\n */\n@customElement(`${prefix}-dropdown`)\nclass CDSDropdown extends ValidityMixin(\n  HostListenerMixin(FormMixin(FocusMixin(LitElement)))\n) {\n  /**\n   * The latest status of this dropdown, for screen reader to accounce.\n   */\n  protected _assistiveStatusText?: string;\n\n  /**\n   * The content of the selected item.\n   */\n  protected _selectedItemContent: DocumentFragment | null = null;\n\n  /**\n   * `true` if the trigger button should be focusable.\n   * Derived class can set `false` to this if the trigger button contains another primary focusable element (e.g. `<input>`).\n   */\n  protected _shouldTriggerBeFocusable = true;\n\n  /**\n   * The list box `<div>` node.\n   */\n  @query(`.${prefix}--list-box`)\n  protected _listBoxNode!: HTMLDivElement;\n\n  /**\n   * The `<slot>` element for the helper text in the shadow DOM.\n   */\n  @query('slot[name=\"helper-text\"]')\n  protected _slotHelperTextNode!: HTMLSlotElement;\n\n  /**\n   * The `<slot>` element for the title text in the shadow DOM.\n   */\n  @query('slot[name=\"title-text\"]')\n  protected _slotTitleTextNode!: HTMLSlotElement;\n\n  /**\n   * @param itemToSelect A dropdown item. Absense of this argument means clearing selection.\n   * @returns `true` if the selection of this dropdown should change if the given item is selected upon user interaction.\n   */\n  protected _selectionShouldChange(itemToSelect?: CDSDropdownItem) {\n    return !itemToSelect || itemToSelect.value !== this.value;\n  }\n\n  /**\n   * A callback that runs after change in dropdown selection upon user interaction is confirmed.\n   *\n   * @param itemToSelect\n   *   A dropdown item.\n   *   Absense of this argument means clearing selection, which may be handled by a derived class.\n   */\n  protected _selectionDidChange(itemToSelect?: CDSDropdownItem) {\n    if (itemToSelect) {\n      this.value = itemToSelect.value;\n      forEach(\n        this.querySelectorAll(\n          (this.constructor as typeof CDSDropdown).selectorItemSelected\n        ),\n        (item) => {\n          (item as CDSDropdownItem).selected = false;\n        }\n      );\n      itemToSelect.selected = true;\n      this._assistiveStatusText = this.selectedItemAssistiveText;\n      this._handleUserInitiatedToggle(false);\n    }\n  }\n\n  /**\n   * Handles `click` event on the top-level element in the shadow DOM.\n   *\n   * @param event The event.\n   */\n  protected _handleClickInner(event: MouseEvent) {\n    if (this.readOnly) {\n      return;\n    }\n\n    if (this.shadowRoot!.contains(event.target as Node)) {\n      this._handleUserInitiatedToggle();\n    } else {\n      const item = (event.target as Element).closest(\n        (this.constructor as typeof CDSDropdown).selectorItem\n      ) as CDSDropdownItem;\n      if (this.contains(item)) {\n        this._handleUserInitiatedSelectItem(item);\n      }\n    }\n  }\n\n  /**\n   * Handler for the `keydown` event on the top-level element in the shadow DOM.\n   */\n  protected _handleKeydownInner(event: KeyboardEvent) {\n    const { key } = event;\n    const action = (this.constructor as typeof CDSDropdown).getAction(key);\n    if (!this.open) {\n      switch (action) {\n        case DROPDOWN_KEYBOARD_ACTION.NAVIGATING:\n          this._handleUserInitiatedToggle(true);\n          // If this menu gets open with an arrow key, reset the highlight\n          this._clearHighlight();\n          break;\n        default:\n          break;\n      }\n    } else {\n      switch (action) {\n        case DROPDOWN_KEYBOARD_ACTION.CLOSING:\n          this._handleUserInitiatedToggle(false);\n          break;\n        case DROPDOWN_KEYBOARD_ACTION.NAVIGATING:\n          this._navigate(NAVIGATION_DIRECTION[key]);\n          break;\n        default:\n          break;\n      }\n    }\n  }\n\n  /**\n   * Handler for the `keypress` event on the top-level element in the shadow DOM.\n   */\n  protected _handleKeypressInner(event: KeyboardEvent) {\n    const { key } = event;\n    const action = (this.constructor as typeof CDSDropdown).getAction(key);\n    if (!this.open) {\n      switch (action) {\n        case DROPDOWN_KEYBOARD_ACTION.TRIGGERING:\n          this._handleUserInitiatedToggle(true);\n          break;\n        default:\n          break;\n      }\n    } else {\n      switch (action) {\n        case DROPDOWN_KEYBOARD_ACTION.TRIGGERING:\n          {\n            const constructor = this.constructor as typeof CDSDropdown;\n            const highlightedItem = this.querySelector(\n              constructor.selectorItemHighlighted\n            ) as CDSDropdownItem;\n            if (highlightedItem) {\n              this._handleUserInitiatedSelectItem(highlightedItem);\n            } else {\n              this._handleUserInitiatedToggle(false);\n            }\n          }\n          break;\n        default:\n          break;\n      }\n    }\n  }\n\n  /**\n   * Handles `blur` event handler on the document this element is in.\n   *\n   * @param event The event.\n   */\n  @HostListener('focusout')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  protected _handleFocusOut(event: FocusEvent) {\n    if (!this.contains(event.relatedTarget as Node)) {\n      this._handleUserInitiatedToggle(false);\n    }\n  }\n\n  /**\n   * Handles `slotchange` event for the `<slot>` for helper text.\n   */\n  protected _handleSlotchangeHelperText() {\n    this.requestUpdate();\n  }\n\n  /**\n   * Handles `slotchange` event for the `<slot>` for label text.\n   */\n  protected _handleSlotchangeLabelText() {\n    this.requestUpdate();\n  }\n\n  /**\n   * Handles user-initiated selection of a dropdown item.\n   *\n   * @param [item] The dropdown item user wants to select. Absense of this argument means clearing selection.\n   */\n  protected _handleUserInitiatedSelectItem(item?: CDSDropdownItem) {\n    if (item?.hasAttribute('disabled')) {\n      return;\n    }\n\n    if (this._selectionShouldChange(item)) {\n      const init = {\n        bubbles: true,\n        composed: true,\n        detail: {\n          item,\n        },\n      };\n      const constructor = this.constructor as typeof CDSDropdown;\n      const beforeSelectEvent = new CustomEvent(constructor.eventBeforeSelect, {\n        ...init,\n        cancelable: true,\n      });\n      if (this.dispatchEvent(beforeSelectEvent)) {\n        this._selectionDidChange(item);\n        const afterSelectEvent = new CustomEvent(constructor.eventSelect, init);\n        this.dispatchEvent(afterSelectEvent);\n      }\n    }\n  }\n\n  /**\n   * Handles user-initiated toggling the open state.\n   *\n   * @param [force] If specified, forces the open state to the given one.\n   */\n  protected _handleUserInitiatedToggle(force: boolean = !this.open) {\n    const { eventBeforeToggle, eventToggle } = this\n      .constructor as typeof CDSDropdown;\n\n    const { disabled } = this;\n    const init = {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      detail: {\n        open: force,\n      },\n    };\n    if (!disabled) {\n      if (this.dispatchEvent(new CustomEvent(eventBeforeToggle, init))) {\n        this.open = force;\n        if (this.open) {\n          this._assistiveStatusText = this.selectingItemsAssistiveText;\n        } else {\n          const {\n            selectedItemAssistiveText,\n            label,\n            _assistiveStatusText: assistiveStatusText,\n            _selectedItemContent: selectedItemContent,\n          } = this;\n          const selectedItemText =\n            (selectedItemContent && selectedItemContent.textContent) || label;\n          if (\n            selectedItemText &&\n            assistiveStatusText !== selectedItemAssistiveText\n          ) {\n            this._assistiveStatusText = selectedItemText;\n          }\n          forEach(\n            this.querySelectorAll(\n              (this.constructor as typeof CDSDropdown).selectorItemHighlighted\n            ),\n            (item) => {\n              (item as CDSDropdownItem).highlighted = false;\n            }\n          );\n        }\n        this.requestUpdate();\n        this.dispatchEvent(new CustomEvent(eventToggle, init));\n      }\n    }\n  }\n\n  /**\n   * Clears the selection of dropdown items.\n   */\n  protected _clearHighlight() {\n    forEach(\n      this.querySelectorAll(\n        (this.constructor as typeof CDSDropdown).selectorItem\n      ),\n      (item) => {\n        (item as CDSDropdownItem).highlighted = false;\n      }\n    );\n  }\n\n  /**\n   * Navigate through dropdown items.\n   *\n   * @param direction `-1` to navigate backward, `1` to navigate forward.\n   */\n  protected _navigate(direction: number) {\n    const constructor = this.constructor as typeof CDSDropdown;\n    const items = this.querySelectorAll(constructor.selectorItem);\n    const highlightedItem = this.querySelector(\n      constructor.selectorItemHighlighted\n    );\n    const highlightedIndex = indexOf(items, highlightedItem!);\n    let nextIndex = highlightedIndex + direction;\n\n    if (items[nextIndex]?.hasAttribute('disabled')) {\n      nextIndex += direction;\n    }\n    if (nextIndex < 0) {\n      nextIndex = items.length - 1;\n    }\n    if (nextIndex >= items.length) {\n      nextIndex = 0;\n    }\n    forEach(items, (item, i) => {\n      (item as CDSDropdownItem).highlighted = i === nextIndex;\n    });\n\n    const nextItem = items[nextIndex];\n    // Using `{ block: 'nearest' }` to prevent scrolling unless scrolling is absolutely necessary.\n    // `scrollIntoViewOptions` seems to work in latest Safari despite of MDN/caniuse table.\n    // IE falls back to the old behavior.\n    nextItem.scrollIntoView({ block: 'nearest' });\n\n    const nextItemText = nextItem.textContent;\n    if (nextItemText) {\n      this._assistiveStatusText = nextItemText;\n    }\n    this.requestUpdate();\n  }\n\n  /* eslint-disable class-methods-use-this */\n  /**\n   * @returns The content preceding the trigger button.\n   */\n  protected _renderPrecedingLabel(): TemplateResult | void {\n    return undefined;\n  }\n  /* eslint-enable class-methods-use-this */\n\n  /**\n   * @returns The main content of the trigger button.\n   */\n  protected _renderLabel(): TemplateResult {\n    const { label, _selectedItemContent: selectedItemContent } = this;\n    return html`\n      <span id=\"trigger-label\" class=\"${prefix}--list-box__label\"\n        >${selectedItemContent || label}</span\n      >\n    `;\n  }\n\n  /* eslint-disable class-methods-use-this */\n  /**\n   * @returns The content following the trigger button.\n   */\n  protected _renderFollowingLabel(): TemplateResult | void {\n    return undefined;\n  }\n  /* eslint-enable class-methods-use-this */\n\n  /**\n   * Handles event to include selected value on the parent form.\n   *\n   * @param event The event.\n   */\n  _handleFormdata(event: Event) {\n    const { formData } = event as any; // TODO: Wait for `FormDataEvent` being available in `lib.dom.d.ts`\n    const { disabled, name, value } = this;\n    if (!disabled) {\n      formData.append(name, value);\n    }\n  }\n\n  /**\n   * 'aria-label' of the ListBox component.\n   * Specify a label to be read by screen readers on the container node\n   */\n  @property({ type: String, reflect: true, attribute: 'aria-label' })\n  ariaLabel = '';\n\n  /**\n   * Specify the direction of the dropdown. Can be either top or bottom.\n   */\n  @property({ type: Boolean, reflect: true })\n  direction = false;\n\n  /**\n   * `true` if this dropdown should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * The helper text.\n   */\n  @property({ attribute: 'helper-text' })\n  helperText = '';\n\n  /**\n   * Specify whether the title text should be hidden or not\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-label' })\n  hideLabel = false;\n\n  /**\n   * `true` to show the UI of the invalid state.\n   */\n  @property({ type: Boolean, reflect: true })\n  invalid = false;\n\n  /**\n   * Message which is displayed if the value is invalid.\n   */\n  @property({ attribute: 'invalid-text' })\n  invalidText = '';\n\n  /**\n   * Provide the title text that will be read by a screen reader when visiting this control\n   */\n  @property({ attribute: 'title-text' })\n  titleText = '';\n\n  /**\n   * Name for the dropdown in the `FormData`\n   */\n  @property()\n  name = '';\n\n  /**\n   * `true` if this dropdown should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Whether or not the Dropdown is readonly\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'read-only' })\n  readOnly = false;\n\n  /**\n   * `true` if the value is required.\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * The special validity message for `required`.\n   */\n  @property({ attribute: 'required-validity-message' })\n  requiredValidityMessage = 'Please fill out this field.';\n\n  /**\n   * An assistive text for screen reader to announce, telling the open state.\n   */\n  @property({ attribute: 'selecting-items-assistive-text' })\n  selectingItemsAssistiveText =\n    'Selecting items. Use up and down arrow keys to navigate.';\n\n  /**\n   * An assistive text for screen reader to announce, telling that an item is selected.\n   */\n  @property({ attribute: 'selected-item-assistive-text' })\n  selectedItemAssistiveText = 'Selected an item.';\n\n  /**\n   * Dropdown size.\n   */\n  @property({ reflect: true })\n  size = DROPDOWN_SIZE.REGULAR;\n\n  /**\n   * The `aria-label` attribute for the UI indicating the closed state.\n   */\n  @property({ attribute: 'toggle-label-closed' })\n  toggleLabelClosed = '';\n\n  /**\n   * The `aria-label` attribute for the UI indicating the open state.\n   */\n  @property({ attribute: 'toggle-label-open' })\n  toggleLabelOpen = '';\n\n  /**\n   * Generic label that will be used as the textual representation of what this field is for\n   */\n  @property({ attribute: 'label' })\n  label = '';\n\n  /**\n   * `true` if this dropdown should use the inline UI variant.\n   */\n  @property({ reflect: true })\n  type = DROPDOWN_TYPE.REGULAR;\n\n  /**\n   * The validity message.\n   */\n  @property({ attribute: 'validity-message' })\n  validityMessage = '';\n\n  /**\n   * The value of the selected item.\n   */\n  @property({ reflect: true })\n  value = '';\n\n  /**\n   * Specify whether the control is currently in warning state\n   */\n  @property({ type: Boolean, reflect: true })\n  warn = false;\n\n  /**\n   * Provide the text that is displayed when the control is in warning state\n   */\n  @property({ attribute: 'warn-text' })\n  warnText = '';\n\n  shouldUpdate(changedProperties) {\n    const { selectorItem } = this.constructor as typeof CDSDropdown;\n    if (changedProperties.has('size')) {\n      forEach(this.querySelectorAll(selectorItem), (elem) => {\n        (elem as CDSDropdownItem).size = this.size;\n      });\n    }\n    if (changedProperties.has('value')) {\n      // `<cds-multi-select>` updates selection beforehand\n      // because our rendering logic for `<cds-multi-select>` looks for selected items via `qSA()`\n      forEach(this.querySelectorAll(selectorItem), (elem) => {\n        (elem as CDSDropdownItem).selected =\n          (elem as CDSDropdownItem).value === this.value;\n      });\n      const item = find(\n        this.querySelectorAll(selectorItem),\n        (elem) => (elem as CDSDropdownItem).value === this.value\n      );\n      if (item) {\n        const range = this.ownerDocument!.createRange();\n        range.selectNodeContents(item);\n        this._selectedItemContent = range.cloneContents();\n      } else {\n        this._selectedItemContent = null;\n      }\n    }\n    return true;\n  }\n\n  updated(changedProperties) {\n    const { helperText, type } = this;\n    const inline = type === DROPDOWN_TYPE.INLINE;\n    const { selectorItem } = this.constructor as typeof CDSDropdown;\n    if (changedProperties.has('disabled') && this.disabled) {\n      const { disabled } = this;\n      // Propagate `disabled` attribute to descendants until `:host-context()` gets supported in all major browsers\n      forEach(this.querySelectorAll(selectorItem), (elem) => {\n        (elem as CDSDropdownItem).disabled = disabled;\n      });\n    }\n    if (\n      (changedProperties.has('helperText') || changedProperties.has('type')) &&\n      helperText &&\n      inline\n    ) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        'Found `helperText` property/attribute usage in inline mode, that is not supported, at:',\n        this\n      );\n    }\n  }\n\n  render() {\n    const {\n      ariaLabel,\n      disabled,\n      helperText,\n      hideLabel,\n      invalid,\n      invalidText,\n      open,\n      toggleLabelClosed,\n      toggleLabelOpen,\n      size,\n      titleText,\n      type,\n      warn,\n      warnText,\n      _assistiveStatusText: assistiveStatusText,\n      _shouldTriggerBeFocusable: shouldTriggerBeFocusable,\n      _handleClickInner: handleClickInner,\n      _handleKeydownInner: handleKeydownInner,\n      _handleKeypressInner: handleKeypressInner,\n      _handleSlotchangeHelperText: handleSlotchangeHelperText,\n      _handleSlotchangeLabelText: handleSlotchangeLabelText,\n      _slotHelperTextNode: slotHelperTextNode,\n      _slotTitleTextNode: slotTitleTextNode,\n    } = this;\n    const inline = type === DROPDOWN_TYPE.INLINE;\n    const selectedItemsCount = this.querySelectorAll(\n      (this.constructor as typeof CDSDropdown).selectorItemSelected\n    ).length;\n    const classes = classMap({\n      [`${prefix}--dropdown`]: true,\n      [`${prefix}--list-box`]: true,\n      [`${prefix}--list-box--disabled`]: disabled,\n      [`${prefix}--list-box--inline`]: inline,\n      [`${prefix}--list-box--expanded`]: open,\n      [`${prefix}--list-box--${size}`]: size,\n      [`${prefix}--dropdown--invalid`]: invalid,\n      [`${prefix}--dropdown--warn`]: warn,\n      [`${prefix}--dropdown--inline`]: inline,\n      [`${prefix}--dropdown--selected`]: selectedItemsCount > 0,\n    });\n    const labelClasses = classMap({\n      [`${prefix}--label`]: true,\n      [`${prefix}--label--disabled`]: disabled,\n      [`${prefix}--visually-hidden`]: hideLabel,\n    });\n    const helperClasses = classMap({\n      [`${prefix}--form__helper-text`]: true,\n      [`${prefix}--form__helper-text--disabled`]: disabled,\n    });\n    const iconContainerClasses = classMap({\n      [`${prefix}--list-box__menu-icon`]: true,\n      [`${prefix}--list-box__menu-icon--open`]: open,\n    });\n    const toggleLabel =\n      (open ? toggleLabelOpen : toggleLabelClosed) || undefined;\n    const hasHelperText =\n      helperText ||\n      (slotHelperTextNode && slotHelperTextNode.assignedNodes().length > 0);\n    const hasTitleText =\n      titleText ||\n      (slotTitleTextNode && slotTitleTextNode.assignedNodes().length > 0);\n    const validityIcon = !invalid\n      ? undefined\n      : WarningFilled16({\n          class: `${prefix}--list-box__invalid-icon`,\n          'aria-label': toggleLabel,\n        });\n    const warningIcon =\n      !warn || (invalid && warn)\n        ? undefined\n        : WarningAltFilled16({\n            class: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`,\n            'aria-label': toggleLabel,\n          });\n    const helperMessage = invalid ? invalidText : warn ? warnText : helperText;\n    const menuBody = !open\n      ? undefined\n      : html`\n          <div\n            aria-label=\"${ariaLabel}\"\n            id=\"menu-body\"\n            part=\"menu-body\"\n            class=\"${prefix}--list-box__menu\"\n            role=\"listbox\"\n            tabindex=\"-1\">\n            <slot></slot>\n          </div>\n        `;\n    return html`\n      <label\n        part=\"title-text\"\n        class=\"${labelClasses}\"\n        ?hidden=\"${!hasTitleText}\">\n        <slot name=\"title-text\" @slotchange=\"${handleSlotchangeLabelText}\"\n          >${titleText}</slot\n        >\n      </label>\n      <div\n        role=\"listbox\"\n        class=\"${classes}\"\n        ?data-invalid=${invalid}\n        @click=${handleClickInner}\n        @keydown=${handleKeydownInner}\n        @keypress=${handleKeypressInner}>\n        <div\n          part=\"trigger-button\"\n          role=\"${ifDefined(!shouldTriggerBeFocusable ? undefined : 'button')}\"\n          class=\"${prefix}--list-box__field\"\n          tabindex=\"${ifDefined(!shouldTriggerBeFocusable ? undefined : '0')}\"\n          aria-labelledby=\"trigger-label\"\n          aria-expanded=\"${String(open)}\"\n          aria-haspopup=\"listbox\"\n          aria-owns=\"menu-body\"\n          aria-controls=\"menu-body\">\n          ${this._renderPrecedingLabel()}${this._renderLabel()}${validityIcon}${warningIcon}${this._renderFollowingLabel()}\n          <div id=\"trigger-caret\" class=\"${iconContainerClasses}\">\n            ${ChevronDown16({ 'aria-label': toggleLabel })}\n          </div>\n        </div>\n        ${menuBody}\n      </div>\n      <div\n        part=\"helper-text\"\n        class=\"${helperClasses}\"\n        ?hidden=\"${(inline && !warn && !invalid) || !hasHelperText}\">\n        <slot name=\"helper-text\" @slotchange=\"${handleSlotchangeHelperText}\"\n          >${helperMessage}</slot\n        >\n      </div>\n      <div\n        class=\"${prefix}--assistive-text\"\n        role=\"status\"\n        aria-live=\"assertive\"\n        aria-relevant=\"additions text\">\n        ${assistiveStatusText}\n      </div>\n    `;\n  }\n\n  /**\n   * Symbols of keys that triggers opening/closing menu and selecting/deselecting menu item.\n   */\n  static TRIGGER_KEYS = new Set([' ', 'Enter']);\n\n  /**\n   * A selector that will return highlighted items.\n   */\n  static get selectorItemHighlighted() {\n    return `${prefix}-dropdown-item[highlighted]`;\n  }\n\n  /**\n   * A selector that will return dropdown items.\n   */\n  static get selectorItem() {\n    return `${prefix}-dropdown-item`;\n  }\n\n  /**\n   * A selector that will return selected items.\n   */\n  static get selectorItemSelected() {\n    return `${prefix}-dropdown-item[selected]`;\n  }\n\n  /**\n   * The name of the custom event fired before a dropdown item is selected upon a user gesture.\n   * Cancellation of this event stops changing the user-initiated selection.\n   */\n  static get eventBeforeSelect() {\n    return `${prefix}-dropdown-beingselected`;\n  }\n\n  /**\n   * The name of the custom event fired after a a dropdown item is selected upon a user gesture.\n   */\n  static get eventSelect() {\n    return `${prefix}-dropdown-selected`;\n  }\n\n  /**\n   * The name of the custom event fired before this dropdown item is being toggled upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of toggling this dropdown item.\n   */\n  static get eventBeforeToggle() {\n    return `${prefix}-dropdown-beingtoggled`;\n  }\n\n  /**\n   * The name of the custom event fired after this dropdown item is toggled upon a user gesture.\n   */\n  static get eventToggle() {\n    return `${prefix}-dropdown-toggled`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles;\n\n  /**\n   * @returns A action for dropdown for the given key symbol.\n   */\n  static getAction(key: string) {\n    if (key === 'Escape') {\n      return DROPDOWN_KEYBOARD_ACTION.CLOSING;\n    }\n    if (key in NAVIGATION_DIRECTION) {\n      return DROPDOWN_KEYBOARD_ACTION.NAVIGATING;\n    }\n    if (this.TRIGGER_KEYS.has(key)) {\n      return DROPDOWN_KEYBOARD_ACTION.TRIGGERING;\n    }\n    return DROPDOWN_KEYBOARD_ACTION.NONE;\n  }\n}\n\nexport default CDSDropdown;\n"]}

package/es/components/dropdown/dropdown.js

@@ -3,9 +3,7 @@ import _decorate from "@babel/runtime/helpers/esm/decorate";
 let _ = t => t,
   _t,
   _t2,
-  _t3,
-  _t4,
-  _t5;
+  _t3;
 /**
  * @license
  *
@@ -22,15 +20,16 @@ import { property, customElement, query } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import ChevronDown16 from "../../icons/chevron--down/16";
 import WarningFilled16 from "../../icons/warning--filled/16";
+import WarningAltFilled16 from "../../icons/warning--alt--filled/16";
 import FocusMixin from '../../globals/mixins/focus';
 import FormMixin from '../../globals/mixins/form';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import ValidityMixin from '../../globals/mixins/validity';
 import HostListener from '../../globals/decorators/host-listener';
 import { find, forEach, indexOf } from '../../globals/internal/collection-helpers';
-import { DROPDOWN_COLOR_SCHEME, DROPDOWN_KEYBOARD_ACTION, DROPDOWN_SIZE, DROPDOWN_TYPE, NAVIGATION_DIRECTION } from './defs';
+import { DROPDOWN_DIRECTION, DROPDOWN_KEYBOARD_ACTION, DROPDOWN_SIZE, DROPDOWN_TYPE, NAVIGATION_DIRECTION } from './defs';
 import styles from "././dropdown.css.js";
-export { DROPDOWN_COLOR_SCHEME, DROPDOWN_KEYBOARD_ACTION, DROPDOWN_SIZE, DROPDOWN_TYPE, NAVIGATION_DIRECTION };
+export { DROPDOWN_KEYBOARD_ACTION, DROPDOWN_DIRECTION, DROPDOWN_SIZE, DROPDOWN_TYPE, NAVIGATION_DIRECTION };
 
 /**
  * Dropdown.
@@ -50,15 +49,15 @@ export { DROPDOWN_COLOR_SCHEME, DROPDOWN_KEYBOARD_ACTION, DROPDOWN_SIZE, DROPDOW
  * @fires cds-dropdown-selected - The custom event fired after a dropdown item is selected upon a user gesture.
  * @fires cds-dropdown-toggled - The custom event fired after the open state of this dropdown is toggled upon a user gesture.
  */
-let BXDropdown = _decorate([customElement(`${prefix}-dropdown`)], function (_initialize, _ValidityMixin) {
-  class BXDropdown extends _ValidityMixin {
+let CDSDropdown = _decorate([customElement(`${prefix}-dropdown`)], function (_initialize, _ValidityMixin) {
+  class CDSDropdown extends _ValidityMixin {
     constructor(...args) {
       super(...args);
       _initialize(this);
     }
   }
   return {
-    F: BXDropdown,
+    F: CDSDropdown,
     d: [{
       kind: "field",
       key: "_selectedItemContent",
@@ -83,8 +82,8 @@ let BXDropdown = _decorate([customElement(`${prefix}-dropdown`)], function (_ini
       value: void 0
     }, {
       kind: "field",
-      decorators: [query('slot[name="label-text"]')],
-      key: "_slotLabelTextNode",
+      decorators: [query('slot[name="title-text"]')],
+      key: "_slotTitleTextNode",
       value: void 0
     }, {
       kind: "method",
@@ -112,7 +111,7 @@ let BXDropdown = _decorate([customElement(`${prefix}-dropdown`)], function (_ini
        */
 
       /**
-       * The `<slot>` element for the label text in the shadow DOM.
+       * The `<slot>` element for the title text in the shadow DOM.
        */
 
       /**
@@ -154,6 +153,9 @@ let BXDropdown = _decorate([customElement(`${prefix}-dropdown`)], function (_ini
       kind: "method",
       key: "_handleClickInner",
       value: function _handleClickInner(event) {
+        if (this.readOnly) {
+          return;
+        }
         if (this.shadowRoot.contains(event.target)) {
           this._handleUserInitiatedToggle();
         } else {
@@ -281,6 +283,9 @@ let BXDropdown = _decorate([customElement(`${prefix}-dropdown`)], function (_ini
       kind: "method",
       key: "_handleUserInitiatedSelectItem",
       value: function _handleUserInitiatedSelectItem(item) {
+        if (item !== null && item !== void 0 && item.hasAttribute('disabled')) {
+          return;
+        }
         if (this._selectionShouldChange(item)) {
           const init = {
             bubbles: true,
@@ -333,11 +338,11 @@ let BXDropdown = _decorate([customElement(`${prefix}-dropdown`)], function (_ini
             } else {
               const {
                 selectedItemAssistiveText,
-                triggerContent,
+                label,
                 _assistiveStatusText: assistiveStatusText,
                 _selectedItemContent: selectedItemContent
               } = this;
-              const selectedItemText = selectedItemContent && selectedItemContent.textContent || triggerContent;
+              const selectedItemText = selectedItemContent && selectedItemContent.textContent || label;
               if (selectedItemText && assistiveStatusText !== selectedItemAssistiveText) {
                 this._assistiveStatusText = selectedItemText;
               }
@@ -372,11 +377,15 @@ let BXDropdown = _decorate([customElement(`${prefix}-dropdown`)], function (_ini
       kind: "method",
       key: "_navigate",
       value: function _navigate(direction) {
+        var _items$nextIndex;
         const constructor = this.constructor;
         const items = this.querySelectorAll(constructor.selectorItem);
         const highlightedItem = this.querySelector(constructor.selectorItemHighlighted);
         const highlightedIndex = indexOf(items, highlightedItem);
         let nextIndex = highlightedIndex + direction;
+        if ((_items$nextIndex = items[nextIndex]) !== null && _items$nextIndex !== void 0 && _items$nextIndex.hasAttribute('disabled')) {
+          nextIndex += direction;
+        }
         if (nextIndex < 0) {
           nextIndex = items.length - 1;
         }
@@ -406,8 +415,8 @@ let BXDropdown = _decorate([customElement(`${prefix}-dropdown`)], function (_ini
        */
     }, {
       kind: "method",
-      key: "_renderPrecedingTriggerContent",
-      value: function _renderPrecedingTriggerContent() {
+      key: "_renderPrecedingLabel",
+      value: function _renderPrecedingLabel() {
         return undefined;
       }
       /* eslint-enable class-methods-use-this */
@@ -417,17 +426,17 @@ let BXDropdown = _decorate([customElement(`${prefix}-dropdown`)], function (_ini
        */
     }, {
       kind: "method",
-      key: "_renderTriggerContent",
-      value: function _renderTriggerContent() {
+      key: "_renderLabel",
+      value: function _renderLabel() {
         const {
-          triggerContent,
+          label,
           _selectedItemContent: selectedItemContent
         } = this;
         return html(_t || (_t = _`
       <span id="trigger-label" class="${0}--list-box__label"
         >${0}</span
       >
-    `), prefix, selectedItemContent || triggerContent);
+    `), prefix, selectedItemContent || label);
       }
 
       /* eslint-disable class-methods-use-this */
@@ -436,8 +445,8 @@ let BXDropdown = _decorate([customElement(`${prefix}-dropdown`)], function (_ini
        */
     }, {
       kind: "method",
-      key: "_renderFollowingTriggerContent",
-      value: function _renderFollowingTriggerContent() {
+      key: "_renderFollowingLabel",
+      value: function _renderFollowingLabel() {
         return undefined;
       }
       /* eslint-enable class-methods-use-this */
@@ -465,17 +474,29 @@ let BXDropdown = _decorate([customElement(`${prefix}-dropdown`)], function (_ini
       }
 
       /**
-       * The color scheme.
+       * 'aria-label' of the ListBox component.
+       * Specify a label to be read by screen readers on the container node
        */
     }, {
       kind: "field",
       decorators: [property({
-        attribute: 'color-scheme',
+        type: String,
+        reflect: true,
+        attribute: 'aria-label'
+      })],
+      key: "ariaLabel",
+      value() {
+        return '';
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
         reflect: true
       })],
-      key: "colorScheme",
+      key: "direction",
       value() {
-        return DROPDOWN_COLOR_SCHEME.REGULAR;
+        return false;
       }
     }, {
       kind: "field",
@@ -496,6 +517,17 @@ let BXDropdown = _decorate([customElement(`${prefix}-dropdown`)], function (_ini
       value() {
         return '';
       }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        reflect: true,
+        attribute: 'hide-label'
+      })],
+      key: "hideLabel",
+      value() {
+        return false;
+      }
     }, {
       kind: "field",
       decorators: [property({
@@ -509,9 +541,18 @@ let BXDropdown = _decorate([customElement(`${prefix}-dropdown`)], function (_ini
     }, {
       kind: "field",
       decorators: [property({
-        attribute: 'label-text'
+        attribute: 'invalid-text'
+      })],
+      key: "invalidText",
+      value() {
+        return '';
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: 'title-text'
       })],
-      key: "labelText",
+      key: "titleText",
       value() {
         return '';
       }
@@ -532,6 +573,17 @@ let BXDropdown = _decorate([customElement(`${prefix}-dropdown`)], function (_ini
       value() {
         return false;
       }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        reflect: true,
+        attribute: 'read-only'
+      })],
+      key: "readOnly",
+      value() {
+        return false;
+      }
     }, {
       kind: "field",
       decorators: [property({
@@ -599,9 +651,9 @@ let BXDropdown = _decorate([customElement(`${prefix}-dropdown`)], function (_ini
     }, {
       kind: "field",
       decorators: [property({
-        attribute: 'trigger-content'
+        attribute: 'label'
       })],
-      key: "triggerContent",
+      key: "label",
       value() {
         return '';
       }
@@ -632,21 +684,49 @@ let BXDropdown = _decorate([customElement(`${prefix}-dropdown`)], function (_ini
       value() {
         return '';
       }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        reflect: true
+      })],
+      key: "warn",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: 'warn-text'
+      })],
+      key: "warnText",
+      value() {
+        return '';
+      }
     }, {
       kind: "method",
       key: "shouldUpdate",
       value:
+      /**
+       * Specify the direction of the dropdown. Can be either top or bottom.
+       */
       /**
        * `true` if this dropdown should be disabled.
        */
       /**
        * The helper text.
        */
+      /**
+       * Specify whether the title text should be hidden or not
+       */
       /**
        * `true` to show the UI of the invalid state.
        */
       /**
-       * The label text.
+       * Message which is displayed if the value is invalid.
+       */
+      /**
+       * Provide the title text that will be read by a screen reader when visiting this control
        */
       /**
        * Name for the dropdown in the `FormData`
@@ -654,6 +734,9 @@ let BXDropdown = _decorate([customElement(`${prefix}-dropdown`)], function (_ini
       /**
        * `true` if this dropdown should be open.
        */
+      /**
+       * Whether or not the Dropdown is readonly
+       */
       /**
        * `true` if the value is required.
        */
@@ -676,7 +759,7 @@ let BXDropdown = _decorate([customElement(`${prefix}-dropdown`)], function (_ini
        * The `aria-label` attribute for the UI indicating the open state.
        */
       /**
-       * The content of the trigger button.
+       * Generic label that will be used as the textual representation of what this field is for
        */
       /**
        * `true` if this dropdown should use the inline UI variant.
@@ -687,6 +770,12 @@ let BXDropdown = _decorate([customElement(`${prefix}-dropdown`)], function (_ini
       /**
        * The value of the selected item.
        */
+      /**
+       * Specify whether the control is currently in warning state
+       */
+      /**
+       * Provide the text that is displayed when the control is in warning state
+       */
       function shouldUpdate(changedProperties) {
         const {
           selectorItem
@@ -725,7 +814,7 @@ let BXDropdown = _decorate([customElement(`${prefix}-dropdown`)], function (_ini
         const {
           selectorItem
         } = this.constructor;
-        if (changedProperties.has('disabled')) {
+        if (changedProperties.has('disabled') && this.disabled) {
           const {
             disabled
           } = this;
@@ -744,17 +833,20 @@ let BXDropdown = _decorate([customElement(`${prefix}-dropdown`)], function (_ini
       key: "render",
       value: function render() {
         const {
-          colorScheme,
+          ariaLabel,
           disabled,
           helperText,
+          hideLabel,
           invalid,
-          labelText,
+          invalidText,
           open,
           toggleLabelClosed,
           toggleLabelOpen,
           size,
+          titleText,
           type,
-          validityMessage,
+          warn,
+          warnText,
           _assistiveStatusText: assistiveStatusText,
           _shouldTriggerBeFocusable: shouldTriggerBeFocusable,
           _handleClickInner: handleClickInner,
@@ -763,25 +855,26 @@ let BXDropdown = _decorate([customElement(`${prefix}-dropdown`)], function (_ini
           _handleSlotchangeHelperText: handleSlotchangeHelperText,
           _handleSlotchangeLabelText: handleSlotchangeLabelText,
           _slotHelperTextNode: slotHelperTextNode,
-          _slotLabelTextNode: slotLabelTextNode
+          _slotTitleTextNode: slotTitleTextNode
         } = this;
         const inline = type === DROPDOWN_TYPE.INLINE;
         const selectedItemsCount = this.querySelectorAll(this.constructor.selectorItemSelected).length;
         const classes = classMap({
           [`${prefix}--dropdown`]: true,
           [`${prefix}--list-box`]: true,
-          [`${prefix}--list-box--${colorScheme}`]: colorScheme,
           [`${prefix}--list-box--disabled`]: disabled,
           [`${prefix}--list-box--inline`]: inline,
           [`${prefix}--list-box--expanded`]: open,
           [`${prefix}--list-box--${size}`]: size,
           [`${prefix}--dropdown--invalid`]: invalid,
+          [`${prefix}--dropdown--warn`]: warn,
           [`${prefix}--dropdown--inline`]: inline,
           [`${prefix}--dropdown--selected`]: selectedItemsCount > 0
         });
         const labelClasses = classMap({
           [`${prefix}--label`]: true,
-          [`${prefix}--label--disabled`]: disabled
+          [`${prefix}--label--disabled`]: disabled,
+          [`${prefix}--visually-hidden`]: hideLabel
         });
         const helperClasses = classMap({
           [`${prefix}--form__helper-text`]: true,
@@ -793,27 +886,19 @@ let BXDropdown = _decorate([customElement(`${prefix}-dropdown`)], function (_ini
         });
         const toggleLabel = (open ? toggleLabelOpen : toggleLabelClosed) || undefined;
         const hasHelperText = helperText || slotHelperTextNode && slotHelperTextNode.assignedNodes().length > 0;
-        const hasLabelText = labelText || slotLabelTextNode && slotLabelTextNode.assignedNodes().length > 0;
-        const helper = !invalid ? html(_t2 || (_t2 = _`
-          <div
-            part="helper-text"
-            class="${0}"
-            ?hidden="${0}">
-            <slot name="helper-text" @slotchange="${0}"
-              >${0}</slot
-            >
-          </div>
-        `), helperClasses, inline || !hasHelperText, handleSlotchangeHelperText, helperText) : html(_t3 || (_t3 = _`
-          <div part="validity-message" class=${0}>
-            <slot name="validity-message">${0}</slot>
-          </div>
-        `), `${prefix}--form-requirement`, validityMessage);
+        const hasTitleText = titleText || slotTitleTextNode && slotTitleTextNode.assignedNodes().length > 0;
         const validityIcon = !invalid ? undefined : WarningFilled16({
           class: `${prefix}--list-box__invalid-icon`,
           'aria-label': toggleLabel
         });
-        const menuBody = !open ? undefined : html(_t4 || (_t4 = _`
+        const warningIcon = !warn || invalid && warn ? undefined : WarningAltFilled16({
+          class: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`,
+          'aria-label': toggleLabel
+        });
+        const helperMessage = invalid ? invalidText : warn ? warnText : helperText;
+        const menuBody = !open ? undefined : html(_t2 || (_t2 = _`
           <div
+            aria-label="${0}"
             id="menu-body"
             part="menu-body"
             class="${0}--list-box__menu"
@@ -821,13 +906,13 @@ let BXDropdown = _decorate([customElement(`${prefix}-dropdown`)], function (_ini
             tabindex="-1">
             <slot></slot>
           </div>
-        `), prefix);
-        return html(_t5 || (_t5 = _`
+        `), ariaLabel, prefix);
+        return html(_t3 || (_t3 = _`
       <label
-        part="label-text"
+        part="title-text"
         class="${0}"
         ?hidden="${0}">
-        <slot name="label-text" @slotchange="${0}"
+        <slot name="title-text" @slotchange="${0}"
           >${0}</slot
         >
       </label>
@@ -838,7 +923,6 @@ let BXDropdown = _decorate([customElement(`${prefix}-dropdown`)], function (_ini
         @click=${0}
         @keydown=${0}
         @keypress=${0}>
-        ${0}
         <div
           part="trigger-button"
           role="${0}"
@@ -849,14 +933,21 @@ let BXDropdown = _decorate([customElement(`${prefix}-dropdown`)], function (_ini
           aria-haspopup="listbox"
           aria-owns="menu-body"
           aria-controls="menu-body">
-          ${0}${0}${0}
-          <div class="${0}">
+          ${0}${0}${0}${0}${0}
+          <div id="trigger-caret" class="${0}">
             ${0}
           </div>
         </div>
         ${0}
       </div>
-      ${0}
+      <div
+        part="helper-text"
+        class="${0}"
+        ?hidden="${0}">
+        <slot name="helper-text" @slotchange="${0}"
+          >${0}</slot
+        >
+      </div>
       <div
         class="${0}--assistive-text"
         role="status"
@@ -864,9 +955,9 @@ let BXDropdown = _decorate([customElement(`${prefix}-dropdown`)], function (_ini
         aria-relevant="additions text">
         ${0}
       </div>
-    `), labelClasses, !hasLabelText, handleSlotchangeLabelText, labelText, classes, invalid, handleClickInner, handleKeydownInner, handleKeypressInner, validityIcon, ifDefined(!shouldTriggerBeFocusable ? undefined : 'button'), prefix, ifDefined(!shouldTriggerBeFocusable ? undefined : '0'), String(open), this._renderPrecedingTriggerContent(), this._renderTriggerContent(), this._renderFollowingTriggerContent(), iconContainerClasses, ChevronDown16({
+    `), labelClasses, !hasTitleText, handleSlotchangeLabelText, titleText, classes, invalid, handleClickInner, handleKeydownInner, handleKeypressInner, ifDefined(!shouldTriggerBeFocusable ? undefined : 'button'), prefix, ifDefined(!shouldTriggerBeFocusable ? undefined : '0'), String(open), this._renderPrecedingLabel(), this._renderLabel(), validityIcon, warningIcon, this._renderFollowingLabel(), iconContainerClasses, ChevronDown16({
           'aria-label': toggleLabel
-        }), menuBody, helper, prefix, assistiveStatusText);
+        }), menuBody, helperClasses, inline && !warn && !invalid || !hasHelperText, handleSlotchangeHelperText, helperMessage, prefix, assistiveStatusText);
       }
 
       /**
@@ -997,5 +1088,5 @@ let BXDropdown = _decorate([customElement(`${prefix}-dropdown`)], function (_ini
     }]
   };
 }, ValidityMixin(HostListenerMixin(FormMixin(FocusMixin(LitElement)))));
-export default BXDropdown;
+export default CDSDropdown;
 //# sourceMappingURL=dropdown.js.map