@xplortech/apollo-core 2.10.0 → 2.12.0

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

@@ -0,0 +1,433 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-ukZKsqqq.js';
+import { T as TimerManager, i as isBrowser } from './lifecycle-Dqb1pIRo.js';
+import { T as TOP_NAV_MOBILE_MQ } from './top-nav-constants-CWdQxaaX.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) {
+        registerInstance(this, hostRef);
+        this.navItemClick = createEvent(this, "navItemClick", 7);
+        this.openChange = createEvent(this, "openChange", 7);
+        this.dropdownPanelId = `xpl-top-nav-item-dropdown-${Math.random().toString(36).slice(2, 11)}`;
+        this.hoverOpened = false;
+        this.timers = new 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 (isBrowser() && typeof window.matchMedia === 'function') {
+            this.hoverOpenMq = window.matchMedia(TOP_NAV_ITEM_HOVER_OPEN_MQ);
+            this.mobileMq = window.matchMedia(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 (!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 h("slot", null);
+        }
+        const description = this.description?.trim();
+        if (!description) {
+            return (h("span", { class: "xpl-top-nav-item__label", title: this.label }, this.label));
+        }
+        return (h("span", { class: "xpl-top-nav-item__label-group" }, h("span", { class: "xpl-top-nav-item__label", title: this.label }, this.label), h("span", { class: "xpl-top-nav-item__description" }, description)));
+    }
+    renderLeading() {
+        if (this.isLeadingIconSlotPresent) {
+            return (h("span", { class: "xpl-top-nav-item__leading" }, h("slot", { name: "leading-icon" })));
+        }
+        if (this.icon) {
+            return (h("span", { class: "xpl-top-nav-item__leading" }, h("xpl-icon", { size: 16, icon: this.icon })));
+        }
+        return null;
+    }
+    renderTrailing() {
+        if (this.isTrailingIconSlotPresent) {
+            return (h("span", { class: "xpl-top-nav-item__trailing" }, h("slot", { name: "trailing-icon" })));
+        }
+        if (this.hasDropdown) {
+            return (h("span", { class: "xpl-top-nav-item__trailing" }, 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 (h("a", { ...shared, href: this.href }, this.renderLeading(), this.renderLabelContent(), this.renderTrailing()));
+        }
+        return (h("button", { ...shared, type: "button" }, this.renderLeading(), this.renderLabelContent(), this.renderTrailing()));
+    }
+    render() {
+        return (h(Host, { key: 'e1e7241e6b6f2d9d96c779b91b7fa1ba20e8e1f4', 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 && (h("div", { key: 'ec1ed04f166670f78c205ba351911672a147d5a7', id: this.dropdownPanelId, class: "xpl-top-nav-item__dropdown" }, h("slot", { key: '01d3db348a018c43f21b24acad80e7687f8bb0e1', name: "dropdown" })))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "hasDropdown": [{
+                "onHasDropdownChanged": 0
+            }],
+        "open": [{
+                "onOpenChanged": 0
+            }]
+    }; }
+};
+
+export { TopNavItem as xpl_top_nav_item };

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

@@ -0,0 +1,89 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-ukZKsqqq.js';
+import { T as TimerManager, i as isBrowser } from './lifecycle-Dqb1pIRo.js';
+import { T as TOP_NAV_MOBILE_MQ } from './top-nav-constants-CWdQxaaX.js';
+
+const TopNavMenu = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.timers = new TimerManager();
+        this.isMobileCascade = false;
+        this.onViewportChange = () => {
+            this.isMobileCascade = this.mobileMq?.matches ?? false;
+        };
+        this.handleBackClick = async () => {
+            const parent = this.el.closest('xpl-top-nav-item');
+            if (!parent) {
+                return;
+            }
+            await parent.closeMenu();
+            parent.querySelector('.xpl-top-nav-item__inner')?.focus();
+        };
+    }
+    connectedCallback() {
+        if (isBrowser() && typeof window.matchMedia === 'function') {
+            this.mobileMq = window.matchMedia(TOP_NAV_MOBILE_MQ);
+            this.mobileMq.addEventListener('change', this.onViewportChange);
+            this.isMobileCascade = this.mobileMq.matches;
+        }
+        this.connectParentOpenObserver();
+    }
+    disconnectedCallback() {
+        this.timers.dispose();
+        this.mobileMq?.removeEventListener('change', this.onViewportChange);
+        this.mobileMq = undefined;
+        this.disconnectParentOpenObserver();
+    }
+    connectParentOpenObserver() {
+        this.disconnectParentOpenObserver();
+        const parent = this.el.parentElement;
+        if (!parent || typeof MutationObserver === 'undefined') {
+            return;
+        }
+        this.parentOpenObserver = new MutationObserver(() => {
+            this.scheduleParentOpenCheck();
+        });
+        this.parentOpenObserver.observe(parent, {
+            attributes: true,
+            attributeFilter: ['class'],
+        });
+    }
+    disconnectParentOpenObserver() {
+        this.parentOpenObserver?.disconnect();
+        this.parentOpenObserver = undefined;
+    }
+    scheduleParentOpenCheck() {
+        this.timers.scheduleCoalesced('parentOpenCheck', () => {
+            if (!this.el.isConnected) {
+                return;
+            }
+            this.focusBackRowIfJustOpenedOnMobile();
+        });
+    }
+    focusBackRowIfJustOpenedOnMobile() {
+        if (!this.isMobileCascade) {
+            return;
+        }
+        const parent = this.el.parentElement;
+        if (!parent?.classList.contains('xpl-top-nav-item--dropdown-open')) {
+            return;
+        }
+        this.el
+            .querySelector('.xpl-top-nav-menu__back .xpl-top-nav-item__inner')
+            ?.focus();
+    }
+    renderBackRow() {
+        if (!this.isMobileCascade || !this.label?.trim()) {
+            return null;
+        }
+        return (h("xpl-top-nav-item", { class: "xpl-top-nav-menu__back", label: this.label, onNavItemClick: this.handleBackClick }, h("xpl-icon", { slot: "leading-icon", icon: "chevron-left", size: 24 })));
+    }
+    render() {
+        return (h(Host, { key: 'e71631c4d9d4b653247d13c7b182f722bf1e52cc', class: {
+                'xpl-top-nav-menu': true,
+                dark: true,
+            }, role: "list", "aria-label": this.label || undefined }, this.renderBackRow(), h("slot", { key: 'c6e38f4f78ab65dad030076aebf97c40dbce651b' })));
+    }
+    get el() { return getElement(this); }
+};
+
+export { TopNavMenu as xpl_top_nav_menu };