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

package/es/components/modal/modal-footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-footer.js","names":["classMap","html","customElement","LitElement","settings","styles","prefix","BXModalFooter","_decorate","_initialize","_LitElement","constructor","args","F","d","kind","key","value","_handleSlotChange","event","selectorButtons","_hasMoreThanTwoButtons","target","assignedNodes","filter","node","nodeType","Node","ELEMENT_NODE","matches","length","requestUpdate","render","hasMoreThanTwoButtons","handleSlotChange","classes","_t","_","static"],"sources":["components/modal/modal-footer.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2022\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit-html/directives/class-map';\nimport { html, customElement, LitElement } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport styles from './modal.scss';\n\nconst { prefix } = settings;\n\n/**\n * Modal footer.\n *\n * @element bx-modal-footer\n */\n@customElement(`${prefix}-modal-footer`)\nclass BXModalFooter extends LitElement {\n  /**\n   * `true` if this modal footer has more than two buttons.\n   */\n  private _hasMoreThanTwoButtons = false;\n\n  /**\n   * Handles `slotchange` event.\n   */\n  private _handleSlotChange(event: Event) {\n    const { selectorButtons } = this.constructor as typeof BXModalFooter;\n    this._hasMoreThanTwoButtons =\n      (event.target as HTMLSlotElement)\n        .assignedNodes()\n        .filter(\n          (node) =>\n            node.nodeType === Node.ELEMENT_NODE &&\n            (node as Element).matches(selectorButtons)\n        ).length > 2;\n    this.requestUpdate();\n  }\n\n  render() {\n    const {\n      _hasMoreThanTwoButtons: hasMoreThanTwoButtons,\n      _handleSlotChange: handleSlotChange,\n    } = this;\n    const classes = classMap({\n      [`${prefix}--modal-footer`]: true,\n      [`${prefix}--modal-footer--three-button`]: hasMoreThanTwoButtons,\n    });\n    return html`\n      <div class=\"${classes}\">\n        <slot @slotchange=\"${handleSlotChange}\"></slot>\n      </div>\n    `;\n  }\n\n  /**\n   * A selector that selects the child buttons.\n   */\n  static get selectorButtons() {\n    return `${prefix}-btn,${prefix}-modal-footer-button`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXModalFooter;\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,QAAQ,QAAQ,+BAA+B;AACxD,SAASC,IAAI,EAAEC,aAAa,EAAEC,UAAU,QAAQ,aAAa;AAC7D,OAAOC,QAAQ,MAAM,0CAA0C;AAC/D,OAAOC,MAAM,MAAM,kBAAc;AAEjC,MAAM;EAAEC;AAAO,CAAC,GAAGF,QAAQ;;AAE3B;AACA;AACA;AACA;AACA;AAJA,IAMMG,aAAa,GAAAC,SAAA,EADlBN,aAAa,CAAE,GAAEI,MAAO,eAAc,CAAC,aAAAG,WAAA,EAAAC,WAAA;EAAxC,MACMH,aAAa,SAAAG,WAAA,CAAoB;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EA8CvC;EAAC;IAAAI,CAAA,EA9CKN,aAAa;IAAAO,CAAA;MAAAC,IAAA;MAAAC,GAAA;MAAAC,MAAA;QAAA,OAIgB,KAAK;MAAA;IAAA;MAAAF,IAAA;MAAAC,GAAA;MAAAC,KAAA;MAHtC;AACF;AACA;;MAGE;AACF;AACA;MACE,SAAAC,kBAA0BC,KAAY,EAAE;QACtC,MAAM;UAAEC;QAAgB,CAAC,GAAG,IAAI,CAACT,WAAmC;QACpE,IAAI,CAACU,sBAAsB,GACxBF,KAAK,CAACG,MAAM,CACVC,aAAa,EAAE,CACfC,MAAM,CACJC,IAAI,IACHA,IAAI,CAACC,QAAQ,KAAKC,IAAI,CAACC,YAAY,IAClCH,IAAI,CAAaI,OAAO,CAACT,eAAe,CAAC,CAC7C,CAACU,MAAM,GAAG,CAAC;QAChB,IAAI,CAACC,aAAa,EAAE;MACtB;IAAC;MAAAhB,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAED,SAAAe,OAAA,EAAS;QACP,MAAM;UACJX,sBAAsB,EAAEY,qBAAqB;UAC7Cf,iBAAiB,EAAEgB;QACrB,CAAC,GAAG,IAAI;QACR,MAAMC,OAAO,GAAGnC,QAAQ,CAAC;UACvB,CAAE,GAAEM,MAAO,gBAAe,GAAG,IAAI;UACjC,CAAE,GAAEA,MAAO,8BAA6B,GAAG2B;QAC7C,CAAC,CAAC;QACF,OAAOhC,IAAI,CAAAmC,EAAA,KAAAA,EAAA,GAAAC,CAAA,iEACKF,OAAO,EACED,gBAAgB;MAG3C;;MAEA;AACF;AACA;IAFE;MAAAnB,IAAA;MAAAuB,MAAA;MAAAtB,GAAA;MAAAC,KAAA,EAGA,SAAAG,gBAAA,EAA6B;QAC3B,OAAQ,GAAEd,MAAO,QAAOA,MAAO,sBAAqB;MACtD;IAAC;MAAAS,IAAA;MAAAuB,MAAA;MAAAtB,GAAA;MAAAC,MAAA;QAAA,OAEeZ,MAAM;MAAA;IAAA;EAAA;AAAA,GA7CIF,UAAU;AAgDtC,eAAeI,aAAa"}
+{"version":3,"file":"modal-footer.js","names":["classMap","html","LitElement","settings","styles","carbonElement","customElement","prefix","BXModalFooter","_decorate","_initialize","_LitElement","constructor","args","F","d","kind","key","value","_handleSlotChange","event","selectorButtons","_hasMoreThanTwoButtons","target","assignedNodes","filter","node","nodeType","Node","ELEMENT_NODE","matches","length","requestUpdate","render","hasMoreThanTwoButtons","handleSlotChange","classes","_t","_","static"],"sources":["components/modal/modal-footer.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-html/directives/class-map';\nimport { html, LitElement } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport styles from './modal.scss';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nconst { prefix } = settings;\n\n/**\n * Modal footer.\n *\n * @element bx-modal-footer\n */\n@customElement(`${prefix}-modal-footer`)\nclass BXModalFooter extends LitElement {\n  /**\n   * `true` if this modal footer has more than two buttons.\n   */\n  private _hasMoreThanTwoButtons = false;\n\n  /**\n   * Handles `slotchange` event.\n   */\n  private _handleSlotChange(event: Event) {\n    const { selectorButtons } = this.constructor as typeof BXModalFooter;\n    this._hasMoreThanTwoButtons =\n      (event.target as HTMLSlotElement)\n        .assignedNodes()\n        .filter(\n          (node) =>\n            node.nodeType === Node.ELEMENT_NODE &&\n            (node as Element).matches(selectorButtons)\n        ).length > 2;\n    this.requestUpdate();\n  }\n\n  render() {\n    const {\n      _hasMoreThanTwoButtons: hasMoreThanTwoButtons,\n      _handleSlotChange: handleSlotChange,\n    } = this;\n    const classes = classMap({\n      [`${prefix}--modal-footer`]: true,\n      [`${prefix}--modal-footer--three-button`]: hasMoreThanTwoButtons,\n    });\n    return html`\n      <div class=\"${classes}\">\n        <slot @slotchange=\"${handleSlotChange}\"></slot>\n      </div>\n    `;\n  }\n\n  /**\n   * A selector that selects the child buttons.\n   */\n  static get selectorButtons() {\n    return `${prefix}-btn,${prefix}-modal-footer-button`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXModalFooter;\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,QAAQ,QAAQ,+BAA+B;AACxD,SAASC,IAAI,EAAEC,UAAU,QAAQ,aAAa;AAC9C,OAAOC,QAAQ,MAAM,0CAA0C;AAC/D,OAAOC,MAAM,MAAM,kBAAc;AACjC,SAASC,aAAa,IAAIC,aAAa,QAAQ,yCAAyC;AAExF,MAAM;EAAEC;AAAO,CAAC,GAAGJ,QAAQ;;AAE3B;AACA;AACA;AACA;AACA;AAJA,IAMMK,aAAa,GAAAC,SAAA,EADlBH,aAAa,CAAE,GAAEC,MAAO,eAAc,CAAC,aAAAG,WAAA,EAAAC,WAAA;EAAxC,MACMH,aAAa,SAAAG,WAAA,CAAoB;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EA8CvC;EAAC;IAAAI,CAAA,EA9CKN,aAAa;IAAAO,CAAA;MAAAC,IAAA;MAAAC,GAAA;MAAAC,MAAA;QAAA,OAIgB,KAAK;MAAA;IAAA;MAAAF,IAAA;MAAAC,GAAA;MAAAC,KAAA;MAHtC;AACF;AACA;;MAGE;AACF;AACA;MACE,SAAAC,kBAA0BC,KAAY,EAAE;QACtC,MAAM;UAAEC;QAAgB,CAAC,GAAG,IAAI,CAACT,WAAmC;QACpE,IAAI,CAACU,sBAAsB,GACxBF,KAAK,CAACG,MAAM,CACVC,aAAa,EAAE,CACfC,MAAM,CACJC,IAAI,IACHA,IAAI,CAACC,QAAQ,KAAKC,IAAI,CAACC,YAAY,IAClCH,IAAI,CAAaI,OAAO,CAACT,eAAe,CAAC,CAC7C,CAACU,MAAM,GAAG,CAAC;QAChB,IAAI,CAACC,aAAa,EAAE;MACtB;IAAC;MAAAhB,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAED,SAAAe,OAAA,EAAS;QACP,MAAM;UACJX,sBAAsB,EAAEY,qBAAqB;UAC7Cf,iBAAiB,EAAEgB;QACrB,CAAC,GAAG,IAAI;QACR,MAAMC,OAAO,GAAGpC,QAAQ,CAAC;UACvB,CAAE,GAAEO,MAAO,gBAAe,GAAG,IAAI;UACjC,CAAE,GAAEA,MAAO,8BAA6B,GAAG2B;QAC7C,CAAC,CAAC;QACF,OAAOjC,IAAI,CAAAoC,EAAA,KAAAA,EAAA,GAAAC,CAAA,iEACKF,OAAO,EACED,gBAAgB;MAG3C;;MAEA;AACF;AACA;IAFE;MAAAnB,IAAA;MAAAuB,MAAA;MAAAtB,GAAA;MAAAC,KAAA,EAGA,SAAAG,gBAAA,EAA6B;QAC3B,OAAQ,GAAEd,MAAO,QAAOA,MAAO,sBAAqB;MACtD;IAAC;MAAAS,IAAA;MAAAuB,MAAA;MAAAtB,GAAA;MAAAC,MAAA;QAAA,OAEed,MAAM;MAAA;IAAA;EAAA;AAAA,GA7CIF,UAAU;AAgDtC,eAAeM,aAAa"}

package/es/components/modal/modal-header.d.ts

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

package/es/components/modal/modal-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/modal/modal-header.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAuB,UAAU,EAAE,MAAM,aAAa,CAAC;AAM9D;;;;GAIG;AACH,cACM,aAAc,SAAQ,UAAU;IACpC,MAAM;IAIN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,aAAa,CAAC","file":"modal-header.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2022\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, customElement, LitElement } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport styles from './modal.scss';\n\nconst { prefix } = settings;\n\n/**\n * Modal header.\n *\n * @element bx-modal-header\n */\n@customElement(`${prefix}-modal-header`)\nclass BXModalHeader extends LitElement {\n  render() {\n    return html` <slot></slot> `;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXModalHeader;\n"]}
+{"version":3,"sources":["components/modal/modal-header.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAQ,UAAU,EAAE,MAAM,aAAa,CAAC;AAO/C;;;;GAIG;AACH,cACM,aAAc,SAAQ,UAAU;IACpC,MAAM;IAIN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,aAAa,CAAC","file":"modal-header.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, LitElement } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport styles from './modal.scss';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nconst { prefix } = settings;\n\n/**\n * Modal header.\n *\n * @element bx-modal-header\n */\n@customElement(`${prefix}-modal-header`)\nclass BXModalHeader extends LitElement {\n  render() {\n    return html` <slot></slot> `;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXModalHeader;\n"]}

package/es/components/modal/modal-header.js

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

package/es/components/modal/modal-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-header.js","names":["html","customElement","LitElement","settings","styles","prefix","BXModalHeader","_decorate","_initialize","_LitElement","constructor","args","F","d","kind","key","value","render","_t","_","static"],"sources":["components/modal/modal-header.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2022\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, customElement, LitElement } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport styles from './modal.scss';\n\nconst { prefix } = settings;\n\n/**\n * Modal header.\n *\n * @element bx-modal-header\n */\n@customElement(`${prefix}-modal-header`)\nclass BXModalHeader extends LitElement {\n  render() {\n    return html` <slot></slot> `;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXModalHeader;\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,EAAEC,aAAa,EAAEC,UAAU,QAAQ,aAAa;AAC7D,OAAOC,QAAQ,MAAM,0CAA0C;AAC/D,OAAOC,MAAM,MAAM,kBAAc;AAEjC,MAAM;EAAEC;AAAO,CAAC,GAAGF,QAAQ;;AAE3B;AACA;AACA;AACA;AACA;AAJA,IAMMG,aAAa,GAAAC,SAAA,EADlBN,aAAa,CAAE,GAAEI,MAAO,eAAc,CAAC,aAAAG,WAAA,EAAAC,WAAA;EAAxC,MACMH,aAAa,SAAAG,WAAA,CAAoB;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EAMvC;EAAC;IAAAI,CAAA,EANKN,aAAa;IAAAO,CAAA;MAAAC,IAAA;MAAAC,GAAA;MAAAC,KAAA,EACjB,SAAAC,OAAA,EAAS;QACP,OAAOjB,IAAI,CAAAkB,EAAA,KAAAA,EAAA,GAAAC,CAAA;MACb;IAAC;MAAAL,IAAA;MAAAM,MAAA;MAAAL,GAAA;MAAAC,MAAA;QAAA,OAEeZ,MAAM;MAAA;IAAA;EAAA;AAAA,GALIF,UAAU;AAQtC,eAAeI,aAAa"}
+{"version":3,"file":"modal-header.js","names":["html","LitElement","settings","styles","carbonElement","customElement","prefix","BXModalHeader","_decorate","_initialize","_LitElement","constructor","args","F","d","kind","key","value","render","_t","_","static"],"sources":["components/modal/modal-header.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, LitElement } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport styles from './modal.scss';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nconst { prefix } = settings;\n\n/**\n * Modal header.\n *\n * @element bx-modal-header\n */\n@customElement(`${prefix}-modal-header`)\nclass BXModalHeader extends LitElement {\n  render() {\n    return html` <slot></slot> `;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXModalHeader;\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,EAAEC,UAAU,QAAQ,aAAa;AAC9C,OAAOC,QAAQ,MAAM,0CAA0C;AAC/D,OAAOC,MAAM,MAAM,kBAAc;AACjC,SAASC,aAAa,IAAIC,aAAa,QAAQ,yCAAyC;AAExF,MAAM;EAAEC;AAAO,CAAC,GAAGJ,QAAQ;;AAE3B;AACA;AACA;AACA;AACA;AAJA,IAMMK,aAAa,GAAAC,SAAA,EADlBH,aAAa,CAAE,GAAEC,MAAO,eAAc,CAAC,aAAAG,WAAA,EAAAC,WAAA;EAAxC,MACMH,aAAa,SAAAG,WAAA,CAAoB;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EAMvC;EAAC;IAAAI,CAAA,EANKN,aAAa;IAAAO,CAAA;MAAAC,IAAA;MAAAC,GAAA;MAAAC,KAAA,EACjB,SAAAC,OAAA,EAAS;QACP,OAAOlB,IAAI,CAAAmB,EAAA,KAAAA,EAAA,GAAAC,CAAA;MACb;IAAC;MAAAL,IAAA;MAAAM,MAAA;MAAAL,GAAA;MAAAC,MAAA;QAAA,OAEed,MAAM;MAAA;IAAA;EAAA;AAAA,GALIF,UAAU;AAQtC,eAAeM,aAAa"}

package/es/components/modal/modal-heading.d.ts

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

package/es/components/modal/modal-heading.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/modal/modal-heading.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAQ,UAAU,EAAiB,MAAM,aAAa,CAAC;AAM9D;;;;GAIG;AACH,cACM,cAAe,SAAQ,UAAU;IACrC,MAAM;IAIN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,cAAc,CAAC","file":"modal-heading.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2022\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, LitElement, customElement } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport styles from './modal.scss';\n\nconst { prefix } = settings;\n\n/**\n * Modal heading.\n *\n * @element bx-modal-heading\n */\n@customElement(`${prefix}-modal-heading`)\nclass BXModalHeading extends LitElement {\n  render() {\n    return html` <slot></slot> `;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXModalHeading;\n"]}
+{"version":3,"sources":["components/modal/modal-heading.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAQ,UAAU,EAAE,MAAM,aAAa,CAAC;AAO/C;;;;GAIG;AACH,cACM,cAAe,SAAQ,UAAU;IACrC,MAAM;IAIN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,cAAc,CAAC","file":"modal-heading.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, LitElement } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport styles from './modal.scss';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nconst { prefix } = settings;\n\n/**\n * Modal heading.\n *\n * @element bx-modal-heading\n */\n@customElement(`${prefix}-modal-heading`)\nclass BXModalHeading extends LitElement {\n  render() {\n    return html` <slot></slot> `;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXModalHeading;\n"]}

package/es/components/modal/modal-heading.js

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

package/es/components/modal/modal-heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-heading.js","names":["html","LitElement","customElement","settings","styles","prefix","BXModalHeading","_decorate","_initialize","_LitElement","constructor","args","F","d","kind","key","value","render","_t","_","static"],"sources":["components/modal/modal-heading.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2022\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, LitElement, customElement } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport styles from './modal.scss';\n\nconst { prefix } = settings;\n\n/**\n * Modal heading.\n *\n * @element bx-modal-heading\n */\n@customElement(`${prefix}-modal-heading`)\nclass BXModalHeading extends LitElement {\n  render() {\n    return html` <slot></slot> `;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXModalHeading;\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,EAAEC,UAAU,EAAEC,aAAa,QAAQ,aAAa;AAC7D,OAAOC,QAAQ,MAAM,0CAA0C;AAC/D,OAAOC,MAAM,MAAM,kBAAc;AAEjC,MAAM;EAAEC;AAAO,CAAC,GAAGF,QAAQ;;AAE3B;AACA;AACA;AACA;AACA;AAJA,IAMMG,cAAc,GAAAC,SAAA,EADnBL,aAAa,CAAE,GAAEG,MAAO,gBAAe,CAAC,aAAAG,WAAA,EAAAC,WAAA;EAAzC,MACMH,cAAc,SAAAG,WAAA,CAAoB;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EAMxC;EAAC;IAAAI,CAAA,EANKN,cAAc;IAAAO,CAAA;MAAAC,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAClB,SAAAC,OAAA,EAAS;QACP,OAAOjB,IAAI,CAAAkB,EAAA,KAAAA,EAAA,GAAAC,CAAA;MACb;IAAC;MAAAL,IAAA;MAAAM,MAAA;MAAAL,GAAA;MAAAC,MAAA;QAAA,OAEeZ,MAAM;MAAA;IAAA;EAAA;AAAA,GALKH,UAAU;AAQvC,eAAeK,cAAc"}
+{"version":3,"file":"modal-heading.js","names":["html","LitElement","settings","styles","carbonElement","customElement","prefix","BXModalHeading","_decorate","_initialize","_LitElement","constructor","args","F","d","kind","key","value","render","_t","_","static"],"sources":["components/modal/modal-heading.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, LitElement } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport styles from './modal.scss';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nconst { prefix } = settings;\n\n/**\n * Modal heading.\n *\n * @element bx-modal-heading\n */\n@customElement(`${prefix}-modal-heading`)\nclass BXModalHeading extends LitElement {\n  render() {\n    return html` <slot></slot> `;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXModalHeading;\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,EAAEC,UAAU,QAAQ,aAAa;AAC9C,OAAOC,QAAQ,MAAM,0CAA0C;AAC/D,OAAOC,MAAM,MAAM,kBAAc;AACjC,SAASC,aAAa,IAAIC,aAAa,QAAQ,yCAAyC;AAExF,MAAM;EAAEC;AAAO,CAAC,GAAGJ,QAAQ;;AAE3B;AACA;AACA;AACA;AACA;AAJA,IAMMK,cAAc,GAAAC,SAAA,EADnBH,aAAa,CAAE,GAAEC,MAAO,gBAAe,CAAC,aAAAG,WAAA,EAAAC,WAAA;EAAzC,MACMH,cAAc,SAAAG,WAAA,CAAoB;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EAMxC;EAAC;IAAAI,CAAA,EANKN,cAAc;IAAAO,CAAA;MAAAC,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAClB,SAAAC,OAAA,EAAS;QACP,OAAOlB,IAAI,CAAAmB,EAAA,KAAAA,EAAA,GAAAC,CAAA;MACb;IAAC;MAAAL,IAAA;MAAAM,MAAA;MAAAL,GAAA;MAAAC,MAAA;QAAA,OAEed,MAAM;MAAA;IAAA;EAAA;AAAA,GALKF,UAAU;AAQvC,eAAeM,cAAc"}

package/es/components/modal/modal-label.d.ts

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

package/es/components/modal/modal-label.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/modal/modal-label.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAQ,UAAU,EAAiB,MAAM,aAAa,CAAC;AAM9D;;;;GAIG;AACH,cACM,YAAa,SAAQ,UAAU;IACnC,MAAM;IAIN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,YAAY,CAAC","file":"modal-label.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2022\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, LitElement, customElement } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport styles from './modal.scss';\n\nconst { prefix } = settings;\n\n/**\n * Modal label.\n *\n * @element bx-modal-label\n */\n@customElement(`${prefix}-modal-label`)\nclass BXModalLabel extends LitElement {\n  render() {\n    return html` <slot></slot> `;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXModalLabel;\n"]}
+{"version":3,"sources":["components/modal/modal-label.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAQ,UAAU,EAAE,MAAM,aAAa,CAAC;AAO/C;;;;GAIG;AACH,cACM,YAAa,SAAQ,UAAU;IACnC,MAAM;IAIN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,YAAY,CAAC","file":"modal-label.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, LitElement } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport styles from './modal.scss';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nconst { prefix } = settings;\n\n/**\n * Modal label.\n *\n * @element bx-modal-label\n */\n@customElement(`${prefix}-modal-label`)\nclass BXModalLabel extends LitElement {\n  render() {\n    return html` <slot></slot> `;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXModalLabel;\n"]}

package/es/components/modal/modal-label.js

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

package/es/components/modal/modal-label.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-label.js","names":["html","LitElement","customElement","settings","styles","prefix","BXModalLabel","_decorate","_initialize","_LitElement","constructor","args","F","d","kind","key","value","render","_t","_","static"],"sources":["components/modal/modal-label.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2022\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, LitElement, customElement } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport styles from './modal.scss';\n\nconst { prefix } = settings;\n\n/**\n * Modal label.\n *\n * @element bx-modal-label\n */\n@customElement(`${prefix}-modal-label`)\nclass BXModalLabel extends LitElement {\n  render() {\n    return html` <slot></slot> `;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXModalLabel;\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,EAAEC,UAAU,EAAEC,aAAa,QAAQ,aAAa;AAC7D,OAAOC,QAAQ,MAAM,0CAA0C;AAC/D,OAAOC,MAAM,MAAM,kBAAc;AAEjC,MAAM;EAAEC;AAAO,CAAC,GAAGF,QAAQ;;AAE3B;AACA;AACA;AACA;AACA;AAJA,IAMMG,YAAY,GAAAC,SAAA,EADjBL,aAAa,CAAE,GAAEG,MAAO,cAAa,CAAC,aAAAG,WAAA,EAAAC,WAAA;EAAvC,MACMH,YAAY,SAAAG,WAAA,CAAoB;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EAMtC;EAAC;IAAAI,CAAA,EANKN,YAAY;IAAAO,CAAA;MAAAC,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAChB,SAAAC,OAAA,EAAS;QACP,OAAOjB,IAAI,CAAAkB,EAAA,KAAAA,EAAA,GAAAC,CAAA;MACb;IAAC;MAAAL,IAAA;MAAAM,MAAA;MAAAL,GAAA;MAAAC,MAAA;QAAA,OAEeZ,MAAM;MAAA;IAAA;EAAA;AAAA,GALGH,UAAU;AAQrC,eAAeK,YAAY"}
+{"version":3,"file":"modal-label.js","names":["html","LitElement","settings","styles","carbonElement","customElement","prefix","BXModalLabel","_decorate","_initialize","_LitElement","constructor","args","F","d","kind","key","value","render","_t","_","static"],"sources":["components/modal/modal-label.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, LitElement } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport styles from './modal.scss';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nconst { prefix } = settings;\n\n/**\n * Modal label.\n *\n * @element bx-modal-label\n */\n@customElement(`${prefix}-modal-label`)\nclass BXModalLabel extends LitElement {\n  render() {\n    return html` <slot></slot> `;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXModalLabel;\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,EAAEC,UAAU,QAAQ,aAAa;AAC9C,OAAOC,QAAQ,MAAM,0CAA0C;AAC/D,OAAOC,MAAM,MAAM,kBAAc;AACjC,SAASC,aAAa,IAAIC,aAAa,QAAQ,yCAAyC;AAExF,MAAM;EAAEC;AAAO,CAAC,GAAGJ,QAAQ;;AAE3B;AACA;AACA;AACA;AACA;AAJA,IAMMK,YAAY,GAAAC,SAAA,EADjBH,aAAa,CAAE,GAAEC,MAAO,cAAa,CAAC,aAAAG,WAAA,EAAAC,WAAA;EAAvC,MACMH,YAAY,SAAAG,WAAA,CAAoB;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EAMtC;EAAC;IAAAI,CAAA,EANKN,YAAY;IAAAO,CAAA;MAAAC,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAChB,SAAAC,OAAA,EAAS;QACP,OAAOlB,IAAI,CAAAmB,EAAA,KAAAA,EAAA,GAAAC,CAAA;MACb;IAAC;MAAAL,IAAA;MAAAM,MAAA;MAAAL,GAAA;MAAAC,MAAA;QAAA,OAEed,MAAM;MAAA;IAAA;EAAA;AAAA,GALGF,UAAU;AAQrC,eAAeM,YAAY"}

package/es/components/modal/modal.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"sources":["components/modal/modal.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,EAAwC,UAAU,EAAE,MAAM,aAAa,CAAC;AAG/E,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAIpC,OAAO,EAAE,UAAU,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CtB;;;;;;;;;GASG;AACH,cACM,OAAQ,SAAQ,YAA6B;IACjD;;OAEG;IACH,OAAO,CAAC,SAAS,CAAwB;IAEzC;;OAEG;IAEH,OAAO,CAAC,kBAAkB,CAAqB;IAE/C;;OAEG;IAEH,OAAO,CAAC,gBAAgB,CAAqB;IAE7C;;;;OAIG;IAGH,OAAO,CAAC,YAAY,CAIlB;IAEF;;;;OAIG;IAGH,OAAO,CAAC,WAAW,CA+CjB;IAIF,OAAO,CAAC,cAAc,CAIpB;IAEF;;;;OAIG;IACH,OAAO,CAAC,qBAAqB;IAU7B;;;;OAIG;IACH,OAAO,CAAC,yBAAyB;IA0BjC;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,IAAI,UAAS;IAEb;;OAEG;IAEH,IAAI,aAAsB;IAE1B,MAAM;IAiCA,OAAO,CAAC,iBAAiB,KAAA;IAgC/B;;;OAGG;IACH,OAAO,CAAC,MAAM,CAAC,MAAM;IAMrB;;OAEG;IACH,MAAM,KAAK,mBAAmB,WAE7B;IAED;;OAEG;IACH,MAAM,KAAK,gBAAgB,WAE1B;IAED;;OAEG;IACH,MAAM,KAAK,oBAAoB,WAE9B;IAED;;;OAGG;IACH,MAAM,KAAK,gBAAgB,WAE1B;IAED;;OAEG;IACH,MAAM,KAAK,UAAU,WAEpB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,OAAO,CAAC","file":"modal.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2022\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport settings from 'carbon-components/es/globals/js/settings';\nimport { classMap } from 'lit-html/directives/class-map';\nimport { html, property, query, customElement, LitElement } from 'lit-element';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { MODAL_SIZE } from './defs';\nimport styles from './modal.scss';\nimport { selectorTabbable } from '../../globals/settings';\n\nexport { MODAL_SIZE };\n\nconst { prefix } = settings;\n\n// eslint-disable-next-line no-bitwise\nconst PRECEDING =\n  Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;\n// eslint-disable-next-line no-bitwise\nconst FOLLOWING =\n  Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;\n\n/**\n * Tries to focus on the given elements and bails out if one of them is successful.\n *\n * @param elems The elements.\n * @param reverse `true` to go through the list in reverse order.\n * @returns `true` if one of the attempts is successful, `false` otherwise.\n */\nfunction tryFocusElems(\n  elems: NodeListOf<HTMLElement>,\n  reverse: boolean = false\n) {\n  if (!reverse) {\n    for (let i = 0; i < elems.length; ++i) {\n      const elem = elems[i];\n      elem.focus();\n      if (elem.ownerDocument!.activeElement === elem) {\n        return true;\n      }\n    }\n  } else {\n    for (let i = elems.length - 1; i >= 0; --i) {\n      const elem = elems[i];\n      elem.focus();\n      if (elem.ownerDocument!.activeElement === elem) {\n        return true;\n      }\n    }\n  }\n  return false;\n}\n\n/**\n * Modal.\n *\n * @element bx-modal\n * @csspart dialog The dialog.\n * @fires bx-modal-beingclosed\n *   The custom event fired before this modal is being closed upon a user gesture.\n *   Cancellation of this event stops the user-initiated action of closing this modal.\n * @fires bx-modal-closed - The custom event fired after this modal is closed upon a user gesture.\n */\n@customElement(`${prefix}-modal`)\nclass BXModal extends HostListenerMixin(LitElement) {\n  /**\n   * The element that had focus before this modal gets open.\n   */\n  private _launcher: Element | null = null;\n\n  /**\n   * Node to track focus going outside of modal content.\n   */\n  @query('#start-sentinel')\n  private _startSentinelNode!: HTMLAnchorElement;\n\n  /**\n   * Node to track focus going outside of modal content.\n   */\n  @query('#end-sentinel')\n  private _endSentinelNode!: HTMLAnchorElement;\n\n  /**\n   * Handles `click` event on this element.\n   *\n   * @param event The event.\n   */\n  @HostListener('click')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleClick = (event: MouseEvent) => {\n    if (event.composedPath().indexOf(this.shadowRoot!) < 0) {\n      this._handleUserInitiatedClose(event.target);\n    }\n  };\n\n  /**\n   * Handles `blur` event on this element.\n   *\n   * @param event The event.\n   */\n  @HostListener('shadowRoot:focusout')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleBlur = async ({ target, relatedTarget }: FocusEvent) => {\n    const {\n      open,\n      _startSentinelNode: startSentinelNode,\n      _endSentinelNode: endSentinelNode,\n    } = this;\n    const oldContains = target !== this && this.contains(target as Node);\n    const currentContains =\n      relatedTarget !== this &&\n      (this.contains(relatedTarget as Node) ||\n        (this.shadowRoot?.contains(relatedTarget as Node) &&\n          relatedTarget !== (endSentinelNode as Node)));\n\n    // Performs focus wrapping if _all_ of the following is met:\n    // * This modal is open\n    // * The viewport still has focus\n    // * Modal body used to have focus but no longer has focus\n    const { selectorTabbable: selectorTabbableForModal } = this\n      .constructor as typeof BXModal;\n    if (open && relatedTarget && oldContains && !currentContains) {\n      const comparisonResult = (target as Node).compareDocumentPosition(\n        relatedTarget as Node\n      );\n      // eslint-disable-next-line no-bitwise\n      if (relatedTarget === startSentinelNode || comparisonResult & PRECEDING) {\n        await (this.constructor as typeof BXModal)._delay();\n        if (\n          !tryFocusElems(\n            this.querySelectorAll(selectorTabbableForModal),\n            true\n          ) &&\n          relatedTarget !== this\n        ) {\n          this.focus();\n        }\n      }\n      // eslint-disable-next-line no-bitwise\n      else if (\n        relatedTarget === endSentinelNode ||\n        comparisonResult & FOLLOWING\n      ) {\n        await (this.constructor as typeof BXModal)._delay();\n        if (!tryFocusElems(this.querySelectorAll(selectorTabbableForModal))) {\n          this.focus();\n        }\n      }\n    }\n  };\n\n  @HostListener('document:keydown')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeydown = ({ key, target }: KeyboardEvent) => {\n    if (key === 'Esc' || key === 'Escape') {\n      this._handleUserInitiatedClose(target);\n    }\n  };\n\n  /**\n   * Handles `click` event on the modal container.\n   *\n   * @param event The event.\n   */\n  private _handleClickContainer(event: MouseEvent) {\n    if (\n      (event.target as Element).matches(\n        (this.constructor as typeof BXModal).selectorCloseButton\n      )\n    ) {\n      this._handleUserInitiatedClose(event.target);\n    }\n  }\n\n  /**\n   * Handles user-initiated close request of this modal.\n   *\n   * @param triggeredBy The element that triggered this close request.\n   */\n  private _handleUserInitiatedClose(triggeredBy: EventTarget | null) {\n    if (this.open) {\n      const init = {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n        detail: {\n          triggeredBy,\n        },\n      };\n      if (\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof BXModal).eventBeforeClose,\n            init\n          )\n        )\n      ) {\n        this.open = false;\n        this.dispatchEvent(\n          new CustomEvent((this.constructor as typeof BXModal).eventClose, init)\n        );\n      }\n    }\n  }\n\n  /**\n   * The additional CSS class names for the container <div> of the element.\n   */\n  @property({ attribute: 'container-class' })\n  containerClass = '';\n\n  /**\n   * `true` if the modal should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Modal size.\n   */\n  @property({ reflect: true })\n  size = MODAL_SIZE.REGULAR;\n\n  render() {\n    const { size } = this;\n    const containerClass = this.containerClass\n      .split(' ')\n      .filter(Boolean)\n      .reduce((acc, item) => ({ ...acc, [item]: true }), {});\n    const containerClasses = classMap({\n      [`${prefix}--modal-container`]: true,\n      [`${prefix}--modal-container--${size}`]: size,\n      ...containerClass,\n    });\n    return html`\n      <a\n        id=\"start-sentinel\"\n        class=\"${prefix}--visually-hidden\"\n        href=\"javascript:void 0\"\n        role=\"navigation\"></a>\n      <div\n        part=\"dialog\"\n        class=${containerClasses}\n        role=\"dialog\"\n        tabindex=\"-1\"\n        @click=${this._handleClickContainer}>\n        <slot></slot>\n      </div>\n      <a\n        id=\"end-sentinel\"\n        class=\"${prefix}--visually-hidden\"\n        href=\"javascript:void 0\"\n        role=\"navigation\"></a>\n    `;\n  }\n\n  async updated(changedProperties) {\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this._launcher = this.ownerDocument!.activeElement;\n        const primaryFocusNode = this.querySelector(\n          (this.constructor as typeof BXModal).selectorPrimaryFocus\n        );\n        await (this.constructor as typeof BXModal)._delay();\n        if (primaryFocusNode) {\n          // For cases where a `carbon-web-components` component (e.g. `<bx-btn>`) being `primaryFocusNode`,\n          // where its first update/render cycle that makes it focusable happens after `<bx-modal>`'s first update/render cycle\n          (primaryFocusNode as HTMLElement).focus();\n        } else if (\n          !tryFocusElems(\n            this.querySelectorAll(\n              (this.constructor as typeof BXModal).selectorTabbable\n            ),\n            true\n          )\n        ) {\n          this.focus();\n        }\n      } else if (\n        this._launcher &&\n        typeof (this._launcher as HTMLElement).focus === 'function'\n      ) {\n        (this._launcher as HTMLElement).focus();\n        this._launcher = null;\n      }\n    }\n  }\n\n  /**\n   * @param ms The number of milliseconds.\n   * @returns A promise that is resolves after the given milliseconds.\n   */\n  private static _delay(ms: number = 0) {\n    return new Promise((resolve) => {\n      setTimeout(resolve, ms);\n    });\n  }\n\n  /**\n   * A selector selecting buttons that should close this modal.\n   */\n  static get selectorCloseButton() {\n    return `[data-modal-close],${prefix}-modal-close-button`;\n  }\n\n  /**\n   * A selector selecting tabbable nodes.\n   */\n  static get selectorTabbable() {\n    return selectorTabbable;\n  }\n\n  /**\n   * A selector selecting the nodes that should be focused when modal gets open.\n   */\n  static get selectorPrimaryFocus() {\n    return `[data-modal-primary-focus],${prefix}-modal-footer ${prefix}-btn[kind=\"primary\"]`;\n  }\n\n  /**\n   * The name of the custom event fired before this modal is being closed upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of closing this modal.\n   */\n  static get eventBeforeClose() {\n    return `${prefix}-modal-beingclosed`;\n  }\n\n  /**\n   * The name of the custom event fired after this modal is closed upon a user gesture.\n   */\n  static get eventClose() {\n    return `${prefix}-modal-closed`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXModal;\n"]}
+{"version":3,"sources":["components/modal/modal.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,EAAyB,UAAU,EAAE,MAAM,aAAa,CAAC;AAGhE,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAKpC,OAAO,EAAE,UAAU,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CtB;;;;;;;;;GASG;AACH,cACM,OAAQ,SAAQ,YAA6B;IACjD;;OAEG;IACH,OAAO,CAAC,SAAS,CAAwB;IAEzC;;OAEG;IAEH,OAAO,CAAC,kBAAkB,CAAqB;IAE/C;;OAEG;IAEH,OAAO,CAAC,gBAAgB,CAAqB;IAE7C;;;;OAIG;IAGH,OAAO,CAAC,YAAY,CAIlB;IAEF;;;;OAIG;IAGH,OAAO,CAAC,WAAW,CA+CjB;IAIF,OAAO,CAAC,cAAc,CAIpB;IAEF;;;;OAIG;IACH,OAAO,CAAC,qBAAqB;IAU7B;;;;OAIG;IACH,OAAO,CAAC,yBAAyB;IA0BjC;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,IAAI,UAAS;IAEb;;OAEG;IAEH,IAAI,aAAsB;IAE1B,MAAM;IAiCA,OAAO,CAAC,iBAAiB,KAAA;IAgC/B;;;OAGG;IACH,OAAO,CAAC,MAAM,CAAC,MAAM;IAMrB;;OAEG;IACH,MAAM,KAAK,mBAAmB,WAE7B;IAED;;OAEG;IACH,MAAM,KAAK,gBAAgB,WAE1B;IAED;;OAEG;IACH,MAAM,KAAK,oBAAoB,WAE9B;IAED;;;OAGG;IACH,MAAM,KAAK,gBAAgB,WAE1B;IAED;;OAEG;IACH,MAAM,KAAK,UAAU,WAEpB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,OAAO,CAAC","file":"modal.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport settings from 'carbon-components/es/globals/js/settings';\nimport { classMap } from 'lit-html/directives/class-map';\nimport { html, property, query, LitElement } from 'lit-element';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { MODAL_SIZE } from './defs';\nimport styles from './modal.scss';\nimport { selectorTabbable } from '../../globals/settings';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { MODAL_SIZE };\n\nconst { prefix } = settings;\n\n// eslint-disable-next-line no-bitwise\nconst PRECEDING =\n  Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;\n// eslint-disable-next-line no-bitwise\nconst FOLLOWING =\n  Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;\n\n/**\n * Tries to focus on the given elements and bails out if one of them is successful.\n *\n * @param elems The elements.\n * @param reverse `true` to go through the list in reverse order.\n * @returns `true` if one of the attempts is successful, `false` otherwise.\n */\nfunction tryFocusElems(\n  elems: NodeListOf<HTMLElement>,\n  reverse: boolean = false\n) {\n  if (!reverse) {\n    for (let i = 0; i < elems.length; ++i) {\n      const elem = elems[i];\n      elem.focus();\n      if (elem.ownerDocument!.activeElement === elem) {\n        return true;\n      }\n    }\n  } else {\n    for (let i = elems.length - 1; i >= 0; --i) {\n      const elem = elems[i];\n      elem.focus();\n      if (elem.ownerDocument!.activeElement === elem) {\n        return true;\n      }\n    }\n  }\n  return false;\n}\n\n/**\n * Modal.\n *\n * @element bx-modal\n * @csspart dialog The dialog.\n * @fires bx-modal-beingclosed\n *   The custom event fired before this modal is being closed upon a user gesture.\n *   Cancellation of this event stops the user-initiated action of closing this modal.\n * @fires bx-modal-closed - The custom event fired after this modal is closed upon a user gesture.\n */\n@customElement(`${prefix}-modal`)\nclass BXModal extends HostListenerMixin(LitElement) {\n  /**\n   * The element that had focus before this modal gets open.\n   */\n  private _launcher: Element | null = null;\n\n  /**\n   * Node to track focus going outside of modal content.\n   */\n  @query('#start-sentinel')\n  private _startSentinelNode!: HTMLAnchorElement;\n\n  /**\n   * Node to track focus going outside of modal content.\n   */\n  @query('#end-sentinel')\n  private _endSentinelNode!: HTMLAnchorElement;\n\n  /**\n   * Handles `click` event on this element.\n   *\n   * @param event The event.\n   */\n  @HostListener('click')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleClick = (event: MouseEvent) => {\n    if (event.composedPath().indexOf(this.shadowRoot!) < 0) {\n      this._handleUserInitiatedClose(event.target);\n    }\n  };\n\n  /**\n   * Handles `blur` event on this element.\n   *\n   * @param event The event.\n   */\n  @HostListener('shadowRoot:focusout')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleBlur = async ({ target, relatedTarget }: FocusEvent) => {\n    const {\n      open,\n      _startSentinelNode: startSentinelNode,\n      _endSentinelNode: endSentinelNode,\n    } = this;\n    const oldContains = target !== this && this.contains(target as Node);\n    const currentContains =\n      relatedTarget !== this &&\n      (this.contains(relatedTarget as Node) ||\n        (this.shadowRoot?.contains(relatedTarget as Node) &&\n          relatedTarget !== (endSentinelNode as Node)));\n\n    // Performs focus wrapping if _all_ of the following is met:\n    // * This modal is open\n    // * The viewport still has focus\n    // * Modal body used to have focus but no longer has focus\n    const { selectorTabbable: selectorTabbableForModal } = this\n      .constructor as typeof BXModal;\n    if (open && relatedTarget && oldContains && !currentContains) {\n      const comparisonResult = (target as Node).compareDocumentPosition(\n        relatedTarget as Node\n      );\n      // eslint-disable-next-line no-bitwise\n      if (relatedTarget === startSentinelNode || comparisonResult & PRECEDING) {\n        await (this.constructor as typeof BXModal)._delay();\n        if (\n          !tryFocusElems(\n            this.querySelectorAll(selectorTabbableForModal),\n            true\n          ) &&\n          relatedTarget !== this\n        ) {\n          this.focus();\n        }\n      }\n      // eslint-disable-next-line no-bitwise\n      else if (\n        relatedTarget === endSentinelNode ||\n        comparisonResult & FOLLOWING\n      ) {\n        await (this.constructor as typeof BXModal)._delay();\n        if (!tryFocusElems(this.querySelectorAll(selectorTabbableForModal))) {\n          this.focus();\n        }\n      }\n    }\n  };\n\n  @HostListener('document:keydown')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeydown = ({ key, target }: KeyboardEvent) => {\n    if (key === 'Esc' || key === 'Escape') {\n      this._handleUserInitiatedClose(target);\n    }\n  };\n\n  /**\n   * Handles `click` event on the modal container.\n   *\n   * @param event The event.\n   */\n  private _handleClickContainer(event: MouseEvent) {\n    if (\n      (event.target as Element).matches(\n        (this.constructor as typeof BXModal).selectorCloseButton\n      )\n    ) {\n      this._handleUserInitiatedClose(event.target);\n    }\n  }\n\n  /**\n   * Handles user-initiated close request of this modal.\n   *\n   * @param triggeredBy The element that triggered this close request.\n   */\n  private _handleUserInitiatedClose(triggeredBy: EventTarget | null) {\n    if (this.open) {\n      const init = {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n        detail: {\n          triggeredBy,\n        },\n      };\n      if (\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof BXModal).eventBeforeClose,\n            init\n          )\n        )\n      ) {\n        this.open = false;\n        this.dispatchEvent(\n          new CustomEvent((this.constructor as typeof BXModal).eventClose, init)\n        );\n      }\n    }\n  }\n\n  /**\n   * The additional CSS class names for the container <div> of the element.\n   */\n  @property({ attribute: 'container-class' })\n  containerClass = '';\n\n  /**\n   * `true` if the modal should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Modal size.\n   */\n  @property({ reflect: true })\n  size = MODAL_SIZE.REGULAR;\n\n  render() {\n    const { size } = this;\n    const containerClass = this.containerClass\n      .split(' ')\n      .filter(Boolean)\n      .reduce((acc, item) => ({ ...acc, [item]: true }), {});\n    const containerClasses = classMap({\n      [`${prefix}--modal-container`]: true,\n      [`${prefix}--modal-container--${size}`]: size,\n      ...containerClass,\n    });\n    return html`\n      <a\n        id=\"start-sentinel\"\n        class=\"${prefix}--visually-hidden\"\n        href=\"javascript:void 0\"\n        role=\"navigation\"></a>\n      <div\n        part=\"dialog\"\n        class=${containerClasses}\n        role=\"dialog\"\n        tabindex=\"-1\"\n        @click=${this._handleClickContainer}>\n        <slot></slot>\n      </div>\n      <a\n        id=\"end-sentinel\"\n        class=\"${prefix}--visually-hidden\"\n        href=\"javascript:void 0\"\n        role=\"navigation\"></a>\n    `;\n  }\n\n  async updated(changedProperties) {\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this._launcher = this.ownerDocument!.activeElement;\n        const primaryFocusNode = this.querySelector(\n          (this.constructor as typeof BXModal).selectorPrimaryFocus\n        );\n        await (this.constructor as typeof BXModal)._delay();\n        if (primaryFocusNode) {\n          // For cases where a `carbon-web-components` component (e.g. `<bx-btn>`) being `primaryFocusNode`,\n          // where its first update/render cycle that makes it focusable happens after `<bx-modal>`'s first update/render cycle\n          (primaryFocusNode as HTMLElement).focus();\n        } else if (\n          !tryFocusElems(\n            this.querySelectorAll(\n              (this.constructor as typeof BXModal).selectorTabbable\n            ),\n            true\n          )\n        ) {\n          this.focus();\n        }\n      } else if (\n        this._launcher &&\n        typeof (this._launcher as HTMLElement).focus === 'function'\n      ) {\n        (this._launcher as HTMLElement).focus();\n        this._launcher = null;\n      }\n    }\n  }\n\n  /**\n   * @param ms The number of milliseconds.\n   * @returns A promise that is resolves after the given milliseconds.\n   */\n  private static _delay(ms: number = 0) {\n    return new Promise((resolve) => {\n      setTimeout(resolve, ms);\n    });\n  }\n\n  /**\n   * A selector selecting buttons that should close this modal.\n   */\n  static get selectorCloseButton() {\n    return `[data-modal-close],${prefix}-modal-close-button`;\n  }\n\n  /**\n   * A selector selecting tabbable nodes.\n   */\n  static get selectorTabbable() {\n    return selectorTabbable;\n  }\n\n  /**\n   * A selector selecting the nodes that should be focused when modal gets open.\n   */\n  static get selectorPrimaryFocus() {\n    return `[data-modal-primary-focus],${prefix}-modal-footer ${prefix}-btn[kind=\"primary\"]`;\n  }\n\n  /**\n   * The name of the custom event fired before this modal is being closed upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of closing this modal.\n   */\n  static get eventBeforeClose() {\n    return `${prefix}-modal-beingclosed`;\n  }\n\n  /**\n   * The name of the custom event fired after this modal is closed upon a user gesture.\n   */\n  static get eventClose() {\n    return `${prefix}-modal-closed`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXModal;\n"]}

package/es/components/modal/modal.js

@@ -5,7 +5,7 @@ let _ = t => t,
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -13,12 +13,13 @@ let _ = t => t,
 
 import settings from 'carbon-components/es/globals/js/settings';
 import { classMap } from 'lit-html/directives/class-map';
-import { html, property, query, customElement, LitElement } from 'lit-element';
+import { html, property, query, LitElement } from 'lit-element';
 import HostListener from '../../globals/decorators/host-listener';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import { MODAL_SIZE } from './defs';
 import styles from "././modal.css.js";
 import { selectorTabbable as _selectorTabbable } from '../../globals/settings';
+import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 export { MODAL_SIZE };
 const {
   prefix

package/es/components/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","names":["settings","classMap","html","property","query","customElement","LitElement","HostListener","HostListenerMixin","MODAL_SIZE","styles","selectorTabbable","prefix","PRECEDING","Node","DOCUMENT_POSITION_PRECEDING","DOCUMENT_POSITION_CONTAINS","FOLLOWING","DOCUMENT_POSITION_FOLLOWING","DOCUMENT_POSITION_CONTAINED_BY","tryFocusElems","elems","reverse","i","length","elem","focus","ownerDocument","activeElement","BXModal","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","key","value","decorators","event","composedPath","indexOf","shadowRoot","_handleUserInitiatedClose","target","relatedTarget","_this$shadowRoot","open","_startSentinelNode","startSentinelNode","_endSentinelNode","endSentinelNode","oldContains","contains","currentContains","selectorTabbableForModal","comparisonResult","compareDocumentPosition","_delay","querySelectorAll","_handleClickContainer","matches","selectorCloseButton","triggeredBy","init","bubbles","cancelable","composed","detail","dispatchEvent","CustomEvent","eventBeforeClose","eventClose","attribute","type","Boolean","reflect","REGULAR","render","size","containerClass","split","filter","reduce","acc","item","_objectSpread","containerClasses","_t","_","updated","changedProperties","has","_launcher","primaryFocusNode","querySelector","selectorPrimaryFocus","static","ms","Promise","resolve","setTimeout"],"sources":["components/modal/modal.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2022\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport settings from 'carbon-components/es/globals/js/settings';\nimport { classMap } from 'lit-html/directives/class-map';\nimport { html, property, query, customElement, LitElement } from 'lit-element';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { MODAL_SIZE } from './defs';\nimport styles from './modal.scss';\nimport { selectorTabbable } from '../../globals/settings';\n\nexport { MODAL_SIZE };\n\nconst { prefix } = settings;\n\n// eslint-disable-next-line no-bitwise\nconst PRECEDING =\n  Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;\n// eslint-disable-next-line no-bitwise\nconst FOLLOWING =\n  Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;\n\n/**\n * Tries to focus on the given elements and bails out if one of them is successful.\n *\n * @param elems The elements.\n * @param reverse `true` to go through the list in reverse order.\n * @returns `true` if one of the attempts is successful, `false` otherwise.\n */\nfunction tryFocusElems(\n  elems: NodeListOf<HTMLElement>,\n  reverse: boolean = false\n) {\n  if (!reverse) {\n    for (let i = 0; i < elems.length; ++i) {\n      const elem = elems[i];\n      elem.focus();\n      if (elem.ownerDocument!.activeElement === elem) {\n        return true;\n      }\n    }\n  } else {\n    for (let i = elems.length - 1; i >= 0; --i) {\n      const elem = elems[i];\n      elem.focus();\n      if (elem.ownerDocument!.activeElement === elem) {\n        return true;\n      }\n    }\n  }\n  return false;\n}\n\n/**\n * Modal.\n *\n * @element bx-modal\n * @csspart dialog The dialog.\n * @fires bx-modal-beingclosed\n *   The custom event fired before this modal is being closed upon a user gesture.\n *   Cancellation of this event stops the user-initiated action of closing this modal.\n * @fires bx-modal-closed - The custom event fired after this modal is closed upon a user gesture.\n */\n@customElement(`${prefix}-modal`)\nclass BXModal extends HostListenerMixin(LitElement) {\n  /**\n   * The element that had focus before this modal gets open.\n   */\n  private _launcher: Element | null = null;\n\n  /**\n   * Node to track focus going outside of modal content.\n   */\n  @query('#start-sentinel')\n  private _startSentinelNode!: HTMLAnchorElement;\n\n  /**\n   * Node to track focus going outside of modal content.\n   */\n  @query('#end-sentinel')\n  private _endSentinelNode!: HTMLAnchorElement;\n\n  /**\n   * Handles `click` event on this element.\n   *\n   * @param event The event.\n   */\n  @HostListener('click')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleClick = (event: MouseEvent) => {\n    if (event.composedPath().indexOf(this.shadowRoot!) < 0) {\n      this._handleUserInitiatedClose(event.target);\n    }\n  };\n\n  /**\n   * Handles `blur` event on this element.\n   *\n   * @param event The event.\n   */\n  @HostListener('shadowRoot:focusout')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleBlur = async ({ target, relatedTarget }: FocusEvent) => {\n    const {\n      open,\n      _startSentinelNode: startSentinelNode,\n      _endSentinelNode: endSentinelNode,\n    } = this;\n    const oldContains = target !== this && this.contains(target as Node);\n    const currentContains =\n      relatedTarget !== this &&\n      (this.contains(relatedTarget as Node) ||\n        (this.shadowRoot?.contains(relatedTarget as Node) &&\n          relatedTarget !== (endSentinelNode as Node)));\n\n    // Performs focus wrapping if _all_ of the following is met:\n    // * This modal is open\n    // * The viewport still has focus\n    // * Modal body used to have focus but no longer has focus\n    const { selectorTabbable: selectorTabbableForModal } = this\n      .constructor as typeof BXModal;\n    if (open && relatedTarget && oldContains && !currentContains) {\n      const comparisonResult = (target as Node).compareDocumentPosition(\n        relatedTarget as Node\n      );\n      // eslint-disable-next-line no-bitwise\n      if (relatedTarget === startSentinelNode || comparisonResult & PRECEDING) {\n        await (this.constructor as typeof BXModal)._delay();\n        if (\n          !tryFocusElems(\n            this.querySelectorAll(selectorTabbableForModal),\n            true\n          ) &&\n          relatedTarget !== this\n        ) {\n          this.focus();\n        }\n      }\n      // eslint-disable-next-line no-bitwise\n      else if (\n        relatedTarget === endSentinelNode ||\n        comparisonResult & FOLLOWING\n      ) {\n        await (this.constructor as typeof BXModal)._delay();\n        if (!tryFocusElems(this.querySelectorAll(selectorTabbableForModal))) {\n          this.focus();\n        }\n      }\n    }\n  };\n\n  @HostListener('document:keydown')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeydown = ({ key, target }: KeyboardEvent) => {\n    if (key === 'Esc' || key === 'Escape') {\n      this._handleUserInitiatedClose(target);\n    }\n  };\n\n  /**\n   * Handles `click` event on the modal container.\n   *\n   * @param event The event.\n   */\n  private _handleClickContainer(event: MouseEvent) {\n    if (\n      (event.target as Element).matches(\n        (this.constructor as typeof BXModal).selectorCloseButton\n      )\n    ) {\n      this._handleUserInitiatedClose(event.target);\n    }\n  }\n\n  /**\n   * Handles user-initiated close request of this modal.\n   *\n   * @param triggeredBy The element that triggered this close request.\n   */\n  private _handleUserInitiatedClose(triggeredBy: EventTarget | null) {\n    if (this.open) {\n      const init = {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n        detail: {\n          triggeredBy,\n        },\n      };\n      if (\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof BXModal).eventBeforeClose,\n            init\n          )\n        )\n      ) {\n        this.open = false;\n        this.dispatchEvent(\n          new CustomEvent((this.constructor as typeof BXModal).eventClose, init)\n        );\n      }\n    }\n  }\n\n  /**\n   * The additional CSS class names for the container <div> of the element.\n   */\n  @property({ attribute: 'container-class' })\n  containerClass = '';\n\n  /**\n   * `true` if the modal should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Modal size.\n   */\n  @property({ reflect: true })\n  size = MODAL_SIZE.REGULAR;\n\n  render() {\n    const { size } = this;\n    const containerClass = this.containerClass\n      .split(' ')\n      .filter(Boolean)\n      .reduce((acc, item) => ({ ...acc, [item]: true }), {});\n    const containerClasses = classMap({\n      [`${prefix}--modal-container`]: true,\n      [`${prefix}--modal-container--${size}`]: size,\n      ...containerClass,\n    });\n    return html`\n      <a\n        id=\"start-sentinel\"\n        class=\"${prefix}--visually-hidden\"\n        href=\"javascript:void 0\"\n        role=\"navigation\"></a>\n      <div\n        part=\"dialog\"\n        class=${containerClasses}\n        role=\"dialog\"\n        tabindex=\"-1\"\n        @click=${this._handleClickContainer}>\n        <slot></slot>\n      </div>\n      <a\n        id=\"end-sentinel\"\n        class=\"${prefix}--visually-hidden\"\n        href=\"javascript:void 0\"\n        role=\"navigation\"></a>\n    `;\n  }\n\n  async updated(changedProperties) {\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this._launcher = this.ownerDocument!.activeElement;\n        const primaryFocusNode = this.querySelector(\n          (this.constructor as typeof BXModal).selectorPrimaryFocus\n        );\n        await (this.constructor as typeof BXModal)._delay();\n        if (primaryFocusNode) {\n          // For cases where a `carbon-web-components` component (e.g. `<bx-btn>`) being `primaryFocusNode`,\n          // where its first update/render cycle that makes it focusable happens after `<bx-modal>`'s first update/render cycle\n          (primaryFocusNode as HTMLElement).focus();\n        } else if (\n          !tryFocusElems(\n            this.querySelectorAll(\n              (this.constructor as typeof BXModal).selectorTabbable\n            ),\n            true\n          )\n        ) {\n          this.focus();\n        }\n      } else if (\n        this._launcher &&\n        typeof (this._launcher as HTMLElement).focus === 'function'\n      ) {\n        (this._launcher as HTMLElement).focus();\n        this._launcher = null;\n      }\n    }\n  }\n\n  /**\n   * @param ms The number of milliseconds.\n   * @returns A promise that is resolves after the given milliseconds.\n   */\n  private static _delay(ms: number = 0) {\n    return new Promise((resolve) => {\n      setTimeout(resolve, ms);\n    });\n  }\n\n  /**\n   * A selector selecting buttons that should close this modal.\n   */\n  static get selectorCloseButton() {\n    return `[data-modal-close],${prefix}-modal-close-button`;\n  }\n\n  /**\n   * A selector selecting tabbable nodes.\n   */\n  static get selectorTabbable() {\n    return selectorTabbable;\n  }\n\n  /**\n   * A selector selecting the nodes that should be focused when modal gets open.\n   */\n  static get selectorPrimaryFocus() {\n    return `[data-modal-primary-focus],${prefix}-modal-footer ${prefix}-btn[kind=\"primary\"]`;\n  }\n\n  /**\n   * The name of the custom event fired before this modal is being closed upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of closing this modal.\n   */\n  static get eventBeforeClose() {\n    return `${prefix}-modal-beingclosed`;\n  }\n\n  /**\n   * The name of the custom event fired after this modal is closed upon a user gesture.\n   */\n  static get eventClose() {\n    return `${prefix}-modal-closed`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXModal;\n"],"mappings":"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"}
+{"version":3,"file":"modal.js","names":["settings","classMap","html","property","query","LitElement","HostListener","HostListenerMixin","MODAL_SIZE","styles","selectorTabbable","carbonElement","customElement","prefix","PRECEDING","Node","DOCUMENT_POSITION_PRECEDING","DOCUMENT_POSITION_CONTAINS","FOLLOWING","DOCUMENT_POSITION_FOLLOWING","DOCUMENT_POSITION_CONTAINED_BY","tryFocusElems","elems","reverse","i","length","elem","focus","ownerDocument","activeElement","BXModal","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","key","value","decorators","event","composedPath","indexOf","shadowRoot","_handleUserInitiatedClose","target","relatedTarget","_this$shadowRoot","open","_startSentinelNode","startSentinelNode","_endSentinelNode","endSentinelNode","oldContains","contains","currentContains","selectorTabbableForModal","comparisonResult","compareDocumentPosition","_delay","querySelectorAll","_handleClickContainer","matches","selectorCloseButton","triggeredBy","init","bubbles","cancelable","composed","detail","dispatchEvent","CustomEvent","eventBeforeClose","eventClose","attribute","type","Boolean","reflect","REGULAR","render","size","containerClass","split","filter","reduce","acc","item","_objectSpread","containerClasses","_t","_","updated","changedProperties","has","_launcher","primaryFocusNode","querySelector","selectorPrimaryFocus","static","ms","Promise","resolve","setTimeout"],"sources":["components/modal/modal.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport settings from 'carbon-components/es/globals/js/settings';\nimport { classMap } from 'lit-html/directives/class-map';\nimport { html, property, query, LitElement } from 'lit-element';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { MODAL_SIZE } from './defs';\nimport styles from './modal.scss';\nimport { selectorTabbable } from '../../globals/settings';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { MODAL_SIZE };\n\nconst { prefix } = settings;\n\n// eslint-disable-next-line no-bitwise\nconst PRECEDING =\n  Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;\n// eslint-disable-next-line no-bitwise\nconst FOLLOWING =\n  Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;\n\n/**\n * Tries to focus on the given elements and bails out if one of them is successful.\n *\n * @param elems The elements.\n * @param reverse `true` to go through the list in reverse order.\n * @returns `true` if one of the attempts is successful, `false` otherwise.\n */\nfunction tryFocusElems(\n  elems: NodeListOf<HTMLElement>,\n  reverse: boolean = false\n) {\n  if (!reverse) {\n    for (let i = 0; i < elems.length; ++i) {\n      const elem = elems[i];\n      elem.focus();\n      if (elem.ownerDocument!.activeElement === elem) {\n        return true;\n      }\n    }\n  } else {\n    for (let i = elems.length - 1; i >= 0; --i) {\n      const elem = elems[i];\n      elem.focus();\n      if (elem.ownerDocument!.activeElement === elem) {\n        return true;\n      }\n    }\n  }\n  return false;\n}\n\n/**\n * Modal.\n *\n * @element bx-modal\n * @csspart dialog The dialog.\n * @fires bx-modal-beingclosed\n *   The custom event fired before this modal is being closed upon a user gesture.\n *   Cancellation of this event stops the user-initiated action of closing this modal.\n * @fires bx-modal-closed - The custom event fired after this modal is closed upon a user gesture.\n */\n@customElement(`${prefix}-modal`)\nclass BXModal extends HostListenerMixin(LitElement) {\n  /**\n   * The element that had focus before this modal gets open.\n   */\n  private _launcher: Element | null = null;\n\n  /**\n   * Node to track focus going outside of modal content.\n   */\n  @query('#start-sentinel')\n  private _startSentinelNode!: HTMLAnchorElement;\n\n  /**\n   * Node to track focus going outside of modal content.\n   */\n  @query('#end-sentinel')\n  private _endSentinelNode!: HTMLAnchorElement;\n\n  /**\n   * Handles `click` event on this element.\n   *\n   * @param event The event.\n   */\n  @HostListener('click')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleClick = (event: MouseEvent) => {\n    if (event.composedPath().indexOf(this.shadowRoot!) < 0) {\n      this._handleUserInitiatedClose(event.target);\n    }\n  };\n\n  /**\n   * Handles `blur` event on this element.\n   *\n   * @param event The event.\n   */\n  @HostListener('shadowRoot:focusout')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleBlur = async ({ target, relatedTarget }: FocusEvent) => {\n    const {\n      open,\n      _startSentinelNode: startSentinelNode,\n      _endSentinelNode: endSentinelNode,\n    } = this;\n    const oldContains = target !== this && this.contains(target as Node);\n    const currentContains =\n      relatedTarget !== this &&\n      (this.contains(relatedTarget as Node) ||\n        (this.shadowRoot?.contains(relatedTarget as Node) &&\n          relatedTarget !== (endSentinelNode as Node)));\n\n    // Performs focus wrapping if _all_ of the following is met:\n    // * This modal is open\n    // * The viewport still has focus\n    // * Modal body used to have focus but no longer has focus\n    const { selectorTabbable: selectorTabbableForModal } = this\n      .constructor as typeof BXModal;\n    if (open && relatedTarget && oldContains && !currentContains) {\n      const comparisonResult = (target as Node).compareDocumentPosition(\n        relatedTarget as Node\n      );\n      // eslint-disable-next-line no-bitwise\n      if (relatedTarget === startSentinelNode || comparisonResult & PRECEDING) {\n        await (this.constructor as typeof BXModal)._delay();\n        if (\n          !tryFocusElems(\n            this.querySelectorAll(selectorTabbableForModal),\n            true\n          ) &&\n          relatedTarget !== this\n        ) {\n          this.focus();\n        }\n      }\n      // eslint-disable-next-line no-bitwise\n      else if (\n        relatedTarget === endSentinelNode ||\n        comparisonResult & FOLLOWING\n      ) {\n        await (this.constructor as typeof BXModal)._delay();\n        if (!tryFocusElems(this.querySelectorAll(selectorTabbableForModal))) {\n          this.focus();\n        }\n      }\n    }\n  };\n\n  @HostListener('document:keydown')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeydown = ({ key, target }: KeyboardEvent) => {\n    if (key === 'Esc' || key === 'Escape') {\n      this._handleUserInitiatedClose(target);\n    }\n  };\n\n  /**\n   * Handles `click` event on the modal container.\n   *\n   * @param event The event.\n   */\n  private _handleClickContainer(event: MouseEvent) {\n    if (\n      (event.target as Element).matches(\n        (this.constructor as typeof BXModal).selectorCloseButton\n      )\n    ) {\n      this._handleUserInitiatedClose(event.target);\n    }\n  }\n\n  /**\n   * Handles user-initiated close request of this modal.\n   *\n   * @param triggeredBy The element that triggered this close request.\n   */\n  private _handleUserInitiatedClose(triggeredBy: EventTarget | null) {\n    if (this.open) {\n      const init = {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n        detail: {\n          triggeredBy,\n        },\n      };\n      if (\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof BXModal).eventBeforeClose,\n            init\n          )\n        )\n      ) {\n        this.open = false;\n        this.dispatchEvent(\n          new CustomEvent((this.constructor as typeof BXModal).eventClose, init)\n        );\n      }\n    }\n  }\n\n  /**\n   * The additional CSS class names for the container <div> of the element.\n   */\n  @property({ attribute: 'container-class' })\n  containerClass = '';\n\n  /**\n   * `true` if the modal should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Modal size.\n   */\n  @property({ reflect: true })\n  size = MODAL_SIZE.REGULAR;\n\n  render() {\n    const { size } = this;\n    const containerClass = this.containerClass\n      .split(' ')\n      .filter(Boolean)\n      .reduce((acc, item) => ({ ...acc, [item]: true }), {});\n    const containerClasses = classMap({\n      [`${prefix}--modal-container`]: true,\n      [`${prefix}--modal-container--${size}`]: size,\n      ...containerClass,\n    });\n    return html`\n      <a\n        id=\"start-sentinel\"\n        class=\"${prefix}--visually-hidden\"\n        href=\"javascript:void 0\"\n        role=\"navigation\"></a>\n      <div\n        part=\"dialog\"\n        class=${containerClasses}\n        role=\"dialog\"\n        tabindex=\"-1\"\n        @click=${this._handleClickContainer}>\n        <slot></slot>\n      </div>\n      <a\n        id=\"end-sentinel\"\n        class=\"${prefix}--visually-hidden\"\n        href=\"javascript:void 0\"\n        role=\"navigation\"></a>\n    `;\n  }\n\n  async updated(changedProperties) {\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this._launcher = this.ownerDocument!.activeElement;\n        const primaryFocusNode = this.querySelector(\n          (this.constructor as typeof BXModal).selectorPrimaryFocus\n        );\n        await (this.constructor as typeof BXModal)._delay();\n        if (primaryFocusNode) {\n          // For cases where a `carbon-web-components` component (e.g. `<bx-btn>`) being `primaryFocusNode`,\n          // where its first update/render cycle that makes it focusable happens after `<bx-modal>`'s first update/render cycle\n          (primaryFocusNode as HTMLElement).focus();\n        } else if (\n          !tryFocusElems(\n            this.querySelectorAll(\n              (this.constructor as typeof BXModal).selectorTabbable\n            ),\n            true\n          )\n        ) {\n          this.focus();\n        }\n      } else if (\n        this._launcher &&\n        typeof (this._launcher as HTMLElement).focus === 'function'\n      ) {\n        (this._launcher as HTMLElement).focus();\n        this._launcher = null;\n      }\n    }\n  }\n\n  /**\n   * @param ms The number of milliseconds.\n   * @returns A promise that is resolves after the given milliseconds.\n   */\n  private static _delay(ms: number = 0) {\n    return new Promise((resolve) => {\n      setTimeout(resolve, ms);\n    });\n  }\n\n  /**\n   * A selector selecting buttons that should close this modal.\n   */\n  static get selectorCloseButton() {\n    return `[data-modal-close],${prefix}-modal-close-button`;\n  }\n\n  /**\n   * A selector selecting tabbable nodes.\n   */\n  static get selectorTabbable() {\n    return selectorTabbable;\n  }\n\n  /**\n   * A selector selecting the nodes that should be focused when modal gets open.\n   */\n  static get selectorPrimaryFocus() {\n    return `[data-modal-primary-focus],${prefix}-modal-footer ${prefix}-btn[kind=\"primary\"]`;\n  }\n\n  /**\n   * The name of the custom event fired before this modal is being closed upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of closing this modal.\n   */\n  static get eventBeforeClose() {\n    return `${prefix}-modal-beingclosed`;\n  }\n\n  /**\n   * The name of the custom event fired after this modal is closed upon a user gesture.\n   */\n  static get eventClose() {\n    return `${prefix}-modal-closed`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXModal;\n"],"mappings":"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"}

package/es/components/multi-select/multi-select-item.d.ts

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

package/es/components/multi-select/multi-select-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/multi-select/multi-select-item.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAKH,OAAO,cAAc,MAAM,2BAA2B,CAAC;AAKvD;;;;GAIG;AACH,cACM,iBAAkB,SAAQ,cAAc;IAC5C;;OAEG;IAEH,QAAQ,MAAC;IAET;;OAEG;IAEH,aAAa,SAAM;IAEnB,MAAM;IAuBN;;OAEG;IACH,MAAM,KAAK,YAAY,WAEtB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,iBAAiB,CAAC","file":"multi-select-item.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2022\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport settings from 'carbon-components/es/globals/js/settings';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html, property, customElement } from 'lit-element';\nimport BXDropdownItem from '../dropdown/dropdown-item';\nimport styles from './multi-select.scss';\n\nconst { prefix } = settings;\n\n/**\n * Multi select item.\n *\n * @element bx-multi-select-item\n */\n@customElement(`${prefix}-multi-select-item`)\nclass BXMultiSelectItem extends BXDropdownItem {\n  /**\n   * The property to hide when item is filtered from input\n   */\n  @property({ type: Boolean })\n  filtered;\n\n  /**\n   * The `name` attribute for the `<input>` for selection.\n   */\n  @property({ attribute: 'selection-name' })\n  selectionName = '';\n\n  render() {\n    const { disabled, selected, selectionName, value } = this;\n    return html`\n      <div class=\"${prefix}--list-box__menu-item__option\">\n        <div class=\"${prefix}--form-item ${prefix}--checkbox-wrapper\">\n          <input\n            id=\"input\"\n            type=\"checkbox\"\n            class=\"${prefix}--checkbox\"\n            tabindex=\"-1\"\n            readonly\n            ?disabled=${disabled}\n            .checked=${selected}\n            name=\"${ifDefined(selectionName || undefined)}\"\n            value=\"${value}\" />\n          <label for=\"input\" class=\"${prefix}--checkbox-label\">\n            <span class=\"${prefix}--checkbox-label-text\"><slot></slot></span>\n          </label>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * A selector that will return multi select.\n   */\n  static get selectorList() {\n    return `${prefix}-multi-select`;\n  }\n\n  static styles = styles;\n}\n\nexport default BXMultiSelectItem;\n"]}
+{"version":3,"sources":["components/multi-select/multi-select-item.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAKH,OAAO,cAAc,MAAM,2BAA2B,CAAC;AAMvD;;;;GAIG;AACH,cACM,iBAAkB,SAAQ,cAAc;IAC5C;;OAEG;IAEH,QAAQ,MAAC;IAET;;OAEG;IAEH,aAAa,SAAM;IAEnB,MAAM;IAuBN;;OAEG;IACH,MAAM,KAAK,YAAY,WAEtB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,iBAAiB,CAAC","file":"multi-select-item.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport settings from 'carbon-components/es/globals/js/settings';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html, property } from 'lit-element';\nimport BXDropdownItem from '../dropdown/dropdown-item';\nimport styles from './multi-select.scss';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nconst { prefix } = settings;\n\n/**\n * Multi select item.\n *\n * @element bx-multi-select-item\n */\n@customElement(`${prefix}-multi-select-item`)\nclass BXMultiSelectItem extends BXDropdownItem {\n  /**\n   * The property to hide when item is filtered from input\n   */\n  @property({ type: Boolean })\n  filtered;\n\n  /**\n   * The `name` attribute for the `<input>` for selection.\n   */\n  @property({ attribute: 'selection-name' })\n  selectionName = '';\n\n  render() {\n    const { disabled, selected, selectionName, value } = this;\n    return html`\n      <div class=\"${prefix}--list-box__menu-item__option\">\n        <div class=\"${prefix}--form-item ${prefix}--checkbox-wrapper\">\n          <input\n            id=\"input\"\n            type=\"checkbox\"\n            class=\"${prefix}--checkbox\"\n            tabindex=\"-1\"\n            readonly\n            ?disabled=${disabled}\n            .checked=${selected}\n            name=\"${ifDefined(selectionName || undefined)}\"\n            value=\"${value}\" />\n          <label for=\"input\" class=\"${prefix}--checkbox-label\">\n            <span class=\"${prefix}--checkbox-label-text\"><slot></slot></span>\n          </label>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * A selector that will return multi select.\n   */\n  static get selectorList() {\n    return `${prefix}-multi-select`;\n  }\n\n  static styles = styles;\n}\n\nexport default BXMultiSelectItem;\n"]}

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

@@ -4,7 +4,7 @@ let _ = t => t,
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -12,9 +12,10 @@ let _ = t => t,
 
 import settings from 'carbon-components/es/globals/js/settings';
 import { ifDefined } from 'lit-html/directives/if-defined';
-import { html, property, customElement } from 'lit-element';
+import { html, property } from 'lit-element';
 import BXDropdownItem from '../dropdown/dropdown-item';
 import styles from "././multi-select.css.js";
+import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 const {
   prefix
 } = settings;

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

@@ -1 +1 @@
-{"version":3,"file":"multi-select-item.js","names":["settings","ifDefined","html","property","customElement","BXDropdownItem","styles","prefix","BXMultiSelectItem","_decorate","_initialize","_BXDropdownItem","constructor","args","F","d","kind","decorators","type","Boolean","key","value","attribute","render","disabled","selected","selectionName","_t","_","undefined","static","selectorList"],"sources":["components/multi-select/multi-select-item.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2022\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport settings from 'carbon-components/es/globals/js/settings';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html, property, customElement } from 'lit-element';\nimport BXDropdownItem from '../dropdown/dropdown-item';\nimport styles from './multi-select.scss';\n\nconst { prefix } = settings;\n\n/**\n * Multi select item.\n *\n * @element bx-multi-select-item\n */\n@customElement(`${prefix}-multi-select-item`)\nclass BXMultiSelectItem extends BXDropdownItem {\n  /**\n   * The property to hide when item is filtered from input\n   */\n  @property({ type: Boolean })\n  filtered;\n\n  /**\n   * The `name` attribute for the `<input>` for selection.\n   */\n  @property({ attribute: 'selection-name' })\n  selectionName = '';\n\n  render() {\n    const { disabled, selected, selectionName, value } = this;\n    return html`\n      <div class=\"${prefix}--list-box__menu-item__option\">\n        <div class=\"${prefix}--form-item ${prefix}--checkbox-wrapper\">\n          <input\n            id=\"input\"\n            type=\"checkbox\"\n            class=\"${prefix}--checkbox\"\n            tabindex=\"-1\"\n            readonly\n            ?disabled=${disabled}\n            .checked=${selected}\n            name=\"${ifDefined(selectionName || undefined)}\"\n            value=\"${value}\" />\n          <label for=\"input\" class=\"${prefix}--checkbox-label\">\n            <span class=\"${prefix}--checkbox-label-text\"><slot></slot></span>\n          </label>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * A selector that will return multi select.\n   */\n  static get selectorList() {\n    return `${prefix}-multi-select`;\n  }\n\n  static styles = styles;\n}\n\nexport default BXMultiSelectItem;\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,QAAQ,MAAM,0CAA0C;AAC/D,SAASC,SAAS,QAAQ,gCAAgC;AAC1D,SAASC,IAAI,EAAEC,QAAQ,EAAEC,aAAa,QAAQ,aAAa;AAC3D,OAAOC,cAAc,MAAM,2BAA2B;AACtD,OAAOC,MAAM,MAAM,yBAAqB;AAExC,MAAM;EAAEC;AAAO,CAAC,GAAGP,QAAQ;;AAE3B;AACA;AACA;AACA;AACA;AAJA,IAMMQ,iBAAiB,GAAAC,SAAA,EADtBL,aAAa,CAAE,GAAEG,MAAO,oBAAmB,CAAC,aAAAG,WAAA,EAAAC,eAAA;EAA7C,MACMH,iBAAiB,SAAAG,eAAA,CAAwB;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EA4C/C;EAAC;IAAAI,CAAA,EA5CKN,iBAAiB;IAAAO,CAAA;MAAAC,IAAA;MAAAC,UAAA,GAIpBd,QAAQ,CAAC;QAAEe,IAAI,EAAEC;MAAQ,CAAC,CAAC;MAAAC,GAAA;MAAAC,KAAA;IAAA;MAAAL,IAAA;MAAAC,UAAA,GAM3Bd,QAAQ,CAAC;QAAEmB,SAAS,EAAE;MAAiB,CAAC,CAAC;MAAAF,GAAA;MAAAC,MAAA;QAAA,OAC1B,EAAE;MAAA;IAAA;MAAAL,IAAA;MAAAI,GAAA;MAAAC,KAAA;MAVlB;AACF;AACA;;MAIE;AACF;AACA;;MAIE,SAAAE,OAAA,EAAS;QACP,MAAM;UAAEC,QAAQ;UAAEC,QAAQ;UAAEC,aAAa;UAAEL;QAAM,CAAC,GAAG,IAAI;QACzD,OAAOnB,IAAI,CAAAyB,EAAA,KAAAA,EAAA,GAAAC,CAAA,sYACKrB,MAAM,EACJA,MAAM,EAAeA,MAAM,EAI5BA,MAAM,EAGHiB,QAAQ,EACTC,QAAQ,EACXxB,SAAS,CAACyB,aAAa,IAAIG,SAAS,CAAC,EACpCR,KAAK,EACYd,MAAM,EACjBA,MAAM;MAK/B;;MAEA;AACF;AACA;IAFE;MAAAS,IAAA;MAAAc,MAAA;MAAAV,GAAA;MAAAC,KAAA,EAGA,SAAAU,aAAA,EAA0B;QACxB,OAAQ,GAAExB,MAAO,eAAc;MACjC;IAAC;MAAAS,IAAA;MAAAc,MAAA;MAAAV,GAAA;MAAAC,MAAA;QAAA,OAEef,MAAM;MAAA;IAAA;EAAA;AAAA,GA3CQD,cAAc;AA8C9C,eAAeG,iBAAiB"}
+{"version":3,"file":"multi-select-item.js","names":["settings","ifDefined","html","property","BXDropdownItem","styles","carbonElement","customElement","prefix","BXMultiSelectItem","_decorate","_initialize","_BXDropdownItem","constructor","args","F","d","kind","decorators","type","Boolean","key","value","attribute","render","disabled","selected","selectionName","_t","_","undefined","static","selectorList"],"sources":["components/multi-select/multi-select-item.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport settings from 'carbon-components/es/globals/js/settings';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html, property } from 'lit-element';\nimport BXDropdownItem from '../dropdown/dropdown-item';\nimport styles from './multi-select.scss';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nconst { prefix } = settings;\n\n/**\n * Multi select item.\n *\n * @element bx-multi-select-item\n */\n@customElement(`${prefix}-multi-select-item`)\nclass BXMultiSelectItem extends BXDropdownItem {\n  /**\n   * The property to hide when item is filtered from input\n   */\n  @property({ type: Boolean })\n  filtered;\n\n  /**\n   * The `name` attribute for the `<input>` for selection.\n   */\n  @property({ attribute: 'selection-name' })\n  selectionName = '';\n\n  render() {\n    const { disabled, selected, selectionName, value } = this;\n    return html`\n      <div class=\"${prefix}--list-box__menu-item__option\">\n        <div class=\"${prefix}--form-item ${prefix}--checkbox-wrapper\">\n          <input\n            id=\"input\"\n            type=\"checkbox\"\n            class=\"${prefix}--checkbox\"\n            tabindex=\"-1\"\n            readonly\n            ?disabled=${disabled}\n            .checked=${selected}\n            name=\"${ifDefined(selectionName || undefined)}\"\n            value=\"${value}\" />\n          <label for=\"input\" class=\"${prefix}--checkbox-label\">\n            <span class=\"${prefix}--checkbox-label-text\"><slot></slot></span>\n          </label>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * A selector that will return multi select.\n   */\n  static get selectorList() {\n    return `${prefix}-multi-select`;\n  }\n\n  static styles = styles;\n}\n\nexport default BXMultiSelectItem;\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,QAAQ,MAAM,0CAA0C;AAC/D,SAASC,SAAS,QAAQ,gCAAgC;AAC1D,SAASC,IAAI,EAAEC,QAAQ,QAAQ,aAAa;AAC5C,OAAOC,cAAc,MAAM,2BAA2B;AACtD,OAAOC,MAAM,MAAM,yBAAqB;AACxC,SAASC,aAAa,IAAIC,aAAa,QAAQ,yCAAyC;AAExF,MAAM;EAAEC;AAAO,CAAC,GAAGR,QAAQ;;AAE3B;AACA;AACA;AACA;AACA;AAJA,IAMMS,iBAAiB,GAAAC,SAAA,EADtBH,aAAa,CAAE,GAAEC,MAAO,oBAAmB,CAAC,aAAAG,WAAA,EAAAC,eAAA;EAA7C,MACMH,iBAAiB,SAAAG,eAAA,CAAwB;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EA4C/C;EAAC;IAAAI,CAAA,EA5CKN,iBAAiB;IAAAO,CAAA;MAAAC,IAAA;MAAAC,UAAA,GAIpBf,QAAQ,CAAC;QAAEgB,IAAI,EAAEC;MAAQ,CAAC,CAAC;MAAAC,GAAA;MAAAC,KAAA;IAAA;MAAAL,IAAA;MAAAC,UAAA,GAM3Bf,QAAQ,CAAC;QAAEoB,SAAS,EAAE;MAAiB,CAAC,CAAC;MAAAF,GAAA;MAAAC,MAAA;QAAA,OAC1B,EAAE;MAAA;IAAA;MAAAL,IAAA;MAAAI,GAAA;MAAAC,KAAA;MAVlB;AACF;AACA;;MAIE;AACF;AACA;;MAIE,SAAAE,OAAA,EAAS;QACP,MAAM;UAAEC,QAAQ;UAAEC,QAAQ;UAAEC,aAAa;UAAEL;QAAM,CAAC,GAAG,IAAI;QACzD,OAAOpB,IAAI,CAAA0B,EAAA,KAAAA,EAAA,GAAAC,CAAA,sYACKrB,MAAM,EACJA,MAAM,EAAeA,MAAM,EAI5BA,MAAM,EAGHiB,QAAQ,EACTC,QAAQ,EACXzB,SAAS,CAAC0B,aAAa,IAAIG,SAAS,CAAC,EACpCR,KAAK,EACYd,MAAM,EACjBA,MAAM;MAK/B;;MAEA;AACF;AACA;IAFE;MAAAS,IAAA;MAAAc,MAAA;MAAAV,GAAA;MAAAC,KAAA,EAGA,SAAAU,aAAA,EAA0B;QACxB,OAAQ,GAAExB,MAAO,eAAc;MACjC;IAAC;MAAAS,IAAA;MAAAc,MAAA;MAAAV,GAAA;MAAAC,MAAA;QAAA,OAEejB,MAAM;MAAA;IAAA;EAAA;AAAA,GA3CQD,cAAc;AA8C9C,eAAeK,iBAAiB"}

package/es/components/multi-select/multi-select.d.ts

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

package/es/components/multi-select/multi-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/multi-select/multi-select.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAKL,cAAc,EACf,MAAM,aAAa,CAAC;AAOrB,OAAO,UAAwC,MAAM,sBAAsB,CAAC;AAC5E,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AAGpD,OAAO,EACL,qBAAqB,EACrB,aAAa,EACb,aAAa,GACd,MAAM,sBAAsB,CAAC;AAI9B;;;;;;;;;;;;;GAaG;AACH,cACM,aAAc,SAAQ,UAAU;IAEpC,UAAU,MAAC;IAEX;;OAEG;IACH,OAAO,CAAC,mBAAmB,CAAK;IAEhC;;OAEG;IAEH,OAAO,CAAC,gBAAgB,CAAe;IAEvC;;OAEG;IAEH,OAAO,CAAC,oBAAoB,CAAe;IAE3C;;OAEG;IAEH,OAAO,CAAC,gBAAgB,CAAoB;IAE5C;;OAEG;IAEH,OAAO,CAAC,YAAY,CAAe;IAEnC,SAAS,CAAC,sBAAsB,CAAC,YAAY,CAAC,EAAE,iBAAiB;IAKjE,SAAS,CAAC,mBAAmB,CAAC,YAAY,CAAC,EAAE,iBAAiB;IA6B9D,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,UAAU;IAuB7C;;OAEG;IACH,SAAS,CAAC,oBAAoB,CAAC,KAAK,EAAE,aAAa;IA0BnD;;;OAGG;IAEH,SAAS,CAAC,6BAA6B,CAAC,KAAK,EAAE,aAAa;IAgC5D,SAAS,CAAC,8BAA8B;IAkBxC;;OAEG;IACH,SAAS,CAAC,qBAAqB,IAAI,cAAc;IAoBjD,SAAS,CAAC,8BAA8B,IAAI,cAAc,GAAG,IAAI;IAkBjE;;OAEG;IACH,SAAS,CAAC,YAAY;IAsBtB;;;;OAIG;IACH,SAAS,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM;IA0BrC;;OAEG;IACH,SAAS,CAAC,8BAA8B;IAWxC;;OAEG;IAEH,mBAAmB,SAAM;IAEzB;;OAEG;IAEH,2BAA2B,SAAyB;IAEpD;;OAEG;IAEH,0BAA0B,SAA2B;IAErD,YAAY,CAAC,iBAAiB,KAAA;IAwB9B;;;OAGG;IACH,OAAO,CAAC,MAAM,KAAK,wBAAwB,GAE1C;IAED;;OAEG;IACH,MAAM,KAAK,uBAAuB,WAEjC;IAED;;;OAGG;IACH,MAAM,KAAK,YAAY,WAEtB;IAED;;OAEG;IACH,MAAM,KAAK,oBAAoB,WAE9B;IAED;;OAEG;IACH,MAAM,KAAK,mBAAmB,WAE7B;IAED;;OAEG;IACH,MAAM,KAAK,oBAAoB,WAE9B;IAED;;;OAGG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED;;;OAGG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,aAAa,CAAC","file":"multi-select.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2022\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport settings from 'carbon-components/es/globals/js/settings';\nimport {\n  html,\n  property,\n  query,\n  customElement,\n  TemplateResult,\n} from 'lit-element';\nimport Close16 from '@carbon/icons/lib/close/16';\nimport {\n  filter,\n  forEach,\n  indexOf,\n} from '../../globals/internal/collection-helpers';\nimport BXDropdown, { DROPDOWN_KEYBOARD_ACTION } from '../dropdown/dropdown';\nimport BXMultiSelectItem from './multi-select-item';\nimport styles from './multi-select.scss';\n\nexport {\n  DROPDOWN_COLOR_SCHEME,\n  DROPDOWN_SIZE,\n  DROPDOWN_TYPE,\n} from '../dropdown/dropdown';\n\nconst { prefix } = settings;\n\n/**\n * Multi select.\n *\n * @element bx-multi-select\n * @fires bx-multi-select-beingselected\n *   The custom event fired before a multi select item is selected upon a user gesture.\n *   Cancellation of this event stops changing the user-initiated selection.\n * @fires bx-multi-select-selected - The custom event fired after a multi select item is selected upon a user gesture.\n * @fires bx-multi-select-beingtoggled\n *   The custom event fired before the open state of this multi select is toggled upon a user gesture.\n *   Cancellation of this event stops the user-initiated toggling.\n * @fires bx-multi-select-toggled\n *   The custom event fired after the open state of this multi select is toggled upon a user gesture.\n */\n@customElement(`${prefix}-multi-select`)\nclass BXMultiSelect extends BXDropdown {\n  @property({ type: Boolean })\n  filterable;\n\n  /**\n   * The count of selected items.\n   */\n  private _selectedItemsCount = 0;\n\n  /**\n   * The clear button.\n   */\n  @query('#clear-button')\n  private _clearButtonNode!: HTMLElement;\n\n  /**\n   * The selection button.\n   */\n  @query('#selection-button')\n  private _selectionButtonNode!: HTMLElement;\n\n  /**\n   * The `<input>` for filtering.\n   */\n  @query('input')\n  private _filterInputNode!: HTMLInputElement;\n\n  /**\n   * The trigger button.\n   */\n  @query(`.${prefix}--list-box__field`)\n  private _triggerNode!: HTMLElement;\n\n  protected _selectionShouldChange(itemToSelect?: BXMultiSelectItem) {\n    // If we are selecting an item, assumes we always toggle\n    return Boolean(this.value || itemToSelect);\n  }\n\n  protected _selectionDidChange(itemToSelect?: BXMultiSelectItem) {\n    if (itemToSelect) {\n      itemToSelect.selected = !itemToSelect.selected;\n      this._assistiveStatusText = itemToSelect.selected\n        ? this.selectedItemAssistiveText\n        : this.unselectedItemAssistiveText;\n    } else {\n      forEach(\n        this.querySelectorAll(\n          (this.constructor as typeof BXMultiSelect).selectorItemSelected\n        ),\n        (item) => {\n          (item as BXMultiSelectItem).selected = false;\n        }\n      );\n      this._handleUserInitiatedToggle(false);\n      this._assistiveStatusText = this.unselectedAllAssistiveText;\n    }\n    // Change in `.selected` hasn't been reflected to the corresponding attribute yet\n    this.value = filter(\n      this.querySelectorAll(\n        (this.constructor as typeof BXMultiSelect).selectorItem\n      ),\n      (item) => (item as BXMultiSelectItem).selected\n    )\n      .map((item) => (item as BXMultiSelectItem).value)\n      .join(',');\n  }\n\n  protected _handleClickInner(event: MouseEvent) {\n    if (this._selectionButtonNode?.contains(event.target as Node)) {\n      this._handleUserInitiatedSelectItem();\n      if (this.filterable) {\n        this._filterInputNode.focus();\n      } else {\n        this._triggerNode.focus();\n      }\n    } else if (this._clearButtonNode?.contains(event.target as Node)) {\n      this._handleUserInitiatedClearInput();\n    } else {\n      const shouldIgnoreClickInner = (elem) =>\n        elem.closest &&\n        elem.closest(\n          (this.constructor as typeof BXMultiSelect).selectorIgnoreClickInner\n        );\n      if (!event.composedPath().some(shouldIgnoreClickInner)) {\n        super._handleClickInner(event);\n      }\n      if (this.filterable) this._filterInputNode.focus();\n    }\n  }\n\n  /**\n   * Handler for the `keypress` event, ensures filter still works upon entering space\n   */\n  protected _handleKeypressInner(event: KeyboardEvent) {\n    const { key } = event;\n    const action = (this.constructor as typeof BXDropdown).getAction(key);\n    const { TRIGGERING } = DROPDOWN_KEYBOARD_ACTION;\n\n    if (\n      this._clearButtonNode?.contains(event.target as Node) &&\n      // Space key should be handled by `<input>` unless \"clear selection\" button has focus\n      (action === TRIGGERING || key === ' ')\n    ) {\n      this._handleUserInitiatedClearInput();\n    } else if (this._selectionButtonNode?.contains(event.target as Node)) {\n      this._handleUserInitiatedSelectItem();\n      this.open = true;\n      if (this.filterable) {\n        this._filterInputNode.focus();\n      } else {\n        this._triggerNode.focus();\n      }\n    } else if (this.filterable) {\n      this._handleKeypressInnerFlterable(event);\n    } else {\n      super._handleKeypressInner(event);\n    }\n  }\n\n  /**\n   * Special andler for the `keypress` event, ensures space selection for filterable\n   * variation is disabled\n   */\n\n  protected _handleKeypressInnerFlterable(event: KeyboardEvent) {\n    const { key } = event;\n    const action = (this.constructor as typeof BXDropdown).getAction(key);\n    if (!this.open) {\n      switch (action) {\n        case DROPDOWN_KEYBOARD_ACTION.TRIGGERING:\n          this._handleUserInitiatedToggle(true);\n          break;\n        default:\n          break;\n      }\n    } else {\n      switch (key) {\n        case 'Enter':\n          {\n            const constructor = this.constructor as typeof BXDropdown;\n            const highlightedItem = this.querySelector(\n              constructor.selectorItemHighlighted\n            ) as BXMultiSelectItem;\n            if (highlightedItem) {\n              this._handleUserInitiatedSelectItem(highlightedItem);\n            } else {\n              this._handleUserInitiatedToggle(false);\n            }\n          }\n          break;\n        default:\n          break;\n      }\n    }\n  }\n\n  protected _renderPrecedingTriggerContent() {\n    const { clearSelectionLabel, _selectedItemsCount: selectedItemsCount } =\n      this;\n    return selectedItemsCount === 0\n      ? undefined\n      : html`\n          <div\n            id=\"selection-button\"\n            role=\"button\"\n            class=\"${prefix}--list-box__selection ${prefix}--list-box__selection--multi ${prefix}--tag--filter\"\n            tabindex=\"0\"\n            title=\"${clearSelectionLabel}\">\n            ${selectedItemsCount}\n            ${Close16({ 'aria-label': clearSelectionLabel })}\n          </div>\n        `;\n  }\n\n  /**\n    @returns The main content of the trigger button.\n   */\n  protected _renderTriggerContent(): TemplateResult {\n    const { triggerContent, _selectedItemContent: selectedItemContent } = this;\n    return !this.filterable\n      ? html`\n          <span id=\"trigger-label\" class=\"${prefix}--list-box__label\"\n            >${selectedItemContent || triggerContent}</span\n          >\n        `\n      : html`\n          <input\n            id=\"trigger-label\"\n            class=\"${prefix}--text-input\"\n            placeholder=\"${triggerContent}\"\n            role=\"combobox\"\n            aria-controls=\"menu-body\"\n            aria-autocomplete=\"list\"\n            @input=\"${this._handleInput}\" />\n        `;\n  }\n\n  protected _renderFollowingTriggerContent(): TemplateResult | void {\n    const { clearSelectionLabel, _filterInputNode: filterInputNode } = this;\n    return filterInputNode &&\n      filterInputNode.value.length > 0 &&\n      this.filterable\n      ? html`\n          <div\n            id=\"clear-button\"\n            role=\"button\"\n            class=\"${prefix}--list-box__selection\"\n            tabindex=\"0\"\n            title=\"${clearSelectionLabel}\">\n            ${Close16({ 'aria-label': clearSelectionLabel })}\n          </div>\n        `\n      : undefined;\n  }\n\n  /**\n   * Handles `input` event on the `<input>` for filtering.\n   */\n  protected _handleInput() {\n    const items = this.querySelectorAll(\n      (this.constructor as typeof BXMultiSelect).selectorItem\n    );\n    const inputValue = this._filterInputNode.value.toLocaleLowerCase();\n\n    if (!this.open) this.open = true;\n\n    forEach(items, (item) => {\n      const itemValue = (item as HTMLElement).innerText.toLocaleLowerCase();\n\n      if (!itemValue.includes(inputValue)) {\n        (item as BXMultiSelectItem).setAttribute('filtered', '');\n        (item as BXMultiSelectItem).removeAttribute('highlighted');\n      } else {\n        (item as BXMultiSelectItem).removeAttribute('filtered');\n      }\n    });\n\n    this.requestUpdate();\n  }\n\n  /**\n   * Navigate through dropdown items.\n   *\n   * @param direction `-1` to navigate backward, `1` to navigate forward.\n   */\n  protected _navigate(direction: number) {\n    if (!this.filterable) {\n      this._triggerNode.focus();\n      super._navigate(direction);\n    } else {\n      // only navigate through remaining item\n      const constructor = this.constructor as typeof BXMultiSelect;\n      const items = this.querySelectorAll(constructor.selectorItemResults);\n      const highlightedItem = this.querySelector(\n        constructor.selectorItemHighlighted\n      );\n      const highlightedIndex = indexOf(items, highlightedItem!);\n\n      let nextIndex = highlightedIndex + direction;\n      if (nextIndex < 0) {\n        nextIndex = items.length - 1;\n      }\n      if (nextIndex >= items.length) {\n        nextIndex = 0;\n      }\n      forEach(items, (item, i) => {\n        (item as BXMultiSelectItem).highlighted = i === nextIndex;\n      });\n    }\n  }\n\n  /**\n   * Handles user-initiated clearing the `<input>` for filtering.\n   */\n  protected _handleUserInitiatedClearInput() {\n    const constructor = this.constructor as typeof BXMultiSelect;\n    const items = this.querySelectorAll(constructor.selectorItemFiltered);\n    this._filterInputNode.value = '';\n    this.open = true;\n    this._filterInputNode.focus();\n    forEach(items, (item) => {\n      (item as BXMultiSelectItem).removeAttribute('filtered');\n    });\n  }\n\n  /**\n   * The `aria-label` attribute for the icon to clear selection.\n   */\n  @property({ attribute: 'clear-selection-label' })\n  clearSelectionLabel = '';\n\n  /**\n   * An assistive text for screen reader to announce, telling that an item is unselected.\n   */\n  @property({ attribute: 'unselected-item-assistive-text' })\n  unselectedItemAssistiveText = 'Unselected an item.';\n\n  /**\n   * An assistive text for screen reader to announce, telling that all items are unselected.\n   */\n  @property({ attribute: 'unselected-all-assistive-text' })\n  unselectedAllAssistiveText = 'Unselected all items.';\n\n  shouldUpdate(changedProperties) {\n    const { selectorItem } = this.constructor as typeof BXMultiSelect;\n    if (changedProperties.has('size')) {\n      forEach(this.querySelectorAll(selectorItem), (elem) => {\n        (elem as BXMultiSelectItem).size = this.size;\n      });\n    }\n    if (changedProperties.has('value')) {\n      const { value } = this;\n      const values = !value ? [] : value.split(',');\n      // Updates selection beforehand because our rendering logic for `<bx-multi-select>` looks for selected items via `qSA()`\n      const items = this.querySelectorAll(selectorItem);\n      forEach(items, (elem) => {\n        (elem as BXMultiSelectItem).selected =\n          values.indexOf((elem as BXMultiSelectItem).value) >= 0;\n      });\n      this._selectedItemsCount = filter(\n        items,\n        (elem) => values.indexOf((elem as BXMultiSelectItem).value) >= 0\n      ).length;\n    }\n    return true;\n  }\n\n  /**\n   * A selector to ignore the `click` events from.\n   * Primary for the checkbox label where the `click` event will happen from the associated check box.\n   */\n  private static get selectorIgnoreClickInner() {\n    return `.${prefix}--checkbox-label`;\n  }\n\n  /**\n   * A selector that will return highlighted items.\n   */\n  static get selectorItemHighlighted() {\n    return `${prefix}-multi-select-item[highlighted]`;\n  }\n\n  /**\n   * A selector that will return multi select items.\n   * We use a separate property from `.itemTagName` due to the nature in difference of tag name vs. selector.\n   */\n  static get selectorItem() {\n    return `${prefix}-multi-select-item`;\n  }\n\n  /**\n   * A selector that will return remaining items after a filter.\n   */\n  static get selectorItemFiltered() {\n    return `${prefix}-multi-select-item[filtered]`;\n  }\n\n  /**\n   * A selector that will return remaining items after a filter.\n   */\n  static get selectorItemResults() {\n    return `${prefix}-multi-select-item:not([filtered])`;\n  }\n\n  /**\n   * A selector that will return selected items.\n   */\n  static get selectorItemSelected() {\n    return `${prefix}-multi-select-item[selected]`;\n  }\n\n  /**\n   * The name of the custom event fired before this multi select item is being toggled upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of toggling this multi select item.\n   */\n  static get eventBeforeToggle() {\n    return `${prefix}-multi-select-beingtoggled`;\n  }\n\n  /**\n   * The name of the custom event fired after this multi select item is toggled upon a user gesture.\n   */\n  static get eventToggle() {\n    return `${prefix}-multi-select-toggled`;\n  }\n\n  /**\n   * The name of the custom event fired before a multi select item is selected upon a user gesture.\n   * Cancellation of this event stops changing the user-initiated selection.\n   */\n  static get eventBeforeSelect() {\n    return `${prefix}-multi-select-beingselected`;\n  }\n\n  /**\n   * The name of the custom event fired after a a multi select item is selected upon a user gesture.\n   */\n  static get eventSelect() {\n    return `${prefix}-multi-select-selected`;\n  }\n\n  static styles = styles;\n}\n\nexport default BXMultiSelect;\n"]}
+{"version":3,"sources":["components/multi-select/multi-select.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAyB,cAAc,EAAE,MAAM,aAAa,CAAC;AAOpE,OAAO,UAAwC,MAAM,sBAAsB,CAAC;AAC5E,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AAIpD,OAAO,EACL,qBAAqB,EACrB,aAAa,EACb,aAAa,GACd,MAAM,sBAAsB,CAAC;AAI9B;;;;;;;;;;;;;GAaG;AACH,cACM,aAAc,SAAQ,UAAU;IAEpC,UAAU,MAAC;IAEX;;OAEG;IACH,OAAO,CAAC,mBAAmB,CAAK;IAEhC;;OAEG;IAEH,OAAO,CAAC,gBAAgB,CAAe;IAEvC;;OAEG;IAEH,OAAO,CAAC,oBAAoB,CAAe;IAE3C;;OAEG;IAEH,OAAO,CAAC,gBAAgB,CAAoB;IAE5C;;OAEG;IAEH,OAAO,CAAC,YAAY,CAAe;IAEnC,SAAS,CAAC,sBAAsB,CAAC,YAAY,CAAC,EAAE,iBAAiB;IAKjE,SAAS,CAAC,mBAAmB,CAAC,YAAY,CAAC,EAAE,iBAAiB;IA6B9D,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,UAAU;IAuB7C;;OAEG;IACH,SAAS,CAAC,oBAAoB,CAAC,KAAK,EAAE,aAAa;IA0BnD;;;OAGG;IAEH,SAAS,CAAC,6BAA6B,CAAC,KAAK,EAAE,aAAa;IAgC5D,SAAS,CAAC,8BAA8B;IAkBxC;;OAEG;IACH,SAAS,CAAC,qBAAqB,IAAI,cAAc;IAoBjD,SAAS,CAAC,8BAA8B,IAAI,cAAc,GAAG,IAAI;IAkBjE;;OAEG;IACH,SAAS,CAAC,YAAY;IAsBtB;;;;OAIG;IACH,SAAS,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM;IA0BrC;;OAEG;IACH,SAAS,CAAC,8BAA8B;IAWxC;;OAEG;IAEH,mBAAmB,SAAM;IAEzB;;OAEG;IAEH,2BAA2B,SAAyB;IAEpD;;OAEG;IAEH,0BAA0B,SAA2B;IAErD,YAAY,CAAC,iBAAiB,KAAA;IAwB9B;;;OAGG;IACH,OAAO,CAAC,MAAM,KAAK,wBAAwB,GAE1C;IAED;;OAEG;IACH,MAAM,KAAK,uBAAuB,WAEjC;IAED;;;OAGG;IACH,MAAM,KAAK,YAAY,WAEtB;IAED;;OAEG;IACH,MAAM,KAAK,oBAAoB,WAE9B;IAED;;OAEG;IACH,MAAM,KAAK,mBAAmB,WAE7B;IAED;;OAEG;IACH,MAAM,KAAK,oBAAoB,WAE9B;IAED;;;OAGG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED;;;OAGG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,aAAa,CAAC","file":"multi-select.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport settings from 'carbon-components/es/globals/js/settings';\nimport { html, property, query, TemplateResult } from 'lit-element';\nimport Close16 from '@carbon/icons/lib/close/16';\nimport {\n  filter,\n  forEach,\n  indexOf,\n} from '../../globals/internal/collection-helpers';\nimport BXDropdown, { DROPDOWN_KEYBOARD_ACTION } from '../dropdown/dropdown';\nimport BXMultiSelectItem from './multi-select-item';\nimport styles from './multi-select.scss';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport {\n  DROPDOWN_COLOR_SCHEME,\n  DROPDOWN_SIZE,\n  DROPDOWN_TYPE,\n} from '../dropdown/dropdown';\n\nconst { prefix } = settings;\n\n/**\n * Multi select.\n *\n * @element bx-multi-select\n * @fires bx-multi-select-beingselected\n *   The custom event fired before a multi select item is selected upon a user gesture.\n *   Cancellation of this event stops changing the user-initiated selection.\n * @fires bx-multi-select-selected - The custom event fired after a multi select item is selected upon a user gesture.\n * @fires bx-multi-select-beingtoggled\n *   The custom event fired before the open state of this multi select is toggled upon a user gesture.\n *   Cancellation of this event stops the user-initiated toggling.\n * @fires bx-multi-select-toggled\n *   The custom event fired after the open state of this multi select is toggled upon a user gesture.\n */\n@customElement(`${prefix}-multi-select`)\nclass BXMultiSelect extends BXDropdown {\n  @property({ type: Boolean })\n  filterable;\n\n  /**\n   * The count of selected items.\n   */\n  private _selectedItemsCount = 0;\n\n  /**\n   * The clear button.\n   */\n  @query('#clear-button')\n  private _clearButtonNode!: HTMLElement;\n\n  /**\n   * The selection button.\n   */\n  @query('#selection-button')\n  private _selectionButtonNode!: HTMLElement;\n\n  /**\n   * The `<input>` for filtering.\n   */\n  @query('input')\n  private _filterInputNode!: HTMLInputElement;\n\n  /**\n   * The trigger button.\n   */\n  @query(`.${prefix}--list-box__field`)\n  private _triggerNode!: HTMLElement;\n\n  protected _selectionShouldChange(itemToSelect?: BXMultiSelectItem) {\n    // If we are selecting an item, assumes we always toggle\n    return Boolean(this.value || itemToSelect);\n  }\n\n  protected _selectionDidChange(itemToSelect?: BXMultiSelectItem) {\n    if (itemToSelect) {\n      itemToSelect.selected = !itemToSelect.selected;\n      this._assistiveStatusText = itemToSelect.selected\n        ? this.selectedItemAssistiveText\n        : this.unselectedItemAssistiveText;\n    } else {\n      forEach(\n        this.querySelectorAll(\n          (this.constructor as typeof BXMultiSelect).selectorItemSelected\n        ),\n        (item) => {\n          (item as BXMultiSelectItem).selected = false;\n        }\n      );\n      this._handleUserInitiatedToggle(false);\n      this._assistiveStatusText = this.unselectedAllAssistiveText;\n    }\n    // Change in `.selected` hasn't been reflected to the corresponding attribute yet\n    this.value = filter(\n      this.querySelectorAll(\n        (this.constructor as typeof BXMultiSelect).selectorItem\n      ),\n      (item) => (item as BXMultiSelectItem).selected\n    )\n      .map((item) => (item as BXMultiSelectItem).value)\n      .join(',');\n  }\n\n  protected _handleClickInner(event: MouseEvent) {\n    if (this._selectionButtonNode?.contains(event.target as Node)) {\n      this._handleUserInitiatedSelectItem();\n      if (this.filterable) {\n        this._filterInputNode.focus();\n      } else {\n        this._triggerNode.focus();\n      }\n    } else if (this._clearButtonNode?.contains(event.target as Node)) {\n      this._handleUserInitiatedClearInput();\n    } else {\n      const shouldIgnoreClickInner = (elem) =>\n        elem.closest &&\n        elem.closest(\n          (this.constructor as typeof BXMultiSelect).selectorIgnoreClickInner\n        );\n      if (!event.composedPath().some(shouldIgnoreClickInner)) {\n        super._handleClickInner(event);\n      }\n      if (this.filterable) this._filterInputNode.focus();\n    }\n  }\n\n  /**\n   * Handler for the `keypress` event, ensures filter still works upon entering space\n   */\n  protected _handleKeypressInner(event: KeyboardEvent) {\n    const { key } = event;\n    const action = (this.constructor as typeof BXDropdown).getAction(key);\n    const { TRIGGERING } = DROPDOWN_KEYBOARD_ACTION;\n\n    if (\n      this._clearButtonNode?.contains(event.target as Node) &&\n      // Space key should be handled by `<input>` unless \"clear selection\" button has focus\n      (action === TRIGGERING || key === ' ')\n    ) {\n      this._handleUserInitiatedClearInput();\n    } else if (this._selectionButtonNode?.contains(event.target as Node)) {\n      this._handleUserInitiatedSelectItem();\n      this.open = true;\n      if (this.filterable) {\n        this._filterInputNode.focus();\n      } else {\n        this._triggerNode.focus();\n      }\n    } else if (this.filterable) {\n      this._handleKeypressInnerFlterable(event);\n    } else {\n      super._handleKeypressInner(event);\n    }\n  }\n\n  /**\n   * Special andler for the `keypress` event, ensures space selection for filterable\n   * variation is disabled\n   */\n\n  protected _handleKeypressInnerFlterable(event: KeyboardEvent) {\n    const { key } = event;\n    const action = (this.constructor as typeof BXDropdown).getAction(key);\n    if (!this.open) {\n      switch (action) {\n        case DROPDOWN_KEYBOARD_ACTION.TRIGGERING:\n          this._handleUserInitiatedToggle(true);\n          break;\n        default:\n          break;\n      }\n    } else {\n      switch (key) {\n        case 'Enter':\n          {\n            const constructor = this.constructor as typeof BXDropdown;\n            const highlightedItem = this.querySelector(\n              constructor.selectorItemHighlighted\n            ) as BXMultiSelectItem;\n            if (highlightedItem) {\n              this._handleUserInitiatedSelectItem(highlightedItem);\n            } else {\n              this._handleUserInitiatedToggle(false);\n            }\n          }\n          break;\n        default:\n          break;\n      }\n    }\n  }\n\n  protected _renderPrecedingTriggerContent() {\n    const { clearSelectionLabel, _selectedItemsCount: selectedItemsCount } =\n      this;\n    return selectedItemsCount === 0\n      ? undefined\n      : html`\n          <div\n            id=\"selection-button\"\n            role=\"button\"\n            class=\"${prefix}--list-box__selection ${prefix}--list-box__selection--multi ${prefix}--tag--filter\"\n            tabindex=\"0\"\n            title=\"${clearSelectionLabel}\">\n            ${selectedItemsCount}\n            ${Close16({ 'aria-label': clearSelectionLabel })}\n          </div>\n        `;\n  }\n\n  /**\n    @returns The main content of the trigger button.\n   */\n  protected _renderTriggerContent(): TemplateResult {\n    const { triggerContent, _selectedItemContent: selectedItemContent } = this;\n    return !this.filterable\n      ? html`\n          <span id=\"trigger-label\" class=\"${prefix}--list-box__label\"\n            >${selectedItemContent || triggerContent}</span\n          >\n        `\n      : html`\n          <input\n            id=\"trigger-label\"\n            class=\"${prefix}--text-input\"\n            placeholder=\"${triggerContent}\"\n            role=\"combobox\"\n            aria-controls=\"menu-body\"\n            aria-autocomplete=\"list\"\n            @input=\"${this._handleInput}\" />\n        `;\n  }\n\n  protected _renderFollowingTriggerContent(): TemplateResult | void {\n    const { clearSelectionLabel, _filterInputNode: filterInputNode } = this;\n    return filterInputNode &&\n      filterInputNode.value.length > 0 &&\n      this.filterable\n      ? html`\n          <div\n            id=\"clear-button\"\n            role=\"button\"\n            class=\"${prefix}--list-box__selection\"\n            tabindex=\"0\"\n            title=\"${clearSelectionLabel}\">\n            ${Close16({ 'aria-label': clearSelectionLabel })}\n          </div>\n        `\n      : undefined;\n  }\n\n  /**\n   * Handles `input` event on the `<input>` for filtering.\n   */\n  protected _handleInput() {\n    const items = this.querySelectorAll(\n      (this.constructor as typeof BXMultiSelect).selectorItem\n    );\n    const inputValue = this._filterInputNode.value.toLocaleLowerCase();\n\n    if (!this.open) this.open = true;\n\n    forEach(items, (item) => {\n      const itemValue = (item as HTMLElement).innerText.toLocaleLowerCase();\n\n      if (!itemValue.includes(inputValue)) {\n        (item as BXMultiSelectItem).setAttribute('filtered', '');\n        (item as BXMultiSelectItem).removeAttribute('highlighted');\n      } else {\n        (item as BXMultiSelectItem).removeAttribute('filtered');\n      }\n    });\n\n    this.requestUpdate();\n  }\n\n  /**\n   * Navigate through dropdown items.\n   *\n   * @param direction `-1` to navigate backward, `1` to navigate forward.\n   */\n  protected _navigate(direction: number) {\n    if (!this.filterable) {\n      this._triggerNode.focus();\n      super._navigate(direction);\n    } else {\n      // only navigate through remaining item\n      const constructor = this.constructor as typeof BXMultiSelect;\n      const items = this.querySelectorAll(constructor.selectorItemResults);\n      const highlightedItem = this.querySelector(\n        constructor.selectorItemHighlighted\n      );\n      const highlightedIndex = indexOf(items, highlightedItem!);\n\n      let nextIndex = highlightedIndex + direction;\n      if (nextIndex < 0) {\n        nextIndex = items.length - 1;\n      }\n      if (nextIndex >= items.length) {\n        nextIndex = 0;\n      }\n      forEach(items, (item, i) => {\n        (item as BXMultiSelectItem).highlighted = i === nextIndex;\n      });\n    }\n  }\n\n  /**\n   * Handles user-initiated clearing the `<input>` for filtering.\n   */\n  protected _handleUserInitiatedClearInput() {\n    const constructor = this.constructor as typeof BXMultiSelect;\n    const items = this.querySelectorAll(constructor.selectorItemFiltered);\n    this._filterInputNode.value = '';\n    this.open = true;\n    this._filterInputNode.focus();\n    forEach(items, (item) => {\n      (item as BXMultiSelectItem).removeAttribute('filtered');\n    });\n  }\n\n  /**\n   * The `aria-label` attribute for the icon to clear selection.\n   */\n  @property({ attribute: 'clear-selection-label' })\n  clearSelectionLabel = '';\n\n  /**\n   * An assistive text for screen reader to announce, telling that an item is unselected.\n   */\n  @property({ attribute: 'unselected-item-assistive-text' })\n  unselectedItemAssistiveText = 'Unselected an item.';\n\n  /**\n   * An assistive text for screen reader to announce, telling that all items are unselected.\n   */\n  @property({ attribute: 'unselected-all-assistive-text' })\n  unselectedAllAssistiveText = 'Unselected all items.';\n\n  shouldUpdate(changedProperties) {\n    const { selectorItem } = this.constructor as typeof BXMultiSelect;\n    if (changedProperties.has('size')) {\n      forEach(this.querySelectorAll(selectorItem), (elem) => {\n        (elem as BXMultiSelectItem).size = this.size;\n      });\n    }\n    if (changedProperties.has('value')) {\n      const { value } = this;\n      const values = !value ? [] : value.split(',');\n      // Updates selection beforehand because our rendering logic for `<bx-multi-select>` looks for selected items via `qSA()`\n      const items = this.querySelectorAll(selectorItem);\n      forEach(items, (elem) => {\n        (elem as BXMultiSelectItem).selected =\n          values.indexOf((elem as BXMultiSelectItem).value) >= 0;\n      });\n      this._selectedItemsCount = filter(\n        items,\n        (elem) => values.indexOf((elem as BXMultiSelectItem).value) >= 0\n      ).length;\n    }\n    return true;\n  }\n\n  /**\n   * A selector to ignore the `click` events from.\n   * Primary for the checkbox label where the `click` event will happen from the associated check box.\n   */\n  private static get selectorIgnoreClickInner() {\n    return `.${prefix}--checkbox-label`;\n  }\n\n  /**\n   * A selector that will return highlighted items.\n   */\n  static get selectorItemHighlighted() {\n    return `${prefix}-multi-select-item[highlighted]`;\n  }\n\n  /**\n   * A selector that will return multi select items.\n   * We use a separate property from `.itemTagName` due to the nature in difference of tag name vs. selector.\n   */\n  static get selectorItem() {\n    return `${prefix}-multi-select-item`;\n  }\n\n  /**\n   * A selector that will return remaining items after a filter.\n   */\n  static get selectorItemFiltered() {\n    return `${prefix}-multi-select-item[filtered]`;\n  }\n\n  /**\n   * A selector that will return remaining items after a filter.\n   */\n  static get selectorItemResults() {\n    return `${prefix}-multi-select-item:not([filtered])`;\n  }\n\n  /**\n   * A selector that will return selected items.\n   */\n  static get selectorItemSelected() {\n    return `${prefix}-multi-select-item[selected]`;\n  }\n\n  /**\n   * The name of the custom event fired before this multi select item is being toggled upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of toggling this multi select item.\n   */\n  static get eventBeforeToggle() {\n    return `${prefix}-multi-select-beingtoggled`;\n  }\n\n  /**\n   * The name of the custom event fired after this multi select item is toggled upon a user gesture.\n   */\n  static get eventToggle() {\n    return `${prefix}-multi-select-toggled`;\n  }\n\n  /**\n   * The name of the custom event fired before a multi select item is selected upon a user gesture.\n   * Cancellation of this event stops changing the user-initiated selection.\n   */\n  static get eventBeforeSelect() {\n    return `${prefix}-multi-select-beingselected`;\n  }\n\n  /**\n   * The name of the custom event fired after a a multi select item is selected upon a user gesture.\n   */\n  static get eventSelect() {\n    return `${prefix}-multi-select-selected`;\n  }\n\n  static styles = styles;\n}\n\nexport default BXMultiSelect;\n"]}

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

@@ -9,18 +9,19 @@ let _ = t => t,
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * Copyright IBM Corp. 2020, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 import settings from 'carbon-components/es/globals/js/settings';
-import { html, property, query, customElement } from 'lit-element';
+import { html, property, query } from 'lit-element';
 import Close16 from "../../icons/close/16";
 import { filter, forEach, indexOf } from '../../globals/internal/collection-helpers';
 import BXDropdown, { DROPDOWN_KEYBOARD_ACTION } from '../dropdown/dropdown';
 import styles from "././multi-select.css.js";
+import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 export { DROPDOWN_COLOR_SCHEME, DROPDOWN_SIZE, DROPDOWN_TYPE } from '../dropdown/dropdown';
 const {
   prefix