adp-web-components 0.1.72 → 0.1.73

package/dist/collection/components/form-elements/{form-step-control.js → form-stepper-control.js}

@@ -4,6 +4,8 @@
  */
 import { h } from "@stencil/core";
 import cn from "../../global/lib/cn";
+import { ChevronLeftIcon } from "../../global/assets/chevron-left-icon";
+import { ChevronRightIcon } from "../../global/assets/chevron-right-icon";
 const buttonSubscriberKey = 'stepper-control-button';
 export class FormStepperControl {
     constructor() {
@@ -12,18 +14,23 @@ export class FormStepperControl {
     }
     async componentWillLoad() {
         this.form.subscribe(buttonSubscriberKey, this);
+        this.form.backButtonContexts.push(this);
     }
     async disconnectedCallback() {
+        this.form.backButtonContexts = this.form.backButtonContexts.filter(back => back !== this);
         this.form.unsubscribe(buttonSubscriberKey);
     }
-    reset() { }
     render() {
-        const [_, language] = this.form.getFormLocale();
-        let step = this.form.getStepLabels(language, this.step);
+        var _a, _b, _c;
+        const [locale, language] = this.form.getFormLocale();
+        const currentStep = (_b = (_a = this.form) === null || _a === void 0 ? void 0 : _a.formStructure) === null || _b === void 0 ? void 0 : _b.currentStep;
+        const direction = (_c = locale === null || locale === void 0 ? void 0 : locale.sharedFormLocales) === null || _c === void 0 ? void 0 : _c.direction;
+        let step = this.form.getStepLabels(language, currentStep);
         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));
+        return (h("button", { key: '9c70a7a5978bd0cf042d4abc0d957d731ef79d3c', type: "button", formnovalidate: true, disabled: this.isLoading, onClick: () => this.form.updateStep(-1), part: cn('stepper-control', `stepper-control-${direction}`, buttonSubscriberKey, `stepper-control-step-${currentStep}`), class: cn('transition-all duration-700 text-[16px] flex gap-1 items-center stepper-control', {
+                'loading': this.isLoading,
+                'pointer-events-none': currentStep === 10,
+            }) }, h("div", { key: '7978be37eb3eae37cd86d42ab52b4ee90e616b9d', part: cn('stepper-control-icon', `stepper-control-icon-${direction}`) }, direction === 'ltr' && h(ChevronLeftIcon, { key: 'fcff8206b825bcc9f7865413093db35f80210c4e', class: "size-5" }), direction === 'rtl' && h(ChevronRightIcon, { key: '8486f9fc8eda8cf631e4d4b5e0aa822f2d872123', class: "size-5" })), text));
     }
     static get is() { return "form-stepper-control"; }
     static get originalStyleUrls() {
@@ -38,25 +45,6 @@ export class FormStepperControl {
     }
     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",

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

@@ -24,9 +24,9 @@ export class FormStepperSubmit {
         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', {
+        return (h("button", { key: 'db9c12e114cf6c5d1e07ee6c913a5930fd2225ea', 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 }))));
+            }) }, h("div", { key: 'e3fff8243c1fe9b0376e1822ad7bce7010ccec72', part: "form-submit-text", class: "opacity-0 form-submit-text-style" }, submitText), h("div", { key: '3ebdb37a6b2198e1e3e00718db9a783663fc683a', part: "form-submit-text", class: "form-submit-text-style form-submit-text-position" }, submitText), h("div", { key: '6815fc039b0aa05a5fdf64b3a8b35df581f0395a', part: "form-submit-loading-container", class: "form-submit-loading-container" }, h("img", { key: 'd4c371b1f97104637d7a25710db8dcb635b0ba3b', part: "form-submit-loading-icon", class: "form-submit-loading-icon", src: Loader }))));
     }
     static get is() { return "form-stepper-submit"; }
     static get originalStyleUrls() {

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

@@ -0,0 +1,197 @@
+/*!
+ * Built by ShiftSoftware
+ * Copyright (c)
+ */
+import { h, Host, forceUpdate } from "@stencil/core";
+import cn from "../../global/lib/cn";
+const formStepperId = 'form-stepper-line';
+export class FormStepper {
+    constructor() {
+        this.updateLine = () => {
+            var _a;
+            const [locale] = this.form.getFormLocale();
+            const direction = (_a = locale === null || locale === void 0 ? void 0 : locale.sharedFormLocales) === null || _a === void 0 ? void 0 : _a.direction;
+            if (!this.container || !this.line || !direction)
+                return;
+            const buttons = this.container.querySelectorAll('button');
+            if (buttons.length < 2)
+                return;
+            const firstButton = buttons[0].getBoundingClientRect();
+            const lastButton = buttons[buttons.length - 1].getBoundingClientRect();
+            const firstCenter = firstButton.left + firstButton.width / 2;
+            const lastCenter = lastButton.left + lastButton.width / 2;
+            const width = Math.abs(lastCenter - firstCenter);
+            this.line.style.width = `${width}px`;
+        };
+    }
+    componentDidLoad() {
+        this.form.subscribe(formStepperId, this);
+        this.updateLine();
+        this.resizeObserver = new ResizeObserver(() => {
+            this.updateLine();
+        });
+        this.resizeObserver.observe(this.container);
+    }
+    async disconnectedCallback() {
+        this.form.unsubscribe(formStepperId);
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+    }
+    async onLanguageUpdate() {
+        forceUpdate(this);
+        this.line.style.width = `${0}px`;
+        setTimeout(() => this.updateLine(), 100);
+    }
+    render() {
+        var _a, _b, _c, _d, _e;
+        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: 'd30e72bc95df9d166a68339b33bc0dd0cc263c47' }, h("div", { key: '37617fcfc305b7ea4ed26a6290e0129ede2f5e4e', part: cn(formStepperId, this === null || this === void 0 ? void 0 : this.name), class: "w-full", id: this.wrapperId }, h("div", { key: '2d79f9c919afe6801abdcec4e92b4054d54f9424', ref: el => (this.container = el), class: "relative flex items-center justify-between px-1 w-full" }, h("div", { key: 'c7f284044046877a0aa6242e8edafdcb9d75558b', 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,
+                    [formStepperId + '-step-done' + (i + 1)]: i + 1 < currentStep,
+                    [formStepperId + '-step-active']: i + 1 === currentStep,
+                    [formStepperId + '-step-active' + (i + 1)]: i + 1 === currentStep,
+                }), class: "flex flex-col items-center" }, h("button", { type: "button", "aria-expanded": (_a = (i + 1 === currentStep)) === null || _a === void 0 ? void 0 : _a.toString(), part: cn(formStepperId + '-step-indicator', formStepperId + '-step-indicator-' + (i + 1), {
+                    [formStepperId + '-step-indicator-done']: i + 1 < currentStep,
+                    [formStepperId + '-step-indicator-done' + (i + 1)]: i + 1 < currentStep,
+                    [formStepperId + '-step-indicator-active']: i + 1 === currentStep,
+                    [formStepperId + '-step-indicator-active' + (i + 1)]: i + 1 === currentStep,
+                }), class: "relative z-[10] before:absolute before:inset-0 before:size-full before:origin-center before:bg-black/15 before:transition-all before:duration-500 aria-expanded:before:scale-[1.5] size-[32px] flex bg-black cursor-default items-center justify-center" }, h("div", { class: "relative z-10 text-white items-center text-[16px]", part: cn(formStepperId + '-step-indicator-text', formStepperId + '-step-indicator-text-' + (i + 1), {
+                    [formStepperId + '-step-indicator-text-done']: i + 1 < currentStep,
+                    [formStepperId + '-step-indicator-text-done' + (i + 1)]: i + 1 < currentStep,
+                    [formStepperId + '-step-indicator-text-active']: i + 1 === currentStep,
+                    [formStepperId + '-step-indicator-text-active' + (i + 1)]: i + 1 === currentStep,
+                }) }, (_b = step === null || step === void 0 ? void 0 : step[language]) === null || _b === void 0 ? void 0 : _b.stepCell)), h("span", { part: cn(formStepperId + '-step-title', formStepperId + '-step-title-' + (i + 1), {
+                    [formStepperId + '-step-title-done']: i + 1 < currentStep,
+                    [formStepperId + '-step-title-done' + (i + 1)]: i + 1 < currentStep,
+                    [formStepperId + '-step-title-active']: i + 1 === currentStep,
+                    [formStepperId + '-step-title-active' + (i + 1)]: i + 1 === currentStep,
+                }), class: "text-[14px] text-center mt-[12px] text-gray-600" }, (_c = step === null || step === void 0 ? void 0 : step[language]) === null || _c === void 0 ? void 0 : _c.stepTitle))));
+        })))));
+    }
+    static get is() { return "form-stepper"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["form-inputs.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["form-inputs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "attribute": "name",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "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
+            },
+            "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
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "language",
+                "methodName": "onLanguageUpdate"
+            }];
+    }
+}

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: '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))));
+        return (h(Host, { key: '3113ad0497753b7b4fc094f6a33da1f9edf5056c' }, h("div", { key: '4d84fd397a83956db9987f1bac1e20bf3e31532b', dir: this.sharedLocales.direction, part: "form-structure-error-container", class: "form-structure-error-container" }, h("div", { key: '0990e4213b87ce0ca8cc749b8babfeea62b799ff', 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

@@ -31,7 +31,7 @@ export class FormStructure {
         }, 300);
     }
     render() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         const [locale] = this.form.getFormLocale();
         const generalProps = {
             form: this.form,
@@ -43,13 +43,12 @@ 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", { 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" }))));
+        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" }, !((_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) && renderStructure(this.structure, this.formElementMapper, generalProps, this.fields, -1), !!((_d = this === null || this === void 0 ? void 0 : this.structure) === null || _d === void 0 ? void 0 : _d.steps) && (h("div", { class: "grid grid-cols-1 grid-rows-1" }, (_e = this === null || this === void 0 ? void 0 : this.structure) === null || _e === void 0 ? void 0 : _e.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() {

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: '6c0babdded1ae5057221f60a55ea36d34472e8be', type: "submit", formnovalidate: true, part: buttonSubscriberKey, disabled: this.isLoading, class: cn('form-submit', {
+        return (h("button", { key: '769ef9ef9fad8cf47ac7ba839d9ef2ef509431b4', type: "submit", formnovalidate: true, part: buttonSubscriberKey, disabled: this.isLoading, class: cn('form-submit', {
                 loading: this.isLoading,
-            }) }, 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 }))));
+            }) }, h("div", { key: '4462548295aac7fdedfd46d24f2e7a26a1f36414', part: "form-submit-text", class: "opacity-0 form-submit-text-style" }, submitText), h("div", { key: 'b386e936c108f5df590244d0b2946fd464419d9b', part: "form-submit-text", class: "form-submit-text-style form-submit-text-position" }, submitText), h("div", { key: '1859433db037ad7b71db29701a8998445abc076c', part: "form-submit-loading-container", class: "form-submit-loading-container" }, h("img", { key: 'af0bb789e18796a08a224739c594e65c0b04b2dd', 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: '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 }))));
+        return (h(Host, { key: '877e658dd8e30d45d5ef228db55036a209ee4805' }, h("div", { key: '48c0bb73b4d320c78dccb6b2869eb096559069ea', part: `${this.name}`, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, disabled) }, h("div", { key: '1fffdfb0e47c7da0628fef059a8b09747e48a3dc', part: `${this.name}-container form-input-container`, class: "form-input-container" }, h("shift-switch", { key: 'e1cb10adcb3d6a31b97550ac022e2757c6f442d1', name: this.name, label: label, class: "form-switch" })), h(FormErrorMessage, { key: '13d1f6ad4e6670a9b2b758a5fa6897215574f1fe', 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: '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, {
+        return (h(Host, { key: '82d262b89c00401010e862986968e61dcd0f6471' }, h("label", { key: '323c46544fa94a4e7f930e1e4b5eed72a32c5edb', part: `form-textarea ${this.name}`, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: isDisabled }) }, h(FormInputLabel, { key: 'a4383cca1e7bf7a5d0018bd99710d52e07a39677', name: this.name, isRequired: isRequired, label: label }), h("div", { key: '78f156268a939b87c5653ea124b102d5fe2f2509', part: `${this.name}-container form-input-container`, class: "form-input-container" }, h("textarea", { key: '7f687f208979006d9c7c24c22da7c531e12daa18', 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: '71d74743769f550d1173ab981f6ecb1d50e84704', class: "-mt-1" }, h(FormErrorMessage, { key: '6bfc59c04b1c03fd4584eae544096c835517bc05', name: this.name, isError: isError, errorMessage: errorTextMessage })))));
+            }) }, this.defaultValue)), h("div", { key: 'a76cad353532ec05cbbc30fa247e81d216059144', class: "-mt-1" }, h(FormErrorMessage, { key: '95cefaca72bc5bd0f16364eef7d75b91bbc85b1a', 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: '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', {
+        return (h(Host, { key: '66ec6a239fedc86dfd826323b0407f75bd3a6b5d' }, h("label", { key: 'c160d9c786e7034de1cfd75b1e147c0eb5fa97a4', part: this.name, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: isDisabled }) }, h(FormInputLabel, { key: '4f95166ee0b46654670be5202dd8baab483022fc', isRequired: isRequired, label: label }), h("form-shadow-input", { key: 'eb58ae46113abaaa55a6ae0ba2106cdd8398045e', name: this.name, form: this.form, value: this.selectedValue }), h("div", { key: '48119271ae30dbfff137069087b16604f443fb87', part: `${this.name}-container form-input-container`, class: cn('form-input-container', { open: this.isOpen }) }, h("input", { key: '7f3fb852987124c746ce19bbc4ba647d2eca3ceb', 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: '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', {
+            }) }), h("span", { key: '273ad19cc99c36da3984be119f6702b98f5fb1a9', part: `${this.name}-icon form-time-picker-icon`, class: "form-input-icon form-input-icon-end" }, h("svg", { key: '5056788c25b468f68e90bdea619cc5fe1dfa5617', "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: '154e070a80ba7601ccbd0d692f82fb65b4a2da41', cx: "12", cy: "12", r: "10" }), h("polyline", { key: '1b1b3abdb5e6996d4b129d0d7a7218010fe0d41f', points: "12 6 12 12 16 14" }))), h("div", { key: '667e3444f32e06a3dde37f401a0d73d9ab330d46', part: `${this.name}-dropdown form-time-picker-dropdown`, class: cn('form-picker-dropdown', {
                 upwards: this.openUpwards,
                 downwards: !this.openUpwards,
-            }) }, 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 => {
+            }) }, h("div", { key: 'ef65be9f10e823e8ec9702a110b7565a73772c30', class: "form-time-picker-columns" }, h("div", { key: 'e6c0ce55d00fe8a9e40fe52a26694f72ec640325', class: "form-time-picker-column form-time-picker-hours" }, h("div", { key: 'b836debe9d93832eb2f9e759ed882aa390377d6f', 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: '228759852fb08dcda55e0eca20b8c4a470258ceb', class: "form-time-picker-column form-time-picker-minutes" }, h("div", { key: '70505b645d08d64327da02c4339e206f4873970b', class: "form-time-picker-column-header" }, "MM"), minutes.map(minute => {
+        })), h("div", { key: '598658240032b8585e8948adc853edc14d19963b', class: "form-time-picker-column form-time-picker-minutes" }, h("div", { key: '39c67af195a5012225b9b48e745fc55d9755e21f', 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: 'fa968f4a57a55591fe330f535eba20ea566089ea', name: this.name, isError: isError, errorMessage: locale[errorMessage] || errorMessage }))));
+        }))))), h(FormErrorMessage, { key: '6718c361488548ad3a58251500ff270a31453c78', 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: '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, {
+        return (h(Host, { key: 'f8dcd55f2deb3a393a4ea81551aeec4519bbf813' }, h("label", { key: '367261752a53849322cd705e95b320fd9fa1cd93', part: this.name, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: isDisabled }) }, h(FormInputLabel, { key: '0bb15f1c03bfd76ab9cd9df1a8ac9cb501821f46', isRequired: isRequired, label: label }), h("div", { key: '564b0f28270c2b881445779ba9ca6ea03ccd2060', part: `${this.name}-container form-input-container`, class: "form-input-container" }, h(FormInputPrefix, { key: '15c357d4c652bcf92346e515a5a98698ec1be92a', 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: 'b1cb3ebceca65bd89154dce4aaf8bb8ff2e7373d' }, 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: '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 => {
+            }) })), !!this.scannerIcon && (this.useOcr || this.readSticker) && (h("button", { key: 'fbe33dcaaca1249008b824701a430a749149a9ce', 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: '85d20ee7614be8bdcd6f6a3e2a08b5764f7cd0a8', class: "size-[90%] text-inherit" }), this.scannerIcon === 'camera' && h(CameraIcon, { key: '4ea959b7a3f0392a109fc4671fd414e3cc457776', class: "size-[90%] text-inherit" })))), h(FormErrorMessage, { key: '84caad1dc67f8dbe0740a4e0e2b223b39d56b94c', name: this.name, isError: isError, errorMessage: errorTextMessage })), (this.useOcr || this.readSticker) && (h("div", { key: 'f84a25a71fb1299b6a283afa0012b2f47d5bb3b1', class: "absolute" }, h("vin-extractor", { key: 'dc9a2120fb2dfbc792f630fa9adbdf462deda8f0', 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

@@ -9,7 +9,7 @@ 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)), 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)), 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 }) => {
+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)), 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)), 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) || '');
         }

package/dist/collection/components/forms/general-inquiry.js

@@ -75,9 +75,9 @@ export class GeneralInquiryForm {
     // #endregion
     render() {
         var _a, _b;
-        return (h(Host, { key: '192dc4b9a764ea3dc9df6727391d963b0a015a4e' }, h("div", { key: '6e767ca421ee08a1c2c0487d2cb768133fe788f3', part: cn('shift-form', (_b = (_a = this.structure) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.theme, this.theme) }, h("div", { key: '4a4cf85b3b0d227e9262eff4f28f9168e3686498', part: "form-container", class: "relative min-h-[150px]" }, h("div", { key: 'dbfe2a97074332b8a059c07be060a1473fd0b133', part: "form-loader-container", class: cn('form-loader-container absolute top-0 left-0 w-full h-full pointer-events-none flex justify-center items-center transition-opacity duration-500', {
+        return (h(Host, { key: 'cc8693dc30e30391a15cccdcb59d2d320bc0f4dc' }, h("div", { key: '699d2a170820f419e1284e8424fc1fa39c57283d', part: cn('shift-form', (_b = (_a = this.structure) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.theme, this.theme) }, h("div", { key: '111c8c15a7fe693a825e23b4619b9be0b8d51b10', part: "form-container", class: "relative min-h-[150px]" }, h("div", { key: 'ca3b06774522c8b0973bf5ea87c3abcf15fe0c9b', part: "form-loader-container", class: cn('form-loader-container absolute top-0 left-0 w-full h-full pointer-events-none flex justify-center items-center transition-opacity duration-500', {
                 'opacity-0': this.structureRendered,
-            }) }, h(LoaderIcon, { key: '1ff8a1c5c6d68b02c4d78523331c3c28191e364a', part: "form-loader-icon", class: "img" })), h("flexible-container", { key: '858bba3ffb0ac528a6b77fdf080068f8113b0418', onlyForMounting: true, isOpened: this.structureRendered }, !!this.form && (h("form-structure", { key: '7e119ee3aeed1484a7344e72e43c22653da44363', form: this.form, fields: this.fields, formId: this.formId, formLocale: this.locale, structure: this.structure, isLoading: this.isLoading, language: this.localeLanguage, errorMessage: this.errorMessage, formElementMapper: elementMapper, successMessage: this.locale['Form submitted successfully.'] || 'Form submitted successfully.' }, h("slot", { key: '339f747bcc7d42e5036183efb28bc670e533de6a' }))))))));
+            }) }, h(LoaderIcon, { key: '38e489b793b571611f78eb3df602f6977c719592', part: "form-loader-icon", class: "img" })), h("flexible-container", { key: '682436ce4233053295581785ed259258e9a731b9', onlyForMounting: true, isOpened: this.structureRendered }, !!this.form && (h("form-structure", { key: 'b5886296208c68d3fd33261d10d03b3b33e859c3', form: this.form, fields: this.fields, formId: this.formId, formLocale: this.locale, structure: this.structure, isLoading: this.isLoading, language: this.localeLanguage, errorMessage: this.errorMessage, formElementMapper: elementMapper, successMessage: this.locale['Form submitted successfully.'] || 'Form submitted successfully.' }, h("slot", { key: 'db298c81011a8911de87c15ad86b2efe94434036' }))))))));
     }
     static get is() { return "general-inquiry-form"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/forms/service-booking.js

@@ -58,9 +58,9 @@ export class ServiceBookingForm {
     // #endregion
     render() {
         var _a, _b;
-        return (h(Host, { key: '2af991ae0e4fa193e3a097083d870e413e7b05ef' }, h("div", { key: '1675b47849c9452ab45e6c79dc7c401fc04c5de9', part: cn('shift-form', (_b = (_a = this.structure) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.theme, this.theme) }, h("div", { key: '0444c90e057429e3811b85b6ef9fde1ba7c39f1e', part: "form-container", class: "relative min-h-[150px]" }, h("div", { key: 'f71c4fcd02faa857a547b26d3658f016d6930496', part: "form-loader-container", class: cn('form-loader-container absolute top-0 left-0 w-full h-full pointer-events-none flex justify-center items-center transition-opacity duration-500', {
+        return (h(Host, { key: '1e5470559656553e9e6ea2f4917fde4e52dd6b82' }, h("div", { key: '7c4966646389d735889e1884bd5037d95aee62b2', part: cn('shift-form', (_b = (_a = this.structure) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.theme, this.theme) }, h("div", { key: 'f492fe188d027f9f6681c32854237de99de9fb04', part: "form-container", class: "relative min-h-[150px]" }, h("div", { key: 'e274850418ed91768de34bf19c8568626faf2904', part: "form-loader-container", class: cn('form-loader-container absolute top-0 left-0 w-full h-full pointer-events-none flex justify-center items-center transition-opacity duration-500', {
                 'opacity-0': this.structureRendered,
-            }) }, h(LoaderIcon, { key: '6720a4bc6e2994fcf5ad85f86dafa66f637037ea', part: "form-loader-icon", class: "img" })), h("flexible-container", { key: '7bbac23f91a77e216cc86a1c03cfd2159da2f79d', onlyForMounting: true, isOpened: this.structureRendered }, !!this.form && (h("form-structure", { key: '119d13ebaf8d7bf07840f8af27eeee92961a6acc', form: this.form, fields: this.fields, formId: this.formId, formLocale: this.locale, structure: this.structure, isLoading: this.isLoading, language: this.localeLanguage, errorMessage: this.errorMessage, formElementMapper: elementMapper, successMessage: this.locale['Form submitted successfully.'] || 'Form submitted successfully.' }, h("slot", { key: '292dcb2f8240493ad088bac3b995771048c58d37' }))))))));
+            }) }, h(LoaderIcon, { key: '520c649b2a3539fd121188c11011a61c7ff9e8c0', part: "form-loader-icon", class: "img" })), h("flexible-container", { key: '888dd1ee3f916bd7a4f479535eb37d82c27b35b7', onlyForMounting: true, isOpened: this.structureRendered }, !!this.form && (h("form-structure", { key: 'd7bf63aa6c8c6866a6c43bc41cc67beca89a19f1', form: this.form, fields: this.fields, formId: this.formId, formLocale: this.locale, structure: this.structure, isLoading: this.isLoading, language: this.localeLanguage, errorMessage: this.errorMessage, formElementMapper: elementMapper, successMessage: this.locale['Form submitted successfully.'] || 'Form submitted successfully.' }, h("slot", { key: 'fe347a64038f85557550ceb0ca26ebb2831d9ac9' }))))))));
     }
     static get is() { return "service-booking-form"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/forms/ssc-lookup.js

@@ -69,9 +69,9 @@ export class SSCLookupForm {
     // #endregion
     render() {
         var _a, _b;
-        return (h(Host, { key: 'ec3fdab595b43966f1f50d555708492d1edd402b' }, h("div", { key: 'ff3319025a62a4535e103bf42b48079de2fe4864', part: cn('shift-form', (_b = (_a = this.structure) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.theme, this.theme) }, h("div", { key: 'd708e16968cad0d2c991091444588939cf4a8068', part: "form-container", class: "relative min-h-[150px]" }, h("div", { key: '40311bfc56b69cebbe3d70e75b1abdf5ac4a87bd', part: "form-loader-container", class: cn('form-loader-container absolute top-0 left-0 w-full h-full pointer-events-none flex justify-center items-center transition-opacity duration-500', {
+        return (h(Host, { key: '0b8851aaeb64ae4a1073b5d45fdfcf0973ab5bf6' }, h("div", { key: 'c1d139085cf16de07c50e3744fbd59a9f8e01232', part: cn('shift-form', (_b = (_a = this.structure) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.theme, this.theme) }, h("div", { key: '7d191bb8cbf4b2a11f6938ef9ba85a0fe3ff4d22', part: "form-container", class: "relative min-h-[150px]" }, h("div", { key: '218e9020a35f755182fc1dba3a5579ab3cf464f4', part: "form-loader-container", class: cn('form-loader-container absolute top-0 left-0 w-full h-full pointer-events-none flex justify-center items-center transition-opacity duration-500', {
                 'opacity-0': this.structureRendered,
-            }) }, h(LoaderIcon, { key: '98b35afbac62b677c5b03c3ab71222fa2d80fd72', part: "form-loader-icon", class: "img" })), h("flexible-container", { key: 'af134e0d41bb519c982cb16d65ce51d82cf7406c', onlyForMounting: true, isOpened: this.structureRendered }, !!this.form && (h("form-structure", { key: '5e7acaffe1b5f5567ead8e9eb0f09d85fd16c438', form: this.form, fields: this.fields, formId: this.formId, formLocale: this.locale, structure: this.structure, isLoading: this.isLoading, language: this.localeLanguage, errorMessage: this.errorMessage, formElementMapper: elementMapper, successMessage: this.locale['Form submitted successfully.'] || 'Form submitted successfully.' }, h("slot", { key: '47a12dca08ee749c10e6d73c4bfab009ced14c89' }))))))));
+            }) }, h(LoaderIcon, { key: 'a41cf1f241f53798580db6481b7631c6a5bbb72e', part: "form-loader-icon", class: "img" })), h("flexible-container", { key: '01e5622229a41e9752125a1a9dc4a000f3c9d189', onlyForMounting: true, isOpened: this.structureRendered }, !!this.form && (h("form-structure", { key: 'b996ea4f93cdb1811ec348823613716be22d4ee6', form: this.form, fields: this.fields, formId: this.formId, formLocale: this.locale, structure: this.structure, isLoading: this.isLoading, language: this.localeLanguage, errorMessage: this.errorMessage, formElementMapper: elementMapper, successMessage: this.locale['Form submitted successfully.'] || 'Form submitted successfully.' }, h("slot", { key: '28db639c4f19786ef7ef93d8a0dcd76f30625af1' }))))))));
     }
     static get is() { return "ssc-lookup-form"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/forms/test-drive.js

@@ -58,9 +58,9 @@ export class TestDriveForm {
     // #endregion
     render() {
         var _a, _b;
-        return (h(Host, { key: 'fab49ec7cbc4969dd4511b0939d553f736522cb1' }, h("div", { key: '506afbb9bbad45d22a03b0dcdcd1d5564338a568', part: cn('shift-form', (_b = (_a = this.structure) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.theme, this.theme) }, h("div", { key: '6c2052eff11adb5b8317299f4c9a65ca0a4356c5', part: "form-container", class: "relative min-h-[150px]" }, h("div", { key: '4a34ab6f134bdaeddf34ba1426ffd273c74a50c2', part: "form-loader-container", class: cn('form-loader-container absolute top-0 left-0 w-full h-full pointer-events-none flex justify-center items-center transition-opacity duration-500', {
+        return (h(Host, { key: '6b4bfa35577dd1eea7945977d6169688e7d3fa92' }, h("div", { key: '151cb21bf9083d95af2edf33537b93dda4e521ba', part: cn('shift-form', (_b = (_a = this.structure) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.theme, this.theme) }, h("div", { key: '39fc83cd2a0017edf79b196903e048b35f0427e5', part: "form-container", class: "relative min-h-[150px]" }, h("div", { key: 'c1fab2e0659a220ed5e83145488038abc7496226', part: "form-loader-container", class: cn('form-loader-container absolute top-0 left-0 w-full h-full pointer-events-none flex justify-center items-center transition-opacity duration-500', {
                 'opacity-0': this.structureRendered,
-            }) }, h(LoaderIcon, { key: '781356c6d37992f18a0f11306a0f661401033473', part: "form-loader-icon", class: "img" })), h("flexible-container", { key: '8985547d2568fc1315ab5d1e2607093063140bf0', onlyForMounting: true, isOpened: this.structureRendered }, !!this.form && (h("form-structure", { key: '6574311073efb3ab665e9282667abd9431c52336', form: this.form, fields: this.fields, formId: this.formId, formLocale: this.locale, structure: this.structure, isLoading: this.isLoading, language: this.localeLanguage, errorMessage: this.errorMessage, formElementMapper: elementMapper, successMessage: this.locale['Form submitted successfully.'] || 'Form submitted successfully.' }, h("slot", { key: '76920b66289cd0cf6086ff8b88a138f93cc71560' }))))))));
+            }) }, h(LoaderIcon, { key: '3b6face05283f5b08eb57f6ebda83b38ab2d0861', part: "form-loader-icon", class: "img" })), h("flexible-container", { key: '3e58e1a399c07cec951d6711e708be9a3e14d5fc', onlyForMounting: true, isOpened: this.structureRendered }, !!this.form && (h("form-structure", { key: 'abf9178d5061b51288ee93dddeecb711af6bd663', form: this.form, fields: this.fields, formId: this.formId, formLocale: this.locale, structure: this.structure, isLoading: this.isLoading, language: this.localeLanguage, errorMessage: this.errorMessage, formElementMapper: elementMapper, successMessage: this.locale['Form submitted successfully.'] || 'Form submitted successfully.' }, h("slot", { key: '6d85f86268f831e3fb89aae586655292e78c564e' }))))))));
     }
     static get is() { return "test-drive-form"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/forms/vehicle-quotation.js

@@ -148,9 +148,9 @@ export class VehicleQuotationForm {
     // #endregion
     render() {
         var _a, _b;
-        return (h(Host, { key: '9acb7e79cb87c434aecf3ff28e3ef086ab042ddf' }, h("div", { key: 'd56142fcb6fc8d6fda2099630ba3938269e61f9d', part: `vehicle-quotation-${(_b = (_a = this.structure) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.theme}` }, h("div", { key: 'f8fd9fb854edcde5792064070f59bacdc04f9f40', part: "form-container", class: "relative min-h-[150px]" }, h("div", { key: '636c542bcf82f91e8e9556fa75842bdadd821a15', part: "form-loader-container", class: cn('form-loader-container absolute top-0 left-0 w-full h-full pointer-events-none flex justify-center items-center transition-opacity duration-500', {
+        return (h(Host, { key: '1f2cadaf415637143d04338a70ea6b868bb1a331' }, h("div", { key: '94d05cb20c6c4c5d542639780fec5625518f6adb', part: `vehicle-quotation-${(_b = (_a = this.structure) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.theme}` }, h("div", { key: 'e4fb0b0801af5ece96700f6f36df8785af3870f7', part: "form-container", class: "relative min-h-[150px]" }, h("div", { key: '2a2abb5756394092d9e53b0e025a60a117107141', part: "form-loader-container", class: cn('form-loader-container absolute top-0 left-0 w-full h-full pointer-events-none flex justify-center items-center transition-opacity duration-500', {
                 'opacity-0': this.structureRendered,
-            }) }, h(LoaderIcon, { key: 'ffc62355f0d550b34838b6beb87e025fd101e0c7', part: "form-loader-icon", class: "img" })), h("flexible-container", { key: '1abd678991ad23b63e6874fd201f847fc3202f45', onlyForMounting: true, isOpened: this.structureRendered }, !!this.form && (h("form-structure", { key: '34db9a091eec0bbd222222d9bb9286f37c4411bf', form: this.form, fields: this.fields, formId: this.formId, formLocale: this.locale, structure: this.structure, isLoading: this.isLoading, language: this.localeLanguage, errorMessage: this.errorMessage, formElementMapper: vehicleQuotationElements, successMessage: this.locale['Form submitted successfully.'] }, h("slot", { key: 'ec6aaf3fcd5115433071faaf64f311b3f0c6d056' }))))))));
+            }) }, h(LoaderIcon, { key: 'b19d77116c4a403f08b09ced05948c049f33e1ca', part: "form-loader-icon", class: "img" })), h("flexible-container", { key: '606b72dfa75164b66569356a2413194f39fd553f', onlyForMounting: true, isOpened: this.structureRendered }, !!this.form && (h("form-structure", { key: 'af50ecd074c6c8b4f1159f74b192ab0ad722e407', form: this.form, fields: this.fields, formId: this.formId, formLocale: this.locale, structure: this.structure, isLoading: this.isLoading, language: this.localeLanguage, errorMessage: this.errorMessage, formElementMapper: vehicleQuotationElements, successMessage: this.locale['Form submitted successfully.'] }, h("slot", { key: '5c13099e52f3d6a8ab019ceca89f18872842f3e4' }))))))));
     }
     static get is() { return "vehicle-quotation-form"; }
     static get encapsulation() { return "shadow"; }