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

package/es/components/dropdown/dropdown-skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-skeleton.js","names":["html","customElement","LitElement","settings","styles","prefix","BXDropdownSkeleton","_decorate","_initialize","_LitElement","constructor","args","F","d","kind","key","value","render","_t","_","static"],"sources":["components/dropdown/dropdown-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, customElement, LitElement } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport styles from './dropdown.scss';\n\nconst { prefix } = settings;\n\n/**\n * Skeleton version of dropdown.\n */\n@customElement(`${prefix}-dropdown-skeleton`)\nclass BXDropdownSkeleton extends LitElement {\n  render() {\n    return html`\n      <div\n        class=\"${prefix}--skeleton ${prefix}--dropdown-v2 ${prefix}--list-box ${prefix}--form-item\">\n        <div class=\"${prefix}--list-box__field\">\n          <span class=\"${prefix}--list-box__label\"></span>\n        </div>\n      </div>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default BXDropdownSkeleton;\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,EAAEC,aAAa,EAAEC,UAAU,QAAQ,aAAa;AAC7D,OAAOC,QAAQ,MAAM,0CAA0C;AAC/D,OAAOC,MAAM,MAAM,qBAAiB;AAEpC,MAAM;EAAEC;AAAO,CAAC,GAAGF,QAAQ;;AAE3B;AACA;AACA;AAFA,IAIMG,kBAAkB,GAAAC,SAAA,EADvBN,aAAa,CAAE,GAAEI,MAAO,oBAAmB,CAAC,aAAAG,WAAA,EAAAC,WAAA;EAA7C,MACMH,kBAAkB,SAAAG,WAAA,CAAoB;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EAa5C;EAAC;IAAAI,CAAA,EAbKN,kBAAkB;IAAAO,CAAA;MAAAC,IAAA;MAAAC,GAAA;MAAAC,KAAA,EACtB,SAAAC,OAAA,EAAS;QACP,OAAOjB,IAAI,CAAAkB,EAAA,KAAAA,EAAA,GAAAC,CAAA,kLAEEd,MAAM,EAAcA,MAAM,EAAiBA,MAAM,EAAcA,MAAM,EAChEA,MAAM,EACHA,MAAM;MAI7B;IAAC;MAAAS,IAAA;MAAAM,MAAA;MAAAL,GAAA;MAAAC,MAAA;QAAA,OAEeZ,MAAM;MAAA;IAAA;EAAA;AAAA,GAZSF,UAAU;AAe3C,eAAeI,kBAAkB"}
+{"version":3,"file":"dropdown-skeleton.js","names":["html","LitElement","settings","styles","carbonElement","customElement","prefix","BXDropdownSkeleton","_decorate","_initialize","_LitElement","constructor","args","F","d","kind","key","value","render","_t","_","static"],"sources":["components/dropdown/dropdown-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, LitElement } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport styles from './dropdown.scss';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nconst { prefix } = settings;\n\n/**\n * Skeleton version of dropdown.\n */\n@customElement(`${prefix}-dropdown-skeleton`)\nclass BXDropdownSkeleton extends LitElement {\n  render() {\n    return html`\n      <div\n        class=\"${prefix}--skeleton ${prefix}--dropdown-v2 ${prefix}--list-box ${prefix}--form-item\">\n        <div class=\"${prefix}--list-box__field\">\n          <span class=\"${prefix}--list-box__label\"></span>\n        </div>\n      </div>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default BXDropdownSkeleton;\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,EAAEC,UAAU,QAAQ,aAAa;AAC9C,OAAOC,QAAQ,MAAM,0CAA0C;AAC/D,OAAOC,MAAM,MAAM,qBAAiB;AACpC,SAASC,aAAa,IAAIC,aAAa,QAAQ,yCAAyC;AAExF,MAAM;EAAEC;AAAO,CAAC,GAAGJ,QAAQ;;AAE3B;AACA;AACA;AAFA,IAIMK,kBAAkB,GAAAC,SAAA,EADvBH,aAAa,CAAE,GAAEC,MAAO,oBAAmB,CAAC,aAAAG,WAAA,EAAAC,WAAA;EAA7C,MACMH,kBAAkB,SAAAG,WAAA,CAAoB;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EAa5C;EAAC;IAAAI,CAAA,EAbKN,kBAAkB;IAAAO,CAAA;MAAAC,IAAA;MAAAC,GAAA;MAAAC,KAAA,EACtB,SAAAC,OAAA,EAAS;QACP,OAAOlB,IAAI,CAAAmB,EAAA,KAAAA,EAAA,GAAAC,CAAA,kLAEEd,MAAM,EAAcA,MAAM,EAAiBA,MAAM,EAAcA,MAAM,EAChEA,MAAM,EACHA,MAAM;MAI7B;IAAC;MAAAS,IAAA;MAAAM,MAAA;MAAAL,GAAA;MAAAC,MAAA;QAAA,OAEed,MAAM;MAAA;IAAA;EAAA;AAAA,GAZSF,UAAU;AAe3C,eAAeM,kBAAkB"}

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

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

package/es/components/dropdown/dropdown.js

@@ -18,7 +18,7 @@ let _ = t => t,
 import settings from 'carbon-components/es/globals/js/settings';
 import { classMap } from 'lit-html/directives/class-map';
 import { ifDefined } from 'lit-html/directives/if-defined';
-import { html, property, query, customElement, LitElement } from 'lit-element';
+import { html, property, query, LitElement } from 'lit-element';
 import ChevronDown16 from "../../icons/chevron--down/16";
 import WarningFilled16 from "../../icons/warning--filled/16";
 import FocusMixin from '../../globals/mixins/focus';
@@ -29,6 +29,7 @@ import HostListener from '../../globals/decorators/host-listener';
 import { find, forEach, indexOf } from '../../globals/internal/collection-helpers';
 import { DROPDOWN_COLOR_SCHEME, DROPDOWN_KEYBOARD_ACTION, DROPDOWN_SIZE, DROPDOWN_TYPE, NAVIGATION_DIRECTION } from './defs';
 import styles from "././dropdown.css.js";
+import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 export { DROPDOWN_COLOR_SCHEME, DROPDOWN_KEYBOARD_ACTION, DROPDOWN_SIZE, DROPDOWN_TYPE, NAVIGATION_DIRECTION };
 const {
   prefix

package/es/components/dropdown/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","names":["settings","classMap","ifDefined","html","property","query","customElement","LitElement","ChevronDown16","WarningFilled16","FocusMixin","FormMixin","HostListenerMixin","ValidityMixin","HostListener","find","forEach","indexOf","DROPDOWN_COLOR_SCHEME","DROPDOWN_KEYBOARD_ACTION","DROPDOWN_SIZE","DROPDOWN_TYPE","NAVIGATION_DIRECTION","styles","prefix","BXDropdown","_decorate","_initialize","_ValidityMixin","constructor","args","F","d","kind","key","value","decorators","_selectionShouldChange","itemToSelect","_selectionDidChange","querySelectorAll","selectorItemSelected","item","selected","_assistiveStatusText","selectedItemAssistiveText","_handleUserInitiatedToggle","_handleClickInner","event","shadowRoot","contains","target","closest","selectorItem","_handleUserInitiatedSelectItem","_handleKeydownInner","action","getAction","open","NAVIGATING","_clearHighlight","CLOSING","_navigate","_handleKeypressInner","TRIGGERING","highlightedItem","querySelector","selectorItemHighlighted","_handleFocusOut","relatedTarget","_handleSlotchangeHelperText","requestUpdate","_handleSlotchangeLabelText","init","bubbles","composed","detail","beforeSelectEvent","CustomEvent","eventBeforeSelect","_objectSpread","cancelable","dispatchEvent","afterSelectEvent","eventSelect","force","eventBeforeToggle","eventToggle","disabled","selectingItemsAssistiveText","triggerContent","assistiveStatusText","_selectedItemContent","selectedItemContent","selectedItemText","textContent","highlighted","direction","items","highlightedIndex","nextIndex","length","i","nextItem","scrollIntoView","block","nextItemText","_renderPrecedingTriggerContent","undefined","_renderTriggerContent","_t","_","_renderFollowingTriggerContent","_handleFormdata","formData","name","append","attribute","reflect","REGULAR","type","Boolean","createRenderRoot","_exec","attachShadow","mode","delegatesFocus","Number","exec","navigator","userAgent","shouldUpdate","changedProperties","has","elem","size","range","ownerDocument","createRange","selectNodeContents","cloneContents","updated","helperText","inline","INLINE","console","warn","render","colorScheme","invalid","labelText","toggleLabelClosed","toggleLabelOpen","validityMessage","_shouldTriggerBeFocusable","shouldTriggerBeFocusable","handleClickInner","handleKeydownInner","handleKeypressInner","handleSlotchangeHelperText","handleSlotchangeLabelText","_slotHelperTextNode","slotHelperTextNode","_slotLabelTextNode","slotLabelTextNode","selectedItemsCount","classes","labelClasses","helperClasses","iconContainerClasses","toggleLabel","hasHelperText","assignedNodes","hasLabelText","helper","_t2","_t3","validityIcon","class","menuBody","_t4","_t5","String","static","Set","TRIGGER_KEYS","NONE"],"sources":["components/dropdown/dropdown.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 { classMap } from 'lit-html/directives/class-map';\nimport { TemplateResult } from 'lit-html';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html, property, query, customElement, LitElement } from 'lit-element';\nimport ChevronDown16 from '@carbon/icons/lib/chevron--down/16';\nimport WarningFilled16 from '@carbon/icons/lib/warning--filled/16';\nimport FocusMixin from '../../globals/mixins/focus';\nimport FormMixin from '../../globals/mixins/form';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport ValidityMixin from '../../globals/mixins/validity';\nimport HostListener from '../../globals/decorators/host-listener';\nimport {\n  find,\n  forEach,\n  indexOf,\n} from '../../globals/internal/collection-helpers';\nimport {\n  DROPDOWN_COLOR_SCHEME,\n  DROPDOWN_KEYBOARD_ACTION,\n  DROPDOWN_SIZE,\n  DROPDOWN_TYPE,\n  NAVIGATION_DIRECTION,\n} from './defs';\nimport BXDropdownItem from './dropdown-item';\nimport styles from './dropdown.scss';\n\nexport {\n  DROPDOWN_COLOR_SCHEME,\n  DROPDOWN_KEYBOARD_ACTION,\n  DROPDOWN_SIZE,\n  DROPDOWN_TYPE,\n  NAVIGATION_DIRECTION,\n};\n\nconst { prefix } = settings;\n\n/**\n * Dropdown.\n *\n * @element bx-dropdown\n * @csspart label-text The label text.\n * @csspart helper-text The helper text.\n * @csspart trigger-button The trigger button.\n * @csspart menu-body The menu body.\n * @csspart validity-message The validity message.\n * @fires bx-dropdown-beingselected\n *   The custom event fired before a dropdown item is selected upon a user gesture.\n *   Cancellation of this event stops changing the user-initiated selection.\n * @fires bx-dropdown-beingtoggled\n *   The custom event fired before the open state of this dropdown is toggled upon a user gesture.\n *   Cancellation of this event stops the user-initiated toggling.\n * @fires bx-dropdown-selected - The custom event fired after a dropdown item is selected upon a user gesture.\n * @fires bx-dropdown-toggled - The custom event fired after the open state of this dropdown is toggled upon a user gesture.\n */\n@customElement(`${prefix}-dropdown`)\nclass BXDropdown extends ValidityMixin(\n  HostListenerMixin(FormMixin(FocusMixin(LitElement)))\n) {\n  /**\n   * The latest status of this dropdown, for screen reader to accounce.\n   */\n  protected _assistiveStatusText?: string;\n\n  /**\n   * The content of the selected item.\n   */\n  protected _selectedItemContent: DocumentFragment | null = null;\n\n  /**\n   * `true` if the trigger button should be focusable.\n   * Derived class can set `false` to this if the trigger button contains another primary focusable element (e.g. `<input>`).\n   */\n  protected _shouldTriggerBeFocusable = true;\n\n  /**\n   * The list box `<div>` node.\n   */\n  @query(`.${prefix}--list-box`)\n  protected _listBoxNode!: HTMLDivElement;\n\n  /**\n   * The `<slot>` element for the helper text in the shadow DOM.\n   */\n  @query('slot[name=\"helper-text\"]')\n  protected _slotHelperTextNode!: HTMLSlotElement;\n\n  /**\n   * The `<slot>` element for the label text in the shadow DOM.\n   */\n  @query('slot[name=\"label-text\"]')\n  protected _slotLabelTextNode!: HTMLSlotElement;\n\n  /**\n   * @param itemToSelect A dropdown item. Absense of this argument means clearing selection.\n   * @returns `true` if the selection of this dropdown should change if the given item is selected upon user interaction.\n   */\n  protected _selectionShouldChange(itemToSelect?: BXDropdownItem) {\n    return !itemToSelect || itemToSelect.value !== this.value;\n  }\n\n  /**\n   * A callback that runs after change in dropdown selection upon user interaction is confirmed.\n   *\n   * @param itemToSelect\n   *   A dropdown item.\n   *   Absense of this argument means clearing selection, which may be handled by a derived class.\n   */\n  protected _selectionDidChange(itemToSelect?: BXDropdownItem) {\n    if (itemToSelect) {\n      this.value = itemToSelect.value;\n      forEach(\n        this.querySelectorAll(\n          (this.constructor as typeof BXDropdown).selectorItemSelected\n        ),\n        (item) => {\n          (item as BXDropdownItem).selected = false;\n        }\n      );\n      itemToSelect.selected = true;\n      this._assistiveStatusText = this.selectedItemAssistiveText;\n      this._handleUserInitiatedToggle(false);\n    }\n  }\n\n  /**\n   * Handles `click` event on the top-level element in the shadow DOM.\n   *\n   * @param event The event.\n   */\n  protected _handleClickInner(event: MouseEvent) {\n    if (this.shadowRoot!.contains(event.target as Node)) {\n      this._handleUserInitiatedToggle();\n    } else {\n      const item = (event.target as Element).closest(\n        (this.constructor as typeof BXDropdown).selectorItem\n      ) as BXDropdownItem;\n      if (this.contains(item)) {\n        this._handleUserInitiatedSelectItem(item);\n      }\n    }\n  }\n\n  /**\n   * Handler for the `keydown` event on the top-level element in the shadow DOM.\n   */\n  protected _handleKeydownInner(event: KeyboardEvent) {\n    const { key } = event;\n    const action = (this.constructor as typeof BXDropdown).getAction(key);\n    if (!this.open) {\n      switch (action) {\n        case DROPDOWN_KEYBOARD_ACTION.NAVIGATING:\n          this._handleUserInitiatedToggle(true);\n          // If this menu gets open with an arrow key, reset the highlight\n          this._clearHighlight();\n          break;\n        default:\n          break;\n      }\n    } else {\n      switch (action) {\n        case DROPDOWN_KEYBOARD_ACTION.CLOSING:\n          this._handleUserInitiatedToggle(false);\n          break;\n        case DROPDOWN_KEYBOARD_ACTION.NAVIGATING:\n          this._navigate(NAVIGATION_DIRECTION[key]);\n          break;\n        default:\n          break;\n      }\n    }\n  }\n\n  /**\n   * Handler for the `keypress` event on the top-level element in the shadow DOM.\n   */\n  protected _handleKeypressInner(event: KeyboardEvent) {\n    const { key } = event;\n    const action = (this.constructor as typeof BXDropdown).getAction(key);\n    if (!this.open) {\n      switch (action) {\n        case DROPDOWN_KEYBOARD_ACTION.TRIGGERING:\n          this._handleUserInitiatedToggle(true);\n          break;\n        default:\n          break;\n      }\n    } else {\n      switch (action) {\n        case DROPDOWN_KEYBOARD_ACTION.TRIGGERING:\n          {\n            const constructor = this.constructor as typeof BXDropdown;\n            const highlightedItem = this.querySelector(\n              constructor.selectorItemHighlighted\n            ) as BXDropdownItem;\n            if (highlightedItem) {\n              this._handleUserInitiatedSelectItem(highlightedItem);\n            } else {\n              this._handleUserInitiatedToggle(false);\n            }\n          }\n          break;\n        default:\n          break;\n      }\n    }\n  }\n\n  /**\n   * Handles `blur` event handler on the document this element is in.\n   *\n   * @param event The event.\n   */\n  @HostListener('focusout')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  protected _handleFocusOut(event: FocusEvent) {\n    if (!this.contains(event.relatedTarget as Node)) {\n      this._handleUserInitiatedToggle(false);\n    }\n  }\n\n  /**\n   * Handles `slotchange` event for the `<slot>` for helper text.\n   */\n  protected _handleSlotchangeHelperText() {\n    this.requestUpdate();\n  }\n\n  /**\n   * Handles `slotchange` event for the `<slot>` for label text.\n   */\n  protected _handleSlotchangeLabelText() {\n    this.requestUpdate();\n  }\n\n  /**\n   * Handles user-initiated selection of a dropdown item.\n   *\n   * @param [item] The dropdown item user wants to select. Absense of this argument means clearing selection.\n   */\n  protected _handleUserInitiatedSelectItem(item?: BXDropdownItem) {\n    if (this._selectionShouldChange(item)) {\n      const init = {\n        bubbles: true,\n        composed: true,\n        detail: {\n          item,\n        },\n      };\n      const constructor = this.constructor as typeof BXDropdown;\n      const beforeSelectEvent = new CustomEvent(constructor.eventBeforeSelect, {\n        ...init,\n        cancelable: true,\n      });\n      if (this.dispatchEvent(beforeSelectEvent)) {\n        this._selectionDidChange(item);\n        const afterSelectEvent = new CustomEvent(constructor.eventSelect, init);\n        this.dispatchEvent(afterSelectEvent);\n      }\n    }\n  }\n\n  /**\n   * Handles user-initiated toggling the open state.\n   *\n   * @param [force] If specified, forces the open state to the given one.\n   */\n  protected _handleUserInitiatedToggle(force: boolean = !this.open) {\n    const { eventBeforeToggle, eventToggle } = this\n      .constructor as typeof BXDropdown;\n\n    const { disabled } = this;\n    const init = {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      detail: {\n        open: force,\n      },\n    };\n    if (!disabled) {\n      if (this.dispatchEvent(new CustomEvent(eventBeforeToggle, init))) {\n        this.open = force;\n        if (this.open) {\n          this._assistiveStatusText = this.selectingItemsAssistiveText;\n        } else {\n          const {\n            selectedItemAssistiveText,\n            triggerContent,\n            _assistiveStatusText: assistiveStatusText,\n            _selectedItemContent: selectedItemContent,\n          } = this;\n          const selectedItemText =\n            (selectedItemContent && selectedItemContent.textContent) ||\n            triggerContent;\n          if (\n            selectedItemText &&\n            assistiveStatusText !== selectedItemAssistiveText\n          ) {\n            this._assistiveStatusText = selectedItemText;\n          }\n          forEach(\n            this.querySelectorAll(\n              (this.constructor as typeof BXDropdown).selectorItemHighlighted\n            ),\n            (item) => {\n              (item as BXDropdownItem).highlighted = false;\n            }\n          );\n        }\n        this.requestUpdate();\n        this.dispatchEvent(new CustomEvent(eventToggle, init));\n      }\n    }\n  }\n\n  /**\n   * Clears the selection of dropdown items.\n   */\n  protected _clearHighlight() {\n    forEach(\n      this.querySelectorAll(\n        (this.constructor as typeof BXDropdown).selectorItem\n      ),\n      (item) => {\n        (item as BXDropdownItem).highlighted = false;\n      }\n    );\n  }\n\n  /**\n   * Navigate through dropdown items.\n   *\n   * @param direction `-1` to navigate backward, `1` to navigate forward.\n   */\n  protected _navigate(direction: number) {\n    const constructor = this.constructor as typeof BXDropdown;\n    const items = this.querySelectorAll(constructor.selectorItem);\n    const highlightedItem = this.querySelector(\n      constructor.selectorItemHighlighted\n    );\n    const highlightedIndex = indexOf(items, highlightedItem!);\n    let nextIndex = highlightedIndex + direction;\n    if (nextIndex < 0) {\n      nextIndex = items.length - 1;\n    }\n    if (nextIndex >= items.length) {\n      nextIndex = 0;\n    }\n    forEach(items, (item, i) => {\n      (item as BXDropdownItem).highlighted = i === nextIndex;\n    });\n\n    const nextItem = items[nextIndex];\n    // Using `{ block: 'nearest' }` to prevent scrolling unless scrolling is absolutely necessary.\n    // `scrollIntoViewOptions` seems to work in latest Safari despite of MDN/caniuse table.\n    // IE falls back to the old behavior.\n    nextItem.scrollIntoView({ block: 'nearest' });\n\n    const nextItemText = nextItem.textContent;\n    if (nextItemText) {\n      this._assistiveStatusText = nextItemText;\n    }\n    this.requestUpdate();\n  }\n\n  /* eslint-disable class-methods-use-this */\n  /**\n   * @returns The content preceding the trigger button.\n   */\n  protected _renderPrecedingTriggerContent(): TemplateResult | void {\n    return undefined;\n  }\n  /* eslint-enable class-methods-use-this */\n\n  /**\n   * @returns The main content of the trigger button.\n   */\n  protected _renderTriggerContent(): TemplateResult {\n    const { triggerContent, _selectedItemContent: selectedItemContent } = this;\n    return html`\n      <span id=\"trigger-label\" class=\"${prefix}--list-box__label\"\n        >${selectedItemContent || triggerContent}</span\n      >\n    `;\n  }\n\n  /* eslint-disable class-methods-use-this */\n  /**\n   * @returns The content following the trigger button.\n   */\n  protected _renderFollowingTriggerContent(): TemplateResult | void {\n    return undefined;\n  }\n  /* eslint-enable class-methods-use-this */\n\n  /**\n   * Handles event to include selected value on the parent form.\n   *\n   * @param event The event.\n   */\n  _handleFormdata(event: Event) {\n    const { formData } = event as any; // TODO: Wait for `FormDataEvent` being available in `lib.dom.d.ts`\n    const { disabled, name, value } = this;\n    if (!disabled) {\n      formData.append(name, value);\n    }\n  }\n\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = DROPDOWN_COLOR_SCHEME.REGULAR;\n\n  /**\n   * `true` if this dropdown should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * The helper text.\n   */\n  @property({ attribute: 'helper-text' })\n  helperText = '';\n\n  /**\n   * `true` to show the UI of the invalid state.\n   */\n  @property({ type: Boolean, reflect: true })\n  invalid = false;\n\n  /**\n   * The label text.\n   */\n  @property({ attribute: 'label-text' })\n  labelText = '';\n\n  /**\n   * Name for the dropdown in the `FormData`\n   */\n  @property()\n  name = '';\n\n  /**\n   * `true` if this dropdown should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * `true` if the value is required.\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * The special validity message for `required`.\n   */\n  @property({ attribute: 'required-validity-message' })\n  requiredValidityMessage = 'Please fill out this field.';\n\n  /**\n   * An assistive text for screen reader to announce, telling the open state.\n   */\n  @property({ attribute: 'selecting-items-assistive-text' })\n  selectingItemsAssistiveText =\n    'Selecting items. Use up and down arrow keys to navigate.';\n\n  /**\n   * An assistive text for screen reader to announce, telling that an item is selected.\n   */\n  @property({ attribute: 'selected-item-assistive-text' })\n  selectedItemAssistiveText = 'Selected an item.';\n\n  /**\n   * Dropdown size.\n   */\n  @property({ reflect: true })\n  size = DROPDOWN_SIZE.REGULAR;\n\n  /**\n   * The `aria-label` attribute for the UI indicating the closed state.\n   */\n  @property({ attribute: 'toggle-label-closed' })\n  toggleLabelClosed = '';\n\n  /**\n   * The `aria-label` attribute for the UI indicating the open state.\n   */\n  @property({ attribute: 'toggle-label-open' })\n  toggleLabelOpen = '';\n\n  /**\n   * The content of the trigger button.\n   */\n  @property({ attribute: 'trigger-content' })\n  triggerContent = '';\n\n  /**\n   * `true` if this dropdown should use the inline UI variant.\n   */\n  @property({ reflect: true })\n  type = DROPDOWN_TYPE.REGULAR;\n\n  /**\n   * The validity message.\n   */\n  @property({ attribute: 'validity-message' })\n  validityMessage = '';\n\n  /**\n   * The value of the selected item.\n   */\n  @property({ reflect: true })\n  value = '';\n\n  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  shouldUpdate(changedProperties) {\n    const { selectorItem } = this.constructor as typeof BXDropdown;\n    if (changedProperties.has('size')) {\n      forEach(this.querySelectorAll(selectorItem), (elem) => {\n        (elem as BXDropdownItem).size = this.size;\n      });\n    }\n    if (changedProperties.has('value')) {\n      // `<bx-multi-select>` updates selection beforehand\n      // because our rendering logic for `<bx-multi-select>` looks for selected items via `qSA()`\n      forEach(this.querySelectorAll(selectorItem), (elem) => {\n        (elem as BXDropdownItem).selected =\n          (elem as BXDropdownItem).value === this.value;\n      });\n      const item = find(\n        this.querySelectorAll(selectorItem),\n        (elem) => (elem as BXDropdownItem).value === this.value\n      );\n      if (item) {\n        const range = this.ownerDocument!.createRange();\n        range.selectNodeContents(item);\n        this._selectedItemContent = range.cloneContents();\n      } else {\n        this._selectedItemContent = null;\n      }\n    }\n    return true;\n  }\n\n  updated(changedProperties) {\n    const { helperText, type } = this;\n    const inline = type === DROPDOWN_TYPE.INLINE;\n    const { selectorItem } = this.constructor as typeof BXDropdown;\n    if (changedProperties.has('disabled')) {\n      const { disabled } = this;\n      // Propagate `disabled` attribute to descendants until `:host-context()` gets supported in all major browsers\n      forEach(this.querySelectorAll(selectorItem), (elem) => {\n        (elem as BXDropdownItem).disabled = disabled;\n      });\n    }\n    if (\n      (changedProperties.has('helperText') || changedProperties.has('type')) &&\n      helperText &&\n      inline\n    ) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        'Found `helperText` property/attribute usage in inline mode, that is not supported, at:',\n        this\n      );\n    }\n  }\n\n  render() {\n    const {\n      colorScheme,\n      disabled,\n      helperText,\n      invalid,\n      labelText,\n      open,\n      toggleLabelClosed,\n      toggleLabelOpen,\n      size,\n      type,\n      validityMessage,\n      _assistiveStatusText: assistiveStatusText,\n      _shouldTriggerBeFocusable: shouldTriggerBeFocusable,\n      _handleClickInner: handleClickInner,\n      _handleKeydownInner: handleKeydownInner,\n      _handleKeypressInner: handleKeypressInner,\n      _handleSlotchangeHelperText: handleSlotchangeHelperText,\n      _handleSlotchangeLabelText: handleSlotchangeLabelText,\n      _slotHelperTextNode: slotHelperTextNode,\n      _slotLabelTextNode: slotLabelTextNode,\n    } = this;\n    const inline = type === DROPDOWN_TYPE.INLINE;\n    const selectedItemsCount = this.querySelectorAll(\n      (this.constructor as typeof BXDropdown).selectorItemSelected\n    ).length;\n    const classes = classMap({\n      [`${prefix}--dropdown`]: true,\n      [`${prefix}--list-box`]: true,\n      [`${prefix}--list-box--${colorScheme}`]: colorScheme,\n      [`${prefix}--list-box--disabled`]: disabled,\n      [`${prefix}--list-box--inline`]: inline,\n      [`${prefix}--list-box--expanded`]: open,\n      [`${prefix}--list-box--${size}`]: size,\n      [`${prefix}--dropdown--invalid`]: invalid,\n      [`${prefix}--dropdown--inline`]: inline,\n      [`${prefix}--dropdown--selected`]: selectedItemsCount > 0,\n    });\n    const labelClasses = classMap({\n      [`${prefix}--label`]: true,\n      [`${prefix}--label--disabled`]: disabled,\n    });\n    const helperClasses = classMap({\n      [`${prefix}--form__helper-text`]: true,\n      [`${prefix}--form__helper-text--disabled`]: disabled,\n    });\n    const iconContainerClasses = classMap({\n      [`${prefix}--list-box__menu-icon`]: true,\n      [`${prefix}--list-box__menu-icon--open`]: open,\n    });\n    const toggleLabel =\n      (open ? toggleLabelOpen : toggleLabelClosed) || undefined;\n    const hasHelperText =\n      helperText ||\n      (slotHelperTextNode && slotHelperTextNode.assignedNodes().length > 0);\n    const hasLabelText =\n      labelText ||\n      (slotLabelTextNode && slotLabelTextNode.assignedNodes().length > 0);\n    const helper = !invalid\n      ? html`\n          <div\n            part=\"helper-text\"\n            class=\"${helperClasses}\"\n            ?hidden=\"${inline || !hasHelperText}\">\n            <slot name=\"helper-text\" @slotchange=\"${handleSlotchangeHelperText}\"\n              >${helperText}</slot\n            >\n          </div>\n        `\n      : html`\n          <div part=\"validity-message\" class=${`${prefix}--form-requirement`}>\n            <slot name=\"validity-message\">${validityMessage}</slot>\n          </div>\n        `;\n    const validityIcon = !invalid\n      ? undefined\n      : WarningFilled16({\n          class: `${prefix}--list-box__invalid-icon`,\n          'aria-label': toggleLabel,\n        });\n    const menuBody = !open\n      ? undefined\n      : html`\n          <div\n            id=\"menu-body\"\n            part=\"menu-body\"\n            class=\"${prefix}--list-box__menu\"\n            role=\"listbox\"\n            tabindex=\"-1\">\n            <slot></slot>\n          </div>\n        `;\n    return html`\n      <label\n        part=\"label-text\"\n        class=\"${labelClasses}\"\n        ?hidden=\"${!hasLabelText}\">\n        <slot name=\"label-text\" @slotchange=\"${handleSlotchangeLabelText}\"\n          >${labelText}</slot\n        >\n      </label>\n      <div\n        role=\"listbox\"\n        class=\"${classes}\"\n        ?data-invalid=${invalid}\n        @click=${handleClickInner}\n        @keydown=${handleKeydownInner}\n        @keypress=${handleKeypressInner}>\n        ${validityIcon}\n        <div\n          part=\"trigger-button\"\n          role=\"${ifDefined(!shouldTriggerBeFocusable ? undefined : 'button')}\"\n          class=\"${prefix}--list-box__field\"\n          tabindex=\"${ifDefined(!shouldTriggerBeFocusable ? undefined : '0')}\"\n          aria-labelledby=\"trigger-label\"\n          aria-expanded=\"${String(open)}\"\n          aria-haspopup=\"listbox\"\n          aria-owns=\"menu-body\"\n          aria-controls=\"menu-body\">\n          ${this._renderPrecedingTriggerContent()}${this._renderTriggerContent()}${this._renderFollowingTriggerContent()}\n          <div class=\"${iconContainerClasses}\">\n            ${ChevronDown16({ 'aria-label': toggleLabel })}\n          </div>\n        </div>\n        ${menuBody}\n      </div>\n      ${helper}\n      <div\n        class=\"${prefix}--assistive-text\"\n        role=\"status\"\n        aria-live=\"assertive\"\n        aria-relevant=\"additions text\">\n        ${assistiveStatusText}\n      </div>\n    `;\n  }\n\n  /**\n   * Symbols of keys that triggers opening/closing menu and selecting/deselecting menu item.\n   */\n  static TRIGGER_KEYS = new Set([' ', 'Enter']);\n\n  /**\n   * A selector that will return highlighted items.\n   */\n  static get selectorItemHighlighted() {\n    return `${prefix}-dropdown-item[highlighted]`;\n  }\n\n  /**\n   * A selector that will return dropdown items.\n   */\n  static get selectorItem() {\n    return `${prefix}-dropdown-item`;\n  }\n\n  /**\n   * A selector that will return selected items.\n   */\n  static get selectorItemSelected() {\n    return `${prefix}-dropdown-item[selected]`;\n  }\n\n  /**\n   * The name of the custom event fired before a dropdown item is selected upon a user gesture.\n   * Cancellation of this event stops changing the user-initiated selection.\n   */\n  static get eventBeforeSelect() {\n    return `${prefix}-dropdown-beingselected`;\n  }\n\n  /**\n   * The name of the custom event fired after a a dropdown item is selected upon a user gesture.\n   */\n  static get eventSelect() {\n    return `${prefix}-dropdown-selected`;\n  }\n\n  /**\n   * The name of the custom event fired before this dropdown item is being toggled upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of toggling this dropdown item.\n   */\n  static get eventBeforeToggle() {\n    return `${prefix}-dropdown-beingtoggled`;\n  }\n\n  /**\n   * The name of the custom event fired after this dropdown item is toggled upon a user gesture.\n   */\n  static get eventToggle() {\n    return `${prefix}-dropdown-toggled`;\n  }\n\n  static styles = styles;\n\n  /**\n   * @returns A action for dropdown for the given key symbol.\n   */\n  static getAction(key: string) {\n    if (key === 'Escape') {\n      return DROPDOWN_KEYBOARD_ACTION.CLOSING;\n    }\n    if (key in NAVIGATION_DIRECTION) {\n      return DROPDOWN_KEYBOARD_ACTION.NAVIGATING;\n    }\n    if (this.TRIGGER_KEYS.has(key)) {\n      return DROPDOWN_KEYBOARD_ACTION.TRIGGERING;\n    }\n    return DROPDOWN_KEYBOARD_ACTION.NONE;\n  }\n}\n\nexport default BXDropdown;\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,QAAQ,MAAM,0CAA0C;AAC/D,SAASC,QAAQ,QAAQ,+BAA+B;AAExD,SAASC,SAAS,QAAQ,gCAAgC;AAC1D,SAASC,IAAI,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,aAAa,EAAEC,UAAU,QAAQ,aAAa;AAC9E,OAAOC,aAAa,MAAM,8BAAoC;AAC9D,OAAOC,eAAe,MAAM,gCAAsC;AAClE,OAAOC,UAAU,MAAM,4BAA4B;AACnD,OAAOC,SAAS,MAAM,2BAA2B;AACjD,OAAOC,iBAAiB,MAAM,oCAAoC;AAClE,OAAOC,aAAa,MAAM,+BAA+B;AACzD,OAAOC,YAAY,MAAM,wCAAwC;AACjE,SACEC,IAAI,EACJC,OAAO,EACPC,OAAO,QACF,2CAA2C;AAClD,SACEC,qBAAqB,EACrBC,wBAAwB,EACxBC,aAAa,EACbC,aAAa,EACbC,oBAAoB,QACf,QAAQ;AAEf,OAAOC,MAAM,MAAM,qBAAiB;AAEpC,SACEL,qBAAqB,EACrBC,wBAAwB,EACxBC,aAAa,EACbC,aAAa,EACbC,oBAAoB;AAGtB,MAAM;EAAEE;AAAO,CAAC,GAAGxB,QAAQ;;AAE3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAjBA,IAmBMyB,UAAU,GAAAC,SAAA,EADfpB,aAAa,CAAE,GAAEkB,MAAO,WAAU,CAAC,aAAAG,WAAA,EAAAC,cAAA;EAApC,MACMH,UAAU,SAAAG,cAAA,CAEd;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EA6tBF;EAAC;IAAAI,CAAA,EA/tBKN,UAAU;IAAAO,CAAA;MAAAC,IAAA;MAAAC,GAAA;MAAAC,MAAA;QAAA,OAW4C,IAAI;MAAA;IAAA;MAAAF,IAAA;MAAAC,GAAA;MAAAC,MAAA;QAAA,OAMxB,IAAI;MAAA;IAAA;MAAAF,IAAA;MAAAG,UAAA,GAKzC/B,KAAK,CAAE,IAAGmB,MAAO,YAAW,CAAC;MAAAU,GAAA;MAAAC,KAAA;IAAA;MAAAF,IAAA;MAAAG,UAAA,GAM7B/B,KAAK,CAAC,0BAA0B,CAAC;MAAA6B,GAAA;MAAAC,KAAA;IAAA;MAAAF,IAAA;MAAAG,UAAA,GAMjC/B,KAAK,CAAC,yBAAyB,CAAC;MAAA6B,GAAA;MAAAC,KAAA;IAAA;MAAAF,IAAA;MAAAC,GAAA;MAAAC,KAAA;MA/BjC;AACF;AACA;;MAGE;AACF;AACA;;MAGE;AACF;AACA;AACA;;MAGE;AACF;AACA;;MAIE;AACF;AACA;;MAIE;AACF;AACA;;MAIE;AACF;AACA;AACA;MACE,SAAAE,uBAAiCC,YAA6B,EAAE;QAC9D,OAAO,CAACA,YAAY,IAAIA,YAAY,CAACH,KAAK,KAAK,IAAI,CAACA,KAAK;MAC3D;;MAEA;AACF;AACA;AACA;AACA;AACA;AACA;IANE;MAAAF,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAOA,SAAAI,oBAA8BD,YAA6B,EAAE;QAC3D,IAAIA,YAAY,EAAE;UAChB,IAAI,CAACH,KAAK,GAAGG,YAAY,CAACH,KAAK;UAC/BnB,OAAO,CACL,IAAI,CAACwB,gBAAgB,CAClB,IAAI,CAACX,WAAW,CAAuBY,oBAAoB,CAC7D,EACAC,IAAI,IAAK;YACPA,IAAI,CAAoBC,QAAQ,GAAG,KAAK;UAC3C,CAAC,CACF;UACDL,YAAY,CAACK,QAAQ,GAAG,IAAI;UAC5B,IAAI,CAACC,oBAAoB,GAAG,IAAI,CAACC,yBAAyB;UAC1D,IAAI,CAACC,0BAA0B,CAAC,KAAK,CAAC;QACxC;MACF;;MAEA;AACF;AACA;AACA;AACA;IAJE;MAAAb,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAKA,SAAAY,kBAA4BC,KAAiB,EAAE;QAC7C,IAAI,IAAI,CAACC,UAAU,CAAEC,QAAQ,CAACF,KAAK,CAACG,MAAM,CAAS,EAAE;UACnD,IAAI,CAACL,0BAA0B,EAAE;QACnC,CAAC,MAAM;UACL,MAAMJ,IAAI,GAAIM,KAAK,CAACG,MAAM,CAAaC,OAAO,CAC3C,IAAI,CAACvB,WAAW,CAAuBwB,YAAY,CACnC;UACnB,IAAI,IAAI,CAACH,QAAQ,CAACR,IAAI,CAAC,EAAE;YACvB,IAAI,CAACY,8BAA8B,CAACZ,IAAI,CAAC;UAC3C;QACF;MACF;;MAEA;AACF;AACA;IAFE;MAAAT,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAGA,SAAAoB,oBAA8BP,KAAoB,EAAE;QAClD,MAAM;UAAEd;QAAI,CAAC,GAAGc,KAAK;QACrB,MAAMQ,MAAM,GAAI,IAAI,CAAC3B,WAAW,CAAuB4B,SAAS,CAACvB,GAAG,CAAC;QACrE,IAAI,CAAC,IAAI,CAACwB,IAAI,EAAE;UACd,QAAQF,MAAM;YACZ,KAAKrC,wBAAwB,CAACwC,UAAU;cACtC,IAAI,CAACb,0BAA0B,CAAC,IAAI,CAAC;cACrC;cACA,IAAI,CAACc,eAAe,EAAE;cACtB;YACF;cACE;UAAM;QAEZ,CAAC,MAAM;UACL,QAAQJ,MAAM;YACZ,KAAKrC,wBAAwB,CAAC0C,OAAO;cACnC,IAAI,CAACf,0BAA0B,CAAC,KAAK,CAAC;cACtC;YACF,KAAK3B,wBAAwB,CAACwC,UAAU;cACtC,IAAI,CAACG,SAAS,CAACxC,oBAAoB,CAACY,GAAG,CAAC,CAAC;cACzC;YACF;cACE;UAAM;QAEZ;MACF;;MAEA;AACF;AACA;IAFE;MAAAD,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAGA,SAAA4B,qBAA+Bf,KAAoB,EAAE;QACnD,MAAM;UAAEd;QAAI,CAAC,GAAGc,KAAK;QACrB,MAAMQ,MAAM,GAAI,IAAI,CAAC3B,WAAW,CAAuB4B,SAAS,CAACvB,GAAG,CAAC;QACrE,IAAI,CAAC,IAAI,CAACwB,IAAI,EAAE;UACd,QAAQF,MAAM;YACZ,KAAKrC,wBAAwB,CAAC6C,UAAU;cACtC,IAAI,CAAClB,0BAA0B,CAAC,IAAI,CAAC;cACrC;YACF;cACE;UAAM;QAEZ,CAAC,MAAM;UACL,QAAQU,MAAM;YACZ,KAAKrC,wBAAwB,CAAC6C,UAAU;cACtC;gBACE,MAAMnC,WAAW,GAAG,IAAI,CAACA,WAAgC;gBACzD,MAAMoC,eAAe,GAAG,IAAI,CAACC,aAAa,CACxCrC,WAAW,CAACsC,uBAAuB,CAClB;gBACnB,IAAIF,eAAe,EAAE;kBACnB,IAAI,CAACX,8BAA8B,CAACW,eAAe,CAAC;gBACtD,CAAC,MAAM;kBACL,IAAI,CAACnB,0BAA0B,CAAC,KAAK,CAAC;gBACxC;cACF;cACA;YACF;cACE;UAAM;QAEZ;MACF;;MAEA;AACF;AACA;AACA;AACA;IAJE;MAAAb,IAAA;MAAAG,UAAA,GAKCtB,YAAY,CAAC,UAAU,CAAC;MAAAoB,GAAA;MAAAC,KAAA,EAAzB,SAAAiC,gBAE0BpB,KAAiB,EAAE;QAC3C,IAAI,CAAC,IAAI,CAACE,QAAQ,CAACF,KAAK,CAACqB,aAAa,CAAS,EAAE;UAC/C,IAAI,CAACvB,0BAA0B,CAAC,KAAK,CAAC;QACxC;MACF;;MAEA;AACF;AACA;IAFE;MAAAb,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAGA,SAAAmC,4BAAA,EAAwC;QACtC,IAAI,CAACC,aAAa,EAAE;MACtB;;MAEA;AACF;AACA;IAFE;MAAAtC,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAGA,SAAAqC,2BAAA,EAAuC;QACrC,IAAI,CAACD,aAAa,EAAE;MACtB;;MAEA;AACF;AACA;AACA;AACA;IAJE;MAAAtC,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAKA,SAAAmB,+BAAyCZ,IAAqB,EAAE;QAC9D,IAAI,IAAI,CAACL,sBAAsB,CAACK,IAAI,CAAC,EAAE;UACrC,MAAM+B,IAAI,GAAG;YACXC,OAAO,EAAE,IAAI;YACbC,QAAQ,EAAE,IAAI;YACdC,MAAM,EAAE;cACNlC;YACF;UACF,CAAC;UACD,MAAMb,WAAW,GAAG,IAAI,CAACA,WAAgC;UACzD,MAAMgD,iBAAiB,GAAG,IAAIC,WAAW,CAACjD,WAAW,CAACkD,iBAAiB,EAAAC,aAAA,CAAAA,aAAA,KAClEP,IAAI;YACPQ,UAAU,EAAE;UAAI,GAChB;UACF,IAAI,IAAI,CAACC,aAAa,CAACL,iBAAiB,CAAC,EAAE;YACzC,IAAI,CAACtC,mBAAmB,CAACG,IAAI,CAAC;YAC9B,MAAMyC,gBAAgB,GAAG,IAAIL,WAAW,CAACjD,WAAW,CAACuD,WAAW,EAAEX,IAAI,CAAC;YACvE,IAAI,CAACS,aAAa,CAACC,gBAAgB,CAAC;UACtC;QACF;MACF;;MAEA;AACF;AACA;AACA;AACA;IAJE;MAAAlD,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAKA,SAAAW,2BAAqCuC,KAAc,GAAG,CAAC,IAAI,CAAC3B,IAAI,EAAE;QAChE,MAAM;UAAE4B,iBAAiB;UAAEC;QAAY,CAAC,GAAG,IAAI,CAC5C1D,WAAgC;QAEnC,MAAM;UAAE2D;QAAS,CAAC,GAAG,IAAI;QACzB,MAAMf,IAAI,GAAG;UACXC,OAAO,EAAE,IAAI;UACbO,UAAU,EAAE,IAAI;UAChBN,QAAQ,EAAE,IAAI;UACdC,MAAM,EAAE;YACNlB,IAAI,EAAE2B;UACR;QACF,CAAC;QACD,IAAI,CAACG,QAAQ,EAAE;UACb,IAAI,IAAI,CAACN,aAAa,CAAC,IAAIJ,WAAW,CAACQ,iBAAiB,EAAEb,IAAI,CAAC,CAAC,EAAE;YAChE,IAAI,CAACf,IAAI,GAAG2B,KAAK;YACjB,IAAI,IAAI,CAAC3B,IAAI,EAAE;cACb,IAAI,CAACd,oBAAoB,GAAG,IAAI,CAAC6C,2BAA2B;YAC9D,CAAC,MAAM;cACL,MAAM;gBACJ5C,yBAAyB;gBACzB6C,cAAc;gBACd9C,oBAAoB,EAAE+C,mBAAmB;gBACzCC,oBAAoB,EAAEC;cACxB,CAAC,GAAG,IAAI;cACR,MAAMC,gBAAgB,GACnBD,mBAAmB,IAAIA,mBAAmB,CAACE,WAAW,IACvDL,cAAc;cAChB,IACEI,gBAAgB,IAChBH,mBAAmB,KAAK9C,yBAAyB,EACjD;gBACA,IAAI,CAACD,oBAAoB,GAAGkD,gBAAgB;cAC9C;cACA9E,OAAO,CACL,IAAI,CAACwB,gBAAgB,CAClB,IAAI,CAACX,WAAW,CAAuBsC,uBAAuB,CAChE,EACAzB,IAAI,IAAK;gBACPA,IAAI,CAAoBsD,WAAW,GAAG,KAAK;cAC9C,CAAC,CACF;YACH;YACA,IAAI,CAACzB,aAAa,EAAE;YACpB,IAAI,CAACW,aAAa,CAAC,IAAIJ,WAAW,CAACS,WAAW,EAAEd,IAAI,CAAC,CAAC;UACxD;QACF;MACF;;MAEA;AACF;AACA;IAFE;MAAAxC,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAGA,SAAAyB,gBAAA,EAA4B;QAC1B5C,OAAO,CACL,IAAI,CAACwB,gBAAgB,CAClB,IAAI,CAACX,WAAW,CAAuBwB,YAAY,CACrD,EACAX,IAAI,IAAK;UACPA,IAAI,CAAoBsD,WAAW,GAAG,KAAK;QAC9C,CAAC,CACF;MACH;;MAEA;AACF;AACA;AACA;AACA;IAJE;MAAA/D,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAKA,SAAA2B,UAAoBmC,SAAiB,EAAE;QACrC,MAAMpE,WAAW,GAAG,IAAI,CAACA,WAAgC;QACzD,MAAMqE,KAAK,GAAG,IAAI,CAAC1D,gBAAgB,CAACX,WAAW,CAACwB,YAAY,CAAC;QAC7D,MAAMY,eAAe,GAAG,IAAI,CAACC,aAAa,CACxCrC,WAAW,CAACsC,uBAAuB,CACpC;QACD,MAAMgC,gBAAgB,GAAGlF,OAAO,CAACiF,KAAK,EAAEjC,eAAe,CAAE;QACzD,IAAImC,SAAS,GAAGD,gBAAgB,GAAGF,SAAS;QAC5C,IAAIG,SAAS,GAAG,CAAC,EAAE;UACjBA,SAAS,GAAGF,KAAK,CAACG,MAAM,GAAG,CAAC;QAC9B;QACA,IAAID,SAAS,IAAIF,KAAK,CAACG,MAAM,EAAE;UAC7BD,SAAS,GAAG,CAAC;QACf;QACApF,OAAO,CAACkF,KAAK,EAAE,CAACxD,IAAI,EAAE4D,CAAC,KAAK;UACzB5D,IAAI,CAAoBsD,WAAW,GAAGM,CAAC,KAAKF,SAAS;QACxD,CAAC,CAAC;QAEF,MAAMG,QAAQ,GAAGL,KAAK,CAACE,SAAS,CAAC;QACjC;QACA;QACA;QACAG,QAAQ,CAACC,cAAc,CAAC;UAAEC,KAAK,EAAE;QAAU,CAAC,CAAC;QAE7C,MAAMC,YAAY,GAAGH,QAAQ,CAACR,WAAW;QACzC,IAAIW,YAAY,EAAE;UAChB,IAAI,CAAC9D,oBAAoB,GAAG8D,YAAY;QAC1C;QACA,IAAI,CAACnC,aAAa,EAAE;MACtB;;MAEA;MACA;AACF;AACA;IAFE;MAAAtC,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAGA,SAAAwE,+BAAA,EAAkE;QAChE,OAAOC,SAAS;MAClB;MACA;;MAEA;AACF;AACA;IAFE;MAAA3E,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAGA,SAAA0E,sBAAA,EAAkD;QAChD,MAAM;UAAEnB,cAAc;UAAEE,oBAAoB,EAAEC;QAAoB,CAAC,GAAG,IAAI;QAC1E,OAAO1F,IAAI,CAAA2G,EAAA,KAAAA,EAAA,GAAAC,CAAA,yEACyBvF,MAAM,EACnCqE,mBAAmB,IAAIH,cAAc;MAG9C;;MAEA;MACA;AACF;AACA;IAFE;MAAAzD,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAGA,SAAA6E,+BAAA,EAAkE;QAChE,OAAOJ,SAAS;MAClB;MACA;;MAEA;AACF;AACA;AACA;AACA;IAJE;MAAA3E,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAKA,SAAA8E,gBAAgBjE,KAAY,EAAE;QAC5B,MAAM;UAAEkE;QAAS,CAAC,GAAGlE,KAAY,CAAC,CAAC;QACnC,MAAM;UAAEwC,QAAQ;UAAE2B,IAAI;UAAEhF;QAAM,CAAC,GAAG,IAAI;QACtC,IAAI,CAACqD,QAAQ,EAAE;UACb0B,QAAQ,CAACE,MAAM,CAACD,IAAI,EAAEhF,KAAK,CAAC;QAC9B;MACF;;MAEA;AACF;AACA;IAFE;MAAAF,IAAA;MAAAG,UAAA,GAGChC,QAAQ,CAAC;QAAEiH,SAAS,EAAE,cAAc;QAAEC,OAAO,EAAE;MAAK,CAAC,CAAC;MAAApF,GAAA;MAAAC,MAAA;QAAA,OACzCjB,qBAAqB,CAACqG,OAAO;MAAA;IAAA;MAAAtF,IAAA;MAAAG,UAAA,GAK1ChC,QAAQ,CAAC;QAAEoH,IAAI,EAAEC,OAAO;QAAEH,OAAO,EAAE;MAAK,CAAC,CAAC;MAAApF,GAAA;MAAAC,MAAA;QAAA,OAChC,KAAK;MAAA;IAAA;MAAAF,IAAA;MAAAG,UAAA,GAKfhC,QAAQ,CAAC;QAAEiH,SAAS,EAAE;MAAc,CAAC,CAAC;MAAAnF,GAAA;MAAAC,MAAA;QAAA,OAC1B,EAAE;MAAA;IAAA;MAAAF,IAAA;MAAAG,UAAA,GAKdhC,QAAQ,CAAC;QAAEoH,IAAI,EAAEC,OAAO;QAAEH,OAAO,EAAE;MAAK,CAAC,CAAC;MAAApF,GAAA;MAAAC,MAAA;QAAA,OACjC,KAAK;MAAA;IAAA;MAAAF,IAAA;MAAAG,UAAA,GAKdhC,QAAQ,CAAC;QAAEiH,SAAS,EAAE;MAAa,CAAC,CAAC;MAAAnF,GAAA;MAAAC,MAAA;QAAA,OAC1B,EAAE;MAAA;IAAA;MAAAF,IAAA;MAAAG,UAAA,GAKbhC,QAAQ,EAAE;MAAA8B,GAAA;MAAAC,MAAA;QAAA,OACJ,EAAE;MAAA;IAAA;MAAAF,IAAA;MAAAG,UAAA,GAKRhC,QAAQ,CAAC;QAAEoH,IAAI,EAAEC,OAAO;QAAEH,OAAO,EAAE;MAAK,CAAC,CAAC;MAAApF,GAAA;MAAAC,MAAA;QAAA,OACpC,KAAK;MAAA;IAAA;MAAAF,IAAA;MAAAG,UAAA,GAKXhC,QAAQ,CAAC;QAAEoH,IAAI,EAAEC,OAAO;QAAEH,OAAO,EAAE;MAAK,CAAC,CAAC;MAAApF,GAAA;MAAAC,MAAA;QAAA,OAChC,KAAK;MAAA;IAAA;MAAAF,IAAA;MAAAG,UAAA,GAKfhC,QAAQ,CAAC;QAAEiH,SAAS,EAAE;MAA4B,CAAC,CAAC;MAAAnF,GAAA;MAAAC,MAAA;QAAA,OAC3B,6BAA6B;MAAA;IAAA;MAAAF,IAAA;MAAAG,UAAA,GAKtDhC,QAAQ,CAAC;QAAEiH,SAAS,EAAE;MAAiC,CAAC,CAAC;MAAAnF,GAAA;MAAAC,MAAA;QAAA,OAExD,0DAA0D;MAAA;IAAA;MAAAF,IAAA;MAAAG,UAAA,GAK3DhC,QAAQ,CAAC;QAAEiH,SAAS,EAAE;MAA+B,CAAC,CAAC;MAAAnF,GAAA;MAAAC,MAAA;QAAA,OAC5B,mBAAmB;MAAA;IAAA;MAAAF,IAAA;MAAAG,UAAA,GAK9ChC,QAAQ,CAAC;QAAEkH,OAAO,EAAE;MAAK,CAAC,CAAC;MAAApF,GAAA;MAAAC,MAAA;QAAA,OACrBf,aAAa,CAACmG,OAAO;MAAA;IAAA;MAAAtF,IAAA;MAAAG,UAAA,GAK3BhC,QAAQ,CAAC;QAAEiH,SAAS,EAAE;MAAsB,CAAC,CAAC;MAAAnF,GAAA;MAAAC,MAAA;QAAA,OAC3B,EAAE;MAAA;IAAA;MAAAF,IAAA;MAAAG,UAAA,GAKrBhC,QAAQ,CAAC;QAAEiH,SAAS,EAAE;MAAoB,CAAC,CAAC;MAAAnF,GAAA;MAAAC,MAAA;QAAA,OAC3B,EAAE;MAAA;IAAA;MAAAF,IAAA;MAAAG,UAAA,GAKnBhC,QAAQ,CAAC;QAAEiH,SAAS,EAAE;MAAkB,CAAC,CAAC;MAAAnF,GAAA;MAAAC,MAAA;QAAA,OAC1B,EAAE;MAAA;IAAA;MAAAF,IAAA;MAAAG,UAAA,GAKlBhC,QAAQ,CAAC;QAAEkH,OAAO,EAAE;MAAK,CAAC,CAAC;MAAApF,GAAA;MAAAC,MAAA;QAAA,OACrBd,aAAa,CAACkG,OAAO;MAAA;IAAA;MAAAtF,IAAA;MAAAG,UAAA,GAK3BhC,QAAQ,CAAC;QAAEiH,SAAS,EAAE;MAAmB,CAAC,CAAC;MAAAnF,GAAA;MAAAC,MAAA;QAAA,OAC1B,EAAE;MAAA;IAAA;MAAAF,IAAA;MAAAG,UAAA,GAKnBhC,QAAQ,CAAC;QAAEkH,OAAO,EAAE;MAAK,CAAC,CAAC;MAAApF,GAAA;MAAAC,MAAA;QAAA,OACpB,EAAE;MAAA;IAAA;MAAAF,IAAA;MAAAC,GAAA;MAAAC,KAAA;MArGV;AACF;AACA;MAIE;AACF;AACA;MAIE;AACF;AACA;MAIE;AACF;AACA;MAIE;AACF;AACA;MAIE;AACF;AACA;MAIE;AACF;AACA;MAIE;AACF;AACA;MAIE;AACF;AACA;MAKE;AACF;AACA;MAIE;AACF;AACA;MAIE;AACF;AACA;MAIE;AACF;AACA;MAIE;AACF;AACA;MAIE;AACF;AACA;MAIE;AACF;AACA;MAIE;AACF;AACA;MAIE,SAAAuF,iBAAA,EAAmB;QAAA,IAAAC,KAAA;QACjB,OAAO,IAAI,CAACC,YAAY,CAAC;UACvBC,IAAI,EAAE,MAAM;UACZC,cAAc,EACZC,MAAM,CAAC,EAAAJ,KAAA,GAAC,eAAe,CAACK,IAAI,CAACC,SAAS,CAACC,SAAS,CAAC,cAAAP,KAAA,cAAAA,KAAA,GAAI,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IACjE;QACJ,CAAC,CAAC;MACJ;IAAC;MAAA1F,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAED,SAAAgG,aAAaC,iBAAiB,EAAE;QAC9B,MAAM;UAAE/E;QAAa,CAAC,GAAG,IAAI,CAACxB,WAAgC;QAC9D,IAAIuG,iBAAiB,CAACC,GAAG,CAAC,MAAM,CAAC,EAAE;UACjCrH,OAAO,CAAC,IAAI,CAACwB,gBAAgB,CAACa,YAAY,CAAC,EAAGiF,IAAI,IAAK;YACpDA,IAAI,CAAoBC,IAAI,GAAG,IAAI,CAACA,IAAI;UAC3C,CAAC,CAAC;QACJ;QACA,IAAIH,iBAAiB,CAACC,GAAG,CAAC,OAAO,CAAC,EAAE;UAClC;UACA;UACArH,OAAO,CAAC,IAAI,CAACwB,gBAAgB,CAACa,YAAY,CAAC,EAAGiF,IAAI,IAAK;YACpDA,IAAI,CAAoB3F,QAAQ,GAC9B2F,IAAI,CAAoBnG,KAAK,KAAK,IAAI,CAACA,KAAK;UACjD,CAAC,CAAC;UACF,MAAMO,IAAI,GAAG3B,IAAI,CACf,IAAI,CAACyB,gBAAgB,CAACa,YAAY,CAAC,EAClCiF,IAAI,IAAMA,IAAI,CAAoBnG,KAAK,KAAK,IAAI,CAACA,KAAK,CACxD;UACD,IAAIO,IAAI,EAAE;YACR,MAAM8F,KAAK,GAAG,IAAI,CAACC,aAAa,CAAEC,WAAW,EAAE;YAC/CF,KAAK,CAACG,kBAAkB,CAACjG,IAAI,CAAC;YAC9B,IAAI,CAACkD,oBAAoB,GAAG4C,KAAK,CAACI,aAAa,EAAE;UACnD,CAAC,MAAM;YACL,IAAI,CAAChD,oBAAoB,GAAG,IAAI;UAClC;QACF;QACA,OAAO,IAAI;MACb;IAAC;MAAA3D,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAED,SAAA0G,QAAQT,iBAAiB,EAAE;QACzB,MAAM;UAAEU,UAAU;UAAEtB;QAAK,CAAC,GAAG,IAAI;QACjC,MAAMuB,MAAM,GAAGvB,IAAI,KAAKnG,aAAa,CAAC2H,MAAM;QAC5C,MAAM;UAAE3F;QAAa,CAAC,GAAG,IAAI,CAACxB,WAAgC;QAC9D,IAAIuG,iBAAiB,CAACC,GAAG,CAAC,UAAU,CAAC,EAAE;UACrC,MAAM;YAAE7C;UAAS,CAAC,GAAG,IAAI;UACzB;UACAxE,OAAO,CAAC,IAAI,CAACwB,gBAAgB,CAACa,YAAY,CAAC,EAAGiF,IAAI,IAAK;YACpDA,IAAI,CAAoB9C,QAAQ,GAAGA,QAAQ;UAC9C,CAAC,CAAC;QACJ;QACA,IACE,CAAC4C,iBAAiB,CAACC,GAAG,CAAC,YAAY,CAAC,IAAID,iBAAiB,CAACC,GAAG,CAAC,MAAM,CAAC,KACrES,UAAU,IACVC,MAAM,EACN;UACA;UACAE,OAAO,CAACC,IAAI,CACV,wFAAwF,EACxF,IAAI,CACL;QACH;MACF;IAAC;MAAAjH,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAED,SAAAgH,OAAA,EAAS;QACP,MAAM;UACJC,WAAW;UACX5D,QAAQ;UACRsD,UAAU;UACVO,OAAO;UACPC,SAAS;UACT5F,IAAI;UACJ6F,iBAAiB;UACjBC,eAAe;UACfjB,IAAI;UACJf,IAAI;UACJiC,eAAe;UACf7G,oBAAoB,EAAE+C,mBAAmB;UACzC+D,yBAAyB,EAAEC,wBAAwB;UACnD5G,iBAAiB,EAAE6G,gBAAgB;UACnCrG,mBAAmB,EAAEsG,kBAAkB;UACvC9F,oBAAoB,EAAE+F,mBAAmB;UACzCxF,2BAA2B,EAAEyF,0BAA0B;UACvDvF,0BAA0B,EAAEwF,yBAAyB;UACrDC,mBAAmB,EAAEC,kBAAkB;UACvCC,kBAAkB,EAAEC;QACtB,CAAC,GAAG,IAAI;QACR,MAAMrB,MAAM,GAAGvB,IAAI,KAAKnG,aAAa,CAAC2H,MAAM;QAC5C,MAAMqB,kBAAkB,GAAG,IAAI,CAAC7H,gBAAgB,CAC7C,IAAI,CAACX,WAAW,CAAuBY,oBAAoB,CAC7D,CAAC4D,MAAM;QACR,MAAMiE,OAAO,GAAGrK,QAAQ,CAAC;UACvB,CAAE,GAAEuB,MAAO,YAAW,GAAG,IAAI;UAC7B,CAAE,GAAEA,MAAO,YAAW,GAAG,IAAI;UAC7B,CAAE,GAAEA,MAAO,eAAc4H,WAAY,EAAC,GAAGA,WAAW;UACpD,CAAE,GAAE5H,MAAO,sBAAqB,GAAGgE,QAAQ;UAC3C,CAAE,GAAEhE,MAAO,oBAAmB,GAAGuH,MAAM;UACvC,CAAE,GAAEvH,MAAO,sBAAqB,GAAGkC,IAAI;UACvC,CAAE,GAAElC,MAAO,eAAc+G,IAAK,EAAC,GAAGA,IAAI;UACtC,CAAE,GAAE/G,MAAO,qBAAoB,GAAG6H,OAAO;UACzC,CAAE,GAAE7H,MAAO,oBAAmB,GAAGuH,MAAM;UACvC,CAAE,GAAEvH,MAAO,sBAAqB,GAAG6I,kBAAkB,GAAG;QAC1D,CAAC,CAAC;QACF,MAAME,YAAY,GAAGtK,QAAQ,CAAC;UAC5B,CAAE,GAAEuB,MAAO,SAAQ,GAAG,IAAI;UAC1B,CAAE,GAAEA,MAAO,mBAAkB,GAAGgE;QAClC,CAAC,CAAC;QACF,MAAMgF,aAAa,GAAGvK,QAAQ,CAAC;UAC7B,CAAE,GAAEuB,MAAO,qBAAoB,GAAG,IAAI;UACtC,CAAE,GAAEA,MAAO,+BAA8B,GAAGgE;QAC9C,CAAC,CAAC;QACF,MAAMiF,oBAAoB,GAAGxK,QAAQ,CAAC;UACpC,CAAE,GAAEuB,MAAO,uBAAsB,GAAG,IAAI;UACxC,CAAE,GAAEA,MAAO,6BAA4B,GAAGkC;QAC5C,CAAC,CAAC;QACF,MAAMgH,WAAW,GACf,CAAChH,IAAI,GAAG8F,eAAe,GAAGD,iBAAiB,KAAK3C,SAAS;QAC3D,MAAM+D,aAAa,GACjB7B,UAAU,IACToB,kBAAkB,IAAIA,kBAAkB,CAACU,aAAa,EAAE,CAACvE,MAAM,GAAG,CAAE;QACvE,MAAMwE,YAAY,GAChBvB,SAAS,IACRc,iBAAiB,IAAIA,iBAAiB,CAACQ,aAAa,EAAE,CAACvE,MAAM,GAAG,CAAE;QACrE,MAAMyE,MAAM,GAAG,CAACzB,OAAO,GACnBlJ,IAAI,CAAA4K,GAAA,KAAAA,GAAA,GAAAhE,CAAA,0HAGSyD,aAAa,EACXzB,MAAM,IAAI,CAAC4B,aAAa,EACKZ,0BAA0B,EAC7DjB,UAAU,IAInB3I,IAAI,CAAA6K,GAAA,KAAAA,GAAA,GAAAjE,CAAA,kGACoC,GAAEvF,MAAO,oBAAmB,EAChCiI,eAAe,CAElD;QACL,MAAMwB,YAAY,GAAG,CAAC5B,OAAO,GACzBzC,SAAS,GACTnG,eAAe,CAAC;UACdyK,KAAK,EAAG,GAAE1J,MAAO,0BAAyB;UAC1C,YAAY,EAAEkJ;QAChB,CAAC,CAAC;QACN,MAAMS,QAAQ,GAAG,CAACzH,IAAI,GAClBkD,SAAS,GACTzG,IAAI,CAAAiL,GAAA,KAAAA,GAAA,GAAArE,CAAA,2HAISvF,MAAM,CAKlB;QACL,OAAOrB,IAAI,CAAAkL,GAAA,KAAAA,GAAA,GAAAtE,CAAA,gnBAGEwD,YAAY,EACV,CAACM,YAAY,EACeb,yBAAyB,EAC3DV,SAAS,EAKLgB,OAAO,EACAjB,OAAO,EACdO,gBAAgB,EACdC,kBAAkB,EACjBC,mBAAmB,EAC7BmB,YAAY,EAGJ/K,SAAS,CAAC,CAACyJ,wBAAwB,GAAG/C,SAAS,GAAG,QAAQ,CAAC,EAC1DpF,MAAM,EACHtB,SAAS,CAAC,CAACyJ,wBAAwB,GAAG/C,SAAS,GAAG,GAAG,CAAC,EAEjD0E,MAAM,CAAC5H,IAAI,CAAC,EAI3B,IAAI,CAACiD,8BAA8B,EAAE,EAAG,IAAI,CAACE,qBAAqB,EAAE,EAAG,IAAI,CAACG,8BAA8B,EAAE,EAChGyD,oBAAoB,EAC9BjK,aAAa,CAAC;UAAE,YAAY,EAAEkK;QAAY,CAAC,CAAC,EAGhDS,QAAQ,EAEVL,MAAM,EAEGtJ,MAAM,EAIbmE,mBAAmB;MAG3B;;MAEA;AACF;AACA;IAFE;MAAA1D,IAAA;MAAAsJ,MAAA;MAAArJ,GAAA;MAAAC,MAAA;QAAA,OAGsB,IAAIqJ,GAAG,CAAC,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;MAAA;IAAA;MAAAvJ,IAAA;MAAAsJ,MAAA;MAAArJ,GAAA;MAAAC,KAAA;MAE7C;AACF;AACA;MACE,SAAAgC,wBAAA,EAAqC;QACnC,OAAQ,GAAE3C,MAAO,6BAA4B;MAC/C;;MAEA;AACF;AACA;IAFE;MAAAS,IAAA;MAAAsJ,MAAA;MAAArJ,GAAA;MAAAC,KAAA,EAGA,SAAAkB,aAAA,EAA0B;QACxB,OAAQ,GAAE7B,MAAO,gBAAe;MAClC;;MAEA;AACF;AACA;IAFE;MAAAS,IAAA;MAAAsJ,MAAA;MAAArJ,GAAA;MAAAC,KAAA,EAGA,SAAAM,qBAAA,EAAkC;QAChC,OAAQ,GAAEjB,MAAO,0BAAyB;MAC5C;;MAEA;AACF;AACA;AACA;IAHE;MAAAS,IAAA;MAAAsJ,MAAA;MAAArJ,GAAA;MAAAC,KAAA,EAIA,SAAA4C,kBAAA,EAA+B;QAC7B,OAAQ,GAAEvD,MAAO,yBAAwB;MAC3C;;MAEA;AACF;AACA;IAFE;MAAAS,IAAA;MAAAsJ,MAAA;MAAArJ,GAAA;MAAAC,KAAA,EAGA,SAAAiD,YAAA,EAAyB;QACvB,OAAQ,GAAE5D,MAAO,oBAAmB;MACtC;;MAEA;AACF;AACA;AACA;IAHE;MAAAS,IAAA;MAAAsJ,MAAA;MAAArJ,GAAA;MAAAC,KAAA,EAIA,SAAAmD,kBAAA,EAA+B;QAC7B,OAAQ,GAAE9D,MAAO,wBAAuB;MAC1C;;MAEA;AACF;AACA;IAFE;MAAAS,IAAA;MAAAsJ,MAAA;MAAArJ,GAAA;MAAAC,KAAA,EAGA,SAAAoD,YAAA,EAAyB;QACvB,OAAQ,GAAE/D,MAAO,mBAAkB;MACrC;IAAC;MAAAS,IAAA;MAAAsJ,MAAA;MAAArJ,GAAA;MAAAC,MAAA;QAAA,OAEeZ,MAAM;MAAA;IAAA;MAAAU,IAAA;MAAAsJ,MAAA;MAAArJ,GAAA;MAAAC,KAAA;MAEtB;AACF;AACA;MACE,SAAAsB,UAAiBvB,GAAW,EAAE;QAC5B,IAAIA,GAAG,KAAK,QAAQ,EAAE;UACpB,OAAOf,wBAAwB,CAAC0C,OAAO;QACzC;QACA,IAAI3B,GAAG,IAAIZ,oBAAoB,EAAE;UAC/B,OAAOH,wBAAwB,CAACwC,UAAU;QAC5C;QACA,IAAI,IAAI,CAAC8H,YAAY,CAACpD,GAAG,CAACnG,GAAG,CAAC,EAAE;UAC9B,OAAOf,wBAAwB,CAAC6C,UAAU;QAC5C;QACA,OAAO7C,wBAAwB,CAACuK,IAAI;MACtC;IAAC;EAAA;AAAA,GA9tBsB7K,aAAa,CACpCD,iBAAiB,CAACD,SAAS,CAACD,UAAU,CAACH,UAAU,CAAC,CAAC,CAAC,CACrD;AA+tBD,eAAekB,UAAU"}
+{"version":3,"file":"dropdown.js","names":["settings","classMap","ifDefined","html","property","query","LitElement","ChevronDown16","WarningFilled16","FocusMixin","FormMixin","HostListenerMixin","ValidityMixin","HostListener","find","forEach","indexOf","DROPDOWN_COLOR_SCHEME","DROPDOWN_KEYBOARD_ACTION","DROPDOWN_SIZE","DROPDOWN_TYPE","NAVIGATION_DIRECTION","styles","carbonElement","customElement","prefix","BXDropdown","_decorate","_initialize","_ValidityMixin","constructor","args","F","d","kind","key","value","decorators","_selectionShouldChange","itemToSelect","_selectionDidChange","querySelectorAll","selectorItemSelected","item","selected","_assistiveStatusText","selectedItemAssistiveText","_handleUserInitiatedToggle","_handleClickInner","event","shadowRoot","contains","target","closest","selectorItem","_handleUserInitiatedSelectItem","_handleKeydownInner","action","getAction","open","NAVIGATING","_clearHighlight","CLOSING","_navigate","_handleKeypressInner","TRIGGERING","highlightedItem","querySelector","selectorItemHighlighted","_handleFocusOut","relatedTarget","_handleSlotchangeHelperText","requestUpdate","_handleSlotchangeLabelText","init","bubbles","composed","detail","beforeSelectEvent","CustomEvent","eventBeforeSelect","_objectSpread","cancelable","dispatchEvent","afterSelectEvent","eventSelect","force","eventBeforeToggle","eventToggle","disabled","selectingItemsAssistiveText","triggerContent","assistiveStatusText","_selectedItemContent","selectedItemContent","selectedItemText","textContent","highlighted","direction","items","highlightedIndex","nextIndex","length","i","nextItem","scrollIntoView","block","nextItemText","_renderPrecedingTriggerContent","undefined","_renderTriggerContent","_t","_","_renderFollowingTriggerContent","_handleFormdata","formData","name","append","attribute","reflect","REGULAR","type","Boolean","createRenderRoot","_exec","attachShadow","mode","delegatesFocus","Number","exec","navigator","userAgent","shouldUpdate","changedProperties","has","elem","size","range","ownerDocument","createRange","selectNodeContents","cloneContents","updated","helperText","inline","INLINE","console","warn","render","colorScheme","invalid","labelText","toggleLabelClosed","toggleLabelOpen","validityMessage","_shouldTriggerBeFocusable","shouldTriggerBeFocusable","handleClickInner","handleKeydownInner","handleKeypressInner","handleSlotchangeHelperText","handleSlotchangeLabelText","_slotHelperTextNode","slotHelperTextNode","_slotLabelTextNode","slotLabelTextNode","selectedItemsCount","classes","labelClasses","helperClasses","iconContainerClasses","toggleLabel","hasHelperText","assignedNodes","hasLabelText","helper","_t2","_t3","validityIcon","class","menuBody","_t4","_t5","String","static","Set","TRIGGER_KEYS","NONE"],"sources":["components/dropdown/dropdown.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 { classMap } from 'lit-html/directives/class-map';\nimport { TemplateResult } from 'lit-html';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html, property, query, LitElement } from 'lit-element';\nimport ChevronDown16 from '@carbon/icons/lib/chevron--down/16';\nimport WarningFilled16 from '@carbon/icons/lib/warning--filled/16';\nimport FocusMixin from '../../globals/mixins/focus';\nimport FormMixin from '../../globals/mixins/form';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport ValidityMixin from '../../globals/mixins/validity';\nimport HostListener from '../../globals/decorators/host-listener';\nimport {\n  find,\n  forEach,\n  indexOf,\n} from '../../globals/internal/collection-helpers';\nimport {\n  DROPDOWN_COLOR_SCHEME,\n  DROPDOWN_KEYBOARD_ACTION,\n  DROPDOWN_SIZE,\n  DROPDOWN_TYPE,\n  NAVIGATION_DIRECTION,\n} from './defs';\nimport BXDropdownItem from './dropdown-item';\nimport styles from './dropdown.scss';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport {\n  DROPDOWN_COLOR_SCHEME,\n  DROPDOWN_KEYBOARD_ACTION,\n  DROPDOWN_SIZE,\n  DROPDOWN_TYPE,\n  NAVIGATION_DIRECTION,\n};\n\nconst { prefix } = settings;\n\n/**\n * Dropdown.\n *\n * @element bx-dropdown\n * @csspart label-text The label text.\n * @csspart helper-text The helper text.\n * @csspart trigger-button The trigger button.\n * @csspart menu-body The menu body.\n * @csspart validity-message The validity message.\n * @fires bx-dropdown-beingselected\n *   The custom event fired before a dropdown item is selected upon a user gesture.\n *   Cancellation of this event stops changing the user-initiated selection.\n * @fires bx-dropdown-beingtoggled\n *   The custom event fired before the open state of this dropdown is toggled upon a user gesture.\n *   Cancellation of this event stops the user-initiated toggling.\n * @fires bx-dropdown-selected - The custom event fired after a dropdown item is selected upon a user gesture.\n * @fires bx-dropdown-toggled - The custom event fired after the open state of this dropdown is toggled upon a user gesture.\n */\n@customElement(`${prefix}-dropdown`)\nclass BXDropdown extends ValidityMixin(\n  HostListenerMixin(FormMixin(FocusMixin(LitElement)))\n) {\n  /**\n   * The latest status of this dropdown, for screen reader to accounce.\n   */\n  protected _assistiveStatusText?: string;\n\n  /**\n   * The content of the selected item.\n   */\n  protected _selectedItemContent: DocumentFragment | null = null;\n\n  /**\n   * `true` if the trigger button should be focusable.\n   * Derived class can set `false` to this if the trigger button contains another primary focusable element (e.g. `<input>`).\n   */\n  protected _shouldTriggerBeFocusable = true;\n\n  /**\n   * The list box `<div>` node.\n   */\n  @query(`.${prefix}--list-box`)\n  protected _listBoxNode!: HTMLDivElement;\n\n  /**\n   * The `<slot>` element for the helper text in the shadow DOM.\n   */\n  @query('slot[name=\"helper-text\"]')\n  protected _slotHelperTextNode!: HTMLSlotElement;\n\n  /**\n   * The `<slot>` element for the label text in the shadow DOM.\n   */\n  @query('slot[name=\"label-text\"]')\n  protected _slotLabelTextNode!: HTMLSlotElement;\n\n  /**\n   * @param itemToSelect A dropdown item. Absense of this argument means clearing selection.\n   * @returns `true` if the selection of this dropdown should change if the given item is selected upon user interaction.\n   */\n  protected _selectionShouldChange(itemToSelect?: BXDropdownItem) {\n    return !itemToSelect || itemToSelect.value !== this.value;\n  }\n\n  /**\n   * A callback that runs after change in dropdown selection upon user interaction is confirmed.\n   *\n   * @param itemToSelect\n   *   A dropdown item.\n   *   Absense of this argument means clearing selection, which may be handled by a derived class.\n   */\n  protected _selectionDidChange(itemToSelect?: BXDropdownItem) {\n    if (itemToSelect) {\n      this.value = itemToSelect.value;\n      forEach(\n        this.querySelectorAll(\n          (this.constructor as typeof BXDropdown).selectorItemSelected\n        ),\n        (item) => {\n          (item as BXDropdownItem).selected = false;\n        }\n      );\n      itemToSelect.selected = true;\n      this._assistiveStatusText = this.selectedItemAssistiveText;\n      this._handleUserInitiatedToggle(false);\n    }\n  }\n\n  /**\n   * Handles `click` event on the top-level element in the shadow DOM.\n   *\n   * @param event The event.\n   */\n  protected _handleClickInner(event: MouseEvent) {\n    if (this.shadowRoot!.contains(event.target as Node)) {\n      this._handleUserInitiatedToggle();\n    } else {\n      const item = (event.target as Element).closest(\n        (this.constructor as typeof BXDropdown).selectorItem\n      ) as BXDropdownItem;\n      if (this.contains(item)) {\n        this._handleUserInitiatedSelectItem(item);\n      }\n    }\n  }\n\n  /**\n   * Handler for the `keydown` event on the top-level element in the shadow DOM.\n   */\n  protected _handleKeydownInner(event: KeyboardEvent) {\n    const { key } = event;\n    const action = (this.constructor as typeof BXDropdown).getAction(key);\n    if (!this.open) {\n      switch (action) {\n        case DROPDOWN_KEYBOARD_ACTION.NAVIGATING:\n          this._handleUserInitiatedToggle(true);\n          // If this menu gets open with an arrow key, reset the highlight\n          this._clearHighlight();\n          break;\n        default:\n          break;\n      }\n    } else {\n      switch (action) {\n        case DROPDOWN_KEYBOARD_ACTION.CLOSING:\n          this._handleUserInitiatedToggle(false);\n          break;\n        case DROPDOWN_KEYBOARD_ACTION.NAVIGATING:\n          this._navigate(NAVIGATION_DIRECTION[key]);\n          break;\n        default:\n          break;\n      }\n    }\n  }\n\n  /**\n   * Handler for the `keypress` event on the top-level element in the shadow DOM.\n   */\n  protected _handleKeypressInner(event: KeyboardEvent) {\n    const { key } = event;\n    const action = (this.constructor as typeof BXDropdown).getAction(key);\n    if (!this.open) {\n      switch (action) {\n        case DROPDOWN_KEYBOARD_ACTION.TRIGGERING:\n          this._handleUserInitiatedToggle(true);\n          break;\n        default:\n          break;\n      }\n    } else {\n      switch (action) {\n        case DROPDOWN_KEYBOARD_ACTION.TRIGGERING:\n          {\n            const constructor = this.constructor as typeof BXDropdown;\n            const highlightedItem = this.querySelector(\n              constructor.selectorItemHighlighted\n            ) as BXDropdownItem;\n            if (highlightedItem) {\n              this._handleUserInitiatedSelectItem(highlightedItem);\n            } else {\n              this._handleUserInitiatedToggle(false);\n            }\n          }\n          break;\n        default:\n          break;\n      }\n    }\n  }\n\n  /**\n   * Handles `blur` event handler on the document this element is in.\n   *\n   * @param event The event.\n   */\n  @HostListener('focusout')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  protected _handleFocusOut(event: FocusEvent) {\n    if (!this.contains(event.relatedTarget as Node)) {\n      this._handleUserInitiatedToggle(false);\n    }\n  }\n\n  /**\n   * Handles `slotchange` event for the `<slot>` for helper text.\n   */\n  protected _handleSlotchangeHelperText() {\n    this.requestUpdate();\n  }\n\n  /**\n   * Handles `slotchange` event for the `<slot>` for label text.\n   */\n  protected _handleSlotchangeLabelText() {\n    this.requestUpdate();\n  }\n\n  /**\n   * Handles user-initiated selection of a dropdown item.\n   *\n   * @param [item] The dropdown item user wants to select. Absense of this argument means clearing selection.\n   */\n  protected _handleUserInitiatedSelectItem(item?: BXDropdownItem) {\n    if (this._selectionShouldChange(item)) {\n      const init = {\n        bubbles: true,\n        composed: true,\n        detail: {\n          item,\n        },\n      };\n      const constructor = this.constructor as typeof BXDropdown;\n      const beforeSelectEvent = new CustomEvent(constructor.eventBeforeSelect, {\n        ...init,\n        cancelable: true,\n      });\n      if (this.dispatchEvent(beforeSelectEvent)) {\n        this._selectionDidChange(item);\n        const afterSelectEvent = new CustomEvent(constructor.eventSelect, init);\n        this.dispatchEvent(afterSelectEvent);\n      }\n    }\n  }\n\n  /**\n   * Handles user-initiated toggling the open state.\n   *\n   * @param [force] If specified, forces the open state to the given one.\n   */\n  protected _handleUserInitiatedToggle(force: boolean = !this.open) {\n    const { eventBeforeToggle, eventToggle } = this\n      .constructor as typeof BXDropdown;\n\n    const { disabled } = this;\n    const init = {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      detail: {\n        open: force,\n      },\n    };\n    if (!disabled) {\n      if (this.dispatchEvent(new CustomEvent(eventBeforeToggle, init))) {\n        this.open = force;\n        if (this.open) {\n          this._assistiveStatusText = this.selectingItemsAssistiveText;\n        } else {\n          const {\n            selectedItemAssistiveText,\n            triggerContent,\n            _assistiveStatusText: assistiveStatusText,\n            _selectedItemContent: selectedItemContent,\n          } = this;\n          const selectedItemText =\n            (selectedItemContent && selectedItemContent.textContent) ||\n            triggerContent;\n          if (\n            selectedItemText &&\n            assistiveStatusText !== selectedItemAssistiveText\n          ) {\n            this._assistiveStatusText = selectedItemText;\n          }\n          forEach(\n            this.querySelectorAll(\n              (this.constructor as typeof BXDropdown).selectorItemHighlighted\n            ),\n            (item) => {\n              (item as BXDropdownItem).highlighted = false;\n            }\n          );\n        }\n        this.requestUpdate();\n        this.dispatchEvent(new CustomEvent(eventToggle, init));\n      }\n    }\n  }\n\n  /**\n   * Clears the selection of dropdown items.\n   */\n  protected _clearHighlight() {\n    forEach(\n      this.querySelectorAll(\n        (this.constructor as typeof BXDropdown).selectorItem\n      ),\n      (item) => {\n        (item as BXDropdownItem).highlighted = false;\n      }\n    );\n  }\n\n  /**\n   * Navigate through dropdown items.\n   *\n   * @param direction `-1` to navigate backward, `1` to navigate forward.\n   */\n  protected _navigate(direction: number) {\n    const constructor = this.constructor as typeof BXDropdown;\n    const items = this.querySelectorAll(constructor.selectorItem);\n    const highlightedItem = this.querySelector(\n      constructor.selectorItemHighlighted\n    );\n    const highlightedIndex = indexOf(items, highlightedItem!);\n    let nextIndex = highlightedIndex + direction;\n    if (nextIndex < 0) {\n      nextIndex = items.length - 1;\n    }\n    if (nextIndex >= items.length) {\n      nextIndex = 0;\n    }\n    forEach(items, (item, i) => {\n      (item as BXDropdownItem).highlighted = i === nextIndex;\n    });\n\n    const nextItem = items[nextIndex];\n    // Using `{ block: 'nearest' }` to prevent scrolling unless scrolling is absolutely necessary.\n    // `scrollIntoViewOptions` seems to work in latest Safari despite of MDN/caniuse table.\n    // IE falls back to the old behavior.\n    nextItem.scrollIntoView({ block: 'nearest' });\n\n    const nextItemText = nextItem.textContent;\n    if (nextItemText) {\n      this._assistiveStatusText = nextItemText;\n    }\n    this.requestUpdate();\n  }\n\n  /* eslint-disable class-methods-use-this */\n  /**\n   * @returns The content preceding the trigger button.\n   */\n  protected _renderPrecedingTriggerContent(): TemplateResult | void {\n    return undefined;\n  }\n  /* eslint-enable class-methods-use-this */\n\n  /**\n   * @returns The main content of the trigger button.\n   */\n  protected _renderTriggerContent(): TemplateResult {\n    const { triggerContent, _selectedItemContent: selectedItemContent } = this;\n    return html`\n      <span id=\"trigger-label\" class=\"${prefix}--list-box__label\"\n        >${selectedItemContent || triggerContent}</span\n      >\n    `;\n  }\n\n  /* eslint-disable class-methods-use-this */\n  /**\n   * @returns The content following the trigger button.\n   */\n  protected _renderFollowingTriggerContent(): TemplateResult | void {\n    return undefined;\n  }\n  /* eslint-enable class-methods-use-this */\n\n  /**\n   * Handles event to include selected value on the parent form.\n   *\n   * @param event The event.\n   */\n  _handleFormdata(event: Event) {\n    const { formData } = event as any; // TODO: Wait for `FormDataEvent` being available in `lib.dom.d.ts`\n    const { disabled, name, value } = this;\n    if (!disabled) {\n      formData.append(name, value);\n    }\n  }\n\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = DROPDOWN_COLOR_SCHEME.REGULAR;\n\n  /**\n   * `true` if this dropdown should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * The helper text.\n   */\n  @property({ attribute: 'helper-text' })\n  helperText = '';\n\n  /**\n   * `true` to show the UI of the invalid state.\n   */\n  @property({ type: Boolean, reflect: true })\n  invalid = false;\n\n  /**\n   * The label text.\n   */\n  @property({ attribute: 'label-text' })\n  labelText = '';\n\n  /**\n   * Name for the dropdown in the `FormData`\n   */\n  @property()\n  name = '';\n\n  /**\n   * `true` if this dropdown should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * `true` if the value is required.\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * The special validity message for `required`.\n   */\n  @property({ attribute: 'required-validity-message' })\n  requiredValidityMessage = 'Please fill out this field.';\n\n  /**\n   * An assistive text for screen reader to announce, telling the open state.\n   */\n  @property({ attribute: 'selecting-items-assistive-text' })\n  selectingItemsAssistiveText =\n    'Selecting items. Use up and down arrow keys to navigate.';\n\n  /**\n   * An assistive text for screen reader to announce, telling that an item is selected.\n   */\n  @property({ attribute: 'selected-item-assistive-text' })\n  selectedItemAssistiveText = 'Selected an item.';\n\n  /**\n   * Dropdown size.\n   */\n  @property({ reflect: true })\n  size = DROPDOWN_SIZE.REGULAR;\n\n  /**\n   * The `aria-label` attribute for the UI indicating the closed state.\n   */\n  @property({ attribute: 'toggle-label-closed' })\n  toggleLabelClosed = '';\n\n  /**\n   * The `aria-label` attribute for the UI indicating the open state.\n   */\n  @property({ attribute: 'toggle-label-open' })\n  toggleLabelOpen = '';\n\n  /**\n   * The content of the trigger button.\n   */\n  @property({ attribute: 'trigger-content' })\n  triggerContent = '';\n\n  /**\n   * `true` if this dropdown should use the inline UI variant.\n   */\n  @property({ reflect: true })\n  type = DROPDOWN_TYPE.REGULAR;\n\n  /**\n   * The validity message.\n   */\n  @property({ attribute: 'validity-message' })\n  validityMessage = '';\n\n  /**\n   * The value of the selected item.\n   */\n  @property({ reflect: true })\n  value = '';\n\n  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  shouldUpdate(changedProperties) {\n    const { selectorItem } = this.constructor as typeof BXDropdown;\n    if (changedProperties.has('size')) {\n      forEach(this.querySelectorAll(selectorItem), (elem) => {\n        (elem as BXDropdownItem).size = this.size;\n      });\n    }\n    if (changedProperties.has('value')) {\n      // `<bx-multi-select>` updates selection beforehand\n      // because our rendering logic for `<bx-multi-select>` looks for selected items via `qSA()`\n      forEach(this.querySelectorAll(selectorItem), (elem) => {\n        (elem as BXDropdownItem).selected =\n          (elem as BXDropdownItem).value === this.value;\n      });\n      const item = find(\n        this.querySelectorAll(selectorItem),\n        (elem) => (elem as BXDropdownItem).value === this.value\n      );\n      if (item) {\n        const range = this.ownerDocument!.createRange();\n        range.selectNodeContents(item);\n        this._selectedItemContent = range.cloneContents();\n      } else {\n        this._selectedItemContent = null;\n      }\n    }\n    return true;\n  }\n\n  updated(changedProperties) {\n    const { helperText, type } = this;\n    const inline = type === DROPDOWN_TYPE.INLINE;\n    const { selectorItem } = this.constructor as typeof BXDropdown;\n    if (changedProperties.has('disabled')) {\n      const { disabled } = this;\n      // Propagate `disabled` attribute to descendants until `:host-context()` gets supported in all major browsers\n      forEach(this.querySelectorAll(selectorItem), (elem) => {\n        (elem as BXDropdownItem).disabled = disabled;\n      });\n    }\n    if (\n      (changedProperties.has('helperText') || changedProperties.has('type')) &&\n      helperText &&\n      inline\n    ) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        'Found `helperText` property/attribute usage in inline mode, that is not supported, at:',\n        this\n      );\n    }\n  }\n\n  render() {\n    const {\n      colorScheme,\n      disabled,\n      helperText,\n      invalid,\n      labelText,\n      open,\n      toggleLabelClosed,\n      toggleLabelOpen,\n      size,\n      type,\n      validityMessage,\n      _assistiveStatusText: assistiveStatusText,\n      _shouldTriggerBeFocusable: shouldTriggerBeFocusable,\n      _handleClickInner: handleClickInner,\n      _handleKeydownInner: handleKeydownInner,\n      _handleKeypressInner: handleKeypressInner,\n      _handleSlotchangeHelperText: handleSlotchangeHelperText,\n      _handleSlotchangeLabelText: handleSlotchangeLabelText,\n      _slotHelperTextNode: slotHelperTextNode,\n      _slotLabelTextNode: slotLabelTextNode,\n    } = this;\n    const inline = type === DROPDOWN_TYPE.INLINE;\n    const selectedItemsCount = this.querySelectorAll(\n      (this.constructor as typeof BXDropdown).selectorItemSelected\n    ).length;\n    const classes = classMap({\n      [`${prefix}--dropdown`]: true,\n      [`${prefix}--list-box`]: true,\n      [`${prefix}--list-box--${colorScheme}`]: colorScheme,\n      [`${prefix}--list-box--disabled`]: disabled,\n      [`${prefix}--list-box--inline`]: inline,\n      [`${prefix}--list-box--expanded`]: open,\n      [`${prefix}--list-box--${size}`]: size,\n      [`${prefix}--dropdown--invalid`]: invalid,\n      [`${prefix}--dropdown--inline`]: inline,\n      [`${prefix}--dropdown--selected`]: selectedItemsCount > 0,\n    });\n    const labelClasses = classMap({\n      [`${prefix}--label`]: true,\n      [`${prefix}--label--disabled`]: disabled,\n    });\n    const helperClasses = classMap({\n      [`${prefix}--form__helper-text`]: true,\n      [`${prefix}--form__helper-text--disabled`]: disabled,\n    });\n    const iconContainerClasses = classMap({\n      [`${prefix}--list-box__menu-icon`]: true,\n      [`${prefix}--list-box__menu-icon--open`]: open,\n    });\n    const toggleLabel =\n      (open ? toggleLabelOpen : toggleLabelClosed) || undefined;\n    const hasHelperText =\n      helperText ||\n      (slotHelperTextNode && slotHelperTextNode.assignedNodes().length > 0);\n    const hasLabelText =\n      labelText ||\n      (slotLabelTextNode && slotLabelTextNode.assignedNodes().length > 0);\n    const helper = !invalid\n      ? html`\n          <div\n            part=\"helper-text\"\n            class=\"${helperClasses}\"\n            ?hidden=\"${inline || !hasHelperText}\">\n            <slot name=\"helper-text\" @slotchange=\"${handleSlotchangeHelperText}\"\n              >${helperText}</slot\n            >\n          </div>\n        `\n      : html`\n          <div part=\"validity-message\" class=${`${prefix}--form-requirement`}>\n            <slot name=\"validity-message\">${validityMessage}</slot>\n          </div>\n        `;\n    const validityIcon = !invalid\n      ? undefined\n      : WarningFilled16({\n          class: `${prefix}--list-box__invalid-icon`,\n          'aria-label': toggleLabel,\n        });\n    const menuBody = !open\n      ? undefined\n      : html`\n          <div\n            id=\"menu-body\"\n            part=\"menu-body\"\n            class=\"${prefix}--list-box__menu\"\n            role=\"listbox\"\n            tabindex=\"-1\">\n            <slot></slot>\n          </div>\n        `;\n    return html`\n      <label\n        part=\"label-text\"\n        class=\"${labelClasses}\"\n        ?hidden=\"${!hasLabelText}\">\n        <slot name=\"label-text\" @slotchange=\"${handleSlotchangeLabelText}\"\n          >${labelText}</slot\n        >\n      </label>\n      <div\n        role=\"listbox\"\n        class=\"${classes}\"\n        ?data-invalid=${invalid}\n        @click=${handleClickInner}\n        @keydown=${handleKeydownInner}\n        @keypress=${handleKeypressInner}>\n        ${validityIcon}\n        <div\n          part=\"trigger-button\"\n          role=\"${ifDefined(!shouldTriggerBeFocusable ? undefined : 'button')}\"\n          class=\"${prefix}--list-box__field\"\n          tabindex=\"${ifDefined(!shouldTriggerBeFocusable ? undefined : '0')}\"\n          aria-labelledby=\"trigger-label\"\n          aria-expanded=\"${String(open)}\"\n          aria-haspopup=\"listbox\"\n          aria-owns=\"menu-body\"\n          aria-controls=\"menu-body\">\n          ${this._renderPrecedingTriggerContent()}${this._renderTriggerContent()}${this._renderFollowingTriggerContent()}\n          <div class=\"${iconContainerClasses}\">\n            ${ChevronDown16({ 'aria-label': toggleLabel })}\n          </div>\n        </div>\n        ${menuBody}\n      </div>\n      ${helper}\n      <div\n        class=\"${prefix}--assistive-text\"\n        role=\"status\"\n        aria-live=\"assertive\"\n        aria-relevant=\"additions text\">\n        ${assistiveStatusText}\n      </div>\n    `;\n  }\n\n  /**\n   * Symbols of keys that triggers opening/closing menu and selecting/deselecting menu item.\n   */\n  static TRIGGER_KEYS = new Set([' ', 'Enter']);\n\n  /**\n   * A selector that will return highlighted items.\n   */\n  static get selectorItemHighlighted() {\n    return `${prefix}-dropdown-item[highlighted]`;\n  }\n\n  /**\n   * A selector that will return dropdown items.\n   */\n  static get selectorItem() {\n    return `${prefix}-dropdown-item`;\n  }\n\n  /**\n   * A selector that will return selected items.\n   */\n  static get selectorItemSelected() {\n    return `${prefix}-dropdown-item[selected]`;\n  }\n\n  /**\n   * The name of the custom event fired before a dropdown item is selected upon a user gesture.\n   * Cancellation of this event stops changing the user-initiated selection.\n   */\n  static get eventBeforeSelect() {\n    return `${prefix}-dropdown-beingselected`;\n  }\n\n  /**\n   * The name of the custom event fired after a a dropdown item is selected upon a user gesture.\n   */\n  static get eventSelect() {\n    return `${prefix}-dropdown-selected`;\n  }\n\n  /**\n   * The name of the custom event fired before this dropdown item is being toggled upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of toggling this dropdown item.\n   */\n  static get eventBeforeToggle() {\n    return `${prefix}-dropdown-beingtoggled`;\n  }\n\n  /**\n   * The name of the custom event fired after this dropdown item is toggled upon a user gesture.\n   */\n  static get eventToggle() {\n    return `${prefix}-dropdown-toggled`;\n  }\n\n  static styles = styles;\n\n  /**\n   * @returns A action for dropdown for the given key symbol.\n   */\n  static getAction(key: string) {\n    if (key === 'Escape') {\n      return DROPDOWN_KEYBOARD_ACTION.CLOSING;\n    }\n    if (key in NAVIGATION_DIRECTION) {\n      return DROPDOWN_KEYBOARD_ACTION.NAVIGATING;\n    }\n    if (this.TRIGGER_KEYS.has(key)) {\n      return DROPDOWN_KEYBOARD_ACTION.TRIGGERING;\n    }\n    return DROPDOWN_KEYBOARD_ACTION.NONE;\n  }\n}\n\nexport default BXDropdown;\n"],"mappings":"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"}

package/es/components/file-uploader/drop-container.d.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * Copyright IBM Corp. 2020, 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.
@@ -10,6 +10,9 @@ import { LitElement } from 'lit-element';
 export { FORM_ELEMENT_COLOR_SCHEME as TILE_COLOR_SCHEME } from '../../globals/shared-enums';
 declare const BXFileDropContainer_base: {
     new (...args: any[]): {
+        /**
+         * The value to set to `event.dataTransfer.dropEffect`, keyed by the event nane.
+         */
         _handles: Set<import("../../globals/internal/handle").default>;
         connectedCallback(): void;
         disconnectedCallback(): void;

package/es/components/file-uploader/drop-container.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/file-uploader/drop-container.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAiC,UAAU,EAAE,MAAM,aAAa,CAAC;AAOxE,OAAO,EAAE,yBAAyB,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAY5F;;;;;GAKG;AACH,cACM,mBAAoB,SAAQ,wBAA6B;IAC7D;;OAEG;IACH,OAAO,CAAC,OAAO,CAAS;IAExB;;;;OAIG;IACH,OAAO,CAAC,aAAa;IAoBrB;;;;OAIG;IAKH,OAAO,CAAC,WAAW;IAiBnB;;;OAGG;IACH,OAAO,CAAC,SAAS;IA0BjB;;OAEG;IAEH,MAAM,SAAM;IAEZ;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,IAAI,SAAoB;IAExB,MAAM;IAkCN;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED;;OAEG;IACH,MAAM,KAAK,aAAa,WAEvB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,mBAAmB,CAAC","file":"drop-container.d.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 { classMap } from 'lit-html/directives/class-map';\nimport { html, property, customElement, LitElement } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport ifNonEmpty from '../../globals/directives/if-non-empty';\nimport styles from './file-uploader.scss';\n\nexport { FORM_ELEMENT_COLOR_SCHEME as TILE_COLOR_SCHEME } from '../../globals/shared-enums';\n\nconst { prefix } = settings;\n\n/**\n * The value to set to `event.dataTransfer.dropEffect`, keyed by the event nane.\n */\nconst dropEffects = {\n  dragover: 'copy',\n  dragleave: 'move',\n};\n\n/**\n * File drop container.\n *\n * @element bx-file-drop-container\n * @fires bx-file-drop-container-changed The custom event fired when there is a user gesture to select files to upload.\n */\n@customElement(`${prefix}-file-drop-container`)\nclass BXFileDropContainer extends HostListenerMixin(LitElement) {\n  /**\n   * `true` to show the active state of this UI.\n   */\n  private _active = false;\n\n  /**\n   * Handles user gesture to select files to upload.\n   *\n   * @param event The event.\n   */\n  private _handleChange(event: Event | DragEvent) {\n    const addedFiles = this._getFiles(event);\n    const { eventChange, selectorInput } = this\n      .constructor as typeof BXFileDropContainer;\n    this.dispatchEvent(\n      new CustomEvent(eventChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          addedFiles,\n        },\n      })\n    );\n\n    const fileInput = this?.shadowRoot?.querySelector(selectorInput);\n    if (fileInput) {\n      (fileInput as HTMLInputElement).value = ''; // carbon-web-components#904\n    }\n  }\n\n  /**\n   * Handles `dragover`, `dragleave` and `drop` events.\n   *\n   * @param event The event.\n   */\n  @HostListener('dragover')\n  @HostListener('dragleave')\n  @HostListener('drop')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleDrag(event: DragEvent) {\n    event.preventDefault(); // Prevents page navigation upon dropping\n    if (this.disabled) {\n      return;\n    }\n    const { dataTransfer, type } = event;\n    const dropEffect = dropEffects[type];\n    if (dataTransfer && dropEffect) {\n      dataTransfer.dropEffect = dropEffect;\n    }\n    this._active = type === 'dragover';\n    if (type === 'drop') {\n      this._handleChange(event);\n    }\n    this.requestUpdate();\n  }\n\n  /**\n   * @param event The event.\n   * @returns The list of files user chose to upload.\n   */\n  private _getFiles(event: Event | DragEvent) {\n    const { files } =\n      (event.type === 'drop'\n        ? (event as DragEvent).dataTransfer\n        : (event.target as HTMLInputElement)) ?? {};\n    const { accept } = this;\n    if (!accept || !/^(change|drop)$/.test(event.type)) {\n      return Array.from(files ?? []);\n    }\n    const acceptedTypes = new Set(accept.split(' '));\n    return Array.prototype.filter.call(\n      files,\n      ({ name, type: mimeType = '' }) => {\n        const fileExtensionRegExp = /\\.[^.]+$/;\n        const hasFileExtension = fileExtensionRegExp.test(name);\n        const [fileExtension] = !hasFileExtension\n          ? [undefined]\n          : fileExtensionRegExp.exec(name) ?? [];\n        return (\n          acceptedTypes.has(mimeType) ||\n          (fileExtension && acceptedTypes.has(fileExtension))\n        );\n      }\n    ) as File[];\n  }\n\n  /**\n   * The file types the file input should accept, separated by space.\n   */\n  @property()\n  accept = '';\n\n  /**\n   * `true` if this drop container should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * `true` if this drop container should accept more than one files at once.\n   * Note that even with `false` set here, user _can_ select multiple files one by one.\n   */\n  @property({ type: Boolean, reflect: true })\n  multiple = false;\n\n  /**\n   * The shadow DOM slot to put this drop container in.\n   */\n  @property({ reflect: true })\n  slot = 'drop-container';\n\n  render() {\n    const {\n      accept,\n      disabled,\n      multiple,\n      _active: active,\n      _handleChange: handleChange,\n    } = this;\n    const labelClasses = classMap({\n      [`${prefix}--file-browse-btn`]: true,\n      [`${prefix}--file-browse-btn--disabled`]: disabled,\n    });\n    const dropareaClasses = classMap({\n      [`${prefix}--file__drop-container`]: true,\n      [`${prefix}--file__drop-container--drag-over`]: active,\n    });\n    return html`\n      <label class=\"${labelClasses}\" for=\"file\" tabindex=\"0\">\n        <div class=\"${dropareaClasses}\" role=\"button\">\n          <slot></slot>\n          <input\n            id=\"file\"\n            type=\"file\"\n            class=\"${prefix}--file-input\"\n            tabindex=\"-1\"\n            accept=\"${ifNonEmpty(accept)}\"\n            ?disabled=\"${disabled}\"\n            ?multiple=\"${multiple}\"\n            @change=\"${handleChange}\" />\n        </div>\n      </label>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired when there is a user gesture to select files to upload.\n   */\n  static get eventChange() {\n    return `${prefix}-file-drop-container-changed`;\n  }\n\n  /**\n   * A selector that will return the file `<input>`.\n   */\n  static get selectorInput() {\n    return `.${prefix}--file-input`;\n  }\n\n  static styles = styles;\n}\n\nexport default BXFileDropContainer;\n"]}
+{"version":3,"sources":["components/file-uploader/drop-container.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAkB,UAAU,EAAE,MAAM,aAAa,CAAC;AAQzD,OAAO,EAAE,yBAAyB,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;;;QAI5F;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMH;;;;;GAKG;AACH,cACM,mBAAoB,SAAQ,wBAA6B;IAC7D;;OAEG;IACH,OAAO,CAAC,OAAO,CAAS;IAExB;;;;OAIG;IACH,OAAO,CAAC,aAAa;IAoBrB;;;;OAIG;IAKH,OAAO,CAAC,WAAW;IAiBnB;;;OAGG;IACH,OAAO,CAAC,SAAS;IA0BjB;;OAEG;IAEH,MAAM,SAAM;IAEZ;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,IAAI,SAAoB;IAExB,MAAM;IAkCN;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED;;OAEG;IACH,MAAM,KAAK,aAAa,WAEvB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,mBAAmB,CAAC","file":"drop-container.d.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 { classMap } from 'lit-html/directives/class-map';\nimport { html, property, LitElement } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport ifNonEmpty from '../../globals/directives/if-non-empty';\nimport styles from './file-uploader.scss';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { FORM_ELEMENT_COLOR_SCHEME as TILE_COLOR_SCHEME } from '../../globals/shared-enums';\n\nconst { prefix } = settings;\n\n/**\n * The value to set to `event.dataTransfer.dropEffect`, keyed by the event nane.\n */\nconst dropEffects = {\n  dragover: 'copy',\n  dragleave: 'move',\n};\n\n/**\n * File drop container.\n *\n * @element bx-file-drop-container\n * @fires bx-file-drop-container-changed The custom event fired when there is a user gesture to select files to upload.\n */\n@customElement(`${prefix}-file-drop-container`)\nclass BXFileDropContainer extends HostListenerMixin(LitElement) {\n  /**\n   * `true` to show the active state of this UI.\n   */\n  private _active = false;\n\n  /**\n   * Handles user gesture to select files to upload.\n   *\n   * @param event The event.\n   */\n  private _handleChange(event: Event | DragEvent) {\n    const addedFiles = this._getFiles(event);\n    const { eventChange, selectorInput } = this\n      .constructor as typeof BXFileDropContainer;\n    this.dispatchEvent(\n      new CustomEvent(eventChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          addedFiles,\n        },\n      })\n    );\n\n    const fileInput = this?.shadowRoot?.querySelector(selectorInput);\n    if (fileInput) {\n      (fileInput as HTMLInputElement).value = ''; // carbon-web-components#904\n    }\n  }\n\n  /**\n   * Handles `dragover`, `dragleave` and `drop` events.\n   *\n   * @param event The event.\n   */\n  @HostListener('dragover')\n  @HostListener('dragleave')\n  @HostListener('drop')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleDrag(event: DragEvent) {\n    event.preventDefault(); // Prevents page navigation upon dropping\n    if (this.disabled) {\n      return;\n    }\n    const { dataTransfer, type } = event;\n    const dropEffect = dropEffects[type];\n    if (dataTransfer && dropEffect) {\n      dataTransfer.dropEffect = dropEffect;\n    }\n    this._active = type === 'dragover';\n    if (type === 'drop') {\n      this._handleChange(event);\n    }\n    this.requestUpdate();\n  }\n\n  /**\n   * @param event The event.\n   * @returns The list of files user chose to upload.\n   */\n  private _getFiles(event: Event | DragEvent) {\n    const { files } =\n      (event.type === 'drop'\n        ? (event as DragEvent).dataTransfer\n        : (event.target as HTMLInputElement)) ?? {};\n    const { accept } = this;\n    if (!accept || !/^(change|drop)$/.test(event.type)) {\n      return Array.from(files ?? []);\n    }\n    const acceptedTypes = new Set(accept.split(' '));\n    return Array.prototype.filter.call(\n      files,\n      ({ name, type: mimeType = '' }) => {\n        const fileExtensionRegExp = /\\.[^.]+$/;\n        const hasFileExtension = fileExtensionRegExp.test(name);\n        const [fileExtension] = !hasFileExtension\n          ? [undefined]\n          : fileExtensionRegExp.exec(name) ?? [];\n        return (\n          acceptedTypes.has(mimeType) ||\n          (fileExtension && acceptedTypes.has(fileExtension))\n        );\n      }\n    ) as File[];\n  }\n\n  /**\n   * The file types the file input should accept, separated by space.\n   */\n  @property()\n  accept = '';\n\n  /**\n   * `true` if this drop container should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * `true` if this drop container should accept more than one files at once.\n   * Note that even with `false` set here, user _can_ select multiple files one by one.\n   */\n  @property({ type: Boolean, reflect: true })\n  multiple = false;\n\n  /**\n   * The shadow DOM slot to put this drop container in.\n   */\n  @property({ reflect: true })\n  slot = 'drop-container';\n\n  render() {\n    const {\n      accept,\n      disabled,\n      multiple,\n      _active: active,\n      _handleChange: handleChange,\n    } = this;\n    const labelClasses = classMap({\n      [`${prefix}--file-browse-btn`]: true,\n      [`${prefix}--file-browse-btn--disabled`]: disabled,\n    });\n    const dropareaClasses = classMap({\n      [`${prefix}--file__drop-container`]: true,\n      [`${prefix}--file__drop-container--drag-over`]: active,\n    });\n    return html`\n      <label class=\"${labelClasses}\" for=\"file\" tabindex=\"0\">\n        <div class=\"${dropareaClasses}\" role=\"button\">\n          <slot></slot>\n          <input\n            id=\"file\"\n            type=\"file\"\n            class=\"${prefix}--file-input\"\n            tabindex=\"-1\"\n            accept=\"${ifNonEmpty(accept)}\"\n            ?disabled=\"${disabled}\"\n            ?multiple=\"${multiple}\"\n            @change=\"${handleChange}\" />\n        </div>\n      </label>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired when there is a user gesture to select files to upload.\n   */\n  static get eventChange() {\n    return `${prefix}-file-drop-container-changed`;\n  }\n\n  /**\n   * A selector that will return the file `<input>`.\n   */\n  static get selectorInput() {\n    return `.${prefix}--file-input`;\n  }\n\n  static styles = styles;\n}\n\nexport default BXFileDropContainer;\n"]}

package/es/components/file-uploader/drop-container.js

@@ -4,19 +4,20 @@ let _ = t => t,
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * Copyright IBM Corp. 2020, 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 { classMap } from 'lit-html/directives/class-map';
-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 HostListenerMixin from '../../globals/mixins/host-listener';
 import HostListener from '../../globals/decorators/host-listener';
 import ifNonEmpty from '../../globals/directives/if-non-empty';
 import styles from "././file-uploader.css.js";
+import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 export { FORM_ELEMENT_COLOR_SCHEME as TILE_COLOR_SCHEME } from '../../globals/shared-enums';
 const {
   prefix

package/es/components/file-uploader/drop-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"drop-container.js","names":["classMap","html","property","customElement","LitElement","settings","HostListenerMixin","HostListener","ifNonEmpty","styles","FORM_ELEMENT_COLOR_SCHEME","TILE_COLOR_SCHEME","prefix","dropEffects","dragover","dragleave","BXFileDropContainer","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","key","value","_handleChange","event","_this$shadowRoot","addedFiles","_getFiles","eventChange","selectorInput","dispatchEvent","CustomEvent","bubbles","composed","detail","fileInput","shadowRoot","querySelector","decorators","_handleDrag","preventDefault","disabled","dataTransfer","type","dropEffect","_active","requestUpdate","_ref","files","target","accept","test","Array","from","acceptedTypes","Set","split","prototype","filter","call","name","mimeType","_fileExtensionRegExp$","fileExtensionRegExp","hasFileExtension","fileExtension","undefined","exec","has","Boolean","reflect","render","multiple","active","handleChange","labelClasses","dropareaClasses","_t","_","static"],"sources":["components/file-uploader/drop-container.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 { classMap } from 'lit-html/directives/class-map';\nimport { html, property, customElement, LitElement } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport ifNonEmpty from '../../globals/directives/if-non-empty';\nimport styles from './file-uploader.scss';\n\nexport { FORM_ELEMENT_COLOR_SCHEME as TILE_COLOR_SCHEME } from '../../globals/shared-enums';\n\nconst { prefix } = settings;\n\n/**\n * The value to set to `event.dataTransfer.dropEffect`, keyed by the event nane.\n */\nconst dropEffects = {\n  dragover: 'copy',\n  dragleave: 'move',\n};\n\n/**\n * File drop container.\n *\n * @element bx-file-drop-container\n * @fires bx-file-drop-container-changed The custom event fired when there is a user gesture to select files to upload.\n */\n@customElement(`${prefix}-file-drop-container`)\nclass BXFileDropContainer extends HostListenerMixin(LitElement) {\n  /**\n   * `true` to show the active state of this UI.\n   */\n  private _active = false;\n\n  /**\n   * Handles user gesture to select files to upload.\n   *\n   * @param event The event.\n   */\n  private _handleChange(event: Event | DragEvent) {\n    const addedFiles = this._getFiles(event);\n    const { eventChange, selectorInput } = this\n      .constructor as typeof BXFileDropContainer;\n    this.dispatchEvent(\n      new CustomEvent(eventChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          addedFiles,\n        },\n      })\n    );\n\n    const fileInput = this?.shadowRoot?.querySelector(selectorInput);\n    if (fileInput) {\n      (fileInput as HTMLInputElement).value = ''; // carbon-web-components#904\n    }\n  }\n\n  /**\n   * Handles `dragover`, `dragleave` and `drop` events.\n   *\n   * @param event The event.\n   */\n  @HostListener('dragover')\n  @HostListener('dragleave')\n  @HostListener('drop')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleDrag(event: DragEvent) {\n    event.preventDefault(); // Prevents page navigation upon dropping\n    if (this.disabled) {\n      return;\n    }\n    const { dataTransfer, type } = event;\n    const dropEffect = dropEffects[type];\n    if (dataTransfer && dropEffect) {\n      dataTransfer.dropEffect = dropEffect;\n    }\n    this._active = type === 'dragover';\n    if (type === 'drop') {\n      this._handleChange(event);\n    }\n    this.requestUpdate();\n  }\n\n  /**\n   * @param event The event.\n   * @returns The list of files user chose to upload.\n   */\n  private _getFiles(event: Event | DragEvent) {\n    const { files } =\n      (event.type === 'drop'\n        ? (event as DragEvent).dataTransfer\n        : (event.target as HTMLInputElement)) ?? {};\n    const { accept } = this;\n    if (!accept || !/^(change|drop)$/.test(event.type)) {\n      return Array.from(files ?? []);\n    }\n    const acceptedTypes = new Set(accept.split(' '));\n    return Array.prototype.filter.call(\n      files,\n      ({ name, type: mimeType = '' }) => {\n        const fileExtensionRegExp = /\\.[^.]+$/;\n        const hasFileExtension = fileExtensionRegExp.test(name);\n        const [fileExtension] = !hasFileExtension\n          ? [undefined]\n          : fileExtensionRegExp.exec(name) ?? [];\n        return (\n          acceptedTypes.has(mimeType) ||\n          (fileExtension && acceptedTypes.has(fileExtension))\n        );\n      }\n    ) as File[];\n  }\n\n  /**\n   * The file types the file input should accept, separated by space.\n   */\n  @property()\n  accept = '';\n\n  /**\n   * `true` if this drop container should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * `true` if this drop container should accept more than one files at once.\n   * Note that even with `false` set here, user _can_ select multiple files one by one.\n   */\n  @property({ type: Boolean, reflect: true })\n  multiple = false;\n\n  /**\n   * The shadow DOM slot to put this drop container in.\n   */\n  @property({ reflect: true })\n  slot = 'drop-container';\n\n  render() {\n    const {\n      accept,\n      disabled,\n      multiple,\n      _active: active,\n      _handleChange: handleChange,\n    } = this;\n    const labelClasses = classMap({\n      [`${prefix}--file-browse-btn`]: true,\n      [`${prefix}--file-browse-btn--disabled`]: disabled,\n    });\n    const dropareaClasses = classMap({\n      [`${prefix}--file__drop-container`]: true,\n      [`${prefix}--file__drop-container--drag-over`]: active,\n    });\n    return html`\n      <label class=\"${labelClasses}\" for=\"file\" tabindex=\"0\">\n        <div class=\"${dropareaClasses}\" role=\"button\">\n          <slot></slot>\n          <input\n            id=\"file\"\n            type=\"file\"\n            class=\"${prefix}--file-input\"\n            tabindex=\"-1\"\n            accept=\"${ifNonEmpty(accept)}\"\n            ?disabled=\"${disabled}\"\n            ?multiple=\"${multiple}\"\n            @change=\"${handleChange}\" />\n        </div>\n      </label>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired when there is a user gesture to select files to upload.\n   */\n  static get eventChange() {\n    return `${prefix}-file-drop-container-changed`;\n  }\n\n  /**\n   * A selector that will return the file `<input>`.\n   */\n  static get selectorInput() {\n    return `.${prefix}--file-input`;\n  }\n\n  static styles = styles;\n}\n\nexport default BXFileDropContainer;\n"],"mappings":"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"}
+{"version":3,"file":"drop-container.js","names":["classMap","html","property","LitElement","settings","HostListenerMixin","HostListener","ifNonEmpty","styles","carbonElement","customElement","FORM_ELEMENT_COLOR_SCHEME","TILE_COLOR_SCHEME","prefix","dropEffects","dragover","dragleave","BXFileDropContainer","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","key","value","_handleChange","event","_this$shadowRoot","addedFiles","_getFiles","eventChange","selectorInput","dispatchEvent","CustomEvent","bubbles","composed","detail","fileInput","shadowRoot","querySelector","decorators","_handleDrag","preventDefault","disabled","dataTransfer","type","dropEffect","_active","requestUpdate","_ref","files","target","accept","test","Array","from","acceptedTypes","Set","split","prototype","filter","call","name","mimeType","_fileExtensionRegExp$","fileExtensionRegExp","hasFileExtension","fileExtension","undefined","exec","has","Boolean","reflect","render","multiple","active","handleChange","labelClasses","dropareaClasses","_t","_","static"],"sources":["components/file-uploader/drop-container.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 { classMap } from 'lit-html/directives/class-map';\nimport { html, property, LitElement } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport ifNonEmpty from '../../globals/directives/if-non-empty';\nimport styles from './file-uploader.scss';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { FORM_ELEMENT_COLOR_SCHEME as TILE_COLOR_SCHEME } from '../../globals/shared-enums';\n\nconst { prefix } = settings;\n\n/**\n * The value to set to `event.dataTransfer.dropEffect`, keyed by the event nane.\n */\nconst dropEffects = {\n  dragover: 'copy',\n  dragleave: 'move',\n};\n\n/**\n * File drop container.\n *\n * @element bx-file-drop-container\n * @fires bx-file-drop-container-changed The custom event fired when there is a user gesture to select files to upload.\n */\n@customElement(`${prefix}-file-drop-container`)\nclass BXFileDropContainer extends HostListenerMixin(LitElement) {\n  /**\n   * `true` to show the active state of this UI.\n   */\n  private _active = false;\n\n  /**\n   * Handles user gesture to select files to upload.\n   *\n   * @param event The event.\n   */\n  private _handleChange(event: Event | DragEvent) {\n    const addedFiles = this._getFiles(event);\n    const { eventChange, selectorInput } = this\n      .constructor as typeof BXFileDropContainer;\n    this.dispatchEvent(\n      new CustomEvent(eventChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          addedFiles,\n        },\n      })\n    );\n\n    const fileInput = this?.shadowRoot?.querySelector(selectorInput);\n    if (fileInput) {\n      (fileInput as HTMLInputElement).value = ''; // carbon-web-components#904\n    }\n  }\n\n  /**\n   * Handles `dragover`, `dragleave` and `drop` events.\n   *\n   * @param event The event.\n   */\n  @HostListener('dragover')\n  @HostListener('dragleave')\n  @HostListener('drop')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleDrag(event: DragEvent) {\n    event.preventDefault(); // Prevents page navigation upon dropping\n    if (this.disabled) {\n      return;\n    }\n    const { dataTransfer, type } = event;\n    const dropEffect = dropEffects[type];\n    if (dataTransfer && dropEffect) {\n      dataTransfer.dropEffect = dropEffect;\n    }\n    this._active = type === 'dragover';\n    if (type === 'drop') {\n      this._handleChange(event);\n    }\n    this.requestUpdate();\n  }\n\n  /**\n   * @param event The event.\n   * @returns The list of files user chose to upload.\n   */\n  private _getFiles(event: Event | DragEvent) {\n    const { files } =\n      (event.type === 'drop'\n        ? (event as DragEvent).dataTransfer\n        : (event.target as HTMLInputElement)) ?? {};\n    const { accept } = this;\n    if (!accept || !/^(change|drop)$/.test(event.type)) {\n      return Array.from(files ?? []);\n    }\n    const acceptedTypes = new Set(accept.split(' '));\n    return Array.prototype.filter.call(\n      files,\n      ({ name, type: mimeType = '' }) => {\n        const fileExtensionRegExp = /\\.[^.]+$/;\n        const hasFileExtension = fileExtensionRegExp.test(name);\n        const [fileExtension] = !hasFileExtension\n          ? [undefined]\n          : fileExtensionRegExp.exec(name) ?? [];\n        return (\n          acceptedTypes.has(mimeType) ||\n          (fileExtension && acceptedTypes.has(fileExtension))\n        );\n      }\n    ) as File[];\n  }\n\n  /**\n   * The file types the file input should accept, separated by space.\n   */\n  @property()\n  accept = '';\n\n  /**\n   * `true` if this drop container should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * `true` if this drop container should accept more than one files at once.\n   * Note that even with `false` set here, user _can_ select multiple files one by one.\n   */\n  @property({ type: Boolean, reflect: true })\n  multiple = false;\n\n  /**\n   * The shadow DOM slot to put this drop container in.\n   */\n  @property({ reflect: true })\n  slot = 'drop-container';\n\n  render() {\n    const {\n      accept,\n      disabled,\n      multiple,\n      _active: active,\n      _handleChange: handleChange,\n    } = this;\n    const labelClasses = classMap({\n      [`${prefix}--file-browse-btn`]: true,\n      [`${prefix}--file-browse-btn--disabled`]: disabled,\n    });\n    const dropareaClasses = classMap({\n      [`${prefix}--file__drop-container`]: true,\n      [`${prefix}--file__drop-container--drag-over`]: active,\n    });\n    return html`\n      <label class=\"${labelClasses}\" for=\"file\" tabindex=\"0\">\n        <div class=\"${dropareaClasses}\" role=\"button\">\n          <slot></slot>\n          <input\n            id=\"file\"\n            type=\"file\"\n            class=\"${prefix}--file-input\"\n            tabindex=\"-1\"\n            accept=\"${ifNonEmpty(accept)}\"\n            ?disabled=\"${disabled}\"\n            ?multiple=\"${multiple}\"\n            @change=\"${handleChange}\" />\n        </div>\n      </label>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired when there is a user gesture to select files to upload.\n   */\n  static get eventChange() {\n    return `${prefix}-file-drop-container-changed`;\n  }\n\n  /**\n   * A selector that will return the file `<input>`.\n   */\n  static get selectorInput() {\n    return `.${prefix}--file-input`;\n  }\n\n  static styles = styles;\n}\n\nexport default BXFileDropContainer;\n"],"mappings":"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"}

package/es/components/file-uploader/file-uploader-item.d.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * Copyright IBM Corp. 2020, 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.