{"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 \n ${selectedItemsCount} ${Close16({ 'aria-label': clearSelectionLabel })}\n \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 `` 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"]}