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

package/dist/cjs/db-control-panel-navigation-item-group.cjs.entry.js

@@ -0,0 +1,420 @@
+'use strict';
+
+var index = require('./index-C313bRqJ.js');
+var constants = require('./constants-BM1EltPT.js');
+var index$1 = require('./index-Df-6pBQf.js');
+var floatingComponents = require('./floating-components-B3bpFI90.js');
+var intersectionObserverListener = require('./intersection-observer-listener-DlrHabJb.js');
+var navigation = require('./navigation-CHCtasZv.js');
+var resizeObserverListener = require('./resize-observer-listener-CmPDfoZs.js');
+
+const DBControlPanelNavigationItemGroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.click = index.createEvent(this, "click");
+        this.hasSubNavigation = true;
+        this.isSubNavigationExpanded = false;
+        this.autoClose = false;
+        this.hasPopup = false;
+        this.initialized = false;
+        this._isMobile = false;
+        this._role = undefined;
+        this._attributeObserver = undefined;
+        this._itemGroupMenuId = "db-control-panel-navigation-item-group-menu-" + index$1.uuid();
+        this._intersectionObserverCallbackId = undefined;
+        this._resizeObserverCallbackId = undefined;
+        this._popoverListenersAttached = false;
+        this.navigationItemSafeTriangle = undefined;
+        this.observer = undefined;
+    }
+    _handleFocusIn() {
+        if (!this.hasPopup)
+            return;
+        this.isSubNavigationExpanded = true;
+    }
+    _handleFocusOut(event) {
+        if (!this.hasPopup)
+            return;
+        const relatedTarget = event.relatedTarget;
+        if (!relatedTarget || !this._ref.contains(relatedTarget)) {
+            this.isSubNavigationExpanded = false;
+        }
+    }
+    _handleMouseEnter() {
+        if (!this.hasPopup)
+            return;
+        if (this._menuRef) {
+            navigation.handleSubNavigationPosition(this._menuRef);
+            // Check if the menu overflows the viewport and set
+            // data-outside-vy / data-outside-vx for CSS flipping.
+            // visibility:hidden elements report correct layout via
+            // getBoundingClientRect, so we can measure immediately.
+            floatingComponents.handleDataOutside(this._menuRef);
+        }
+        this.isSubNavigationExpanded = true;
+    }
+    _handleMouseLeave() {
+        if (!this.hasPopup)
+            return;
+        this.isSubNavigationExpanded = false;
+    }
+    _setSiblingsInert(inert) {
+        if (!this._ref || !this._menuRef)
+            return;
+        // 1. Mark sibling <li> elements within the parent <menu> as inert
+        const parentMenu = this._ref.parentElement;
+        if (parentMenu) {
+            const siblings = parentMenu.children;
+            for (let i = 0; i < siblings.length; i++) {
+                const sibling = siblings[i];
+                if (sibling !== this._ref) {
+                    if (inert) {
+                        sibling.setAttribute("inert", "");
+                    }
+                    else {
+                        sibling.removeAttribute("inert");
+                    }
+                }
+            }
+        }
+        // 2. Mark the expand button as inert when the sub-menu
+        // overlay is open, since it is visually behind the overlay.
+        if (this._buttonRef) {
+            if (inert) {
+                this._buttonRef.setAttribute("inert", "");
+            }
+            else {
+                this._buttonRef.removeAttribute("inert");
+            }
+        }
+        // 3. Mark other sections in the drawer scroll container as inert
+        // (e.g. meta navigation), but NOT the <nav> ancestor of this item.
+        const scrollContainer = this._ref.closest(".db-control-panel-mobile-drawer-scroll-container");
+        if (scrollContainer) {
+            const navAncestor = this._ref.closest(".db-control-panel-navigation");
+            const children = scrollContainer.children;
+            for (let i = 0; i < children.length; i++) {
+                const child = children[i];
+                if (child !== navAncestor) {
+                    if (inert) {
+                        child.setAttribute("inert", "");
+                    }
+                    else {
+                        child.removeAttribute("inert");
+                    }
+                }
+            }
+        }
+    }
+    _attachPopoverListeners() {
+        if (this._popoverListenersAttached || !this._ref)
+            return;
+        this._ref.addEventListener("mouseenter", this._handleMouseEnter);
+        this._ref.addEventListener("mouseleave", this._handleMouseLeave);
+        this._ref.addEventListener("focusin", this._handleFocusIn);
+        this._ref.addEventListener("focusout", this._handleFocusOut);
+        this._popoverListenersAttached = true;
+    }
+    _detachPopoverListeners() {
+        if (!this._popoverListenersAttached || !this._ref)
+            return;
+        this._ref.removeEventListener("mouseenter", this._handleMouseEnter);
+        this._ref.removeEventListener("mouseleave", this._handleMouseLeave);
+        this._ref.removeEventListener("focusin", this._handleFocusIn);
+        this._ref.removeEventListener("focusout", this._handleFocusOut);
+        this.isSubNavigationExpanded = false;
+        this._popoverListenersAttached = false;
+    }
+    _teardownPopover() {
+        this._detachPopoverListeners();
+        this.navigationItemSafeTriangle = undefined;
+        if (this._intersectionObserverCallbackId) {
+            new intersectionObserverListener.IntersectionObserverListener().unobserve(this._intersectionObserverCallbackId);
+            this._intersectionObserverCallbackId = undefined;
+        }
+        if (this._resizeObserverCallbackId) {
+            new resizeObserverListener.ResizeObserverListener().unobserve(this._resizeObserverCallbackId);
+            this._resizeObserverCallbackId = undefined;
+        }
+    }
+    onScroll() {
+        if (this.hasPopup && this._menuRef) {
+            navigation.handleSubNavigationPosition(this._menuRef);
+        }
+    }
+    handleNavigationItemClick(event) {
+        var _a;
+        if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.nodeName) === "A") {
+            this.forceClose();
+        }
+    }
+    forceClose() {
+        this.autoClose = true;
+        void index$1.delay(() => {
+            this.autoClose = false;
+        }, 300);
+    }
+    handleClick(event) {
+        if (!this.hasPopup) {
+            this.isSubNavigationExpanded = !this.isSubNavigationExpanded;
+        }
+        if (this.click) {
+            // Prevent click from bubbling to the control-panel-mobile
+            // handleNavigationItemClick which would close the drawer.
+            event.stopPropagation();
+            this.click.emit(event);
+        }
+    }
+    handleBackClick(event) {
+        event.stopPropagation();
+        this.isSubNavigationExpanded = false;
+        // Return focus to the expand button after closing the sub-menu.
+        // Use a delay to ensure the inert attribute has been removed first.
+        void index$1.delay(() => {
+            if (this._buttonRef) {
+                this._buttonRef.focus();
+            }
+        }, 1);
+    }
+    handleEscape(event) {
+        if (!event || event.key === "Escape") {
+            this.forceClose();
+            this._buttonRef.blur();
+        }
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-control-panel-navigation-item-group");
+        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-group");
+            }
+        });
+        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;
+        }
+        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.expanded !== undefined) {
+            this.isSubNavigationExpanded = !!index$1.getBoolean(this.expanded, "expanded");
+        }
+    }
+    watch1() {
+        this.watch1Fn();
+    }
+    watch2Fn() {
+        if (this._ref && this.initialized) {
+            this.initialized = false;
+            this.hasPopup = index$1.hasCssFlag(this._ref, "--db-control-panel-navigation-item-group-menu-popover");
+            if (this._menuRef) {
+                this._isMobile = index$1.hasCssFlag(this._menuRef, "--db-control-panel-navigation-item-group-menu-mobile");
+            }
+        }
+    }
+    watch2() {
+        this.watch2Fn();
+    }
+    watch3Fn() {
+        if (this._isMobile && this.isSubNavigationExpanded) {
+            this._setSiblingsInert(true);
+            // Move focus to the first navigation item link inside the sub-menu
+            if (this._menuRef) {
+                const firstLink = this._menuRef.querySelector(".db-control-panel-navigation-item a");
+                if (firstLink) {
+                    firstLink.focus();
+                }
+            }
+        }
+        else {
+            this._setSiblingsInert(false);
+        }
+    }
+    watch3() {
+        this.watch3Fn();
+    }
+    watch4Fn() {
+        if (this._ref && this._buttonRef && this._menuRef && this.hasPopup) {
+            if (!this.navigationItemSafeTriangle) {
+                this.navigationItemSafeTriangle = new navigation.NavigationItemSafeTriangle(this._ref, this._menuRef);
+            }
+            this._attachPopoverListeners();
+            if (!this._intersectionObserverCallbackId) {
+                this._intersectionObserverCallbackId =
+                    new intersectionObserverListener.IntersectionObserverListener().observe(this._buttonRef, (entry) => {
+                        if (!entry.isIntersecting) {
+                            this.forceClose();
+                        }
+                    });
+            }
+            // Re-position the sub-navigation popover on viewport resize
+            // (e.g. orientation change), because placement depends on the
+            // viewport dimensions.
+            if (!this._resizeObserverCallbackId) {
+                this._resizeObserverCallbackId = new resizeObserverListener.ResizeObserverListener().observe(document.documentElement, () => {
+                    if (this._menuRef) {
+                        navigation.handleSubNavigationPosition(this._menuRef);
+                    }
+                });
+            }
+        }
+        if (!this.hasPopup) {
+            this._teardownPopover();
+        }
+    }
+    watch4() {
+        this.watch4Fn();
+    }
+    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-group");
+        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();
+        this.watch4Fn();
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        this._teardownPopover();
+        this._setSiblingsInert(false);
+        (_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, _c, _d, _e;
+        return (index.h("li", { key: 'e842f5d91531596bc1b4077b50a2aa4b7349b557', class: index$1.cls("db-control-panel-navigation-item-group", 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, onMouseOver: () => { var _a; return (_a = this.navigationItemSafeTriangle) === null || _a === void 0 ? void 0 : _a.enableFollow(); }, onMouseLeave: () => { var _a; return (_a = this.navigationItemSafeTriangle) === null || _a === void 0 ? void 0 : _a.disableFollow(); }, onMouseMove: (event) => { var _a; return (_a = this.navigationItemSafeTriangle) === null || _a === void 0 ? void 0 : _a.followByMouseEvent(event); }, onKeyDown: (event) => this.handleEscape(event), "data-icon": this.icon, "data-show-icon": index$1.getBooleanAsString(this.showIcon, "showIcon"), "data-active": index$1.getBooleanAsString(this.active, "active"), "aria-disabled": index$1.getBooleanAsString(this.disabled, "disabled") }, index.h("button", { key: '58ba0cb92b2a10a880d8c9f59c11850085b2f9ec', class: "db-control-panel-navigation-item-group-expand-button", type: "button", ref: (el) => {
+                this._buttonRef = el;
+            }, "aria-haspopup": index$1.getBooleanAsString(this.hasPopup ? true : undefined), "aria-controls": (_c = this.menuId) !== null && _c !== void 0 ? _c : this._itemGroupMenuId, "aria-expanded": index$1.getBooleanAsString(this.isSubNavigationExpanded), disabled: index$1.getBoolean(this.disabled, "disabled"), onClick: (event) => this.handleClick(event) }, this.text, index.h("div", { key: '70f9d5553fc644f957fefc31a31350041aad2b83', class: "db-control-panel-navigation-item-group-expand-button-end-slot-container" }, index.h("slot", { key: '34ca08f31c839144194960294c35f9d4ef057e2a', name: "endSlot" }))), index.h("menu", { key: '877d344a558361d4bc6c4a7cbaa65325cf0d1d35', class: "db-control-panel-navigation-item-group-menu", ref: (el) => {
+                this._menuRef = el;
+            }, "data-force-close": index$1.getBooleanAsString(this.autoClose), id: (_d = this.menuId) !== null && _d !== void 0 ? _d : this._itemGroupMenuId, onScroll: () => this.onScroll(), onClick: (event) => this.handleNavigationItemClick(event) }, index.h("li", { key: '9a7c9be7cb8bbe5aac6dd2a4c8530ba1dbdb3f35', class: "db-control-panel-navigation-item-group-back-button" }, index.h("db-button", { key: '65808897bb081139d1c5a229f4c6e6fcf37f980d', icon: "arrow_left", variant: "ghost", id: this.backButtonId, onClick: (event) => this.handleBackClick(event) }, (_e = this.backButtonText) !== null && _e !== void 0 ? _e : constants.DEFAULT_BACK)), index.h("slot", { key: 'fa8a9703ae21bb54349081935d42c5128f3cc8f9' }))));
+    }
+    get rootElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "_ref": [{
+                "watch0": 0
+            }, {
+                "watch2": 0
+            }, {
+                "watch4": 0
+            }],
+        "initialized": [{
+                "watch0": 0
+            }, {
+                "watch2": 0
+            }],
+        "expanded": [{
+                "watch1": 0
+            }],
+        "_isMobile": [{
+                "watch3": 0
+            }],
+        "isSubNavigationExpanded": [{
+                "watch3": 0
+            }],
+        "_menuRef": [{
+                "watch4": 0
+            }],
+        "_buttonRef": [{
+                "watch4": 0
+            }],
+        "hasPopup": [{
+                "watch4": 0
+            }]
+    }; }
+};
+
+exports.db_control_panel_navigation_item_group = DBControlPanelNavigationItemGroup;

package/dist/cjs/db-control-panel-navigation-item.cjs.entry.js

@@ -0,0 +1,235 @@
+'use strict';
+
+var index = require('./index-C313bRqJ.js');
+var index$1 = require('./index-Df-6pBQf.js');
+
+const DBControlPanelNavigationItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        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 (index$1.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 (index$1.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 (index.h("li", { key: 'd40d366963f26f7e2177be2ff983f4da93c72e31', class: index$1.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": index$1.getBooleanAsString(this.showIcon, "showIcon"), "data-active": index$1.getBooleanAsString(this.active, "active"), "aria-disabled": index$1.getBooleanAsString(this.disabled, "disabled") }, this.text ? this.text : null, index.h("slot", { key: '6ef0c277db4060d9f15e215b9aadb5cf4562e16f' }), index.h("div", { key: '71aa41994396e4253d30b50d693dd13f551f68c0', class: "db-control-panel-navigation-item-end-slot-container" }, index.h("slot", { key: '4402ae9621bf2f7fe6fb7c476e3fe10a66822688', name: "endSlot" })), this._tooltip ? (index.h("db-tooltip", { placement: "right", delay: "slow" }, this._tooltip)) : null));
+    }
+    get rootElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "_ref": [{
+                "watch0": 0
+            }, {
+                "watch1": 0
+            }, {
+                "watch2": 0
+            }, {
+                "watch3": 0
+            }],
+        "initialized": [{
+                "watch0": 0
+            }],
+        "tooltip": [{
+                "watch1": 0
+            }],
+        "text": [{
+                "watch1": 0
+            }],
+        "disabled": [{
+                "watch2": 0
+            }],
+        "active": [{
+                "watch3": 0
+            }]
+    }; }
+};
+
+exports.db_control_panel_navigation_item = DBControlPanelNavigationItem;