adp-web-components 0.1.57 → 0.1.59

package/dist/cjs/state-object-B_0-oj8G.js

@@ -0,0 +1,243 @@
+/*!
+ * Built by ShiftSoftware
+ * Copyright (c)
+ */
+'use strict';
+
+var getLocalLanguage = require('./get-local-language-CMptyFxH.js');
+var validateVin = require('./validate-vin-CJDIXpJO.js');
+var index = require('./index-CmK48vN3.js');
+var index$1 = require('./index-D5c513Xn.js');
+var loaderIcon = require('./loader-icon-qrSyqpQO.js');
+var cn = require('./cn-BHnqYtun.js');
+var decodeTimeOffset = require('./decode-time-offset-DqzP0mck.js');
+
+const label = (name) => `${name}-label`;
+const format = (name) => `${name}-format`;
+const require$1 = (name) => `${name}-require`;
+const placeholder = (name) => `${name}-placeholder`;
+const condition = (name) => `$${name}Required`;
+const y = { label, format, require: require$1, condition, placeholder };
+const getDefaultValidations = (stateObject) => ({
+    name: getLocalLanguage.create$6()
+        .meta({ label: label('name'), placeholder: placeholder('name') })
+        .when(condition('name'), {
+        is: true,
+        otherwise: schema => schema.optional(),
+        then: schema => schema.required(require$1('name')).min(3, format('name')),
+    }),
+    lastName: getLocalLanguage.create$6()
+        .meta({ label: label('lastName'), placeholder: placeholder('lastName') })
+        .when(condition('lastName'), {
+        is: true,
+        otherwise: schema => schema.optional(),
+        then: schema => schema.required(require$1('lastName')).min(3, format('lastName')),
+    }),
+    message: getLocalLanguage.create$6()
+        .meta({ label: label('message'), placeholder: placeholder('message') })
+        .when(condition('message'), {
+        is: true,
+        otherwise: schema => schema.optional(),
+        then: schema => schema.required(require$1('message')).min(10, format('message')),
+    }),
+    email: getLocalLanguage.create$6()
+        .meta({ label: label('email'), placeholder: placeholder('email') })
+        .when(condition('email'), {
+        is: true,
+        otherwise: schema => schema.optional(),
+        then: schema => schema.required(require$1('email')),
+    })
+        .email(format('email')),
+    vin: getLocalLanguage.create$6()
+        .meta({ label: label('vin'), placeholder: placeholder('vin') })
+        .when(condition('vin'), {
+        is: true,
+        otherwise: schema => schema.optional(),
+        then: schema => schema.required(require$1('vin')).test(format('vin'), format('vin'), a => validateVin.validateVin(a === null || a === void 0 ? void 0 : a.toUpperCase())),
+    }),
+    phone: getLocalLanguage.create$6()
+        .meta({ label: label('phone'), placeholder: placeholder('phone') })
+        .when(condition('phone'), {
+        is: true,
+        otherwise: schema => schema.optional(),
+        then: schema => schema.required(require$1('phone')).test(format('phone'), format('phone'), () => { var _a; return (_a = stateObject === null || stateObject === void 0 ? void 0 : stateObject.phoneValidator) === null || _a === void 0 ? void 0 : _a.geIsValidPhoneNumber(); }),
+    }),
+    vehicle: getLocalLanguage.create$6()
+        .meta({ label: y.label('vehicle'), placeholder: y.placeholder('vehicle') })
+        .when(y.condition('vehicle'), {
+        is: true,
+        otherwise: schema => schema.optional(),
+        then: schema => schema.required(y.require('vehicle')),
+    }),
+    companyBranchId: getLocalLanguage.create$6()
+        .meta({ label: y.label('companyBranchId'), placeholder: y.placeholder('companyBranchId') })
+        .when(y.condition('companyBranchId'), {
+        is: true,
+        otherwise: schema => schema.optional(),
+        then: schema => schema.required(y.require('companyBranchId')),
+    }),
+    date: getLocalLanguage.create$6()
+        .meta({ label: label('date'), placeholder: placeholder('date') })
+        .when(condition('date'), {
+        is: true,
+        otherwise: schema => schema.optional(),
+        then: schema => schema.required(require$1('date')),
+    }),
+    time: getLocalLanguage.create$6()
+        .meta({ label: label('time'), placeholder: placeholder('time') })
+        .when(condition('time'), {
+        is: true,
+        otherwise: schema => schema.optional(),
+        then: schema => schema.required(require$1('time')),
+    }),
+});
+
+const cachedImages = {};
+const cacheImage = (form, imSrc, id) => {
+    fetch(imSrc)
+        .then(res => res.blob())
+        .then(blob => {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+            cachedImages[id] = reader.result;
+            form.rerender({ rerenderForm: true });
+        };
+        reader.readAsDataURL(blob);
+    })
+        .catch(e => {
+        console.log(e);
+        // fail silently, keep fallback
+    });
+};
+let imageSrcBase64 = '';
+const VehicleImageViewer = ({ form }) => {
+    var _a, _b, _c, _d;
+    form.addWatcher('vehicle');
+    let vehicleId = form.getValue('vehicle');
+    let openContainer = !!vehicleId;
+    const selectedVehicle = (_a = form.context['vehicleList']) === null || _a === void 0 ? void 0 : _a.find(vehicle => vehicle.value === vehicleId);
+    let imSrc;
+    if (selectedVehicle) {
+        imSrc = (_b = selectedVehicle === null || selectedVehicle === void 0 ? void 0 : selectedVehicle.meta) === null || _b === void 0 ? void 0 : _b.image;
+        vehicleId = selectedVehicle.value;
+    }
+    else if (form.context['vehicleList'] && form.context['vehicleList'][0]) {
+        imSrc = (_d = (_c = form.context['vehicleList'][0]) === null || _c === void 0 ? void 0 : _c.meta) === null || _d === void 0 ? void 0 : _d.image;
+        vehicleId = form.context['vehicleList'][0].value;
+    }
+    let isLoading = false;
+    if (cachedImages[vehicleId]) {
+        imageSrcBase64 = cachedImages[vehicleId];
+    }
+    else if (form && imSrc && vehicleId) {
+        cacheImage(form, imSrc, vehicleId);
+        isLoading = true;
+    }
+    return (index.h("flexible-container", { isOpened: openContainer },
+        index.h("div", { style: { 'min-height': '60px' }, part: "vehicle-image-wrapper", class: cn.cn('vehicle-image-wrapper', { loading: isLoading }) },
+            index.h("div", { part: cn.cn('vehicle-image-loading-wrapper', { 'vehicle-image-active-loading-wrapper': isLoading }), class: cn.cn('loading-wrapper vehicle-image-loading-wrapper', { 'vehicle-image-active-loading-wrapper': isLoading }) },
+                index.h(loaderIcon.LoaderIcon, { part: "vehicle-image-loader-icon", class: "img vehicle-image-loader-icon" })),
+            index.h("img", { alt: "vehicle image", part: "vehicle-image", src: imageSrcBase64, style: { 'border-radius': '6px', 'transition': 'opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);', 'opacity': isLoading ? '0' : '1' } }))));
+};
+
+const CalendarDaysIcon = props => (index.h("svg", Object.assign({ fill: "none" }, props, { "stroke-width": "2", viewBox: "0 0 24 24", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", xmlns: "http://www.w3.org/2000/svg" }),
+    index.h("path", { d: "M8 2v4" }),
+    index.h("path", { d: "M16 2v4" }),
+    index.h("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2" }),
+    index.h("path", { d: "M3 10h18" }),
+    index.h("path", { d: "M8 14h.01" }),
+    index.h("path", { d: "M12 14h.01" }),
+    index.h("path", { d: "M16 14h.01" }),
+    index.h("path", { d: "M8 18h.01" }),
+    index.h("path", { d: "M12 18h.01" }),
+    index.h("path", { d: "M16 18h.01" })));
+
+const getDefaultMappers = (stateObject) => ({
+    submit: ({ props }) => index.h("form-submit", Object.assign({}, props)),
+    name: ({ props }) => index.h("form-input", Object.assign({}, props)),
+    lastName: ({ props }) => index.h("form-input", Object.assign({}, props)),
+    email: ({ props }) => index.h("form-input", Object.assign({ type: "email" }, props)),
+    message: ({ props }) => index.h("form-text-area", Object.assign({}, props)),
+    vin: ({ props }) => index.h("form-vin-input", Object.assign({}, props)),
+    vehicleImage: ({ form }) => index.h(VehicleImageViewer, { form: form }),
+    phone: ({ props, isLoading }) => {
+        if (!stateObject.phoneValidator) {
+            stateObject.phoneValidator = loaderIcon.getPhoneValidator((props === null || props === void 0 ? void 0 : props.countryCode) || '');
+        }
+        return index.h("form-phone-number", Object.assign({ defaultValue: stateObject.phoneValidator.default }, props, { isLoading: isLoading, validator: stateObject.phoneValidator }));
+    },
+    vehicle: ({ form, language, props }) => {
+        var _a;
+        const fetcher = async ({ signal }) => {
+            var _a, _b, _c;
+            const vehicleEndpoint = (_a = form.context.structure) === null || _a === void 0 ? void 0 : _a.data.vehicleApi;
+            const response = await fetch(vehicleEndpoint, { signal, headers: { 'Accept-Language': language } });
+            if ((_c = (_b = form.context.structure) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.vehiclesApiStrapiFormat) {
+                const res = await response.json();
+                let options = res.data;
+                return options.map(vehicle => ({
+                    label: vehicle.attributes.GradeName,
+                    value: `${vehicle.id}`,
+                    meta: Object.assign(Object.assign({}, vehicle), { image: vehicle.attributes.Cover.data.attributes.url }),
+                }));
+            }
+            else {
+                const options = await response.json();
+                return options.map(vehicle => ({
+                    label: vehicle.Title,
+                    value: `${vehicle.ID}`,
+                    meta: Object.assign(Object.assign({}, vehicle), { image: vehicle.Image }),
+                }));
+            }
+        };
+        let defaultValue;
+        if (!props.defaultValue) {
+            const params = new URLSearchParams(window.location.search);
+            defaultValue = params.get((_a = form.context.structure.data) === null || _a === void 0 ? void 0 : _a.vehicleIdQueryParam);
+        }
+        else {
+            defaultValue = props.defaultValue;
+        }
+        return index.h("form-select", Object.assign({}, props, { defaultValue: defaultValue, searchable: true, fetcher: fetcher, language: language }));
+    },
+    companyBranchId: ({ form, language, props }) => {
+        const fetcher = async ({ signal }) => {
+            var _a;
+            const dealerEndpoint = (_a = form.context.structure) === null || _a === void 0 ? void 0 : _a.data.dealerApi;
+            const response = await fetch(dealerEndpoint, { signal, headers: { 'Accept-Language': language } });
+            const options = (await response.json()).map(dealer => ({
+                label: dealer.Name,
+                value: `${dealer.ID}`,
+                meta: Object.assign({}, dealer),
+            }));
+            return options;
+        };
+        return index.h("form-select", Object.assign({}, props, { clearable: true, searchable: true, fetcher: fetcher, language: language }));
+    },
+    date: ({ props }) => index.h("form-picker-input", Object.assign({ type: "date" }, props, { icon: index.h(CalendarDaysIcon, null) })),
+    time: ({ language, props }) => {
+        const fetcher = async () => {
+            const options = [];
+            if (Array.isArray(props.span) && Array.isArray(props.min) && Array.isArray(props.max) && props.format) {
+                let tempDate = decodeTimeOffset.decodeTimeOffset({ offsets: props.min });
+                let maxDate = decodeTimeOffset.decodeTimeOffset({ offsets: props.max });
+                while (index$1.dateFnsExports.isBefore(tempDate, maxDate) || index$1.dateFnsExports.isEqual(tempDate, maxDate)) {
+                    options.push({
+                        value: index$1.dateFnsExports.format(tempDate, props.format),
+                        label: index$1.dateFnsExports.format(tempDate, props.format),
+                    });
+                    tempDate = decodeTimeOffset.decodeTimeOffset({ offsets: props.span, date: tempDate });
+                }
+            }
+            return options;
+        };
+        return index.h("form-select", Object.assign({}, props, { clearable: true, fetcher: fetcher, language: language }));
+    },
+});
+
+const getDefaultStateObject = () => ({ phoneValidator: undefined });
+
+exports.getDefaultMappers = getDefaultMappers;
+exports.getDefaultStateObject = getDefaultStateObject;
+exports.getDefaultValidations = getDefaultValidations;
+exports.y = y;

package/dist/cjs/test-drive-form.cjs.entry.js

@@ -5,17 +5,19 @@
 'use strict';
 
 var index = require('./index-CmK48vN3.js');
-var loaderIcon = require('./loader-icon-8WtBJ-H1.js');
+var loaderIcon = require('./loader-icon-qrSyqpQO.js');
 var cn = require('./cn-BHnqYtun.js');
-var getLocalLanguage = require('./get-local-language-CLEoE4A4.js');
+var getLocalLanguage = require('./get-local-language-CMptyFxH.js');
 var getLanguageFromUrl = require('./get-language-from-url-CfLHbGsq.js');
-var stateObject$1 = require('./state-object-BKYoOET2.js');
+var stateObject$1 = require('./state-object-B_0-oj8G.js');
+require('./index-D5c513Xn.js');
 require('./validate-vin-CJDIXpJO.js');
+require('./decode-time-offset-DqzP0mck.js');
 
-const styleCss = "*,: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-scroll-snap-strictness:proximity;--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;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-scroll-snap-strictness:proximity;--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;}/*! 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}.block{display:block}.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))}:host{all:initial!important;display:block;font-family:inherit!important}@keyframes form-loading-spin{to{transform:rotate(1turn)}}.form-loader-container .img{animation:form-loading-spin 2s linear infinite;height:32px;width:32px}*{-webkit-user-select:none;-moz-user-select:none;user-select:none}.pointer-events-none{pointer-events:none}.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-0{left:0}.top-0{top:0}.flex{display:flex}.h-full{height:100%}.min-h-\\[150px\\]{min-height:150px}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.opacity-0{opacity:0}.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)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-500{transition-duration:.5s}.\\!h-auto{height:auto!important}.min-w-full{min-width:100%}.resize{resize:both}.overflow-hidden{overflow:hidden}.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)}.\\!transition-none{transition-property:none!important}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.\\!duration-0{transition-duration:0s!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}}.fixed{position:fixed}.bottom-4{bottom:1rem}.left-1\\/2{left:50%}.z-10{z-index:10}.z-\\[9999\\]{z-index:9999}.hidden{display:none}.size-8{height:2rem;width:2rem}.size-\\[32px\\]{height:32px;width:32px}.size-full{height:100%;width:100%}.h-\\[100dvh\\]{height:100dvh}.h-\\[60px\\]{height:60px}.min-h-full{min-height:100%}.w-\\[100dvw\\]{width:100dvw}.w-\\[100px\\]{width:100px}.-translate-x-1\\/2{--tw-translate-x:-50%;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))}.animate-spin{animation:spin 1s linear infinite}.cursor-pointer{cursor:pointer}.justify-between{justify-content:space-between}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-slate-500{--tw-border-opacity:1;border-color:rgb(100 116 139/var(--tw-border-opacity,1))}.border-slate-600{--tw-border-opacity:1;border-color:rgb(71 85 105/var(--tw-border-opacity,1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-black\\/30{background-color:rgba(0,0,0,.3)}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.object-cover{object-fit:cover}.object-center{object-position:center}.p-1{padding:.25rem}.p-\\[16px\\]{padding:16px}.py-\\[10px\\]{padding-bottom:10px;padding-top:10px}.text-center{text-align:center}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-slate-100{--tw-text-opacity:1;color:rgb(241 245 249/var(--tw-text-opacity,1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.shadow,.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.hover\\:border-slate-700:hover{--tw-border-opacity:1;border-color:rgb(51 65 85/var(--tw-border-opacity,1))}.hover\\:bg-slate-300:hover{--tw-bg-opacity:1;background-color:rgb(203 213 225/var(--tw-bg-opacity,1))}.hover\\:text-slate-700:hover{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1))}.disabled\\:bg-white\\/75:disabled{background-color:hsla(0,0%,100%,.75)}@media (min-width:768px){.md\\:relative{position:relative}.md\\:aspect-auto{aspect-ratio:auto}.md\\:h-auto{height:auto}.md\\:w-\\[600px\\]{width:600px}.md\\:\\!translate-x-0{--tw-translate-x:0px!important;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))!important}.md\\:overflow-hidden{overflow:hidden}.md\\:rounded-lg{border-radius:.5rem}.md\\:border-none{border-style:none}.md\\:bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.md\\:py-\\[8px\\]{padding-bottom:8px;padding-top:8px}.md\\:text-3xl{font-size:1.875rem;line-height:2.25rem}.md\\:text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.md\\:\\!opacity-100{opacity:1!important}.md\\:transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.md\\:duration-300{transition-duration:.3s}.md\\:hover\\:bg-slate-100:hover{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}}";
+const styleCss = "*,: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-scroll-snap-strictness:proximity;--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;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-scroll-snap-strictness:proximity;--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;}/*! 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}.block{display:block}.flex{display:flex}.grid{display:grid}.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))}:host{all:initial!important;display:block;font-family:inherit!important}@keyframes form-loading-spin{to{transform:rotate(1turn)}}.form-loader-container .img{animation:form-loading-spin 2s linear infinite;height:32px;width:32px}*{-webkit-user-select:none;-moz-user-select:none;user-select:none}#vehicle-wrapper{display:flex;flex-direction:column}@media (min-width:640px){#vehicle-wrapper{align-items:center;display:grid;gap:24px;grid-template-columns:repeat(2,minmax(0,1fr))}}.pointer-events-none{pointer-events:none}.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-0{left:0}.top-0{top:0}.h-full{height:100%}.min-h-\\[150px\\]{min-height:150px}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.opacity-0{opacity:0}.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)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-500{transition-duration:.5s}.-mt-1{margin-top:-.25rem}.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}}.\\!h-auto{height:auto!important}.min-w-full{min-width:100%}.resize{resize:both}.overflow-hidden{overflow:hidden}.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)}.\\!transition-none{transition-property:none!important}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.\\!duration-0{transition-duration:0s!important}.\\!duration-500{transition-duration:.5s!important}.fixed{position:fixed}.bottom-4{bottom:1rem}.left-1\\/2{left:50%}.z-10{z-index:10}.z-\\[9999\\]{z-index:9999}.hidden{display:none}.aspect-video{aspect-ratio:16/9}.size-8{height:2rem;width:2rem}.size-\\[32px\\]{height:32px;width:32px}.size-full{height:100%;width:100%}.h-\\[100dvh\\]{height:100dvh}.h-\\[60px\\]{height:60px}.min-h-full{min-height:100%}.w-\\[100dvw\\]{width:100dvw}.w-\\[100px\\]{width:100px}.-translate-x-1\\/2{--tw-translate-x:-50%;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))}.animate-spin{animation:spin 1s linear infinite}.cursor-pointer{cursor:pointer}.justify-between{justify-content:space-between}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-slate-500{--tw-border-opacity:1;border-color:rgb(100 116 139/var(--tw-border-opacity,1))}.border-slate-600{--tw-border-opacity:1;border-color:rgb(71 85 105/var(--tw-border-opacity,1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-black\\/30{background-color:rgba(0,0,0,.3)}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.object-cover{object-fit:cover}.object-center{object-position:center}.p-1{padding:.25rem}.p-\\[16px\\]{padding:16px}.py-\\[10px\\]{padding-bottom:10px;padding-top:10px}.text-center{text-align:center}.text-\\[18px\\]{font-size:18px}.text-slate-100{--tw-text-opacity:1;color:rgb(241 245 249/var(--tw-text-opacity,1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.shadow,.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.hover\\:border-slate-700:hover{--tw-border-opacity:1;border-color:rgb(51 65 85/var(--tw-border-opacity,1))}.hover\\:bg-slate-300:hover{--tw-bg-opacity:1;background-color:rgb(203 213 225/var(--tw-bg-opacity,1))}.hover\\:text-slate-700:hover{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1))}.disabled\\:bg-white\\/75:disabled{background-color:hsla(0,0%,100%,.75)}@media (min-width:768px){.md\\:relative{position:relative}.md\\:h-auto{height:auto}.md\\:w-\\[600px\\]{width:600px}.md\\:\\!translate-x-0{--tw-translate-x:0px!important;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))!important}.md\\:overflow-hidden{overflow:hidden}.md\\:rounded-lg{border-radius:.5rem}.md\\:border-none{border-style:none}.md\\:bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.md\\:py-\\[8px\\]{padding-bottom:8px;padding-top:8px}.md\\:text-\\[24px\\]{font-size:24px}.md\\:text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.md\\:\\!opacity-100{opacity:1!important}.md\\:transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.md\\:duration-300{transition-duration:.3s}.md\\:hover\\:bg-slate-100:hover{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}}";
 
 let stateObject = stateObject$1.getDefaultStateObject();
-const validation = getLocalLanguage.create$3(Object.assign({}, stateObject$1.getDefaultValidaations(stateObject)));
+const validation = getLocalLanguage.create$3(Object.assign({}, stateObject$1.getDefaultValidations(stateObject)));
 const elementMapper = Object.assign({}, stateObject$1.getDefaultMappers(stateObject));
 const TestDriveForm = class {
     constructor(hostRef) {
@@ -43,7 +45,7 @@ const TestDriveForm = class {
             this.language = getLanguageFromUrl.getLanguageFromUrl();
     }
     async formSubmit(formValues) {
-        await loaderIcon.functionHooks.formSubmittHandler({ context: this, formValues });
+        await loaderIcon.functionHooks.onFormSubmit({ context: this, formValues });
     }
     // #endregion
     // #region Component Logic
@@ -54,7 +56,7 @@ const TestDriveForm = class {
         return await loaderIcon.functionHooks.formGetFormHandler(this);
     }
     async submit() {
-        await loaderIcon.functionHooks.formSubmitHandler(this);
+        await loaderIcon.functionHooks.handleFormSubmit(this);
     }
     async structureChanged(isRendered) {
         await loaderIcon.functionHooks.formStructureRenderedHandler(this, isRendered);
@@ -62,9 +64,9 @@ const TestDriveForm = class {
     // #endregion
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: '2cafdb258607d2b9403e2081e5789fee9e1c9efe' }, index.h("div", { key: '4f27101366ff80d740d65d628204882acf559b99', part: cn.cn((_b = (_a = this.structure) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.theme, this.theme) }, index.h("div", { key: '664bed04c5dc2f850efbd01e89d90236717150e9', part: "form-container", class: "relative min-h-[150px]" }, index.h("div", { key: 'f1b4bc27fcc4412800a0991930d92cc6e0e41776', part: "form-loader-container", class: cn.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 (index.h(index.Host, { key: '9bcf43def4797b17b5322672651f9f3bd8685673' }, index.h("div", { key: 'f25e1549593869a93a9e5a38037c33a6c5fe857f', part: cn.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) }, index.h("div", { key: 'eb345a9aba3f3044843431eeec52581eafe3955b', part: "form-container", class: "relative min-h-[150px]" }, index.h("div", { key: 'bcd0c35133bf72bd2a151b43dc5a63efbc1d0d0a', part: "form-loader-container", class: cn.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,
-            }) }, index.h(loaderIcon.LoaderIcon, { key: 'd2aa4a3388764f536bf856686f4b9efcd4d4b104', part: "form-loader-icon", class: "img" })), index.h("flexible-container", { key: '9d1a4ed4b498228af0beb84acd701e70f916389b', onlyForMounting: true, isOpened: this.structureRendered }, !!this.form && (index.h("form-structure", { key: 'e816449ef971170131a33922c78539d9b75f0912', 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.' }, index.h("slot", { key: '3565b739678e069ef7b113312ab47a2ba487b774' }))))))));
+            }) }, index.h(loaderIcon.LoaderIcon, { key: '7c484c2d2ef1cbb622379f837801caf84c89be92', part: "form-loader-icon", class: "img" })), index.h("flexible-container", { key: '4636f9d944ee5b192c8515fb6911a5e600cc0a96', onlyForMounting: true, isOpened: this.structureRendered }, !!this.form && (index.h("form-structure", { key: 'ccad70c33dfa964511f1350fdaa11b991830d1cc', 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.' }, index.h("slot", { key: '5d4e0ec46dfc3011a37ebba13dc32c4761e47cd7' }))))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{type-DlWZZ9uC.js → type-B8LchmnL.js}

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-var getLocalLanguage = require('./get-local-language-CLEoE4A4.js');
+var getLocalLanguage = require('./get-local-language-CMptyFxH.js');
 
 const distributerSchema = getLocalLanguage.yupTypeMapper([
     'info',

package/dist/cjs/{type-VgtSVhXd.js → type-BqNpIYcE.js}

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-var getLocalLanguage = require('./get-local-language-CLEoE4A4.js');
+var getLocalLanguage = require('./get-local-language-CMptyFxH.js');
 
 const deadStockSchema = getLocalLanguage.yupTypeMapper(['deadStock', 'branch', 'availableQuantity']);
 

package/dist/cjs/{type-CG7yWUpY.js → type-BrzZ5GMr.js}

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-var getLocalLanguage = require('./get-local-language-CLEoE4A4.js');
+var getLocalLanguage = require('./get-local-language-CMptyFxH.js');
 
 const warrantySchema = getLocalLanguage.yupTypeMapper([
     'dealer',