adp-web-components 0.1.4 → 0.1.6

package/dist/collection/components/part-lookup/tmc-lookup.js

@@ -0,0 +1,260 @@
+/*!
+ * Built by ShiftSoftware
+ * Copyright (c)
+ */
+import { Host, h } from "@stencil/core";
+import distributerSchema from "../../locales/partLookup/distributor/type";
+import { getLocaleLanguage, getSharedLocal, sharedLocalesSchema } from "../../features/multi-lingual/index";
+import { FormHook } from "../../features/form-hook/index";
+import { number, object, string } from "yup";
+import getLanguageFromUrl from "../../global/lib/get-language-from-url";
+import { CloudAlertIcon } from "../../global/assets/cloud-alert-icon";
+import { InfoIcon } from "../../global/assets/info-icon";
+import { LaptopMinimalCheckIcon } from "../../global/assets/laptop-minimal-check";
+import { OctagonXIcon } from "../../global/assets/octagon-x";
+const tmcOrderTypesFetcher = async ({}) => {
+    return [
+        {
+            value: 'V',
+            label: 'V',
+        },
+        {
+            value: 'A',
+            label: 'A ',
+        },
+    ];
+};
+const tmcLookupValidation = object({
+    orderType: string()
+        .meta({ label: 'Order Type', placeholder: 'Order Type' })
+        .required('This field is required.'),
+    quantity: number()
+        .meta({ label: 'quantity', placeholder: 'quantity' })
+        .required('This field is required.')
+        .typeError('This field is required.')
+        .min(1, 'This field is required.'),
+    partNumber: string()
+        .meta({ label: 'Part Number', placeholder: 'Part Number' })
+        .required('This field is required.'),
+});
+const tmcResponses = ['Available', 'NotAvailable', 'PartiallyAvailable', 'RequestFailed'];
+export class TmcLookup {
+    constructor() {
+        this.locale = Object.assign({ sharedLocales: sharedLocalesSchema.getDefault() }, distributerSchema.getDefault());
+        // #endregion
+        // #region Form Hook logic
+        this.isLoading = false;
+        this.formSubmit = async (payload) => {
+            try {
+                if (this.isDev) {
+                    await new Promise(r => setTimeout(r, 2000));
+                    this.tmcResponse = tmcResponses[Math.floor(Math.random() * tmcResponses.length)];
+                    this.form.reset();
+                    return;
+                }
+                let tmcEndpoint = typeof this.tmcLookupEndpoint === 'string' ? JSON.parse(this.tmcLookupEndpoint) : this.tmcLookupEndpoint;
+                const defaultHeaders = {
+                    'Content-Type': 'application/json',
+                    'Accept': 'application/json',
+                };
+                const config = {
+                    method: (tmcEndpoint === null || tmcEndpoint === void 0 ? void 0 : tmcEndpoint.method) || 'POST',
+                    headers: Object.assign(Object.assign({}, defaultHeaders), ((tmcEndpoint === null || tmcEndpoint === void 0 ? void 0 : tmcEndpoint.headers) || {})),
+                    body: JSON.stringify(Object.assign(Object.assign({}, payload), ((tmcEndpoint === null || tmcEndpoint === void 0 ? void 0 : tmcEndpoint.body) || {}))),
+                };
+                const response = await fetch(tmcEndpoint.url, config);
+                if (!response.ok) {
+                    throw new Error(`Request failed with status ${response.status}`);
+                }
+                const responseType = (await response.json()); // 'Available' | 'NotAvailable' | 'PartiallyAvailable' | 'RequestFailed'
+                this.form.reset();
+                this.tmcResponse = responseType;
+            }
+            catch (error) {
+                console.error('❌ TMC Lookup request failed:', error);
+                this.tmcResponse = 'RequestFailed';
+            }
+        };
+        this.standAlone = true;
+        this.form = new FormHook(this, tmcLookupValidation);
+    }
+    async componentWillLoad() {
+        if (!this.language)
+            this.language = getLanguageFromUrl();
+        await Promise.all([this.changeLanguage(this.language)]);
+    }
+    async changeLanguage(newLanguage) {
+        const [sharedLocales, locale] = await Promise.all([getSharedLocal(newLanguage), getLocaleLanguage(newLanguage, 'partLookup.distributor', distributerSchema)]);
+        this.locale = Object.assign({ sharedLocales }, locale);
+    }
+    // #endregion
+    render() {
+        var _a, _b;
+        const { formController } = this.form;
+        return (h(Host, { key: '97d190057e06498182f8f4bf791bf3b751aa573b' }, h("flexible-container", { key: 'fa9d8af768c94038586eff2f4e73992644b925d9',
+            // @ts-ignore
+            isOpened: (!!((_a = this === null || this === void 0 ? void 0 : this.partLookup) === null || _a === void 0 ? void 0 : _a.showTMCPartLookup) && !this.closeTmcLookup) || this.standAlone }, h("div", { key: '9c64a84e70680e1c9e81b97e8294961d3b7f529d', class: "w-full max-w-[96vw] mx-auto pt-[32px]" }, h("div", { key: 'f798116cfd8203c8c80b4e96a38b9b1c612f40dd', class: "bg-[#f6f6f6] rounded-md p-[16px]" }, h("div", { key: 'f72368d687a666d3614cea4a1395106aa437a4d8', class: "flex items-center mb-[12px] justify-center px-[16px] font-bold text-[18px]" }, this.locale.TMCLookup), h("form", Object.assign({ key: '8bb6c019855bf12ace54b27542e14913f587e015', class: "relative tmc-form flex flex-col items-center gap-[32px] pt-[8px] pb-[16px]", dir: this.locale.sharedLocales.direction }, formController), h("div", { key: '875f42b761edbdfc4f7d7b03f9d33df15b04e30f', class: "flex gap-2" }, h("form-input", { form: this.form, name: "partNumber", isLoading: this.isLoading, key: this.locale.sharedLocales.lang, staticValue: ((_b = this.partLookup) === null || _b === void 0 ? void 0 : _b.partNumber) || undefined }), h("form-input", { inputProps: { type: 'number', min: 1 }, name: "quantity", isLoading: this.isLoading, key: this.locale.sharedLocales.lang, form: this.form }), h("form-select", { clearable: true, forceOpenUpwards: true, form: this.form, name: "orderType", isLoading: this.isLoading, fetcher: tmcOrderTypesFetcher, key: this.locale.sharedLocales.lang, language: this.locale.sharedLocales.language })), h("form-submit", { key: this.locale.sharedLocales.lang, isLoading: this.isLoading, form: this.form })), h("flexible-container", { key: 'f8e36db5b992405f5d3d3fa6d41cd1d7d299cded', isOpened: !!this.tmcResponse && !this.isLoading }, h("div", { key: 'ddf373363044a9809b76bb5993af4f243f67e520', class: "flex flex-col items-center pt-[22px]" }, this.tmcResponse === 'Available' && h(LaptopMinimalCheckIcon, { key: '80e0e4279553c1f00839e4467571f57073bea0bc', class: "size-[100px] fill-transparent stroke-green-600" }), this.tmcResponse === 'PartiallyAvailable' && h(InfoIcon, { key: '5009d6f5aa85c9e464209e60b0649276c816f7ef', class: "size-[100px] fill-transparent stroke-blue-600" }), this.tmcResponse === 'NotAvailable' && h(OctagonXIcon, { key: '1431ad523a471ed8e4c0512c9d1477ef2d9d2110', class: "size-[100px] fill-transparent stroke-yellow-600" }), !['Available', 'NotAvailable', 'PartiallyAvailable'].includes(this.tmcResponse || '') && h(CloudAlertIcon, { key: '9697498146eb458bd330cc0f3bde561d3aa5f90c', class: "size-[100px] fill-transparent stroke-red-600" }), h("div", { key: 'a5455cacb14e29fab0f0c89766ba494238d5c4c4', class: "text-center text-[20px] font-semibold py-[12px]" }, this.locale[this.tmcResponse] || this.tmcResponse))))))));
+    }
+    static get is() { return "tmc-lookup"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tmc-lookup.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tmc-lookup.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "language": {
+                "type": "string",
+                "attribute": "language",
+                "mutable": true,
+                "complexType": {
+                    "original": "LanguageKeys",
+                    "resolved": "\"ar\" | \"en\" | \"ku\" | \"ru\"",
+                    "references": {
+                        "LanguageKeys": {
+                            "location": "import",
+                            "path": "~features/multi-lingual",
+                            "id": "src/features/multi-lingual/index.ts::LanguageKeys"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "isDev": {
+                "type": "boolean",
+                "attribute": "is-dev",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "standAlone": {
+                "type": "boolean",
+                "attribute": "stand-alone",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "partLookup": {
+                "type": "unknown",
+                "attribute": "part-lookup",
+                "mutable": false,
+                "complexType": {
+                    "original": "PartLookupDTO",
+                    "resolved": "{ partNumber: string; partDescription: string; localDescription: string; productGroup: string; pnc: string; binType: string; distributorPurchasePrice?: number; length?: number; width?: number; height?: number; netWeight?: number; grossWeight?: number; cubicMeasure?: number; hsCode: string; origin: string; supersededTo: string[]; stockParts: StockPartDTO[]; prices: PartPriceDTO[]; hsCodes: HSCodeDTO[]; deadStock: DeadStockDTO[]; logId?: string; }",
+                    "references": {
+                        "PartLookupDTO": {
+                            "location": "import",
+                            "path": "~types/generated/part/part-lookup-dto",
+                            "id": "src/global/types/generated/part/part-lookup-dto.ts::PartLookupDTO"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "closeTmcLookup": {
+                "type": "boolean",
+                "attribute": "close-tmc-lookup",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "tmcLookupEndpoint": {
+                "type": "string",
+                "attribute": "tmc-lookup-endpoint",
+                "mutable": false,
+                "complexType": {
+                    "original": "EndPoint | string",
+                    "resolved": "string | { url: string; body?: object; headers?: object; method?: string; }",
+                    "references": {
+                        "EndPoint": {
+                            "location": "import",
+                            "path": "~types/components",
+                            "id": "src/global/types/components.ts::EndPoint"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "locale": {},
+            "isLoading": {},
+            "tmcResponse": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "language",
+                "methodName": "changeLanguage"
+            }];
+    }
+}

package/dist/collection/components/vehicle-lookup/vehicle-accessories.js

@@ -76,9 +76,9 @@ export class VehicleAccessories {
             image: () => (h("div", { class: "size-[100px] flex mx-auto items-center justify-center" }, h("button", { onClick: ({ target }) => openImageViewer.bind(this)(target, accessory === null || accessory === void 0 ? void 0 : accessory.image), class: "shrink-0 relative ring-0 outline-none w-fit mx-auto [&_img]:hover:shadow-lg [&_div]:hover:!opacity-100 cursor-pointer" }, h("div", { class: "absolute flex-col justify-center gap-[4px] size-full flex items-center pointer-events-none hover:opacity-100 rounded-lg opacity-0 bg-black/40 transition-all duration-300" }, h("img", { src: Eye }), h("span", { class: "text-white" }, texts.expand)), h("img", { class: "w-auto h-auto max-w-[100px] max-h-[100px] cursor-pointer shadow-sm rounded-lg transition-all duration-300", src: accessory === null || accessory === void 0 ? void 0 : accessory.image })))),
         }));
         const templateRow = {
-            image: () => h("div", { key: '24b7817700d2c2383847179255115bc4c3d0c17c', class: "size-[100px] flex mx-auto items-center justify-center" }, "\u00A0"),
+            image: () => h("div", { key: 'b2b967f85ccace2ae6ffe16897c0d9e87364a335', class: "size-[100px] flex mx-auto items-center justify-center" }, "\u00A0"),
         };
-        return (h(Host, { key: '70998e2d8aa9b7c4a5738a94b0a03c6d3252ddaa' }, h(ImageViewer, { key: '2fdce31ae24335618c979840165d39fd5bd07ab0', closeImageViewer: () => closeImageViewer.bind(this)(), expandedImage: this.expandedImage }), h(VehicleInfoLayout, { key: 'c7489e9a0073bb5e14bb8c49f80a473244ee2835', isError: this.isError, isLoading: this.isLoading, coreOnly: this.coreOnly, header: (_c = this.vehicleLookup) === null || _c === void 0 ? void 0 : _c.vin, direction: this.locale.sharedLocales.direction, errorMessage: this.locale.sharedLocales.errors[this.errorMessage] || this.locale.sharedLocales.errors.wildCard }, h("div", { key: '933871d777f57e9609c27930643e06bf2f35d1d3', class: "overflow-x-auto" }, h("information-table", { key: 'd06cd47b5987dc37b168c761be292b3fbee0a761', templateRow: templateRow, rows: rows, headers: tableHeaders, isLoading: this.isLoading })))));
+        return (h(Host, { key: 'a44a0914bf1946f887f94cd10497c4a4e012c800' }, h(ImageViewer, { key: '971f153c9abb65aaa80a378e1ee86957ebfd1630', closeImageViewer: () => closeImageViewer.bind(this)(), expandedImage: this.expandedImage }), h(VehicleInfoLayout, { key: 'bdb7e2afcafa46bf4a0aff1014a6a2e5dca3947a', isError: this.isError, isLoading: this.isLoading, coreOnly: this.coreOnly, header: (_c = this.vehicleLookup) === null || _c === void 0 ? void 0 : _c.vin, direction: this.locale.sharedLocales.direction, errorMessage: this.locale.sharedLocales.errors[this.errorMessage] || this.locale.sharedLocales.errors.wildCard }, h("div", { key: '40e3ed3669fb7c698bc1ffb585bea3a8b3c616ca', class: "overflow-x-auto" }, h("information-table", { key: '7e326c2cf3688c57d16b5865fdc11b2040953289', templateRow: templateRow, rows: rows, headers: tableHeaders, isLoading: this.isLoading })))));
     }
     static get is() { return "vehicle-accessories"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/vehicle-lookup/vehicle-claimable-items.js

@@ -332,13 +332,13 @@ export class VehicleClaimableItems {
         const hideTabs = this.isLoading || this.isError || !this.tabs.length || !serviceItems.length;
         const tabs = this.tabs.map(group => group.name);
         const hasInactiveItems = serviceItems.filter(x => x.status === 'activationRequired').length > 0;
-        return (h(Host, { key: '9cfab619c32d735efe01ee17f0aab747994e4863' }, h("vehicle-item-claim-form", { key: '9afb0bcbdb6dbc2f16a5d58b602848d6e88b2ef5', class: "vehicle-item-claim-form", maximumDocumentFileSizeInMb: this.maximumDocumentFileSizeInMb, uploadMultipleDocuments: this.uploadMultipleDocumentsAtTheForm, locale: Object.assign({ sharedLocales: this.locale.sharedLocales }, this.locale.claimForm) }), h(ClaimableItemPopover, { key: '7200d8e50e44c45dfd556719bc0304b391e2be2a', locale: this.locale, claim: this.claim.bind(this), item: this.selectedClaimItem, showPopover: this.showClaimableItemPopover, targetLocation: this.popoverTargetLocation }), h(VehicleInfoLayout, { key: 'dfa6f79e5977a4cc0316c2b95638df81772b0613', isError: this.isError, coreOnly: this.coreOnly, header: (_a = this.vehicleLookup) === null || _a === void 0 ? void 0 : _a.vin, direction: this.locale.sharedLocales.direction, isLoading: this.isLoading || this.tabAnimationLoading, errorMessage: this.locale.sharedLocales.errors[this.errorMessage] || this.locale.sharedLocales.errors.wildCard }, h("div", { key: 'de3ad0ddd540b49370bb373c6befb98fefcd773d', dir: "ltr", class: cn('relative flex items-center h-[320px] transition-all duration-300', { loading: this.isLoading || this.tabAnimationLoading }) }, h("div", { key: '3f58d639bda7ed0addd6e0a8909416f01061a9e5', dir: this.locale.sharedLocales.direction, class: "absolute top-0 z-10 w-full pt-[16px]" }, h("div", { key: '7238973ea802c3076b7abcbad199a250b82699f7', class: cn('duration-300', { 'translate-y-[-50%] opacity-0': hideTabs }) }, h("shift-tabs", { key: '9bdb263249b4c4ea99d8750afffe04dad44e5df1', activeTabLabel: this.activeTab, changeActiveTab: this.onActiveTabChange, tabs: tabs }))), h("div", { key: '0248756b62c55cb675c91a40a2937df0e47db7c0', class: cn('absolute w-[calc(100%-60px)] left-[30px] progress-container-style opacity-0', { 'opacity-100': this.isLoading || this.tabAnimationLoading }) }, h("div", { key: '7efd246e21b9d120897576e631e13a3c99d7aa78', class: "w-full h-full rounded-[4px] overflow-x-hidden absolute left-0 top-0" }, h("div", { key: 'a05ff5f4bf81094a16d862241c5e1726a9ea9fde', class: "absolute opacity-0 bg-[#1a1a1a] w-[150%] h-full" }), h("div", { key: '79dcacd671a69162fb70732ef7f8c5667c7b6b89', class: "absolute h-full bg-[linear-gradient(to_bottom,_#428bca_0%,_#3071a9_100%)] lane-inc" }), h("div", { key: 'a9ad0e43c77b1e21e96bcf702a6b161364b00313', class: "absolute h-full bg-[linear-gradient(to_bottom,_#428bca_0%,_#3071a9_100%)] lane-dec" }))), h("div", { key: 'a243e2ec68ce7556bf0d645a2a67684d2e167bb2', dir: this.locale.sharedLocales.direction, class: cn('absolute w-[90%] z-10 pointer-events-none border opacity-0 translate-y-[-5px] scale-[70%] text-[#8a6d3b] bg-[#fcf8e3] border-[#faebcc] p-[25px] text-[16px] rounded-[6px] flex items-center justify-between left-1/2 -translate-x-1/2 h-10 bottom-[40px] transition duration-500', {
+        return (h(Host, { key: 'a5e022cca6352d79ea154f809bfb508d63eaa245' }, h("vehicle-item-claim-form", { key: '9e3cc2fde1a318e72cfcfd9cbe7b662d6a9eda2a', class: "vehicle-item-claim-form", maximumDocumentFileSizeInMb: this.maximumDocumentFileSizeInMb, uploadMultipleDocuments: this.uploadMultipleDocumentsAtTheForm, locale: Object.assign({ sharedLocales: this.locale.sharedLocales }, this.locale.claimForm) }), h(ClaimableItemPopover, { key: '553ddb7cbe25c47e6802cfc3464254337ddf01e1', locale: this.locale, claim: this.claim.bind(this), item: this.selectedClaimItem, showPopover: this.showClaimableItemPopover, targetLocation: this.popoverTargetLocation }), h(VehicleInfoLayout, { key: '5c68086adfdcc8cd5ae7977a1f9e2db6ee77cc6a', isError: this.isError, coreOnly: this.coreOnly, header: (_a = this.vehicleLookup) === null || _a === void 0 ? void 0 : _a.vin, direction: this.locale.sharedLocales.direction, isLoading: this.isLoading || this.tabAnimationLoading, errorMessage: this.locale.sharedLocales.errors[this.errorMessage] || this.locale.sharedLocales.errors.wildCard }, h("div", { key: '1bb209c75384bb842128168a384bf17b27bd71b1', dir: "ltr", class: cn('relative flex items-center h-[320px] transition-all duration-300', { loading: this.isLoading || this.tabAnimationLoading }) }, h("div", { key: 'bbdb5c0e0f05165cc281b611cad4719fe25d4992', dir: this.locale.sharedLocales.direction, class: "absolute top-0 z-10 w-full pt-[16px]" }, h("div", { key: 'f7e986355862b763d4f207408303ea1fbbdd0689', class: cn('duration-300', { 'translate-y-[-50%] opacity-0': hideTabs }) }, h("shift-tabs", { key: '3499335575b5a76693d63a2a5e7bc6dfb3c83801', activeTabLabel: this.activeTab, changeActiveTab: this.onActiveTabChange, tabs: tabs }))), h("div", { key: 'cb1dba8b51413ca68c165ecc74868a3a965ec574', class: cn('absolute w-[calc(100%-60px)] left-[30px] progress-container-style opacity-0', { 'opacity-100': this.isLoading || this.tabAnimationLoading }) }, h("div", { key: '2926913b4c946ddc8b41a26265b10a782feddd0b', class: "w-full h-full rounded-[4px] overflow-x-hidden absolute left-0 top-0" }, h("div", { key: 'e2fe4fbf64cb8f87f367eb0e187b00862ee3ec9c', class: "absolute opacity-0 bg-[#1a1a1a] w-[150%] h-full" }), h("div", { key: 'a32f62f0baf5cba25f442c00bd8d46d16314f228', class: "absolute h-full bg-[linear-gradient(to_bottom,_#428bca_0%,_#3071a9_100%)] lane-inc" }), h("div", { key: 'a9bb369b38642b5fecdb5261c99f009f10d12177', class: "absolute h-full bg-[linear-gradient(to_bottom,_#428bca_0%,_#3071a9_100%)] lane-dec" }))), h("div", { key: 'd02b0960f73322386260fa63d4b8b9f5bf17bc3d', dir: this.locale.sharedLocales.direction, class: cn('absolute w-[90%] z-10 pointer-events-none border opacity-0 translate-y-[-5px] scale-[70%] text-[#8a6d3b] bg-[#fcf8e3] border-[#faebcc] p-[25px] text-[16px] rounded-[6px] flex items-center justify-between left-1/2 -translate-x-1/2 h-10 bottom-[40px] transition duration-500', {
                 'opacity-100 pointer-events-auto translate-y-0 scale-100': !this.isLoading && this.vehicleLookup && !this.tabAnimationLoading && (hasInactiveItems || this.showPrintBox),
-            }) }, h("span", { key: '61688068307ec6a28d8e953b452afdb65645a666', class: "font-semibold" }, this.showPrintBox ? this.locale.successFulClaimMessage : this.locale.warrantyAndServicesNotActivated), h("button", { key: '890376538527ca00bf733bcc322d6ca21b5b05cf', class: "claim-button", onClick: this.showPrintBox ? this.printLastClaimResponse : this.activateClaimItem }, this.showPrintBox ? h(PrintIcon, { class: "size-[30px] duration-200" }) : h(ActivationIcon, { class: "size-[30px] duration-200" }), h("span", { key: 'd4209ed9c5e0713f91c37a5278b783c21d71b0bb' }, this.showPrintBox ? this.locale.print : this.locale.activateNow))), h("div", { key: '4b092388b284de132d1bb93f033a54b588b1121d', class: "claimable-items-box px-[30px] min-w-full relative overflow-x-scroll h-full overflow-y-hidden" }, h("div", { key: 'e88a591d16ed7376dfb61363a797346e468b69f1', class: "flex relative w-fit min-w-full items-center h-full [&_*]:shrink-0 gap-[250px] justify-between" }, h("div", { key: '73f0d30db8206a97141e0e1e4c868dc48d7d155c', class: cn('progress-container-style progress-lane absolute overflow-hidden w-[calc(100%-0px)] translate-y-0 opacity-100', {
+            }) }, h("span", { key: 'd848f4b536dfad6f0972d65e78827569c877a560', class: "font-semibold" }, this.showPrintBox ? this.locale.successFulClaimMessage : this.locale.warrantyAndServicesNotActivated), h("button", { key: '4590502bd00dbb202a51fda5d86ccad12f799d3a', class: "claim-button", onClick: this.showPrintBox ? this.printLastClaimResponse : this.activateClaimItem }, this.showPrintBox ? h(PrintIcon, { class: "size-[30px] duration-200" }) : h(ActivationIcon, { class: "size-[30px] duration-200" }), h("span", { key: 'f2f81bcac3d935dcc30e73cac7d597298489d021' }, this.showPrintBox ? this.locale.print : this.locale.activateNow))), h("div", { key: '8f5d41d331945dcd399f3bc11018f586978013f8', class: "claimable-items-box px-[30px] min-w-full relative overflow-x-scroll h-full overflow-y-hidden" }, h("div", { key: 'a86dd231c7e792a0708d75f54d0f28ddbc5c7053', class: "flex relative w-fit min-w-full items-center h-full [&_*]:shrink-0 gap-[250px] justify-between" }, h("div", { key: '5e7ebb391682164dc89d8fb361f437ccbfc809cc', class: cn('progress-container-style progress-lane absolute overflow-hidden w-[calc(100%-0px)] translate-y-0 opacity-100', {
                 'opacity-0': this.isLoading || this.tabAnimationLoading || isNoServicesAvailable || !this.vehicleLookup,
-            }) }, h("div", { key: 'bbbdc7a5bce56364bbd49e124c2497304c0078e7', part: "progress-bar", class: "progress-bar transition-all w-1/2 h-full bg-[linear-gradient(to_bottom,_#428bca_0%,_#3071a9_100%)]" })), h("div", { key: 'd27c0bae9f5208b5a8a21cc3a158ac917c913d60', class: "ml-[-125px]" }), serviceItems.map((item, idx) => (h(ClaimableItem, { item: item, locale: this.locale, setClaimableItemPopover: this.setClaimableItemPopover, addStatusClass: item.status !== 'pending' || serviceItems.findIndex(i => i.status === 'pending') === idx }))), h("div", { key: '1cf1ff5c4fd2284b82fe7c89bfc26e1c96a2e831', class: "ml-[-125px]" })), h("div", { key: '5f6217c2468878629dee3816f7a6d36219fcae4b', dir: this.locale.sharedLocales.direction, class: cn('absolute top-0 left-0 pointer-events-none size-full box-content flex flex-col justify-center opacity-0 transition duration-500 items-center text-slate-700', {
+            }) }, h("div", { key: '08d91c93a97dc159b06795878357148ac53592e1', part: "progress-bar", class: "progress-bar transition-all w-1/2 h-full bg-[linear-gradient(to_bottom,_#428bca_0%,_#3071a9_100%)]" })), h("div", { key: 'f7e0366cd9767b86f378ff98cc9f452ea8aa68a6', class: "ml-[-125px]" }), serviceItems.map((item, idx) => (h(ClaimableItem, { item: item, locale: this.locale, setClaimableItemPopover: this.setClaimableItemPopover, addStatusClass: item.status !== 'pending' || serviceItems.findIndex(i => i.status === 'pending') === idx }))), h("div", { key: '2446dc724361b766305428f7333d8981565648d4', class: "ml-[-125px]" })), h("div", { key: '13922a351ab19fb443e3ba40efda74d697b3bb44', dir: this.locale.sharedLocales.direction, class: cn('absolute top-0 left-0 pointer-events-none size-full box-content flex flex-col justify-center opacity-0 transition duration-500 items-center text-slate-700', {
                 'opacity-100 scale-100': isNoServicesAvailable,
-            }) }, h(EmptyTableIcon, { key: '5b47191ca45ded6157b0b88fe5fddcdf0c71de12', class: "size-[90px]" }), h("div", { key: 'f568acfb7e4866a9f508372f2d9cf49cb23c616d', class: "text-[22px]" }, this.locale.sharedLocales.errors.noServiceAvailable)))))));
+            }) }, h(EmptyTableIcon, { key: '4aea5434b271d11ec74483ed3ea2de298a2c1b34', class: "size-[90px]" }), h("div", { key: 'b19fb1574af099058acbeab24e855563bd9d0ff1', class: "text-[22px]" }, this.locale.sharedLocales.errors.noServiceAvailable)))))));
     }
     static get is() { return "vehicle-claimable-items"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/vehicle-lookup/vehicle-item-claim-form.js

@@ -227,30 +227,30 @@ export class VehicleItemClaimForm {
         const isQRScannerForm = ((_a = this.item) === null || _a === void 0 ? void 0 : _a.claimingMethodEnum) === 'ClaimByScanningQRCode';
         const disableInputs = !this.getIsFormConfirmed() || this.isLoading;
         const isFormValid = this.getIsFormValid();
-        return (h(Host, { key: '5ae34821fe56793399733fd8b38b04ac56cc6e4b' }, h(ImageViewer, { key: '77453a936746d0c7c66e04695e698660b0fa4ad1', style: { 'z-index': '99999999' }, expandedImage: this.expandedImage, imageStyle: { 'z-index': '999999999' }, closeImageViewer: () => closeImageViewer.bind(this)() }), h("div", { key: '96625e3b5e0052a93c44283af73d92e1ec4f1bb9', dir: this.locale.sharedLocales.direction, class: cn('min-w-[100dvw] pointer-events-none h-[100dvh] bg-white fixed top-0 left-0 z-[999] flex flex-col transition duration-500 scale-[110%] opacity-0 justify-between p-[50px] box-border overflow-auto', {
+        return (h(Host, { key: '8a191d491584a7e644325151225904a9b40ed264' }, h(ImageViewer, { key: '334ae04e2e1ad6bb64b38a5cd5d76743ba0bb84c', style: { 'z-index': '99999999' }, expandedImage: this.expandedImage, imageStyle: { 'z-index': '999999999' }, closeImageViewer: () => closeImageViewer.bind(this)() }), h("div", { key: 'd754dd677d4b4696cf683dd4d7844a538d43e379', dir: this.locale.sharedLocales.direction, class: cn('min-w-[100dvw] pointer-events-none h-[100dvh] bg-white fixed top-0 left-0 z-[999] flex flex-col transition duration-500 scale-[110%] opacity-0 justify-between p-[50px] box-border overflow-auto', {
                 'opacity-1 scale-100 pointer-events-auto': this.isOpened,
-            }) }, h("button", { key: '165e1b4b48e9dd752942abaf30958317cf25a26a', disabled: this.isLoading, onClick: this.close.bind(this), class: "disabled:opacity-50 transition absolute right-[50px] duration-500 rounded-full enabled:hover:bg-red-200 enabled:hover:text-red-400 text-black enabled:hover:scale-[150%] enabled:hover:rotate-[135deg] size-[35px] rotate-[45deg]" }, h(AddIcon, { key: '7e95d9caab82c166612126c06d4c9bc0408058e2', class: "stroke-[1.5px]" })), h("div", { key: 'c02eb4bef27a95810e9f93d278ddf9e8be72514b', class: "flex flex-col h-full gap-[32px] justify-between" }, h("div", { key: '36f15b67b624d7b1e3cacb70e2f0fe103533c9d4', class: "flex mt-[50px] flex-col shrink-0 gap-[20px]" }, h("div", { key: 'aa370ea3ab2e6fb4fd31777a419007c39467f501', class: "border overflow-hidden rounded-[6px] border-[#dcdcdc] box-border" }, h("div", { key: '0c83e5d757eef7572126ab19ddde598100ce03aa', class: "relative text-[16px] h-[50px] font-semibold flex items-center justify-center bg-[#f6f6f6]" }, this.vin, !!((_b = this.item) === null || _b === void 0 ? void 0 : _b.printUrl) && (h("button", { key: 'c47e29a9b9ebfda7961e9de564f598542457fcdb', class: "outline-button absolute end-[16px]", onClick: () => window.open(this.item.printUrl, '_blank').focus() }, h(PrintIcon, { key: '30434a824c1d702ff1fe9dcf4f4661e6a79d6dca', class: "size-[30px] duration-200" }), h("span", { key: 'd3306680a9d1621ed826d6fc772d9a6d4cacb281' }, this.locale.print)))), h("div", { key: '9e193243c6da78cd9688a411196916b557a6a5ed', class: "overflow-hidden flex p-[22px] [&_div]:min-w-[200px] gap-[32px] flex-wrap justify-center" }, h(MaterialCard, { key: 'f7ed53fc89006b6d17c2ec313e08278f39752507', title: this.locale.serviceType }, (_c = this.item) === null || _c === void 0 ? void 0 : _c.type), h(MaterialCard, { key: '950d522a9dc814d82cd86c05a90a16ec839a8cef', title: this.locale.name }, (_d = this.item) === null || _d === void 0 ? void 0 : _d.name), h(MaterialCard, { key: 'f82f92de4adf5287ad98e1fb7cfaeb512e51f8b4', title: this.locale.activationDate }, (_e = this.item) === null || _e === void 0 ? void 0 : _e.activatedAt), h(MaterialCard, { key: '05852fa2510bf7cf8e74ac318e129f11a88f9b62', title: this.locale.expireDate }, (_f = this.item) === null || _f === void 0 ? void 0 : _f.expiresAt), h(MaterialCard, { key: '5f5e6ecd1688bb8c73b102b3ea59c2463fe23c4e', title: this.locale.packageCode }, (_g = this.item) === null || _g === void 0 ? void 0 : _g.packageCode))), Array.isArray((_h = this.item) === null || _h === void 0 ? void 0 : _h.warnings) &&
+            }) }, h("button", { key: '0f298412840a6e2dad9ed9e921e1d8c51648d430', disabled: this.isLoading, onClick: this.close.bind(this), class: "disabled:opacity-50 transition absolute right-[50px] duration-500 rounded-full enabled:hover:bg-red-200 enabled:hover:text-red-400 text-black enabled:hover:scale-[150%] enabled:hover:rotate-[135deg] size-[35px] rotate-[45deg]" }, h(AddIcon, { key: '6c6e1df22684859542aff85033ebc9d478c479f5', class: "stroke-[1.5px]" })), h("div", { key: 'bb1d15758ed0d9b5dbf89ba220266ce8d98ba752', class: "flex flex-col h-full gap-[32px] justify-between" }, h("div", { key: '85c44a4593094896984136aaa7af39a6f920c241', class: "flex mt-[50px] flex-col shrink-0 gap-[20px]" }, h("div", { key: 'b181799bd97301bd1f12eaaedf19467ec1f57cec', class: "border overflow-hidden rounded-[6px] border-[#dcdcdc] box-border" }, h("div", { key: '0b7bf9650d330829d40aaeb2e74a28b4eceac346', class: "relative text-[16px] h-[50px] font-semibold flex items-center justify-center bg-[#f6f6f6]" }, this.vin, !!((_b = this.item) === null || _b === void 0 ? void 0 : _b.printUrl) && (h("button", { key: '7d203ca94c3eaec1d4d9c4197d8036be0ef8cdb5', class: "outline-button absolute end-[16px]", onClick: () => window.open(this.item.printUrl, '_blank').focus() }, h(PrintIcon, { key: '47c645359b00f6d63deee1c32b688366d57e7423', class: "size-[30px] duration-200" }), h("span", { key: '8f79c70c334d87244d76af6da43e9a343e3ab579' }, this.locale.print)))), h("div", { key: '73691b3f8e3ec08f8196b58addaa3baaa629acd9', class: "overflow-hidden flex p-[22px] [&_div]:min-w-[200px] gap-[32px] flex-wrap justify-center" }, h(MaterialCard, { key: 'a8f9fcbd8458d46f2cae1abd041919b06d56988c', title: this.locale.serviceType }, (_c = this.item) === null || _c === void 0 ? void 0 : _c.type), h(MaterialCard, { key: '3b11ad53c02008b0506aabe415c06e1261ae72ba', title: this.locale.name }, (_d = this.item) === null || _d === void 0 ? void 0 : _d.name), h(MaterialCard, { key: 'c4ea633d419e879bbcc4270f48c6d1abcd81bd61', title: this.locale.activationDate }, (_e = this.item) === null || _e === void 0 ? void 0 : _e.activatedAt), h(MaterialCard, { key: 'b548eb3bacf9a4177ff2e5981bf9fa1864cdd4af', title: this.locale.expireDate }, (_f = this.item) === null || _f === void 0 ? void 0 : _f.expiresAt), h(MaterialCard, { key: '214bc9eeb49212ea236d325de276acb1c760f994', title: this.locale.packageCode }, (_g = this.item) === null || _g === void 0 ? void 0 : _g.packageCode))), Array.isArray((_h = this.item) === null || _h === void 0 ? void 0 : _h.warnings) &&
             this.item.warnings.map(warning => (h("div", { key: warning.key, class: "border overflow-hidden rounded-[6px] border-[#ff9100] box-border" }, h("div", { class: "text-[16px] px-[22px] h-[50px] font-semibold flex items-center gap-[8px] bg-[#ff91001a]" }, h(AlertIcon, { class: "size-[25px] text-[#ff9100]" }), " ", warning.title), h("div", { class: "p-[16px]" }, h("div", { class: "text-[16px] flex-col items-center md:flex-row flex gap-[16px]" }, h("div", { class: "flex-1", innerHTML: warning.bodyContent }), (warning === null || warning === void 0 ? void 0 : warning.imageUrl) && (h("button", { onClick: ({ target }) => openImageViewer.bind(this)(target, warning === null || warning === void 0 ? void 0 : warning.imageUrl), class: "shrink-0 relative ring-0 outline-none w-fit mx-auto [&_img]:hover:shadow-lg [&_div]:hover:!opacity-100 cursor-pointer" }, h("div", { class: "absolute flex-col justify-center gap-[4px] size-full flex items-center pointer-events-none hover:opacity-100 rounded-lg opacity-0 bg-black/40 transition-all duration-300" }, h("img", { src: Eye }), h("span", { class: "text-white" }, this.locale.expand)), h("img", { class: "w-auto h-auto max-w-[200px] max-h-[200px] cursor-pointer shadow-sm rounded-lg transition-all duration-300", src: warning === null || warning === void 0 ? void 0 : warning.imageUrl })))), (warning === null || warning === void 0 ? void 0 : warning.confirmationText) && (h("label", { class: cn('select-none text-[16px] flex font-semibold group items-center px-[16px] gap-[10px] mt-[20px] h-[36px] transition duration-300 rounded-[6px] cursor-pointer text-[#663c00] bg-[#ff91001a] border border-[#ffd28f]', {
                     'hover:bg-[#fff8e1]': !this.isLoading,
                     'opacity-50 pointer-events-none': this.isLoading,
                 }) }, h("input", { type: "checkbox", class: "peer sr-only", disabled: this.isLoading, checked: !!this.confirmationStates[warning.key], onChange: this.onConfirmCheckboxChange(warning.key) }), h("div", { class: "size-[20px] rounded border border-[#ffb74d] transition duration-300 text-transparent peer-checked:text-white peer-checked:bg-[#ff9100] peer-checked:border-[#ff9100] flex items-center justify-center" }, h(CheckIcon, { class: "size-[18px]" })), warning === null || warning === void 0 ? void 0 :
-                warning.confirmationText))))))), h("div", { key: 'e5daf91bc63e79aa301f011692605965d2412967', class: cn('flex flex-col shrink-0 my-auto gap-[20px] h-fit p-[50px] border-[2px] border-[#3071a9] transition duration-500 items-center rounded-[8px] shadow-lg bg-[#f4f4f4]', {
+                warning.confirmationText))))))), h("div", { key: 'f1fd7be6c8072aee1042852e88fe053555c6fcb3', class: cn('flex flex-col shrink-0 my-auto gap-[20px] h-fit p-[50px] border-[2px] border-[#3071a9] transition duration-500 items-center rounded-[8px] shadow-lg bg-[#f4f4f4]', {
                 'border-[#f4f4f4]': this.isLoading,
-            }) }, h("div", { key: 'b30270b9e39f9f41fa797949d40bfbbd8c38ad5c', class: "relative w-[200px] h-[140px]" }, h("div", { key: 'c96b0689c7d45be649a504548fd54f234d580691', class: cn('absolute size-full transition-all duration-500 flex flex-col items-center gap-[12px] left-0 top-0', { 'left-full opacity-0': this.isLoading }) }, h(FormSubmitSVG, { key: 'fec941557cffc96baa78eb1363541bd3d9cb5723', class: "size-[100px] fill-[#3071a9] text-[#3071a9]" }), h("div", { key: 'ad6648036d54f11e710dc1cc373a818573ba0000', class: "text-[16px] text-[#3071a9] font-semibold" }, isQRScannerForm ? this.locale.scanTheVoucher : this.locale.enterServiceInfo)), h("div", { key: '975e9d5dfd6b5fdf114c1b6999121da8f3956ea3', class: cn('absolute size-full opacity-0 transition-all duration-500 -left-full flex flex-col gap-[12px] items-center', { 'left-0 opacity-100': this.isLoading }) }, h("div", { key: '7a16ca4e36e680ec89e76944cfa0ae3622cc6927', class: cn('relative size-[100px] flex items-center justify-center') }, h("div", { key: '77c804fd83e0c31eee49271e559ac1247be87e0e', class: "lds-ripple" }), h("div", { key: 'bf46dd543e00d4c98b585ba17281182e640f4e98', class: "lds-ripple" })), ((_j = this.item) === null || _j === void 0 ? void 0 : _j.showDocumentUploader) && !!this.inputs['documents'].length ? (h("div", { class: "relative border-[#3071a9] text-[#3071a9] text-[16px] w-[300px] border-[2px] font-semibold h-[30px] overflow-hidden rounded-full flex items-center justify-center" }, h("span", { class: "relative z-20" }, this.locale.processing, " ", `${this.uploadProgress}%`), h("div", { style: {
+            }) }, h("div", { key: '8c4341d012acfb790c42bca7abc6cc92ba51f07d', class: "relative w-[200px] h-[140px]" }, h("div", { key: '6f166a735b4888579f548f7d935d8ace1b89ed0f', class: cn('absolute size-full transition-all duration-500 flex flex-col items-center gap-[12px] left-0 top-0', { 'left-full opacity-0': this.isLoading }) }, h(FormSubmitSVG, { key: 'fede8e205afc39bbbeeb25083a25d519a372d69c', class: "size-[100px] fill-[#3071a9] text-[#3071a9]" }), h("div", { key: '3e99de07ed0c186fcaea0ddafc03514cc5717080', class: "text-[16px] text-[#3071a9] font-semibold" }, isQRScannerForm ? this.locale.scanTheVoucher : this.locale.enterServiceInfo)), h("div", { key: '65b6ee94528e4315281ccc5389c95baf59007cdf', class: cn('absolute size-full opacity-0 transition-all duration-500 -left-full flex flex-col gap-[12px] items-center', { 'left-0 opacity-100': this.isLoading }) }, h("div", { key: 'c47d0ecd49b2d0ce23a6f8f5e204ff2b6d7213fd', class: cn('relative size-[100px] flex items-center justify-center') }, h("div", { key: '4b35a867f7d5260035010df5e871a880727ada97', class: "lds-ripple" }), h("div", { key: '2300b173717534203e9ef79096078c7723531bc7', class: "lds-ripple" })), ((_j = this.item) === null || _j === void 0 ? void 0 : _j.showDocumentUploader) && !!this.inputs['documents'].length ? (h("div", { class: "relative border-[#3071a9] text-[#3071a9] text-[16px] w-[300px] border-[2px] font-semibold h-[30px] overflow-hidden rounded-full flex items-center justify-center" }, h("span", { class: "relative z-20" }, this.locale.processing, " ", `${this.uploadProgress}%`), h("div", { style: {
                 width: `${this.uploadProgress}%`,
                 background: `linear-gradient(to right, rgba(219, 234, 254, ${Math.min(0.1 + this.uploadProgress / 100, 1)}), rgba(191, 219, 254, ${Math.min(0.15 + this.uploadProgress / 100, 1)}), rgba(147, 197, 253, ${Math.min(0.2 + this.uploadProgress / 100, 1)}))`,
-            }, class: "absolute left-0 z-10 top-0 h-full transition-[width] duration-700 ease-out" }))) : (h("div", { class: "text-[16px] text-[#3071a9] font-semibold" }, this.locale.processing)))), ((_k = this.item) === null || _k === void 0 ? void 0 : _k.showDocumentUploader) && (h("div", { key: '8a4c88282145a011fd8c88e1bd6c70a8c5e1d8e5', class: "flex mb-[16px] w-full flex-col" }, h("input", { key: '32d926168b90e33ebdc985000bb2710c53dc0541', hidden: true, type: "file", class: "document-uploader", disabled: this.isLoading, accept: "image/*,application/pdf", onChange: this.onFileUploaderChange, multiple: this.uploadMultipleDocuments, "data-max-size": this.maximumDocumentFileSizeInMb * 1024 * 1024 }), h("div", { key: 'fe9f327186b96fae92a7b705cb386416f0855d48', onClick: this.onDocumentButtonClicked, class: cn('overflow-hidden flex items-center w-fit mx-auto cursor-pointer gap-[16px] ps-[8px] h-[32px] transition duration-300 text-white bg-[#275e8f] active:bg-[#223f57] hover:bg-[#3071a9] rounded-[5px]', { 'pointer-events-none bg-[#d5d5d5] cursor-default': disableInputs }) }, h("div", { key: '58f613c787078e967a4a6abdb9d8115a359337f9', title: this.uploadMultipleDocuments ? this.locale.uploadMultipleDocument : this.locale.uploadSingleDocument, class: "max-w-[200px] truncate whitespace-nowrap overflow-hidden text-ellipsis" }, this.uploadMultipleDocuments ? this.locale.uploadMultipleDocument : this.locale.uploadSingleDocument, ((_l = this === null || this === void 0 ? void 0 : this.item) === null || _l === void 0 ? void 0 : _l.documentUploaderIsRequired) && !((_m = this.inputs) === null || _m === void 0 ? void 0 : _m.documents.length) && (h("span", { key: '638359483bba906d3e227ea8361c7e9eb5a9af31', class: cn('ps-[4px] text-red-500', { 'text-white': disableInputs }) }, "*"))), h("button", { key: 'ae11026e90befb87856e82a43e00b33e05bae6d6', onClick: this.clearFile, class: cn('overflow-hidden transition duration-300 hover:bg-red-600 relative cursor-pointer flex items-center justify-center size-[32px]', {
+            }, class: "absolute left-0 z-10 top-0 h-full transition-[width] duration-700 ease-out" }))) : (h("div", { class: "text-[16px] text-[#3071a9] font-semibold" }, this.locale.processing)))), ((_k = this.item) === null || _k === void 0 ? void 0 : _k.showDocumentUploader) && (h("div", { key: 'f2d37821e682757ad9ed5b44a6a2a100c1c65f32', class: "flex mb-[16px] w-full flex-col" }, h("input", { key: '0008d074d3bb436d9aebf4fd7334c33c66e37ada', hidden: true, type: "file", class: "document-uploader", disabled: this.isLoading, accept: "image/*,application/pdf", onChange: this.onFileUploaderChange, multiple: this.uploadMultipleDocuments, "data-max-size": this.maximumDocumentFileSizeInMb * 1024 * 1024 }), h("div", { key: 'e962c896329058307797ecac011a6940f467e558', onClick: this.onDocumentButtonClicked, class: cn('overflow-hidden flex items-center w-fit mx-auto cursor-pointer gap-[16px] ps-[8px] h-[32px] transition duration-300 text-white bg-[#275e8f] active:bg-[#223f57] hover:bg-[#3071a9] rounded-[5px]', { 'pointer-events-none bg-[#d5d5d5] cursor-default': disableInputs }) }, h("div", { key: '25752b55378684972f9de5e47e6568760f9d88db', title: this.uploadMultipleDocuments ? this.locale.uploadMultipleDocument : this.locale.uploadSingleDocument, class: "max-w-[200px] truncate whitespace-nowrap overflow-hidden text-ellipsis" }, this.uploadMultipleDocuments ? this.locale.uploadMultipleDocument : this.locale.uploadSingleDocument, ((_l = this === null || this === void 0 ? void 0 : this.item) === null || _l === void 0 ? void 0 : _l.documentUploaderIsRequired) && !((_m = this.inputs) === null || _m === void 0 ? void 0 : _m.documents.length) && (h("span", { key: '21c6c8a3ae263db4906f674ec1c6d56dc077f7eb', class: cn('ps-[4px] text-red-500', { 'text-white': disableInputs }) }, "*"))), h("button", { key: 'b2aec05abcbf1f1d6289b4654ad8a3e2efa69804', onClick: this.clearFile, class: cn('overflow-hidden transition duration-300 hover:bg-red-600 relative cursor-pointer flex items-center justify-center size-[32px]', {
                 'pointer-events-none cursor-default': !((_o = this.inputs) === null || _o === void 0 ? void 0 : _o.documents.length),
-            }) }, h(AttachIcon, { key: 'cf1bdf4a2b5576e594c13139b4bf8a12404cb0a4', class: cn('size-[24px] absolute transition duration-500', { '-translate-y-[32px]': !!((_p = this.inputs) === null || _p === void 0 ? void 0 : _p.documents.length) }) }), h(AddIcon, { key: 'd8386b27b984efdc6bed6245bb7cee8c2cf6601e', class: cn('size-[24px] rotate-[45deg] absolute transition translate-y-[32px] duration-500', { 'translate-y-0': !!((_q = this.inputs) === null || _q === void 0 ? void 0 : _q.documents.length) }) }))), h("flexible-container", { key: '39c71dee5a49aae77ca70b1f2528ed1fd99efd12', isOpened: !!((_s = (_r = this.errors) === null || _r === void 0 ? void 0 : _r.documents) === null || _s === void 0 ? void 0 : _s.show) }, h("div", { key: 'ad310cc34a3718f0e99ddf913fd3e93e7854b645', class: "text-red-700 w-fit mx-auto pt-[8px]" }, ((_u = (_t = this.errors) === null || _t === void 0 ? void 0 : _t.documents) === null || _u === void 0 ? void 0 : _u.text) === 'documentLimitError'
+            }) }, h(AttachIcon, { key: '01eb004ef68f43ae7d78fc5a17a8cc8ce468864a', class: cn('size-[24px] absolute transition duration-500', { '-translate-y-[32px]': !!((_p = this.inputs) === null || _p === void 0 ? void 0 : _p.documents.length) }) }), h(AddIcon, { key: '6fa59fec6609c834ea0f96b7c5d6178d3aaafcee', class: cn('size-[24px] rotate-[45deg] absolute transition translate-y-[32px] duration-500', { 'translate-y-0': !!((_q = this.inputs) === null || _q === void 0 ? void 0 : _q.documents.length) }) }))), h("flexible-container", { key: '67d748b80d4b70a42f2e2196792ae71563642f82', isOpened: !!((_s = (_r = this.errors) === null || _r === void 0 ? void 0 : _r.documents) === null || _s === void 0 ? void 0 : _s.show) }, h("div", { key: '7039ca9b858e67192b649135356110705204f9c0', class: "text-red-700 w-fit mx-auto pt-[8px]" }, ((_u = (_t = this.errors) === null || _t === void 0 ? void 0 : _t.documents) === null || _u === void 0 ? void 0 : _u.text) === 'documentLimitError'
             ? this.locale.documentLimitError + `${this.maximumDocumentFileSizeInMb}Mb`
-            : this.locale.documentRequiredError || this.locale.sharedLocales.errors.wildCard)), h("flexible-container", { key: '4ad3d28fae4cea6c648dfcfebd2c9e451cf9a7dd', isOpened: !!((_w = (_v = this.inputs) === null || _v === void 0 ? void 0 : _v.documents) === null || _w === void 0 ? void 0 : _w.length), containerClasses: "" }, h("div", { key: '3327145ffde5fab0b2f8b08eaa2c8e95784b94c1', class: "flex w-full pt-[16px] flex-wrap justify-center gap-[16px]" }, (_y = (_x = this.inputs) === null || _x === void 0 ? void 0 : _x.documents) === null || _y === void 0 ? void 0 : _y.map((doc, idx) => {
+            : this.locale.documentRequiredError || this.locale.sharedLocales.errors.wildCard)), h("flexible-container", { key: '1f9906678bf1800ae16cb7e2c03467851722255a', isOpened: !!((_w = (_v = this.inputs) === null || _v === void 0 ? void 0 : _v.documents) === null || _w === void 0 ? void 0 : _w.length), containerClasses: "" }, h("div", { key: '7ce390fc63ccb1b5d5c735fc10e5dc0442b2bec9', class: "flex w-full pt-[16px] flex-wrap justify-center gap-[16px]" }, (_y = (_x = this.inputs) === null || _x === void 0 ? void 0 : _x.documents) === null || _y === void 0 ? void 0 : _y.map((doc, idx) => {
             var _a;
             return (h("div", { class: cn('flex relative overflow-hidden max-w-[400px] items-center justify-between gap-[20px] bg-slate-400 rounded-[4px] text-white text-[14px]', {
                     'pointer-events-none bg-[#d5d5d5] cursor-default': disableInputs,
                 }) }, h("span", { title: doc.name, class: "truncate ps-[16px] py-[8px]" }, doc.name), h("button", { disabled: disableInputs, onClick: () => this.clearFile(idx), class: cn('overflow-hidden transition duration-300 hover:bg-red-600 relative cursor-pointer flex items-center justify-center size-[32px]', {
                     'pointer-events-none cursor-default': !((_a = this.inputs) === null || _a === void 0 ? void 0 : _a.documents.length),
                 }) }, h(AddIcon, { class: "size-[24px] rotate-[45deg]" }))));
-        }))))), isQRScannerForm && (h("div", { key: 'fb5c730244aeecd9ec7123780f45ca24e10b3491', class: "overflow-hidden w-full" }, h("input", { key: '20db56cfbd0fab85c5ff760b1acbfc0dda49e399', dir: "ltr", autofocus: true, type: "text", spellcheck: "false", autocomplete: "off", disabled: disableInputs, onBlur: this.focusInputs, onKeyDown: this.onKeyDown, value: (_z = this.inputs) === null || _z === void 0 ? void 0 : _z.qrCode, placeholder: this.locale.qrCode, onInput: event => this.setInputValue('qrCode', event.target.value), class: "bg-transparent flex-1 outline-none border-b border-[#ddd] text-[#424242] w-full text-center p-[7px] text-[16px] transition-all duration-300 focus:border-[#3071a9] focus:scale-110 focus:-translate-y-[8px]" }))), !isQRScannerForm && (h("div", { key: 'd72a3982df18a335dec051df7859b0c9e20fcab7', class: "flex w-full overflow-hidden gap-[75px]" }, h("input", { key: '5c707d273b528ae31e18fc8dc04c403f3afd86ea', dir: "ltr", autofocus: true, type: "text", spellcheck: "false", autocomplete: "off", disabled: disableInputs, onKeyDown: this.onKeyDown, value: (_0 = this.inputs) === null || _0 === void 0 ? void 0 : _0.invoice, placeholder: this.locale.invoice, onInput: event => this.setInputValue('invoice', event.target.value), class: "bg-transparent flex-1 outline-none border-b border-[#ddd] text-[#424242] w-full text-center p-[7px] text-[16px] transition-all duration-300 focus:border-[#3071a9] focus:scale-110 focus:-translate-y-[8px]" }), h("input", { key: 'b9aa2cd870b55645e8665273dbe0f92c1040a1c6', dir: "ltr", type: "text", spellcheck: "false", autocomplete: "off", disabled: disableInputs, onKeyDown: this.onKeyDown, value: (_1 = this.inputs) === null || _1 === void 0 ? void 0 : _1.jobNumber, placeholder: this.locale.jobNumber, onInput: event => this.setInputValue('jobNumber', event.target.value), class: "bg-transparent flex-1 outline-none border-b border-[#ddd] text-[#424242] w-full text-center p-[7px] text-[16px] transition-all duration-300 focus:border-[#3071a9] focus:scale-110 focus:-translate-y-[8px]" }))), h("button", { key: 'f314f0fe7d28b3820c009bc5c4446f90a7c6f4b6', onClick: this.submit, disabled: !isFormValid || disableInputs, class: "text-[22px] transition duration-500 hover: mt-[16px] disabled:opacity-50 text-white w-full max-w-[250px] px-[8px] h-[40px] enabled:hover:scale-110 flex gap-[8px] border rounded-[4px] enabled:shadow items-center justify-center border-[#27ae60] bg-[#32b267] enabled:hover:border-[#27ae5fc1] enabled:hover:bg-[#32b267c7]" }, h(ActivationIcon, { key: '5c68ae977196646b5e13299ac09095be59e46141', class: "size-[30px] [&_circle]:fill-white stroke-white text-red-300" }), h("span", { key: 'f58da214e9b8e4facccc54604bd0adcdecbbd39a' }, this.locale.claim))), h("div", { key: 'a4f7ec9702b6f9a7ff673c4d3aed06ebabcf4d90', class: "shrink-0 h-[16px]" })))));
+        }))))), isQRScannerForm && (h("div", { key: '3e3814d233fe3af3db3b7338f6798dc122d74672', class: "overflow-hidden w-full" }, h("input", { key: '8c42ce7870080ca45b12eab9d73ad2c57ecb1cfd', dir: "ltr", autofocus: true, type: "text", spellcheck: "false", autocomplete: "off", disabled: disableInputs, onBlur: this.focusInputs, onKeyDown: this.onKeyDown, value: (_z = this.inputs) === null || _z === void 0 ? void 0 : _z.qrCode, placeholder: this.locale.qrCode, onInput: event => this.setInputValue('qrCode', event.target.value), class: "bg-transparent flex-1 outline-none border-b border-[#ddd] text-[#424242] w-full text-center p-[7px] text-[16px] transition-all duration-300 focus:border-[#3071a9] focus:scale-110 focus:-translate-y-[8px]" }))), !isQRScannerForm && (h("div", { key: '981f1d450709cc4498853d26a41f6700f6c50f7c', class: "flex w-full overflow-hidden gap-[75px]" }, h("input", { key: 'f57542ca541b3678e081afc9ba967988b1dc635b', dir: "ltr", autofocus: true, type: "text", spellcheck: "false", autocomplete: "off", disabled: disableInputs, onKeyDown: this.onKeyDown, value: (_0 = this.inputs) === null || _0 === void 0 ? void 0 : _0.invoice, placeholder: this.locale.invoice, onInput: event => this.setInputValue('invoice', event.target.value), class: "bg-transparent flex-1 outline-none border-b border-[#ddd] text-[#424242] w-full text-center p-[7px] text-[16px] transition-all duration-300 focus:border-[#3071a9] focus:scale-110 focus:-translate-y-[8px]" }), h("input", { key: 'a8e63bbba951f51793dd8eeaea20ab532018f32d', dir: "ltr", type: "text", spellcheck: "false", autocomplete: "off", disabled: disableInputs, onKeyDown: this.onKeyDown, value: (_1 = this.inputs) === null || _1 === void 0 ? void 0 : _1.jobNumber, placeholder: this.locale.jobNumber, onInput: event => this.setInputValue('jobNumber', event.target.value), class: "bg-transparent flex-1 outline-none border-b border-[#ddd] text-[#424242] w-full text-center p-[7px] text-[16px] transition-all duration-300 focus:border-[#3071a9] focus:scale-110 focus:-translate-y-[8px]" }))), h("button", { key: '0291b8f10f572826d677f538b3139c4587f95382', onClick: this.submit, disabled: !isFormValid || disableInputs, class: "text-[22px] transition duration-500 hover: mt-[16px] disabled:opacity-50 text-white w-full max-w-[250px] px-[8px] h-[40px] enabled:hover:scale-110 flex gap-[8px] border rounded-[4px] enabled:shadow items-center justify-center border-[#27ae60] bg-[#32b267] enabled:hover:border-[#27ae5fc1] enabled:hover:bg-[#32b267c7]" }, h(ActivationIcon, { key: 'f91b6e31c99ac7b69ce3f35188bcc1488b09c187', class: "size-[30px] [&_circle]:fill-white stroke-white text-red-300" }), h("span", { key: '4423c32f089aea7637fe6f11f45d4cc6f033217c' }, this.locale.claim))), h("div", { key: 'a2aab198b329381bedb1d39b3ed5b368a1fce212', class: "shrink-0 h-[16px]" })))));
     }
     static get is() { return "vehicle-item-claim-form"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/vehicle-lookup/vehicle-paint-thickness.js

@@ -73,7 +73,7 @@ export class VehiclePaintThickness {
                 label: texts.right,
             },
         ];
-        return (h(Host, { key: '58e58939385c6a7b6276f30646dfc4b726499d67' }, h(ImageViewer, { key: '0815de65078f2658559bbc390066a6ae41fe58ab', closeImageViewer: () => closeImageViewer.bind(this)(), expandedImage: this.expandedImage }), h(VehicleInfoLayout, { key: '0db27e71f59cf1fdc14e26791a6f71b646eec7f0', isError: this.isError, coreOnly: this.coreOnly, isLoading: this.isLoading, header: (_a = this.vehicleLookup) === null || _a === void 0 ? void 0 : _a.vin, direction: this.locale.sharedLocales.direction, errorMessage: this.locale.sharedLocales.errors[this.errorMessage] || this.locale.sharedLocales.errors.wildCard }, h("div", { key: 'd318d0ae5fcba28d7a8b53c5b70ac5c4e2db7471', class: "overflow-x-auto" }, h("information-table", { key: '35293c199ee02bb691aa115f04358d186c0cb7e2', rows: parts, headers: tableHeaders, isLoading: this.isLoading })), h("flexible-container", { key: 'e0628a936b5850e2c126517192694e80f31f08fd', isOpened: !this.isLoading && !!(imageGroups === null || imageGroups === void 0 ? void 0 : imageGroups.length) }, h("div", { key: '92564faac09752290876b6bdfa500d9044b5f9d4', class: "py-[16px] gap-[16px] justify-center flex flex-wrap px-[24px] w-full" }, imageGroups === null || imageGroups === void 0 ? void 0 : imageGroups.map((imageGroup, index) => (h("div", { class: "shrink-0 rounded-lg shadow-sm border overflow-hidden flex flex-col", key: (imageGroup === null || imageGroup === void 0 ? void 0 : imageGroup.name) + index }, h("h1", { class: "text-center border-b bg-slate-50 font-semibold p-[6px]" }, h("span", { class: "shift-skeleton" }, imageGroup === null || imageGroup === void 0 ? void 0 : imageGroup.name)), h("div", { class: "flex max-w-full flex-wrap p-[12px] gap-[8px]" }, imageGroup === null || imageGroup === void 0 ? void 0 : imageGroup.images.map((image, idx) => (h("div", { class: cn('flex shift-skeleton gap-[8px]', { loading: !image }), key: image + idx }, h("button", { onClick: ({ target }) => openImageViewer.bind(this)(target, image), class: "shrink-0 relative ring-0 outline-none w-fit mx-auto [&_img]:hover:shadow-lg [&_div]:hover:!opacity-100 cursor-pointer" }, h("div", { class: "absolute flex-col justify-center gap-[4px] size-full flex items-center pointer-events-none hover:opacity-100 rounded-lg opacity-0 bg-black/40 transition-all duration-300" }, h("img", { src: Eye }), h("span", { class: "text-white" }, texts.expand)), h("img", { src: image, class: "h-[150px] cursor-pointer shadow-sm rounded-lg w-[84px] transition-all duration-300" }))))))))))))));
+        return (h(Host, { key: '8a5a759613b28960919f253b4a779e782671ff27' }, h(ImageViewer, { key: 'a445f7ed897f4583b01e677c7edfd60d50dd8ec9', closeImageViewer: () => closeImageViewer.bind(this)(), expandedImage: this.expandedImage }), h(VehicleInfoLayout, { key: '286716bfee9670c9bd2a1b1fa8f36c25c80601eb', isError: this.isError, coreOnly: this.coreOnly, isLoading: this.isLoading, header: (_a = this.vehicleLookup) === null || _a === void 0 ? void 0 : _a.vin, direction: this.locale.sharedLocales.direction, errorMessage: this.locale.sharedLocales.errors[this.errorMessage] || this.locale.sharedLocales.errors.wildCard }, h("div", { key: 'b359ce536cf473320fc554bb6549acf0f1a8d8cb', class: "overflow-x-auto" }, h("information-table", { key: '93aaf1994d0f8930455de2ff2f04f34a86db46dd', rows: parts, headers: tableHeaders, isLoading: this.isLoading })), h("flexible-container", { key: 'f40440e125397466e3fe2001c35ee5bb0da00c08', isOpened: !this.isLoading && !!(imageGroups === null || imageGroups === void 0 ? void 0 : imageGroups.length) }, h("div", { key: 'bbe9283d376138d09ffc928be1aeb1527c23f70d', class: "py-[16px] gap-[16px] justify-center flex flex-wrap px-[24px] w-full" }, imageGroups === null || imageGroups === void 0 ? void 0 : imageGroups.map((imageGroup, index) => (h("div", { class: "shrink-0 rounded-lg shadow-sm border overflow-hidden flex flex-col", key: (imageGroup === null || imageGroup === void 0 ? void 0 : imageGroup.name) + index }, h("h1", { class: "text-center border-b bg-slate-50 font-semibold p-[6px]" }, h("span", { class: "shift-skeleton" }, imageGroup === null || imageGroup === void 0 ? void 0 : imageGroup.name)), h("div", { class: "flex max-w-full flex-wrap p-[12px] gap-[8px]" }, imageGroup === null || imageGroup === void 0 ? void 0 : imageGroup.images.map((image, idx) => (h("div", { class: cn('flex shift-skeleton gap-[8px]', { loading: !image }), key: image + idx }, h("button", { onClick: ({ target }) => openImageViewer.bind(this)(target, image), class: "shrink-0 relative ring-0 outline-none w-fit mx-auto [&_img]:hover:shadow-lg [&_div]:hover:!opacity-100 cursor-pointer" }, h("div", { class: "absolute flex-col justify-center gap-[4px] size-full flex items-center pointer-events-none hover:opacity-100 rounded-lg opacity-0 bg-black/40 transition-all duration-300" }, h("img", { src: Eye }), h("span", { class: "text-white" }, texts.expand)), h("img", { src: image, class: "h-[150px] cursor-pointer shadow-sm rounded-lg w-[84px] transition-all duration-300" }))))))))))))));
     }
     static get is() { return "vehicle-paint-thickness"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/vehicle-lookup/vehicle-service-history.js

@@ -78,7 +78,7 @@ export class VehicleServiceHistory {
                 label: this.locale.odometer,
             },
         ];
-        return (h(Host, { key: 'd79608381b619b169704879f1886375745a32620' }, h(VehicleInfoLayout, { key: 'a075b4bcfe7178a13787f86b1227ba7d4f8096f5', isError: this.isError, coreOnly: this.coreOnly, isLoading: this.isLoading, header: (_a = this.vehicleLookup) === null || _a === void 0 ? void 0 : _a.vin, direction: this.locale.sharedLocales.direction, errorMessage: this.locale.sharedLocales.errors[this.errorMessage] || this.locale.sharedLocales.errors.wildCard }, h("div", { key: '594a0742633d0588310017b3efaabdeb325319a3', class: "overflow-x-auto" }, h("information-table", { key: 'fda1f740c700a5d1e7a5ea51a62f9b4b85078982', rows: ((_b = this.vehicleLookup) === null || _b === void 0 ? void 0 : _b.serviceHistory) || [], headers: tableHeaders, isLoading: this.isLoading })))));
+        return (h(Host, { key: 'e5c7bd5a44773a3a72eb3efec1cc20351ae76b34' }, h(VehicleInfoLayout, { key: '2a811cd90be7eed2934e2d97030f1bf7e1f7b2d7', isError: this.isError, coreOnly: this.coreOnly, isLoading: this.isLoading, header: (_a = this.vehicleLookup) === null || _a === void 0 ? void 0 : _a.vin, direction: this.locale.sharedLocales.direction, errorMessage: this.locale.sharedLocales.errors[this.errorMessage] || this.locale.sharedLocales.errors.wildCard }, h("div", { key: '744d47eba2b26c891a659e41189fae1c7178a17f', class: "overflow-x-auto" }, h("information-table", { key: '735784965946720830ac2d7007e011a1e43c317c', rows: ((_b = this.vehicleLookup) === null || _b === void 0 ? void 0 : _b.serviceHistory) || [], headers: tableHeaders, isLoading: this.isLoading })))));
     }
     static get is() { return "vehicle-service-history"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/vehicle-lookup/vehicle-specification.js

@@ -61,7 +61,7 @@ export class VehicleSpecification {
         catch (error) {
             productionDate = null;
         }
-        return (h(Host, { key: '4d824e31a6b4efa7f689c4af1fe793b0e5941e1b' }, h(VehicleInfoLayout, { key: 'f475b7f3d82874020d75253d3f1c89a64cb5151e', isError: this.isError, coreOnly: this.coreOnly, isLoading: this.isLoading, header: (_e = this.vehicleLookup) === null || _e === void 0 ? void 0 : _e.vin, direction: this.locale.sharedLocales.direction, errorMessage: this.locale.sharedLocales.errors[this.errorMessage] || this.locale.sharedLocales.errors.wildCard }, h("flexible-container", { key: '0dd74eed470447f4ee02fdca93ae2f821dcc22a9' }, h("div", { key: 'a5c616094df0078c8940b87f96963bd15017049f', class: "flex p-[16px] [&>div]:grow overflow-auto gap-[16px] items-stretch justify-center md:justify-between flex-wrap" }, h(MaterialCard, { key: 'd525de5ce8a72a91fc231e5e7fa722e75b3140cd', class: "grow", title: texts === null || texts === void 0 ? void 0 : texts.model, minWidth: "300px" }, h(MaterialCardChildren, { key: '22edf2e6a126d01d6532e9f61952eea6637dd91e', class: "text-center", hidden: !((_h = (_g = (_f = this === null || this === void 0 ? void 0 : this.vehicleLookup) === null || _f === void 0 ? void 0 : _f.vehicleVariantInfo) === null || _g === void 0 ? void 0 : _g.modelCode) === null || _h === void 0 ? void 0 : _h.trim()) && !((_l = (_k = (_j = this === null || this === void 0 ? void 0 : this.vehicleLookup) === null || _j === void 0 ? void 0 : _j.vehicleSpecification) === null || _k === void 0 ? void 0 : _k.modelDescription) === null || _l === void 0 ? void 0 : _l.trim()) }, ((_p = (_o = (_m = this === null || this === void 0 ? void 0 : this.vehicleLookup) === null || _m === void 0 ? void 0 : _m.vehicleVariantInfo) === null || _o === void 0 ? void 0 : _o.modelCode) === null || _p === void 0 ? void 0 : _p.trim()) || '', " ", h("br", { key: '4f5d31f9d98f96089c90a40da03800df698486a5', class: "my-2" }), ((_s = (_r = (_q = this === null || this === void 0 ? void 0 : this.vehicleLookup) === null || _q === void 0 ? void 0 : _q.vehicleSpecification) === null || _r === void 0 ? void 0 : _r.modelDescription) === null || _s === void 0 ? void 0 : _s.trim()) || '')), h(MaterialCard, { key: 'ee03a1207ca746afa96452beee5d3ea245f4f7f8', class: "grow", title: texts === null || texts === void 0 ? void 0 : texts.variant, minWidth: "300px" }, h(MaterialCardChildren, { key: 'ed6bb97d8cd78dee3709787aa65e43f4f7dd60d1', class: "text-center", hidden: !((_v = (_u = (_t = this === null || this === void 0 ? void 0 : this.vehicleLookup) === null || _t === void 0 ? void 0 : _t.identifiers) === null || _u === void 0 ? void 0 : _u.variant) === null || _v === void 0 ? void 0 : _v.trim()) && !((_y = (_x = (_w = this === null || this === void 0 ? void 0 : this.vehicleLookup) === null || _w === void 0 ? void 0 : _w.vehicleSpecification) === null || _x === void 0 ? void 0 : _x.variantDescription) === null || _y === void 0 ? void 0 : _y.trim()) }, ((_1 = (_0 = (_z = this === null || this === void 0 ? void 0 : this.vehicleLookup) === null || _z === void 0 ? void 0 : _z.identifiers) === null || _0 === void 0 ? void 0 : _0.variant) === null || _1 === void 0 ? void 0 : _1.trim()) || '', " ", h("br", { key: '76385292e9260b54c4a3121f468fe37b19e5e32e' }), ((_4 = (_3 = (_2 = this === null || this === void 0 ? void 0 : this.vehicleLookup) === null || _2 === void 0 ? void 0 : _2.vehicleSpecification) === null || _3 === void 0 ? void 0 : _3.variantDescription) === null || _4 === void 0 ? void 0 : _4.trim()) || '')), h(MaterialCard, { key: 'bd329d34a51ba38ddeaf90657c12d1d525f7a75b', desc: ((_7 = (_6 = (_5 = this === null || this === void 0 ? void 0 : this.vehicleLookup) === null || _5 === void 0 ? void 0 : _5.identifiers) === null || _6 === void 0 ? void 0 : _6.katashiki) === null || _7 === void 0 ? void 0 : _7.trim()) || '', title: texts === null || texts === void 0 ? void 0 : texts.katashiki, minWidth: "250px" }), h(MaterialCard, { key: 'c58fae1ca8f1f984ae9cf7d86588e5fb2642a4e0', desc: ((_11 = (_10 = (_9 = (_8 = this === null || this === void 0 ? void 0 : this.vehicleLookup) === null || _8 === void 0 ? void 0 : _8.vehicleVariantInfo) === null || _9 === void 0 ? void 0 : _9.modelYear) === null || _10 === void 0 ? void 0 : _10.toString()) === null || _11 === void 0 ? void 0 : _11.trim()) || '', title: texts === null || texts === void 0 ? void 0 : texts.modelYear, minWidth: "250px" }), h(MaterialCard, { key: '3e7117a777ef1f737bf54e0e6e8f9acc73894f32', desc: !!productionDate ? productionDate : '', title: texts === null || texts === void 0 ? void 0 : texts.productionDate, minWidth: "250px" }), h(MaterialCard, { key: '5e08fc591cd180ba616d38b998c3c43d76c0767c', desc: ((_14 = (_13 = (_12 = this === null || this === void 0 ? void 0 : this.vehicleLookup) === null || _12 === void 0 ? void 0 : _12.vehicleVariantInfo) === null || _13 === void 0 ? void 0 : _13.sfx) === null || _14 === void 0 ? void 0 : _14.trim()) || '', title: texts === null || texts === void 0 ? void 0 : texts.sfx, minWidth: "250px" }))))));
+        return (h(Host, { key: 'e2ef2d7c36f50fb80bf1c953410d5b454b8baba9' }, h(VehicleInfoLayout, { key: 'f0533a833f6310a93599fdd673ec48d38ef36839', isError: this.isError, coreOnly: this.coreOnly, isLoading: this.isLoading, header: (_e = this.vehicleLookup) === null || _e === void 0 ? void 0 : _e.vin, direction: this.locale.sharedLocales.direction, errorMessage: this.locale.sharedLocales.errors[this.errorMessage] || this.locale.sharedLocales.errors.wildCard }, h("flexible-container", { key: '4c63874fcf89b144e8370c3537df8a61075ec6a3' }, h("div", { key: '746eda09de4bf8c4f755ade0c32bbbdc19271c4b', class: "flex p-[16px] [&>div]:grow overflow-auto gap-[16px] items-stretch justify-center md:justify-between flex-wrap" }, h(MaterialCard, { key: '191c8c8fd4bef29cb11c2963893459b0deb3a33b', class: "grow", title: texts === null || texts === void 0 ? void 0 : texts.model, minWidth: "300px" }, h(MaterialCardChildren, { key: 'd55c2bf0a933f3d6aabf5221785b746c4c7e5463', class: "text-center", hidden: !((_h = (_g = (_f = this === null || this === void 0 ? void 0 : this.vehicleLookup) === null || _f === void 0 ? void 0 : _f.vehicleVariantInfo) === null || _g === void 0 ? void 0 : _g.modelCode) === null || _h === void 0 ? void 0 : _h.trim()) && !((_l = (_k = (_j = this === null || this === void 0 ? void 0 : this.vehicleLookup) === null || _j === void 0 ? void 0 : _j.vehicleSpecification) === null || _k === void 0 ? void 0 : _k.modelDescription) === null || _l === void 0 ? void 0 : _l.trim()) }, ((_p = (_o = (_m = this === null || this === void 0 ? void 0 : this.vehicleLookup) === null || _m === void 0 ? void 0 : _m.vehicleVariantInfo) === null || _o === void 0 ? void 0 : _o.modelCode) === null || _p === void 0 ? void 0 : _p.trim()) || '', " ", h("br", { key: '5831fb0ba4ebd4860b79cdc18d38a94c5c1336ce', class: "my-2" }), ((_s = (_r = (_q = this === null || this === void 0 ? void 0 : this.vehicleLookup) === null || _q === void 0 ? void 0 : _q.vehicleSpecification) === null || _r === void 0 ? void 0 : _r.modelDescription) === null || _s === void 0 ? void 0 : _s.trim()) || '')), h(MaterialCard, { key: '4bf4bd3e78a4fa82ab77033b804356fbd417d267', class: "grow", title: texts === null || texts === void 0 ? void 0 : texts.variant, minWidth: "300px" }, h(MaterialCardChildren, { key: 'b98e71165c87b1a8ba4b89d8211e29188ebab4b9', class: "text-center", hidden: !((_v = (_u = (_t = this === null || this === void 0 ? void 0 : this.vehicleLookup) === null || _t === void 0 ? void 0 : _t.identifiers) === null || _u === void 0 ? void 0 : _u.variant) === null || _v === void 0 ? void 0 : _v.trim()) && !((_y = (_x = (_w = this === null || this === void 0 ? void 0 : this.vehicleLookup) === null || _w === void 0 ? void 0 : _w.vehicleSpecification) === null || _x === void 0 ? void 0 : _x.variantDescription) === null || _y === void 0 ? void 0 : _y.trim()) }, ((_1 = (_0 = (_z = this === null || this === void 0 ? void 0 : this.vehicleLookup) === null || _z === void 0 ? void 0 : _z.identifiers) === null || _0 === void 0 ? void 0 : _0.variant) === null || _1 === void 0 ? void 0 : _1.trim()) || '', " ", h("br", { key: '3c602164c00f3ca02cddf4b8b4e851827086feb1' }), ((_4 = (_3 = (_2 = this === null || this === void 0 ? void 0 : this.vehicleLookup) === null || _2 === void 0 ? void 0 : _2.vehicleSpecification) === null || _3 === void 0 ? void 0 : _3.variantDescription) === null || _4 === void 0 ? void 0 : _4.trim()) || '')), h(MaterialCard, { key: 'ed858ec9d4308ab2b4699d3e13c176d3dd226875', desc: ((_7 = (_6 = (_5 = this === null || this === void 0 ? void 0 : this.vehicleLookup) === null || _5 === void 0 ? void 0 : _5.identifiers) === null || _6 === void 0 ? void 0 : _6.katashiki) === null || _7 === void 0 ? void 0 : _7.trim()) || '', title: texts === null || texts === void 0 ? void 0 : texts.katashiki, minWidth: "250px" }), h(MaterialCard, { key: '30cafe2d9569f2e65ba5ef2c09fdb839e919850c', desc: ((_11 = (_10 = (_9 = (_8 = this === null || this === void 0 ? void 0 : this.vehicleLookup) === null || _8 === void 0 ? void 0 : _8.vehicleVariantInfo) === null || _9 === void 0 ? void 0 : _9.modelYear) === null || _10 === void 0 ? void 0 : _10.toString()) === null || _11 === void 0 ? void 0 : _11.trim()) || '', title: texts === null || texts === void 0 ? void 0 : texts.modelYear, minWidth: "250px" }), h(MaterialCard, { key: '3a573cef0957d783549a5b412b69ba95e848dc03', desc: !!productionDate ? productionDate : '', title: texts === null || texts === void 0 ? void 0 : texts.productionDate, minWidth: "250px" }), h(MaterialCard, { key: '7d0edae4179593984a7245c80c7bc9b99744040a', desc: ((_14 = (_13 = (_12 = this === null || this === void 0 ? void 0 : this.vehicleLookup) === null || _12 === void 0 ? void 0 : _12.vehicleVariantInfo) === null || _13 === void 0 ? void 0 : _13.sfx) === null || _14 === void 0 ? void 0 : _14.trim()) || '', title: texts === null || texts === void 0 ? void 0 : texts.sfx, minWidth: "250px" }))))));
     }
     static get is() { return "vehicle-specification"; }
     static get encapsulation() { return "shadow"; }