@carbon/web-components 2.0.0-rc.1 → 2.0.0-rc.3

package/es/components/combo-box/combo-box.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/combo-box/combo-box.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,cAAc,EAAQ,MAAM,KAAK,CAAC;AAK3C,OAAO,WAAyC,MAAM,sBAAsB,CAAC;AAC7E,OAAO,eAAe,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAEzE;;;;;;;;;;;;GAYG;AACH,cACM,WAAY,SAAQ,WAAW;IACnC;;OAEG;IACH,SAAS,CAAC,iBAAiB,SAAM;IAEjC,SAAS,CAAC,yBAAyB,UAAS;IAE5C;;OAEG;IAEH,OAAO,CAAC,gBAAgB,CAAoB;IAE5C;;OAEG;IAEH,OAAO,CAAC,SAAS,CAAe;IAEhC;;OAEG;IAEH,OAAO,CAAC,oBAAoB,CAAe;IAE3C;;;OAGG;IACH,SAAS,CAAC,sBAAsB,CAAC,IAAI,KAAA;IAQrC;;;;;;OAMG;IACH,SAAS,CAAC,mBAAmB,CAC3B,IAAI,EAAE,eAAe,EACrB,SAAS,EAAE,MAAM,GAChB,OAAO;IAOV;;OAEG;IACH,SAAS,CAAC,YAAY;IA0CtB,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,UAAU;IAS7C,SAAS,CAAC,oBAAoB,CAAC,KAAK,EAAE,aAAa;IAenD;;OAEG;IACH,SAAS,CAAC,8BAA8B;IAcxC,SAAS,CAAC,8BAA8B,CAAC,IAAI,CAAC,EAAE,eAAe;IAiB/D,SAAS,CAAC,mBAAmB,CAAC,YAAY,CAAC,EAAE,eAAe;IAiB5D,SAAS,CAAC,YAAY,IAAI,cAAc;IAgCxC,SAAS,CAAC,qBAAqB,IAAI,cAAc,GAAG,IAAI;IAuBxD;;OAEG;IAEH,mBAAmB,SAAM;IAEzB;;OAEG;IAEH,UAAU,SAAM;IAEhB;;OAEG;IAEH,WAAW,EAAG,CAAC,IAAI,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC;IAEpE,YAAY,CAAC,iBAAiB,KAAA;IAS9B,OAAO;IAQP,MAAM,CAAC,YAAY,cAAsB;IAEzC;;OAEG;IACH,MAAM,KAAK,uBAAuB,WAEjC;IAED;;OAEG;IACH,MAAM,KAAK,YAAY,WAEtB;IAED;;OAEG;IACH,MAAM,KAAK,oBAAoB,WAE9B;IAED;;;OAGG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED;;;OAGG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,WAAW,CAAC","file":"combo-box.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 { TemplateResult, html } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport Close16 from '@carbon/icons/lib/close/16';\nimport { prefix } from '../../globals/settings';\nimport { findIndex, forEach } from '../../globals/internal/collection-helpers';\nimport CDSDropdown, { DROPDOWN_KEYBOARD_ACTION } from '../dropdown/dropdown';\nimport CDSComboBoxItem from './combo-box-item';\nimport styles from './combo-box.scss';\n\nexport { DROPDOWN_DIRECTION, DROPDOWN_SIZE } from '../dropdown/dropdown';\n\n/**\n * Combo box.\n *\n * @element cds-combo-box\n * @fires cds-combo-box-beingselected\n *   The custom event fired before a combo box item is selected upon a user gesture.\n *   Cancellation of this event stops changing the user-initiated selection.\n * @fires cds-combo-box-beingtoggled\n *   The custom event fired before the open state of this combo box is toggled upon a user gesture.\n *   Cancellation of this event stops the user-initiated toggling.\n * @fires cds-combo-box-selected - The custom event fired after a combo box item is selected upon a user gesture.\n * @fires cds-combo-box-toggled - The custom event fired after the open state of this combo box is toggled upon a user gesture.\n */\n@customElement(`${prefix}-combo-box`)\nclass CDSComboBox extends CDSDropdown {\n  /**\n   * The text content that should be set to the `<input>` for filtering.\n   */\n  protected _filterInputValue = '';\n\n  protected _shouldTriggerBeFocusable = false;\n\n  /**\n   * The `<input>` for filtering.\n   */\n  @query('input')\n  private _filterInputNode!: HTMLInputElement;\n\n  /**\n   * The menu containing all selectable items.\n   */\n  @query('#menu-body')\n  private _itemMenu!: HTMLElement;\n\n  /**\n   * The selection button.\n   */\n  @query('#selection-button')\n  private _selectionButtonNode!: HTMLElement;\n\n  /**\n   * @param item A combo box item.\n   * @returns `true` if the given combo box item matches the query text user types.\n   */\n  protected _testItemWithQueryText(item) {\n    return (this.itemMatches || this._defaultItemMatches)(\n      item,\n      this._filterInputNode.value\n    );\n  }\n\n  /* eslint-disable class-methods-use-this */\n  /**\n   * The default item matching callback.\n   *\n   * @param item The combo box item.\n   * @param queryText The query text user types.\n   * @returns `true` if the given combo box item matches the given query text.\n   */\n  protected _defaultItemMatches(\n    item: CDSComboBoxItem,\n    queryText: string\n  ): boolean {\n    return (\n      item.textContent!.toLowerCase().indexOf(queryText.toLowerCase()) >= 0\n    );\n  }\n  /* eslint-enable class-methods-use-this */\n\n  /**\n   * Handles `input` event on the `<input>` for filtering.\n   */\n  protected _handleInput() {\n    if (this._filterInputValue.length != 0) {\n      this.setAttribute('isClosable', '');\n    } else {\n      this.removeAttribute('isClosable');\n    }\n\n    const items = this.querySelectorAll(\n      (this.constructor as typeof CDSComboBox).selectorItem\n    );\n    const index = !this._filterInputNode.value\n      ? -1\n      : findIndex(items, this._testItemWithQueryText, this);\n    forEach(items, (item, i) => {\n      if (i === index) {\n        const menuRect = this._itemMenu?.getBoundingClientRect();\n        const itemRect = item.getBoundingClientRect();\n\n        if (menuRect && itemRect) {\n          const isViewable =\n            menuRect!.top <= itemRect?.top &&\n            itemRect?.bottom <= menuRect?.top + this._itemMenu!.clientHeight;\n          if (!isViewable) {\n            const scrollTop = itemRect?.top - menuRect?.top;\n            const scrollBot = itemRect?.bottom - menuRect?.bottom;\n\n            if (Math.abs(scrollTop) < Math.abs(scrollBot)) {\n              this._itemMenu!.scrollTop += scrollTop;\n            } else {\n              this._itemMenu!.scrollTop += scrollBot;\n            }\n          }\n        }\n      }\n      (item as CDSComboBoxItem).highlighted = i === index;\n    });\n    const { _filterInputNode: filterInput } = this;\n    this._filterInputValue = !filterInput ? '' : filterInput.value;\n    this.open = true;\n    this.requestUpdate(); // If the only change is to `_filterInputValue`, auto-update doesn't happen\n  }\n\n  protected _handleClickInner(event: MouseEvent) {\n    const { target } = event as any;\n    if (this._selectionButtonNode?.contains(target)) {\n      this._handleUserInitiatedClearInput();\n    } else {\n      super._handleClickInner(event);\n    }\n  }\n\n  protected _handleKeypressInner(event: KeyboardEvent) {\n    const { key } = event;\n    const action = (this.constructor as typeof CDSDropdown).getAction(key);\n    const { TRIGGERING } = DROPDOWN_KEYBOARD_ACTION;\n    if (\n      this._selectionButtonNode?.contains(event.target as Node) &&\n      // Space key should be handled by `<input>` unless \"clear selection\" button has focus\n      (action === TRIGGERING || key === ' ')\n    ) {\n      this._handleUserInitiatedClearInput();\n    } else {\n      super._handleKeypressInner(event);\n    }\n  }\n\n  /**\n   * Handles user-initiated clearing the `<input>` for filtering.\n   */\n  protected _handleUserInitiatedClearInput() {\n    forEach(\n      this.querySelectorAll(\n        (this.constructor as typeof CDSComboBox).selectorItem\n      ),\n      (item) => {\n        (item as CDSComboBoxItem).highlighted = false;\n      }\n    );\n    this._filterInputValue = '';\n    this._filterInputNode.focus();\n    this._handleUserInitiatedSelectItem();\n  }\n\n  protected _handleUserInitiatedSelectItem(item?: CDSComboBoxItem) {\n    if (item && !this._selectionShouldChange(item)) {\n      // Escape hatch for `shouldUpdate()` logic that updates `._filterInputValue()` when selection changes,\n      // given we want to update the `<input>` and close the dropdown even if selection doesn't update.\n      // Use case:\n      // 1. Select the 2nd item in combo box drop down\n      // 2. Type some text in the `<input>`\n      // 3. Re-select the 2nd item in combo box drop down,\n      //    the `<input>` has to updated with the 2nd item and the dropdown should be closed,\n      //    even if there is no change in the selected value\n      this._filterInputValue = item.textContent || '';\n      this.open = false;\n      this.requestUpdate();\n    }\n    super._handleUserInitiatedSelectItem(item);\n  }\n\n  protected _selectionDidChange(itemToSelect?: CDSComboBoxItem) {\n    this.value = !itemToSelect ? '' : itemToSelect.value;\n    forEach(\n      this.querySelectorAll(\n        (this.constructor as typeof CDSDropdown).selectorItemSelected\n      ),\n      (item) => {\n        (item as CDSComboBoxItem).selected = false;\n      }\n    );\n    if (itemToSelect) {\n      itemToSelect.selected = true;\n      this._assistiveStatusText = this.selectedItemAssistiveText;\n    }\n    this._handleUserInitiatedToggle(false);\n  }\n\n  protected _renderLabel(): TemplateResult {\n    const {\n      disabled,\n      inputLabel,\n      label,\n      readOnly,\n      value,\n      _filterInputValue: filterInputValue,\n      _handleInput: handleInput,\n    } = this;\n\n    const inputClasses = classMap({\n      [`${prefix}--text-input`]: true,\n      [`${prefix}--text-input--empty`]: !value,\n    });\n\n    return html`\n      <input\n        id=\"trigger-label\"\n        class=\"${inputClasses}\"\n        ?disabled=${disabled}\n        placeholder=\"${label}\"\n        .value=${filterInputValue}\n        role=\"combobox\"\n        aria-label=\"${inputLabel}\"\n        aria-controls=\"menu-body\"\n        aria-autocomplete=\"list\"\n        ?readonly=${readOnly}\n        @input=${handleInput} />\n    `;\n  }\n\n  protected _renderFollowingLabel(): TemplateResult | void {\n    const { clearSelectionLabel, _filterInputValue: filterInputValue } = this;\n\n    if (filterInputValue.length != 0) {\n      this.setAttribute('isClosable', '');\n    } else {\n      this.removeAttribute('isClosable');\n    }\n\n    return filterInputValue.length === 0\n      ? undefined\n      : html`\n          <div\n            id=\"selection-button\"\n            role=\"button\"\n            class=\"${prefix}--list-box__selection\"\n            tabindex=\"0\"\n            title=\"${clearSelectionLabel}\">\n            ${Close16({ 'aria-label': clearSelectionLabel })}\n          </div>\n        `;\n  }\n\n  /**\n   * The `aria-label` attribute for the icon to clear selection.\n   */\n  @property({ attribute: 'clear-selection-label' })\n  clearSelectionLabel = '';\n\n  /**\n   * The `aria-label` attribute for the `<input>` for filtering.\n   */\n  @property({ attribute: 'input-label' })\n  inputLabel = '';\n\n  /**\n   * The custom item matching callback.\n   */\n  @property({ attribute: false })\n  itemMatches!: (item: CDSComboBoxItem, queryText: string) => boolean;\n\n  shouldUpdate(changedProperties) {\n    super.shouldUpdate(changedProperties);\n    const { _selectedItemContent: selectedItemContent } = this;\n    if (selectedItemContent && changedProperties.has('value')) {\n      this._filterInputValue = selectedItemContent?.textContent || '';\n    }\n    return true;\n  }\n\n  updated() {\n    const { _listBoxNode: listBoxNode } = this;\n    if (listBoxNode) {\n      listBoxNode.classList.add(`${prefix}--combo-box`);\n    }\n  }\n\n  // For combo box, open/selection with space key is disabled given the input box should take it over\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}-combo-box-item[highlighted]`;\n  }\n\n  /**\n   * A selector that will return combo box items.\n   */\n  static get selectorItem() {\n    return `${prefix}-combo-box-item`;\n  }\n\n  /**\n   * A selector that will return selected items.\n   */\n  static get selectorItemSelected() {\n    return `${prefix}-combo-box-item[selected]`;\n  }\n\n  /**\n   * The name of the custom event fired before this combo box item is being toggled upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of toggling this combo box item.\n   */\n  static get eventBeforeToggle() {\n    return `${prefix}-combo-box-beingtoggled`;\n  }\n\n  /**\n   * The name of the custom event fired after this combo box item is toggled upon a user gesture.\n   */\n  static get eventToggle() {\n    return `${prefix}-combo-box-toggled`;\n  }\n\n  /**\n   * The name of the custom event fired before a combo box 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}-combo-box-beingselected`;\n  }\n\n  /**\n   * The name of the custom event fired after a a combo box item is selected upon a user gesture.\n   */\n  static get eventSelect() {\n    return `${prefix}-combo-box-selected`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSComboBox;\n"]}
+{"version":3,"sources":["components/combo-box/combo-box.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,cAAc,EAAQ,MAAM,KAAK,CAAC;AAK3C,OAAO,WAAyC,MAAM,sBAAsB,CAAC;AAC7E,OAAO,eAAe,MAAM,kBAAkB,CAAC;AAI/C,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAEzE;;;;;;;;;;;;GAYG;AACH,cACM,WAAY,SAAQ,WAAW;IACnC;;OAEG;IACH,SAAS,CAAC,iBAAiB,SAAM;IAEjC,SAAS,CAAC,yBAAyB,UAAS;IAE5C;;OAEG;IAEH,OAAO,CAAC,gBAAgB,CAAoB;IAE5C;;OAEG;IAEH,OAAO,CAAC,SAAS,CAAe;IAEhC;;OAEG;IAEH,OAAO,CAAC,oBAAoB,CAAe;IAE3C;;;OAGG;IACH,SAAS,CAAC,sBAAsB,CAAC,IAAI,KAAA;IAQrC;;;;;;OAMG;IACH,SAAS,CAAC,mBAAmB,CAC3B,IAAI,EAAE,eAAe,EACrB,SAAS,EAAE,MAAM,GAChB,OAAO;IAOV;;OAEG;IACH,SAAS,CAAC,YAAY;IA0CtB,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,UAAU;IAS7C,SAAS,CAAC,oBAAoB,CAAC,KAAK,EAAE,aAAa;IAenD;;OAEG;IACH,SAAS,CAAC,8BAA8B;IAcxC,SAAS,CAAC,8BAA8B,CAAC,IAAI,CAAC,EAAE,eAAe;IAiB/D,SAAS,CAAC,mBAAmB,CAAC,YAAY,CAAC,EAAE,eAAe;IAiB5D,SAAS,CAAC,YAAY,IAAI,cAAc;IAgCxC,SAAS,CAAC,qBAAqB,IAAI,cAAc,GAAG,IAAI;IAuBxD;;OAEG;IAEH,mBAAmB,SAAM;IAEzB;;OAEG;IAEH,UAAU,SAAM;IAEhB;;OAEG;IAEH,WAAW,EAAG,CAAC,IAAI,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC;IAEpE,YAAY,CAAC,iBAAiB,KAAA;IAS9B,OAAO;IAQP,MAAM,CAAC,YAAY,cAAsB;IAEzC;;OAEG;IACH,MAAM,KAAK,uBAAuB,WAEjC;IAED;;OAEG;IACH,MAAM,KAAK,YAAY,WAEtB;IAED;;OAEG;IACH,MAAM,KAAK,oBAAoB,WAE9B;IAED;;;OAGG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED;;;OAGG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,WAAW,CAAC","file":"combo-box.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 { TemplateResult, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport Close16 from '@carbon/icons/lib/close/16';\nimport { prefix } from '../../globals/settings';\nimport { findIndex, forEach } from '../../globals/internal/collection-helpers';\nimport CDSDropdown, { DROPDOWN_KEYBOARD_ACTION } from '../dropdown/dropdown';\nimport CDSComboBoxItem from './combo-box-item';\nimport styles from './combo-box.scss';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { DROPDOWN_DIRECTION, DROPDOWN_SIZE } from '../dropdown/dropdown';\n\n/**\n * Combo box.\n *\n * @element cds-combo-box\n * @fires cds-combo-box-beingselected\n *   The custom event fired before a combo box item is selected upon a user gesture.\n *   Cancellation of this event stops changing the user-initiated selection.\n * @fires cds-combo-box-beingtoggled\n *   The custom event fired before the open state of this combo box is toggled upon a user gesture.\n *   Cancellation of this event stops the user-initiated toggling.\n * @fires cds-combo-box-selected - The custom event fired after a combo box item is selected upon a user gesture.\n * @fires cds-combo-box-toggled - The custom event fired after the open state of this combo box is toggled upon a user gesture.\n */\n@customElement(`${prefix}-combo-box`)\nclass CDSComboBox extends CDSDropdown {\n  /**\n   * The text content that should be set to the `<input>` for filtering.\n   */\n  protected _filterInputValue = '';\n\n  protected _shouldTriggerBeFocusable = false;\n\n  /**\n   * The `<input>` for filtering.\n   */\n  @query('input')\n  private _filterInputNode!: HTMLInputElement;\n\n  /**\n   * The menu containing all selectable items.\n   */\n  @query('#menu-body')\n  private _itemMenu!: HTMLElement;\n\n  /**\n   * The selection button.\n   */\n  @query('#selection-button')\n  private _selectionButtonNode!: HTMLElement;\n\n  /**\n   * @param item A combo box item.\n   * @returns `true` if the given combo box item matches the query text user types.\n   */\n  protected _testItemWithQueryText(item) {\n    return (this.itemMatches || this._defaultItemMatches)(\n      item,\n      this._filterInputNode.value\n    );\n  }\n\n  /* eslint-disable class-methods-use-this */\n  /**\n   * The default item matching callback.\n   *\n   * @param item The combo box item.\n   * @param queryText The query text user types.\n   * @returns `true` if the given combo box item matches the given query text.\n   */\n  protected _defaultItemMatches(\n    item: CDSComboBoxItem,\n    queryText: string\n  ): boolean {\n    return (\n      item.textContent!.toLowerCase().indexOf(queryText.toLowerCase()) >= 0\n    );\n  }\n  /* eslint-enable class-methods-use-this */\n\n  /**\n   * Handles `input` event on the `<input>` for filtering.\n   */\n  protected _handleInput() {\n    if (this._filterInputValue.length != 0) {\n      this.setAttribute('isClosable', '');\n    } else {\n      this.removeAttribute('isClosable');\n    }\n\n    const items = this.querySelectorAll(\n      (this.constructor as typeof CDSComboBox).selectorItem\n    );\n    const index = !this._filterInputNode.value\n      ? -1\n      : findIndex(items, this._testItemWithQueryText, this);\n    forEach(items, (item, i) => {\n      if (i === index) {\n        const menuRect = this._itemMenu?.getBoundingClientRect();\n        const itemRect = item.getBoundingClientRect();\n\n        if (menuRect && itemRect) {\n          const isViewable =\n            menuRect!.top <= itemRect?.top &&\n            itemRect?.bottom <= menuRect?.top + this._itemMenu!.clientHeight;\n          if (!isViewable) {\n            const scrollTop = itemRect?.top - menuRect?.top;\n            const scrollBot = itemRect?.bottom - menuRect?.bottom;\n\n            if (Math.abs(scrollTop) < Math.abs(scrollBot)) {\n              this._itemMenu!.scrollTop += scrollTop;\n            } else {\n              this._itemMenu!.scrollTop += scrollBot;\n            }\n          }\n        }\n      }\n      (item as CDSComboBoxItem).highlighted = i === index;\n    });\n    const { _filterInputNode: filterInput } = this;\n    this._filterInputValue = !filterInput ? '' : filterInput.value;\n    this.open = true;\n    this.requestUpdate(); // If the only change is to `_filterInputValue`, auto-update doesn't happen\n  }\n\n  protected _handleClickInner(event: MouseEvent) {\n    const { target } = event as any;\n    if (this._selectionButtonNode?.contains(target)) {\n      this._handleUserInitiatedClearInput();\n    } else {\n      super._handleClickInner(event);\n    }\n  }\n\n  protected _handleKeypressInner(event: KeyboardEvent) {\n    const { key } = event;\n    const action = (this.constructor as typeof CDSDropdown).getAction(key);\n    const { TRIGGERING } = DROPDOWN_KEYBOARD_ACTION;\n    if (\n      this._selectionButtonNode?.contains(event.target as Node) &&\n      // Space key should be handled by `<input>` unless \"clear selection\" button has focus\n      (action === TRIGGERING || key === ' ')\n    ) {\n      this._handleUserInitiatedClearInput();\n    } else {\n      super._handleKeypressInner(event);\n    }\n  }\n\n  /**\n   * Handles user-initiated clearing the `<input>` for filtering.\n   */\n  protected _handleUserInitiatedClearInput() {\n    forEach(\n      this.querySelectorAll(\n        (this.constructor as typeof CDSComboBox).selectorItem\n      ),\n      (item) => {\n        (item as CDSComboBoxItem).highlighted = false;\n      }\n    );\n    this._filterInputValue = '';\n    this._filterInputNode.focus();\n    this._handleUserInitiatedSelectItem();\n  }\n\n  protected _handleUserInitiatedSelectItem(item?: CDSComboBoxItem) {\n    if (item && !this._selectionShouldChange(item)) {\n      // Escape hatch for `shouldUpdate()` logic that updates `._filterInputValue()` when selection changes,\n      // given we want to update the `<input>` and close the dropdown even if selection doesn't update.\n      // Use case:\n      // 1. Select the 2nd item in combo box drop down\n      // 2. Type some text in the `<input>`\n      // 3. Re-select the 2nd item in combo box drop down,\n      //    the `<input>` has to updated with the 2nd item and the dropdown should be closed,\n      //    even if there is no change in the selected value\n      this._filterInputValue = item.textContent || '';\n      this.open = false;\n      this.requestUpdate();\n    }\n    super._handleUserInitiatedSelectItem(item);\n  }\n\n  protected _selectionDidChange(itemToSelect?: CDSComboBoxItem) {\n    this.value = !itemToSelect ? '' : itemToSelect.value;\n    forEach(\n      this.querySelectorAll(\n        (this.constructor as typeof CDSDropdown).selectorItemSelected\n      ),\n      (item) => {\n        (item as CDSComboBoxItem).selected = false;\n      }\n    );\n    if (itemToSelect) {\n      itemToSelect.selected = true;\n      this._assistiveStatusText = this.selectedItemAssistiveText;\n    }\n    this._handleUserInitiatedToggle(false);\n  }\n\n  protected _renderLabel(): TemplateResult {\n    const {\n      disabled,\n      inputLabel,\n      label,\n      readOnly,\n      value,\n      _filterInputValue: filterInputValue,\n      _handleInput: handleInput,\n    } = this;\n\n    const inputClasses = classMap({\n      [`${prefix}--text-input`]: true,\n      [`${prefix}--text-input--empty`]: !value,\n    });\n\n    return html`\n      <input\n        id=\"trigger-label\"\n        class=\"${inputClasses}\"\n        ?disabled=${disabled}\n        placeholder=\"${label}\"\n        .value=${filterInputValue}\n        role=\"combobox\"\n        aria-label=\"${inputLabel}\"\n        aria-controls=\"menu-body\"\n        aria-autocomplete=\"list\"\n        ?readonly=${readOnly}\n        @input=${handleInput} />\n    `;\n  }\n\n  protected _renderFollowingLabel(): TemplateResult | void {\n    const { clearSelectionLabel, _filterInputValue: filterInputValue } = this;\n\n    if (filterInputValue.length != 0) {\n      this.setAttribute('isClosable', '');\n    } else {\n      this.removeAttribute('isClosable');\n    }\n\n    return filterInputValue.length === 0\n      ? undefined\n      : html`\n          <div\n            id=\"selection-button\"\n            role=\"button\"\n            class=\"${prefix}--list-box__selection\"\n            tabindex=\"0\"\n            title=\"${clearSelectionLabel}\">\n            ${Close16({ 'aria-label': clearSelectionLabel })}\n          </div>\n        `;\n  }\n\n  /**\n   * The `aria-label` attribute for the icon to clear selection.\n   */\n  @property({ attribute: 'clear-selection-label' })\n  clearSelectionLabel = '';\n\n  /**\n   * The `aria-label` attribute for the `<input>` for filtering.\n   */\n  @property({ attribute: 'input-label' })\n  inputLabel = '';\n\n  /**\n   * The custom item matching callback.\n   */\n  @property({ attribute: false })\n  itemMatches!: (item: CDSComboBoxItem, queryText: string) => boolean;\n\n  shouldUpdate(changedProperties) {\n    super.shouldUpdate(changedProperties);\n    const { _selectedItemContent: selectedItemContent } = this;\n    if (selectedItemContent && changedProperties.has('value')) {\n      this._filterInputValue = selectedItemContent?.textContent || '';\n    }\n    return true;\n  }\n\n  updated() {\n    const { _listBoxNode: listBoxNode } = this;\n    if (listBoxNode) {\n      listBoxNode.classList.add(`${prefix}--combo-box`);\n    }\n  }\n\n  // For combo box, open/selection with space key is disabled given the input box should take it over\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}-combo-box-item[highlighted]`;\n  }\n\n  /**\n   * A selector that will return combo box items.\n   */\n  static get selectorItem() {\n    return `${prefix}-combo-box-item`;\n  }\n\n  /**\n   * A selector that will return selected items.\n   */\n  static get selectorItemSelected() {\n    return `${prefix}-combo-box-item[selected]`;\n  }\n\n  /**\n   * The name of the custom event fired before this combo box item is being toggled upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of toggling this combo box item.\n   */\n  static get eventBeforeToggle() {\n    return `${prefix}-combo-box-beingtoggled`;\n  }\n\n  /**\n   * The name of the custom event fired after this combo box item is toggled upon a user gesture.\n   */\n  static get eventToggle() {\n    return `${prefix}-combo-box-toggled`;\n  }\n\n  /**\n   * The name of the custom event fired before a combo box 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}-combo-box-beingselected`;\n  }\n\n  /**\n   * The name of the custom event fired after a a combo box item is selected upon a user gesture.\n   */\n  static get eventSelect() {\n    return `${prefix}-combo-box-selected`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSComboBox;\n"]}

package/es/components/combo-box/combo-box.js

@@ -15,12 +15,13 @@ let _ = t => t,
 
 import { classMap } from 'lit/directives/class-map.js';
 import { html } from 'lit';
-import { property, customElement, query } from 'lit/decorators.js';
+import { property, query } from 'lit/decorators.js';
 import Close16 from "../../icons/close/16";
 import { prefix } from '../../globals/settings';
 import { findIndex, forEach } from '../../globals/internal/collection-helpers';
 import CDSDropdown, { DROPDOWN_KEYBOARD_ACTION } from '../dropdown/dropdown';
 import styles from "././combo-box.css.js";
+import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 export { DROPDOWN_DIRECTION, DROPDOWN_SIZE } from '../dropdown/dropdown';
 
 /**

package/es/components/combo-box/combo-box.js.map

@@ -1 +1 @@
-{"version":3,"file":"combo-box.js","names":["classMap","html","property","customElement","query","Close16","prefix","findIndex","forEach","CDSDropdown","DROPDOWN_KEYBOARD_ACTION","styles","DROPDOWN_DIRECTION","DROPDOWN_SIZE","CDSComboBox","_decorate","_initialize","_CDSDropdown","constructor","args","F","d","kind","key","value","decorators","_testItemWithQueryText","item","itemMatches","_defaultItemMatches","_filterInputNode","queryText","textContent","toLowerCase","indexOf","_handleInput","_filterInputValue","length","setAttribute","removeAttribute","items","querySelectorAll","selectorItem","index","i","_this$_itemMenu","menuRect","_itemMenu","getBoundingClientRect","itemRect","isViewable","top","bottom","clientHeight","scrollTop","scrollBot","Math","abs","highlighted","filterInput","open","requestUpdate","_handleClickInner","event","_this$_selectionButto","target","_selectionButtonNode","contains","_handleUserInitiatedClearInput","_get","_getPrototypeOf","prototype","call","_handleKeypressInner","_this$_selectionButto2","action","getAction","TRIGGERING","focus","_handleUserInitiatedSelectItem","_selectionShouldChange","_selectionDidChange","itemToSelect","selectorItemSelected","selected","_assistiveStatusText","selectedItemAssistiveText","_handleUserInitiatedToggle","_renderLabel","disabled","inputLabel","label","readOnly","filterInputValue","handleInput","inputClasses","_t","_","_renderFollowingLabel","clearSelectionLabel","undefined","_t2","attribute","shouldUpdate","changedProperties","_selectedItemContent","selectedItemContent","has","updated","_listBoxNode","listBoxNode","classList","add","static","Set","selectorItemHighlighted","eventBeforeToggle","eventToggle","eventBeforeSelect","eventSelect"],"sources":["components/combo-box/combo-box.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 { TemplateResult, html } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport Close16 from '@carbon/icons/lib/close/16';\nimport { prefix } from '../../globals/settings';\nimport { findIndex, forEach } from '../../globals/internal/collection-helpers';\nimport CDSDropdown, { DROPDOWN_KEYBOARD_ACTION } from '../dropdown/dropdown';\nimport CDSComboBoxItem from './combo-box-item';\nimport styles from './combo-box.scss';\n\nexport { DROPDOWN_DIRECTION, DROPDOWN_SIZE } from '../dropdown/dropdown';\n\n/**\n * Combo box.\n *\n * @element cds-combo-box\n * @fires cds-combo-box-beingselected\n *   The custom event fired before a combo box item is selected upon a user gesture.\n *   Cancellation of this event stops changing the user-initiated selection.\n * @fires cds-combo-box-beingtoggled\n *   The custom event fired before the open state of this combo box is toggled upon a user gesture.\n *   Cancellation of this event stops the user-initiated toggling.\n * @fires cds-combo-box-selected - The custom event fired after a combo box item is selected upon a user gesture.\n * @fires cds-combo-box-toggled - The custom event fired after the open state of this combo box is toggled upon a user gesture.\n */\n@customElement(`${prefix}-combo-box`)\nclass CDSComboBox extends CDSDropdown {\n  /**\n   * The text content that should be set to the `<input>` for filtering.\n   */\n  protected _filterInputValue = '';\n\n  protected _shouldTriggerBeFocusable = false;\n\n  /**\n   * The `<input>` for filtering.\n   */\n  @query('input')\n  private _filterInputNode!: HTMLInputElement;\n\n  /**\n   * The menu containing all selectable items.\n   */\n  @query('#menu-body')\n  private _itemMenu!: HTMLElement;\n\n  /**\n   * The selection button.\n   */\n  @query('#selection-button')\n  private _selectionButtonNode!: HTMLElement;\n\n  /**\n   * @param item A combo box item.\n   * @returns `true` if the given combo box item matches the query text user types.\n   */\n  protected _testItemWithQueryText(item) {\n    return (this.itemMatches || this._defaultItemMatches)(\n      item,\n      this._filterInputNode.value\n    );\n  }\n\n  /* eslint-disable class-methods-use-this */\n  /**\n   * The default item matching callback.\n   *\n   * @param item The combo box item.\n   * @param queryText The query text user types.\n   * @returns `true` if the given combo box item matches the given query text.\n   */\n  protected _defaultItemMatches(\n    item: CDSComboBoxItem,\n    queryText: string\n  ): boolean {\n    return (\n      item.textContent!.toLowerCase().indexOf(queryText.toLowerCase()) >= 0\n    );\n  }\n  /* eslint-enable class-methods-use-this */\n\n  /**\n   * Handles `input` event on the `<input>` for filtering.\n   */\n  protected _handleInput() {\n    if (this._filterInputValue.length != 0) {\n      this.setAttribute('isClosable', '');\n    } else {\n      this.removeAttribute('isClosable');\n    }\n\n    const items = this.querySelectorAll(\n      (this.constructor as typeof CDSComboBox).selectorItem\n    );\n    const index = !this._filterInputNode.value\n      ? -1\n      : findIndex(items, this._testItemWithQueryText, this);\n    forEach(items, (item, i) => {\n      if (i === index) {\n        const menuRect = this._itemMenu?.getBoundingClientRect();\n        const itemRect = item.getBoundingClientRect();\n\n        if (menuRect && itemRect) {\n          const isViewable =\n            menuRect!.top <= itemRect?.top &&\n            itemRect?.bottom <= menuRect?.top + this._itemMenu!.clientHeight;\n          if (!isViewable) {\n            const scrollTop = itemRect?.top - menuRect?.top;\n            const scrollBot = itemRect?.bottom - menuRect?.bottom;\n\n            if (Math.abs(scrollTop) < Math.abs(scrollBot)) {\n              this._itemMenu!.scrollTop += scrollTop;\n            } else {\n              this._itemMenu!.scrollTop += scrollBot;\n            }\n          }\n        }\n      }\n      (item as CDSComboBoxItem).highlighted = i === index;\n    });\n    const { _filterInputNode: filterInput } = this;\n    this._filterInputValue = !filterInput ? '' : filterInput.value;\n    this.open = true;\n    this.requestUpdate(); // If the only change is to `_filterInputValue`, auto-update doesn't happen\n  }\n\n  protected _handleClickInner(event: MouseEvent) {\n    const { target } = event as any;\n    if (this._selectionButtonNode?.contains(target)) {\n      this._handleUserInitiatedClearInput();\n    } else {\n      super._handleClickInner(event);\n    }\n  }\n\n  protected _handleKeypressInner(event: KeyboardEvent) {\n    const { key } = event;\n    const action = (this.constructor as typeof CDSDropdown).getAction(key);\n    const { TRIGGERING } = DROPDOWN_KEYBOARD_ACTION;\n    if (\n      this._selectionButtonNode?.contains(event.target as Node) &&\n      // Space key should be handled by `<input>` unless \"clear selection\" button has focus\n      (action === TRIGGERING || key === ' ')\n    ) {\n      this._handleUserInitiatedClearInput();\n    } else {\n      super._handleKeypressInner(event);\n    }\n  }\n\n  /**\n   * Handles user-initiated clearing the `<input>` for filtering.\n   */\n  protected _handleUserInitiatedClearInput() {\n    forEach(\n      this.querySelectorAll(\n        (this.constructor as typeof CDSComboBox).selectorItem\n      ),\n      (item) => {\n        (item as CDSComboBoxItem).highlighted = false;\n      }\n    );\n    this._filterInputValue = '';\n    this._filterInputNode.focus();\n    this._handleUserInitiatedSelectItem();\n  }\n\n  protected _handleUserInitiatedSelectItem(item?: CDSComboBoxItem) {\n    if (item && !this._selectionShouldChange(item)) {\n      // Escape hatch for `shouldUpdate()` logic that updates `._filterInputValue()` when selection changes,\n      // given we want to update the `<input>` and close the dropdown even if selection doesn't update.\n      // Use case:\n      // 1. Select the 2nd item in combo box drop down\n      // 2. Type some text in the `<input>`\n      // 3. Re-select the 2nd item in combo box drop down,\n      //    the `<input>` has to updated with the 2nd item and the dropdown should be closed,\n      //    even if there is no change in the selected value\n      this._filterInputValue = item.textContent || '';\n      this.open = false;\n      this.requestUpdate();\n    }\n    super._handleUserInitiatedSelectItem(item);\n  }\n\n  protected _selectionDidChange(itemToSelect?: CDSComboBoxItem) {\n    this.value = !itemToSelect ? '' : itemToSelect.value;\n    forEach(\n      this.querySelectorAll(\n        (this.constructor as typeof CDSDropdown).selectorItemSelected\n      ),\n      (item) => {\n        (item as CDSComboBoxItem).selected = false;\n      }\n    );\n    if (itemToSelect) {\n      itemToSelect.selected = true;\n      this._assistiveStatusText = this.selectedItemAssistiveText;\n    }\n    this._handleUserInitiatedToggle(false);\n  }\n\n  protected _renderLabel(): TemplateResult {\n    const {\n      disabled,\n      inputLabel,\n      label,\n      readOnly,\n      value,\n      _filterInputValue: filterInputValue,\n      _handleInput: handleInput,\n    } = this;\n\n    const inputClasses = classMap({\n      [`${prefix}--text-input`]: true,\n      [`${prefix}--text-input--empty`]: !value,\n    });\n\n    return html`\n      <input\n        id=\"trigger-label\"\n        class=\"${inputClasses}\"\n        ?disabled=${disabled}\n        placeholder=\"${label}\"\n        .value=${filterInputValue}\n        role=\"combobox\"\n        aria-label=\"${inputLabel}\"\n        aria-controls=\"menu-body\"\n        aria-autocomplete=\"list\"\n        ?readonly=${readOnly}\n        @input=${handleInput} />\n    `;\n  }\n\n  protected _renderFollowingLabel(): TemplateResult | void {\n    const { clearSelectionLabel, _filterInputValue: filterInputValue } = this;\n\n    if (filterInputValue.length != 0) {\n      this.setAttribute('isClosable', '');\n    } else {\n      this.removeAttribute('isClosable');\n    }\n\n    return filterInputValue.length === 0\n      ? undefined\n      : html`\n          <div\n            id=\"selection-button\"\n            role=\"button\"\n            class=\"${prefix}--list-box__selection\"\n            tabindex=\"0\"\n            title=\"${clearSelectionLabel}\">\n            ${Close16({ 'aria-label': clearSelectionLabel })}\n          </div>\n        `;\n  }\n\n  /**\n   * The `aria-label` attribute for the icon to clear selection.\n   */\n  @property({ attribute: 'clear-selection-label' })\n  clearSelectionLabel = '';\n\n  /**\n   * The `aria-label` attribute for the `<input>` for filtering.\n   */\n  @property({ attribute: 'input-label' })\n  inputLabel = '';\n\n  /**\n   * The custom item matching callback.\n   */\n  @property({ attribute: false })\n  itemMatches!: (item: CDSComboBoxItem, queryText: string) => boolean;\n\n  shouldUpdate(changedProperties) {\n    super.shouldUpdate(changedProperties);\n    const { _selectedItemContent: selectedItemContent } = this;\n    if (selectedItemContent && changedProperties.has('value')) {\n      this._filterInputValue = selectedItemContent?.textContent || '';\n    }\n    return true;\n  }\n\n  updated() {\n    const { _listBoxNode: listBoxNode } = this;\n    if (listBoxNode) {\n      listBoxNode.classList.add(`${prefix}--combo-box`);\n    }\n  }\n\n  // For combo box, open/selection with space key is disabled given the input box should take it over\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}-combo-box-item[highlighted]`;\n  }\n\n  /**\n   * A selector that will return combo box items.\n   */\n  static get selectorItem() {\n    return `${prefix}-combo-box-item`;\n  }\n\n  /**\n   * A selector that will return selected items.\n   */\n  static get selectorItemSelected() {\n    return `${prefix}-combo-box-item[selected]`;\n  }\n\n  /**\n   * The name of the custom event fired before this combo box item is being toggled upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of toggling this combo box item.\n   */\n  static get eventBeforeToggle() {\n    return `${prefix}-combo-box-beingtoggled`;\n  }\n\n  /**\n   * The name of the custom event fired after this combo box item is toggled upon a user gesture.\n   */\n  static get eventToggle() {\n    return `${prefix}-combo-box-toggled`;\n  }\n\n  /**\n   * The name of the custom event fired before a combo box 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}-combo-box-beingselected`;\n  }\n\n  /**\n   * The name of the custom event fired after a a combo box item is selected upon a user gesture.\n   */\n  static get eventSelect() {\n    return `${prefix}-combo-box-selected`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSComboBox;\n"],"mappings":"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"}
+{"version":3,"file":"combo-box.js","names":["classMap","html","property","query","Close16","prefix","findIndex","forEach","CDSDropdown","DROPDOWN_KEYBOARD_ACTION","styles","carbonElement","customElement","DROPDOWN_DIRECTION","DROPDOWN_SIZE","CDSComboBox","_decorate","_initialize","_CDSDropdown","constructor","args","F","d","kind","key","value","decorators","_testItemWithQueryText","item","itemMatches","_defaultItemMatches","_filterInputNode","queryText","textContent","toLowerCase","indexOf","_handleInput","_filterInputValue","length","setAttribute","removeAttribute","items","querySelectorAll","selectorItem","index","i","_this$_itemMenu","menuRect","_itemMenu","getBoundingClientRect","itemRect","isViewable","top","bottom","clientHeight","scrollTop","scrollBot","Math","abs","highlighted","filterInput","open","requestUpdate","_handleClickInner","event","_this$_selectionButto","target","_selectionButtonNode","contains","_handleUserInitiatedClearInput","_get","_getPrototypeOf","prototype","call","_handleKeypressInner","_this$_selectionButto2","action","getAction","TRIGGERING","focus","_handleUserInitiatedSelectItem","_selectionShouldChange","_selectionDidChange","itemToSelect","selectorItemSelected","selected","_assistiveStatusText","selectedItemAssistiveText","_handleUserInitiatedToggle","_renderLabel","disabled","inputLabel","label","readOnly","filterInputValue","handleInput","inputClasses","_t","_","_renderFollowingLabel","clearSelectionLabel","undefined","_t2","attribute","shouldUpdate","changedProperties","_selectedItemContent","selectedItemContent","has","updated","_listBoxNode","listBoxNode","classList","add","static","Set","selectorItemHighlighted","eventBeforeToggle","eventToggle","eventBeforeSelect","eventSelect"],"sources":["components/combo-box/combo-box.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 { TemplateResult, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport Close16 from '@carbon/icons/lib/close/16';\nimport { prefix } from '../../globals/settings';\nimport { findIndex, forEach } from '../../globals/internal/collection-helpers';\nimport CDSDropdown, { DROPDOWN_KEYBOARD_ACTION } from '../dropdown/dropdown';\nimport CDSComboBoxItem from './combo-box-item';\nimport styles from './combo-box.scss';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { DROPDOWN_DIRECTION, DROPDOWN_SIZE } from '../dropdown/dropdown';\n\n/**\n * Combo box.\n *\n * @element cds-combo-box\n * @fires cds-combo-box-beingselected\n *   The custom event fired before a combo box item is selected upon a user gesture.\n *   Cancellation of this event stops changing the user-initiated selection.\n * @fires cds-combo-box-beingtoggled\n *   The custom event fired before the open state of this combo box is toggled upon a user gesture.\n *   Cancellation of this event stops the user-initiated toggling.\n * @fires cds-combo-box-selected - The custom event fired after a combo box item is selected upon a user gesture.\n * @fires cds-combo-box-toggled - The custom event fired after the open state of this combo box is toggled upon a user gesture.\n */\n@customElement(`${prefix}-combo-box`)\nclass CDSComboBox extends CDSDropdown {\n  /**\n   * The text content that should be set to the `<input>` for filtering.\n   */\n  protected _filterInputValue = '';\n\n  protected _shouldTriggerBeFocusable = false;\n\n  /**\n   * The `<input>` for filtering.\n   */\n  @query('input')\n  private _filterInputNode!: HTMLInputElement;\n\n  /**\n   * The menu containing all selectable items.\n   */\n  @query('#menu-body')\n  private _itemMenu!: HTMLElement;\n\n  /**\n   * The selection button.\n   */\n  @query('#selection-button')\n  private _selectionButtonNode!: HTMLElement;\n\n  /**\n   * @param item A combo box item.\n   * @returns `true` if the given combo box item matches the query text user types.\n   */\n  protected _testItemWithQueryText(item) {\n    return (this.itemMatches || this._defaultItemMatches)(\n      item,\n      this._filterInputNode.value\n    );\n  }\n\n  /* eslint-disable class-methods-use-this */\n  /**\n   * The default item matching callback.\n   *\n   * @param item The combo box item.\n   * @param queryText The query text user types.\n   * @returns `true` if the given combo box item matches the given query text.\n   */\n  protected _defaultItemMatches(\n    item: CDSComboBoxItem,\n    queryText: string\n  ): boolean {\n    return (\n      item.textContent!.toLowerCase().indexOf(queryText.toLowerCase()) >= 0\n    );\n  }\n  /* eslint-enable class-methods-use-this */\n\n  /**\n   * Handles `input` event on the `<input>` for filtering.\n   */\n  protected _handleInput() {\n    if (this._filterInputValue.length != 0) {\n      this.setAttribute('isClosable', '');\n    } else {\n      this.removeAttribute('isClosable');\n    }\n\n    const items = this.querySelectorAll(\n      (this.constructor as typeof CDSComboBox).selectorItem\n    );\n    const index = !this._filterInputNode.value\n      ? -1\n      : findIndex(items, this._testItemWithQueryText, this);\n    forEach(items, (item, i) => {\n      if (i === index) {\n        const menuRect = this._itemMenu?.getBoundingClientRect();\n        const itemRect = item.getBoundingClientRect();\n\n        if (menuRect && itemRect) {\n          const isViewable =\n            menuRect!.top <= itemRect?.top &&\n            itemRect?.bottom <= menuRect?.top + this._itemMenu!.clientHeight;\n          if (!isViewable) {\n            const scrollTop = itemRect?.top - menuRect?.top;\n            const scrollBot = itemRect?.bottom - menuRect?.bottom;\n\n            if (Math.abs(scrollTop) < Math.abs(scrollBot)) {\n              this._itemMenu!.scrollTop += scrollTop;\n            } else {\n              this._itemMenu!.scrollTop += scrollBot;\n            }\n          }\n        }\n      }\n      (item as CDSComboBoxItem).highlighted = i === index;\n    });\n    const { _filterInputNode: filterInput } = this;\n    this._filterInputValue = !filterInput ? '' : filterInput.value;\n    this.open = true;\n    this.requestUpdate(); // If the only change is to `_filterInputValue`, auto-update doesn't happen\n  }\n\n  protected _handleClickInner(event: MouseEvent) {\n    const { target } = event as any;\n    if (this._selectionButtonNode?.contains(target)) {\n      this._handleUserInitiatedClearInput();\n    } else {\n      super._handleClickInner(event);\n    }\n  }\n\n  protected _handleKeypressInner(event: KeyboardEvent) {\n    const { key } = event;\n    const action = (this.constructor as typeof CDSDropdown).getAction(key);\n    const { TRIGGERING } = DROPDOWN_KEYBOARD_ACTION;\n    if (\n      this._selectionButtonNode?.contains(event.target as Node) &&\n      // Space key should be handled by `<input>` unless \"clear selection\" button has focus\n      (action === TRIGGERING || key === ' ')\n    ) {\n      this._handleUserInitiatedClearInput();\n    } else {\n      super._handleKeypressInner(event);\n    }\n  }\n\n  /**\n   * Handles user-initiated clearing the `<input>` for filtering.\n   */\n  protected _handleUserInitiatedClearInput() {\n    forEach(\n      this.querySelectorAll(\n        (this.constructor as typeof CDSComboBox).selectorItem\n      ),\n      (item) => {\n        (item as CDSComboBoxItem).highlighted = false;\n      }\n    );\n    this._filterInputValue = '';\n    this._filterInputNode.focus();\n    this._handleUserInitiatedSelectItem();\n  }\n\n  protected _handleUserInitiatedSelectItem(item?: CDSComboBoxItem) {\n    if (item && !this._selectionShouldChange(item)) {\n      // Escape hatch for `shouldUpdate()` logic that updates `._filterInputValue()` when selection changes,\n      // given we want to update the `<input>` and close the dropdown even if selection doesn't update.\n      // Use case:\n      // 1. Select the 2nd item in combo box drop down\n      // 2. Type some text in the `<input>`\n      // 3. Re-select the 2nd item in combo box drop down,\n      //    the `<input>` has to updated with the 2nd item and the dropdown should be closed,\n      //    even if there is no change in the selected value\n      this._filterInputValue = item.textContent || '';\n      this.open = false;\n      this.requestUpdate();\n    }\n    super._handleUserInitiatedSelectItem(item);\n  }\n\n  protected _selectionDidChange(itemToSelect?: CDSComboBoxItem) {\n    this.value = !itemToSelect ? '' : itemToSelect.value;\n    forEach(\n      this.querySelectorAll(\n        (this.constructor as typeof CDSDropdown).selectorItemSelected\n      ),\n      (item) => {\n        (item as CDSComboBoxItem).selected = false;\n      }\n    );\n    if (itemToSelect) {\n      itemToSelect.selected = true;\n      this._assistiveStatusText = this.selectedItemAssistiveText;\n    }\n    this._handleUserInitiatedToggle(false);\n  }\n\n  protected _renderLabel(): TemplateResult {\n    const {\n      disabled,\n      inputLabel,\n      label,\n      readOnly,\n      value,\n      _filterInputValue: filterInputValue,\n      _handleInput: handleInput,\n    } = this;\n\n    const inputClasses = classMap({\n      [`${prefix}--text-input`]: true,\n      [`${prefix}--text-input--empty`]: !value,\n    });\n\n    return html`\n      <input\n        id=\"trigger-label\"\n        class=\"${inputClasses}\"\n        ?disabled=${disabled}\n        placeholder=\"${label}\"\n        .value=${filterInputValue}\n        role=\"combobox\"\n        aria-label=\"${inputLabel}\"\n        aria-controls=\"menu-body\"\n        aria-autocomplete=\"list\"\n        ?readonly=${readOnly}\n        @input=${handleInput} />\n    `;\n  }\n\n  protected _renderFollowingLabel(): TemplateResult | void {\n    const { clearSelectionLabel, _filterInputValue: filterInputValue } = this;\n\n    if (filterInputValue.length != 0) {\n      this.setAttribute('isClosable', '');\n    } else {\n      this.removeAttribute('isClosable');\n    }\n\n    return filterInputValue.length === 0\n      ? undefined\n      : html`\n          <div\n            id=\"selection-button\"\n            role=\"button\"\n            class=\"${prefix}--list-box__selection\"\n            tabindex=\"0\"\n            title=\"${clearSelectionLabel}\">\n            ${Close16({ 'aria-label': clearSelectionLabel })}\n          </div>\n        `;\n  }\n\n  /**\n   * The `aria-label` attribute for the icon to clear selection.\n   */\n  @property({ attribute: 'clear-selection-label' })\n  clearSelectionLabel = '';\n\n  /**\n   * The `aria-label` attribute for the `<input>` for filtering.\n   */\n  @property({ attribute: 'input-label' })\n  inputLabel = '';\n\n  /**\n   * The custom item matching callback.\n   */\n  @property({ attribute: false })\n  itemMatches!: (item: CDSComboBoxItem, queryText: string) => boolean;\n\n  shouldUpdate(changedProperties) {\n    super.shouldUpdate(changedProperties);\n    const { _selectedItemContent: selectedItemContent } = this;\n    if (selectedItemContent && changedProperties.has('value')) {\n      this._filterInputValue = selectedItemContent?.textContent || '';\n    }\n    return true;\n  }\n\n  updated() {\n    const { _listBoxNode: listBoxNode } = this;\n    if (listBoxNode) {\n      listBoxNode.classList.add(`${prefix}--combo-box`);\n    }\n  }\n\n  // For combo box, open/selection with space key is disabled given the input box should take it over\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}-combo-box-item[highlighted]`;\n  }\n\n  /**\n   * A selector that will return combo box items.\n   */\n  static get selectorItem() {\n    return `${prefix}-combo-box-item`;\n  }\n\n  /**\n   * A selector that will return selected items.\n   */\n  static get selectorItemSelected() {\n    return `${prefix}-combo-box-item[selected]`;\n  }\n\n  /**\n   * The name of the custom event fired before this combo box item is being toggled upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of toggling this combo box item.\n   */\n  static get eventBeforeToggle() {\n    return `${prefix}-combo-box-beingtoggled`;\n  }\n\n  /**\n   * The name of the custom event fired after this combo box item is toggled upon a user gesture.\n   */\n  static get eventToggle() {\n    return `${prefix}-combo-box-toggled`;\n  }\n\n  /**\n   * The name of the custom event fired before a combo box 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}-combo-box-beingselected`;\n  }\n\n  /**\n   * The name of the custom event fired after a a combo box item is selected upon a user gesture.\n   */\n  static get eventSelect() {\n    return `${prefix}-combo-box-selected`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSComboBox;\n"],"mappings":"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"}