@xplortech/apollo-core 2.6.0 → 2.7.0

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

@@ -35,7 +35,7 @@ export class Choicelist {
         this.onChoicesPropChange(this.choices);
     }
     render() {
-        return (h(Host, { key: 'c6a7762863d6d19c1a9d72cfcc14e1d6e0f02850', class: "xpl-choicelist-container" }, this.heading !== undefined || this.description !== undefined ? (h("div", { class: "xpl-choicelist-heading" }, this.heading && h("h3", null, this.heading), this.description && h("p", null, this.description))) : null, this.choices && (h("ul", { key: 'a7f81d04dea87b90b86548e9eceeb802e0f4f57f', class: {
+        return (h(Host, { key: '3e1881fd40ea2aecefbb24951920b92ac08ef029', class: "xpl-choicelist-container" }, this.heading !== undefined || this.description !== undefined ? (h("div", { class: "xpl-choicelist-heading" }, this.heading && h("h3", null, this.heading), this.description && h("p", null, this.description))) : null, this.choices && (h("ul", { key: '052b5c72e4bc37b84939b639e070b8e692064ffe', class: {
                 'xpl-choicelist': true,
                 'xpl-choicelist--styled': this.styled,
             } }, this.choices.map((choice, i) => {

package/dist/collection/components/xpl-content-area/xpl-content-area.js

@@ -4,7 +4,7 @@ export class ContentArea {
         this.size = 'wide';
     }
     render() {
-        return (h(Host, { key: '5ce34f544fa975f9cbd46defced08033bb1eef9b' }, h("main", { key: '3e4b262bc54788d50b6b329936f7aee1c1f6be69', class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, h("div", { key: '5e4f9fa89830360f151c89ebb787d525c3c0940e', class: "xpl-content-area" }, h("slot", { key: 'e22c2759aa45d4a99c92541073abf011d34474f9' })))));
+        return (h(Host, { key: 'cef99f9f6ab92587151d12cf86b67fedba498b66' }, h("main", { key: '17b27ecd7223283294ea7536a7cfe9c6580c4ec4', class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, h("div", { key: '566d17a37f8389b10d95d2db96c4df1e3e0a01ec', class: "xpl-content-area" }, h("slot", { key: 'f084437566dc11ac51cd57e514ebb3bade2826e6' })))));
     }
     static get is() { return "xpl-content-area"; }
     static get properties() {

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class Dashboard {
     render() {
-        return (h(Host, { key: 'aa4f209d95236a7e2c3e6f6915c989a110202c80' }, h("dl", { key: '890e6fb69af3154ee47c1b40498ed37c5d8a6a1a', class: "xpl-dashboard" }, h("slot", { key: 'e4a47f80f873cf53844283e47c59f174fc79fda0' }))));
+        return (h(Host, { key: '7894283eaf23b979cd2f30bdd3dafee98d2a82e0' }, h("dl", { key: '0e67c4909212d1ce954d2eef615443179925c1bf', class: "xpl-dashboard" }, h("slot", { key: '420cf5e409a1699e3b92b4deb38d49fca67caa50' }))));
     }
     static get is() { return "xpl-dashboard"; }
 }

package/dist/collection/components/xpl-data-card/xpl-data-card.js

@@ -31,8 +31,8 @@ export class DataCard {
             : this.smallStatVariant === 'negative'
                 ? 'arrow-down-right'
                 : 'dash';
-        return (h(Host, { key: 'c9a108ce28ed8904ef2f39f8d28e3becdd3da427', role: "group", class: `xpl-data-card ${this.link ? 'xpl-data-card__link' : ''}`, tabindex: "0" }, h("dt", { key: '376323f4f00a84b903b31d3b72b21d83f86cb8d7', class: headerClasses }, h("header", { key: '7385e8fac7f9eb6f8f9c9235f7de8395de376510' }, !!this.leadingIcon && this.icon && (h("span", { key: 'bd43a5ad7f0d4c3afacd83b0d77b00fbfbbc9bfe', class: `xpl-data-card__icon--${this.variant}` }, h("xpl-icon", { key: '914e9897881a07fd0a76eaa24f7b862e0d2237d8', icon: this.icon, "background-color": bgColorHue, size: 20 }))), h("slot", { key: 'dc317fbb7055845149737d3699d39759b42be5a4', name: "title" }, this.name)), this.link && (h("span", { key: 'ea569e40ee3e746073c1dee3e1be98af63cda682', class: "xpl-data-card__header-arrow" }, h("xpl-icon", { key: '4da084735e560701a8407ec044b9e6d8ea9d5a1f', icon: "chevron-right", size: 16 })))), h("dd", { key: '218fd7271e49509d9b29484ba7becb3237fae283', class: "xpl-data-card__body" }, h("div", { key: 'e8a723a5d2742c42b681cbde6ca880a9833301ba', class: "xpl-data-card__left" }, h("span", { key: '9b9cfbc7ff6d1cb81d867e044766559e07f0bee9', class: "xpl-data-card-stat xpl-data-card-stat--long" }, this.stat), this.tooltipTextStat ? (h("xpl-tooltip", { text: this.tooltipTextStat }, h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, this.shortStat ? this.shortStat : this.stat))) : (h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, h("abbr", { title: this.stat }, this.shortStat ? this.shortStat : this.stat))), this.smallStatVariant ? (this.tooltipTextSmallStat ? (h("xpl-tooltip", { text: this.tooltipTextSmallStat }, h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (this.smallStatIcon &&
-            (this.tooltipTextSmallStat ? (h("xpl-tooltip", { text: this.tooltipTextSmallStat }, h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat))) : (h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat)))), !!this.detail && h("span", { key: 'f6236b30f5fababdb27dfb0767b0b9f230019e87', class: "xpl-data-card__detail" }, this.detail)), hasContentSlot && (h("div", { key: '614af9eb3f33fde8d489fe547a2f0e833f6e9655', class: "xpl-data-card__right" }, h("slot", { key: 'd71b6775e27537744ca4bee20c530b5aa1e6e830', name: contentSlot }))))));
+        return (h(Host, { key: '15499953647bf4b8c38c98b2beafbc30adececd3', role: "group", class: `xpl-data-card ${this.link ? 'xpl-data-card__link' : ''}`, tabindex: "0" }, h("dt", { key: '6b4ac5e8e9fdffa254618b70f8ca4abb5c244361', class: headerClasses }, h("header", { key: '398ae3fcc452fe3281b006497cd5bca10d5405f3' }, !!this.leadingIcon && this.icon && (h("span", { key: '872e3b75a6cb7f3b6ae28f16da84b7264aeeb1e7', class: `xpl-data-card__icon--${this.variant}` }, h("xpl-icon", { key: '23452cb159ee169040132182e0c7701d6f537c61', icon: this.icon, "background-color": bgColorHue, size: 20 }))), h("slot", { key: '492cec94080ea654732e8a14214d78bcf844abf6', name: "title" }, this.name)), this.link && (h("span", { key: '2c31f2d7e9c96b81465a855e156504ce825c9f97', class: "xpl-data-card__header-arrow" }, h("xpl-icon", { key: '1b5f695dc1062c8934569924334aafeb0c4f50d5', icon: "chevron-right", size: 16 })))), h("dd", { key: '6b45e5c1e3bb58fb2a690a633ad601694917b2fb', class: "xpl-data-card__body" }, h("div", { key: 'a6d27211c38c758f7cfb59d5597ac4f0c991bd31', class: "xpl-data-card__left" }, h("span", { key: '92f23b34ba9d72e934c6db3d120ab6e8d3ccfe97', class: "xpl-data-card-stat xpl-data-card-stat--long" }, this.stat), this.tooltipTextStat ? (h("xpl-tooltip", { text: this.tooltipTextStat }, h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, this.shortStat ? this.shortStat : this.stat))) : (h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, h("abbr", { title: this.stat }, this.shortStat ? this.shortStat : this.stat))), this.smallStatVariant ? (this.tooltipTextSmallStat ? (h("xpl-tooltip", { text: this.tooltipTextSmallStat }, h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (this.smallStatIcon &&
+            (this.tooltipTextSmallStat ? (h("xpl-tooltip", { text: this.tooltipTextSmallStat }, h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat))) : (h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat)))), !!this.detail && h("span", { key: 'c776c1bb00bca03edbe6e5ed60f712b830ba40e5', class: "xpl-data-card__detail" }, this.detail)), hasContentSlot && (h("div", { key: '5d0acee9071c6356830c6f55dd5066ac68bbc356', class: "xpl-data-card__right" }, h("slot", { key: 'c513a4cd650d309fdc06045e02315fdab9256eae', name: contentSlot }))))));
     }
     static get is() { return "xpl-data-card"; }
     static get properties() {

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: 'cdafb808588e7baf9271997503dea7b53597b15f', class: className }, h("span", { key: '119067065dc21dd71b25ba81b5d83232f4953ebc' }, h("slot", { key: '8cc9077442f20703efc50094056cb7d15782252a' }))));
+        return (h(Host, { key: 'a0b934233c1afba99b2d3691a6ea14d3335e4119', class: className }, h("span", { key: '8d701723f174d846e717cd030c4faf72ae938da8' }, h("slot", { key: '5017353de8a9917358c9ba4194fe5a575720f8f5' }))));
     }
     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: '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" })))));
+        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: '8f7d858ca1ee011e03b069948b1c948c7693725f', class: { 'xpl-dropdown-heading': true }, role: "presentation" }, h("span", { key: '56679ee9d35a995a72249f4494983652bacf0832' }, this.label || h("slot", { key: '3e657744c62647b42d249379927fab9ca9a258f6', 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: '207cafd793f52598fdbbe3104ff0207261e086c4', 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: '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))));
+            }, 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

@@ -222,12 +222,12 @@ export class Dropdown {
                 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: '9951124106d4123d98db2b9bdc906f51d145c5e6', "aria-expanded": isOpen ? 'true' : 'false', class: {
+        return (h(Host, { key: 'ef1637b50d96200219f93a992cecd838bdc37ae7', "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: '61b8daf20ef87a8ae7bad8fa494c104d58cc61f8', name: "header" }), h("ul", { key: 'ac14c8acf2927b931d4c74673af5f12f5d9514c1', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: 'c820c142bdb64ec4189dd5869d71d4339dc97814', name: "options" }))));
+            }, role: "listbox" }, h("slot", { key: '69889998dda0b69e3e582b089baf295c8cfca39d', name: "header" }), h("ul", { key: 'dcb7e840e724ebae950f8c85fca142bcf767cc5d', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: 'b33fd8bb6a1871db5e04173f0ad55a6485ee474a', name: "options" }))));
     }
     static get is() { return "xpl-dropdown"; }
     static get properties() {

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: 'aa9fdd991fca8dab538176a950636b52db539f7a', role: "grid", class: "xpl-dynamic-table", "aria-colcount": this.colCount }, h("slot", { key: 'd05d799f1a0d944398f1ae9992dbcbb56a52f184', name: "header" }), h("slot", { key: '7f212255dbf15e8358cef6097d55b973f73bd086', name: "body" })));
+        return (h("div", { key: '9ae7568410463f24a85e39da8b14dc70e99730c3', role: "grid", class: "xpl-dynamic-table", "aria-colcount": this.colCount }, h("slot", { key: 'c84c62c9eb47d1bf02c6e7d8a8c3d59542ef5f7b', name: "header" }), h("slot", { key: '26012976f5d8474f4a648816e9dc92355611177a', 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: 'd4b284973e5c1f76a9355f77749c6b6432e4f469', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
+        return (h(Host, { key: '924f54186ae2eb07bb4fab65eed7815f60be3a95', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
                 this.hostElement = el;
-            } }, h("slot", { key: 'd9365d26d5b4fb9e50cd3b08514eeae3bfdd6888' })));
+            } }, h("slot", { key: 'a18ef630d9f7f4c8b4079f2d83afe6b28700fb90' })));
     }
     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: '7ce6f2c780af4f7bd4053970bff3e620fef4913a', role: "row", class: classList, ref: (el) => {
+        return (h(Host, { key: 'b1a117c4961d5a2f618510159b292184c2c1aed3', role: "row", class: classList, ref: (el) => {
                 this.hostElement = el;
-            } }, h("slot", { key: 'b77362a23d8d69844560e7389e5cd7f6b5568d88' })));
+            } }, h("slot", { key: 'be0ef005b0ed337272e92d29dda61dcbe966c4ed' })));
     }
     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: '89b723cb2e01669c5edd69a3fbbbdce834f05dd3', 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: 'd4e9ba6dc2049aa0a88d266934a9499daf66d0a9', class: className }, h("slot", { key: 'fef8f150e57fcc72147111fe10088d46adc324d8' })));
+        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

@@ -1,13 +1,13 @@
 import { Host, h } from "@stencil/core";
 export class HeaderAccordion {
     constructor() {
-        this.initialExpanded = false;
-        this.disabled = false;
-        this.selectedCount = -1;
-        this.hasCheckbox = true;
-        this.expanded = this.initialExpanded;
+        this.expanded = false;
         this.parentChecked = false;
         this.parentIndeterminate = false;
+        this.disabled = false;
+        this.hasCheckbox = true;
+        this.initialExpanded = false;
+        this.selectedCount = -1;
         this.toggleAccordion = () => {
             this.expanded = !this.expanded;
         };
@@ -21,21 +21,26 @@ export class HeaderAccordion {
             });
         };
     }
-    applyBorderRadiusToLastRow() {
-        var _a;
-        if (this.expanded) {
-            const rows = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('xpl-dynamic-table-row');
-            const lastRow = rows[rows.length - 1];
-            const cells = lastRow === null || lastRow === void 0 ? void 0 : lastRow.querySelectorAll('xpl-dynamic-table-cell');
-            cells[0].style.borderBottomLeftRadius = '0.5rem';
-            cells[cells.length - 1].style.borderBottomRightRadius = '0.5rem';
-        }
-    }
-    watchSelectedCount(selectedCount, _previousCount) {
+    watchSelectedCount(selectedCount) {
         if (selectedCount > -1) {
             this.updateParentCheckbox(selectedCount);
         }
     }
+    componentWillLoad() {
+        this.expanded = this.initialExpanded;
+    }
+    componentDidLoad() {
+        const initialCheckboxesValue = this.selectedCount > -1 ? this.selectedCount : 0;
+        this.updateParentCheckbox(initialCheckboxesValue);
+    }
+    handleChildCheckboxChange() {
+        var _a;
+        if (this.selectedCount === -1) {
+            const childCheckboxes = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[role="region"] xpl-checkbox input:not([disabled])');
+            const checkedCount = Array.from(childCheckboxes).filter((checkbox) => checkbox.checked).length;
+            this.updateParentCheckbox(checkedCount);
+        }
+    }
     updateParentCheckbox(selectedCount) {
         var _a;
         const childCheckboxes = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[role="region"] xpl-checkbox input:not([disabled])');
@@ -52,23 +57,11 @@ export class HeaderAccordion {
             this.parentIndeterminate = true;
         }
     }
-    handleChildCheckboxChange() {
-        var _a;
-        if (this.selectedCount === -1) {
-            const childCheckboxes = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[role="region"] xpl-checkbox input:not([disabled])');
-            const checkedCount = Array.from(childCheckboxes).filter((checkbox) => checkbox.checked).length;
-            this.updateParentCheckbox(checkedCount);
-        }
-    }
-    componentDidLoad() {
-        const initialCheckoxesValue = this.selectedCount > -1 ? this.selectedCount : 0;
-        this.updateParentCheckbox(initialCheckoxesValue);
-    }
-    componentWillRender() {
-        this.applyBorderRadiusToLastRow();
-    }
     render() {
-        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" }))));
+        return (h(Host, { key: '216b10c02e1248c374ec646d30f835163b9b7792', class: {
+                'xpl-header-accordion': true,
+                'xpl-header-accordion--expanded': this.expanded,
+            } }, h("div", { key: '41cbb9358a5d76f44f135d76c945fe801cafc474', class: `header-accordion header-accordion--${this.expanded ? 'expanded' : 'collapsed'}` }, this.hasCheckbox && (h("xpl-checkbox", { key: 'c939d100f687b14455424ee3f0b6bdfd7de785bb', class: "xpl-header-accordion__parent-checkbox", checked: this.parentChecked, disabled: this.disabled, indeterminate: this.parentIndeterminate, onCheckboxChange: (event) => this.handleParentCheckboxChange(event.detail) })), h("button", { key: '4d98d8d75b4c7c7ba8e50ce6d43ed3b83919d624', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "toggle-area", onClick: this.toggleAccordion, type: "button" }, h("slot", { key: 'd9c993b7e8e6cf0b46014d6c535a52c84386b8ed', name: "title" }), h("xpl-icon", { key: '58d114ae4dd93c9ec15e3d74cfb2d33c6c1b57cb', size: 20, icon: "chevron-down", class: this.expanded && 'rotate' }))), h("div", { key: '46a98c094621ec02c9416bcfa7a2d33e6ce468d4', id: this.contentId, role: "region", class: !this.expanded ? 'content--hidden' : 'content--shown' }, h("slot", { key: '7966e352ec17125afa59a7590dbc8e9372a39f41', name: "content" }))));
     }
     static get is() { return "xpl-header-accordion"; }
     static get properties() {
@@ -92,7 +85,7 @@ export class HeaderAccordion {
                 "reflect": false,
                 "attribute": "content-id"
             },
-            "initialExpanded": {
+            "disabled": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -104,15 +97,15 @@ export class HeaderAccordion {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the accordion is expanded initially."
+                    "text": "Whether the accordion is disabled."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "initial-expanded",
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
-            "disabled": {
+            "hasCheckbox": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -124,53 +117,53 @@ export class HeaderAccordion {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the accordion is disabled."
+                    "text": "Whether to display a parent checkbox in the accordion header."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "disabled",
-                "defaultValue": "false"
+                "attribute": "has-checkbox",
+                "defaultValue": "true"
             },
-            "selectedCount": {
-                "type": "number",
+            "initialExpanded": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The number of selected child items, or -1 to auto-calculate."
+                    "text": "Whether the accordion is expanded initially."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "selected-count",
-                "defaultValue": "-1"
+                "attribute": "initial-expanded",
+                "defaultValue": "false"
             },
-            "hasCheckbox": {
-                "type": "boolean",
+            "selectedCount": {
+                "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "number",
+                    "resolved": "number",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether to display a parent checkbox in the accordion header."
+                    "text": "The number of selected child items, or -1 to auto-calculate."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "has-checkbox",
-                "defaultValue": "true"
+                "attribute": "selected-count",
+                "defaultValue": "-1"
             }
         };
     }

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: 'c622a660e3ed7d9dce7dc08a868360ffc43f2f8d' }, h("figure", { key: 'c12f8de568fa6e652914fbc894a1269f6085d880', class: wrapperClasses }, h("span", { key: 'a8386f0d0fc3848a36b5120dd5f24356c403d0f5', "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: '4d56222dc219feedd1e8e2c957ca01728a845b56' }, 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

@@ -8,6 +8,7 @@ export default {
                 'valueChange',
                 'hasErrorStateChanged',
                 'rangeSelected',
+                'search',
             ],
         },
     },
@@ -32,7 +33,17 @@ export default {
             type: { name: 'string', required: false },
         },
         type: {
-            options: ['text', 'number', 'file', 'password', 'date', 'time', 'color', 'phone'],
+            options: [
+                'text',
+                'number',
+                'file',
+                'password',
+                'date',
+                'time',
+                'color',
+                'phone',
+                'search',
+            ],
             control: {
                 type: 'select',
             },
@@ -599,3 +610,87 @@ Phone.parameters = {
                 </div>`)(),
     },
 };
+export const Search = ({ label, description, disabled, error, readonly, errorMessage, placeholder, value, name, shape, autocomplete, ariaLabel, }) => {
+    let attrs = ' type="search"';
+    if (label !== undefined && label !== '')
+        attrs += ` label="${label}"`;
+    if (description)
+        attrs += ` description="${description}"`;
+    if (disabled)
+        attrs += ` disabled`;
+    if (error)
+        attrs += ` error${errorMessage ? `="${errorMessage}"` : ''}`;
+    if (placeholder)
+        attrs += ` placeholder="${placeholder}"`;
+    if (value)
+        attrs += ` value="${value}"`;
+    if (name)
+        attrs += ` name="${name}"`;
+    if (shape)
+        attrs += ` shape="${shape}"`;
+    if (autocomplete)
+        attrs += ` autocomplete="${autocomplete}"`;
+    if (ariaLabel)
+        attrs += ` aria-label="${ariaLabel}"`;
+    if (readonly)
+        attrs += ` readonly`;
+    return `<xpl-input${attrs}></xpl-input>`;
+};
+Search.args = {
+    ariaLabel: '',
+    autocomplete: '',
+    description: '',
+    disabled: false,
+    error: false,
+    errorMessage: '',
+    label: '',
+    readonly: false,
+    name: '',
+    placeholder: 'Search…',
+    shape: 'rounded',
+    value: '',
+};
+Search.argTypes = {
+    ariaLabel: {
+        control: { type: 'text' },
+        description: 'Accessible name when no visible label (search inputs only)',
+    },
+    shape: {
+        control: { type: 'select' },
+        options: ['rounded', 'box'],
+    },
+};
+Search.parameters = {
+    layout: 'centered',
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=2430-168374&p=f&t=oG14CHMwd7GirmPv-11',
+    },
+    'web-component': {
+        render: Search(Search.args),
+    },
+    html: {
+        render: (() => `
+<div class="xpl-input xpl-input--search">
+  <div class="xpl-input-search">
+    <form class="xpl-input-search__form">
+      <div class="xpl-input-search__shell">
+        <span class="xpl-input-search__icon" aria-hidden="true"></span>
+        <input
+          class="xpl-input-search__input"
+          id="search-html-id"
+          name="${Search.args.name}"
+          type="text"
+          role="searchbox"
+          aria-label="Search"
+          placeholder="${Search.args.placeholder}"
+          autocomplete="off"
+        />
+        <button type="button" class="xpl-input-search__clear" aria-label="Clear search"></button>
+      </div>
+    </form>
+  </div>
+</div>
+`)(),
+    },
+};

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

@@ -193,16 +193,16 @@ export class InputColor {
             top: `${y}px`,
             background: `rgb(${r}, ${g}, ${b})`,
         };
-        return (h(Host, { key: 'a8cdba9ff504fbeaf7b21167b778d8cf00216a1a', class: "xpl-input-color" }, h("xpl-popover", { key: '535497f6aba0e7e9e65b894cd8c62cebe8ad3dd5', disabled: this.disabled, display: "menu" }, h("div", { key: '436c51111938bbbef99698b94bd5c3123bc0b42d', slot: "trigger" }, h("div", { key: '09e8f57c0d1a35d1b0a5785ebb141db62c3db4d2', class: {
+        return (h(Host, { key: '6f03535db1b5f451c74a0f1a1abc586605e5c9ca', class: "xpl-input-color" }, h("xpl-popover", { key: 'dae1f3a3b7afdd9231b6feba2d3711fbd1d6716e', disabled: this.disabled, display: "menu" }, h("div", { key: 'a8402cf534186d06f940c3e3436db17afb0152e8', slot: "trigger" }, h("div", { key: 'e9e775229df2a4f8afa252ef03c0a0cd15a93aa4', class: {
                 'xpl-input-color__display': true,
                 'xpl-input-color__display--disabled': this.disabled,
                 'xpl-input-color__display--error': !!this.hasErrorState,
-            } }, h("span", { key: '76da6216e95d48dd5cdbb890e7fe14cf1be85c6b', class: "xpl-input-color__color", style: {
+            } }, h("span", { key: '9abe3e899192f4f08e682f8d7a9a9af9adf5982f', 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: 'c4a560be47d17c98f353c0e324c0f9025f535fae', 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: '9e6832ca2ca1b91c9bf91b1816c1f7c8169202f3', size: 20, icon: "eye-dropper", class: "xpl-input-color__icon", onClick: (e) => {
                 e.stopPropagation();
                 this.openEyeDropper();
-            } })))), h("div", { key: '844a66fa0523b133ce3e2b6d83e395254e9b513f', class: "xpl-input-color__menu" }, h("div", { key: 'c687aaa94b122258e09cffabcc5029905ddccb27', class: "xpl-input-color__sl-grid", ref: (el) => {
+            } })))), h("div", { key: '86643ca93847cff19653ebb54160588f2764ae17', class: "xpl-input-color__menu" }, h("div", { key: '40f43b769954163f0d22ff8dc80bcd2e0df4777e', class: "xpl-input-color__sl-grid", ref: (el) => {
                 this.colorInputElements.slGrid = el;
             }, style: {
                 background: [
@@ -210,9 +210,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: '7e65660cef09fc5ae0c9dc0d49fe7769ad15b55a', class: "xpl-input-color__sl-thumb", style: slThumbStyle })), h("div", { key: '5e76247d0d59fca5500416ddeaca53784dc42209', class: "xpl-input-color__grid" }, h("input", { key: '5b891dd55f6d4f5d1242d142c9af8a3af496e398', 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: '29f42021c1e55827f1fffcdd416608f01b6bda81', class: "xpl-input-color__sl-thumb", style: slThumbStyle })), h("div", { key: 'e727c66cd44ff40c672f58ae9264485cda3698b7', class: "xpl-input-color__grid" }, h("input", { key: '899cdc6cf61d1452809850dbc847c9df8265437b', 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: 'ae20b7cbfa6303c6615afee0fc35d0dda3bc1f70', 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: '3e72ef16b142fe44bebbcbbd2686fcfa3fb958bc', 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: [
@@ -222,9 +222,9 @@ export class InputColor {
                     `linear-gradient(45deg, transparent 75%, #ccc 75%)`,
                     `linear-gradient(-45deg, transparent 75%, #ccc 75%)`,
                 ].join(', '),
-            } }), h("div", { key: 'c4b884401f5324e37e09637785a2148ef5c99112', class: "xpl-input-color__preview", style: {
+            } }), h("div", { key: 'c389627f5c0fa8878ead7d6765ecbe9b2f82debb', class: "xpl-input-color__preview", style: {
                 background: `rgba(${r}, ${g}, ${b}, ${a})`,
-            } })), h("div", { key: '5d8eff1bf9e51bd44116c01e3bfd016414662d92', class: "xpl-input-color__inputs" }, Object.entries(this.colorInputElements)
+            } })), h("div", { key: 'efd8daf09c022fdc19a6373f0bcd1d32b7548fd2', 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: '35f91387097b7fd5bdc59ff8608c3700470ff367', 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: '7f561dba2b2aa7d308d0029a20ace5d918368afc', class: "xpl-input-wrapper" }, this.pre && (h("label", { key: '2e87d6e22a2a69db7e91c69fb3d59f81d8358e52', class: "xpl-input-pre", htmlFor: this.inputId }, this.pre)), h("input", { key: '53d05e6b6b637e298f31cb1f2b9c56d9d597688f', 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: '45c1d48fe6a312855cf3bd90e139d060821c4ba4', class: "xpl-input-calendar", icon: "calendar-month", size: 24 }), this.post && (h("label", { key: '037657e9a3cecc054d95b6fd835b58885eef8042', class: "xpl-input-post", htmlFor: this.inputId }, this.post)))));
+            } }), h("xpl-icon", { key: '399495edb8791cda73084dcef21663a3d207da2f', class: "xpl-input-calendar", icon: "calendar-month", size: 24 }), this.post && (h("label", { key: '6570bf947a23280b04389ed591f7ea401f14f1a5', 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: '87df3edce40c74988426ba9fcef4bc3f5740c56b', 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: '11e4c220751ce3f06fd15a741a1f8b81d98c18bc', 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: '6daba4f9e520c12a791bfd18f2894e55f0da86f4', name: "trigger" })), ((_b = this.files) === null || _b === void 0 ? void 0 : _b.length) > 0 && !this.hideFileNames && (h("ul", { key: '3459f9c3e8618962c02f1e25e6b80f63fe4d593d', 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: '2c8646cd5ef7e235e75c68bf4832ce1d9c578493', class: "xpl-input-file__accept xpl-text-caption" }, "Accepted file types: ", this.accept)), h("input", { key: 'd303ac9e074e8031ed2d695cc85eef32ef40f058', 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 })));
     }