adp-web-components 0.1.70 → 0.1.72

package/dist/collection/components/form-elements/form-step-control.js

@@ -0,0 +1,207 @@
+/*!
+ * Built by ShiftSoftware
+ * Copyright (c)
+ */
+import { h } from "@stencil/core";
+import cn from "../../global/lib/cn";
+const buttonSubscriberKey = 'stepper-control-button';
+export class FormStepperControl {
+    constructor() {
+        this.submitTextKey = 'submit';
+        this.localization = {};
+    }
+    async componentWillLoad() {
+        this.form.subscribe(buttonSubscriberKey, this);
+    }
+    async disconnectedCallback() {
+        this.form.unsubscribe(buttonSubscriberKey);
+    }
+    reset() { }
+    render() {
+        const [_, language] = this.form.getFormLocale();
+        let step = this.form.getStepLabels(language, this.step);
+        const text = (step === null || step === void 0 ? void 0 : step.back) || '';
+        return (h("button", { key: '945331c5dba3291aa53e137e956aa10499835253', type: "button", formnovalidate: true, disabled: this.isLoading, part: cn('stepper-control', buttonSubscriberKey), onClick: () => (this.form.formStructure.currentStep -= 1), class: cn('stepper-control', {
+                loading: this.isLoading,
+            }) }, "ss", text));
+    }
+    static get is() { return "form-stepper-control"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["form-inputs.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["form-inputs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "step": {
+                "type": "number",
+                "attribute": "step",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "language": {
+                "type": "string",
+                "attribute": "language",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "wrapperId": {
+                "type": "string",
+                "attribute": "wrapper-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "isLoading": {
+                "type": "boolean",
+                "attribute": "is-loading",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "form": {
+                "type": "unknown",
+                "attribute": "form",
+                "mutable": false,
+                "complexType": {
+                    "original": "FormHook<any>",
+                    "resolved": "FormHook<any>",
+                    "references": {
+                        "FormHook": {
+                            "location": "import",
+                            "path": "~features/form-hook",
+                            "id": "src/features/form-hook/index.ts::FormHook"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "wrapperClass": {
+                "type": "string",
+                "attribute": "wrapper-class",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "submitTextKey": {
+                "type": "string",
+                "attribute": "submit-text-key",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'submit'"
+            },
+            "localization": {
+                "type": "unknown",
+                "attribute": "localization",
+                "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"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,210 @@
+/*!
+ * Built by ShiftSoftware
+ * Copyright (c)
+ */
+import { h } from "@stencil/core";
+import cn from "../../global/lib/cn";
+import { getNestedValue } from "../../global/lib/get-nested-value";
+import Loader from "~assets/white-loader.svg";
+const buttonSubscriberKey = 'stepper-submit-button';
+export class FormStepperSubmit {
+    constructor() {
+        this.submitTextKey = 'submit';
+        this.localization = {};
+    }
+    async componentWillLoad() {
+        this.form.subscribe(buttonSubscriberKey, this);
+    }
+    async disconnectedCallback() {
+        this.form.unsubscribe(buttonSubscriberKey);
+    }
+    reset() { }
+    render() {
+        var _a, _b;
+        const [locale, language] = this.form.getFormLocale();
+        let step = this.form.getStepLabels(language, this.step);
+        const submitText = ((_b = (_a = this.localization) === null || _a === void 0 ? void 0 : _a[language]) === null || _b === void 0 ? void 0 : _b.label) || (step === null || step === void 0 ? void 0 : step.submitButton) || getNestedValue(locale, this.submitTextKey) || getNestedValue(locale, 'sharedFormLocales.submit') || 'Submit';
+        return (h("button", { key: '7030346cfd7ebc4b8f0a811a72895c97087f290c', type: "submit", formnovalidate: true, disabled: this.isLoading, part: cn('submit-button', buttonSubscriberKey), class: cn('form-submit', {
+                loading: this.isLoading,
+            }) }, h("div", { key: 'ebe8c1671a59625beadd37259ad04dedfb7be8c4', part: "form-submit-text", class: "opacity-0 form-submit-text-style" }, submitText), h("div", { key: 'eb37df60958957843622811f41d8991c7d9265e0', part: "form-submit-text", class: "form-submit-text-style form-submit-text-position" }, submitText), h("div", { key: '292f66eed05235e713033c8e749cee5f14b0b66f', part: "form-submit-loading-container", class: "form-submit-loading-container" }, h("img", { key: '8adaec51570be4bd168f1352fe8429ee56dba179', part: "form-submit-loading-icon", class: "form-submit-loading-icon", src: Loader }))));
+    }
+    static get is() { return "form-stepper-submit"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["form-inputs.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["form-inputs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "step": {
+                "type": "number",
+                "attribute": "step",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "language": {
+                "type": "string",
+                "attribute": "language",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "wrapperId": {
+                "type": "string",
+                "attribute": "wrapper-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "isLoading": {
+                "type": "boolean",
+                "attribute": "is-loading",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "form": {
+                "type": "unknown",
+                "attribute": "form",
+                "mutable": false,
+                "complexType": {
+                    "original": "FormHook<any>",
+                    "resolved": "FormHook<any>",
+                    "references": {
+                        "FormHook": {
+                            "location": "import",
+                            "path": "~features/form-hook",
+                            "id": "src/features/form-hook/index.ts::FormHook"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "wrapperClass": {
+                "type": "string",
+                "attribute": "wrapper-class",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "submitTextKey": {
+                "type": "string",
+                "attribute": "submit-text-key",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'submit'"
+            },
+            "localization": {
+                "type": "unknown",
+                "attribute": "localization",
+                "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"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            }
+        };
+    }
+}

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: '7db25de8392c182f045f3ff24647414dc1cfb901' }, h("div", { key: 'f23892982a3d6f63ac06927611b43d22eeebc8d7', dir: this.sharedLocales.direction, part: "form-structure-error-container", class: "form-structure-error-container" }, h("div", { key: '99d0c58ceeec05ea9e4bbb3fbba5f0e31acaa087', part: "form-structure-error-content", class: "form-structure-error-content" }, this.sharedLocales.errors.wrongFormStructure))));
+        return (h(Host, { key: 'b9cecd3f726d5fb7b8b54701e29fa7c7ce6ee8bf' }, h("div", { key: '525a6754e3fc8966c0d341431a1795264ad92082', dir: this.sharedLocales.direction, part: "form-structure-error-container", class: "form-structure-error-container" }, h("div", { key: '18696a1d8c041b0524481d42300105f90764cb67', 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

@@ -6,12 +6,14 @@ import { Host, h } from "@stencil/core";
 import generalSchema from "../../locales/general/type";
 import { getLocaleLanguage, getSharedLocal, sharedLocalesSchema } from "../../features/multi-lingual/index";
 import { renderStructure } from "../../features/form-hook/index";
+import cn from "../../global/lib/cn";
 export class FormStructure {
     constructor() {
         // #region Localization
         this.formLocale = {};
         this.language = 'en';
         this.locale = Object.assign({ sharedLocales: sharedLocalesSchema.getDefault() }, generalSchema.getDefault());
+        this.currentStep = 1;
     }
     async componentWillLoad() {
         this.form.formStructure = this;
@@ -29,7 +31,7 @@ export class FormStructure {
         }, 300);
     }
     render() {
-        var _a;
+        var _a, _b, _c, _d;
         const [locale] = this.form.getFormLocale();
         const generalProps = {
             form: this.form,
@@ -41,7 +43,13 @@ 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", null, renderStructure(this.structure, this.formElementMapper, generalProps, this.fields)), h("button", { formnovalidate: true, type: "submit", class: "hidden" }))));
+        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", { class: "relative overflow-hidden grid grid-cols-1 grid-rows-1" }, !((_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, this.currentStep), !!((_c = this === null || this === void 0 ? void 0 : this.structure) === null || _c === void 0 ? void 0 : _c.steps) &&
+            ((_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,
+                    '-translate-x-full rtl:translate-x-full  opacity-0': this.currentStep > i + 1,
+                }) }, renderStructure(this.structure, this.formElementMapper, generalProps, this.fields, i + 1)))))), h("button", { formnovalidate: true, type: "submit", class: "hidden" }))));
     }
     static get is() { return "form-structure"; }
     static get originalStyleUrls() {
@@ -226,7 +234,7 @@ export class FormStructure {
                 "mutable": false,
                 "complexType": {
                     "original": "FormElementStructure<any>",
-                    "resolved": "{ data?: Record<string, any>; requiredContext?: Record<string, boolean>; } & { id?: string; class?: string; staticValue?: any; isHidden?: boolean; isDisabled?: boolean; children?: any[]; } & { tag: string; name?: any; } | { data?: Record<string, any>; requiredContext?: Record<string, boolean>; } & { id?: string; class?: string; staticValue?: any; isHidden?: boolean; isDisabled?: boolean; children?: any[]; } & { tag?: string; name: any; }",
+                    "resolved": "{ steps?: Record<LanguageKeys, Step>[]; data?: Record<string, any>; requiredContext?: Record<string, boolean>; } & { id?: string; step?: number; type?: string; class?: string; staticValue?: any; isHidden?: boolean; isDisabled?: boolean; children?: any[]; } & { tag: string; name?: any; } | { steps?: Record<LanguageKeys, Step>[]; data?: Record<string, any>; requiredContext?: Record<string, boolean>; } & { id?: string; step?: number; type?: string; class?: string; staticValue?: any; isHidden?: boolean; isDisabled?: boolean; children?: any[]; } & { tag?: string; name: any; }",
                     "references": {
                         "FormElementStructure": {
                             "location": "import",
@@ -273,7 +281,8 @@ export class FormStructure {
     static get states() {
         return {
             "locale": {},
-            "formContent": {}
+            "formContent": {},
+            "currentStep": {}
         };
     }
     static get watchers() {

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

@@ -23,9 +23,9 @@ export class FormSubmit {
         var _a, _b;
         const [locale, language] = this.form.getFormLocale();
         const submitText = ((_b = (_a = this.localization) === null || _a === void 0 ? void 0 : _a[language]) === null || _b === void 0 ? void 0 : _b.label) || getNestedValue(locale, this.submitTextKey) || getNestedValue(locale, 'sharedFormLocales.submit') || 'Submit';
-        return (h("button", { key: '0f7a6639fa56d839b401b141e596255118de6b1a', type: "submit", formnovalidate: true, part: buttonSubscriberKey, disabled: this.isLoading, class: cn('form-submit', {
+        return (h("button", { key: '6c0babdded1ae5057221f60a55ea36d34472e8be', type: "submit", formnovalidate: true, part: buttonSubscriberKey, disabled: this.isLoading, class: cn('form-submit', {
                 loading: this.isLoading,
-            }) }, h("div", { key: '551efe34c37bf6c8dfdc0a64fc2cd27e808170e6', part: "form-submit-text", class: "opacity-0 form-submit-text-style" }, submitText), h("div", { key: 'bf6b057529ac95d238298530a8537fdb678f3268', part: "form-submit-text", class: "form-submit-text-style form-submit-text-position" }, submitText), h("div", { key: '403d7c03380dd38e8c263aa28d931f50404fd41a', part: "form-submit-loading-container", class: "form-submit-loading-container" }, h("img", { key: '197ae25f2f27f73e85a7f3b486543869c0f43ae3', part: "form-submit-loading-icon", class: "form-submit-loading-icon", src: Loader }))));
+            }) }, h("div", { key: '18be88443c65059f1660ff66b0921c81d4b00061', part: "form-submit-text", class: "opacity-0 form-submit-text-style" }, submitText), h("div", { key: '5ee6a9d9a31f5bd152c75653b63165dd352bc41c', part: "form-submit-text", class: "form-submit-text-style form-submit-text-position" }, submitText), h("div", { key: 'ecaee019da090c5a8dbc55069527b8f4ae30a090', part: "form-submit-loading-container", class: "form-submit-loading-container" }, h("img", { key: 'a626e6ecb56d5e6648a56ec0435f7dd76f5a853a', part: "form-submit-loading-icon", class: "form-submit-loading-icon", src: Loader }))));
     }
     static get is() { return "form-submit"; }
     static get originalStyleUrls() {

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: 'bd8f4dd2577f47ae25dd25769d711eadc1c8eb1a' }, h("div", { key: 'ef5bd58546c30f6be7721b8c69bef36acdbb68b2', part: `${this.name}`, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, disabled) }, h("div", { key: 'e1eb4e88806bdf326b172e96fc3689b0a7ecd17c', part: `${this.name}-container form-input-container`, class: "form-input-container" }, h("shift-switch", { key: '12ceed268c3ed8921da80706f5b12f2e70957f87', name: this.name, label: label, class: "form-switch" })), h(FormErrorMessage, { key: '4fc37890d1a9594b5b9f1e491ddb532797be94d1', name: this.name, isError: isError, errorMessage: errorTextMessage }))));
+        return (h(Host, { key: '6532223fcdbc020d0cb50597c9d278b54331ba2a' }, h("div", { key: '64f6d0756f758f3772a0ba9d744bc6119e079deb', part: `${this.name}`, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, disabled) }, h("div", { key: 'd5836f1707fa495c1f2a25e1b036d09bedcc11bb', part: `${this.name}-container form-input-container`, class: "form-input-container" }, h("shift-switch", { key: 'f18e548987b94f4ef4c5dcac128fa0fe68223640', name: this.name, label: label, class: "form-switch" })), h(FormErrorMessage, { key: '498a4178eedd90abc09ad4dabfeecd75bc0ae8ad', 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: '8355ae989542dd22dbf93123f47e8b8fd6a8f477' }, h("label", { key: '4e6b3d5effe35dbd56b57699b217226926c9484e', part: `form-textarea ${this.name}`, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: isDisabled }) }, h(FormInputLabel, { key: 'a10df0dc42b7131072d6523b4d4159f745c67b6f', name: this.name, isRequired: isRequired, label: label }), h("div", { key: '2830c626166bd01866350b0c60164578ce669f0e', part: `${this.name}-container form-input-container`, class: "form-input-container" }, h("textarea", { key: '5f0cf7cbaddb34271d834d48e662a7921d1008d4', 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: '25d338c4d007e177f32a9aca4e5b79277d8fc1bf' }, h("label", { key: '99e72449e79bfa13f639f50395feb330758cd041', part: `form-textarea ${this.name}`, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: isDisabled }) }, h(FormInputLabel, { key: '95faa4295bfd7da486e1bf7917a8e5d2f04c13f4', name: this.name, isRequired: isRequired, label: label }), h("div", { key: '385013d6cda348752110e400370a5af65ec876af', part: `${this.name}-container form-input-container`, class: "form-input-container" }, h("textarea", { key: '36c92728aa1ab230a52fca245dd5d43489290e0d', 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: '927d5d2071175aad58f2947c82af3b1d87d630ad', class: "-mt-1" }, h(FormErrorMessage, { key: '1913bbf92a5a9ddc695243b92244355864ef297b', name: this.name, isError: isError, errorMessage: errorTextMessage })))));
+            }) }, this.defaultValue)), h("div", { key: '71d74743769f550d1173ab981f6ecb1d50e84704', class: "-mt-1" }, h(FormErrorMessage, { key: '6bfc59c04b1c03fd4584eae544096c835517bc05', 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: '06367a15a7bc5114aef726476a2c9925105be6c2' }, h("label", { key: '4831bc05601026313a7022a1d9a683822c517df0', part: this.name, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: isDisabled }) }, h(FormInputLabel, { key: '29f80d8fb4cef8cbe799dc357483382a5f5f3b3b', isRequired: isRequired, label: label }), h("form-shadow-input", { key: 'bfd18e8bdd9bccf3c6237dbe15f27fa45c44dc90', name: this.name, form: this.form, value: this.selectedValue }), h("div", { key: '2868a3a0b7fc1a42441d3dffcabc49d349f3dcfa', part: `${this.name}-container form-input-container`, class: cn('form-input-container', { open: this.isOpen }) }, h("input", { key: 'bf700f9f83ecc7a9cacced5663a979d4fe188505', 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: '6bb395aa80c55ed42349ae54a2c8fe80720097e8' }, h("label", { key: '46237f459fcf1d257063bf81967cb56a261780c4', part: this.name, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: isDisabled }) }, h(FormInputLabel, { key: 'cd4c702c543e4434f9a702704a6d3aca9ffb80e7', isRequired: isRequired, label: label }), h("form-shadow-input", { key: '49b8b2be00be7ded1c24ff78c72fdc027891291d', name: this.name, form: this.form, value: this.selectedValue }), h("div", { key: 'ee765bca38085f4b480351f500a320ab7831fe16', part: `${this.name}-container form-input-container`, class: cn('form-input-container', { open: this.isOpen }) }, h("input", { key: '05f8706cafd330f2b2c85d7214499f87d75d9d5c', 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: '216b2b7ae03a76e752a36ab78fae8fa651858dc1', part: `${this.name}-icon form-time-picker-icon`, class: "form-input-icon form-input-icon-end" }, h("svg", { key: '4b9a63a2d8673f68f9d64f9c0d8bc4594216039a', "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: '4f905ffed2dfeba05f52036dbcbf5530729e5e99', cx: "12", cy: "12", r: "10" }), h("polyline", { key: '7731a613dee128c1ff9806f35a11c603c2c732b7', points: "12 6 12 12 16 14" }))), h("div", { key: '997e967281589329298e4edc3b4c96880e84189c', part: `${this.name}-dropdown form-time-picker-dropdown`, class: cn('form-picker-dropdown', {
+            }) }), h("span", { key: '1cd7d111f3960d3afe5c794dd98b2381c6e115d4', part: `${this.name}-icon form-time-picker-icon`, class: "form-input-icon form-input-icon-end" }, h("svg", { key: 'd2cca338ce36c8a6b4315d10775ed9d55a868b2b', "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: '08c27a1894c484a88798cb3df72bdb1fbdb2fd34', cx: "12", cy: "12", r: "10" }), h("polyline", { key: 'b9fa78fb5952509356073347c3939882a246992a', points: "12 6 12 12 16 14" }))), h("div", { key: '4fe84cefc23de47de14f9bdd2b153af70b6d6c0c', part: `${this.name}-dropdown form-time-picker-dropdown`, class: cn('form-picker-dropdown', {
                 upwards: this.openUpwards,
                 downwards: !this.openUpwards,
-            }) }, h("div", { key: '34cba5f96c874c7c0ffb39ac66c61f81b5e41d2c', class: "form-time-picker-columns" }, h("div", { key: 'de9097078f5fdcfc97246d6ddc715a8244f76bf4', class: "form-time-picker-column form-time-picker-hours" }, h("div", { key: 'e3993e812e7c7f3120944a4cdc6d2f9554b8adfe', class: "form-time-picker-column-header" }, "HH"), hours.map(hour => {
+            }) }, h("div", { key: 'c4e77dd75e396bd9243784f154544b2e08969c9e', class: "form-time-picker-columns" }, h("div", { key: 'aa0c2cf38a0a558e04ce52a4b09230ec786e1ac8', class: "form-time-picker-column form-time-picker-hours" }, h("div", { key: 'e56babd3bd98531828a1fecd3afddf28c0c0fe33', 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: 'c908de2fe8b822bd97fa0ae6c39681585439ac09', class: "form-time-picker-column form-time-picker-minutes" }, h("div", { key: 'addff49b80f47bc326d72467845aa21238d44359', class: "form-time-picker-column-header" }, "MM"), minutes.map(minute => {
+        })), h("div", { key: '228759852fb08dcda55e0eca20b8c4a470258ceb', class: "form-time-picker-column form-time-picker-minutes" }, h("div", { key: '70505b645d08d64327da02c4339e206f4873970b', 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: '237ebec1a3024d5944cf67c558005cd565365cc5', name: this.name, isError: isError, errorMessage: locale[errorMessage] || errorMessage }))));
+        }))))), h(FormErrorMessage, { key: 'fa968f4a57a55591fe330f535eba20ea566089ea', 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: '24aef7fb6d4f96434fd9dc6ab8a23d9d4e8de1ee' }, h("label", { key: 'b89bb2652c01f43edf3ea7fb9636bcc8fdafbe9b', part: this.name, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: isDisabled }) }, h(FormInputLabel, { key: '958d93f12f9b86f104ec0ba91aa7be40efcd76a8', isRequired: isRequired, label: label }), h("div", { key: '861dda13e0cc65dfa2a5d1ec09644548fac5d538', part: `${this.name}-container form-input-container`, class: "form-input-container" }, h(FormInputPrefix, { key: '317b9fdc5154b734f67461e6e88448a08b8637bd', 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: 'f694f98a3ae8e13811bee5a7215160b4a4791e76' }, 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: 'bd1fd8e6c87e3e9abb1e2dc17990ecbb65beb662' }, h("label", { key: 'ee832844db1d09c8aa4edf37e489465e1ec44a0d', part: this.name, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: isDisabled }) }, h(FormInputLabel, { key: 'd32032c849295466d5e0717563bd605856b41757', isRequired: isRequired, label: label }), h("div", { key: '8ee4a1644f42224dbebd531a87936ea7b1c4231d', part: `${this.name}-container form-input-container`, class: "form-input-container" }, h(FormInputPrefix, { key: 'da01cd2329b03e0641a652dcb88cf688abc5e80c', 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: '060b7676b9d947f2e104b6cf7f1ac020a85acc43' }, 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: '8db0266e57e6e8e39dd08c124512c4cb0c9c078b', 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: '8b977fb5f399a7a09de05295b8839d6480c21e51', class: "size-[90%] text-inherit" }), this.scannerIcon === 'camera' && h(CameraIcon, { key: 'dd9b3ce45e8a0246884cd6a95d8e399c87e65dd1', class: "size-[90%] text-inherit" })))), h(FormErrorMessage, { key: '21ab2bfea29796f668138f21b4e0cc02a6cae921', name: this.name, isError: isError, errorMessage: errorTextMessage })), (this.useOcr || this.readSticker) && (h("div", { key: 'a264030a9abfc7538f946383884f205e64ece7e8', class: "absolute" }, h("vin-extractor", { key: 'ebb1e237f23028c2e561bbc31189000d923f973a', 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: '2231cb8c49d60a42e800d517545c6eebd4c22a3c', 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: '81abcee962204c97374507f7182b9695beccae43', class: "size-[90%] text-inherit" }), this.scannerIcon === 'camera' && h(CameraIcon, { key: '0c174dddeb5ca73526a838dd81c385a5e9a95ac5', class: "size-[90%] text-inherit" })))), h(FormErrorMessage, { key: 'e41bbe4f4c81e0ba3798ad6a4ab9ba1ddc19b7fd', name: this.name, isError: isError, errorMessage: errorTextMessage })), (this.useOcr || this.readSticker) && (h("div", { key: '9b2e4997dca4fd82c6f821616f3c78a355f1f873', class: "absolute" }, h("vin-extractor", { key: 'fe2371fd6184a21c9602736fa99301e442d8a580', 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);