@carbon/web-components 1.26.0-rc.2 → 1.26.0

package/es/components/multi-select/multi-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"multi-select.js","names":["settings","html","property","query","customElement","Close16","filter","forEach","indexOf","BXDropdown","DROPDOWN_KEYBOARD_ACTION","styles","DROPDOWN_COLOR_SCHEME","DROPDOWN_SIZE","DROPDOWN_TYPE","prefix","BXMultiSelect","_decorate","_initialize","_BXDropdown","constructor","args","F","d","kind","decorators","type","Boolean","key","value","_selectionShouldChange","itemToSelect","_selectionDidChange","selected","_assistiveStatusText","selectedItemAssistiveText","unselectedItemAssistiveText","querySelectorAll","selectorItemSelected","item","_handleUserInitiatedToggle","unselectedAllAssistiveText","selectorItem","map","join","_handleClickInner","event","_this$_selectionButto","_this$_clearButtonNod","_selectionButtonNode","contains","target","_handleUserInitiatedSelectItem","filterable","_filterInputNode","focus","_triggerNode","_clearButtonNode","_handleUserInitiatedClearInput","shouldIgnoreClickInner","elem","closest","selectorIgnoreClickInner","composedPath","some","_get","_getPrototypeOf","prototype","call","_handleKeypressInner","_this$_clearButtonNod2","_this$_selectionButto2","action","getAction","TRIGGERING","open","_handleKeypressInnerFlterable","highlightedItem","querySelector","selectorItemHighlighted","_renderPrecedingTriggerContent","clearSelectionLabel","_selectedItemsCount","selectedItemsCount","undefined","_t","_","_renderTriggerContent","triggerContent","_selectedItemContent","selectedItemContent","_t2","_t3","_handleInput","_renderFollowingTriggerContent","filterInputNode","length","_t4","items","inputValue","toLocaleLowerCase","itemValue","innerText","includes","setAttribute","removeAttribute","requestUpdate","_navigate","direction","selectorItemResults","highlightedIndex","nextIndex","i","highlighted","selectorItemFiltered","attribute","shouldUpdate","changedProperties","has","size","values","split","static","eventBeforeToggle","eventToggle","eventBeforeSelect","eventSelect"],"sources":["components/multi-select/multi-select.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2022\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 {\n  html,\n  property,\n  query,\n  customElement,\n  TemplateResult,\n} from 'lit-element';\nimport Close16 from '@carbon/icons/lib/close/16';\nimport {\n  filter,\n  forEach,\n  indexOf,\n} 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 {\n  DROPDOWN_COLOR_SCHEME,\n  DROPDOWN_SIZE,\n  DROPDOWN_TYPE,\n} from '../dropdown/dropdown';\n\nconst { prefix } = settings;\n\n/**\n * Multi select.\n *\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 multi select item is selected upon a user gesture.\n * @fires bx-multi-select-beingtoggled\n *   The custom event fired before the open state of this multi select is toggled upon a user gesture.\n *   Cancellation of this event stops the user-initiated toggling.\n * @fires bx-multi-select-toggled\n *   The custom event fired after the open state of this multi select is toggled upon a user gesture.\n */\n@customElement(`${prefix}-multi-select`)\nclass BXMultiSelect extends BXDropdown {\n  @property({ type: Boolean })\n  filterable;\n\n  /**\n   * The count of selected items.\n   */\n  private _selectedItemsCount = 0;\n\n  /**\n   * The clear button.\n   */\n  @query('#clear-button')\n  private _clearButtonNode!: HTMLElement;\n\n  /**\n   * The selection button.\n   */\n  @query('#selection-button')\n  private _selectionButtonNode!: HTMLElement;\n\n  /**\n   * The `<input>` for filtering.\n   */\n  @query('input')\n  private _filterInputNode!: HTMLInputElement;\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\n        ? this.selectedItemAssistiveText\n        : this.unselectedItemAssistiveText;\n    } else {\n      forEach(\n        this.querySelectorAll(\n          (this.constructor as typeof BXMultiSelect).selectorItemSelected\n        ),\n        (item) => {\n          (item as BXMultiSelectItem).selected = false;\n        }\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(\n        (this.constructor as typeof BXMultiSelect).selectorItem\n      ),\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      if (this.filterable) {\n        this._filterInputNode.focus();\n      } else {\n        this._triggerNode.focus();\n      }\n    } else if (this._clearButtonNode?.contains(event.target as Node)) {\n      this._handleUserInitiatedClearInput();\n    } else {\n      const shouldIgnoreClickInner = (elem) =>\n        elem.closest &&\n        elem.closest(\n          (this.constructor as typeof BXMultiSelect).selectorIgnoreClickInner\n        );\n      if (!event.composedPath().some(shouldIgnoreClickInner)) {\n        super._handleClickInner(event);\n      }\n      if (this.filterable) this._filterInputNode.focus();\n    }\n  }\n\n  /**\n   * Handler for the `keypress` event, ensures filter still works upon entering space\n   */\n  protected _handleKeypressInner(event: KeyboardEvent) {\n    const { key } = event;\n    const action = (this.constructor as typeof BXDropdown).getAction(key);\n    const { TRIGGERING } = DROPDOWN_KEYBOARD_ACTION;\n\n    if (\n      this._clearButtonNode?.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 if (this._selectionButtonNode?.contains(event.target as Node)) {\n      this._handleUserInitiatedSelectItem();\n      this.open = true;\n      if (this.filterable) {\n        this._filterInputNode.focus();\n      } else {\n        this._triggerNode.focus();\n      }\n    } else if (this.filterable) {\n      this._handleKeypressInnerFlterable(event);\n    } else {\n      super._handleKeypressInner(event);\n    }\n  }\n\n  /**\n   * Special andler for the `keypress` event, ensures space selection for filterable\n   * variation is disabled\n   */\n\n  protected _handleKeypressInnerFlterable(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 (key) {\n        case 'Enter':\n          {\n            const constructor = this.constructor as typeof BXDropdown;\n            const highlightedItem = this.querySelector(\n              constructor.selectorItemHighlighted\n            ) as BXMultiSelectItem;\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  protected _renderPrecedingTriggerContent() {\n    const { clearSelectionLabel, _selectedItemsCount: selectedItemsCount } =\n      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            ${selectedItemsCount}\n            ${Close16({ 'aria-label': clearSelectionLabel })}\n          </div>\n        `;\n  }\n\n  /**\n    @returns The main content of the trigger button.\n   */\n  protected _renderTriggerContent(): TemplateResult {\n    const { triggerContent, _selectedItemContent: selectedItemContent } = this;\n    return !this.filterable\n      ? html`\n          <span id=\"trigger-label\" class=\"${prefix}--list-box__label\"\n            >${selectedItemContent || triggerContent}</span\n          >\n        `\n      : html`\n          <input\n            id=\"trigger-label\"\n            class=\"${prefix}--text-input\"\n            placeholder=\"${triggerContent}\"\n            role=\"combobox\"\n            aria-controls=\"menu-body\"\n            aria-autocomplete=\"list\"\n            @input=\"${this._handleInput}\" />\n        `;\n  }\n\n  protected _renderFollowingTriggerContent(): TemplateResult | void {\n    const { clearSelectionLabel, _filterInputNode: filterInputNode } = this;\n    return filterInputNode &&\n      filterInputNode.value.length > 0 &&\n      this.filterable\n      ? html`\n          <div\n            id=\"clear-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      : undefined;\n  }\n\n  /**\n   * Handles `input` event on the `<input>` for filtering.\n   */\n  protected _handleInput() {\n    const items = this.querySelectorAll(\n      (this.constructor as typeof BXMultiSelect).selectorItem\n    );\n    const inputValue = this._filterInputNode.value.toLocaleLowerCase();\n\n    if (!this.open) this.open = true;\n\n    forEach(items, (item) => {\n      const itemValue = (item as HTMLElement).innerText.toLocaleLowerCase();\n\n      if (!itemValue.includes(inputValue)) {\n        (item as BXMultiSelectItem).setAttribute('filtered', '');\n        (item as BXMultiSelectItem).removeAttribute('highlighted');\n      } else {\n        (item as BXMultiSelectItem).removeAttribute('filtered');\n      }\n    });\n\n    this.requestUpdate();\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    if (!this.filterable) {\n      this._triggerNode.focus();\n      super._navigate(direction);\n    } else {\n      // only navigate through remaining item\n      const constructor = this.constructor as typeof BXMultiSelect;\n      const items = this.querySelectorAll(constructor.selectorItemResults);\n      const highlightedItem = this.querySelector(\n        constructor.selectorItemHighlighted\n      );\n      const highlightedIndex = indexOf(items, highlightedItem!);\n\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 BXMultiSelectItem).highlighted = i === nextIndex;\n      });\n    }\n  }\n\n  /**\n   * Handles user-initiated clearing the `<input>` for filtering.\n   */\n  protected _handleUserInitiatedClearInput() {\n    const constructor = this.constructor as typeof BXMultiSelect;\n    const items = this.querySelectorAll(constructor.selectorItemFiltered);\n    this._filterInputNode.value = '';\n    this.open = true;\n    this._filterInputNode.focus();\n    forEach(items, (item) => {\n      (item as BXMultiSelectItem).removeAttribute('filtered');\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 =\n          values.indexOf((elem as BXMultiSelectItem).value) >= 0;\n      });\n      this._selectedItemsCount = filter(\n        items,\n        (elem) => values.indexOf((elem as BXMultiSelectItem).value) >= 0\n      ).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 remaining items after a filter.\n   */\n  static get selectorItemFiltered() {\n    return `${prefix}-multi-select-item[filtered]`;\n  }\n\n  /**\n   * A selector that will return remaining items after a filter.\n   */\n  static get selectorItemResults() {\n    return `${prefix}-multi-select-item:not([filtered])`;\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 this multi select item is being toggled upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of toggling this multi select item.\n   */\n  static get eventBeforeToggle() {\n    return `${prefix}-multi-select-beingtoggled`;\n  }\n\n  /**\n   * The name of the custom event fired after this multi select item is toggled upon a user gesture.\n   */\n  static get eventToggle() {\n    return `${prefix}-multi-select-toggled`;\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"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,QAAQ,MAAM,0CAA0C;AAC/D,SACEC,IAAI,EACJC,QAAQ,EACRC,KAAK,EACLC,aAAa,QAER,aAAa;AACpB,OAAOC,OAAO,MAAM,sBAA4B;AAChD,SACEC,MAAM,EACNC,OAAO,EACPC,OAAO,QACF,2CAA2C;AAClD,OAAOC,UAAU,IAAIC,wBAAwB,QAAQ,sBAAsB;AAE3E,OAAOC,MAAM,MAAM,yBAAqB;AAExC,SACEC,qBAAqB,EACrBC,aAAa,EACbC,aAAa,QACR,sBAAsB;AAE7B,MAAM;EAAEC;AAAO,CAAC,GAAGf,QAAQ;;AAE3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAbA,IAeMgB,aAAa,GAAAC,SAAA,EADlBb,aAAa,CAAE,GAAEW,MAAO,eAAc,CAAC,aAAAG,WAAA,EAAAC,WAAA;EAAxC,MACMH,aAAa,SAAAG,WAAA,CAAoB;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EAkZvC;EAAC;IAAAI,CAAA,EAlZKN,aAAa;IAAAO,CAAA;MAAAC,IAAA;MAAAC,UAAA,GAChBvB,QAAQ,CAAC;QAAEwB,IAAI,EAAEC;MAAQ,CAAC,CAAC;MAAAC,GAAA;MAAAC,KAAA;IAAA;MAAAL,IAAA;MAAAI,GAAA;MAAAC,MAAA;QAAA,OAME,CAAC;MAAA;IAAA;MAAAL,IAAA;MAAAC,UAAA,GAK9BtB,KAAK,CAAC,eAAe,CAAC;MAAAyB,GAAA;MAAAC,KAAA;IAAA;MAAAL,IAAA;MAAAC,UAAA,GAMtBtB,KAAK,CAAC,mBAAmB,CAAC;MAAAyB,GAAA;MAAAC,KAAA;IAAA;MAAAL,IAAA;MAAAC,UAAA,GAM1BtB,KAAK,CAAC,OAAO,CAAC;MAAAyB,GAAA;MAAAC,KAAA;IAAA;MAAAL,IAAA;MAAAC,UAAA,GAMdtB,KAAK,CAAE,IAAGY,MAAO,mBAAkB,CAAC;MAAAa,GAAA;MAAAC,KAAA;IAAA;MAAAL,IAAA;MAAAI,GAAA;MAAAC,KAAA;MA1BrC;AACF;AACA;;MAGE;AACF;AACA;;MAIE;AACF;AACA;;MAIE;AACF;AACA;;MAIE;AACF;AACA;;MAIE,SAAAC,uBAAiCC,YAAgC,EAAE;QACjE;QACA,OAAOJ,OAAO,CAAC,IAAI,CAACE,KAAK,IAAIE,YAAY,CAAC;MAC5C;IAAC;MAAAP,IAAA;MAAAI,GAAA;MAAAC,KAAA,EAED,SAAAG,oBAA8BD,YAAgC,EAAE;QAC9D,IAAIA,YAAY,EAAE;UAChBA,YAAY,CAACE,QAAQ,GAAG,CAACF,YAAY,CAACE,QAAQ;UAC9C,IAAI,CAACC,oBAAoB,GAAGH,YAAY,CAACE,QAAQ,GAC7C,IAAI,CAACE,yBAAyB,GAC9B,IAAI,CAACC,2BAA2B;QACtC,CAAC,MAAM;UACL7B,OAAO,CACL,IAAI,CAAC8B,gBAAgB,CAClB,IAAI,CAACjB,WAAW,CAA0BkB,oBAAoB,CAChE,EACAC,IAAI,IAAK;YACPA,IAAI,CAAuBN,QAAQ,GAAG,KAAK;UAC9C,CAAC,CACF;UACD,IAAI,CAACO,0BAA0B,CAAC,KAAK,CAAC;UACtC,IAAI,CAACN,oBAAoB,GAAG,IAAI,CAACO,0BAA0B;QAC7D;QACA;QACA,IAAI,CAACZ,KAAK,GAAGvB,MAAM,CACjB,IAAI,CAAC+B,gBAAgB,CAClB,IAAI,CAACjB,WAAW,CAA0BsB,YAAY,CACxD,EACAH,IAAI,IAAMA,IAAI,CAAuBN,QAAQ,CAC/C,CACEU,GAAG,CAAEJ,IAAI,IAAMA,IAAI,CAAuBV,KAAK,CAAC,CAChDe,IAAI,CAAC,GAAG,CAAC;MACd;IAAC;MAAApB,IAAA;MAAAI,GAAA;MAAAC,KAAA,EAED,SAAAgB,kBAA4BC,KAAiB,EAAE;QAAA,IAAAC,qBAAA,EAAAC,qBAAA;QAC7C,KAAAD,qBAAA,GAAI,IAAI,CAACE,oBAAoB,cAAAF,qBAAA,eAAzBA,qBAAA,CAA2BG,QAAQ,CAACJ,KAAK,CAACK,MAAM,CAAS,EAAE;UAC7D,IAAI,CAACC,8BAA8B,EAAE;UACrC,IAAI,IAAI,CAACC,UAAU,EAAE;YACnB,IAAI,CAACC,gBAAgB,CAACC,KAAK,EAAE;UAC/B,CAAC,MAAM;YACL,IAAI,CAACC,YAAY,CAACD,KAAK,EAAE;UAC3B;QACF,CAAC,MAAM,KAAAP,qBAAA,GAAI,IAAI,CAACS,gBAAgB,cAAAT,qBAAA,eAArBA,qBAAA,CAAuBE,QAAQ,CAACJ,KAAK,CAACK,MAAM,CAAS,EAAE;UAChE,IAAI,CAACO,8BAA8B,EAAE;QACvC,CAAC,MAAM;UACL,MAAMC,sBAAsB,GAAIC,IAAI,IAClCA,IAAI,CAACC,OAAO,IACZD,IAAI,CAACC,OAAO,CACT,IAAI,CAACzC,WAAW,CAA0B0C,wBAAwB,CACpE;UACH,IAAI,CAAChB,KAAK,CAACiB,YAAY,EAAE,CAACC,IAAI,CAACL,sBAAsB,CAAC,EAAE;YACtDM,IAAA,CAAAC,eAAA,CApFFlD,aAAa,CAAAmD,SAAA,8BAAAC,IAAA,OAoFatB,KAAK;UAC/B;UACA,IAAI,IAAI,CAACO,UAAU,EAAE,IAAI,CAACC,gBAAgB,CAACC,KAAK,EAAE;QACpD;MACF;;MAEA;AACF;AACA;IAFE;MAAA/B,IAAA;MAAAI,GAAA;MAAAC,KAAA,EAGA,SAAAwC,qBAA+BvB,KAAoB,EAAE;QAAA,IAAAwB,sBAAA,EAAAC,sBAAA;QACnD,MAAM;UAAE3C;QAAI,CAAC,GAAGkB,KAAK;QACrB,MAAM0B,MAAM,GAAI,IAAI,CAACpD,WAAW,CAAuBqD,SAAS,CAAC7C,GAAG,CAAC;QACrE,MAAM;UAAE8C;QAAW,CAAC,GAAGhE,wBAAwB;QAE/C,IACE,CAAA4D,sBAAA,OAAI,CAACb,gBAAgB,cAAAa,sBAAA,eAArBA,sBAAA,CAAuBpB,QAAQ,CAACJ,KAAK,CAACK,MAAM,CAAS;QACrD;QACCqB,MAAM,KAAKE,UAAU,IAAI9C,GAAG,KAAK,GAAG,CAAC,EACtC;UACA,IAAI,CAAC8B,8BAA8B,EAAE;QACvC,CAAC,MAAM,KAAAa,sBAAA,GAAI,IAAI,CAACtB,oBAAoB,cAAAsB,sBAAA,eAAzBA,sBAAA,CAA2BrB,QAAQ,CAACJ,KAAK,CAACK,MAAM,CAAS,EAAE;UACpE,IAAI,CAACC,8BAA8B,EAAE;UACrC,IAAI,CAACuB,IAAI,GAAG,IAAI;UAChB,IAAI,IAAI,CAACtB,UAAU,EAAE;YACnB,IAAI,CAACC,gBAAgB,CAACC,KAAK,EAAE;UAC/B,CAAC,MAAM;YACL,IAAI,CAACC,YAAY,CAACD,KAAK,EAAE;UAC3B;QACF,CAAC,MAAM,IAAI,IAAI,CAACF,UAAU,EAAE;UAC1B,IAAI,CAACuB,6BAA6B,CAAC9B,KAAK,CAAC;QAC3C,CAAC,MAAM;UACLmB,IAAA,CAAAC,eAAA,CAnHAlD,aAAa,CAAAmD,SAAA,iCAAAC,IAAA,OAmHctB,KAAK;QAClC;MACF;;MAEA;AACF;AACA;AACA;IAHE;MAAAtB,IAAA;MAAAI,GAAA;MAAAC,KAAA,EAKA,SAAA+C,8BAAwC9B,KAAoB,EAAE;QAC5D,MAAM;UAAElB;QAAI,CAAC,GAAGkB,KAAK;QACrB,MAAM0B,MAAM,GAAI,IAAI,CAACpD,WAAW,CAAuBqD,SAAS,CAAC7C,GAAG,CAAC;QACrE,IAAI,CAAC,IAAI,CAAC+C,IAAI,EAAE;UACd,QAAQH,MAAM;YACZ,KAAK9D,wBAAwB,CAACgE,UAAU;cACtC,IAAI,CAAClC,0BAA0B,CAAC,IAAI,CAAC;cACrC;YACF;cACE;UAAM;QAEZ,CAAC,MAAM;UACL,QAAQZ,GAAG;YACT,KAAK,OAAO;cACV;gBACE,MAAMR,WAAW,GAAG,IAAI,CAACA,WAAgC;gBACzD,MAAMyD,eAAe,GAAG,IAAI,CAACC,aAAa,CACxC1D,WAAW,CAAC2D,uBAAuB,CACf;gBACtB,IAAIF,eAAe,EAAE;kBACnB,IAAI,CAACzB,8BAA8B,CAACyB,eAAe,CAAC;gBACtD,CAAC,MAAM;kBACL,IAAI,CAACrC,0BAA0B,CAAC,KAAK,CAAC;gBACxC;cACF;cACA;YACF;cACE;UAAM;QAEZ;MACF;IAAC;MAAAhB,IAAA;MAAAI,GAAA;MAAAC,KAAA,EAED,SAAAmD,+BAAA,EAA2C;QACzC,MAAM;UAAEC,mBAAmB;UAAEC,mBAAmB,EAAEC;QAAmB,CAAC,GACpE,IAAI;QACN,OAAOA,kBAAkB,KAAK,CAAC,GAC3BC,SAAS,GACTnF,IAAI,CAAAoF,EAAA,KAAAA,EAAA,GAAAC,CAAA,gLAISvE,MAAM,EAAyBA,MAAM,EAAgCA,MAAM,EAE3EkE,mBAAmB,EAC1BE,kBAAkB,EAClB9E,OAAO,CAAC;UAAE,YAAY,EAAE4E;QAAoB,CAAC,CAAC,CAEnD;MACP;;MAEA;AACF;AACA;IAFE;MAAAzD,IAAA;MAAAI,GAAA;MAAAC,KAAA,EAGA,SAAA0D,sBAAA,EAAkD;QAChD,MAAM;UAAEC,cAAc;UAAEC,oBAAoB,EAAEC;QAAoB,CAAC,GAAG,IAAI;QAC1E,OAAO,CAAC,IAAI,CAACrC,UAAU,GACnBpD,IAAI,CAAA0F,GAAA,KAAAA,GAAA,GAAAL,CAAA,yEACgCvE,MAAM,EACnC2E,mBAAmB,IAAIF,cAAc,IAG5CvF,IAAI,CAAA2F,GAAA,KAAAA,GAAA,GAAAN,CAAA,8JAGSvE,MAAM,EACAyE,cAAc,EAInB,IAAI,CAACK,YAAY,CAC9B;MACP;IAAC;MAAArE,IAAA;MAAAI,GAAA;MAAAC,KAAA,EAED,SAAAiE,+BAAA,EAAkE;QAChE,MAAM;UAAEb,mBAAmB;UAAE3B,gBAAgB,EAAEyC;QAAgB,CAAC,GAAG,IAAI;QACvE,OAAOA,eAAe,IACpBA,eAAe,CAAClE,KAAK,CAACmE,MAAM,GAAG,CAAC,IAChC,IAAI,CAAC3C,UAAU,GACbpD,IAAI,CAAAgG,GAAA,KAAAA,GAAA,GAAAX,CAAA,oHAISvE,MAAM,EAENkE,mBAAmB,EAC1B5E,OAAO,CAAC;UAAE,YAAY,EAAE4E;QAAoB,CAAC,CAAC,IAGpDG,SAAS;MACf;;MAEA;AACF;AACA;IAFE;MAAA5D,IAAA;MAAAI,GAAA;MAAAC,KAAA,EAGA,SAAAgE,aAAA,EAAyB;QACvB,MAAMK,KAAK,GAAG,IAAI,CAAC7D,gBAAgB,CAChC,IAAI,CAACjB,WAAW,CAA0BsB,YAAY,CACxD;QACD,MAAMyD,UAAU,GAAG,IAAI,CAAC7C,gBAAgB,CAACzB,KAAK,CAACuE,iBAAiB,EAAE;QAElE,IAAI,CAAC,IAAI,CAACzB,IAAI,EAAE,IAAI,CAACA,IAAI,GAAG,IAAI;QAEhCpE,OAAO,CAAC2F,KAAK,EAAG3D,IAAI,IAAK;UACvB,MAAM8D,SAAS,GAAI9D,IAAI,CAAiB+D,SAAS,CAACF,iBAAiB,EAAE;UAErE,IAAI,CAACC,SAAS,CAACE,QAAQ,CAACJ,UAAU,CAAC,EAAE;YAClC5D,IAAI,CAAuBiE,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC;YACvDjE,IAAI,CAAuBkE,eAAe,CAAC,aAAa,CAAC;UAC5D,CAAC,MAAM;YACJlE,IAAI,CAAuBkE,eAAe,CAAC,UAAU,CAAC;UACzD;QACF,CAAC,CAAC;QAEF,IAAI,CAACC,aAAa,EAAE;MACtB;;MAEA;AACF;AACA;AACA;AACA;IAJE;MAAAlF,IAAA;MAAAI,GAAA;MAAAC,KAAA,EAKA,SAAA8E,UAAoBC,SAAiB,EAAE;QACrC,IAAI,CAAC,IAAI,CAACvD,UAAU,EAAE;UACpB,IAAI,CAACG,YAAY,CAACD,KAAK,EAAE;UACzBU,IAAA,CAAAC,eAAA,CAxPAlD,aAAa,CAAAmD,SAAA,sBAAAC,IAAA,OAwPGwC,SAAS;QAC3B,CAAC,MAAM;UACL;UACA,MAAMxF,WAAW,GAAG,IAAI,CAACA,WAAmC;UAC5D,MAAM8E,KAAK,GAAG,IAAI,CAAC7D,gBAAgB,CAACjB,WAAW,CAACyF,mBAAmB,CAAC;UACpE,MAAMhC,eAAe,GAAG,IAAI,CAACC,aAAa,CACxC1D,WAAW,CAAC2D,uBAAuB,CACpC;UACD,MAAM+B,gBAAgB,GAAGtG,OAAO,CAAC0F,KAAK,EAAErB,eAAe,CAAE;UAEzD,IAAIkC,SAAS,GAAGD,gBAAgB,GAAGF,SAAS;UAC5C,IAAIG,SAAS,GAAG,CAAC,EAAE;YACjBA,SAAS,GAAGb,KAAK,CAACF,MAAM,GAAG,CAAC;UAC9B;UACA,IAAIe,SAAS,IAAIb,KAAK,CAACF,MAAM,EAAE;YAC7Be,SAAS,GAAG,CAAC;UACf;UACAxG,OAAO,CAAC2F,KAAK,EAAE,CAAC3D,IAAI,EAAEyE,CAAC,KAAK;YACzBzE,IAAI,CAAuB0E,WAAW,GAAGD,CAAC,KAAKD,SAAS;UAC3D,CAAC,CAAC;QACJ;MACF;;MAEA;AACF;AACA;IAFE;MAAAvF,IAAA;MAAAI,GAAA;MAAAC,KAAA,EAGA,SAAA6B,+BAAA,EAA2C;QACzC,MAAMtC,WAAW,GAAG,IAAI,CAACA,WAAmC;QAC5D,MAAM8E,KAAK,GAAG,IAAI,CAAC7D,gBAAgB,CAACjB,WAAW,CAAC8F,oBAAoB,CAAC;QACrE,IAAI,CAAC5D,gBAAgB,CAACzB,KAAK,GAAG,EAAE;QAChC,IAAI,CAAC8C,IAAI,GAAG,IAAI;QAChB,IAAI,CAACrB,gBAAgB,CAACC,KAAK,EAAE;QAC7BhD,OAAO,CAAC2F,KAAK,EAAG3D,IAAI,IAAK;UACtBA,IAAI,CAAuBkE,eAAe,CAAC,UAAU,CAAC;QACzD,CAAC,CAAC;MACJ;;MAEA;AACF;AACA;IAFE;MAAAjF,IAAA;MAAAC,UAAA,GAGCvB,QAAQ,CAAC;QAAEiH,SAAS,EAAE;MAAwB,CAAC,CAAC;MAAAvF,GAAA;MAAAC,MAAA;QAAA,OAC3B,EAAE;MAAA;IAAA;MAAAL,IAAA;MAAAC,UAAA,GAKvBvB,QAAQ,CAAC;QAAEiH,SAAS,EAAE;MAAiC,CAAC,CAAC;MAAAvF,GAAA;MAAAC,MAAA;QAAA,OAC5B,qBAAqB;MAAA;IAAA;MAAAL,IAAA;MAAAC,UAAA,GAKlDvB,QAAQ,CAAC;QAAEiH,SAAS,EAAE;MAAgC,CAAC,CAAC;MAAAvF,GAAA;MAAAC,MAAA;QAAA,OAC5B,uBAAuB;MAAA;IAAA;MAAAL,IAAA;MAAAI,GAAA;MAAAC,KAAA;MAVpD;AACF;AACA;MAIE;AACF;AACA;MAIE,SAAAuF,aAAaC,iBAAiB,EAAE;QAC9B,MAAM;UAAE3E;QAAa,CAAC,GAAG,IAAI,CAACtB,WAAmC;QACjE,IAAIiG,iBAAiB,CAACC,GAAG,CAAC,MAAM,CAAC,EAAE;UACjC/G,OAAO,CAAC,IAAI,CAAC8B,gBAAgB,CAACK,YAAY,CAAC,EAAGkB,IAAI,IAAK;YACpDA,IAAI,CAAuB2D,IAAI,GAAG,IAAI,CAACA,IAAI;UAC9C,CAAC,CAAC;QACJ;QACA,IAAIF,iBAAiB,CAACC,GAAG,CAAC,OAAO,CAAC,EAAE;UAClC,MAAM;YAAEzF;UAAM,CAAC,GAAG,IAAI;UACtB,MAAM2F,MAAM,GAAG,CAAC3F,KAAK,GAAG,EAAE,GAAGA,KAAK,CAAC4F,KAAK,CAAC,GAAG,CAAC;UAC7C;UACA,MAAMvB,KAAK,GAAG,IAAI,CAAC7D,gBAAgB,CAACK,YAAY,CAAC;UACjDnC,OAAO,CAAC2F,KAAK,EAAGtC,IAAI,IAAK;YACtBA,IAAI,CAAuB3B,QAAQ,GAClCuF,MAAM,CAAChH,OAAO,CAAEoD,IAAI,CAAuB/B,KAAK,CAAC,IAAI,CAAC;UAC1D,CAAC,CAAC;UACF,IAAI,CAACqD,mBAAmB,GAAG5E,MAAM,CAC/B4F,KAAK,EACJtC,IAAI,IAAK4D,MAAM,CAAChH,OAAO,CAAEoD,IAAI,CAAuB/B,KAAK,CAAC,IAAI,CAAC,CACjE,CAACmE,MAAM;QACV;QACA,OAAO,IAAI;MACb;;MAEA;AACF;AACA;AACA;IAHE;MAAAxE,IAAA;MAAAkG,MAAA;MAAA9F,GAAA;MAAAC,KAAA,EAIA,SAAAiC,yBAAA,EAA8C;QAC5C,OAAQ,IAAG/C,MAAO,kBAAiB;MACrC;;MAEA;AACF;AACA;IAFE;MAAAS,IAAA;MAAAkG,MAAA;MAAA9F,GAAA;MAAAC,KAAA,EAGA,SAAAkD,wBAAA,EAAqC;QACnC,OAAQ,GAAEhE,MAAO,iCAAgC;MACnD;;MAEA;AACF;AACA;AACA;IAHE;MAAAS,IAAA;MAAAkG,MAAA;MAAA9F,GAAA;MAAAC,KAAA,EAIA,SAAAa,aAAA,EAA0B;QACxB,OAAQ,GAAE3B,MAAO,oBAAmB;MACtC;;MAEA;AACF;AACA;IAFE;MAAAS,IAAA;MAAAkG,MAAA;MAAA9F,GAAA;MAAAC,KAAA,EAGA,SAAAqF,qBAAA,EAAkC;QAChC,OAAQ,GAAEnG,MAAO,8BAA6B;MAChD;;MAEA;AACF;AACA;IAFE;MAAAS,IAAA;MAAAkG,MAAA;MAAA9F,GAAA;MAAAC,KAAA,EAGA,SAAAgF,oBAAA,EAAiC;QAC/B,OAAQ,GAAE9F,MAAO,oCAAmC;MACtD;;MAEA;AACF;AACA;IAFE;MAAAS,IAAA;MAAAkG,MAAA;MAAA9F,GAAA;MAAAC,KAAA,EAGA,SAAAS,qBAAA,EAAkC;QAChC,OAAQ,GAAEvB,MAAO,8BAA6B;MAChD;;MAEA;AACF;AACA;AACA;IAHE;MAAAS,IAAA;MAAAkG,MAAA;MAAA9F,GAAA;MAAAC,KAAA,EAIA,SAAA8F,kBAAA,EAA+B;QAC7B,OAAQ,GAAE5G,MAAO,4BAA2B;MAC9C;;MAEA;AACF;AACA;IAFE;MAAAS,IAAA;MAAAkG,MAAA;MAAA9F,GAAA;MAAAC,KAAA,EAGA,SAAA+F,YAAA,EAAyB;QACvB,OAAQ,GAAE7G,MAAO,uBAAsB;MACzC;;MAEA;AACF;AACA;AACA;IAHE;MAAAS,IAAA;MAAAkG,MAAA;MAAA9F,GAAA;MAAAC,KAAA,EAIA,SAAAgG,kBAAA,EAA+B;QAC7B,OAAQ,GAAE9G,MAAO,6BAA4B;MAC/C;;MAEA;AACF;AACA;IAFE;MAAAS,IAAA;MAAAkG,MAAA;MAAA9F,GAAA;MAAAC,KAAA,EAGA,SAAAiG,YAAA,EAAyB;QACvB,OAAQ,GAAE/G,MAAO,wBAAuB;MAC1C;IAAC;MAAAS,IAAA;MAAAkG,MAAA;MAAA9F,GAAA;MAAAC,MAAA;QAAA,OAEelB,MAAM;MAAA;IAAA;EAAA;AAAA,GAjZIF,UAAU;AAoZtC,eAAeO,aAAa"}
+{"version":3,"file":"multi-select.js","names":["settings","html","property","query","Close16","filter","forEach","indexOf","BXDropdown","DROPDOWN_KEYBOARD_ACTION","styles","carbonElement","customElement","DROPDOWN_COLOR_SCHEME","DROPDOWN_SIZE","DROPDOWN_TYPE","prefix","BXMultiSelect","_decorate","_initialize","_BXDropdown","constructor","args","F","d","kind","decorators","type","Boolean","key","value","_selectionShouldChange","itemToSelect","_selectionDidChange","selected","_assistiveStatusText","selectedItemAssistiveText","unselectedItemAssistiveText","querySelectorAll","selectorItemSelected","item","_handleUserInitiatedToggle","unselectedAllAssistiveText","selectorItem","map","join","_handleClickInner","event","_this$_selectionButto","_this$_clearButtonNod","_selectionButtonNode","contains","target","_handleUserInitiatedSelectItem","filterable","_filterInputNode","focus","_triggerNode","_clearButtonNode","_handleUserInitiatedClearInput","shouldIgnoreClickInner","elem","closest","selectorIgnoreClickInner","composedPath","some","_get","_getPrototypeOf","prototype","call","_handleKeypressInner","_this$_clearButtonNod2","_this$_selectionButto2","action","getAction","TRIGGERING","open","_handleKeypressInnerFlterable","highlightedItem","querySelector","selectorItemHighlighted","_renderPrecedingTriggerContent","clearSelectionLabel","_selectedItemsCount","selectedItemsCount","undefined","_t","_","_renderTriggerContent","triggerContent","_selectedItemContent","selectedItemContent","_t2","_t3","_handleInput","_renderFollowingTriggerContent","filterInputNode","length","_t4","items","inputValue","toLocaleLowerCase","itemValue","innerText","includes","setAttribute","removeAttribute","requestUpdate","_navigate","direction","selectorItemResults","highlightedIndex","nextIndex","i","highlighted","selectorItemFiltered","attribute","shouldUpdate","changedProperties","has","size","values","split","static","eventBeforeToggle","eventToggle","eventBeforeSelect","eventSelect"],"sources":["components/multi-select/multi-select.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 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 settings from 'carbon-components/es/globals/js/settings';\nimport { html, property, query, TemplateResult } from 'lit-element';\nimport Close16 from '@carbon/icons/lib/close/16';\nimport {\n  filter,\n  forEach,\n  indexOf,\n} 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';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport {\n  DROPDOWN_COLOR_SCHEME,\n  DROPDOWN_SIZE,\n  DROPDOWN_TYPE,\n} from '../dropdown/dropdown';\n\nconst { prefix } = settings;\n\n/**\n * Multi select.\n *\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 multi select item is selected upon a user gesture.\n * @fires bx-multi-select-beingtoggled\n *   The custom event fired before the open state of this multi select is toggled upon a user gesture.\n *   Cancellation of this event stops the user-initiated toggling.\n * @fires bx-multi-select-toggled\n *   The custom event fired after the open state of this multi select is toggled upon a user gesture.\n */\n@customElement(`${prefix}-multi-select`)\nclass BXMultiSelect extends BXDropdown {\n  @property({ type: Boolean })\n  filterable;\n\n  /**\n   * The count of selected items.\n   */\n  private _selectedItemsCount = 0;\n\n  /**\n   * The clear button.\n   */\n  @query('#clear-button')\n  private _clearButtonNode!: HTMLElement;\n\n  /**\n   * The selection button.\n   */\n  @query('#selection-button')\n  private _selectionButtonNode!: HTMLElement;\n\n  /**\n   * The `<input>` for filtering.\n   */\n  @query('input')\n  private _filterInputNode!: HTMLInputElement;\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\n        ? this.selectedItemAssistiveText\n        : this.unselectedItemAssistiveText;\n    } else {\n      forEach(\n        this.querySelectorAll(\n          (this.constructor as typeof BXMultiSelect).selectorItemSelected\n        ),\n        (item) => {\n          (item as BXMultiSelectItem).selected = false;\n        }\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(\n        (this.constructor as typeof BXMultiSelect).selectorItem\n      ),\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      if (this.filterable) {\n        this._filterInputNode.focus();\n      } else {\n        this._triggerNode.focus();\n      }\n    } else if (this._clearButtonNode?.contains(event.target as Node)) {\n      this._handleUserInitiatedClearInput();\n    } else {\n      const shouldIgnoreClickInner = (elem) =>\n        elem.closest &&\n        elem.closest(\n          (this.constructor as typeof BXMultiSelect).selectorIgnoreClickInner\n        );\n      if (!event.composedPath().some(shouldIgnoreClickInner)) {\n        super._handleClickInner(event);\n      }\n      if (this.filterable) this._filterInputNode.focus();\n    }\n  }\n\n  /**\n   * Handler for the `keypress` event, ensures filter still works upon entering space\n   */\n  protected _handleKeypressInner(event: KeyboardEvent) {\n    const { key } = event;\n    const action = (this.constructor as typeof BXDropdown).getAction(key);\n    const { TRIGGERING } = DROPDOWN_KEYBOARD_ACTION;\n\n    if (\n      this._clearButtonNode?.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 if (this._selectionButtonNode?.contains(event.target as Node)) {\n      this._handleUserInitiatedSelectItem();\n      this.open = true;\n      if (this.filterable) {\n        this._filterInputNode.focus();\n      } else {\n        this._triggerNode.focus();\n      }\n    } else if (this.filterable) {\n      this._handleKeypressInnerFlterable(event);\n    } else {\n      super._handleKeypressInner(event);\n    }\n  }\n\n  /**\n   * Special andler for the `keypress` event, ensures space selection for filterable\n   * variation is disabled\n   */\n\n  protected _handleKeypressInnerFlterable(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 (key) {\n        case 'Enter':\n          {\n            const constructor = this.constructor as typeof BXDropdown;\n            const highlightedItem = this.querySelector(\n              constructor.selectorItemHighlighted\n            ) as BXMultiSelectItem;\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  protected _renderPrecedingTriggerContent() {\n    const { clearSelectionLabel, _selectedItemsCount: selectedItemsCount } =\n      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            ${selectedItemsCount}\n            ${Close16({ 'aria-label': clearSelectionLabel })}\n          </div>\n        `;\n  }\n\n  /**\n    @returns The main content of the trigger button.\n   */\n  protected _renderTriggerContent(): TemplateResult {\n    const { triggerContent, _selectedItemContent: selectedItemContent } = this;\n    return !this.filterable\n      ? html`\n          <span id=\"trigger-label\" class=\"${prefix}--list-box__label\"\n            >${selectedItemContent || triggerContent}</span\n          >\n        `\n      : html`\n          <input\n            id=\"trigger-label\"\n            class=\"${prefix}--text-input\"\n            placeholder=\"${triggerContent}\"\n            role=\"combobox\"\n            aria-controls=\"menu-body\"\n            aria-autocomplete=\"list\"\n            @input=\"${this._handleInput}\" />\n        `;\n  }\n\n  protected _renderFollowingTriggerContent(): TemplateResult | void {\n    const { clearSelectionLabel, _filterInputNode: filterInputNode } = this;\n    return filterInputNode &&\n      filterInputNode.value.length > 0 &&\n      this.filterable\n      ? html`\n          <div\n            id=\"clear-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      : undefined;\n  }\n\n  /**\n   * Handles `input` event on the `<input>` for filtering.\n   */\n  protected _handleInput() {\n    const items = this.querySelectorAll(\n      (this.constructor as typeof BXMultiSelect).selectorItem\n    );\n    const inputValue = this._filterInputNode.value.toLocaleLowerCase();\n\n    if (!this.open) this.open = true;\n\n    forEach(items, (item) => {\n      const itemValue = (item as HTMLElement).innerText.toLocaleLowerCase();\n\n      if (!itemValue.includes(inputValue)) {\n        (item as BXMultiSelectItem).setAttribute('filtered', '');\n        (item as BXMultiSelectItem).removeAttribute('highlighted');\n      } else {\n        (item as BXMultiSelectItem).removeAttribute('filtered');\n      }\n    });\n\n    this.requestUpdate();\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    if (!this.filterable) {\n      this._triggerNode.focus();\n      super._navigate(direction);\n    } else {\n      // only navigate through remaining item\n      const constructor = this.constructor as typeof BXMultiSelect;\n      const items = this.querySelectorAll(constructor.selectorItemResults);\n      const highlightedItem = this.querySelector(\n        constructor.selectorItemHighlighted\n      );\n      const highlightedIndex = indexOf(items, highlightedItem!);\n\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 BXMultiSelectItem).highlighted = i === nextIndex;\n      });\n    }\n  }\n\n  /**\n   * Handles user-initiated clearing the `<input>` for filtering.\n   */\n  protected _handleUserInitiatedClearInput() {\n    const constructor = this.constructor as typeof BXMultiSelect;\n    const items = this.querySelectorAll(constructor.selectorItemFiltered);\n    this._filterInputNode.value = '';\n    this.open = true;\n    this._filterInputNode.focus();\n    forEach(items, (item) => {\n      (item as BXMultiSelectItem).removeAttribute('filtered');\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 =\n          values.indexOf((elem as BXMultiSelectItem).value) >= 0;\n      });\n      this._selectedItemsCount = filter(\n        items,\n        (elem) => values.indexOf((elem as BXMultiSelectItem).value) >= 0\n      ).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 remaining items after a filter.\n   */\n  static get selectorItemFiltered() {\n    return `${prefix}-multi-select-item[filtered]`;\n  }\n\n  /**\n   * A selector that will return remaining items after a filter.\n   */\n  static get selectorItemResults() {\n    return `${prefix}-multi-select-item:not([filtered])`;\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 this multi select item is being toggled upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of toggling this multi select item.\n   */\n  static get eventBeforeToggle() {\n    return `${prefix}-multi-select-beingtoggled`;\n  }\n\n  /**\n   * The name of the custom event fired after this multi select item is toggled upon a user gesture.\n   */\n  static get eventToggle() {\n    return `${prefix}-multi-select-toggled`;\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"],"mappings":"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"}

package/es/components/notification/inline-notification.d.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/es/components/notification/inline-notification.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/notification/inline-notification.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAOH,OAAO,EAAuB,UAAU,EAAiB,MAAM,aAAa,CAAC;AAG7E,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAG9D,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAchD;;;;;;;;;;GAUG;AACH,cACM,oBAAqB,SAAQ,yBAAsB;IACvD;;OAEG;IACH,SAAS,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE3C;;OAEG;IACH,SAAS,CAAC,KAAK,oBAA4B;IAE3C;;;;OAIG;IACH,SAAS,CAAC,cAAc,CAAC,SAAS,EAAE,MAAM;IAK1C;;;;OAIG;IACH,SAAS,CAAC,kBAAkB,CAAC,OAAO,EAAE,MAAM;IAU5C;;;;OAIG;IACH,SAAS,CAAC,uBAAuB,CAAC,EAAE,MAAM,EAAE,EAAE,UAAU;IAIxD;;;;OAIG;IACH,SAAS,CAAC,gCAAgC,CAAC,WAAW,EAAE,WAAW,GAAG,IAAI;IA6B1E;;OAEG;IACH,SAAS,CAAC,aAAa;IAoBvB;;OAEG;IACH,SAAS,CAAC,WAAW;IAerB;;OAEG;IACH,SAAS,CAAC,WAAW;IAWrB;;OAEG;IAEH,gBAAgB,EAAG,MAAM,CAAC;IAE1B;;OAEG;IAEH,eAAe,UAAS;IAExB;;OAEG;IAEH,SAAS,EAAG,MAAM,CAAC;IAEnB;;OAEG;IAEH,IAAI,oBAA6B;IAEjC;;OAEG;IAEH,WAAW,UAAS;IAEpB;;OAEG;IAEH,IAAI,UAAQ;IAEZ;;OAEG;IAEH,OAAO,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE9B;;OAEG;IAEH,QAAQ,SAAM;IAEd;;OAEG;IAEH,KAAK,SAAM;IAEX,iBAAiB;IAOjB,OAAO,CAAC,iBAAiB,KAAA;IAazB,MAAM;IAUN;;;OAGG;IACH,MAAM,KAAK,gBAAgB,WAE1B;IAED;;OAEG;IACH,MAAM,KAAK,UAAU,WAEpB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,oBAAoB,CAAC","file":"inline-notification.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2022\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 CheckmarkFilled20 from '@carbon/icons/lib/checkmark--filled/20';\nimport Close20 from '@carbon/icons/lib/close/20';\nimport ErrorFilled20 from '@carbon/icons/lib/error--filled/20';\nimport WarningFilled20 from '@carbon/icons/lib/warning--filled/20';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport { customElement, html, LitElement, property, svg } from 'lit-element';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport FocusMixin from '../../globals/mixins/focus';\nimport { NOTIFICATION_KIND, NOTIFICATION_TYPE } from './defs';\nimport styles from './inline-notification.scss';\n\nexport { NOTIFICATION_KIND, NOTIFICATION_TYPE };\n\nconst { prefix } = settings;\n\n/**\n * The default icons, keyed by notification kind.\n */\nconst iconsForKinds = {\n  [NOTIFICATION_KIND.SUCCESS]: CheckmarkFilled20,\n  [NOTIFICATION_KIND.INFO]: undefined,\n  [NOTIFICATION_KIND.WARNING]: WarningFilled20,\n  [NOTIFICATION_KIND.ERROR]: ErrorFilled20,\n};\n\n/**\n * Inline notification.\n *\n * @element bx-inline-notification\n * @slot subtitle - The subtitle.\n * @slot title - The title.\n * @fires bx-notification-beingclosed\n *   The custom event fired before this notification is being closed upon a user gesture.\n *   Cancellation of this event stops the user-initiated action of closing this notification.\n * @fires bx-notification-closed - The custom event fired after this notification is closed upon a user gesture.\n */\n@customElement(`${prefix}-inline-notification`)\nclass BXInlineNotification extends FocusMixin(LitElement) {\n  /**\n   * Current timeout identifier\n   */\n  protected _timeoutID: number | null = null;\n\n  /**\n   * Notification type.\n   */\n  protected _type = NOTIFICATION_TYPE.INLINE;\n\n  /**\n   * Cancels the current timeout configured for the notification\n   *\n   * @param timeoutID current timeout's identifier\n   */\n  protected _cancelTimeout(timeoutID: number) {\n    clearTimeout(timeoutID);\n    this._timeoutID = null;\n  }\n\n  /**\n   * Overrides (if exists) the timeout to close the notification\n   *\n   * @param timeout the time in ms\n   */\n  protected _initializeTimeout(timeout: number) {\n    if (this._timeoutID) {\n      this._cancelTimeout(this._timeoutID);\n    }\n    this._timeoutID = setTimeout(\n      this._handleUserOrTimerInitiatedClose.bind(this, null),\n      timeout\n    ) as unknown as number;\n  }\n\n  /**\n   * Handles `click` event on the close button.\n   *\n   * @param event The event.\n   */\n  protected _handleClickCloseButton({ target }: MouseEvent) {\n    this._handleUserOrTimerInitiatedClose(target);\n  }\n\n  /**\n   * Handles user-initiated or through timer close request of this modal.\n   *\n   * @param triggeredBy The element that triggered this close request, if there is one.\n   */\n  protected _handleUserOrTimerInitiatedClose(triggeredBy: EventTarget | null) {\n    if (this.open) {\n      const init = {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n        detail: {\n          triggeredBy,\n        },\n      };\n      if (\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof BXInlineNotification).eventBeforeClose,\n            init\n          )\n        )\n      ) {\n        this.open = false;\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof BXInlineNotification).eventClose,\n            init\n          )\n        );\n      }\n    }\n  }\n\n  /**\n   * @returns The template part for the close button.\n   */\n  protected _renderButton() {\n    const {\n      closeButtonLabel,\n      _type: type,\n      _handleClickCloseButton: handleClickCloseButton,\n    } = this;\n    return html`\n      <button\n        type=\"button\"\n        class=\"${prefix}--${type}-notification__close-button\"\n        aria-label=${ifDefined(closeButtonLabel)}\n        title=${ifDefined(closeButtonLabel)}\n        @click=\"${handleClickCloseButton}\">\n        ${Close20({\n          class: `${prefix}--${type}-notification__close-icon`,\n        })}\n      </button>\n    `;\n  }\n\n  /**\n   * @returns The template part for the text contents.\n   */\n  protected _renderText() {\n    const { subtitle, title, _type: type } = this;\n    return html`\n      <div class=\"${prefix}--${type}-notification__text-wrapper\">\n        <p class=\"${prefix}--${type}-notification__title\">\n          ${title}<slot name=\"title\"></slot>\n        </p>\n        <div class=\"${prefix}--${type}-notification__subtitle\">\n          ${subtitle}<slot name=\"subtitle\"></slot>\n        </div>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  /**\n   * @returns The template part for the icon.\n   */\n  protected _renderIcon() {\n    const { iconLabel, kind, _type: type } = this;\n    const { [kind]: icon } = iconsForKinds;\n    return !icon\n      ? undefined\n      : icon({\n          class: `${prefix}--${type}-notification__icon`,\n          children: !iconLabel ? undefined : svg`<title>${iconLabel}</title>`,\n        });\n  }\n\n  /**\n   * The a11y text for the close button.\n   */\n  @property({ attribute: 'close-button-label' })\n  closeButtonLabel!: string;\n\n  /**\n   * `true` to hide the close button.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-close-button' })\n  hideCloseButton = false;\n\n  /**\n   * The a11y text for the icon.\n   */\n  @property({ attribute: 'icon-label' })\n  iconLabel!: string;\n\n  /**\n   * Notification kind.\n   */\n  @property({ reflect: true })\n  kind = NOTIFICATION_KIND.SUCCESS;\n\n  /**\n   * Low contrast mode\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'low-contrast' })\n  lowContrast = false;\n\n  /**\n   * `true` if the notification should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = true;\n\n  /**\n   * Notification time in ms until gets closed.\n   */\n  @property({ type: Number, reflect: true })\n  timeout: number | null = null;\n\n  /**\n   * The subtitle.\n   */\n  @property()\n  subtitle = '';\n\n  /**\n   * The title.\n   */\n  @property()\n  title = '';\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'alert');\n    }\n    super.connectedCallback();\n  }\n\n  updated(changedProperties) {\n    const openChanged = changedProperties.has('open');\n    const timeoutChanged = changedProperties.has('timeout');\n\n    if (openChanged || timeoutChanged) {\n      if (this.open && this.timeout) {\n        this._initializeTimeout(this.timeout);\n      } else if (!this.open && this._timeoutID) {\n        this._cancelTimeout(this._timeoutID);\n      }\n    }\n  }\n\n  render() {\n    const { _type: type } = this;\n    return html`\n      <div class=\"${prefix}--${type}-notification__details\">\n        ${this._renderIcon()}${this._renderText()}\n      </div>\n      ${this._renderButton()}\n    `;\n  }\n\n  /**\n   * The name of the custom event fired before this notification is being closed upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of closing this notification.\n   */\n  static get eventBeforeClose() {\n    return `${prefix}-notification-beingclosed`;\n  }\n\n  /**\n   * The name of the custom event fired after this notification is closed upon a user gesture.\n   */\n  static get eventClose() {\n    return `${prefix}-notification-closed`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXInlineNotification;\n"]}
+{"version":3,"sources":["components/notification/inline-notification.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAOH,OAAO,EAAQ,UAAU,EAAiB,MAAM,aAAa,CAAC;AAI9D,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAG9D,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAchD;;;;;;;;;;GAUG;AACH,cACM,oBAAqB,SAAQ,yBAAsB;IACvD;;OAEG;IACH,SAAS,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE3C;;OAEG;IACH,SAAS,CAAC,KAAK,oBAA4B;IAE3C;;;;OAIG;IACH,SAAS,CAAC,cAAc,CAAC,SAAS,EAAE,MAAM;IAK1C;;;;OAIG;IACH,SAAS,CAAC,kBAAkB,CAAC,OAAO,EAAE,MAAM;IAU5C;;;;OAIG;IACH,SAAS,CAAC,uBAAuB,CAAC,EAAE,MAAM,EAAE,EAAE,UAAU;IAIxD;;;;OAIG;IACH,SAAS,CAAC,gCAAgC,CAAC,WAAW,EAAE,WAAW,GAAG,IAAI;IA6B1E;;OAEG;IACH,SAAS,CAAC,aAAa;IAoBvB;;OAEG;IACH,SAAS,CAAC,WAAW;IAerB;;OAEG;IACH,SAAS,CAAC,WAAW;IAWrB;;OAEG;IAEH,gBAAgB,EAAG,MAAM,CAAC;IAE1B;;OAEG;IAEH,eAAe,UAAS;IAExB;;OAEG;IAEH,SAAS,EAAG,MAAM,CAAC;IAEnB;;OAEG;IAEH,IAAI,oBAA6B;IAEjC;;OAEG;IAEH,WAAW,UAAS;IAEpB;;OAEG;IAEH,IAAI,UAAQ;IAEZ;;OAEG;IAEH,OAAO,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE9B;;OAEG;IAEH,QAAQ,SAAM;IAEd;;OAEG;IAEH,KAAK,SAAM;IAEX,iBAAiB;IAOjB,OAAO,CAAC,iBAAiB,KAAA;IAazB,MAAM;IAUN;;;OAGG;IACH,MAAM,KAAK,gBAAgB,WAE1B;IAED;;OAEG;IACH,MAAM,KAAK,UAAU,WAEpB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,oBAAoB,CAAC","file":"inline-notification.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 CheckmarkFilled20 from '@carbon/icons/lib/checkmark--filled/20';\nimport Close20 from '@carbon/icons/lib/close/20';\nimport ErrorFilled20 from '@carbon/icons/lib/error--filled/20';\nimport WarningFilled20 from '@carbon/icons/lib/warning--filled/20';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport { html, LitElement, property, svg } from 'lit-element';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport FocusMixin from '../../globals/mixins/focus';\nimport { NOTIFICATION_KIND, NOTIFICATION_TYPE } from './defs';\nimport styles from './inline-notification.scss';\n\nexport { NOTIFICATION_KIND, NOTIFICATION_TYPE };\n\nconst { prefix } = settings;\n\n/**\n * The default icons, keyed by notification kind.\n */\nconst iconsForKinds = {\n  [NOTIFICATION_KIND.SUCCESS]: CheckmarkFilled20,\n  [NOTIFICATION_KIND.INFO]: undefined,\n  [NOTIFICATION_KIND.WARNING]: WarningFilled20,\n  [NOTIFICATION_KIND.ERROR]: ErrorFilled20,\n};\n\n/**\n * Inline notification.\n *\n * @element bx-inline-notification\n * @slot subtitle - The subtitle.\n * @slot title - The title.\n * @fires bx-notification-beingclosed\n *   The custom event fired before this notification is being closed upon a user gesture.\n *   Cancellation of this event stops the user-initiated action of closing this notification.\n * @fires bx-notification-closed - The custom event fired after this notification is closed upon a user gesture.\n */\n@customElement(`${prefix}-inline-notification`)\nclass BXInlineNotification extends FocusMixin(LitElement) {\n  /**\n   * Current timeout identifier\n   */\n  protected _timeoutID: number | null = null;\n\n  /**\n   * Notification type.\n   */\n  protected _type = NOTIFICATION_TYPE.INLINE;\n\n  /**\n   * Cancels the current timeout configured for the notification\n   *\n   * @param timeoutID current timeout's identifier\n   */\n  protected _cancelTimeout(timeoutID: number) {\n    clearTimeout(timeoutID);\n    this._timeoutID = null;\n  }\n\n  /**\n   * Overrides (if exists) the timeout to close the notification\n   *\n   * @param timeout the time in ms\n   */\n  protected _initializeTimeout(timeout: number) {\n    if (this._timeoutID) {\n      this._cancelTimeout(this._timeoutID);\n    }\n    this._timeoutID = setTimeout(\n      this._handleUserOrTimerInitiatedClose.bind(this, null),\n      timeout\n    ) as unknown as number;\n  }\n\n  /**\n   * Handles `click` event on the close button.\n   *\n   * @param event The event.\n   */\n  protected _handleClickCloseButton({ target }: MouseEvent) {\n    this._handleUserOrTimerInitiatedClose(target);\n  }\n\n  /**\n   * Handles user-initiated or through timer close request of this modal.\n   *\n   * @param triggeredBy The element that triggered this close request, if there is one.\n   */\n  protected _handleUserOrTimerInitiatedClose(triggeredBy: EventTarget | null) {\n    if (this.open) {\n      const init = {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n        detail: {\n          triggeredBy,\n        },\n      };\n      if (\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof BXInlineNotification).eventBeforeClose,\n            init\n          )\n        )\n      ) {\n        this.open = false;\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof BXInlineNotification).eventClose,\n            init\n          )\n        );\n      }\n    }\n  }\n\n  /**\n   * @returns The template part for the close button.\n   */\n  protected _renderButton() {\n    const {\n      closeButtonLabel,\n      _type: type,\n      _handleClickCloseButton: handleClickCloseButton,\n    } = this;\n    return html`\n      <button\n        type=\"button\"\n        class=\"${prefix}--${type}-notification__close-button\"\n        aria-label=${ifDefined(closeButtonLabel)}\n        title=${ifDefined(closeButtonLabel)}\n        @click=\"${handleClickCloseButton}\">\n        ${Close20({\n          class: `${prefix}--${type}-notification__close-icon`,\n        })}\n      </button>\n    `;\n  }\n\n  /**\n   * @returns The template part for the text contents.\n   */\n  protected _renderText() {\n    const { subtitle, title, _type: type } = this;\n    return html`\n      <div class=\"${prefix}--${type}-notification__text-wrapper\">\n        <p class=\"${prefix}--${type}-notification__title\">\n          ${title}<slot name=\"title\"></slot>\n        </p>\n        <div class=\"${prefix}--${type}-notification__subtitle\">\n          ${subtitle}<slot name=\"subtitle\"></slot>\n        </div>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  /**\n   * @returns The template part for the icon.\n   */\n  protected _renderIcon() {\n    const { iconLabel, kind, _type: type } = this;\n    const { [kind]: icon } = iconsForKinds;\n    return !icon\n      ? undefined\n      : icon({\n          class: `${prefix}--${type}-notification__icon`,\n          children: !iconLabel ? undefined : svg`<title>${iconLabel}</title>`,\n        });\n  }\n\n  /**\n   * The a11y text for the close button.\n   */\n  @property({ attribute: 'close-button-label' })\n  closeButtonLabel!: string;\n\n  /**\n   * `true` to hide the close button.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-close-button' })\n  hideCloseButton = false;\n\n  /**\n   * The a11y text for the icon.\n   */\n  @property({ attribute: 'icon-label' })\n  iconLabel!: string;\n\n  /**\n   * Notification kind.\n   */\n  @property({ reflect: true })\n  kind = NOTIFICATION_KIND.SUCCESS;\n\n  /**\n   * Low contrast mode\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'low-contrast' })\n  lowContrast = false;\n\n  /**\n   * `true` if the notification should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = true;\n\n  /**\n   * Notification time in ms until gets closed.\n   */\n  @property({ type: Number, reflect: true })\n  timeout: number | null = null;\n\n  /**\n   * The subtitle.\n   */\n  @property()\n  subtitle = '';\n\n  /**\n   * The title.\n   */\n  @property()\n  title = '';\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'alert');\n    }\n    super.connectedCallback();\n  }\n\n  updated(changedProperties) {\n    const openChanged = changedProperties.has('open');\n    const timeoutChanged = changedProperties.has('timeout');\n\n    if (openChanged || timeoutChanged) {\n      if (this.open && this.timeout) {\n        this._initializeTimeout(this.timeout);\n      } else if (!this.open && this._timeoutID) {\n        this._cancelTimeout(this._timeoutID);\n      }\n    }\n  }\n\n  render() {\n    const { _type: type } = this;\n    return html`\n      <div class=\"${prefix}--${type}-notification__details\">\n        ${this._renderIcon()}${this._renderText()}\n      </div>\n      ${this._renderButton()}\n    `;\n  }\n\n  /**\n   * The name of the custom event fired before this notification is being closed upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of closing this notification.\n   */\n  static get eventBeforeClose() {\n    return `${prefix}-notification-beingclosed`;\n  }\n\n  /**\n   * The name of the custom event fired after this notification is closed upon a user gesture.\n   */\n  static get eventClose() {\n    return `${prefix}-notification-closed`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXInlineNotification;\n"]}

package/es/components/notification/inline-notification.js

@@ -9,14 +9,14 @@ let _ = t => t,
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */ /**
      * @license
      *
-     * Copyright IBM Corp. 2019, 2022
+     * Copyright IBM Corp. 2019, 2023
      *
      * This source code is licensed under the Apache-2.0 license found in the
      * LICENSE file in the root directory of this source tree.
@@ -27,8 +27,9 @@ import Close20 from "../../icons/close/20";
 import ErrorFilled20 from "../../icons/error--filled/20";
 import WarningFilled20 from "../../icons/warning--filled/20";
 import settings from 'carbon-components/es/globals/js/settings';
-import { customElement, html, LitElement, property, svg } from 'lit-element';
+import { html, LitElement, property, svg } from 'lit-element';
 import { ifDefined } from 'lit-html/directives/if-defined';
+import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 import FocusMixin from '../../globals/mixins/focus';
 import { NOTIFICATION_KIND, NOTIFICATION_TYPE } from './defs';
 import styles from "././inline-notification.css.js";

package/es/components/notification/inline-notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"inline-notification.js","names":["CheckmarkFilled20","Close20","ErrorFilled20","WarningFilled20","settings","customElement","html","LitElement","property","svg","ifDefined","FocusMixin","NOTIFICATION_KIND","NOTIFICATION_TYPE","styles","prefix","iconsForKinds","SUCCESS","INFO","undefined","WARNING","ERROR","BXInlineNotification","_decorate","_initialize","_FocusMixin","constructor","args","F","d","kind","key","value","INLINE","_cancelTimeout","timeoutID","clearTimeout","_timeoutID","_initializeTimeout","timeout","setTimeout","_handleUserOrTimerInitiatedClose","bind","_handleClickCloseButton","target","triggeredBy","open","init","bubbles","cancelable","composed","detail","dispatchEvent","CustomEvent","eventBeforeClose","eventClose","_renderButton","closeButtonLabel","_type","type","handleClickCloseButton","_t","_","class","_renderText","subtitle","title","_t2","_renderIcon","iconLabel","icon","children","_t3","decorators","attribute","Boolean","reflect","Number","connectedCallback","hasAttribute","setAttribute","_get","_getPrototypeOf","prototype","call","updated","changedProperties","openChanged","has","timeoutChanged","render","_t4","static"],"sources":["components/notification/inline-notification.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2022\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 CheckmarkFilled20 from '@carbon/icons/lib/checkmark--filled/20';\nimport Close20 from '@carbon/icons/lib/close/20';\nimport ErrorFilled20 from '@carbon/icons/lib/error--filled/20';\nimport WarningFilled20 from '@carbon/icons/lib/warning--filled/20';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport { customElement, html, LitElement, property, svg } from 'lit-element';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport FocusMixin from '../../globals/mixins/focus';\nimport { NOTIFICATION_KIND, NOTIFICATION_TYPE } from './defs';\nimport styles from './inline-notification.scss';\n\nexport { NOTIFICATION_KIND, NOTIFICATION_TYPE };\n\nconst { prefix } = settings;\n\n/**\n * The default icons, keyed by notification kind.\n */\nconst iconsForKinds = {\n  [NOTIFICATION_KIND.SUCCESS]: CheckmarkFilled20,\n  [NOTIFICATION_KIND.INFO]: undefined,\n  [NOTIFICATION_KIND.WARNING]: WarningFilled20,\n  [NOTIFICATION_KIND.ERROR]: ErrorFilled20,\n};\n\n/**\n * Inline notification.\n *\n * @element bx-inline-notification\n * @slot subtitle - The subtitle.\n * @slot title - The title.\n * @fires bx-notification-beingclosed\n *   The custom event fired before this notification is being closed upon a user gesture.\n *   Cancellation of this event stops the user-initiated action of closing this notification.\n * @fires bx-notification-closed - The custom event fired after this notification is closed upon a user gesture.\n */\n@customElement(`${prefix}-inline-notification`)\nclass BXInlineNotification extends FocusMixin(LitElement) {\n  /**\n   * Current timeout identifier\n   */\n  protected _timeoutID: number | null = null;\n\n  /**\n   * Notification type.\n   */\n  protected _type = NOTIFICATION_TYPE.INLINE;\n\n  /**\n   * Cancels the current timeout configured for the notification\n   *\n   * @param timeoutID current timeout's identifier\n   */\n  protected _cancelTimeout(timeoutID: number) {\n    clearTimeout(timeoutID);\n    this._timeoutID = null;\n  }\n\n  /**\n   * Overrides (if exists) the timeout to close the notification\n   *\n   * @param timeout the time in ms\n   */\n  protected _initializeTimeout(timeout: number) {\n    if (this._timeoutID) {\n      this._cancelTimeout(this._timeoutID);\n    }\n    this._timeoutID = setTimeout(\n      this._handleUserOrTimerInitiatedClose.bind(this, null),\n      timeout\n    ) as unknown as number;\n  }\n\n  /**\n   * Handles `click` event on the close button.\n   *\n   * @param event The event.\n   */\n  protected _handleClickCloseButton({ target }: MouseEvent) {\n    this._handleUserOrTimerInitiatedClose(target);\n  }\n\n  /**\n   * Handles user-initiated or through timer close request of this modal.\n   *\n   * @param triggeredBy The element that triggered this close request, if there is one.\n   */\n  protected _handleUserOrTimerInitiatedClose(triggeredBy: EventTarget | null) {\n    if (this.open) {\n      const init = {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n        detail: {\n          triggeredBy,\n        },\n      };\n      if (\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof BXInlineNotification).eventBeforeClose,\n            init\n          )\n        )\n      ) {\n        this.open = false;\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof BXInlineNotification).eventClose,\n            init\n          )\n        );\n      }\n    }\n  }\n\n  /**\n   * @returns The template part for the close button.\n   */\n  protected _renderButton() {\n    const {\n      closeButtonLabel,\n      _type: type,\n      _handleClickCloseButton: handleClickCloseButton,\n    } = this;\n    return html`\n      <button\n        type=\"button\"\n        class=\"${prefix}--${type}-notification__close-button\"\n        aria-label=${ifDefined(closeButtonLabel)}\n        title=${ifDefined(closeButtonLabel)}\n        @click=\"${handleClickCloseButton}\">\n        ${Close20({\n          class: `${prefix}--${type}-notification__close-icon`,\n        })}\n      </button>\n    `;\n  }\n\n  /**\n   * @returns The template part for the text contents.\n   */\n  protected _renderText() {\n    const { subtitle, title, _type: type } = this;\n    return html`\n      <div class=\"${prefix}--${type}-notification__text-wrapper\">\n        <p class=\"${prefix}--${type}-notification__title\">\n          ${title}<slot name=\"title\"></slot>\n        </p>\n        <div class=\"${prefix}--${type}-notification__subtitle\">\n          ${subtitle}<slot name=\"subtitle\"></slot>\n        </div>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  /**\n   * @returns The template part for the icon.\n   */\n  protected _renderIcon() {\n    const { iconLabel, kind, _type: type } = this;\n    const { [kind]: icon } = iconsForKinds;\n    return !icon\n      ? undefined\n      : icon({\n          class: `${prefix}--${type}-notification__icon`,\n          children: !iconLabel ? undefined : svg`<title>${iconLabel}</title>`,\n        });\n  }\n\n  /**\n   * The a11y text for the close button.\n   */\n  @property({ attribute: 'close-button-label' })\n  closeButtonLabel!: string;\n\n  /**\n   * `true` to hide the close button.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-close-button' })\n  hideCloseButton = false;\n\n  /**\n   * The a11y text for the icon.\n   */\n  @property({ attribute: 'icon-label' })\n  iconLabel!: string;\n\n  /**\n   * Notification kind.\n   */\n  @property({ reflect: true })\n  kind = NOTIFICATION_KIND.SUCCESS;\n\n  /**\n   * Low contrast mode\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'low-contrast' })\n  lowContrast = false;\n\n  /**\n   * `true` if the notification should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = true;\n\n  /**\n   * Notification time in ms until gets closed.\n   */\n  @property({ type: Number, reflect: true })\n  timeout: number | null = null;\n\n  /**\n   * The subtitle.\n   */\n  @property()\n  subtitle = '';\n\n  /**\n   * The title.\n   */\n  @property()\n  title = '';\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'alert');\n    }\n    super.connectedCallback();\n  }\n\n  updated(changedProperties) {\n    const openChanged = changedProperties.has('open');\n    const timeoutChanged = changedProperties.has('timeout');\n\n    if (openChanged || timeoutChanged) {\n      if (this.open && this.timeout) {\n        this._initializeTimeout(this.timeout);\n      } else if (!this.open && this._timeoutID) {\n        this._cancelTimeout(this._timeoutID);\n      }\n    }\n  }\n\n  render() {\n    const { _type: type } = this;\n    return html`\n      <div class=\"${prefix}--${type}-notification__details\">\n        ${this._renderIcon()}${this._renderText()}\n      </div>\n      ${this._renderButton()}\n    `;\n  }\n\n  /**\n   * The name of the custom event fired before this notification is being closed upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of closing this notification.\n   */\n  static get eventBeforeClose() {\n    return `${prefix}-notification-beingclosed`;\n  }\n\n  /**\n   * The name of the custom event fired after this notification is closed upon a user gesture.\n   */\n  static get eventClose() {\n    return `${prefix}-notification-closed`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXInlineNotification;\n"],"mappings":"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"}
+{"version":3,"file":"inline-notification.js","names":["CheckmarkFilled20","Close20","ErrorFilled20","WarningFilled20","settings","html","LitElement","property","svg","ifDefined","carbonElement","customElement","FocusMixin","NOTIFICATION_KIND","NOTIFICATION_TYPE","styles","prefix","iconsForKinds","SUCCESS","INFO","undefined","WARNING","ERROR","BXInlineNotification","_decorate","_initialize","_FocusMixin","constructor","args","F","d","kind","key","value","INLINE","_cancelTimeout","timeoutID","clearTimeout","_timeoutID","_initializeTimeout","timeout","setTimeout","_handleUserOrTimerInitiatedClose","bind","_handleClickCloseButton","target","triggeredBy","open","init","bubbles","cancelable","composed","detail","dispatchEvent","CustomEvent","eventBeforeClose","eventClose","_renderButton","closeButtonLabel","_type","type","handleClickCloseButton","_t","_","class","_renderText","subtitle","title","_t2","_renderIcon","iconLabel","icon","children","_t3","decorators","attribute","Boolean","reflect","Number","connectedCallback","hasAttribute","setAttribute","_get","_getPrototypeOf","prototype","call","updated","changedProperties","openChanged","has","timeoutChanged","render","_t4","static"],"sources":["components/notification/inline-notification.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 CheckmarkFilled20 from '@carbon/icons/lib/checkmark--filled/20';\nimport Close20 from '@carbon/icons/lib/close/20';\nimport ErrorFilled20 from '@carbon/icons/lib/error--filled/20';\nimport WarningFilled20 from '@carbon/icons/lib/warning--filled/20';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport { html, LitElement, property, svg } from 'lit-element';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport FocusMixin from '../../globals/mixins/focus';\nimport { NOTIFICATION_KIND, NOTIFICATION_TYPE } from './defs';\nimport styles from './inline-notification.scss';\n\nexport { NOTIFICATION_KIND, NOTIFICATION_TYPE };\n\nconst { prefix } = settings;\n\n/**\n * The default icons, keyed by notification kind.\n */\nconst iconsForKinds = {\n  [NOTIFICATION_KIND.SUCCESS]: CheckmarkFilled20,\n  [NOTIFICATION_KIND.INFO]: undefined,\n  [NOTIFICATION_KIND.WARNING]: WarningFilled20,\n  [NOTIFICATION_KIND.ERROR]: ErrorFilled20,\n};\n\n/**\n * Inline notification.\n *\n * @element bx-inline-notification\n * @slot subtitle - The subtitle.\n * @slot title - The title.\n * @fires bx-notification-beingclosed\n *   The custom event fired before this notification is being closed upon a user gesture.\n *   Cancellation of this event stops the user-initiated action of closing this notification.\n * @fires bx-notification-closed - The custom event fired after this notification is closed upon a user gesture.\n */\n@customElement(`${prefix}-inline-notification`)\nclass BXInlineNotification extends FocusMixin(LitElement) {\n  /**\n   * Current timeout identifier\n   */\n  protected _timeoutID: number | null = null;\n\n  /**\n   * Notification type.\n   */\n  protected _type = NOTIFICATION_TYPE.INLINE;\n\n  /**\n   * Cancels the current timeout configured for the notification\n   *\n   * @param timeoutID current timeout's identifier\n   */\n  protected _cancelTimeout(timeoutID: number) {\n    clearTimeout(timeoutID);\n    this._timeoutID = null;\n  }\n\n  /**\n   * Overrides (if exists) the timeout to close the notification\n   *\n   * @param timeout the time in ms\n   */\n  protected _initializeTimeout(timeout: number) {\n    if (this._timeoutID) {\n      this._cancelTimeout(this._timeoutID);\n    }\n    this._timeoutID = setTimeout(\n      this._handleUserOrTimerInitiatedClose.bind(this, null),\n      timeout\n    ) as unknown as number;\n  }\n\n  /**\n   * Handles `click` event on the close button.\n   *\n   * @param event The event.\n   */\n  protected _handleClickCloseButton({ target }: MouseEvent) {\n    this._handleUserOrTimerInitiatedClose(target);\n  }\n\n  /**\n   * Handles user-initiated or through timer close request of this modal.\n   *\n   * @param triggeredBy The element that triggered this close request, if there is one.\n   */\n  protected _handleUserOrTimerInitiatedClose(triggeredBy: EventTarget | null) {\n    if (this.open) {\n      const init = {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n        detail: {\n          triggeredBy,\n        },\n      };\n      if (\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof BXInlineNotification).eventBeforeClose,\n            init\n          )\n        )\n      ) {\n        this.open = false;\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof BXInlineNotification).eventClose,\n            init\n          )\n        );\n      }\n    }\n  }\n\n  /**\n   * @returns The template part for the close button.\n   */\n  protected _renderButton() {\n    const {\n      closeButtonLabel,\n      _type: type,\n      _handleClickCloseButton: handleClickCloseButton,\n    } = this;\n    return html`\n      <button\n        type=\"button\"\n        class=\"${prefix}--${type}-notification__close-button\"\n        aria-label=${ifDefined(closeButtonLabel)}\n        title=${ifDefined(closeButtonLabel)}\n        @click=\"${handleClickCloseButton}\">\n        ${Close20({\n          class: `${prefix}--${type}-notification__close-icon`,\n        })}\n      </button>\n    `;\n  }\n\n  /**\n   * @returns The template part for the text contents.\n   */\n  protected _renderText() {\n    const { subtitle, title, _type: type } = this;\n    return html`\n      <div class=\"${prefix}--${type}-notification__text-wrapper\">\n        <p class=\"${prefix}--${type}-notification__title\">\n          ${title}<slot name=\"title\"></slot>\n        </p>\n        <div class=\"${prefix}--${type}-notification__subtitle\">\n          ${subtitle}<slot name=\"subtitle\"></slot>\n        </div>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  /**\n   * @returns The template part for the icon.\n   */\n  protected _renderIcon() {\n    const { iconLabel, kind, _type: type } = this;\n    const { [kind]: icon } = iconsForKinds;\n    return !icon\n      ? undefined\n      : icon({\n          class: `${prefix}--${type}-notification__icon`,\n          children: !iconLabel ? undefined : svg`<title>${iconLabel}</title>`,\n        });\n  }\n\n  /**\n   * The a11y text for the close button.\n   */\n  @property({ attribute: 'close-button-label' })\n  closeButtonLabel!: string;\n\n  /**\n   * `true` to hide the close button.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-close-button' })\n  hideCloseButton = false;\n\n  /**\n   * The a11y text for the icon.\n   */\n  @property({ attribute: 'icon-label' })\n  iconLabel!: string;\n\n  /**\n   * Notification kind.\n   */\n  @property({ reflect: true })\n  kind = NOTIFICATION_KIND.SUCCESS;\n\n  /**\n   * Low contrast mode\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'low-contrast' })\n  lowContrast = false;\n\n  /**\n   * `true` if the notification should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = true;\n\n  /**\n   * Notification time in ms until gets closed.\n   */\n  @property({ type: Number, reflect: true })\n  timeout: number | null = null;\n\n  /**\n   * The subtitle.\n   */\n  @property()\n  subtitle = '';\n\n  /**\n   * The title.\n   */\n  @property()\n  title = '';\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'alert');\n    }\n    super.connectedCallback();\n  }\n\n  updated(changedProperties) {\n    const openChanged = changedProperties.has('open');\n    const timeoutChanged = changedProperties.has('timeout');\n\n    if (openChanged || timeoutChanged) {\n      if (this.open && this.timeout) {\n        this._initializeTimeout(this.timeout);\n      } else if (!this.open && this._timeoutID) {\n        this._cancelTimeout(this._timeoutID);\n      }\n    }\n  }\n\n  render() {\n    const { _type: type } = this;\n    return html`\n      <div class=\"${prefix}--${type}-notification__details\">\n        ${this._renderIcon()}${this._renderText()}\n      </div>\n      ${this._renderButton()}\n    `;\n  }\n\n  /**\n   * The name of the custom event fired before this notification is being closed upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of closing this notification.\n   */\n  static get eventBeforeClose() {\n    return `${prefix}-notification-beingclosed`;\n  }\n\n  /**\n   * The name of the custom event fired after this notification is closed upon a user gesture.\n   */\n  static get eventClose() {\n    return `${prefix}-notification-closed`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXInlineNotification;\n"],"mappings":"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"}

package/es/components/notification/toast-notification.d.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/es/components/notification/toast-notification.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/notification/toast-notification.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAC3C,OAAO,oBAAoB,MAAM,uBAAuB,CAAC;AAKzD;;;;;;;;;;GAUG;AACH,cACM,mBAAoB,SAAQ,oBAAoB;IACpD,SAAS,CAAC,KAAK,oBAA2B;IAE1C,SAAS,CAAC,WAAW;IAkBrB;;OAEG;IAEH,OAAO,SAAM;IAEb,MAAM;IAWN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,mBAAmB,CAAC","file":"toast-notification.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2022\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, customElement } from 'lit-element';\nimport { NOTIFICATION_TYPE } from './defs';\nimport BXInlineNotification from './inline-notification';\nimport styles from './toast-notification.scss';\n\nconst { prefix } = settings;\n\n/**\n * Toast notification.\n *\n * @element bx-toast-notification\n * @slot subtitle - The subtitle.\n * @slot title - The title.\n * @fires bx-notification-beingclosed\n *   The custom event fired before this notification is being closed upon a user gesture.\n *   Cancellation of this event stops the user-initiated action of closing this notification.\n * @fires bx-notification-closed - The custom event fired after this notification is closed upon a user gesture.\n */\n@customElement(`${prefix}-toast-notification`)\nclass BXToastNotification extends BXInlineNotification {\n  protected _type = NOTIFICATION_TYPE.TOAST;\n\n  protected _renderText() {\n    const { caption, subtitle, title, _type: type } = this;\n    return html`\n      <div class=\"${prefix}--${type}-notification__details\">\n        <h3 class=\"${prefix}--${type}-notification__title\">\n          ${title}<slot name=\"title\"></slot>\n        </h3>\n        <div class=\"${prefix}--${type}-notification__subtitle\">\n          ${subtitle}<slot name=\"subtitle\"></slot>\n        </div>\n        <div class=\"${prefix}--${type}-notification__caption\">\n          ${caption}<slot name=\"caption\"></slot>\n        </div>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  /**\n   * The caption.\n   */\n  @property()\n  caption = '';\n\n  render() {\n    const { _type: type } = this;\n    return html`\n      ${this._renderIcon()}\n      <div class=\"${prefix}--${type}-notification__details\">\n        ${this._renderText()}\n      </div>\n      ${this._renderButton()}\n    `;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXToastNotification;\n"]}
+{"version":3,"sources":["components/notification/toast-notification.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAKH,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAC3C,OAAO,oBAAoB,MAAM,uBAAuB,CAAC;AAKzD;;;;;;;;;;GAUG;AACH,cACM,mBAAoB,SAAQ,oBAAoB;IACpD,SAAS,CAAC,KAAK,oBAA2B;IAE1C,SAAS,CAAC,WAAW;IAkBrB;;OAEG;IAEH,OAAO,SAAM;IAEb,MAAM;IAWN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,mBAAmB,CAAC","file":"toast-notification.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 settings from 'carbon-components/es/globals/js/settings';\nimport { html, property } from 'lit-element';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { NOTIFICATION_TYPE } from './defs';\nimport BXInlineNotification from './inline-notification';\nimport styles from './toast-notification.scss';\n\nconst { prefix } = settings;\n\n/**\n * Toast notification.\n *\n * @element bx-toast-notification\n * @slot subtitle - The subtitle.\n * @slot title - The title.\n * @fires bx-notification-beingclosed\n *   The custom event fired before this notification is being closed upon a user gesture.\n *   Cancellation of this event stops the user-initiated action of closing this notification.\n * @fires bx-notification-closed - The custom event fired after this notification is closed upon a user gesture.\n */\n@customElement(`${prefix}-toast-notification`)\nclass BXToastNotification extends BXInlineNotification {\n  protected _type = NOTIFICATION_TYPE.TOAST;\n\n  protected _renderText() {\n    const { caption, subtitle, title, _type: type } = this;\n    return html`\n      <div class=\"${prefix}--${type}-notification__details\">\n        <h3 class=\"${prefix}--${type}-notification__title\">\n          ${title}<slot name=\"title\"></slot>\n        </h3>\n        <div class=\"${prefix}--${type}-notification__subtitle\">\n          ${subtitle}<slot name=\"subtitle\"></slot>\n        </div>\n        <div class=\"${prefix}--${type}-notification__caption\">\n          ${caption}<slot name=\"caption\"></slot>\n        </div>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  /**\n   * The caption.\n   */\n  @property()\n  caption = '';\n\n  render() {\n    const { _type: type } = this;\n    return html`\n      ${this._renderIcon()}\n      <div class=\"${prefix}--${type}-notification__details\">\n        ${this._renderText()}\n      </div>\n      ${this._renderButton()}\n    `;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXToastNotification;\n"]}

package/es/components/notification/toast-notification.js

@@ -5,14 +5,15 @@ let _ = t => t,
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 import settings from 'carbon-components/es/globals/js/settings';
-import { html, property, customElement } from 'lit-element';
+import { html, property } from 'lit-element';
+import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 import { NOTIFICATION_TYPE } from './defs';
 import BXInlineNotification from './inline-notification';
 import styles from "././toast-notification.css.js";

package/es/components/notification/toast-notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast-notification.js","names":["settings","html","property","customElement","NOTIFICATION_TYPE","BXInlineNotification","styles","prefix","BXToastNotification","_decorate","_initialize","_BXInlineNotification","constructor","args","F","d","kind","key","value","TOAST","_renderText","caption","subtitle","title","_type","type","_t","_","decorators","render","_t2","_renderIcon","_renderButton","static"],"sources":["components/notification/toast-notification.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2022\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, customElement } from 'lit-element';\nimport { NOTIFICATION_TYPE } from './defs';\nimport BXInlineNotification from './inline-notification';\nimport styles from './toast-notification.scss';\n\nconst { prefix } = settings;\n\n/**\n * Toast notification.\n *\n * @element bx-toast-notification\n * @slot subtitle - The subtitle.\n * @slot title - The title.\n * @fires bx-notification-beingclosed\n *   The custom event fired before this notification is being closed upon a user gesture.\n *   Cancellation of this event stops the user-initiated action of closing this notification.\n * @fires bx-notification-closed - The custom event fired after this notification is closed upon a user gesture.\n */\n@customElement(`${prefix}-toast-notification`)\nclass BXToastNotification extends BXInlineNotification {\n  protected _type = NOTIFICATION_TYPE.TOAST;\n\n  protected _renderText() {\n    const { caption, subtitle, title, _type: type } = this;\n    return html`\n      <div class=\"${prefix}--${type}-notification__details\">\n        <h3 class=\"${prefix}--${type}-notification__title\">\n          ${title}<slot name=\"title\"></slot>\n        </h3>\n        <div class=\"${prefix}--${type}-notification__subtitle\">\n          ${subtitle}<slot name=\"subtitle\"></slot>\n        </div>\n        <div class=\"${prefix}--${type}-notification__caption\">\n          ${caption}<slot name=\"caption\"></slot>\n        </div>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  /**\n   * The caption.\n   */\n  @property()\n  caption = '';\n\n  render() {\n    const { _type: type } = this;\n    return html`\n      ${this._renderIcon()}\n      <div class=\"${prefix}--${type}-notification__details\">\n        ${this._renderText()}\n      </div>\n      ${this._renderButton()}\n    `;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXToastNotification;\n"],"mappings":";;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,QAAQ,MAAM,0CAA0C;AAC/D,SAASC,IAAI,EAAEC,QAAQ,EAAEC,aAAa,QAAQ,aAAa;AAC3D,SAASC,iBAAiB,QAAQ,QAAQ;AAC1C,OAAOC,oBAAoB,MAAM,uBAAuB;AACxD,OAAOC,MAAM,MAAM,+BAA2B;AAE9C,MAAM;EAAEC;AAAO,CAAC,GAAGP,QAAQ;;AAE3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA,IAYMQ,mBAAmB,GAAAC,SAAA,EADxBN,aAAa,CAAE,GAAEI,MAAO,qBAAoB,CAAC,aAAAG,WAAA,EAAAC,qBAAA;EAA9C,MACMH,mBAAmB,SAAAG,qBAAA,CAA8B;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EAuCvD;EAAC;IAAAI,CAAA,EAvCKN,mBAAmB;IAAAO,CAAA;MAAAC,IAAA;MAAAC,GAAA;MAAAC,MAAA;QAAA,OACLd,iBAAiB,CAACe,KAAK;MAAA;IAAA;MAAAH,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAEzC,SAAAE,YAAA,EAAwB;QACtB,MAAM;UAAEC,OAAO;UAAEC,QAAQ;UAAEC,KAAK;UAAEC,KAAK,EAAEC;QAAK,CAAC,GAAG,IAAI;QACtD,OAAOxB,IAAI,CAAAyB,EAAA,KAAAA,EAAA,GAAAC,CAAA,2UACKpB,MAAM,EAAKkB,IAAI,EACdlB,MAAM,EAAKkB,IAAI,EACxBF,KAAK,EAEKhB,MAAM,EAAKkB,IAAI,EACzBH,QAAQ,EAEEf,MAAM,EAAKkB,IAAI,EACzBJ,OAAO;MAKjB;;MAEA;AACF;AACA;IAFE;MAAAL,IAAA;MAAAY,UAAA,GAGC1B,QAAQ,EAAE;MAAAe,GAAA;MAAAC,MAAA;QAAA,OACD,EAAE;MAAA;IAAA;MAAAF,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAEZ,SAAAW,OAAA,EAAS;QACP,MAAM;UAAEL,KAAK,EAAEC;QAAK,CAAC,GAAG,IAAI;QAC5B,OAAOxB,IAAI,CAAA6B,GAAA,KAAAA,GAAA,GAAAH,CAAA,2EACP,IAAI,CAACI,WAAW,EAAE,EACNxB,MAAM,EAAKkB,IAAI,EACzB,IAAI,CAACL,WAAW,EAAE,EAEpB,IAAI,CAACY,aAAa,EAAE;MAE1B;IAAC;MAAAhB,IAAA;MAAAiB,MAAA;MAAAhB,GAAA;MAAAC,MAAA;QAAA,OAEeZ,MAAM;MAAA;IAAA;EAAA;AAAA,GAtCUD,oBAAoB;AAyCtD,eAAeG,mBAAmB"}
+{"version":3,"file":"toast-notification.js","names":["settings","html","property","carbonElement","customElement","NOTIFICATION_TYPE","BXInlineNotification","styles","prefix","BXToastNotification","_decorate","_initialize","_BXInlineNotification","constructor","args","F","d","kind","key","value","TOAST","_renderText","caption","subtitle","title","_type","type","_t","_","decorators","render","_t2","_renderIcon","_renderButton","static"],"sources":["components/notification/toast-notification.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 settings from 'carbon-components/es/globals/js/settings';\nimport { html, property } from 'lit-element';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { NOTIFICATION_TYPE } from './defs';\nimport BXInlineNotification from './inline-notification';\nimport styles from './toast-notification.scss';\n\nconst { prefix } = settings;\n\n/**\n * Toast notification.\n *\n * @element bx-toast-notification\n * @slot subtitle - The subtitle.\n * @slot title - The title.\n * @fires bx-notification-beingclosed\n *   The custom event fired before this notification is being closed upon a user gesture.\n *   Cancellation of this event stops the user-initiated action of closing this notification.\n * @fires bx-notification-closed - The custom event fired after this notification is closed upon a user gesture.\n */\n@customElement(`${prefix}-toast-notification`)\nclass BXToastNotification extends BXInlineNotification {\n  protected _type = NOTIFICATION_TYPE.TOAST;\n\n  protected _renderText() {\n    const { caption, subtitle, title, _type: type } = this;\n    return html`\n      <div class=\"${prefix}--${type}-notification__details\">\n        <h3 class=\"${prefix}--${type}-notification__title\">\n          ${title}<slot name=\"title\"></slot>\n        </h3>\n        <div class=\"${prefix}--${type}-notification__subtitle\">\n          ${subtitle}<slot name=\"subtitle\"></slot>\n        </div>\n        <div class=\"${prefix}--${type}-notification__caption\">\n          ${caption}<slot name=\"caption\"></slot>\n        </div>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  /**\n   * The caption.\n   */\n  @property()\n  caption = '';\n\n  render() {\n    const { _type: type } = this;\n    return html`\n      ${this._renderIcon()}\n      <div class=\"${prefix}--${type}-notification__details\">\n        ${this._renderText()}\n      </div>\n      ${this._renderButton()}\n    `;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXToastNotification;\n"],"mappings":";;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,QAAQ,MAAM,0CAA0C;AAC/D,SAASC,IAAI,EAAEC,QAAQ,QAAQ,aAAa;AAC5C,SAASC,aAAa,IAAIC,aAAa,QAAQ,yCAAyC;AACxF,SAASC,iBAAiB,QAAQ,QAAQ;AAC1C,OAAOC,oBAAoB,MAAM,uBAAuB;AACxD,OAAOC,MAAM,MAAM,+BAA2B;AAE9C,MAAM;EAAEC;AAAO,CAAC,GAAGR,QAAQ;;AAE3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA,IAYMS,mBAAmB,GAAAC,SAAA,EADxBN,aAAa,CAAE,GAAEI,MAAO,qBAAoB,CAAC,aAAAG,WAAA,EAAAC,qBAAA;EAA9C,MACMH,mBAAmB,SAAAG,qBAAA,CAA8B;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EAuCvD;EAAC;IAAAI,CAAA,EAvCKN,mBAAmB;IAAAO,CAAA;MAAAC,IAAA;MAAAC,GAAA;MAAAC,MAAA;QAAA,OACLd,iBAAiB,CAACe,KAAK;MAAA;IAAA;MAAAH,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAEzC,SAAAE,YAAA,EAAwB;QACtB,MAAM;UAAEC,OAAO;UAAEC,QAAQ;UAAEC,KAAK;UAAEC,KAAK,EAAEC;QAAK,CAAC,GAAG,IAAI;QACtD,OAAOzB,IAAI,CAAA0B,EAAA,KAAAA,EAAA,GAAAC,CAAA,2UACKpB,MAAM,EAAKkB,IAAI,EACdlB,MAAM,EAAKkB,IAAI,EACxBF,KAAK,EAEKhB,MAAM,EAAKkB,IAAI,EACzBH,QAAQ,EAEEf,MAAM,EAAKkB,IAAI,EACzBJ,OAAO;MAKjB;;MAEA;AACF;AACA;IAFE;MAAAL,IAAA;MAAAY,UAAA,GAGC3B,QAAQ,EAAE;MAAAgB,GAAA;MAAAC,MAAA;QAAA,OACD,EAAE;MAAA;IAAA;MAAAF,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAEZ,SAAAW,OAAA,EAAS;QACP,MAAM;UAAEL,KAAK,EAAEC;QAAK,CAAC,GAAG,IAAI;QAC5B,OAAOzB,IAAI,CAAA8B,GAAA,KAAAA,GAAA,GAAAH,CAAA,2EACP,IAAI,CAACI,WAAW,EAAE,EACNxB,MAAM,EAAKkB,IAAI,EACzB,IAAI,CAACL,WAAW,EAAE,EAEpB,IAAI,CAACY,aAAa,EAAE;MAE1B;IAAC;MAAAhB,IAAA;MAAAiB,MAAA;MAAAhB,GAAA;MAAAC,MAAA;QAAA,OAEeZ,MAAM;MAAA;IAAA;EAAA;AAAA,GAtCUD,oBAAoB;AAyCtD,eAAeG,mBAAmB"}

package/es/components/number-input/number-input-skeleton.d.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/es/components/number-input/number-input-skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/number-input/number-input-skeleton.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAiC,UAAU,EAAE,MAAM,aAAa,CAAC;AAMxE;;GAEG;AACH,cACM,qBAAsB,SAAQ,UAAU;IAC5C;;OAEG;IAEH,SAAS,UAAS;IAElB,MAAM;IASN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,qBAAqB,CAAC","file":"number-input-skeleton.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2022\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 { html, property, customElement, LitElement } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport styles from './number-input.scss';\n\nconst { prefix } = settings;\n\n/**\n * Skeleton of number input.\n */\n@customElement(`${prefix}-number-input-skeleton`)\nclass BXNumberInputSkeleton extends LitElement {\n  /**\n   * `true` if the label should be hidden. Corresponds to the attribute with the same name.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-label' })\n  hideLabel = false;\n\n  render() {\n    const { hideLabel } = this;\n    return html`\n      ${!hideLabel &&\n      html` <span class=\"${prefix}--label ${prefix}--skeleton\"></span> `}\n      <div class=\"${prefix}--number ${prefix}--skeleton\"></div>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default BXNumberInputSkeleton;\n"]}
+{"version":3,"sources":["components/number-input/number-input-skeleton.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAkB,UAAU,EAAE,MAAM,aAAa,CAAC;AAOzD;;GAEG;AACH,cACM,qBAAsB,SAAQ,UAAU;IAC5C;;OAEG;IAEH,SAAS,UAAS;IAElB,MAAM;IASN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,qBAAqB,CAAC","file":"number-input-skeleton.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 { html, property, LitElement } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport styles from './number-input.scss';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nconst { prefix } = settings;\n\n/**\n * Skeleton of number input.\n */\n@customElement(`${prefix}-number-input-skeleton`)\nclass BXNumberInputSkeleton extends LitElement {\n  /**\n   * `true` if the label should be hidden. Corresponds to the attribute with the same name.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-label' })\n  hideLabel = false;\n\n  render() {\n    const { hideLabel } = this;\n    return html`\n      ${!hideLabel &&\n      html` <span class=\"${prefix}--label ${prefix}--skeleton\"></span> `}\n      <div class=\"${prefix}--number ${prefix}--skeleton\"></div>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default BXNumberInputSkeleton;\n"]}

package/es/components/number-input/number-input-skeleton.js

@@ -5,15 +5,16 @@ let _ = t => t,
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, customElement, LitElement } from 'lit-element';
+import { html, property, LitElement } from 'lit-element';
 import settings from 'carbon-components/es/globals/js/settings';
 import styles from "././number-input.css.js";
+import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 const {
   prefix
 } = settings;

package/es/components/number-input/number-input-skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"number-input-skeleton.js","names":["html","property","customElement","LitElement","settings","styles","prefix","BXNumberInputSkeleton","_decorate","_initialize","_LitElement","constructor","args","F","d","kind","decorators","type","Boolean","reflect","attribute","key","value","render","hideLabel","_t","_","_t2","static"],"sources":["components/number-input/number-input-skeleton.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2022\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 { html, property, customElement, LitElement } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport styles from './number-input.scss';\n\nconst { prefix } = settings;\n\n/**\n * Skeleton of number input.\n */\n@customElement(`${prefix}-number-input-skeleton`)\nclass BXNumberInputSkeleton extends LitElement {\n  /**\n   * `true` if the label should be hidden. Corresponds to the attribute with the same name.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-label' })\n  hideLabel = false;\n\n  render() {\n    const { hideLabel } = this;\n    return html`\n      ${!hideLabel &&\n      html` <span class=\"${prefix}--label ${prefix}--skeleton\"></span> `}\n      <div class=\"${prefix}--number ${prefix}--skeleton\"></div>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default BXNumberInputSkeleton;\n"],"mappings":";;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,EAAEC,QAAQ,EAAEC,aAAa,EAAEC,UAAU,QAAQ,aAAa;AACvE,OAAOC,QAAQ,MAAM,0CAA0C;AAC/D,OAAOC,MAAM,MAAM,yBAAqB;AAExC,MAAM;EAAEC;AAAO,CAAC,GAAGF,QAAQ;;AAE3B;AACA;AACA;AAFA,IAIMG,qBAAqB,GAAAC,SAAA,EAD1BN,aAAa,CAAE,GAAEI,MAAO,wBAAuB,CAAC,aAAAG,WAAA,EAAAC,WAAA;EAAjD,MACMH,qBAAqB,SAAAG,WAAA,CAAoB;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EAiB/C;EAAC;IAAAI,CAAA,EAjBKN,qBAAqB;IAAAO,CAAA;MAAAC,IAAA;MAAAC,UAAA,GAIxBf,QAAQ,CAAC;QAAEgB,IAAI,EAAEC,OAAO;QAAEC,OAAO,EAAE,IAAI;QAAEC,SAAS,EAAE;MAAa,CAAC,CAAC;MAAAC,GAAA;MAAAC,MAAA;QAAA,OACxD,KAAK;MAAA;IAAA;MAAAP,IAAA;MAAAM,GAAA;MAAAC,KAAA;MAJjB;AACF;AACA;;MAIE,SAAAC,OAAA,EAAS;QACP,MAAM;UAAEC;QAAU,CAAC,GAAG,IAAI;QAC1B,OAAOxB,IAAI,CAAAyB,EAAA,KAAAA,EAAA,GAAAC,CAAA,2DACP,CAACF,SAAS,IACZxB,IAAI,CAAA2B,GAAA,KAAAA,GAAA,GAAAD,CAAA,uDAAiBpB,MAAM,EAAWA,MAAM,CAAsB,EACpDA,MAAM,EAAYA,MAAM;MAE1C;IAAC;MAAAS,IAAA;MAAAa,MAAA;MAAAP,GAAA;MAAAC,MAAA;QAAA,OAEejB,MAAM;MAAA;IAAA;EAAA;AAAA,GAhBYF,UAAU;AAmB9C,eAAeI,qBAAqB"}
+{"version":3,"file":"number-input-skeleton.js","names":["html","property","LitElement","settings","styles","carbonElement","customElement","prefix","BXNumberInputSkeleton","_decorate","_initialize","_LitElement","constructor","args","F","d","kind","decorators","type","Boolean","reflect","attribute","key","value","render","hideLabel","_t","_","_t2","static"],"sources":["components/number-input/number-input-skeleton.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 { html, property, LitElement } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport styles from './number-input.scss';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nconst { prefix } = settings;\n\n/**\n * Skeleton of number input.\n */\n@customElement(`${prefix}-number-input-skeleton`)\nclass BXNumberInputSkeleton extends LitElement {\n  /**\n   * `true` if the label should be hidden. Corresponds to the attribute with the same name.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-label' })\n  hideLabel = false;\n\n  render() {\n    const { hideLabel } = this;\n    return html`\n      ${!hideLabel &&\n      html` <span class=\"${prefix}--label ${prefix}--skeleton\"></span> `}\n      <div class=\"${prefix}--number ${prefix}--skeleton\"></div>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default BXNumberInputSkeleton;\n"],"mappings":";;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,EAAEC,QAAQ,EAAEC,UAAU,QAAQ,aAAa;AACxD,OAAOC,QAAQ,MAAM,0CAA0C;AAC/D,OAAOC,MAAM,MAAM,yBAAqB;AACxC,SAASC,aAAa,IAAIC,aAAa,QAAQ,yCAAyC;AAExF,MAAM;EAAEC;AAAO,CAAC,GAAGJ,QAAQ;;AAE3B;AACA;AACA;AAFA,IAIMK,qBAAqB,GAAAC,SAAA,EAD1BH,aAAa,CAAE,GAAEC,MAAO,wBAAuB,CAAC,aAAAG,WAAA,EAAAC,WAAA;EAAjD,MACMH,qBAAqB,SAAAG,WAAA,CAAoB;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EAiB/C;EAAC;IAAAI,CAAA,EAjBKN,qBAAqB;IAAAO,CAAA;MAAAC,IAAA;MAAAC,UAAA,GAIxBhB,QAAQ,CAAC;QAAEiB,IAAI,EAAEC,OAAO;QAAEC,OAAO,EAAE,IAAI;QAAEC,SAAS,EAAE;MAAa,CAAC,CAAC;MAAAC,GAAA;MAAAC,MAAA;QAAA,OACxD,KAAK;MAAA;IAAA;MAAAP,IAAA;MAAAM,GAAA;MAAAC,KAAA;MAJjB;AACF;AACA;;MAIE,SAAAC,OAAA,EAAS;QACP,MAAM;UAAEC;QAAU,CAAC,GAAG,IAAI;QAC1B,OAAOzB,IAAI,CAAA0B,EAAA,KAAAA,EAAA,GAAAC,CAAA,2DACP,CAACF,SAAS,IACZzB,IAAI,CAAA4B,GAAA,KAAAA,GAAA,GAAAD,CAAA,uDAAiBpB,MAAM,EAAWA,MAAM,CAAsB,EACpDA,MAAM,EAAYA,MAAM;MAE1C;IAAC;MAAAS,IAAA;MAAAa,MAAA;MAAAP,GAAA;MAAAC,MAAA;QAAA,OAEenB,MAAM;MAAA;IAAA;EAAA;AAAA,GAhBYF,UAAU;AAmB9C,eAAeM,qBAAqB"}

package/es/components/number-input/number-input.d.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/es/components/number-input/number-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/number-input/number-input.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AASH,OAAO,EACL,yBAAyB,EACzB,8BAA8B,EAC/B,MAAM,QAAQ,CAAC;AAEhB,OAAO,OAAO,EAAE,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAErD,OAAO,EAAE,yBAAyB,EAAE,8BAA8B,EAAE,CAAC;AAIrE;;;;;;;GAOG;AAEH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,OAAO;IAChD;;OAEG;IACH,SAAS,CAAC,YAAY,CAAC,KAAK,EAAE,KAAK;IAgBnC;;OAEG;IAEH,SAAS,CAAC,4BAA4B,CAAC,CAAC,EAAE,KAAK;IAe/C;;OAEG;IAEH,SAAS,CAAC,0BAA0B,CAAC,CAAC,EAAE,KAAK;IAe7C;;OAEG;IAEH,SAAS,CAAC,MAAM,EAAG,gBAAgB,CAAC;IAEpC,aAAa;IAUb,mBAAmB,CAAC,KAAK,EAAE,MAAM;IAiBjC,SAAS,CAAC,IAAI,SAAM;IAEpB,SAAS,CAAC,IAAI,SAAM;IAEpB,SAAS,CAAC,KAAK,SAAO;IAEtB;;OAEG;IAEH,WAAW,4BAAqC;IAEhD;;OAEG;IACH,IACI,GAAG,WAEN;IAED,IAAI,GAAG,CAAC,KAAK,QAAA,EAIZ;IAED;;OAEG;IACH,IACI,GAAG,WAEN;IAED,IAAI,GAAG,CAAC,KAAK,QAAA,EAIZ;IAED;;OAEG;IACH,IACI,IAAI,WAEP;IAED,IAAI,IAAI,CAAC,KAAK,QAAA,EAIb;IAED;;OAEG;IAEH,MAAM,UAAS;IAEf;;OAEG;IAEH,4BAA4B,SAA2B;IAEvD;;OAEG;IAEH,4BAA4B,SAA2B;IAEvD;;OAEG;IAEH,IAAI,aAAsB;IAE1B;;;;OAIG;IAEH,kBAAkB,SAAM;IAExB;;;;OAIG;IAEH,kBAAkB,SAAM;IAExB;;OAEG;IACH,MAAM;IAIN;;OAEG;IACH,QAAQ;IAIR,gBAAgB;IAShB,MAAM;IA2HN;;OAEG;IACH,MAAM,KAAK,UAAU,WAEpB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB","file":"number-input.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2022\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 { html, property, query, customElement } from 'lit-element';\nimport { classMap } from 'lit-html/directives/class-map';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport WarningFilled16 from '@carbon/icons/lib/warning--filled/16';\nimport CaretUp16 from '@carbon/icons/lib/caret--up/16';\nimport CaretDown16 from '@carbon/icons/lib/caret--down/16';\nimport ifNonEmpty from '../../globals/directives/if-non-empty';\nimport {\n  NUMBER_INPUT_COLOR_SCHEME,\n  NUMBER_INPUT_VALIDATION_STATUS,\n} from './defs';\nimport styles from './number-input.scss';\nimport BXInput, { INPUT_SIZE } from '../input/input';\n\nexport { NUMBER_INPUT_COLOR_SCHEME, NUMBER_INPUT_VALIDATION_STATUS };\n\nconst { prefix } = settings;\n\n/**\n * Number input.\n *\n * @element bx-number-input\n * @slot helper-text - The helper text.\n * @slot label-text - The label text.\n * @slot validity-message - The validity message. If present and non-empty, this input shows the UI of its invalid state.\n */\n@customElement(`${prefix}-number-input`)\nexport default class BXNumberInput extends BXInput {\n  /**\n   * Handles `input` event on the `<input>` in the shadow DOM.\n   */\n  protected _handleInput(event: Event) {\n    const { target } = event;\n    const { value } = target as HTMLInputElement;\n    this.dispatchEvent(\n      new CustomEvent((this.constructor as typeof BXNumberInput).eventInput, {\n        bubbles: true,\n        composed: true,\n        cancelable: false,\n        detail: {\n          value,\n        },\n      })\n    );\n    super._handleInput(event);\n  }\n\n  /**\n   * Handles `click` event on the up button in the shadow DOM.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  protected _handleUserInitiatedStepDown(_: Event) {\n    const { _input: input } = this;\n    this.stepDown();\n    this.dispatchEvent(\n      new CustomEvent((this.constructor as typeof BXNumberInput).eventInput, {\n        bubbles: true,\n        composed: true,\n        cancelable: false,\n        detail: {\n          value: input.value,\n        },\n      })\n    );\n  }\n\n  /**\n   * Handles `click` event on the down button in the shadow DOM.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  protected _handleUserInitiatedStepUp(_: Event) {\n    const { _input: input } = this;\n    this.stepUp();\n    this.dispatchEvent(\n      new CustomEvent((this.constructor as typeof BXNumberInput).eventInput, {\n        bubbles: true,\n        composed: true,\n        cancelable: false,\n        detail: {\n          value: input.value,\n        },\n      })\n    );\n  }\n\n  /**\n   * The underlying input element\n   */\n  @query('input')\n  protected _input!: HTMLInputElement;\n\n  _testValidity() {\n    if (this._input?.valueAsNumber > Number(this.max)) {\n      return NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MAXIMUM;\n    }\n    if (this._input?.valueAsNumber < Number(this.min)) {\n      return NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MINIMUM;\n    }\n    return super._testValidity();\n  }\n\n  _getValidityMessage(state: string) {\n    if (\n      Object.values(NUMBER_INPUT_VALIDATION_STATUS).includes(\n        state as NUMBER_INPUT_VALIDATION_STATUS\n      )\n    ) {\n      const stateMessageMap = {\n        [NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MAXIMUM]:\n          this.validityMessageMax,\n        [NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MINIMUM]:\n          this.validityMessageMin,\n      };\n      return stateMessageMap[state];\n    }\n    return super._getValidityMessage(state);\n  }\n\n  protected _min = '';\n\n  protected _max = '';\n\n  protected _step = '1';\n\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = NUMBER_INPUT_COLOR_SCHEME.REGULAR;\n\n  /**\n   * The minimum value allowed in the input\n   */\n  @property({ reflect: true })\n  get min() {\n    return this._min.toString();\n  }\n\n  set min(value) {\n    const oldValue = this.min;\n    this._min = value;\n    this.requestUpdate('min', oldValue);\n  }\n\n  /**\n   * The maximum value allowed in the input\n   */\n  @property({ reflect: true })\n  get max() {\n    return this._max.toString();\n  }\n\n  set max(value) {\n    const oldValue = this.max;\n    this._max = value;\n    this.requestUpdate('max', oldValue);\n  }\n\n  /**\n   * The amount the value should increase or decrease by\n   */\n  @property({ reflect: true })\n  get step() {\n    return this._step.toString();\n  }\n\n  set step(value) {\n    const oldValue = this.step;\n    this._step = value;\n    this.requestUpdate('step', oldValue);\n  }\n\n  /**\n   * Set to `true` to enable the mobile variant of the number input\n   */\n  @property({ type: Boolean, reflect: true })\n  mobile = false;\n\n  /**\n   * Aria text for the button that increments the value\n   */\n  @property({ attribute: 'increment-button-assistive-text' })\n  incrementButtonAssistiveText = 'increase number input';\n\n  /**\n   * Aria text for the button that decrements the value\n   */\n  @property({ attribute: 'decrement-button-assistive-text' })\n  decrementButtonAssistiveText = 'decrease number input';\n\n  /**\n   * The input box size.\n   */\n  @property({ reflect: true })\n  size = INPUT_SIZE.REGULAR;\n\n  /**\n   * The validity message shown when the value is greater than the maximum\n   *\n   * Also available via the `validity-message-max` slot\n   */\n  @property({ attribute: 'validity-message-max' })\n  validityMessageMax = '';\n\n  /**\n   * The validity message shown when the value is less than the minimum\n   *\n   * Also available via the `validity-message-min` slot\n   */\n  @property({ attribute: 'validity-message-min' })\n  validityMessageMin = '';\n\n  /**\n   * Handles incrementing the value in the input\n   */\n  stepUp() {\n    this._input.stepUp();\n  }\n\n  /**\n   * Handles decrementing the value in the input\n   */\n  stepDown() {\n    this._input.stepDown();\n  }\n\n  createRenderRoot() {\n    return this.attachShadow({\n      mode: 'open',\n      delegatesFocus:\n        Number((/Safari\\/(\\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=\n        537,\n    });\n  }\n\n  render() {\n    const {\n      _handleInput: handleInput,\n      _handleUserInitiatedStepDown: handleUserInitiatedStepDown,\n      _handleUserInitiatedStepUp: handleUserInitiatedStepUp,\n    } = this;\n\n    const invalidIcon = WarningFilled16({\n      class: `${prefix}--number__invalid`,\n    });\n\n    const validity = this._testValidity();\n\n    const isGenericallyInvalid = () =>\n      this.invalid &&\n      validity !== NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MAXIMUM &&\n      validity !== NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MINIMUM;\n\n    const wrapperClasses = classMap({\n      [`${prefix}--number`]: true,\n      [`${prefix}--number--${this.colorScheme}`]: this.colorScheme,\n      [`${prefix}--number--mobile`]: this.mobile,\n      [`${prefix}--number--${this.size}`]: this.size,\n    });\n\n    const labelClasses = classMap({\n      [`${prefix}--label`]: true,\n      [`${prefix}--label--disabled`]: this.disabled,\n    });\n\n    const helperTextClasses = classMap({\n      [`${prefix}--form__helper-text`]: true,\n      [`${prefix}--form__helper-text--disabled`]: this.disabled,\n    });\n\n    const incrementButton = html`\n      <button\n        class=\"${prefix}--number__control-btn up-icon\"\n        aria-label=\"${this.incrementButtonAssistiveText}\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        type=\"button\"\n        ?disabled=${this.disabled}\n        @click=${handleUserInitiatedStepUp}>\n        ${CaretUp16()}\n      </button>\n    `;\n    const decrementButton = html`\n      <button\n        class=\"${prefix}--number__control-btn down-icon\"\n        aria-label=\"${this.decrementButtonAssistiveText}\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        type=\"button\"\n        ?disabled=${this.disabled}\n        @click=${handleUserInitiatedStepDown}>\n        ${CaretDown16()}\n      </button>\n    `;\n\n    const input = html`\n      <input\n        ?autocomplete=\"${this.autocomplete}\"\n        ?autofocus=\"${this.autofocus}\"\n        ?data-invalid=\"${this.invalid}\"\n        ?disabled=\"${this.disabled}\"\n        id=\"input\"\n        name=\"${ifNonEmpty(this.name)}\"\n        pattern=\"${ifNonEmpty(this.pattern)}\"\n        placeholder=\"${ifNonEmpty(this.placeholder)}\"\n        ?readonly=\"${this.readonly}\"\n        ?required=\"${this.required}\"\n        type=\"number\"\n        .value=\"${this._value}\"\n        @input=\"${handleInput}\"\n        min=\"${ifNonEmpty(this.min)}\"\n        max=\"${ifNonEmpty(this.max)}\"\n        step=\"${ifNonEmpty(this.step)}\"\n        role=\"alert\"\n        aria-atomic=\"true\" />\n    `;\n\n    const defaultLayout = html`\n      ${this.invalid ? invalidIcon : null} ${input}\n      <div class=\"${prefix}--number__controls\">\n        ${incrementButton} ${decrementButton}\n      </div>\n    `;\n\n    const mobileLayout = html` ${decrementButton} ${input} ${incrementButton} `;\n\n    return html`\n      <div class=\"${wrapperClasses}\" ?data-invalid=${this.invalid}>\n        <label class=\"${labelClasses}\" for=\"input\">\n          <slot name=\"label-text\"> ${this.labelText} </slot>\n        </label>\n        <div class=\"${prefix}--number__input-wrapper\">\n          ${this.mobile ? mobileLayout : defaultLayout}\n        </div>\n        <div class=\"${helperTextClasses}\">\n          <slot name=\"helper-text\"> ${this.helperText} </slot>\n        </div>\n        <div\n          class=\"${prefix}--form-requirement\"\n          ?hidden=\"${!isGenericallyInvalid()}\">\n          <slot name=\"validity-message\"> ${this.validityMessage} </slot>\n        </div>\n        <div\n          class=\"${prefix}--form-requirement\"\n          ?hidden=\"${validity !==\n          NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MAXIMUM}\">\n          <slot name=\"validity-message-max\"> ${this.validityMessageMax} </slot>\n        </div>\n        <div\n          class=\"${prefix}--form-requirement\"\n          ?hidden=\"${validity !==\n          NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MINIMUM}\">\n          <slot name=\"validity-message-min\"> ${this.validityMessageMin} </slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired after the value is changed upon a user gesture.\n   */\n  static get eventInput() {\n    return `${prefix}-number-input`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n"]}
+{"version":3,"sources":["components/number-input/number-input.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AASH,OAAO,EACL,yBAAyB,EACzB,8BAA8B,EAC/B,MAAM,QAAQ,CAAC;AAEhB,OAAO,OAAO,EAAE,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGrD,OAAO,EAAE,yBAAyB,EAAE,8BAA8B,EAAE,CAAC;AAIrE;;;;;;;GAOG;AAEH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,OAAO;IAChD;;OAEG;IACH,SAAS,CAAC,YAAY,CAAC,KAAK,EAAE,KAAK;IAgBnC;;OAEG;IAEH,SAAS,CAAC,4BAA4B,CAAC,CAAC,EAAE,KAAK;IAe/C;;OAEG;IAEH,SAAS,CAAC,0BAA0B,CAAC,CAAC,EAAE,KAAK;IAe7C;;OAEG;IAEH,SAAS,CAAC,MAAM,EAAG,gBAAgB,CAAC;IAEpC,aAAa;IAUb,mBAAmB,CAAC,KAAK,EAAE,MAAM;IAiBjC,SAAS,CAAC,IAAI,SAAM;IAEpB,SAAS,CAAC,IAAI,SAAM;IAEpB,SAAS,CAAC,KAAK,SAAO;IAEtB;;OAEG;IAEH,WAAW,4BAAqC;IAEhD;;OAEG;IACH,IACI,GAAG,WAEN;IAED,IAAI,GAAG,CAAC,KAAK,QAAA,EAIZ;IAED;;OAEG;IACH,IACI,GAAG,WAEN;IAED,IAAI,GAAG,CAAC,KAAK,QAAA,EAIZ;IAED;;OAEG;IACH,IACI,IAAI,WAEP;IAED,IAAI,IAAI,CAAC,KAAK,QAAA,EAIb;IAED;;OAEG;IAEH,MAAM,UAAS;IAEf;;OAEG;IAEH,4BAA4B,SAA2B;IAEvD;;OAEG;IAEH,4BAA4B,SAA2B;IAEvD;;OAEG;IAEH,IAAI,aAAsB;IAE1B;;;;OAIG;IAEH,kBAAkB,SAAM;IAExB;;;;OAIG;IAEH,kBAAkB,SAAM;IAExB;;OAEG;IACH,MAAM;IAIN;;OAEG;IACH,QAAQ;IAIR,gBAAgB;IAShB,MAAM;IA2HN;;OAEG;IACH,MAAM,KAAK,UAAU,WAEpB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB","file":"number-input.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 { html, property, query } from 'lit-element';\nimport { classMap } from 'lit-html/directives/class-map';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport WarningFilled16 from '@carbon/icons/lib/warning--filled/16';\nimport CaretUp16 from '@carbon/icons/lib/caret--up/16';\nimport CaretDown16 from '@carbon/icons/lib/caret--down/16';\nimport ifNonEmpty from '../../globals/directives/if-non-empty';\nimport {\n  NUMBER_INPUT_COLOR_SCHEME,\n  NUMBER_INPUT_VALIDATION_STATUS,\n} from './defs';\nimport styles from './number-input.scss';\nimport BXInput, { INPUT_SIZE } from '../input/input';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { NUMBER_INPUT_COLOR_SCHEME, NUMBER_INPUT_VALIDATION_STATUS };\n\nconst { prefix } = settings;\n\n/**\n * Number input.\n *\n * @element bx-number-input\n * @slot helper-text - The helper text.\n * @slot label-text - The label text.\n * @slot validity-message - The validity message. If present and non-empty, this input shows the UI of its invalid state.\n */\n@customElement(`${prefix}-number-input`)\nexport default class BXNumberInput extends BXInput {\n  /**\n   * Handles `input` event on the `<input>` in the shadow DOM.\n   */\n  protected _handleInput(event: Event) {\n    const { target } = event;\n    const { value } = target as HTMLInputElement;\n    this.dispatchEvent(\n      new CustomEvent((this.constructor as typeof BXNumberInput).eventInput, {\n        bubbles: true,\n        composed: true,\n        cancelable: false,\n        detail: {\n          value,\n        },\n      })\n    );\n    super._handleInput(event);\n  }\n\n  /**\n   * Handles `click` event on the up button in the shadow DOM.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  protected _handleUserInitiatedStepDown(_: Event) {\n    const { _input: input } = this;\n    this.stepDown();\n    this.dispatchEvent(\n      new CustomEvent((this.constructor as typeof BXNumberInput).eventInput, {\n        bubbles: true,\n        composed: true,\n        cancelable: false,\n        detail: {\n          value: input.value,\n        },\n      })\n    );\n  }\n\n  /**\n   * Handles `click` event on the down button in the shadow DOM.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  protected _handleUserInitiatedStepUp(_: Event) {\n    const { _input: input } = this;\n    this.stepUp();\n    this.dispatchEvent(\n      new CustomEvent((this.constructor as typeof BXNumberInput).eventInput, {\n        bubbles: true,\n        composed: true,\n        cancelable: false,\n        detail: {\n          value: input.value,\n        },\n      })\n    );\n  }\n\n  /**\n   * The underlying input element\n   */\n  @query('input')\n  protected _input!: HTMLInputElement;\n\n  _testValidity() {\n    if (this._input?.valueAsNumber > Number(this.max)) {\n      return NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MAXIMUM;\n    }\n    if (this._input?.valueAsNumber < Number(this.min)) {\n      return NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MINIMUM;\n    }\n    return super._testValidity();\n  }\n\n  _getValidityMessage(state: string) {\n    if (\n      Object.values(NUMBER_INPUT_VALIDATION_STATUS).includes(\n        state as NUMBER_INPUT_VALIDATION_STATUS\n      )\n    ) {\n      const stateMessageMap = {\n        [NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MAXIMUM]:\n          this.validityMessageMax,\n        [NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MINIMUM]:\n          this.validityMessageMin,\n      };\n      return stateMessageMap[state];\n    }\n    return super._getValidityMessage(state);\n  }\n\n  protected _min = '';\n\n  protected _max = '';\n\n  protected _step = '1';\n\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = NUMBER_INPUT_COLOR_SCHEME.REGULAR;\n\n  /**\n   * The minimum value allowed in the input\n   */\n  @property({ reflect: true })\n  get min() {\n    return this._min.toString();\n  }\n\n  set min(value) {\n    const oldValue = this.min;\n    this._min = value;\n    this.requestUpdate('min', oldValue);\n  }\n\n  /**\n   * The maximum value allowed in the input\n   */\n  @property({ reflect: true })\n  get max() {\n    return this._max.toString();\n  }\n\n  set max(value) {\n    const oldValue = this.max;\n    this._max = value;\n    this.requestUpdate('max', oldValue);\n  }\n\n  /**\n   * The amount the value should increase or decrease by\n   */\n  @property({ reflect: true })\n  get step() {\n    return this._step.toString();\n  }\n\n  set step(value) {\n    const oldValue = this.step;\n    this._step = value;\n    this.requestUpdate('step', oldValue);\n  }\n\n  /**\n   * Set to `true` to enable the mobile variant of the number input\n   */\n  @property({ type: Boolean, reflect: true })\n  mobile = false;\n\n  /**\n   * Aria text for the button that increments the value\n   */\n  @property({ attribute: 'increment-button-assistive-text' })\n  incrementButtonAssistiveText = 'increase number input';\n\n  /**\n   * Aria text for the button that decrements the value\n   */\n  @property({ attribute: 'decrement-button-assistive-text' })\n  decrementButtonAssistiveText = 'decrease number input';\n\n  /**\n   * The input box size.\n   */\n  @property({ reflect: true })\n  size = INPUT_SIZE.REGULAR;\n\n  /**\n   * The validity message shown when the value is greater than the maximum\n   *\n   * Also available via the `validity-message-max` slot\n   */\n  @property({ attribute: 'validity-message-max' })\n  validityMessageMax = '';\n\n  /**\n   * The validity message shown when the value is less than the minimum\n   *\n   * Also available via the `validity-message-min` slot\n   */\n  @property({ attribute: 'validity-message-min' })\n  validityMessageMin = '';\n\n  /**\n   * Handles incrementing the value in the input\n   */\n  stepUp() {\n    this._input.stepUp();\n  }\n\n  /**\n   * Handles decrementing the value in the input\n   */\n  stepDown() {\n    this._input.stepDown();\n  }\n\n  createRenderRoot() {\n    return this.attachShadow({\n      mode: 'open',\n      delegatesFocus:\n        Number((/Safari\\/(\\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=\n        537,\n    });\n  }\n\n  render() {\n    const {\n      _handleInput: handleInput,\n      _handleUserInitiatedStepDown: handleUserInitiatedStepDown,\n      _handleUserInitiatedStepUp: handleUserInitiatedStepUp,\n    } = this;\n\n    const invalidIcon = WarningFilled16({\n      class: `${prefix}--number__invalid`,\n    });\n\n    const validity = this._testValidity();\n\n    const isGenericallyInvalid = () =>\n      this.invalid &&\n      validity !== NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MAXIMUM &&\n      validity !== NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MINIMUM;\n\n    const wrapperClasses = classMap({\n      [`${prefix}--number`]: true,\n      [`${prefix}--number--${this.colorScheme}`]: this.colorScheme,\n      [`${prefix}--number--mobile`]: this.mobile,\n      [`${prefix}--number--${this.size}`]: this.size,\n    });\n\n    const labelClasses = classMap({\n      [`${prefix}--label`]: true,\n      [`${prefix}--label--disabled`]: this.disabled,\n    });\n\n    const helperTextClasses = classMap({\n      [`${prefix}--form__helper-text`]: true,\n      [`${prefix}--form__helper-text--disabled`]: this.disabled,\n    });\n\n    const incrementButton = html`\n      <button\n        class=\"${prefix}--number__control-btn up-icon\"\n        aria-label=\"${this.incrementButtonAssistiveText}\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        type=\"button\"\n        ?disabled=${this.disabled}\n        @click=${handleUserInitiatedStepUp}>\n        ${CaretUp16()}\n      </button>\n    `;\n    const decrementButton = html`\n      <button\n        class=\"${prefix}--number__control-btn down-icon\"\n        aria-label=\"${this.decrementButtonAssistiveText}\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        type=\"button\"\n        ?disabled=${this.disabled}\n        @click=${handleUserInitiatedStepDown}>\n        ${CaretDown16()}\n      </button>\n    `;\n\n    const input = html`\n      <input\n        ?autocomplete=\"${this.autocomplete}\"\n        ?autofocus=\"${this.autofocus}\"\n        ?data-invalid=\"${this.invalid}\"\n        ?disabled=\"${this.disabled}\"\n        id=\"input\"\n        name=\"${ifNonEmpty(this.name)}\"\n        pattern=\"${ifNonEmpty(this.pattern)}\"\n        placeholder=\"${ifNonEmpty(this.placeholder)}\"\n        ?readonly=\"${this.readonly}\"\n        ?required=\"${this.required}\"\n        type=\"number\"\n        .value=\"${this._value}\"\n        @input=\"${handleInput}\"\n        min=\"${ifNonEmpty(this.min)}\"\n        max=\"${ifNonEmpty(this.max)}\"\n        step=\"${ifNonEmpty(this.step)}\"\n        role=\"alert\"\n        aria-atomic=\"true\" />\n    `;\n\n    const defaultLayout = html`\n      ${this.invalid ? invalidIcon : null} ${input}\n      <div class=\"${prefix}--number__controls\">\n        ${incrementButton} ${decrementButton}\n      </div>\n    `;\n\n    const mobileLayout = html` ${decrementButton} ${input} ${incrementButton} `;\n\n    return html`\n      <div class=\"${wrapperClasses}\" ?data-invalid=${this.invalid}>\n        <label class=\"${labelClasses}\" for=\"input\">\n          <slot name=\"label-text\"> ${this.labelText} </slot>\n        </label>\n        <div class=\"${prefix}--number__input-wrapper\">\n          ${this.mobile ? mobileLayout : defaultLayout}\n        </div>\n        <div class=\"${helperTextClasses}\">\n          <slot name=\"helper-text\"> ${this.helperText} </slot>\n        </div>\n        <div\n          class=\"${prefix}--form-requirement\"\n          ?hidden=\"${!isGenericallyInvalid()}\">\n          <slot name=\"validity-message\"> ${this.validityMessage} </slot>\n        </div>\n        <div\n          class=\"${prefix}--form-requirement\"\n          ?hidden=\"${validity !==\n          NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MAXIMUM}\">\n          <slot name=\"validity-message-max\"> ${this.validityMessageMax} </slot>\n        </div>\n        <div\n          class=\"${prefix}--form-requirement\"\n          ?hidden=\"${validity !==\n          NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MINIMUM}\">\n          <slot name=\"validity-message-min\"> ${this.validityMessageMin} </slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired after the value is changed upon a user gesture.\n   */\n  static get eventInput() {\n    return `${prefix}-number-input`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n"]}

package/es/components/number-input/number-input.js

@@ -11,13 +11,13 @@ let _2 = t => t,
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, query, customElement } from 'lit-element';
+import { html, property, query } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
 import settings from 'carbon-components/es/globals/js/settings';
 import WarningFilled16 from "../../icons/warning--filled/16";
@@ -27,6 +27,7 @@ import ifNonEmpty from '../../globals/directives/if-non-empty';
 import { NUMBER_INPUT_COLOR_SCHEME, NUMBER_INPUT_VALIDATION_STATUS } from './defs';
 import styles from "././number-input.css.js";
 import BXInput, { INPUT_SIZE } from '../input/input';
+import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 export { NUMBER_INPUT_COLOR_SCHEME, NUMBER_INPUT_VALIDATION_STATUS };
 const {
   prefix