@govtechsg/sgds-web-component 1.1.0 → 1.2.1

package/components/Accordion/sgds-accordion.cjs.js

@@ -40,7 +40,6 @@ class SgdsAccordion extends sgdsElement["default"] {
         });
     }
     async onToggle(event) {
-        const target = event.target;
         // Let the event pass through the DOM so that it can be
         // prevented from the outside if a user so desires.
         if (this.allowMultiple || event.defaultPrevented) {
@@ -53,7 +52,8 @@ class SgdsAccordion extends sgdsElement["default"] {
             return;
         }
         items.forEach(item => {
-            if (item !== target) {
+            // Covers all elements within accordion-item
+            if (!event.composedPath().includes(item)) {
                 // Close all the items that didn't dispatch the event.
                 item.open = false;
             }

package/components/Accordion/sgds-accordion.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-accordion.cjs.js","sources":["../../../src/components/Accordion/sgds-accordion.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport type SgdsAccordionItem from \"./sgds-accordion-item\";\n\n/**\n * @summary A dropdown mechanism that allow users to either show or hide related content. `SgdsAccordion` is a wrapper to manage the behaviour for multiple `SgdsAccordionItems`\n * @slot default - slot for accordion-item\n */\n\nexport class SgdsAccordion extends SgdsElement {\n  static styles = [SgdsElement.styles];\n\n  /** Allows multiple accordion items to be opened at the same time */\n  @property({ type: Boolean, reflect: true }) allowMultiple = false;\n\n  /** Optional for accordion wrapper. Can be used to insert any utility classes such as me-auto */\n  @property({ reflect: true }) accordionClasses: string;\n\n  /** @internal */\n  @queryAssignedNodes()\n  private defaultNodes!: NodeListOf<SgdsAccordionItem>;\n\n  /** @internal */\n  get items(): SgdsAccordionItem[] {\n    return [...(this.defaultNodes || [])].filter(\n      (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n    ) as SgdsAccordionItem[];\n  }\n\n  firstUpdated() {\n    const items = [...this.items] as SgdsAccordionItem[];\n    items.forEach((item, index) => {\n      if (items.length > 1) {\n        switch (index) {\n          case 0:\n            item.setAttribute(\"first-of-type\", \"\");\n            break;\n\n          case items.length - 1:\n            item.setAttribute(\"last-of-type\", \"\");\n            break;\n\n          default:\n            item.setAttribute(\"nth-of-type\", \"\");\n        }\n      }\n    });\n  }\n\n  async onToggle(event: Event): Promise<void> {\n    const target = event.target as SgdsAccordionItem;\n    // Let the event pass through the DOM so that it can be\n    // prevented from the outside if a user so desires.\n    if (this.allowMultiple || event.defaultPrevented) {\n      // No toggling when `allowMultiple` or the user prevents it.\n      return;\n    }\n    const items = [...this.items] as SgdsAccordionItem[];\n\n    if (items && !items.length) {\n      // no toggling when there aren't items.\n      return;\n    }\n    items.forEach(item => {\n      if (item !== target) {\n        // Close all the items that didn't dispatch the event.\n        item.open = false;\n      }\n    });\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"sgds accordion\": true,\n          [`${this.accordionClasses}`]: this.accordionClasses\n        })}\n      >\n        <slot @click=${this.onToggle}></slot>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsAccordion;\n"],"names":["SgdsElement","html","classMap","__decorate","property","queryAssignedNodes"],"mappings":";;;;;;;;;;AAMA;;;AAGG;AAEG,MAAO,aAAc,SAAQA,sBAAW,CAAA;AAA9C,IAAA,WAAA,GAAA;;;QAI8C,IAAa,CAAA,aAAA,GAAG,KAAK,CAAC;KAsEnE;;AA5DC,IAAA,IAAI,KAAK,GAAA;QACP,OAAO,CAAC,IAAI,IAAI,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CAC1C,CAAC,IAAiB,KAAK,OAAO,IAAI,CAAC,OAAO,KAAK,WAAW,CACpC,CAAC;KAC1B;IAED,YAAY,GAAA;QACV,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAwB,CAAC;QACrD,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AAC5B,YAAA,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBACpB,QAAQ,KAAK;AACX,oBAAA,KAAK,CAAC;AACJ,wBAAA,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;wBACvC,MAAM;AAER,oBAAA,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC;AACnB,wBAAA,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;wBACtC,MAAM;AAER,oBAAA;AACE,wBAAA,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;iBACxC;aACF;AACH,SAAC,CAAC,CAAC;KACJ;IAED,MAAM,QAAQ,CAAC,KAAY,EAAA;AACzB,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA2B,CAAC;;;QAGjD,IAAI,IAAI,CAAC,aAAa,IAAI,KAAK,CAAC,gBAAgB,EAAE;;YAEhD,OAAO;SACR;QACD,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAwB,CAAC;AAErD,QAAA,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;;YAE1B,OAAO;SACR;AACD,QAAA,KAAK,CAAC,OAAO,CAAC,IAAI,IAAG;AACnB,YAAA,IAAI,IAAI,KAAK,MAAM,EAAE;;AAEnB,gBAAA,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;aACnB;AACH,SAAC,CAAC,CAAC;KACJ;IAED,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;AAEC,cAAA,EAAAC,oBAAQ,CAAC;AACf,YAAA,gBAAgB,EAAE,IAAI;YACtB,CAAC,CAAA,EAAG,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,CAAC,gBAAgB;SACpD,CAAC,CAAA;;AAEa,qBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;KAE/B,CAAC;KACH;;AAxEM,aAAA,CAAA,MAAM,GAAG,CAACF,sBAAW,CAAC,MAAM,CAAC,CAAC;AAGOG,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAuB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGrCD,gBAAA,CAAA;AAA5B,IAAAC,sBAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA0B,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI9CD,gBAAA,CAAA;AADP,IAAAE,gCAAkB,EAAE;AACgC,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}
+{"version":3,"file":"sgds-accordion.cjs.js","sources":["../../../src/components/Accordion/sgds-accordion.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport type SgdsAccordionItem from \"./sgds-accordion-item\";\n\n/**\n * @summary A dropdown mechanism that allow users to either show or hide related content. `SgdsAccordion` is a wrapper to manage the behaviour for multiple `SgdsAccordionItems`\n * @slot default - slot for accordion-item\n */\n\nexport class SgdsAccordion extends SgdsElement {\n  static styles = [SgdsElement.styles];\n\n  /** Allows multiple accordion items to be opened at the same time */\n  @property({ type: Boolean, reflect: true }) allowMultiple = false;\n\n  /** Optional for accordion wrapper. Can be used to insert any utility classes such as me-auto */\n  @property({ reflect: true }) accordionClasses: string;\n\n  /** @internal */\n  @queryAssignedNodes()\n  private defaultNodes!: NodeListOf<SgdsAccordionItem>;\n\n  /** @internal */\n  get items(): SgdsAccordionItem[] {\n    return [...(this.defaultNodes || [])].filter(\n      (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n    ) as SgdsAccordionItem[];\n  }\n\n  firstUpdated() {\n    const items = [...this.items] as SgdsAccordionItem[];\n    items.forEach((item, index) => {\n      if (items.length > 1) {\n        switch (index) {\n          case 0:\n            item.setAttribute(\"first-of-type\", \"\");\n            break;\n\n          case items.length - 1:\n            item.setAttribute(\"last-of-type\", \"\");\n            break;\n\n          default:\n            item.setAttribute(\"nth-of-type\", \"\");\n        }\n      }\n    });\n  }\n\n  async onToggle(event: Event): Promise<void> {\n    // Let the event pass through the DOM so that it can be\n    // prevented from the outside if a user so desires.\n    if (this.allowMultiple || event.defaultPrevented) {\n      // No toggling when `allowMultiple` or the user prevents it.\n      return;\n    }\n    const items = [...this.items] as SgdsAccordionItem[];\n\n    if (items && !items.length) {\n      // no toggling when there aren't items.\n      return;\n    }\n    items.forEach(item => {\n      // Covers all elements within accordion-item\n      if (!event.composedPath().includes(item)) {\n        // Close all the items that didn't dispatch the event.\n        item.open = false;\n      }\n    });\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"sgds accordion\": true,\n          [`${this.accordionClasses}`]: this.accordionClasses\n        })}\n      >\n        <slot @click=${this.onToggle}></slot>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsAccordion;\n"],"names":["SgdsElement","html","classMap","__decorate","property","queryAssignedNodes"],"mappings":";;;;;;;;;;AAMA;;;AAGG;AAEG,MAAO,aAAc,SAAQA,sBAAW,CAAA;AAA9C,IAAA,WAAA,GAAA;;;QAI8C,IAAa,CAAA,aAAA,GAAG,KAAK,CAAC;KAsEnE;;AA5DC,IAAA,IAAI,KAAK,GAAA;QACP,OAAO,CAAC,IAAI,IAAI,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CAC1C,CAAC,IAAiB,KAAK,OAAO,IAAI,CAAC,OAAO,KAAK,WAAW,CACpC,CAAC;KAC1B;IAED,YAAY,GAAA;QACV,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAwB,CAAC;QACrD,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AAC5B,YAAA,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBACpB,QAAQ,KAAK;AACX,oBAAA,KAAK,CAAC;AACJ,wBAAA,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;wBACvC,MAAM;AAER,oBAAA,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC;AACnB,wBAAA,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;wBACtC,MAAM;AAER,oBAAA;AACE,wBAAA,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;iBACxC;aACF;AACH,SAAC,CAAC,CAAC;KACJ;IAED,MAAM,QAAQ,CAAC,KAAY,EAAA;;;QAGzB,IAAI,IAAI,CAAC,aAAa,IAAI,KAAK,CAAC,gBAAgB,EAAE;;YAEhD,OAAO;SACR;QACD,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAwB,CAAC;AAErD,QAAA,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;;YAE1B,OAAO;SACR;AACD,QAAA,KAAK,CAAC,OAAO,CAAC,IAAI,IAAG;;YAEnB,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;;AAExC,gBAAA,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;aACnB;AACH,SAAC,CAAC,CAAC;KACJ;IAED,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;AAEC,cAAA,EAAAC,oBAAQ,CAAC;AACf,YAAA,gBAAgB,EAAE,IAAI;YACtB,CAAC,CAAA,EAAG,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,CAAC,gBAAgB;SACpD,CAAC,CAAA;;AAEa,qBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;KAE/B,CAAC;KACH;;AAxEM,aAAA,CAAA,MAAM,GAAG,CAACF,sBAAW,CAAC,MAAM,CAAC,CAAC;AAGOG,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAuB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGrCD,gBAAA,CAAA;AAA5B,IAAAC,sBAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA0B,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI9CD,gBAAA,CAAA;AADP,IAAAE,gCAAkB,EAAE;AACgC,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}

package/components/Accordion/sgds-accordion.js

@@ -36,7 +36,6 @@ class SgdsAccordion extends SgdsElement {
         });
     }
     async onToggle(event) {
-        const target = event.target;
         // Let the event pass through the DOM so that it can be
         // prevented from the outside if a user so desires.
         if (this.allowMultiple || event.defaultPrevented) {
@@ -49,7 +48,8 @@ class SgdsAccordion extends SgdsElement {
             return;
         }
         items.forEach(item => {
-            if (item !== target) {
+            // Covers all elements within accordion-item
+            if (!event.composedPath().includes(item)) {
                 // Close all the items that didn't dispatch the event.
                 item.open = false;
             }

package/components/Accordion/sgds-accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-accordion.js","sources":["../../../src/components/Accordion/sgds-accordion.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport type SgdsAccordionItem from \"./sgds-accordion-item\";\n\n/**\n * @summary A dropdown mechanism that allow users to either show or hide related content. `SgdsAccordion` is a wrapper to manage the behaviour for multiple `SgdsAccordionItems`\n * @slot default - slot for accordion-item\n */\n\nexport class SgdsAccordion extends SgdsElement {\n  static styles = [SgdsElement.styles];\n\n  /** Allows multiple accordion items to be opened at the same time */\n  @property({ type: Boolean, reflect: true }) allowMultiple = false;\n\n  /** Optional for accordion wrapper. Can be used to insert any utility classes such as me-auto */\n  @property({ reflect: true }) accordionClasses: string;\n\n  /** @internal */\n  @queryAssignedNodes()\n  private defaultNodes!: NodeListOf<SgdsAccordionItem>;\n\n  /** @internal */\n  get items(): SgdsAccordionItem[] {\n    return [...(this.defaultNodes || [])].filter(\n      (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n    ) as SgdsAccordionItem[];\n  }\n\n  firstUpdated() {\n    const items = [...this.items] as SgdsAccordionItem[];\n    items.forEach((item, index) => {\n      if (items.length > 1) {\n        switch (index) {\n          case 0:\n            item.setAttribute(\"first-of-type\", \"\");\n            break;\n\n          case items.length - 1:\n            item.setAttribute(\"last-of-type\", \"\");\n            break;\n\n          default:\n            item.setAttribute(\"nth-of-type\", \"\");\n        }\n      }\n    });\n  }\n\n  async onToggle(event: Event): Promise<void> {\n    const target = event.target as SgdsAccordionItem;\n    // Let the event pass through the DOM so that it can be\n    // prevented from the outside if a user so desires.\n    if (this.allowMultiple || event.defaultPrevented) {\n      // No toggling when `allowMultiple` or the user prevents it.\n      return;\n    }\n    const items = [...this.items] as SgdsAccordionItem[];\n\n    if (items && !items.length) {\n      // no toggling when there aren't items.\n      return;\n    }\n    items.forEach(item => {\n      if (item !== target) {\n        // Close all the items that didn't dispatch the event.\n        item.open = false;\n      }\n    });\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"sgds accordion\": true,\n          [`${this.accordionClasses}`]: this.accordionClasses\n        })}\n      >\n        <slot @click=${this.onToggle}></slot>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsAccordion;\n"],"names":[],"mappings":";;;;;;AAMA;;;AAGG;AAEG,MAAO,aAAc,SAAQ,WAAW,CAAA;AAA9C,IAAA,WAAA,GAAA;;;QAI8C,IAAa,CAAA,aAAA,GAAG,KAAK,CAAC;KAsEnE;;AA5DC,IAAA,IAAI,KAAK,GAAA;QACP,OAAO,CAAC,IAAI,IAAI,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CAC1C,CAAC,IAAiB,KAAK,OAAO,IAAI,CAAC,OAAO,KAAK,WAAW,CACpC,CAAC;KAC1B;IAED,YAAY,GAAA;QACV,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAwB,CAAC;QACrD,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AAC5B,YAAA,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBACpB,QAAQ,KAAK;AACX,oBAAA,KAAK,CAAC;AACJ,wBAAA,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;wBACvC,MAAM;AAER,oBAAA,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC;AACnB,wBAAA,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;wBACtC,MAAM;AAER,oBAAA;AACE,wBAAA,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;iBACxC;aACF;AACH,SAAC,CAAC,CAAC;KACJ;IAED,MAAM,QAAQ,CAAC,KAAY,EAAA;AACzB,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA2B,CAAC;;;QAGjD,IAAI,IAAI,CAAC,aAAa,IAAI,KAAK,CAAC,gBAAgB,EAAE;;YAEhD,OAAO;SACR;QACD,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAwB,CAAC;AAErD,QAAA,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;;YAE1B,OAAO;SACR;AACD,QAAA,KAAK,CAAC,OAAO,CAAC,IAAI,IAAG;AACnB,YAAA,IAAI,IAAI,KAAK,MAAM,EAAE;;AAEnB,gBAAA,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;aACnB;AACH,SAAC,CAAC,CAAC;KACJ;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEC,cAAA,EAAA,QAAQ,CAAC;AACf,YAAA,gBAAgB,EAAE,IAAI;YACtB,CAAC,CAAA,EAAG,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,CAAC,gBAAgB;SACpD,CAAC,CAAA;;AAEa,qBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;KAE/B,CAAC;KACH;;AAxEM,aAAA,CAAA,MAAM,GAAG,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;AAGO,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAuB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGrC,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA0B,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI9C,UAAA,CAAA;AADP,IAAA,kBAAkB,EAAE;AACgC,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"sgds-accordion.js","sources":["../../../src/components/Accordion/sgds-accordion.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport type SgdsAccordionItem from \"./sgds-accordion-item\";\n\n/**\n * @summary A dropdown mechanism that allow users to either show or hide related content. `SgdsAccordion` is a wrapper to manage the behaviour for multiple `SgdsAccordionItems`\n * @slot default - slot for accordion-item\n */\n\nexport class SgdsAccordion extends SgdsElement {\n  static styles = [SgdsElement.styles];\n\n  /** Allows multiple accordion items to be opened at the same time */\n  @property({ type: Boolean, reflect: true }) allowMultiple = false;\n\n  /** Optional for accordion wrapper. Can be used to insert any utility classes such as me-auto */\n  @property({ reflect: true }) accordionClasses: string;\n\n  /** @internal */\n  @queryAssignedNodes()\n  private defaultNodes!: NodeListOf<SgdsAccordionItem>;\n\n  /** @internal */\n  get items(): SgdsAccordionItem[] {\n    return [...(this.defaultNodes || [])].filter(\n      (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n    ) as SgdsAccordionItem[];\n  }\n\n  firstUpdated() {\n    const items = [...this.items] as SgdsAccordionItem[];\n    items.forEach((item, index) => {\n      if (items.length > 1) {\n        switch (index) {\n          case 0:\n            item.setAttribute(\"first-of-type\", \"\");\n            break;\n\n          case items.length - 1:\n            item.setAttribute(\"last-of-type\", \"\");\n            break;\n\n          default:\n            item.setAttribute(\"nth-of-type\", \"\");\n        }\n      }\n    });\n  }\n\n  async onToggle(event: Event): Promise<void> {\n    // Let the event pass through the DOM so that it can be\n    // prevented from the outside if a user so desires.\n    if (this.allowMultiple || event.defaultPrevented) {\n      // No toggling when `allowMultiple` or the user prevents it.\n      return;\n    }\n    const items = [...this.items] as SgdsAccordionItem[];\n\n    if (items && !items.length) {\n      // no toggling when there aren't items.\n      return;\n    }\n    items.forEach(item => {\n      // Covers all elements within accordion-item\n      if (!event.composedPath().includes(item)) {\n        // Close all the items that didn't dispatch the event.\n        item.open = false;\n      }\n    });\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"sgds accordion\": true,\n          [`${this.accordionClasses}`]: this.accordionClasses\n        })}\n      >\n        <slot @click=${this.onToggle}></slot>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsAccordion;\n"],"names":[],"mappings":";;;;;;AAMA;;;AAGG;AAEG,MAAO,aAAc,SAAQ,WAAW,CAAA;AAA9C,IAAA,WAAA,GAAA;;;QAI8C,IAAa,CAAA,aAAA,GAAG,KAAK,CAAC;KAsEnE;;AA5DC,IAAA,IAAI,KAAK,GAAA;QACP,OAAO,CAAC,IAAI,IAAI,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CAC1C,CAAC,IAAiB,KAAK,OAAO,IAAI,CAAC,OAAO,KAAK,WAAW,CACpC,CAAC;KAC1B;IAED,YAAY,GAAA;QACV,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAwB,CAAC;QACrD,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AAC5B,YAAA,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBACpB,QAAQ,KAAK;AACX,oBAAA,KAAK,CAAC;AACJ,wBAAA,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;wBACvC,MAAM;AAER,oBAAA,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC;AACnB,wBAAA,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;wBACtC,MAAM;AAER,oBAAA;AACE,wBAAA,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;iBACxC;aACF;AACH,SAAC,CAAC,CAAC;KACJ;IAED,MAAM,QAAQ,CAAC,KAAY,EAAA;;;QAGzB,IAAI,IAAI,CAAC,aAAa,IAAI,KAAK,CAAC,gBAAgB,EAAE;;YAEhD,OAAO;SACR;QACD,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAwB,CAAC;AAErD,QAAA,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;;YAE1B,OAAO;SACR;AACD,QAAA,KAAK,CAAC,OAAO,CAAC,IAAI,IAAG;;YAEnB,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;;AAExC,gBAAA,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;aACnB;AACH,SAAC,CAAC,CAAC;KACJ;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEC,cAAA,EAAA,QAAQ,CAAC;AACf,YAAA,gBAAgB,EAAE,IAAI;YACtB,CAAC,CAAA,EAAG,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,CAAC,gBAAgB;SACpD,CAAC,CAAA;;AAEa,qBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;KAE/B,CAAC;KACH;;AAxEM,aAAA,CAAA,MAAM,GAAG,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;AAGO,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAuB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGrC,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA0B,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI9C,UAAA,CAAA;AADP,IAAA,kBAAkB,EAAE;AACgC,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA;;;;"}