@xplortech/apollo-core 2.6.0 → 2.7.1

package/dist/collection/components/xpl-top-nav/xpl-nav-header-menu/xpl-nav-header-menu.js

@@ -0,0 +1,122 @@
+import { Host, h } from "@stencil/core";
+export class NavHeaderMenu {
+    constructor() {
+        this.rightAsideMobilePresent = false;
+    }
+    connectedCallback() {
+        this.syncRightAsideMobileSlotPresent();
+        this.connectRightAsideMobileSlotObserver();
+    }
+    disconnectedCallback() {
+        if (this.deferredRightAsideSlotWorkTimeoutId !== undefined) {
+            clearTimeout(this.deferredRightAsideSlotWorkTimeoutId);
+            this.deferredRightAsideSlotWorkTimeoutId = undefined;
+        }
+        this.disconnectRightAsideMobileSlotObserver();
+    }
+    componentWillLoad() {
+        this.syncRightAsideMobileSlotPresent();
+    }
+    componentWillRender() {
+        this.disconnectRightAsideMobileSlotObserver();
+    }
+    componentDidRender() {
+        this.scheduleDeferredRightAsideSlotWork();
+    }
+    scheduleDeferredRightAsideSlotWork() {
+        if (this.deferredRightAsideSlotWorkTimeoutId !== undefined) {
+            clearTimeout(this.deferredRightAsideSlotWorkTimeoutId);
+        }
+        this.deferredRightAsideSlotWorkTimeoutId = setTimeout(() => {
+            this.deferredRightAsideSlotWorkTimeoutId = undefined;
+            if (!this.el.isConnected) {
+                return;
+            }
+            this.syncRightAsideMobileSlotPresent();
+            this.connectRightAsideMobileSlotObserver();
+        }, 0);
+    }
+    connectRightAsideMobileSlotObserver() {
+        this.disconnectRightAsideMobileSlotObserver();
+        if (typeof MutationObserver === 'undefined') {
+            return;
+        }
+        this.rightAsideMobileSlotObserver = new MutationObserver(() => {
+            this.scheduleDeferredRightAsideSlotWork();
+        });
+        this.rightAsideMobileSlotObserver.observe(this.el, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['slot'],
+        });
+    }
+    disconnectRightAsideMobileSlotObserver() {
+        var _a;
+        (_a = this.rightAsideMobileSlotObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.rightAsideMobileSlotObserver = undefined;
+    }
+    syncRightAsideMobileSlotPresent() {
+        const has = this.el.querySelector('[slot="right-aside-mobile"]') != null;
+        if (has !== this.rightAsideMobilePresent) {
+            this.rightAsideMobilePresent = has;
+        }
+    }
+    render() {
+        const hasProfile = !!this.username || !!this.email;
+        return (h(Host, { key: '451149dc9d73f705492fc65bf4f014b8efa4ee8a', class: {
+                'xpl-nav-header-menu': true,
+                'xpl-nav-header-menu--has-right-aside-mobile': this.rightAsideMobilePresent,
+                dark: true,
+            } }, hasProfile && (h("div", { key: 'f42b560492c110644d52b10f708a3ed650833861', class: "xpl-nav-header-menu__profile" }, h("div", { key: '6d98f720af85cbf8164bea7500175d6bfbb9465b', class: "xpl-nav-header-menu__info" }, this.username && (h("div", { key: '9d52880dc41c11e71ac3cc107d8009eccb787bac', class: "xpl-nav-header-menu__username" }, this.username)), this.email && (h("div", { key: 'd1b71ac2c4f6aaf5efd7b1910b8848f97ab08bf0', class: "xpl-nav-header-menu__email" }, this.email))))), h("div", { key: 'e1b298c39ccbe0f68b8d60fa82714572f656ab1e', class: "xpl-nav-header-menu__right-aside-mobile" }, h("slot", { key: 'fbb8d26c38a4a50568e8836ac3af4409fe6c93c0', name: "right-aside-mobile" })), h("div", { key: 'cbe858338ec04cdd3b74285f95b0466432924be2', class: "xpl-nav-header-menu__slot", role: "list" }, h("slot", { key: 'b47ccc7f955a30d8b9d9b884fa3d920d45958f7c' }))));
+    }
+    static get is() { return "xpl-nav-header-menu"; }
+    static get properties() {
+        return {
+            "email": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Email address shown below the username."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "email"
+            },
+            "username": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Display name shown in the profile block."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "username"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "rightAsideMobilePresent": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/xpl-top-nav/xpl-top-nav-item/xpl-top-nav-item.js

@@ -0,0 +1,481 @@
+import { Host, h, } from "@stencil/core";
+export class TopNavItem {
+    constructor() {
+        this.hasDropdown = false;
+        this.hostListitemRole = false;
+        this.open = false;
+        this.active = false;
+        this.icon = '';
+        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.handleClick = (e) => {
+            if (this.hasDropdown) {
+                e.preventDefault();
+                e.stopPropagation();
+                this.broadcastCloseOtherDropdownHosts();
+                this.open = !this.open;
+                return;
+            }
+            this.navItemClick.emit(e);
+        };
+        this.handleKeyDown = (e) => {
+            const isLinkMode = this.href != null && !this.hasDropdown;
+            if (isLinkMode) {
+                if (e.key === 'Enter') {
+                    return;
+                }
+                if (e.key === ' ') {
+                    e.preventDefault();
+                    const anchor = this.el.querySelector('.xpl-top-nav-item__inner');
+                    anchor === null || anchor === void 0 ? void 0 : anchor.click();
+                    return;
+                }
+            }
+            if (e.key !== 'Enter' && e.key !== ' ')
+                return;
+            e.preventDefault();
+            this.handleClick(this.syntheticActivationClickFromKeyboard(e));
+        };
+    }
+    onHasDropdownChanged() {
+        if (!this.hasDropdown) {
+            this.open = false;
+        }
+        this.syncDropdownDocListeners();
+    }
+    connectedCallback() {
+        this.syncHostListitemRole();
+        this.syncHasDropdownFromDom();
+        this.syncDropdownDocListeners();
+        this.connectDropdownSlotObserver();
+    }
+    disconnectedCallback() {
+        if (this.deferredHasDropdownObserverSyncTimeoutId !== undefined) {
+            clearTimeout(this.deferredHasDropdownObserverSyncTimeoutId);
+            this.deferredHasDropdownObserverSyncTimeoutId = undefined;
+        }
+        if (this.deferredPostRenderTopNavItemTimeoutId !== undefined) {
+            clearTimeout(this.deferredPostRenderTopNavItemTimeoutId);
+            this.deferredPostRenderTopNavItemTimeoutId = 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();
+        this.syncDropdownDocListeners();
+    }
+    componentWillRender() {
+        this.disconnectDropdownSlotObserver();
+        this.disconnectListitemContextObservers();
+    }
+    componentDidRender() {
+        this.schedulePostRenderTopNavItemWork();
+    }
+    handleCloseNavDropdownRequest() {
+        if (this.hasDropdown && this.open) {
+            this.open = false;
+        }
+    }
+    scheduleHasDropdownSyncFromObserver() {
+        if (this.deferredHasDropdownObserverSyncTimeoutId !== undefined) {
+            clearTimeout(this.deferredHasDropdownObserverSyncTimeoutId);
+        }
+        this.deferredHasDropdownObserverSyncTimeoutId = setTimeout(() => {
+            this.deferredHasDropdownObserverSyncTimeoutId = undefined;
+            if (!this.el.isConnected) {
+                return;
+            }
+            this.syncHasDropdownFromDom();
+        }, 0);
+    }
+    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() {
+        var _a;
+        (_a = this.dropdownSlotObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.dropdownSlotObserver = undefined;
+    }
+    disconnectListitemContextObservers() {
+        var _a, _b;
+        (_a = this.parentListitemContextObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.parentListitemContextObserver = undefined;
+        (_b = this.selfListitemContextObserver) === null || _b === void 0 ? void 0 : _b.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 !== null && leftPrimaryListHost !== void 0 ? leftPrimaryListHost : parent;
+            this.parentListitemContextObserver.observe(observeTarget, {
+                attributes: true,
+                attributeFilter: ['role'],
+                subtree: false,
+            });
+        }
+    }
+    schedulePostRenderTopNavItemWork() {
+        if (this.deferredPostRenderTopNavItemTimeoutId !== undefined) {
+            clearTimeout(this.deferredPostRenderTopNavItemTimeoutId);
+        }
+        this.deferredPostRenderTopNavItemTimeoutId = setTimeout(() => {
+            this.deferredPostRenderTopNavItemTimeoutId = undefined;
+            if (!this.el.isConnected) {
+                return;
+            }
+            this.syncHostListitemRole();
+            this.connectListitemContextObservers();
+            this.connectDropdownSlotObserver();
+        }, 0);
+    }
+    syncDropdownDocListeners() {
+        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);
+    }
+    syncHasDropdownFromDom() {
+        this.hasDropdown = !!this.el.querySelector('[slot="dropdown"]');
+    }
+    getNavDropdownBroadcastRoot() {
+        var _a, _b;
+        return ((_b = (_a = this.el.closest('xpl-top-nav')) !== null && _a !== void 0 ? _a : this.el.closest('xpl-nav-header-menu')) !== null && _b !== void 0 ? _b : this.el.ownerDocument);
+    }
+    broadcastCloseOtherDropdownHosts() {
+        const root = this.getNavDropdownBroadcastRoot();
+        root.querySelectorAll('xpl-top-nav-item').forEach((host) => {
+            if (host === this.el) {
+                return;
+            }
+            host.dispatchEvent(new CustomEvent('_xplCloseNavDropdown', { bubbles: false }));
+        });
+    }
+    syntheticActivationClickFromKeyboard(e) {
+        var _a;
+        const inner = this.el.querySelector('.xpl-top-nav-item__inner');
+        const rect = inner === null || inner === void 0 ? void 0 : inner.getBoundingClientRect();
+        const cx = rect ? rect.left + rect.width / 2 : 0;
+        const cy = rect ? rect.top + rect.height / 2 : 0;
+        return new MouseEvent('click', {
+            bubbles: true,
+            cancelable: true,
+            button: 0,
+            clientX: cx,
+            clientY: cy,
+            view: (_a = e.view) !== null && _a !== void 0 ? _a : undefined,
+        });
+    }
+    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) => {
+            var _a;
+            if (node.nodeType === Node.TEXT_NODE) {
+                return Boolean((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim());
+            }
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                const child = node;
+                if (TopNavItem.isInternalRenderedHostChild(child)) {
+                    return false;
+                }
+                return child.getAttribute('slot') !== 'dropdown';
+            }
+            return false;
+        });
+    }
+    getInnerAriaLabel() {
+        var _a, _b, _c;
+        if ((_a = this.label) === null || _a === void 0 ? void 0 : _a.trim()) {
+            return undefined;
+        }
+        if (this.hasNonDropdownLightDomChild()) {
+            return undefined;
+        }
+        const custom = (_b = this.itemAriaLabel) === null || _b === void 0 ? void 0 : _b.trim();
+        if (custom) {
+            return custom;
+        }
+        if ((_c = this.icon) === null || _c === void 0 ? void 0 : _c.trim()) {
+            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 === null || parent === void 0 ? void 0 : parent.getAttribute('role')) === 'list') {
+            return true;
+        }
+        if (parent != null && parent.tagName.toLowerCase() === 'xpl-nav-header-menu') {
+            return true;
+        }
+        if (el.getAttribute('slot') === 'left-aside' &&
+            (parent === null || parent === void 0 ? void 0 : 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;
+        }
+    }
+    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 = Object.assign(Object.assign({ class: 'xpl-top-nav-item__inner', tabIndex, 'aria-current': ariaCurrent, 'aria-expanded': ariaExpanded }, (ariaLabel ? { 'aria-label': ariaLabel } : {})), { onClick: this.handleClick, onKeyDown: this.handleKeyDown });
+        const useAnchor = this.href != null && !this.hasDropdown;
+        if (useAnchor) {
+            return (h("a", Object.assign({}, shared, { href: this.href }), this.icon && h("xpl-icon", { size: 16, icon: this.icon }), this.label ? (h("span", { class: "xpl-top-nav-item__label", title: this.label }, this.label)) : (h("slot", null))));
+        }
+        return (h("div", Object.assign({}, shared, { role: "button" }), this.icon && h("xpl-icon", { size: 16, icon: this.icon }), this.label ? (h("span", { class: "xpl-top-nav-item__label", title: this.label }, this.label)) : (h("slot", null)), this.hasDropdown && h("xpl-icon", { icon: "chevron-down" })));
+    }
+    render() {
+        return (h(Host, Object.assign({ key: '4758b54726318591f140bcfea8d4db22c70c96ff', class: {
+                'xpl-top-nav-item': true,
+                'xpl-top-nav-item--active': this.active,
+                'xpl-top-nav-item--dropdown-open': this.open,
+                'xpl-top-nav-item--has-dropdown': this.hasDropdown,
+                'xpl-top-nav-item--selected': this.selected,
+                dark: true,
+            } }, (this.hostListitemRole ? { role: 'listitem' } : {})), this.renderInner(), this.hasDropdown && (h("div", { key: '65f53889e4815fb974d7abe12d13dd8be19c1943', class: "xpl-top-nav-item__dropdown" }, h("slot", { key: '2f4f164deaec561be73a13e2303cc13e037699bb', name: "dropdown" })))));
+    }
+    static get is() { return "xpl-top-nav-item"; }
+    static get properties() {
+        return {
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, adds **`xpl-top-nav-item--active`** for persistent accent styling (e.g. link color on the bar, or\nchrome inside **`xpl-nav-header-menu`**). Separate from **`selected`**, which sets **`aria-current=\"page\"`** and\n**`--selected`**. Use both when the design needs \u201Ccurrent page\u201D semantics plus the active visual treatment."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "active",
+                "defaultValue": "false"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If set without **`slot=\"dropdown\"`**, the inner control renders as a native **`<a href>`** (link mode)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon name from **`@xplortech/apollo-icons`** (shown before the label when **`label`** is set)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "''"
+            },
+            "itemAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the inner control when there is no **`label`** and no default-slot text (e.g. icon-only).\nIf omitted in that case, **`aria-label`** defaults to **`Navigation item`**. Ignored when **`label`** or default-slot\ncontent supplies a visible name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "item-aria-label"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text label. If omitted, use the default slot for custom trigger content. Long labels use **`text-ellipsis`**\non **`.xpl-top-nav-item__label`** (see `top-nav.css`); **`title`** is set to the full string for hover tooltips\nwhen the visual line clips."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, sets **`aria-current=\"page\"`** and selected styling."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasDropdown": {},
+            "hostListitemRole": {},
+            "open": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "navItemClick",
+                "name": "navItemClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted for plain items (button or link) on pointer **click**, or when keyboard activation produces a **`click`**\n(native for **Enter** on **`<a href>`**, or programmatic **`.click()`** for **Space** on links). **`detail`** is the\n**`MouseEvent`** from that activation (synthetic only for **`<div role=\"button\">`** via **Enter** / **Space**).\nNot emitted when **`slot=\"dropdown\"`** is used."
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "hasDropdown",
+                "methodName": "onHasDropdownChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "_xplCloseNavDropdown",
+                "method": "handleCloseNavDropdownRequest",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}