@db-ux/wc-core-components 1.1.0 → 1.1.1

package/README.md

@@ -44,6 +44,10 @@ import "@db-ux/core-components/build/styles/rollup.css";
 
 > **Note:** The `@db-ux/core-components/build/styles/relative` file contains optional and all components styles. If you consider performance issues see [@db-ux/core-components](https://www.npmjs.com/package/@db-ux/core-components) for more information.
 
+### DB Theme
+
+In case that you're building a website or application for Deutsche Bahn, you'll additionally have to install the DB Theme via the [`@db-ux/db-theme`](https://www.npmjs.com/package/@db-ux/db-theme) node package (even also available as an inner source node package, as described within that packages README).
+
 ## Usage
 
 ```js
@@ -76,7 +80,8 @@ If you don't have it already, add a VS Code settings folder and file at the root
 As we'd like to perfectly support our users and customers on their digital journey, the usage of Deutsche Bahn brand and trademarks are bound of clear guidelines and restrictions even when being used with the code that we're provide with this product; Deutsche Bahn fully reserves all rights regarding the Deutsche Bahn brand, even though that we're providing the code of DB UX Design System products free to use and release it under the Apache 2.0 license.
 Please have a look at our brand portal at <https://marketingportal.extranet.deutschebahn.com/> for any further questions and whom to contact on any brand issues.
 
-You must remove or replace any Deutsche Bahn brand and design assets as well as protected characteristics and trademarks. We're even also planning to provide a neutral theme that would make it much easier for you to use our product without the trademarks by Deutsche Bahn.
+For any usage outside of Deutsche Bahn websites and applications you aren't allowed to use any Deutsche Bahn brand and
+design assets as well as protected characteristics and trademarks, that for not including the DB Theme.
 
 ## Contributions
 

package/dist/cjs/db-accordion-item.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3d093f06.js');
+const index = require('./index-6e2cf235.js');
 const index$1 = require('./index-403366c7.js');
 const constants = require('./constants-89822e5f.js');
 

package/dist/cjs/db-accordion.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3d093f06.js');
+const index = require('./index-6e2cf235.js');
 const index$1 = require('./index-403366c7.js');
 const constants = require('./constants-89822e5f.js');
 
@@ -58,14 +58,7 @@ const DBAccordion = class {
             }
         }
     }
-    componentDidLoad() {
-        this.enableAttributePassing(this._ref, "db-accordion");
-        this._id = this.id || "accordion-" + index$1.uuid();
-        this.initialized = true;
-        this._initOpenIndexDone = true;
-    }
-    componentDidUpdate() {
-        var _a;
+    watch0Fn() {
         // If we have a single behavior we first check for
         // props.name otherwise for state_id
         if (this.initialized) {
@@ -85,6 +78,11 @@ const DBAccordion = class {
                 this._name = "";
             }
         }
+    }
+    watch0() {
+        this.watch0Fn();
+    }
+    watch1Fn() {
         if (this._ref) {
             const childDetails = this._ref.getElementsByTagName("details");
             if (childDetails) {
@@ -98,6 +96,12 @@ const DBAccordion = class {
                 }
             }
         }
+    }
+    watch1() {
+        this.watch1Fn();
+    }
+    watch2Fn() {
+        var _a;
         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");
@@ -115,14 +119,36 @@ const DBAccordion = class {
             this._initOpenIndexDone = false;
         }
     }
+    watch2() {
+        this.watch2Fn();
+    }
+    componentDidLoad() {
+        this.enableAttributePassing(this._ref, "db-accordion");
+        this._id = this.id || "accordion-" + index$1.uuid();
+        this.initialized = true;
+        this._initOpenIndexDone = true;
+        this.watch0Fn();
+        this.watch1Fn();
+        this.watch2Fn();
+    }
     render() {
         var _a;
-        return (index.h("ul", { key: '6a2d7280077c11e5660b5638d2d10b4dce057be5', class: index$1.cls("db-accordion", this.className), ref: (el) => {
+        return (index.h("ul", { key: 'cbb0e2f58e5b0506125bc6c38830b5ce73f762ca', class: index$1.cls("db-accordion", this.className), ref: (el) => {
                 this._ref = el;
             }, id: this._id, "data-variant": this.variant }, !this.items ? index.h("slot", null) : null, this.items
             ? (_a = this.convertItems(this.items)) === null || _a === void 0 ? void 0 : _a.map((item, index$1) => (index.h("db-accordion-item", { key: `accordion-item-${index$1}`, headlinePlain: item.headlinePlain, disabled: item.disabled, text: item.text })))
             : null));
     }
+    static get watchers() { return {
+        "initialized": ["watch0"],
+        "name": ["watch0"],
+        "behavior": ["watch0"],
+        "_id": ["watch0"],
+        "_ref": ["watch1", "watch2"],
+        "_name": ["watch1"],
+        "_initOpenIndexDone": ["watch2"],
+        "initOpenIndex": ["watch2"]
+    }; }
 };
 
 exports.db_accordion = DBAccordion;

package/dist/cjs/db-accordion.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"db-accordion.entry.cjs.js","mappings":"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","names":["DEFAULT_ID","uuid","h","cls","index"],"sources":["src/components/accordion/accordion.tsx"],"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"],"version":3}
+{"file":"db-accordion.entry.cjs.js","mappings":";;;;;;;;MAgBa,WAAW;IAHvB;;QAaU,QAAG,GAAGA,oBAAU,CAAC;QACjB,UAAK,GAAG,EAAE,CAAC;QACX,gBAAW,GAAG,KAAK,CAAC;QACpB,uBAAkB,GAAG,KAAK,CAAC;KAsKrC;IApKC,YAAY,CAAC,KAAqC;QAChD,IAAI;YACF,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;gBAC7B,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;aAC1B;YACD,OAAO,KAAsC,CAAC;SAC/C;QAAC,OAAO,KAAK,EAAE;YACd,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;SACtB;QACD,OAAO,EAAE,CAAC;KACX;;;;;;IAOO,sBAAsB,CAC5B,OAA2B,EAC3B,qBAA6B;QAE7B,MAAM,MAAM,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;QACvD,IAAI,OAAO,IAAI,MAAM,EAAE;YACrB,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;YACrC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBAC1C,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;gBAChC,IACE,IAAI;qBACH,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,EAChE;oBACA,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;oBAC5C,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;iBACnC;gBACD,IAAI,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;oBACjC,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;oBACvD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;oBACxD,MAAM,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;oBACnD,OAAO,CAAC,YAAY,CAClB,IAAI,CAAC,IAAI,EACT,GAAG,YAAY,GAAG,GAAG,YAAY,GAAG,GAAG,EAAE,GAAG,KAAK,EAAE,CACpD,CAAC;oBACF,IAAI,cAAc,EAAE;;wBAElB,MAAM,CAAC,YAAY,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;qBAC1C;yBAAM;wBACL,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;qBACnC;iBACF;aACF;SACF;KACF;IAED,QAAQ;;;QAGN,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ,EAAE;gBAC9B,IAAI,IAAI,CAAC,IAAI,EAAE;oBACb,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,IAAI,EAAE;wBAC5B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC;qBACxB;iBACF;qBAAM;oBACL,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,EAAE;wBACvC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;qBACvB;iBACF;aACF;iBAAM;gBACL,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;aACjB;SACF;KACF;IAMD,MAAM;QACJ,IAAI,CAAC,QAAQ,EAAE,CAAC;KACjB;IAED,QAAQ;QACN,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,SAAS,CAAC,CAAC;YAC/D,IAAI,YAAY,EAAE;gBAChB,KAAK,MAAM,OAAO,IAAI,KAAK,CAAC,IAAI,CAAqB,YAAY,CAAC,EAAE;oBAClE,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE;wBACrB,OAAO,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;qBACjC;yBAAM;wBACL,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC;qBAC3B;iBACF;aACF;SACF;KACF;IAID,MAAM;QACJ,IAAI,CAAC,QAAQ,EAAE,CAAC;KACjB;IAED,QAAQ;;QACN,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,kBAAkB,EAAE;YACxC,IAAI,IAAI,CAAC,aAAa,IAAI,CAAA,MAAA,IAAI,CAAC,aAAa,0CAAE,MAAM,IAAG,CAAC,EAAE;gBACxD,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,SAAS,CAAC,CAAC;gBAC/D,IAAI,YAAY,EAAE;oBAChB,MAAM,aAAa,GACjB,IAAI,CAAC,QAAQ,KAAK,QAAQ,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC;0BACvD,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;0BACvB,IAAI,CAAC,aAAa,CAAC;oBACzB,KAAK,CAAC,IAAI,CAAqB,YAAY,CAAC,CAAC,OAAO,CAClD,CAAC,OAA2B,EAAE,KAAa;wBACzC,IAAI,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;4BACjC,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC;yBACrB;qBACF,CACF,CAAC;iBACH;aACF;YACD,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;SACjC;KACF;IAKD,MAAM;QACJ,IAAI,CAAC,QAAQ,EAAE,CAAC;KACjB;IAED,gBAAgB;QACd,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC;QACvD,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,EAAE,IAAI,YAAY,GAAGC,YAAI,EAAE,CAAC;QAC5C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;QAC/B,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChB,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChB,IAAI,CAAC,QAAQ,EAAE,CAAC;KACjB;IAED,MAAM;;QACJ,QACEC,iEACE,KAAK,EAAEC,WAAG,CAAC,cAAc,EAAE,IAAI,CAAC,SAAS,CAAC,EAC1C,GAAG,EAAE,CAAC,EAAO;gBACX,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;aAChB,EACD,EAAE,EAAE,IAAI,CAAC,GAAG,kBACE,IAAI,CAAC,OAAO,IAEzB,CAAC,IAAI,CAAC,KAAK,GAAGD,qBAAa,GAAG,IAAI,EAClC,IAAI,CAAC,KAAK;cACP,MAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,0CAAE,GAAG,CAAC,CAAC,IAAI,EAAEE,OAAK,MAC7CF,+BACE,GAAG,EAAE,kBAAkBE,OAAK,EAAE,EAC9B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,GACI,CACtB,CAAC;cACF,IAAI,CACL,EACL;KACH;;;;;;;;;;;;;;;","names":["DEFAULT_ID","uuid","h","cls","index"],"sources":["src/components/accordion/accordion.tsx"],"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, Watch, 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  watch0Fn() {\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  }\n\n  @Watch(\"initialized\")\n  @Watch(\"name\")\n  @Watch(\"behavior\")\n  @Watch(\"_id\")\n  watch0() {\n    this.watch0Fn();\n  }\n\n  watch1Fn() {\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  }\n\n  @Watch(\"_ref\")\n  @Watch(\"_name\")\n  watch1() {\n    this.watch1Fn();\n  }\n\n  watch2Fn() {\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  @Watch(\"_ref\")\n  @Watch(\"_initOpenIndexDone\")\n  @Watch(\"initOpenIndex\")\n  watch2() {\n    this.watch2Fn();\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    this.watch0Fn();\n    this.watch1Fn();\n    this.watch2Fn();\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"],"version":3}

package/dist/cjs/db-badge.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3d093f06.js');
+const index = require('./index-6e2cf235.js');
 const index$1 = require('./index-403366c7.js');
 const constants = require('./constants-89822e5f.js');
 
@@ -43,11 +43,7 @@ const DBBadge = class {
             }
         }
     }
-    componentDidLoad() {
-        this.enableAttributePassing(this._ref, "db-badge");
-        this.initialized = true;
-    }
-    componentDidUpdate() {
+    watch0Fn() {
         var _a;
         if (this._ref && this.initialized) {
             if ((_a = this.placement) === null || _a === void 0 ? void 0 : _a.startsWith("corner")) {
@@ -62,12 +58,24 @@ const DBBadge = class {
             }
         }
     }
+    watch0() {
+        this.watch0Fn();
+    }
+    componentDidLoad() {
+        this.enableAttributePassing(this._ref, "db-badge");
+        this.initialized = true;
+        this.watch0Fn();
+    }
     render() {
         var _a, _b;
-        return (index.h("span", { key: '7f6ba75819424fcc333e56aebd40e23fe2b77a25', class: index$1.cls("db-badge", this.className), ref: (el) => {
+        return (index.h("span", { key: '575b6dcb7b8d8599ce601a22c7ec30f2c6c31f41', class: index$1.cls("db-badge", this.className), ref: (el) => {
                 this._ref = el;
             }, id: this.id, "data-semantic": this.semantic, "data-size": this.size, "data-emphasis": this.emphasis, "data-placement": this.placement, "data-label": ((_a = this.placement) === null || _a === void 0 ? void 0 : _a.startsWith("corner")) && ((_b = this.label) !== null && _b !== void 0 ? _b : constants.DEFAULT_LABEL) }, this.text ? this.text : index.h("slot", null)));
     }
+    static get watchers() { return {
+        "_ref": ["watch0"],
+        "initialized": ["watch0"]
+    }; }
 };
 
 exports.db_badge = DBBadge;

package/dist/cjs/db-badge.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"db-badge.entry.cjs.js","mappings":"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","names":["h","cls","DEFAULT_LABEL"],"sources":["src/components/badge/badge.tsx"],"sourcesContent":["import { DBBadgeProps, DBBadgeState } from \"./model\";\nimport { cls } from \"../../utils\";\nimport { DEFAULT_LABEL } 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-badge\",\n})\nexport class DBBadge {\n  private _ref!: HTMLSpanElement | null;\n  @Prop() placement: DBBadgeProps[\"placement\"];\n  @Prop() id: DBBadgeProps[\"id\"];\n  @Prop({attribute: \"classname\"}) className: DBBadgeProps[\"className\"];\n  @Prop() semantic: DBBadgeProps[\"semantic\"];\n  @Prop() size: DBBadgeProps[\"size\"];\n  @Prop() emphasis: DBBadgeProps[\"emphasis\"];\n  @Prop() label: DBBadgeProps[\"label\"];\n  @Prop() text: DBBadgeProps[\"text\"];\n\n  @State() initialized = false;\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-badge\");\n    this.initialized = true;\n  }\n\n  componentDidUpdate() {\n    if (this._ref && this.initialized) {\n      if (this.placement?.startsWith(\"corner\")) {\n        let parent = this._ref.parentElement;\n        if (parent && parent.localName.includes(\"badge\")) {\n          // Angular workaround\n          parent = parent.parentElement;\n        }\n        if (parent) {\n          parent.setAttribute(\"data-has-badge\", \"true\");\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <span\n        class={cls(\"db-badge\", this.className)}\n        ref={(el: any) => {\n          this._ref = el;\n        }}\n        id={this.id}\n        data-semantic={this.semantic}\n        data-size={this.size}\n        data-emphasis={this.emphasis}\n        data-placement={this.placement}\n        data-label={\n          this.placement?.startsWith(\"corner\") && (this.label ?? DEFAULT_LABEL)\n        }\n      >\n        {this.text ? this.text : <slot></slot>}\n      </span>\n    );\n  }\n}\n"],"version":3}
+{"file":"db-badge.entry.cjs.js","mappings":"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","names":["h","cls","DEFAULT_LABEL"],"sources":["src/components/badge/badge.tsx"],"sourcesContent":["import { DBBadgeProps, DBBadgeState } from \"./model\";\nimport { cls } from \"../../utils\";\nimport { DEFAULT_LABEL } from \"../../shared/constants\";\n\nimport { Component, h, Fragment, Watch, Prop, State } from \"@stencil/core\";\n\n\n/**\n * @slot children - This is a default/unnamed slot\n\n */\n @Component({\n  tag: \"db-badge\",\n})\nexport class DBBadge {\n  private _ref!: HTMLSpanElement | null;\n  @Prop() placement: DBBadgeProps[\"placement\"];\n  @Prop() id: DBBadgeProps[\"id\"];\n  @Prop({attribute: \"classname\"}) className: DBBadgeProps[\"className\"];\n  @Prop() semantic: DBBadgeProps[\"semantic\"];\n  @Prop() size: DBBadgeProps[\"size\"];\n  @Prop() emphasis: DBBadgeProps[\"emphasis\"];\n  @Prop() label: DBBadgeProps[\"label\"];\n  @Prop() text: DBBadgeProps[\"text\"];\n\n  @State() initialized = false;\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  watch0Fn() {\n    if (this._ref && this.initialized) {\n      if (this.placement?.startsWith(\"corner\")) {\n        let parent = this._ref.parentElement;\n        if (parent && parent.localName.includes(\"badge\")) {\n          // Angular workaround\n          parent = parent.parentElement;\n        }\n        if (parent) {\n          parent.setAttribute(\"data-has-badge\", \"true\");\n        }\n      }\n    }\n  }\n\n  @Watch(\"_ref\")\n  @Watch(\"initialized\")\n  watch0() {\n    this.watch0Fn();\n  }\n\n  componentDidLoad() {\n    this.enableAttributePassing(this._ref, \"db-badge\");\n    this.initialized = true;\n    this.watch0Fn();\n  }\n\n  render() {\n    return (\n      <span\n        class={cls(\"db-badge\", this.className)}\n        ref={(el: any) => {\n          this._ref = el;\n        }}\n        id={this.id}\n        data-semantic={this.semantic}\n        data-size={this.size}\n        data-emphasis={this.emphasis}\n        data-placement={this.placement}\n        data-label={\n          this.placement?.startsWith(\"corner\") && (this.label ?? DEFAULT_LABEL)\n        }\n      >\n        {this.text ? this.text : <slot></slot>}\n      </span>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/db-brand.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3d093f06.js');
+const index = require('./index-6e2cf235.js');
 const index$1 = require('./index-403366c7.js');
 const constants = require('./constants-89822e5f.js');
 

package/dist/cjs/db-button.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3d093f06.js');
+const index = require('./index-6e2cf235.js');
 const index$1 = require('./index-403366c7.js');
 
 const DBButton = class {

package/dist/cjs/db-card.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3d093f06.js');
+const index = require('./index-6e2cf235.js');
 const index$1 = require('./index-403366c7.js');
 
 const DBCard = class {

package/dist/cjs/db-checkbox.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3d093f06.js');
+const index = require('./index-6e2cf235.js');
 const constants = require('./constants-89822e5f.js');
 const index$1 = require('./index-403366c7.js');
 
@@ -100,17 +100,7 @@ const DBCheckbox = class {
             }
         }
     }
-    componentDidLoad() {
-        var _a;
-        this.enableAttributePassing(this._ref, "db-checkbox");
-        this.initialized = true;
-        const mId = (_a = this.id) !== null && _a !== void 0 ? _a : `checkbox-${index$1.uuid()}`;
-        this._id = mId;
-        this._messageId = mId + constants.DEFAULT_MESSAGE_ID_SUFFIX;
-        this._validMessageId = mId + constants.DEFAULT_VALID_MESSAGE_ID_SUFFIX;
-        this._invalidMessageId = mId + constants.DEFAULT_INVALID_MESSAGE_ID_SUFFIX;
-    }
-    componentDidUpdate() {
+    watch0Fn() {
         if (this._id) {
             const messageId = this._id + constants.DEFAULT_MESSAGE_ID_SUFFIX;
             this._messageId = messageId;
@@ -120,6 +110,11 @@ const DBCheckbox = class {
                 this._descByIds = messageId;
             }
         }
+    }
+    watch0() {
+        this.watch0Fn();
+    }
+    watch1Fn() {
         if (this._ref) {
             if (this.indeterminate !== undefined) {
                 // When indeterminate is set, the value of the checked prop only impacts the form submitted values.
@@ -127,6 +122,11 @@ const DBCheckbox = class {
                 this._ref.indeterminate = this.indeterminate;
             }
         }
+    }
+    watch1() {
+        this.watch1Fn();
+    }
+    watch2Fn() {
         if (this.initialized && this._ref) {
             // in angular this must be set via native element
             if (this.checked != undefined) {
@@ -135,12 +135,35 @@ const DBCheckbox = class {
             this.initialized = false;
         }
     }
+    watch2() {
+        this.watch2Fn();
+    }
+    componentDidLoad() {
+        var _a;
+        this.enableAttributePassing(this._ref, "db-checkbox");
+        this.initialized = true;
+        const mId = (_a = this.id) !== null && _a !== void 0 ? _a : `checkbox-${index$1.uuid()}`;
+        this._id = mId;
+        this._messageId = mId + constants.DEFAULT_MESSAGE_ID_SUFFIX;
+        this._validMessageId = mId + constants.DEFAULT_VALID_MESSAGE_ID_SUFFIX;
+        this._invalidMessageId = mId + constants.DEFAULT_INVALID_MESSAGE_ID_SUFFIX;
+        this.watch0Fn();
+        this.watch1Fn();
+        this.watch2Fn();
+    }
     render() {
         var _a, _b, _c, _d;
-        return (index.h("div", { key: '516ed45e71cec94c78630961047e4eb17559fe74', class: index$1.cls("db-checkbox", this.className), "data-size": this.size, "data-hide-label": index$1.getHideProp(this.showLabel) }, index.h("label", { key: '8fdb1fe937b3ea39220b59a785967435ff38f08c', htmlFor: this._id }, index.h("input", { key: 'e7367922a1f060d40d2182a0f1dafc2b0c93f25f', type: "checkbox", "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
+        return (index.h("div", { key: 'a0271b130c9ea285cf0ed8855ca6184e1bbd0dc2', class: index$1.cls("db-checkbox", this.className), "data-size": this.size, "data-hide-label": index$1.getHideProp(this.showLabel) }, index.h("label", { key: '671bd2542c827f14c692b784b38dacddfba3e2e1', htmlFor: this._id }, index.h("input", { key: '2c570c34423a152cae7f300b8cd64ea37660af8a', type: "checkbox", "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
                 this._ref = el;
-            }, id: this._id, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, required: this.required, onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), "aria-describedby": this._descByIds }), this.label ? this.label : index.h("slot", null)), index$1.stringPropVisible(this.message, this.showMessage) ? (index.h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, index.h("db-infotext", { key: 'c23ca5064548b1317552b66bd1e051483a761670', size: "small", semantic: "successful", id: this._validMessageId }, (_a = this.validMessage) !== null && _a !== void 0 ? _a : constants.DEFAULT_VALID_MESSAGE), index.h("db-infotext", { key: '3adf578c5d66981b4d538dee7be9c9d371d47f7b', size: "small", semantic: "critical", id: this._invalidMessageId }, (_d = (_b = this.invalidMessage) !== null && _b !== void 0 ? _b : (_c = this._ref) === null || _c === void 0 ? void 0 : _c.validationMessage) !== null && _d !== void 0 ? _d : constants.DEFAULT_INVALID_MESSAGE), index.h("span", { key: 'df025ce6148d146c671e0ffd7853f265713f8feb', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+            }, id: this._id, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, required: this.required, onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), "aria-describedby": this._descByIds }), this.label ? this.label : index.h("slot", null)), index$1.stringPropVisible(this.message, this.showMessage) ? (index.h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, index.h("db-infotext", { key: 'c2616ac2d5953f553f758ac22ae493c6b4cd7c97', size: "small", semantic: "successful", id: this._validMessageId }, (_a = this.validMessage) !== null && _a !== void 0 ? _a : constants.DEFAULT_VALID_MESSAGE), index.h("db-infotext", { key: 'b5b4f366e50fc282cc915c6161fb2e919a73093b', size: "small", semantic: "critical", id: this._invalidMessageId }, (_d = (_b = this.invalidMessage) !== null && _b !== void 0 ? _b : (_c = this._ref) === null || _c === void 0 ? void 0 : _c.validationMessage) !== null && _d !== void 0 ? _d : constants.DEFAULT_INVALID_MESSAGE), index.h("span", { key: '81f640e01c980cab839c6f57472389ad60279a75', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
+    static get watchers() { return {
+        "_id": ["watch0"],
+        "initialized": ["watch1", "watch2"],
+        "_ref": ["watch1", "watch2"],
+        "indeterminate": ["watch1"],
+        "checked": ["watch2"]
+    }; }
 };
 
 exports.db_checkbox = DBCheckbox;

package/dist/cjs/db-checkbox.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"db-checkbox.entry.cjs.js","mappings":"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","names":["hasVoiceOver","DEFAULT_INVALID_MESSAGE","delay","DEFAULT_VALID_MESSAGE","stringPropVisible","uuid","DEFAULT_MESSAGE_ID_SUFFIX","DEFAULT_VALID_MESSAGE_ID_SUFFIX","DEFAULT_INVALID_MESSAGE_ID_SUFFIX","h","cls","getHideProp"],"sources":["src/components/checkbox/checkbox.tsx"],"sourcesContent":["import { DBCheckboxProps, DBCheckboxState } from \"./model\";\nimport {\n  DEFAULT_INVALID_MESSAGE,\n  DEFAULT_INVALID_MESSAGE_ID_SUFFIX,\n  DEFAULT_MESSAGE_ID_SUFFIX,\n  DEFAULT_VALID_MESSAGE,\n  DEFAULT_VALID_MESSAGE_ID_SUFFIX,\n} from \"../../shared/constants\";\nimport { ChangeEvent, InteractionEvent } from \"../../shared/model\";\nimport {\n  handleFrameworkEventAngular,\n  handleFrameworkEventVue,\n} from \"../../utils/form-components\";\nimport { DBInfotext } from \"../infotext/infotext\";\nimport {\n  cls,\n  delay,\n  getHideProp,\n  hasVoiceOver,\n  stringPropVisible,\n  uuid,\n} from \"../../utils\";\n\nimport { Component, h, Fragment, Event, Prop, State } from \"@stencil/core\";\n\n\n/**\n * @slot children - This is a default/unnamed slot\n\n */\n @Component({\n  tag: \"db-checkbox\",\n})\nexport class DBCheckbox {\n  private _ref!: HTMLInputElement | null;\n  @Prop() id: DBCheckboxProps[\"id\"];\n  @Prop() message: DBCheckboxProps[\"message\"];\n  @Prop() showMessage: DBCheckboxProps[\"showMessage\"];\n  @Prop() indeterminate: DBCheckboxProps[\"indeterminate\"];\n  @Prop() checked: DBCheckboxProps[\"checked\"];\n  @Event() onChange: any;\n  @Prop() change: DBCheckboxProps[\"change\"];\n  @Prop() validation: DBCheckboxProps[\"validation\"];\n  @Prop() invalidMessage: DBCheckboxProps[\"invalidMessage\"];\n  @Prop() required: DBCheckboxProps[\"required\"];\n  @Prop() validMessage: DBCheckboxProps[\"validMessage\"];\n  @Event() onBlur: any;\n  @Prop() blur: DBCheckboxProps[\"blur\"];\n  @Event() onFocus: any;\n  @Prop() focus: DBCheckboxProps[\"focus\"];\n  @Prop({attribute: \"classname\"}) className: DBCheckboxProps[\"className\"];\n  @Prop() size: DBCheckboxProps[\"size\"];\n  @Prop() showLabel: DBCheckboxProps[\"showLabel\"];\n  @Prop() name: DBCheckboxProps[\"name\"];\n  @Prop() disabled: DBCheckboxProps[\"disabled\"];\n  @Prop() value: DBCheckboxProps[\"value\"];\n  @Prop() label: DBCheckboxProps[\"label\"];\n\n  @Prop() messageIcon: DBCheckboxProps[\"messageIcon\"];\n  @State() initialized = false;\n  @State() _id = undefined;\n  @State() _messageId = undefined;\n  @State() _validMessageId = undefined;\n  @State() _invalidMessageId = undefined;\n  @State() _descByIds = \"\";\n  @State() _voiceOverFallback = \"\";\n\n  handleChange(event: ChangeEvent<HTMLInputElement>) {\n    if (this.onChange) {\n      this.onChange.emit(event);\n    }\n    if (this.change) {\n      this.change(event);\n    }\n    /* For a11y reasons we need to map the correct message with the checkbox */\n    if (!this._ref?.validity.valid || this.validation === \"invalid\") {\n      this._descByIds = this._invalidMessageId;\n      if (hasVoiceOver()) {\n        this._voiceOverFallback =\n          this.invalidMessage ??\n          this._ref?.validationMessage ??\n          DEFAULT_INVALID_MESSAGE;\n        delay(() => (this._voiceOverFallback = \"\"), 1000);\n      }\n    } else if (\n      this.validation === \"valid\" ||\n      (this._ref?.validity.valid && this.required)\n    ) {\n      this._descByIds = this._validMessageId;\n      if (hasVoiceOver()) {\n        this._voiceOverFallback = this.validMessage ?? DEFAULT_VALID_MESSAGE;\n        delay(() => (this._voiceOverFallback = \"\"), 1000);\n      }\n    } else if (stringPropVisible(this.message, this.showMessage)) {\n      this._descByIds = this._messageId;\n    } else {\n      this._descByIds = \"\";\n    }\n  }\n  handleBlur(event: InteractionEvent<HTMLInputElement>) {\n    if (this.onBlur) {\n      this.onBlur.emit(event);\n    }\n    if (this.blur) {\n      this.blur(event);\n    }\n  }\n  handleFocus(event: InteractionEvent<HTMLInputElement>) {\n    if (this.onFocus) {\n      this.onFocus.emit(event);\n    }\n    if (this.focus) {\n      this.focus(event);\n    }\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: HTMLInputElement | 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-checkbox\");\n    this.initialized = true;\n    const mId = this.id ?? `checkbox-${uuid()}`;\n    this._id = mId;\n    this._messageId = mId + DEFAULT_MESSAGE_ID_SUFFIX;\n    this._validMessageId = mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX;\n    this._invalidMessageId = mId + DEFAULT_INVALID_MESSAGE_ID_SUFFIX;\n  }\n\n  componentDidUpdate() {\n    if (this._id) {\n      const messageId = this._id + DEFAULT_MESSAGE_ID_SUFFIX;\n      this._messageId = messageId;\n      this._validMessageId = this._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX;\n      this._invalidMessageId = this._id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX;\n      if (stringPropVisible(this.message, this.showMessage)) {\n        this._descByIds = messageId;\n      }\n    }\n    if (this._ref) {\n      if (this.indeterminate !== undefined) {\n        // When indeterminate is set, the value of the checked prop only impacts the form submitted values.\n        // It has no accessibility or UX implications. (https://mui.com/material-ui/react-checkbox/)\n        this._ref.indeterminate = this.indeterminate;\n      }\n    }\n    if (this.initialized && this._ref) {\n      // in angular this must be set via native element\n      if (this.checked != undefined) {\n        this._ref.checked = this.checked;\n      }\n      this.initialized = false;\n    }\n  }\n\n  render() {\n    return (\n      <div\n        class={cls(\"db-checkbox\", this.className)}\n        data-size={this.size}\n        data-hide-label={getHideProp(this.showLabel)}\n      >\n        <label htmlFor={this._id}>\n          <input\n            type=\"checkbox\"\n            aria-invalid={this.validation === \"invalid\"}\n            data-custom-validity={this.validation}\n            ref={(el: any) => {\n              this._ref = el;\n            }}\n            id={this._id}\n            name={this.name}\n            checked={this.checked}\n            disabled={this.disabled}\n            value={this.value}\n            required={this.required}\n            onChange={(event) => this.handleChange(event)}\n            onBlur={(event) => this.handleBlur(event)}\n            onFocus={(event) => this.handleFocus(event)}\n            aria-describedby={this._descByIds}\n          />\n          {this.label ? this.label : <slot></slot>}\n        </label>\n        {stringPropVisible(this.message, this.showMessage) ? (\n          <db-infotext\n            size=\"small\"\n            icon={this.messageIcon}\n            id={this._messageId}\n          >\n            {this.message}\n          </db-infotext>\n        ) : null}\n        <db-infotext\n          size=\"small\"\n          semantic=\"successful\"\n          id={this._validMessageId}\n        >\n          {this.validMessage ?? DEFAULT_VALID_MESSAGE}\n        </db-infotext>\n        <db-infotext\n          size=\"small\"\n          semantic=\"critical\"\n          id={this._invalidMessageId}\n        >\n          {this.invalidMessage ??\n            this._ref?.validationMessage ??\n            DEFAULT_INVALID_MESSAGE}\n        </db-infotext>\n        <span data-visually-hidden=\"true\" role=\"status\">\n          {this._voiceOverFallback}\n        </span>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"db-checkbox.entry.cjs.js","mappings":"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","names":["hasVoiceOver","DEFAULT_INVALID_MESSAGE","delay","DEFAULT_VALID_MESSAGE","stringPropVisible","DEFAULT_MESSAGE_ID_SUFFIX","DEFAULT_VALID_MESSAGE_ID_SUFFIX","DEFAULT_INVALID_MESSAGE_ID_SUFFIX","uuid","h","cls","getHideProp"],"sources":["src/components/checkbox/checkbox.tsx"],"sourcesContent":["import { DBCheckboxProps, DBCheckboxState } from \"./model\";\nimport {\n  DEFAULT_INVALID_MESSAGE,\n  DEFAULT_INVALID_MESSAGE_ID_SUFFIX,\n  DEFAULT_MESSAGE_ID_SUFFIX,\n  DEFAULT_VALID_MESSAGE,\n  DEFAULT_VALID_MESSAGE_ID_SUFFIX,\n} from \"../../shared/constants\";\nimport { ChangeEvent, InteractionEvent } from \"../../shared/model\";\nimport {\n  handleFrameworkEventAngular,\n  handleFrameworkEventVue,\n} from \"../../utils/form-components\";\nimport { DBInfotext } from \"../infotext/infotext\";\nimport {\n  cls,\n  delay,\n  getHideProp,\n  hasVoiceOver,\n  stringPropVisible,\n  uuid,\n} from \"../../utils\";\n\nimport {\n  Component,\n  h,\n  Fragment,\n  Watch,\n  Event,\n  Prop,\n  State,\n} from \"@stencil/core\";\n\n\n/**\n * @slot children - This is a default/unnamed slot\n\n */\n @Component({\n  tag: \"db-checkbox\",\n})\nexport class DBCheckbox {\n  private _ref!: HTMLInputElement | null;\n  @Prop() id: DBCheckboxProps[\"id\"];\n  @Prop() message: DBCheckboxProps[\"message\"];\n  @Prop() showMessage: DBCheckboxProps[\"showMessage\"];\n  @Prop() indeterminate: DBCheckboxProps[\"indeterminate\"];\n  @Prop() checked: DBCheckboxProps[\"checked\"];\n  @Event() onChange: any;\n  @Prop() change: DBCheckboxProps[\"change\"];\n  @Prop() validation: DBCheckboxProps[\"validation\"];\n  @Prop() invalidMessage: DBCheckboxProps[\"invalidMessage\"];\n  @Prop() required: DBCheckboxProps[\"required\"];\n  @Prop() validMessage: DBCheckboxProps[\"validMessage\"];\n  @Event() onBlur: any;\n  @Prop() blur: DBCheckboxProps[\"blur\"];\n  @Event() onFocus: any;\n  @Prop() focus: DBCheckboxProps[\"focus\"];\n  @Prop({attribute: \"classname\"}) className: DBCheckboxProps[\"className\"];\n  @Prop() size: DBCheckboxProps[\"size\"];\n  @Prop() showLabel: DBCheckboxProps[\"showLabel\"];\n  @Prop() name: DBCheckboxProps[\"name\"];\n  @Prop() disabled: DBCheckboxProps[\"disabled\"];\n  @Prop() value: DBCheckboxProps[\"value\"];\n  @Prop() label: DBCheckboxProps[\"label\"];\n\n  @Prop() messageIcon: DBCheckboxProps[\"messageIcon\"];\n  @State() initialized = false;\n  @State() _id = undefined;\n  @State() _messageId = undefined;\n  @State() _validMessageId = undefined;\n  @State() _invalidMessageId = undefined;\n  @State() _descByIds = \"\";\n  @State() _voiceOverFallback = \"\";\n\n  handleChange(event: ChangeEvent<HTMLInputElement>) {\n    if (this.onChange) {\n      this.onChange.emit(event);\n    }\n    if (this.change) {\n      this.change(event);\n    }\n    /* For a11y reasons we need to map the correct message with the checkbox */\n    if (!this._ref?.validity.valid || this.validation === \"invalid\") {\n      this._descByIds = this._invalidMessageId;\n      if (hasVoiceOver()) {\n        this._voiceOverFallback =\n          this.invalidMessage ??\n          this._ref?.validationMessage ??\n          DEFAULT_INVALID_MESSAGE;\n        delay(() => (this._voiceOverFallback = \"\"), 1000);\n      }\n    } else if (\n      this.validation === \"valid\" ||\n      (this._ref?.validity.valid && this.required)\n    ) {\n      this._descByIds = this._validMessageId;\n      if (hasVoiceOver()) {\n        this._voiceOverFallback = this.validMessage ?? DEFAULT_VALID_MESSAGE;\n        delay(() => (this._voiceOverFallback = \"\"), 1000);\n      }\n    } else if (stringPropVisible(this.message, this.showMessage)) {\n      this._descByIds = this._messageId;\n    } else {\n      this._descByIds = \"\";\n    }\n  }\n  handleBlur(event: InteractionEvent<HTMLInputElement>) {\n    if (this.onBlur) {\n      this.onBlur.emit(event);\n    }\n    if (this.blur) {\n      this.blur(event);\n    }\n  }\n  handleFocus(event: InteractionEvent<HTMLInputElement>) {\n    if (this.onFocus) {\n      this.onFocus.emit(event);\n    }\n    if (this.focus) {\n      this.focus(event);\n    }\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: HTMLInputElement | 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  watch0Fn() {\n    if (this._id) {\n      const messageId = this._id + DEFAULT_MESSAGE_ID_SUFFIX;\n      this._messageId = messageId;\n      this._validMessageId = this._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX;\n      this._invalidMessageId = this._id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX;\n      if (stringPropVisible(this.message, this.showMessage)) {\n        this._descByIds = messageId;\n      }\n    }\n  }\n\n  @Watch(\"_id\")\n  watch0() {\n    this.watch0Fn();\n  }\n\n  watch1Fn() {\n    if (this._ref) {\n      if (this.indeterminate !== undefined) {\n        // When indeterminate is set, the value of the checked prop only impacts the form submitted values.\n        // It has no accessibility or UX implications. (https://mui.com/material-ui/react-checkbox/)\n        this._ref.indeterminate = this.indeterminate;\n      }\n    }\n  }\n\n  @Watch(\"initialized\")\n  @Watch(\"_ref\")\n  @Watch(\"indeterminate\")\n  watch1() {\n    this.watch1Fn();\n  }\n\n  watch2Fn() {\n    if (this.initialized && this._ref) {\n      // in angular this must be set via native element\n      if (this.checked != undefined) {\n        this._ref.checked = this.checked;\n      }\n      this.initialized = false;\n    }\n  }\n\n  @Watch(\"initialized\")\n  @Watch(\"_ref\")\n  @Watch(\"checked\")\n  watch2() {\n    this.watch2Fn();\n  }\n\n  componentDidLoad() {\n    this.enableAttributePassing(this._ref, \"db-checkbox\");\n    this.initialized = true;\n    const mId = this.id ?? `checkbox-${uuid()}`;\n    this._id = mId;\n    this._messageId = mId + DEFAULT_MESSAGE_ID_SUFFIX;\n    this._validMessageId = mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX;\n    this._invalidMessageId = mId + DEFAULT_INVALID_MESSAGE_ID_SUFFIX;\n    this.watch0Fn();\n    this.watch1Fn();\n    this.watch2Fn();\n  }\n\n  render() {\n    return (\n      <div\n        class={cls(\"db-checkbox\", this.className)}\n        data-size={this.size}\n        data-hide-label={getHideProp(this.showLabel)}\n      >\n        <label htmlFor={this._id}>\n          <input\n            type=\"checkbox\"\n            aria-invalid={this.validation === \"invalid\"}\n            data-custom-validity={this.validation}\n            ref={(el: any) => {\n              this._ref = el;\n            }}\n            id={this._id}\n            name={this.name}\n            checked={this.checked}\n            disabled={this.disabled}\n            value={this.value}\n            required={this.required}\n            onChange={(event) => this.handleChange(event)}\n            onBlur={(event) => this.handleBlur(event)}\n            onFocus={(event) => this.handleFocus(event)}\n            aria-describedby={this._descByIds}\n          />\n          {this.label ? this.label : <slot></slot>}\n        </label>\n        {stringPropVisible(this.message, this.showMessage) ? (\n          <db-infotext\n            size=\"small\"\n            icon={this.messageIcon}\n            id={this._messageId}\n          >\n            {this.message}\n          </db-infotext>\n        ) : null}\n        <db-infotext\n          size=\"small\"\n          semantic=\"successful\"\n          id={this._validMessageId}\n        >\n          {this.validMessage ?? DEFAULT_VALID_MESSAGE}\n        </db-infotext>\n        <db-infotext\n          size=\"small\"\n          semantic=\"critical\"\n          id={this._invalidMessageId}\n        >\n          {this.invalidMessage ??\n            this._ref?.validationMessage ??\n            DEFAULT_INVALID_MESSAGE}\n        </db-infotext>\n        <span data-visually-hidden=\"true\" role=\"status\">\n          {this._voiceOverFallback}\n        </span>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/db-divider.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3d093f06.js');
+const index = require('./index-6e2cf235.js');
 const index$1 = require('./index-403366c7.js');
 
 const DBDivider = class {

package/dist/cjs/db-drawer.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3d093f06.js');
+const index = require('./index-6e2cf235.js');
 const constants = require('./constants-89822e5f.js');
 const index$1 = require('./index-403366c7.js');
 
@@ -84,23 +84,30 @@ const DBDrawer = class {
             }
         }
     }
-    componentDidLoad() {
-        this.enableAttributePassing(this._ref, "db-drawer");
+    watch0Fn() {
         this.handleDialogOpen();
     }
-    componentDidUpdate() {
+    watch0() {
+        this.watch0Fn();
+    }
+    componentDidLoad() {
+        this.enableAttributePassing(this._ref, "db-drawer");
         this.handleDialogOpen();
+        this.watch0Fn();
     }
     render() {
         var _a;
-        return (index.h("dialog", { key: 'efc7b76d7e179006f931e628209b70d523846f1a', class: "db-drawer", id: this.id, ref: (el) => {
+        return (index.h("dialog", { key: '45d96b573d5486b5742d011e1e8d5b85f5eecf57', class: "db-drawer", id: this.id, ref: (el) => {
                 this._ref = el;
             }, onClick: (event) => {
                 this.handleClose(event);
-            }, onKeyDown: (event) => this.handleClose(event), "data-backdrop": this.backdrop, "data-variant": this.variant }, index.h("article", { key: '820272abf5f6e879f8efaf49a1327475fffe279f', class: index$1.cls("db-drawer-container", this.className), ref: (el) => {
+            }, onKeyDown: (event) => this.handleClose(event), "data-backdrop": this.backdrop, "data-variant": this.variant }, index.h("article", { key: 'f0056239d6b60047b56f2c07afdefe69a40c2fdb', class: index$1.cls("db-drawer-container", this.className), ref: (el) => {
                 this.dialogContainerRef = el;
-            }, "data-spacing": this.spacing, "data-width": this.width, "data-direction": this.direction, "data-rounded": this.rounded }, index.h("header", { key: '283f77d28d6b73bad144526e432c619cbcc61262', class: "db-drawer-header" }, index.h("div", { key: 'a0ed12fd187e43d54a241bc608ead20771b59236', class: "db-drawer-header-text" }, index.h("slot", { key: 'e1e5c1121f722e35cd985409131dd83d6e8c88ff', name: "drawerHeader" })), index.h("db-button", { key: 'a07bd900b7070a7f8bda663292f6e06a13df3e7b', class: "button-close-drawer", icon: "cross", variant: "ghost", id: this.closeButtonId, noText: true, onClick: () => this.handleClose("close") }, (_a = this.closeButtonText) !== null && _a !== void 0 ? _a : constants.DEFAULT_CLOSE_BUTTON)), index.h("div", { key: '428b9518b4fe40a7d646cd37e945575805774152', class: "db-drawer-content" }, index.h("slot", { key: '11e09fdfee2cdbfcbf9751b3e0c95144478de9fe' })))));
+            }, "data-spacing": this.spacing, "data-width": this.width, "data-direction": this.direction, "data-rounded": this.rounded }, index.h("header", { key: '553e02fc81b1204b8fc315036c74825b4f690fc0', class: "db-drawer-header" }, index.h("div", { key: 'ac8901408434e520de2817da4cfae746f681ce57', class: "db-drawer-header-text" }, index.h("slot", { key: '64c88d5eea65823c25fc2e9693a4ef4734a06849', name: "drawerHeader" })), index.h("db-button", { key: '1b02b6c357f563877cbddbc8a246b296577dc0d1', class: "button-close-drawer", icon: "cross", variant: "ghost", id: this.closeButtonId, noText: true, onClick: () => this.handleClose("close") }, (_a = this.closeButtonText) !== null && _a !== void 0 ? _a : constants.DEFAULT_CLOSE_BUTTON)), index.h("div", { key: '55f2035f63f90fd62b743af12eaf4a5b680ac03d', class: "db-drawer-content" }, index.h("slot", { key: 'aaab4804f9079a6fa940080b51d552dfffbf2b34' })))));
     }
+    static get watchers() { return {
+        "open": ["watch0"]
+    }; }
 };
 
 exports.db_drawer = DBDrawer;

package/dist/cjs/db-drawer.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"db-drawer.entry.cjs.js","mappings":"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","names":["delay","h","cls","DEFAULT_CLOSE_BUTTON"],"sources":["src/components/drawer/drawer.tsx"],"sourcesContent":["import { DBDrawerProps, DBDrawerState } from \"./model\";\nimport { DBButton } from \"../button/button\";\nimport { DEFAULT_CLOSE_BUTTON } from \"../../shared/constants\";\nimport { cls, delay } from \"../../utils\";\n\nimport { Component, h, Fragment, Event, Prop } from \"@stencil/core\";\n\n\n/**\n * @slot children - This is a default/unnamed slot\n * @slot drawerHeader - TODO: Add description for slotDrawerHeader\n */\n @Component({\n  tag: \"db-drawer\",\n})\nexport class DBDrawer {\n  private _ref!: HTMLDialogElement | null;\n  private dialogContainerRef!: HTMLDivElement | null;\n  @Prop() open: DBDrawerProps[\"open\"];\n  @Prop() backdrop: DBDrawerProps[\"backdrop\"];\n  @Event() close: any;\n  @Prop() variant: DBDrawerProps[\"variant\"];\n  @Prop() id: DBDrawerProps[\"id\"];\n  @Prop({attribute: \"classname\"}) className: DBDrawerProps[\"className\"];\n  @Prop() spacing: DBDrawerProps[\"spacing\"];\n  @Prop() width: DBDrawerProps[\"width\"];\n  @Prop() direction: DBDrawerProps[\"direction\"];\n  @Prop() rounded: DBDrawerProps[\"rounded\"];\n  @Prop() closeButtonId: DBDrawerProps[\"closeButtonId\"];\n  @Prop() closeButtonText: DBDrawerProps[\"closeButtonText\"];\n\n\n  handleClose(event: any) {\n    if (event.key === \"Escape\") {\n      event.preventDefault();\n    }\n    if (\n      event === \"close\" ||\n      event.key === \"Escape\" ||\n      (event.target.nodeName === \"DIALOG\" &&\n        event.type === \"click\" &&\n        this.backdrop !== \"none\")\n    ) {\n      if (this.close) {\n        this.close.emit(event);\n      }\n    }\n  }\n  handleDialogOpen() {\n    if (this._ref) {\n      if (this.open && !this._ref.open) {\n        if (this.dialogContainerRef) {\n          this.dialogContainerRef.hidden = false;\n        }\n        if (this.backdrop === \"none\" || this.variant === \"inside\") {\n          this._ref.show();\n        } else {\n          this._ref.showModal();\n        }\n      }\n      if (!this.open && this._ref.open) {\n        if (this.dialogContainerRef) {\n          this.dialogContainerRef.hidden = true;\n        }\n        delay(() => {\n          if (this.dialogContainerRef) {\n            this.dialogContainerRef.hidden = false;\n          }\n          this._ref?.close();\n        }, 401);\n      }\n    }\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-drawer\");\n    this.handleDialogOpen();\n  }\n\n  componentDidUpdate() {\n    this.handleDialogOpen();\n  }\n\n  render() {\n    return (\n      <dialog\n        class=\"db-drawer\"\n        id={this.id}\n        ref={(el: any) => {\n          this._ref = el;\n        }}\n        onClick={(event) => {\n          this.handleClose(event);\n        }}\n        onKeyDown={(event) => this.handleClose(event)}\n        data-backdrop={this.backdrop}\n        data-variant={this.variant}\n      >\n        <article\n          class={cls(\"db-drawer-container\", this.className)}\n          ref={(el: any) => {\n            this.dialogContainerRef = el;\n          }}\n          data-spacing={this.spacing}\n          data-width={this.width}\n          data-direction={this.direction}\n          data-rounded={this.rounded}\n        >\n          <header class=\"db-drawer-header\">\n            <div class=\"db-drawer-header-text\">\n              <slot name=\"drawerHeader\"></slot>\n            </div>\n            <db-button\n              class=\"button-close-drawer\"\n              icon=\"cross\"\n              variant=\"ghost\"\n              id={this.closeButtonId}\n              noText={true}\n              onClick={() => this.handleClose(\"close\")}\n            >\n              {this.closeButtonText ?? DEFAULT_CLOSE_BUTTON}\n            </db-button>\n          </header>\n          <div class=\"db-drawer-content\">\n            <slot></slot>\n          </div>\n        </article>\n      </dialog>\n    );\n  }\n}\n"],"version":3}
+{"file":"db-drawer.entry.cjs.js","mappings":";;;;;;;;MAea,QAAQ;;;;;IAiBnB,WAAW,CAAC,KAAU;QACpB,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;YAC1B,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;QACD,IACE,KAAK,KAAK,OAAO;YACjB,KAAK,CAAC,GAAG,KAAK,QAAQ;aACrB,KAAK,CAAC,MAAM,CAAC,QAAQ,KAAK,QAAQ;gBACjC,KAAK,CAAC,IAAI,KAAK,OAAO;gBACtB,IAAI,CAAC,QAAQ,KAAK,MAAM,CAAC,EAC3B;YACA,IAAI,IAAI,CAAC,KAAK,EAAE;gBACd,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;aACxB;SACF;KACF;IACD,gBAAgB;QACd,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;gBAChC,IAAI,IAAI,CAAC,kBAAkB,EAAE;oBAC3B,IAAI,CAAC,kBAAkB,CAAC,MAAM,GAAG,KAAK,CAAC;iBACxC;gBACD,IAAI,IAAI,CAAC,QAAQ,KAAK,MAAM,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE;oBACzD,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;iBAClB;qBAAM;oBACL,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;iBACvB;aACF;YACD,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;gBAChC,IAAI,IAAI,CAAC,kBAAkB,EAAE;oBAC3B,IAAI,CAAC,kBAAkB,CAAC,MAAM,GAAG,IAAI,CAAC;iBACvC;gBACDA,aAAK,CAAC;;oBACJ,IAAI,IAAI,CAAC,kBAAkB,EAAE;wBAC3B,IAAI,CAAC,kBAAkB,CAAC,MAAM,GAAG,KAAK,CAAC;qBACxC;oBACD,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,EAAE,CAAC;iBACpB,EAAE,GAAG,CAAC,CAAC;aACT;SACF;KACF;;;;;;IAOO,sBAAsB,CAC5B,OAA2B,EAC3B,qBAA6B;QAE7B,MAAM,MAAM,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;QACvD,IAAI,OAAO,IAAI,MAAM,EAAE;YACrB,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;YACrC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBAC1C,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;gBAChC,IACE,IAAI;qBACH,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,EAChE;oBACA,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;oBAC5C,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;iBACnC;gBACD,IAAI,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;oBACjC,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;oBACvD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;oBACxD,MAAM,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;oBACnD,OAAO,CAAC,YAAY,CAClB,IAAI,CAAC,IAAI,EACT,GAAG,YAAY,GAAG,GAAG,YAAY,GAAG,GAAG,EAAE,GAAG,KAAK,EAAE,CACpD,CAAC;oBACF,IAAI,cAAc,EAAE;;wBAElB,MAAM,CAAC,YAAY,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;qBAC1C;yBAAM;wBACL,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;qBACnC;iBACF;aACF;SACF;KACF;IAED,QAAQ;QACN,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;IAGD,MAAM;QACJ,IAAI,CAAC,QAAQ,EAAE,CAAC;KACjB;IAED,gBAAgB;QACd,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;QACpD,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,CAAC,QAAQ,EAAE,CAAC;KACjB;IAED,MAAM;;QACJ,QACEC,qEACE,KAAK,EAAC,WAAW,EACjB,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,GAAG,EAAE,CAAC,EAAO;gBACX,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;aAChB,EACD,OAAO,EAAE,CAAC,KAAK;gBACb,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;aACzB,EACD,SAAS,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,mBAC9B,IAAI,CAAC,QAAQ,kBACd,IAAI,CAAC,OAAO,IAE1BA,sEACE,KAAK,EAAEC,WAAG,CAAC,qBAAqB,EAAE,IAAI,CAAC,SAAS,CAAC,EACjD,GAAG,EAAE,CAAC,EAAO;gBACX,IAAI,CAAC,kBAAkB,GAAG,EAAE,CAAC;aAC9B,kBACa,IAAI,CAAC,OAAO,gBACd,IAAI,CAAC,KAAK,oBACN,IAAI,CAAC,SAAS,kBAChB,IAAI,CAAC,OAAO,IAE1BD,qEAAQ,KAAK,EAAC,kBAAkB,IAC9BA,kEAAK,KAAK,EAAC,uBAAuB,IAChCA,mEAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B,EACNA,wEACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,OAAO,EACf,EAAE,EAAE,IAAI,CAAC,aAAa,EACtB,MAAM,EAAE,IAAI,EACZ,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,IAEvC,MAAA,IAAI,CAAC,eAAe,mCAAIE,8BAAoB,CACnC,CACL,EACTF,kEAAK,KAAK,EAAC,mBAAmB,IAC5BA,oEAAa,CACT,CACE,CACH,EACT;KACH;;;;;;;;","names":["delay","h","cls","DEFAULT_CLOSE_BUTTON"],"sources":["src/components/drawer/drawer.tsx"],"sourcesContent":["import { DBDrawerProps, DBDrawerState } from \"./model\";\nimport { DBButton } from \"../button/button\";\nimport { DEFAULT_CLOSE_BUTTON } from \"../../shared/constants\";\nimport { cls, delay } from \"../../utils\";\n\nimport { Component, h, Fragment, Watch, Event, Prop } from \"@stencil/core\";\n\n\n/**\n * @slot children - This is a default/unnamed slot\n * @slot drawerHeader - TODO: Add description for slotDrawerHeader\n */\n @Component({\n  tag: \"db-drawer\",\n})\nexport class DBDrawer {\n  private _ref!: HTMLDialogElement | null;\n  private dialogContainerRef!: HTMLDivElement | null;\n  @Prop() open: DBDrawerProps[\"open\"];\n  @Prop() backdrop: DBDrawerProps[\"backdrop\"];\n  @Event() close: any;\n  @Prop() variant: DBDrawerProps[\"variant\"];\n  @Prop() id: DBDrawerProps[\"id\"];\n  @Prop({attribute: \"classname\"}) className: DBDrawerProps[\"className\"];\n  @Prop() spacing: DBDrawerProps[\"spacing\"];\n  @Prop() width: DBDrawerProps[\"width\"];\n  @Prop() direction: DBDrawerProps[\"direction\"];\n  @Prop() rounded: DBDrawerProps[\"rounded\"];\n  @Prop() closeButtonId: DBDrawerProps[\"closeButtonId\"];\n  @Prop() closeButtonText: DBDrawerProps[\"closeButtonText\"];\n\n\n  handleClose(event: any) {\n    if (event.key === \"Escape\") {\n      event.preventDefault();\n    }\n    if (\n      event === \"close\" ||\n      event.key === \"Escape\" ||\n      (event.target.nodeName === \"DIALOG\" &&\n        event.type === \"click\" &&\n        this.backdrop !== \"none\")\n    ) {\n      if (this.close) {\n        this.close.emit(event);\n      }\n    }\n  }\n  handleDialogOpen() {\n    if (this._ref) {\n      if (this.open && !this._ref.open) {\n        if (this.dialogContainerRef) {\n          this.dialogContainerRef.hidden = false;\n        }\n        if (this.backdrop === \"none\" || this.variant === \"inside\") {\n          this._ref.show();\n        } else {\n          this._ref.showModal();\n        }\n      }\n      if (!this.open && this._ref.open) {\n        if (this.dialogContainerRef) {\n          this.dialogContainerRef.hidden = true;\n        }\n        delay(() => {\n          if (this.dialogContainerRef) {\n            this.dialogContainerRef.hidden = false;\n          }\n          this._ref?.close();\n        }, 401);\n      }\n    }\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  watch0Fn() {\n    this.handleDialogOpen();\n  }\n\n  @Watch(\"open\")\n  watch0() {\n    this.watch0Fn();\n  }\n\n  componentDidLoad() {\n    this.enableAttributePassing(this._ref, \"db-drawer\");\n    this.handleDialogOpen();\n    this.watch0Fn();\n  }\n\n  render() {\n    return (\n      <dialog\n        class=\"db-drawer\"\n        id={this.id}\n        ref={(el: any) => {\n          this._ref = el;\n        }}\n        onClick={(event) => {\n          this.handleClose(event);\n        }}\n        onKeyDown={(event) => this.handleClose(event)}\n        data-backdrop={this.backdrop}\n        data-variant={this.variant}\n      >\n        <article\n          class={cls(\"db-drawer-container\", this.className)}\n          ref={(el: any) => {\n            this.dialogContainerRef = el;\n          }}\n          data-spacing={this.spacing}\n          data-width={this.width}\n          data-direction={this.direction}\n          data-rounded={this.rounded}\n        >\n          <header class=\"db-drawer-header\">\n            <div class=\"db-drawer-header-text\">\n              <slot name=\"drawerHeader\"></slot>\n            </div>\n            <db-button\n              class=\"button-close-drawer\"\n              icon=\"cross\"\n              variant=\"ghost\"\n              id={this.closeButtonId}\n              noText={true}\n              onClick={() => this.handleClose(\"close\")}\n            >\n              {this.closeButtonText ?? DEFAULT_CLOSE_BUTTON}\n            </db-button>\n          </header>\n          <div class=\"db-drawer-content\">\n            <slot></slot>\n          </div>\n        </article>\n      </dialog>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/db-header.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3d093f06.js');
+const index = require('./index-6e2cf235.js');
 const index$1 = require('./index-403366c7.js');
 const constants = require('./constants-89822e5f.js');
 const navigation = require('./navigation-5586b826.js');
@@ -57,12 +57,7 @@ const DBHeader = class {
             }
         }
     }
-    componentDidLoad() {
-        this.enableAttributePassing(this._ref, "db-header");
-        this.initialized = true;
-        this._id = this.id || "header-" + index$1.uuid();
-    }
-    componentDidUpdate() {
+    watch0Fn() {
         if (this.initialized && document && this._id && this.forceMobile) {
             const headerElement = document.getElementById(this._id);
             if (headerElement) {
@@ -76,12 +71,24 @@ const DBHeader = class {
             this.forcedToMobile = true;
         }
     }
+    watch0() {
+        this.watch0Fn();
+    }
+    componentDidLoad() {
+        this.enableAttributePassing(this._ref, "db-header");
+        this.initialized = true;
+        this._id = this.id || "header-" + index$1.uuid();
+        this.watch0Fn();
+    }
     render() {
         var _a;
-        return (index.h("header", { key: '90e4860c36a39e77aa080e188c190d8213e05f31', class: index$1.cls("db-header", this.className), ref: (el) => {
+        return (index.h("header", { key: 'a1944079ccb6bf1ee6ea360a68086846125a0e2f', class: index$1.cls("db-header", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this._id, "data-width": this.width, "data-on-forcing-mobile": this.forceMobile && !this.forcedToMobile }, index.h("db-drawer", { key: 'baab2ea24ee50f1c57cdeee348a32a0bfe727181', class: "db-header-drawer", spacing: "small", rounded: true, open: this.drawerOpen, onClose: () => this.toggle() }, index.h("div", { key: '04227e024f8aa835274b00edeb729f248b843432', class: "db-header-drawer-navigation" }, index.h("div", { key: '49255007dd63d0f48c403c6ea6982e29cb3be8ce', class: "db-header-navigation", onClick: (event) => this.handleNavigationItemClick(event) }, index.h("slot", { key: '52b2c8cea483255cebf7bbf824e490a2805c0812' })), index.h("div", { key: 'd53b476dd0eb375a91571ed8b25f09533952b7ac', class: "db-header-meta-navigation" }, index.h("slot", { key: 'd7aca8fa660affa66857c78c70bf6d3bb6baf577', name: "metaNavigation" }))), index.h("div", { key: '1baa944ea37df34349cafe83ff9601a96b2f3845', class: "db-header-secondary-action" }, index.h("slot", { key: '2df7106c6096adb6642a58d2afd865babb9a2aed', name: "secondaryAction" }))), index.h("div", { key: '3444df8cd284cf2f09fe8bcd561605eed25547ac', class: "db-header-meta-navigation" }, index.h("slot", { key: 'b3cdfb520b9bfaa69586c6d9d397b2564962e38e', name: "metaNavigation" })), index.h("div", { key: 'e6f467e4e541179d37d30acc045261a007cf65d1', class: "db-header-navigation-bar" }, index.h("div", { key: '5c6f78bcd3516b699a5f2b0c9c26a6142f6c534b', class: "db-header-brand-container" }, index.h("slot", { key: '9fb25e7cdc3c44e1b7a388083c1e16ec66bcd100', name: "brand" })), index.h("div", { key: 'a59204c004f0e03aaa7cf6190c304db448f9783e', class: "db-header-navigation-container" }, index.h("div", { key: '7a4c5ab818ba78209bc63a6baecb9f0460355d0b', class: "db-header-navigation" }, index.h("slot", { key: '799cbf46a06b87f8c2c7a42f17a0f2c23c65481f' })), index.h("div", { key: '756293dd8ecfff883cb90cc1ba904503beea77eb', class: "db-header-primary-action" }, index.h("slot", { key: '181fa4b77a2c10bf091a6690b97d4e665d4fd824', name: "primaryAction" }))), index.h("div", { key: '0ba2601633b491a60b33166253a7da6695249c0a', class: "db-header-action-container" }, index.h("div", { key: '21d5d4145aa40c14c475b9f9d72d0ce885aff81e', class: "db-header-burger-menu-container" }, index.h("db-button", { key: '732bb354bbb363b32365215f2db1f25b3a54cee3', icon: "menu", variant: "ghost", id: this._id + "-burger-menu", noText: true, onClick: () => this.toggle() }, (_a = this.burgerMenuLabel) !== null && _a !== void 0 ? _a : constants.DEFAULT_BURGER_MENU)), index.h("div", { key: 'c9e3f15b97eabaf94dcaee166f7d0e31577ade58', class: "db-header-secondary-action" }, index.h("slot", { key: '5e783e8c6347e28264f466829cd495973a6d23d8', name: "secondaryAction" }))))));
+            }, id: this._id, "data-width": this.width, "data-on-forcing-mobile": this.forceMobile && !this.forcedToMobile }, index.h("db-drawer", { key: 'a086da74c97662e9e33d512ec4dda63e7b56dc74', class: "db-header-drawer", spacing: "small", rounded: true, open: this.drawerOpen, onClose: () => this.toggle() }, index.h("div", { key: 'd99e789b5ec5bdc09d7438e589903838de0fbb80', class: "db-header-drawer-navigation" }, index.h("div", { key: '9a49e141930002cc497dc69d3abad2c1385e5ace', class: "db-header-navigation", onClick: (event) => this.handleNavigationItemClick(event) }, index.h("slot", { key: 'e654c28d49f27cc4d054d5aa2375066043947f7f' })), index.h("div", { key: '1fa75e8ea8f93e8736cd23b7a05d131ed313fc63', class: "db-header-meta-navigation" }, index.h("slot", { key: '3598fa3831dbebafd83077915e41d59c323c1a2b', name: "metaNavigation" }))), index.h("div", { key: '1de486f0bba414124a682651ac225ade4b417842', class: "db-header-secondary-action" }, index.h("slot", { key: '160f65e26ab01a3d4da9196238993bab5e75d903', name: "secondaryAction" }))), index.h("div", { key: '80badc2597674c112252499793d728a27eb2b7eb', class: "db-header-meta-navigation" }, index.h("slot", { key: 'd2c8d28050bf2360d0d5fc6294a5464abafc0b34', name: "metaNavigation" })), index.h("div", { key: 'f15ed8fc314657c625030edae528cc6741ab2431', class: "db-header-navigation-bar" }, index.h("div", { key: '7e27ff8d36ed0a55c29209dfca595d4a30d0f87d', class: "db-header-brand-container" }, index.h("slot", { key: '1929f3470e162b9d63fd14ac9926f010c6dce264', name: "brand" })), index.h("div", { key: 'f54a8dfb5f6205a94ecdbfcbc8ae1fcc617d0787', class: "db-header-navigation-container" }, index.h("div", { key: 'df907a865ce91be332970f60251969857372c9e1', class: "db-header-navigation" }, index.h("slot", { key: '6290ab6dc2a4d3a1b1d89bdaac30cdbfee3f7d34' })), index.h("div", { key: '35f59206c7cdb293106e47ad4beda0af9f8a1dcd', class: "db-header-primary-action" }, index.h("slot", { key: '90870fcd5e2721b6c0606e57cea24751fb128d48', name: "primaryAction" }))), index.h("div", { key: '0ba5f21806156ba27c1377266a875952e839425d', class: "db-header-action-container" }, index.h("div", { key: '57780dd0d6b4cfbafc4e4edeb761a79e6acb1c1e', class: "db-header-burger-menu-container" }, index.h("db-button", { key: '66bec38632988cca9700fad1de89d6d33dad197d', icon: "menu", variant: "ghost", id: this._id + "-burger-menu", noText: true, onClick: () => this.toggle() }, (_a = this.burgerMenuLabel) !== null && _a !== void 0 ? _a : constants.DEFAULT_BURGER_MENU)), index.h("div", { key: 'de9408a796a8af6998c335ff29c0c21eba71dbab', class: "db-header-secondary-action" }, index.h("slot", { key: '563353f952f6510851cb521d1a09f57bd2a45fef', name: "secondaryAction" }))))));
     }
+    static get watchers() { return {
+        "initialized": ["watch0"]
+    }; }
 };
 
 exports.db_header = DBHeader;