adp-web-components 0.1.84 → 0.1.86

package/dist/collection/components/form-elements/form-phone-number.js

@@ -8,25 +8,87 @@ import { getInputLocalization } from "../../features/form-hook/index";
 import { FormInputLabel } from "./components/form-input-label";
 import { FormErrorMessage } from "./components/form-error-message";
 import { FormInputPrefix } from "./components/form-input-prefix";
+import { string } from "yup";
+import { AsYouType } from "libphonenumber-js";
+import { y } from "../forms/defaults/validation";
 const partKeyPrefix = 'form-input-';
 export class FormPhoneNumber {
     constructor() {
         this.type = 'text';
-        this.localization = {};
         this.prefixWidth = 0;
+        this.localization = {};
+        this.countryCode = 'IQ';
+        this.isOpen = false;
+        this.externalRequired = false;
         this.onInputChange = (event) => {
             const target = event.target;
             this.validator.reset();
-            target.value = this.validator.input(target.value);
+            target.value = this.validator.input(this.getValue()).replace(this.inputPrefix, '').trim();
+            this.form.onInput(event);
+        };
+        this.validate = () => {
+            // @ts-ignore
+            let v = string().meta(y.meta(this.name));
+            v = v.test(y.require(this.name), y.require(this.name), value => {
+                if (!this.externalRequired && !this.required)
+                    return true;
+                return !!value.replace(this.inputPrefix, '').trim();
+            });
+            v = v.test(y.format(this.name), y.format(this.name), value => {
+                if (!value.replace(this.inputPrefix, '').trim())
+                    return true; // let required handle empty cases
+                const checker = new AsYouType(this.selectedValue);
+                checker.input(this.getValue());
+                return checker.isValid();
+            });
+            return v;
+        };
+        this.getValue = () => {
+            var _a;
+            const raw = this.inputRef.value.trim().replace(/^\+/, '');
+            const prefix = (_a = this.inputPrefix) === null || _a === void 0 ? void 0 : _a.trim().replace(/^\+/, '');
+            const stripped = raw.startsWith(prefix) ? raw.slice(prefix.length).trim() : raw;
+            const hasPrefix = raw.startsWith(prefix);
+            return hasPrefix ? '+' + prefix + ' ' + stripped : this.inputPrefix + ' ' + raw;
+        };
+        this.updateShiftSelectContext = (newValues) => {
+            Object.entries(newValues).forEach(([key, value]) => {
+                this[key] = value;
+            });
+        };
+        this.handleSelection = (option) => {
+            this.selectedValue = option.value;
+            this.isOpen = false;
+        };
+        this.renderCountryOption = (renderOption) => {
+            var _a, _b, _c;
+            const v = new AsYouType((_a = renderOption.meta) === null || _a === void 0 ? void 0 : _a.code);
+            const countryNumber = ((_c = (_b = v.metadata) === null || _b === void 0 ? void 0 : _b.numberingPlan) === null || _c === void 0 ? void 0 : _c.metadata[0]) || '';
+            return (h("div", { part: cn('custom-form-select-option form-select-option', { 'custom-form-select-option-selected form-select-option-selected': this.selectedValue === renderOption.value }), class: cn('flex gap-2 overflow-hidden') }, h("span", { part: "country-code", class: "capitalize block min-w-[30px]" }, renderOption === null || renderOption === void 0 ? void 0 : renderOption.label), !!countryNumber && h("span", { part: "country-number" }, '+' + countryNumber)));
         };
     }
     async componentWillLoad() {
         this.onDefaultValueChange();
         this.form.subscribe(this.name, this);
         this.onStaticValueChange(this.staticValue, false);
+        if (typeof this.countryCode === 'string') {
+            this.selectedValue = this.countryCode;
+        }
+        else if (Array.isArray(this.countryCode) && typeof this.countryCode[0] === 'string') {
+            this.selectedValue = this.countryCode[0];
+        }
+        else if (Array.isArray(this.countryCode) && typeof this.countryCode[0] === 'object') {
+            this.selectedValue = this.countryCode[0].code;
+        }
+    }
+    async onCountryChange() {
+        var _a, _b, _c;
+        this.validator = new AsYouType(this.selectedValue);
+        this.inputPrefix = this.validator ? '+' + ((_c = (_b = (_a = this.validator) === null || _a === void 0 ? void 0 : _a.metadata) === null || _b === void 0 ? void 0 : _b.numberingPlan) === null || _c === void 0 ? void 0 : _c.metadata[0]) : undefined;
+        this.form.validateInput(this.name);
     }
     async onDefaultValueChange() {
-        if (this.defaultValue) {
+        if (this.defaultValue && this.validator) {
             this.validator.reset();
             this.defaultValue = this.validator.input(this.defaultValue || '');
         }
@@ -41,8 +103,11 @@ export class FormPhoneNumber {
             this.inputRef.value = '';
         }
     }
+    async onValidatorChange() {
+        await this.componentDidLoad();
+    }
     async componentDidLoad() {
-        const prefix = this.el.getElementsByClassName('prefix')[0];
+        const prefix = this.el.getElementsByClassName(this.name + '-prefix')[0];
         this.prefixWidth = prefix ? prefix.getBoundingClientRect().width : 0;
         this.inputRef = this.el.getElementsByClassName(partKeyPrefix + this.name)[0];
     }
@@ -58,13 +123,23 @@ export class FormPhoneNumber {
     }
     render() {
         const { disabled, isRequired, meta, isError, errorMessage } = this.form.getInputState(this.name);
-        const [locale] = this.form.getFormLocale();
         const part = partKeyPrefix + this.name;
         const { label, placeholder, errorTextMessage } = getInputLocalization(this, meta, errorMessage);
-        const isDisabled = disabled || this.isLoading || !!this.staticValue || this.isDisabled;
-        return (h(Host, { key: 'e84058ed5c9b0a95c7ce67bf849a0e7de8c1deb3' }, h("label", { key: '4be4a5cf698cf5bea3ff4082db1760862c606c3a', part: this.name, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: isDisabled }) }, h(FormInputLabel, { key: 'dc74dadc292e08c731847fa8e5955e20f73aaae0', name: this.name, isRequired: isRequired, label: label }), h("div", { key: 'a2b18f59911bb6d489027007652f4bb1bf3d8237', dir: "ltr", part: `${this.name}-container form-input-container`, class: "form-input-container" }, h(FormInputPrefix, { key: '71b5223176fbdef788060cba6c60bbbbf83be80e', name: this.name, direction: locale.sharedFormLocales.direction, prefix: this.inputPrefix }), h("input", { key: 'b1618e490c2ab2d79b3cda9d617a3abcd4eda956', type: this.type, name: this.name, disabled: isDisabled, onInput: this.onInputChange, defaultValue: this.defaultValue, part: `${this.name}-input form-input`, placeholder: placeholder || (meta === null || meta === void 0 ? void 0 : meta.placeholder), style: Object.assign({}, (this.prefixWidth ? { [locale.sharedFormLocales.direction === 'rtl' ? 'paddingRight' : 'paddingLeft']: `${this.prefixWidth}px` } : {})), class: cn('form-input-style', part, {
+        const isDisabled = disabled || this.isLoading || !!this.staticValue || this.isDisabled || !this.selectedValue;
+        this.externalRequired = isRequired;
+        const hasMultipleCountries = Array.isArray(this.countryCode) && this.countryCode.length > 1;
+        const options = Array.isArray(this.countryCode) &&
+            this.countryCode.map(country => {
+                if (typeof country === 'string') {
+                    return { value: country, label: country, meta: { code: country } };
+                }
+                else {
+                    return { value: country.code, label: country === null || country === void 0 ? void 0 : country.code, meta: { code: country.code } };
+                }
+            });
+        return (h(Host, { translate: "no" }, h("label", { part: this.name, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: isDisabled }) }, h(FormInputLabel, { name: this.name, isRequired: isRequired, label: label }), h("div", { dir: "ltr", part: cn(`${this.name}-container form-input-container form-phone-container`, { 'form-input-container-country': hasMultipleCountries }), class: cn('form-input-container form-phone-container', { 'form-input-container-country': hasMultipleCountries }) }, hasMultipleCountries && (h("div", { part: `${this.name}-input-country-selection form-input form-input-country-selection`, class: cn('form-input-country-selection shrink-0') }, h("shift-select", { hasTick: false, options: options, isOpen: this.isOpen, disableInput: isDisabled, selectedValue: this.selectedValue, handleSelection: this.handleSelection, renderOption: this.renderCountryOption, name: this.name + '-country-selection', updateContext: this.updateShiftSelectContext }))), h("div", { part: "form-input-container-wrapper", class: cn('form-input-container-wrapper', { 'flex-1 relative': hasMultipleCountries }) }, h(FormInputPrefix, { name: this.name, direction: "ltr", prefix: this.inputPrefix }), h("input", { type: this.type, name: this.name, disabled: isDisabled, onInput: this.onInputChange, defaultValue: this.defaultValue, part: cn(`${this.name}-input form-input`, { [`${this.name}-input-with-country form-input-with-country`]: hasMultipleCountries }), placeholder: placeholder || (meta === null || meta === void 0 ? void 0 : meta.placeholder), style: Object.assign({}, (this.prefixWidth ? { ['paddingLeft']: `${this.prefixWidth}px` } : {})), class: cn('form-input-style', part, {
                 'form-input-error-style': isError,
-            }) })), h(FormErrorMessage, { key: '49e40e5dace5b4a9f8b1faaa240b09809741be06', name: this.name, isError: isError, errorMessage: errorTextMessage }))));
+            }) }))), h(FormErrorMessage, { name: this.name, isError: isError, errorMessage: errorTextMessage }))));
     }
     static get is() { return "form-phone-number"; }
     static get originalStyleUrls() {
@@ -117,6 +192,25 @@ export class FormPhoneNumber {
                 "setter": false,
                 "reflect": false
             },
+            "required": {
+                "type": "boolean",
+                "attribute": "required",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "isLoading": {
                 "type": "boolean",
                 "attribute": "is-loading",
@@ -275,44 +369,39 @@ export class FormPhoneNumber {
                 "setter": false,
                 "reflect": false
             },
-            "validator": {
+            "localization": {
                 "type": "unknown",
-                "attribute": "validator",
+                "attribute": "localization",
                 "mutable": false,
                 "complexType": {
-                    "original": "PhoneValidator",
-                    "resolved": "AsYouType & { default: string; formattedOutput: string; metadata: { numberingPlan: { metadata: [string]; }; }; geIsValidPhoneNumber: () => boolean; }",
+                    "original": "FormInputLocalization",
+                    "resolved": "{ [lang: string]: { label?: string; placeholder?: string; require?: string; format?: string; minMessage: string; maxMessage: string; betweenMessage: string; }; }",
                     "references": {
-                        "PhoneValidator": {
+                        "FormInputLocalization": {
                             "location": "import",
                             "path": "~features/form-hook",
-                            "id": "src/features/form-hook/index.ts::PhoneValidator"
+                            "id": "src/features/form-hook/index.ts::FormInputLocalization"
                         }
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "defaultValue": "{}"
             },
-            "localization": {
-                "type": "unknown",
-                "attribute": "localization",
+            "countryCode": {
+                "type": "string",
+                "attribute": "country-code",
                 "mutable": false,
                 "complexType": {
-                    "original": "FormInputLocalization",
-                    "resolved": "{ [lang: string]: { label?: string; placeholder?: string; require?: string; format?: string; minMessage: string; maxMessage: string; betweenMessage: string; }; }",
-                    "references": {
-                        "FormInputLocalization": {
-                            "location": "import",
-                            "path": "~features/form-hook",
-                            "id": "src/features/form-hook/index.ts::FormInputLocalization"
-                        }
-                    }
+                    "original": "string | string[] | { code: string; icon?: string }[]",
+                    "resolved": "string | string[] | { code: string; icon?: string; }[]",
+                    "references": {}
                 },
                 "required": false,
                 "optional": true,
@@ -322,23 +411,34 @@ export class FormPhoneNumber {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "{}"
+                "reflect": false,
+                "defaultValue": "'IQ'"
             }
         };
     }
     static get states() {
         return {
-            "prefixWidth": {}
+            "prefixWidth": {},
+            "selectedValue": {},
+            "isOpen": {},
+            "validator": {},
+            "externalRequired": {}
         };
     }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "selectedValue",
+                "methodName": "onCountryChange"
+            }, {
                 "propName": "defaultValue",
                 "methodName": "onDefaultValueChange"
             }, {
                 "propName": "staticValue",
                 "methodName": "onStaticValueChange"
+            }, {
+                "propName": "inputPrefix",
+                "methodName": "onValidatorChange"
             }];
     }
 }

package/dist/collection/components/form-elements/form-picker-input.js

@@ -179,9 +179,9 @@ export class FormPickerInput {
             'form-input-icon-interactive': !!this.iconAction,
         });
         const renderIcon = () => this.iconAction ? (h("button", { type: "button", disabled: isDisabled, onClick: this.iconAction, part: `${this.name}-icon form-input-icon`, class: iconClass }, this.icon)) : (h("span", { part: `${this.name}-icon form-input-icon`, class: iconClass }, this.icon));
-        return (h(Host, { key: '1536f7ac25186302182e35ee0a925df7d87576f9' }, h("label", { key: '6c847bb0f8ae8b0ac678ab3770e285e17f0dc068', part: this.name, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: isDisabled }) }, h(FormInputLabel, { key: 'aff5940864c09455fe2a7204594886248b7c216f', isRequired: isRequired, label: label }), h("div", { key: '81ee5161276a47391522d307b9be29965e047ed1', part: `${this.name}-container form-input-container relative`, class: "form-input-container" }, h(FormInputPrefix, { key: '4684e33b1ba304796359b79c0ce0c4b3248ca58b', name: this.name, direction: (_b = locale === null || locale === void 0 ? void 0 : locale.sharedFormLocales) === null || _b === void 0 ? void 0 : _b.direction, prefix: this.inputPrefix }), h("input", { key: 'fad8b6c2edae1491dbb18e87c4382ba43089fa32', type: "text", readonly: true, tabIndex: -1, part: `form-input`, disabled: isDisabled, value: this.displayedValue, onClick: this.onInputClick, onKeyDown: e => e.preventDefault(), placeholder: placeholder || (meta === null || meta === void 0 ? void 0 : meta.placeholder), style: Object.assign(Object.assign(Object.assign({}, (this.prefixWidth ? { [isRtl ? 'paddingRight' : 'paddingLeft']: `${this.prefixWidth}px` } : {})), (this.icon ? { [iconPaddingSide]: '40px' } : {})), { pointerEvents: 'none' }), class: cn('form-input-style enabled:cursor-pointer', {
+        return (h(Host, { key: 'a808095734d28bb0a3f56ec3cc450100c66d12c5', translate: "no" }, h("label", { key: 'aa30dca9f926619689fd4961cb4e43b919cecfd7', part: this.name, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: isDisabled }) }, h(FormInputLabel, { key: 'c85669989b965019eef74f7e3e19b5d57d839b64', isRequired: isRequired, label: label }), h("div", { key: '85f883ea8955645be536fd7c683e67a0c6fd757d', part: `${this.name}-container form-input-container relative`, class: "form-input-container" }, h(FormInputPrefix, { key: '1c96a1a1b4c2ece451a28c06c2ad752cd99e431a', name: this.name, direction: (_b = locale === null || locale === void 0 ? void 0 : locale.sharedFormLocales) === null || _b === void 0 ? void 0 : _b.direction, prefix: this.inputPrefix }), h("input", { key: '974214929d1bea617f409a036022236d05e250e0', type: "text", readonly: true, tabIndex: -1, part: `form-input`, disabled: isDisabled, value: this.displayedValue, onClick: this.onInputClick, onKeyDown: e => e.preventDefault(), placeholder: placeholder || (meta === null || meta === void 0 ? void 0 : meta.placeholder), style: Object.assign(Object.assign(Object.assign({}, (this.prefixWidth ? { [isRtl ? 'paddingRight' : 'paddingLeft']: `${this.prefixWidth}px` } : {})), (this.icon ? { [iconPaddingSide]: '40px' } : {})), { pointerEvents: 'none' }), class: cn('form-input-style enabled:cursor-pointer', {
                 'form-input-error-style': isError,
-            }) }), h("input", Object.assign({ key: '12daf58386a6bdddbe6d085d474383ef1a0c4a66', type: this.type, name: this.name }, this.inputProps, { onBlur: this.onInputBlur, onClick: this.onInputClick, onInput: this.onInputChange, part: `${this.name}-input ${part}`, class: cn('shadow-input size-full absolute top-0 left-0 opacity-0 cursor-pointer', part), min: Array.isArray(this.min) ? decodeTimeOffset({ offsets: this.min, type: this.type }) : this.min, max: Array.isArray(this.max) ? decodeTimeOffset({ offsets: this.max, type: this.type }) : this.max })), this.icon && renderIcon()), h(FormErrorMessage, { key: '407846f793b1bd3fe776787bfc4f86fea62cd37a', name: this.name, isError: isError, errorMessage: errorTextMessage }))));
+            }) }), h("input", Object.assign({ key: '846c1e5a37644d0159db6339cecc009854142c9c', type: this.type, name: this.name }, this.inputProps, { onBlur: this.onInputBlur, onClick: this.onInputClick, onInput: this.onInputChange, part: `${this.name}-input ${part}`, class: cn('shadow-input size-full absolute top-0 left-0 opacity-0 cursor-pointer', part), min: Array.isArray(this.min) ? decodeTimeOffset({ offsets: this.min, type: this.type }) : this.min, max: Array.isArray(this.max) ? decodeTimeOffset({ offsets: this.max, type: this.type }) : this.max })), this.icon && renderIcon()), h(FormErrorMessage, { key: 'b6c800e4a7dd87062b3e7865afe240a608457001', name: this.name, isError: isError, errorMessage: errorTextMessage }))));
     }
     static get is() { return "form-picker-input"; }
     static get originalStyleUrls() {

package/dist/collection/components/form-elements/form-select.js

@@ -4,14 +4,10 @@
  */
 import { Host, forceUpdate, h } from "@stencil/core";
 import cn from "../../global/lib/cn";
-import { getNestedValue } from "../../global/lib/get-nested-value";
 import { getInputLocalization } from "../../features/form-hook/index";
-import Loader from "~assets/loader.svg";
-import { TickIcon } from "../../global/assets/tick-icon";
-import { ArrowUpIcon } from "../../global/assets/arrow-up-icon";
 import { FormInputLabel } from "./components/form-input-label";
 import { FormErrorMessage } from "./components/form-error-message";
-import { AddIcon } from "../../global/assets/add-icon";
+import { getNestedValue } from "../../global/lib/get-nested-value";
 export class FormSelect {
     constructor() {
         this.language = 'en';
@@ -22,36 +18,21 @@ export class FormSelect {
         this.searchValue = '';
         this.isOpen = false;
         this.selectedValue = '';
-        this.openUpwards = false;
         this.options = [];
         this.fetchingErrorMessage = null;
-        this.toggleDropdown = () => {
-            if (this.isOpen && !this.searchable)
-                this.isOpen = false;
-            else
-                this.adjustDropdownPosition();
+        this.handleSelection = (option) => {
+            this.selectedValue = option.value;
+            this.searchValue = option.label;
+            this.isOpen = false;
         };
         this.reset = (newValue = '') => {
             const defaultOption = this.options.find(opt => opt.value === newValue || opt.value === this.defaultValue) || { value: newValue, label: '' };
             this.handleSelection(defaultOption);
         };
-        this.closeDropdown = (event) => {
-            if (!this.el.contains(event.target)) {
-                this.isOpen = false;
-            }
-        };
-        this.onSearchInput = (event) => {
-            const target = event.target;
-            this.searchValue = target.value;
-            this.selectedValue = '';
-        };
-        this.clearInput = () => {
-            this.searchValue = '';
-            this.selectedValue = '';
-            const selectButton = this.el.getElementsByClassName('form-input-select')[0];
-            selectButton.focus();
-            if (!this.isOpen)
-                this.adjustDropdownPosition();
+        this.updateShiftSelectContext = (newValues) => {
+            Object.entries(newValues).forEach(([key, value]) => {
+                this[key] = value;
+            });
         };
     }
     async changeLanguage() {
@@ -69,38 +50,11 @@ export class FormSelect {
             this.defaultValue = this.staticValue.value;
             this.clearable = false;
         }
-        this.selectedValue = this.defaultValue;
     }
     async disconnectedCallback() {
         var _a;
         (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
         this.form.unsubscribe(this.name);
-        document.removeEventListener('click', this.closeDropdown);
-        document.removeEventListener('keydown', this.handleKeyDown.bind(this));
-    }
-    adjustDropdownPosition() {
-        requestAnimationFrame(() => {
-            const selectButton = this.el.getElementsByClassName('form-input-select')[0];
-            const selectContainer = this.el.getElementsByClassName('form-select-container')[0];
-            const rect = selectButton.getBoundingClientRect();
-            const spaceBelow = window.innerHeight - rect.bottom - 20; // 20 is padding
-            this.openUpwards = spaceBelow < selectContainer.getBoundingClientRect().height || this.forceOpenUpwards;
-            setTimeout(() => {
-                this.isOpen = true;
-            }, 10);
-        });
-    }
-    handleSelection(option) {
-        this.selectedValue = option.value;
-        this.searchValue = option.label;
-        this.isOpen = false;
-    }
-    handleKeyDown(event) {
-        if (!this.isOpen)
-            return;
-        if (event.key === 'Escape') {
-            this.isOpen = false;
-        }
     }
     async fetch() {
         var _a, _b, _c, _d;
@@ -144,8 +98,6 @@ export class FormSelect {
     }
     async componentDidLoad() {
         this.fetch();
-        document.addEventListener('click', this.closeDropdown);
-        document.addEventListener('keydown', this.handleKeyDown.bind(this));
     }
     render() {
         var _a, _b, _c;
@@ -159,20 +111,8 @@ export class FormSelect {
         const filteredOptions = selectedItem ? this.options : this.options.filter(option => { var _a, _b; return (_a = option === null || option === void 0 ? void 0 : option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes((_b = this.searchValue) === null || _b === void 0 ? void 0 : _b.toLowerCase()); });
         const disableInput = disabled || this.isDisabled || this.isLoading || !!this.staticValue;
         if (this.isHidden)
-            return (h(Host, { style: { display: this.isHidden ? 'none' : 'block' } }, h("form-shadow-input", { name: this.name, form: this.form, value: this.selectedValue })));
-        return (h(Host, null, h("label", { part: `${this.name}`, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: disableInput }) }, h(FormInputLabel, { name: this.name, isRequired: isRequired || this.isRequired, label: label }), h("div", { part: `${this.name}-container form-input-container`, class: cn('form-input-container', { open: this.isOpen, disableInput }) }, h("form-shadow-input", { name: this.name, form: this.form, value: this.selectedValue }), h("input", { type: "text", disabled: disableInput, part: `${this.name}-input-select form-input-select`, value: this.searchable ? this.searchValue : (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label) || '', readOnly: !this.searchable, onInput: this.onSearchInput, onClick: this.toggleDropdown, placeholder: placeholder || (meta === null || meta === void 0 ? void 0 : meta.placeholder), class: cn('form-input-style form-input-select', {
-                'form-input-error-style': isError,
-            }) }), h("div", { part: `${this.name}-select-icon-container form-input-select-icon-container`, class: "form-input-select-icon-container" }, (selectedItem || this.searchValue) && this.clearable ? (h(AddIcon, { part: `${this.name}-cross-icon`, onClick: this.clearInput, class: "form-input-select-icon cross" })) : (h(ArrowUpIcon, { part: `${this.name}-arrow-icon select-arrow`, class: "form-input-select-icon arrow" }))), h("div", { part: cn(`${this.name}-select-container form-select-container`, {
-                'form-select-container-upwards': this.openUpwards || this.forceOpenUpwards,
-                'form-select-container-downwards': !this.openUpwards && !this.forceOpenUpwards,
-            }), class: cn('form-select-container', {
-                upwards: this.openUpwards || this.forceOpenUpwards,
-                downwards: !this.openUpwards && !this.forceOpenUpwards,
-            }) }, !!filteredOptions.length &&
-            (this.reverseOptions ? [...filteredOptions].reverse() : filteredOptions).map(option => (h("button", { type: "button", part: cn(`${this.name}-select-option form-select-option`, { 'form-select-option-selected': this.selectedValue === option.value }), onClick: () => this.handleSelection(option), class: cn('form-select-option', {
-                    selected: this.selectedValue === option.value,
-                }) }, h("div", { part: `${this.name}-select-option-label form-select-option-label`, class: "form-select-option-label" }, option.label), h(TickIcon, { part: `${this.name}-tick-icon`, class: "form-select-option-tick" })))), !filteredOptions.length && (h("div", { part: `${this.name}-select-empty-container form-select-empty-container`, class: cn('form-select-empty-container', { error: this.fetchingErrorMessage }) }, this.fetchingErrorMessage && (getNestedValue(locale, this.fetchingErrorMessage) || this.fetchingErrorMessage || ((_b = (_a = locale === null || locale === void 0 ? void 0 : locale.sharedFormLocales) === null || _a === void 0 ? void 0 : _a.errors) === null || _b === void 0 ? void 0 : _b.wildCard)), !this.fetchingErrorMessage &&
-            (this.isFetching ? (h("img", { part: `${this.name}-select-spinner form-select-spinner`, class: "form-select-spinner", src: Loader })) : ((_c = locale === null || locale === void 0 ? void 0 : locale.sharedFormLocales) === null || _c === void 0 ? void 0 : _c.noSelectOptions)))))), h(FormErrorMessage, { name: this.name, isError: isError, errorMessage: errorTextMessage }))));
+            return (h(Host, { translate: "no", style: { display: this.isHidden ? 'none' : 'block' } }, h("form-shadow-input", { name: this.name, form: this.form, value: this.selectedValue })));
+        return (h(Host, { translate: "no" }, h("label", { part: `${this.name}`, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: disableInput }) }, h(FormInputLabel, { name: this.name, isRequired: isRequired || this.isRequired, label: label }), h("shift-select", { name: this.name, isError: isError, isOpen: this.isOpen, options: filteredOptions, clearable: this.clearable, isLoading: this.isFetching, disableInput: disableInput, searchable: this.searchable, searchValue: this.searchValue, selectedValue: this.selectedValue, reverseOptions: this.reverseOptions, handleSelection: this.handleSelection, forceOpenUpwards: this.forceOpenUpwards, updateContext: this.updateShiftSelectContext, placeholder: placeholder || (meta === null || meta === void 0 ? void 0 : meta.placeholder), noSelectionText: (_a = locale === null || locale === void 0 ? void 0 : locale.sharedFormLocales) === null || _a === void 0 ? void 0 : _a.noSelectOptions, fetchingErrorText: !this.fetchingErrorMessage ? '' : getNestedValue(locale, this.fetchingErrorMessage) || this.fetchingErrorMessage || ((_c = (_b = locale === null || locale === void 0 ? void 0 : locale.sharedFormLocales) === null || _b === void 0 ? void 0 : _b.errors) === null || _c === void 0 ? void 0 : _c.wildCard) }, h("form-shadow-input", { name: this.name, form: this.form, value: this.selectedValue })), h(FormErrorMessage, { name: this.name, isError: isError, errorMessage: errorTextMessage }))));
     }
     static get is() { return "form-select"; }
     static get originalStyleUrls() {
@@ -584,10 +524,9 @@ export class FormSelect {
     static get states() {
         return {
             "searchValue": {},
-            "isFetching": {},
             "isOpen": {},
             "selectedValue": {},
-            "openUpwards": {},
+            "isFetching": {},
             "options": {},
             "fetchingErrorMessage": {}
         };

package/dist/collection/components/form-elements/form-stepper.js

@@ -48,7 +48,7 @@ export class FormStepper {
         const [_, language] = this.form.getFormLocale();
         const steps = ((_c = (_b = (_a = this === null || this === void 0 ? void 0 : this.form) === null || _a === void 0 ? void 0 : _a.context) === null || _b === void 0 ? void 0 : _b.structure) === null || _c === void 0 ? void 0 : _c.steps) || [];
         const currentStep = (_e = (_d = this.form) === null || _d === void 0 ? void 0 : _d.formStructure) === null || _e === void 0 ? void 0 : _e.currentStep;
-        return (h(Host, { key: '4229918e35f2cfef35820080714c0a7a710176f8' }, h("div", { key: 'a3f2af611d381a3f104fa6cfde3f2c35c11851de', part: cn(formStepperId, this === null || this === void 0 ? void 0 : this.name), class: "w-full", id: this.wrapperId }, h("div", { key: 'f043f6ab1e97f78de770051305f4eae450f1d45c', part: cn(formStepperId + 'container', (this === null || this === void 0 ? void 0 : this.name) + 'container'), ref: el => (this.container = el), class: "relative flex items-center justify-between px-1 w-full" }, h("div", { key: '08d2b754a29cd23f489c3b9f128ee7a1543cf90f', part: cn(formStepperId + '-line'), ref: el => (this.line = el), class: "absolute w-full h-[1px] -translate-y-[50%] -translate-x-[50%] top-[16px] left-[50%]", style: { background: 'repeating-linear-gradient(to right,black 0px,black 12px,transparent 6px,transparent 24px)' } }), steps.map((step, i) => {
+        return (h(Host, { key: 'a48eb2647a05f7a1c7b3a20c38187ad7a32b935c', translate: "no" }, h("div", { key: 'de19c8e4587f5c6fd965f81ae3b1b13f9bb5e44c', part: cn(formStepperId, this === null || this === void 0 ? void 0 : this.name), class: "w-full", id: this.wrapperId }, h("div", { key: '67f8024a2d3804e94ad727c8d556aedfaf9ddc34', part: cn(formStepperId + 'container', (this === null || this === void 0 ? void 0 : this.name) + 'container'), ref: el => (this.container = el), class: "relative flex items-center justify-between px-1 w-full" }, h("div", { key: 'e272708c498df5c07f4302fb100958a2f8aa4965', part: cn(formStepperId + '-line'), ref: el => (this.line = el), class: "absolute w-full h-[1px] -translate-y-[50%] -translate-x-[50%] top-[16px] left-[50%]", style: { background: 'repeating-linear-gradient(to right,black 0px,black 12px,transparent 6px,transparent 24px)' } }), steps.map((step, i) => {
             var _a, _b, _c;
             return (h("div", { key: i, class: "flex items-center" }, h("div", { part: cn(formStepperId + '-step', formStepperId + '-step-' + (i + 1), {
                     [formStepperId + '-step-done']: i + 1 < currentStep,

package/dist/collection/components/form-elements/form-structure-error.js

@@ -16,7 +16,7 @@ export class FormStructureError {
         this.sharedLocales = await getSharedLocal(newLanguage);
     }
     render() {
-        return (h(Host, { key: 'dd624e9f2a6bc15ef50d5792fdca51061cf89928' }, h("div", { key: '89ff3170d5ae151afa3134ac6bba44c7e16094c2', dir: this.sharedLocales.direction, part: "form-structure-error-container", class: "form-structure-error-container" }, h("div", { key: 'daa69e4328619fece0851d5ea97e0455eab111c9', part: "form-structure-error-content", class: "form-structure-error-content" }, this.sharedLocales.errors.wrongFormStructure))));
+        return (h(Host, { key: '161f83221df8faeb1d91e6cd863ce11bc7f31bf9', translate: "no" }, h("div", { key: 'fff9f6ca2495f9336517532b97079bacf5b1303c', dir: this.sharedLocales.direction, part: "form-structure-error-container", class: "form-structure-error-container" }, h("div", { key: '3868b1d864d7622c0889f848f363fde66c697fdb', part: "form-structure-error-content", class: "form-structure-error-content" }, this.sharedLocales.errors.wrongFormStructure))));
     }
     static get is() { return "form-structure-error"; }
     static get originalStyleUrls() {

package/dist/collection/components/form-elements/form-structure.js

@@ -43,7 +43,7 @@ export class FormStructure {
         if (!this.structure)
             return h("form-structure-error", { language: this.language });
         const { formController, resetFormErrorMessage } = this.form;
-        return (h(Host, null, h("form", Object.assign({ id: this.formId, class: "relative", dir: this.locale.sharedLocales.direction }, formController), h("form-dialog", { dialogClosed: resetFormErrorMessage, isError: !!this.errorMessage, closeText: (_a = locale === null || locale === void 0 ? void 0 : locale.sharedFormLocales) === null || _a === void 0 ? void 0 : _a.close, form: this.form, message: this.errorMessage }, h("div", { class: "form-success-container" }, h("svg", { fill: "none", "stroke-width": "2", viewBox: "0 0 24 24", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", xmlns: "http://www.w3.org/2000/svg", class: "size-[70px] stroke-green-700" }, h("path", { d: "M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z" }), h("path", { d: "m9 12 2 2 4-4" })), this.successMessage)), h("div", { part: "form-structure-form-container" }, !((_b = this === null || this === void 0 ? void 0 : this.structure) === null || _b === void 0 ? void 0 : _b.steps) && renderStructure(this.structure, this.formElementMapper, generalProps, this.fields, -2), !!((_c = this === null || this === void 0 ? void 0 : this.structure) === null || _c === void 0 ? void 0 : _c.steps) && (h("div", { part: "form-stepper-container", class: "overflow-hidden" }, renderStructure(this.structure, this.formElementMapper, generalProps, this.fields, -1), h("div", { class: "grid grid-cols-1 grid-rows-1" }, (_d = this === null || this === void 0 ? void 0 : this.structure) === null || _d === void 0 ? void 0 : _d.steps.map((_, i) => (h("div", { class: cn('col-start-1 row-start-1 transition-all !duration-700', {
+        return (h(Host, { translate: "no" }, h("form", Object.assign({ id: this.formId, class: "relative", dir: this.locale.sharedLocales.direction }, formController), h("form-dialog", { dialogClosed: resetFormErrorMessage, isError: !!this.errorMessage, closeText: (_a = locale === null || locale === void 0 ? void 0 : locale.sharedFormLocales) === null || _a === void 0 ? void 0 : _a.close, form: this.form, message: this.errorMessage }, h("div", { class: "form-success-container" }, h("svg", { fill: "none", "stroke-width": "2", viewBox: "0 0 24 24", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", xmlns: "http://www.w3.org/2000/svg", class: "size-[70px] stroke-green-700" }, h("path", { d: "M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z" }), h("path", { d: "m9 12 2 2 4-4" })), this.successMessage)), h("div", { part: "form-structure-form-container" }, !((_b = this === null || this === void 0 ? void 0 : this.structure) === null || _b === void 0 ? void 0 : _b.steps) && renderStructure(this.structure, this.formElementMapper, generalProps, this.fields, -2), !!((_c = this === null || this === void 0 ? void 0 : this.structure) === null || _c === void 0 ? void 0 : _c.steps) && (h("div", { part: "form-stepper-container", class: "overflow-hidden" }, renderStructure(this.structure, this.formElementMapper, generalProps, this.fields, -1), h("div", { class: "grid grid-cols-1 grid-rows-1" }, (_d = this === null || this === void 0 ? void 0 : this.structure) === null || _d === void 0 ? void 0 : _d.steps.map((_, i) => (h("div", { class: cn('col-start-1 row-start-1 transition-all !duration-700', {
                 'pointer-events-none! *:pointer-events-none!': this.currentStep !== i + 1,
                 'translate-x-full rtl:-translate-x-full opacity-0': this.currentStep < i + 1,
                 'translate-x-0 opacity-100': this.currentStep === i + 1,

package/dist/collection/components/form-elements/form-switch.js

@@ -28,7 +28,7 @@ export class FormSwitch {
     render() {
         const { disabled, meta, errorMessage, isError } = this.form.getInputState(this.name);
         const { label, errorTextMessage } = getInputLocalization(this, meta, errorMessage);
-        return (h(Host, { key: '21b21d6279e5dd9faa7bc6354e30fe14248d8706' }, h("div", { key: '00b94ccb30b48116b82cd81b2308c9a960bafe9e', part: `${this.name}`, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, disabled) }, h("div", { key: '8265cb8be934b8f2b86ef0464d251f6d32136167', part: `${this.name}-container form-input-container`, class: "form-input-container" }, h("shift-switch", { key: '83ab4704810ab0ffd6f11311e65d13fe79b0f087', name: this.name, label: label, class: "form-switch" })), h(FormErrorMessage, { key: '7ef3f5b09cf051ab20ac0a7f8851c92da8988d33', name: this.name, isError: isError, errorMessage: errorTextMessage }))));
+        return (h(Host, { key: '5a2fe6a337c4858c530e14c20c1b65d40e7a4106', translate: "no" }, h("div", { key: 'b56e99750bb85bfb8f5a2b7f51232c662864581c', part: `${this.name}`, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, disabled) }, h("div", { key: '7e362f04edec3bb2e722a00a3b196041a602c2ff', part: `${this.name}-container form-input-container`, class: "form-input-container" }, h("shift-switch", { key: 'f876fe63eac18903cc2b3232110c3db21dbf5d50', name: this.name, label: label, class: "form-switch" })), h(FormErrorMessage, { key: 'd5d5a88b4e018f8959e325877770434828b88edf', name: this.name, isError: isError, errorMessage: errorTextMessage }))));
     }
     static get is() { return "form-switch"; }
     static get originalStyleUrls() {

package/dist/collection/components/form-elements/form-text-area.js

@@ -40,9 +40,9 @@ export class FormTextArea {
         const { disabled, isRequired, meta, isError, errorMessage } = this.form.getInputState(this.name);
         const { label, placeholder, errorTextMessage } = getInputLocalization(this, meta, errorMessage);
         const isDisabled = disabled || this.isLoading || !!this.staticValue || this.isDisabled;
-        return (h(Host, { key: '036354c8fbb5a638462b2409c8f916e87f36e060' }, h("label", { key: '28a5e1d68352992301d08c4133728a90414678e2', part: `form-textarea ${this.name}`, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: isDisabled }) }, h(FormInputLabel, { key: 'e16bf70bcf7b3416e70e72756c6ecbc22e1df20c', name: this.name, isRequired: isRequired, label: label }), h("div", { key: '7a76ada19fcad73f11717d2157dbd24a74754632', part: `${this.name}-container form-input-container`, class: "form-input-container" }, h("textarea", { key: 'd2d3d8c16fc50c210892851154fab25bb9c4fda0', name: this.name, disabled: isDisabled, placeholder: placeholder, part: `${this.name}-textarea form-input-textarea`, class: cn('form-input-style form-input-textarea-style', partKeyPrefix + this.name, {
+        return (h(Host, { key: '0c5b11dba02a36e6db36c0af28093be7eeb8944e', translate: "no" }, h("label", { key: 'c2cdd39072d38b30848b35cb49860e7975617847', part: `form-textarea ${this.name}`, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: isDisabled }) }, h(FormInputLabel, { key: '97ccfbea906149c3c1e2cc5e2a8d2870e5872a5f', name: this.name, isRequired: isRequired, label: label }), h("div", { key: 'c6c606d06bb010f3399cec097adffb9ca928f2b9', part: `${this.name}-container form-input-container`, class: "form-input-container" }, h("textarea", { key: '49ef2aff82fdd06ca054dae2acd770f9df8ac2d6', name: this.name, disabled: isDisabled, placeholder: placeholder, part: `${this.name}-textarea form-input-textarea`, class: cn('form-input-style form-input-textarea-style', partKeyPrefix + this.name, {
                 'form-input-error-style': isError,
-            }) }, this.defaultValue)), h("div", { key: 'ded83b993895928ad873df986b99011009b963f3', class: "-mt-1" }, h(FormErrorMessage, { key: 'd3bc659c75e302ad3623f2966b1d1964403024cb', name: this.name, isError: isError, errorMessage: errorTextMessage })))));
+            }) }, this.defaultValue)), h("div", { key: 'd5384d8b11af7534edded15433cfdae324f3a365', class: "-mt-1" }, h(FormErrorMessage, { key: '9bb0096450f006f0832dd018e4f4c53fd3459cb8', name: this.name, isError: isError, errorMessage: errorTextMessage })))));
     }
     static get is() { return "form-text-area"; }
     static get originalStyleUrls() {

package/dist/collection/components/form-elements/form-time-picker-legacy.js

@@ -133,22 +133,22 @@ export class FormTimePicker {
         const step = this.minuteStep || 1;
         const hours = Array.from({ length: 24 }, (_, i) => i);
         const minutes = Array.from({ length: Math.ceil(60 / step) }, (_, i) => i * step);
-        return (h(Host, { key: 'd6663c643f3a007f1049d01d6dd2f1eb3103db51' }, h("label", { key: '420d14b690418abbc17eba871bded694063abfeb', part: this.name, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: isDisabled }) }, h(FormInputLabel, { key: '289ce0a23859f6a2ae0bb33fab56f8ea870b758a', isRequired: isRequired, label: label }), h("form-shadow-input", { key: '133d1e0ff04b9f19c2f87811141f5ed630b81634', name: this.name, form: this.form, value: this.selectedValue }), h("div", { key: '68a56bd6b2f2103247d8897e8236f5ed6707b135', part: `${this.name}-container form-input-container`, class: cn('form-input-container', { open: this.isOpen }) }, h("input", { key: 'a298fbafe64a25c518b2626fe74f8d804371b1ab', type: "text", readOnly: true, disabled: isDisabled, value: this.selectedValue, onClick: this.toggleDropdown, part: `${this.name}-input form-input`, placeholder: placeholder || (meta === null || meta === void 0 ? void 0 : meta.placeholder), class: cn('form-input-style form-input-select', {
+        return (h(Host, { key: '9d5bdcda658b5befe52aec5ee79c2d4a7f6761d1', translate: "no" }, h("label", { key: '1a849ecca842fd68593a3bf8bc734fc7b5e21eab', part: this.name, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: isDisabled }) }, h(FormInputLabel, { key: '984af4d271bff3948fae8f5d9c6d899ec8a68be0', isRequired: isRequired, label: label }), h("form-shadow-input", { key: '6d67bd827114a2e8b3917c6d1b79583273335073', name: this.name, form: this.form, value: this.selectedValue }), h("div", { key: 'c2ee3949f0ca43dfd87b3c53a02fa4a35026a0b8', part: `${this.name}-container form-input-container`, class: cn('form-input-container', { open: this.isOpen }) }, h("input", { key: '3d691f1cbdd084ca42ac62586e84709e526fd0a2', type: "text", readOnly: true, disabled: isDisabled, value: this.selectedValue, onClick: this.toggleDropdown, part: `${this.name}-input form-input`, placeholder: placeholder || (meta === null || meta === void 0 ? void 0 : meta.placeholder), class: cn('form-input-style form-input-select', {
                 'form-input-error-style': isError,
-            }) }), h("span", { key: '843de77fd1e98dc9b72a2bb6c43752c94f384fa1', part: `${this.name}-icon form-time-picker-icon`, class: "form-input-icon form-input-icon-end" }, h("svg", { key: 'f7c7a8012c4a9bc5e20848b1215461c12516e8a7', "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "size-full" }, h("circle", { key: '8466c577706d8d0943bbcbf662b325122d03cbca', cx: "12", cy: "12", r: "10" }), h("polyline", { key: '852ab08f1b34d059b68dc2c0e1415a327ce80f16', points: "12 6 12 12 16 14" }))), h("div", { key: 'af53b61dc0b745444e1c5b62690472d547481dd9', part: `${this.name}-dropdown form-time-picker-dropdown`, class: cn('form-picker-dropdown', {
+            }) }), h("span", { key: '6084eceb26190e8a829a71edf8751f4e830a544b', part: `${this.name}-icon form-time-picker-icon`, class: "form-input-icon form-input-icon-end" }, h("svg", { key: '26abe8de8826ac2a28ab234dddae744b6014905a', "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "size-full" }, h("circle", { key: 'cdc4a4bc0f811167e534caa36f9f41dcf2bf15be', cx: "12", cy: "12", r: "10" }), h("polyline", { key: '84f14df89b62ecd9ed69f797fdc39d8d8e62c0f6', points: "12 6 12 12 16 14" }))), h("div", { key: 'bbe67aa4ca67e5f86c6240ad7eba840eb6b69086', part: `${this.name}-dropdown form-time-picker-dropdown`, class: cn('form-picker-dropdown', {
                 upwards: this.openUpwards,
                 downwards: !this.openUpwards,
-            }) }, h("div", { key: 'e7be6706900041eb0b01d268cfd2a50f75b37991', class: "form-time-picker-columns" }, h("div", { key: '2134137b646480e823e78de2424c7b4e337c0919', class: "form-time-picker-column form-time-picker-hours" }, h("div", { key: '7b7d05ad2db51fca1ed974f61f9b22d3f47ae48b', class: "form-time-picker-column-header" }, "HH"), hours.map(hour => {
+            }) }, h("div", { key: 'aeb7b96e88cfbb5b43c7f6a308b8f1a0dce97112', class: "form-time-picker-columns" }, h("div", { key: '7f6c11471fdfb06c5ea679e2870c78663f001d05', class: "form-time-picker-column form-time-picker-hours" }, h("div", { key: '8ce375ff1f3f896dd0b4eea3abbc964e69790515', class: "form-time-picker-column-header" }, "HH"), hours.map(hour => {
             const hourDisabled = this.isHourDisabled(hour);
             return (h("button", { type: "button", disabled: hourDisabled, onClick: () => this.selectHour(hour), part: cn('form-time-picker-option', { 'form-time-picker-option-selected': hour === selectedHour }), class: cn('form-time-picker-option', {
                     selected: hour === selectedHour,
                 }) }, String(hour).padStart(2, '0')));
-        })), h("div", { key: 'd16846c8e002ba6e7b3677f926cdb18a0e801e59', class: "form-time-picker-column form-time-picker-minutes" }, h("div", { key: '36b24906997ee197a4e8c48c4f2466806e3fc0f3', class: "form-time-picker-column-header" }, "MM"), minutes.map(minute => {
+        })), h("div", { key: '2465c3958cd9822e774bbec5dba7cd8162eafcc2', class: "form-time-picker-column form-time-picker-minutes" }, h("div", { key: '0a1678b7fd7dac48cb69f4437c171a3272a14e74', class: "form-time-picker-column-header" }, "MM"), minutes.map(minute => {
             const minuteDisabled = selectedHour >= 0 ? this.isMinuteDisabled(selectedHour, minute) : false;
             return (h("button", { type: "button", disabled: minuteDisabled, onClick: () => this.selectMinute(minute), part: cn('form-time-picker-option', { 'form-time-picker-option-selected': minute === selectedMinute }), class: cn('form-time-picker-option', {
                     selected: minute === selectedMinute,
                 }) }, String(minute).padStart(2, '0')));
-        }))))), h(FormErrorMessage, { key: '8222c5dbcdd090f06cc940d22f4f129b2d66cd38', name: this.name, isError: isError, errorMessage: locale[errorMessage] || errorMessage }))));
+        }))))), h(FormErrorMessage, { key: 'f25fd5ee20a4fd8ba257cac5b916a62f943115d1', name: this.name, isError: isError, errorMessage: locale[errorMessage] || errorMessage }))));
     }
     static get is() { return "form-time-picker"; }
     static get originalStyleUrls() {

package/dist/collection/components/form-elements/form-vin-input.js

@@ -52,9 +52,9 @@ export class FormVinInput {
         const { label, placeholder, errorTextMessage } = getInputLocalization(this, meta, errorMessage);
         const isDisabled = disabled || this.isLoading || !!this.staticValue || this.isDisabled;
         const extractorTitle = ((_b = (_a = this.localization) === null || _a === void 0 ? void 0 : _a[language]) === null || _b === void 0 ? void 0 : _b.scan) || ((_j = (_g = (_f = (_e = (_d = (_c = this.form) === null || _c === void 0 ? void 0 : _c.context) === null || _d === void 0 ? void 0 : _d.structure) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.localization) === null || _g === void 0 ? void 0 : _g[(_h = this.form.context) === null || _h === void 0 ? void 0 : _h.language]) === null || _j === void 0 ? void 0 : _j['vin-scan']) || 'Scan Your VIN';
-        return (h(Host, { key: 'e935f68ad484fdd6b8eac606259d4266eb164af0' }, h("label", { key: '9cbfa9cc93a4738de2e98bbe97b52bc0907f1507', part: this.name, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: isDisabled }) }, h(FormInputLabel, { key: '27661de7bef808af4c3ca6ce65609c31a988a3b6', isRequired: isRequired, label: label }), h("div", { key: 'a3cf3c9b4d5a81f9539b6e61db626e7e3f84c803', part: `${this.name}-container form-input-container`, class: "form-input-container" }, h(FormInputPrefix, { key: 'a0a970ecc14f97ec169c45f1939e8f89cab37f93', name: this.name, direction: (_k = locale === null || locale === void 0 ? void 0 : locale.sharedFormLocales) === null || _k === void 0 ? void 0 : _k.direction, prefix: this.inputPrefix }), h("input", Object.assign({ key: '43a7e55f026e76fe7925dd73b1b3b8a43ce3b2a6' }, this.inputProps, { name: this.name, disabled: isDisabled, defaultValue: this.defaultValue, part: `${this.name}-input form-input`, placeholder: placeholder || (meta === null || meta === void 0 ? void 0 : meta.placeholder), style: Object.assign({}, (this.prefixWidth ? { [((_l = locale === null || locale === void 0 ? void 0 : locale.sharedFormLocales) === null || _l === void 0 ? void 0 : _l.direction) === 'rtl' ? 'paddingRight' : 'paddingLeft']: `${this.prefixWidth}px` } : {})), class: cn('form-input-style !uppercase', part, {
+        return (h(Host, { key: '7f0be690ebbd9a754968ac7fbc539db62c0c3ec7', translate: "no" }, h("label", { key: '44e3bbd8db35554fc6f917162e75cf5eb889ef47', part: this.name, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: isDisabled }) }, h(FormInputLabel, { key: 'df1967c356cf4d17f31f1eaa0107d32a598eba13', isRequired: isRequired, label: label }), h("div", { key: '681fa3eb80651e728d346f8dc9686abb9abe49ec', part: `${this.name}-container form-input-container`, class: "form-input-container" }, h(FormInputPrefix, { key: 'b6acc27a74ebead32324129497f5a5422fe04af6', name: this.name, direction: (_k = locale === null || locale === void 0 ? void 0 : locale.sharedFormLocales) === null || _k === void 0 ? void 0 : _k.direction, prefix: this.inputPrefix }), h("input", Object.assign({ key: 'd44d5499a73f12d8f0f185ece29064330a238632' }, this.inputProps, { name: this.name, disabled: isDisabled, defaultValue: this.defaultValue, part: `${this.name}-input form-input`, placeholder: placeholder || (meta === null || meta === void 0 ? void 0 : meta.placeholder), style: Object.assign({}, (this.prefixWidth ? { [((_l = locale === null || locale === void 0 ? void 0 : locale.sharedFormLocales) === null || _l === void 0 ? void 0 : _l.direction) === 'rtl' ? 'paddingRight' : 'paddingLeft']: `${this.prefixWidth}px` } : {})), class: cn('form-input-style !uppercase', part, {
                 'form-input-error-style': isError,
-            }) })), !!this.scannerIcon && (this.useOcr || this.readSticker) && (h("button", { key: 'c2665d8ab8ca8e673444457c54f656a95d911e5b', type: "button", disabled: isDisabled, part: cn('vin-validator', part + '-vin'), onClick: () => { var _a; return (_a = this === null || this === void 0 ? void 0 : this.el.getElementsByTagName('vin-extractor')[0]) === null || _a === void 0 ? void 0 : _a.open(); }, class: "absolute transition-all duration-500 disabled:!pointer-events-none disabled:!opacity-0 flex justify-center items-center end-3.5 !text-[#576675] enabled:hover:!text-black/85 aspect-square h-[70%] top-1/2 -translate-y-1/2" }, this.scannerIcon === 'qr-code' && h(QrCodeScanIcon, { key: '6c514dad1e627494b81971d053e7d75dfc5be13b', class: "size-[90%] text-inherit" }), this.scannerIcon === 'camera' && h(CameraIcon, { key: '5987670985521ceac807a20bff5bb0a286395b76', class: "size-[90%] text-inherit" })))), h(FormErrorMessage, { key: 'c7fb1546bbc155ef7cf7b8e5a77c03da97b6a392', name: this.name, isError: isError, errorMessage: errorTextMessage })), (this.useOcr || this.readSticker) && (h("div", { key: 'be3f07f5c4bbbd78be51890b23ddeb201c3791c2', class: "absolute" }, h("vin-extractor", { key: '17feec3c00754195455242bdc0c281fb38adf35b', verbose: true, manualCapture: true, useOcr: this.useOcr, title: extractorTitle, skipValidation: false, readSticker: this.readSticker, ocrEndpoint: this.ocrEndpoint, onExtract: newVin => {
+            }) })), !!this.scannerIcon && (this.useOcr || this.readSticker) && (h("button", { key: 'd30a7ead951bc286a1929a7ffa2bf3cdb65d9dbd', type: "button", disabled: isDisabled, part: cn('vin-validator', part + '-vin'), onClick: () => { var _a; return (_a = this === null || this === void 0 ? void 0 : this.el.getElementsByTagName('vin-extractor')[0]) === null || _a === void 0 ? void 0 : _a.open(); }, class: "absolute transition-all duration-500 disabled:!pointer-events-none disabled:!opacity-0 flex justify-center items-center end-3.5 !text-[#576675] enabled:hover:!text-black/85 aspect-square h-[70%] top-1/2 -translate-y-1/2" }, this.scannerIcon === 'qr-code' && h(QrCodeScanIcon, { key: '14b0055cf0551e7c2688be5520d5d2886a8c48dd', class: "size-[90%] text-inherit" }), this.scannerIcon === 'camera' && h(CameraIcon, { key: '91ab1477ae490b6c2552cda22c59b2a6a06fdd25', class: "size-[90%] text-inherit" })))), h(FormErrorMessage, { key: '9cc4877e621b0d04b8e971958c22ea6b3153a9c8', name: this.name, isError: isError, errorMessage: errorTextMessage })), (this.useOcr || this.readSticker) && (h("div", { key: 'b2985fcf816a684c0b93347e0e31a1d751a524d7', class: "absolute" }, h("vin-extractor", { key: '847023951fdc4cd651bf0f743d3df0c5cd3e9007', verbose: true, manualCapture: true, useOcr: this.useOcr, title: extractorTitle, skipValidation: false, readSticker: this.readSticker, ocrEndpoint: this.ocrEndpoint, onExtract: newVin => {
                 var _a, _b;
                 this.inputRef.value = newVin;
                 (_a = this.form) === null || _a === void 0 ? void 0 : _a.validateInput(this === null || this === void 0 ? void 0 : this.name);

package/dist/collection/components/forms/defaults/mappers.js

@@ -3,18 +3,12 @@
  * Copyright (c)
  */
 import { h } from "@stencil/core";
-import { getPhoneValidator } from "../../../features/form-hook/index";
 import { VehicleImageViewer } from "../../form-elements/VehicleImageViewer";
 import { CalendarDaysIcon } from "../../../global/assets/calendar-days-icon";
 import { format, isBefore, isEqual } from "date-fns";
 import { decodeTimeOffset } from "../../../global/lib/decode-time-offset";
 import { populateItems } from "../../../global/lib/populate-items";
-export const getFormMappers = (stateObject, extraMappers = {}) => (Object.assign({ submit: ({ props }) => h("form-submit", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name }, props)), inputPreview: ({ props }) => h("form-input-preview", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name }, props)), fileUploader: ({ props }) => h("form-file", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name }, props)), formStepper: ({ props, language }) => h("form-stepper", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name, language: language }, props)), back: ({ props }) => h("form-stepper-control", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name }, props)), stepperSubmit: ({ props }) => h("form-stepper-submit", Object.assign({ key: (props === null || props === void 0 ? void 0 : props.step) || (props === null || props === void 0 ? void 0 : props.name) }, props)), name: ({ props }) => h("form-input", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name }, props)), lastName: ({ props }) => h("form-input", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name }, props)), email: ({ props }) => h("form-input", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name, type: "email" }, props)), message: ({ props }) => h("form-text-area", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name }, props)), file: ({ props }) => h("form-file", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name }, props)), vin: ({ props }) => h("form-vin-input", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name }, props)), vehicleImage: ({ form }) => h(VehicleImageViewer, { form: form }), phone: ({ props, isLoading }) => {
-        if (!stateObject.phoneValidator) {
-            stateObject.phoneValidator = getPhoneValidator((props === null || props === void 0 ? void 0 : props.countryCode) || '');
-        }
-        return h("form-phone-number", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name, defaultValue: stateObject.phoneValidator.default }, props, { isLoading: isLoading, validator: stateObject.phoneValidator }));
-    }, vehicle: ({ language, props }) => {
+export const getFormMappers = (extraMappers = {}) => (Object.assign({ submit: ({ props }) => h("form-submit", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name }, props)), inputPreview: ({ props }) => h("form-input-preview", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name }, props)), fileUploader: ({ props }) => h("form-file", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name }, props)), formStepper: ({ props, language }) => h("form-stepper", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name, language: language }, props)), back: ({ props }) => h("form-stepper-control", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name }, props)), stepperSubmit: ({ props }) => h("form-stepper-submit", Object.assign({ key: (props === null || props === void 0 ? void 0 : props.step) || (props === null || props === void 0 ? void 0 : props.name) }, props)), name: ({ props }) => h("form-input", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name }, props)), lastName: ({ props }) => h("form-input", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name }, props)), email: ({ props }) => h("form-input", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name, type: "email" }, props)), message: ({ props }) => h("form-text-area", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name }, props)), file: ({ props }) => h("form-file", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name }, props)), vin: ({ props }) => h("form-vin-input", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name }, props)), vehicleImage: ({ form }) => h(VehicleImageViewer, { form: form }), phone: ({ props, isLoading }) => h("form-phone-number", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name, isLoading: isLoading }, props)), vehicle: ({ language, props }) => {
         const fetcher = async ({ signal, context }) => {
             var _a, _b;
             const params = new URLSearchParams(window.location.search);