carbon-custom-elements/es/components/multi-select/multi-select.d.ts.map

A Carbon Design System variant that's as easy to use as native HTML elements, with no framework tax, no framework silo.

{"version":3,"sources":["components/multi-select/multi-select.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAMH,OAAO,UAAwC,MAAM,sBAAsB,CAAC;AAC5E,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AAGpD,OAAO,EAAE,qBAAqB,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAI3F;;;;;;;GAOG;AACH,cACM,aAAc,SAAQ,UAAU;IACpC;;OAEG;IACH,OAAO,CAAC,mBAAmB,CAAK;IAEhC;;OAEG;IAEH,OAAO,CAAC,oBAAoB,CAAe;IAE3C;;OAEG;IAEH,OAAO,CAAC,YAAY,CAAe;IAEnC,SAAS,CAAC,sBAAsB,CAAC,YAAY,CAAC,EAAE,iBAAiB;IAKjE,SAAS,CAAC,mBAAmB,CAAC,YAAY,CAAC,EAAE,iBAAiB;IAoB9D,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,UAAU;IAY7C,SAAS,CAAC,mBAAmB,CAAC,KAAK,EAAE,aAAa;IAiBlD,SAAS,CAAC,8BAA8B;IAiBxC;;OAEG;IAEH,mBAAmB,SAAM;IAEzB;;OAEG;IAEH,2BAA2B,SAAyB;IAEpD;;OAEG;IAEH,0BAA0B,SAA2B;IAErD,YAAY,CAAC,iBAAiB,KAAA;IAoB9B;;;OAGG;IACH,OAAO,CAAC,MAAM,KAAK,wBAAwB,GAE1C;IAED;;OAEG;IACH,MAAM,KAAK,uBAAuB,WAEjC;IAED;;;OAGG;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,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,aAAa,CAAC","file":"multi-select.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020\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 settings from 'carbon-components/es/globals/js/settings';\nimport { html, property, query, customElement } from 'lit-element';\nimport Close16 from '@carbon/icons/lib/close/16';\nimport { filter, forEach } from '../../globals/internal/collection-helpers';\nimport BXDropdown, { DROPDOWN_KEYBOARD_ACTION } from '../dropdown/dropdown';\nimport BXMultiSelectItem from './multi-select-item';\nimport styles from './multi-select.scss';\n\nexport { DROPDOWN_COLOR_SCHEME, DROPDOWN_SIZE, DROPDOWN_TYPE } from '../dropdown/dropdown';\n\nconst { prefix } = settings;\n\n/**\n * Multi select.\n * @element bx-multi-select\n * @fires bx-multi-select-beingselected\n *   The custom event fired before a multi select item is selected upon a user gesture.\n *   Cancellation of this event stops changing the user-initiated selection.\n * @fires bx-multi-select-selected - The custom event fired after a a multi select item is selected upon a user gesture.\n */\n@customElement(`${prefix}-multi-select`)\nclass BXMultiSelect extends BXDropdown {\n  /**\n   * The count of selected items.\n   */\n  private _selectedItemsCount = 0;\n\n  /**\n   * The selection button.\n   */\n  @query('#selection-button')\n  private _selectionButtonNode!: HTMLElement;\n\n  /**\n   * The trigger button.\n   */\n  @query(`.${prefix}--list-box__field`)\n  private _triggerNode!: HTMLElement;\n\n  protected _selectionShouldChange(itemToSelect?: BXMultiSelectItem) {\n    // If we are selecting an item, assumes we always toggle\n    return Boolean(this.value || itemToSelect);\n  }\n\n  protected _selectionDidChange(itemToSelect?: BXMultiSelectItem) {\n    if (itemToSelect) {\n      itemToSelect.selected = !itemToSelect.selected;\n      this._assistiveStatusText = itemToSelect.selected ? this.selectedItemAssistiveText : this.unselectedItemAssistiveText;\n    } else {\n      forEach(this.querySelectorAll((this.constructor as typeof BXMultiSelect).selectorItemSelected), item => {\n        (item as BXMultiSelectItem).selected = false;\n      });\n      this._handleUserInitiatedToggle(false);\n      this._assistiveStatusText = this.unselectedAllAssistiveText;\n    }\n    // Change in `.selected` hasn't been reflected to the corresponding attribute yet\n    this.value = filter(\n      this.querySelectorAll((this.constructor as typeof BXMultiSelect).selectorItem),\n      item => (item as BXMultiSelectItem).selected\n    )\n      .map(item => (item as BXMultiSelectItem).value)\n      .join(',');\n  }\n\n  protected _handleClickInner(event: MouseEvent) {\n    if (this._selectionButtonNode?.contains(event.target as Node)) {\n      this._handleUserInitiatedSelectItem();\n    } else {\n      const shouldIgnoreClickInner = elem =>\n        elem.closest && elem.closest((this.constructor as typeof BXMultiSelect).selectorIgnoreClickInner);\n      if (!event.composedPath().some(shouldIgnoreClickInner)) {\n        super._handleClickInner(event);\n      }\n    }\n  }\n\n  protected _handleKeydownInner(event: KeyboardEvent) {\n    const { key } = event;\n    if (\n      this._selectionButtonNode?.contains(event.target as Node) &&\n      (this.constructor as typeof BXMultiSelect).TRIGGER_KEYS.has(key)\n    ) {\n      this._handleUserInitiatedSelectItem();\n      this._triggerNode.focus();\n    } else {\n      // Ensures up/down keys won't keep focus on \"clear selection\" button\n      if (DROPDOWN_KEYBOARD_ACTION.NAVIGATING === (this.constructor as typeof BXMultiSelect).getAction(key)) {\n        this._triggerNode.focus();\n      }\n      super._handleKeydownInner(event);\n    }\n  }\n\n  protected _renderPrecedingTriggerContent() {\n    const { clearSelectionLabel, _selectedItemsCount: selectedItemsCount } = this;\n    return selectedItemsCount === 0\n      ? undefined\n      : html`\n          <div\n            id=\"selection-button\"\n            role=\"button\"\n            class=\"${prefix}--list-box__selection ${prefix}--list-box__selection--multi ${prefix}--tag--filter\"\n            tabindex=\"0\"\n            title=\"${clearSelectionLabel}\"\n          >\n            ${selectedItemsCount} ${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   * An assistive text for screen reader to announce, telling that an item is unselected.\n   */\n  @property({ attribute: 'unselected-item-assistive-text' })\n  unselectedItemAssistiveText = 'Unselected an item.';\n\n  /**\n   * An assistive text for screen reader to announce, telling that all items are unselected.\n   */\n  @property({ attribute: 'unselected-all-assistive-text' })\n  unselectedAllAssistiveText = 'Unselected all items.';\n\n  shouldUpdate(changedProperties) {\n    const { selectorItem } = this.constructor as typeof BXMultiSelect;\n    if (changedProperties.has('size')) {\n      forEach(this.querySelectorAll(selectorItem), elem => {\n        (elem as BXMultiSelectItem).size = this.size;\n      });\n    }\n    if (changedProperties.has('value')) {\n      const { value } = this;\n      const values = !value ? [] : value.split(',');\n      // Updates selection beforehand because our rendering logic for `<bx-multi-select>` looks for selected items via `qSA()`\n      const items = this.querySelectorAll(selectorItem);\n      forEach(items, elem => {\n        (elem as BXMultiSelectItem).selected = values.indexOf((elem as BXMultiSelectItem).value) >= 0;\n      });\n      this._selectedItemsCount = filter(items, elem => values.indexOf((elem as BXMultiSelectItem).value) >= 0).length;\n    }\n    return true;\n  }\n\n  /**\n   * A selector to ignore the `click` events from.\n   * Primary for the checkbox label where the `click` event will happen from the associated check box.\n   */\n  private static get selectorIgnoreClickInner() {\n    return `.${prefix}--checkbox-label`;\n  }\n\n  /**\n   * A selector that will return highlighted items.\n   */\n  static get selectorItemHighlighted() {\n    return `${prefix}-multi-select-item[highlighted]`;\n  }\n\n  /**\n   * A selector that will return multi select items.\n   * We use a separate property from `.itemTagName` due to the nature in difference of tag name vs. selector.\n   */\n  static get selectorItem() {\n    return `${prefix}-multi-select-item`;\n  }\n\n  /**\n   * A selector that will return selected items.\n   */\n  static get selectorItemSelected() {\n    return `${prefix}-multi-select-item[selected]`;\n  }\n\n  /**\n   * The name of the custom event fired before a multi select 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}-multi-select-beingselected`;\n  }\n\n  /**\n   * The name of the custom event fired after a a multi select item is selected upon a user gesture.\n   */\n  static get eventSelect() {\n    return `${prefix}-multi-select-selected`;\n  }\n\n  static styles = styles;\n}\n\nexport default BXMultiSelect;\n"]}