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

package/dist/collection/components/control-panel-meta/control-panel-meta.js

@@ -0,0 +1,179 @@
+import { cls } from "../../utils/index.js";
+import { h } from "@stencil/core";
+/**
+ * @slot children - This is a default/unnamed slot
+
+ */
+export class DBControlPanelMeta {
+    constructor() {
+        this.observer = undefined;
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-control-panel-meta");
+        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-meta");
+            }
+        });
+        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-meta");
+        this.setupObserver(this._ref);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    render() {
+        var _a, _b;
+        return (h("div", { key: 'a4131ee9def6e33560b304d2f957ab6895dd0bd6', class: 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 }, h("slot", { key: '2c32541f883cdb301a3aee5811fedfde0d760a01' })));
+    }
+    static get is() { return "db-control-panel-meta"; }
+    static get properties() {
+        return {
+            "id": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBControlPanelMetaProps[\"id\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBControlPanelMetaProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/control-panel-meta/model.ts::DBControlPanelMetaProps",
+                            "referenceLocation": "DBControlPanelMetaProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "id"
+            },
+            "propOverrides": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBControlPanelMetaProps[\"propOverrides\"]",
+                    "resolved": "{ id?: string; }",
+                    "references": {
+                        "DBControlPanelMetaProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/control-panel-meta/model.ts::DBControlPanelMetaProps",
+                            "referenceLocation": "DBControlPanelMetaProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "className": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBControlPanelMetaProps[\"className\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBControlPanelMetaProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/control-panel-meta/model.ts::DBControlPanelMetaProps",
+                            "referenceLocation": "DBControlPanelMetaProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "classname"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "observer": {}
+        };
+    }
+    static get elementRef() { return "rootElement"; }
+}

package/dist/collection/components/control-panel-meta/index.js

@@ -0,0 +1,2 @@
+import { DBControlPanelMeta } from "./control-panel-meta";
+export default DBControlPanelMeta;

package/dist/collection/components/control-panel-mobile/control-panel-mobile.js

@@ -0,0 +1,307 @@
+import { DEFAULT_BURGER_MENU } from "../../shared/constants.js";
+import { cls } from "../../utils/index.js";
+import { isEventTargetNavigationItem } from "../../utils/navigation.js";
+import { h } from "@stencil/core";
+/**
+ * @slot children - This is a default/unnamed slot
+ * @slot skipNavigation - TODO: Add description for slotSkipNavigation
+ * @slot metaNavigation - TODO: Add description for slotMetaNavigation
+ * @slot secondaryActions - TODO: Add description for slotSecondaryActions
+ * @slot brand - TODO: Add description for slotBrand
+ * @slot primaryActions - TODO: Add description for slotPrimaryActions
+ */
+export class DBControlPanelMobile {
+    constructor() {
+        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 (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 (h("header", { key: '25bf24bdb71c1c4f6f3c20f450969476b9de518b', class: 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 }, h("slot", { key: '225c01e9eab804a5fbb66614aed6fc55ec24955d', name: "skipNavigation" }), h("db-drawer", { key: 'e9e344091b10454d0e4b40cd709e9e5925008226', class: "db-control-panel-mobile-drawer", rounded: true, open: this.open, onClose: (event) => this.handleClose(event) }, h("div", { key: '4915275fceba63688f2d95ceb2016d928014dc17', class: "db-control-panel-mobile-drawer-scroll-container", onClick: (event) => this.handleNavigationItemClick(event) }, h("slot", { key: 'd0631fc92c2623c4fa894d2766911c1653c780c9' }), h("slot", { key: '5d989e8ece5fe37a3477c46cf2a8f15c76670c6b', name: "metaNavigation" })), h("db-drawer-header", { key: '882ad83031b3730a240e638bd286f5cc91199df1', slot: "header", text: this.drawerHeaderText }), h("db-drawer-footer", { key: 'be124b3f769f5fa7722d48d85ebd925c5e789bac', slot: "footer" }, h("slot", { key: '503e666e22a9a3e7046fb44a352800e7a301f5b3', name: "secondaryActions" }))), h("slot", { key: 'd401592fabf808f81f764546bdcd3b72e60b5018', name: "brand" }), h("slot", { key: 'ff5b83e96a1a42aa4f9bf19bb00c4f650c3b90db', name: "primaryActions" }), 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 : DEFAULT_BURGER_MENU)));
+    }
+    static get is() { return "db-control-panel-mobile"; }
+    static get properties() {
+        return {
+            "id": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBControlPanelMobileProps[\"id\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBControlPanelMobileProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/control-panel-mobile/model.ts::DBControlPanelMobileProps",
+                            "referenceLocation": "DBControlPanelMobileProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "id"
+            },
+            "propOverrides": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBControlPanelMobileProps[\"propOverrides\"]",
+                    "resolved": "{ id?: string; }",
+                    "references": {
+                        "DBControlPanelMobileProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/control-panel-mobile/model.ts::DBControlPanelMobileProps",
+                            "referenceLocation": "DBControlPanelMobileProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBControlPanelMobileProps[\"position\"]",
+                    "resolved": "\"bottom\" | \"top\"",
+                    "references": {
+                        "DBControlPanelMobileProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/control-panel-mobile/model.ts::DBControlPanelMobileProps",
+                            "referenceLocation": "DBControlPanelMobileProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "position"
+            },
+            "className": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBControlPanelMobileProps[\"className\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBControlPanelMobileProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/control-panel-mobile/model.ts::DBControlPanelMobileProps",
+                            "referenceLocation": "DBControlPanelMobileProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "classname"
+            },
+            "drawerHeaderText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBControlPanelMobileProps[\"drawerHeaderText\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBControlPanelMobileProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/control-panel-mobile/model.ts::DBControlPanelMobileProps",
+                            "referenceLocation": "DBControlPanelMobileProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "drawer-header-text"
+            },
+            "burgerMenuLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBControlPanelMobileProps[\"burgerMenuLabel\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBControlPanelMobileProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/control-panel-mobile/model.ts::DBControlPanelMobileProps",
+                            "referenceLocation": "DBControlPanelMobileProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "burger-menu-label"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "open": {},
+            "observer": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "toggle",
+                "name": "toggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "rootElement"; }
+}

package/dist/collection/components/control-panel-mobile/index.js

@@ -0,0 +1,2 @@
+import { DBControlPanelMobile } from "./control-panel-mobile";
+export default DBControlPanelMobile;

package/dist/collection/components/control-panel-mobile/model.js

@@ -0,0 +1 @@
+export {};