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

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

@@ -0,0 +1,579 @@
+'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');
+var resizeObserverListener = require('./resize-observer-listener-CmPDfoZs.js');
+require('./floating-components-B3bpFI90.js');
+
+const DBControlPanelNavigation = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.behavior = "multiple";
+        this.showScrollLeft = false;
+        this.showScrollRight = false;
+        this._shellMobile = false;
+        this._shellDesktopPosition = undefined;
+        this.initialized = false;
+        this._resizeObserverCallbackId = undefined;
+        this._singleBehaviorObserver = undefined;
+        this.observer = undefined;
+    }
+    _setShellMobile() {
+        this._shellMobile = index$1.hasCssFlag(this._ref, "--db-control-panel-sub-navigation-mobile");
+    }
+    _attachSingleBehaviorObserver() {
+        if (!this.menuRef)
+            return;
+        let isProcessing = false;
+        const observer = new MutationObserver((mutations) => {
+            var _a;
+            if (isProcessing)
+                return;
+            for (const mutation of mutations) {
+                if (mutation.type === "attributes" &&
+                    mutation.attributeName === "aria-expanded") {
+                    const target = mutation.target;
+                    const newValue = target.getAttribute("aria-expanded");
+                    // Only act if the value actually changed to avoid
+                    // infinite loops when Angular re-applies the same
+                    // binding value during change detection.
+                    if (newValue === mutation.oldValue || newValue !== "true") {
+                        continue;
+                    }
+                    // Collapse sibling groups at the same level
+                    const parentGroup = target.closest(".db-control-panel-navigation-item-group");
+                    // Navigate to the actual parent container (menu).
+                    // In Angular/Stencil the parentElement might be a custom element
+                    // host wrapper, so traverse up until we find the menu container.
+                    const parentContainer = (_a = parentGroup === null || parentGroup === void 0 ? void 0 : parentGroup.closest("menu, .db-control-panel-navigation-item-group-menu")) !== null && _a !== void 0 ? _a : parentGroup === null || parentGroup === void 0 ? void 0 : parentGroup.parentElement;
+                    if (parentContainer) {
+                        const siblingButtons = parentContainer.querySelectorAll(":scope > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group-expand-button, " +
+                            ":scope > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group-expand-button");
+                        isProcessing = true;
+                        for (const sibling of Array.from(siblingButtons)) {
+                            if (sibling !== target &&
+                                sibling.getAttribute("aria-expanded") === "true") {
+                                const siblingHtml = sibling;
+                                if (siblingHtml.dataset["isCollapsing"] === "true") {
+                                    siblingHtml.removeAttribute("data-is-collapsing");
+                                }
+                                else {
+                                    siblingHtml.dataset["isCollapsing"] = "true";
+                                    siblingHtml.dispatchEvent(new MouseEvent("click", {
+                                        bubbles: false,
+                                        cancelable: true,
+                                    }));
+                                }
+                            }
+                        }
+                        isProcessing = false;
+                    }
+                }
+            }
+        });
+        // Observe all expand buttons within this navigation
+        const expandButtons = this.menuRef.querySelectorAll(".db-control-panel-navigation-item-group-expand-button");
+        for (const button of Array.from(expandButtons)) {
+            observer.observe(button, {
+                attributes: true,
+                attributeOldValue: true,
+                attributeFilter: ["aria-expanded"],
+            });
+        }
+        this._singleBehaviorObserver = observer;
+    }
+    evaluateScrollButtons(tList) {
+        if (!tList)
+            return;
+        const needsScroll = tList.scrollWidth > tList.clientWidth;
+        const scrollLeft = Math.ceil(tList.scrollLeft);
+        this.showScrollLeft = needsScroll && scrollLeft > 1;
+        this.showScrollRight =
+            needsScroll && scrollLeft < tList.scrollWidth - tList.clientWidth;
+    }
+    scroll(left) {
+        var _a;
+        let step = Number(this.arrowScrollDistance) || 100;
+        if (left) {
+            step *= -1;
+        }
+        (_a = this.menuRef) === null || _a === void 0 ? void 0 : _a.scrollBy({
+            top: 0,
+            left: step,
+            behavior: "smooth",
+        });
+    }
+    onScroll() {
+        this.evaluateScrollButtons(this.menuRef);
+        this._handleSubNavigation();
+    }
+    _handleSubNavigation() {
+        navigation.handleSubNavigationPosition(this.menuRef, 0, this._shellDesktopPosition === "top");
+    }
+    _handleTreeKeyDown(event) {
+        if (!this.menuRef)
+            return;
+        if (this.variant === "tree") {
+            this._handleTreeKeys(event);
+        }
+        else if (this.variant === "popover") {
+            this._handlePopoverKeys(event);
+        }
+    }
+    _focusParentGroupButton(activeElement) {
+        const parentGroupMenu = activeElement === null || activeElement === void 0 ? void 0 : activeElement.closest(".db-control-panel-navigation-item-group-menu");
+        const parentGroup = parentGroupMenu === null || parentGroupMenu === void 0 ? void 0 : parentGroupMenu.closest(".db-control-panel-navigation-item-group");
+        if (parentGroup) {
+            const parentButton = parentGroup.querySelector(":scope > .db-control-panel-navigation-item-group-expand-button");
+            if (parentButton) {
+                activeElement.setAttribute("tabindex", "-1");
+                parentButton.setAttribute("tabindex", "0");
+                parentButton.focus();
+                return true;
+            }
+        }
+        return false;
+    }
+    _closeSubMenuAndReturnToParent(parentGroupMenu) {
+        const parentGroup = parentGroupMenu.closest(".db-control-panel-navigation-item-group");
+        if (parentGroup) {
+            const parentButton = parentGroup.querySelector(":scope > .db-control-panel-navigation-item-group-expand-button");
+            if (parentButton) {
+                parentButton.click();
+                parentButton.focus();
+            }
+        }
+    }
+    _handlePopoverKeys(event) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        const menuElement = this.menuRef;
+        const activeElement = document.activeElement;
+        if (!activeElement)
+            return;
+        const key = event.key;
+        const ITEM_SELECTOR = ":scope > .db-control-panel-navigation-item > a, :scope > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group-expand-button, :scope > db-control-panel-navigation-item > .db-control-panel-navigation-item > a, :scope > db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group > .db-control-panel-navigation-item-group-expand-button";
+        // Determine if we are at the top level or inside a sub-menu
+        const parentGroupMenu = activeElement.closest(".db-control-panel-navigation-item-group-menu");
+        const isTopLevel = !parentGroupMenu;
+        // Top level is horizontal only when shell position is top
+        const isHorizontal = isTopLevel && this._shellDesktopPosition === "top";
+        // Get sibling items at the current level
+        const container = isTopLevel ? menuElement : parentGroupMenu;
+        const items = Array.from(container.querySelectorAll(ITEM_SELECTOR));
+        const currentIndex = items.indexOf(activeElement);
+        // Determine navigation keys based on orientation
+        // Horizontal: Left/Right = prev/next, Down = open sub
+        // Vertical: Up/Down = prev/next, Right = open sub
+        const prevKey = isHorizontal ? "ArrowLeft" : "ArrowUp";
+        const nextKey = isHorizontal ? "ArrowRight" : "ArrowDown";
+        const openKey = isHorizontal ? "ArrowDown" : "ArrowRight";
+        const closeKey = isHorizontal ? "ArrowUp" : "ArrowLeft";
+        // Handle keyboard navigation when focus is on the back button
+        // (which is not included in the ITEM_SELECTOR items list).
+        const isOnBackButton = activeElement.closest(".db-control-panel-navigation-item-group-back-button");
+        if (isOnBackButton && !isTopLevel) {
+            if (key === nextKey) {
+                event.preventDefault();
+                (_a = items[0]) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else if (key === prevKey) {
+                event.preventDefault();
+                (_b = items[items.length - 1]) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+            return;
+        }
+        if (key === nextKey) {
+            event.preventDefault();
+            if (currentIndex === -1) {
+                (_c = items[0]) === null || _c === void 0 ? void 0 : _c.focus();
+            }
+            else if (currentIndex < items.length - 1) {
+                (_d = items[currentIndex + 1]) === null || _d === void 0 ? void 0 : _d.focus();
+            }
+            else if (!isTopLevel) {
+                // Check if a visible back button exists (mobile).
+                // If so, wrap to the back button instead of closing.
+                const backButton = parentGroupMenu.querySelector(":scope > .db-control-panel-navigation-item-group-back-button button");
+                if (backButton && backButton.offsetParent !== null) {
+                    backButton.focus();
+                }
+                else {
+                    this._closeSubMenuAndReturnToParent(parentGroupMenu);
+                }
+            }
+            else {
+                // Wrap at top level
+                (_e = items[0]) === null || _e === void 0 ? void 0 : _e.focus();
+            }
+        }
+        else if (key === prevKey) {
+            event.preventDefault();
+            if (currentIndex > 0) {
+                (_f = items[currentIndex - 1]) === null || _f === void 0 ? void 0 : _f.focus();
+            }
+            else if (!isTopLevel) {
+                // Check if a visible back button exists in the sub-menu
+                // (mobile only). If so, focus it instead of closing.
+                const backButton = parentGroupMenu.querySelector(":scope > .db-control-panel-navigation-item-group-back-button button");
+                if (backButton && backButton.offsetParent !== null) {
+                    backButton.focus();
+                }
+                else {
+                    this._closeSubMenuAndReturnToParent(parentGroupMenu);
+                }
+            }
+            else {
+                // Wrap at top level
+                (_g = items[items.length - 1]) === null || _g === void 0 ? void 0 : _g.focus();
+            }
+        }
+        else if (key === openKey) {
+            // Open sub-menu if on a group button
+            const group = activeElement.closest(".db-control-panel-navigation-item-group");
+            if (group) {
+                event.preventDefault();
+                const expandButton = group.querySelector(":scope > .db-control-panel-navigation-item-group-expand-button");
+                if (expandButton &&
+                    expandButton.getAttribute("aria-expanded") !== "true") {
+                    expandButton.click();
+                }
+                const subMenu = group.querySelector(":scope > .db-control-panel-navigation-item-group-menu");
+                if (subMenu) {
+                    const firstItem = subMenu.querySelector(ITEM_SELECTOR);
+                    if (firstItem) {
+                        firstItem.focus();
+                    }
+                }
+            }
+        }
+        else if (key === closeKey || key === "Escape") {
+            if (!isTopLevel) {
+                // Close sub-menu, return to parent
+                event.preventDefault();
+                this._closeSubMenuAndReturnToParent(parentGroupMenu);
+            }
+        }
+        else if (key === "Home") {
+            event.preventDefault();
+            (_h = items[0]) === null || _h === void 0 ? void 0 : _h.focus();
+        }
+        else if (key === "End") {
+            event.preventDefault();
+            (_j = items[items.length - 1]) === null || _j === void 0 ? void 0 : _j.focus();
+        }
+    }
+    _handleTreeKeys(event) {
+        const menuElement = this.menuRef;
+        const allTreeItems = Array.from(menuElement.querySelectorAll('[role="treeitem"]'));
+        if (allTreeItems.length === 0)
+            return;
+        // Only navigate visible treeitems: skip those inside collapsed groups
+        const visibleTreeItems = allTreeItems.filter((item) => {
+            const groupMenu = item.closest(".db-control-panel-navigation-item-group-menu");
+            if (!groupMenu)
+                return true;
+            const group = groupMenu.closest(".db-control-panel-navigation-item-group");
+            const expandButton = group === null || group === void 0 ? void 0 : group.querySelector(":scope > .db-control-panel-navigation-item-group-expand-button");
+            return (expandButton === null || expandButton === void 0 ? void 0 : expandButton.getAttribute("aria-expanded")) === "true";
+        });
+        if (visibleTreeItems.length === 0)
+            return;
+        const activeElement = document.activeElement;
+        const currentIndex = visibleTreeItems.indexOf(activeElement);
+        const key = event.key;
+        let nextIndex = -1;
+        if (key === "ArrowDown") {
+            event.preventDefault();
+            nextIndex =
+                currentIndex < visibleTreeItems.length - 1 ? currentIndex + 1 : 0;
+        }
+        else if (key === "ArrowUp") {
+            event.preventDefault();
+            nextIndex =
+                currentIndex > 0 ? currentIndex - 1 : visibleTreeItems.length - 1;
+        }
+        else if (key === "Home") {
+            event.preventDefault();
+            nextIndex = 0;
+        }
+        else if (key === "End") {
+            event.preventDefault();
+            nextIndex = visibleTreeItems.length - 1;
+        }
+        else if (key === "ArrowRight") {
+            event.preventDefault();
+            const group = activeElement === null || activeElement === void 0 ? void 0 : activeElement.closest(".db-control-panel-navigation-item-group");
+            if (group) {
+                const expandButton = group.querySelector(":scope > .db-control-panel-navigation-item-group-expand-button");
+                if (expandButton === activeElement &&
+                    expandButton.getAttribute("aria-expanded") !== "true") {
+                    expandButton.click();
+                }
+                else if ((expandButton === null || expandButton === void 0 ? void 0 : expandButton.getAttribute("aria-expanded")) === "true") {
+                    const groupMenu = group.querySelector(":scope > .db-control-panel-navigation-item-group-menu");
+                    const childItem = groupMenu === null || groupMenu === void 0 ? void 0 : groupMenu.querySelector('[role="treeitem"]');
+                    if (childItem) {
+                        activeElement.setAttribute("tabindex", "-1");
+                        childItem.setAttribute("tabindex", "0");
+                        childItem.focus();
+                        return;
+                    }
+                }
+            }
+        }
+        else if (key === "ArrowLeft") {
+            event.preventDefault();
+            const currentGroup = activeElement === null || activeElement === void 0 ? void 0 : activeElement.closest(".db-control-panel-navigation-item-group");
+            if (currentGroup) {
+                const expandBtn = currentGroup.querySelector(":scope > .db-control-panel-navigation-item-group-expand-button");
+                if (expandBtn === activeElement &&
+                    expandBtn.getAttribute("aria-expanded") === "true") {
+                    expandBtn.click();
+                }
+                else {
+                    // Move to parent group button
+                    if (this._focusParentGroupButton(activeElement)) {
+                        return;
+                    }
+                }
+            }
+            else {
+                // Not inside a group, try moving to parent
+                if (this._focusParentGroupButton(activeElement)) {
+                    return;
+                }
+            }
+        }
+        else if (key === "Escape") {
+            event.preventDefault();
+            activeElement === null || activeElement === void 0 ? void 0 : activeElement.blur();
+            return;
+        }
+        else {
+            return;
+        }
+        if (nextIndex >= 0 && nextIndex < visibleTreeItems.length) {
+            activeElement === null || activeElement === void 0 ? void 0 : activeElement.setAttribute("tabindex", "-1");
+            visibleTreeItems[nextIndex].setAttribute("tabindex", "0");
+            visibleTreeItems[nextIndex].focus();
+        }
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-control-panel-navigation");
+        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");
+            }
+        });
+        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.initialized) {
+            this._shellDesktopPosition = index$1.hasCssFlag(this._ref, "--db-control-panel-navigation-horizontal")
+                ? "top"
+                : "left";
+            this._setShellMobile();
+        }
+    }
+    watch0() {
+        this.watch0Fn();
+    }
+    watch1Fn() {
+        var _a;
+        if (this.menuRef) {
+            const menuElement = this.menuRef;
+            if (!this.variant || this.variant === "popover" || this._shellMobile) {
+                // Clean up tree roles if switching from tree to popover
+                for (const menu of Array.from(menuElement.querySelectorAll('.db-control-panel-navigation-item-group-menu[role="group"]'))) {
+                    menu.removeAttribute("role");
+                }
+                // Remove forwarded aria-label and role from the <menu> when not in tree variant
+                menuElement.removeAttribute("aria-label");
+                menuElement.removeAttribute("role");
+                for (const navItem of Array.from(menuElement.querySelectorAll('.db-control-panel-navigation-item[role="none"], .db-control-panel-navigation-item-group[role="none"]'))) {
+                    navItem.removeAttribute("role");
+                    const interactive = navItem.querySelector('[role="treeitem"]');
+                    if (interactive) {
+                        interactive.removeAttribute("role");
+                        interactive.removeAttribute("tabindex");
+                    }
+                }
+                this._handleSubNavigation();
+            }
+            else if (this.variant === "tree") {
+                for (const menu of Array.from(menuElement.querySelectorAll(".db-control-panel-navigation-item-group-menu"))) {
+                    menu.style.position = "";
+                    menu.setAttribute("role", "group");
+                }
+                // Forward aria-label from the <nav> to the <menu role="tree">
+                const navAriaLabel = (_a = this._ref) === null || _a === void 0 ? void 0 : _a.getAttribute("aria-label");
+                if (navAriaLabel) {
+                    menuElement.setAttribute("aria-label", navAriaLabel);
+                }
+                const allTreeItems = [];
+                for (const navItem of Array.from(menuElement.querySelectorAll(".db-control-panel-navigation-item, .db-control-panel-navigation-item-group"))) {
+                    navItem.setAttribute("role", "none");
+                    const interactive = navItem.querySelector("a, button");
+                    if (interactive) {
+                        interactive.setAttribute("role", "treeitem");
+                        interactive.setAttribute("tabindex", "-1");
+                        allTreeItems.push(interactive);
+                    }
+                }
+                // First visible treeitem gets tabindex="0" for initial focus
+                if (allTreeItems.length > 0) {
+                    allTreeItems[0].setAttribute("tabindex", "0");
+                }
+                // For behavior="single", attach a mutation observer to collapse
+                // sibling groups when one is expanded
+                if (this.behavior === "single") {
+                    this._attachSingleBehaviorObserver();
+                }
+            }
+        }
+    }
+    watch1() {
+        this.watch1Fn();
+    }
+    watch2Fn() {
+        if (this._shellDesktopPosition) {
+            this._handleSubNavigation();
+            this.evaluateScrollButtons(this.menuRef);
+            // Re-evaluate scroll buttons and re-position the sub-navigation on
+            // container resize (e.g. orientation change). A container-specific
+            // ResizeObserver provides more accurate detection than global
+            // window resize events.
+            if (!this._resizeObserverCallbackId) {
+                this._resizeObserverCallbackId = new resizeObserverListener.ResizeObserverListener().observe(this.menuRef, () => {
+                    this.evaluateScrollButtons(this.menuRef);
+                    this._handleSubNavigation();
+                });
+            }
+        }
+    }
+    watch2() {
+        this.watch2Fn();
+    }
+    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");
+        const onMountHook_0 = () => {
+            this.initialized = true;
+        };
+        onMountHook_0();
+        const onMountHook_1 = () => {
+            this.setupObserver(this._ref);
+        };
+        onMountHook_1();
+        this.watch0Fn();
+        this.watch1Fn();
+        this.watch2Fn();
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        if (this._resizeObserverCallbackId) {
+            new resizeObserverListener.ResizeObserverListener().unobserve(this._resizeObserverCallbackId);
+            this._resizeObserverCallbackId = undefined;
+        }
+        (_a = this._singleBehaviorObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this._singleBehaviorObserver = undefined;
+        (_b = this.observer) === null || _b === void 0 ? void 0 : _b.disconnect();
+    }
+    render() {
+        var _a, _b, _c, _d, _e;
+        return (index.h("nav", { key: '198358b3f5f8e8929bca41eb358a6eaa24ef8692', class: index$1.cls("db-control-panel-navigation", 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-variant": this.variant, "data-behavior": this.behavior, "data-show-tree-line": index$1.getBooleanAsString((_c = this.showTreeLine) !== null && _c !== void 0 ? _c : "true", "showTreeLine") }, this.showScrollLeft ? (index.h("db-button", { class: "overflow-scroll-left-button", variant: "filled", icon: "chevron_left", type: "button", noText: true, onClick: () => this.scroll(true) }, (_d = this.scrollLeftText) !== null && _d !== void 0 ? _d : constants.DEFAULT_SCROLL_LEFT)) : null, index.h("menu", { key: '7bd6c7fefa68545f77aaf2facb435cda3dc2c16b', role: this.variant === "tree" ? "tree" : undefined, ref: (el) => {
+                this.menuRef = el;
+            }, onScroll: () => this.onScroll(), onKeyDown: (event) => this._handleTreeKeyDown(event) }, index.h("slot", { key: '4d099ef67db71012fa77fbc429a2fee6f61b63c2' })), this.showScrollRight ? (index.h("db-button", { class: "overflow-scroll-right-button", variant: "filled", icon: "chevron_right", type: "button", noText: true, onClick: () => this.scroll() }, (_e = this.scrollRightText) !== null && _e !== void 0 ? _e : constants.DEFAULT_SCROLL_RIGHT)) : null));
+    }
+    get rootElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "_ref": [{
+                "watch0": 0
+            }],
+        "initialized": [{
+                "watch0": 0
+            }],
+        "menuRef": [{
+                "watch1": 0
+            }, {
+                "watch2": 0
+            }],
+        "variant": [{
+                "watch1": 0
+            }],
+        "_shellDesktopPosition": [{
+                "watch1": 0
+            }, {
+                "watch2": 0
+            }],
+        "_shellMobile": [{
+                "watch1": 0
+            }],
+        "behavior": [{
+                "watch1": 0
+            }]
+    }; }
+};
+
+exports.db_control_panel_navigation = DBControlPanelNavigation;

package/dist/cjs/db-control-panel-primary-actions.cjs.entry.js

@@ -0,0 +1,95 @@
+'use strict';
+
+var index = require('./index-C313bRqJ.js');
+var index$1 = require('./index-Df-6pBQf.js');
+
+const DBControlPanelPrimaryActions = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.observer = undefined;
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-control-panel-primary-actions");
+        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-primary-actions");
+            }
+        });
+        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-primary-actions");
+        this.setupObserver(this._ref);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    render() {
+        var _a, _b;
+        return (index.h("div", { key: '80d8537f30b067b8488833ffdcffc14100dc40d2', class: index$1.cls("db-control-panel-primary-actions", 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("slot", { key: 'd70e9a7406af72858aa4da16f6abe313d7a44ef4' })));
+    }
+    get rootElement() { return index.getElement(this); }
+};
+
+exports.db_control_panel_primary_actions = DBControlPanelPrimaryActions;