@xplortech/apollo-core 2.11.0 → 3.0.0

package/dist/cjs/xpl-top-nav-item.cjs.entry.js

@@ -0,0 +1,435 @@
+'use strict';
+
+var index = require('./index-3cBvw409.js');
+var lifecycle = require('./lifecycle-DeSsFfQZ.js');
+var topNavConstants = require('./top-nav-constants-DckvgAo7.js');
+
+const TOP_NAV_ITEM_HOVER_OPEN_MQ = '(hover: hover) and (pointer: fine) and (min-width: 768px)';
+const TOP_NAV_ITEM_HOVER_CLOSE_DELAY_MS = 150;
+
+const TIMER = {
+    hasDropdownSync: 'hasDropdownSync',
+    postRender: 'postRender',
+    focusTriggerAfterEscape: 'focusTriggerAfterEscape',
+    hoverClose: 'hoverClose',
+};
+const TopNavItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.navItemClick = index.createEvent(this, "navItemClick", 7);
+        this.openChange = index.createEvent(this, "openChange", 7);
+        this.dropdownPanelId = `xpl-top-nav-item-dropdown-${Math.random().toString(36).slice(2, 11)}`;
+        this.hoverOpened = false;
+        this.timers = new lifecycle.TimerManager();
+        this.hasActiveDescendant = false;
+        this.hasDropdown = false;
+        this.isLeadingIconSlotPresent = false;
+        this.isMobileViewport = false;
+        this.hostListitemRole = false;
+        this.isTrailingIconSlotPresent = false;
+        this.active = false;
+        this.icon = '';
+        this.open = false;
+        this.openMode = 'click';
+        this.selected = false;
+        this.onDocClickCapture = (e) => {
+            if (!this.hasDropdown || !this.open)
+                return;
+            const target = e.target;
+            if (target && !this.el.contains(target)) {
+                this.open = false;
+            }
+        };
+        this.onDocKeyDownCapture = (e) => {
+            if (!this.hasDropdown || !this.open)
+                return;
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                e.stopPropagation();
+                this.open = false;
+                this.focusTriggerAfterEscape();
+            }
+        };
+        this.handleClick = (e) => {
+            if (this.hasDropdown) {
+                e.preventDefault();
+                e.stopPropagation();
+                this.timers.clearCoalesced(TIMER.hoverClose);
+                if (this.open && this.hoverOpened && this.hoverModeActive() && e.detail > 0) {
+                    return;
+                }
+                this.hoverOpened = false;
+                this.open = !this.open;
+                return;
+            }
+            this.navItemClick.emit(e);
+        };
+        this.handleKeyDown = (e) => {
+            const isLinkMode = this.href != null && !this.hasDropdown;
+            if (isLinkMode && e.key === ' ') {
+                e.preventDefault();
+                const anchor = this.el.querySelector('.xpl-top-nav-item__inner');
+                anchor?.click();
+            }
+        };
+        this.onMobileViewportChange = () => {
+            this.isMobileViewport = this.mobileMq?.matches ?? false;
+        };
+        this.handleMouseEnter = () => {
+            if (!this.hasDropdown || !this.hoverModeActive()) {
+                return;
+            }
+            this.timers.clearCoalesced(TIMER.hoverClose);
+            if (!this.open) {
+                this.hoverOpened = true;
+                this.open = true;
+            }
+        };
+        this.handleMouseLeave = () => {
+            if (!this.hasDropdown || !this.open || !this.hoverOpened) {
+                return;
+            }
+            this.timers.scheduleCoalesced(TIMER.hoverClose, () => {
+                if (!this.hoverOpened || this.el.contains(this.el.ownerDocument.activeElement)) {
+                    return;
+                }
+                this.open = false;
+            }, TOP_NAV_ITEM_HOVER_CLOSE_DELAY_MS);
+        };
+    }
+    onHasDropdownChanged() {
+        if (!this.hasDropdown)
+            this.open = false;
+        this.syncDropdownDocListeners();
+    }
+    onOpenChanged(next) {
+        this.openChange.emit(next);
+        if (!next)
+            this.hoverOpened = false;
+        if (next && this.hasDropdown)
+            this.broadcastCloseOtherDropdownHosts();
+    }
+    connectedCallback() {
+        if (lifecycle.isBrowser() && typeof window.matchMedia === 'function') {
+            this.hoverOpenMq = window.matchMedia(TOP_NAV_ITEM_HOVER_OPEN_MQ);
+            this.mobileMq = window.matchMedia(topNavConstants.TOP_NAV_MOBILE_MQ);
+            this.mobileMq.addEventListener('change', this.onMobileViewportChange);
+            this.isMobileViewport = this.mobileMq.matches;
+        }
+        this.syncHostListitemRole();
+        this.syncHasDropdownFromDom();
+        this.syncDropdownDocListeners();
+        this.connectDropdownSlotObserver();
+    }
+    disconnectedCallback() {
+        this.timers.dispose();
+        this.hoverOpenMq = undefined;
+        this.mobileMq?.removeEventListener('change', this.onMobileViewportChange);
+        this.mobileMq = undefined;
+        this.disconnectDropdownSlotObserver();
+        this.disconnectListitemContextObservers();
+        const doc = this.el.ownerDocument;
+        doc.removeEventListener('click', this.onDocClickCapture, true);
+        doc.removeEventListener('keydown', this.onDocKeyDownCapture, true);
+    }
+    componentWillLoad() {
+        this.syncHostListitemRole();
+        this.syncHasDropdownFromDom();
+    }
+    componentWillRender() {
+        this.disconnectDropdownSlotObserver();
+        this.disconnectListitemContextObservers();
+    }
+    componentDidRender() {
+        this.schedulePostRenderTopNavItemWork();
+    }
+    handleCloseNavDropdownRequest() {
+        if (this.hasDropdown && this.open) {
+            this.open = false;
+        }
+    }
+    async closeMenu() {
+        if (!this.hasDropdown)
+            return;
+        this.open = false;
+    }
+    async openMenu() {
+        if (!this.hasDropdown)
+            return;
+        this.timers.clearCoalesced(TIMER.hoverClose);
+        this.hoverOpened = false;
+        this.open = true;
+    }
+    async toggleMenu() {
+        if (!this.hasDropdown)
+            return;
+        this.open = !this.open;
+    }
+    scheduleHasDropdownSyncFromObserver() {
+        this.timers.scheduleCoalesced(TIMER.hasDropdownSync, () => {
+            if (!this.el.isConnected) {
+                return;
+            }
+            this.syncHasDropdownFromDom();
+        });
+    }
+    connectDropdownSlotObserver() {
+        this.disconnectDropdownSlotObserver();
+        if (typeof MutationObserver === 'undefined')
+            return;
+        this.dropdownSlotObserver = new MutationObserver(() => {
+            this.scheduleHasDropdownSyncFromObserver();
+        });
+        this.dropdownSlotObserver.observe(this.el, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['slot'],
+        });
+    }
+    disconnectDropdownSlotObserver() {
+        this.dropdownSlotObserver?.disconnect();
+        this.dropdownSlotObserver = undefined;
+    }
+    disconnectListitemContextObservers() {
+        this.parentListitemContextObserver?.disconnect();
+        this.parentListitemContextObserver = undefined;
+        this.selfListitemContextObserver?.disconnect();
+        this.selfListitemContextObserver = undefined;
+    }
+    connectListitemContextObservers() {
+        this.disconnectListitemContextObservers();
+        if (typeof MutationObserver === 'undefined' || !this.el.isConnected) {
+            return;
+        }
+        this.selfListitemContextObserver = new MutationObserver(() => {
+            this.schedulePostRenderTopNavItemWork();
+        });
+        this.selfListitemContextObserver.observe(this.el, {
+            attributes: true,
+            attributeFilter: ['class', 'slot'],
+        });
+        const parent = this.el.parentElement;
+        if (parent) {
+            this.parentListitemContextObserver = new MutationObserver(() => {
+                this.schedulePostRenderTopNavItemWork();
+            });
+            const isTopNavLeftAside = parent.tagName.toLowerCase() === 'xpl-top-nav' &&
+                this.el.getAttribute('slot') === 'left-aside';
+            const leftPrimaryListHost = isTopNavLeftAside
+                ? parent.querySelector('.xpl-top-nav__left-primary')
+                : null;
+            const observeTarget = leftPrimaryListHost ?? parent;
+            this.parentListitemContextObserver.observe(observeTarget, {
+                attributes: true,
+                attributeFilter: ['role'],
+                subtree: false,
+            });
+        }
+    }
+    schedulePostRenderTopNavItemWork() {
+        this.timers.scheduleCoalesced(TIMER.postRender, () => {
+            if (!this.el.isConnected) {
+                return;
+            }
+            this.syncHostListitemRole();
+            this.syncHasDropdownFromDom();
+            this.connectListitemContextObservers();
+            this.connectDropdownSlotObserver();
+        });
+    }
+    syncDropdownDocListeners() {
+        if (!lifecycle.isBrowser()) {
+            return;
+        }
+        const doc = this.el.ownerDocument;
+        doc.removeEventListener('click', this.onDocClickCapture, true);
+        doc.removeEventListener('keydown', this.onDocKeyDownCapture, true);
+        if (!this.hasDropdown) {
+            return;
+        }
+        doc.addEventListener('click', this.onDocClickCapture, true);
+        doc.addEventListener('keydown', this.onDocKeyDownCapture, true);
+    }
+    hasSlottedChildOwnedByThisHost(slotName) {
+        return Array.from(this.el.querySelectorAll(`[slot="${slotName}"]`)).some((node) => node.closest('xpl-top-nav-item') === this.el);
+    }
+    syncHasDropdownFromDom() {
+        const nextHasDropdown = this.el.querySelector('[slot="dropdown"]') != null;
+        if (nextHasDropdown !== this.hasDropdown) {
+            this.hasDropdown = nextHasDropdown;
+        }
+        const nextLeading = this.hasSlottedChildOwnedByThisHost('leading-icon');
+        if (nextLeading !== this.isLeadingIconSlotPresent) {
+            this.isLeadingIconSlotPresent = nextLeading;
+        }
+        const nextTrailing = this.hasSlottedChildOwnedByThisHost('trailing-icon');
+        if (nextTrailing !== this.isTrailingIconSlotPresent) {
+            this.isTrailingIconSlotPresent = nextTrailing;
+        }
+        const nextActiveDescendant = nextHasDropdown
+            ? this.el.querySelector('[slot="dropdown"] .xpl-top-nav-item--active') !== null ||
+                this.el.querySelector('[slot="dropdown"] .xpl-top-nav-item--selected') !== null
+            : false;
+        if (nextActiveDescendant !== this.hasActiveDescendant) {
+            this.hasActiveDescendant = nextActiveDescendant;
+        }
+    }
+    getNavDropdownBroadcastRoot() {
+        return (this.el.closest('xpl-top-nav-menu') ??
+            this.el.closest('xpl-nav-header-menu') ??
+            this.el.closest('xpl-top-nav') ??
+            this.el.ownerDocument);
+    }
+    broadcastCloseOtherDropdownHosts() {
+        const root = this.getNavDropdownBroadcastRoot();
+        root.querySelectorAll('xpl-top-nav-item').forEach((host) => {
+            if (host === this.el || host.parentElement !== this.el.parentElement) {
+                return;
+            }
+            host.dispatchEvent(new CustomEvent('_xplCloseNavDropdown', { bubbles: false }));
+        });
+    }
+    hoverModeActive() {
+        return this.openMode === 'hover' && (this.hoverOpenMq?.matches ?? false);
+    }
+    focusTriggerAfterEscape() {
+        this.timers.scheduleCoalesced(TIMER.focusTriggerAfterEscape, () => {
+            if (!this.el.isConnected) {
+                return;
+            }
+            this.el.querySelector('.xpl-top-nav-item__inner')?.focus();
+        });
+    }
+    static isInternalRenderedHostChild(el) {
+        return (el.classList.contains('xpl-top-nav-item__inner') ||
+            el.classList.contains('xpl-top-nav-item__dropdown'));
+    }
+    hasNonDropdownLightDomChild() {
+        return Array.from(this.el.childNodes).some((node) => {
+            if (node.nodeType === Node.TEXT_NODE) {
+                return Boolean(node.textContent?.trim());
+            }
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                const child = node;
+                if (TopNavItem.isInternalRenderedHostChild(child)) {
+                    return false;
+                }
+                const slotName = child.getAttribute('slot');
+                return slotName == null || slotName === '';
+            }
+            return false;
+        });
+    }
+    getInnerAriaLabel() {
+        if (this.label?.trim())
+            return undefined;
+        if (this.hasNonDropdownLightDomChild())
+            return undefined;
+        const custom = this.itemAriaLabel?.trim();
+        if (custom)
+            return custom;
+        if (this.icon?.trim() || this.isLeadingIconSlotPresent)
+            return 'Navigation item';
+        return undefined;
+    }
+    computeHostListitemRole() {
+        const { el } = this;
+        if (el.classList.contains('xpl-top-nav__brand'))
+            return false;
+        if (el.getAttribute('slot') === 'right-aside-mobile')
+            return false;
+        const parent = el.parentElement;
+        if (parent?.getAttribute('role') === 'list')
+            return true;
+        if (parent != null && parent.tagName.toLowerCase() === 'xpl-nav-header-menu') {
+            return true;
+        }
+        if (parent != null && parent.tagName.toLowerCase() === 'xpl-top-nav-menu') {
+            return true;
+        }
+        if (el.getAttribute('slot') === 'left-aside' &&
+            parent?.tagName.toLowerCase() === 'xpl-top-nav' &&
+            parent.querySelector('.xpl-top-nav__left-primary[role="list"]') != null) {
+            return true;
+        }
+        return false;
+    }
+    syncHostListitemRole() {
+        const next = this.computeHostListitemRole();
+        if (this.hostListitemRole !== next)
+            this.hostListitemRole = next;
+    }
+    renderLabelContent() {
+        if (!this.label) {
+            return index.h("slot", null);
+        }
+        const description = this.description?.trim();
+        if (!description) {
+            return (index.h("span", { class: "xpl-top-nav-item__label", title: this.label }, this.label));
+        }
+        return (index.h("span", { class: "xpl-top-nav-item__label-group" }, index.h("span", { class: "xpl-top-nav-item__label", title: this.label }, this.label), index.h("span", { class: "xpl-top-nav-item__description" }, description)));
+    }
+    renderLeading() {
+        if (this.isLeadingIconSlotPresent) {
+            return (index.h("span", { class: "xpl-top-nav-item__leading" }, index.h("slot", { name: "leading-icon" })));
+        }
+        if (this.icon) {
+            return (index.h("span", { class: "xpl-top-nav-item__leading" }, index.h("xpl-icon", { size: 16, icon: this.icon })));
+        }
+        return null;
+    }
+    renderTrailing() {
+        if (this.isTrailingIconSlotPresent) {
+            return (index.h("span", { class: "xpl-top-nav-item__trailing" }, index.h("slot", { name: "trailing-icon" })));
+        }
+        if (this.hasDropdown) {
+            return (index.h("span", { class: "xpl-top-nav-item__trailing" }, index.h("xpl-icon", { icon: this.isMobileViewport ? 'chevron-right' : 'chevron-down' })));
+        }
+        return null;
+    }
+    renderInner() {
+        const tabIndex = 0;
+        const ariaCurrent = this.selected ? 'page' : undefined;
+        const ariaExpanded = this.hasDropdown ? (this.open ? 'true' : 'false') : undefined;
+        const ariaLabel = this.getInnerAriaLabel();
+        const shared = {
+            class: 'xpl-top-nav-item__inner',
+            tabIndex,
+            'aria-current': ariaCurrent,
+            'aria-expanded': ariaExpanded,
+            'aria-haspopup': this.hasDropdown ? 'true' : undefined,
+            'aria-controls': this.hasDropdown ? this.dropdownPanelId : undefined,
+            ...(ariaLabel ? { 'aria-label': ariaLabel } : {}),
+            onClick: this.handleClick,
+            onKeyDown: this.handleKeyDown,
+        };
+        const useAnchor = this.href != null && !this.hasDropdown;
+        if (useAnchor) {
+            return (index.h("a", { ...shared, href: this.href }, this.renderLeading(), this.renderLabelContent(), this.renderTrailing()));
+        }
+        return (index.h("button", { ...shared, type: "button" }, this.renderLeading(), this.renderLabelContent(), this.renderTrailing()));
+    }
+    render() {
+        return (index.h(index.Host, { key: 'f895d73fc0f4c07150e9cd1c34d7b78a338a2032', class: {
+                'xpl-top-nav-item': true,
+                'xpl-top-nav-item--active': this.active,
+                'xpl-top-nav-item--dropdown-open': this.hasDropdown && this.open,
+                'xpl-top-nav-item--has-active-descendant': this.hasActiveDescendant,
+                'xpl-top-nav-item--has-dropdown': this.hasDropdown,
+                'xpl-top-nav-item--selected': this.selected,
+                dark: true,
+            }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, ...(this.hostListitemRole ? { role: 'listitem' } : {}) }, this.renderInner(), this.hasDropdown && (index.h("div", { key: '3ec121421a45b3e5ef00f3fe76be80c910759f02', id: this.dropdownPanelId, class: "xpl-top-nav-item__dropdown" }, index.h("slot", { key: '715393a7ba3474c1afc9e0aa29276335537021e5', name: "dropdown" })))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "hasDropdown": [{
+                "onHasDropdownChanged": 0
+            }],
+        "open": [{
+                "onOpenChanged": 0
+            }]
+    }; }
+};
+
+exports.xpl_top_nav_item = TopNavItem;

package/dist/cjs/xpl-top-nav-menu.cjs.entry.js

@@ -1,9 +1,8 @@
 'use strict';
 
-var index = require('./index-BaXVr8ux.js');
-var lifecycle = require('./lifecycle-Bf3QwiVa.js');
-
-const TOP_NAV_MOBILE_MQ = '(max-width: 767px)';
+var index = require('./index-3cBvw409.js');
+var lifecycle = require('./lifecycle-DeSsFfQZ.js');
+var topNavConstants = require('./top-nav-constants-DckvgAo7.js');
 
 const TopNavMenu = class {
     constructor(hostRef) {
@@ -11,31 +10,28 @@ const TopNavMenu = class {
         this.timers = new lifecycle.TimerManager();
         this.isMobileCascade = false;
         this.onViewportChange = () => {
-            var _a, _b;
-            this.isMobileCascade = (_b = (_a = this.mobileMq) === null || _a === void 0 ? void 0 : _a.matches) !== null && _b !== void 0 ? _b : false;
+            this.isMobileCascade = this.mobileMq?.matches ?? false;
         };
         this.handleBackClick = async () => {
-            var _a;
             const parent = this.el.closest('xpl-top-nav-item');
             if (!parent) {
                 return;
             }
             await parent.closeMenu();
-            (_a = parent.querySelector('.xpl-top-nav-item__inner')) === null || _a === void 0 ? void 0 : _a.focus();
+            parent.querySelector('.xpl-top-nav-item__inner')?.focus();
         };
     }
     connectedCallback() {
-        if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
-            this.mobileMq = window.matchMedia(TOP_NAV_MOBILE_MQ);
+        if (lifecycle.isBrowser() && typeof window.matchMedia === 'function') {
+            this.mobileMq = window.matchMedia(topNavConstants.TOP_NAV_MOBILE_MQ);
             this.mobileMq.addEventListener('change', this.onViewportChange);
             this.isMobileCascade = this.mobileMq.matches;
         }
         this.connectParentOpenObserver();
     }
     disconnectedCallback() {
-        var _a;
         this.timers.dispose();
-        (_a = this.mobileMq) === null || _a === void 0 ? void 0 : _a.removeEventListener('change', this.onViewportChange);
+        this.mobileMq?.removeEventListener('change', this.onViewportChange);
         this.mobileMq = undefined;
         this.disconnectParentOpenObserver();
     }
@@ -54,8 +50,7 @@ const TopNavMenu = class {
         });
     }
     disconnectParentOpenObserver() {
-        var _a;
-        (_a = this.parentOpenObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.parentOpenObserver?.disconnect();
         this.parentOpenObserver = undefined;
     }
     scheduleParentOpenCheck() {
@@ -67,29 +62,28 @@ const TopNavMenu = class {
         });
     }
     focusBackRowIfJustOpenedOnMobile() {
-        var _a;
         if (!this.isMobileCascade) {
             return;
         }
         const parent = this.el.parentElement;
-        if (!(parent === null || parent === void 0 ? void 0 : parent.classList.contains('xpl-top-nav-item--dropdown-open'))) {
+        if (!parent?.classList.contains('xpl-top-nav-item--dropdown-open')) {
             return;
         }
-        (_a = this.el
-            .querySelector('.xpl-top-nav-menu__back .xpl-top-nav-item__inner')) === null || _a === void 0 ? void 0 : _a.focus();
+        this.el
+            .querySelector('.xpl-top-nav-menu__back .xpl-top-nav-item__inner')
+            ?.focus();
     }
     renderBackRow() {
-        var _a;
-        if (!this.isMobileCascade || !((_a = this.label) === null || _a === void 0 ? void 0 : _a.trim())) {
+        if (!this.isMobileCascade || !this.label?.trim()) {
             return null;
         }
         return (index.h("xpl-top-nav-item", { class: "xpl-top-nav-menu__back", label: this.label, onNavItemClick: this.handleBackClick }, index.h("xpl-icon", { slot: "leading-icon", icon: "chevron-left", size: 24 })));
     }
     render() {
-        return (index.h(index.Host, { key: '314c42b389883edceb333473d9bb97776e1f18de', class: {
+        return (index.h(index.Host, { key: '4b28448ecb93e59d9bdc731a8b56dd42ebda2c66', class: {
                 'xpl-top-nav-menu': true,
                 dark: true,
-            }, role: "list", "aria-label": this.label || undefined }, this.renderBackRow(), index.h("slot", { key: 'a6b4e2c916ccc9c0cc1d5e7e6d03b2ad6032f7ac' })));
+            }, role: "list", "aria-label": this.label || undefined }, this.renderBackRow(), index.h("slot", { key: 'aa51dc10509298e469ca41a99ae7108283ee8f89' })));
     }
     get el() { return index.getElement(this); }
 };