adp-web-components 0.1.71 → 0.1.72

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

@@ -6,12 +6,14 @@ import { Host, h } from "@stencil/core";
 import generalSchema from "../../locales/general/type";
 import { getLocaleLanguage, getSharedLocal, sharedLocalesSchema } from "../../features/multi-lingual/index";
 import { renderStructure } from "../../features/form-hook/index";
+import cn from "../../global/lib/cn";
 export class FormStructure {
     constructor() {
         // #region Localization
         this.formLocale = {};
         this.language = 'en';
         this.locale = Object.assign({ sharedLocales: sharedLocalesSchema.getDefault() }, generalSchema.getDefault());
+        this.currentStep = 1;
     }
     async componentWillLoad() {
         this.form.formStructure = this;
@@ -29,7 +31,7 @@ export class FormStructure {
         }, 300);
     }
     render() {
-        var _a;
+        var _a, _b, _c, _d;
         const [locale] = this.form.getFormLocale();
         const generalProps = {
             form: this.form,
@@ -41,7 +43,13 @@ export class FormStructure {
         if (!this.structure)
             return h("form-structure-error", { language: this.language });
         const { formController, resetFormErrorMessage } = this.form;
-        return (h(Host, null, h("form", Object.assign({ id: this.formId, class: "relative", dir: this.locale.sharedLocales.direction }, formController), h("form-dialog", { dialogClosed: resetFormErrorMessage, isError: !!this.errorMessage, closeText: (_a = locale === null || locale === void 0 ? void 0 : locale.sharedFormLocales) === null || _a === void 0 ? void 0 : _a.close, form: this.form, message: this.errorMessage }, h("div", { class: "form-success-container" }, h("svg", { fill: "none", "stroke-width": "2", viewBox: "0 0 24 24", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", xmlns: "http://www.w3.org/2000/svg", class: "size-[70px] stroke-green-700" }, h("path", { d: "M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z" }), h("path", { d: "m9 12 2 2 4-4" })), this.successMessage)), h("div", null, renderStructure(this.structure, this.formElementMapper, generalProps, this.fields)), h("button", { formnovalidate: true, type: "submit", class: "hidden" }))));
+        return (h(Host, null, h("form", Object.assign({ id: this.formId, class: "relative", dir: this.locale.sharedLocales.direction }, formController), h("form-dialog", { dialogClosed: resetFormErrorMessage, isError: !!this.errorMessage, closeText: (_a = locale === null || locale === void 0 ? void 0 : locale.sharedFormLocales) === null || _a === void 0 ? void 0 : _a.close, form: this.form, message: this.errorMessage }, h("div", { class: "form-success-container" }, h("svg", { fill: "none", "stroke-width": "2", viewBox: "0 0 24 24", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", xmlns: "http://www.w3.org/2000/svg", class: "size-[70px] stroke-green-700" }, h("path", { d: "M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z" }), h("path", { d: "m9 12 2 2 4-4" })), this.successMessage)), h("div", { class: "relative overflow-hidden grid grid-cols-1 grid-rows-1" }, !((_b = this === null || this === void 0 ? void 0 : this.structure) === null || _b === void 0 ? void 0 : _b.steps) && renderStructure(this.structure, this.formElementMapper, generalProps, this.fields, this.currentStep), !!((_c = this === null || this === void 0 ? void 0 : this.structure) === null || _c === void 0 ? void 0 : _c.steps) &&
+            ((_d = this === null || this === void 0 ? void 0 : this.structure) === null || _d === void 0 ? void 0 : _d.steps.map((_, i) => (h("div", { class: cn('col-start-1 row-start-1 transition-all !duration-700', {
+                    'pointer-events-none! *:pointer-events-none!': this.currentStep !== i + 1,
+                    'translate-x-full rtl:-translate-x-full opacity-0': this.currentStep < i + 1,
+                    'translate-x-0 opacity-100': this.currentStep === i + 1,
+                    '-translate-x-full rtl:translate-x-full  opacity-0': this.currentStep > i + 1,
+                }) }, renderStructure(this.structure, this.formElementMapper, generalProps, this.fields, i + 1)))))), h("button", { formnovalidate: true, type: "submit", class: "hidden" }))));
     }
     static get is() { return "form-structure"; }
     static get originalStyleUrls() {
@@ -226,7 +234,7 @@ export class FormStructure {
                 "mutable": false,
                 "complexType": {
                     "original": "FormElementStructure<any>",
-                    "resolved": "{ data?: Record<string, any>; requiredContext?: Record<string, boolean>; } & { id?: string; class?: string; staticValue?: any; isHidden?: boolean; isDisabled?: boolean; children?: any[]; } & { tag: string; name?: any; } | { data?: Record<string, any>; requiredContext?: Record<string, boolean>; } & { id?: string; class?: string; staticValue?: any; isHidden?: boolean; isDisabled?: boolean; children?: any[]; } & { tag?: string; name: any; }",
+                    "resolved": "{ steps?: Record<LanguageKeys, Step>[]; data?: Record<string, any>; requiredContext?: Record<string, boolean>; } & { id?: string; step?: number; type?: string; class?: string; staticValue?: any; isHidden?: boolean; isDisabled?: boolean; children?: any[]; } & { tag: string; name?: any; } | { steps?: Record<LanguageKeys, Step>[]; data?: Record<string, any>; requiredContext?: Record<string, boolean>; } & { id?: string; step?: number; type?: string; class?: string; staticValue?: any; isHidden?: boolean; isDisabled?: boolean; children?: any[]; } & { tag?: string; name: any; }",
                     "references": {
                         "FormElementStructure": {
                             "location": "import",
@@ -273,7 +281,8 @@ export class FormStructure {
     static get states() {
         return {
             "locale": {},
-            "formContent": {}
+            "formContent": {},
+            "currentStep": {}
         };
     }
     static get watchers() {

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

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

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

@@ -28,7 +28,7 @@ export class FormSwitch {
     render() {
         const { disabled, meta, errorMessage, isError } = this.form.getInputState(this.name);
         const { label, errorTextMessage } = getInputLocalization(this, meta, errorMessage);
-        return (h(Host, { key: 'bd8f4dd2577f47ae25dd25769d711eadc1c8eb1a' }, h("div", { key: 'ef5bd58546c30f6be7721b8c69bef36acdbb68b2', part: `${this.name}`, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, disabled) }, h("div", { key: 'e1eb4e88806bdf326b172e96fc3689b0a7ecd17c', part: `${this.name}-container form-input-container`, class: "form-input-container" }, h("shift-switch", { key: '12ceed268c3ed8921da80706f5b12f2e70957f87', name: this.name, label: label, class: "form-switch" })), h(FormErrorMessage, { key: '4fc37890d1a9594b5b9f1e491ddb532797be94d1', name: this.name, isError: isError, errorMessage: errorTextMessage }))));
+        return (h(Host, { key: '6532223fcdbc020d0cb50597c9d278b54331ba2a' }, h("div", { key: '64f6d0756f758f3772a0ba9d744bc6119e079deb', part: `${this.name}`, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, disabled) }, h("div", { key: 'd5836f1707fa495c1f2a25e1b036d09bedcc11bb', part: `${this.name}-container form-input-container`, class: "form-input-container" }, h("shift-switch", { key: 'f18e548987b94f4ef4c5dcac128fa0fe68223640', name: this.name, label: label, class: "form-switch" })), h(FormErrorMessage, { key: '498a4178eedd90abc09ad4dabfeecd75bc0ae8ad', name: this.name, isError: isError, errorMessage: errorTextMessage }))));
     }
     static get is() { return "form-switch"; }
     static get originalStyleUrls() {

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

@@ -40,9 +40,9 @@ export class FormTextArea {
         const { disabled, isRequired, meta, isError, errorMessage } = this.form.getInputState(this.name);
         const { label, placeholder, errorTextMessage } = getInputLocalization(this, meta, errorMessage);
         const isDisabled = disabled || this.isLoading || !!this.staticValue || this.isDisabled;
-        return (h(Host, { key: '8355ae989542dd22dbf93123f47e8b8fd6a8f477' }, h("label", { key: '4e6b3d5effe35dbd56b57699b217226926c9484e', part: `form-textarea ${this.name}`, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: isDisabled }) }, h(FormInputLabel, { key: 'a10df0dc42b7131072d6523b4d4159f745c67b6f', name: this.name, isRequired: isRequired, label: label }), h("div", { key: '2830c626166bd01866350b0c60164578ce669f0e', part: `${this.name}-container form-input-container`, class: "form-input-container" }, h("textarea", { key: '5f0cf7cbaddb34271d834d48e662a7921d1008d4', name: this.name, disabled: isDisabled, placeholder: placeholder, part: `${this.name}-textarea form-input-textarea`, class: cn('form-input-style form-input-textarea-style', partKeyPrefix + this.name, {
+        return (h(Host, { key: '25d338c4d007e177f32a9aca4e5b79277d8fc1bf' }, h("label", { key: '99e72449e79bfa13f639f50395feb330758cd041', part: `form-textarea ${this.name}`, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: isDisabled }) }, h(FormInputLabel, { key: '95faa4295bfd7da486e1bf7917a8e5d2f04c13f4', name: this.name, isRequired: isRequired, label: label }), h("div", { key: '385013d6cda348752110e400370a5af65ec876af', part: `${this.name}-container form-input-container`, class: "form-input-container" }, h("textarea", { key: '36c92728aa1ab230a52fca245dd5d43489290e0d', name: this.name, disabled: isDisabled, placeholder: placeholder, part: `${this.name}-textarea form-input-textarea`, class: cn('form-input-style form-input-textarea-style', partKeyPrefix + this.name, {
                 'form-input-error-style': isError,
-            }) }, this.defaultValue)), h("div", { key: '927d5d2071175aad58f2947c82af3b1d87d630ad', class: "-mt-1" }, h(FormErrorMessage, { key: '1913bbf92a5a9ddc695243b92244355864ef297b', name: this.name, isError: isError, errorMessage: errorTextMessage })))));
+            }) }, this.defaultValue)), h("div", { key: '71d74743769f550d1173ab981f6ecb1d50e84704', class: "-mt-1" }, h(FormErrorMessage, { key: '6bfc59c04b1c03fd4584eae544096c835517bc05', name: this.name, isError: isError, errorMessage: errorTextMessage })))));
     }
     static get is() { return "form-text-area"; }
     static get originalStyleUrls() {

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

@@ -133,22 +133,22 @@ export class FormTimePicker {
         const step = this.minuteStep || 1;
         const hours = Array.from({ length: 24 }, (_, i) => i);
         const minutes = Array.from({ length: Math.ceil(60 / step) }, (_, i) => i * step);
-        return (h(Host, { key: '06367a15a7bc5114aef726476a2c9925105be6c2' }, h("label", { key: '4831bc05601026313a7022a1d9a683822c517df0', part: this.name, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: isDisabled }) }, h(FormInputLabel, { key: '29f80d8fb4cef8cbe799dc357483382a5f5f3b3b', isRequired: isRequired, label: label }), h("form-shadow-input", { key: 'bfd18e8bdd9bccf3c6237dbe15f27fa45c44dc90', name: this.name, form: this.form, value: this.selectedValue }), h("div", { key: '2868a3a0b7fc1a42441d3dffcabc49d349f3dcfa', part: `${this.name}-container form-input-container`, class: cn('form-input-container', { open: this.isOpen }) }, h("input", { key: 'bf700f9f83ecc7a9cacced5663a979d4fe188505', type: "text", readOnly: true, disabled: isDisabled, value: this.selectedValue, onClick: this.toggleDropdown, part: `${this.name}-input form-input`, placeholder: placeholder || (meta === null || meta === void 0 ? void 0 : meta.placeholder), class: cn('form-input-style form-input-select', {
+        return (h(Host, { key: '6bb395aa80c55ed42349ae54a2c8fe80720097e8' }, h("label", { key: '46237f459fcf1d257063bf81967cb56a261780c4', part: this.name, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: isDisabled }) }, h(FormInputLabel, { key: 'cd4c702c543e4434f9a702704a6d3aca9ffb80e7', isRequired: isRequired, label: label }), h("form-shadow-input", { key: '49b8b2be00be7ded1c24ff78c72fdc027891291d', name: this.name, form: this.form, value: this.selectedValue }), h("div", { key: 'ee765bca38085f4b480351f500a320ab7831fe16', part: `${this.name}-container form-input-container`, class: cn('form-input-container', { open: this.isOpen }) }, h("input", { key: '05f8706cafd330f2b2c85d7214499f87d75d9d5c', type: "text", readOnly: true, disabled: isDisabled, value: this.selectedValue, onClick: this.toggleDropdown, part: `${this.name}-input form-input`, placeholder: placeholder || (meta === null || meta === void 0 ? void 0 : meta.placeholder), class: cn('form-input-style form-input-select', {
                 'form-input-error-style': isError,
-            }) }), h("span", { key: '216b2b7ae03a76e752a36ab78fae8fa651858dc1', part: `${this.name}-icon form-time-picker-icon`, class: "form-input-icon form-input-icon-end" }, h("svg", { key: '4b9a63a2d8673f68f9d64f9c0d8bc4594216039a', "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "size-full" }, h("circle", { key: '4f905ffed2dfeba05f52036dbcbf5530729e5e99', cx: "12", cy: "12", r: "10" }), h("polyline", { key: '7731a613dee128c1ff9806f35a11c603c2c732b7', points: "12 6 12 12 16 14" }))), h("div", { key: '997e967281589329298e4edc3b4c96880e84189c', part: `${this.name}-dropdown form-time-picker-dropdown`, class: cn('form-picker-dropdown', {
+            }) }), h("span", { key: '1cd7d111f3960d3afe5c794dd98b2381c6e115d4', part: `${this.name}-icon form-time-picker-icon`, class: "form-input-icon form-input-icon-end" }, h("svg", { key: 'd2cca338ce36c8a6b4315d10775ed9d55a868b2b', "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "size-full" }, h("circle", { key: '08c27a1894c484a88798cb3df72bdb1fbdb2fd34', cx: "12", cy: "12", r: "10" }), h("polyline", { key: 'b9fa78fb5952509356073347c3939882a246992a', points: "12 6 12 12 16 14" }))), h("div", { key: '4fe84cefc23de47de14f9bdd2b153af70b6d6c0c', part: `${this.name}-dropdown form-time-picker-dropdown`, class: cn('form-picker-dropdown', {
                 upwards: this.openUpwards,
                 downwards: !this.openUpwards,
-            }) }, h("div", { key: '34cba5f96c874c7c0ffb39ac66c61f81b5e41d2c', class: "form-time-picker-columns" }, h("div", { key: 'de9097078f5fdcfc97246d6ddc715a8244f76bf4', class: "form-time-picker-column form-time-picker-hours" }, h("div", { key: 'e3993e812e7c7f3120944a4cdc6d2f9554b8adfe', class: "form-time-picker-column-header" }, "HH"), hours.map(hour => {
+            }) }, h("div", { key: 'c4e77dd75e396bd9243784f154544b2e08969c9e', class: "form-time-picker-columns" }, h("div", { key: 'aa0c2cf38a0a558e04ce52a4b09230ec786e1ac8', class: "form-time-picker-column form-time-picker-hours" }, h("div", { key: 'e56babd3bd98531828a1fecd3afddf28c0c0fe33', class: "form-time-picker-column-header" }, "HH"), hours.map(hour => {
             const hourDisabled = this.isHourDisabled(hour);
             return (h("button", { type: "button", disabled: hourDisabled, onClick: () => this.selectHour(hour), part: cn('form-time-picker-option', { 'form-time-picker-option-selected': hour === selectedHour }), class: cn('form-time-picker-option', {
                     selected: hour === selectedHour,
                 }) }, String(hour).padStart(2, '0')));
-        })), h("div", { key: 'c908de2fe8b822bd97fa0ae6c39681585439ac09', class: "form-time-picker-column form-time-picker-minutes" }, h("div", { key: 'addff49b80f47bc326d72467845aa21238d44359', class: "form-time-picker-column-header" }, "MM"), minutes.map(minute => {
+        })), h("div", { key: '228759852fb08dcda55e0eca20b8c4a470258ceb', class: "form-time-picker-column form-time-picker-minutes" }, h("div", { key: '70505b645d08d64327da02c4339e206f4873970b', class: "form-time-picker-column-header" }, "MM"), minutes.map(minute => {
             const minuteDisabled = selectedHour >= 0 ? this.isMinuteDisabled(selectedHour, minute) : false;
             return (h("button", { type: "button", disabled: minuteDisabled, onClick: () => this.selectMinute(minute), part: cn('form-time-picker-option', { 'form-time-picker-option-selected': minute === selectedMinute }), class: cn('form-time-picker-option', {
                     selected: minute === selectedMinute,
                 }) }, String(minute).padStart(2, '0')));
-        }))))), h(FormErrorMessage, { key: '237ebec1a3024d5944cf67c558005cd565365cc5', name: this.name, isError: isError, errorMessage: locale[errorMessage] || errorMessage }))));
+        }))))), h(FormErrorMessage, { key: 'fa968f4a57a55591fe330f535eba20ea566089ea', name: this.name, isError: isError, errorMessage: locale[errorMessage] || errorMessage }))));
     }
     static get is() { return "form-time-picker"; }
     static get originalStyleUrls() {

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

@@ -52,9 +52,9 @@ export class FormVinInput {
         const { label, placeholder, errorTextMessage } = getInputLocalization(this, meta, errorMessage);
         const isDisabled = disabled || this.isLoading || !!this.staticValue || this.isDisabled;
         const extractorTitle = ((_b = (_a = this.localization) === null || _a === void 0 ? void 0 : _a[language]) === null || _b === void 0 ? void 0 : _b.scan) || ((_j = (_g = (_f = (_e = (_d = (_c = this.form) === null || _c === void 0 ? void 0 : _c.context) === null || _d === void 0 ? void 0 : _d.structure) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.localization) === null || _g === void 0 ? void 0 : _g[(_h = this.form.context) === null || _h === void 0 ? void 0 : _h.language]) === null || _j === void 0 ? void 0 : _j['vin-scan']) || 'Scan Your VIN';
-        return (h(Host, { key: '24aef7fb6d4f96434fd9dc6ab8a23d9d4e8de1ee' }, h("label", { key: 'b89bb2652c01f43edf3ea7fb9636bcc8fdafbe9b', part: this.name, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: isDisabled }) }, h(FormInputLabel, { key: '958d93f12f9b86f104ec0ba91aa7be40efcd76a8', isRequired: isRequired, label: label }), h("div", { key: '861dda13e0cc65dfa2a5d1ec09644548fac5d538', part: `${this.name}-container form-input-container`, class: "form-input-container" }, h(FormInputPrefix, { key: '317b9fdc5154b734f67461e6e88448a08b8637bd', name: this.name, direction: (_k = locale === null || locale === void 0 ? void 0 : locale.sharedFormLocales) === null || _k === void 0 ? void 0 : _k.direction, prefix: this.inputPrefix }), h("input", Object.assign({ key: 'f694f98a3ae8e13811bee5a7215160b4a4791e76' }, this.inputProps, { name: this.name, disabled: isDisabled, defaultValue: this.defaultValue, part: `${this.name}-input form-input`, placeholder: placeholder || (meta === null || meta === void 0 ? void 0 : meta.placeholder), style: Object.assign({}, (this.prefixWidth ? { [((_l = locale === null || locale === void 0 ? void 0 : locale.sharedFormLocales) === null || _l === void 0 ? void 0 : _l.direction) === 'rtl' ? 'paddingRight' : 'paddingLeft']: `${this.prefixWidth}px` } : {})), class: cn('form-input-style !uppercase', part, {
+        return (h(Host, { key: 'bd1fd8e6c87e3e9abb1e2dc17990ecbb65beb662' }, h("label", { key: 'ee832844db1d09c8aa4edf37e489465e1ec44a0d', part: this.name, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: isDisabled }) }, h(FormInputLabel, { key: 'd32032c849295466d5e0717563bd605856b41757', isRequired: isRequired, label: label }), h("div", { key: '8ee4a1644f42224dbebd531a87936ea7b1c4231d', part: `${this.name}-container form-input-container`, class: "form-input-container" }, h(FormInputPrefix, { key: 'da01cd2329b03e0641a652dcb88cf688abc5e80c', name: this.name, direction: (_k = locale === null || locale === void 0 ? void 0 : locale.sharedFormLocales) === null || _k === void 0 ? void 0 : _k.direction, prefix: this.inputPrefix }), h("input", Object.assign({ key: '060b7676b9d947f2e104b6cf7f1ac020a85acc43' }, this.inputProps, { name: this.name, disabled: isDisabled, defaultValue: this.defaultValue, part: `${this.name}-input form-input`, placeholder: placeholder || (meta === null || meta === void 0 ? void 0 : meta.placeholder), style: Object.assign({}, (this.prefixWidth ? { [((_l = locale === null || locale === void 0 ? void 0 : locale.sharedFormLocales) === null || _l === void 0 ? void 0 : _l.direction) === 'rtl' ? 'paddingRight' : 'paddingLeft']: `${this.prefixWidth}px` } : {})), class: cn('form-input-style !uppercase', part, {
                 'form-input-error-style': isError,
-            }) })), !!this.scannerIcon && (this.useOcr || this.readSticker) && (h("button", { key: '8db0266e57e6e8e39dd08c124512c4cb0c9c078b', type: "button", disabled: isDisabled, part: cn('vin-validator', part + '-vin'), onClick: () => { var _a; return (_a = this === null || this === void 0 ? void 0 : this.el.getElementsByTagName('vin-extractor')[0]) === null || _a === void 0 ? void 0 : _a.open(); }, class: "absolute transition-all duration-500 disabled:!pointer-events-none disabled:!opacity-0 flex justify-center items-center end-3.5 !text-[#576675] enabled:hover:!text-black/85 aspect-square h-[70%] top-1/2 -translate-y-1/2" }, this.scannerIcon === 'qr-code' && h(QrCodeScanIcon, { key: '8b977fb5f399a7a09de05295b8839d6480c21e51', class: "size-[90%] text-inherit" }), this.scannerIcon === 'camera' && h(CameraIcon, { key: 'dd9b3ce45e8a0246884cd6a95d8e399c87e65dd1', class: "size-[90%] text-inherit" })))), h(FormErrorMessage, { key: '21ab2bfea29796f668138f21b4e0cc02a6cae921', name: this.name, isError: isError, errorMessage: errorTextMessage })), (this.useOcr || this.readSticker) && (h("div", { key: 'a264030a9abfc7538f946383884f205e64ece7e8', class: "absolute" }, h("vin-extractor", { key: 'ebb1e237f23028c2e561bbc31189000d923f973a', verbose: true, manualCapture: true, useOcr: this.useOcr, title: extractorTitle, skipValidation: false, readSticker: this.readSticker, ocrEndpoint: this.ocrEndpoint, onExtract: newVin => {
+            }) })), !!this.scannerIcon && (this.useOcr || this.readSticker) && (h("button", { key: '2231cb8c49d60a42e800d517545c6eebd4c22a3c', type: "button", disabled: isDisabled, part: cn('vin-validator', part + '-vin'), onClick: () => { var _a; return (_a = this === null || this === void 0 ? void 0 : this.el.getElementsByTagName('vin-extractor')[0]) === null || _a === void 0 ? void 0 : _a.open(); }, class: "absolute transition-all duration-500 disabled:!pointer-events-none disabled:!opacity-0 flex justify-center items-center end-3.5 !text-[#576675] enabled:hover:!text-black/85 aspect-square h-[70%] top-1/2 -translate-y-1/2" }, this.scannerIcon === 'qr-code' && h(QrCodeScanIcon, { key: '81abcee962204c97374507f7182b9695beccae43', class: "size-[90%] text-inherit" }), this.scannerIcon === 'camera' && h(CameraIcon, { key: '0c174dddeb5ca73526a838dd81c385a5e9a95ac5', class: "size-[90%] text-inherit" })))), h(FormErrorMessage, { key: 'e41bbe4f4c81e0ba3798ad6a4ab9ba1ddc19b7fd', name: this.name, isError: isError, errorMessage: errorTextMessage })), (this.useOcr || this.readSticker) && (h("div", { key: '9b2e4997dca4fd82c6f821616f3c78a355f1f873', class: "absolute" }, h("vin-extractor", { key: 'fe2371fd6184a21c9602736fa99301e442d8a580', verbose: true, manualCapture: true, useOcr: this.useOcr, title: extractorTitle, skipValidation: false, readSticker: this.readSticker, ocrEndpoint: this.ocrEndpoint, onExtract: newVin => {
                 var _a, _b;
                 this.inputRef.value = newVin;
                 (_a = this.form) === null || _a === void 0 ? void 0 : _a.validateInput(this === null || this === void 0 ? void 0 : this.name);

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)), 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: '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', {
                 '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: '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' }))))))));
     }
     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: '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', {
                 '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: '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' }))))))));
     }
     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",

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

@@ -69,9 +69,9 @@ export class SSCLookupForm {
     // #endregion
     render() {
         var _a, _b;
-        return (h(Host, { key: '1388662270764e5c55e513f415c827980abaec1f' }, h("div", { key: '66ffa8f118d0749cd949b6c95a1080a88403b222', 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: '8c475b8f84fbcaf470bfe33a73fb173ee67d44dc', part: "form-container", class: "relative min-h-[150px]" }, h("div", { key: '1a789d6edf4667be5a7e8ba0563d3416e030890a', 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: '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', {
                 'opacity-0': this.structureRendered,
-            }) }, h(LoaderIcon, { key: '4ab24cf4b89e72690ab160070928edb6b44fbfb5', part: "form-loader-icon", class: "img" })), h("flexible-container", { key: '2b1c3b059306c660f8d721768f930fa52cf165b5', onlyForMounting: true, isOpened: this.structureRendered }, !!this.form && (h("form-structure", { key: '7ceec1a05f6dfa6a1ee22b2eeace80ac16114ee4', 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: '40264199c30d3a2b6279017c682964788ee8d746' }))))))));
+            }) }, 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' }))))))));
     }
     static get is() { return "ssc-lookup-form"; }
     static get encapsulation() { return "shadow"; }
@@ -240,13 +240,31 @@ export class SSCLookupForm {
                 "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/test-drive.js

@@ -58,9 +58,9 @@ export class TestDriveForm {
     // #endregion
     render() {
         var _a, _b;
-        return (h(Host, { key: 'c22942c01dd459d26ea1574104328e3820ebef2a' }, h("div", { key: '579f3ff664278b1208bab93185e0d607d34b58c4', 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: 'f19577de7dec60a342b6292810e12ce0b58cf9c8', part: "form-container", class: "relative min-h-[150px]" }, h("div", { key: '17518c85252d0bcda63319b5c7ca712603c46940', 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: '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', {
                 'opacity-0': this.structureRendered,
-            }) }, h(LoaderIcon, { key: '56cfde4b37adc257f98d1ad714642f6140fc5051', part: "form-loader-icon", class: "img" })), h("flexible-container", { key: '7ecb050edcffed8af61c6642bd4ca9aae37f754e', onlyForMounting: true, isOpened: this.structureRendered }, !!this.form && (h("form-structure", { key: 'c77c8063cf2f8eccc67e4d6270c2b3e1e0d411c6', 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: 'cc74ebbf35a57bb9ff25afaf8b670ab5b3a1ccd0' }))))))));
+            }) }, 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' }))))))));
     }
     static get is() { return "test-drive-form"; }
     static get encapsulation() { return "shadow"; }
@@ -229,13 +229,31 @@ export class TestDriveForm {
                 "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/vehicle-quotation.js

@@ -148,9 +148,9 @@ export class VehicleQuotationForm {
     // #endregion
     render() {
         var _a, _b;
-        return (h(Host, { key: 'e240b44b8a7b4770b82b6c84ac2f38e6a389ff23' }, h("div", { key: '771af7e1f772254fabff1021b9df1e7dc9b7e428', 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: '4175935dd3accb9ad71cf128e2f1f05ca9e2f5ac', part: "form-container", class: "relative min-h-[150px]" }, h("div", { key: 'b25eb0f495a6bfa86c4c0661f3f9fbc61d7c9abe', 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: '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', {
                 'opacity-0': this.structureRendered,
-            }) }, h(LoaderIcon, { key: '5b04607321dd1e4421909a0596b245853e8f48d6', part: "form-loader-icon", class: "img" })), h("flexible-container", { key: 'b838a7e077b6e55542e9a48c9951b44259de353d', onlyForMounting: true, isOpened: this.structureRendered }, !!this.form && (h("form-structure", { key: 'c2135e6a0e59b6ccfd214379fabf57b62f1880da', 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: '1d94f09f5590437a44d1e92b67e5d2a002ad26cf' }))))))));
+            }) }, 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' }))))))));
     }
     static get is() { return "vehicle-quotation-form"; }
     static get encapsulation() { return "shadow"; }
@@ -325,7 +325,7 @@ export class VehicleQuotationForm {
                 "mutable": true,
                 "complexType": {
                     "original": "FormElementStructure<vehicleQuotationElementNames> | undefined",
-                    "resolved": "{ data?: Record<string, any>; requiredContext?: Record<string, boolean>; } & { id?: string; class?: string; staticValue?: any; isHidden?: boolean; isDisabled?: boolean; children?: (OptionalKeys<{ vehicle: string; name: string; phone: string; dealer: string; city: string; paymentType: string; contactTime: string; ownVehicle: string; currentVehicleBrand: string; currentVehicleModel: string; }> | AdditionalFields | FormElementStructureComponents<OptionalKeys<{ vehicle: string; name: string; phone: string; dealer: string; city: string; paymentType: string; contactTime: string; ownVehicle: string; currentVehicleBrand: string; currentVehicleModel: string; }> | AdditionalFields>)[]; } & { tag: string; name?: OptionalKeys<{ vehicle: string; name: string; phone: string; dealer: string; city: string; paymentType: string; contactTime: string; ownVehicle: string; currentVehicleBrand: string; currentVehicleModel: string; }> | AdditionalFields; } | { data?: Record<string, any>; requiredContext?: Record<string, boolean>; } & { id?: string; class?: string; staticValue?: any; isHidden?: boolean; isDisabled?: boolean; children?: (OptionalKeys<{ vehicle: string; name: string; phone: string; dealer: string; city: string; paymentType: string; contactTime: string; ownVehicle: string; currentVehicleBrand: string; currentVehicleModel: string; }> | AdditionalFields | FormElementStructureComponents<OptionalKeys<{ vehicle: string; name: string; phone: string; dealer: string; city: string; paymentType: string; contactTime: string; ownVehicle: string; currentVehicleBrand: string; currentVehicleModel: string; }> | AdditionalFields>)[]; } & { tag?: string; name: OptionalKeys<{ vehicle: string; name: string; phone: string; dealer: string; city: string; paymentType: string; contactTime: string; ownVehicle: string; currentVehicleBrand: string; currentVehicleModel: string; }> | AdditionalFields; }",
+                    "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?: (OptionalKeys<{ vehicle: string; name: string; phone: string; dealer: string; city: string; paymentType: string; contactTime: string; ownVehicle: string; currentVehicleBrand: string; currentVehicleModel: string; }> | AdditionalFields | FormElementStructureComponents<OptionalKeys<{ vehicle: string; name: string; phone: string; dealer: string; city: string; paymentType: string; contactTime: string; ownVehicle: string; currentVehicleBrand: string; currentVehicleModel: string; }> | AdditionalFields>)[]; } & { tag: string; name?: OptionalKeys<{ vehicle: string; name: string; phone: string; dealer: string; city: string; paymentType: string; contactTime: string; ownVehicle: string; currentVehicleBrand: string; currentVehicleModel: string; }> | AdditionalFields; } | { 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?: (OptionalKeys<{ vehicle: string; name: string; phone: string; dealer: string; city: string; paymentType: string; contactTime: string; ownVehicle: string; currentVehicleBrand: string; currentVehicleModel: string; }> | AdditionalFields | FormElementStructureComponents<OptionalKeys<{ vehicle: string; name: string; phone: string; dealer: string; city: string; paymentType: string; contactTime: string; ownVehicle: string; currentVehicleBrand: string; currentVehicleModel: string; }> | AdditionalFields>)[]; } & { tag?: string; name: OptionalKeys<{ vehicle: string; name: string; phone: string; dealer: string; city: string; paymentType: string; contactTime: string; ownVehicle: string; currentVehicleBrand: string; currentVehicleModel: string; }> | AdditionalFields; }",
                     "references": {
                         "FormElementStructure": {
                             "location": "import",

package/dist/collection/components/part-lookup/dead-stock-lookup.css

@@ -1 +1 @@
-*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: ;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.\!pointer-events-none{pointer-events:none!important}.collapse{visibility:collapse}.absolute{position:absolute}.\!relative{position:relative!important}.relative{position:relative}.left-0{left:0}.top-0{top:0}.z-10{z-index:10}.block{display:block}.flex{display:flex}.hidden{display:none}.flex-shrink{flex-shrink:1}.border-collapse{border-collapse:collapse}.origin-left{transform-origin:left}.rotate-0{--tw-rotate:0deg}.rotate-0,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-default{cursor:default}.\!overflow-hidden{overflow:hidden!important}.rounded-\[4px\]{border-radius:4px}.border{border-width:1px}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.opacity-0{opacity:0}.opacity-100{opacity:1}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-500{transition-duration:.5s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.shift-skeleton{border-radius:4px;position:relative!important}.loading .shift-skeleton,.loading.shift-skeleton{border-style:none!important;overflow:hidden!important;pointer-events:none!important;position:relative!important}.shift-skeleton:after{background:linear-gradient(-45deg,#d4d8de,#e2e5e9,#d4d8de);background-size:300% 300%;border-radius:inherit!important;content:"";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transform-origin:left;transition-duration:.5s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%;z-index:10}.loading .shift-skeleton:after,.loading.shift-skeleton:after{--tw-scale-x:1;animation:shimmer 2s ease-in-out infinite;opacity:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes shimmer{0%{background-position:100% 0}50%{background-position:0 100%}to{background-position:100% 0}}.dead-stock-item{border:1px solid #d6d8dc;border-radius:6px;overflow:hidden}.dead-stock-item>.button{align-items:center;display:flex;gap:50px;height:50px;justify-content:space-between;padding:0 16px;transition-duration:.5s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%}.dead-stock-item>.button.cursor-default{cursor:default}.dead-stock-item>.button.bg-slate-100{background-color:#f1f5f9}.dead-stock-item .header{flex-shrink:0;font-size:20px;font-weight:700;text-align:start}.dead-stock-item .icon-container{align-items:center;display:flex;flex-shrink:0;height:30px;justify-content:center;transform:rotate(180deg);transition-duration:.5s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:30px}.dead-stock-item .icon-container.rotate-0{transform:rotate(0deg)}.dead-stock-item .dead-stock-table{border-collapse:collapse;overflow:auto;padding:20px;width:100%}.dead-stock-item .dead-stock-table-header{border-bottom:1px solid #d6d8dc;padding:20px 10px;text-align:start;white-space:nowrap}.dead-stock-item .dead-stock-table-row{border-bottom:1px solid #d6d8dc;transition-duration:.1s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.dead-stock-item .dead-stock-table-row:last-child{border:none}.dead-stock-item .dead-stock-table-row:hover{background-color:#f1f5f9}.dead-stock-item .dead-stock-table-row td{padding:20px 10px;text-align:start;white-space:nowrap}@keyframes showAfterDelay{0%{opacity:0}99.9%{opacity:0}to{opacity:1}}.show-after-delay{animation:showAfterDelay .5s forwards;opacity:0}.vehicle-info-container{background-color:#fdfdfd;border:1px solid #dcdcdc;border-radius:5px;box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 hsla(0,0%,100%,.1);overflow:hidden;padding:0;position:relative;transition-duration:.5s;transition-property:all}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#f6f6f6;border-radius:5px;border-top:1px solid #dcdcdc;border-top-left-radius:0;border-top-right-radius:0}::-webkit-scrollbar-thumb{background:#c5c5c5;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#a1a1a1}.hide-scroll ::-webkit-scrollbar-thumb,.hide-scroll::-webkit-scrollbar-thumb,.loading ::-webkit-scrollbar-thumb{background:transparent}.vehicle-info-body{display:flex;flex-direction:column;overflow:hidden;position:relative;transition-duration:.5s;transition-property:all;transition-timing-function:ease-in-out}.vehicle-info-content{transition-duration:.5s;transition-property:all;width:100%}.vehicle-info-header{align-items:center;background-color:#f6f6f6;border:1px solid #ededed;display:flex;height:54px;justify-content:center;text-align:center}.vehicle-info-header-vin{display:inline-block;font-size:16px;transition-duration:.5s;transition-property:all}.vehicle-info-header-vin span{color:#ef4444}.loading .vehicle-info-header-vin{opacity:0;transform:scale(1.5);visibility:hidden}:host{all:initial!important;display:block;font-family:inherit!important;font-family:Noto Kufi Arabic,Nunito,Roboto,Arial,sans-serif!important}*,:host *{font-family:inherit!important}.static{position:static}.h-\[200px\]{height:200px}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.text-\[26px\]{font-size:26px}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.flex-col{flex-direction:column}.gap-\[16px\]{gap:16px}.p-\[16px\]{padding:16px}.pb-\[16px\]{padding-bottom:16px}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.mx-auto{margin-left:auto;margin-right:auto}.me-2{margin-inline-end:.5rem}.ml-1{margin-left:.25rem}.mt-2{margin-top:.5rem}.mt-\[32px\]{margin-top:32px}.inline-flex{display:inline-flex}.h-\[50px\]{height:50px}.w-fit{width:fit-content}.max-w-full{max-width:100%}.flex-wrap{flex-wrap:wrap}.items-stretch{align-items:stretch}.gap-\[8px\]{gap:8px}.overflow-auto{overflow:auto}.overflow-x-auto{overflow-x:auto}.rounded-lg{border-radius:.5rem}.border-red-300{--tw-border-opacity:1;border-color:rgb(252 165 165/var(--tw-border-opacity,1))}.bg-\[\#f6f6f6\]{--tw-bg-opacity:1;background-color:rgb(246 246 246/var(--tw-bg-opacity,1))}.bg-red-50{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity,1))}.p-\[2px\]{padding:2px}.px-3{padding-left:.75rem;padding-right:.75rem}.px-\[16px\]{padding-left:16px;padding-right:16px}.py-1{padding-bottom:.25rem;padding-top:.25rem}.text-\[16px\]{font-size:16px}.text-\[18px\]{font-size:18px}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-\[green\]{--tw-text-opacity:1;color:rgb(0 128 0/var(--tw-text-opacity,1))}.text-\[orange\]{--tw-text-opacity:1;color:rgb(255 165 0/var(--tw-text-opacity,1))}.text-\[red\]{--tw-text-opacity:1;color:rgb(255 0 0/var(--tw-text-opacity,1))}.text-red-800{--tw-text-opacity:1;color:rgb(153 27 27/var(--tw-text-opacity,1))}@media (min-width:768px){.md\:justify-between{justify-content:space-between}}.\[\&\>div\]\:grow>div{flex-grow:1}.me-1{margin-inline-end:.25rem}.mb-\[12px\]{margin-bottom:12px}.w-\[500px\]{width:500px}.max-w-\[250px\]{max-width:250px}.max-w-\[96vw\]{max-width:96vw}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.gap-2{gap:.5rem}.gap-\[32px\]{gap:32px}.rounded-md{border-radius:.375rem}.border-b{border-bottom-width:1px}.border-l{border-left-width:1px}.border-r{border-right-width:1px}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.py-\[10px\]{padding-bottom:10px;padding-top:10px}.py-\[12px\]{padding-bottom:12px}.pt-\[12px\],.py-\[12px\]{padding-top:12px}.pt-\[32px\]{padding-top:32px}.pt-\[8px\]{padding-top:8px}.text-center{text-align:center}.text-\[20px\]{font-size:20px}.text-xl{font-size:1.25rem;line-height:1.75rem}.even\:bg-slate-100:nth-child(2n){--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.hover\:bg-sky-100\/50:hover{background-color:rgba(224,242,254,.5)}.\!w-full{width:100%!important}.translate-x-\[-200\%\]{--tw-translate-x:-200%}.translate-x-\[-200\%\],.translate-y-\[200\%\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-\[200\%\]{--tw-translate-y:200%}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.\!duration-0{transition-duration:0s!important}.\[\&_\*\]\:\!pointer-events-none *{pointer-events:none!important}.\!h-auto{height:auto!important}.min-w-full{min-width:100%}.resize{resize:both}.overflow-hidden{overflow:hidden}.\!transition-none{transition-property:none!important}.\!duration-500{transition-duration:.5s!important}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.my-auto{margin-bottom:auto;margin-top:auto}.grid{display:grid}.size-\[28px\]{height:28px;width:28px}.size-\[32px\]{height:32px;width:32px}.size-full{height:100%;width:100%}.min-w-0{min-width:0}.rotate-180{--tw-rotate:180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.place-items-center{place-items:center}.rounded{border-radius:.25rem}.bg-sky-100{--tw-bg-opacity:1;background-color:rgb(224 242 254/var(--tw-bg-opacity,1))}.bg-sky-200{--tw-bg-opacity:1;background-color:rgb(186 230 253/var(--tw-bg-opacity,1))}.bg-slate-200\/70{background-color:rgba(226,232,240,.7)}.px-\[12px\]{padding-left:12px;padding-right:12px}.px-\[6px\]{padding-left:6px;padding-right:6px}.px-\[8px\]{padding-left:8px;padding-right:8px}.py-\[16px\]{padding-bottom:16px;padding-top:16px}.text-\[13px\]{font-size:13px}.text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1))}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.last\:border-b-0:last-child{border-bottom-width:0}.hover\:cursor-pointer:hover{cursor:pointer}.hover\:bg-sky-200:hover{--tw-bg-opacity:1;background-color:rgb(186 230 253/var(--tw-bg-opacity,1))}.hover\:bg-slate-200\/70:hover{background-color:rgba(226,232,240,.7)}.table{display:table}
+*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: ;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.\!pointer-events-none{pointer-events:none!important}.collapse{visibility:collapse}.absolute{position:absolute}.\!relative{position:relative!important}.relative{position:relative}.left-0{left:0}.top-0{top:0}.z-10{z-index:10}.block{display:block}.flex{display:flex}.hidden{display:none}.flex-shrink{flex-shrink:1}.border-collapse{border-collapse:collapse}.origin-left{transform-origin:left}.rotate-0{--tw-rotate:0deg}.rotate-0,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-default{cursor:default}.\!overflow-hidden{overflow:hidden!important}.rounded-\[4px\]{border-radius:4px}.border{border-width:1px}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.opacity-0{opacity:0}.opacity-100{opacity:1}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-500{transition-duration:.5s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.shift-skeleton{border-radius:4px;position:relative!important}.loading .shift-skeleton,.loading.shift-skeleton{border-style:none!important;overflow:hidden!important;pointer-events:none!important;position:relative!important}.shift-skeleton:after{background:linear-gradient(-45deg,#d4d8de,#e2e5e9,#d4d8de);background-size:300% 300%;border-radius:inherit!important;content:"";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transform-origin:left;transition-duration:.5s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%;z-index:10}.loading .shift-skeleton:after,.loading.shift-skeleton:after{--tw-scale-x:1;animation:shimmer 2s ease-in-out infinite;opacity:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes shimmer{0%{background-position:100% 0}50%{background-position:0 100%}to{background-position:100% 0}}.dead-stock-item{border:1px solid #d6d8dc;border-radius:6px;overflow:hidden}.dead-stock-item>.button{align-items:center;display:flex;gap:50px;height:50px;justify-content:space-between;padding:0 16px;transition-duration:.5s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%}.dead-stock-item>.button.cursor-default{cursor:default}.dead-stock-item>.button.bg-slate-100{background-color:#f1f5f9}.dead-stock-item .header{flex-shrink:0;font-size:20px;font-weight:700;text-align:start}.dead-stock-item .icon-container{align-items:center;display:flex;flex-shrink:0;height:30px;justify-content:center;transform:rotate(180deg);transition-duration:.5s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:30px}.dead-stock-item .icon-container.rotate-0{transform:rotate(0deg)}.dead-stock-item .dead-stock-table{border-collapse:collapse;overflow:auto;padding:20px;width:100%}.dead-stock-item .dead-stock-table-header{border-bottom:1px solid #d6d8dc;padding:20px 10px;text-align:start;white-space:nowrap}.dead-stock-item .dead-stock-table-row{border-bottom:1px solid #d6d8dc;transition-duration:.1s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.dead-stock-item .dead-stock-table-row:last-child{border:none}.dead-stock-item .dead-stock-table-row:hover{background-color:#f1f5f9}.dead-stock-item .dead-stock-table-row td{padding:20px 10px;text-align:start;white-space:nowrap}@keyframes showAfterDelay{0%{opacity:0}99.9%{opacity:0}to{opacity:1}}.show-after-delay{animation:showAfterDelay .5s forwards;opacity:0}.vehicle-info-container{background-color:#fdfdfd;border:1px solid #dcdcdc;border-radius:5px;box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 hsla(0,0%,100%,.1);overflow:hidden;padding:0;position:relative;transition-duration:.5s;transition-property:all}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#f6f6f6;border-radius:5px;border-top:1px solid #dcdcdc;border-top-left-radius:0;border-top-right-radius:0}::-webkit-scrollbar-thumb{background:#c5c5c5;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#a1a1a1}.hide-scroll ::-webkit-scrollbar-thumb,.hide-scroll::-webkit-scrollbar-thumb,.loading ::-webkit-scrollbar-thumb{background:transparent}.vehicle-info-body{display:flex;flex-direction:column;overflow:hidden;position:relative;transition-duration:.5s;transition-property:all;transition-timing-function:ease-in-out}.vehicle-info-content{transition-duration:.5s;transition-property:all;width:100%}.vehicle-info-header{align-items:center;background-color:#f6f6f6;border:1px solid #ededed;display:flex;height:54px;justify-content:center;text-align:center}.vehicle-info-header-vin{display:inline-block;font-size:16px;transition-duration:.5s;transition-property:all}.vehicle-info-header-vin span{color:#ef4444}.loading .vehicle-info-header-vin{opacity:0;transform:scale(1.5);visibility:hidden}:host{all:initial!important;display:block;font-family:inherit!important;font-family:Noto Kufi Arabic,Nunito,Roboto,Arial,sans-serif!important}*,:host *{font-family:inherit!important}.static{position:static}.flex-col{flex-direction:column}.gap-\[16px\]{gap:16px}.p-\[16px\]{padding:16px}.pb-\[16px\]{padding-bottom:16px}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.table{display:table}.flex-1{flex:1 1 0%}.h-\[200px\]{height:200px}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.text-\[26px\]{font-size:26px}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.mx-auto{margin-left:auto;margin-right:auto}.me-2{margin-inline-end:.5rem}.ml-1{margin-left:.25rem}.mt-2{margin-top:.5rem}.mt-\[32px\]{margin-top:32px}.inline-flex{display:inline-flex}.h-\[50px\]{height:50px}.w-fit{width:fit-content}.max-w-full{max-width:100%}.flex-wrap{flex-wrap:wrap}.items-stretch{align-items:stretch}.gap-\[8px\]{gap:8px}.overflow-auto{overflow:auto}.overflow-x-auto{overflow-x:auto}.rounded-lg{border-radius:.5rem}.border-red-300{--tw-border-opacity:1;border-color:rgb(252 165 165/var(--tw-border-opacity,1))}.bg-\[\#f6f6f6\]{--tw-bg-opacity:1;background-color:rgb(246 246 246/var(--tw-bg-opacity,1))}.bg-red-50{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity,1))}.p-\[2px\]{padding:2px}.px-3{padding-left:.75rem;padding-right:.75rem}.px-\[16px\]{padding-left:16px;padding-right:16px}.py-1{padding-bottom:.25rem;padding-top:.25rem}.text-\[16px\]{font-size:16px}.text-\[18px\]{font-size:18px}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-\[green\]{--tw-text-opacity:1;color:rgb(0 128 0/var(--tw-text-opacity,1))}.text-\[orange\]{--tw-text-opacity:1;color:rgb(255 165 0/var(--tw-text-opacity,1))}.text-\[red\]{--tw-text-opacity:1;color:rgb(255 0 0/var(--tw-text-opacity,1))}.text-red-800{--tw-text-opacity:1;color:rgb(153 27 27/var(--tw-text-opacity,1))}@media (min-width:768px){.md\:justify-between{justify-content:space-between}}.\[\&\>div\]\:grow>div{flex-grow:1}.me-1{margin-inline-end:.25rem}.mb-\[12px\]{margin-bottom:12px}.w-\[500px\]{width:500px}.max-w-\[250px\]{max-width:250px}.max-w-\[96vw\]{max-width:96vw}.shrink-0{flex-shrink:0}.gap-2{gap:.5rem}.gap-\[32px\]{gap:32px}.rounded-md{border-radius:.375rem}.border-b{border-bottom-width:1px}.border-l{border-left-width:1px}.border-r{border-right-width:1px}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.py-\[10px\]{padding-bottom:10px;padding-top:10px}.py-\[12px\]{padding-bottom:12px}.pt-\[12px\],.py-\[12px\]{padding-top:12px}.pt-\[32px\]{padding-top:32px}.pt-\[8px\]{padding-top:8px}.text-center{text-align:center}.text-\[20px\]{font-size:20px}.text-xl{font-size:1.25rem;line-height:1.75rem}.even\:bg-slate-100:nth-child(2n){--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.hover\:bg-sky-100\/50:hover{background-color:rgba(224,242,254,.5)}