@xplortech/apollo-core 2.11.0 → 2.12.0

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: '02aa7baed3d45ad3a2e995f588c0915e3e348bfc', class: "xpl-input-color" }, h("xpl-popover", { key: '4739858b3b027f3d436c8fe84d62aa917d06ec5e', disabled: this.disabled, display: "menu" }, h("div", { key: '470b4bd07706693748829a25fc8499965581d48b', slot: "trigger" }, h("div", { key: '03a100cb1041eaa939c9db7c0574ac53bc639ef7', 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: '61594874f76b2f6da3befd6b7b6ff0136992c5d7', 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: 'e6997616cc18e0cec266b6029cfbee068744967c', 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: '7253fbb77364e884b4eca04c705fda8875f16250', class: "xpl-input-color__menu" }, h("div", { key: '75a2f6545771354c1d5a6b01ada16a090ceb47e7', 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: '363f0f591d7a9214e808e3374449492d1bb35096', class: "xpl-input-color__sl-thumb", style: slThumbStyle })), h("div", { key: '6c227329fac4c27e60e05fc4635adc9e11149289', class: "xpl-input-color__grid" }, h("input", { key: 'ae66886dcd2384b01146238ca90144b2aaa7d315', 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: 'fae631f4530dcabcef0e4ba748d7104d7539a573', 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: '01dcd22dc144e4b8a8288b7e4cde2fc781c4f8f0', 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: '64e69fd55e9f7030ca1ee354e4c322d837d41993', 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: 'ed469d24ccc404df6d361338c6f34b9a902c2a67', 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: 'ab4798bd6bb4be6495050504eb8a606d80fe84dc', class: "xpl-input-wrapper" }, this.pre && (h("label", { key: '4bf483491d4a688564f745ef75b770e741177599', class: "xpl-input-pre", htmlFor: this.inputId }, this.pre)), h("input", { key: '99030b75c8fe9bb681d9d3c4ea44b16346316c7c', 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: 'fb4de593bb36664cd8f95518b5da622df545e437', class: "xpl-input-calendar", icon: "calendar", size: 24 }), this.post && (h("label", { key: '6835c6b4832918efa513e57c62ec5326f63d8c36', 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: '62b134a3517ea8e5d9c0ba8a0f0c0ba56413a05b', 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: '8f3aa455cf7fe9f27dbab609969dfac1bf4b1a3a', 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: '3d5d42f659cd78b9f54e008113a2ff99ddaa4a03', name: "trigger" })), (this.files?.length ?? 0) > 0 && !this.hideFileNames && (h("ul", { key: 'd827f178ba04e03d8879b1cf81674226b3f265c7', 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: '3bc1ab3c72d4039a2635b9ceb4a22f4a98875632', class: "xpl-input-file__accept" }, "Accepted file types: ", this.accept)), h("input", { key: '23f6d50b87fe8e4b315670c73565bc50ca592ed5', 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: 'c180c62687c5d1b9c9f31400df8b76475ffe821e', 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: 'ea5b833f60f7bac459ef6362091a15beac015dec', class: "xpl-input-wrapper" }, this.isInternational && (h("button", { key: '6e0d7b18dc7784ffcadcc13500c02bbec1977b90', 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: '038a87158d9417ad9889e3b0a94cd63bc16f5538', class: "xpl-input-phone__flag", icon: getCountryIconName(this.selectedCountry.name), size: 24, "aria-hidden": "true" })), h("xpl-icon", { key: '5434d2645e31bd30207c26f8e0a5004c00c699c6', class: "xpl-input-phone__trigger-icon", icon: "chevron-down", size: 20, "aria-hidden": "true" }))), h("div", { key: '623f1b49c156614a40cee574e1a41c2d09014e2b', class: "xpl-input-phone__input-wrap" }, this.isInternational && (h("span", { key: '535313ab4c84a989b0bedfe07bbd080ffaa4b76b', class: "xpl-input-phone__dial-code" }, this.effectiveDialCode)), h("input", { key: 'e9f03ca04b18fab0f9e6407f3686e43a072a3d81', 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: '9e52b938631e3414225506cf13a50129e4046bd1', type: "button", class: "xpl-input-phone__clear", "aria-label": "Clear phone number", onClick: this.handleClear }, h("xpl-icon", { key: 'd7fa5c395ac0677db31405b2406ec33c1aef8d7d', icon: "x-circle", size: 16 }))))), this.isInternational && this.isEditable && (h("xpl-dropdown", { key: '1df1f72efa719f230e582e57c62f62eff98abfc8', 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: 'ce221f1de83d5cce87162c316aa3e64fbb0396a5', slot: "header", class: "xpl-input-phone__search-wrap" }, h("xpl-input", { key: '884815148c6827573b8a7584bb06eb8cfeaa9976', 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: '9edff232287061494d5b8af93885c2a12fbe969b', slot: "pre", class: "xpl-input-phone__search-icon", icon: "magnifier", size: 20 })))))));
     }
     static get is() { return "xpl-input-phone"; }
     static get properties() {

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

@@ -20,7 +20,6 @@ export class InputSearch {
             this.emitSearchCommit(this.value.trim());
         };
         this.handleClear = (event) => {
-            var _a;
             event.preventDefault();
             if (this.disabled || this.readonly) {
                 return;
@@ -28,7 +27,7 @@ export class InputSearch {
             this.value = '';
             this.valueChange.emit('');
             this.inputEvent.emit('');
-            (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+            this.inputEl?.focus();
         };
         this.handleInput = (event) => {
             const target = event.target;
@@ -60,8 +59,7 @@ export class InputSearch {
         this.syncAncestorFormFlag();
     }
     async setFocus() {
-        var _a;
-        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+        this.inputEl?.focus();
     }
     syncAncestorFormFlag() {
         const root = this.el;
@@ -74,11 +72,10 @@ export class InputSearch {
         return this.value !== undefined && this.value.length > 0;
     }
     get resolvedInputAriaLabel() {
-        var _a;
         if (this.hasVisibleLabel) {
             return undefined;
         }
-        return ((_a = this.ariaLabel) !== null && _a !== void 0 ? _a : '').trim() || 'Search';
+        return (this.ariaLabel ?? '').trim() || 'Search';
     }
     get rendersInnerSearchForm() {
         return !this.hasAncestorForm;
@@ -88,7 +85,7 @@ export class InputSearch {
     }
     renderShell() {
         const shell = (h("div", { class: "xpl-input-search__shell" }, h("span", { class: "xpl-input-search__icon", "aria-hidden": "true" }, h("xpl-icon", { icon: "magnifier", size: 20 })), h("input", { "aria-describedby": this.hasError ? this.errorMessageId : undefined, "aria-invalid": this.hasError ? 'true' : undefined, "aria-label": this.resolvedInputAriaLabel, autocomplete: this.autocomplete, class: "xpl-input-search__input", disabled: this.disabled, id: this.inputId, name: this.name, onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: this.placeholder, readonly: this.readonly, ref: (el) => {
-                this.inputEl = el !== null && el !== void 0 ? el : undefined;
+                this.inputEl = el ?? undefined;
             }, required: this.required, role: "searchbox", type: "text", value: this.value }), h("button", { "aria-hidden": this.hasValue ? undefined : 'true', "aria-label": "Clear search", class: "xpl-input-search__clear", disabled: this.disabled || this.readonly, onClick: this.handleClear, type: "button" }, h("xpl-icon", { icon: "circle-xmark", size: 16 }))));
         if (this.rendersInnerSearchForm) {
             return (h("form", { class: "xpl-input-search__form", onSubmit: this.handleInnerFormSubmit }, shell));
@@ -96,7 +93,7 @@ export class InputSearch {
         return shell;
     }
     render() {
-        return (h(Host, { key: 'bbbcb91c290fec3f0ad0f7df9cb9e43c699f3ab2', class: {
+        return (h(Host, { key: '017e5d3958dccf6ca1096cd623ffd49b302a5ab3', class: {
                 'xpl-input-search': true,
                 'xpl-input-search--disabled': this.disabled,
                 'xpl-input-search--error': this.hasError,