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

package/dist/esm/db-control-panel-mobile.entry.js

@@ -0,0 +1,122 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-BlbKvvUv.js';
+import { t as DEFAULT_BURGER_MENU } from './constants-COv1iCFP.js';
+import { c as cls } from './index-DB8jc8lh.js';
+import { i as isEventTargetNavigationItem } from './navigation-Cc_Ln-dl.js';
+import './floating-components-BT3wZY6f.js';
+
+const DBControlPanelMobile = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.toggle = createEvent(this, "toggle");
+        this.open = false;
+        this.observer = undefined;
+    }
+    handleToggle(event) {
+        if (event.stopPropagation) {
+            event.stopPropagation();
+        }
+        const reverseOpen = !this.open;
+        this.open = reverseOpen;
+        if (this.toggle) {
+            this.toggle.emit(reverseOpen);
+        }
+    }
+    handleClose(event) {
+        if (event.stopPropagation) {
+            event.stopPropagation();
+        }
+        this.open = false;
+        if (this.toggle) {
+            this.toggle.emit(false);
+        }
+    }
+    handleNavigationItemClick(event) {
+        if (isEventTargetNavigationItem(event)) {
+            this.handleClose(event);
+        }
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-control-panel-mobile");
+        if (!parent || this.observer)
+            return;
+        this.observer = new MutationObserver((mutations) => {
+            if (mutations.some((mutation) => {
+                var _a;
+                const attr = mutation.target.attributes.getNamedItem((_a = mutation.attributeName) !== null && _a !== void 0 ? _a : "");
+                return (attr === null || attr === void 0 ? void 0 : attr.value) !== mutation.oldValue;
+            })) {
+                this.enableAttributePassing(element, "db-control-panel-mobile");
+            }
+        });
+        this.observer.observe(parent, {
+            attributes: true,
+            attributeOldValue: true,
+        });
+    }
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element === null || element === void 0 ? void 0 : element.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr && attr.name !== 'data-density' &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    if (attr.value) {
+                        element.setAttribute(attr.name, attr.value);
+                    }
+                    else {
+                        element.removeAttribute(attr.name);
+                    }
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && ["style"].includes(attr.name)) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
+                    const isWebComponent = attr.value.includes("hydrated");
+                    const value = attr.value.replace("hydrated", "").trim();
+                    const currentClass = element.getAttribute("class");
+                    element.setAttribute(attr.name, `${currentClass ? currentClass : ""}${value ? ` ${value}` : ""}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    componentDidLoad() {
+        if (typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect) {
+            const connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);
+            if (connectedElement) {
+                connectedElement.remove();
+            }
+        }
+        this.enableAttributePassing(this._ref, "db-control-panel-mobile");
+        this.setupObserver(this._ref);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    render() {
+        var _a, _b, _c;
+        return (h("header", { key: '25bf24bdb71c1c4f6f3c20f450969476b9de518b', class: cls("db-control-panel-mobile", this.className), "data-density": "regular", ref: (el) => {
+                this._ref = el;
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-position": this.position }, h("slot", { key: '225c01e9eab804a5fbb66614aed6fc55ec24955d', name: "skipNavigation" }), h("db-drawer", { key: 'e9e344091b10454d0e4b40cd709e9e5925008226', class: "db-control-panel-mobile-drawer", rounded: true, open: this.open, onClose: (event) => this.handleClose(event) }, h("div", { key: '4915275fceba63688f2d95ceb2016d928014dc17', class: "db-control-panel-mobile-drawer-scroll-container", onClick: (event) => this.handleNavigationItemClick(event) }, h("slot", { key: 'd0631fc92c2623c4fa894d2766911c1653c780c9' }), h("slot", { key: '5d989e8ece5fe37a3477c46cf2a8f15c76670c6b', name: "metaNavigation" })), h("db-drawer-header", { key: '882ad83031b3730a240e638bd286f5cc91199df1', slot: "header", text: this.drawerHeaderText }), h("db-drawer-footer", { key: 'be124b3f769f5fa7722d48d85ebd925c5e789bac', slot: "footer" }, h("slot", { key: '503e666e22a9a3e7046fb44a352800e7a301f5b3', name: "secondaryActions" }))), h("slot", { key: 'd401592fabf808f81f764546bdcd3b72e60b5018', name: "brand" }), h("slot", { key: 'ff5b83e96a1a42aa4f9bf19bb00c4f650c3b90db', name: "primaryActions" }), h("db-button", { key: '6ec807aa071e8f917ecab14ee8086a2eb07fa4fc', class: "db-control-panel-mobile-button", icon: "menu", type: "button", variant: "ghost", noText: true, onClick: (event) => this.handleToggle(event) }, (_c = this.burgerMenuLabel) !== null && _c !== void 0 ? _c : DEFAULT_BURGER_MENU)));
+    }
+    get rootElement() { return getElement(this); }
+};
+
+export { DBControlPanelMobile as db_control_panel_mobile };

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

@@ -0,0 +1,418 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-BlbKvvUv.js';
+import { n as DEFAULT_BACK } from './constants-COv1iCFP.js';
+import { u as uuid, d as delay, f as getBoolean, e as hasCssFlag, g as getBooleanAsString, c as cls } from './index-DB8jc8lh.js';
+import { b as handleDataOutside } from './floating-components-BT3wZY6f.js';
+import { I as IntersectionObserverListener } from './intersection-observer-listener-DQ4WWSLe.js';
+import { h as handleSubNavigationPosition, N as NavigationItemSafeTriangle } from './navigation-Cc_Ln-dl.js';
+import { R as ResizeObserverListener } from './resize-observer-listener-z8XjzxC9.js';
+
+const DBControlPanelNavigationItemGroup = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.click = 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-" + 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' }))));
+    }
+    get rootElement() { return 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
+            }]
+    }; }
+};
+
+export { DBControlPanelNavigationItemGroup as db_control_panel_navigation_item_group };