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

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

@@ -0,0 +1,772 @@
+import { DEFAULT_BACK } from "../../shared/constants.js";
+import { cls, delay, getBoolean, getBooleanAsString, hasCssFlag, uuid, } from "../../utils/index.js";
+import { handleDataOutside } from "../../utils/floating-components.js";
+import { IntersectionObserverListener } from "../../utils/intersection-observer-listener.js";
+import { handleSubNavigationPosition, NavigationItemSafeTriangle, } from "../../utils/navigation.js";
+import { ResizeObserverListener } from "../../utils/resize-observer-listener.js";
+import { h } from "@stencil/core";
+/**
+ * @slot children - This is a default/unnamed slot
+ * @slot endSlot - TODO: Add description for slotEndSlot
+ */
+export class DBControlPanelNavigationItemGroup {
+    constructor() {
+        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-" + 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) {
+            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.
+            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().unobserve(this._intersectionObserverCallbackId);
+            this._intersectionObserverCallbackId = undefined;
+        }
+        if (this._resizeObserverCallbackId) {
+            new ResizeObserverListener().unobserve(this._resizeObserverCallbackId);
+            this._resizeObserverCallbackId = undefined;
+        }
+    }
+    onScroll() {
+        if (this.hasPopup && this._menuRef) {
+            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 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 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 = !!getBoolean(this.expanded, "expanded");
+        }
+    }
+    watch1() {
+        this.watch1Fn();
+    }
+    watch2Fn() {
+        if (this._ref && this.initialized) {
+            this.initialized = false;
+            this.hasPopup = hasCssFlag(this._ref, "--db-control-panel-navigation-item-group-menu-popover");
+            if (this._menuRef) {
+                this._isMobile = 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 NavigationItemSafeTriangle(this._ref, this._menuRef);
+            }
+            this._attachPopoverListeners();
+            if (!this._intersectionObserverCallbackId) {
+                this._intersectionObserverCallbackId =
+                    new 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().observe(document.documentElement, () => {
+                    if (this._menuRef) {
+                        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 (h("li", { key: 'e842f5d91531596bc1b4077b50a2aa4b7349b557', class: 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": getBooleanAsString(this.showIcon, "showIcon"), "data-active": getBooleanAsString(this.active, "active"), "aria-disabled": getBooleanAsString(this.disabled, "disabled") }, h("button", { key: '58ba0cb92b2a10a880d8c9f59c11850085b2f9ec', class: "db-control-panel-navigation-item-group-expand-button", type: "button", ref: (el) => {
+                this._buttonRef = el;
+            }, "aria-haspopup": getBooleanAsString(this.hasPopup ? true : undefined), "aria-controls": (_c = this.menuId) !== null && _c !== void 0 ? _c : this._itemGroupMenuId, "aria-expanded": getBooleanAsString(this.isSubNavigationExpanded), disabled: getBoolean(this.disabled, "disabled"), onClick: (event) => this.handleClick(event) }, this.text, h("div", { key: '70f9d5553fc644f957fefc31a31350041aad2b83', class: "db-control-panel-navigation-item-group-expand-button-end-slot-container" }, h("slot", { key: '34ca08f31c839144194960294c35f9d4ef057e2a', name: "endSlot" }))), h("menu", { key: '877d344a558361d4bc6c4a7cbaa65325cf0d1d35', class: "db-control-panel-navigation-item-group-menu", ref: (el) => {
+                this._menuRef = el;
+            }, "data-force-close": getBooleanAsString(this.autoClose), id: (_d = this.menuId) !== null && _d !== void 0 ? _d : this._itemGroupMenuId, onScroll: () => this.onScroll(), onClick: (event) => this.handleNavigationItemClick(event) }, h("li", { key: '9a7c9be7cb8bbe5aac6dd2a4c8530ba1dbdb3f35', class: "db-control-panel-navigation-item-group-back-button" }, 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 : DEFAULT_BACK)), h("slot", { key: 'fa8a9703ae21bb54349081935d42c5128f3cc8f9' }))));
+    }
+    static get is() { return "db-control-panel-navigation-item-group"; }
+    static get properties() {
+        return {
+            "expanded": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBControlPanelNavigationItemGroupProps[\"expanded\"]",
+                    "resolved": "boolean | string",
+                    "references": {
+                        "DBControlPanelNavigationItemGroupProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/control-panel-navigation-item-group/model.ts::DBControlPanelNavigationItemGroupProps",
+                            "referenceLocation": "DBControlPanelNavigationItemGroupProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "expanded"
+            },
+            "id": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBControlPanelNavigationItemGroupProps[\"id\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBControlPanelNavigationItemGroupProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/control-panel-navigation-item-group/model.ts::DBControlPanelNavigationItemGroupProps",
+                            "referenceLocation": "DBControlPanelNavigationItemGroupProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "id"
+            },
+            "propOverrides": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBControlPanelNavigationItemGroupProps[\"propOverrides\"]",
+                    "resolved": "{ id?: string; }",
+                    "references": {
+                        "DBControlPanelNavigationItemGroupProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/control-panel-navigation-item-group/model.ts::DBControlPanelNavigationItemGroupProps",
+                            "referenceLocation": "DBControlPanelNavigationItemGroupProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "className": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBControlPanelNavigationItemGroupProps[\"className\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBControlPanelNavigationItemGroupProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/control-panel-navigation-item-group/model.ts::DBControlPanelNavigationItemGroupProps",
+                            "referenceLocation": "DBControlPanelNavigationItemGroupProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "classname"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBControlPanelNavigationItemGroupProps[\"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": {
+                        "DBControlPanelNavigationItemGroupProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/control-panel-navigation-item-group/model.ts::DBControlPanelNavigationItemGroupProps",
+                            "referenceLocation": "DBControlPanelNavigationItemGroupProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "showIcon": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBControlPanelNavigationItemGroupProps[\"showIcon\"]",
+                    "resolved": "boolean | string",
+                    "references": {
+                        "DBControlPanelNavigationItemGroupProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/control-panel-navigation-item-group/model.ts::DBControlPanelNavigationItemGroupProps",
+                            "referenceLocation": "DBControlPanelNavigationItemGroupProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-icon"
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBControlPanelNavigationItemGroupProps[\"active\"]",
+                    "resolved": "boolean",
+                    "references": {
+                        "DBControlPanelNavigationItemGroupProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/control-panel-navigation-item-group/model.ts::DBControlPanelNavigationItemGroupProps",
+                            "referenceLocation": "DBControlPanelNavigationItemGroupProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active"
+            },
+            "disabled": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBControlPanelNavigationItemGroupProps[\"disabled\"]",
+                    "resolved": "boolean | string",
+                    "references": {
+                        "DBControlPanelNavigationItemGroupProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/control-panel-navigation-item-group/model.ts::DBControlPanelNavigationItemGroupProps",
+                            "referenceLocation": "DBControlPanelNavigationItemGroupProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled"
+            },
+            "menuId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBControlPanelNavigationItemGroupProps[\"menuId\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBControlPanelNavigationItemGroupProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/control-panel-navigation-item-group/model.ts::DBControlPanelNavigationItemGroupProps",
+                            "referenceLocation": "DBControlPanelNavigationItemGroupProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "menu-id"
+            },
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBControlPanelNavigationItemGroupProps[\"text\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBControlPanelNavigationItemGroupProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/control-panel-navigation-item-group/model.ts::DBControlPanelNavigationItemGroupProps",
+                            "referenceLocation": "DBControlPanelNavigationItemGroupProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text"
+            },
+            "backButtonId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBControlPanelNavigationItemGroupProps[\"backButtonId\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBControlPanelNavigationItemGroupProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/control-panel-navigation-item-group/model.ts::DBControlPanelNavigationItemGroupProps",
+                            "referenceLocation": "DBControlPanelNavigationItemGroupProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "back-button-id"
+            },
+            "backButtonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBControlPanelNavigationItemGroupProps[\"backButtonText\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBControlPanelNavigationItemGroupProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/control-panel-navigation-item-group/model.ts::DBControlPanelNavigationItemGroupProps",
+                            "referenceLocation": "DBControlPanelNavigationItemGroupProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "back-button-text"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasSubNavigation": {},
+            "isSubNavigationExpanded": {},
+            "autoClose": {},
+            "hasPopup": {},
+            "initialized": {},
+            "_isMobile": {},
+            "_role": {},
+            "_attributeObserver": {},
+            "_itemGroupMenuId": {},
+            "_intersectionObserverCallbackId": {},
+            "_resizeObserverCallbackId": {},
+            "_popoverListenersAttached": {},
+            "navigationItemSafeTriangle": {},
+            "observer": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "click",
+                "name": "click",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "rootElement"; }
+    static get watchers() {
+        return [{
+                "propName": "_ref",
+                "methodName": "watch0"
+            }, {
+                "propName": "initialized",
+                "methodName": "watch0"
+            }, {
+                "propName": "expanded",
+                "methodName": "watch1"
+            }, {
+                "propName": "_ref",
+                "methodName": "watch2"
+            }, {
+                "propName": "initialized",
+                "methodName": "watch2"
+            }, {
+                "propName": "_isMobile",
+                "methodName": "watch3"
+            }, {
+                "propName": "isSubNavigationExpanded",
+                "methodName": "watch3"
+            }, {
+                "propName": "_ref",
+                "methodName": "watch4"
+            }, {
+                "propName": "_menuRef",
+                "methodName": "watch4"
+            }, {
+                "propName": "_buttonRef",
+                "methodName": "watch4"
+            }, {
+                "propName": "hasPopup",
+                "methodName": "watch4"
+            }];
+    }
+}