@xplortech/apollo-core 2.9.0 → 2.10.0

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

@@ -3,7 +3,7 @@ export class Divider {
     render() {
         let className = 'xpl-divider';
         className += ` xpl-divider--${this.tier}`;
-        return (h(Host, { key: '213dc1893d64e06256ef2958b59b8377428d81d4', class: className }, h("span", { key: '2e03654076b9b76f2ce9e8475bb44068170c8a80' }, h("slot", { key: '5af40b6963beddbd0d1fe5fd05a9e62274ce3418' }))));
+        return (h(Host, { key: '8b6563d7c6c85814d5dc0527246c90eea82c0dbd', class: className }, h("span", { key: '2935de22e9c70183386b5f6e1e18ff6437a42a41' }, h("slot", { key: '10e4e4c5c861647302217f78af0a369ad330c410' }))));
     }
     static get is() { return "xpl-divider"; }
     static get properties() {

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

@@ -20,7 +20,7 @@ export class DropdownGroup {
                 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: 'b872cfc0a8eb2e3542f07f6ae17ebc15b6f965ab', role: "group", "aria-label": groupName }, h("li", { key: '8e475e45b5040bd78c7d37f8c58b0689a508f067', class: "xpl-dropdown-list-item" }, h("xpl-dropdown-heading", { key: '3b7b984646bdcc502aca2260a0b59494e0884f6c', label: groupName }), h("ul", { key: 'c75e710ebe06a23aacca57f34ce286516c98a8c5', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: '6b72762b22f316561f7614e4841018c019a60681', name: "options" })))));
+        return (h(Host, { key: 'a33169d78e635bb53987322f02869ffc1f1a9908', role: "group", "aria-label": groupName }, h("li", { key: '58a1ff78bb923fec60eb51ef05a2026e03e3058b', class: "xpl-dropdown-list-item" }, h("xpl-dropdown-heading", { key: '6d8556e1d96cbfccd61038e5089e9669917b919e', label: groupName }), h("ul", { key: 'dd485e18b79920d9992e506fe83b36fcadb9e020', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: '2eca2f6aa7c44aacdb67c3658029822b4ba1c0aa', 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 DropdownHeading {
     render() {
-        return (h(Host, { key: '70e5556188bd87fe5842256e4e145c3585f73409', class: { 'xpl-dropdown-heading': true }, role: "presentation" }, h("span", { key: '2d45f0191d9b158641da794ee1b9f246f9659717' }, this.label || h("slot", { key: '21cc81673e6a37f4b7ff896d12bd94916c3a92e7', name: "heading" }))));
+        return (h(Host, { key: '9b05e54ae226524434ac8485c51e7fccd4e5fe9e', class: { 'xpl-dropdown-heading': true }, role: "presentation" }, h("span", { key: 'c5ada81fbed76834515cff75f1fd1ce87b2ccbe3' }, this.label || h("slot", { key: 'dfe135bf2499e858e75ab1e87793ae75eb0982c6', 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

@@ -49,11 +49,11 @@ export class DropdownOptionCpnt {
     }
     render() {
         const { label, isSelected, isDisabled, value, subtitle, icon } = this;
-        return (h(Host, { key: '838f64dba15bc8d6c2f65a8685365c5618c24d5f', class: {
+        return (h(Host, { key: '4ff7cc350e34059ad4df757b88112756c7f5b83e', 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: 'bc4b23054cd73a95ff5cf167c4195563a9e318ec', class: "xpl-dropdown-list-item" }, icon && (h("xpl-icon", { key: '797d92d1d80cb8c33500d8dfe8b1bf9396c767ca', class: "xpl-dropdown-list-item__icon", icon: icon, size: 20 })), label || h("slot", { key: '7a590a3abae38e7934f703929895be152b01816d', name: "option" }), subtitle && h("span", { key: '465fb73335df17864cd21e067f26cdba85d8135c', class: "xpl-dropdown-list-item__subtitle" }, subtitle))));
+            }, role: "option", "aria-checked": isSelected, "aria-disabled": isDisabled, "aria-selected": isSelected, value: value }, h("li", { key: 'a014d09116703f5477a48cace194ba1beef602d5', class: "xpl-dropdown-list-item" }, icon && (h("xpl-icon", { key: 'af16591b7f1195351facaafa67c07368ce42d072', class: "xpl-dropdown-list-item__icon", icon: icon, size: 20 })), label || h("slot", { key: '72c0dbd67ab7930924cb1ef3ee9f0b4b53cf28a6', name: "option" }), subtitle && h("span", { key: '0893e031740ebdd8fc8ca7de2cb10d0b4d7c95ae', class: "xpl-dropdown-list-item__subtitle" }, subtitle))));
     }
     static get is() { return "xpl-dropdown-option"; }
     static get properties() {

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

@@ -12,8 +12,25 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { h, Host, } from "@stencil/core";
 import { autoUpdate, computePosition, flip, hide, offset, size, } from "@floating-ui/dom";
+const VIRTUAL_LIST = {
+    rowHeight: 45,
+    overscan: 20,
+    virtualizeFrom: 200,
+};
+function renderOption(option, virtualIndex) {
+    const { groupName, options: opts, subtitle } = option, properties = __rest(option, ["groupName", "options", "subtitle"]);
+    if (groupName) {
+        return (h("xpl-dropdown-group", Object.assign({ groupName: groupName, options: opts }, properties)));
+    }
+    const isVirtual = virtualIndex !== undefined;
+    return (h("xpl-dropdown-option", Object.assign({ class: isVirtual ? 'xpl-dropdown-option--virtual' : undefined, style: isVirtual
+            ? { transform: `translateY(${virtualIndex * VIRTUAL_LIST.rowHeight}px)` }
+            : undefined, subtitle: subtitle }, properties)));
+}
 export class Dropdown {
     constructor() {
+        this.virtualEnd = 0;
+        this.virtualStart = 0;
         this.isOpen = false;
         this.closeOnSelect = true;
         this.mode = 'single';
@@ -21,6 +38,9 @@ export class Dropdown {
         this.placement = 'bottom-start';
         this.selectOnFocus = false;
         this.cleanupAutoUpdate = null;
+        this.virtualScrollRaf = null;
+        this.openAlignmentRaf = null;
+        this.previousOptionCount = 0;
         this.updateDropdownPosition = async (triggerEl) => {
             var _a, _b;
             const { x, y, placement, middlewareData } = await computePosition(triggerEl, this.hostElement, {
@@ -92,6 +112,64 @@ export class Dropdown {
                 this.isOpen = false;
             }
         };
+        this.handleVirtualScroll = () => {
+            if (this.virtualScrollRaf !== null)
+                return;
+            this.virtualScrollRaf = requestAnimationFrame(() => {
+                this.virtualScrollRaf = null;
+                this.updateVirtualRange();
+            });
+        };
+        this.setListEl = (el) => {
+            var _a, _b;
+            if (el === this.listEl)
+                return;
+            this.listEl = el;
+            (_a = this.listResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+            if (el && typeof ResizeObserver !== 'undefined') {
+                (_b = this.listResizeObserver) !== null && _b !== void 0 ? _b : (this.listResizeObserver = new ResizeObserver(() => {
+                    if (this.isVirtualized)
+                        this.handleVirtualScroll();
+                }));
+                this.listResizeObserver.observe(el);
+            }
+        };
+        this.scheduleOpenAlignment = () => {
+            if (this.openAlignmentRaf !== null)
+                return;
+            this.openAlignmentRaf = requestAnimationFrame(() => {
+                this.openAlignmentRaf = null;
+                this.scrollSelectedIntoView();
+                this.updateVirtualRange();
+            });
+        };
+    }
+    onOptionsChanged() {
+        var _a, _b, _c, _d;
+        const total = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+        const listReplaced = total !== this.previousOptionCount;
+        this.previousOptionCount = total;
+        if (!this.isVirtualized) {
+            this.virtualStart = 0;
+            this.virtualEnd = 0;
+            return;
+        }
+        const list = this.listEl;
+        if (list) {
+            const maxScroll = Math.max(0, total * VIRTUAL_LIST.rowHeight - list.clientHeight);
+            if (list.scrollTop > maxScroll) {
+                list.scrollTop = maxScroll;
+            }
+            if (this.isOpen && listReplaced) {
+                const selectedIndex = (_d = (_c = this.options) === null || _c === void 0 ? void 0 : _c.findIndex((option) => option.isSelected)) !== null && _d !== void 0 ? _d : -1;
+                const outOfWindow = selectedIndex >= 0 &&
+                    (selectedIndex < this.virtualStart || selectedIndex >= this.virtualEnd);
+                if (outOfWindow) {
+                    this.scrollSelectedIntoView();
+                }
+            }
+        }
+        this.updateVirtualRange();
     }
     onAnchorToTriggerChanged() {
         if (this.isOpen) {
@@ -115,7 +193,7 @@ export class Dropdown {
     }
     onSelectedValuesChanged(newValues, initialRender = false) {
         if (this.options && this.options.length > 0) {
-            const flatOptions = this.options.reduce((acc, curr) => [...acc, ...(curr.groupName ? curr.options : [curr])], []);
+            const flatOptions = this.options.flatMap((curr) => curr.groupName && curr.options ? curr.options : [curr]);
             flatOptions.forEach((option) => {
                 const optionValue = option.value || option.label;
                 if (this.mode === 'single') {
@@ -140,9 +218,13 @@ export class Dropdown {
         this.isOpenChange.emit(newValue);
         if (newValue) {
             this.startPositioning();
+            this.alignOnOpen();
         }
         else {
             this.stopPositioning();
+            this.cancelVirtualScroll();
+            this.virtualStart = 0;
+            this.virtualEnd = 0;
         }
     }
     connectedCallback() {
@@ -150,44 +232,68 @@ export class Dropdown {
         document.addEventListener('keydown', this.handleKeyDown);
     }
     disconnectedCallback() {
+        var _a;
         document.removeEventListener('mousedown', this.handleClickOutside);
         document.removeEventListener('keydown', this.handleKeyDown);
         this.stopPositioning();
+        this.cancelVirtualScroll();
+        (_a = this.listResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     componentWillLoad() {
+        var _a, _b;
         this.handleSelect = this.handleSelect.bind(this);
         if (this.selectedValues) {
             this.onSelectedValuesChanged(this.selectedValues, true);
         }
+        this.previousOptionCount = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
     }
     componentDidLoad() {
-        if (this.isOpen)
+        if (this.isOpen) {
             this.startPositioning();
+            this.alignOnOpen();
+        }
     }
     async handleSelect(e, { component }) {
         const { hostElement, mode, options, update } = this;
         const isSingle = mode === 'single';
         const isMulti = mode === 'multi';
         if (options) {
-            options
-                .reduce((acc, curr) => [...acc, ...(curr.groupName ? curr.options : [curr])], [])
-                .forEach((option) => {
-                const isMatch = (option.value || option.label) ===
-                    (component.hostElement.value || component.hostElement.label);
-                if (isSingle) {
-                    option.isSelected = isMatch;
-                    component.hostElement.isSelected = true;
-                }
-                else if (isMulti && isMatch) {
-                    option.isSelected = !option.isSelected;
-                    component.hostElement.isSelected = option.isSelected;
-                }
-            });
-            const mapOptions = (option) => {
-                option.options = option.groupName ? option.options.map(mapOptions) : undefined;
-                return option;
-            };
-            this.options = options.map(mapOptions);
+            const targetValue = component.hostElement.value || component.hostElement.label;
+            const hasGroups = options.some((option) => option.groupName);
+            if (!hasGroups) {
+                options.forEach((option) => {
+                    const isMatch = (option.value || option.label) === targetValue;
+                    if (isSingle) {
+                        option.isSelected = isMatch;
+                        if (isMatch)
+                            component.hostElement.isSelected = true;
+                    }
+                    else if (isMulti && isMatch) {
+                        option.isSelected = !option.isSelected;
+                        component.hostElement.isSelected = option.isSelected;
+                    }
+                });
+                this.options = [...options];
+            }
+            else {
+                const flatOptions = options.flatMap((curr) => curr.groupName && curr.options ? curr.options : [curr]);
+                flatOptions.forEach((option) => {
+                    const isMatch = (option.value || option.label) === targetValue;
+                    if (isSingle) {
+                        option.isSelected = isMatch;
+                        component.hostElement.isSelected = true;
+                    }
+                    else if (isMulti && isMatch) {
+                        option.isSelected = !option.isSelected;
+                        component.hostElement.isSelected = option.isSelected;
+                    }
+                });
+                const mapOptions = (option) => {
+                    option.options = option.groupName ? option.options.map(mapOptions) : undefined;
+                    return option;
+                };
+                this.options = options.map(mapOptions);
+            }
         }
         else if (isSingle) {
             const optionNodes = Array.from(hostElement.querySelectorAll('xpl-dropdown-option'));
@@ -226,21 +332,83 @@ export class Dropdown {
             .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');
     }
+    cancelVirtualScroll() {
+        if (this.virtualScrollRaf !== null) {
+            cancelAnimationFrame(this.virtualScrollRaf);
+            this.virtualScrollRaf = null;
+        }
+        if (this.openAlignmentRaf !== null) {
+            cancelAnimationFrame(this.openAlignmentRaf);
+            this.openAlignmentRaf = null;
+        }
+    }
+    alignOnOpen() {
+        this.scrollSelectedIntoView();
+        this.updateVirtualRange();
+        this.scheduleOpenAlignment();
+    }
+    scrollSelectedIntoView() {
+        const { listEl: list, options } = this;
+        if (!list || !(options === null || options === void 0 ? void 0 : options.length) || !this.isVirtualized)
+            return;
+        const selectedIndex = options.findIndex((option) => option.isSelected);
+        if (selectedIndex < 0)
+            return;
+        const { rowHeight } = VIRTUAL_LIST;
+        const centered = selectedIndex * rowHeight - (list.clientHeight - rowHeight) / 2;
+        const maxScroll = Math.max(0, options.length * rowHeight - list.clientHeight);
+        list.scrollTop = Math.max(0, Math.min(centered, maxScroll));
+    }
+    updateVirtualRange() {
+        var _a, _b;
+        const list = this.listEl;
+        const total = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+        if (!list || !total)
+            return;
+        const { rowHeight, overscan } = VIRTUAL_LIST;
+        const firstVisible = Math.floor(list.scrollTop / rowHeight);
+        const visibleCount = Math.ceil(list.clientHeight / rowHeight) || 1;
+        const start = Math.max(0, firstVisible - overscan);
+        const end = Math.min(total, firstVisible + visibleCount + overscan);
+        if (start !== this.virtualStart || end !== this.virtualEnd) {
+            this.virtualStart = start;
+            this.virtualEnd = end;
+        }
+    }
+    get isVirtualized() {
+        const { options } = this;
+        return (!!options &&
+            options.length > VIRTUAL_LIST.virtualizeFrom &&
+            options.every((option) => !option.groupName && !option.subtitle));
+    }
     render() {
-        const { isOpen } = this;
-        const { mode, options } = this;
-        const hasOptions = options && options.length;
-        const mappedOptions = hasOptions &&
-            options.map((_a) => {
-                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: '1ef465611f9a8501af41c17523352714a7921f29', "aria-expanded": isOpen ? 'true' : 'false', class: {
+        const { isOpen, mode, options } = this;
+        const hasOptions = !!(options && options.length);
+        const shouldVirtualize = this.isVirtualized;
+        let listContent;
+        if (!hasOptions) {
+            listContent = h("slot", { key: '859e13193ab2db2f10197aaf8b9699a177d480c6', name: "options" });
+        }
+        else if (shouldVirtualize) {
+            const { rowHeight, overscan } = VIRTUAL_LIST;
+            const total = options.length;
+            const start = Math.min(this.virtualStart, total);
+            const fallbackEnd = Math.min(total, Math.ceil(300 / rowHeight) + overscan * 2);
+            const end = this.virtualEnd > start ? this.virtualEnd : fallbackEnd;
+            listContent = (h("li", { key: '2e197eebf453591ec714ebbc60a6c8ba57646cb9', class: "xpl-dropdown__virtual-sizer", style: { height: `${total * rowHeight}px` } }, options.slice(start, end).map((option, i) => renderOption(option, start + i))));
+        }
+        else {
+            listContent = options.map((option) => renderOption(option));
+        }
+        return (h(Host, { key: '0ffdb0e5d1dc13c83b692244f8e5e65f70c9c745', "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("slot", { key: '118c8b34e72aa6ab018e6fa9ff29a18ae540b89e', name: "header" }), h("ul", { key: '01544e6aa8d785c48b4f677de102efe4ecc7b53a', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: 'f70619995bed02540cef11deaeb6c3e5704165ff', name: "options" }))));
+                'xpl-dropdown--virtualized': shouldVirtualize,
+            }, role: "listbox" }, h("slot", { key: 'ff204bc8c903a5d0a47b95521781df2467c9b4a7', name: "header" }), h("ul", { key: '2685e64254a9424f9da75787c3d18ff182e9f7a1', class: "xpl-dropdown-list", ref: (el) => {
+                this.setListEl(el);
+            }, onScroll: shouldVirtualize ? this.handleVirtualScroll : undefined }, listContent)));
     }
     static get is() { return "xpl-dropdown"; }
     static get properties() {
@@ -482,6 +650,12 @@ export class Dropdown {
             }
         };
     }
+    static get states() {
+        return {
+            "virtualEnd": {},
+            "virtualStart": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "isOpenChange",
@@ -542,6 +716,9 @@ export class Dropdown {
     static get elementRef() { return "hostElement"; }
     static get watchers() {
         return [{
+                "propName": "options",
+                "methodName": "onOptionsChanged"
+            }, {
                 "propName": "anchorToTrigger",
                 "methodName": "onAnchorToTriggerChanged"
             }, {

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

@@ -51,7 +51,7 @@ export class DynamicTable {
         this.updateColumnCount();
     }
     render() {
-        return (h("div", { key: '8f33da5fa8815400447b1690172bdaddd1079c1a', role: "grid", class: "xpl-dynamic-table", "aria-colcount": this.colCount }, h("slot", { key: '221aced83acf1fc4c904533eaedb1cd79914c5d3', name: "header" }), h("slot", { key: '6087119ce1499e94a30d09a1917d9371331f6add', name: "body" })));
+        return (h("div", { key: '3d5c3e5aea065c98323fbdbf17392af63975c9dd', role: "grid", class: "xpl-dynamic-table", "aria-colcount": this.colCount }, h("slot", { key: 'f6076fef5e85fdf22b03e532e920396ce5f6ce63', name: "header" }), h("slot", { key: '3b94b04b8f6b7a1cca9277161c0c32b117ce315f', 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

@@ -19,9 +19,9 @@ export class DynamicTableCell {
     }
     render() {
         const colIndex = Array.from(this.el.parentElement.children).indexOf(this.el) + 1;
-        return (h(Host, { key: '7cfa2d58f634e41ccf1604a581fcc83a2b51676f', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
+        return (h(Host, { key: 'e6e9a3695c9d8ca3743b188284bc8e69f50f3397', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
                 this.hostElement = el;
-            } }, h("slot", { key: 'c6a04082cb8aa1089d9f6cb82f3db8d7f0addf6e' })));
+            } }, h("slot", { key: 'abfa632a3ac88d663acaaacbc431d07c9da4b375' })));
     }
     static get is() { return "xpl-dynamic-table-cell"; }
     static get properties() {

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

@@ -24,9 +24,9 @@ export class DynamicTableRow {
         const classList = `xpl-dynamic-table-row
             ${this.isDisabled ? 'disabled' : ''}
             ${this.selected ? 'selected' : ''}`;
-        return (h(Host, { key: '0d099456d2016263a2bdcd42b46794e08adb64cf', role: "row", class: classList, ref: (el) => {
+        return (h(Host, { key: 'e070f32db6cee0bcbf0dd84e41e13e6d3b88e8a1', role: "row", class: classList, ref: (el) => {
                 this.hostElement = el;
-            } }, h("slot", { key: 'c923f7f8dc4bb8a4527693259d1a8b5932bb6c10' })));
+            } }, h("slot", { key: '78ea8e02e97e0017dc4aa35af4883446d4e4c4bf' })));
     }
     static get is() { return "xpl-dynamic-table-row"; }
     static get properties() {

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

@@ -22,7 +22,7 @@ export class Grid {
         });
     }
     render() {
-        return h(Host, { key: 'aeee950fb242a14f50ceda1d199cf427597b70f6', class: "xpl-grid" });
+        return h(Host, { key: '0036b594c89e75a9b302e7a7d9c99d4703a8b729', 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

@@ -12,7 +12,7 @@ export class GridItem {
         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: '43cf6dd21d3d06e2d8012b716e5db5aeee676aac', class: className }, h("slot", { key: 'e08e03e4152007df7158d7122f883da1050dfde7' })));
+        return (h(Host, { key: 'bb28d83b6fd6ee92390ffcb5a505f5084f5624b9', class: className }, h("slot", { key: 'db3cf487db67044879425c830a14a44e06d19414' })));
     }
     static get is() { return "xpl-grid-item"; }
     static get properties() {

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

@@ -68,7 +68,7 @@ export class HeaderAccordion {
         this.applyBorderRadiusToLastRow();
     }
     render() {
-        return (h(Host, { key: '33b59f238ef5eabce7a83dec5e189459038ac2e0', class: "xpl-header-accordion" }, h("div", { key: '1269fe93be898a0300a1c840ad8919608c86bbff', class: `header-accordion header-accordion--${this.expanded ? 'expanded' : 'collapsed'}` }, this.hasCheckbox && (h("xpl-checkbox", { key: '16a93cbaab64072990502ed7d1bc2a496ad31425', class: "xpl-header-accordion__parent-checkbox", checked: this.parentChecked, disabled: this.disabled, indeterminate: this.parentIndeterminate, onCheckboxChange: (event) => this.handleParentCheckboxChange(event.detail) })), h("button", { key: '00e7024adcd3c8cef52cc5d11be8e4dc6319c1a8', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "toggle-area", onClick: this.toggleAccordion, type: "button" }, h("slot", { key: '16fc847fff7d27f73c589bff9670fdbdec9f58cc', name: "title" }), h("xpl-icon", { key: '44e27d19feb130c0903949d24a9c71f19f8475b6', size: 16, icon: "chevron-down", class: this.expanded && 'rotate' }))), h("div", { key: 'aa8bd514da7666ed09c72c5b271ea0eeda729ef8', id: this.contentId, role: "region", class: !this.expanded ? 'content--hidden' : 'content--shown' }, h("slot", { key: 'b8adf0af8ea58edad1036fc45277ef6621bc8fbb', name: "content" }))));
+        return (h(Host, { key: 'ec426d05bbf030c8e782e7e74fda505bc8b9011a', class: "xpl-header-accordion" }, h("div", { key: 'b9da9063757f65ab682f542dd138f3f8f8dc471f', class: `header-accordion header-accordion--${this.expanded ? 'expanded' : 'collapsed'}` }, this.hasCheckbox && (h("xpl-checkbox", { key: '8b97b3e36f49549dcd18978628bfde93f75a084e', class: "xpl-header-accordion__parent-checkbox", checked: this.parentChecked, disabled: this.disabled, indeterminate: this.parentIndeterminate, onCheckboxChange: (event) => this.handleParentCheckboxChange(event.detail) })), h("button", { key: '7bdf4043d478bb1c04f44de14717ac3753236e1a', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "toggle-area", onClick: this.toggleAccordion, type: "button" }, h("slot", { key: '0a6197fd9b5dabff14f1da4137d8a99c7a4cbc93', name: "title" }), h("xpl-icon", { key: '5a74ba13feb88a46df377f255eb134d5b609be53', size: 16, icon: "chevron-down", class: this.expanded && 'rotate' }))), h("div", { key: '8d048d3480f0185ed34440c3e6d84befb3cf4dee', id: this.contentId, role: "region", class: !this.expanded ? 'content--hidden' : 'content--shown' }, h("slot", { key: 'fa374cd9feba5ef3eb72d50f027651dc84f80ec8', name: "content" }))));
     }
     static get is() { return "xpl-header-accordion"; }
     static get properties() {

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

@@ -16,10 +16,10 @@ export class Icon {
         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: '07522771501e6e67b0ae91bbee9cc8699d79fb8b' }, h("figure", { key: '2acf41e3e20ff3998050c948fcae5d0990cb706a', class: wrapperClasses }, h("span", { key: '560b2e62366ee0842442c29280a7e37b53edf2be', "aria-label": this.icon, role: "img", class: "xpl-icon", style: {
+        return (h(Host, { key: 'cf84ae3e7ff4ae0b4ae8e1b1cf3b9331bc887c6c' }, h("figure", { key: '74e2727f9bf4ff8d710eff9b99632ffa669b84ae', class: wrapperClasses }, h("span", { key: '2d8be2bd318bd27e0bc4299cfe518668e424fffe', "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: '256c0d05be8026b24a139f8bfff4f00c65112030' }, this.icon, " icon"))));
+            }, innerHTML: (_a = apolloIcons.getIcon(this.icon)) === null || _a === void 0 ? void 0 : _a.toSVG(options) }), h("figcaption", { key: '3c7a383da59ac0766500273799b203a28c7c7ff3' }, this.icon, " icon"))));
     }
     static get is() { return "xpl-icon"; }
     static get originalStyleUrls() {

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

@@ -244,7 +244,7 @@ Datepicker.args = {
     errorMessage: '',
     min: '01/01/2000',
     max: '12/31/2099',
-    required: true,
+    required: false,
     type: 'date',
 };
 Datepicker.parameters = {

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

@@ -195,16 +195,16 @@ export class InputColor {
             top: `${y}px`,
             background: `rgb(${r}, ${g}, ${b})`,
         };
-        return (h(Host, { key: '14fe9097b513719084fd3487b3a18f95c0eaf158', class: "xpl-input-color" }, h("xpl-popover", { key: '8b3d322c236115ab5b487b8ea6fde2227a69cc47', disabled: this.disabled, display: "menu" }, h("div", { key: '8309555df24767e7e3c4131a9d571a23b7b29cc6', slot: "trigger" }, h("div", { key: '8a9edf9c0e2c70f15fdd7add09571e3b0bfef89a', class: {
+        return (h(Host, { key: 'eb7a6f1f77a5d184c05a7825f9f20829b8112d49', class: "xpl-input-color" }, h("xpl-popover", { key: '5f1588d21649cbbdfcadb0ab2bd46f848c7fc2d8', disabled: this.disabled, display: "menu" }, h("div", { key: 'cecec4d250e2c3b26fc364436f2d16fb97162dff', slot: "trigger" }, h("div", { key: '02a4945abec58618cb116eb04bca1c4672f16a4f', class: {
                 'xpl-input-color__display': true,
                 'xpl-input-color__display--disabled': this.disabled,
                 'xpl-input-color__display--error': !!this.hasErrorState,
-            } }, h("span", { key: '0d1c39976d6b95e0ff25b46b00b9a3d6796c8f8e', class: "xpl-input-color__color", style: {
+            } }, h("span", { key: '622be07c8fe6de7c5d714a8961146ff53160247d', class: "xpl-input-color__color", style: {
                 background: objectToStringColor(this.colorValues),
-            } }), this.colorValues.hex ? (h("span", { class: "xpl-input-color__value" }, objectToStringColor(this.colorValues))) : (h("span", { class: "xpl-input-color__placeholder" }, this.placeholder)), this.eyeDropperSupported && !this.hideEyeDropper && (h("xpl-icon", { key: '2b5ab7d7927e9685652de5e5ea843b970465d568', size: 20, icon: "eye-dropper", class: "xpl-input-color__icon", onClick: (e) => {
+            } }), this.colorValues.hex ? (h("span", { class: "xpl-input-color__value" }, objectToStringColor(this.colorValues))) : (h("span", { class: "xpl-input-color__placeholder" }, this.placeholder)), this.eyeDropperSupported && !this.hideEyeDropper && (h("xpl-icon", { key: 'fd14c6b7aad4e33977008cf11b5cbff2352aab80', size: 20, icon: "eye-dropper", class: "xpl-input-color__icon", onClick: (e) => {
                 e.stopPropagation();
                 this.openEyeDropper();
-            } })))), h("div", { key: 'd564121400cc8adde26658ad15f25403f2672988', class: "xpl-input-color__menu" }, h("div", { key: '896f8b010eb20a03c0c838467f7a8f7d7e6980e1', class: "xpl-input-color__sl-grid", ref: (el) => {
+            } })))), h("div", { key: 'ad85b32a641a3bf0face2efa81fe14de17777fdf', class: "xpl-input-color__menu" }, h("div", { key: 'caaee0b4bf18c0c3dbc72745167df475b0cc91cc', class: "xpl-input-color__sl-grid", ref: (el) => {
                 this.colorInputElements.slGrid = el;
             }, style: {
                 background: [
@@ -212,9 +212,9 @@ export class InputColor {
                     `linear-gradient(to right, #fff, #fff0)`,
                     `rgb(${hueBaseColor.r} ${hueBaseColor.g} ${hueBaseColor.b})`,
                 ].join(', '),
-            }, onMouseDown: this.startDrag, onTouchStart: this.startDrag }, h("div", { key: 'af50abd9fc235df8ed6c0e399d6b755078c86182', class: "xpl-input-color__sl-thumb", style: slThumbStyle })), h("div", { key: '8bdbdfee8d6c09534700744a420ac80b89330789', class: "xpl-input-color__grid" }, h("input", { key: '9e918ed41384861a55847709980d65751f1e8fbe', type: "range", min: "0", max: "360", value: this.hue, class: "xpl-input-color__slider xpl-input-color__hue", name: "color-hue-slider", ref: (el) => {
+            }, onMouseDown: this.startDrag, onTouchStart: this.startDrag }, h("div", { key: '34867bf1cbca3e4d56552e02ba99a112c061be64', class: "xpl-input-color__sl-thumb", style: slThumbStyle })), h("div", { key: '3070aa4d152d18944a7942dc7298538be432fb2c', class: "xpl-input-color__grid" }, h("input", { key: '557445a1167af6ebfb786fbe390b63167ac0c2bf', type: "range", min: "0", max: "360", value: this.hue, class: "xpl-input-color__slider xpl-input-color__hue", name: "color-hue-slider", ref: (el) => {
                 this.colorInputElements.hue = el;
-            } }), h("input", { key: 'a352b5ed96dff5fbc5e1dce6e241e34d2f847f5d', type: "range", min: "0", max: "1", step: "0.01", value: a, class: "xpl-input-color__slider xpl-input-color__alpha", name: "color-alpha-slider", ref: (el) => {
+            } }), h("input", { key: '86cabdd053207c6073592b46a85fe74ca74942fb', type: "range", min: "0", max: "1", step: "0.01", value: a, class: "xpl-input-color__slider xpl-input-color__alpha", name: "color-alpha-slider", ref: (el) => {
                 this.colorInputElements.alpha = el;
             }, style: {
                 backgroundImage: [
@@ -224,9 +224,9 @@ export class InputColor {
                     `linear-gradient(45deg, transparent 75%, #ccc 75%)`,
                     `linear-gradient(-45deg, transparent 75%, #ccc 75%)`,
                 ].join(', '),
-            } }), h("div", { key: 'df000dcb3466bc5be835d55381562c356ecc8c17', class: "xpl-input-color__preview", style: {
+            } }), h("div", { key: 'bb9ee49e36d78441380248bdb021443f9abbb250', class: "xpl-input-color__preview", style: {
                 background: `rgba(${r}, ${g}, ${b}, ${a})`,
-            } })), h("div", { key: 'fc79485821cc081e14007aefdfd4b14bbd875a1e', class: "xpl-input-color__inputs" }, Object.entries(this.colorInputElements)
+            } })), h("div", { key: '08bc820781d2de091036289b50f9f5f3810db61b', class: "xpl-input-color__inputs" }, Object.entries(this.colorInputElements)
             .filter(([key]) => ['hex', 'r', 'g', 'b', 'a'].includes(key))
             .map(([key]) => (h("xpl-input", { key: key, label: key.toLocaleUpperCase(), name: `color-${key}-input`, placeholder: key === 'hex' ? '793EF7' : '0', value: this.colorValues[key], ref: (elRef) => {
                 this.colorInputElements[key] = elRef;

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

@@ -78,16 +78,16 @@ export class InputDate {
         parent.removeChild(wrapper);
     }
     render() {
-        return (h(Host, { key: '35b39ed37afa33603772cdd0dce79cf7533d36ec', class: {
+        return (h(Host, { key: 'c2707549e3285693ce4c7e0449e047be90640504', class: {
                 'xpl-input-date': true,
                 [`xpl-input-date--mode-${this.mode}`]: true,
                 'xpl-input-date--error': !!this.hasErrorState,
                 'xpl-input-date--flatpickr-static': this.flatpickrStaticLayout,
-            } }, h("div", { key: '14940421a3f9fb4e7a5acbd5abb222d927a701cf', class: "xpl-input-wrapper" }, this.pre && (h("label", { key: '108b33b4f0a87bacff90480633327dd221f6b1d4', class: "xpl-input-pre", htmlFor: this.inputId }, this.pre)), h("input", { key: '00633c5b69d25a94d7cd8501bde70459e8ebf2ce', type: "date", id: this.inputId, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, placeholder: this.placeholder, max: this.max, min: this.min, ref: (el) => {
+            } }, h("div", { key: 'e6ac05a6d58d92570331489b8a317d17c0726873', class: "xpl-input-wrapper" }, this.pre && (h("label", { key: 'ef746e91506c2bd2c2bc9986bfbb7f0b82a0f079', class: "xpl-input-pre", htmlFor: this.inputId }, this.pre)), h("input", { key: '125e566456a2de4d75fe38fee50a78de886b8009', type: "date", id: this.inputId, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, placeholder: this.placeholder, max: this.max, min: this.min, ref: (el) => {
                 this.input = el;
             }, onChange: (event) => {
                 this.valueChanged(event);
-            } }), h("xpl-icon", { key: 'ba0d694b7ace1359d6901c0110dce40a78805f74', class: "xpl-input-calendar", icon: "calendar-month", size: 24 }), this.post && (h("label", { key: '5ca7564e2096b697a75ebfb573654c0c23125245', class: "xpl-input-post", htmlFor: this.inputId }, this.post)))));
+            } }), h("xpl-icon", { key: '34c346be1a3c66d4e5eab1882426ef0691c8b6cd', class: "xpl-input-calendar", icon: "calendar", size: 24 }), this.post && (h("label", { key: '1d2ab5b80daad9964e364a069f548d5250067f84', class: "xpl-input-post", htmlFor: this.inputId }, this.post)))));
     }
     static get is() { return "xpl-input-date"; }
     static get properties() {

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

@@ -33,18 +33,18 @@ export class InputFile {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: 'ec1645e7d48cf2b146727a6c131dbd7572468f17', class: {
+        return (h(Host, { key: '579d1ec1094bc5b1aeec622996694728fb1facca', class: {
                 'xpl-input-file': true,
                 'xpl-input-file--hide-trigger-on-select': this.hideTriggerOnSelect,
                 'xpl-input-file--disabled': this.disabled,
-            } }, h("span", { key: '8dc3e290dcddba706316ec41443e2e87aa82f79f', class: {
+            } }, h("span", { key: '66b3cc31f1e2bfa4ee1896e64a667e2a26166b50', class: {
                 'xpl-input-file__trigger-wrapper': true,
                 'xpl-input-file__trigger-wrapper--hidden': this.hideTriggerOnSelect && ((_a = this.files) === null || _a === void 0 ? void 0 : _a.length) > 0,
-            }, role: "button", tabIndex: 0, onClick: this.openFileDialog }, h("slot", { key: '2d2391a2ccca22170bfa0b9ace50a42fdba54284', name: "trigger" })), ((_b = this.files) === null || _b === void 0 ? void 0 : _b.length) > 0 && !this.hideFileNames && (h("ul", { key: 'c302bbbb5c1977c513dba82db70da1615f39a217', class: "xpl-input-file__file-list" }, this.files.map((file, fileIndex) => (h("li", { class: "xpl-input-file__file-item" }, h("span", { class: "xpl-text-callout" }, file.name), h("xpl-icon", { icon: "x-circle", size: 24, onClick: (e) => {
+            }, role: "button", tabIndex: 0, onClick: this.openFileDialog }, h("slot", { key: '53b23be4e2a5b0f920e650c14e591cb1de3b8bac', name: "trigger" })), ((_b = this.files) === null || _b === void 0 ? void 0 : _b.length) > 0 && !this.hideFileNames && (h("ul", { key: '53a294c3765d5b6229f5ed79023095538a1c5edf', class: "xpl-input-file__file-list" }, this.files.map((file, fileIndex) => (h("li", { class: "xpl-input-file__file-item" }, h("span", { class: "xpl-text-callout" }, file.name), h("xpl-icon", { icon: "x-circle", size: 24, onClick: (e) => {
                 e.preventDefault();
                 e.stopPropagation();
                 this.onRemoveFileByIndex(fileIndex);
-            }, class: "xpl-input-file__remove-icon" })))))), this.accept && !this.hideAcceptText && (h("span", { key: '9252c5450f32e8d2ed478af9f84eef4a26cee49f', class: "xpl-input-file__accept xpl-text-caption" }, "Accepted file types: ", this.accept)), h("input", { key: 'd44213b6fd075bfb12c7857d3a56e06f78ef0fdc', onChange: this.handleFileChange, type: "file", ref: (el) => {
+            }, class: "xpl-input-file__remove-icon" })))))), this.accept && !this.hideAcceptText && (h("span", { key: 'afcd0be79ed4ffa5696990eb76d8615f61c430f9', class: "xpl-input-file__accept xpl-text-caption" }, "Accepted file types: ", this.accept)), h("input", { key: '08ffdfed6e25b11363e664abe7bdb66ae6b96bb7', onChange: this.handleFileChange, type: "file", ref: (el) => {
                 this.fileInput = el;
             }, hidden: true, accept: this.accept, multiple: this.multiple, name: this.name })));
     }