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

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

@@ -0,0 +1,62 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3d093f06.js');
+const index$1 = require('./index-c0df827d.js');
+
+const DBButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.onClick = index.createEvent(this, "onClick", 7);
+    }
+    handleClick(event) {
+        if (this.onClick) {
+            this.onClick.emit(event);
+        }
+    }
+    /**
+     * 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-button");
+    }
+    render() {
+        return (index.h("button", { key: 'd469bdf0d339b5ea838a7f1841b1ceb7d604d660', class: index$1.cls("db-button", this.className), ref: (el) => {
+                this._ref = el;
+            }, id: this.id, type: this.type || "button", disabled: this.disabled, "aria-label": this.label, "data-icon": this.icon, "data-hide-icon": index$1.getHideProp(this.showIcon), "data-size": this.size, "data-state": this.state, "data-width": this.width, "data-variant": this.variant, "data-no-text": index$1.getBooleanAsString(this.noText), name: this.name, value: this.value, "aria-describedby": this.describedbyid, "aria-expanded": this.ariaexpanded, "aria-pressed": this.ariapressed, onClick: (event) => this.handleClick(event) }, this.text ? this.text : index.h("slot", null)));
+    }
+};
+
+exports.db_button = DBButton;
+
+//# sourceMappingURL=db-button.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"db-button.entry.cjs.js","mappings":"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","names":["h","cls","getHideProp","getBooleanAsString"],"sources":["src/components/button/button.tsx"],"sourcesContent":["import type { DBButtonProps, DBButtonState } from \"./model\";\nimport { cls, getBooleanAsString, getHideProp } from \"../../utils\";\nimport { ClickEvent } from \"../../shared/model\";\n\nimport { Component, h, Fragment, Event, Prop } from \"@stencil/core\";\n\n\n/**\n * @slot children - This is a default/unnamed slot\n\n */\n @Component({\n  tag: \"db-button\",\n})\nexport class DBButton {\n  private _ref!: HTMLButtonElement | null;\n  @Event() onClick: any;\n  @Prop() id: DBButtonProps[\"id\"];\n  @Prop({attribute: \"classname\"}) className: DBButtonProps[\"className\"];\n  @Prop() type: DBButtonProps[\"type\"];\n  @Prop() disabled: DBButtonProps[\"disabled\"];\n  @Prop() label: DBButtonProps[\"label\"];\n  @Prop() icon: DBButtonProps[\"icon\"];\n  @Prop() showIcon: DBButtonProps[\"showIcon\"];\n  @Prop() size: DBButtonProps[\"size\"];\n  @Prop() state: DBButtonProps[\"state\"];\n  @Prop() width: DBButtonProps[\"width\"];\n  @Prop() variant: DBButtonProps[\"variant\"];\n  @Prop() noText: DBButtonProps[\"noText\"];\n  @Prop() name: DBButtonProps[\"name\"];\n  @Prop() value: DBButtonProps[\"value\"];\n  @Prop() describedbyid: DBButtonProps[\"describedbyid\"];\n  @Prop() ariaexpanded: DBButtonProps[\"ariaexpanded\"];\n  @Prop() ariapressed: DBButtonProps[\"ariapressed\"];\n  @Prop() text: DBButtonProps[\"text\"];\n\n\n  handleClick(event: ClickEvent<HTMLButtonElement>) {\n    if (this.onClick) {\n      this.onClick.emit(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: 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-button\");\n  }\n\n  render() {\n    return (\n      <button\n        class={cls(\"db-button\", this.className)}\n        ref={(el: any) => {\n          this._ref = el;\n        }}\n        id={this.id}\n        type={this.type || \"button\"}\n        disabled={this.disabled}\n        aria-label={this.label}\n        data-icon={this.icon}\n        data-hide-icon={getHideProp(this.showIcon)}\n        data-size={this.size}\n        data-state={this.state}\n        data-width={this.width}\n        data-variant={this.variant}\n        data-no-text={getBooleanAsString(this.noText)}\n        name={this.name}\n        value={this.value}\n        aria-describedby={this.describedbyid}\n        aria-expanded={this.ariaexpanded}\n        aria-pressed={this.ariapressed}\n        onClick={(event) => this.handleClick(event)}\n      >\n        {this.text ? this.text : <slot></slot>}\n      </button>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,62 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3d093f06.js');
+const index$1 = require('./index-c0df827d.js');
+
+const DBCard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.onClick = index.createEvent(this, "onClick", 7);
+    }
+    handleClick(event) {
+        if (this.onClick) {
+            this.onClick.emit(event);
+        }
+    }
+    /**
+     * 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-card");
+    }
+    render() {
+        return (index.h("div", { key: 'ccbc53820799b727bdf095528da4bf4c7fdf1129', class: index$1.cls("db-card", this.className), ref: (el) => {
+                this._ref = el;
+            }, id: this.id, "data-behavior": this.behavior, "data-elevation-level": this.elevationLevel, "data-spacing": this.spacing, role: this.behavior === "interactive" ? "button" : undefined, tabIndex: this.behavior === "interactive" ? 0 : undefined, onClick: (event) => this.handleClick(event) }, index.h("slot", { key: '8afa05261ef6931eceecfd55694c8dc06d78f7a3' })));
+    }
+};
+
+exports.db_card = DBCard;
+
+//# sourceMappingURL=db-card.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"db-card.entry.cjs.js","mappings":";;;;;;;MAca,MAAM;;;;;IAUjB,WAAW,CAAC,KAA8B;QACxC,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAC1B;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,gBAAgB;QACd,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;KACnD;IAED,MAAM;QACJ,QACEA,kEACE,KAAK,EAAEC,WAAG,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,EACrC,GAAG,EAAE,CAAC,EAAO;gBACX,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;aAChB,EACD,EAAE,EAAE,IAAI,CAAC,EAAE,mBACI,IAAI,CAAC,QAAQ,0BACN,IAAI,CAAC,cAAc,kBAC3B,IAAI,CAAC,OAAO,EAC1B,IAAI,EAAE,IAAI,CAAC,QAAQ,KAAK,aAAa,GAAG,QAAQ,GAAG,SAAS,EAC5D,QAAQ,EAAE,IAAI,CAAC,QAAQ,KAAK,aAAa,GAAG,CAAC,GAAG,SAAS,EACzD,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,IAE3CD,oEAAa,CACT,EACN;KACH;;;;;","names":["h","cls"],"sources":["src/components/card/card.tsx"],"sourcesContent":["import type { DBCardProps, DBCardState } from \"./model\";\nimport { cls } from \"../../utils\";\nimport { ClickEvent } from \"../../shared/model\";\n\nimport { Component, h, Fragment, Event, Prop } from \"@stencil/core\";\n\n\n/**\n * @slot children - This is a default/unnamed slot\n\n */\n @Component({\n  tag: \"db-card\",\n})\nexport class DBCard {\n  private _ref!: HTMLDivElement | null;\n  @Event() onClick: any;\n  @Prop() id: DBCardProps[\"id\"];\n  @Prop({attribute: \"classname\"}) className: DBCardProps[\"className\"];\n  @Prop() behavior: DBCardProps[\"behavior\"];\n  @Prop() elevationLevel: DBCardProps[\"elevationLevel\"];\n  @Prop() spacing: DBCardProps[\"spacing\"];\n\n\n  handleClick(event: ClickEvent<HTMLElement>) {\n    if (this.onClick) {\n      this.onClick.emit(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: 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-card\");\n  }\n\n  render() {\n    return (\n      <div\n        class={cls(\"db-card\", this.className)}\n        ref={(el: any) => {\n          this._ref = el;\n        }}\n        id={this.id}\n        data-behavior={this.behavior}\n        data-elevation-level={this.elevationLevel}\n        data-spacing={this.spacing}\n        role={this.behavior === \"interactive\" ? \"button\" : undefined}\n        tabIndex={this.behavior === \"interactive\" ? 0 : undefined}\n        onClick={(event) => this.handleClick(event)}\n      >\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,149 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3d093f06.js');
+const index$1 = require('./index-c0df827d.js');
+const constants = require('./constants-89822e5f.js');
+
+const DBCheckbox = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.onChange = index.createEvent(this, "onChange", 7);
+        this.onBlur = index.createEvent(this, "onBlur", 7);
+        this.onFocus = index.createEvent(this, "onFocus", 7);
+        this.initialized = false;
+        this._id = undefined;
+        this._messageId = undefined;
+        this._validMessageId = undefined;
+        this._invalidMessageId = undefined;
+        this._descByIds = "";
+        this._voiceOverFallback = "";
+    }
+    handleChange(event) {
+        var _a, _b, _c, _d, _e, _f;
+        if (this.onChange) {
+            this.onChange.emit(event);
+        }
+        if (this.change) {
+            this.change(event);
+        }
+        /* For a11y reasons we need to map the correct message with the checkbox */
+        if (!((_a = this._ref) === null || _a === void 0 ? void 0 : _a.validity.valid) || this.validation === "invalid") {
+            this._descByIds = this._invalidMessageId;
+            if (index$1.hasVoiceOver()) {
+                this._voiceOverFallback =
+                    (_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$1.delay(() => (this._voiceOverFallback = ""), 1000);
+            }
+        }
+        else if (this.validation === "valid" ||
+            (((_e = this._ref) === null || _e === void 0 ? void 0 : _e.validity.valid) && this.required)) {
+            this._descByIds = this._validMessageId;
+            if (index$1.hasVoiceOver()) {
+                this._voiceOverFallback = (_f = this.validMessage) !== null && _f !== void 0 ? _f : constants.DEFAULT_VALID_MESSAGE;
+                index$1.delay(() => (this._voiceOverFallback = ""), 1000);
+            }
+        }
+        else if (index$1.stringPropVisible(this.message, this.showMessage)) {
+            this._descByIds = this._messageId;
+        }
+        else {
+            this._descByIds = "";
+        }
+    }
+    handleBlur(event) {
+        if (this.onBlur) {
+            this.onBlur.emit(event);
+        }
+        if (this.blur) {
+            this.blur(event);
+        }
+    }
+    handleFocus(event) {
+        if (this.onFocus) {
+            this.onFocus.emit(event);
+        }
+        if (this.focus) {
+            this.focus(event);
+        }
+    }
+    /**
+     * 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() {
+        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() {
+        if (this._id) {
+            const messageId = this._id + constants.DEFAULT_MESSAGE_ID_SUFFIX;
+            this._messageId = messageId;
+            this._validMessageId = this._id + constants.DEFAULT_VALID_MESSAGE_ID_SUFFIX;
+            this._invalidMessageId = this._id + constants.DEFAULT_INVALID_MESSAGE_ID_SUFFIX;
+            if (index$1.stringPropVisible(this.message, this.showMessage)) {
+                this._descByIds = messageId;
+            }
+        }
+        if (this.initialized && document && this._id) {
+            const checkboxElement = document === null || document === void 0 ? void 0 : document.getElementById(this._id);
+            if (checkboxElement) {
+                // in angular this must be set via native element
+                if (this.checked != undefined) {
+                    checkboxElement.checked = this.checked;
+                }
+                if (this.indeterminate !== undefined) {
+                    // When indeterminate is set, the value of the checked prop only impacts the form submitted values.
+                    // It has no accessibility or UX implications. (https://mui.com/material-ui/react-checkbox/)
+                    checkboxElement.indeterminate = this.indeterminate;
+                }
+                this.initialized = false;
+            }
+        }
+    }
+    render() {
+        var _a, _b, _c, _d;
+        return (index.h("div", { key: '6f903d630c468fdd7075c59b05e4137f5850e517', class: index$1.cls("db-checkbox", this.className), "data-size": this.size, "data-hide-label": index$1.getHideProp(this.showLabel) }, index.h("label", { key: '122e74ed43e7d3ea0423c926bce7efe784f1efcc', htmlFor: this._id }, index.h("input", { key: '6dd67eb9a4e99426f8aa04f4d13d26302dd543f2', 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: '8b0db2ae635836386a2d1a5cd9a606a761493b20', size: "small", semantic: "successful", id: this._validMessageId }, (_a = this.validMessage) !== null && _a !== void 0 ? _a : constants.DEFAULT_VALID_MESSAGE), index.h("db-infotext", { key: '75a7192d1a2999c9493453cc9d1019e74ce9ee85', 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: '82516ae6e6ef5675d42a1aded5f00ebab1f1830c', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+    }
+};
+
+exports.db_checkbox = DBCheckbox;
+
+//# sourceMappingURL=db-checkbox.cjs.entry.js.map

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

@@ -0,0 +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  cls,\n  delay,\n  getHideProp,\n  hasVoiceOver,\n  stringPropVisible,\n  uuid,\n} from \"../../utils\";\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\";\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() checked: DBCheckboxProps[\"checked\"];\n  @Prop() indeterminate: DBCheckboxProps[\"indeterminate\"];\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.initialized && document && this._id) {\n      const checkboxElement = document?.getElementById(\n        this._id\n      ) as HTMLInputElement;\n      if (checkboxElement) {\n        // in angular this must be set via native element\n        if (this.checked != undefined) {\n          checkboxElement.checked = this.checked;\n        }\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          checkboxElement.indeterminate = this.indeterminate;\n        }\n        this.initialized = false;\n      }\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}

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

@@ -0,0 +1,56 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3d093f06.js');
+const index$1 = require('./index-c0df827d.js');
+
+const DBDivider = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /**
+     * 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-divider");
+    }
+    render() {
+        return (index.h("div", { key: '30fd3018e2c2ba0e57728fbcd0bfea70203279ef', class: index$1.cls("db-divider", this.className), ref: (el) => {
+                this._ref = el;
+            }, id: this.id, "data-margin": this.margin, "data-variant": this.variant, "data-emphasis": this.emphasis, "data-width": this.width }));
+    }
+};
+
+exports.db_divider = DBDivider;
+
+//# sourceMappingURL=db-divider.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"db-divider.entry.cjs.js","mappings":";;;;;;;MAaa,SAAS;;;;;;;;;IAcZ,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,gBAAgB;QACd,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;KACtD;IAED,MAAM;QACJ,QACEA,kEACE,KAAK,EAAEC,WAAG,CAAC,YAAY,EAAE,IAAI,CAAC,SAAS,CAAC,EACxC,GAAG,EAAE,CAAC,EAAO;gBACX,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;aAChB,EACD,EAAE,EAAE,IAAI,CAAC,EAAE,iBACE,IAAI,CAAC,MAAM,kBACV,IAAI,CAAC,OAAO,mBACX,IAAI,CAAC,QAAQ,gBAChB,IAAI,CAAC,KAAK,GACjB,EACP;KACH;;;;;","names":["h","cls"],"sources":["src/components/divider/divider.tsx"],"sourcesContent":["import { DBDividerProps, DBDividerState } from \"./model\";\nimport { cls } from \"../../utils\";\n\nimport { Component, h, Fragment, Prop } from \"@stencil/core\";\n\n\n/**\n * @slot children - This is a default/unnamed slot\n\n */\n @Component({\n  tag: \"db-divider\",\n})\nexport class DBDivider {\n  private _ref!: HTMLDivElement | null;\n  @Prop() id: DBDividerProps[\"id\"];\n  @Prop() margin: DBDividerProps[\"margin\"];\n  @Prop() variant: DBDividerProps[\"variant\"];\n  @Prop() emphasis: DBDividerProps[\"emphasis\"];\n  @Prop() width: DBDividerProps[\"width\"];\n  @Prop({attribute: \"classname\"}) className: DBDividerProps[\"className\"];\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-divider\");\n  }\n\n  render() {\n    return (\n      <div\n        class={cls(\"db-divider\", this.className)}\n        ref={(el: any) => {\n          this._ref = el;\n        }}\n        id={this.id}\n        data-margin={this.margin}\n        data-variant={this.variant}\n        data-emphasis={this.emphasis}\n        data-width={this.width}\n      ></div>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,108 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3d093f06.js');
+const constants = require('./constants-89822e5f.js');
+const index$1 = require('./index-c0df827d.js');
+
+const DBDrawer = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.close = index.createEvent(this, "close", 7);
+    }
+    handleClose(event) {
+        if (event.key === "Escape") {
+            event.preventDefault();
+        }
+        if (event === "close" ||
+            event.key === "Escape" ||
+            (event.target.nodeName === "DIALOG" &&
+                event.type === "click" &&
+                this.backdrop !== "none")) {
+            if (this.close) {
+                this.close.emit(event);
+            }
+        }
+    }
+    handleDialogOpen() {
+        if (this._ref) {
+            if (this.open && !this._ref.open) {
+                if (this.dialogContainerRef) {
+                    this.dialogContainerRef.hidden = false;
+                }
+                if (this.backdrop === "none" || this.variant === "inside") {
+                    this._ref.show();
+                }
+                else {
+                    this._ref.showModal();
+                }
+            }
+            if (!this.open && this._ref.open) {
+                if (this.dialogContainerRef) {
+                    this.dialogContainerRef.hidden = true;
+                }
+                index$1.delay(() => {
+                    var _a;
+                    if (this.dialogContainerRef) {
+                        this.dialogContainerRef.hidden = false;
+                    }
+                    (_a = this._ref) === null || _a === void 0 ? void 0 : _a.close();
+                }, 401);
+            }
+        }
+    }
+    /**
+     * 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-drawer");
+        this.handleDialogOpen();
+    }
+    componentDidUpdate() {
+        this.handleDialogOpen();
+    }
+    render() {
+        var _a;
+        return (index.h("dialog", { key: 'efc7b76d7e179006f931e628209b70d523846f1a', 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) => {
+                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' })))));
+    }
+};
+
+exports.db_drawer = DBDrawer;
+
+//# sourceMappingURL=db-drawer.cjs.entry.js.map

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

@@ -0,0 +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}

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

@@ -0,0 +1,89 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3d093f06.js');
+const index$1 = require('./index-c0df827d.js');
+const constants = require('./constants-89822e5f.js');
+const navigation = require('./navigation-bb2d5552.js');
+
+const DBHeader = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.onToggle = index.createEvent(this, "onToggle", 7);
+        this._id = constants.DEFAULT_ID;
+        this.initialized = false;
+        this.forcedToMobile = false;
+    }
+    toggle() {
+        if (this.onToggle) {
+            this.onToggle.emit(!this.drawerOpen);
+        }
+    }
+    handleNavigationItemClick(event) {
+        if (navigation.isEventTargetNavigationItem(event)) {
+            this.toggle();
+        }
+    }
+    /**
+     * 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-header");
+        this.initialized = true;
+        this._id = this.id || "header-" + index$1.uuid();
+    }
+    componentDidUpdate() {
+        if (this.initialized && document && this._id && this.forceMobile) {
+            const headerElement = document.getElementById(this._id);
+            if (headerElement) {
+                // Adds this attribute to the header to enable all styling which would have
+                // @media screen and (min-width: $db-screens-m) to show mobile navigation on a desktop device
+                index$1.addAttributeToChildren(headerElement, {
+                    key: "data-force-mobile",
+                    value: "true",
+                });
+            }
+            this.forcedToMobile = true;
+        }
+    }
+    render() {
+        var _a;
+        return (index.h("header", { key: '90e4860c36a39e77aa080e188c190d8213e05f31', 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" }))))));
+    }
+};
+
+exports.db_header = DBHeader;
+
+//# sourceMappingURL=db-header.cjs.entry.js.map