@xplortech/apollo-core 2.11.0 → 3.0.0

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

@@ -2,7 +2,6 @@ import { Host, h } from "@stencil/core";
 import apolloIcons from "@xplortech/apollo-icons";
 export class Icon {
     render() {
-        var _a;
         let options = {};
         if (this.size !== undefined) {
             if (typeof this.size === 'number') {
@@ -16,10 +15,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: '81c2fcdfacbdb3cc34b1bd870a13041a3b3720c8' }, h("figure", { key: 'd8bc04651492fb705fdc6a10cc44a19013da078b', class: wrapperClasses }, h("span", { key: '8c9d18ade708bbf3caf4e1fce9779680ee9f6892', "aria-label": this.icon, role: "img", class: "xpl-icon", style: {
+        return (h(Host, { key: '2969450a00c78280dca3b7ed44f98f8699c41808' }, h("figure", { key: '56dc93a59a43dc28eb7479696b8d97656a7c7c68', class: wrapperClasses }, h("span", { key: 'f6133fba12fc84a6547575e70997c131c1771ef2', "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: 'd26da1d1df59a9aa414c50bcfb9861d860a6ae65' }, this.icon, " icon"))));
+            }, innerHTML: apolloIcons.getIcon(this.icon)?.toSVG(options) }), h("figcaption", { key: 'c5c9fa42d7c00ea35666b81c7f8ba39f4482572c' }, this.icon, " icon"))));
     }
     static get is() { return "xpl-icon"; }
     static get originalStyleUrls() {

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

@@ -110,18 +110,20 @@ export const rgbToHsv = (r, g, b, fixedHue) => {
     const s = max === 0 ? 0 : delta / max;
     const v = max;
     return {
-        h: fixedHue !== null && fixedHue !== void 0 ? fixedHue : h,
+        h: fixedHue ?? h,
         s,
         v,
     };
 };
-export const hexToRgb = (hex) => hex ? hex.match(/\w\w/g).map((x) => parseInt(x, 16)) : [0, 0, 0];
+export const hexToRgb = (hex) => {
+    const pairs = hex?.match(/\w\w/g);
+    return pairs ? pairs.map((x) => parseInt(x, 16)) : [0, 0, 0];
+};
 export const rgbToHex = (r, g, b) => [r, g, b].map((x) => x.toString(16).padStart(2, '0')).join('');
 export const stringToObjectColor = (input) => {
-    var _a, _b;
     if (input.startsWith('#')) {
         if (!/^#([a-fA-F\d]{6})$/.test(input)) {
-            throw new Error('Only 6-digit hex format supported (e.g. #aabbcc)');
+            throw new Error('xpl-input-color: Only 6-digit hex format supported (e.g. #aabbcc)');
         }
         const hex = input.toLowerCase().slice(1);
         const r = parseInt(hex.slice(0, 2), 16);
@@ -130,9 +132,9 @@ export const stringToObjectColor = (input) => {
         return { hex, r, g, b, a: 1 };
     }
     if (input.startsWith('rgba') || input.startsWith('rgb')) {
-        const match = (_a = input.match(/[\d.]+/g)) === null || _a === void 0 ? void 0 : _a.map(Number);
+        const match = input.match(/[\d.]+/g)?.map(Number);
         if (!match || match.length < 3) {
-            throw new Error('Invalid rgba/rgb format');
+            throw new Error('xpl-input-color: Invalid rgba/rgb format');
         }
         const [r, g, b, a = 1] = match;
         const toHex = (n) => n.toString(16).padStart(2, '0');
@@ -140,17 +142,21 @@ export const stringToObjectColor = (input) => {
         return { hex: hex.toLowerCase(), r, g, b, a };
     }
     if (input.startsWith('hsla') || input.startsWith('hsl')) {
-        const match = (_b = input.match(/[\d.]+/g)) === null || _b === void 0 ? void 0 : _b.map(Number);
+        const match = input.match(/[\d.]+/g)?.map(Number);
         if (!match || match.length < 3) {
-            throw new Error('Invalid hsla/hsl format');
+            throw new Error('xpl-input-color: Invalid hsla/hsl format');
         }
         const [hue, saturation, lightness, alpha = 1] = match;
         const rgba = hslaToRgba(hue, saturation, lightness, alpha);
-        const [r, g, b] = rgba.match(/[\d.]+/g).map(Number);
+        const rgbaParts = rgba.match(/[\d.]+/g)?.map(Number);
+        if (!rgbaParts || rgbaParts.length < 3) {
+            throw new Error('xpl-input-color: Invalid hsla/hsl format');
+        }
+        const [r, g, b] = rgbaParts;
         const hex = rgbToHex(r, g, b);
         return { hex: hex.toLowerCase(), r, g, b, a: alpha };
     }
-    throw new Error('Unsupported color format');
+    throw new Error('xpl-input-color: Unsupported color format');
 };
 export const objectToStringColor = (color) => {
     if (!color.a || color.a === 1) {

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { isBrowser } from "../../../utils/lifecycle";
 import { rgbToHsl, rgbToHex, hexToRgb, objectToStringColor, stringToObjectColor, reverseCursorPosition, hsvToRgb, } from "./color-utils";
 const fallbackColorValues = {
     hex: '',
@@ -10,19 +11,14 @@ const fallbackColorValues = {
 export class InputColor {
     constructor() {
         this.placeholder = 'Select color';
-        this.eyeDropperSupported = 'EyeDropper' in window;
-        this.colorInputElements = {
-            hex: null,
-            r: null,
-            g: null,
-            b: null,
-            a: null,
-            hue: null,
-            slGrid: null,
-            alpha: null,
-        };
+        this.eyeDropperSupported = false;
+        this.colorInputElements = {};
         this.handleMove = (e) => {
-            const rect = this.colorInputElements.slGrid.getBoundingClientRect();
+            const { slGrid } = this.colorInputElements;
+            if (!slGrid) {
+                return;
+            }
+            const rect = slGrid.getBoundingClientRect();
             const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
             const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
             const x = Math.max(0, Math.min(clientX - rect.left, rect.width));
@@ -60,7 +56,6 @@ export class InputColor {
             window.removeEventListener('touchend', this.stopDrag);
         };
         this.onHexInputChange = (event) => {
-            var _a;
             const hex = event.detail ? event.detail.trim().replace(/#/g, '') : '';
             if (hex) {
                 const [r, g, b] = hexToRgb(hex);
@@ -69,11 +64,11 @@ export class InputColor {
                     r,
                     g,
                     b,
-                    a: (_a = this.colorValues.a) !== null && _a !== void 0 ? _a : 1,
+                    a: this.colorValues.a ?? 1,
                 };
             }
             else {
-                this.colorValues = Object.assign({}, fallbackColorValues);
+                this.colorValues = { ...fallbackColorValues };
             }
         };
         this.onRgbaInputChange = (el, event) => {
@@ -82,7 +77,7 @@ export class InputColor {
                 this.hasErrorState = `invalid value from ${el.name}: ${value}`;
                 return;
             }
-            const newColor = Object.assign({}, this.colorValues);
+            const newColor = { ...this.colorValues };
             switch (el.name) {
                 case 'color-r-input':
                     newColor.r = value;
@@ -115,7 +110,10 @@ export class InputColor {
                     this.hue = value;
                     break;
                 case 'color-alpha-slider':
-                    this.colorValues = Object.assign(Object.assign({}, this.colorValues), { a: value });
+                    this.colorValues = {
+                        ...this.colorValues,
+                        a: value,
+                    };
                     break;
                 default:
                     this.hasErrorState = `unhandled input: ${el.name}`;
@@ -144,13 +142,13 @@ export class InputColor {
                 this.colorValues = stringToObjectColor(value);
                 this.hue = rgbToHsl(this.colorValues.r, this.colorValues.g, this.colorValues.b).hue;
             }
-            catch (_a) {
+            catch {
                 this.hasErrorState = 'invalid color format';
                 this.hue = 0;
             }
         }
         else {
-            this.colorValues = Object.assign({}, fallbackColorValues);
+            this.colorValues = { ...fallbackColorValues };
             this.hasErrorState = null;
             this.hue = 0;
         }
@@ -159,26 +157,33 @@ export class InputColor {
         this.syncColorFromValue(this.value);
     }
     componentDidLoad() {
+        if (isBrowser()) {
+            this.eyeDropperSupported = 'EyeDropper' in window;
+        }
         const { r, g, b, a, hue, alpha, hex } = this.colorInputElements;
-        hex.addEventListener('valueChange', (e) => {
+        hex?.addEventListener('valueChange', (e) => {
             this.onHexInputChange(e);
             e.stopPropagation();
         });
         [r, g, b, a].forEach((el) => {
-            el.addEventListener('valueChange', (e) => {
+            el?.addEventListener('valueChange', (e) => {
                 this.onRgbaInputChange(el, e);
                 e.stopPropagation();
             });
         });
         [hue, alpha].forEach((el) => {
-            el.addEventListener('input', () => {
+            el?.addEventListener('input', () => {
                 this.onSliderInputChange(el);
             });
         });
     }
     async openEyeDropper() {
         try {
-            const eyeDropper = new window.EyeDropper();
+            const EyeDropperConstructor = window.EyeDropper;
+            if (!EyeDropperConstructor) {
+                throw new Error('EyeDropper API is not available');
+            }
+            const eyeDropper = new EyeDropperConstructor();
             const result = await eyeDropper.open();
             this.colorValues = stringToObjectColor(result.sRGBHex);
         }
@@ -195,27 +200,27 @@ export class InputColor {
             top: `${y}px`,
             background: `rgb(${r}, ${g}, ${b})`,
         };
-        return (h(Host, { key: '9700bba0a5c9b7cd11135a21167e5e06463483b5', class: "xpl-input-color" }, h("xpl-popover", { key: '486c2fc5660d7e7c60b7922fa4363174baa7892e', disabled: this.disabled, display: "menu" }, h("div", { key: 'c51bd4c77381c46726bf32c319f69611eba845d1', slot: "trigger" }, h("div", { key: '9a78cf317854ce56532d49c551d1e1041daf1484', class: {
+        return (h(Host, { key: '2c4bff1c1b56afdc1b4192a2d7c1e0a1f5ebc073', class: "xpl-input-color" }, h("xpl-popover", { key: 'ba545a5022a532ef2fde8c795bee19f2680514c1', disabled: this.disabled, display: "menu" }, h("div", { key: '180e066079da1a97ba31bcaf66d443df8a0c48ca', slot: "trigger" }, h("div", { key: 'c3cc0cb1484c4111b60b736b750571552437d0cf', class: {
                 'xpl-input-color__display': true,
-                'xpl-input-color__display--disabled': this.disabled,
+                'xpl-input-color__display--disabled': !!this.disabled,
                 'xpl-input-color__display--error': !!this.hasErrorState,
-            } }, h("span", { key: 'a78d2b771ad17897820805f1f5d1e265cdd6cbfa', class: "xpl-input-color__color", style: {
+            } }, h("span", { key: '72aaff4e9a54da1f766d1de85bd58216c866a4b7', 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: '2a176659e06f5f971b1de14c9e6f2978a766dd35', 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: 'f55cfde9a119e9f0de379bc1bfb5b5d4b53aa992', size: 20, icon: "eye-dropper", class: "xpl-input-color__icon", onClick: (e) => {
                 e.stopPropagation();
                 this.openEyeDropper();
-            } })))), h("div", { key: '4cfadf2209a0d453f8a1ecc74a343d63b48c5b36', class: "xpl-input-color__menu" }, h("div", { key: '5acdd216cf4e1714ec493a53c0a974d6d25e0c49', class: "xpl-input-color__sl-grid", ref: (el) => {
-                this.colorInputElements.slGrid = el;
+            } })))), h("div", { key: 'f80f215000d3a906d65f7f6673c6d8eaabe3fc6d', class: "xpl-input-color__menu" }, h("div", { key: '4701c99f8a528900c34005b7c26d9fa544b664d8', class: "xpl-input-color__sl-grid", ref: (el) => {
+                this.colorInputElements.slGrid = el ?? undefined;
             }, style: {
                 background: [
                     `linear-gradient(to top, #000, #0000)`,
                     `linear-gradient(to right, #fff, #fff0)`,
                     `rgb(${hueBaseColor.r} ${hueBaseColor.g} ${hueBaseColor.b})`,
                 ].join(', '),
-            }, onMouseDown: this.startDrag, onTouchStart: this.startDrag }, h("div", { key: '519a19802a049f1c47fe9acd8ca074c9679cb667', class: "xpl-input-color__sl-thumb", style: slThumbStyle })), h("div", { key: '4c6cc466a3ba89897f0b59cce99835f9a2bc842a', class: "xpl-input-color__grid" }, h("input", { key: 'e32fa17e45e231c5d3492c8900feb643ab36f206', 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: '52ca6f9ae33a4129b0b050b7c2c2b8f74616fe5d', 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;
+            }, onMouseDown: this.startDrag, onTouchStart: this.startDrag }, h("div", { key: '3e0ec5c0821dfed35190053f5e4f147cb7b55eb0', class: "xpl-input-color__sl-thumb", style: slThumbStyle })), h("div", { key: '1b278a13c88aa663a2b8217fbc3524ee213e0f3b', class: "xpl-input-color__grid" }, h("input", { key: '5e35bdd6e7776848a2d2eb32a00deb3ec349c21d', 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 ?? undefined;
+            } }), h("input", { key: '1119341201878e5c8511fa3e241afba15eab6d9b', 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 ?? undefined;
             }, style: {
                 backgroundImage: [
                     `linear-gradient(to right, rgb(${r} ${g} ${b} / 0) 0%, rgb(${r} ${g} ${b} / 1) 100%)`,
@@ -224,12 +229,16 @@ export class InputColor {
                     `linear-gradient(45deg, transparent 75%, #ccc 75%)`,
                     `linear-gradient(-45deg, transparent 75%, #ccc 75%)`,
                 ].join(', '),
-            } }), h("div", { key: 'a1cf7bde4bd0d2fc7b19b60cff878f56aeb70e2e', class: "xpl-input-color__preview", style: {
+            } }), h("div", { key: '3804928b107e92bddbc3afa3fa883caafddbd06b', class: "xpl-input-color__preview", style: {
                 background: `rgba(${r}, ${g}, ${b}, ${a})`,
-            } })), h("div", { key: '3a82739b45a8ac2be0e732ea27cff2a583503eaf', 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;
+            } })), h("div", { key: '86961ee31d82724a76f6598bd547c8e650e27f24', class: "xpl-input-color__inputs" }, [
+            'hex',
+            'r',
+            'g',
+            'b',
+            'a',
+        ].map((key) => (h("xpl-input", { key: key, label: key.toLocaleUpperCase(), name: `color-${key}-input`, placeholder: key === 'hex' ? '793EF7' : '0', value: String(this.colorValues[key]), ref: (elRef) => {
+                this.colorInputElements[key] = elRef ?? undefined;
             } }))))))));
     }
     static get is() { return "xpl-input-color"; }

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

@@ -1,6 +1,7 @@
 import { Host, h, } from "@stencil/core";
 import flatpickr from "flatpickr";
 import { getNearestScrollableAncestor, isInsideFixedPosition, } from "../../../utils/layout-ancestors";
+import { isBrowser } from "../../../utils/lifecycle";
 const arrowSvg = (rotate = false) => `<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="${rotate
     ? 'M0.557948 5.6813L6.06209 0.132167C6.23831 -0.0440556 6.52327 -0.0440556 6.69949 0.132167L7.44187 0.874551C7.61809 1.05077 7.61809 1.33573 7.44187 1.51195L2.99882 6L7.44187 10.488C7.61809 10.6643 7.61809 10.9492 7.44187 11.1254L6.69949 11.8678C6.52327 12.0441 6.23831 12.0441 6.06209 11.8678L0.557948 6.3187C0.381726 6.14248 0.381726 5.85752 0.557948 5.6813Z'
     : 'M7.44187 6.3187L1.93773 11.8678C1.76151 12.0441 1.47655 12.0441 1.30033 11.8678L0.557948 11.1254C0.381726 10.9492 0.381726 10.6643 0.557948 10.488L5.001 6L0.557948 1.51195C0.381726 1.33573 0.381726 1.05077 0.557948 0.874551L1.30033 0.132167C1.47655 -0.0440556 1.76151 -0.0440556 1.93773 0.132167L7.44187 5.6813C7.6181 5.85752 7.6181 6.14248 7.44187 6.3187Z'}" /></svg>`;
@@ -18,15 +19,13 @@ export class InputDate {
         this.hasErrorStateChanged.emit(newValue);
     }
     onValueChanged(newValue) {
-        var _a;
-        (_a = this.flatpickrInstance) === null || _a === void 0 ? void 0 : _a.setDate(newValue);
+        this.flatpickrInstance?.setDate(newValue);
     }
     connectedCallback() {
         queueMicrotask(() => this.ensureFlatpickr());
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.flatpickrInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.flatpickrInstance?.destroy();
         this.flatpickrInstance = undefined;
         this.flatpickrStaticLayout = false;
         this.unwrapStaleFlatpickrWrapper();
@@ -35,6 +34,9 @@ export class InputDate {
         this.ensureFlatpickr();
     }
     ensureFlatpickr() {
+        if (!isBrowser()) {
+            return;
+        }
         if (this.flatpickrInstance || !this.input || !this.el.isConnected) {
             return;
         }
@@ -42,10 +44,24 @@ export class InputDate {
         this.initFlatpickr();
     }
     initFlatpickr() {
+        const { input } = this;
+        if (!input) {
+            return;
+        }
         const insideFixed = isInsideFixedPosition(this.el);
-        this.flatpickrInstance = flatpickr(this.input, Object.assign(Object.assign({ allowInput: true }, (insideFixed
-            ? { static: true }
-            : { appendTo: getNearestScrollableAncestor(this.el) })), { dateFormat: this.dateFormat, defaultDate: this.value, maxDate: this.max, minDate: this.min, mode: this.mode, nextArrow: arrowSvg(), prevArrow: arrowSvg(true), onClose: (selectedDates) => {
+        this.flatpickrInstance = flatpickr(input, {
+            allowInput: true,
+            ...(insideFixed
+                ? { static: true }
+                : { appendTo: getNearestScrollableAncestor(this.el) }),
+            dateFormat: this.dateFormat,
+            defaultDate: this.value,
+            maxDate: this.max,
+            minDate: this.min,
+            mode: this.mode,
+            nextArrow: arrowSvg(),
+            prevArrow: arrowSvg(true),
+            onClose: (selectedDates) => {
                 const minRequiredDates = !this.required ? 0 : this.mode === 'single' ? 1 : 2;
                 this.hasErrorState = selectedDates.length < minRequiredDates ? 'required' : null;
                 if (selectedDates.length === 2) {
@@ -55,7 +71,8 @@ export class InputDate {
                         end,
                     });
                 }
-            } }));
+            },
+        });
         queueMicrotask(() => {
             if (this.flatpickrStaticLayout !== insideFixed) {
                 this.flatpickrStaticLayout = insideFixed;
@@ -64,8 +81,8 @@ export class InputDate {
     }
     unwrapStaleFlatpickrWrapper() {
         const { input } = this;
-        const wrapper = input === null || input === void 0 ? void 0 : input.parentElement;
-        if (!(wrapper === null || wrapper === void 0 ? void 0 : wrapper.classList.contains('flatpickr-wrapper'))) {
+        const wrapper = input?.parentElement;
+        if (!wrapper?.classList.contains('flatpickr-wrapper')) {
             return;
         }
         const parent = wrapper.parentElement;
@@ -78,16 +95,16 @@ export class InputDate {
         parent.removeChild(wrapper);
     }
     render() {
-        return (h(Host, { key: 'c038443e47f6b246c2c91ff27a5eb6afcf1c1967', class: {
+        return (h(Host, { key: '768d9bffdb7431a48824590f9ae61f8e77735e98', 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: '45b9b4ebc53293dcc4c0d527df6d2ef234ac2509', class: "xpl-input-wrapper" }, this.pre && (h("label", { key: 'b112ce85a056e1090391ee9e626c66da47cac750', class: "xpl-input-pre", htmlFor: this.inputId }, this.pre)), h("input", { key: 'e3f218c1b205660ec7eb153396aa358e0769e829', 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;
+            } }, h("div", { key: '5b3421bad3bc8474b3724fc7a4287ccf98bd1ba5', class: "xpl-input-wrapper" }, this.pre && (h("label", { key: 'f0e88d0052247c15decc6de2635db1fb847fdd94', class: "xpl-input-pre", htmlFor: this.inputId }, this.pre)), h("input", { key: '251ddfab7140c7a13fd2ef36d7baefe81ed3e716', 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 ?? undefined;
             }, onChange: (event) => {
                 this.valueChanged(event);
-            } }), h("xpl-icon", { key: 'f20a83ef7b788aae76ebb6f76ba786eff4c71aeb', class: "xpl-input-calendar", icon: "calendar", size: 24 }), this.post && (h("label", { key: '0aad7e2ec12c88b27e94de978580f6b35b318fce', class: "xpl-input-post", htmlFor: this.inputId }, this.post)))));
+            } }), h("xpl-icon", { key: '6828c8024496963a2a480091a40326154e21d1f5', class: "xpl-input-calendar", icon: "calendar", size: 24 }), this.post && (h("label", { key: 'e08267b6ffc0d605b557e69784b54757621182c7', 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

@@ -8,18 +8,17 @@ export class InputFile {
         this.hideAcceptText = false;
         this.files = null;
         this.openFileDialog = () => {
-            var _a;
             if (this.disabled) {
                 return;
             }
-            (_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.click();
+            this.fileInput?.click();
         };
         this.handleFileChange = (event) => {
             const target = event.target;
-            this.files = Array.from(target.files);
+            this.files = target.files ? Array.from(target.files) : null;
         };
         this.onRemoveFileByIndex = (fileIndex) => {
-            this.files = this.files.filter((_, i) => i !== fileIndex);
+            this.files = (this.files ?? []).filter((_, i) => i !== fileIndex);
         };
     }
     onFilesChange(newFiles) {
@@ -32,20 +31,19 @@ export class InputFile {
         this.onRemoveFileByIndex(fileIndex);
     }
     render() {
-        var _a, _b;
-        return (h(Host, { key: '42d8f9897e024eb89dc7568f3b99f5a395131294', class: {
+        return (h(Host, { key: 'baa52af5a8ee6222ff745cece6e59d9480165af6', class: {
                 'xpl-input-file': true,
-                'xpl-input-file--hide-trigger-on-select': this.hideTriggerOnSelect,
-                'xpl-input-file--disabled': this.disabled,
-            } }, h("span", { key: '90d5962d5c72ed675cfb18444d814d26a231e4a6', class: {
+                'xpl-input-file--hide-trigger-on-select': !!this.hideTriggerOnSelect,
+                'xpl-input-file--disabled': !!this.disabled,
+            } }, h("span", { key: '802ed05f26bd1e2a618f5e09bea7370fe69a4718', 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: 'ad648187fbd71bdccd99db542460e85715507f76', name: "trigger" })), ((_b = this.files) === null || _b === void 0 ? void 0 : _b.length) > 0 && !this.hideFileNames && (h("ul", { key: 'edf302f553f738ecc35e0ce64f73e4b6713b76e7', 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) => {
+                'xpl-input-file__trigger-wrapper--hidden': !!this.hideTriggerOnSelect && (this.files?.length ?? 0) > 0,
+            }, role: "button", tabIndex: 0, onClick: this.openFileDialog }, h("slot", { key: '487381f2b34d2ad528f1b32f976e5513c1e29c11', name: "trigger" })), (this.files?.length ?? 0) > 0 && !this.hideFileNames && (h("ul", { key: 'fe7b503a89a65af02cbb39b93b518b2dde790a34', class: "xpl-input-file__file-list" }, (this.files ?? []).map((file, fileIndex) => (h("li", { class: "xpl-input-file__file-item" }, h("span", { class: "xpl-input-file__file-name" }, 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: '56f627241c314b9018cd963ea55a997364b63abf', class: "xpl-input-file__accept xpl-text-caption" }, "Accepted file types: ", this.accept)), h("input", { key: '47180dbed43ab7f3291faeadbe0ddce261d75f25', onChange: this.handleFileChange, type: "file", ref: (el) => {
-                this.fileInput = el;
+            }, class: "xpl-input-file__remove-icon" })))))), this.accept && !this.hideAcceptText && (h("span", { key: '6e5e54426f2b33858b374d09014ec0096fa43bb4', class: "xpl-input-file__accept" }, "Accepted file types: ", this.accept)), h("input", { key: '81d08e97d8d2c8a59640348e295261f9acd439cc', onChange: this.handleFileChange, type: "file", ref: (el) => {
+                this.fileInput = el ?? undefined;
             }, hidden: true, accept: this.accept, multiple: this.multiple, name: this.name })));
     }
     static get is() { return "xpl-input-file"; }

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

@@ -22,10 +22,9 @@ export class InputPhone {
             this.dropdownOpen = !this.dropdownOpen;
         };
         this.handleNumberInput = (ev) => {
-            var _a;
             const target = ev.target;
             const raw = target.value || '';
-            this.lastCursorRef = (_a = target.selectionStart) !== null && _a !== void 0 ? _a : 0;
+            this.lastCursorRef = target.selectionStart ?? 0;
             this.lastFormattedRef = raw;
             let nationalDigits;
             if (this.isInternational && raw.startsWith('+')) {
@@ -48,26 +47,24 @@ export class InputPhone {
             target.value = this.displayValue;
         };
         this.handleClear = () => {
-            var _a;
             this.nationalNumber = '';
             this.emitValue();
-            (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+            this.inputEl?.focus();
         };
         this.handleDropdownUpdate = (_e, { component }) => {
-            var _a;
-            const dropdown = component !== null && component !== void 0 ? component : this.dropdownRef;
+            const dropdown = component ?? this.dropdownRef;
             if (!dropdown)
                 return;
             const { options } = dropdown;
-            if (options === null || options === void 0 ? void 0 : options.length) {
-                const flat = options.reduce((acc, curr) => { var _a; return [...acc, ...(curr.groupName ? ((_a = curr.options) !== null && _a !== void 0 ? _a : []) : [curr])]; }, []);
+            if (options?.length) {
+                const flat = options.reduce((acc, curr) => [...acc, ...(curr.groupName ? (curr.options ?? []) : [curr])], []);
                 const selected = flat.find((o) => o.isSelected);
-                if (selected === null || selected === void 0 ? void 0 : selected.value) {
+                if (selected?.value) {
                     const country = getCountryByCode(selected.value);
                     if (country) {
                         this.selectedCountry = country;
                         this.emitValue();
-                        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+                        this.inputEl?.focus();
                     }
                 }
             }
@@ -82,21 +79,21 @@ export class InputPhone {
         this.hasErrorStateChanged.emit(newValue);
     }
     onValueChange(newValue) {
-        var _a, _b;
         if (newValue == null || newValue === '') {
-            const country = getCountryByCode(this.defaultCountry) || PHONE_COUNTRIES[0];
+            const country = getCountryByCode(this.defaultCountry ?? 'US') || PHONE_COUNTRIES[0];
             this.selectedCountry = country;
             this.nationalNumber = '';
             return;
         }
         const parsed = parseE164(newValue);
         if (parsed) {
-            if (((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.dialCode) === parsed.dialCode) {
+            if (this.selectedCountry?.dialCode === parsed.dialCode) {
                 this.nationalNumber = parsed.nationalNumber;
             }
             else {
-                const defaultForCode = getCountryByCode(this.defaultCountry);
-                const country = (_b = ((defaultForCode === null || defaultForCode === void 0 ? void 0 : defaultForCode.dialCode) === parsed.dialCode ? defaultForCode : undefined)) !== null && _b !== void 0 ? _b : getCountryByDialCode(parsed.dialCode);
+                const defaultForCode = getCountryByCode(this.defaultCountry ?? 'US');
+                const country = (defaultForCode?.dialCode === parsed.dialCode ? defaultForCode : undefined) ??
+                    getCountryByDialCode(parsed.dialCode);
                 if (country) {
                     this.selectedCountry = country;
                     this.nationalNumber = parsed.nationalNumber;
@@ -104,7 +101,8 @@ export class InputPhone {
             }
         }
         else if (!this.selectedCountry) {
-            this.selectedCountry = getCountryByCode(this.defaultCountry) || PHONE_COUNTRIES[0];
+            this.selectedCountry =
+                getCountryByCode(this.defaultCountry ?? 'US') || PHONE_COUNTRIES[0];
         }
     }
     componentWillLoad() {
@@ -112,7 +110,8 @@ export class InputPhone {
             this.onValueChange(this.value);
         }
         else {
-            this.selectedCountry = getCountryByCode(this.defaultCountry) || PHONE_COUNTRIES[0];
+            this.selectedCountry =
+                getCountryByCode(this.defaultCountry ?? 'US') || PHONE_COUNTRIES[0];
         }
     }
     componentDidUpdate() {
@@ -129,12 +128,10 @@ export class InputPhone {
         }
     }
     get effectiveCountryCode() {
-        var _a, _b, _c;
-        return (_c = (_b = (_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.countryCode) !== null && _b !== void 0 ? _b : this.defaultCountry) !== null && _c !== void 0 ? _c : 'US';
+        return this.selectedCountry?.countryCode ?? this.defaultCountry ?? 'US';
     }
     get effectiveDialCode() {
-        var _a, _b;
-        return (_b = (_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.dialCode) !== null && _b !== void 0 ? _b : '+1';
+        return this.selectedCountry?.dialCode ?? '+1';
     }
     get isEditable() {
         return !this.disabled && !this.readonly;
@@ -142,7 +139,12 @@ export class InputPhone {
     get orderedCountries() {
         const preferred = this.preferredCountries || [];
         const rest = PHONE_COUNTRIES.filter((c) => !preferred.includes(c.countryCode));
-        return [...preferred.map((code) => getCountryByCode(code)).filter(Boolean), ...rest];
+        return [
+            ...preferred
+                .map((code) => getCountryByCode(code))
+                .filter((country) => country !== undefined),
+            ...rest,
+        ];
     }
     get filteredCountries() {
         const q = this.searchQuery.trim().toLowerCase();
@@ -166,15 +168,12 @@ export class InputPhone {
         return getPlaceholderPattern(country.countryCode);
     }
     get dropdownOptions() {
-        return this.filteredCountries.map((c) => {
-            var _a;
-            return ({
-                icon: getCountryIconName(c.name),
-                label: `${c.name} (${c.dialCode})`,
-                value: c.countryCode,
-                isSelected: ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.countryCode) === c.countryCode,
-            });
-        });
+        return this.filteredCountries.map((c) => ({
+            icon: getCountryIconName(c.name),
+            label: `${c.name} (${c.dialCode})`,
+            value: c.countryCode,
+            isSelected: this.selectedCountry?.countryCode === c.countryCode,
+        }));
     }
     get maxInputLength() {
         const maxNationalDigits = getMaxNationalNumberLength(this.effectiveCountryCode);
@@ -195,22 +194,20 @@ export class InputPhone {
         this.hasErrorState = null;
     }
     render() {
-        var _a;
-        return (h(Host, { key: '1b29d31aca23d7047c36a910bfce85aa54784377', class: {
+        return (h(Host, { key: '124c8feabed1cf383f2eb65e77dd2517c96ea01c', class: {
                 'xpl-input-phone': true,
                 'xpl-input-phone--error': !!this.hasErrorState || !!this.error,
                 'xpl-input-phone--open': this.dropdownOpen,
                 'xpl-input-phone--domestic': !this.isInternational,
-            } }, h("div", { key: '6b7fa8dab343d6236a5de65b73cb731da1997695', class: "xpl-input-wrapper" }, this.isInternational && (h("button", { key: 'cb785ee5ad4da9ea7ee316b7895bf2ca3992a6ae', type: "button", id: this.triggerId, class: "xpl-input-phone__trigger", disabled: this.disabled, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpen ? 'true' : 'false', "aria-label": "Select country", onClick: this.handleTriggerClick }, ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.name) && (h("xpl-icon", { key: '0edbeee2da23758c9335f30b01b2a5f24ece73a3', class: "xpl-input-phone__flag", icon: getCountryIconName(this.selectedCountry.name), size: 24, "aria-hidden": "true" })), h("xpl-icon", { key: '310ae67c8eb2fc30c550782011921051492fae54', class: "xpl-input-phone__trigger-icon", icon: "chevron-down", size: 20, "aria-hidden": "true" }))), h("div", { key: '84abb24d097c61bfd76be3e5bbe1ea7bd9718d30', class: "xpl-input-phone__input-wrap" }, this.isInternational && (h("span", { key: '29975e649c40580f7e126bfc2f72be2a07f6c813', class: "xpl-input-phone__dial-code" }, this.effectiveDialCode)), h("input", { key: '55c85bc4fd439a9913b5b58a8fbbc3f1a328cac9', ref: (el) => {
-                this.inputEl = el;
-            }, type: "tel", id: this.inputId, class: "xpl-input-phone__input", name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, "aria-invalid": this.hasErrorState || this.error ? 'true' : 'false', placeholder: this.effectivePlaceholder, autocomplete: this.isInternational ? 'tel-national' : 'tel', inputmode: "numeric", maxlength: this.maxInputLength, value: this.displayValue, onInput: this.handleNumberInput }), this.nationalNumber && this.isEditable && (h("button", { key: '2b05b045d36937e3c85ff93308a75bededd56f4e', type: "button", class: "xpl-input-phone__clear", "aria-label": "Clear phone number", onClick: this.handleClear }, h("xpl-icon", { key: '0834f75780e6cba9e5fef6e4f8613d89dad42216', icon: "x-circle", size: 16 }))))), this.isInternational && this.isEditable && (h("xpl-dropdown", { key: '1e19c6663b14de3f5fd9f740417fc6f342a47177', ref: (el) => {
-                this.dropdownRef = el;
+            } }, h("div", { key: '6b2a17efd488aa18ac8dea1e86d12884ceb51e90', class: "xpl-input-wrapper" }, this.isInternational && (h("button", { key: 'd3f8e42841532f8c37a131545007af3213c1b9e0', type: "button", id: this.triggerId, class: "xpl-input-phone__trigger", disabled: this.disabled, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpen ? 'true' : 'false', "aria-label": "Select country", onClick: this.handleTriggerClick }, this.selectedCountry?.name && (h("xpl-icon", { key: 'cb52527ba28d95a93cba734bb6d1b3ab8e14a388', class: "xpl-input-phone__flag", icon: getCountryIconName(this.selectedCountry.name), size: 24, "aria-hidden": "true" })), h("xpl-icon", { key: '7942dae0973871635b7b64e0697d8c25352ac3bf', class: "xpl-input-phone__trigger-icon", icon: "chevron-down", size: 20, "aria-hidden": "true" }))), h("div", { key: '24b810a9e03c7774ad6576cc9f03888d5da9d3aa', class: "xpl-input-phone__input-wrap" }, this.isInternational && (h("span", { key: 'eb7684aad427a10615c23326a2a2628a4a12fbb0', class: "xpl-input-phone__dial-code" }, this.effectiveDialCode)), h("input", { key: '8e429f156e36f101413e1d5168bb38a2ca9bdebf', ref: (el) => {
+                this.inputEl = el ?? undefined;
+            }, type: "tel", id: this.inputId, class: "xpl-input-phone__input", name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, "aria-invalid": this.hasErrorState || this.error ? 'true' : 'false', placeholder: this.effectivePlaceholder, autocomplete: this.isInternational ? 'tel-national' : 'tel', inputmode: "numeric", maxlength: this.maxInputLength, value: this.displayValue, onInput: this.handleNumberInput }), this.nationalNumber && this.isEditable && (h("button", { key: '403e1b9e35a7bfd2ba356c16c4d5e9178541f876', type: "button", class: "xpl-input-phone__clear", "aria-label": "Clear phone number", onClick: this.handleClear }, h("xpl-icon", { key: 'aee1381d3a7dcec64c708ecfa67266eef442850e', icon: "x-circle", size: 16 }))))), this.isInternational && this.isEditable && (h("xpl-dropdown", { key: '9d14a65f3ac538b4e420151927a0c349adf3688d', ref: (el) => {
+                this.dropdownRef = el ?? undefined;
             }, isOpen: this.dropdownOpen, triggerId: this.triggerId, anchorToTrigger: true, closeOnSelect: true, mode: "single", options: this.dropdownOptions, update: this.handleDropdownUpdate, onIsOpenChange: (e) => {
                 this.dropdownOpen = e.detail;
-            }, "aria-label": "Country" }, h("div", { key: '910ee42b45fcfea4b5670ca300c6cd7d9a15c709', slot: "header", class: "xpl-input-phone__search-wrap" }, h("xpl-input", { key: 'd7b79cd82d6f1dcd4ed57938f7c4389925426b0c', class: "xpl-input-phone__search", type: "text", label: "", placeholder: "Search", value: this.searchQuery, autocomplete: "off", onInputEvent: (e) => {
-                var _a;
-                this.searchQuery = (_a = e.detail) !== null && _a !== void 0 ? _a : '';
-            } }, h("xpl-icon", { key: '7e8a462d8c0949421d0668b3b289a7c7e7169dbe', slot: "pre", class: "xpl-input-phone__search-icon", icon: "magnifier", size: 20 })))))));
+            }, "aria-label": "Country" }, h("div", { key: '87006a8a90ef37032775247a387896f065ce5673', slot: "header", class: "xpl-input-phone__search-wrap" }, h("xpl-input", { key: '26a99c318081e3215fa779191ee8a0f9c127489f', class: "xpl-input-phone__search", type: "text", label: "", placeholder: "Search", value: this.searchQuery, autocomplete: "off", onInputEvent: (e) => {
+                this.searchQuery = e.detail ?? '';
+            } }, h("xpl-icon", { key: '4aee182e975ed805524ac93e3a34f055266b693b', slot: "pre", class: "xpl-input-phone__search-icon", icon: "magnifier", size: 20 })))))));
     }
     static get is() { return "xpl-input-phone"; }
     static get properties() {