@xplortech/apollo-core 2.5.0 → 2.6.0

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

@@ -1,9 +1,9 @@
 import { Host, h } from "@stencil/core";
-export class XplDivider {
+export class Divider {
     render() {
         let className = 'xpl-divider';
         className += ` xpl-divider--${this.tier}`;
-        return (h(Host, { key: '8f8b9899bfc602454687020e4547ba98e6c87cf4', class: className }, h("span", { key: 'd64ecfd54eb6ca33a05e271c52a7df5960f9c0df' }, h("slot", { key: '5e62ba9c682428dab560f67603343d9332bc02a5' }))));
+        return (h(Host, { key: 'cdafb808588e7baf9271997503dea7b53597b15f', class: className }, h("span", { key: '119067065dc21dd71b25ba81b5d83232f4953ebc' }, h("slot", { key: '8cc9077442f20703efc50094056cb7d15782252a' }))));
     }
     static get is() { return "xpl-divider"; }
     static get properties() {

package/dist/collection/components/xpl-dropdown/xpl-dropdown-group/xpl-dropdown-group.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { Host, h } from "@stencil/core";
-export class XplDropdownGroup {
+export class DropdownGroup {
     render() {
         const { groupName, options } = this;
         const hasOptions = options && options.length;
@@ -20,7 +20,7 @@ export class XplDropdownGroup {
                 var { groupName: optsGroupName } = _a, properties = __rest(_a, ["groupName"]);
                 return optsGroupName ? (h("xpl-dropdown-group", Object.assign({ label: optsGroupName }, properties))) : (h("xpl-dropdown-option", Object.assign({}, properties)));
             });
-        return (h(Host, { key: 'e1bd6d56ea5501e48d8f7fba91af32fbc223d343', role: "group", "aria-label": groupName }, h("li", { key: '543d3350cce47b4e96f78c6a411877110a27c842', class: "xpl-dropdown-list-item" }, h("xpl-dropdown-heading", { key: '85b5c8675bb3b2eecdb0dc3ffbf09dc9bd824ceb', label: groupName }), h("ul", { key: '9dfcd1a43cca4fd431b052e438743d24f872f248', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: 'd5d7d5d03bfde4306f1a8d861f7f2308eaac2bf6', name: "options" })))));
+        return (h(Host, { key: 'fae7d1999fae7148c2d19e14676b8c7a6f9c7810', role: "group", "aria-label": groupName }, h("li", { key: '8696234c09cce33be47e6481d757c2209d1fe04e', class: "xpl-dropdown-list-item" }, h("xpl-dropdown-heading", { key: 'ce4fc6f2b00f58302075e180170f52e333aab08b', label: groupName }), h("ul", { key: 'a9015c5ebaaa4ec3858769ad9aaf3f06d806bdbe', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: '2f4bb9a76f1371c4dc0405b2652bc616fa4bb835', name: "options" })))));
     }
     static get is() { return "xpl-dropdown-group"; }
     static get properties() {

package/dist/collection/components/xpl-dropdown/xpl-dropdown-heading/xpl-dropdown-heading.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
-export class XplDropdownHeading {
+export class DropdownHeading {
     render() {
-        return (h(Host, { key: '41de08a2e945b9d6412264a44a04dd65bc125276', class: { 'xpl-dropdown-heading': true }, role: "presentation" }, h("span", { key: '15b526b8a4ec46059d8edd3aed61c82d6bc79d64' }, this.label || h("slot", { key: '5b8c05d504e56c2852fa8439b15012c73552c190', name: "heading" }))));
+        return (h(Host, { key: '8f7d858ca1ee011e03b069948b1c948c7693725f', class: { 'xpl-dropdown-heading': true }, role: "presentation" }, h("span", { key: '56679ee9d35a995a72249f4494983652bacf0832' }, this.label || h("slot", { key: '3e657744c62647b42d249379927fab9ca9a258f6', name: "heading" }))));
     }
     static get is() { return "xpl-dropdown-heading"; }
     static get properties() {

package/dist/collection/components/xpl-dropdown/xpl-dropdown-option/xpl-dropdown-option.js

@@ -1,9 +1,12 @@
 import { Host, h } from "@stencil/core";
-export class XplDropdownOption {
+export class DropdownOptionCpnt {
     componentWillLoad() {
         this.dropdown = this.hostElement.closest('xpl-dropdown');
     }
     handleClick(ev) {
+        if (!this.dropdown) {
+            return;
+        }
         const { closeOnSelect, mode } = this.dropdown;
         if (ev.x && ev.y) {
             this.dropdown.handleSelect(ev, { component: this });
@@ -12,6 +15,9 @@ export class XplDropdownOption {
         }
     }
     handleKeyup(ev) {
+        if (!this.dropdown) {
+            return;
+        }
         const { dropdown } = this;
         const navigationKeys = ['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'Tab'];
         const { closeOnSelect, mode, selectOnFocus } = this.dropdown;
@@ -42,12 +48,12 @@ export class XplDropdownOption {
         this.hostElement.removeEventListener('keyup', this.handleKeyup);
     }
     render() {
-        const { label, isSelected, isDisabled, value, subtitle } = this;
-        return (h(Host, { key: '5065b45c91f2e8c385c70726b4624b62e609dc61', class: {
+        const { label, isSelected, isDisabled, value, subtitle, icon } = this;
+        return (h(Host, { key: '207cafd793f52598fdbbe3104ff0207261e086c4', class: {
                 'xpl-dropdown-option': true,
                 'xpl-dropdown-option--disabled': isDisabled,
                 'xpl-dropdown-option--selected': isSelected,
-            }, role: "option", "aria-checked": isSelected, "aria-disabled": isDisabled, "aria-selected": isSelected, value: value }, h("li", { key: '3a9493d1f0e2f9eff727f001d08c65477372e58b', class: "xpl-dropdown-list-item" }, label || h("slot", { key: 'fbebc2fd7f45d9abf4a2be0b306d92b3de8cb090', name: "option" }), subtitle && h("span", { key: '987104f21b1843e7350bbd4d8607fcdb1a580131', class: "xpl-dropdown-list-item__subtitle" }, subtitle))));
+            }, role: "option", "aria-checked": isSelected, "aria-disabled": isDisabled, "aria-selected": isSelected, value: value }, h("li", { key: '7e836b82c325050338eff79f23855f55c696f38c', class: "xpl-dropdown-list-item" }, icon && (h("xpl-icon", { key: '7b59e353bf038e1db478fab923c07e60d0e1a828', class: "xpl-dropdown-list-item__icon", icon: icon, size: 20 })), label || h("slot", { key: 'aad23fec3435e7cd7e36a57d49e178177d7da7fa', name: "option" }), subtitle && h("span", { key: '96fee61dbd072dacf783e164a93fd8dd626e3e53', class: "xpl-dropdown-list-item__subtitle" }, subtitle))));
     }
     static get is() { return "xpl-dropdown-option"; }
     static get properties() {
@@ -128,6 +134,25 @@ export class XplDropdownOption {
                 "reflect": false,
                 "attribute": "subtitle"
             },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "optional icon name to display before the label (uses xpl-icon)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
             "isSelected": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -11,48 +11,69 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { h, Host, } from "@stencil/core";
-export class XplDropdown {
+import { autoUpdate, computePosition, flip, hide, offset, size } from "@floating-ui/dom";
+export class Dropdown {
     constructor() {
         this.isOpen = false;
         this.closeOnSelect = true;
         this.mode = 'single';
         this.anchorToTrigger = false;
         this.selectOnFocus = false;
-        this.requestAnimationFrameId = null;
-        this.updateDropdownPosition = () => {
+        this.cleanupAutoUpdate = null;
+        this.updateDropdownPosition = async (triggerEl) => {
             var _a;
-            if (!this.anchorToTrigger || !this.triggerId) {
+            const { x, y, placement, middlewareData } = await computePosition(triggerEl, this.hostElement, {
+                strategy: 'fixed',
+                placement: 'bottom-start',
+                middleware: [
+                    offset(4),
+                    flip(),
+                    size({
+                        apply: ({ availableHeight, rects }) => {
+                            const listEl = this.hostElement.querySelector('.xpl-dropdown-list');
+                            let usedBeforeList = 0;
+                            if (listEl) {
+                                const children = Array.from(this.hostElement.children);
+                                const listIndex = children.indexOf(listEl);
+                                children.slice(0, listIndex).forEach((child) => {
+                                    if (child instanceof HTMLElement) {
+                                        usedBeforeList += child.offsetHeight;
+                                    }
+                                });
+                            }
+                            const cs = getComputedStyle(this.hostElement);
+                            const hostVerticalChrome = parseFloat(cs.paddingTop) +
+                                parseFloat(cs.paddingBottom) +
+                                parseFloat(cs.borderTopWidth) +
+                                parseFloat(cs.borderBottomWidth);
+                            const cssMaxHeight = listEl
+                                ? parseFloat(getComputedStyle(listEl).getPropertyValue('--xpl-dropdown-list-max-height'))
+                                : Infinity;
+                            const listMaxHeight = Math.min(cssMaxHeight, Math.max(0, availableHeight - usedBeforeList - hostVerticalChrome));
+                            Object.assign(this.hostElement.style, {
+                                width: `${rects.reference.width}px`,
+                            });
+                            if (listEl) {
+                                listEl.style.maxHeight = `${listMaxHeight}px`;
+                            }
+                        },
+                    }),
+                    hide(),
+                ],
+            });
+            if (!this.cleanupAutoUpdate)
                 return;
-            }
-            const triggerRect = (_a = document.getElementById(this.triggerId)) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-            if (!triggerRect) {
+            if ((_a = middlewareData.hide) === null || _a === void 0 ? void 0 : _a.referenceHidden) {
+                this.isOpen = false;
                 return;
             }
-            const dropdownHeight = Math.max(this.hostElement.offsetHeight, 300);
-            const viewportHeight = window.innerHeight;
-            const spaceBelow = viewportHeight - triggerRect.bottom;
-            const spaceAbove = triggerRect.top;
-            const shouldPositionAbove = spaceBelow < dropdownHeight && spaceAbove > spaceBelow;
-            if (shouldPositionAbove) {
-                this.hostElement.style.cssText = `
-                left: ${triggerRect.left}px;
-                width: ${triggerRect.width}px;
-                bottom: ${viewportHeight - triggerRect.top}px;
-                top: auto;
-            `;
-                this.hostElement.classList.add('xpl-dropdown--above');
-                this.hostElement.classList.remove('xpl-dropdown--below');
-            }
-            else {
-                this.hostElement.style.cssText = `
-                left: ${triggerRect.left}px;
-                width: ${triggerRect.width}px;
-                top: ${triggerRect.bottom}px;
-                bottom: auto;
-            `;
-                this.hostElement.classList.add('xpl-dropdown--below');
-                this.hostElement.classList.remove('xpl-dropdown--above');
-            }
+            const isAbove = placement.startsWith('top');
+            Object.assign(this.hostElement.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+            });
+            this.hostElement.classList.toggle('xpl-dropdown--above', isAbove);
+            this.hostElement.classList.toggle('xpl-dropdown--below', !isAbove);
         };
         this.handleClickOutside = ({ target }) => {
             const { triggerId } = this;
@@ -69,6 +90,16 @@ export class XplDropdown {
             }
         };
     }
+    onAnchorToTriggerChanged() {
+        if (this.isOpen) {
+            this.startPositioning();
+        }
+    }
+    onTriggerIdChanged() {
+        if (this.isOpen) {
+            this.startPositioning();
+        }
+    }
     onSelectedValuesChanged(newValues, initialRender = false) {
         if (this.options && this.options.length > 0) {
             const flatOptions = this.options.reduce((acc, curr) => [...acc, ...(curr.groupName ? curr.options : [curr])], []);
@@ -94,14 +125,31 @@ export class XplDropdown {
     }
     onIsOpenStateChange(newValue) {
         this.isOpenChange.emit(newValue);
+        if (newValue) {
+            this.startPositioning();
+        }
+        else {
+            this.stopPositioning();
+        }
+    }
+    connectedCallback() {
+        document.addEventListener('mousedown', this.handleClickOutside);
+        document.addEventListener('keydown', this.handleKeyDown);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('mousedown', this.handleClickOutside);
+        document.removeEventListener('keydown', this.handleKeyDown);
+        this.stopPositioning();
     }
-    onWindowScroll() {
-        if (this.requestAnimationFrameId) {
-            cancelAnimationFrame(this.requestAnimationFrameId);
+    componentWillLoad() {
+        this.handleSelect = this.handleSelect.bind(this);
+        if (this.selectedValues) {
+            this.onSelectedValuesChanged(this.selectedValues, true);
         }
-        this.requestAnimationFrameId = requestAnimationFrame(() => {
-            this.updateDropdownPosition();
-        });
+    }
+    componentDidLoad() {
+        if (this.isOpen)
+            this.startPositioning();
     }
     async handleSelect(e, { component }) {
         const { hostElement, mode, options, update } = this;
@@ -140,22 +188,30 @@ export class XplDropdown {
         if (update)
             update(e, { component: this });
     }
-    componentWillLoad() {
-        this.handleSelect = this.handleSelect.bind(this);
-        if (this.selectedValues) {
-            this.onSelectedValuesChanged(this.selectedValues, true);
+    startPositioning() {
+        if (!this.anchorToTrigger || !this.triggerId) {
+            return;
         }
+        const triggerEl = document.getElementById(this.triggerId);
+        if (!triggerEl)
+            return;
+        this.stopPositioning();
+        this.cleanupAutoUpdate = autoUpdate(triggerEl, this.hostElement, () => {
+            this.updateDropdownPosition(triggerEl);
+        });
     }
-    connectedCallback() {
-        document.addEventListener('mousedown', this.handleClickOutside.bind(this));
-        document.addEventListener('keydown', this.handleKeyDown);
-    }
-    disconnectedCallback() {
-        document.removeEventListener('mousedown', this.handleClickOutside);
-        document.removeEventListener('keydown', this.handleKeyDown);
-    }
-    componentDidLoad() {
-        this.updateDropdownPosition();
+    stopPositioning() {
+        var _a;
+        if (this.cleanupAutoUpdate) {
+            this.cleanupAutoUpdate();
+            this.cleanupAutoUpdate = null;
+        }
+        this.hostElement.style.left = '';
+        this.hostElement.style.top = '';
+        this.hostElement.style.width = '';
+        (_a = this.hostElement
+            .querySelector('.xpl-dropdown-list')) === null || _a === void 0 ? void 0 : _a.style.removeProperty('max-height');
+        this.hostElement.classList.remove('xpl-dropdown--above', 'xpl-dropdown--below');
     }
     render() {
         const { isOpen } = this;
@@ -166,12 +222,12 @@ export class XplDropdown {
                 var { groupName, options: opts, subtitle } = _a, properties = __rest(_a, ["groupName", "options", "subtitle"]);
                 return groupName ? (h("xpl-dropdown-group", Object.assign({ groupName: groupName, options: opts }, properties))) : (h("xpl-dropdown-option", Object.assign({ subtitle: subtitle }, properties)));
             });
-        return (h(Host, { key: '82f0becf57013a4f830e7c4aa56e3653b5eb43c5', "aria-expanded": isOpen, class: {
+        return (h(Host, { key: '9951124106d4123d98db2b9bdc906f51d145c5e6', "aria-expanded": isOpen ? 'true' : 'false', class: {
                 'xpl-dropdown': true,
                 'xpl-dropdown--multi': mode === 'multi',
                 'xpl-dropdown--open': isOpen,
                 'xpl-dropdown--anchor-to-trigger': this.anchorToTrigger,
-            }, role: "listbox" }, h("ul", { key: '59c584beb1e538c2dff25039e8513de5865a80f1', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: 'ff121c50de1a809031ea8be1d271b65946c2fa9a', name: "options" }))));
+            }, role: "listbox" }, h("slot", { key: '61b8daf20ef87a8ae7bad8fa494c104d58cc61f8', name: "header" }), h("ul", { key: 'ac14c8acf2927b931d4c74673af5f12f5d9514c1', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: 'c820c142bdb64ec4189dd5869d71d4339dc97814', name: "options" }))));
     }
     static get is() { return "xpl-dropdown"; }
     static get properties() {
@@ -342,12 +398,12 @@ export class XplDropdown {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "(e, { component }: { component: XplDropdown }) => void",
-                    "resolved": "(e: any, { component }: { component: XplDropdown; }) => void",
+                    "original": "(e, { component }: { component: Dropdown }) => void",
+                    "resolved": "(e: any, { component }: { component: Dropdown; }) => void",
                     "references": {
-                        "XplDropdown": {
+                        "Dropdown": {
                             "location": "global",
-                            "id": "global::XplDropdown"
+                            "id": "global::Dropdown"
                         }
                     }
                 },
@@ -422,6 +478,12 @@ export class XplDropdown {
     static get elementRef() { return "hostElement"; }
     static get watchers() {
         return [{
+                "propName": "anchorToTrigger",
+                "methodName": "onAnchorToTriggerChanged"
+            }, {
+                "propName": "triggerId",
+                "methodName": "onTriggerIdChanged"
+            }, {
                 "propName": "selectedValues",
                 "methodName": "onSelectedValuesChanged"
             }, {
@@ -429,25 +491,4 @@ export class XplDropdown {
                 "methodName": "onIsOpenStateChange"
             }];
     }
-    static get listeners() {
-        return [{
-                "name": "scroll",
-                "method": "onWindowScroll",
-                "target": "window",
-                "capture": true,
-                "passive": true
-            }, {
-                "name": "scroll",
-                "method": "onWindowScroll",
-                "target": "document",
-                "capture": true,
-                "passive": true
-            }, {
-                "name": "resize",
-                "method": "onWindowScroll",
-                "target": "window",
-                "capture": false,
-                "passive": true
-            }];
-    }
 }

package/dist/collection/components/xpl-dynamic-table/xpl-dynamic-table.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-export class XplDynamicTable {
+export class DynamicTable {
     constructor() {
         this.selectedItemCount = 0;
         this.colCount = 0;
@@ -51,7 +51,7 @@ export class XplDynamicTable {
         this.updateColumnCount();
     }
     render() {
-        return (h("div", { key: 'f49634b51fd6fb49bcb75cc4247f683ff99d6b99', role: "grid", class: "xpl-dynamic-table", "aria-colcount": this.colCount }, h("slot", { key: 'e5cd66e212a41ce26dfaccae634ab7ee22ba9910', name: "header" }), h("slot", { key: '07e1fbec46f08e46f728340291510992d21f71a4', name: "body" })));
+        return (h("div", { key: 'aa9fdd991fca8dab538176a950636b52db539f7a', role: "grid", class: "xpl-dynamic-table", "aria-colcount": this.colCount }, h("slot", { key: 'd05d799f1a0d944398f1ae9992dbcbb56a52f184', name: "header" }), h("slot", { key: '7f212255dbf15e8358cef6097d55b973f73bd086', name: "body" })));
     }
     static get is() { return "xpl-dynamic-table"; }
     static get states() {

package/dist/collection/components/xpl-dynamic-table-cell/xpl-dynamic-table-cell.js

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-export class XplDynamicTableCell {
+export class DynamicTableCell {
     constructor() {
         this.disabled = false;
     }
@@ -19,9 +19,9 @@ export class XplDynamicTableCell {
     }
     render() {
         const colIndex = Array.from(this.el.parentElement.children).indexOf(this.el) + 1;
-        return (h(Host, { key: '639f0a42ea0189fb4c269de1b76c5491729f868c', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
+        return (h(Host, { key: 'd4b284973e5c1f76a9355f77749c6b6432e4f469', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
                 this.hostElement = el;
-            } }, h("slot", { key: '29864a738aa7d5e9498195ce0d22bb8d78e39989' })));
+            } }, h("slot", { key: 'd9365d26d5b4fb9e50cd3b08514eeae3bfdd6888' })));
     }
     static get is() { return "xpl-dynamic-table-cell"; }
     static get properties() {

package/dist/collection/components/xpl-dynamic-table-row/xpl-dynamic-table-row.js

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-export class XplDynamicTableRow {
+export class DynamicTableRow {
     constructor() {
         this.disabled = false;
         this.selected = false;
@@ -24,9 +24,9 @@ export class XplDynamicTableRow {
         const classList = `xpl-dynamic-table-row
             ${this.isDisabled ? 'disabled' : ''}
             ${this.selected ? 'selected' : ''}`;
-        return (h(Host, { key: '4969ae6223aa4f6604d20e657d390d8ec43eb9bd', role: "row", class: classList, ref: (el) => {
+        return (h(Host, { key: '7ce6f2c780af4f7bd4053970bff3e620fef4913a', role: "row", class: classList, ref: (el) => {
                 this.hostElement = el;
-            } }, h("slot", { key: '244d34612847408ddb9e0d718b1e5916b7e24b2d' })));
+            } }, h("slot", { key: 'b77362a23d8d69844560e7389e5cd7f6b5568d88' })));
     }
     static get is() { return "xpl-dynamic-table-row"; }
     static get properties() {

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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-export class XplGrid {
+export class Grid {
     componentDidLoad() {
         const items = Array.from(this.container.querySelectorAll('.xpl-grid-item'));
         let lgCounter = 0;
@@ -22,7 +22,7 @@ export class XplGrid {
         });
     }
     render() {
-        return h(Host, { key: 'b7adecdd36342641869726ffa094578c1272dc1e', class: "xpl-grid" });
+        return h(Host, { key: '89b723cb2e01669c5edd69a3fbbbdce834f05dd3', class: "xpl-grid" });
     }
     static get is() { return "xpl-grid"; }
     static get elementRef() { return "container"; }

package/dist/collection/components/xpl-grid-item/xpl-grid-item.js

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-export class XplGridItem {
+export class GridItem {
     constructor() {
         this.xs = 6;
         this.sm = 6;
@@ -12,7 +12,7 @@ export class XplGridItem {
         className += ` xpl-grid-item-sm-${this.sm}`;
         className += ` xpl-grid-item-md-${this.md}`;
         className += ` xpl-grid-item-lg-${this.lg}`;
-        return (h(Host, { key: '4a3a254b51eae0907baf74c383b0d2b60017b69b', class: className }, h("slot", { key: 'b23f50ff733b9f3009eda4a3569a28b0636e76f4' })));
+        return (h(Host, { key: 'd4e9ba6dc2049aa0a88d266934a9499daf66d0a9', class: className }, h("slot", { key: 'fef8f150e57fcc72147111fe10088d46adc324d8' })));
     }
     static get is() { return "xpl-grid-item"; }
     static get properties() {

package/dist/collection/components/xpl-header-accordion/xpl-header-accordion.js

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-export class XplHeaderAccordion {
+export class HeaderAccordion {
     constructor() {
         this.initialExpanded = false;
         this.disabled = false;
@@ -68,7 +68,7 @@ export class XplHeaderAccordion {
         this.applyBorderRadiusToLastRow();
     }
     render() {
-        return (h(Host, { key: '36101a7c73fddd9944c96ed15dd6570b20ae031d', class: "xpl-header-accordion" }, h("div", { key: 'a58005a8bafb5d56e73c6a78dc4f88a8285ee8fa', class: `header-accordion header-accordion--${this.expanded ? 'expanded' : 'collapsed'}` }, this.hasCheckbox && (h("xpl-checkbox", { key: '6e96eb7c2670ac82a0f6b088a93fd09127338328', class: "xpl-header-accordion__parent-checkbox", checked: this.parentChecked, disabled: this.disabled, indeterminate: this.parentIndeterminate, onCheckboxChange: (event) => this.handleParentCheckboxChange(event.detail) })), h("button", { key: '097ecde99648e1ab397a2b65becdf525e03c21c4', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "toggle-area", onClick: this.toggleAccordion, type: "button" }, h("slot", { key: '002e4645b7df25d7725e6f9860c815fe3977fa62', name: "title" }), h("xpl-icon", { key: '04492dda041fabc3deeb4031cab2d2ebeae1f766', size: 16, icon: "chevron-down", class: this.expanded && 'rotate' }))), h("div", { key: '310457718b09b0481040c83dc73327251be308cd', id: this.contentId, role: "region", class: !this.expanded ? 'content--hidden' : 'content--shown' }, h("slot", { key: 'c13229b1538cae02a449bf00483174824de17f3a', name: "content" }))));
+        return (h(Host, { key: '511ce0498294e0064e94ff14b847f75260c6c7cf', class: "xpl-header-accordion" }, h("div", { key: '75550adfe2cff80c32e3fe73bfba5888a4bfc91d', class: `header-accordion header-accordion--${this.expanded ? 'expanded' : 'collapsed'}` }, this.hasCheckbox && (h("xpl-checkbox", { key: 'd46601b19497594f44b4633228a6f020f29c8914', class: "xpl-header-accordion__parent-checkbox", checked: this.parentChecked, disabled: this.disabled, indeterminate: this.parentIndeterminate, onCheckboxChange: (event) => this.handleParentCheckboxChange(event.detail) })), h("button", { key: 'b15087f6e34cd0d31e77d5c3b35640b7734ed556', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "toggle-area", onClick: this.toggleAccordion, type: "button" }, h("slot", { key: '8f655d108a016212852f0a7138fa82ea386ed26a', name: "title" }), h("xpl-icon", { key: 'abe7fb2fe4a19db7bcd2cbed7fec903cbeeaee4d', size: 16, icon: "chevron-down", class: this.expanded && 'rotate' }))), h("div", { key: 'e86c0a67e94b24f4c39386e8f728de34242e7344', id: this.contentId, role: "region", class: !this.expanded ? 'content--hidden' : 'content--shown' }, h("slot", { key: 'a86303b3cf41724f65e10db14d0f6464c68d49c2', name: "content" }))));
     }
     static get is() { return "xpl-header-accordion"; }
     static get properties() {

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

@@ -1,6 +1,6 @@
 import { Host, h } from "@stencil/core";
 import apolloIcons from "@xplortech/apollo-icons";
-export class XplIcon {
+export class Icon {
     render() {
         var _a;
         let options = {};
@@ -16,10 +16,10 @@ export class XplIcon {
         let wrapperClasses = 'xpl-icon__wrapper ';
         if (this.backgroundColor)
             wrapperClasses += `xpl-icon__wrapper--with-background xpl-icon__wrapper--with-background--${this.backgroundColor}`;
-        return (h(Host, { key: '485fe60cec37994f94402756a16f068176b1cbbb' }, h("figure", { key: '9767c5743a3520c36f7733b7f1bf92847af78eb2', class: wrapperClasses }, h("span", { key: 'f11637a97e7a0d1a28572743d8facd78c0b902fc', "aria-label": this.icon, role: "img", class: "xpl-icon", style: {
+        return (h(Host, { key: 'c622a660e3ed7d9dce7dc08a868360ffc43f2f8d' }, h("figure", { key: 'c12f8de568fa6e652914fbc894a1269f6085d880', class: wrapperClasses }, h("span", { key: 'a8386f0d0fc3848a36b5120dd5f24356c403d0f5', "aria-label": this.icon, role: "img", class: "xpl-icon", style: {
                 width: `${options.width}px`,
                 height: `${options.height}px`,
-            }, innerHTML: (_a = apolloIcons.getIcon(this.icon)) === null || _a === void 0 ? void 0 : _a.toSVG(options) }), h("figcaption", { key: '5293e424f6ef17fc99e7ffad8615861b1ac0443d' }, this.icon, " icon"))));
+            }, innerHTML: (_a = apolloIcons.getIcon(this.icon)) === null || _a === void 0 ? void 0 : _a.toSVG(options) }), h("figcaption", { key: '4d56222dc219feedd1e8e2c957ca01728a845b56' }, this.icon, " icon"))));
     }
     static get is() { return "xpl-icon"; }
     static get originalStyleUrls() {

package/dist/collection/components/xpl-input/input.stories.js

@@ -32,20 +32,14 @@ export default {
             type: { name: 'string', required: false },
         },
         type: {
-            options: ['text', 'number', 'file', 'password', 'date', 'time', 'color'],
+            options: ['text', 'number', 'file', 'password', 'date', 'time', 'color', 'phone'],
             control: {
                 type: 'select',
             },
         },
-        timeFormat: {
-            control: {
-                type: 'select',
-            },
-            options: ['12h', '24h'],
-        },
     },
 };
-export const Input = ({ label, description, disabled, error, errorMessage, pre, post, type }) => {
+export const Input = ({ label, description, disabled, error, errorMessage, pre, post, type, defaultCountry, isInternational, }) => {
     let attrs = '';
     if (label)
         attrs += ` label="${label}"`;
@@ -60,7 +54,11 @@ export const Input = ({ label, description, disabled, error, errorMessage, pre,
     if (post)
         attrs += ` post="${post}"`;
     if (type !== 'text')
-        attrs += ` type=${type}`;
+        attrs += ` type="${type}"`;
+    if (type === 'phone' && defaultCountry)
+        attrs += ` default-country="${defaultCountry}"`;
+    if (type === 'phone' && isInternational === false)
+        attrs += ` is-international="false"`;
     return `<xpl-input${attrs} name="input-name" placeholder="Placeholder"></xpl-input>`;
 };
 Input.args = {
@@ -72,6 +70,20 @@ Input.args = {
     pre: '',
     post: '',
     type: 'text',
+    defaultCountry: 'US',
+    isInternational: true,
+};
+Input.argTypes = {
+    defaultCountry: {
+        control: { type: 'text' },
+        description: 'Default country (ISO code) for phone input',
+        if: { arg: 'type', eq: 'phone' },
+    },
+    isInternational: {
+        control: { type: 'boolean' },
+        description: 'Enables international mode with country selector. When false, locked to defaultCountry with no picker.',
+        if: { arg: 'type', eq: 'phone' },
+    },
 };
 Input.parameters = {
     layout: 'centered',
@@ -306,6 +318,12 @@ Timepicker.args = {
     max: '18:00',
     type: 'time',
 };
+Timepicker.argTypes = {
+    timeFormat: {
+        control: { type: 'select' },
+        options: ['12h', '24h'],
+    },
+};
 Timepicker.parameters = {
     layout: 'centered',
     'web-component': {
@@ -533,3 +551,51 @@ Color.parameters = {
         })(Color.args),
     },
 };
+export const Phone = ({ label, description, placeholder, disabled, defaultCountry, isInternational, value, }) => {
+    let attrs = ` type="phone" label="${label}" name="phone" placeholder="${placeholder}"`;
+    if (description)
+        attrs += ` description="${description}"`;
+    if (disabled)
+        attrs += ` disabled`;
+    if (defaultCountry)
+        attrs += ` default-country="${defaultCountry}"`;
+    if (isInternational === false)
+        attrs += ` is-international="false"`;
+    if (value)
+        attrs += ` value="${value}"`;
+    return `<xpl-input${attrs}></xpl-input>`;
+};
+Phone.args = {
+    defaultCountry: 'US',
+    description: 'Enter your phone number with country code',
+    disabled: false,
+    error: false,
+    errorMessage: '',
+    isInternational: true,
+    label: 'Phone number',
+    placeholder: 'Enter number',
+    value: '+0000000000',
+};
+Phone.argTypes = {
+    isInternational: {
+        control: { type: 'boolean' },
+        description: 'Enables international mode with country selector. When false, locked to defaultCountry with no picker.',
+    },
+};
+Phone.parameters = {
+    layout: 'centered',
+    'web-component': {
+        render: Phone(Phone.args),
+    },
+    html: {
+        render: (() => `
+                <div class="xpl-input">
+                    <label class="xpl-input-label" for="phone-id">${Phone.args.label}</label>
+                    ${Phone.args.description ? `<small>${Phone.args.description}</small>` : ''}
+                    <div class="xpl-input-wrapper xpl-input-phone">
+                        <button type="button" class="xpl-input-phone__trigger" aria-haspopup="listbox">+1</button>
+                        <input type="tel" id="phone-id" name="phone" placeholder="${Phone.args.placeholder}" class="xpl-input-phone__input" />
+                    </div>
+                </div>`)(),
+    },
+};