@db-ux/wc-core-components 1.0.0-test-13b991d

package/dist/collection/components/accordion/accordion.js

@@ -0,0 +1,311 @@
+import { cls, uuid } from "../../utils";
+import { DEFAULT_ID } from "../../shared/constants";
+import { h } from "@stencil/core";
+/**
+ * @slot children - This is a default/unnamed slot
+
+ */
+export class DBAccordion {
+    constructor() {
+        this._id = DEFAULT_ID;
+        this._name = "";
+        this.initialized = false;
+        this._initOpenIndexDone = false;
+    }
+    convertItems(items) {
+        try {
+            if (typeof items === "string") {
+                return JSON.parse(items);
+            }
+            return items;
+        }
+        catch (error) {
+            console.error(error);
+        }
+        return [];
+    }
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element === null || element === void 0 ? void 0 : element.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                if (attr && attr.name === "class") {
+                    const isWebComponent = attr.value.includes("hydrated");
+                    const value = attr.value.replace("hydrated", "").trim();
+                    const currentClass = element.getAttribute("class");
+                    element.setAttribute(attr.name, `${currentClass ? `${currentClass} ` : ""}${value}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    componentDidLoad() {
+        this.enableAttributePassing(this._ref, "db-accordion");
+        this._id = this.id || "accordion-" + uuid();
+        this.initialized = true;
+        this._initOpenIndexDone = true;
+    }
+    componentDidUpdate() {
+        var _a;
+        // If we have a single behavior we first check for
+        // props.name otherwise for state_id
+        if (this.initialized) {
+            if (this.behavior === "single") {
+                if (this.name) {
+                    if (this._name !== this.name) {
+                        this._name = this.name;
+                    }
+                }
+                else {
+                    if (this._name !== this._id && this._id) {
+                        this._name = this._id;
+                    }
+                }
+            }
+            else {
+                this._name = "";
+            }
+        }
+        if (this._ref) {
+            const childDetails = this._ref.getElementsByTagName("details");
+            if (childDetails) {
+                for (const details of Array.from(childDetails)) {
+                    if (this._name === "") {
+                        details.removeAttribute("name");
+                    }
+                    else {
+                        details.name = this._name;
+                    }
+                }
+            }
+        }
+        if (this._ref && this._initOpenIndexDone) {
+            if (this.initOpenIndex && ((_a = this.initOpenIndex) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                const childDetails = this._ref.getElementsByTagName("details");
+                if (childDetails) {
+                    const initOpenIndex = this.behavior === "single" && this.initOpenIndex.length > 1
+                        ? [this.initOpenIndex[0]] // use only one index for behavior=single
+                        : this.initOpenIndex;
+                    Array.from(childDetails).forEach((details, index) => {
+                        if (initOpenIndex.includes(index)) {
+                            details.open = true;
+                        }
+                    });
+                }
+            }
+            this._initOpenIndexDone = false;
+        }
+    }
+    render() {
+        var _a;
+        return (h("ul", { key: '6a2d7280077c11e5660b5638d2d10b4dce057be5', class: cls("db-accordion", this.className), ref: (el) => {
+                this._ref = el;
+            }, id: this._id, "data-variant": this.variant }, !this.items ? h("slot", null) : null, this.items
+            ? (_a = this.convertItems(this.items)) === null || _a === void 0 ? void 0 : _a.map((item, index) => (h("db-accordion-item", { key: `accordion-item-${index}`, headlinePlain: item.headlinePlain, disabled: item.disabled, text: item.text })))
+            : null));
+    }
+    static get is() { return "db-accordion"; }
+    static get properties() {
+        return {
+            "id": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBAccordionProps[\"id\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBAccordionProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/accordion/model.ts::DBAccordionProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "id",
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBAccordionProps[\"name\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBAccordionProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/accordion/model.ts::DBAccordionProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": false
+            },
+            "behavior": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBAccordionProps[\"behavior\"]",
+                    "resolved": "\"multiple\" | \"single\"",
+                    "references": {
+                        "DBAccordionProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/accordion/model.ts::DBAccordionProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "behavior",
+                "reflect": false
+            },
+            "initOpenIndex": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBAccordionProps[\"initOpenIndex\"]",
+                    "resolved": "number[]",
+                    "references": {
+                        "DBAccordionProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/accordion/model.ts::DBAccordionProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "className": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBAccordionProps[\"className\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBAccordionProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/accordion/model.ts::DBAccordionProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "classname",
+                "reflect": false
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBAccordionProps[\"variant\"]",
+                    "resolved": "\"card\" | \"divider\"",
+                    "references": {
+                        "DBAccordionProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/accordion/model.ts::DBAccordionProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "variant",
+                "reflect": false
+            },
+            "items": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBAccordionProps[\"items\"]",
+                    "resolved": "DBAccordionItemDefaultProps[] | string",
+                    "references": {
+                        "DBAccordionProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/accordion/model.ts::DBAccordionProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "items",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_id": {},
+            "_name": {},
+            "initialized": {},
+            "_initOpenIndexDone": {}
+        };
+    }
+}
+//# sourceMappingURL=accordion.js.map

package/dist/collection/components/accordion/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import { DBAccordionItemDefaultProps } from \"../accordion-item/model\";\nimport { DBAccordionProps, DBAccordionState } from \"./model\";\nimport { cls, uuid } from \"../../utils\";\nimport { DBAccordionItem } from \"../accordion-item/accordion-item\";\nimport { DEFAULT_ID } from \"../../shared/constants\";\n\nimport { Component, h, Fragment, Prop, State } from \"@stencil/core\";\n\n\n/**\n * @slot children - This is a default/unnamed slot\n\n */\n @Component({\n  tag: \"db-accordion\",\n})\nexport class DBAccordion {\n  private _ref!: HTMLUListElement | null;\n  @Prop() id: DBAccordionProps[\"id\"];\n  @Prop() name: DBAccordionProps[\"name\"];\n  @Prop() behavior: DBAccordionProps[\"behavior\"];\n  @Prop() initOpenIndex: DBAccordionProps[\"initOpenIndex\"];\n  @Prop({attribute: \"classname\"}) className: DBAccordionProps[\"className\"];\n  @Prop() variant: DBAccordionProps[\"variant\"];\n  @Prop() items: DBAccordionProps[\"items\"];\n\n  @State() _id = DEFAULT_ID;\n  @State() _name = \"\";\n  @State() initialized = false;\n  @State() _initOpenIndexDone = false;\n\n  convertItems(items: unknown[] | string | undefined) {\n    try {\n      if (typeof items === \"string\") {\n        return JSON.parse(items);\n      }\n      return items as DBAccordionItemDefaultProps[];\n    } catch (error) {\n      console.error(error);\n    }\n    return [];\n  }\n\n  /**\n   * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n   * @param element  the ref for the component\n   * @param customElementSelector  the custom element like `my-component`\n   */\n  private enableAttributePassing(\n    element: HTMLElement | null,\n    customElementSelector: string\n  ) {\n    const parent = element?.closest(customElementSelector);\n    if (element && parent) {\n      const attributes = parent.attributes;\n      for (let i = 0; i < attributes.length; i++) {\n        const attr = attributes.item(i);\n        if (\n          attr &&\n          (attr.name.startsWith(\"data-\") || attr.name.startsWith(\"aria-\"))\n        ) {\n          element.setAttribute(attr.name, attr.value);\n          parent.removeAttribute(attr.name);\n        }\n        if (attr && attr.name === \"class\") {\n          const isWebComponent = attr.value.includes(\"hydrated\");\n          const value = attr.value.replace(\"hydrated\", \"\").trim();\n          const currentClass = element.getAttribute(\"class\");\n          element.setAttribute(\n            attr.name,\n            `${currentClass ? `${currentClass} ` : \"\"}${value}`\n          );\n          if (isWebComponent) {\n            // Stencil is using this class for lazy loading component\n            parent.setAttribute(\"class\", \"hydrated\");\n          } else {\n            parent.removeAttribute(attr.name);\n          }\n        }\n      }\n    }\n  }\n\n  componentDidLoad() {\n    this.enableAttributePassing(this._ref, \"db-accordion\");\n    this._id = this.id || \"accordion-\" + uuid();\n    this.initialized = true;\n    this._initOpenIndexDone = true;\n  }\n\n  componentDidUpdate() {\n    // If we have a single behavior we first check for\n    // props.name otherwise for state_id\n    if (this.initialized) {\n      if (this.behavior === \"single\") {\n        if (this.name) {\n          if (this._name !== this.name) {\n            this._name = this.name;\n          }\n        } else {\n          if (this._name !== this._id && this._id) {\n            this._name = this._id;\n          }\n        }\n      } else {\n        this._name = \"\";\n      }\n    }\n    if (this._ref) {\n      const childDetails = this._ref.getElementsByTagName(\"details\");\n      if (childDetails) {\n        for (const details of Array.from<HTMLDetailsElement>(childDetails)) {\n          if (this._name === \"\") {\n            details.removeAttribute(\"name\");\n          } else {\n            details.name = this._name;\n          }\n        }\n      }\n    }\n    if (this._ref && this._initOpenIndexDone) {\n      if (this.initOpenIndex && this.initOpenIndex?.length > 0) {\n        const childDetails = this._ref.getElementsByTagName(\"details\");\n        if (childDetails) {\n          const initOpenIndex =\n            this.behavior === \"single\" && this.initOpenIndex.length > 1\n              ? [this.initOpenIndex[0]] // use only one index for behavior=single\n              : this.initOpenIndex;\n          Array.from<HTMLDetailsElement>(childDetails).forEach(\n            (details: HTMLDetailsElement, index: number) => {\n              if (initOpenIndex.includes(index)) {\n                details.open = true;\n              }\n            }\n          );\n        }\n      }\n      this._initOpenIndexDone = false;\n    }\n  }\n\n  render() {\n    return (\n      <ul\n        class={cls(\"db-accordion\", this.className)}\n        ref={(el: any) => {\n          this._ref = el;\n        }}\n        id={this._id}\n        data-variant={this.variant}\n      >\n        {!this.items ? <slot></slot> : null}\n        {this.items\n          ? this.convertItems(this.items)?.map((item, index) => (\n              <db-accordion-item\n                key={`accordion-item-${index}`}\n                headlinePlain={item.headlinePlain}\n                disabled={item.disabled}\n                text={item.text}\n              ></db-accordion-item>\n            ))\n          : null}\n      </ul>\n    );\n  }\n}\n"]}

package/dist/collection/components/accordion/index.js

@@ -0,0 +1,3 @@
+import { DBAccordion } from "./accordion";
+export default DBAccordion;
+//# sourceMappingURL=index.js.map

package/dist/collection/components/accordion/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,eAAe,WAAW,CAAC","sourcesContent":["import { DBAccordion } from './accordion';\n\nexport default DBAccordion;"]}

package/dist/collection/components/accordion/model.js

@@ -0,0 +1,3 @@
+export const AccordionVariantList = ['divider', 'card'];
+export const AccordionBehaviorList = ['multiple', 'single'];
+//# sourceMappingURL=model.js.map

package/dist/collection/components/accordion/model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"model.js","sourceRoot":"","sources":["../../../src/components/accordion/model.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,oBAAoB,GAAI,CAAC,SAAS,EAAE,MAAM,CAAW,CAAC;AAEnE,MAAM,CAAC,MAAM,qBAAqB,GAAI,CAAC,UAAU,EAAE,QAAQ,CAAW,CAAC","sourcesContent":["import { GlobalProps, GlobalState, InitializedState } from '../../shared/model';\nimport { DBAccordionItemDefaultProps } from '../accordion-item/model';\nexport const AccordionVariantList = (['divider', 'card'] as const);\nexport type AccordionVariantType = (typeof AccordionVariantList)[number];\nexport const AccordionBehaviorList = (['multiple', 'single'] as const);\nexport type AccordionBehaviorType = (typeof AccordionBehaviorList)[number];\nexport type DBAccordionDefaultProps = {\n  /**\n   * To allow multiple items open at the same time or only 1 item\n   */\n  behavior?: AccordionBehaviorType;\n  /**\n   * The index of items which should be open when loading the accordion\n   */\n  initOpenIndex?: number[];\n\n  /**\n   * Alternative to pass in a simple representation of accordion items\n   */\n  items?: DBAccordionItemDefaultProps[] | string;\n\n  /**\n   * Set details name for exclusive accordions, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#name\n   */\n  name?: string;\n\n  /**\n   * Informs about the changes in the internal state, which item is open\n   */\n  onChange?: (openAccordionItemIds: string[]) => void;\n\n  /**\n   * Defines the display of the accordion and the items:\n   * \"divider\": with a dividing line between the items\n   * \"card\": w/o dividing line, but items are shown in the card variant\n   */\n  variant?: AccordionVariantType;\n};\nexport type DBAccordionProps = DBAccordionDefaultProps & GlobalProps;\nexport type DBAccordionDefaultState = {\n  _initOpenIndexDone: boolean;\n  _name: string;\n  convertItems: (items?: unknown[] | string) => DBAccordionItemDefaultProps[];\n};\nexport type DBAccordionState = DBAccordionDefaultState & GlobalState & InitializedState"]}

package/dist/collection/components/accordion-item/accordion-item.js

@@ -0,0 +1,246 @@
+import { cls, getBooleanAsString, uuid } from "../../utils";
+import { DEFAULT_ID } from "../../shared/constants";
+import { h } from "@stencil/core";
+/**
+ * @slot children - This is a default/unnamed slot
+ * @slot headline - TODO: Add description for slotHeadline
+ */
+export class DBAccordionItem {
+    constructor() {
+        this._id = DEFAULT_ID;
+        this._open = false;
+    }
+    toggle(event) {
+        // We need this for react https://github.com/facebook/react/issues/15486#issuecomment-488028431
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        const newStateOpen = !this._open;
+        if (this.onToggle) {
+            this.onToggle.emit(newStateOpen);
+        }
+        this._open = newStateOpen;
+    }
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element === null || element === void 0 ? void 0 : element.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                if (attr && attr.name === "class") {
+                    const isWebComponent = attr.value.includes("hydrated");
+                    const value = attr.value.replace("hydrated", "").trim();
+                    const currentClass = element.getAttribute("class");
+                    element.setAttribute(attr.name, `${currentClass ? `${currentClass} ` : ""}${value}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    componentDidLoad() {
+        this.enableAttributePassing(this._ref, "db-accordion-item");
+        this._id = this.id || "accordion-item-" + uuid();
+        if (this.defaultOpen) {
+            this._open = this.defaultOpen;
+        }
+    }
+    render() {
+        return (h("li", { key: '7094e608b01a216da13c416ba6d6f845bc3554df', class: cls("db-accordion-item", this.className), id: this._id }, h("details", { key: '8eb8bc7f0741d7e03a79923407709d7451a1c423', "aria-disabled": getBooleanAsString(this.disabled), ref: (el) => {
+                this._ref = el;
+            }, open: this._open }, h("summary", { key: '7f531a785588b63c302c637416552171e88b310a', onClick: (event) => this.toggle(event) }, this.headlinePlain ? this.headlinePlain : null, !this.headlinePlain ? h("slot", { name: "headline" }) : null), h("div", { key: '9a53a8b06d591360965973288075ab2b06968ac4' }, this.text ? this.text : h("slot", null)))));
+    }
+    static get is() { return "db-accordion-item"; }
+    static get properties() {
+        return {
+            "id": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBAccordionItemProps[\"id\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBAccordionItemProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/accordion-item/model.ts::DBAccordionItemProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "id",
+                "reflect": false
+            },
+            "defaultOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBAccordionItemProps[\"defaultOpen\"]",
+                    "resolved": "boolean",
+                    "references": {
+                        "DBAccordionItemProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/accordion-item/model.ts::DBAccordionItemProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "default-open",
+                "reflect": false
+            },
+            "className": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBAccordionItemProps[\"className\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBAccordionItemProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/accordion-item/model.ts::DBAccordionItemProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "classname",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBAccordionItemProps[\"disabled\"]",
+                    "resolved": "boolean",
+                    "references": {
+                        "DBAccordionItemProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/accordion-item/model.ts::DBAccordionItemProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false
+            },
+            "headlinePlain": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBAccordionItemProps[\"headlinePlain\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBAccordionItemProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/accordion-item/model.ts::DBAccordionItemProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "headline-plain",
+                "reflect": false
+            },
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBAccordionItemProps[\"text\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBAccordionItemProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/accordion-item/model.ts::DBAccordionItemProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "text",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_id": {},
+            "_open": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "onToggle",
+                "name": "onToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=accordion-item.js.map

package/dist/collection/components/accordion-item/accordion-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-item.js","sourceRoot":"","sources":["../../../src/components/accordion-item/accordion-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { DBAccordionItemProps, DBAccordionItemState } from \"./model\";\nimport { cls, getBooleanAsString, uuid } from \"../../utils\";\nimport { ClickEvent } from \"../../shared/model\";\nimport { DEFAULT_ID } from \"../../shared/constants\";\n\nimport { Component, h, Fragment, Event, Prop, State } from \"@stencil/core\";\n\n\n/**\n * @slot children - This is a default/unnamed slot\n * @slot headline - TODO: Add description for slotHeadline\n */\n @Component({\n  tag: \"db-accordion-item\",\n})\nexport class DBAccordionItem {\n  private _ref!: HTMLDetailsElement | null;\n  @Prop() id: DBAccordionItemProps[\"id\"];\n  @Prop() defaultOpen: DBAccordionItemProps[\"defaultOpen\"];\n  @Event() onToggle: any;\n  @Prop({attribute: \"classname\"}) className: DBAccordionItemProps[\"className\"];\n  @Prop() disabled: DBAccordionItemProps[\"disabled\"];\n  @Prop() headlinePlain: DBAccordionItemProps[\"headlinePlain\"];\n  @Prop() text: DBAccordionItemProps[\"text\"];\n\n  @State() _id = DEFAULT_ID;\n  @State() _open = false;\n\n  toggle(event: ClickEvent<HTMLElement>) {\n    // We need this for react https://github.com/facebook/react/issues/15486#issuecomment-488028431\n    event?.preventDefault();\n    const newStateOpen = !this._open;\n    if (this.onToggle) {\n      this.onToggle.emit(newStateOpen);\n    }\n    this._open = newStateOpen;\n  }\n\n  /**\n   * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n   * @param element  the ref for the component\n   * @param customElementSelector  the custom element like `my-component`\n   */\n  private enableAttributePassing(\n    element: HTMLElement | null,\n    customElementSelector: string\n  ) {\n    const parent = element?.closest(customElementSelector);\n    if (element && parent) {\n      const attributes = parent.attributes;\n      for (let i = 0; i < attributes.length; i++) {\n        const attr = attributes.item(i);\n        if (\n          attr &&\n          (attr.name.startsWith(\"data-\") || attr.name.startsWith(\"aria-\"))\n        ) {\n          element.setAttribute(attr.name, attr.value);\n          parent.removeAttribute(attr.name);\n        }\n        if (attr && attr.name === \"class\") {\n          const isWebComponent = attr.value.includes(\"hydrated\");\n          const value = attr.value.replace(\"hydrated\", \"\").trim();\n          const currentClass = element.getAttribute(\"class\");\n          element.setAttribute(\n            attr.name,\n            `${currentClass ? `${currentClass} ` : \"\"}${value}`\n          );\n          if (isWebComponent) {\n            // Stencil is using this class for lazy loading component\n            parent.setAttribute(\"class\", \"hydrated\");\n          } else {\n            parent.removeAttribute(attr.name);\n          }\n        }\n      }\n    }\n  }\n\n  componentDidLoad() {\n    this.enableAttributePassing(this._ref, \"db-accordion-item\");\n    this._id = this.id || \"accordion-item-\" + uuid();\n    if (this.defaultOpen) {\n      this._open = this.defaultOpen;\n    }\n  }\n\n  render() {\n    return (\n      <li class={cls(\"db-accordion-item\", this.className)} id={this._id}>\n        <details\n          aria-disabled={getBooleanAsString(this.disabled)}\n          ref={(el: any) => {\n            this._ref = el;\n          }}\n          open={this._open}\n        >\n          <summary onClick={(event) => this.toggle(event)}>\n            {this.headlinePlain ? this.headlinePlain : null}\n            {!this.headlinePlain ? <slot name=\"headline\"></slot> : null}\n          </summary>\n          <div>{this.text ? this.text : <slot></slot>}</div>\n        </details>\n      </li>\n    );\n  }\n}\n"]}

package/dist/collection/components/accordion-item/index.js

@@ -0,0 +1,3 @@
+import { DBAccordionItem } from "./accordion-item";
+export default DBAccordionItem;
+//# sourceMappingURL=index.js.map

package/dist/collection/components/accordion-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/accordion-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,eAAe,eAAe,CAAC","sourcesContent":["import { DBAccordionItem } from './accordion-item';\n\nexport default DBAccordionItem;"]}

package/dist/collection/components/accordion-item/model.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=model.js.map

package/dist/collection/components/accordion-item/model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"model.js","sourceRoot":"","sources":["../../../src/components/accordion-item/model.ts"],"names":[],"mappings":"","sourcesContent":["import { GlobalProps, GlobalState, TextProps, ToggleEventProps, ToggleEventState } from '../../shared/model';\nexport type DBAccordionItemDefaultProps = {\n  /**\n   * Initial state for the accordion item\n   */\n  defaultOpen?: boolean;\n  /**\n   * The disabled attribute can be set to keep a user from clicking on the element.\n   */\n  disabled?: boolean;\n  /**\n   * Title of the accordion-item as slot\n   */\n  headline?: any;\n  /**\n   * Title of the accordion-item as plain text\n   */\n  headlinePlain?: string;\n} & TextProps;\nexport type DBAccordionItemProps = DBAccordionItemDefaultProps & GlobalProps & ToggleEventProps;\nexport type DBAccordionItemDefaultState = {\n  _open: boolean;\n};\nexport type DBAccordionItemState = DBAccordionItemDefaultState & GlobalState & ToggleEventState<HTMLElement>"]}