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

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

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

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

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

package/dist/collection/components/control-panel-navigation-item/control-panel-navigation-item.js

@@ -0,0 +1,484 @@
+import { cls, getBoolean, getBooleanAsString } from "../../utils/index.js";
+import { h } from "@stencil/core";
+/**
+ * @slot children - This is a default/unnamed slot
+ * @slot endSlot - TODO: Add description for slotEndSlot
+ */
+export class DBControlPanelNavigationItem {
+    constructor() {
+        this._tooltip = undefined;
+        this._savedHref = undefined;
+        this._role = undefined;
+        this._attributeObserver = undefined;
+        this.initialized = false;
+        this.observer = undefined;
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-control-panel-navigation-item");
+        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-navigation-item");
+            }
+        });
+        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() {
+        var _a;
+        if (!this.initialized || !this._ref || this._attributeObserver)
+            return;
+        // Read initial role value synchronously in case parent set it before mount
+        const initialRole = (_a = this._ref.getAttribute("role")) !== null && _a !== void 0 ? _a : undefined;
+        if (initialRole !== this._role) {
+            this._role = initialRole;
+        }
+        // Observe role attribute set imperatively by the parent navigation
+        // and persist it in state so frameworks re-apply it after reconciliation.
+        const observer = new MutationObserver((mutations) => {
+            var _a;
+            for (const mutation of mutations) {
+                if (mutation.attributeName === "role") {
+                    const newRole = (_a = this._ref.getAttribute("role")) !== null && _a !== void 0 ? _a : undefined;
+                    if (newRole !== this._role) {
+                        this._role = newRole;
+                    }
+                }
+            }
+        });
+        observer.observe(this._ref, {
+            attributes: true,
+            attributeFilter: ["role"],
+        });
+        this._attributeObserver = observer;
+    }
+    watch0() {
+        this.watch0Fn();
+    }
+    watch1Fn() {
+        if (this.tooltip) {
+            this._tooltip = this.tooltip;
+        }
+        else if (this.text) {
+            this._tooltip = this.text;
+        }
+        else if (this._ref) {
+            const listElement = this._ref;
+            const anchor = listElement.querySelector("a");
+            if (anchor) {
+                this._tooltip = anchor.textContent;
+            }
+        }
+    }
+    watch1() {
+        this.watch1Fn();
+    }
+    watch2Fn() {
+        if (this._ref) {
+            const listElement = this._ref;
+            const anchor = listElement.querySelector("a");
+            if (anchor) {
+                if (getBoolean(this.disabled, "disabled")) {
+                    // Save href before removing so we can restore it later
+                    const currentHref = anchor.getAttribute("href");
+                    if (currentHref !== null) {
+                        this._savedHref = currentHref;
+                    }
+                    anchor.removeAttribute("href");
+                    anchor.setAttribute("tabindex", "-1");
+                    anchor.setAttribute("aria-disabled", "true");
+                }
+                else {
+                    // Restore saved href when no longer disabled
+                    if (this._savedHref) {
+                        anchor.setAttribute("href", this._savedHref);
+                        this._savedHref = undefined;
+                    }
+                    anchor.removeAttribute("tabindex");
+                    anchor.removeAttribute("aria-disabled");
+                }
+            }
+        }
+    }
+    watch2() {
+        this.watch2Fn();
+    }
+    watch3Fn() {
+        if (this._ref) {
+            const listElement = this._ref;
+            const anchor = listElement.querySelector("a");
+            if (anchor) {
+                if (getBoolean(this.active, "active")) {
+                    anchor.setAttribute("aria-current", "page");
+                }
+                else {
+                    anchor.removeAttribute("aria-current");
+                }
+            }
+        }
+    }
+    watch3() {
+        this.watch3Fn();
+    }
+    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-navigation-item");
+        const onMountHook_0 = () => {
+            this.initialized = true;
+        };
+        onMountHook_0();
+        const onMountHook_1 = () => {
+            this.setupObserver(this._ref);
+        };
+        onMountHook_1();
+        this.watch0Fn();
+        this.watch1Fn();
+        this.watch2Fn();
+        this.watch3Fn();
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this._attributeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this._attributeObserver = undefined;
+        (_b = this.observer) === null || _b === void 0 ? void 0 : _b.disconnect();
+    }
+    render() {
+        var _a, _b;
+        return (h("li", { key: 'd40d366963f26f7e2177be2ff983f4da93c72e31', class: cls("db-control-panel-navigation-item", 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, role: this._role, "data-icon": this.icon, "data-show-icon": getBooleanAsString(this.showIcon, "showIcon"), "data-active": getBooleanAsString(this.active, "active"), "aria-disabled": getBooleanAsString(this.disabled, "disabled") }, this.text ? this.text : null, h("slot", { key: '6ef0c277db4060d9f15e215b9aadb5cf4562e16f' }), h("div", { key: '71aa41994396e4253d30b50d693dd13f551f68c0', class: "db-control-panel-navigation-item-end-slot-container" }, h("slot", { key: '4402ae9621bf2f7fe6fb7c476e3fe10a66822688', name: "endSlot" })), this._tooltip ? (h("db-tooltip", { placement: "right", delay: "slow" }, this._tooltip)) : null));
+    }
+    static get is() { return "db-control-panel-navigation-item"; }
+    static get properties() {
+        return {
+            "tooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBControlPanelNavigationItemProps[\"tooltip\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBControlPanelNavigationItemProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/control-panel-navigation-item/model.ts::DBControlPanelNavigationItemProps",
+                            "referenceLocation": "DBControlPanelNavigationItemProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tooltip"
+            },
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBControlPanelNavigationItemProps[\"text\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBControlPanelNavigationItemProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/control-panel-navigation-item/model.ts::DBControlPanelNavigationItemProps",
+                            "referenceLocation": "DBControlPanelNavigationItemProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text"
+            },
+            "disabled": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBControlPanelNavigationItemProps[\"disabled\"]",
+                    "resolved": "boolean | string",
+                    "references": {
+                        "DBControlPanelNavigationItemProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/control-panel-navigation-item/model.ts::DBControlPanelNavigationItemProps",
+                            "referenceLocation": "DBControlPanelNavigationItemProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled"
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBControlPanelNavigationItemProps[\"active\"]",
+                    "resolved": "boolean",
+                    "references": {
+                        "DBControlPanelNavigationItemProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/control-panel-navigation-item/model.ts::DBControlPanelNavigationItemProps",
+                            "referenceLocation": "DBControlPanelNavigationItemProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active"
+            },
+            "id": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBControlPanelNavigationItemProps[\"id\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBControlPanelNavigationItemProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/control-panel-navigation-item/model.ts::DBControlPanelNavigationItemProps",
+                            "referenceLocation": "DBControlPanelNavigationItemProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "id"
+            },
+            "propOverrides": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBControlPanelNavigationItemProps[\"propOverrides\"]",
+                    "resolved": "{ id?: string; }",
+                    "references": {
+                        "DBControlPanelNavigationItemProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/control-panel-navigation-item/model.ts::DBControlPanelNavigationItemProps",
+                            "referenceLocation": "DBControlPanelNavigationItemProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "className": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBControlPanelNavigationItemProps[\"className\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBControlPanelNavigationItemProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/control-panel-navigation-item/model.ts::DBControlPanelNavigationItemProps",
+                            "referenceLocation": "DBControlPanelNavigationItemProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "classname"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBControlPanelNavigationItemProps[\"icon\"]",
+                    "resolved": "\"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"arrow_up_right\" | \"arrows_vertical\" | \"brand\" | \"calendar\" | \"chat\" | \"check\" | \"check_circle\" | \"chevron_down\" | \"chevron_left\" | \"chevron_right\" | \"chevron_up\" | \"circle\" | \"circle_small\" | \"circular_arrows\" | \"clock\" | \"copy\" | \"cross\" | \"cross_circle\" | \"double_chevron_down\" | \"double_chevron_left\" | \"double_chevron_right\" | \"double_chevron_up\" | \"exclamation_mark_circle\" | \"exclamation_mark_triangle\" | \"eye\" | \"eye_disabled\" | \"house\" | \"information_circle\" | \"magnifying_glass\" | \"menu\" | \"minus\" | \"moon\" | \"more_vertical\" | \"plus\" | \"resize_handle_corner\" | \"sun\" | \"x_placeholder\" | string & Record<never, never>",
+                    "references": {
+                        "DBControlPanelNavigationItemProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/control-panel-navigation-item/model.ts::DBControlPanelNavigationItemProps",
+                            "referenceLocation": "DBControlPanelNavigationItemProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "showIcon": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBControlPanelNavigationItemProps[\"showIcon\"]",
+                    "resolved": "boolean | string",
+                    "references": {
+                        "DBControlPanelNavigationItemProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/control-panel-navigation-item/model.ts::DBControlPanelNavigationItemProps",
+                            "referenceLocation": "DBControlPanelNavigationItemProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-icon"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_tooltip": {},
+            "_savedHref": {},
+            "_role": {},
+            "_attributeObserver": {},
+            "initialized": {},
+            "observer": {}
+        };
+    }
+    static get elementRef() { return "rootElement"; }
+    static get watchers() {
+        return [{
+                "propName": "_ref",
+                "methodName": "watch0"
+            }, {
+                "propName": "initialized",
+                "methodName": "watch0"
+            }, {
+                "propName": "_ref",
+                "methodName": "watch1"
+            }, {
+                "propName": "tooltip",
+                "methodName": "watch1"
+            }, {
+                "propName": "text",
+                "methodName": "watch1"
+            }, {
+                "propName": "_ref",
+                "methodName": "watch2"
+            }, {
+                "propName": "disabled",
+                "methodName": "watch2"
+            }, {
+                "propName": "_ref",
+                "methodName": "watch3"
+            }, {
+                "propName": "active",
+                "methodName": "watch3"
+            }];
+    }
+}

package/dist/collection/components/control-panel-navigation-item/index.js

@@ -0,0 +1,2 @@
+import { DBControlPanelNavigationItem } from "./control-panel-navigation-item";
+export default DBControlPanelNavigationItem;

package/dist/collection/components/control-panel-navigation-item/model.js

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