adp-web-components 0.1.59 → 0.1.60

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

@@ -4,7 +4,7 @@
  */
 import { Host, h } from "@stencil/core";
 import cn from "../../global/lib/cn";
-import { getNestedValue } from "../../global/lib/get-nested-value";
+import { getInputLocalization } from "../../features/form-hook/index";
 import { FormInputLabel } from "./components/form-input-label";
 import { FormInputPrefix } from "./components/form-input-prefix";
 import { FormErrorMessage } from "./components/form-error-message";
@@ -14,6 +14,7 @@ const partKeyPrefix = 'form-vin-input-';
 export class FormVinInput {
     constructor() {
         this.inputProps = {};
+        this.localization = {};
         this.scannerIcon = '';
         this.prefixWidth = 0;
     }
@@ -44,22 +45,21 @@ export class FormVinInput {
         this.inputRef.value = value;
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         const { disabled, isRequired, meta, isError, errorMessage } = this.form.getInputState(this.name);
-        const [locale] = this.form.getFormLocale();
+        const [locale, language] = this.form.getFormLocale();
         const part = partKeyPrefix + this.name;
-        const label = getNestedValue(locale, meta === null || meta === void 0 ? void 0 : meta.label) || (meta === null || meta === void 0 ? void 0 : meta.label);
-        const placeholder = getNestedValue(locale, meta === null || meta === void 0 ? void 0 : meta.placeholder);
+        const { label, placeholder, errorTextMessage } = getInputLocalization(this, meta, errorMessage);
         const isDisabled = disabled || this.isLoading || !!this.staticValue || this.isDisabled;
-        const extractorTitle = ((_g = (_e = (_d = (_c = (_b = (_a = this.form) === null || _a === void 0 ? void 0 : _a.context) === null || _b === void 0 ? void 0 : _b.structure) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.localization) === null || _e === void 0 ? void 0 : _e[(_f = this.form.context) === null || _f === void 0 ? void 0 : _f.language]) === null || _g === void 0 ? void 0 : _g['vin-scan']) || 'Scan Your VIN';
-        return (h(Host, { key: 'b876940aceec368ae8f5ed6fecd48fe3aaea8efa' }, h("label", { key: 'd7440e3179b870af03226b75791cf197899dedb5', part: this.name, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: isDisabled }) }, h(FormInputLabel, { key: 'd042e050a25dc1911e2b7b60c74ab4141ab574f3', isRequired: isRequired, label: label }), h("div", { key: '7e72af99b8b0ec5c32cec52833b4d6ae5a453ace', part: `${this.name}-container form-input-container`, class: "form-input-container" }, h(FormInputPrefix, { key: 'd785c4c464e4a830261212f6b416bd293819af71', name: this.name, direction: (_h = locale === null || locale === void 0 ? void 0 : locale.sharedFormLocales) === null || _h === void 0 ? void 0 : _h.direction, prefix: this.inputPrefix }), h("input", Object.assign({ key: '094a5850c842304f9d5fa19ebe9a774390298adc' }, 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 ? { [((_j = locale === null || locale === void 0 ? void 0 : locale.sharedFormLocales) === null || _j === void 0 ? void 0 : _j.direction) === 'rtl' ? 'paddingRight' : 'paddingLeft']: `${this.prefixWidth}px` } : {})), class: cn('form-input-style !uppercase', part, {
+        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, {
                 'form-input-error-style': isError,
-            }) })), !!this.scannerIcon && (this.useOcr || this.readSticker) && (h("button", { key: '4ff9061dd99c7ebaa3df8450f4e6d30fe3bd0604', 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: 'c50d804383bb75ca685f6801439539fc61d162c0', class: "size-[90%] text-inherit" }), this.scannerIcon === 'camera' && h(CameraIcon, { key: 'e45ca83541f9b20a56d4c4b7aa31761a1ceca8c4', class: "size-[90%] text-inherit" })))), h(FormErrorMessage, { key: 'e1accc6ac980d369732cd1a393787d6f1598ffe7', name: this.name, isError: isError, errorMessage: locale[errorMessage] || errorMessage })), (this.useOcr || this.readSticker) && (h("div", { key: 'd595097112bedaf9d2ca2fa9a708c4eb0bdec8d4', class: "absolute" }, h("vin-extractor", { key: '21746d607b2868ecfcc4189d5052f6e5939dc113', verbose: true, manualCapture: true, useOcr: this.useOcr, title: extractorTitle, skipValidation: false, readSticker: this.readSticker, onExtract: newVin => {
+            }) })), !!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 => {
                 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);
                 (_b = this === null || this === void 0 ? void 0 : this.el.getElementsByTagName('vin-extractor')[0]) === null || _b === void 0 ? void 0 : _b.close();
-            }, ocrEndpoint: (_o = (_m = (_l = (_k = this.form) === null || _k === void 0 ? void 0 : _k.context) === null || _l === void 0 ? void 0 : _l.structure) === null || _m === void 0 ? void 0 : _m.data) === null || _o === void 0 ? void 0 : _o.ocrEndpoint })))));
+            } })))));
     }
     static get is() { return "form-vin-input"; }
     static get originalStyleUrls() {
@@ -251,6 +251,25 @@ export class FormVinInput {
                 "reflect": false,
                 "defaultValue": "{}"
             },
+            "ocrEndpoint": {
+                "type": "string",
+                "attribute": "ocr-endpoint",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "defaultValue": {
                 "type": "string",
                 "attribute": "default-value",
@@ -270,6 +289,31 @@ export class FormVinInput {
                 "setter": false,
                 "reflect": false
             },
+            "localization": {
+                "type": "unknown",
+                "attribute": "localization",
+                "mutable": false,
+                "complexType": {
+                    "original": "FormInputLocalization<{ scan: string }>",
+                    "resolved": "{ [lang: string]: { label?: string; placeholder?: string; require?: string; format?: string; } & { scan: string; }; }",
+                    "references": {
+                        "FormInputLocalization": {
+                            "location": "import",
+                            "path": "~features/form-hook",
+                            "id": "src/features/form-hook/index.ts::FormInputLocalization"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
             "useOcr": {
                 "type": "boolean",
                 "attribute": "use-ocr",

package/dist/collection/components/forms/defaults/mappers.js

@@ -8,58 +8,73 @@ import { VehicleImageViewer } from "../../form-elements/VehicleImageViewer";
 import { CalendarDaysIcon } from "../../../global/assets/calendar-days-icon";
 import { format, isBefore, isEqual } from "date-fns";
 import { decodeTimeOffset } from "../../../global/lib/decode-time-offset";
-export const getDefaultMappers = (stateObject) => ({
-    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({}, 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 }) => {
         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 }));
-    },
-    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;
+    }, vehicle: ({ language, props }) => {
+        const fetcher = async ({ signal, context }) => {
+            var _a, _b;
+            const params = new URLSearchParams(window.location.search);
+            let paramValue = (_a = (params.get(props === null || props === void 0 ? void 0 : props.vehicleIdQueryParam) || '')) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+            const vehicleEndpoint = props.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) {
+            let options;
+            let defaultIndex = -1;
+            if (props === null || props === void 0 ? void 0 : props.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 }),
-                }));
+                options = res.data;
+                options = options.map((vehicle, idx) => {
+                    var _a, _b, _c;
+                    if (!props.defaultValue && paramValue && (((_a = vehicle === null || vehicle === void 0 ? void 0 : vehicle.GradeName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === paramValue || ((_b = `${vehicle.id}`) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === paramValue))
+                        defaultIndex = idx;
+                    return {
+                        label: vehicle.attributes.GradeName,
+                        value: (props === null || props === void 0 ? void 0 : props.useNamedValue) ? `${(_c = vehicle === null || vehicle === void 0 ? void 0 : vehicle.attributes) === null || _c === void 0 ? void 0 : _c.GradeName}` : `${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 }),
-                }));
+                options = await response.json();
+                options = options.map((vehicle, idx) => {
+                    var _a, _b;
+                    if (!props.defaultValue && paramValue && (((_a = vehicle === null || vehicle === void 0 ? void 0 : vehicle.Title) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === paramValue || ((_b = `${vehicle.ID}`) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === paramValue))
+                        defaultIndex = idx;
+                    return {
+                        label: vehicle.Title,
+                        value: (props === null || props === void 0 ? void 0 : props.useNamedValue) ? `${vehicle.Title}` : `${vehicle.ID}`,
+                        meta: Object.assign(Object.assign({}, vehicle), { image: vehicle.Image }),
+                    };
+                });
+            }
+            if (!(props === null || props === void 0 ? void 0 : props.defaultValue)) {
+                if (defaultIndex > -1)
+                    context.defaultValue = (_b = options[defaultIndex]) === null || _b === void 0 ? void 0 : _b.value;
+                else
+                    context.defaultValue = '';
             }
+            else
+                context.defaultValue = props === null || props === void 0 ? void 0 : props.defaultValue;
+            return options;
         };
-        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 h("form-select", Object.assign({}, props, { defaultValue: defaultValue, searchable: true, fetcher: fetcher, language: language }));
-    },
-    companyBranchId: ({ form, language, props }) => {
+        return h("form-select", Object.assign({}, 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;
+            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 h("form-select", Object.assign({}, props, { clearable: true, searchable: true, fetcher: fetcher, language: language }));
+    }, cityId: ({ language, props }) => {
         const fetcher = async ({ signal }) => {
-            var _a;
-            const dealerEndpoint = (_a = form.context.structure) === null || _a === void 0 ? void 0 : _a.data.dealerApi;
+            const dealerEndpoint = props === null || props === void 0 ? void 0 : props.cityApi;
             const response = await fetch(dealerEndpoint, { signal, headers: { 'Accept-Language': language } });
             const options = (await response.json()).map(dealer => ({
                 label: dealer.Name,
@@ -69,9 +84,7 @@ export const getDefaultMappers = (stateObject) => ({
             return options;
         };
         return h("form-select", Object.assign({}, 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 }) => {
+    }, date: ({ props }) => h("form-picker-input", Object.assign({ type: "date" }, props, { icon: 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) {
@@ -88,5 +101,4 @@ export const getDefaultMappers = (stateObject) => ({
             return options;
         };
         return h("form-select", Object.assign({}, props, { clearable: true, fetcher: fetcher, language: language }));
-    },
-});
+    } }, extraMappers));

package/dist/collection/components/forms/defaults/style.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}.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))}}
+*,: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}.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}.\!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}.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))}}

package/dist/collection/components/forms/defaults/validation.js

@@ -2,84 +2,82 @@
  * Built by ShiftSoftware
  * Copyright (c)
  */
-import { string } from "yup";
+import { object, string } from "yup";
 import validateVin from "../../../global/lib/validate-vin";
 export const label = (name) => `${name}-label`;
 export const format = (name) => `${name}-format`;
 export const require = (name) => `${name}-require`;
 export const placeholder = (name) => `${name}-placeholder`;
+export const meta = (name) => ({ label: label(name), placeholder: placeholder(name) });
 export const condition = (name) => `$${name}Required`;
-export const y = { label, format, require, condition, placeholder };
-export const getDefaultValidations = (stateObject) => ({
-    name: string()
-        .meta({ label: label('name'), placeholder: placeholder('name') })
-        .when(condition('name'), {
-        is: true,
-        otherwise: schema => schema.optional(),
-        then: schema => schema.required(require('name')).min(3, format('name')),
-    }),
-    lastName: string()
-        .meta({ label: label('lastName'), placeholder: placeholder('lastName') })
-        .when(condition('lastName'), {
-        is: true,
-        otherwise: schema => schema.optional(),
-        then: schema => schema.required(require('lastName')).min(3, format('lastName')),
-    }),
-    message: string()
-        .meta({ label: label('message'), placeholder: placeholder('message') })
-        .when(condition('message'), {
-        is: true,
-        otherwise: schema => schema.optional(),
-        then: schema => schema.required(require('message')).min(10, format('message')),
-    }),
-    email: string()
-        .meta({ label: label('email'), placeholder: placeholder('email') })
-        .when(condition('email'), {
-        is: true,
-        otherwise: schema => schema.optional(),
-        then: schema => schema.required(require('email')),
-    })
-        .email(format('email')),
-    vin: string()
-        .meta({ label: label('vin'), placeholder: placeholder('vin') })
-        .when(condition('vin'), {
-        is: true,
-        otherwise: schema => schema.optional(),
-        then: schema => schema.required(require('vin')).test(format('vin'), format('vin'), a => validateVin(a === null || a === void 0 ? void 0 : a.toUpperCase())),
-    }),
-    phone: string()
-        .meta({ label: label('phone'), placeholder: placeholder('phone') })
-        .when(condition('phone'), {
-        is: true,
-        otherwise: schema => schema.optional(),
-        then: schema => schema.required(require('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: string()
-        .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: string()
-        .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: string()
-        .meta({ label: label('date'), placeholder: placeholder('date') })
-        .when(condition('date'), {
-        is: true,
-        otherwise: schema => schema.optional(),
-        then: schema => schema.required(require('date')),
-    }),
-    time: string()
-        .meta({ label: label('time'), placeholder: placeholder('time') })
-        .when(condition('time'), {
-        is: true,
-        otherwise: schema => schema.optional(),
-        then: schema => schema.required(require('time')),
-    }),
-});
+export const y = { label, format, require, condition, placeholder, meta };
+export const getFormValidations = (stateObject, extraFields = {}) => {
+    return object(Object.assign({ name: string()
+            .meta(meta('name'))
+            .when(condition('name'), {
+            is: true,
+            otherwise: schema => schema.optional(),
+            then: schema => schema.required(require('name')).min(3, format('name')),
+        }), lastName: string()
+            .meta(meta('lastName'))
+            .when(condition('lastName'), {
+            is: true,
+            otherwise: schema => schema.optional(),
+            then: schema => schema.required(require('lastName')).min(3, format('lastName')),
+        }), message: string()
+            .meta(meta('message'))
+            .when(condition('message'), {
+            is: true,
+            otherwise: schema => schema.optional(),
+            then: schema => schema.required(require('message')).min(10, format('message')),
+        }), email: string()
+            .meta(meta('email'))
+            .when(condition('email'), {
+            is: true,
+            otherwise: schema => schema.optional(),
+            then: schema => schema.required(require('email')),
+        })
+            .email(format('email')), vin: string()
+            .meta(meta('vin'))
+            .when(condition('vin'), {
+            is: true,
+            otherwise: schema => schema.optional(),
+            then: schema => schema.required(require('vin')).test(format('vin'), format('vin'), a => validateVin(a === null || a === void 0 ? void 0 : a.toUpperCase())),
+        }), phone: string()
+            .meta(meta('phone'))
+            .when(condition('phone'), {
+            is: true,
+            otherwise: schema => schema.optional(),
+            then: schema => schema.required(require('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: string()
+            .meta(meta('vehicle'))
+            .when(y.condition('vehicle'), {
+            is: true,
+            otherwise: schema => schema.optional(),
+            then: schema => schema.required(y.require('vehicle')),
+        }), companyBranchId: string()
+            .meta(meta('companyBranchId'))
+            .when(y.condition('companyBranchId'), {
+            is: true,
+            otherwise: schema => schema.optional(),
+            then: schema => schema.required(y.require('companyBranchId')),
+        }), cityId: string()
+            .meta(meta('cityId'))
+            .when(y.condition('cityId'), {
+            is: true,
+            otherwise: schema => schema.optional(),
+            then: schema => schema.required(y.require('cityId')),
+        }), date: string()
+            .meta(meta('date'))
+            .when(condition('date'), {
+            is: true,
+            otherwise: schema => schema.optional(),
+            then: schema => schema.required(require('date')),
+        }), time: string()
+            .meta(meta('time'))
+            .when(condition('time'), {
+            is: true,
+            otherwise: schema => schema.optional(),
+            then: schema => schema.required(require('time')),
+        }) }, extraFields));
+};

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

@@ -8,29 +8,29 @@ import { sharedFormLocalesSchema } from "../../features/multi-lingual/index";
 import getLanguageFromUrl from "../../global/lib/get-language-from-url";
 import cn from "../../global/lib/cn";
 import { LoaderIcon } from "../../global/assets/loader-icon";
-import { object, string } from "yup";
-import { getDefaultValidations, y } from "./defaults/validation";
-import { getDefaultMappers } from "./defaults/mappers";
+import { string } from "yup";
+import { getFormValidations, y } from "./defaults/validation";
+import { getFormMappers } from "./defaults/mappers";
 import { getDefaultStateObject } from "./defaults/state-object";
 let stateObject = getDefaultStateObject();
-const validation = object(Object.assign(Object.assign({}, getDefaultValidations(stateObject)), { companyBranchId: string()
-        .meta({ label: y.label('companyBranchId'), placeholder: y.placeholder('companyBranchId') })
-        .when(y.condition('companyBranchId'), {
+const validation = getFormValidations(stateObject, {
+    generalTicketType: string()
+        .meta(y.meta('generalTicketType'))
+        .when(y.condition('generalTicketType'), {
         is: true,
         otherwise: schema => schema.optional(),
-        then: schema => schema.required(y.require('companyBranchId')),
-    }) }));
-const elementMapper = Object.assign(Object.assign({}, getDefaultMappers(stateObject)), { companyBranchId: ({ form, language, props }) => {
-        const fetcher = async ({ signal }) => {
-            var _a;
-            const branchEndpoint = (_a = form.context.structure) === null || _a === void 0 ? void 0 : _a.data.branchApi;
-            const response = await fetch(branchEndpoint, { signal, headers: { 'Accept-Language': language } });
-            const branches = (await response.json());
-            const parsedOptions = branches.map(branch => ({ label: branch === null || branch === void 0 ? void 0 : branch.Name, value: branch === null || branch === void 0 ? void 0 : branch.ID }));
-            return parsedOptions;
+        then: schema => schema.required(y.require('generalTicketType')),
+    }),
+});
+const elementMapper = getFormMappers(stateObject, {
+    generalTicketType: ({ language, props }) => {
+        const fetcher = async ({}) => {
+            const options = Array.isArray(props === null || props === void 0 ? void 0 : props.options) ? props === null || props === void 0 ? void 0 : props.options : [];
+            return options.map(option => ({ value: (option === null || option === void 0 ? void 0 : option.value) || '', label: (option === null || option === void 0 ? void 0 : option[language]) || '' }));
         };
-        return h("form-select", Object.assign({}, props, { searchable: true, fetcher: fetcher, language: language }));
-    } });
+        return h("form-select", Object.assign({}, props, { clearable: true, fetcher: fetcher, language: language }));
+    },
+});
 export class GeneralInquiryForm {
     constructor() {
         this.locale = { sharedFormLocales: sharedFormLocalesSchema.getDefault() };
@@ -75,9 +75,9 @@ export class GeneralInquiryForm {
     // #endregion
     render() {
         var _a, _b;
-        return (h(Host, { key: 'e260418b046bb7cd849d7479c14f93638e2c6794' }, h("div", { key: '84322c6e727e5b09cce5eebf2f4bacdb7f851060', 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: '0142ce2fc4aa5ab66449170a0acb4f2c7be51f84', part: "form-container", class: "relative min-h-[150px]" }, h("div", { key: 'c160ed3cfe2a1e928ac69806056ac49af21872d7', 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: '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', {
                 'opacity-0': this.structureRendered,
-            }) }, h(LoaderIcon, { key: 'c91118bf475a9aa69282eb41594c81b21551295d', part: "form-loader-icon", class: "img" })), h("flexible-container", { key: '240cdecfa8a01f326c5a11b901f5cac6c7579bcc', onlyForMounting: true, isOpened: this.structureRendered }, !!this.form && (h("form-structure", { key: '162354ae01ab8a16a95cca09e2c06020829e0b06', 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: 'a866161af607da831e217c27f76f4ef10cf83cb6' }))))))));
+            }) }, 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' }))))))));
     }
     static get is() { return "general-inquiry-form"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,13 +8,12 @@ import { sharedFormLocalesSchema } from "../../features/multi-lingual/index";
 import getLanguageFromUrl from "../../global/lib/get-language-from-url";
 import cn from "../../global/lib/cn";
 import { LoaderIcon } from "../../global/assets/loader-icon";
-import { object } from "yup";
-import { getDefaultValidations } from "./defaults/validation";
-import { getDefaultMappers } from "./defaults/mappers";
+import { getFormValidations } from "./defaults/validation";
+import { getFormMappers } from "./defaults/mappers";
 import { getDefaultStateObject } from "./defaults/state-object";
 let stateObject = getDefaultStateObject();
-const validation = object(Object.assign({}, getDefaultValidations(stateObject)));
-const elementMapper = Object.assign(Object.assign({}, getDefaultMappers(stateObject)), { 'choose': ({ locale }) => h("h1", { part: "section-title" }, locale.choose), 'contact information': ({ locale }) => h("h1", { part: "section-title" }, locale['contact information']) });
+const validation = getFormValidations(stateObject);
+const elementMapper = getFormMappers(stateObject);
 export class ServiceBookingForm {
     constructor() {
         this.locale = { sharedFormLocales: sharedFormLocalesSchema.getDefault() };
@@ -59,9 +58,9 @@ export class ServiceBookingForm {
     // #endregion
     render() {
         var _a, _b;
-        return (h(Host, { key: 'cafab2835c5baf84e0d4bcf06512cb967f56c447' }, h("div", { key: '37e63a7b0d95954fac2f3f1e6900c42a40bfdc8b', 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: 'd4aa01f2c642e5c9ce7510ca6ee528eb38845191', part: "form-container", class: "relative min-h-[150px]" }, h("div", { key: '8626f94bac1aa27958e76e86af84da372557563b', 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: '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', {
                 'opacity-0': this.structureRendered,
-            }) }, h(LoaderIcon, { key: '32f595c6fcf48c7f2a86d2aa29c9a3b89f8762e3', part: "form-loader-icon", class: "img" })), h("flexible-container", { key: '2643bcc86284950ebbc4a0cb7584818becacd968', onlyForMounting: true, isOpened: this.structureRendered }, !!this.form && (h("form-structure", { key: '38806f84dc6b5abf86ee7451b40b23becc446174', 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: '9a3bcf859ffd90d836d95666c6643d7704f1d0b3' }))))))));
+            }) }, 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' }))))))));
     }
     static get is() { return "service-booking-form"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,13 +8,12 @@ import { sharedFormLocalesSchema } from "../../features/multi-lingual/index";
 import getLanguageFromUrl from "../../global/lib/get-language-from-url";
 import cn from "../../global/lib/cn";
 import { LoaderIcon } from "../../global/assets/loader-icon";
-import { object } from "yup";
-import { getDefaultValidations } from "./defaults/validation";
-import { getDefaultMappers } from "./defaults/mappers";
+import { getFormValidations } from "./defaults/validation";
+import { getFormMappers } from "./defaults/mappers";
 import { getDefaultStateObject } from "./defaults/state-object";
 let stateObject = getDefaultStateObject();
-const validation = object(Object.assign({}, getDefaultValidations(stateObject)));
-const elementMapper = Object.assign({}, getDefaultMappers(stateObject));
+const validation = getFormValidations(stateObject);
+const elementMapper = getFormMappers(stateObject);
 export class SSCLookupForm {
     constructor() {
         this.locale = { sharedFormLocales: sharedFormLocalesSchema.getDefault() };
@@ -70,9 +69,9 @@ export class SSCLookupForm {
     // #endregion
     render() {
         var _a, _b;
-        return (h(Host, { key: 'fc59da682ab64d4abc77d922dfb1747574498e2a' }, h("div", { key: 'bf806216b58c9c5ab6c7b88d200bbe56a772d9d9', 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: '5d0cd5af7b412c3eac4e7f39b1475bb9f64c00e9', part: "form-container", class: "relative min-h-[150px]" }, h("div", { key: '0a36d00062397ba875bda14344484739fb6213d9', 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: '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', {
                 'opacity-0': this.structureRendered,
-            }) }, h(LoaderIcon, { key: 'd53bedd6c4faff10d63eea3f3a7ddce525fac72a', part: "form-loader-icon", class: "img" })), h("flexible-container", { key: '64ce678d61fdfa7b29372048cad3e276a4f6cb89', onlyForMounting: true, isOpened: this.structureRendered }, !!this.form && (h("form-structure", { key: 'f7c8fdff2f84404b843d924b5dd0bafedfc3e7c8', 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: 'f8162a8562790232384f75d2e5532636527af984' }))))))));
+            }) }, 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' }))))))));
     }
     static get is() { return "ssc-lookup-form"; }
     static get encapsulation() { return "shadow"; }