@xplortech/apollo-core 2.5.0 → 2.7.0

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

@@ -0,0 +1,259 @@
+import { Host, h } from "@stencil/core";
+export class SideNavItem {
+    constructor() {
+        this.disabled = false;
+        this.expanded = false;
+        this.hasChildren = false;
+        this.hidden = false;
+        this.link = false;
+        this.selected = false;
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            if (this.hasChildren) {
+                this.expanded = !this.expanded;
+                this.expandedChange.emit(this.expanded);
+            }
+            else {
+                this.navClick.emit();
+            }
+        };
+    }
+    syncLinkHasChildrenExclusivity() {
+        this.enforceLinkExcludesHasChildren();
+    }
+    componentWillLoad() {
+        this.syncLinkHasChildrenExclusivity();
+    }
+    componentWillRender() {
+        this.syncLinkHasChildrenExclusivity();
+    }
+    enforceLinkExcludesHasChildren() {
+        if (!this.link)
+            return;
+        if (this.hasChildren) {
+            this.hasChildren = false;
+        }
+        if (this.el.hasAttribute('has-children')) {
+            this.el.removeAttribute('has-children');
+        }
+    }
+    render() {
+        var _a;
+        const linkClass = {
+            'xpl-side-nav-item__link': true,
+            expanded: this.expanded,
+            selected: this.selected,
+        };
+        return (h(Host, { key: '10318a2c26c650f5c5e2143c2fe1bde6a372f933', class: {
+                'xpl-side-nav-item': true,
+                'xpl-side-nav-item--link-disabled': this.link && this.disabled,
+            } }, this.link ? (h("slot", null)) : (h("button", { type: "button", class: linkClass, "aria-current": this.selected ? 'page' : undefined, "aria-expanded": this.hasChildren ? (this.expanded ? 'true' : 'false') : undefined, onClick: this.handleClick, disabled: this.disabled }, this.hasChildren && (h("span", { class: `xpl-side-nav-item__arrow ${this.expanded ? 'expanded' : ''}` }, h("xpl-icon", { icon: "chevron-down", size: 16 }))), !this.hasChildren && (h("span", { class: "xpl-side-nav-item__icon" }, h("slot", { name: "icon" }, this.icon ? (h("xpl-icon", { icon: this.icon, size: 16 })) : null))), h("span", { class: "xpl-side-nav-item__label" }, (_a = this.label) !== null && _a !== void 0 ? _a : ''))), this.hasChildren && !this.link && (h("div", { key: 'ea6e431300ffe641e970c8cc49e7935858986685', class: `xpl-side-nav-item__children ${this.expanded ? 'expanded' : ''}`, inert: !this.expanded ? true : undefined }, h("div", { key: '378a00e24a61911ce69ef6a50e69d47b496b5557', class: "xpl-side-nav-item__children-inner" }, h("slot", { key: 'b3ece8c8ddbf58693a370824c40fe3811828889a' }))))));
+    }
+    static get is() { return "xpl-side-nav-item"; }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the component is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "expanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the item is currently expanded (only applies when hasChildren is true)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "expanded",
+                "defaultValue": "false"
+            },
+            "hasChildren": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the item has child items; when true, shows expand/collapse and a default slot for nested items.\nMutually exclusive with <code>link</code>. If <code>link</code> is already true, setting\n<code>has-children</code> is reverted (<code>@Watch('hasChildren')</code>, <code>@Watch('link')</code>,\n<code>componentWillLoad</code>, and <code>componentWillRender</code>) so reflected attributes match CSS."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "has-children",
+                "defaultValue": "false"
+            },
+            "hidden": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the component is hidden"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "hidden",
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional icon name; default content for <code>slot=\"icon\"</code> (leaf and footer rows only).\nExpandable parents (<code>has-children</code>) do not show an icon column \u2014 only the chevron and label.\nOmit for nested children under a <code>has-children</code> parent \u2014 the icon column is hidden for sub-items."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The display label for the navigation item (button / expandable rows; omit in <code>link</code> mode)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "link": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, the row becomes a slot-only container for consumer-provided links.\nThe consumer provides the full anchor element (or router link) via the default slot.\nIn link mode, <code>label</code> and <code>icon</code> props should not be used.\nLink mode does not support <code>has-children</code>; use the default button mode for expandable items.\nWhen <code>link</code> is true, <code>hasChildren</code> is always false (enforced by\n<code>@Watch('link')</code>, <code>@Watch('hasChildren')</code>, <code>componentWillLoad</code>, and\n<code>componentWillRender</code>)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "link",
+                "defaultValue": "false"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the item is currently in a selected state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "expandedChange",
+                "name": "expandedChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the expanded state changes (hasChildren items only). Detail is the new expanded value."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "navClick",
+                "name": "navClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a leaf item is clicked. Expandable parents use expandedChange instead."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "hasChildren",
+                "methodName": "syncLinkHasChildrenExclusivity"
+            }, {
+                "propName": "link",
+                "methodName": "syncLinkHasChildrenExclusivity"
+            }];
+    }
+}

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

@@ -0,0 +1,32 @@
+import { Host, h } from "@stencil/core";
+export class SideNav {
+    render() {
+        return (h(Host, { key: 'bfa4c94a1718583020da6a8b1e9104788ce78ef1', class: {
+                'xpl-side-nav': true,
+            } }, h("div", { key: '1788f206ed3bea01be9cfa74fbc54a54e664945c', class: "xpl-side-nav__wrapper" }, h("nav", { key: 'ccbcbc45566a77a9134279b486148f3444bdb0ea', class: "xpl-side-nav__content", "aria-label": this.label }, h("div", { key: '6aef4d3f8e0c037aeedfc45d8471978c635b3293', class: "xpl-side-nav__section" }, h("slot", { key: 'e4384164f138cae0135472428079b62924afbcdf', name: "section" })), h("div", { key: '9794ea9a4b566713d0adb0787ae2ab1ae171fa6e', class: "xpl-side-nav__footer" }, h("slot", { key: 'e20ff6d3795784ea11470b7287550c29c0984a65', name: "nav-footer" }))))));
+    }
+    static get is() { return "xpl-side-nav"; }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the navigation landmark.\nMaps to `aria-label` on the `<nav>` element.\nRecommended when multiple navigation landmarks exist on a page\n(e.g., side nav + top nav + breadcrumbs) to help screen readers distinguish them."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+}

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

@@ -1,11 +1,11 @@
 import { h, Host } from "@stencil/core";
-export class XplSkeleton {
+export class Skeleton {
     constructor() {
         this.shape = 'rectangle';
         this.size = 'custom';
     }
     render() {
-        return (h(Host, { key: '018d8ef69972d40fa84fd700ca778862f762b699', class: {
+        return (h(Host, { key: '4c0962c3339b49f2f89d07e4827e826089419c70', class: {
                 'xpl-skeleton': true,
                 [`xpl-skeleton--shape-${this.shape}`]: true,
                 [`xpl-skeleton--size-${this.size}`]: true,

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

@@ -1,5 +1,5 @@
 import { Host, h, } from "@stencil/core";
-export class XplSlideout {
+export class Slideout {
     constructor() {
         this.isOpen = false;
         this.backdrop = false;
@@ -26,7 +26,7 @@ export class XplSlideout {
         this.handleScroll();
     }
     render() {
-        return (h(Host, { key: 'd38f708c91ffd96369e5277b9e4d5c74e52a41d4', class: "xpl-slideout" }, this.backdrop && this.isOpen && (h("xpl-backdrop", { key: '8cfea9e2d270e84783f99db0b12b2749a829ff8a', onClick: this.handleClose })), h("aside", { key: '8b3a24dccbb44c281bad35ab8d2af895bde56d10', class: `slideout slideout--${!this.isOpen && 'closed'}` }, h("header", { key: '921acd55e9aedcd5c04d2d6d4f2d26515ec744b8', class: "header" }, h("div", { key: 'dd434e7a1b5d28aa0833979f8d515df28ad00cc9', class: "title" }, h("slot", { key: '9743e88555558ec66e46528b04d6f6391d1bd8df', name: "title" }), h("xpl-button", { key: '7b7b267fa892363d0d25af419bdaa55dd5a362ef', class: "close-button", iconOnly: true, size: "sm", variant: "subtle", onClick: this.handleClose }, h("xpl-icon", { key: 'd27bd1de9864fbc6b72f1b71658ece1f5dfeddc9', icon: "x" }))), h("div", { key: '3183410cecb0973d8b7dca3997e1f6c254d28892', class: "subtitle" }, h("slot", { key: '6dd1fbcdd15fde802a316053b19566c618f41dd0', name: "subtitle" })), h("div", { key: 'b3c4a050275de296b43dc7d9e87bcc082c7f14ec', class: "search" }, h("slot", { key: 'c6f0ef04a753cb71da97021caa791ded9e2e0533', name: "search" }))), h("xpl-divider", { key: '68301c3540651d6d0dc2e9577d8fc6d2e5e9f536', tier: 0, class: "divider top" }), h("article", { key: 'eff6e4e81dfe48a9bf2f59d5f5ca09c5f56e6491', class: "content", tabIndex: 0 }, h("slot", { key: 'f3f25c5b51ae017cb6f84ea0f1c14329ba429adb', name: "content" })), this.showFooter && (h("footer", { key: '6e94107fefc5e2e24edb21f61b0e4af32c954445' }, h("xpl-divider", { key: '89c550dbb352c6b22534edf7ff3a0e8d0513a206', tier: 0, class: "divider bottom" }), h("div", { key: '32fe00b37f65ef0b1ba42bf8e7d8f59dfec7aa68', class: "footer" }, h("slot", { key: 'f42ee4c847be0ab553d039bc0ce50e29e70984fa', name: "tertiary" }), h("slot", { key: 'dd6b8757bcd85dd79a084d3ec0bbbfd6629297bb', name: "secondary" }), h("slot", { key: 'e6d4fea0d1ebfa7bd71fce313dee34b25f164b0c', name: "primary" })))))));
+        return (h(Host, { key: '01e702ef959cc596ae8fb140275d733c93c3b399', class: "xpl-slideout" }, this.backdrop && this.isOpen && (h("xpl-backdrop", { key: '4e82ee44b68eae102a4c4ef65e797ce23659d330', onClick: this.handleClose })), h("aside", { key: '1c718a30611bb6699f231a9e736c0521c248d65a', class: `slideout slideout--${!this.isOpen && 'closed'}` }, h("header", { key: 'c53419926fbe8ccc6616af39d021248b46f138a3', class: "header" }, h("div", { key: '36e02fe5b7ff8d6920759ab793ead2be0f0811ac', class: "title" }, h("slot", { key: '7932fd5e77edb89570ebd3fedc0346929582ec7b', name: "title" }), h("xpl-button", { key: '9772e880c9b132ba84ccf45c4793e0af70548866', class: "close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleClose }, h("xpl-icon", { key: '91922e8aa02c30aa73ae1ea3d2b47daffd954616', icon: "x" }))), h("div", { key: '2f7065ba1da7f0ad805e16b69f4a316d5a1f9285', class: "subtitle" }, h("slot", { key: '8edb8bdbdecd01abd2b7899d5c9897c91e625326', name: "subtitle" })), h("div", { key: '5945128002bb2103daac40d1f7457ebb97521002', class: "search" }, h("slot", { key: 'c4df975581beb16547a439a86f2a532c10fa4fa7', name: "search" }))), h("xpl-divider", { key: '3be4c74de14ca2380179798fe4ec0c9a758739af', tier: 0, class: "divider top" }), h("article", { key: '2012ae1197acc41f530af8920b19752a248e2b40', class: "content", tabIndex: 0 }, h("slot", { key: 'e8a1cedda6cd48bb62dc42f00c9bdc8510d4f603', name: "content" })), this.showFooter && (h("footer", { key: 'cfa5a41846485b879126a90f3a7346d6eb680776' }, h("xpl-divider", { key: 'bf05c9d85471b55dee25da790afb3cb642f1a86b', tier: 0, class: "divider bottom" }), h("div", { key: 'd109314ca745947f3337b06df73183ff277c89bb', class: "footer" }, h("slot", { key: 'cad183e788d3555a5366b19b4e01c3c90f7d9ae0', name: "tertiary" }), h("slot", { key: 'c12294440fe8544e51197dfddbc01aaea506575a', name: "secondary" }), h("slot", { key: '7accdf8dc3cc9b6a416cf784ec081d70c1d0f1e9', name: "primary" })))))));
     }
     static get is() { return "xpl-slideout"; }
     static get properties() {