@db-ux/wc-core-components 4.12.1 → 4.13.0-shell-f221975

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-C313bRqJ.js');
-var index$1 = require('./index-spuu3sXz.js');
+var index$1 = require('./index-Df-6pBQf.js');
 
 const DBButton = class {
     constructor(hostRef) {
@@ -16,6 +16,9 @@ const DBButton = class {
         else if (this.click) {
             return "button";
         }
+        else if (this.commandfor) {
+            return "button";
+        }
         return "submit";
     }
     setupObserver(element) {
@@ -95,10 +98,10 @@ const DBButton = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h("button", { key: '5eadddc7c23a90019ab373dfd11aedfc2000735f', class: index$1.cls("db-button", this.className), ref: (el) => {
+        return (index.h("button", { key: '267ba7e58126895a0ef9e5faaa5f01d969b904dc', class: index$1.cls("db-button", this.className), ref: (el) => {
                 this._ref = el;
             }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, type: this.getButtonType(), disabled: index$1.getBoolean(this.disabled, "disabled"), "data-icon": (_c = this.iconLeading) !== null && _c !== void 0 ? _c : this.icon, "data-show-icon": index$1.getBooleanAsString(this.showIconLeading, "showIconLeading") ||
-                index$1.getBooleanAsString(this.showIcon, "showIcon"), "data-icon-trailing": this.iconTrailing, "data-show-icon-trailing": index$1.getBooleanAsString(this.showIconTrailing, "showIconTrailing"), "data-size": this.size, "data-width": this.width, "data-variant": this.variant, "data-wrap": index$1.getBooleanAsString(this.wrap, "wrap"), "data-no-text": index$1.getBooleanAsString(this.noText, "noText"), name: this.name, form: this.form, value: this.value }, this.text ? this.text : null, index.h("slot", { key: 'd42f84050c3eb885783ed3488293062cf9a00bcf' })));
+                index$1.getBooleanAsString(this.showIcon, "showIcon"), "data-icon-trailing": this.iconTrailing, "data-show-icon-trailing": index$1.getBooleanAsString(this.showIconTrailing, "showIconTrailing"), "data-size": this.size, "data-width": this.width, "data-variant": this.variant, "data-wrap": index$1.getBooleanAsString(this.wrap, "wrap"), "data-no-text": index$1.getBooleanAsString(this.noText, "noText"), name: this.name, form: this.form, value: this.value, command: this.command, commandfor: this.commandfor }, this.text ? this.text : null, index.h("slot", { key: '6336cd932f883bd4b042e1c2fd159ba7c30ee1ab' })));
     }
     get rootElement() { return index.getElement(this); }
 };

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-C313bRqJ.js');
-var index$1 = require('./index-spuu3sXz.js');
+var index$1 = require('./index-Df-6pBQf.js');
 
 const DBCard = class {
     constructor(hostRef) {
@@ -91,9 +91,9 @@ const DBCard = class {
     }
     render() {
         var _a, _b;
-        return (index.h("div", { key: '239a6339e8f5764403ced3424b1b8c1b0da0bf41', class: index$1.cls("db-card", this.className), ref: (el) => {
+        return (index.h("div", { key: 'c8b59aa078aea8911304df37d49ce773e037e580', class: index$1.cls("db-card", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-behavior": this.behavior, "data-elevation-level": this.elevationLevel, "data-spacing": this.spacing, onClick: (event) => this.handleClick(event) }, index.h("slot", { key: '8b9970f8e6300a4feddc2de934ddd3ba4cab11ad' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-behavior": this.behavior, "data-elevation-level": this.elevationLevel, "data-spacing": this.spacing, onClick: (event) => this.handleClick(event) }, index.h("slot", { key: 'fb9a79f1372c9fde1eb98d049a768db70be370b3' })));
     }
     get rootElement() { return index.getElement(this); }
 };

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

@@ -1,9 +1,9 @@
 'use strict';
 
 var index = require('./index-C313bRqJ.js');
-var constants = require('./constants-bMY2_d8A.js');
-var index$1 = require('./index-spuu3sXz.js');
-var formComponents = require('./form-components-CmQlkARp.js');
+var constants = require('./constants-BM1EltPT.js');
+var index$1 = require('./index-Df-6pBQf.js');
+var formComponents = require('./form-components-XNiwIGq8.js');
 
 const DBCheckbox = class {
     constructor(hostRef) {
@@ -250,9 +250,9 @@ const DBCheckbox = class {
     }
     render() {
         var _a;
-        return (index.h("div", { key: 'b386e9507944ca665310bd874fdee124af12f071', class: index$1.cls("db-checkbox", this.className), "data-size": this.size, "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-hide-label": index$1.getHideProp(this.showLabel) }, index.h("label", { key: 'd6963dfdb59a00f027231babd6d985681c331b99', htmlFor: this._id }, index.h("input", { key: '81848aef05a7288c4ae200f48be6f8614e68607f', type: "checkbox", "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
+        return (index.h("div", { key: '130503bffd4d94f77a085f02d655dbbcb2fc7772', class: index$1.cls("db-checkbox", this.className), "data-size": this.size, "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-hide-label": index$1.getHideProp(this.showLabel) }, index.h("label", { key: 'f38874a7e11630dd21abe1c8c1f4fa8b65116550', htmlFor: this._id }, index.h("input", { key: '49fa26610cfadcb064cb11e2b7fe97cae7cd93ae', type: "checkbox", "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
                 this._ref = el;
-            }, id: this._id, name: this.name, checked: index$1.getBoolean(this.checked, "checked"), disabled: index$1.getBoolean(this.disabled, "disabled"), value: this.value, required: index$1.getBoolean(this.required, "required"), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), "aria-describedby": (_a = this.ariaDescribedBy) !== null && _a !== void 0 ? _a : this._descByIds }), this.label ? this.label : null, index.h("slot", { key: '433ec6a708da3f342f8fc745ddefbdc9c15d8b9a' })), index$1.stringPropVisible(this.message, this.showMessage) ? (index.h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (index.h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || constants.DEFAULT_VALID_MESSAGE)) : null, index.h("db-infotext", { key: '4295a01b6f8f0a9d78f337dac875f53c45ddefa6', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: '85e87a85df4ca25e535cf0c890ba943f5cfa978b', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+            }, id: this._id, name: this.name, checked: index$1.getBoolean(this.checked, "checked"), disabled: index$1.getBoolean(this.disabled, "disabled"), value: this.value, required: index$1.getBoolean(this.required, "required"), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), "aria-describedby": (_a = this.ariaDescribedBy) !== null && _a !== void 0 ? _a : this._descByIds }), this.label ? this.label : null, index.h("slot", { key: '2119a959da0c591beb6ab2ed1909482943699e6e' })), index$1.stringPropVisible(this.message, this.showMessage) ? (index.h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (index.h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || constants.DEFAULT_VALID_MESSAGE)) : null, index.h("db-infotext", { key: 'aa579c03ce1cb3049c46bd454b671c74ec12f17a', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: '076ea23eb8d662c3ba254cea5c229831dab390bd', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     get rootElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{db-brand.cjs.entry.js → db-control-panel-brand.cjs.entry.js}

@@ -1,10 +1,9 @@
 'use strict';
 
 var index = require('./index-C313bRqJ.js');
-var constants = require('./constants-bMY2_d8A.js');
-var index$1 = require('./index-spuu3sXz.js');
+var index$1 = require('./index-Df-6pBQf.js');
 
-const DBBrand = class {
+const DBControlPanelBrand = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.observer = undefined;
@@ -12,7 +11,7 @@ const DBBrand = class {
     setupObserver(element) {
         if (!element)
             return;
-        const parent = element.closest("db-brand");
+        const parent = element.closest("db-control-panel-brand");
         if (!parent || this.observer)
             return;
         this.observer = new MutationObserver((mutations) => {
@@ -21,7 +20,7 @@ const DBBrand = class {
                 const attr = mutation.target.attributes.getNamedItem((_a = mutation.attributeName) !== null && _a !== void 0 ? _a : "");
                 return (attr === null || attr === void 0 ? void 0 : attr.value) !== mutation.oldValue;
             })) {
-                this.enableAttributePassing(element, "db-brand");
+                this.enableAttributePassing(element, "db-control-panel-brand");
             }
         });
         this.observer.observe(parent, {
@@ -77,7 +76,7 @@ const DBBrand = class {
                 connectedElement.remove();
             }
         }
-        this.enableAttributePassing(this._ref, "db-brand");
+        this.enableAttributePassing(this._ref, "db-control-panel-brand");
         this.setupObserver(this._ref);
     }
     disconnectedCallback() {
@@ -85,12 +84,12 @@ const DBBrand = class {
         (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        var _a, _b, _c;
-        return (index.h("div", { key: 'eb7ad13ac7dc2b56c0611996975b6f140cb837c8', class: index$1.cls("db-brand", this.className), ref: (el) => {
+        var _a, _b;
+        return (index.h("div", { key: 'bcc1befdd6504c1067a3a34b91b3ffcccf4a45b7', class: index$1.cls("db-control-panel-brand", this.className), ref: (el) => {
                 this._ref = el;
-            }, "data-icon": this.hideLogo ? "none" : (_a = this.icon) !== null && _a !== void 0 ? _a : constants.DEFAULT_ICON, "data-show-icon": index$1.getBooleanAsString(this.showIcon, "showIcon"), id: (_b = this.id) !== null && _b !== void 0 ? _b : (_c = this.propOverrides) === null || _c === void 0 ? void 0 : _c.id }, index.h("slot", { key: '21a1bf9ea2f921c6a38e24062890c7f674213605' }), this.text ? this.text : null));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, index.h("slot", { key: 'f02755f7e5008542816a537235aeb3c83d5e2da6' })));
     }
     get rootElement() { return index.getElement(this); }
 };
 
-exports.db_brand = DBBrand;
+exports.db_control_panel_brand = DBControlPanelBrand;

package/dist/cjs/db-control-panel-desktop.cjs.entry.js

@@ -0,0 +1,148 @@
+'use strict';
+
+var index = require('./index-C313bRqJ.js');
+var constants = require('./constants-BM1EltPT.js');
+var index$1 = require('./index-Df-6pBQf.js');
+
+const DBControlPanelDesktop = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this._id = undefined;
+        this._open = true;
+        this.observer = undefined;
+    }
+    handleToggle(event) {
+        /* Guard: In WC/Stencil, custom events wrap payload in event.detail as object.
+        Native click has event.detail as number. Prevents double-toggle. */
+        if (typeof event.detail !== "object") {
+            event.stopPropagation();
+            this._open = !this._open;
+        }
+    }
+    getToggleButtonText() {
+        var _a;
+        if (this.expandButtonTooltip) {
+            return this.expandButtonTooltip;
+        }
+        const fnOutput = () => undefined;
+        return (_a = fnOutput()) !== null && _a !== void 0 ? _a : (this._open ? constants.DEFAULT_COLLAPSE : constants.DEFAULT_EXPAND);
+    }
+    resetIds() {
+        var _a, _b, _c;
+        this._id =
+            (_c = (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : `db-control-panel-desktop-${index$1.uuid()}`;
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-control-panel-desktop");
+        if (!parent || this.observer)
+            return;
+        this.observer = new MutationObserver((mutations) => {
+            if (mutations.some((mutation) => {
+                var _a;
+                const attr = mutation.target.attributes.getNamedItem((_a = mutation.attributeName) !== null && _a !== void 0 ? _a : "");
+                return (attr === null || attr === void 0 ? void 0 : attr.value) !== mutation.oldValue;
+            })) {
+                this.enableAttributePassing(element, "db-control-panel-desktop");
+            }
+        });
+        this.observer.observe(parent, {
+            attributes: true,
+            attributeOldValue: true,
+        });
+    }
+    /**
+     * 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 !== 'data-density' &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    if (attr.value) {
+                        element.setAttribute(attr.name, attr.value);
+                    }
+                    else {
+                        element.removeAttribute(attr.name);
+                    }
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && ["style"].includes(attr.name)) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else 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 ? ` ${value}` : ""}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    watch0Fn() {
+        this.resetIds();
+    }
+    watch0() {
+        this.watch0Fn();
+    }
+    watch1Fn() {
+        var _a;
+        if (this.expanded !== undefined) {
+            this._open = (_a = index$1.getBoolean(this.expanded, "expanded")) !== null && _a !== void 0 ? _a : true;
+        }
+    }
+    watch1() {
+        this.watch1Fn();
+    }
+    componentDidLoad() {
+        if (typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect) {
+            const connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);
+            if (connectedElement) {
+                connectedElement.remove();
+            }
+        }
+        this.enableAttributePassing(this._ref, "db-control-panel-desktop");
+        this.setupObserver(this._ref);
+        this.watch0Fn();
+        this.watch1Fn();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    render() {
+        return (index.h("header", { key: '1e69bc19a8df84edc32a6ccd90fcc4910ca5215b', class: index$1.cls("db-control-panel-desktop", this.className), ref: (el) => {
+                this._ref = el;
+            }, id: this._id, "data-width": this.width, "data-orientation": this.orientation, "data-open": index$1.getBooleanAsString(this._open) }, index.h("slot", { key: '1e3a183c4e3746eaacae1dc69d74a5c61b825e47', name: "skipNavigation" }), index.h("div", { key: 'f3bd252e6dea284952c692456d45541ae03f439a', class: "db-control-panel-desktop-brand-container" }, index.h("slot", { key: '6cd6d8aabea48f6c60d99e892dc1669eb13f04af', name: "brand" })), index.h("div", { key: '17427a9e8159e9dc56bae68c713995b7cef67ea6', class: "db-control-panel-desktop-scroll-container", ref: (el) => {
+                this._scrollContainerRef = el;
+            } }, index.h("slot", { key: 'f1d0d4d75002f9668957f2bc566a8380b0709cbe' }), index.h("slot", { key: '85acca3e6977e39527c83b3bbc47cf7801525b2c', name: "metaNavigation" })), index.h("slot", { key: 'e3e1cf00d281bead1888757e39b600e0caa455b2', name: "primaryActions" }), index.h("slot", { key: '793f8cb101822660216e84df98999d6523113003', name: "secondaryActions" }), index.h("div", { key: '0ee3e4d58514e2bd989b398a4e0bbd054a3e34a9', class: "db-control-panel-desktop-button" }, index.h("button", { key: '2222f3382646d813accad996e371f7adf0d36ddc', class: "db-button", "data-variant": "ghost", "data-no-text": "true", type: "button", "data-icon": "double_chevron_left", onClick: (event) => this.handleToggle(event), "aria-controls": this._id, "aria-expanded": index$1.getBooleanAsString(this._open) }, index.h("db-tooltip", { key: '81b66866bc0bbaec059a67a1d1479c4af7309805', variant: "label", placement: "right" }, this.getToggleButtonText())))));
+    }
+    get rootElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "id": [{
+                "watch0": 0
+            }],
+        "propOverrides": [{
+                "watch0": 0
+            }],
+        "expanded": [{
+                "watch1": 0
+            }]
+    }; }
+};
+
+exports.db_control_panel_desktop = DBControlPanelDesktop;

package/dist/cjs/db-control-panel-flat-icon.cjs.entry.js

@@ -0,0 +1,134 @@
+'use strict';
+
+var index = require('./index-C313bRqJ.js');
+var index$1 = require('./index-Df-6pBQf.js');
+var resizeObserverListener = require('./resize-observer-listener-CmPDfoZs.js');
+
+const DBControlPanelFlatIcon = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this._resizeObserverCallbackId = undefined;
+        this.observer = undefined;
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-control-panel-flat-icon");
+        if (!parent || this.observer)
+            return;
+        this.observer = new MutationObserver((mutations) => {
+            if (mutations.some((mutation) => {
+                var _a;
+                const attr = mutation.target.attributes.getNamedItem((_a = mutation.attributeName) !== null && _a !== void 0 ? _a : "");
+                return (attr === null || attr === void 0 ? void 0 : attr.value) !== mutation.oldValue;
+            })) {
+                this.enableAttributePassing(element, "db-control-panel-flat-icon");
+            }
+        });
+        this.observer.observe(parent, {
+            attributes: true,
+            attributeOldValue: true,
+        });
+    }
+    /**
+     * 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 !== 'data-density' &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    if (attr.value) {
+                        element.setAttribute(attr.name, attr.value);
+                    }
+                    else {
+                        element.removeAttribute(attr.name);
+                    }
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && ["style"].includes(attr.name)) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else 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 ? ` ${value}` : ""}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    watch0Fn() {
+        if (this._ref && !this._resizeObserverCallbackId) {
+            // Capture the initial density and persist it as a data attribute
+            const initialDensity = this._ref.getAttribute("data-density");
+            if (initialDensity) {
+                this._ref.setAttribute("data-initial-density", initialDensity);
+            }
+            this._resizeObserverCallbackId = new resizeObserverListener.ResizeObserverListener().observe(this._ref, () => {
+                if (!this._ref)
+                    return;
+                const isMobile = index$1.hasCssFlag(this._ref, "--db-control-panel-flat-icon-mobile");
+                const savedDensity = this._ref.getAttribute("data-initial-density");
+                if (isMobile) {
+                    this._ref.setAttribute("data-density", "regular");
+                }
+                else if (savedDensity) {
+                    this._ref.setAttribute("data-density", savedDensity);
+                }
+                else {
+                    this._ref.removeAttribute("data-density");
+                }
+            });
+        }
+    }
+    watch0() {
+        this.watch0Fn();
+    }
+    componentDidLoad() {
+        if (typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect) {
+            const connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);
+            if (connectedElement) {
+                connectedElement.remove();
+            }
+        }
+        this.enableAttributePassing(this._ref, "db-control-panel-flat-icon");
+        this.setupObserver(this._ref);
+        this.watch0Fn();
+    }
+    disconnectedCallback() {
+        var _a;
+        if (this._resizeObserverCallbackId) {
+            new resizeObserverListener.ResizeObserverListener().unobserve(this._resizeObserverCallbackId);
+            this._resizeObserverCallbackId = undefined;
+        }
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    render() {
+        var _a, _b;
+        return (index.h("header", { key: '6402a0d80b368fcead6440a8412489a934619619', class: index$1.cls("db-control-panel-flat-icon", this.className), ref: (el) => {
+                this._ref = el;
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-no-text": index$1.getBooleanAsString(this.noText, "noText") }, index.h("slot", { key: '24ac665b0b511685e2ff88f45d99b9dc15630800', name: "skipNavigation" }), index.h("slot", { key: '354b01d6d250d6d9cc25a6236189bee042c1ce64' })));
+    }
+    get rootElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "_ref": [{
+                "watch0": 0
+            }]
+    }; }
+};
+
+exports.db_control_panel_flat_icon = DBControlPanelFlatIcon;

package/dist/cjs/{db-navigation.cjs.entry.js → db-control-panel-meta.cjs.entry.js}

@@ -1,9 +1,9 @@
 'use strict';
 
 var index = require('./index-C313bRqJ.js');
-var index$1 = require('./index-spuu3sXz.js');
+var index$1 = require('./index-Df-6pBQf.js');
 
-const DBNavigation = class {
+const DBControlPanelMeta = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.observer = undefined;
@@ -11,7 +11,7 @@ const DBNavigation = class {
     setupObserver(element) {
         if (!element)
             return;
-        const parent = element.closest("db-navigation");
+        const parent = element.closest("db-control-panel-meta");
         if (!parent || this.observer)
             return;
         this.observer = new MutationObserver((mutations) => {
@@ -20,7 +20,7 @@ const DBNavigation = class {
                 const attr = mutation.target.attributes.getNamedItem((_a = mutation.attributeName) !== null && _a !== void 0 ? _a : "");
                 return (attr === null || attr === void 0 ? void 0 : attr.value) !== mutation.oldValue;
             })) {
-                this.enableAttributePassing(element, "db-navigation");
+                this.enableAttributePassing(element, "db-control-panel-meta");
             }
         });
         this.observer.observe(parent, {
@@ -76,7 +76,7 @@ const DBNavigation = class {
                 connectedElement.remove();
             }
         }
-        this.enableAttributePassing(this._ref, "db-navigation");
+        this.enableAttributePassing(this._ref, "db-control-panel-meta");
         this.setupObserver(this._ref);
     }
     disconnectedCallback() {
@@ -85,11 +85,11 @@ const DBNavigation = class {
     }
     render() {
         var _a, _b;
-        return (index.h("nav", { key: 'e9dbd8ab905cbb2dd887dfe21fc96afea70b9f70', class: index$1.cls("db-navigation", this.className), ref: (el) => {
+        return (index.h("div", { key: 'a4131ee9def6e33560b304d2f957ab6895dd0bd6', class: index$1.cls("db-control-panel-meta", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, index.h("menu", { key: '421231c4fabc97119732586bf221c07ebc914a19' }, index.h("slot", { key: 'f015b010c2d2e09570ead913a90d14160eed857c' }))));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, index.h("slot", { key: '2c32541f883cdb301a3aee5811fedfde0d760a01' })));
     }
     get rootElement() { return index.getElement(this); }
 };
 
-exports.db_navigation = DBNavigation;
+exports.db_control_panel_meta = DBControlPanelMeta;

package/dist/cjs/db-control-panel-mobile.cjs.entry.js

@@ -0,0 +1,124 @@
+'use strict';
+
+var index = require('./index-C313bRqJ.js');
+var constants = require('./constants-BM1EltPT.js');
+var index$1 = require('./index-Df-6pBQf.js');
+var navigation = require('./navigation-CHCtasZv.js');
+require('./floating-components-B3bpFI90.js');
+
+const DBControlPanelMobile = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.toggle = index.createEvent(this, "toggle");
+        this.open = false;
+        this.observer = undefined;
+    }
+    handleToggle(event) {
+        if (event.stopPropagation) {
+            event.stopPropagation();
+        }
+        const reverseOpen = !this.open;
+        this.open = reverseOpen;
+        if (this.toggle) {
+            this.toggle.emit(reverseOpen);
+        }
+    }
+    handleClose(event) {
+        if (event.stopPropagation) {
+            event.stopPropagation();
+        }
+        this.open = false;
+        if (this.toggle) {
+            this.toggle.emit(false);
+        }
+    }
+    handleNavigationItemClick(event) {
+        if (navigation.isEventTargetNavigationItem(event)) {
+            this.handleClose(event);
+        }
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-control-panel-mobile");
+        if (!parent || this.observer)
+            return;
+        this.observer = new MutationObserver((mutations) => {
+            if (mutations.some((mutation) => {
+                var _a;
+                const attr = mutation.target.attributes.getNamedItem((_a = mutation.attributeName) !== null && _a !== void 0 ? _a : "");
+                return (attr === null || attr === void 0 ? void 0 : attr.value) !== mutation.oldValue;
+            })) {
+                this.enableAttributePassing(element, "db-control-panel-mobile");
+            }
+        });
+        this.observer.observe(parent, {
+            attributes: true,
+            attributeOldValue: true,
+        });
+    }
+    /**
+     * 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 !== 'data-density' &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    if (attr.value) {
+                        element.setAttribute(attr.name, attr.value);
+                    }
+                    else {
+                        element.removeAttribute(attr.name);
+                    }
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && ["style"].includes(attr.name)) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else 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 ? ` ${value}` : ""}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    componentDidLoad() {
+        if (typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect) {
+            const connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);
+            if (connectedElement) {
+                connectedElement.remove();
+            }
+        }
+        this.enableAttributePassing(this._ref, "db-control-panel-mobile");
+        this.setupObserver(this._ref);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    render() {
+        var _a, _b, _c;
+        return (index.h("header", { key: '25bf24bdb71c1c4f6f3c20f450969476b9de518b', class: index$1.cls("db-control-panel-mobile", this.className), "data-density": "regular", ref: (el) => {
+                this._ref = el;
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-position": this.position }, index.h("slot", { key: '225c01e9eab804a5fbb66614aed6fc55ec24955d', name: "skipNavigation" }), index.h("db-drawer", { key: 'e9e344091b10454d0e4b40cd709e9e5925008226', class: "db-control-panel-mobile-drawer", rounded: true, open: this.open, onClose: (event) => this.handleClose(event) }, index.h("div", { key: '4915275fceba63688f2d95ceb2016d928014dc17', class: "db-control-panel-mobile-drawer-scroll-container", onClick: (event) => this.handleNavigationItemClick(event) }, index.h("slot", { key: 'd0631fc92c2623c4fa894d2766911c1653c780c9' }), index.h("slot", { key: '5d989e8ece5fe37a3477c46cf2a8f15c76670c6b', name: "metaNavigation" })), index.h("db-drawer-header", { key: '882ad83031b3730a240e638bd286f5cc91199df1', slot: "header", text: this.drawerHeaderText }), index.h("db-drawer-footer", { key: 'be124b3f769f5fa7722d48d85ebd925c5e789bac', slot: "footer" }, index.h("slot", { key: '503e666e22a9a3e7046fb44a352800e7a301f5b3', name: "secondaryActions" }))), index.h("slot", { key: 'd401592fabf808f81f764546bdcd3b72e60b5018', name: "brand" }), index.h("slot", { key: 'ff5b83e96a1a42aa4f9bf19bb00c4f650c3b90db', name: "primaryActions" }), index.h("db-button", { key: '6ec807aa071e8f917ecab14ee8086a2eb07fa4fc', class: "db-control-panel-mobile-button", icon: "menu", type: "button", variant: "ghost", noText: true, onClick: (event) => this.handleToggle(event) }, (_c = this.burgerMenuLabel) !== null && _c !== void 0 ? _c : constants.DEFAULT_BURGER_MENU)));
+    }
+    get rootElement() { return index.getElement(this); }
+};
+
+exports.db_control_panel_mobile = DBControlPanelMobile;