@xplortech/apollo-core 2.11.0 → 3.0.0

package/dist/collection/components/xpl-side-nav/xpl-side-nav-section/xpl-side-nav-section.js

@@ -0,0 +1,186 @@
+import { Host, h } from "@stencil/core";
+import { ensureSideNavSectionChildrenId, getHostSlottedElements, hasHostSlottedContent, } from "../side-nav-slot-utils";
+export class SideNavSection {
+    constructor() {
+        this.hasBadgeSlot = false;
+        this.hasNamedBadgeSlot = false;
+        this.collapsible = true;
+        this.expanded = false;
+        this.handleHeaderClick = () => {
+            if (!this.collapsible)
+                return;
+            this.expanded = !this.expanded;
+            this.expandedChange.emit(this.expanded);
+        };
+    }
+    connectedCallback() {
+        this.syncBadgeSlot();
+        this.connectBadgeSlotObserver();
+    }
+    disconnectedCallback() {
+        if (this.badgeSlotSyncTimeoutId !== undefined) {
+            clearTimeout(this.badgeSlotSyncTimeoutId);
+            this.badgeSlotSyncTimeoutId = undefined;
+        }
+        this.disconnectBadgeSlotObserver();
+    }
+    componentWillLoad() {
+        this.childrenId = ensureSideNavSectionChildrenId(this.el, this.childrenId);
+        this.syncBadgeSlot();
+    }
+    componentWillRender() {
+        this.disconnectBadgeSlotObserver();
+    }
+    componentDidRender() {
+        this.scheduleBadgeSlotSync();
+    }
+    connectBadgeSlotObserver() {
+        this.disconnectBadgeSlotObserver();
+        if (typeof MutationObserver === 'undefined') {
+            return;
+        }
+        this.badgeSlotObserver = new MutationObserver(() => {
+            this.scheduleBadgeSlotSync();
+        });
+        this.badgeSlotObserver.observe(this.el, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['slot'],
+        });
+    }
+    disconnectBadgeSlotObserver() {
+        this.badgeSlotObserver?.disconnect();
+        this.badgeSlotObserver = undefined;
+    }
+    scheduleBadgeSlotSync() {
+        if (this.badgeSlotSyncTimeoutId !== undefined) {
+            clearTimeout(this.badgeSlotSyncTimeoutId);
+        }
+        this.badgeSlotSyncTimeoutId = setTimeout(() => {
+            this.badgeSlotSyncTimeoutId = undefined;
+            if (!this.el.isConnected) {
+                return;
+            }
+            this.syncBadgeSlot();
+            this.connectBadgeSlotObserver();
+        }, 0);
+    }
+    syncBadgeSlot() {
+        const badges = getHostSlottedElements(this.el, 'badge', 'xpl-side-nav-section');
+        const hasBadgeSlot = hasHostSlottedContent(this.el, 'badge', 'xpl-side-nav-section');
+        const hasNamedBadgeSlot = badges.some((badge) => badge.textContent?.trim() || badge.getAttribute('aria-label')?.trim());
+        if (hasBadgeSlot !== this.hasBadgeSlot) {
+            this.hasBadgeSlot = hasBadgeSlot;
+        }
+        if (hasNamedBadgeSlot !== this.hasNamedBadgeSlot) {
+            this.hasNamedBadgeSlot = hasNamedBadgeSlot;
+        }
+    }
+    render() {
+        const showChildren = !this.collapsible || this.expanded;
+        const hasHeading = !!this.heading?.trim();
+        const childrenId = this.childrenId ?? ensureSideNavSectionChildrenId(this.el, this.childrenId);
+        const titleRow = [
+            h("span", { key: 'c3a19938fa87b21552b5fdff800baf2ee97c186c', class: "xpl-side-nav-section__title" }, this.heading ?? ''),
+            h("span", { key: '9303238b226f336cbf0527ef91c2c5d8bce7771c', class: "xpl-side-nav-section__badge", hidden: !this.hasBadgeSlot }, h("slot", { key: '40921f618390e462b0ac69adc0206acd82b884ca', name: "badge" })),
+            this.collapsible ? (h("span", { class: "xpl-side-nav-section__chevron", "aria-hidden": "true" }, h("xpl-icon", { icon: this.expanded ? 'chevron-down' : 'chevron-right', size: 16 }))) : null,
+        ];
+        return (h(Host, { key: 'fae9c5e2d179a174aae5114a21a442fa787269ad', class: {
+                'xpl-side-nav-section': true,
+                'xpl-side-nav-section--static': !this.collapsible,
+            } }, this.collapsible ? (h("button", { type: "button", class: "xpl-side-nav-section__header", "aria-expanded": this.expanded ? 'true' : 'false', "aria-controls": childrenId, "aria-label": hasHeading || this.hasNamedBadgeSlot ? undefined : 'Toggle section', onClick: this.handleHeaderClick }, titleRow)) : (h("div", { class: "xpl-side-nav-section__header" }, titleRow)), h("div", { key: 'c33a5478f2c226b915fddf006802312eb7de29e9', id: childrenId, class: {
+                'xpl-side-nav-section__children': true,
+                expanded: showChildren,
+            }, inert: !showChildren ? true : undefined }, h("div", { key: 'ed7de4040c1e5677ad3b74eb65fc4f6357bab3b6', class: "xpl-side-nav-section__children-inner" }, h("slot", { key: '3f8434e92bb7fcdd7c8a825481a12ef24ba1da28' })))));
+    }
+    static get is() { return "xpl-side-nav-section"; }
+    static get properties() {
+        return {
+            "collapsible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the section can be collapsed/expanded. When `false`, renders a static\ntitle (no chevron, not a button) and children are always shown."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "collapsible",
+                "defaultValue": "true"
+            },
+            "expanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the section is currently expanded. Only meaningful when `collapsible` is true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "expanded",
+                "defaultValue": "false"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The section title text. Optional, but when `collapsible` is true and both\n`heading` and `slot=\"badge\"` lack an accessible name, the toggle `<button>`\nfalls back to `aria-label=\"Toggle section\"` so it always has an accessible name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasBadgeSlot": {},
+            "hasNamedBadgeSlot": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "expandedChange",
+                "name": "expandedChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the expanded state changes (collapsible sections only). Detail is the new expanded value."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/xpl-side-nav/xpl-side-nav.js

@@ -1,8 +1,10 @@
-import { Host, h, } from "@stencil/core";
+import { Host, h, forceUpdate, } from "@stencil/core";
+import { isBrowser } from "../../utils/lifecycle";
 import { SIDE_NAV_CLOSE_ANIMATION_MS, SIDE_NAV_MOBILE_MQ } from "./side-nav-constants";
 export class SideNav {
     constructor() {
         this.drawerClosing = false;
+        this.hasHeaderSlot = false;
         this.open = false;
         this.onViewportChange = () => {
             this.clearCloseTransition();
@@ -15,9 +17,8 @@ export class SideNav {
                 clearTimeout(this.toggleFocusTimeoutId);
             }
             this.toggleFocusTimeoutId = setTimeout(() => {
-                var _a;
                 this.toggleFocusTimeoutId = undefined;
-                (_a = this.el.querySelector('.xpl-side-nav__toggle button')) === null || _a === void 0 ? void 0 : _a.focus();
+                this.el.querySelector('.xpl-side-nav__toggle button')?.focus();
             }, 0);
         };
         this.focusDrawerOnOpen = () => {
@@ -27,14 +28,13 @@ export class SideNav {
                 clearTimeout(this.drawerFocusTimeoutId);
             }
             this.drawerFocusTimeoutId = setTimeout(() => {
-                var _a;
                 this.drawerFocusTimeoutId = undefined;
                 const wrapper = this.el.querySelector('.xpl-side-nav__wrapper');
                 const first = wrapper
                     ? this.getFocusableElements().find((el) => wrapper.contains(el))
                     : undefined;
                 const fallback = this.el.querySelector('.xpl-side-nav__toggle button');
-                (_a = (first !== null && first !== void 0 ? first : fallback)) === null || _a === void 0 ? void 0 : _a.focus();
+                (first ?? fallback)?.focus();
             }, 0);
         };
         this.onBackdropClick = () => this.setOpenState(false);
@@ -87,11 +87,22 @@ export class SideNav {
             this.focusDrawerOnOpen();
     }
     connectedCallback() {
-        if (typeof window !== 'undefined') {
+        if (isBrowser() && typeof window.matchMedia === 'function') {
             this.mobileMq = window.matchMedia(SIDE_NAV_MOBILE_MQ);
             this.mobileMq.addEventListener('change', this.onViewportChange);
         }
         this.syncDocKeyDownListener();
+        this.syncHeaderSlot();
+        this.connectHeaderSlotObserver();
+    }
+    componentWillLoad() {
+        this.syncHeaderSlot();
+    }
+    componentWillRender() {
+        this.disconnectHeaderSlotObserver();
+    }
+    componentDidRender() {
+        this.scheduleHeaderSlotSync();
     }
     componentDidLoad() {
         if (this.open) {
@@ -100,7 +111,6 @@ export class SideNav {
         }
     }
     disconnectedCallback() {
-        var _a;
         if (this.toggleFocusTimeoutId !== undefined) {
             clearTimeout(this.toggleFocusTimeoutId);
             this.toggleFocusTimeoutId = undefined;
@@ -110,9 +120,14 @@ export class SideNav {
             this.drawerFocusTimeoutId = undefined;
         }
         this.clearCloseTransition();
-        (_a = this.mobileMq) === null || _a === void 0 ? void 0 : _a.removeEventListener('change', this.onViewportChange);
+        this.mobileMq?.removeEventListener('change', this.onViewportChange);
         this.mobileMq = undefined;
         this.removeDocKeyDownListener();
+        if (this.headerSlotSyncTimeoutId !== undefined) {
+            clearTimeout(this.headerSlotSyncTimeoutId);
+            this.headerSlotSyncTimeoutId = undefined;
+        }
+        this.disconnectHeaderSlotObserver();
     }
     async toggle() {
         this.setOpenState(!this.open);
@@ -130,8 +145,7 @@ export class SideNav {
         }
     }
     isBelowMdBreakpoint() {
-        var _a, _b;
-        return (_b = (_a = this.mobileMq) === null || _a === void 0 ? void 0 : _a.matches) !== null && _b !== void 0 ? _b : false;
+        return this.mobileMq?.matches ?? false;
     }
     isMobileDrawerActive() {
         return (this.open || this.drawerClosing) && this.isBelowMdBreakpoint();
@@ -153,7 +167,7 @@ export class SideNav {
         const hosts = this.el.querySelectorAll('xpl-popover');
         for (let i = 0; i < hosts.length; i += 1) {
             const inner = hosts[i].querySelector('.xpl-popover');
-            if (inner === null || inner === void 0 ? void 0 : inner.classList.contains('xpl-popover--is-open')) {
+            if (inner?.classList.contains('xpl-popover--is-open')) {
                 return true;
             }
         }
@@ -193,11 +207,59 @@ export class SideNav {
             first.focus();
         }
     }
+    connectHeaderSlotObserver() {
+        this.disconnectHeaderSlotObserver();
+        if (typeof MutationObserver === 'undefined') {
+            return;
+        }
+        this.headerSlotObserver = new MutationObserver(() => {
+            this.scheduleHeaderSlotSync();
+        });
+        this.headerSlotObserver.observe(this.el, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['slot'],
+        });
+    }
+    disconnectHeaderSlotObserver() {
+        this.headerSlotObserver?.disconnect();
+        this.headerSlotObserver = undefined;
+    }
+    scheduleHeaderSlotSync() {
+        if (this.headerSlotSyncTimeoutId !== undefined) {
+            clearTimeout(this.headerSlotSyncTimeoutId);
+        }
+        this.headerSlotSyncTimeoutId = setTimeout(() => {
+            this.headerSlotSyncTimeoutId = undefined;
+            if (!this.el.isConnected) {
+                return;
+            }
+            this.syncHeaderSlot();
+            this.connectHeaderSlotObserver();
+        }, 0);
+    }
+    syncHeaderSlot() {
+        const projectsToHeader = (node) => {
+            if (node.closest('xpl-side-nav') !== this.el) {
+                return false;
+            }
+            return node.parentElement === this.el || node.closest('.xpl-side-nav__header') !== null;
+        };
+        const headerNodes = Array.from(this.el.querySelectorAll('[slot="nav-header"]')).filter(projectsToHeader);
+        const next = headerNodes.length > 0;
+        if (next !== this.hasHeaderSlot) {
+            this.hasHeaderSlot = next;
+            return;
+        }
+        if (next && headerNodes.some((node) => node.parentElement === this.el))
+            forceUpdate(this);
+    }
     render() {
-        return (h(Host, { key: 'a007b689281cf2d2f5c24d7517a478c165c992bf', class: {
+        return (h(Host, { key: '9d8ca908a77dd47e5789708ebb87e0e76ac5a22e', class: {
                 'xpl-side-nav': true,
                 'xpl-side-nav--open': this.open,
-            } }, h("xpl-button", { key: '4828b88c0e14e4202535e19e406def9558533892', class: "xpl-side-nav__toggle", variant: "tertiary", iconOnly: true, icon: this.open ? 'sidebar-left-hide' : 'sidebar-left-show', "aria-expanded": this.open ? 'true' : 'false', "aria-label": this.open ? 'Close navigation menu' : 'Open navigation menu', onClick: this.onToggleClick }), h("div", { key: '193bf28ee1b495f3352e46d255e0488d38f59a03', class: "xpl-side-nav__wrapper" }, h("nav", { key: '36461f0c57dbe069381aed7d8cad57a484bdc5c6', class: "xpl-side-nav__content", "aria-label": this.label }, h("div", { key: '7e88ee25d63a9489894e54030ec5e943be803bde', class: "xpl-side-nav__section" }, h("slot", { key: '2fb0b53cd888824afcd73d1c08f35939e7729b88', name: "section" })), h("div", { key: 'ee3beba191a7633a98312f225013db4f05891388', class: "xpl-side-nav__footer" }, h("slot", { key: 'e876c45f33e5fd200cbe4a6c5ef6fcd85c43eccd', name: "nav-footer" })))), h("xpl-backdrop", { key: '74bef30e9ffb2c3d640e2cab2b2fe328b7f37c52', class: "xpl-side-nav__backdrop", onClick: this.onBackdropClick })));
+            } }, h("xpl-button", { key: 'eab3df496e7ec249b78f76e9250361b1dccc3cd6', class: "xpl-side-nav__toggle", variant: "tertiary", iconOnly: true, icon: this.open ? 'sidebar-left-hide' : 'sidebar-left-show', "aria-expanded": this.open ? 'true' : 'false', "aria-label": this.open ? 'Close navigation menu' : 'Open navigation menu', onClick: this.onToggleClick }), h("div", { key: '4f46792c09ff5c98ae87f27bfb3050c74b847c3f', class: "xpl-side-nav__wrapper" }, h("nav", { key: '55a34c0ba7498f7ad531b519d5d9e6f6a225cfc9', class: "xpl-side-nav__content", "aria-label": this.label }, h("div", { key: '8ff330aef09d3ae1624f8752efbff3a2720e55c5', class: "xpl-side-nav__scroll-area" }, this.hasHeaderSlot && (h("div", { key: '19c0235f1b45454cbe8fd9403351cfabebc5f539', class: "xpl-side-nav__header" }, h("slot", { key: '77a3a18b401714a746c8d8f0d2457e9a949068ca', name: "nav-header" }))), h("div", { key: '8a7c00b508d238f0043dc5dfc6c141d7255967bd', class: "xpl-side-nav__section" }, h("slot", { key: 'b4b11bf6937840704cb9d40483e6b19014bd5236', name: "section" }))), h("div", { key: '766bcd4652c5c680975a3c61c4b2fe4759351a4e', class: "xpl-side-nav__footer" }, h("slot", { key: '04acabfdb7f27e8ed6b6569001493f985f344a1e', name: "nav-footer" })))), h("xpl-backdrop", { key: '9e0c074fbb705e7b665672c79ed85e62e28d2e95', class: "xpl-side-nav__backdrop", onClick: this.onBackdropClick })));
     }
     static get is() { return "xpl-side-nav"; }
     static get properties() {
@@ -243,6 +305,11 @@ export class SideNav {
             }
         };
     }
+    static get states() {
+        return {
+            "hasHeaderSlot": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "openChange",

package/dist/collection/components/xpl-skeleton/xpl-skeleton.js

@@ -5,12 +5,12 @@ export class Skeleton {
         this.size = 'custom';
     }
     render() {
-        return (h(Host, { key: '6d2a1a9164bb1568663b944f3f4ea66517256528', class: {
+        return (h(Host, { key: '4c8f4f0e0742c67f965d04aed382259cd120d922', class: {
                 'xpl-skeleton': true,
                 [`xpl-skeleton--shape-${this.shape}`]: true,
                 [`xpl-skeleton--size-${this.size}`]: true,
-                [this.classNames]: !!this.classNames,
-                'xpl-skeleton--full-width': this.fullWidth,
+                [this.classNames ?? '']: !!this.classNames,
+                'xpl-skeleton--full-width': !!this.fullWidth,
             }, style: {
                 width: this.width || undefined,
                 height: this.height || undefined,

package/dist/collection/components/xpl-slideout/xpl-slideout.js

@@ -15,6 +15,9 @@ export class Slideout {
     }
     handleScroll() {
         const content = this.el.querySelector('.content');
+        if (!content) {
+            return;
+        }
         if (content.scrollHeight > content.clientHeight) {
             content.classList.add('has-shadow');
         }
@@ -26,7 +29,7 @@ export class Slideout {
         this.handleScroll();
     }
     render() {
-        return (h(Host, { key: '2784d3da5b726f04552fa93289f34ff0347d3e70', class: "xpl-slideout" }, this.backdrop && this.isOpen && (h("xpl-backdrop", { key: 'b8978c6811b9d1c175bfaee2296fbcb433c048d4', onClick: this.handleClose })), h("aside", { key: '0e4357253aa004531aa86fc2f93fb1332cec089b', class: `slideout slideout--${!this.isOpen && 'closed'}` }, h("header", { key: '132170bf2c8ff6c23e6bc85bce4dc8a2aec0c5d5', class: "header" }, h("div", { key: 'a38f7f2a2da8c622a9d2ef53c370560761b87b51', class: "title" }, h("slot", { key: 'ba7b485b02bd472a4f64e067cabf5cf6ae0ad1b0', name: "title" }), h("xpl-button", { key: '9538bc33599840f7756e747c63d9717cf14a0c58', class: "close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleClose }, h("xpl-icon", { key: '6d6846794afea4053736bc67b3c0c90fb822ca96', icon: "x" }))), h("div", { key: 'da9630c9cdc8d9c3e57242c58993f5815052e684', class: "subtitle" }, h("slot", { key: 'c923c0cdae7e6f09713592e31216ec10accce39f', name: "subtitle" })), h("div", { key: 'c9fc409c7e2c14987b4df6be17d7d2c9a5906100', class: "search" }, h("slot", { key: 'b963bc05b745e55bbdc27cc4bb224af97feccdda', name: "search" }))), h("xpl-divider", { key: 'e5f9201e96ac5d6b202e3e88edfa07dacfbb3786', tier: 0, class: "divider top" }), h("article", { key: '41b424ea94bdc2577b56166f45de2b1addc3a8b4', class: "content", tabIndex: 0 }, h("slot", { key: '5d316d1981d44536af9cc5d67ef7fd20f6375ec8', name: "content" })), this.showFooter && (h("footer", { key: '3d9c2b22153b6a9057d3c40b98af97d345b9e9c1' }, h("xpl-divider", { key: '77e87834d203624cc03ff2b0cf894300c2749094', tier: 0, class: "divider bottom" }), h("div", { key: '44737714daf25a087ad2c0d8938f94ec4668b071', class: "footer" }, h("slot", { key: '2c0c7b62872fa826ef117a730c92369ba7e340f1', name: "tertiary" }), h("slot", { key: '31ac0e95189487b668b3e5c0bd8d414ab7d73f30', name: "secondary" }), h("slot", { key: 'a0dd4999caac29b546cd0526e652596937dff83b', name: "primary" })))))));
+        return (h(Host, { key: '0031856dad46059b22c544b17d9c3c486fad49ef', class: "xpl-slideout" }, this.backdrop && this.isOpen && (h("xpl-backdrop", { key: '476ebe60d3761a12edce8a70b79c5458a3a49b88', onClick: this.handleClose })), h("aside", { key: 'e093e4f88719d109e1b76e5843fa799adf77023a', class: `slideout slideout--${!this.isOpen && 'closed'}` }, h("header", { key: '861ce3bafb6f104cd088788e86d5dec891d34559', class: "header" }, h("div", { key: 'f4a9a82d62a118acf4847ae32f6699755103cdeb', class: "title" }, h("slot", { key: '142fabb21a5894d0e505b3555b1de49a3457f01a', name: "title" }), h("xpl-button", { key: 'b5424c903db35139aca7070a223c3e8ccad0286d', class: "close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleClose }, h("xpl-icon", { key: 'a7597b061ba78ec8877f4ca119ddfe4fb6f07057', icon: "xmark" }))), h("div", { key: 'fbd6496bcd1854cbbe584a62a27621cc6c730472', class: "subtitle" }, h("slot", { key: 'a9a059571945b74f064d1b4c6a672a7964ff20d7', name: "subtitle" })), h("div", { key: '575d405c99e6a0ded114d274832d7c9a119f8acd', class: "search" }, h("slot", { key: '6db25fde2a6decdfe2f280aae9f784b1e992d070', name: "search" }))), h("xpl-divider", { key: 'dd382afb3181fbad00b1efacd438842c23249978', tier: 0, class: "divider top" }), h("article", { key: 'a8832b326372ede5872d2004308f8dff30955e1a', class: "content", tabIndex: 0 }, h("slot", { key: 'e46c7df8ebc6caecbc82117dd7b5097377dcf163', name: "content" })), this.showFooter && (h("footer", { key: '41e237ffa63f9dfc50ca1792848f4087375edecc' }, h("xpl-divider", { key: '888ece8b783152856696cf792c1db7abedd393fa', tier: 0, class: "divider bottom" }), h("div", { key: '4ee6dcf7cb794ca32c3e0095b9d3ffdda2578870', class: "footer" }, h("slot", { key: '286ecc097c88e7b6655fb27f707cb6163e49374b', name: "tertiary" }), h("slot", { key: '9154a9de3de154cb8f228a00875d81b4c8d1899a', name: "secondary" }), h("slot", { key: 'c510b271b930b8419b8ed26e4a9ce444453f9330', name: "primary" })))))));
     }
     static get is() { return "xpl-slideout"; }
     static get properties() {