wj-elements 0.7.7 → 0.8.0

package/dist/wje-accordion-item.js

@@ -1,136 +1,63 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import WJElement from "./wje-element.js";
-import { event } from "./event.js";
-const styles = "/*\n[ WJ Accordion Item ]\n*/\n\n:host {\n    --wje-accordion-background: var(--wje-color-contrast-0);\n    --wje-accordion-border: var(--wje-color-contrast-0);\n    --wje-accordion-border-radius: var(--wje-border-radius-large);\n    --wje-accordion-background-hover: var(--wje-color-contrast-1);\n    --wje-accordion-border-hover: var(--wje-color-contrast-2);\n    --wje-accordion-background-expanded: var(--wje-color-contrast-0);\n    --wje-accordion-border-expanded: var(--wje-color-contrast-0);\n    --wje-accordion-headline-color: var(--wje-color-contrast-11) !important;\n    --wje-accordion-content-color: var(--wje-color-contrast-6);\n}\n\n:host([color='primary']) {\n    --wje-accordion-background: var(--wje-color-primary-1);\n    --wje-accordion-border: var(--wje-color-primary-1);\n    --wje-accordion-background-hover: var(--wje-color-primary-2);\n    --wje-accordion-border-hover: var(--wje-color-primary-2);\n    --wje-accordion-background-expanded: transparent;\n    --wje-accordion-border-expanded: var(--wje-color-primary-3);\n    --wje-accordion-headline-color: var(--wje-color-contrast-11) !important;\n    --wje-accordion-content-color: var(--wje-color-contrast-6);\n}\n\n:host([color='complete']) {\n    --wje-accordion-background: var(--wje-color-complete-1);\n    --wje-accordion-border: var(--wje-color-complete-1);\n    --wje-accordion-background-hover: var(--wje-color-complete-2);\n    --wje-accordion-border-hover: var(--wje-color-complete-2);\n    --wje-accordion-background-expanded: transparent;\n    --wje-accordion-border-expanded: var(--wje-color-complete-3);\n    --wje-accordion-headline-color: var(--wje-color-contrast-11) !important;\n    --wje-accordion-content-color: var(--wje-color-contrast-6);\n}\n\n:host([color='success']) {\n    --wje-accordion-background: var(--wje-color-success-1);\n    --wje-accordion-border: var(--wje-color-success-1);\n    --wje-accordion-background-hover: var(--wje-color-success-2);\n    --wje-accordion-border-hover: var(--wje-color-success-2);\n    --wje-accordion-background-expanded: transparent;\n    --wje-accordion-border-expanded: var(--wje-color-success-3);\n    --wje-accordion-headline-color: var(--wje-color-contrast-11) !important;\n    --wje-accordion-content-color: var(--wje-color-contrast-6);\n}\n\n:host([color='danger']) {\n    --wje-accordion-background: var(--wje-color-danger-1);\n    --wje-accordion-border: var(--wje-color-danger-1);\n    --wje-accordion-background-hover: var(--wje-color-danger-2);\n    --wje-accordion-border-hover: var(--wje-color-danger-2);\n    --wje-accordion-background-expanded: transparent;\n    --wje-accordion-border-expanded: var(--wje-color-danger-3);\n    --wje-accordion-headline-color: var(--wje-color-contrast-11) !important;\n    --wje-accordion-content-color: var(--wje-color-contrast-6);\n}\n\n:host([color='warning']) {\n    --wje-accordion-background: var(--wje-color-warning-1);\n    --wje-accordion-border: var(--wje-color-warning-1);\n    --wje-accordion-background-hover: var(--wje-color-warning-2);\n    --wje-accordion-border-hover: var(--wje-color-warning-2);\n    --wje-accordion-background-expanded: transparent;\n    --wje-accordion-border-expanded: var(--wje-color-warning-3);\n    --wje-accordion-headline-color: var(--wje-color-contrast-11) !important;\n    --wje-accordion-content-color: var(--wje-color-contrast-6);\n}\n\n:host([color='info']) {\n    --wje-accordion-background: var(--wje-color-info-1);\n    --wje-accordion-border: var(--wje-color-info-1);\n    --wje-accordion-background-hover: var(--wje-color-info-2);\n    --wje-accordion-border-hover: var(--wje-color-info-2);\n    --wje-accordion-background-expanded: transparent;\n    --wje-accordion-border-expanded: var(--wje-color-info-3);\n    --wje-accordion-headline-color: var(--wje-color-contrast-11) !important;\n    --wje-accordion-content-color: var(--wje-color-contrast-6);\n}\n\n:host {\n    display: block;\n    margin-bottom: 0.5rem;\n}\n\n/*:host(.expanding) #content {*/\n/*    display: none;*/\n/*}*/\n\n/*:host(.collapsing) #content {*/\n/*    max-height: 0;*/\n/*}*/\n\n.native-accordion-item {\n    display: block;\n    background-color: var(--wje-accordion-background);\n    border-radius: var(--wje-accordion-border-radius);\n    border-width: 1px;\n    border-style: solid;\n    border-color: var(--wje-accordion-border);\n    transition: background-color 200ms ease-in-out;\n    &:hover {\n        background-color: var(--wje-accordion-background-hover);\n        border-color: var(--wje-accordion-border-hover);\n    }\n}\n\n:host(.expanded) .native-accordion-item {\n    background-color: var(--wje-accordion-background-expanded);\n    border-color: var(--wje-accordion-border-expanded);\n}\n\n.headline {\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    font-size: var(--wje-font-size) !important;\n    color: var(--wje-accordion-headline-color);\n    line-height: normal !important;\n    margin: 0 !important;\n    padding: 0.75rem;\n}\n\n[name='description'] {\n    font-size: var(--wje-font-size-small);\n    color: var(--wje-color-contrast-6);\n}\n\nwje-icon {\n    margin-left: auto;\n    transform: rotate(var(--wje-accordion-marker-rotate, 0deg));\n}\n\n[part='content'] {\n    /*background: var(--wje-accordion-background);*/\n    display: block;\n    color: var(--wje-accordion-content-color);\n    overflow: hidden;\n    max-height: 0;\n    transition: max-height 250ms ease-in-out;\n}\n\n[part='content'] slot {\n    display: block;\n    margin: 0 0.75rem 0.75rem 0.75rem;\n}\n\n:host(.expanded) [part='content'] {\n    /*display: block;*/\n    /*padding: 0 .75rem .75rem .75rem;*/\n    max-height: 100vh;\n}\n";
-const _AccordionItem = class _AccordionItem extends WJElement {
-  /**
-   * Constructor for the AccordionItem class.
-   */
+import e from "./wje-element.js";
+import { event as o } from "./event.js";
+const _r = class _r extends e {
   constructor() {
     super();
-    /**
-     * The class name for the Accordion Item element.
-     * @type {string}
-     */
     __publicField(this, "className", "AccordionItem");
-    this._instanceId = ++_AccordionItem._instanceId;
+    this._instanceId = ++_r._instanceId;
   }
-  /**
-   * Getter for the CSS stylesheet.
-   * @returns {object} The styles for the Accordion Item element.
-   */
   static get cssStyleSheet() {
-    return styles;
+    return ':host{--wje-accordion-background: var(--wje-color-contrast-0);--wje-accordion-border: var(--wje-color-contrast-0);--wje-accordion-border-radius: var(--wje-border-radius-large);--wje-accordion-background-hover: var(--wje-color-contrast-1);--wje-accordion-border-hover: var(--wje-color-contrast-2);--wje-accordion-background-expanded: var(--wje-color-contrast-0);--wje-accordion-border-expanded: var(--wje-color-contrast-0);--wje-accordion-headline-color: var(--wje-color-contrast-11) !important;--wje-accordion-content-color: var(--wje-color-contrast-6);--wje-accordion-content-margin: 0 var(--wje-spacing-small, .75rem) var(--wje-spacing-small, .75rem)}:host([color="primary"]){--wje-accordion-background: var(--wje-color-primary-1);--wje-accordion-border: var(--wje-color-primary-1);--wje-accordion-background-hover: var(--wje-color-primary-2);--wje-accordion-border-hover: var(--wje-color-primary-2);--wje-accordion-background-expanded: transparent;--wje-accordion-border-expanded: var(--wje-color-primary-3);--wje-accordion-headline-color: var(--wje-color-contrast-11) !important;--wje-accordion-content-color: var(--wje-color-contrast-6)}:host([color="complete"]){--wje-accordion-background: var(--wje-color-complete-1);--wje-accordion-border: var(--wje-color-complete-1);--wje-accordion-background-hover: var(--wje-color-complete-2);--wje-accordion-border-hover: var(--wje-color-complete-2);--wje-accordion-background-expanded: transparent;--wje-accordion-border-expanded: var(--wje-color-complete-3);--wje-accordion-headline-color: var(--wje-color-contrast-11) !important;--wje-accordion-content-color: var(--wje-color-contrast-6)}:host([color="success"]){--wje-accordion-background: var(--wje-color-success-1);--wje-accordion-border: var(--wje-color-success-1);--wje-accordion-background-hover: var(--wje-color-success-2);--wje-accordion-border-hover: var(--wje-color-success-2);--wje-accordion-background-expanded: transparent;--wje-accordion-border-expanded: var(--wje-color-success-3);--wje-accordion-headline-color: var(--wje-color-contrast-11) !important;--wje-accordion-content-color: var(--wje-color-contrast-6)}:host([color="danger"]){--wje-accordion-background: var(--wje-color-danger-1);--wje-accordion-border: var(--wje-color-danger-1);--wje-accordion-background-hover: var(--wje-color-danger-2);--wje-accordion-border-hover: var(--wje-color-danger-2);--wje-accordion-background-expanded: transparent;--wje-accordion-border-expanded: var(--wje-color-danger-3);--wje-accordion-headline-color: var(--wje-color-contrast-11) !important;--wje-accordion-content-color: var(--wje-color-contrast-6)}:host([color="warning"]){--wje-accordion-background: var(--wje-color-warning-1);--wje-accordion-border: var(--wje-color-warning-1);--wje-accordion-background-hover: var(--wje-color-warning-2);--wje-accordion-border-hover: var(--wje-color-warning-2);--wje-accordion-background-expanded: transparent;--wje-accordion-border-expanded: var(--wje-color-warning-3);--wje-accordion-headline-color: var(--wje-color-contrast-11) !important;--wje-accordion-content-color: var(--wje-color-contrast-6)}:host([color="info"]){--wje-accordion-background: var(--wje-color-info-1);--wje-accordion-border: var(--wje-color-info-1);--wje-accordion-background-hover: var(--wje-color-info-2);--wje-accordion-border-hover: var(--wje-color-info-2);--wje-accordion-background-expanded: transparent;--wje-accordion-border-expanded: var(--wje-color-info-3);--wje-accordion-headline-color: var(--wje-color-contrast-11) !important;--wje-accordion-content-color: var(--wje-color-contrast-6)}:host{display:block;margin-bottom:.5rem}.native-accordion-item{display:block;background-color:var(--wje-accordion-background);border-radius:var(--wje-accordion-border-radius);border-width:1px;border-style:solid;border-color:var(--wje-accordion-border);transition:background-color .2s ease-in-out}.native-accordion-item:hover{background-color:var(--wje-accordion-background-hover);border-color:var(--wje-accordion-border-hover)}:host(.expanded) .native-accordion-item{background-color:var(--wje-accordion-background-expanded);border-color:var(--wje-accordion-border-expanded)}.headline{display:grid;grid-template-columns:1fr auto;align-items:center;font-size:var(--wje-font-size)!important;color:var(--wje-accordion-headline-color);line-height:normal!important;margin:0!important;padding:.75rem}[name=description]{font-size:var(--wje-font-size-small);color:var(--wje-color-contrast-6)}wje-icon{margin-left:auto;transform:rotate(var(--wje-accordion-marker-rotate, 0deg))}[part=content]{display:block;color:var(--wje-accordion-content-color);overflow:hidden;max-height:0;transition:max-height .25s ease-in-out}[part=content] slot{display:block;margin:var(--wje-accordion-content-margin)}:host(.expanded) [part=content]{max-height:100vh}';
   }
-  /**
-   * Getter for the observed attributes.
-   * @returns {Array} An array containing the name of the observed attribute.
-   */
   static get observedAttributes() {
     return [];
   }
-  /**
-   * Method to setup attributes for the Accordion Item element.
-   */
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  /**
-   * Method to draw the Accordion Item element. This method returns a document fragment containing the drawn element.
-   * @returns {object} The document fragment containing the drawn element.
-   */
   draw() {
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement("div");
-    native.setAttribute("part", "native");
-    native.classList.add("native-accordion-item");
-    let headline = document.createElement("div");
-    headline.setAttribute("part", "headline");
-    headline.classList.add("headline");
-    const baseId = this.id || `wje-accordion-item-${this._instanceId}`;
-    headline.id = `${baseId}-header`;
-    let headlineDescription = document.createElement("slot");
-    headlineDescription.setAttribute("part", "description");
-    headlineDescription.setAttribute("name", "description");
-    let slotHeadline = document.createElement("slot");
-    slotHeadline.setAttribute("name", "headline");
-    let toggle = document.createElement("slot");
-    toggle.setAttribute("part", "toggle");
-    toggle.setAttribute("name", "toggle");
-    let mark = document.createElement("wje-icon");
-    mark.setAttribute("name", "chevron-down");
-    let content = document.createElement("div");
-    content.setAttribute("part", "content");
-    content.setAttribute("id", `${baseId}-panel`);
-    content.setAttribute("role", "region");
-    content.setAttribute("aria-labelledby", headline.id);
-    let slot = document.createElement("slot");
-    slot.setAttribute("name", "content");
-    toggle.appendChild(mark);
-    headline.appendChild(slotHeadline);
-    headline.appendChild(toggle);
-    headline.appendChild(headlineDescription);
-    content.appendChild(slot);
-    native.appendChild(headline);
-    native.appendChild(content);
-    fragment.appendChild(native);
-    this.headline = headline;
-    this.toggle = toggle;
-    this.content = content;
-    return fragment;
+    let e2 = document.createDocumentFragment(), o2 = document.createElement("div");
+    o2.setAttribute("part", "native"), o2.classList.add("native-accordion-item");
+    let r2 = document.createElement("div");
+    r2.setAttribute("part", "headline"), r2.classList.add("headline");
+    const t = this.id || `wje-accordion-item-${this._instanceId}`;
+    r2.id = `${t}-header`;
+    let a = document.createElement("slot");
+    a.setAttribute("part", "description"), a.setAttribute("name", "description");
+    let c = document.createElement("slot");
+    c.setAttribute("name", "headline");
+    let n = document.createElement("slot");
+    n.setAttribute("part", "toggle"), n.setAttribute("name", "toggle");
+    let d = document.createElement("wje-icon");
+    d.setAttribute("name", "chevron-down");
+    let i = document.createElement("div");
+    i.setAttribute("part", "content"), i.setAttribute("id", `${t}-panel`), i.setAttribute("role", "region"), i.setAttribute("aria-labelledby", r2.id);
+    let s = document.createElement("slot");
+    return s.setAttribute("name", "content"), n.appendChild(d), r2.appendChild(c), r2.appendChild(n), r2.appendChild(a), i.appendChild(s), o2.appendChild(r2), o2.appendChild(i), e2.appendChild(o2), this.headline = r2, this.toggle = n, this.content = i, e2;
   }
-  /**
-   * Method to execute after the Accordion Item element is drawn.
-   */
   afterDraw() {
-    if (!this.classList.contains("expanded")) this.classList.add("collapsed");
-    this.headline.setAttribute("role", "button");
-    this.headline.setAttribute("tabindex", "0");
-    this.headline.setAttribute("aria-controls", this.content.id);
-    this.headline.setAttribute("aria-expanded", this.classList.contains("expanded") ? "true" : "false");
-    this.headline.addEventListener("click", () => {
-      if (this.classList.contains("collapsed")) {
-        event.dispatchCustomEvent(this, "wje-accordion-item:open");
-        this.toggle.style.setProperty("--wje-accordion-marker-rotate", "180deg");
-        this.expand();
-      } else {
-        event.dispatchCustomEvent(this, "wje-accordion-item:close");
-        this.toggle.style.setProperty("--wje-accordion-marker-rotate", "0deg");
-        this.collapse();
-      }
-    });
-    this.headline.addEventListener("keydown", (e) => {
-      if (e.key === "Enter" || e.key === " ") {
-        e.preventDefault();
-        this.headline.click();
-      }
+    this.classList.contains("expanded") || this.classList.add("collapsed"), this.content.inert = !this.classList.contains("expanded"), this.headline.setAttribute("role", "button"), this.headline.setAttribute("tabindex", "0"), this.headline.setAttribute("aria-controls", this.content.id), this.headline.setAttribute("aria-expanded", this.classList.contains("expanded") ? "true" : "false"), this.headline.addEventListener("click", () => {
+      this.classList.contains("collapsed") ? (o.dispatchCustomEvent(this, "wje-accordion-item:open"), this.toggle.style.setProperty("--wje-accordion-marker-rotate", "180deg"), this.expand()) : (o.dispatchCustomEvent(this, "wje-accordion-item:close"), this.toggle.style.setProperty("--wje-accordion-marker-rotate", "0deg"), this.collapse());
+    }), this.headline.addEventListener("keydown", (e2) => {
+      "Enter" !== e2.key && " " !== e2.key || (e2.preventDefault(), this.headline.click());
     });
   }
-  /**
-   * Collapses the accordion item and updates the headline ARIA state.
-   */
   collapse() {
     var _a;
-    this.classList.remove("expanded");
-    this.classList.add("collapsed");
-    (_a = this.headline) == null ? void 0 : _a.setAttribute("aria-expanded", "false");
+    this.classList.remove("expanded"), this.classList.add("collapsed"), (_a = this.headline) == null ? void 0 : _a.setAttribute("aria-expanded", "false"), this.content && (this.content.inert = true);
   }
-  /**
-   * Expands the accordion item and updates the headline ARIA state.
-   */
   expand() {
     var _a;
-    this.classList.remove("collapsed");
-    this.classList.add("expanded");
-    (_a = this.headline) == null ? void 0 : _a.setAttribute("aria-expanded", "true");
+    this.classList.remove("collapsed"), this.classList.add("expanded"), (_a = this.headline) == null ? void 0 : _a.setAttribute("aria-expanded", "true"), this.content && (this.content.inert = false);
   }
 };
-__publicField(_AccordionItem, "_instanceId", 0);
-let AccordionItem = _AccordionItem;
-AccordionItem.define("wje-accordion-item", AccordionItem);
+__publicField(_r, "_instanceId", 0);
+let r = _r;
+r.define("wje-accordion-item", r);
 export {
-  AccordionItem as default
+  r as default
 };
 //# sourceMappingURL=wje-accordion-item.js.map

package/dist/wje-accordion-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-accordion-item.js","sources":["../packages/wje-accordion-item/accordion-item.element.js","../packages/wje-accordion-item/accordion-item.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents an Accordion Item element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/accordion-item\n * @status stable\n * @augments WJElement\n * @attribute {string} color - Applies a contextual color variant such as `primary`, `success`, `danger`, `warning`, `info`, or `complete`.\n * @slot headline - Slot for the clickable accordion headline content.\n * @slot description - Slot for supporting text shown below the headline.\n * @slot toggle - Slot for a custom toggle icon or toggle content.\n * @slot content - Slot for the expandable panel body.\n * @csspart native - The wrapper of the whole accordion item.\n * @csspart headline - The clickable headline area.\n * @csspart description - The description slot container inside the headline.\n * @csspart toggle - The toggle slot container and fallback chevron area.\n * @csspart content - The expandable content panel.\n * @cssproperty [--wje-accordion-background=var(--wje-color-contrast-0)] - Background color of the collapsed item wrapper.\n * @cssproperty [--wje-accordion-border=var(--wje-color-contrast-0)] - Border color of the collapsed item wrapper.\n * @cssproperty [--wje-accordion-border-radius=var(--wje-border-radius-large)] - Border radius of the item wrapper.\n * @cssproperty [--wje-accordion-background-hover=var(--wje-color-contrast-1)] - Background color used when the headline is hovered.\n * @cssproperty [--wje-accordion-border-hover=var(--wje-color-contrast-2)] - Border color used when the headline is hovered.\n * @cssproperty [--wje-accordion-background-expanded=var(--wje-color-contrast-0)] - Background color of the expanded item wrapper.\n * @cssproperty [--wje-accordion-border-expanded=var(--wje-color-contrast-0)] - Border color of the expanded item wrapper.\n * @cssproperty [--wje-accordion-headline-color=var(--wje-color-contrast-11)] - Text color of the headline area.\n * @cssproperty [--wje-accordion-content-color=var(--wje-color-contrast-6)] - Text color of the expandable content area.\n * @cssproperty [--wje-accordion-marker-rotate=0deg] - Rotation applied to the toggle marker icon.\n * // @fires wje-accordion-item:open - Dispatched when the item is expanded.\n * // @fires wje-accordion-item:close - Dispatched when the item is collapsed.\n * @tag wje-accordion-item\n */\nexport default class AccordionItem extends WJElement {\n    static _instanceId = 0;\n    /**\n     * Constructor for the AccordionItem class.\n     */\n    constructor() {\n        super();\n        this._instanceId = ++AccordionItem._instanceId;\n    }\n\n    /**\n     * The class name for the Accordion Item element.\n     * @type {string}\n     */\n    className = 'AccordionItem';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {object} The styles for the Accordion Item element.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     * @returns {Array} An array containing the name of the observed attribute.\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Method to setup attributes for the Accordion Item element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Method to draw the Accordion Item element. This method returns a document fragment containing the drawn element.\n     * @returns {object} The document fragment containing the drawn element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-accordion-item');\n\n        let headline = document.createElement('div');\n        headline.setAttribute('part', 'headline');\n        headline.classList.add('headline');\n        const baseId = this.id || `wje-accordion-item-${this._instanceId}`;\n        headline.id = `${baseId}-header`;\n\n        let headlineDescription = document.createElement('slot');\n        headlineDescription.setAttribute('part', 'description');\n        headlineDescription.setAttribute('name', 'description');\n\n        let slotHeadline = document.createElement('slot');\n        slotHeadline.setAttribute('name', 'headline');\n\n        let toggle = document.createElement('slot');\n        toggle.setAttribute('part', 'toggle');\n        toggle.setAttribute('name', 'toggle');\n\n        let mark = document.createElement('wje-icon');\n        mark.setAttribute('name', 'chevron-down');\n\n        let content = document.createElement('div');\n        content.setAttribute('part', 'content');\n        content.setAttribute('id', `${baseId}-panel`);\n        content.setAttribute('role', 'region');\n        content.setAttribute('aria-labelledby', headline.id);\n\n        let slot = document.createElement('slot');\n        slot.setAttribute('name', 'content');\n\n        toggle.appendChild(mark);\n\n        headline.appendChild(slotHeadline);\n        headline.appendChild(toggle);\n        headline.appendChild(headlineDescription);\n\n        content.appendChild(slot);\n\n        native.appendChild(headline);\n        native.appendChild(content);\n\n        fragment.appendChild(native);\n\n        this.headline = headline;\n        this.toggle = toggle;\n        this.content = content;\n\n        return fragment;\n    }\n\n    /**\n     * Method to execute after the Accordion Item element is drawn.\n     */\n    afterDraw() {\n        if (!this.classList.contains('expanded')) this.classList.add('collapsed');\n\n        this.headline.setAttribute('role', 'button');\n        this.headline.setAttribute('tabindex', '0');\n        this.headline.setAttribute('aria-controls', this.content.id);\n        this.headline.setAttribute('aria-expanded', this.classList.contains('expanded') ? 'true' : 'false');\n\n        this.headline.addEventListener('click', () => {\n            if (this.classList.contains('collapsed')) {\n                event.dispatchCustomEvent(this, 'wje-accordion-item:open');\n                this.toggle.style.setProperty('--wje-accordion-marker-rotate', '180deg');\n                this.expand();\n            } else {\n                event.dispatchCustomEvent(this, 'wje-accordion-item:close');\n                this.toggle.style.setProperty('--wje-accordion-marker-rotate', '0deg');\n                this.collapse();\n            }\n        });\n\n        this.headline.addEventListener('keydown', (e) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                this.headline.click();\n            }\n        });\n    }\n\n    /**\n     * Collapses the accordion item and updates the headline ARIA state.\n     */\n    collapse() {\n        this.classList.remove('expanded');\n        this.classList.add('collapsed');\n        this.headline?.setAttribute('aria-expanded', 'false');\n    }\n\n    /**\n     * Expands the accordion item and updates the headline ARIA state.\n     */\n    expand() {\n        this.classList.remove('collapsed');\n        this.classList.add('expanded');\n        this.headline?.setAttribute('aria-expanded', 'true');\n    }\n}\n","import AccordionItem from './accordion-item.element.js';\n\nexport default AccordionItem;\n\nAccordionItem.define('wje-accordion-item', AccordionItem);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-accordion-item.js","sources":["../packages/wje-accordion-item/accordion-item.element.js","../packages/wje-accordion-item/accordion-item.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents an Accordion Item element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/accordion-item\n * @status stable\n * @augments WJElement\n * @attribute {string} color - Applies a contextual color variant such as `primary`, `success`, `danger`, `warning`, `info`, or `complete`.\n * @slot headline - Slot for the clickable accordion headline content.\n * @slot description - Slot for supporting text shown below the headline.\n * @slot toggle - Slot for a custom toggle icon or toggle content.\n * @slot content - Slot for the expandable panel body.\n * @csspart native - The wrapper of the whole accordion item.\n * @csspart headline - The clickable headline area.\n * @csspart description - The description slot container inside the headline.\n * @csspart toggle - The toggle slot container and fallback chevron area.\n * @csspart content - The expandable content panel.\n * @cssproperty [--wje-accordion-background=var(--wje-color-contrast-0)] - Background color of the collapsed item wrapper.\n * @cssproperty [--wje-accordion-border=var(--wje-color-contrast-0)] - Border color of the collapsed item wrapper.\n * @cssproperty [--wje-accordion-border-radius=var(--wje-border-radius-large)] - Border radius of the item wrapper.\n * @cssproperty [--wje-accordion-background-hover=var(--wje-color-contrast-1)] - Background color used when the headline is hovered.\n * @cssproperty [--wje-accordion-border-hover=var(--wje-color-contrast-2)] - Border color used when the headline is hovered.\n * @cssproperty [--wje-accordion-background-expanded=var(--wje-color-contrast-0)] - Background color of the expanded item wrapper.\n * @cssproperty [--wje-accordion-border-expanded=var(--wje-color-contrast-0)] - Border color of the expanded item wrapper.\n * @cssproperty [--wje-accordion-headline-color=var(--wje-color-contrast-11)] - Text color of the headline area.\n * @cssproperty [--wje-accordion-content-color=var(--wje-color-contrast-6)] - Text color of the expandable content area.\n * @cssproperty [--wje-accordion-content-margin=0 var(--wje-spacing-small, 0.75rem) var(--wje-spacing-small, 0.75rem)] - Margin around the slotted expandable content.\n * @cssproperty [--wje-accordion-marker-rotate=0deg] - Rotation applied to the toggle marker icon.\n * // @fires wje-accordion-item:open - Dispatched when the item is expanded.\n * // @fires wje-accordion-item:close - Dispatched when the item is collapsed.\n * @tag wje-accordion-item\n */\nexport default class AccordionItem extends WJElement {\n    static _instanceId = 0;\n    /**\n     * Constructor for the AccordionItem class.\n     */\n    constructor() {\n        super();\n        this._instanceId = ++AccordionItem._instanceId;\n    }\n\n    /**\n     * The class name for the Accordion Item element.\n     * @type {string}\n     */\n    className = 'AccordionItem';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {object} The styles for the Accordion Item element.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     * @returns {Array} An array containing the name of the observed attribute.\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Method to setup attributes for the Accordion Item element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Method to draw the Accordion Item element. This method returns a document fragment containing the drawn element.\n     * @returns {object} The document fragment containing the drawn element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-accordion-item');\n\n        let headline = document.createElement('div');\n        headline.setAttribute('part', 'headline');\n        headline.classList.add('headline');\n        const baseId = this.id || `wje-accordion-item-${this._instanceId}`;\n        headline.id = `${baseId}-header`;\n\n        let headlineDescription = document.createElement('slot');\n        headlineDescription.setAttribute('part', 'description');\n        headlineDescription.setAttribute('name', 'description');\n\n        let slotHeadline = document.createElement('slot');\n        slotHeadline.setAttribute('name', 'headline');\n\n        let toggle = document.createElement('slot');\n        toggle.setAttribute('part', 'toggle');\n        toggle.setAttribute('name', 'toggle');\n\n        let mark = document.createElement('wje-icon');\n        mark.setAttribute('name', 'chevron-down');\n\n        let content = document.createElement('div');\n        content.setAttribute('part', 'content');\n        content.setAttribute('id', `${baseId}-panel`);\n        content.setAttribute('role', 'region');\n        content.setAttribute('aria-labelledby', headline.id);\n\n        let slot = document.createElement('slot');\n        slot.setAttribute('name', 'content');\n\n        toggle.appendChild(mark);\n\n        headline.appendChild(slotHeadline);\n        headline.appendChild(toggle);\n        headline.appendChild(headlineDescription);\n\n        content.appendChild(slot);\n\n        native.appendChild(headline);\n        native.appendChild(content);\n\n        fragment.appendChild(native);\n\n        this.headline = headline;\n        this.toggle = toggle;\n        this.content = content;\n\n        return fragment;\n    }\n\n    /**\n     * Method to execute after the Accordion Item element is drawn.\n     */\n    afterDraw() {\n        if (!this.classList.contains('expanded')) this.classList.add('collapsed');\n\n        this.content.inert = !this.classList.contains('expanded');\n\n        this.headline.setAttribute('role', 'button');\n        this.headline.setAttribute('tabindex', '0');\n        this.headline.setAttribute('aria-controls', this.content.id);\n        this.headline.setAttribute('aria-expanded', this.classList.contains('expanded') ? 'true' : 'false');\n\n        this.headline.addEventListener('click', () => {\n            if (this.classList.contains('collapsed')) {\n                event.dispatchCustomEvent(this, 'wje-accordion-item:open');\n                this.toggle.style.setProperty('--wje-accordion-marker-rotate', '180deg');\n                this.expand();\n            } else {\n                event.dispatchCustomEvent(this, 'wje-accordion-item:close');\n                this.toggle.style.setProperty('--wje-accordion-marker-rotate', '0deg');\n                this.collapse();\n            }\n        });\n\n        this.headline.addEventListener('keydown', (e) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                this.headline.click();\n            }\n        });\n    }\n\n    /**\n     * Collapses the accordion item, updates the headline ARIA state, and makes its content inert.\n     */\n    collapse() {\n        this.classList.remove('expanded');\n        this.classList.add('collapsed');\n        this.headline?.setAttribute('aria-expanded', 'false');\n        if (this.content) this.content.inert = true;\n    }\n\n    /**\n     * Expands the accordion item, updates the headline ARIA state, and makes its content interactive.\n     */\n    expand() {\n        this.classList.remove('collapsed');\n        this.classList.add('expanded');\n        this.headline?.setAttribute('aria-expanded', 'true');\n        if (this.content) this.content.inert = false;\n    }\n}\n","import AccordionItem from './accordion-item.element.js';\n\nexport default AccordionItem;\n\nAccordionItem.define('wje-accordion-item', AccordionItem);\n"],"names":["AccordionItem","WJElement","constructor","super","className","this","_instanceId","cssStyleSheet","observedAttributes","setupAttributes","isShadowRoot","draw","fragment","document","createDocumentFragment","native","createElement","setAttribute","classList","add","headline","baseId","id","headlineDescription","slotHeadline","toggle","mark","content","slot","appendChild","afterDraw","contains","inert","addEventListener","event","dispatchCustomEvent","style","setProperty","expand","collapse","e","key","preventDefault","click","remove","static","define"],"mappings":"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"}

package/dist/wje-accordion.js

@@ -1,123 +1,58 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import WJElement from "./wje-element.js";
-const styles = "/*\n[ WJ Accordion ]\n*/\n\n:host {\n    display: block;\n    width: 100%;\n}\n";
-class Accordion extends WJElement {
-  /**
-   * Constructor for the Accordion class.
-   */
+import t from "./wje-element.js";
+class e extends t {
   constructor() {
     super();
-    /**
-     * The class name for the Accordion element.
-     * @type {string}
-     */
     __publicField(this, "className", "Accordion");
   }
-  /**
-   * Sets the `multiple` attribute on the element.
-   * If `true`, the `multiple` attribute is added.
-   * If `false`, the `multiple` attribute is removed.
-   * @param {boolean} value A boolean value indicating whether the element should support multiple selections.
-   */
-  set multiple(value) {
-    if (value) {
-      this.setAttribute("multiple", "");
-    } else {
-      this.removeAttribute("multiple");
-    }
+  set multiple(t2) {
+    t2 ? this.setAttribute("multiple", "") : this.removeAttribute("multiple");
   }
-  /**
-   * Determines whether the element has the `multiple` attribute.
-   * @returns {boolean} `true` if the `multiple` attribute is present, otherwise `false`.
-   */
   get multiple() {
     return this.hasAttribute("multiple");
   }
-  /**
-   * Sets the value of the `index` attribute.
-   * @param {number|string} value The value to set for the `index` attribute.
-   */
-  set index(value) {
-    this.setAttribute("index", value);
+  set index(t2) {
+    this.setAttribute("index", t2);
   }
-  /**
-   * Retrieves the value of the `index` attribute as a number.
-   * @returns {number} The numerical value of the `index` attribute, or `0` if the attribute is not set.
-   */
   get index() {
     return +this.getAttribute("index") || 0;
   }
-  /**
-   * Getter for the CSS stylesheet.
-   * @returns {object} The styles for the Accordion element.
-   */
   static get cssStyleSheet() {
-    return styles;
+    return ":host{display:block;width:100%}";
   }
-  /**
-   * Getter for the observed attributes.
-   * @returns {Array} An array containing the name of the observed attribute.
-   */
   static get observedAttributes() {
     return [];
   }
-  /**
-   * Method to setup attributes for the Accordion element.
-   */
   setupAttributes() {
-    this.isShadowRoot = "open";
-    this.setAriaState({ role: "presentation" });
+    this.isShadowRoot = "open", this.setAriaState({ role: "presentation" });
   }
-  /**
-   * Method to run before the element is drawn.
-   */
   beforeDraw() {
-    this.getAccordions().forEach((accordion, index) => {
-      if (this.index && +this.index === index) {
-        accordion.classList.add("expanded");
-      }
+    this.getAccordions().forEach((t2, e2) => {
+      this.index && +this.index === e2 && t2.classList.add("expanded");
     });
   }
-  /**
-   * Method to draw the Accordion element.
-   * @returns {object} The document fragment containing the drawn element.
-   */
   draw() {
-    let fragment = document.createDocumentFragment();
-    let slot = document.createElement("slot");
-    fragment.appendChild(slot);
-    this.slotEl = slot;
-    return fragment;
+    let t2 = document.createDocumentFragment(), e2 = document.createElement("slot");
+    return t2.appendChild(e2), this.slotEl = e2, t2;
   }
-  /**
-   * Method to run after the element is drawn.
-   */
   afterDraw() {
-    this.addEventListener("wje-accordion-item:open", (e) => {
-      if (!this.multiple) this.collapseAll(e.detail.context);
+    this.addEventListener("wje-accordion-item:open", (t2) => {
+      this.multiple || this.collapseAll(t2.detail.context);
     });
   }
-  /**
-   * Method to run after the element is drawn.
-   * @param exception
-   */
-  collapseAll(exception) {
-    this.getAccordions().forEach((accordion) => {
-      if (accordion !== exception) accordion.collapse();
+  collapseAll(t2) {
+    this.getAccordions().forEach((e2) => {
+      e2 !== t2 && e2.collapse();
     });
   }
-  /**
-   * Method to get the accordions.
-   * @returns {Array} An array containing the accordions.
-   */
   getAccordions() {
     return Array.from(this.querySelectorAll(":scope > wje-accordion-item"));
   }
 }
-Accordion.define("wje-accordion", Accordion);
+e.define("wje-accordion", e);
 export {
-  Accordion as default
+  e as default
 };
 //# sourceMappingURL=wje-accordion.js.map

package/dist/wje-accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-accordion.js","sources":["../packages/wje-accordion/accordion.element.js","../packages/wje-accordion/accordion.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents an Accordion element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/accordion\n * @status stable\n * @augments WJElement\n * @attribute {boolean} multiple - Allows multiple accordion items to stay expanded at the same time.\n * @attribute {number} index - Sets which child accordion item should start expanded based on DOM order.\n * @slot default - Slot for direct `wje-accordion-item` children.\n * @tag wje-accordion\n */\nexport default class Accordion extends WJElement {\n    /**\n     * Constructor for the Accordion class.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the `multiple` attribute on the element.\n     * If `true`, the `multiple` attribute is added.\n     * If `false`, the `multiple` attribute is removed.\n     * @param {boolean} value A boolean value indicating whether the element should support multiple selections.\n     */\n    set multiple(value) {\n        if (value) {\n            this.setAttribute('multiple', '');\n        } else {\n            this.removeAttribute('multiple');\n        }\n    }\n\n    /**\n     * Determines whether the element has the `multiple` attribute.\n     * @returns {boolean} `true` if the `multiple` attribute is present, otherwise `false`.\n     */\n    get multiple() {\n        return this.hasAttribute('multiple');\n    }\n\n    /**\n     * Sets the value of the `index` attribute.\n     * @param {number|string} value The value to set for the `index` attribute.\n     */\n    set index(value) {\n        this.setAttribute('index', value);\n    }\n\n    /**\n     * Retrieves the value of the `index` attribute as a number.\n     * @returns {number} The numerical value of the `index` attribute, or `0` if the attribute is not set.\n     */\n    get index() {\n        return +this.getAttribute('index') || 0;\n    }\n\n    /**\n     * The class name for the Accordion element.\n     * @type {string}\n     */\n    className = 'Accordion';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {object} The styles for the Accordion element.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     * @returns {Array} An array containing the name of the observed attribute.\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Method to setup attributes for the Accordion element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAriaState({ role: 'presentation' });\n    }\n\n    /**\n     * Method to run before the element is drawn.\n     */\n    beforeDraw() {\n        this.getAccordions().forEach((accordion, index) => {\n            if (this.index && +this.index === index) {\n                accordion.classList.add('expanded');\n            }\n        });\n    }\n\n    /**\n     * Method to draw the Accordion element.\n     * @returns {object} The document fragment containing the drawn element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let slot = document.createElement('slot');\n\n        fragment.appendChild(slot);\n\n        this.slotEl = slot;\n\n        return fragment;\n    }\n\n    /**\n     * Method to run after the element is drawn.\n     */\n    afterDraw() {\n        this.addEventListener('wje-accordion-item:open', (e) => {\n            if (!this.multiple) this.collapseAll(e.detail.context);\n        });\n    }\n\n    /**\n     * Method to run after the element is drawn.\n     * @param exception\n     */\n    collapseAll(exception) {\n        this.getAccordions().forEach((accordion) => {\n            if (accordion !== exception) accordion.collapse();\n        });\n    }\n\n    /**\n     * Method to get the accordions.\n     * @returns {Array} An array containing the accordions.\n     */\n    getAccordions() {\n        return Array.from(this.querySelectorAll(':scope > wje-accordion-item'));\n    }\n}\n","import Accordion from './accordion.element.js';\n\nexport default Accordion;\n\nAccordion.define('wje-accordion', Accordion);\n"],"names":[],"mappings":";;;;;AAae,MAAM,kBAAkB,UAAU;AAAA;AAAA;AAAA;AAAA,EAI7C,cAAc;AACV,UAAK;AA6CT;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EA5CZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,IAAI,SAAS,OAAO;AAChB,QAAI,OAAO;AACP,WAAK,aAAa,YAAY,EAAE;AAAA,IACpC,OAAO;AACH,WAAK,gBAAgB,UAAU;AAAA,IACnC;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,WAAW;AACX,WAAO,KAAK,aAAa,UAAU;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,MAAM,OAAO;AACb,SAAK,aAAa,SAAS,KAAK;AAAA,EACpC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,QAAQ;AACR,WAAO,CAAC,KAAK,aAAa,OAAO,KAAK;AAAA,EAC1C;AAAA;AAAA;AAAA;AAAA;AAAA,EAYA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAW,qBAAqB;AAC5B,WAAO,CAAA;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,aAAa,EAAE,MAAM,eAAc,CAAE;AAAA,EAC9C;AAAA;AAAA;AAAA;AAAA,EAKA,aAAa;AACT,SAAK,cAAa,EAAG,QAAQ,CAAC,WAAW,UAAU;AAC/C,UAAI,KAAK,SAAS,CAAC,KAAK,UAAU,OAAO;AACrC,kBAAU,UAAU,IAAI,UAAU;AAAA,MACtC;AAAA,IACJ,CAAC;AAAA,EACL;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,aAAS,YAAY,IAAI;AAEzB,SAAK,SAAS;AAEd,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACR,SAAK,iBAAiB,2BAA2B,CAAC,MAAM;AACpD,UAAI,CAAC,KAAK,SAAU,MAAK,YAAY,EAAE,OAAO,OAAO;AAAA,IACzD,CAAC;AAAA,EACL;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,YAAY,WAAW;AACnB,SAAK,cAAa,EAAG,QAAQ,CAAC,cAAc;AACxC,UAAI,cAAc,UAAW,WAAU,SAAQ;AAAA,IACnD,CAAC;AAAA,EACL;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,gBAAgB;AACZ,WAAO,MAAM,KAAK,KAAK,iBAAiB,6BAA6B,CAAC;AAAA,EAC1E;AACJ;AC1IA,UAAU,OAAO,iBAAiB,SAAS;"}
+{"version":3,"file":"wje-accordion.js","sources":["../packages/wje-accordion/accordion.element.js","../packages/wje-accordion/accordion.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents an Accordion element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/accordion\n * @status stable\n * @augments WJElement\n * @attribute {boolean} multiple - Allows multiple accordion items to stay expanded at the same time.\n * @attribute {number} index - Sets which child accordion item should start expanded based on DOM order.\n * @slot default - Slot for direct `wje-accordion-item` children.\n * @tag wje-accordion\n */\nexport default class Accordion extends WJElement {\n    /**\n     * Constructor for the Accordion class.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the `multiple` attribute on the element.\n     * If `true`, the `multiple` attribute is added.\n     * If `false`, the `multiple` attribute is removed.\n     * @param {boolean} value A boolean value indicating whether the element should support multiple selections.\n     */\n    set multiple(value) {\n        if (value) {\n            this.setAttribute('multiple', '');\n        } else {\n            this.removeAttribute('multiple');\n        }\n    }\n\n    /**\n     * Determines whether the element has the `multiple` attribute.\n     * @returns {boolean} `true` if the `multiple` attribute is present, otherwise `false`.\n     */\n    get multiple() {\n        return this.hasAttribute('multiple');\n    }\n\n    /**\n     * Sets the value of the `index` attribute.\n     * @param {number|string} value The value to set for the `index` attribute.\n     */\n    set index(value) {\n        this.setAttribute('index', value);\n    }\n\n    /**\n     * Retrieves the value of the `index` attribute as a number.\n     * @returns {number} The numerical value of the `index` attribute, or `0` if the attribute is not set.\n     */\n    get index() {\n        return +this.getAttribute('index') || 0;\n    }\n\n    /**\n     * The class name for the Accordion element.\n     * @type {string}\n     */\n    className = 'Accordion';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {object} The styles for the Accordion element.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     * @returns {Array} An array containing the name of the observed attribute.\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Method to setup attributes for the Accordion element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAriaState({ role: 'presentation' });\n    }\n\n    /**\n     * Method to run before the element is drawn.\n     */\n    beforeDraw() {\n        this.getAccordions().forEach((accordion, index) => {\n            if (this.index && +this.index === index) {\n                accordion.classList.add('expanded');\n            }\n        });\n    }\n\n    /**\n     * Method to draw the Accordion element.\n     * @returns {object} The document fragment containing the drawn element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let slot = document.createElement('slot');\n\n        fragment.appendChild(slot);\n\n        this.slotEl = slot;\n\n        return fragment;\n    }\n\n    /**\n     * Method to run after the element is drawn.\n     */\n    afterDraw() {\n        this.addEventListener('wje-accordion-item:open', (e) => {\n            if (!this.multiple) this.collapseAll(e.detail.context);\n        });\n    }\n\n    /**\n     * Method to run after the element is drawn.\n     * @param exception\n     */\n    collapseAll(exception) {\n        this.getAccordions().forEach((accordion) => {\n            if (accordion !== exception) accordion.collapse();\n        });\n    }\n\n    /**\n     * Method to get the accordions.\n     * @returns {Array} An array containing the accordions.\n     */\n    getAccordions() {\n        return Array.from(this.querySelectorAll(':scope > wje-accordion-item'));\n    }\n}\n","import Accordion from './accordion.element.js';\n\nexport default Accordion;\n\nAccordion.define('wje-accordion', Accordion);\n"],"names":["Accordion","WJElement","constructor","super","className","value","this","setAttribute","removeAttribute","multiple","hasAttribute","index","getAttribute","cssStyleSheet","observedAttributes","setupAttributes","isShadowRoot","setAriaState","role","getAccordions","forEach","accordion","classList","add","fragment","document","createDocumentFragment","slot","createElement","appendChild","slotEl","afterDraw","addEventListener","e","collapseAll","detail","context","exception","collapse","Array","from","querySelectorAll","define"],"mappings":";;;;AAae,MAAMA,UAAkBC,EAAAA;AAAAA,EAInC,cAAAC;AACIC,UAAAA;AA6CJC,qCAAY;AAAA,EA5CZ;AAAA,EAQA,IAAA,SAAaC,IAAAA;AACLA,IAAAA,KACAC,KAAKC,aAAa,YAAY,EAAA,IAE9BD,KAAKE,gBAAgB,UAAA;AAAA,EAE7B;AAAA,EAMA,IAAA,WAAIC;AACA,WAAOH,KAAKI,aAAa,UAAA;AAAA,EAC7B;AAAA,EAMA,IAAA,MAAUL,IAAAA;AACNC,SAAKC,aAAa,SAASF,EAAAA;AAAAA,EAC/B;AAAA,EAMA,IAAA,QAAIM;AACA,WAAA,CAAQL,KAAKM,aAAa,YAAY;AAAA,EAC1C;AAAA,EAYA,WAAA,gBAAWC;AACP;EACJ;AAAA,EAMA,WAAA,qBAAWC;AACP,WAAO,CAAA;AAAA,EACX;AAAA,EAKA,kBAAAC;AACIT,SAAKU,eAAe,QACpBV,KAAKW,aAAa,EAAEC,MAAM,eAAA,CAAA;AAAA,EAC9B;AAAA,EAKA;AACIZ,SAAKa,cAAAA,EAAgBC,QAAQ,CAACC,IAAWV,OAAAA;AACjCL,WAAKK,SAAAA,CAAUL,KAAKK,UAAUA,MAC9BU,GAAUC,UAAUC,IAAI,UAAA;AAAA,IAAA,CAAA;AAAA,EAGpC;AAAA,EAMA;AACI,QAAIC,KAAWC,SAASC,uBAAAA,GAEpBC,KAAOF,SAASG,cAAc,MAAA;AAMlC,WAJAJ,GAASK,YAAYF,EAAAA,GAErBrB,KAAKwB,SAASH,IAEPH;AAAAA,EACX;AAAA,EAKA,YAAAO;AACIzB,SAAK0B,iBAAiB,2BAA4BC,CAAAA,OAAAA;AACzC3B,WAAKG,YAAUH,KAAK4B,YAAYD,GAAEE,OAAOC,OAAAA;AAAAA,IAAAA,CAAAA;AAAAA,EAEtD;AAAA,EAMA,YAAYC,IAAAA;AACR/B,SAAKa,gBAAgBC,QAASC,CAAAA,OAAAA;AACtBA,MAAAA,OAAcgB,MAAWhB,GAAUiB,SAAAA;AAAAA,IAAAA,CAAAA;AAAAA,EAE/C;AAAA,EAMA;AACI,WAAOC,MAAMC,KAAKlC,KAAKmC,iBAAiB,6BAAA,CAAA;AAAA,EAC5C;AAAA;ACzIJzC,EAAU0C,OAAO,iBAAiB1C,CAAAA;"}