adp-web-components 0.1.71 → 0.1.73

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: '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: '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

@@ -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, _e;
         const [locale] = this.form.getFormLocale();
         const generalProps = {
             form: this.form,
@@ -41,7 +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", 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" }, !((_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() {
@@ -226,7 +233,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 +280,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: '769ef9ef9fad8cf47ac7ba839d9ef2ef509431b4', 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: '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: '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: '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: '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: '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: '927d5d2071175aad58f2947c82af3b1d87d630ad', class: "-mt-1" }, h(FormErrorMessage, { key: '1913bbf92a5a9ddc695243b92244355864ef297b', 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: '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: '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: '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: '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: '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: '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: '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: '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: '237ebec1a3024d5944cf67c558005cd565365cc5', 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: '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: '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: '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: '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,11 +9,11 @@ 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({}, props)), name: ({ props }) => h("form-input", Object.assign({}, props)), lastName: ({ props }) => h("form-input", Object.assign({}, props)), email: ({ props }) => h("form-input", Object.assign({ type: "email" }, props)), message: ({ props }) => h("form-text-area", Object.assign({}, props)), vin: ({ props }) => h("form-vin-input", Object.assign({}, 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) || '');
         }
-        return h("form-phone-number", Object.assign({ defaultValue: stateObject.phoneValidator.default }, props, { isLoading: isLoading, validator: stateObject.phoneValidator }));
+        return h("form-phone-number", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name, defaultValue: stateObject.phoneValidator.default }, props, { isLoading: isLoading, validator: stateObject.phoneValidator }));
     }, vehicle: ({ language, props }) => {
         const fetcher = async ({ signal, context }) => {
             var _a, _b;
@@ -69,7 +69,7 @@ export const getFormMappers = (stateObject, extraMappers = {}) => (Object.assign
                 context.defaultValue = props === null || props === void 0 ? void 0 : props.defaultValue;
             return options;
         };
-        return h("form-select", Object.assign({}, props, { searchable: true, fetcher: fetcher, language: language }));
+        return h("form-select", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name }, props, { searchable: true, fetcher: fetcher, language: language }));
     }, companyBranchId: ({ language, props }) => {
         const fetcher = async ({ signal }) => {
             const dealerEndpoint = props === null || props === void 0 ? void 0 : props.branchApi;
@@ -81,7 +81,7 @@ export const getFormMappers = (stateObject, extraMappers = {}) => (Object.assign
             }));
             return options;
         };
-        return h("form-select", Object.assign({}, props, { clearable: true, searchable: true, fetcher: fetcher, language: language }));
+        return h("form-select", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name }, props, { clearable: true, searchable: true, fetcher: fetcher, language: language }));
     }, cityId: ({ language, props }) => {
         const fetcher = async ({ signal }) => {
             const dealerEndpoint = props === null || props === void 0 ? void 0 : props.cityApi;
@@ -93,7 +93,7 @@ export const getFormMappers = (stateObject, extraMappers = {}) => (Object.assign
             }));
             return options;
         };
-        return h("form-select", Object.assign({}, props, { clearable: true, searchable: true, fetcher: fetcher, language: language }));
+        return h("form-select", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name }, props, { clearable: true, searchable: true, fetcher: fetcher, language: language }));
     }, date: ({ props }) => h("form-picker-input", Object.assign({ type: "date" }, props, { icon: h(CalendarDaysIcon, null) })), time: ({ language, props }) => {
         const fetcher = async () => {
             const options = [];
@@ -110,7 +110,7 @@ export const getFormMappers = (stateObject, extraMappers = {}) => (Object.assign
             }
             return options;
         };
-        return h("form-select", Object.assign({}, props, { clearable: true, fetcher: fetcher, language: language }));
+        return h("form-select", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name }, props, { clearable: true, fetcher: fetcher, language: language }));
     }, currentVehicleBrand: ({ form, language, props, locale }) => {
         const fetcher = async ({ signal }) => {
             var _a;
@@ -129,7 +129,7 @@ export const getFormMappers = (stateObject, extraMappers = {}) => (Object.assign
                 },
             ];
         };
-        return h("form-select", Object.assign({}, props, { searchable: true, fetcher: fetcher, language: language }));
+        return h("form-select", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name }, props, { searchable: true, fetcher: fetcher, language: language }));
     }, currentVehicleModel: ({ form, language, props, locale }) => {
         form.addWatcher('currentVehicleBrand');
         const currentVehicleBrand = form === null || form === void 0 ? void 0 : form.getValue('currentVehicleBrand');
@@ -148,7 +148,7 @@ export const getFormMappers = (stateObject, extraMappers = {}) => (Object.assign
                 },
             ];
         };
-        return (h("form-select", Object.assign({}, props, { searchable: true, fetcher: fetcher, language: language, resetKey: currentVehicleBrand, fetcherKey: currentVehicleBrand, isRequired: currentVehicleBrand !== 'Other', isDisabled: !currentVehicleBrand || currentVehicleBrand === 'Other' })));
+        return (h("form-select", Object.assign({}, props, { searchable: true, key: props === null || props === void 0 ? void 0 : props.name, fetcher: fetcher, language: language, resetKey: currentVehicleBrand, fetcherKey: currentVehicleBrand, isRequired: currentVehicleBrand !== 'Other', isDisabled: !currentVehicleBrand || currentVehicleBrand === 'Other' })));
     }, ownVehicle: ({ language, props }) => {
         const fetcher = async ({}) => {
             var _a, _b, _c, _d;
@@ -163,7 +163,7 @@ export const getFormMappers = (stateObject, extraMappers = {}) => (Object.assign
                 },
             ];
         };
-        return h("form-select", Object.assign({}, props, { fetcher: fetcher, language: language }));
+        return h("form-select", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name }, props, { fetcher: fetcher, language: language }));
     }, conditionalCurrentVehicleBrand: ({ form, language, props, locale }) => {
         form.addWatcher('ownVehicle');
         const ownVehicle = (form === null || form === void 0 ? void 0 : form.getValue('ownVehicle')) === 'yes';
@@ -183,7 +183,7 @@ export const getFormMappers = (stateObject, extraMappers = {}) => (Object.assign
                 },
             ];
         };
-        return h("form-select", Object.assign({}, props, { searchable: true, fetcher: fetcher, language: language, resetKey: ownVehicle, isRequired: ownVehicle, isDisabled: !ownVehicle }));
+        return h("form-select", Object.assign({ key: props === null || props === void 0 ? void 0 : props.name }, props, { searchable: true, fetcher: fetcher, language: language, resetKey: ownVehicle, isRequired: ownVehicle, isDisabled: !ownVehicle }));
     }, conditionalCurrentVehicleModel: ({ form, language, props, locale }) => {
         form.addWatcher('ownVehicle');
         form.addWatcher('conditionalCurrentVehicleBrand');
@@ -204,5 +204,5 @@ export const getFormMappers = (stateObject, extraMappers = {}) => (Object.assign
                 },
             ];
         };
-        return (h("form-select", Object.assign({}, props, { searchable: true, fetcher: fetcher, language: language, resetKey: currentVehicleBrand, fetcherKey: currentVehicleBrand, isRequired: ownVehicle && currentVehicleBrand !== 'Other', isDisabled: !currentVehicleBrand || currentVehicleBrand === 'Other' })));
+        return (h("form-select", Object.assign({}, props, { searchable: true, fetcher: fetcher, key: props === null || props === void 0 ? void 0 : props.name, language: language, resetKey: currentVehicleBrand, fetcherKey: currentVehicleBrand, isRequired: ownVehicle && currentVehicleBrand !== 'Other', isDisabled: !currentVehicleBrand || currentVehicleBrand === 'Other' })));
     } }, extraMappers));

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

@@ -75,9 +75,9 @@ export class GeneralInquiryForm {
     // #endregion
     render() {
         var _a, _b;
-        return (h(Host, { key: 'ec357e8aa8f91ec83ee38d1be31ceb0d1e95d038' }, h("div", { key: 'af34b398c8e376efff3c2767e1ed01d098ab50e5', 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: '92c049c4010744b5fbc6c5edf80c6b406f210d8c', part: "form-container", class: "relative min-h-[150px]" }, h("div", { key: '48905cb88b6054b6bdb73b9aed310d4601ae0b81', 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: 'ed5996aab6afb3b9edd27e17c394004062791e49', part: "form-loader-icon", class: "img" })), h("flexible-container", { key: '28343dde46ffef9d729c5d9b81d9eed1a77b9258', onlyForMounting: true, isOpened: this.structureRendered }, !!this.form && (h("form-structure", { key: '3ac4c001d5d0bd36cf388691a571b94d15ee6aa0', 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: '3b2bc0c3aac4200cab0f31f0d3ea159b599fc217' }))))))));
+            }) }, 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"; }
@@ -246,13 +246,31 @@ export class GeneralInquiryForm {
                 "getter": false,
                 "setter": false
             },
+            "stepChangeCallback": {
+                "type": "unknown",
+                "attribute": "step-change-callback",
+                "mutable": false,
+                "complexType": {
+                    "original": "(step: number, currentForm?: any) => void",
+                    "resolved": "(step: number, currentForm?: any) => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
             "structure": {
                 "type": "unknown",
                 "attribute": "structure",
                 "mutable": true,
                 "complexType": {
                     "original": "FormElementStructure<any> | undefined",
-                    "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",

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

@@ -58,9 +58,9 @@ export class ServiceBookingForm {
     // #endregion
     render() {
         var _a, _b;
-        return (h(Host, { key: '22f0de899c9531d1c9f13ec8d77f91f64561a64f' }, h("div", { key: 'af3726aea3e91be0acd62002ef1d039878d4c732', 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: '21a7b0274b08b6f5f4c1e1cbbd204dfdff7c3723', part: "form-container", class: "relative min-h-[150px]" }, h("div", { key: '1fdb369874c9aea5a81aff7a45b46a2e22034b5c', 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: '4dc617177adfb48354bda986948d69f6662b1774', part: "form-loader-icon", class: "img" })), h("flexible-container", { key: '438f1f30d52bd6fbcd02497d4a5954e0cafc20ae', onlyForMounting: true, isOpened: this.structureRendered }, !!this.form && (h("form-structure", { key: '13bc1284b54fbbd92e738f3ac28fcb7416ac53e9', 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: '392b3dbc5819fadade56a11a5bed885710a74f84' }))))))));
+            }) }, 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"; }
@@ -229,13 +229,31 @@ export class ServiceBookingForm {
                 "getter": false,
                 "setter": false
             },
+            "stepChangeCallback": {
+                "type": "unknown",
+                "attribute": "step-change-callback",
+                "mutable": false,
+                "complexType": {
+                    "original": "(step: number, currentForm?: any) => void",
+                    "resolved": "(step: number, currentForm?: any) => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
             "structure": {
                 "type": "unknown",
                 "attribute": "structure",
                 "mutable": true,
                 "complexType": {
                     "original": "FormElementStructure<any> | undefined",
-                    "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",