@carbon/web-components 2.0.0-beta.1 → 2.0.0-beta.2

package/es/components/date-picker/focus-plugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"focus-plugin.js","names":["on","config","fp","focusCalendar","calendarContainer","selectedDateElem","todayDateElem","focus","handleBlur","target","relatedTarget","isOpen","contains","Promise","resolve","then","rootNode","getRootNode","nodeType","Node","DOCUMENT_NODE","DOCUMENT_FRAGMENT_NODE","_lastFocusInput","inputTo","inputFrom","close","handleInputKeydown","event","key","preventDefault","open","setTimeout","handleInputFocus","release","_hCDSCEDatePickerFocusPluginBlur","_hCDSCEDatePickerFocusPluginFocusTo","_hCDSCEDatePickerFocusPluginFocusFrom","_hCDSCEDatePickerFocusPluginKeydownTo","_hCDSCEDatePickerFocusPluginKeydownFrom","init","register","loadedPlugins","push","onReady","onDestroy"],"sources":["components/date-picker/focus-plugin.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 { Instance as FlatpickrInstance } from 'flatpickr/dist/types/instance';\nimport { Plugin } from 'flatpickr/dist/types/options';\nimport on from 'carbon-components/es/globals/js/misc/on';\nimport Handle from '../../globals/internal/handle';\nimport CDSDatePickerInput from './date-picker-input';\n\n/**\n * The configuration for the Flatpickr plugin to set CSS classes specific to this design system.\n */\nexport interface DatePickerFocusPluginConfig {\n  /**\n   * The input box to enter starting date.\n   */\n  inputFrom: CDSDatePickerInput;\n\n  /**\n   * The input box to enter end date.\n   */\n  inputTo?: CDSDatePickerInput;\n}\n\n/**\n * `FlatpickrInstance` with additional properties used for `carbonFlatpickrFocusPlugin`.\n */\nexport interface ExtendedFlatpickrInstanceFocusPlugin\n  extends FlatpickrInstance {\n  /**\n   * The handle for `blur` event handler in calendar dropdown.\n   */\n  _hCDSCEDatePickerFocusPluginBlur?: Handle | null;\n\n  /**\n   * The handle for `keydown` event handler in the `<input>` for the starting date.\n   */\n  _hCDSCEDatePickerFocusPluginKeydownFrom?: Handle | null;\n\n  /**\n   * The handle for `keydown` event handler in the `<input>` for the end date.\n   */\n  _hCDSCEDatePickerFocusPluginKeydownTo?: Handle | null;\n\n  /**\n   * The handle for `focus` event handler in the `<input>` for the starting date.\n   */\n  _hCDSCEDatePickerFocusPluginFocusFrom?: Handle | null;\n\n  /**\n   * The handle for `focus` event handler in the `<input>` for the end date.\n   */\n  _hCDSCEDatePickerFocusPluginFocusTo?: Handle | null;\n\n  /**\n   * Lastly focused `<input>` for starting/end date.\n   */\n  _lastFocusInput?: HTMLInputElement;\n}\n\n/**\n * @param config Plugin configuration.\n * @returns A Flatpickr plugin to manage focus to align with the UX pattern in our design system.\n */\nexport default (config: DatePickerFocusPluginConfig): Plugin =>\n  (fp: ExtendedFlatpickrInstanceFocusPlugin) => {\n    /**\n     * Focuses on calendar dropdown.\n     */\n    const focusCalendar = () => {\n      const { calendarContainer, selectedDateElem, todayDateElem } = fp;\n      (selectedDateElem || todayDateElem || calendarContainer).focus();\n    };\n\n    /**\n     * Handles `blur` event to move the focus back to the `<input>`.\n     */\n    const handleBlur = ({ target, relatedTarget }: FocusEvent) => {\n      // Obtains `beingUpdated` up-front because it'll be flushed out shortly\n      const { calendarContainer, isOpen } = fp;\n      if (\n        isOpen &&\n        calendarContainer.contains(target as Node) &&\n        !calendarContainer.contains(relatedTarget as Node)\n      ) {\n        Promise.resolve().then(() => {\n          const rootNode = (target as Node).getRootNode();\n          // This `blur` event handler can be called from Flatpickr's code cleaning up calenar dropdown's DOM,\n          // and changing focus in such condition causes removing an orphaned DOM node,\n          // because Flatpickr redraws the calendar dropdown when the `<input>` gets focus.\n          if (\n            rootNode.nodeType === Node.DOCUMENT_NODE ||\n            rootNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE\n          ) {\n            if (fp._lastFocusInput === config.inputTo) {\n              config.inputTo!.focus();\n            } else {\n              config.inputFrom.focus();\n            }\n            // Closing after moving focus. Reversing the order will cause re-opening calendar dropdown upon focusing\n            fp.close();\n          }\n        });\n      }\n    };\n\n    /**\n     * Handles `keydown` event to move focus on calendar dropdown.\n     */\n    const handleInputKeydown = (event: KeyboardEvent) => {\n      const { key } = event;\n      if (key === 'ArrowDown' || key === 'Down' || key === 'Enter') {\n        event.preventDefault();\n        fp.open();\n        if (key !== 'Enter') {\n          focusCalendar();\n        } else {\n          // Hitting Enter key blurs the `<input>`, causing any element to lose focus\n          setTimeout(focusCalendar, 0);\n        }\n      }\n    };\n\n    /**\n     * Handles `focus` event on `<input>` for starting/end date to track the lastly focused one.\n     */\n    const handleInputFocus = ({ target }: FocusEvent) => {\n      fp._lastFocusInput = target as HTMLInputElement;\n    };\n\n    /**\n     * Releases event listeners used in this Flatpickr plugin.\n     */\n    const release = () => {\n      if (fp._hCDSCEDatePickerFocusPluginBlur) {\n        fp._hCDSCEDatePickerFocusPluginBlur =\n          fp._hCDSCEDatePickerFocusPluginBlur.release();\n      }\n      if (fp._hCDSCEDatePickerFocusPluginFocusTo) {\n        fp._hCDSCEDatePickerFocusPluginFocusTo =\n          fp._hCDSCEDatePickerFocusPluginFocusTo.release();\n      }\n      if (fp._hCDSCEDatePickerFocusPluginFocusFrom) {\n        fp._hCDSCEDatePickerFocusPluginFocusFrom =\n          fp._hCDSCEDatePickerFocusPluginFocusFrom.release();\n      }\n      if (fp._hCDSCEDatePickerFocusPluginKeydownTo) {\n        fp._hCDSCEDatePickerFocusPluginKeydownTo =\n          fp._hCDSCEDatePickerFocusPluginKeydownTo.release();\n      }\n      if (fp._hCDSCEDatePickerFocusPluginKeydownFrom) {\n        fp._hCDSCEDatePickerFocusPluginKeydownFrom =\n          fp._hCDSCEDatePickerFocusPluginKeydownFrom.release();\n      }\n    };\n\n    /**\n     * Sets up event listeners used for this Flatpickr plugin.\n     */\n    const init = () => {\n      release();\n      const { inputFrom, inputTo } = config;\n      fp._hCDSCEDatePickerFocusPluginBlur = on(\n        fp.calendarContainer,\n        'blur',\n        handleBlur,\n        true\n      );\n      fp._hCDSCEDatePickerFocusPluginKeydownFrom = on(\n        inputFrom,\n        'keydown',\n        handleInputKeydown\n      );\n      if (inputTo) {\n        fp._hCDSCEDatePickerFocusPluginKeydownTo = on(\n          inputTo,\n          'keydown',\n          handleInputKeydown\n        );\n      }\n      fp._hCDSCEDatePickerFocusPluginFocusFrom = on(\n        inputFrom,\n        'focus',\n        handleInputFocus\n      );\n      if (inputTo) {\n        fp._hCDSCEDatePickerFocusPluginFocusTo = on(\n          inputTo,\n          'focus',\n          handleInputFocus\n        );\n      }\n    };\n\n    /**\n     * Registers this Flatpickr plugin.\n     *\n     * @param calendar The Flatpickr instance.\n     */\n    const register = () => {\n      fp.loadedPlugins.push('carbonFlatpickrFocusPlugin');\n    };\n\n    return {\n      onReady: [register, init],\n      onDestroy: release,\n    };\n  };\n"],"mappings":"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"}
+{"version":3,"file":"focus-plugin.js","names":["on","config","fp","focusCalendar","calendarContainer","selectedDateElem","todayDateElem","focus","handleBlur","target","relatedTarget","isOpen","contains","Promise","resolve","then","rootNode","getRootNode","nodeType","Node","DOCUMENT_NODE","DOCUMENT_FRAGMENT_NODE","_lastFocusInput","inputTo","inputFrom","close","handleInputKeydown","event","key","preventDefault","open","setTimeout","handleInputFocus","release","_hCDSCEDatePickerFocusPluginBlur","_hCDSCEDatePickerFocusPluginFocusTo","_hCDSCEDatePickerFocusPluginFocusFrom","_hCDSCEDatePickerFocusPluginKeydownTo","_hCDSCEDatePickerFocusPluginKeydownFrom","init","register","loadedPlugins","push","onReady","onDestroy"],"sources":["components/date-picker/focus-plugin.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 { Instance as FlatpickrInstance } from 'flatpickr/dist/types/instance';\nimport { Plugin } from 'flatpickr/dist/types/options';\nimport on from '../../globals/mixins/on';\nimport Handle from '../../globals/internal/handle';\nimport CDSDatePickerInput from './date-picker-input';\n\n/**\n * The configuration for the Flatpickr plugin to set CSS classes specific to this design system.\n */\nexport interface DatePickerFocusPluginConfig {\n  /**\n   * The input box to enter starting date.\n   */\n  inputFrom: CDSDatePickerInput;\n\n  /**\n   * The input box to enter end date.\n   */\n  inputTo?: CDSDatePickerInput;\n}\n\n/**\n * `FlatpickrInstance` with additional properties used for `carbonFlatpickrFocusPlugin`.\n */\nexport interface ExtendedFlatpickrInstanceFocusPlugin\n  extends FlatpickrInstance {\n  /**\n   * The handle for `blur` event handler in calendar dropdown.\n   */\n  _hCDSCEDatePickerFocusPluginBlur?: Handle | null;\n\n  /**\n   * The handle for `keydown` event handler in the `<input>` for the starting date.\n   */\n  _hCDSCEDatePickerFocusPluginKeydownFrom?: Handle | null;\n\n  /**\n   * The handle for `keydown` event handler in the `<input>` for the end date.\n   */\n  _hCDSCEDatePickerFocusPluginKeydownTo?: Handle | null;\n\n  /**\n   * The handle for `focus` event handler in the `<input>` for the starting date.\n   */\n  _hCDSCEDatePickerFocusPluginFocusFrom?: Handle | null;\n\n  /**\n   * The handle for `focus` event handler in the `<input>` for the end date.\n   */\n  _hCDSCEDatePickerFocusPluginFocusTo?: Handle | null;\n\n  /**\n   * Lastly focused `<input>` for starting/end date.\n   */\n  _lastFocusInput?: HTMLInputElement;\n}\n\n/**\n * @param config Plugin configuration.\n * @returns A Flatpickr plugin to manage focus to align with the UX pattern in our design system.\n */\nexport default (config: DatePickerFocusPluginConfig): Plugin =>\n  (fp: ExtendedFlatpickrInstanceFocusPlugin) => {\n    /**\n     * Focuses on calendar dropdown.\n     */\n    const focusCalendar = () => {\n      const { calendarContainer, selectedDateElem, todayDateElem } = fp;\n      (selectedDateElem || todayDateElem || calendarContainer).focus();\n    };\n\n    /**\n     * Handles `blur` event to move the focus back to the `<input>`.\n     */\n    const handleBlur = ({ target, relatedTarget }: FocusEvent) => {\n      // Obtains `beingUpdated` up-front because it'll be flushed out shortly\n      const { calendarContainer, isOpen } = fp;\n      if (\n        isOpen &&\n        calendarContainer.contains(target as Node) &&\n        !calendarContainer.contains(relatedTarget as Node)\n      ) {\n        Promise.resolve().then(() => {\n          const rootNode = (target as Node).getRootNode();\n          // This `blur` event handler can be called from Flatpickr's code cleaning up calenar dropdown's DOM,\n          // and changing focus in such condition causes removing an orphaned DOM node,\n          // because Flatpickr redraws the calendar dropdown when the `<input>` gets focus.\n          if (\n            rootNode.nodeType === Node.DOCUMENT_NODE ||\n            rootNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE\n          ) {\n            if (fp._lastFocusInput === config.inputTo) {\n              config.inputTo!.focus();\n            } else {\n              config.inputFrom.focus();\n            }\n            // Closing after moving focus. Reversing the order will cause re-opening calendar dropdown upon focusing\n            fp.close();\n          }\n        });\n      }\n    };\n\n    /**\n     * Handles `keydown` event to move focus on calendar dropdown.\n     */\n    const handleInputKeydown = (event: KeyboardEvent) => {\n      const { key } = event;\n      if (key === 'ArrowDown' || key === 'Down' || key === 'Enter') {\n        event.preventDefault();\n        fp.open();\n        if (key !== 'Enter') {\n          focusCalendar();\n        } else {\n          // Hitting Enter key blurs the `<input>`, causing any element to lose focus\n          setTimeout(focusCalendar, 0);\n        }\n      }\n    };\n\n    /**\n     * Handles `focus` event on `<input>` for starting/end date to track the lastly focused one.\n     */\n    const handleInputFocus = ({ target }: FocusEvent) => {\n      fp._lastFocusInput = target as HTMLInputElement;\n    };\n\n    /**\n     * Releases event listeners used in this Flatpickr plugin.\n     */\n    const release = () => {\n      if (fp._hCDSCEDatePickerFocusPluginBlur) {\n        fp._hCDSCEDatePickerFocusPluginBlur =\n          fp._hCDSCEDatePickerFocusPluginBlur.release();\n      }\n      if (fp._hCDSCEDatePickerFocusPluginFocusTo) {\n        fp._hCDSCEDatePickerFocusPluginFocusTo =\n          fp._hCDSCEDatePickerFocusPluginFocusTo.release();\n      }\n      if (fp._hCDSCEDatePickerFocusPluginFocusFrom) {\n        fp._hCDSCEDatePickerFocusPluginFocusFrom =\n          fp._hCDSCEDatePickerFocusPluginFocusFrom.release();\n      }\n      if (fp._hCDSCEDatePickerFocusPluginKeydownTo) {\n        fp._hCDSCEDatePickerFocusPluginKeydownTo =\n          fp._hCDSCEDatePickerFocusPluginKeydownTo.release();\n      }\n      if (fp._hCDSCEDatePickerFocusPluginKeydownFrom) {\n        fp._hCDSCEDatePickerFocusPluginKeydownFrom =\n          fp._hCDSCEDatePickerFocusPluginKeydownFrom.release();\n      }\n    };\n\n    /**\n     * Sets up event listeners used for this Flatpickr plugin.\n     */\n    const init = () => {\n      release();\n      const { inputFrom, inputTo } = config;\n      fp._hCDSCEDatePickerFocusPluginBlur = on(\n        fp.calendarContainer,\n        'blur',\n        handleBlur,\n        true\n      );\n      fp._hCDSCEDatePickerFocusPluginKeydownFrom = on(\n        inputFrom,\n        'keydown',\n        handleInputKeydown\n      );\n      if (inputTo) {\n        fp._hCDSCEDatePickerFocusPluginKeydownTo = on(\n          inputTo,\n          'keydown',\n          handleInputKeydown\n        );\n      }\n      fp._hCDSCEDatePickerFocusPluginFocusFrom = on(\n        inputFrom,\n        'focus',\n        handleInputFocus\n      );\n      if (inputTo) {\n        fp._hCDSCEDatePickerFocusPluginFocusTo = on(\n          inputTo,\n          'focus',\n          handleInputFocus\n        );\n      }\n    };\n\n    /**\n     * Registers this Flatpickr plugin.\n     *\n     * @param calendar The Flatpickr instance.\n     */\n    const register = () => {\n      fp.loadedPlugins.push('carbonFlatpickrFocusPlugin');\n    };\n\n    return {\n      onReady: [register, init],\n      onDestroy: release,\n    };\n  };\n"],"mappings":"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"}

package/es/components/date-picker/shadow-dom-events-plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/date-picker/shadow-dom-events-plugin.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AAEtD,OAAO,MAAM,MAAM,+BAA+B,CAAC;AAGnD;;GAEG;AACH,MAAM,WAAW,8CACf,SAAQ,iBAAiB;IACzB;;OAEG;IACH,6CAA6C,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/D;AA6DD;;;;;GAKG;8BACgB,MAAM;AAAzB,wBA4FI","file":"shadow-dom-events-plugin.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 { Instance as FlatpickrInstance } from 'flatpickr/dist/types/instance';\nimport { Plugin } from 'flatpickr/dist/types/options';\nimport on from 'carbon-components/es/globals/js/misc/on';\nimport Handle from '../../globals/internal/handle';\nimport { find } from '../../globals/internal/collection-helpers';\n\n/**\n * `FlatpickrInstance` with additional properties used for `carbonFlatpickrShadowDOMEventsPlugin`.\n */\nexport interface ExtendedFlatpickrInstanceShadowDOMEventsPlugin\n  extends FlatpickrInstance {\n  /**\n   * The handle for `keydown` event handler in calendar dropdown.\n   */\n  _hCDSCEDatePickerShadowDOMEventsPluginKeydown?: Handle | null;\n}\n\n/**\n * The amount of days to adjust, keyed by the key code.\n */\nconst moveDateForKeys = {\n  ArrowLeft: -1,\n  Left: -1,\n  ArrowUp: -7,\n  Up: -7,\n  ArrowRight: 1,\n  Right: 1,\n  ArrowDown: 7,\n  Down: 7,\n};\n\n/**\n * The amount of months to adjust, keyed by the key code. Used with Ctrl modifier key.\n */\nconst moveMonthForKeys = {\n  ArrowLeft: -1,\n  Left: -1,\n  ArrowUp: -12,\n  Up: -12,\n  ArrowRight: 1,\n  Right: 1,\n  ArrowDown: 12,\n  Down: 12,\n};\n\n/**\n * The number of milliseconds per day.\n */\nconst MILLISECONDS_IN_DAY = 86400000;\n\n/**\n * Adjusts the date with the given amount of days.\n *\n * @param localDate The original date.\n * @param options The options.\n * @param [options.date=0] The amount of days to adjust.\n */\nconst adjustDate = (\n  localDate: Date,\n  { date: moveDate = 0 }: { date?: number }\n) => {\n  const utcDate = new Date(\n    Date.UTC(\n      localDate.getFullYear(),\n      localDate.getMonth(),\n      localDate.getDate()\n    ) +\n      moveDate * MILLISECONDS_IN_DAY\n  );\n  return new Date(\n    utcDate.getUTCFullYear(),\n    utcDate.getUTCMonth(),\n    utcDate.getUTCDate()\n  );\n};\n\n/**\n * @param config Plugin configuration.\n * @returns\n *   A Flatpickr plugin to handle events.\n *   Some event handlers in Flatpickr won't work is the calendar dropdown is put in shadow DOM, due to event retargetting.\n */\nexport default (): Plugin =>\n  (fp: ExtendedFlatpickrInstanceShadowDOMEventsPlugin) => {\n    const getDateElem = (localDate) =>\n      find(\n        fp.daysContainer!.firstElementChild!.children,\n        ({ dateObj }: any) => localDate.getTime() === dateObj.getTime()\n      );\n\n    /**\n     * Handles `keydown` event.\n     */\n    const handleKeydown = (event: KeyboardEvent) => {\n      const { ctrlKey, key, target } = event;\n      if (key === 'Enter') {\n        target!.dispatchEvent(\n          Object.assign(new CustomEvent('mousedown', { bubbles: true }), {\n            which: 1,\n          })\n        );\n      } else if (!ctrlKey && key in moveDateForKeys) {\n        const { dateObj } = target as any;\n        const movedDate = adjustDate(dateObj, { date: moveDateForKeys[key] });\n        const movedDateElem = getDateElem(movedDate);\n        if (movedDateElem) {\n          movedDateElem.focus();\n        } else {\n          const innerDaysContainer = fp.daysContainer!.firstElementChild!;\n          if (\n            movedDate.getTime() <\n            (innerDaysContainer.firstElementChild as any).dateObj.getTime()\n          ) {\n            fp.changeMonth(-1);\n            // `fp.daysContainer` is updated by `fp.changeMonth()`\n            (\n              fp.daysContainer!.firstElementChild!\n                .lastElementChild as HTMLElement\n            ).focus();\n          } else if (\n            movedDate.getTime() >\n            (innerDaysContainer.lastElementChild as any).dateObj.getTime()\n          ) {\n            fp.changeMonth(1);\n            // `fp.daysContainer` is updated by `fp.changeMonth()`\n            (\n              fp.daysContainer!.firstElementChild!\n                .firstElementChild as HTMLElement\n            ).focus();\n          }\n        }\n        event.preventDefault();\n      } else if (ctrlKey && key in moveMonthForKeys) {\n        fp.changeMonth(moveMonthForKeys[key]);\n        (\n          fp.daysContainer!.firstElementChild!.firstElementChild as HTMLElement\n        ).focus();\n        event.preventDefault();\n      }\n    };\n\n    /**\n     * Releases event listeners used in this Flatpickr plugin.\n     */\n    const release = () => {\n      if (fp._hCDSCEDatePickerShadowDOMEventsPluginKeydown) {\n        fp._hCDSCEDatePickerShadowDOMEventsPluginKeydown =\n          fp._hCDSCEDatePickerShadowDOMEventsPluginKeydown.release();\n      }\n    };\n\n    /**\n     * Sets up event listeners used for this Flatpickr plugin.\n     */\n    const init = () => {\n      release();\n      fp._hCDSCEDatePickerShadowDOMEventsPluginKeydown = on(\n        fp.calendarContainer,\n        'keydown',\n        handleKeydown\n      );\n    };\n\n    /**\n     * Registers this Flatpickr plugin.\n     */\n    const register = () => {\n      fp.loadedPlugins.push('carbonFlatpickrShadowDOMEventsPlugin');\n    };\n\n    return {\n      onReady: [register, init],\n      onDestroy: [release],\n    };\n  };\n"]}
+{"version":3,"sources":["components/date-picker/shadow-dom-events-plugin.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AAEtD,OAAO,MAAM,MAAM,+BAA+B,CAAC;AAGnD;;GAEG;AACH,MAAM,WAAW,8CACf,SAAQ,iBAAiB;IACzB;;OAEG;IACH,6CAA6C,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/D;AA6DD;;;;;GAKG;8BACgB,MAAM;AAAzB,wBA4FI","file":"shadow-dom-events-plugin.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 { Instance as FlatpickrInstance } from 'flatpickr/dist/types/instance';\nimport { Plugin } from 'flatpickr/dist/types/options';\nimport on from '../../globals/mixins/on';\nimport Handle from '../../globals/internal/handle';\nimport { find } from '../../globals/internal/collection-helpers';\n\n/**\n * `FlatpickrInstance` with additional properties used for `carbonFlatpickrShadowDOMEventsPlugin`.\n */\nexport interface ExtendedFlatpickrInstanceShadowDOMEventsPlugin\n  extends FlatpickrInstance {\n  /**\n   * The handle for `keydown` event handler in calendar dropdown.\n   */\n  _hCDSCEDatePickerShadowDOMEventsPluginKeydown?: Handle | null;\n}\n\n/**\n * The amount of days to adjust, keyed by the key code.\n */\nconst moveDateForKeys = {\n  ArrowLeft: -1,\n  Left: -1,\n  ArrowUp: -7,\n  Up: -7,\n  ArrowRight: 1,\n  Right: 1,\n  ArrowDown: 7,\n  Down: 7,\n};\n\n/**\n * The amount of months to adjust, keyed by the key code. Used with Ctrl modifier key.\n */\nconst moveMonthForKeys = {\n  ArrowLeft: -1,\n  Left: -1,\n  ArrowUp: -12,\n  Up: -12,\n  ArrowRight: 1,\n  Right: 1,\n  ArrowDown: 12,\n  Down: 12,\n};\n\n/**\n * The number of milliseconds per day.\n */\nconst MILLISECONDS_IN_DAY = 86400000;\n\n/**\n * Adjusts the date with the given amount of days.\n *\n * @param localDate The original date.\n * @param options The options.\n * @param [options.date=0] The amount of days to adjust.\n */\nconst adjustDate = (\n  localDate: Date,\n  { date: moveDate = 0 }: { date?: number }\n) => {\n  const utcDate = new Date(\n    Date.UTC(\n      localDate.getFullYear(),\n      localDate.getMonth(),\n      localDate.getDate()\n    ) +\n      moveDate * MILLISECONDS_IN_DAY\n  );\n  return new Date(\n    utcDate.getUTCFullYear(),\n    utcDate.getUTCMonth(),\n    utcDate.getUTCDate()\n  );\n};\n\n/**\n * @param config Plugin configuration.\n * @returns\n *   A Flatpickr plugin to handle events.\n *   Some event handlers in Flatpickr won't work is the calendar dropdown is put in shadow DOM, due to event retargetting.\n */\nexport default (): Plugin =>\n  (fp: ExtendedFlatpickrInstanceShadowDOMEventsPlugin) => {\n    const getDateElem = (localDate) =>\n      find(\n        fp.daysContainer!.firstElementChild!.children,\n        ({ dateObj }: any) => localDate.getTime() === dateObj.getTime()\n      );\n\n    /**\n     * Handles `keydown` event.\n     */\n    const handleKeydown = (event: KeyboardEvent) => {\n      const { ctrlKey, key, target } = event;\n      if (key === 'Enter') {\n        target!.dispatchEvent(\n          Object.assign(new CustomEvent('mousedown', { bubbles: true }), {\n            which: 1,\n          })\n        );\n      } else if (!ctrlKey && key in moveDateForKeys) {\n        const { dateObj } = target as any;\n        const movedDate = adjustDate(dateObj, { date: moveDateForKeys[key] });\n        const movedDateElem = getDateElem(movedDate);\n        if (movedDateElem) {\n          movedDateElem.focus();\n        } else {\n          const innerDaysContainer = fp.daysContainer!.firstElementChild!;\n          if (\n            movedDate.getTime() <\n            (innerDaysContainer.firstElementChild as any).dateObj.getTime()\n          ) {\n            fp.changeMonth(-1);\n            // `fp.daysContainer` is updated by `fp.changeMonth()`\n            (\n              fp.daysContainer!.firstElementChild!\n                .lastElementChild as HTMLElement\n            ).focus();\n          } else if (\n            movedDate.getTime() >\n            (innerDaysContainer.lastElementChild as any).dateObj.getTime()\n          ) {\n            fp.changeMonth(1);\n            // `fp.daysContainer` is updated by `fp.changeMonth()`\n            (\n              fp.daysContainer!.firstElementChild!\n                .firstElementChild as HTMLElement\n            ).focus();\n          }\n        }\n        event.preventDefault();\n      } else if (ctrlKey && key in moveMonthForKeys) {\n        fp.changeMonth(moveMonthForKeys[key]);\n        (\n          fp.daysContainer!.firstElementChild!.firstElementChild as HTMLElement\n        ).focus();\n        event.preventDefault();\n      }\n    };\n\n    /**\n     * Releases event listeners used in this Flatpickr plugin.\n     */\n    const release = () => {\n      if (fp._hCDSCEDatePickerShadowDOMEventsPluginKeydown) {\n        fp._hCDSCEDatePickerShadowDOMEventsPluginKeydown =\n          fp._hCDSCEDatePickerShadowDOMEventsPluginKeydown.release();\n      }\n    };\n\n    /**\n     * Sets up event listeners used for this Flatpickr plugin.\n     */\n    const init = () => {\n      release();\n      fp._hCDSCEDatePickerShadowDOMEventsPluginKeydown = on(\n        fp.calendarContainer,\n        'keydown',\n        handleKeydown\n      );\n    };\n\n    /**\n     * Registers this Flatpickr plugin.\n     */\n    const register = () => {\n      fp.loadedPlugins.push('carbonFlatpickrShadowDOMEventsPlugin');\n    };\n\n    return {\n      onReady: [register, init],\n      onDestroy: [release],\n    };\n  };\n"]}

package/es/components/date-picker/shadow-dom-events-plugin.js

@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import on from 'carbon-components/es/globals/js/misc/on';
+import on from '../../globals/mixins/on';
 import { find } from '../../globals/internal/collection-helpers';
 
 /**

package/es/components/date-picker/shadow-dom-events-plugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"shadow-dom-events-plugin.js","names":["on","find","moveDateForKeys","ArrowLeft","Left","ArrowUp","Up","ArrowRight","Right","ArrowDown","Down","moveMonthForKeys","MILLISECONDS_IN_DAY","adjustDate","localDate","date","moveDate","utcDate","Date","UTC","getFullYear","getMonth","getDate","getUTCFullYear","getUTCMonth","getUTCDate","fp","getDateElem","daysContainer","firstElementChild","children","dateObj","getTime","handleKeydown","event","ctrlKey","key","target","dispatchEvent","Object","assign","CustomEvent","bubbles","which","movedDate","movedDateElem","focus","innerDaysContainer","changeMonth","lastElementChild","preventDefault","release","_hCDSCEDatePickerShadowDOMEventsPluginKeydown","init","calendarContainer","register","loadedPlugins","push","onReady","onDestroy"],"sources":["components/date-picker/shadow-dom-events-plugin.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 { Instance as FlatpickrInstance } from 'flatpickr/dist/types/instance';\nimport { Plugin } from 'flatpickr/dist/types/options';\nimport on from 'carbon-components/es/globals/js/misc/on';\nimport Handle from '../../globals/internal/handle';\nimport { find } from '../../globals/internal/collection-helpers';\n\n/**\n * `FlatpickrInstance` with additional properties used for `carbonFlatpickrShadowDOMEventsPlugin`.\n */\nexport interface ExtendedFlatpickrInstanceShadowDOMEventsPlugin\n  extends FlatpickrInstance {\n  /**\n   * The handle for `keydown` event handler in calendar dropdown.\n   */\n  _hCDSCEDatePickerShadowDOMEventsPluginKeydown?: Handle | null;\n}\n\n/**\n * The amount of days to adjust, keyed by the key code.\n */\nconst moveDateForKeys = {\n  ArrowLeft: -1,\n  Left: -1,\n  ArrowUp: -7,\n  Up: -7,\n  ArrowRight: 1,\n  Right: 1,\n  ArrowDown: 7,\n  Down: 7,\n};\n\n/**\n * The amount of months to adjust, keyed by the key code. Used with Ctrl modifier key.\n */\nconst moveMonthForKeys = {\n  ArrowLeft: -1,\n  Left: -1,\n  ArrowUp: -12,\n  Up: -12,\n  ArrowRight: 1,\n  Right: 1,\n  ArrowDown: 12,\n  Down: 12,\n};\n\n/**\n * The number of milliseconds per day.\n */\nconst MILLISECONDS_IN_DAY = 86400000;\n\n/**\n * Adjusts the date with the given amount of days.\n *\n * @param localDate The original date.\n * @param options The options.\n * @param [options.date=0] The amount of days to adjust.\n */\nconst adjustDate = (\n  localDate: Date,\n  { date: moveDate = 0 }: { date?: number }\n) => {\n  const utcDate = new Date(\n    Date.UTC(\n      localDate.getFullYear(),\n      localDate.getMonth(),\n      localDate.getDate()\n    ) +\n      moveDate * MILLISECONDS_IN_DAY\n  );\n  return new Date(\n    utcDate.getUTCFullYear(),\n    utcDate.getUTCMonth(),\n    utcDate.getUTCDate()\n  );\n};\n\n/**\n * @param config Plugin configuration.\n * @returns\n *   A Flatpickr plugin to handle events.\n *   Some event handlers in Flatpickr won't work is the calendar dropdown is put in shadow DOM, due to event retargetting.\n */\nexport default (): Plugin =>\n  (fp: ExtendedFlatpickrInstanceShadowDOMEventsPlugin) => {\n    const getDateElem = (localDate) =>\n      find(\n        fp.daysContainer!.firstElementChild!.children,\n        ({ dateObj }: any) => localDate.getTime() === dateObj.getTime()\n      );\n\n    /**\n     * Handles `keydown` event.\n     */\n    const handleKeydown = (event: KeyboardEvent) => {\n      const { ctrlKey, key, target } = event;\n      if (key === 'Enter') {\n        target!.dispatchEvent(\n          Object.assign(new CustomEvent('mousedown', { bubbles: true }), {\n            which: 1,\n          })\n        );\n      } else if (!ctrlKey && key in moveDateForKeys) {\n        const { dateObj } = target as any;\n        const movedDate = adjustDate(dateObj, { date: moveDateForKeys[key] });\n        const movedDateElem = getDateElem(movedDate);\n        if (movedDateElem) {\n          movedDateElem.focus();\n        } else {\n          const innerDaysContainer = fp.daysContainer!.firstElementChild!;\n          if (\n            movedDate.getTime() <\n            (innerDaysContainer.firstElementChild as any).dateObj.getTime()\n          ) {\n            fp.changeMonth(-1);\n            // `fp.daysContainer` is updated by `fp.changeMonth()`\n            (\n              fp.daysContainer!.firstElementChild!\n                .lastElementChild as HTMLElement\n            ).focus();\n          } else if (\n            movedDate.getTime() >\n            (innerDaysContainer.lastElementChild as any).dateObj.getTime()\n          ) {\n            fp.changeMonth(1);\n            // `fp.daysContainer` is updated by `fp.changeMonth()`\n            (\n              fp.daysContainer!.firstElementChild!\n                .firstElementChild as HTMLElement\n            ).focus();\n          }\n        }\n        event.preventDefault();\n      } else if (ctrlKey && key in moveMonthForKeys) {\n        fp.changeMonth(moveMonthForKeys[key]);\n        (\n          fp.daysContainer!.firstElementChild!.firstElementChild as HTMLElement\n        ).focus();\n        event.preventDefault();\n      }\n    };\n\n    /**\n     * Releases event listeners used in this Flatpickr plugin.\n     */\n    const release = () => {\n      if (fp._hCDSCEDatePickerShadowDOMEventsPluginKeydown) {\n        fp._hCDSCEDatePickerShadowDOMEventsPluginKeydown =\n          fp._hCDSCEDatePickerShadowDOMEventsPluginKeydown.release();\n      }\n    };\n\n    /**\n     * Sets up event listeners used for this Flatpickr plugin.\n     */\n    const init = () => {\n      release();\n      fp._hCDSCEDatePickerShadowDOMEventsPluginKeydown = on(\n        fp.calendarContainer,\n        'keydown',\n        handleKeydown\n      );\n    };\n\n    /**\n     * Registers this Flatpickr plugin.\n     */\n    const register = () => {\n      fp.loadedPlugins.push('carbonFlatpickrShadowDOMEventsPlugin');\n    };\n\n    return {\n      onReady: [register, init],\n      onDestroy: [release],\n    };\n  };\n"],"mappings":"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"}
+{"version":3,"file":"shadow-dom-events-plugin.js","names":["on","find","moveDateForKeys","ArrowLeft","Left","ArrowUp","Up","ArrowRight","Right","ArrowDown","Down","moveMonthForKeys","MILLISECONDS_IN_DAY","adjustDate","localDate","date","moveDate","utcDate","Date","UTC","getFullYear","getMonth","getDate","getUTCFullYear","getUTCMonth","getUTCDate","fp","getDateElem","daysContainer","firstElementChild","children","dateObj","getTime","handleKeydown","event","ctrlKey","key","target","dispatchEvent","Object","assign","CustomEvent","bubbles","which","movedDate","movedDateElem","focus","innerDaysContainer","changeMonth","lastElementChild","preventDefault","release","_hCDSCEDatePickerShadowDOMEventsPluginKeydown","init","calendarContainer","register","loadedPlugins","push","onReady","onDestroy"],"sources":["components/date-picker/shadow-dom-events-plugin.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 { Instance as FlatpickrInstance } from 'flatpickr/dist/types/instance';\nimport { Plugin } from 'flatpickr/dist/types/options';\nimport on from '../../globals/mixins/on';\nimport Handle from '../../globals/internal/handle';\nimport { find } from '../../globals/internal/collection-helpers';\n\n/**\n * `FlatpickrInstance` with additional properties used for `carbonFlatpickrShadowDOMEventsPlugin`.\n */\nexport interface ExtendedFlatpickrInstanceShadowDOMEventsPlugin\n  extends FlatpickrInstance {\n  /**\n   * The handle for `keydown` event handler in calendar dropdown.\n   */\n  _hCDSCEDatePickerShadowDOMEventsPluginKeydown?: Handle | null;\n}\n\n/**\n * The amount of days to adjust, keyed by the key code.\n */\nconst moveDateForKeys = {\n  ArrowLeft: -1,\n  Left: -1,\n  ArrowUp: -7,\n  Up: -7,\n  ArrowRight: 1,\n  Right: 1,\n  ArrowDown: 7,\n  Down: 7,\n};\n\n/**\n * The amount of months to adjust, keyed by the key code. Used with Ctrl modifier key.\n */\nconst moveMonthForKeys = {\n  ArrowLeft: -1,\n  Left: -1,\n  ArrowUp: -12,\n  Up: -12,\n  ArrowRight: 1,\n  Right: 1,\n  ArrowDown: 12,\n  Down: 12,\n};\n\n/**\n * The number of milliseconds per day.\n */\nconst MILLISECONDS_IN_DAY = 86400000;\n\n/**\n * Adjusts the date with the given amount of days.\n *\n * @param localDate The original date.\n * @param options The options.\n * @param [options.date=0] The amount of days to adjust.\n */\nconst adjustDate = (\n  localDate: Date,\n  { date: moveDate = 0 }: { date?: number }\n) => {\n  const utcDate = new Date(\n    Date.UTC(\n      localDate.getFullYear(),\n      localDate.getMonth(),\n      localDate.getDate()\n    ) +\n      moveDate * MILLISECONDS_IN_DAY\n  );\n  return new Date(\n    utcDate.getUTCFullYear(),\n    utcDate.getUTCMonth(),\n    utcDate.getUTCDate()\n  );\n};\n\n/**\n * @param config Plugin configuration.\n * @returns\n *   A Flatpickr plugin to handle events.\n *   Some event handlers in Flatpickr won't work is the calendar dropdown is put in shadow DOM, due to event retargetting.\n */\nexport default (): Plugin =>\n  (fp: ExtendedFlatpickrInstanceShadowDOMEventsPlugin) => {\n    const getDateElem = (localDate) =>\n      find(\n        fp.daysContainer!.firstElementChild!.children,\n        ({ dateObj }: any) => localDate.getTime() === dateObj.getTime()\n      );\n\n    /**\n     * Handles `keydown` event.\n     */\n    const handleKeydown = (event: KeyboardEvent) => {\n      const { ctrlKey, key, target } = event;\n      if (key === 'Enter') {\n        target!.dispatchEvent(\n          Object.assign(new CustomEvent('mousedown', { bubbles: true }), {\n            which: 1,\n          })\n        );\n      } else if (!ctrlKey && key in moveDateForKeys) {\n        const { dateObj } = target as any;\n        const movedDate = adjustDate(dateObj, { date: moveDateForKeys[key] });\n        const movedDateElem = getDateElem(movedDate);\n        if (movedDateElem) {\n          movedDateElem.focus();\n        } else {\n          const innerDaysContainer = fp.daysContainer!.firstElementChild!;\n          if (\n            movedDate.getTime() <\n            (innerDaysContainer.firstElementChild as any).dateObj.getTime()\n          ) {\n            fp.changeMonth(-1);\n            // `fp.daysContainer` is updated by `fp.changeMonth()`\n            (\n              fp.daysContainer!.firstElementChild!\n                .lastElementChild as HTMLElement\n            ).focus();\n          } else if (\n            movedDate.getTime() >\n            (innerDaysContainer.lastElementChild as any).dateObj.getTime()\n          ) {\n            fp.changeMonth(1);\n            // `fp.daysContainer` is updated by `fp.changeMonth()`\n            (\n              fp.daysContainer!.firstElementChild!\n                .firstElementChild as HTMLElement\n            ).focus();\n          }\n        }\n        event.preventDefault();\n      } else if (ctrlKey && key in moveMonthForKeys) {\n        fp.changeMonth(moveMonthForKeys[key]);\n        (\n          fp.daysContainer!.firstElementChild!.firstElementChild as HTMLElement\n        ).focus();\n        event.preventDefault();\n      }\n    };\n\n    /**\n     * Releases event listeners used in this Flatpickr plugin.\n     */\n    const release = () => {\n      if (fp._hCDSCEDatePickerShadowDOMEventsPluginKeydown) {\n        fp._hCDSCEDatePickerShadowDOMEventsPluginKeydown =\n          fp._hCDSCEDatePickerShadowDOMEventsPluginKeydown.release();\n      }\n    };\n\n    /**\n     * Sets up event listeners used for this Flatpickr plugin.\n     */\n    const init = () => {\n      release();\n      fp._hCDSCEDatePickerShadowDOMEventsPluginKeydown = on(\n        fp.calendarContainer,\n        'keydown',\n        handleKeydown\n      );\n    };\n\n    /**\n     * Registers this Flatpickr plugin.\n     */\n    const register = () => {\n      fp.loadedPlugins.push('carbonFlatpickrShadowDOMEventsPlugin');\n    };\n\n    return {\n      onReady: [register, init],\n      onDestroy: [release],\n    };\n  };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAIA,OAAOA,EAAE,MAAM,yBAAyB;AAExC,SAASC,IAAI,QAAQ,2CAA2C;;AAEhE;AACA;AACA;;AASA;AACA;AACA;AACA,MAAMC,eAAe,GAAG;EACtBC,SAAS,EAAE,CAAC,CAAC;EACbC,IAAI,EAAE,CAAC,CAAC;EACRC,OAAO,EAAE,CAAC,CAAC;EACXC,EAAE,EAAE,CAAC,CAAC;EACNC,UAAU,EAAE,CAAC;EACbC,KAAK,EAAE,CAAC;EACRC,SAAS,EAAE,CAAC;EACZC,IAAI,EAAE;AACR,CAAC;;AAED;AACA;AACA;AACA,MAAMC,gBAAgB,GAAG;EACvBR,SAAS,EAAE,CAAC,CAAC;EACbC,IAAI,EAAE,CAAC,CAAC;EACRC,OAAO,EAAE,CAAC,EAAE;EACZC,EAAE,EAAE,CAAC,EAAE;EACPC,UAAU,EAAE,CAAC;EACbC,KAAK,EAAE,CAAC;EACRC,SAAS,EAAE,EAAE;EACbC,IAAI,EAAE;AACR,CAAC;;AAED;AACA;AACA;AACA,MAAME,mBAAmB,GAAG,QAAQ;;AAEpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,UAAU,GAAGA,CACjBC,SAAe,EACf;EAAEC,IAAI,EAAEC,QAAQ,GAAG;AAAqB,CAAC,KACtC;EACH,MAAMC,OAAO,GAAG,IAAIC,IAAI,CACtBA,IAAI,CAACC,GAAG,CACNL,SAAS,CAACM,WAAW,EAAE,EACvBN,SAAS,CAACO,QAAQ,EAAE,EACpBP,SAAS,CAACQ,OAAO,EAAE,CACpB,GACCN,QAAQ,GAAGJ,mBAAmB,CACjC;EACD,OAAO,IAAIM,IAAI,CACbD,OAAO,CAACM,cAAc,EAAE,EACxBN,OAAO,CAACO,WAAW,EAAE,EACrBP,OAAO,CAACQ,UAAU,EAAE,CACrB;AACH,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA,gBAAe,MACZC,EAAkD,IAAK;EACtD,MAAMC,WAAW,GAAIb,SAAS,IAC5Bb,IAAI,CACFyB,EAAE,CAACE,aAAa,CAAEC,iBAAiB,CAAEC,QAAQ,EAC7C,CAAC;IAAEC;EAAa,CAAC,KAAKjB,SAAS,CAACkB,OAAO,EAAE,KAAKD,OAAO,CAACC,OAAO,EAAE,CAChE;;EAEH;AACJ;AACA;EACI,MAAMC,aAAa,GAAIC,KAAoB,IAAK;IAC9C,MAAM;MAAEC,OAAO;MAAEC,GAAG;MAAEC;IAAO,CAAC,GAAGH,KAAK;IACtC,IAAIE,GAAG,KAAK,OAAO,EAAE;MACnBC,MAAM,CAAEC,aAAa,CACnBC,MAAM,CAACC,MAAM,CAAC,IAAIC,WAAW,CAAC,WAAW,EAAE;QAAEC,OAAO,EAAE;MAAK,CAAC,CAAC,EAAE;QAC7DC,KAAK,EAAE;MACT,CAAC,CAAC,CACH;IACH,CAAC,MAAM,IAAI,CAACR,OAAO,IAAIC,GAAG,IAAIlC,eAAe,EAAE;MAC7C,MAAM;QAAE6B;MAAQ,CAAC,GAAGM,MAAa;MACjC,MAAMO,SAAS,GAAG/B,UAAU,CAACkB,OAAO,EAAE;QAAEhB,IAAI,EAAEb,eAAe,CAACkC,GAAG;MAAE,CAAC,CAAC;MACrE,MAAMS,aAAa,GAAGlB,WAAW,CAACiB,SAAS,CAAC;MAC5C,IAAIC,aAAa,EAAE;QACjBA,aAAa,CAACC,KAAK,EAAE;MACvB,CAAC,MAAM;QACL,MAAMC,kBAAkB,GAAGrB,EAAE,CAACE,aAAa,CAAEC,iBAAkB;QAC/D,IACEe,SAAS,CAACZ,OAAO,EAAE,GAClBe,kBAAkB,CAAClB,iBAAiB,CAASE,OAAO,CAACC,OAAO,EAAE,EAC/D;UACAN,EAAE,CAACsB,WAAW,CAAC,CAAC,CAAC,CAAC;UAClB;UAEEtB,EAAE,CAACE,aAAa,CAAEC,iBAAiB,CAChCoB,gBAAgB,CACnBH,KAAK,EAAE;QACX,CAAC,MAAM,IACLF,SAAS,CAACZ,OAAO,EAAE,GAClBe,kBAAkB,CAACE,gBAAgB,CAASlB,OAAO,CAACC,OAAO,EAAE,EAC9D;UACAN,EAAE,CAACsB,WAAW,CAAC,CAAC,CAAC;UACjB;UAEEtB,EAAE,CAACE,aAAa,CAAEC,iBAAiB,CAChCA,iBAAiB,CACpBiB,KAAK,EAAE;QACX;MACF;MACAZ,KAAK,CAACgB,cAAc,EAAE;IACxB,CAAC,MAAM,IAAIf,OAAO,IAAIC,GAAG,IAAIzB,gBAAgB,EAAE;MAC7Ce,EAAE,CAACsB,WAAW,CAACrC,gBAAgB,CAACyB,GAAG,CAAC,CAAC;MAEnCV,EAAE,CAACE,aAAa,CAAEC,iBAAiB,CAAEA,iBAAiB,CACtDiB,KAAK,EAAE;MACTZ,KAAK,CAACgB,cAAc,EAAE;IACxB;EACF,CAAC;;EAED;AACJ;AACA;EACI,MAAMC,OAAO,GAAGA,CAAA,KAAM;IACpB,IAAIzB,EAAE,CAAC0B,6CAA6C,EAAE;MACpD1B,EAAE,CAAC0B,6CAA6C,GAC9C1B,EAAE,CAAC0B,6CAA6C,CAACD,OAAO,EAAE;IAC9D;EACF,CAAC;;EAED;AACJ;AACA;EACI,MAAME,IAAI,GAAGA,CAAA,KAAM;IACjBF,OAAO,EAAE;IACTzB,EAAE,CAAC0B,6CAA6C,GAAGpD,EAAE,CACnD0B,EAAE,CAAC4B,iBAAiB,EACpB,SAAS,EACTrB,aAAa,CACd;EACH,CAAC;;EAED;AACJ;AACA;EACI,MAAMsB,QAAQ,GAAGA,CAAA,KAAM;IACrB7B,EAAE,CAAC8B,aAAa,CAACC,IAAI,CAAC,sCAAsC,CAAC;EAC/D,CAAC;EAED,OAAO;IACLC,OAAO,EAAE,CAACH,QAAQ,EAAEF,IAAI,CAAC;IACzBM,SAAS,EAAE,CAACR,OAAO;EACrB,CAAC;AACH,CAAC"}

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

@@ -326,7 +326,9 @@ declare const CDSDropdown_base: (abstract new (...args: any[]) => {
     new (...args: any[]): {
         _handles: Set<import("../../globals/internal/handle").default>;
         connectedCallback(): void;
-        disconnectedCallback(): void;
+        disconnectedCallback(): void; /**
+         * The content of the selected item.
+         */
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;

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 { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { LitElement, html, TemplateResult } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport ChevronDown16 from '@carbon/icons/lib/chevron--down/16';\nimport WarningFilled16 from '@carbon/icons/lib/warning--filled/16';\nimport WarningAltFilled16 from '@carbon/icons/lib/warning--alt--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_DIRECTION,\n  DROPDOWN_KEYBOARD_ACTION,\n  DROPDOWN_SIZE,\n  DROPDOWN_TYPE,\n  NAVIGATION_DIRECTION,\n} from './defs';\nimport CDSDropdownItem from './dropdown-item';\nimport styles from './dropdown.scss';\n\nexport {\n  DROPDOWN_KEYBOARD_ACTION,\n  DROPDOWN_DIRECTION,\n  DROPDOWN_SIZE,\n  DROPDOWN_TYPE,\n  NAVIGATION_DIRECTION,\n};\n\n/**\n * Dropdown.\n *\n * @element cds-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 cds-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 cds-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 cds-dropdown-selected - The custom event fired after a dropdown item is selected upon a user gesture.\n * @fires cds-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 CDSDropdown 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 title text in the shadow DOM.\n   */\n  @query('slot[name=\"title-text\"]')\n  protected _slotTitleTextNode!: 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?: CDSDropdownItem) {\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?: CDSDropdownItem) {\n    if (itemToSelect) {\n      this.value = itemToSelect.value;\n      forEach(\n        this.querySelectorAll(\n          (this.constructor as typeof CDSDropdown).selectorItemSelected\n        ),\n        (item) => {\n          (item as CDSDropdownItem).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.readOnly) {\n      return;\n    }\n\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 CDSDropdown).selectorItem\n      ) as CDSDropdownItem;\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 CDSDropdown).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 CDSDropdown).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 CDSDropdown;\n            const highlightedItem = this.querySelector(\n              constructor.selectorItemHighlighted\n            ) as CDSDropdownItem;\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?: CDSDropdownItem) {\n    if (item?.hasAttribute('disabled')) {\n      return;\n    }\n\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 CDSDropdown;\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 CDSDropdown;\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            label,\n            _assistiveStatusText: assistiveStatusText,\n            _selectedItemContent: selectedItemContent,\n          } = this;\n          const selectedItemText =\n            (selectedItemContent && selectedItemContent.textContent) || label;\n          if (\n            selectedItemText &&\n            assistiveStatusText !== selectedItemAssistiveText\n          ) {\n            this._assistiveStatusText = selectedItemText;\n          }\n          forEach(\n            this.querySelectorAll(\n              (this.constructor as typeof CDSDropdown).selectorItemHighlighted\n            ),\n            (item) => {\n              (item as CDSDropdownItem).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 CDSDropdown).selectorItem\n      ),\n      (item) => {\n        (item as CDSDropdownItem).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 CDSDropdown;\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\n    if (items[nextIndex]?.hasAttribute('disabled')) {\n      nextIndex += direction;\n    }\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 CDSDropdownItem).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 _renderPrecedingLabel(): 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 _renderLabel(): TemplateResult {\n    const { label, _selectedItemContent: selectedItemContent } = this;\n    return html`\n      <span id=\"trigger-label\" class=\"${prefix}--list-box__label\"\n        >${selectedItemContent || label}</span\n      >\n    `;\n  }\n\n  /* eslint-disable class-methods-use-this */\n  /**\n   * @returns The content following the trigger button.\n   */\n  protected _renderFollowingLabel(): 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   * 'aria-label' of the ListBox component.\n   * Specify a label to be read by screen readers on the container node\n   */\n  @property({ type: String, reflect: true, attribute: 'aria-label' })\n  ariaLabel = '';\n\n  /**\n   * Specify the direction of the dropdown. Can be either top or bottom.\n   */\n  @property({ type: Boolean, reflect: true })\n  direction = false;\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   * Specify whether the title text should be hidden or not\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-label' })\n  hideLabel = false;\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   * Message which is displayed if the value is invalid.\n   */\n  @property({ attribute: 'invalid-text' })\n  invalidText = '';\n\n  /**\n   * Provide the title text that will be read by a screen reader when visiting this control\n   */\n  @property({ attribute: 'title-text' })\n  titleText = '';\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   * Whether or not the Dropdown is readonly\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'read-only' })\n  readOnly = 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   * Generic label that will be used as the textual representation of what this field is for\n   */\n  @property({ attribute: 'label' })\n  label = '';\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  /**\n   * Specify whether the control is currently in warning state\n   */\n  @property({ type: Boolean, reflect: true })\n  warn = false;\n\n  /**\n   * Provide the text that is displayed when the control is in warning state\n   */\n  @property({ attribute: 'warn-text' })\n  warnText = '';\n\n  shouldUpdate(changedProperties) {\n    const { selectorItem } = this.constructor as typeof CDSDropdown;\n    if (changedProperties.has('size')) {\n      forEach(this.querySelectorAll(selectorItem), (elem) => {\n        (elem as CDSDropdownItem).size = this.size;\n      });\n    }\n    if (changedProperties.has('value')) {\n      // `<cds-multi-select>` updates selection beforehand\n      // because our rendering logic for `<cds-multi-select>` looks for selected items via `qSA()`\n      forEach(this.querySelectorAll(selectorItem), (elem) => {\n        (elem as CDSDropdownItem).selected =\n          (elem as CDSDropdownItem).value === this.value;\n      });\n      const item = find(\n        this.querySelectorAll(selectorItem),\n        (elem) => (elem as CDSDropdownItem).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 CDSDropdown;\n    if (changedProperties.has('disabled') && this.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 CDSDropdownItem).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      ariaLabel,\n      disabled,\n      helperText,\n      hideLabel,\n      invalid,\n      invalidText,\n      open,\n      toggleLabelClosed,\n      toggleLabelOpen,\n      size,\n      titleText,\n      type,\n      warn,\n      warnText,\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      _slotTitleTextNode: slotTitleTextNode,\n    } = this;\n    const inline = type === DROPDOWN_TYPE.INLINE;\n    const selectedItemsCount = this.querySelectorAll(\n      (this.constructor as typeof CDSDropdown).selectorItemSelected\n    ).length;\n    const classes = classMap({\n      [`${prefix}--dropdown`]: true,\n      [`${prefix}--list-box`]: true,\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--warn`]: warn,\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      [`${prefix}--visually-hidden`]: hideLabel,\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 hasTitleText =\n      titleText ||\n      (slotTitleTextNode && slotTitleTextNode.assignedNodes().length > 0);\n    const validityIcon = !invalid\n      ? undefined\n      : WarningFilled16({\n          class: `${prefix}--list-box__invalid-icon`,\n          'aria-label': toggleLabel,\n        });\n    const warningIcon =\n      !warn || (invalid && warn)\n        ? undefined\n        : WarningAltFilled16({\n            class: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`,\n            'aria-label': toggleLabel,\n          });\n    const helperMessage = invalid ? invalidText : warn ? warnText : helperText;\n    const menuBody = !open\n      ? undefined\n      : html`\n          <div\n            aria-label=\"${ariaLabel}\"\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=\"title-text\"\n        class=\"${labelClasses}\"\n        ?hidden=\"${!hasTitleText}\">\n        <slot name=\"title-text\" @slotchange=\"${handleSlotchangeLabelText}\"\n          >${titleText}</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        <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._renderPrecedingLabel()}${this._renderLabel()}${validityIcon}${warningIcon}${this._renderFollowingLabel()}\n          <div id=\"trigger-caret\" class=\"${iconContainerClasses}\">\n            ${ChevronDown16({ 'aria-label': toggleLabel })}\n          </div>\n        </div>\n        ${menuBody}\n      </div>\n      <div\n        part=\"helper-text\"\n        class=\"${helperClasses}\"\n        ?hidden=\"${(inline && !warn && !invalid) || !hasHelperText}\">\n        <slot name=\"helper-text\" @slotchange=\"${handleSlotchangeHelperText}\"\n          >${helperMessage}</slot\n        >\n      </div>\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 shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\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 CDSDropdown;\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 { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { LitElement, html, TemplateResult } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport ChevronDown16 from '@carbon/icons/lib/chevron--down/16';\nimport WarningFilled16 from '@carbon/icons/lib/warning--filled/16';\nimport WarningAltFilled16 from '@carbon/icons/lib/warning--alt--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_DIRECTION,\n  DROPDOWN_KEYBOARD_ACTION,\n  DROPDOWN_SIZE,\n  DROPDOWN_TYPE,\n  NAVIGATION_DIRECTION,\n} from './defs';\nimport CDSDropdownItem from './dropdown-item';\nimport styles from './dropdown.scss';\n\nexport {\n  DROPDOWN_KEYBOARD_ACTION,\n  DROPDOWN_DIRECTION,\n  DROPDOWN_SIZE,\n  DROPDOWN_TYPE,\n  NAVIGATION_DIRECTION,\n};\n\n/**\n * Dropdown.\n *\n * @element cds-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 cds-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 cds-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 cds-dropdown-selected - The custom event fired after a dropdown item is selected upon a user gesture.\n * @fires cds-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 CDSDropdown 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 title text in the shadow DOM.\n   */\n  @query('slot[name=\"title-text\"]')\n  protected _slotTitleTextNode!: 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?: CDSDropdownItem) {\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?: CDSDropdownItem) {\n    if (itemToSelect) {\n      this.value = itemToSelect.value;\n      forEach(\n        this.querySelectorAll(\n          (this.constructor as typeof CDSDropdown).selectorItemSelected\n        ),\n        (item) => {\n          (item as CDSDropdownItem).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.readOnly) {\n      return;\n    }\n\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 CDSDropdown).selectorItem\n      ) as CDSDropdownItem;\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 CDSDropdown).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 CDSDropdown).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 CDSDropdown;\n            const highlightedItem = this.querySelector(\n              constructor.selectorItemHighlighted\n            ) as CDSDropdownItem;\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?: CDSDropdownItem) {\n    if (item?.hasAttribute('disabled')) {\n      return;\n    }\n\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 CDSDropdown;\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 CDSDropdown;\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            label,\n            _assistiveStatusText: assistiveStatusText,\n            _selectedItemContent: selectedItemContent,\n          } = this;\n          const selectedItemText =\n            (selectedItemContent && selectedItemContent.textContent) || label;\n          if (\n            selectedItemText &&\n            assistiveStatusText !== selectedItemAssistiveText\n          ) {\n            this._assistiveStatusText = selectedItemText;\n          }\n          forEach(\n            this.querySelectorAll(\n              (this.constructor as typeof CDSDropdown).selectorItemHighlighted\n            ),\n            (item) => {\n              (item as CDSDropdownItem).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 CDSDropdown).selectorItem\n      ),\n      (item) => {\n        (item as CDSDropdownItem).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 CDSDropdown;\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\n    if (items[nextIndex]?.hasAttribute('disabled')) {\n      nextIndex += direction;\n    }\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 CDSDropdownItem).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 _renderPrecedingLabel(): 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 _renderLabel(): TemplateResult {\n    const { label, _selectedItemContent: selectedItemContent } = this;\n    return html`\n      <span id=\"trigger-label\" class=\"${prefix}--list-box__label\"\n        >${selectedItemContent || label}</span\n      >\n    `;\n  }\n\n  /* eslint-disable class-methods-use-this */\n  /**\n   * @returns The content following the trigger button.\n   */\n  protected _renderFollowingLabel(): 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   * 'aria-label' of the ListBox component.\n   * Specify a label to be read by screen readers on the container node\n   */\n  @property({ type: String, reflect: true, attribute: 'aria-label' })\n  ariaLabel = '';\n\n  /**\n   * Specify the direction of the dropdown. Can be either top or bottom.\n   */\n  @property({ type: Boolean, reflect: true })\n  direction = false;\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   * Specify whether the title text should be hidden or not\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-label' })\n  hideLabel = false;\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   * Message which is displayed if the value is invalid.\n   */\n  @property({ attribute: 'invalid-text' })\n  invalidText = '';\n\n  /**\n   * Provide the title text that will be read by a screen reader when visiting this control\n   */\n  @property({ attribute: 'title-text' })\n  titleText = '';\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   * Whether or not the Dropdown is readonly\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'read-only' })\n  readOnly = 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   * Generic label that will be used as the textual representation of what this field is for\n   */\n  @property({ attribute: 'label' })\n  label = '';\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  /**\n   * Specify whether the control is currently in warning state\n   */\n  @property({ type: Boolean, reflect: true })\n  warn = false;\n\n  /**\n   * Provide the text that is displayed when the control is in warning state\n   */\n  @property({ attribute: 'warn-text' })\n  warnText = '';\n\n  shouldUpdate(changedProperties) {\n    const { selectorItem } = this.constructor as typeof CDSDropdown;\n    if (changedProperties.has('size')) {\n      forEach(this.querySelectorAll(selectorItem), (elem) => {\n        (elem as CDSDropdownItem).size = this.size;\n      });\n    }\n    if (changedProperties.has('value')) {\n      // `<cds-multi-select>` updates selection beforehand\n      // because our rendering logic for `<cds-multi-select>` looks for selected items via `qSA()`\n      forEach(this.querySelectorAll(selectorItem), (elem) => {\n        (elem as CDSDropdownItem).selected =\n          (elem as CDSDropdownItem).value === this.value;\n      });\n      const item = find(\n        this.querySelectorAll(selectorItem),\n        (elem) => (elem as CDSDropdownItem).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 CDSDropdown;\n    if (changedProperties.has('disabled') && this.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 CDSDropdownItem).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      ariaLabel,\n      disabled,\n      helperText,\n      hideLabel,\n      invalid,\n      invalidText,\n      open,\n      toggleLabelClosed,\n      toggleLabelOpen,\n      size,\n      titleText,\n      type,\n      warn,\n      warnText,\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      _slotTitleTextNode: slotTitleTextNode,\n    } = this;\n    const inline = type === DROPDOWN_TYPE.INLINE;\n    const selectedItemsCount = this.querySelectorAll(\n      (this.constructor as typeof CDSDropdown).selectorItemSelected\n    ).length;\n    const classes = classMap({\n      [`${prefix}--dropdown`]: true,\n      [`${prefix}--list-box`]: true,\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--warn`]: warn,\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      [`${prefix}--visually-hidden`]: hideLabel,\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 hasTitleText =\n      titleText ||\n      (slotTitleTextNode && slotTitleTextNode.assignedNodes().length > 0);\n    const validityIcon = !invalid\n      ? undefined\n      : WarningFilled16({\n          class: `${prefix}--list-box__invalid-icon`,\n          'aria-label': toggleLabel,\n        });\n    const warningIcon =\n      !warn || (invalid && warn)\n        ? undefined\n        : WarningAltFilled16({\n            class: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`,\n            'aria-label': toggleLabel,\n          });\n    const helperMessage = invalid ? invalidText : warn ? warnText : helperText;\n    const menuBody = !open\n      ? undefined\n      : html`\n          <div\n            aria-label=\"${ariaLabel}\"\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=\"title-text\"\n        class=\"${labelClasses}\"\n        ?hidden=\"${!hasTitleText}\">\n        <slot name=\"title-text\" @slotchange=\"${handleSlotchangeLabelText}\"\n          >${titleText}</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        <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._renderPrecedingLabel()}${this._renderLabel()}${validityIcon}${warningIcon}${this._renderFollowingLabel()}\n          <div id=\"trigger-caret\" class=\"${iconContainerClasses}\">\n            ${ChevronDown16({ 'aria-label': toggleLabel })}\n          </div>\n        </div>\n        ${menuBody}\n      </div>\n      <div\n        part=\"helper-text\"\n        class=\"${helperClasses}\"\n        ?hidden=\"${(inline && !warn && !invalid) || !hasHelperText}\">\n        <slot name=\"helper-text\" @slotchange=\"${handleSlotchangeHelperText}\"\n          >${helperMessage}</slot\n        >\n      </div>\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 shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\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 CDSDropdown;\n"]}

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

@@ -17,32 +17,28 @@ export declare enum FILE_UPLOADER_ITEM_STATE {
     /**
      * Upload complete.
      */
-    UPLOADED = "uploaded",
+    COMPLETE = "complete",
     /**
      * Editing.
      */
-    EDITING = "editing"
+    EDIT = "edit"
 }
 /**
  * File uploader item size.
  */
 export declare enum FILE_UPLOADER_ITEM_SIZE {
-    /**
-     * Regular size.
-     */
-    REGULAR = "",
     /**
      * Small size.
      */
     SMALL = "sm",
     /**
-     * Large size.
+     * Medium size.
      */
-    LARGE = "lg",
+    MEDIUM = "md",
     /**
-     * Size for form field.
+     * Large size.
      */
-    FIELD = "field"
+    LARGE = "lg"
 }
 
 //# sourceMappingURL=defs.d.ts.map

package/es/components/file-uploader/defs.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/file-uploader/defs.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;GAEG;AACH,oBAAY,wBAAwB;IAClC;;OAEG;IACH,SAAS,cAAc;IAEvB;;OAEG;IACH,QAAQ,aAAa;IAErB;;OAEG;IACH,OAAO,YAAY;CACpB;AAED;;GAEG;AACH,oBAAY,uBAAuB;IACjC;;OAEG;IACH,OAAO,KAAK;IAEZ;;OAEG;IACH,KAAK,OAAO;IAEZ;;OAEG;IACH,KAAK,OAAO;IAGZ;;OAEG;IACH,KAAK,UAAU;CAChB","file":"defs.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\n/**\n * The state of `<cds-file-uploader-item>`.\n */\nexport enum FILE_UPLOADER_ITEM_STATE {\n  /**\n   * Upload in progress.\n   */\n  UPLOADING = 'uploading',\n\n  /**\n   * Upload complete.\n   */\n  UPLOADED = 'uploaded',\n\n  /**\n   * Editing.\n   */\n  EDITING = 'editing',\n}\n\n/**\n * File uploader item size.\n */\nexport enum FILE_UPLOADER_ITEM_SIZE {\n  /**\n   * Regular size.\n   */\n  REGULAR = '',\n\n  /**\n   * Small size.\n   */\n  SMALL = 'sm',\n\n  /**\n   * Large size.\n   */\n  LARGE = 'lg',\n\n  // TODO: deprecate\n  /**\n   * Size for form field.\n   */\n  FIELD = 'field',\n}\n"]}
+{"version":3,"sources":["components/file-uploader/defs.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;GAEG;AACH,oBAAY,wBAAwB;IAClC;;OAEG;IACH,SAAS,cAAc;IAEvB;;OAEG;IACH,QAAQ,aAAa;IAErB;;OAEG;IACH,IAAI,SAAS;CACd;AAED;;GAEG;AACH,oBAAY,uBAAuB;IACjC;;OAEG;IACH,KAAK,OAAO;IAEZ;;OAEG;IACH,MAAM,OAAO;IAEb;;OAEG;IACH,KAAK,OAAO;CACb","file":"defs.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\n/**\n * The state of `<cds-file-uploader-item>`.\n */\nexport enum FILE_UPLOADER_ITEM_STATE {\n  /**\n   * Upload in progress.\n   */\n  UPLOADING = 'uploading',\n\n  /**\n   * Upload complete.\n   */\n  COMPLETE = 'complete',\n\n  /**\n   * Editing.\n   */\n  EDIT = 'edit',\n}\n\n/**\n * File uploader item size.\n */\nexport enum FILE_UPLOADER_ITEM_SIZE {\n  /**\n   * Small size.\n   */\n  SMALL = 'sm',\n\n  /**\n   * Medium size.\n   */\n  MEDIUM = 'md',\n\n  /**\n   * Large size.\n   */\n  LARGE = 'lg',\n}\n"]}

package/es/components/file-uploader/defs.js

@@ -17,14 +17,13 @@ export let FILE_UPLOADER_ITEM_STATE;
  */
 (function (FILE_UPLOADER_ITEM_STATE) {
   FILE_UPLOADER_ITEM_STATE["UPLOADING"] = "uploading";
-  FILE_UPLOADER_ITEM_STATE["UPLOADED"] = "uploaded";
-  FILE_UPLOADER_ITEM_STATE["EDITING"] = "editing";
+  FILE_UPLOADER_ITEM_STATE["COMPLETE"] = "complete";
+  FILE_UPLOADER_ITEM_STATE["EDIT"] = "edit";
 })(FILE_UPLOADER_ITEM_STATE || (FILE_UPLOADER_ITEM_STATE = {}));
 export let FILE_UPLOADER_ITEM_SIZE;
 (function (FILE_UPLOADER_ITEM_SIZE) {
-  FILE_UPLOADER_ITEM_SIZE["REGULAR"] = "";
   FILE_UPLOADER_ITEM_SIZE["SMALL"] = "sm";
+  FILE_UPLOADER_ITEM_SIZE["MEDIUM"] = "md";
   FILE_UPLOADER_ITEM_SIZE["LARGE"] = "lg";
-  FILE_UPLOADER_ITEM_SIZE["FIELD"] = "field";
 })(FILE_UPLOADER_ITEM_SIZE || (FILE_UPLOADER_ITEM_SIZE = {}));
 //# sourceMappingURL=defs.js.map

package/es/components/file-uploader/defs.js.map

@@ -1 +1 @@
-{"version":3,"file":"defs.js","names":["FILE_UPLOADER_ITEM_STATE","FILE_UPLOADER_ITEM_SIZE"],"sources":["components/file-uploader/defs.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\n/**\n * The state of `<cds-file-uploader-item>`.\n */\nexport enum FILE_UPLOADER_ITEM_STATE {\n  /**\n   * Upload in progress.\n   */\n  UPLOADING = 'uploading',\n\n  /**\n   * Upload complete.\n   */\n  UPLOADED = 'uploaded',\n\n  /**\n   * Editing.\n   */\n  EDITING = 'editing',\n}\n\n/**\n * File uploader item size.\n */\nexport enum FILE_UPLOADER_ITEM_SIZE {\n  /**\n   * Regular size.\n   */\n  REGULAR = '',\n\n  /**\n   * Small size.\n   */\n  SMALL = 'sm',\n\n  /**\n   * Large size.\n   */\n  LARGE = 'lg',\n\n  // TODO: deprecate\n  /**\n   * Size for form field.\n   */\n  FIELD = 'field',\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,WAAYA,wBAAwB;;AAiBpC;AACA;AACA;AAFA,WAjBYA,wBAAwB;EAAxBA,wBAAwB;EAAxBA,wBAAwB;EAAxBA,wBAAwB;AAAA,GAAxBA,wBAAwB,KAAxBA,wBAAwB;AAoBpC,WAAYC,uBAAuB;AAqBlC,WArBWA,uBAAuB;EAAvBA,uBAAuB;EAAvBA,uBAAuB;EAAvBA,uBAAuB;EAAvBA,uBAAuB;AAAA,GAAvBA,uBAAuB,KAAvBA,uBAAuB"}
+{"version":3,"file":"defs.js","names":["FILE_UPLOADER_ITEM_STATE","FILE_UPLOADER_ITEM_SIZE"],"sources":["components/file-uploader/defs.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\n/**\n * The state of `<cds-file-uploader-item>`.\n */\nexport enum FILE_UPLOADER_ITEM_STATE {\n  /**\n   * Upload in progress.\n   */\n  UPLOADING = 'uploading',\n\n  /**\n   * Upload complete.\n   */\n  COMPLETE = 'complete',\n\n  /**\n   * Editing.\n   */\n  EDIT = 'edit',\n}\n\n/**\n * File uploader item size.\n */\nexport enum FILE_UPLOADER_ITEM_SIZE {\n  /**\n   * Small size.\n   */\n  SMALL = 'sm',\n\n  /**\n   * Medium size.\n   */\n  MEDIUM = 'md',\n\n  /**\n   * Large size.\n   */\n  LARGE = 'lg',\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,WAAYA,wBAAwB;;AAiBpC;AACA;AACA;AAFA,WAjBYA,wBAAwB;EAAxBA,wBAAwB;EAAxBA,wBAAwB;EAAxBA,wBAAwB;AAAA,GAAxBA,wBAAwB,KAAxBA,wBAAwB;AAoBpC,WAAYC,uBAAuB;AAelC,WAfWA,uBAAuB;EAAvBA,uBAAuB;EAAvBA,uBAAuB;EAAvBA,uBAAuB;AAAA,GAAvBA,uBAAuB,KAAvBA,uBAAuB"}

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

@@ -7,9 +7,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { LitElement } from 'lit-element';
-import './file-uploader';
-import './drop-container';
-import { FILE_UPLOADER_ITEM_SIZE } from './file-uploader-item';
+import './index';
+import { BUTTON_SIZE } from '../button/button';
 /**
  * A class to manage file uploading states, like sending file contents to server.
  * DEMONSTRATION-PURPOSE ONLY.
@@ -17,7 +16,7 @@ import { FILE_UPLOADER_ITEM_SIZE } from './file-uploader-item';
  * and thus abstracting everything in a library won't be a good return on investment
  * vs. letting users copy code here and implement features that fit their needs.
  */
-export default class BXCEDemoFileUploader extends LitElement {
+export default class CDSCEDemoFileUploader extends LitElement {
     /**
      * The files being uploaded.
      */
@@ -44,27 +43,51 @@ export default class BXCEDemoFileUploader extends LitElement {
      * The file types the file input should accept, separated by space.
      */
     accept: string;
+    /**
+     * `true` if the drop container should be disabled.
+     */
+    button: boolean;
+    /**
+     * Button kind.
+     */
+    buttonKind: string;
+    /**
+     * Button label.
+     */
+    buttonLabel: string;
     /**
      * `true` if the drop container should be disabled.
      */
     disabled: boolean;
     /**
-     * The helper text.
+     * Icon description.
      */
-    helperText: string;
+    iconDescription: string;
     /**
-     * The label text.
+     * The input name.
      */
-    labelText: string;
+    inputName: string;
+    /**
+     * The label description text.
+     */
+    labelDescription: string;
+    /**
+     * The label title.
+     */
+    labelTitle: string;
     /**
      * `true` if the drop container should accept more than one files at once.
      * Note that even with `false` set here, user _can_ select multiple files one by one.
      */
     multiple: boolean;
     /**
-     * The size of the file uploader items.
+     * The size of the button item.
+     */
+    size: BUTTON_SIZE;
+    /**
+     * The state of this file uploader item.
      */
-    size: FILE_UPLOADER_ITEM_SIZE;
+    inputState: string;
     render(): import("lit-html").TemplateResult<1>;
 }
 

package/es/components/file-uploader/demo-file-uploader.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/file-uploader/demo-file-uploader.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAkB,UAAU,EAAiB,MAAM,aAAa,CAAC;AAKxE,OAAO,iBAAiB,CAAC;AACzB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EACL,uBAAuB,EAExB,MAAM,sBAAsB,CAAC;AAG9B;;;;;;GAMG;AAEH,MAAM,CAAC,OAAO,OAAO,oBAAqB,SAAQ,UAAU;IAC1D;;OAEG;IACH,OAAO,CAAC,MAAM,CAAkB;IAEhC;;;;OAIG;IACH,OAAO,CAAC,aAAa;IAsBrB;;;;OAIG;IACH,OAAO,CAAC,aAAa;IAMrB;;;;OAIG;YACW,eAAe;IA2C7B;;OAEG;IAEH,MAAM,SAAM;IAEZ;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,UAAU,SAAM;IAEhB;;OAEG;IAEH,SAAS,SAAM;IAEf;;;OAGG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,IAAI,0BAAmC;IAEvC,MAAM;CAiDP","file":"demo-file-uploader.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, property, LitElement, customElement } from 'lit-element';\n\nimport { delay } from 'bluebird';\nimport { prefix } from '../../globals/settings';\nimport { ifDefined } from 'lit/directives/if-defined';\nimport './file-uploader';\nimport './drop-container';\nimport {\n  FILE_UPLOADER_ITEM_SIZE,\n  FILE_UPLOADER_ITEM_STATE,\n} from './file-uploader-item';\nimport { FileData } from './stories/types';\n\n/**\n * A class to manage file uploading states, like sending file contents to server.\n * DEMONSTRATION-PURPOSE ONLY.\n * Data/state handling in file uploading tends to involve lots of application-specific logics\n * and thus abstracting everything in a library won't be a good return on investment\n * vs. letting users copy code here and implement features that fit their needs.\n */\n@customElement(`${prefix}-ce-demo-file-uploader`)\nexport default class BXCEDemoFileUploader extends LitElement {\n  /**\n   * The files being uploaded.\n   */\n  private _files: FileData[] = [];\n\n  /**\n   * Handles `cds-drop-container-changed` on `<cds-file-drop-container>`.\n   *\n   * @param event The event.\n   */\n  private _handleChange(event: CustomEvent) {\n    const { addedFiles } = event.detail;\n    const newFiles: FileData[] = addedFiles.map(\n      (item) =>\n        ({\n          id: Math.random().toString(36).slice(2),\n          file: item,\n          state: FILE_UPLOADER_ITEM_STATE.UPLOADING,\n        } as FileData)\n    );\n    const { multiple, _files: files, _simulateUpload: simulateUpload } = this;\n    if (multiple) {\n      this._files = files.concat(newFiles);\n      this.requestUpdate();\n      newFiles.forEach(simulateUpload, this);\n    } else if (addedFiles.length > 0) {\n      this._files = files.concat(newFiles[0]);\n      this.requestUpdate();\n      this._simulateUpload(newFiles[0]);\n    }\n  }\n\n  /**\n   * Handles `cds-file-uploader-item-deleted` on `<cds-file-uploader-item>`.\n   *\n   * @param event The event.\n   */\n  private _handleDelete(event: CustomEvent) {\n    const { fileId: idToDelete } = (event.target as HTMLElement).dataset;\n    this._files = this._files.filter(({ id }) => idToDelete !== id);\n    this.requestUpdate();\n  }\n\n  /**\n   * Simulates updating file.\n   *\n   * @param data The data of the file being uploaded.\n   */\n  private async _simulateUpload(data: FileData) {\n    const { id, file } = data;\n    if (file.size > 524288) {\n      this._files = this._files.map((item) =>\n        id !== item.id\n          ? item\n          : {\n              ...item,\n              state: FILE_UPLOADER_ITEM_STATE.EDITING,\n              invalid: true,\n              validityMessage: 'File size exceeds limit',\n              supplementalValidityMessage:\n                '500kb max file size. Select a new file and try again.',\n            }\n      );\n      this.requestUpdate();\n    } else {\n      // Simulates network request time\n      const rand = Math.random() * 1000;\n      await delay(rand);\n      this._files = this._files.map((item) =>\n        id !== item.id\n          ? item\n          : {\n              ...item,\n              state: FILE_UPLOADER_ITEM_STATE.UPLOADED,\n            }\n      );\n      this.requestUpdate();\n      // Shows x icon after 1 second\n      await delay(1000);\n      this._files = this._files.map((item) =>\n        id !== item.id\n          ? item\n          : {\n              ...item,\n              state: FILE_UPLOADER_ITEM_STATE.EDITING,\n            }\n      );\n      this.requestUpdate();\n    }\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 the drop container 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   * The label text.\n   */\n  @property({ attribute: 'label-text' })\n  labelText = '';\n\n  /**\n   * `true` if the 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 size of the file uploader items.\n   */\n  @property({ reflect: true })\n  size = FILE_UPLOADER_ITEM_SIZE.REGULAR;\n\n  render() {\n    const {\n      accept,\n      disabled,\n      helperText,\n      labelText,\n      multiple,\n      size,\n      _files: files,\n      _handleChange: handleChange,\n      _handleDelete: handleDelete,\n    } = this;\n    return html`\n      <cds-file-uploader\n        helper-text=\"${ifDefined(helperText)}\"\n        label-text=\"${ifDefined(labelText)}\">\n        <cds-file-drop-container\n          accept=\"${ifDefined(accept)}\"\n          ?disabled=\"${disabled}\"\n          ?multiple=\"${multiple}\"\n          @cds-file-drop-container-changed=\"${handleChange}\">\n          Drag and drop files here or click to upload\n        </cds-file-drop-container>\n        ${files.map(\n          ({\n            id,\n            invalid,\n            file,\n            state,\n            supplementalValidityMessage,\n            validityMessage,\n          }) => html`\n            <cds-file-uploader-item\n              data-file-id=\"${id}\"\n              ?invalid=\"${invalid}\"\n              size=\"${ifDefined(size)}\"\n              state=\"${ifDefined(state)}\"\n              validity-message=\"${ifDefined(validityMessage)}\"\n              @cds-file-uploader-item-deleted=\"${handleDelete}\">\n              ${file.name}\n              <span slot=\"validity-message-supplement\"\n                >${supplementalValidityMessage}</span\n              >\n            </cds-file-uploader-item>\n          `\n        )}\n      </cds-file-uploader>\n    `;\n  }\n}\n"]}
+{"version":3,"sources":["components/file-uploader/demo-file-uploader.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAkB,UAAU,EAAiB,MAAM,aAAa,CAAC;AAKxE,OAAO,SAAS,CAAC;AAEjB,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAG/C;;;;;;GAMG;AAEH,MAAM,CAAC,OAAO,OAAO,qBAAsB,SAAQ,UAAU;IAC3D;;OAEG;IACH,OAAO,CAAC,MAAM,CAAkB;IAEhC;;;;OAIG;IACH,OAAO,CAAC,aAAa;IAsBrB;;;;OAIG;IACH,OAAO,CAAC,aAAa;IAMrB;;;;OAIG;YACW,eAAe;IA2C7B;;OAEG;IAEH,MAAM,SAAM;IAEZ;;OAEG;IAEH,MAAM,UAAS;IAEf;;OAEG;IAEH,UAAU,SAAa;IAEvB;;OAEG;IAEH,WAAW,SAAc;IAEzB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,eAAe,SAAM;IAErB;;OAEG;IAEH,SAAS,SAAM;IAEf;;OAEG;IAEH,gBAAgB,SAAM;IAEtB;;OAEG;IAEH,UAAU,SAAM;IAEhB;;;OAGG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,IAAI,cAAsB;IAE1B;;OAEG;IAEH,UAAU,SAAM;IAEhB,MAAM;CAwDP","file":"demo-file-uploader.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, property, LitElement, customElement } from 'lit-element';\n\nimport { delay } from 'bluebird';\nimport { prefix } from '../../globals/settings';\nimport { ifDefined } from 'lit/directives/if-defined';\nimport './index';\nimport { FILE_UPLOADER_ITEM_STATE } from './file-uploader-item';\nimport { BUTTON_SIZE } from '../button/button';\nimport { FileData } from './stories/types';\n\n/**\n * A class to manage file uploading states, like sending file contents to server.\n * DEMONSTRATION-PURPOSE ONLY.\n * Data/state handling in file uploading tends to involve lots of application-specific logics\n * and thus abstracting everything in a library won't be a good return on investment\n * vs. letting users copy code here and implement features that fit their needs.\n */\n@customElement(`${prefix}-ce-demo-file-uploader`)\nexport default class CDSCEDemoFileUploader extends LitElement {\n  /**\n   * The files being uploaded.\n   */\n  private _files: FileData[] = [];\n\n  /**\n   * Handles `cds-drop-container-changed` on `<cds-file-drop-container>`.\n   *\n   * @param event The event.\n   */\n  private _handleChange(event: CustomEvent) {\n    const { addedFiles } = event.detail;\n    const newFiles: FileData[] = addedFiles.map(\n      (item) =>\n        ({\n          id: Math.random().toString(36).slice(2),\n          file: item,\n          state: FILE_UPLOADER_ITEM_STATE.UPLOADING,\n        } as FileData)\n    );\n    const { multiple, _files: files, _simulateUpload: simulateUpload } = this;\n    if (multiple) {\n      this._files = files.concat(newFiles);\n      this.requestUpdate();\n      newFiles.forEach(simulateUpload, this);\n    } else if (addedFiles.length > 0) {\n      this._files = files.concat(newFiles[0]);\n      this.requestUpdate();\n      this._simulateUpload(newFiles[0]);\n    }\n  }\n\n  /**\n   * Handles `cds-file-uploader-item-deleted` on `<cds-file-uploader-item>`.\n   *\n   * @param event The event.\n   */\n  private _handleDelete(event: CustomEvent) {\n    const { fileId: idToDelete } = (event.target as HTMLElement).dataset;\n    this._files = this._files.filter(({ id }) => idToDelete !== id);\n    this.requestUpdate();\n  }\n\n  /**\n   * Simulates updating file.\n   *\n   * @param data The data of the file being uploaded.\n   */\n  private async _simulateUpload(data: FileData) {\n    const { id, file } = data;\n    if (file.size > 524288) {\n      this._files = this._files.map((item) =>\n        id !== item.id\n          ? item\n          : {\n              ...item,\n              state: FILE_UPLOADER_ITEM_STATE.EDIT,\n              invalid: true,\n              errorSubject: 'File size exceeds limit',\n              errorBody:\n                '500kb max file size. Select a new file and try again.',\n            }\n      );\n      this.requestUpdate();\n    } else {\n      // Simulates network request time\n      const rand = Math.random() * 1000;\n      await delay(rand);\n      this._files = this._files.map((item) =>\n        id !== item.id\n          ? item\n          : {\n              ...item,\n              state: FILE_UPLOADER_ITEM_STATE.COMPLETE,\n            }\n      );\n      this.requestUpdate();\n      // Shows x icon after 1 second\n      await delay(1000);\n      this._files = this._files.map((item) =>\n        id !== item.id\n          ? item\n          : {\n              ...item,\n              state: FILE_UPLOADER_ITEM_STATE.EDIT,\n            }\n      );\n      this.requestUpdate();\n    }\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 the drop container should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  button = false;\n\n  /**\n   * Button kind.\n   */\n  @property({ attribute: 'button-kind' })\n  buttonKind = 'primary';\n\n  /**\n   * Button label.\n   */\n  @property({ attribute: 'button-label' })\n  buttonLabel = 'Add file';\n\n  /**\n   * `true` if the drop container should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Icon description.\n   */\n  @property({ attribute: 'icon-description' })\n  iconDescription = '';\n\n  /**\n   * The input name.\n   */\n  @property({ attribute: 'input-name' })\n  inputName = '';\n\n  /**\n   * The label description text.\n   */\n  @property({ attribute: 'label-description' })\n  labelDescription = '';\n\n  /**\n   * The label title.\n   */\n  @property({ attribute: 'label-title' })\n  labelTitle = '';\n\n  /**\n   * `true` if the 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 size of the button item.\n   */\n  @property({ reflect: true })\n  size = BUTTON_SIZE.MEDIUM;\n\n  /**\n   * The state of this file uploader item.\n   */\n  @property({ reflect: true, attribute: 'input-state' })\n  inputState = '';\n\n  render() {\n    const {\n      accept,\n      button,\n      buttonKind,\n      buttonLabel,\n      disabled,\n      labelDescription,\n      labelTitle,\n      multiple,\n      size,\n      inputState,\n      iconDescription,\n      _files: files,\n      _handleChange: handleChange,\n      _handleDelete: handleDelete,\n    } = this;\n    return html`\n      <cds-file-uploader\n        label-description=\"${ifDefined(labelDescription)}\"\n        label-title=\"${ifDefined(labelTitle)}\"\n        ?disabled=\"${disabled}\">\n        ${!button\n          ? html` <cds-file-uploader-drop-container\n              accept=\"${ifDefined(accept)}\"\n              ?multiple=\"${multiple}\"\n              name=\"${ifDefined(this.inputName)}\"\n              @cds-file-uploader-drop-container-changed=\"${handleChange}\">\n              Drag and drop files here or click to upload\n            </cds-file-uploader-drop-container>`\n          : html` <cds-file-uploader-button\n              size=\"${ifDefined(size)}\"\n              button-kind=\"${buttonKind}\"\n              accept=\"${ifDefined(accept)}\"\n              name=\"${ifDefined(this.inputName)}\"\n              ?multiple=\"${multiple}\"\n              @cds-file-uploader-button-changed=\"${handleChange}\">\n              ${buttonLabel}\n            </cds-file-uploader-button>`}\n        ${files.map(\n          ({ id, invalid, file, state, errorSubject, errorBody }) => html`\n            <cds-file-uploader-item\n              data-file-id=\"${id}\"\n              ?invalid=\"${invalid}\"\n              state=\"${inputState || ifDefined(state)}\"\n              icon-description=\"${ifDefined(iconDescription)}\"\n              error-subject=\"${ifDefined(errorSubject)}\"\n              error-body=\"${ifDefined(errorBody)}\"\n              @cds-file-uploader-item-deleted=\"${handleDelete}\">\n              ${file.name}\n            </cds-file-uploader-item>\n          `\n        )}\n      </cds-file-uploader>\n    `;\n  }\n}\n"]}