adp-web-components 0.0.89 → 0.0.91

package/dist/cjs/vehicle-accessories_6.cjs.entry.js

@@ -0,0 +1,1206 @@
+/*!
+ * Built by ShiftSoftware
+ * Copyright (c)
+ */
+'use strict';
+
+var index = require('./index-BjyafrBw.js');
+var type = require('./type-A-Wi_ktA.js');
+var vehicleInfoLayout = require('./vehicle-info-layout-Dp2Po_uc.js');
+var cn = require('./cn-BHnqYtun.js');
+var getLocalLanguage = require('./get-local-language-AedNCS4v.js');
+var activationIcon = require('./activation-icon-DEYW0itX.js');
+var emptyTableIcon = require('./empty-table-icon-PdTX6gpI.js');
+var materialCard = require('./material-card-Cd0L1Get.js');
+
+const eyeSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIgogICAgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWV5ZSI+CiAgICA8cGF0aCBkPSJNMi4wNjIgMTIuMzQ4YTEgMSAwIDAgMSAwLS42OTYgMTAuNzUgMTAuNzUgMCAwIDEgMTkuODc2IDAgMSAxIDAgMCAxIDAgLjY5NiAxMC43NSAxMC43NSAwIDAgMS0xOS44NzYgMCIgLz4KICAgIDxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjMiIC8+Cjwvc3ZnPg==';
+
+const ImageViewer = ({ expandedImage, closeImageViewer }) => {
+    return (index.h("div", null,
+        index.h("div", { onClick: closeImageViewer, class: cn.cn('image-viewer-overlay', { active: expandedImage }), style: { backdropFilter: expandedImage ? 'blur(3px)' : 'blur(0px)' } },
+            index.h("button", { class: "image-viewer-close-btn" },
+                index.h("div", { class: "image-viewer-close-line first" }),
+                index.h("div", { class: "image-viewer-close-line second" }))),
+        index.h("img", { alt: "", class: "image-viewer-expanded-image" })));
+};
+
+let closeImageListener;
+function openImageViewer(target, imageSrc) {
+    if (this.expandedImage === imageSrc)
+        return;
+    this.originalImage = target;
+    const expandedImageRef = this.el.shadowRoot.querySelector('.image-viewer-expanded-image');
+    expandedImageRef.src = target.src;
+    document.removeEventListener('keydown', closeImageListener);
+    closeImageListener = () => closeImageViewer.bind(this)();
+    document.addEventListener('keydown', closeImageListener);
+    const rect = target.getBoundingClientRect();
+    document.body.style.overflow = 'hidden';
+    Object.assign(expandedImageRef.style, {
+        top: `${rect.top}px`,
+        pointerEvents: 'auto',
+        left: `${rect.left}px`,
+        transitionDuration: '0s',
+        width: `${rect.width}px`,
+        height: `${rect.height}px`,
+    });
+    setTimeout(() => {
+        const naturalWidth = target.naturalWidth;
+        const naturalHeight = target.naturalHeight;
+        const maxWidth = window.innerWidth - 160;
+        const maxHeight = window.innerHeight - 32;
+        const aspectRatio = naturalWidth / naturalHeight;
+        let width, height;
+        if (maxWidth / aspectRatio <= maxHeight) {
+            width = maxWidth;
+            height = maxWidth / aspectRatio;
+        }
+        else {
+            height = maxHeight;
+            width = maxHeight * aspectRatio;
+        }
+        expandedImageRef.style.transitionDuration = '0.3s';
+        Object.assign(expandedImageRef.style, {
+            opacity: '1',
+            width: `${width}px`,
+            height: `${height}px`,
+            top: `${(window.innerHeight - height) / 2}px`,
+            left: `${(window.innerWidth - width) / 2}px`,
+        });
+        this.expandedImage = imageSrc;
+    }, 200);
+}
+function closeImageViewer(event) {
+    event === null || event === void 0 ? void 0 : event.preventDefault();
+    if (event && event.key !== 'Escape')
+        return;
+    document.removeEventListener('keydown', closeImageListener);
+    const expandedImageRef = this.el.shadowRoot.querySelector('.image-viewer-expanded-image');
+    const rect = this.originalImage.getBoundingClientRect();
+    Object.assign(expandedImageRef.style, {
+        top: `${rect.top}px`,
+        pointerEvents: 'none',
+        left: `${rect.left}px`,
+        width: `${rect.width}px`,
+        height: `${rect.height}px`,
+        transitionDuration: '0.3s',
+    });
+    setTimeout(() => {
+        expandedImageRef.src = '';
+        expandedImageRef.style.opacity = '0';
+        expandedImageRef.style.transitionDuration = '0s';
+    }, 300);
+    document.body.style.overflow = '';
+    this.expandedImage = null;
+}
+
+const vehicleRequestHeaders = {
+    cityId: 'City-Id',
+    userId: 'User-Id',
+    companyId: 'Company-Id',
+    customerName: 'Customer-Name',
+    customerPhone: 'Customer-Phone',
+    customerEmail: 'Customer-Email',
+    companyBranchId: 'Company-Branch-Id',
+    cityIntegrationId: 'City-Integration-Id',
+    brandIntegrationId: 'Brand-Integration-Id',
+    companyIntegrationId: 'Company-Integration-Id',
+    companyBranchIntegrationId: 'Company-Branch-Integration-Id',
+};
+
+const setVehicleLookupData = async (context, newData, headers = {}, { beforeAssignment } = {}) => {
+    var _a;
+    if (newData === null || newData === undefined)
+        newData = ((_a = context.vehicleLookup) === null || _a === void 0 ? void 0 : _a.vin) || '';
+    // clears network timeoutRef which serves as await for animation
+    clearTimeout(context.networkTimeoutRef);
+    // handles request spam by canceling the previous ones
+    if (context.abortController)
+        context.abortController.abort();
+    context.abortController = new AbortController();
+    // syncing the internal timeout ref with external network ref
+    let scopedTimeoutRef;
+    const isVinRequest = typeof newData === 'string';
+    const vin = typeof newData === 'string' ? newData : newData === null || newData === void 0 ? void 0 : newData.vin;
+    try {
+        if (!vin || vin.trim().length === 0) {
+            context.isError = false;
+            context.isLoading = false;
+            context.vehicleLookup = undefined;
+            return;
+        }
+        context.isLoading = true;
+        await new Promise(r => {
+            scopedTimeoutRef = setTimeout(r, 1000);
+            context.networkTimeoutRef = scopedTimeoutRef;
+        });
+        const vehicleResponse = isVinRequest ? await getVehicleLookup(context, { scopedTimeoutRef, vin }, headers) : newData;
+        if (context.networkTimeoutRef === scopedTimeoutRef) {
+            if (!vehicleResponse)
+                throw new Error('wrongResponseFormat');
+            if (beforeAssignment)
+                context.vehicleLookup = await beforeAssignment(vehicleResponse, { scopedTimeoutRef });
+            else
+                context.vehicleLookup = vehicleResponse;
+        }
+        context.errorMessage = null;
+        context.isLoading = false;
+        context.isError = false;
+    }
+    catch (error) {
+        if (error && (error === null || error === void 0 ? void 0 : error.name) === 'AbortError')
+            return;
+        if (context.errorCallback)
+            context.errorCallback(error.message);
+        console.error(error);
+        context.setErrorMessage(error.message);
+    }
+};
+const setVehicleLookupErrorState = (context, message) => {
+    context.isError = true;
+    context.isLoading = false;
+    context.errorMessage = message;
+    context.vehicleLookup = undefined;
+};
+const getVehicleLookup = async (context, generalProps, headers = {}) => {
+    const { vin, scopedTimeoutRef } = generalProps;
+    const handleResult = (newVehicleInformation) => {
+        if ((context === null || context === void 0 ? void 0 : context.networkTimeoutRef) === scopedTimeoutRef) {
+            if (!newVehicleInformation && vin)
+                throw new Error('wrongResponseFormat');
+            if (context === null || context === void 0 ? void 0 : context.loadedResponse)
+                context === null || context === void 0 ? void 0 : context.loadedResponse(newVehicleInformation);
+            return newVehicleInformation;
+        }
+    };
+    if (context === null || context === void 0 ? void 0 : context.isDev) {
+        const newData = context === null || context === void 0 ? void 0 : context.mockData[vin];
+        return handleResult(newData);
+    }
+    else {
+        if (!(context === null || context === void 0 ? void 0 : context.baseUrl))
+            throw new Error('noBaseUrl');
+        const componentHeaders = Object.assign({}, headers);
+        Object.entries(vehicleRequestHeaders).forEach(([componentHeaderKey, headerField]) => {
+            if (context[componentHeaderKey])
+                componentHeaders[headerField] = context[componentHeaderKey];
+        });
+        const response = await fetch(`${context === null || context === void 0 ? void 0 : context.baseUrl}${vin}?${context === null || context === void 0 ? void 0 : context.queryString}`, { signal: context === null || context === void 0 ? void 0 : context.abortController.signal, headers: componentHeaders });
+        const newData = (await response.json());
+        return handleResult(newData);
+    }
+};
+
+const vehicleAccessoriesCss = "*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}/*! tailwindcss v3.4.15 | 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}.fixed{position:fixed}.absolute{position:absolute}.\\!relative{position:relative!important}.relative{position:relative}.left-0{left:0}.top-0{top:0}.z-10{z-index:10}.block{display:block}.flex{display:flex}.hidden{display:none}.origin-left{transform-origin:left}.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))}.\\!overflow-hidden{overflow:hidden!important}.\\!rounded-\\[4px\\]{border-radius:4px!important}.border{border-width:1px}.opacity-0{opacity:0}.opacity-100{opacity:1}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-500{transition-duration:.5s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.shift-skeleton{border-radius:4px!important;position:relative!important}.loading .shift-skeleton,.loading.shift-skeleton{overflow:hidden!important;pointer-events:none!important;position:relative!important}.shift-skeleton:after{background:linear-gradient(-45deg,#d4d8de,#e2e5e9,#d4d8de);background-size:300% 300%;border-radius:4px!important;content:\"\";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transform-origin:left;transition-duration:.5s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%;z-index:10}.loading .shift-skeleton:after,.loading.shift-skeleton:after{--tw-scale-x:1;animation:shimmer 2s ease-in-out infinite;opacity:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes shimmer{0%{background-position:100% 0}50%{background-position:0 100%}to{background-position:100% 0}}.image-viewer-overlay{background-color:rgba(0,0,0,.4);height:100dvh;left:0;opacity:0;pointer-events:none;position:fixed;top:0;transition-duration:.4s;transition-property:all;width:100dvw;z-index:50}.image-viewer-overlay.active{opacity:1;pointer-events:auto;transition-delay:.2s}.image-viewer-close-btn{align-items:center;cursor:pointer;display:flex;flex-direction:column;float:right;height:3rem;justify-content:center;margin-right:16px;margin-top:16px;width:3rem}.image-viewer-close-line{background-color:#fff;border-radius:9999px;height:.25rem;position:absolute;width:3rem}.image-viewer-close-line.first{transform:rotate(45deg)}.image-viewer-close-line.second{transform:rotate(-45deg)}.image-viewer-expanded-image{border-radius:.5rem;opacity:0;position:fixed;transition-property:all;z-index:50}.vehicle-info-container{background-color:#fdfdfd;border:1px solid #dcdcdc;border-radius:5px;box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 hsla(0,0%,100%,.1);overflow:hidden;padding:0;position:relative;transition-duration:.5s;transition-property:all}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#f6f6f6;border-radius:5px;border-top:1px solid #dcdcdc;border-top-left-radius:0;border-top-right-radius:0}::-webkit-scrollbar-thumb{background:#c5c5c5;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#a1a1a1}.hide-scroll ::-webkit-scrollbar-thumb,.hide-scroll::-webkit-scrollbar-thumb,.loading ::-webkit-scrollbar-thumb{background:transparent}.vehicle-info-body{display:flex;flex-direction:column;overflow:hidden;position:relative;transition-duration:.5s;transition-property:all;transition-timing-function:ease-in-out}.vehicle-info-content{transition-duration:.5s;transition-property:all;width:100%}.vehicle-info-header{align-items:center;background-color:#f6f6f6;border:1px solid #ededed;display:flex;height:54px;justify-content:center;text-align:center}.vehicle-info-header-vin{display:inline-block;font-size:16px;transition-duration:.5s;transition-property:all}.vehicle-info-header-vin span{color:#ef4444}.loading .vehicle-info-header-vin{opacity:0;transform:scale(1.5);visibility:hidden}:host{all:initial!important;display:block}*{font-family:Arial}.static{position:static}.h-\\[200px\\]{height:200px}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.text-\\[26px\\]{font-size:26px}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.pointer-events-none{pointer-events:none}.mx-auto{margin-left:auto;margin-right:auto}.size-full{height:100%;width:100%}.h-\\[150px\\]{height:150px}.w-\\[84px\\]{width:84px}.w-fit{width:fit-content}.max-w-full{max-width:100%}.shrink-0{flex-shrink:0}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.gap-\\[16px\\]{gap:16px}.gap-\\[4px\\]{gap:4px}.gap-\\[8px\\]{gap:8px}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.rounded-lg{border-radius:.5rem}.border-b{border-bottom-width:1px}.bg-black\\/40{background-color:rgba(0,0,0,.4)}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.p-\\[12px\\]{padding:12px}.p-\\[6px\\]{padding:6px}.px-\\[24px\\]{padding-left:24px;padding-right:24px}.py-\\[16px\\]{padding-bottom:16px;padding-top:16px}.text-center{text-align:center}.font-semibold{font-weight:600}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.ring-0{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.duration-300{transition-duration:.3s}.hover\\:opacity-100:hover{opacity:1}.\\[\\&_div\\]\\:hover\\:\\!opacity-100:hover div{opacity:1!important}.\\[\\&_img\\]\\:hover\\:shadow-lg:hover img{--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);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.my-2{margin-bottom:.5rem;margin-top:.5rem}.grow{flex-grow:1}.items-stretch{align-items:stretch}.overflow-auto{overflow:auto}.p-\\[16px\\]{padding:16px}@media (min-width:768px){.md\\:justify-between{justify-content:space-between}}.\\[\\&\\>div\\]\\:grow>div{flex-grow:1}.mt-\\[32px\\]{margin-top:32px}.h-\\[25px\\]{height:25px}.h-\\[50px\\]{height:50px}.h-\\[8px\\]{height:8px}.bg-\\[\\#f6f6f6\\]{--tw-bg-opacity:1;background-color:rgb(246 246 246/var(--tw-bg-opacity,1))}.px-\\[16px\\]{padding-left:16px;padding-right:16px}.pt-\\[16px\\]{padding-top:16px}.pt-\\[40px\\]{padding-top:40px}.text-\\[18px\\]{font-size:18px}.font-bold{font-weight:700}.success-card{background-color:#d0e7de;border-color:#a2d0bb;color:#0b3521}.reject-card{background-color:#f7d7d8;border-color:#f2aeb5;color:#58151c}.size-\\[100px\\]{height:100px;width:100px}.h-auto{height:auto}.max-h-\\[100px\\]{max-height:100px}.w-auto{width:auto}.max-w-\\[100px\\]{max-width:100px}";
+
+const VehicleAccessories = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        // ====== Start Localization
+        this.language = 'en';
+        this.locale = Object.assign({ sharedLocales: getLocalLanguage.sharedLocalesSchema.getDefault() }, type.accessoriesSchema.getDefault());
+        // ====== End Localization
+        // ====== Start Vehicle info layout prop
+        this.coreOnly = false;
+        // ====== End Vehicle info layout prop
+        // ====== Start Image Viewer Logic
+        this.expandedImage = '';
+        this.headers = {};
+        this.queryString = '';
+        this.isError = false;
+        this.isLoading = false;
+    }
+    async componentWillLoad() {
+        await this.changeLanguage(this.language);
+    }
+    async changeLanguage(newLanguage) {
+        const [sharedLocales, locale] = await Promise.all([getLocalLanguage.getSharedLocal(newLanguage), getLocalLanguage.getLocaleLanguage(newLanguage, 'vehicleLookup.accessories', type.accessoriesSchema)]);
+        this.locale = Object.assign({ sharedLocales }, locale);
+    }
+    async setMockData(newMockData) {
+        this.mockData = newMockData;
+    }
+    async fetchData(newData, headers = {}) {
+        await setVehicleLookupData(this, newData, headers);
+    }
+    async setErrorMessage(message) {
+        setVehicleLookupErrorState(this, message);
+    }
+    onLoadingChange(newValue) {
+        if (this.loadingStateChange)
+            this.loadingStateChange(newValue);
+    }
+    // ====== End Vehicle Lookup Component Shared Logic
+    render() {
+        var _a, _b, _c;
+        const texts = this.locale;
+        const accessories = ((_a = this === null || this === void 0 ? void 0 : this.vehicleLookup) === null || _a === void 0 ? void 0 : _a.accessories) ? (_b = this.vehicleLookup) === null || _b === void 0 ? void 0 : _b.accessories : [];
+        const tableHeaders = [
+            {
+                width: 300,
+                key: 'partNumber',
+                label: texts.partNumber,
+            },
+            {
+                width: 500,
+                key: 'description',
+                label: texts.description,
+            },
+            {
+                width: 200,
+                key: 'image',
+                label: texts.image,
+            },
+        ];
+        const rows = accessories === null || accessories === void 0 ? void 0 : accessories.map(accessory => ({
+            partNumber: accessory === null || accessory === void 0 ? void 0 : accessory.partNumber,
+            description: accessory === null || accessory === void 0 ? void 0 : accessory.description,
+            image: () => (index.h("div", { class: "size-[100px] flex mx-auto items-center justify-center" }, index.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" }, index.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" }, index.h("img", { src: eyeSvg }), index.h("span", { class: "text-white" }, texts.expand)), index.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: () => index.h("div", { key: 'd11bf431592bbc61e49f6cf5906417153df03cf8', class: "size-[100px] flex mx-auto items-center justify-center" }, "\u00A0"),
+        };
+        return (index.h(index.Host, { key: 'e34bd1880a7e94814a3e1af6e4b3184f1d4148e1' }, index.h(ImageViewer, { key: 'f3e71805f7533c0701fbf76ca7c26331d7744cb5', closeImageViewer: () => closeImageViewer.bind(this)(), expandedImage: this.expandedImage }), index.h(vehicleInfoLayout.VehicleInfoLayout, { key: '74c9f75bf57dabd127363cc9f48cf63154cd78a2', 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 }, index.h("div", { key: 'c760870207975476d0f9c081313d669373707b0c', class: "overflow-x-auto" }, index.h("information-table", { key: '335b5f43da40543324767188813ec2f3f9f81bff', templateRow: templateRow, rows: rows, headers: tableHeaders, isLoading: this.isLoading })))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "language": ["changeLanguage"],
+        "isLoading": ["onLoadingChange"]
+    }; }
+};
+VehicleAccessories.style = vehicleAccessoriesCss;
+
+function scrollIntoContainerView(item, container) {
+    const itemRect = item.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+    const isPartiallyHidden = itemRect.left < containerRect.left || itemRect.right > containerRect.right;
+    if (isPartiallyHidden) {
+        const scrollLeft = item.offsetLeft - container.clientWidth / 2 + item.clientWidth / 2;
+        container.scrollTo({
+            left: scrollLeft,
+            behavior: 'smooth',
+        });
+    }
+}
+
+const expiredSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzBweCIgaGVpZ2h0PSIzMHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8ZyBzdHJva2Utd2lkdGg9IjAiIC8+CiAgICA8ZyBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIC8+CiAgICA8Zz4KICAgICAgICA8Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI4IiBmaWxsLW9wYWNpdHk9IjAuMjQiIGZpbGw9ImJsYWNrIiBzdHJva2U9ImJsYWNrIiAvPgogICAgICAgIDxwYXRoIGQ9Ik0xNiAxNkw4IDgiIHN0cm9rZS13aWR0aD0iMS4yIiBzdHJva2U9ImJsYWNrIiAvPgogICAgICAgIDxwYXRoIGQ9Ik0xNiA4TDggMTYiIHN0cm9rZS13aWR0aD0iMS4yIiBzdHJva2U9ImJsYWNrIiAvPgogICAgPC9nPgo8L3N2Zz4=';
+
+const pendingSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzBweCIgaGVpZ2h0PSIzMHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8ZyBzdHJva2Utd2lkdGg9IjAiIC8+CiAgICA8ZyBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIC8+CiAgICA8Zz4KICAgICAgICA8Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI4IiBmaWxsLW9wYWNpdHk9IjAuMjQiIGZpbGw9IiNhMWExYTEiIHN0cm9rZT0iI2ExYTFhMSIgLz4KICAgICAgICA8cmVjdCB4PSI5LjUiIHk9IjgiIHdpZHRoPSIyIiBoZWlnaHQ9IjgiIGZpbGw9IiNhMWExYTEiIC8+CiAgICAgICAgPHJlY3QgeD0iMTIuNSIgeT0iOCIgd2lkdGg9IjIiIGhlaWdodD0iOCIgZmlsbD0iI2ExYTFhMSIgLz4KICAgIDwvZz4KPC9zdmc+';
+
+const cancelledSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzBweCIgaGVpZ2h0PSIzMHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8ZyBzdHJva2Utd2lkdGg9IjAiIC8+CiAgICA8ZyBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIC8+CiAgICA8Zz4KICAgICAgICA8Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI4IiBmaWxsLW9wYWNpdHk9IjAuMjQiIGZpbGw9IiNhODAwMDAiIHN0cm9rZT0iI2E4MDAwMCIgLz4KICAgICAgICA8cGF0aCBkPSJNMTggMThMNiA2IiBzdHJva2Utd2lkdGg9IjEuMiIgc3Ryb2tlPSIjYTgwMDAwIiAvPgogICAgPC9nPgo8L3N2Zz4=';
+
+const processedSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzBweCIgaGVpZ2h0PSIzMHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8ZyBzdHJva2Utd2lkdGg9IjAiIC8+CiAgICA8ZyBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIC8+CiAgICA8Zz4KICAgICAgICA8Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI4IiBmaWxsLW9wYWNpdHk9IjAuMjQiIGZpbGw9IiMzMDcxYTkiIHN0cm9rZT0iIzMwNzFhOSIgLz4KICAgICAgICA8cGF0aCBkPSJNOC41IDExTDExLjM5MzkgMTMuODkzOUMxMS40NTI1IDEzLjk1MjUgMTEuNTQ3NSAxMy45NTI1IDExLjYwNjEgMTMuODkzOUwxOS41IDYiIHN0cm9rZT0iIzMwNzFhOSIKICAgICAgICAgICAgc3Ryb2tlLXdpZHRoPSIxLjIiIC8+CiAgICA8L2c+Cjwvc3ZnPg==';
+
+const activationRequiredSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9InJnYigxNTgsIDE1OCwgMTU4KSIKICAgIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1sb2FkZXIiPgogICAgPHBhdGggZD0iTTEyIDJ2NCIgLz4KICAgIDxwYXRoIGQ9Im0xNi4yIDcuOCAyLjktMi45IiAvPgogICAgPHBhdGggZD0iTTE4IDEyaDQiIC8+CiAgICA8cGF0aCBkPSJtMTYuMiAxNi4yIDIuOSAyLjkiIC8+CiAgICA8cGF0aCBkPSJNMTIgMTh2NCIgLz4KICAgIDxwYXRoIGQ9Im00LjkgMTkuMSAyLjktMi45IiAvPgogICAgPHBhdGggZD0iTTIgMTJoNCIgLz4KICAgIDxwYXRoIGQ9Im00LjkgNC45IDIuOSAyLjkiIC8+Cjwvc3ZnPgo=';
+
+const icons = {
+    expired: expiredSvg,
+    pending: pendingSvg,
+    processed: processedSvg,
+    cancelled: cancelledSvg,
+    activationRequired: activationRequiredSvg,
+};
+const ClaimableItem = ({ item, locale, addStatusClass, setClaimableItemPopover }) => {
+    const removeLoadAnimationClass = (event) => {
+        const component = event.target;
+        component.classList.remove('load-animation');
+    };
+    const openPopover = event => setClaimableItemPopover(true, item, event === null || event === void 0 ? void 0 : event.target);
+    const closePopover = () => setClaimableItemPopover(false);
+    return (index.h("div", { class: cn.cn('claimable-item', { [item.status]: addStatusClass }) },
+        index.h("div", { class: "claimable-item-container" },
+            index.h("div", { onBlur: closePopover, onClick: openPopover, onMouseEnter: openPopover, onMouseLeave: closePopover, onAnimationEnd: removeLoadAnimationClass, class: "claimable-item-header load-animation" },
+                index.h("img", { src: icons[item.status], alt: "status icon" }),
+                index.h("div", null, locale[item === null || item === void 0 ? void 0 : item.status])),
+            index.h("div", { onAnimationEnd: removeLoadAnimationClass, class: "claimable-item-circle load-animation" }),
+            index.h("div", { onAnimationEnd: removeLoadAnimationClass, class: "claimable-item-footer load-animation" }, item === null || item === void 0 ? void 0 : item.name))));
+};
+
+const TriangleIcon = props => (index.h("svg", { fill: "none", "stroke-width": "2", class: props.class, viewBox: "0 0 32 18", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", xmlns: "http://www.w3.org/2000/svg" },
+    index.h("path", { d: "M17.8 2a2 2 0 0 0-3.6 0L3 16h26L17.8 2Z" })));
+
+const detailRows = [
+    {
+        label: 'serviceType',
+        key: 'type',
+        formatter: (item) => item.type.charAt(0).toUpperCase() + item.type.slice(1),
+    },
+    {
+        label: 'activationDate',
+        key: 'activatedAt',
+    },
+    {
+        label: 'expireDate',
+        key: 'expiresAt',
+    },
+    {
+        label: 'claimAt',
+        key: 'claimDate',
+    },
+    {
+        label: 'claimingCompany',
+        key: 'companyName',
+    },
+    {
+        label: 'invoiceNumber',
+        key: 'invoiceNumber',
+    },
+    {
+        label: 'jobNumber',
+        key: 'jobNumber',
+    },
+    {
+        label: 'packageCode',
+        key: 'packageCode',
+    },
+];
+const LEFT_PADDING = 16;
+const RIGHT_PADDING = 16;
+const BOTTOM_PADDING = 10;
+const LEFT_SAFE_AREA = LEFT_PADDING + 25;
+const RIGHT_SAFE_AREA = RIGHT_PADDING + 25;
+const POPOVER_WIDTH = 400;
+const HALF_POPOVER_WIDTH = POPOVER_WIDTH / 2;
+const ARROW_PADDING = 19;
+const CLAIMABLE_HEIGHT = 378;
+const NONE_CLAIMABLE_HEIGHT = 322;
+const ClaimableItemPopover = ({ locale, item, targetLocation, showPopover, claim }) => {
+    let top = targetLocation.bottom + ARROW_PADDING;
+    const popOverHeight = (item === null || item === void 0 ? void 0 : item.claimable) ? CLAIMABLE_HEIGHT : NONE_CLAIMABLE_HEIGHT;
+    const flipVertically = popOverHeight + top + BOTTOM_PADDING > window.innerHeight;
+    if (flipVertically)
+        top = targetLocation.top - popOverHeight - ARROW_PADDING;
+    if (targetLocation.left < LEFT_SAFE_AREA)
+        targetLocation.left = LEFT_SAFE_AREA;
+    if (targetLocation.left > window.innerWidth - RIGHT_SAFE_AREA)
+        targetLocation.left = window.innerWidth - RIGHT_SAFE_AREA;
+    let left = targetLocation.left - HALF_POPOVER_WIDTH;
+    let popoverBodyOffset = 0;
+    const popoverBodyLeft = targetLocation.left - HALF_POPOVER_WIDTH;
+    const popoverBodyRight = targetLocation.left + HALF_POPOVER_WIDTH;
+    if (popoverBodyLeft - LEFT_PADDING < 0)
+        popoverBodyOffset += LEFT_PADDING - popoverBodyLeft;
+    if (popoverBodyRight + RIGHT_PADDING > window.innerWidth)
+        popoverBodyOffset -= popoverBodyRight + RIGHT_PADDING - window.innerWidth;
+    return (index.h("div", { "aria-expanded": showPopover.toString(), dir: locale.sharedLocales.direction, style: { top: `${top}px`, left: `${left}px` }, class: "claimable-item-popover" },
+        index.h("div", { class: "popover-relative-container" },
+            index.h("div", { class: cn.cn('popover-arrow-icon', { flipped: flipVertically }) },
+                index.h(TriangleIcon, { class: "popover-arrow-icon-svg" }),
+                index.h("div", { class: "popover-arrow-bottom-line" })),
+            index.h("div", { style: { transform: `translateX(${popoverBodyOffset}px)` }, class: "popover-body" },
+                detailRows.map(row => (index.h("div", { class: "popover-info-row" },
+                    index.h("b", null, locale[row.label]),
+                    index.h("div", null, item ? ((row === null || row === void 0 ? void 0 : row.formatter) ? row.formatter(item) : item[row.key]) : '')))),
+                (item === null || item === void 0 ? void 0 : item.claimable) && (index.h("button", { onClick: () => claim && claim(item), class: "claim-button" },
+                    index.h(activationIcon.ActivationIcon, null),
+                    index.h("span", null, locale.claim)))))));
+};
+
+const PrintIcon = props => (index.h("svg", { class: props.class, viewBox: "-5 -5 36 36", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M17 7H7V6h10v1zm0 12H7v-6h10v6zm2-12V3H5v4H1v8.996C1 17.103 1.897 18 3.004 18H5v3h14v-3h1.996A2.004 2.004 0 0 0 23 15.996V7h-4z", fill: "rgb(252, 248, 227)" })));
+
+const vehicleClaimableItemsCss = "*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}/*! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:\"\"}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.\\!pointer-events-auto{pointer-events:auto!important}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.\\!relative{position:relative!important}.relative{position:relative}.bottom-\\[12px\\]{bottom:12px}.bottom-\\[calc\\(100\\%-12px\\)\\]{bottom:calc(100% - 12px)}.bottom-full{bottom:100%}.left-0{left:0}.left-1\\/2{left:50%}.left-\\[4\\.5px\\]{left:4.5px}.top-0{top:0}.top-\\[27\\.75px\\]{top:27.75px}.top-full{top:100%}.z-10{z-index:10}.z-50{z-index:50}.m-auto{margin:auto}.mb-\\[16px\\]{margin-bottom:16px}.mt-\\[16px\\]{margin-top:16px}.mt-\\[1px\\]{margin-top:1px}.mt-\\[8px\\]{margin-top:8px}.block{display:block}.flex{display:flex}.hidden{display:none}.size-0{height:0;width:0}.size-\\[30px\\]{height:30px;width:30px}.size-\\[40px\\]{height:40px;width:40px}.h-0{height:0}.h-\\[1\\.5px\\]{height:1.5px}.h-\\[10px\\]{height:10px}.h-\\[35px\\]{height:35px}.w-0{width:0}.w-\\[220px\\]{width:220px}.w-\\[30px\\]{width:30px}.w-\\[400px\\]{width:400px}.w-\\[80\\%\\]{width:80%}.w-fit{width:fit-content}.origin-left{transform-origin:left}.-translate-x-1\\/2{--tw-translate-x:-50%}.-translate-x-1\\/2,.-translate-y-1\\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%}.translate-y-\\[-5px\\]{--tw-translate-y:-5px}.translate-y-\\[-5px\\],.translate-y-\\[10px\\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-\\[10px\\]{--tw-translate-y:10px}.rotate-180{--tw-rotate:180deg}.rotate-180,.scale-\\[150\\%\\]{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))}.scale-\\[150\\%\\]{--tw-scale-x:150%;--tw-scale-y:150%}.scale-\\[70\\%\\]{--tw-scale-x:70%;--tw-scale-y:70%}.scale-\\[70\\%\\],.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-\\[3px\\]{gap:3px}.\\!overflow-hidden{overflow:hidden!important}.\\!rounded-\\[4px\\]{border-radius:4px!important}.rounded-\\[5px\\]{border-radius:5px}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-\\[10px\\]{border-width:10px}.border-\\[5px\\]{border-width:5px}.border-b{border-bottom-width:1px}.border-t-0{border-top-width:0}.border-double{border-style:double}.border-\\[\\#27ae60\\]{--tw-border-opacity:1;border-color:rgb(39 174 96/var(--tw-border-opacity,1))}.border-\\[\\#ddd\\],.border-\\[\\#dddddd\\]{--tw-border-opacity:1;border-color:rgb(221 221 221/var(--tw-border-opacity,1))}.border-\\[\\#ececec\\]{--tw-border-opacity:1;border-color:rgb(236 236 236/var(--tw-border-opacity,1))}.\\!border-b-\\[\\#dddddd\\]{--tw-border-opacity:1!important;border-bottom-color:rgb(221 221 221/var(--tw-border-opacity,1))!important}.\\!border-b-\\[\\#f9f9f9\\]{--tw-border-opacity:1!important;border-bottom-color:rgb(249 249 249/var(--tw-border-opacity,1))!important}.bg-\\[\\#00a300\\]{--tw-bg-opacity:1;background-color:rgb(0 163 0/var(--tw-bg-opacity,1))}.bg-\\[\\#282828\\]{--tw-bg-opacity:1;background-color:rgb(40 40 40/var(--tw-bg-opacity,1))}.bg-\\[\\#3071a9\\]{--tw-bg-opacity:1;background-color:rgb(48 113 169/var(--tw-bg-opacity,1))}.bg-\\[\\#a1a1a1\\]{--tw-bg-opacity:1;background-color:rgb(161 161 161/var(--tw-bg-opacity,1))}.bg-\\[\\#a80000\\]{--tw-bg-opacity:1;background-color:rgb(168 0 0/var(--tw-bg-opacity,1))}.bg-\\[\\#f2f2f2\\]{--tw-bg-opacity:1;background-color:rgb(242 242 242/var(--tw-bg-opacity,1))}.bg-\\[\\#f9f9f9\\]{--tw-bg-opacity:1;background-color:rgb(249 249 249/var(--tw-bg-opacity,1))}.bg-slate-400{--tw-bg-opacity:1;background-color:rgb(148 163 184/var(--tw-bg-opacity,1))}.bg-transparent{background-color:transparent}.fill-\\[\\#27ae60\\]{fill:#27ae60}.fill-\\[\\#f9f9f9\\]{fill:#f9f9f9}.stroke-\\[\\#27ae60\\]{stroke:#27ae60}.stroke-\\[0\\.5px\\]{stroke-width:.5px}.p-\\[20px\\]{padding:20px}.px-\\[10px\\]{padding-left:10px;padding-right:10px}.py-\\[4px\\]{padding-bottom:4px;padding-top:4px}.pt-\\[2px\\]{padding-top:2px}.text-center{text-align:center}.text-start{text-align:start}.text-\\[16px\\]{font-size:16px}.font-bold{font-weight:700}.font-medium{font-weight:500}.text-\\[\\#00a300\\]{--tw-text-opacity:1;color:rgb(0 163 0/var(--tw-text-opacity,1))}.text-\\[\\#27ae60\\]{--tw-text-opacity:1;color:rgb(39 174 96/var(--tw-text-opacity,1))}.text-\\[\\#282828\\]{--tw-text-opacity:1;color:rgb(40 40 40/var(--tw-text-opacity,1))}.text-\\[\\#3071a9\\]{--tw-text-opacity:1;color:rgb(48 113 169/var(--tw-text-opacity,1))}.text-\\[\\#a80000\\]{--tw-text-opacity:1;color:rgb(168 0 0/var(--tw-text-opacity,1))}.text-\\[\\#ddd\\]{--tw-text-opacity:1;color:rgb(221 221 221/var(--tw-text-opacity,1))}.\\!opacity-100{opacity:1!important}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.duration-500{transition-duration:.5s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.shift-skeleton{border-radius:4px!important;position:relative!important}.loading .shift-skeleton,.loading.shift-skeleton{overflow:hidden!important;pointer-events:none!important;position:relative!important}.shift-skeleton:after{background:linear-gradient(-45deg,#d4d8de,#e2e5e9,#d4d8de);background-size:300% 300%;border-radius:4px!important;content:\"\";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transform-origin:left;transition-duration:.5s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%;z-index:10}.loading .shift-skeleton:after,.loading.shift-skeleton:after{--tw-scale-x:1;animation:shimmer 2s ease-in-out infinite;opacity:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes shimmer{0%{background-position:100% 0}50%{background-position:0 100%}to{background-position:100% 0}}.claimable-item{height:0;position:relative;width:0}.claimable-item *{transition-duration:.5s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.loading .claimable-item{pointer-events:none}.claimable-item-container{--tw-translate-x:-50%;--tw-translate-y:-50%;--tw-bg-opacity:1;background-color:rgb(148 163 184/var(--tw-bg-opacity,1));position:relative;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))}.claimable-item-container,.claimable-item-header{align-items:center;display:flex;justify-content:center}.claimable-item-header{bottom:100%;flex-direction:column;font-size:16px;font-weight:700;margin-bottom:16px;position:absolute}.claimable-item-header>div{text-align:center;width:220px}.claimable-item-header img{height:40px;transition-duration:1s;width:40px}.claimable-item-header:hover img{--tw-rotate:360deg;--tw-scale-x:125%;--tw-scale-y:125%}.claimable-item-header:hover img,.loading .claimable-item-header{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))}.loading .claimable-item-header{--tw-translate-y:-5px;--tw-scale-x:70%;--tw-scale-y:70%;opacity:0}.claimable-item-header.load-animation{animation:item-header-fade-in .5s ease forwards}@keyframes item-header-fade-in{0%{opacity:0;transform:translateY(-5px) scale(70%)}to{opacity:1;transform:translateY(0) scale(100%)}}.claimable-item-circle{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(161 161 161/var(--tw-bg-opacity,1));border-color:rgb(236 236 236/var(--tw-border-opacity,1));border-radius:9999px;border-style:double;border-width:5px;height:30px;width:30px}.loading .claimable-item-circle{--tw-scale-x:150%;--tw-scale-y:150%;opacity:0;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))}.claimable-item-circle.load-animation{animation:item-circle-fade-in .5s ease forwards}@keyframes item-circle-fade-in{0%{opacity:0;transform:scale(150%)}to{opacity:1;transform:scale(100%)}}.claimable-item-footer{font-size:16px;font-weight:500;margin-top:8px;position:absolute;text-align:center;top:100%;width:220px}.loading .claimable-item-footer{--tw-translate-y:10px;--tw-scale-x:70%;--tw-scale-y:70%;opacity:0;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))}.claimable-item-footer.load-animation{animation:item-footer-fade-in .5s ease forwards}@keyframes item-footer-fade-in{0%{opacity:0;transform:translateY(10px) scale(70%);visibility:hidden}to{opacity:1;transform:translateY(0) scale(100%);visibility:visible}}.processed .claimable-item-circle{--tw-bg-opacity:1;background-color:rgb(48 113 169/var(--tw-bg-opacity,1))}.processed .claimable-item-header{--tw-text-opacity:1;color:rgb(48 113 169/var(--tw-text-opacity,1))}.expired .claimable-item-circle{--tw-bg-opacity:1;background-color:rgb(40 40 40/var(--tw-bg-opacity,1))}.expired .claimable-item-header{--tw-text-opacity:1;color:rgb(40 40 40/var(--tw-text-opacity,1))}.cancelled .claimable-item-circle{--tw-bg-opacity:1;background-color:rgb(168 0 0/var(--tw-bg-opacity,1))}.cancelled .claimable-item-header{--tw-text-opacity:1;color:rgb(168 0 0/var(--tw-text-opacity,1))}.pending .claimable-item-circle{--tw-bg-opacity:1;background-color:rgb(0 163 0/var(--tw-bg-opacity,1))}.pending .claimable-item-header{--tw-text-opacity:1;color:rgb(0 163 0/var(--tw-text-opacity,1))}.activationRequired .claimable-item-header{color:#9e9e9e}.claimable-item-popover{display:block;opacity:0;pointer-events:none;position:fixed;transition-duration:.5s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);width:fit-content;z-index:50}.claimable-item-popover:hover,.claimable-item-popover[aria-expanded=true]{opacity:1!important;pointer-events:auto!important}.claimable-item-popover:hover *,.claimable-item-popover[aria-expanded=true] *{pointer-events:auto!important}.popover-relative-container{position:relative;width:fit-content}.popover-arrow-1{border-color:transparent;border-bottom-color:rgb(221 221 221/var(--tw-border-opacity,1))!important;border-width:0 10px 10px}.popover-arrow-1,.popover-arrow-2{--tw-border-opacity:1!important;height:0;position:absolute;width:0}.popover-arrow-2{border-color:transparent;border-bottom-color:rgb(249 249 249/var(--tw-border-opacity,1))!important;border-width:0 10px 10px;margin-top:1px}.popover-body{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;--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);background-color:rgb(249 249 249/var(--tw-bg-opacity,1));border-color:rgb(221 221 221/var(--tw-border-opacity,1));border-radius:5px;border-width:1px;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);color:rgb(40 40 40/var(--tw-text-opacity,1));padding:20px;position:relative;width:400px;z-index:10}.popover-body button{display:flex;justify-content:center;margin:16px auto auto;padding-bottom:4px;padding-top:4px;width:80%}.popover-body button svg{height:30px;pointer-events:none!important;width:30px}.popover-info-row{align-items:center;border-bottom-width:1px;display:flex;font-size:16px;height:35px;padding-top:2px;text-align:start}.popover-info-row *{flex:1 1 0%;flex-shrink:0}.popover-arrow-icon{--tw-translate-x:-50%;bottom:calc(100% - 12px);left:50%;position:absolute;z-index:50}.popover-arrow-icon,.popover-arrow-icon.flipped{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))}.popover-arrow-icon.flipped{--tw-translate-y:100%;--tw-rotate:180deg;bottom:12px}.popover-arrow-icon-svg{fill:#f9f9f9;stroke-width:.5px;--tw-text-opacity:1;color:rgb(221 221 221/var(--tw-text-opacity,1));height:40px;width:40px}.popover-arrow-bottom-line{--tw-bg-opacity:1;background-color:rgb(249 249 249/var(--tw-bg-opacity,1));height:1.5px;left:4.5px;position:absolute;top:27.75px;width:30px}.claimable-item-popover .claim-button{--tw-border-opacity:1;fill:#27ae60;stroke:#27ae60;--tw-text-opacity:1;align-items:center;background-color:transparent;border-color:rgb(39 174 96/var(--tw-border-opacity,1));border-radius:5px;border-width:1px;color:rgb(39 174 96/var(--tw-text-opacity,1));cursor:pointer;display:flex;font-weight:700;gap:3px;outline:2px solid transparent;outline-offset:2px;padding-left:10px;padding-right:10px;transition-duration:.2s}.claimable-item-popover .claim-button:hover{--tw-bg-opacity:1;fill:#fff;stroke:#fff;--tw-text-opacity:1;background-color:rgb(46 204 113/var(--tw-bg-opacity,1));color:rgb(255 255 255/var(--tw-text-opacity,1))}.claimable-item-popover .claim-button:active{--tw-bg-opacity:1;background-color:rgb(39 174 96/var(--tw-bg-opacity,1))}.claimable-item-popover .claim-button circle{fill:#2ecc71}.claimable-item-popover .claim-button circle:hover{fill:#fff}.claimable-item-popover .claim-button svg:active{--tw-scale-x:125%;--tw-scale-y:125%;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))}.claimable-item-popover .claim-button path{transition:.2s}.claimable-item-popover .claim-button:hover path{fill:#2ecc71}.vehicle-info-container{background-color:#fdfdfd;border:1px solid #dcdcdc;border-radius:5px;box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 hsla(0,0%,100%,.1);overflow:hidden;padding:0;position:relative;transition-duration:.5s;transition-property:all}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#f6f6f6;border-radius:5px;border-top:1px solid #dcdcdc;border-top-left-radius:0;border-top-right-radius:0}::-webkit-scrollbar-thumb{background:#c5c5c5;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#a1a1a1}.hide-scroll ::-webkit-scrollbar-thumb,.hide-scroll::-webkit-scrollbar-thumb,.loading ::-webkit-scrollbar-thumb{background:transparent}.vehicle-info-body{display:flex;flex-direction:column;overflow:hidden;position:relative;transition-duration:.5s;transition-property:all;transition-timing-function:ease-in-out}.vehicle-info-content{transition-duration:.5s;transition-property:all;width:100%}.vehicle-info-header{align-items:center;background-color:#f6f6f6;border:1px solid #ededed;display:flex;height:54px;justify-content:center;text-align:center}.vehicle-info-header-vin{display:inline-block;font-size:16px;transition-duration:.5s;transition-property:all}.vehicle-info-header-vin span{color:#ef4444}.loading .vehicle-info-header-vin{opacity:0;transform:scale(1.5);visibility:hidden}:host{all:initial!important;display:block}*{font-family:Arial}.progress-container-style{--tw-translate-y:-50%;--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(242 242 242/var(--tw-bg-opacity,1));border-color:rgb(221 221 221/var(--tw-border-opacity,1));border-radius:9999px;border-width:1px;height:10px;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));transition-duration:.5s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.loading .lane-inc{animation:lane-increase 2.5s ease infinite}.loading .lane-dec{animation:lane-decrease 2.5s ease 1s infinite}@keyframes lane-increase{0%{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes lane-decrease{0%{left:-80%;width:80%}to{left:110%;width:10%}}.claim-button{--tw-border-opacity:1;fill:#27ae60;stroke:#27ae60;--tw-text-opacity:1;align-items:center;background-color:transparent;border-color:rgb(39 174 96/var(--tw-border-opacity,1));border-radius:5px;border-width:1px;color:rgb(39 174 96/var(--tw-text-opacity,1));cursor:pointer;display:flex;font-weight:700;gap:3px;outline:2px solid transparent;outline-offset:2px;padding-left:10px;padding-right:10px;transition-duration:.2s}.claim-button:hover{--tw-bg-opacity:1;fill:#fff;stroke:#fff;--tw-text-opacity:1;background-color:rgb(46 204 113/var(--tw-bg-opacity,1));color:rgb(255 255 255/var(--tw-text-opacity,1))}.claim-button:active{--tw-bg-opacity:1;background-color:rgb(39 174 96/var(--tw-bg-opacity,1))}.claim-button circle{fill:#2ecc71}.claim-button circle:hover{fill:#fff}.claim-button svg:active{--tw-scale-x:125%;--tw-scale-y:125%;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))}.claim-button path{transition:.2s}.claim-button:hover path{fill:#2ecc71}.hover\\:bg-\\[\\#2ecc71\\]:hover{--tw-bg-opacity:1;background-color:rgb(46 204 113/var(--tw-bg-opacity,1))}.hover\\:fill-white:hover{fill:#fff}.hover\\:stroke-white:hover{stroke:#fff}.hover\\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.active\\:bg-\\[\\#27ae60\\]:active{--tw-bg-opacity:1;background-color:rgb(39 174 96/var(--tw-bg-opacity,1))}.\\[\\&\\>div\\]\\:w-\\[220px\\]>div{width:220px}.\\[\\&_\\*\\]\\:flex-1 *{flex:1 1 0%}.\\[\\&_\\*\\]\\:shrink-0 *{flex-shrink:0}.\\[\\&_\\*\\]\\:transition *{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.\\[\\&_circle\\]\\:fill-\\[\\#2ecc71\\] circle{fill:#2ecc71}.hover\\:\\[\\&_circle\\]\\:fill-white circle:hover{fill:#fff}.\\[\\&_img\\]\\:size-\\[40px\\] img{height:40px;width:40px}.\\[\\&_img\\]\\:rotate-\\[360deg\\] img{--tw-rotate:360deg}.\\[\\&_img\\]\\:rotate-\\[360deg\\] img,.\\[\\&_img\\]\\:scale-\\[125\\%\\] img{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))}.\\[\\&_img\\]\\:scale-\\[125\\%\\] img{--tw-scale-x:125%;--tw-scale-y:125%}.\\[\\&_img\\]\\:duration-1000 img{transition-duration:1s}.\\[\\&_svg\\]\\:size-\\[30px\\] svg{height:30px;width:30px}.active\\:\\[\\&_svg\\]\\:scale-\\[125\\%\\] svg:active{--tw-scale-x:125%;--tw-scale-y:125%;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))}.static{position:static}.h-\\[200px\\]{height:200px}.w-full{width:100%}.text-\\[26px\\]{font-size:26px}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.pointer-events-none{pointer-events:none}.mx-auto{margin-left:auto;margin-right:auto}.size-full{height:100%;width:100%}.h-\\[150px\\]{height:150px}.w-\\[84px\\]{width:84px}.max-w-full{max-width:100%}.shrink-0{flex-shrink:0}.flex-wrap{flex-wrap:wrap}.gap-\\[16px\\]{gap:16px}.gap-\\[4px\\]{gap:4px}.gap-\\[8px\\]{gap:8px}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.rounded-lg{border-radius:.5rem}.bg-black\\/40{background-color:rgba(0,0,0,.4)}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.p-\\[12px\\]{padding:12px}.p-\\[6px\\]{padding:6px}.px-\\[24px\\]{padding-left:24px;padding-right:24px}.py-\\[16px\\]{padding-bottom:16px;padding-top:16px}.font-semibold{font-weight:600}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.ring-0{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.duration-300{transition-duration:.3s}.hover\\:opacity-100:hover{opacity:1}.\\[\\&_div\\]\\:hover\\:\\!opacity-100:hover div{opacity:1!important}.\\[\\&_img\\]\\:hover\\:shadow-lg:hover img{--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);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.my-2{margin-bottom:.5rem;margin-top:.5rem}.grow{flex-grow:1}.items-stretch{align-items:stretch}.overflow-auto{overflow:auto}.p-\\[16px\\]{padding:16px}@media (min-width:768px){.md\\:justify-between{justify-content:space-between}}.\\[\\&\\>div\\]\\:grow>div{flex-grow:1}.mt-\\[32px\\]{margin-top:32px}.h-\\[25px\\]{height:25px}.h-\\[50px\\]{height:50px}.h-\\[8px\\]{height:8px}.bg-\\[\\#f6f6f6\\]{--tw-bg-opacity:1;background-color:rgb(246 246 246/var(--tw-bg-opacity,1))}.px-\\[16px\\]{padding-left:16px;padding-right:16px}.pt-\\[16px\\]{padding-top:16px}.pt-\\[40px\\]{padding-top:40px}.text-\\[18px\\]{font-size:18px}.success-card{background-color:#d0e7de;border-color:#a2d0bb;color:#0b3521}.reject-card{background-color:#f7d7d8;border-color:#f2aeb5;color:#58151c}.pointer-events-auto{pointer-events:auto}.bottom-\\[40px\\]{bottom:40px}.left-\\[30px\\]{left:30px}.ml-\\[-125px\\]{margin-left:-125px}.box-content{box-sizing:content-box}.size-\\[90px\\]{height:90px;width:90px}.h-10{height:2.5rem}.h-\\[320px\\]{height:320px}.h-full{height:100%}.w-1\\/2{width:50%}.w-\\[150\\%\\]{width:150%}.w-\\[90\\%\\]{width:90%}.w-\\[calc\\(100\\%-0px\\)\\]{width:100%}.w-\\[calc\\(100\\%-60px\\)\\]{width:calc(100% - 60px)}.min-w-full{min-width:100%}.-translate-x-1\\/2,.translate-y-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-0{--tw-translate-y:0px}.translate-y-\\[-50\\%\\]{--tw-translate-y:-50%}.translate-y-\\[-50\\%\\],.translate-y-\\[-5px\\]{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))}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.scale-100,.scale-\\[70\\%\\]{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))}.resize{resize:both}.justify-between{justify-content:space-between}.gap-\\[250px\\]{gap:250px}.overflow-x-hidden{overflow-x:hidden}.overflow-y-hidden{overflow-y:hidden}.overflow-x-scroll{overflow-x:scroll}.rounded-\\[4px\\]{border-radius:4px}.rounded-\\[6px\\]{border-radius:6px}.border-\\[\\#faebcc\\]{--tw-border-opacity:1;border-color:rgb(250 235 204/var(--tw-border-opacity,1))}.bg-\\[\\#1a1a1a\\]{--tw-bg-opacity:1;background-color:rgb(26 26 26/var(--tw-bg-opacity,1))}.bg-\\[\\#fcf8e3\\]{--tw-bg-opacity:1;background-color:rgb(252 248 227/var(--tw-bg-opacity,1))}.bg-\\[linear-gradient\\(to_bottom\\2c _\\#428bca_0\\%\\2c _\\#3071a9_100\\%\\)\\]{background-image:linear-gradient(180deg,#428bca,#3071a9)}.p-\\[25px\\]{padding:25px}.px-\\[30px\\]{padding-left:30px;padding-right:30px}.text-\\[22px\\]{font-size:22px}.text-\\[\\#8a6d3b\\]{--tw-text-opacity:1;color:rgb(138 109 59/var(--tw-text-opacity,1))}.text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1))}.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)}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.-left-full{left:-100%}.left-full{left:100%}.right-\\[50px\\]{right:50px}.z-20{z-index:20}.z-\\[999\\]{z-index:999}.my-auto{margin-bottom:auto;margin-top:auto}.ms-\\[50px\\]{margin-inline-start:50px}.mt-\\[20px\\]{margin-top:20px}.mt-\\[4px\\]{margin-top:4px}.mt-\\[50px\\]{margin-top:50px}.box-border{box-sizing:border-box}.size-\\[100px\\]{height:100px;width:100px}.size-\\[18px\\]{height:18px;width:18px}.size-\\[20px\\]{height:20px;width:20px}.size-\\[24px\\]{height:24px;width:24px}.size-\\[25px\\]{height:25px;width:25px}.size-\\[32px\\]{height:32px;width:32px}.size-\\[35px\\]{height:35px;width:35px}.h-\\[100dvh\\]{height:100dvh}.h-\\[140px\\]{height:140px}.h-\\[16px\\]{height:16px}.h-\\[30px\\]{height:30px}.h-\\[32px\\]{height:32px}.h-\\[36px\\]{height:36px}.h-\\[40px\\]{height:40px}.h-fit{height:fit-content}.w-\\[200px\\]{width:200px}.w-\\[300px\\]{width:300px}.min-w-\\[100dvw\\]{min-width:100dvw}.max-w-\\[200px\\]{max-width:200px}.max-w-\\[250px\\]{max-width:250px}.max-w-\\[400px\\]{max-width:400px}.flex-1{flex:1 1 0%}.-translate-y-\\[32px\\]{--tw-translate-y:-32px}.-translate-y-\\[32px\\],.translate-y-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-\\[32px\\]{--tw-translate-y:32px}.rotate-\\[45deg\\],.translate-y-\\[32px\\]{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))}.rotate-\\[45deg\\]{--tw-rotate:45deg}.scale-100,.scale-\\[110\\%\\]{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))}.scale-\\[110\\%\\]{--tw-scale-x:110%;--tw-scale-y:110%}.cursor-default{cursor:default}.select-none{user-select:none}.list-disc{list-style-type:disc}.gap-\\[10px\\]{gap:10px}.gap-\\[12px\\]{gap:12px}.gap-\\[20px\\]{gap:20px}.gap-\\[32px\\]{gap:32px}.gap-\\[75px\\]{gap:75px}.truncate{overflow:hidden;white-space:nowrap}.text-ellipsis,.truncate{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-\\[8px\\]{border-radius:8px}.border-\\[2px\\]{border-width:2px}.border-\\[\\#3071a9\\]{--tw-border-opacity:1;border-color:rgb(48 113 169/var(--tw-border-opacity,1))}.border-\\[\\#dcdcdc\\]{--tw-border-opacity:1;border-color:rgb(220 220 220/var(--tw-border-opacity,1))}.border-\\[\\#ddd\\]{--tw-border-opacity:1;border-color:rgb(221 221 221/var(--tw-border-opacity,1))}.border-\\[\\#f4f4f4\\]{--tw-border-opacity:1;border-color:rgb(244 244 244/var(--tw-border-opacity,1))}.border-\\[\\#ff9100\\]{--tw-border-opacity:1;border-color:rgb(255 145 0/var(--tw-border-opacity,1))}.border-\\[\\#ffb74d\\]{--tw-border-opacity:1;border-color:rgb(255 183 77/var(--tw-border-opacity,1))}.border-\\[\\#ffd28f\\]{--tw-border-opacity:1;border-color:rgb(255 210 143/var(--tw-border-opacity,1))}.bg-\\[\\#275e8f\\]{--tw-bg-opacity:1;background-color:rgb(39 94 143/var(--tw-bg-opacity,1))}.bg-\\[\\#32b267\\]{--tw-bg-opacity:1;background-color:rgb(50 178 103/var(--tw-bg-opacity,1))}.bg-\\[\\#d5d5d5\\]{--tw-bg-opacity:1;background-color:rgb(213 213 213/var(--tw-bg-opacity,1))}.bg-\\[\\#f4f4f4\\]{--tw-bg-opacity:1;background-color:rgb(244 244 244/var(--tw-bg-opacity,1))}.bg-\\[\\#ff91001a\\]{background-color:#ff91001a}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.fill-\\[\\#3071a9\\]{fill:#3071a9}.stroke-white{stroke:#fff}.stroke-\\[1\\.5px\\]{stroke-width:1.5px}.p-\\[22px\\]{padding:22px}.p-\\[50px\\]{padding:50px}.p-\\[7px\\]{padding:7px}.px-\\[22px\\]{padding-left:22px;padding-right:22px}.px-\\[8px\\]{padding-left:8px;padding-right:8px}.py-\\[8px\\]{padding-bottom:8px;padding-top:8px}.ps-\\[16px\\]{padding-inline-start:16px}.ps-\\[4px\\]{padding-inline-start:4px}.ps-\\[8px\\]{padding-inline-start:8px}.pt-\\[8px\\]{padding-top:8px}.text-\\[14px\\]{font-size:14px}.text-\\[\\#424242\\]{--tw-text-opacity:1;color:rgb(66 66 66/var(--tw-text-opacity,1))}.text-\\[\\#663c00\\]{--tw-text-opacity:1;color:rgb(102 60 0/var(--tw-text-opacity,1))}.text-\\[\\#ff9100\\]{--tw-text-opacity:1;color:rgb(255 145 0/var(--tw-text-opacity,1))}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.text-red-300{--tw-text-opacity:1;color:rgb(252 165 165/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-red-700{--tw-text-opacity:1;color:rgb(185 28 28/var(--tw-text-opacity,1))}.text-transparent{color:transparent}.opacity-50{opacity:.5}.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)}.transition-\\[width\\]{transition-duration:.15s;transition-property:width;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-700{transition-duration:.7s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.hover\\:bg-\\[\\#3071a9\\]:hover{--tw-bg-opacity:1;background-color:rgb(48 113 169/var(--tw-bg-opacity,1))}.hover\\:bg-\\[\\#fff8e1\\]:hover{--tw-bg-opacity:1;background-color:rgb(255 248 225/var(--tw-bg-opacity,1))}.hover\\:bg-red-600:hover{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}.focus\\:-translate-y-\\[8px\\]:focus{--tw-translate-y:-8px}.focus\\:-translate-y-\\[8px\\]:focus,.focus\\:scale-110:focus{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))}.focus\\:scale-110:focus{--tw-scale-x:1.1;--tw-scale-y:1.1}.focus\\:border-\\[\\#3071a9\\]:focus{--tw-border-opacity:1;border-color:rgb(48 113 169/var(--tw-border-opacity,1))}.active\\:bg-\\[\\#223f57\\]:active{--tw-bg-opacity:1;background-color:rgb(34 63 87/var(--tw-bg-opacity,1))}.enabled\\:shadow:enabled{--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)}.enabled\\:hover\\:rotate-\\[135deg\\]:hover:enabled{--tw-rotate:135deg}.enabled\\:hover\\:rotate-\\[135deg\\]:hover:enabled,.enabled\\:hover\\:scale-110:hover:enabled{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))}.enabled\\:hover\\:scale-110:hover:enabled{--tw-scale-x:1.1;--tw-scale-y:1.1}.enabled\\:hover\\:scale-\\[150\\%\\]:hover:enabled{--tw-scale-x:150%;--tw-scale-y:150%;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))}.enabled\\:hover\\:border-\\[\\#27ae5fc1\\]:hover:enabled{border-color:#27ae5fc1}.enabled\\:hover\\:bg-\\[\\#32b267c7\\]:hover:enabled{background-color:#32b267c7}.enabled\\:hover\\:bg-red-200:hover:enabled{--tw-bg-opacity:1;background-color:rgb(254 202 202/var(--tw-bg-opacity,1))}.enabled\\:hover\\:text-red-400:hover:enabled{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.disabled\\:opacity-50:disabled{opacity:.5}.peer:checked~.peer-checked\\:border-\\[\\#ff9100\\]{--tw-border-opacity:1;border-color:rgb(255 145 0/var(--tw-border-opacity,1))}.peer:checked~.peer-checked\\:bg-\\[\\#ff9100\\]{--tw-bg-opacity:1;background-color:rgb(255 145 0/var(--tw-bg-opacity,1))}.peer:checked~.peer-checked\\:text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.\\[\\&_circle\\]\\:fill-white circle{fill:#fff}.\\[\\&_div\\]\\:min-w-\\[200px\\] div{min-width:200px}.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))}";
+
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+const VehicleClaimableItems = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        // ====== Start Localization
+        this.language = 'en';
+        this.locale = Object.assign({ sharedLocales: getLocalLanguage.sharedLocalesSchema.getDefault() }, type.claimableItemsSchema.getDefault());
+        // ====== End Localization
+        // ====== Start Vehicle info layout prop
+        this.coreOnly = false;
+        this.headers = {};
+        this.queryString = '';
+        this.uploadMultipleDocumentsAtTheForm = true;
+        this.isError = false;
+        this.isLoading = false;
+        this.maximumDocumentFileSizeInMb = 30;
+        this.claimEndPoint = 'api/vehicle/swift-claim';
+        this.activeTab = '';
+        this.showPrintBox = false;
+        this.tabAnimationLoading = false;
+        this.lastSuccessfulClaimResponse = null;
+        this.showClaimableItemPopover = false;
+        this.tabs = [];
+        this.popoverTargetLocation = { left: 0, bottom: 0, top: 0 };
+        this.getServiceItems = () => {
+            var _a, _b, _c, _d, _e;
+            if (!((_b = (_a = this.vehicleLookup) === null || _a === void 0 ? void 0 : _a.serviceItems) === null || _b === void 0 ? void 0 : _b.length))
+                return [];
+            if (!((_c = this.tabs) === null || _c === void 0 ? void 0 : _c.length))
+                return (_d = this.vehicleLookup) === null || _d === void 0 ? void 0 : _d.serviceItems;
+            return (_e = this.vehicleLookup) === null || _e === void 0 ? void 0 : _e.serviceItems.filter(serviceItem => { var _a; return ((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.group) === null || _a === void 0 ? void 0 : _a.name) === this.activeTab; });
+        };
+        this.parseGroupData = (vehicleLookup) => {
+            var _a;
+            if ((_a = vehicleLookup === null || vehicleLookup === void 0 ? void 0 : vehicleLookup.serviceItems) === null || _a === void 0 ? void 0 : _a.length) {
+                let orderedGroups = [];
+                const unOrderedGroups = [];
+                vehicleLookup.serviceItems.forEach(({ group }) => {
+                    if (!(group === null || group === void 0 ? void 0 : group.name))
+                        return;
+                    if ([...orderedGroups, ...unOrderedGroups].find(g => (g === null || g === void 0 ? void 0 : g.name) === (group === null || group === void 0 ? void 0 : group.name)))
+                        return;
+                    if (group === null || group === void 0 ? void 0 : group.isDefault)
+                        this.activeTab = group === null || group === void 0 ? void 0 : group.name;
+                    if (typeof (group === null || group === void 0 ? void 0 : group.tabOrder) === 'number')
+                        orderedGroups.push(group);
+                    else
+                        unOrderedGroups.push(group);
+                });
+                if (!!unOrderedGroups.length || !!orderedGroups.length) {
+                    orderedGroups = orderedGroups.sort((a, b) => a.tabOrder - b.tabOrder);
+                    this.tabs = [...orderedGroups, ...unOrderedGroups];
+                    if (!this.activeTab)
+                        this.activeTab = this.tabs[0].name;
+                }
+                else {
+                    this.tabs = [];
+                    this.activeTab = '';
+                }
+            }
+            else {
+                this.tabs = [];
+                this.activeTab = '';
+            }
+            return vehicleLookup;
+        };
+        this.updateProgressBar = async (payload) => {
+            var _a, _b;
+            // payload indicates its not a fresh list rather it is an update to current one
+            if (!payload) {
+                // hard reset of the bar
+                this.progressBar.style.transitionDuration = '0s';
+                this.progressBar.style.opacity = '0';
+                this.progressBar.style.width = '0%';
+                // apply changes
+                await new Promise(r => setTimeout(r, 10));
+            }
+            this.progressBar.style.transitionDuration = '1s';
+            this.progressBar.style.opacity = '1';
+            if (!this.vehicleLookup)
+                return;
+            if (!!((_a = this.tabs) === null || _a === void 0 ? void 0 : _a.length) && this.tabs.find(tab => tab.name === this.activeTab) && !((_b = this.tabs.find(tab => tab.name === this.activeTab)) === null || _b === void 0 ? void 0 : _b.isSequential))
+                return;
+            const serviceItems = this.getServiceItems();
+            const firstPendingItemIndex = serviceItems.findIndex(x => x.status === 'pending');
+            if (firstPendingItemIndex !== -1) {
+                const pendingItemRef = this.el.shadowRoot.querySelectorAll('.claimable-item')[firstPendingItemIndex];
+                const progressLaneRef = this.el.shadowRoot.querySelector('.progress-lane');
+                const { left: pendingItemLeftOffset } = pendingItemRef.getBoundingClientRect();
+                const { width: progressLaneWidth, left: progressLeftOffset } = progressLaneRef.getBoundingClientRect();
+                const offsetToLeftRatio = ((pendingItemLeftOffset - progressLeftOffset) / progressLaneWidth) * 100;
+                this.progressBar.style.width = `${offsetToLeftRatio.toFixed(2)}%`;
+                if (firstPendingItemIndex === serviceItems.length - 1)
+                    this.claimableItemsBox.scrollTo({
+                        left: this.claimableItemsBox.scrollWidth,
+                        behavior: 'smooth',
+                    });
+                else
+                    scrollIntoContainerView(pendingItemRef, this.claimableItemsBox);
+            }
+            else if (!(serviceItems.length === 0 || serviceItems.filter(x => x.status === 'activationRequired').length === serviceItems.length)) {
+                this.progressBar.style.width = '100%';
+                this.claimableItemsBox.scrollTo({
+                    left: this.claimableItemsBox.scrollWidth,
+                    behavior: 'smooth',
+                });
+            }
+        };
+        this.onActiveTabChange = ({ label }) => {
+            this.tabAnimationLoading = true;
+            clearTimeout(this.tabAnimationTimeoutRef);
+            this.tabAnimationTimeoutRef = setTimeout(() => {
+                this.activeTab = label;
+                // wait for jsx update
+                setTimeout(() => {
+                    this.tabAnimationLoading = false;
+                    this.updateProgressBar();
+                }, 50);
+            }, 750);
+        };
+        this.activateClaimItem = () => {
+            if (this.activate)
+                this.activate(this.vehicleLookup);
+        };
+        this.printLastClaimResponse = () => {
+            if (this.print) {
+                this.print(this.lastSuccessfulClaimResponse);
+            }
+            else {
+                if (this.lastSuccessfulClaimResponse.PrintURL) {
+                    window.open(this.lastSuccessfulClaimResponse.PrintURL, '_blank').focus();
+                }
+            }
+        };
+        this.updatePopoverLocation = () => {
+            if (!this.claimableItemPopoverRef)
+                return;
+            const { left, bottom, width, top } = this.claimableItemPopoverRef.getBoundingClientRect();
+            this.popoverTargetLocation = { left: left + width / 2, bottom, top };
+        };
+        this.setClaimableItemPopover = (showPopover, claimableItem, claimableItemPopoverRef) => {
+            if (showPopover) {
+                this.claimableItemPopoverRef = claimableItemPopoverRef;
+                this.updatePopoverLocation();
+                this.selectedClaimItem = claimableItem;
+                this.showClaimableItemPopover = true;
+            }
+            else {
+                this.showClaimableItemPopover = false;
+            }
+        };
+        this.handleClaim = async (_a) => {
+            var { documents } = _a, payload = __rest(_a, ["documents"]);
+            try {
+                const formData = new FormData();
+                formData.append('payload', JSON.stringify(Object.assign(Object.assign({}, payload), { vin: this.vehicleLookup.vin, serviceItem: this.claimForm.item, saleInformation: this.vehicleLookup.saleInformation, cancelledServiceItems: this.claimForm.canceledItems })));
+                if (documents && documents.length > 0) {
+                    documents.forEach(doc => {
+                        formData.append('document', doc);
+                    });
+                }
+                await new Promise((resolve, reject) => {
+                    const xhr = new XMLHttpRequest();
+                    xhr.open('POST', this.claimEndPoint);
+                    Object.entries(this.headers || {}).forEach(([key, value]) => {
+                        xhr.setRequestHeader(key, value);
+                    });
+                    xhr.upload.onprogress = e => {
+                        if (e.lengthComputable)
+                            this.claimForm.setFileUploadProgression(Math.round((e.loaded / e.total) * 100));
+                    };
+                    xhr.onload = () => {
+                        if (xhr.status === 200) {
+                            try {
+                                const responseData = JSON.parse(xhr.responseText);
+                                this.completeClaim(responseData);
+                                resolve();
+                            }
+                            catch (parseError) {
+                                console.error('Response is not valid JSON', {
+                                    rawResponse: xhr.responseText,
+                                    error: parseError,
+                                });
+                                reject(new Error('Upload succeeded but response is not valid JSON'));
+                            }
+                            resolve();
+                        }
+                        else {
+                            try {
+                                const responseData = JSON.parse(xhr.responseText);
+                                alert(responseData.Message);
+                            }
+                            catch (_a) {
+                                reject(new Error(`Upload failed with status ${xhr.status}`));
+                            }
+                        }
+                    };
+                    xhr.onerror = e => {
+                        console.log(e);
+                        reject(new Error('Network error'));
+                    };
+                    xhr.send(formData);
+                });
+            }
+            catch (error) {
+                console.error(error);
+                alert(this.locale.sharedLocales.errors.requestFailedPleaseTryAgainLater);
+            }
+        };
+        this.handleDevClaim = async ({ documents }) => {
+            if (documents && documents.length > 0) {
+                this.claimForm.setFileUploadProgression(0);
+                let uploadChunks = 20;
+                for (let index = 0; index < uploadChunks; index++) {
+                    const uploadPercentage = Math.round(((index + 1) / uploadChunks) * 100);
+                    await new Promise(r => setTimeout(r, 200));
+                    this.claimForm.setFileUploadProgression(uploadPercentage);
+                }
+            }
+            await new Promise(r => setTimeout(r, 1000));
+            this.completeClaim({ Success: true, ID: '11223344', PrintURL: 'http://localhost/test/print/1122' });
+        };
+    }
+    async componentWillLoad() {
+        await this.changeLanguage(this.language);
+    }
+    async changeLanguage(newLanguage) {
+        const [sharedLocales, locale] = await Promise.all([getLocalLanguage.getSharedLocal(newLanguage), getLocalLanguage.getLocaleLanguage(newLanguage, 'vehicleLookup.claimableItems', type.claimableItemsSchema)]);
+        this.locale = Object.assign({ sharedLocales }, locale);
+    }
+    async setMockData(newMockData) {
+        this.mockData = newMockData;
+    }
+    async fetchData(newData, headers = {}) {
+        const beforeAssignment = async (vehicleLookup) => {
+            this.showPrintBox = false;
+            await this.parseGroupData(vehicleLookup);
+            return vehicleLookup;
+        };
+        await setVehicleLookupData(this, newData, headers, { beforeAssignment });
+    }
+    async setErrorMessage(message) {
+        setVehicleLookupErrorState(this, message);
+    }
+    onLoadingChange(newValue) {
+        if (this.loadingStateChange)
+            this.loadingStateChange(newValue);
+    }
+    async componentDidLoad() {
+        this.progressBar = this.el.shadowRoot.querySelector('.progress-bar');
+        this.claimForm = this.el.shadowRoot.querySelector('.vehicle-item-claim-form');
+        this.claimableItemsBox = this.el.shadowRoot.querySelector('.claimable-items-box');
+        window.addEventListener('resize', this.updateProgressBar);
+        if (this.claimableItemsBox)
+            this.claimableItemsBox.addEventListener('scroll', this.updatePopoverLocation);
+        window.addEventListener('scroll', this.updatePopoverLocation);
+        window.addEventListener('resize', this.updatePopoverLocation);
+    }
+    async disconnectedCallback() {
+        window.removeEventListener('resize', this.updateProgressBar);
+        if (this.claimableItemsBox)
+            this.claimableItemsBox.removeEventListener('scroll', this.updatePopoverLocation);
+        window.removeEventListener('scroll', this.updatePopoverLocation);
+        window.removeEventListener('resize', this.updatePopoverLocation);
+    }
+    async onVehicleChange() {
+        // wait for jsx update
+        setTimeout(() => {
+            this.updateProgressBar();
+        }, 50);
+    }
+    async completeClaim(response) {
+        const serviceItems = this.getServiceItems();
+        const item = this.selectedClaimItem;
+        const serviceDataClone = JSON.parse(JSON.stringify(serviceItems));
+        const index = serviceItems.indexOf(item);
+        const pendingItemsBefore = serviceDataClone.slice(0, index).filter(x => x.status === 'pending');
+        serviceDataClone[index].claimable = false;
+        serviceDataClone[index].status = 'processed';
+        pendingItemsBefore.forEach(function (otherItem) {
+            otherItem.status = 'cancelled';
+        });
+        const vehicleDataClone = JSON.parse(JSON.stringify(this.vehicleLookup));
+        vehicleDataClone.serviceItems = serviceDataClone;
+        this.vehicleLookup = JSON.parse(JSON.stringify(vehicleDataClone));
+        this.showPrintBox = true;
+        this.lastSuccessfulClaimResponse = response;
+    }
+    async claim(item) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        const serviceItems = this.getServiceItems();
+        const vinDataClone = JSON.parse(JSON.stringify(serviceItems));
+        const index = serviceItems.indexOf(item);
+        this.selectedClaimItem = item;
+        //Find other items before this item that have status 'pending'
+        let pendingItemsBefore = vinDataClone.slice(0, index).filter(x => x.status === 'pending');
+        if ((item === null || item === void 0 ? void 0 : item.maximumMileage) === null)
+            pendingItemsBefore = [];
+        this.claimForm.item = item;
+        this.claimForm.vin = (_a = this.vehicleLookup) === null || _a === void 0 ? void 0 : _a.vin;
+        this.claimForm.canceledItems = pendingItemsBefore;
+        if (((_c = (_b = this.vehicleLookup) === null || _b === void 0 ? void 0 : _b.saleInformation) === null || _c === void 0 ? void 0 : _c.broker) !== null && ((_f = (_e = (_d = this.vehicleLookup) === null || _d === void 0 ? void 0 : _d.saleInformation) === null || _e === void 0 ? void 0 : _e.broker) === null || _f === void 0 ? void 0 : _f.invoiceDate) === null)
+            this.claimForm.unInvoicedByBrokerName = (_j = (_h = (_g = this.vehicleLookup) === null || _g === void 0 ? void 0 : _g.saleInformation) === null || _h === void 0 ? void 0 : _h.broker) === null || _j === void 0 ? void 0 : _j.brokerName;
+        else
+            this.claimForm.unInvoicedByBrokerName = null;
+        this.claimForm.handleClaiming = this.isDev ? this.handleDevClaim.bind(this) : this.handleClaim.bind(this);
+        this.claimForm.open();
+    }
+    // ====== End Component Logic
+    render() {
+        var _a;
+        const serviceItems = this.getServiceItems();
+        const isNoServicesAvailable = !this.isLoading && this.vehicleLookup && !serviceItems.length;
+        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 (index.h(index.Host, { key: '44360220c1bc6d62278f09d2e2dedf5e607636e2' }, index.h("vehicle-item-claim-form", { key: '84bf2c209a66abfa205e724ba14ea74d16787198', class: "vehicle-item-claim-form", maximumDocumentFileSizeInMb: this.maximumDocumentFileSizeInMb, uploadMultipleDocuments: this.uploadMultipleDocumentsAtTheForm, locale: Object.assign({ sharedLocales: this.locale.sharedLocales }, this.locale.claimForm) }), index.h(ClaimableItemPopover, { key: '9afc9a2220229a1a18dfcf60eddc82c9fccf5086', locale: this.locale, claim: this.claim.bind(this), item: this.selectedClaimItem, showPopover: this.showClaimableItemPopover, targetLocation: this.popoverTargetLocation }), index.h(vehicleInfoLayout.VehicleInfoLayout, { key: 'e29f026f769f9ba2faf944d8fc9c89a58d54c56f', 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 }, index.h("div", { key: 'e0a9efd29b5597e4dcb4eeb866f6509248956f8b', dir: "ltr", class: cn.cn('relative flex items-center h-[320px] transition-all duration-300', { loading: this.isLoading || this.tabAnimationLoading }) }, index.h("div", { key: '318a1e9f274cbaffeccb4e031ed45727942da8f6', dir: this.locale.sharedLocales.direction, class: "absolute top-0 z-10 w-full pt-[16px]" }, index.h("div", { key: '610e25bec66ff292599b940107ca8d47b9b7296a', class: cn.cn('duration-300', { 'translate-y-[-50%] opacity-0': hideTabs }) }, index.h("shift-tabs", { key: '09776839ef94cc3669122708b569035461ec9b13', activeTabLabel: this.activeTab, changeActiveTab: this.onActiveTabChange, tabs: tabs }))), index.h("div", { key: '0aecf12769963ca12e3b89a888bc6aef95284933', class: cn.cn('absolute w-[calc(100%-60px)] left-[30px] progress-container-style opacity-0', { 'opacity-100': this.isLoading || this.tabAnimationLoading }) }, index.h("div", { key: 'bf6e063fd65c34efb40cbd87ab6282617e533f63', class: "w-full h-full rounded-[4px] overflow-x-hidden absolute left-0 top-0" }, index.h("div", { key: 'a3041409aadacc17c846208fa8a37b140dcc2179', class: "absolute opacity-0 bg-[#1a1a1a] w-[150%] h-full" }), index.h("div", { key: '8071ef4c5df5bb97a08d78e55354cd313d2bc001', class: "absolute h-full bg-[linear-gradient(to_bottom,_#428bca_0%,_#3071a9_100%)] lane-inc" }), index.h("div", { key: 'f9191cf4d792b4ddb44c629e48de1d8e7f266a46', class: "absolute h-full bg-[linear-gradient(to_bottom,_#428bca_0%,_#3071a9_100%)] lane-dec" }))), index.h("div", { key: '861ef1c868847ed41d3a183187ec47f35fd4b771', dir: this.locale.sharedLocales.direction, class: cn.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),
+            }) }, index.h("span", { key: '1524fe7df95945e61b47d1eeb61fe0ea71bae523', class: "font-semibold" }, this.showPrintBox ? this.locale.successFulClaimMessage : this.locale.warrantyAndServicesNotActivated), index.h("button", { key: '83e2945f1874e1f72042d3256144ce6497f527c5', class: "claim-button", onClick: this.showPrintBox ? this.printLastClaimResponse : this.activateClaimItem }, this.showPrintBox ? index.h(PrintIcon, { class: "size-[30px] duration-200" }) : index.h(activationIcon.ActivationIcon, { class: "size-[30px] duration-200" }), index.h("span", { key: 'b40c96dff55772899aed1f2fdf5a3d97c200dd4b' }, this.showPrintBox ? this.locale.print : this.locale.activateNow))), index.h("div", { key: 'e283a8e067b2a25fa700383923f4b1fcb8b9f64a', class: "claimable-items-box px-[30px] min-w-full relative overflow-x-scroll h-full overflow-y-hidden" }, index.h("div", { key: 'cc7b8b22ecdba6060e8823ad3c44143328cc9a64', class: "flex relative w-fit min-w-full items-center h-full [&_*]:shrink-0 gap-[250px] justify-between" }, index.h("div", { key: 'd56212043b5e13ace1f023b1b617605282ba6753', class: cn.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,
+            }) }, index.h("div", { key: 'a537adcf3a231d964282b7b1791e93fd490e62a1', part: "progress-bar", class: "progress-bar transition-all w-1/2 h-full bg-[linear-gradient(to_bottom,_#428bca_0%,_#3071a9_100%)]" })), index.h("div", { key: 'beb0abf55009aa202bd29ccfaaa7720a5a475ed7', class: "ml-[-125px]" }), serviceItems.map((item, idx) => (index.h(ClaimableItem, { item: item, locale: this.locale, setClaimableItemPopover: this.setClaimableItemPopover, addStatusClass: item.status !== 'pending' || serviceItems.findIndex(i => i.status === 'pending') === idx }))), index.h("div", { key: 'a035f9892e2ac7a4136bffe471c03e2d02eb6c85', class: "ml-[-125px]" })), index.h("div", { key: '7411e36b7cebaaab816e18480ccfcb2e202323c3', dir: this.locale.sharedLocales.direction, class: cn.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,
+            }) }, index.h(emptyTableIcon.EmptyTableIcon, { key: '116b499c66991c504a80092b6b142219b414ce64', class: "size-[90px]" }), index.h("div", { key: '4e75124a913148beb49815ae3b4c16d58eb3d3b3', class: "text-[22px]" }, this.locale.sharedLocales.errors.noServiceAvailable)))))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "language": ["changeLanguage"],
+        "isLoading": ["onLoadingChange"],
+        "vehicleLookup": ["onVehicleChange"]
+    }; }
+};
+VehicleClaimableItems.style = vehicleClaimableItemsCss;
+
+const vehiclePaintThicknessCss = "*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}/*! tailwindcss v3.4.15 | 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}.fixed{position:fixed}.absolute{position:absolute}.\\!relative{position:relative!important}.relative{position:relative}.left-0{left:0}.top-0{top:0}.z-10{z-index:10}.block{display:block}.flex{display:flex}.hidden{display:none}.origin-left{transform-origin:left}.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))}.\\!overflow-hidden{overflow:hidden!important}.\\!rounded-\\[4px\\]{border-radius:4px!important}.border{border-width:1px}.opacity-0{opacity:0}.opacity-100{opacity:1}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-500{transition-duration:.5s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.shift-skeleton{border-radius:4px!important;position:relative!important}.loading .shift-skeleton,.loading.shift-skeleton{overflow:hidden!important;pointer-events:none!important;position:relative!important}.shift-skeleton:after{background:linear-gradient(-45deg,#d4d8de,#e2e5e9,#d4d8de);background-size:300% 300%;border-radius:4px!important;content:\"\";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transform-origin:left;transition-duration:.5s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%;z-index:10}.loading .shift-skeleton:after,.loading.shift-skeleton:after{--tw-scale-x:1;animation:shimmer 2s ease-in-out infinite;opacity:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes shimmer{0%{background-position:100% 0}50%{background-position:0 100%}to{background-position:100% 0}}.image-viewer-overlay{background-color:rgba(0,0,0,.4);height:100dvh;left:0;opacity:0;pointer-events:none;position:fixed;top:0;transition-duration:.4s;transition-property:all;width:100dvw;z-index:50}.image-viewer-overlay.active{opacity:1;pointer-events:auto;transition-delay:.2s}.image-viewer-close-btn{align-items:center;cursor:pointer;display:flex;flex-direction:column;float:right;height:3rem;justify-content:center;margin-right:16px;margin-top:16px;width:3rem}.image-viewer-close-line{background-color:#fff;border-radius:9999px;height:.25rem;position:absolute;width:3rem}.image-viewer-close-line.first{transform:rotate(45deg)}.image-viewer-close-line.second{transform:rotate(-45deg)}.image-viewer-expanded-image{border-radius:.5rem;opacity:0;position:fixed;transition-property:all;z-index:50}.vehicle-info-container{background-color:#fdfdfd;border:1px solid #dcdcdc;border-radius:5px;box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 hsla(0,0%,100%,.1);overflow:hidden;padding:0;position:relative;transition-duration:.5s;transition-property:all}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#f6f6f6;border-radius:5px;border-top:1px solid #dcdcdc;border-top-left-radius:0;border-top-right-radius:0}::-webkit-scrollbar-thumb{background:#c5c5c5;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#a1a1a1}.hide-scroll ::-webkit-scrollbar-thumb,.hide-scroll::-webkit-scrollbar-thumb,.loading ::-webkit-scrollbar-thumb{background:transparent}.vehicle-info-body{display:flex;flex-direction:column;overflow:hidden;position:relative;transition-duration:.5s;transition-property:all;transition-timing-function:ease-in-out}.vehicle-info-content{transition-duration:.5s;transition-property:all;width:100%}.vehicle-info-header{align-items:center;background-color:#f6f6f6;border:1px solid #ededed;display:flex;height:54px;justify-content:center;text-align:center}.vehicle-info-header-vin{display:inline-block;font-size:16px;transition-duration:.5s;transition-property:all}.vehicle-info-header-vin span{color:#ef4444}.loading .vehicle-info-header-vin{opacity:0;transform:scale(1.5);visibility:hidden}:host{all:initial!important;display:block}*{font-family:Arial}.static{position:static}.h-\\[200px\\]{height:200px}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.text-\\[26px\\]{font-size:26px}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.pointer-events-none{pointer-events:none}.mx-auto{margin-left:auto;margin-right:auto}.size-full{height:100%;width:100%}.h-\\[150px\\]{height:150px}.w-\\[84px\\]{width:84px}.w-fit{width:fit-content}.max-w-full{max-width:100%}.shrink-0{flex-shrink:0}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.gap-\\[16px\\]{gap:16px}.gap-\\[4px\\]{gap:4px}.gap-\\[8px\\]{gap:8px}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.rounded-lg{border-radius:.5rem}.border-b{border-bottom-width:1px}.bg-black\\/40{background-color:rgba(0,0,0,.4)}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.p-\\[12px\\]{padding:12px}.p-\\[6px\\]{padding:6px}.px-\\[24px\\]{padding-left:24px;padding-right:24px}.py-\\[16px\\]{padding-bottom:16px;padding-top:16px}.text-center{text-align:center}.font-semibold{font-weight:600}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.ring-0{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.duration-300{transition-duration:.3s}.hover\\:opacity-100:hover{opacity:1}.\\[\\&_div\\]\\:hover\\:\\!opacity-100:hover div{opacity:1!important}.\\[\\&_img\\]\\:hover\\:shadow-lg:hover img{--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);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.my-2{margin-bottom:.5rem;margin-top:.5rem}.grow{flex-grow:1}.items-stretch{align-items:stretch}.overflow-auto{overflow:auto}.p-\\[16px\\]{padding:16px}@media (min-width:768px){.md\\:justify-between{justify-content:space-between}}.\\[\\&\\>div\\]\\:grow>div{flex-grow:1}.mt-\\[32px\\]{margin-top:32px}.h-\\[25px\\]{height:25px}.h-\\[50px\\]{height:50px}.h-\\[8px\\]{height:8px}.bg-\\[\\#f6f6f6\\]{--tw-bg-opacity:1;background-color:rgb(246 246 246/var(--tw-bg-opacity,1))}.px-\\[16px\\]{padding-left:16px;padding-right:16px}.pt-\\[16px\\]{padding-top:16px}.pt-\\[40px\\]{padding-top:40px}.text-\\[18px\\]{font-size:18px}.font-bold{font-weight:700}.success-card{background-color:#d0e7de;border-color:#a2d0bb;color:#0b3521}.reject-card{background-color:#f7d7d8;border-color:#f2aeb5;color:#58151c}";
+
+const VehiclePaintThickness = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        // ====== Start Localization
+        this.language = 'en';
+        this.locale = Object.assign({ sharedLocales: getLocalLanguage.sharedLocalesSchema.getDefault() }, type.paintThicknessSchema.getDefault());
+        // ====== End Localization
+        // ====== Start Vehicle info layout prop
+        this.coreOnly = false;
+        // ====== End Vehicle info layout prop
+        // ====== Start Image Viewer Logic
+        this.expandedImage = '';
+        this.headers = {};
+        this.queryString = '';
+        this.isError = false;
+        this.isLoading = false;
+    }
+    async componentWillLoad() {
+        await this.changeLanguage(this.language);
+    }
+    async changeLanguage(newLanguage) {
+        const [sharedLocales, locale] = await Promise.all([getLocalLanguage.getSharedLocal(newLanguage), getLocalLanguage.getLocaleLanguage(newLanguage, 'vehicleLookup.paintThickness', type.paintThicknessSchema)]);
+        this.locale = Object.assign({ sharedLocales }, locale);
+    }
+    async setMockData(newMockData) {
+        this.mockData = newMockData;
+    }
+    async fetchData(newData, headers = {}) {
+        await setVehicleLookupData(this, newData, headers);
+    }
+    async setErrorMessage(message) {
+        setVehicleLookupErrorState(this, message);
+    }
+    onLoadingChange(newValue) {
+        if (this.loadingStateChange)
+            this.loadingStateChange(newValue);
+    }
+    // ====== End Vehicle Lookup Component Shared Logic
+    render() {
+        var _a, _b, _c;
+        const texts = this.locale;
+        const { imageGroups, parts } = ((_a = this === null || this === void 0 ? void 0 : this.vehicleLookup) === null || _a === void 0 ? void 0 : _a.paintThickness) ? (_b = this === null || this === void 0 ? void 0 : this.vehicleLookup) === null || _b === void 0 ? void 0 : _b.paintThickness : { imageGroups: [], parts: [] };
+        const tableHeaders = [
+            {
+                width: 250,
+                key: 'part',
+                label: texts.part,
+            },
+            {
+                width: 250,
+                key: 'left',
+                label: texts.left,
+            },
+            {
+                width: 250,
+                key: 'right',
+                label: texts.right,
+            },
+        ];
+        return (index.h(index.Host, { key: '8cf61108846927346d3f82476d9256910ab9d69b' }, index.h(ImageViewer, { key: '62750cb80021e7dcf03d41eaa1d77b710dee11fd', closeImageViewer: () => closeImageViewer.bind(this)(), expandedImage: this.expandedImage }), index.h(vehicleInfoLayout.VehicleInfoLayout, { key: 'd751dd10f6ab7008f3d0043cb8c52dfddbc72b13', isError: this.isError, coreOnly: this.coreOnly, isLoading: this.isLoading, 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 }, index.h("div", { key: 'a40960685950782a02ad7d6a8adb7ba3df519d01', class: "overflow-x-auto" }, index.h("information-table", { key: 'bc3c9e48db83cc9bbe0ea0ebd606cc2c29a79575', rows: parts, headers: tableHeaders, isLoading: this.isLoading })), index.h("flexible-container", { key: '0a5406039d391bcb4aa592bacd92663550e555e5', isOpened: !this.isLoading && !!(imageGroups === null || imageGroups === void 0 ? void 0 : imageGroups.length) }, index.h("div", { key: '43d1b6c6bf99ffdbc9a837691d246c012244a910', 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$1) => (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$1 }, index.h("h1", { class: "text-center border-b bg-slate-50 font-semibold p-[6px]" }, index.h("span", { class: "shift-skeleton" }, imageGroup === null || imageGroup === void 0 ? void 0 : imageGroup.name)), index.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) => (index.h("div", { class: cn.cn('flex shift-skeleton gap-[8px]', { loading: !image }), key: image + idx }, index.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" }, index.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" }, index.h("img", { src: eyeSvg }), index.h("span", { class: "text-white" }, texts.expand)), index.h("img", { src: image, class: "h-[150px] cursor-pointer shadow-sm rounded-lg w-[84px] transition-all duration-300" }))))))))))))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "language": ["changeLanguage"],
+        "isLoading": ["onLoadingChange"]
+    }; }
+};
+VehiclePaintThickness.style = vehiclePaintThicknessCss;
+
+const vehicleServiceHistoryCss = "*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}/*! tailwindcss v3.4.15 | 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}.absolute{position:absolute}.\\!relative{position:relative!important}.relative{position:relative}.left-0{left:0}.top-0{top:0}.z-10{z-index:10}.block{display:block}.flex{display:flex}.hidden{display:none}.origin-left{transform-origin:left}.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))}.\\!overflow-hidden{overflow:hidden!important}.\\!rounded-\\[4px\\]{border-radius:4px!important}.border{border-width:1px}.opacity-0{opacity:0}.opacity-100{opacity:1}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-500{transition-duration:.5s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.shift-skeleton{border-radius:4px!important;position:relative!important}.loading .shift-skeleton,.loading.shift-skeleton{overflow:hidden!important;pointer-events:none!important;position:relative!important}.shift-skeleton:after{background:linear-gradient(-45deg,#d4d8de,#e2e5e9,#d4d8de);background-size:300% 300%;border-radius:4px!important;content:\"\";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transform-origin:left;transition-duration:.5s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%;z-index:10}.loading .shift-skeleton:after,.loading.shift-skeleton:after{--tw-scale-x:1;animation:shimmer 2s ease-in-out infinite;opacity:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes shimmer{0%{background-position:100% 0}50%{background-position:0 100%}to{background-position:100% 0}}.vehicle-info-container{background-color:#fdfdfd;border:1px solid #dcdcdc;border-radius:5px;box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 hsla(0,0%,100%,.1);overflow:hidden;padding:0;position:relative;transition-duration:.5s;transition-property:all}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#f6f6f6;border-radius:5px;border-top:1px solid #dcdcdc;border-top-left-radius:0;border-top-right-radius:0}::-webkit-scrollbar-thumb{background:#c5c5c5;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#a1a1a1}.hide-scroll ::-webkit-scrollbar-thumb,.hide-scroll::-webkit-scrollbar-thumb,.loading ::-webkit-scrollbar-thumb{background:transparent}.vehicle-info-body{display:flex;flex-direction:column;overflow:hidden;position:relative;transition-duration:.5s;transition-property:all;transition-timing-function:ease-in-out}.vehicle-info-content{transition-duration:.5s;transition-property:all;width:100%}.vehicle-info-header{align-items:center;background-color:#f6f6f6;border:1px solid #ededed;display:flex;height:54px;justify-content:center;text-align:center}.vehicle-info-header-vin{display:inline-block;font-size:16px;transition-duration:.5s;transition-property:all}.vehicle-info-header-vin span{color:#ef4444}.loading .vehicle-info-header-vin{opacity:0;transform:scale(1.5);visibility:hidden}:host{all:initial!important;display:block}*{font-family:Arial}.static{position:static}.h-\\[200px\\]{height:200px}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.text-\\[26px\\]{font-size:26px}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.pointer-events-none{pointer-events:none}.mx-auto{margin-left:auto;margin-right:auto}.size-full{height:100%;width:100%}.h-\\[150px\\]{height:150px}.w-\\[84px\\]{width:84px}.w-fit{width:fit-content}.max-w-full{max-width:100%}.shrink-0{flex-shrink:0}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.gap-\\[16px\\]{gap:16px}.gap-\\[4px\\]{gap:4px}.gap-\\[8px\\]{gap:8px}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.rounded-lg{border-radius:.5rem}.border-b{border-bottom-width:1px}.bg-black\\/40{background-color:rgba(0,0,0,.4)}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.p-\\[12px\\]{padding:12px}.p-\\[6px\\]{padding:6px}.px-\\[24px\\]{padding-left:24px;padding-right:24px}.py-\\[16px\\]{padding-bottom:16px;padding-top:16px}.text-center{text-align:center}.font-semibold{font-weight:600}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.ring-0{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.duration-300{transition-duration:.3s}.hover\\:opacity-100:hover{opacity:1}.\\[\\&_div\\]\\:hover\\:\\!opacity-100:hover div{opacity:1!important}.\\[\\&_img\\]\\:hover\\:shadow-lg:hover img{--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);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.my-2{margin-bottom:.5rem;margin-top:.5rem}.grow{flex-grow:1}.items-stretch{align-items:stretch}.overflow-auto{overflow:auto}.p-\\[16px\\]{padding:16px}@media (min-width:768px){.md\\:justify-between{justify-content:space-between}}.\\[\\&\\>div\\]\\:grow>div{flex-grow:1}.mt-\\[32px\\]{margin-top:32px}.h-\\[25px\\]{height:25px}.h-\\[50px\\]{height:50px}.h-\\[8px\\]{height:8px}.bg-\\[\\#f6f6f6\\]{--tw-bg-opacity:1;background-color:rgb(246 246 246/var(--tw-bg-opacity,1))}.px-\\[16px\\]{padding-left:16px;padding-right:16px}.pt-\\[16px\\]{padding-top:16px}.pt-\\[40px\\]{padding-top:40px}.text-\\[18px\\]{font-size:18px}.font-bold{font-weight:700}.success-card{background-color:#d0e7de;border-color:#a2d0bb;color:#0b3521}.reject-card{background-color:#f7d7d8;border-color:#f2aeb5;color:#58151c}";
+
+const VehicleServiceHistory = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        // ====== Start Localization
+        this.language = 'en';
+        this.locale = Object.assign({ sharedLocales: getLocalLanguage.sharedLocalesSchema.getDefault() }, type.ServiceHistorySchema.getDefault());
+        // ====== End Localization
+        // ====== Start Vehicle info layout prop
+        this.coreOnly = false;
+        this.headers = {};
+        this.queryString = '';
+        this.isError = false;
+        this.isLoading = false;
+    }
+    async componentWillLoad() {
+        await this.changeLanguage(this.language);
+    }
+    async changeLanguage(newLanguage) {
+        const [sharedLocales, locale] = await Promise.all([getLocalLanguage.getSharedLocal(newLanguage), getLocalLanguage.getLocaleLanguage(newLanguage, 'vehicleLookup.serviceHistory', type.ServiceHistorySchema)]);
+        this.locale = Object.assign({ sharedLocales }, locale);
+    }
+    async setMockData(newMockData) {
+        this.mockData = newMockData;
+    }
+    async fetchData(newData, headers = {}) {
+        await setVehicleLookupData(this, newData, headers);
+    }
+    async setErrorMessage(message) {
+        setVehicleLookupErrorState(this, message);
+    }
+    onLoadingChange(newValue) {
+        if (this.loadingStateChange)
+            this.loadingStateChange(newValue);
+    }
+    // ====== End Vehicle Lookup Component Shared Logic
+    render() {
+        var _a, _b;
+        const tableHeaders = [
+            {
+                width: 400,
+                key: 'branchName',
+                label: this.locale.branch,
+            },
+            {
+                width: 200,
+                key: 'companyName',
+                label: this.locale.dealer,
+            },
+            {
+                width: 200,
+                key: 'invoiceNumber',
+                label: this.locale.invoiceNumber,
+            },
+            {
+                width: 200,
+                key: 'serviceDate',
+                label: this.locale.date,
+            },
+            {
+                width: 400,
+                key: 'serviceType',
+                label: this.locale.serviceType,
+            },
+            {
+                width: 200,
+                key: 'mileage',
+                label: this.locale.odometer,
+            },
+        ];
+        return (index.h(index.Host, { key: '1684f1780aee5d611ce9ce6850b342bb20e55c14' }, index.h(vehicleInfoLayout.VehicleInfoLayout, { key: '2803f06159cce90dfad8b9245a8c97b3590fe761', 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 }, index.h("div", { key: 'e51ae5061ea05147ae74cb7c24569d8da5d90517', class: "overflow-x-auto" }, index.h("information-table", { key: '465c56e2a1152a29369b8dd2d0f38211c3b4ab66', rows: ((_b = this.vehicleLookup) === null || _b === void 0 ? void 0 : _b.serviceHistory) || [], headers: tableHeaders, isLoading: this.isLoading })))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "language": ["changeLanguage"],
+        "isLoading": ["onLoadingChange"]
+    }; }
+};
+VehicleServiceHistory.style = vehicleServiceHistoryCss;
+
+const vehicleSpecificationCss = "*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}/*! tailwindcss v3.4.15 | 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}.absolute{position:absolute}.\\!relative{position:relative!important}.relative{position:relative}.left-0{left:0}.top-0{top:0}.z-10{z-index:10}.block{display:block}.flex{display:flex}.hidden{display:none}.origin-left{transform-origin:left}.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))}.\\!overflow-hidden{overflow:hidden!important}.\\!rounded-\\[4px\\]{border-radius:4px!important}.border{border-width:1px}.opacity-0{opacity:0}.opacity-100{opacity:1}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-500{transition-duration:.5s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.shift-skeleton{border-radius:4px!important;position:relative!important}.loading .shift-skeleton,.loading.shift-skeleton{overflow:hidden!important;pointer-events:none!important;position:relative!important}.shift-skeleton:after{background:linear-gradient(-45deg,#d4d8de,#e2e5e9,#d4d8de);background-size:300% 300%;border-radius:4px!important;content:\"\";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transform-origin:left;transition-duration:.5s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%;z-index:10}.loading .shift-skeleton:after,.loading.shift-skeleton:after{--tw-scale-x:1;animation:shimmer 2s ease-in-out infinite;opacity:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes shimmer{0%{background-position:100% 0}50%{background-position:0 100%}to{background-position:100% 0}}.vehicle-info-container{background-color:#fdfdfd;border:1px solid #dcdcdc;border-radius:5px;box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 hsla(0,0%,100%,.1);overflow:hidden;padding:0;position:relative;transition-duration:.5s;transition-property:all}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#f6f6f6;border-radius:5px;border-top:1px solid #dcdcdc;border-top-left-radius:0;border-top-right-radius:0}::-webkit-scrollbar-thumb{background:#c5c5c5;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#a1a1a1}.hide-scroll ::-webkit-scrollbar-thumb,.hide-scroll::-webkit-scrollbar-thumb,.loading ::-webkit-scrollbar-thumb{background:transparent}.vehicle-info-body{display:flex;flex-direction:column;overflow:hidden;position:relative;transition-duration:.5s;transition-property:all;transition-timing-function:ease-in-out}.vehicle-info-content{transition-duration:.5s;transition-property:all;width:100%}.vehicle-info-header{align-items:center;background-color:#f6f6f6;border:1px solid #ededed;display:flex;height:54px;justify-content:center;text-align:center}.vehicle-info-header-vin{display:inline-block;font-size:16px;transition-duration:.5s;transition-property:all}.vehicle-info-header-vin span{color:#ef4444}.loading .vehicle-info-header-vin{opacity:0;transform:scale(1.5);visibility:hidden}:host{all:initial!important;display:block}*{font-family:Arial}.static{position:static}.h-\\[200px\\]{height:200px}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.text-\\[26px\\]{font-size:26px}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.pointer-events-none{pointer-events:none}.mx-auto{margin-left:auto;margin-right:auto}.size-full{height:100%;width:100%}.h-\\[150px\\]{height:150px}.w-\\[84px\\]{width:84px}.w-fit{width:fit-content}.max-w-full{max-width:100%}.shrink-0{flex-shrink:0}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.gap-\\[16px\\]{gap:16px}.gap-\\[4px\\]{gap:4px}.gap-\\[8px\\]{gap:8px}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.rounded-lg{border-radius:.5rem}.border-b{border-bottom-width:1px}.bg-black\\/40{background-color:rgba(0,0,0,.4)}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.p-\\[12px\\]{padding:12px}.p-\\[6px\\]{padding:6px}.px-\\[24px\\]{padding-left:24px;padding-right:24px}.py-\\[16px\\]{padding-bottom:16px;padding-top:16px}.text-center{text-align:center}.font-semibold{font-weight:600}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.ring-0{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.duration-300{transition-duration:.3s}.hover\\:opacity-100:hover{opacity:1}.\\[\\&_div\\]\\:hover\\:\\!opacity-100:hover div{opacity:1!important}.\\[\\&_img\\]\\:hover\\:shadow-lg:hover img{--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);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.my-2{margin-bottom:.5rem;margin-top:.5rem}.grow{flex-grow:1}.items-stretch{align-items:stretch}.overflow-auto{overflow:auto}.p-\\[16px\\]{padding:16px}@media (min-width:768px){.md\\:justify-between{justify-content:space-between}}.\\[\\&\\>div\\]\\:grow>div{flex-grow:1}.mt-\\[32px\\]{margin-top:32px}.h-\\[25px\\]{height:25px}.h-\\[50px\\]{height:50px}.h-\\[8px\\]{height:8px}.bg-\\[\\#f6f6f6\\]{--tw-bg-opacity:1;background-color:rgb(246 246 246/var(--tw-bg-opacity,1))}.px-\\[16px\\]{padding-left:16px;padding-right:16px}.pt-\\[16px\\]{padding-top:16px}.pt-\\[40px\\]{padding-top:40px}.text-\\[18px\\]{font-size:18px}.font-bold{font-weight:700}.success-card{background-color:#d0e7de;border-color:#a2d0bb;color:#0b3521}.reject-card{background-color:#f7d7d8;border-color:#f2aeb5;color:#58151c}";
+
+const VehicleSpecification = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        // ====== Start Localization
+        this.language = 'en';
+        this.locale = Object.assign({ sharedLocales: getLocalLanguage.sharedLocalesSchema.getDefault() }, type.specificationSchema.getDefault());
+        // ====== End Localization
+        // ====== Start Vehicle info layout prop
+        this.coreOnly = false;
+        this.headers = {};
+        this.queryString = '';
+        this.isError = false;
+        this.isLoading = false;
+    }
+    async componentWillLoad() {
+        await this.changeLanguage(this.language);
+    }
+    async changeLanguage(newLanguage) {
+        const [sharedLocales, locale] = await Promise.all([getLocalLanguage.getSharedLocal(newLanguage), getLocalLanguage.getLocaleLanguage(newLanguage, 'vehicleLookup.specification', type.specificationSchema)]);
+        this.locale = Object.assign({ sharedLocales }, locale);
+    }
+    async setMockData(newMockData) {
+        this.mockData = newMockData;
+    }
+    async fetchData(newData, headers = {}) {
+        await setVehicleLookupData(this, newData, headers);
+    }
+    async setErrorMessage(message) {
+        setVehicleLookupErrorState(this, message);
+    }
+    onLoadingChange(newValue) {
+        if (this.loadingStateChange)
+            this.loadingStateChange(newValue);
+    }
+    // ====== End Vehicle Lookup Component Shared Logic
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14;
+        const texts = this.locale;
+        let productionDate = null;
+        try {
+            if ((_b = (_a = this.vehicleLookup) === null || _a === void 0 ? void 0 : _a.vehicleSpecification) === null || _b === void 0 ? void 0 : _b.productionDate) {
+                const productionDateObj = new Date((_d = (_c = this.vehicleLookup) === null || _c === void 0 ? void 0 : _c.vehicleSpecification) === null || _d === void 0 ? void 0 : _d.productionDate);
+                productionDate = productionDateObj.toLocaleDateString(this.locale.sharedLocales.language, {
+                    year: 'numeric',
+                    month: 'long',
+                });
+            }
+        }
+        catch (error) {
+            productionDate = null;
+        }
+        return (index.h(index.Host, { key: 'e674d7d74ee7f2068ee925e89ba97ec9b7a735af' }, index.h(vehicleInfoLayout.VehicleInfoLayout, { key: 'ae5968c1c65d5dda04d7aa7cccb9a1f88e490417', 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 }, index.h("flexible-container", { key: '5199c84f543d33313f3e4af45e4c4e107740ff0e' }, index.h("div", { key: 'f0f32d1ddcaa23ad8574b33d3d2720f2b8ef1f96', class: "flex p-[16px] [&>div]:grow overflow-auto gap-[16px] items-stretch justify-center md:justify-between flex-wrap" }, index.h(materialCard.MaterialCard, { key: 'c34c7b4cddf43b2ae31d2045365bf938a96d25df', class: "grow", title: texts === null || texts === void 0 ? void 0 : texts.model, minWidth: "300px" }, index.h(materialCard.MaterialCardChildren, { key: '7bcd754484053eece5c3dbed42a722253b6f2ff0', 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()) || '', " ", index.h("br", { key: '114eab2c04bb77a82a368c5dfc123db2a36c0229', 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()) || '')), index.h(materialCard.MaterialCard, { key: '978e563e80d14878b107ad003ddc55ec099d826c', class: "grow", title: texts === null || texts === void 0 ? void 0 : texts.variant, minWidth: "300px" }, index.h(materialCard.MaterialCardChildren, { key: 'cb1f139f13757b8602353c77344fc6f346e6b1d9', 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()) || '', " ", index.h("br", { key: '8fea51f040b12d8f1d8f7ffa432e5d7863948ff5' }), ((_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()) || '')), index.h(materialCard.MaterialCard, { key: '00bc5bc232b2efb17ec32d268d3498004aa379df', 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" }), index.h(materialCard.MaterialCard, { key: 'f5058701919b33eec556d574af4e804c65722670', 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" }), index.h(materialCard.MaterialCard, { key: 'f6adc4d167558192b8cbf560bba2bc2ac8336c66', desc: !!productionDate ? productionDate : '', title: texts === null || texts === void 0 ? void 0 : texts.productionDate, minWidth: "250px" }), index.h(materialCard.MaterialCard, { key: 'ca93b8687aad5fdc1d53252de2bd010365b8a92f', 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" }))))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "language": ["changeLanguage"],
+        "isLoading": ["onLoadingChange"]
+    }; }
+};
+VehicleSpecification.style = vehicleSpecificationCss;
+
+const checkSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KICAgIDxwYXRoIGZpbGw9IiMwYjM1MjEiCiAgICAgICAgZD0iTTI1NiA1MTJBMjU2IDI1NiAwIDEgMCAyNTYgMGEyNTYgMjU2IDAgMSAwIDAgNTEyek0zNjkgMjA5TDI0MSAzMzdjLTkuNCA5LjQtMjQuNiA5LjQtMzMuOSAwbC02NC02NGMtOS40LTkuNC05LjQtMjQuNiAwLTMzLjlzMjQuNi05LjQgMzMuOSAwbDQ3IDQ3TDMzNSAxNzVjOS40LTkuNCAyNC42LTkuNCAzMy45IDBzOS40IDI0LjYgMCAzMy45eiIgLz4KPC9zdmc+';
+
+const xMarkSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KICAgIDxwYXRoIGZpbGw9IiM1ODE1MWMiCiAgICAgICAgZD0iTTI1NiA1MTJBMjU2IDI1NiAwIDEgMCAyNTYgMGEyNTYgMjU2IDAgMSAwIDAgNTEyek0xNzUgMTc1YzkuNC05LjQgMjQuNi05LjQgMzMuOSAwbDQ3IDQ3IDQ3LTQ3YzkuNC05LjQgMjQuNi05LjQgMzMuOSAwczkuNCAyNC42IDAgMzMuOWwtNDcgNDcgNDcgNDdjOS40IDkuNCA5LjQgMjQuNiAwIDMzLjlzLTI0LjYgOS40LTMzLjkgMGwtNDctNDctNDcgNDdjLTkuNCA5LjQtMjQuNiA5LjQtMzMuOSAwcy05LjQtMjQuNiAwLTMzLjlsNDctNDctNDctNDdjLTkuNC05LjQtOS40LTI0LjYgMC0zMy45eiIgLz4KPC9zdmc+';
+
+function StatusCard({ isLoading = false, opened = true, desc, className, fromDesc, toDesc, from, to, state = 'idle', icon = true }) {
+    return (index.h("flexible-container", { isOpened: opened, classes: cn.cn('shift-skeleton', { loading: isLoading || !opened }) },
+        index.h("div", { class: cn.cn('card', className, `${state}-card`) },
+            icon && state === 'reject' && index.h("img", { src: xMarkSvg }),
+            icon && state === 'warning' && index.h("img", { src: xMarkSvg }),
+            icon && state === 'success' && index.h("img", { src: checkSvg }),
+            from && (index.h("p", { class: "no-padding flex gap-2" },
+                index.h("span", { class: "font-semibold" },
+                    fromDesc,
+                    ":"),
+                " ",
+                desc)),
+            to && (index.h("p", { class: "no-padding flex gap-2" },
+                index.h("span", { class: "font-semibold" },
+                    toDesc,
+                    ":"),
+                " ",
+                desc)),
+            !from && !to && index.h("p", { class: state === 'idle' ? 'no-padding' : '' }, desc))));
+}
+
+function CardsContainer({ isLoading, vehicleInformation, isAuthorized, unInvoicedByBrokerName, warrantyLocale }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    return (index.h("div", { class: "tags-container mx-auto" },
+        index.h("flexible-container", { isOpened: !vehicleInformation || !!((_a = vehicleInformation === null || vehicleInformation === void 0 ? void 0 : vehicleInformation.saleInformation) === null || _a === void 0 ? void 0 : _a.companyName) },
+            index.h("div", { class: !(!vehicleInformation || !!((_b = vehicleInformation === null || vehicleInformation === void 0 ? void 0 : vehicleInformation.saleInformation) === null || _b === void 0 ? void 0 : _b.companyName)) && 'loading', style: { paddingBottom: '12px' } },
+                index.h("div", { class: "shift-skeleton !rounded-[4px]" },
+                    index.h("div", { class: "card warning-card" },
+                        index.h("p", { class: "no-padding flex gap-2" },
+                            index.h("span", { class: "font-semibold" },
+                                warrantyLocale.dealer,
+                                ":"),
+                            " ",
+                            ((_c = vehicleInformation === null || vehicleInformation === void 0 ? void 0 : vehicleInformation.saleInformation) === null || _c === void 0 ? void 0 : _c.companyName) || '',
+                            ' ',
+                            ((_d = vehicleInformation === null || vehicleInformation === void 0 ? void 0 : vehicleInformation.saleInformation) === null || _d === void 0 ? void 0 : _d.countryName) && `(${(_e = vehicleInformation === null || vehicleInformation === void 0 ? void 0 : vehicleInformation.saleInformation) === null || _e === void 0 ? void 0 : _e.countryName})`))))),
+        index.h("flexible-container", { classes: cn.cn({ loading: isLoading || !unInvoicedByBrokerName }), isOpened: !!unInvoicedByBrokerName },
+            index.h("div", { style: { paddingBottom: '12px' } },
+                index.h("div", { class: "shift-skeleton" },
+                    index.h("div", { class: "card warning-card" },
+                        index.h("img", { src: xMarkSvg }),
+                        index.h("p", null, unInvoicedByBrokerName ? warrantyLocale.notInvoiced + unInvoicedByBrokerName : ''))))),
+        index.h("div", { class: "warranty-tags" },
+            index.h(StatusCard, { state: vehicleInformation ? (isAuthorized ? 'success' : 'reject') : 'idle', desc: vehicleInformation ? (isAuthorized ? warrantyLocale.authorized : warrantyLocale.unauthorized) : '' }),
+            index.h(StatusCard, { state: vehicleInformation ? (((_f = vehicleInformation === null || vehicleInformation === void 0 ? void 0 : vehicleInformation.warranty) === null || _f === void 0 ? void 0 : _f.hasActiveWarranty) ? 'success' : 'reject') : 'idle', desc: vehicleInformation ? (((_g = vehicleInformation === null || vehicleInformation === void 0 ? void 0 : vehicleInformation.warranty) === null || _g === void 0 ? void 0 : _g.hasActiveWarranty) ? warrantyLocale.activeWarranty : warrantyLocale.notActiveWarranty) : '' }),
+            index.h(StatusCard, { from: true, icon: false, fromDesc: warrantyLocale.from, desc: ((_h = vehicleInformation === null || vehicleInformation === void 0 ? void 0 : vehicleInformation.warranty) === null || _h === void 0 ? void 0 : _h.warrantyStartDate) || '', opened: !!((_j = vehicleInformation === null || vehicleInformation === void 0 ? void 0 : vehicleInformation.warranty) === null || _j === void 0 ? void 0 : _j.warrantyStartDate) || !vehicleInformation, state: !!vehicleInformation ? (((_k = vehicleInformation === null || vehicleInformation === void 0 ? void 0 : vehicleInformation.warranty) === null || _k === void 0 ? void 0 : _k.hasActiveWarranty) ? 'success' : 'reject') : 'idle' }),
+            index.h(StatusCard, { to: true, icon: false, toDesc: warrantyLocale.to, desc: ((_l = vehicleInformation === null || vehicleInformation === void 0 ? void 0 : vehicleInformation.warranty) === null || _l === void 0 ? void 0 : _l.warrantyEndDate) || '', opened: !!((_m = vehicleInformation === null || vehicleInformation === void 0 ? void 0 : vehicleInformation.warranty) === null || _m === void 0 ? void 0 : _m.warrantyEndDate) || !vehicleInformation, state: !!vehicleInformation ? (((_o = vehicleInformation === null || vehicleInformation === void 0 ? void 0 : vehicleInformation.warranty) === null || _o === void 0 ? void 0 : _o.hasActiveWarranty) ? 'success' : 'reject') : 'idle' }))));
+}
+
+const vehicleWarrantyDetailsCss = "*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}/*! tailwindcss v3.4.15 | 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}.collapse{visibility:collapse}.absolute{left:0;position:absolute;top:0}.\\!relative{position:relative!important}.relative{position:relative}.sticky{position:sticky}.left-0{left:0}.top-0{top:0}.z-10{z-index:10}.mx-auto{margin-left:auto;margin-right:auto}.mt-4{margin-top:1rem}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-0{height:0;height:0!important}.flex-shrink{flex-shrink:1}.border-collapse{border-collapse:collapse}.origin-left{transform-origin:left}.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))}.flex-wrap{flex-wrap:wrap}.\\!overflow-hidden{overflow:hidden!important}.\\!rounded-\\[4px\\]{border-radius:4px!important}.border{border-width:1px}.border-slate-300{--tw-border-opacity:1;border-color:rgb(203 213 225/var(--tw-border-opacity,1))}.pb-3{padding-bottom:.75rem}.pb-4{padding-bottom:1rem}.pr-1{padding-right:4px}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.font-semibold{font-weight:600}.text-slate-900{--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.opacity-0{opacity:0}.opacity-100{opacity:1}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition:all;transition-duration:.3s}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-1000{transition-duration:1s}.duration-500{transition-duration:.5s}.duration-700{transition-duration:.7s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.success-card{background:#d0e7de!important;background-color:#d0e7de;border-color:#a2d0bb!important;border-color:#a2d0bb;color:#0b3521!important;color:#0b3521}.reject-card{background:#f7d7d8!important;background-color:#f7d7d8;border-color:#f2aeb5!important;border-color:#f2aeb5;color:#58151c!important;color:#58151c}.shift-skeleton{border-radius:4px!important;position:relative!important}.loading .shift-skeleton,.loading.shift-skeleton{overflow:hidden!important;pointer-events:none!important;position:relative!important}.shift-skeleton:after{background:linear-gradient(-45deg,#d4d8de,#e2e5e9,#d4d8de);background-size:300% 300%;border-radius:4px!important;content:\"\";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transform-origin:left;transition-duration:.5s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%;z-index:10}.loading .shift-skeleton:after,.loading.shift-skeleton:after{--tw-scale-x:1;animation:shimmer 2s ease-in-out infinite;opacity:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes shimmer{0%{background-position:100% 0}50%{background-position:0 100%}to{background-position:100% 0}}.vehicle-info-container{background-color:#fdfdfd;border:1px solid #dcdcdc;border-radius:5px;box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 hsla(0,0%,100%,.1);overflow:hidden;padding:0;position:relative;transition-duration:.5s;transition-property:all}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#f6f6f6;border-radius:5px;border-top:1px solid #dcdcdc;border-top-left-radius:0;border-top-right-radius:0}::-webkit-scrollbar-thumb{background:#c5c5c5;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#a1a1a1}.hide-scroll ::-webkit-scrollbar-thumb,.hide-scroll::-webkit-scrollbar-thumb,.loading ::-webkit-scrollbar-thumb{background:transparent}.vehicle-info-body{display:flex;flex-direction:column;overflow:hidden;position:relative;transition-duration:.5s;transition-property:all;transition-timing-function:ease-in-out}.vehicle-info-content{transition-duration:.5s;transition-property:all;width:100%}.vehicle-info-header{align-items:center;background-color:#f6f6f6;border:1px solid #ededed;display:flex;height:54px;justify-content:center;text-align:center}.vehicle-info-header-vin{display:inline-block;font-size:16px;transition-duration:.5s;transition-property:all}.vehicle-info-header-vin span{color:#ef4444}.loading .vehicle-info-header-vin{opacity:0;transform:scale(1.5);visibility:hidden}:host{all:initial!important;display:block}*{font-family:Arial}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fade-in{animation:fadeIn .3s ease-in forwards;opacity:0}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fade-out{animation:fadeIn .3s ease-in forwards;opacity:1}.loading-spinner{align-items:center;display:flex;height:100%;justify-content:center;pointer-events:none;transition:all;transition-duration:.1s;width:100%}.loading-spinner img{height:40px;width:40px}.warranty{overflow:hidden;position:relative;transition:all;transition-duration:.3s}.hide{opacity:0}.card{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1));border:1px solid;border-color:rgb(203 213 225/var(--tw-border-opacity,1));border-radius:6px;color:rgb(15 23 42/var(--tw-text-opacity,1));flex-shrink:0;gap:8px;padding:8px 12px}.card,.card p{align-items:center;display:flex}.card p{flex:1 1 0%;font-size:16px;height:25px;margin:0;padding-left:50px}.card p.no-padding{padding-left:4px}.card img{height:25px;width:25px}.recaptcha-response{border:1px solid;border-radius:8px;font-size:20px;margin:16px auto 0;padding:8px 16px;width:-moz-fit-content;width:fit-content}.warning-card{background:#fcf8e3;border-color:#faebcc!important;color:#8a6d3b}.span-entire-1st-row{grid-column:1/3;grid-row:1/3}.span-entire-2nd-row{grid-column:1/3;grid-row:2/3}.tags-container,.warranty-tags{max-width:1000px}.warranty-tags{display:grid;gap:12px;grid-template-columns:1fr 1fr}.pt-3,.py-3{padding-top:12px}.pb-3,.py-3{padding-bottom:12px}.pt-4,.py-4{padding-top:16px}.pb-4,.py-4{padding-bottom:16px}.max-w-500{max-width:500px}.mt-4,.my-4{margin-bottom:16px;margin-top:16px}.warranty *{box-sizing:border-box}.wrapper-table{border:1px solid #d6d8dc;border-radius:4px;display:flex;flex-direction:column;margin-top:12px;max-height:70vh;overflow:hidden}.ssc-table-container{flex:1 1 0%;height:0;overflow:auto}.wrapper-table .header{align-items:center;background:#e1e3e5;color:#383c43;display:flex;flex-shrink:0;font-size:18px;height:40px;justify-content:center;width:100%}.ssc-table{border-collapse:collapse;overflow:auto;position:relative;width:100%}.ssc-table thead{background-color:#fff;font-weight:700;position:sticky;top:0}.ssc-table td,.ssc-table th{border-bottom:1px solid #d6d8dc;padding:10px 20px;text-align:center;transition:all;transition-duration:.3s;white-space:nowrap}.ssc-table tr:hover{background:#f4f4f4}.ssc-table tr:last-child td{border:none}.table-cell-container{align-items:center;display:flex;gap:8px;justify-content:center;width:100%}.table-cell-labors-container,.table-cell-parts-container{flex-wrap:wrap}.table-cell-labors-container div,.table-cell-parts-container div{border-radius:4px;font-size:14px;padding:4px 8px}.table-cell-labors-container div.success,.table-cell-parts-container div.success{background:#d0e7de}.table-cell-labors-container div.reject,.table-cell-parts-container div.reject{background:#f7d7d8}.table-status-icon{height:20px;width:20px}.warranty-vin{font-size:20px;padding-top:4px;text-align:center}.recaptcha-container{display:flex;justify-content:center;overflow:hidden}.static{position:static}.h-\\[200px\\]{height:200px}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.text-\\[26px\\]{font-size:26px}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.pointer-events-none{pointer-events:none}.size-full{height:100%;width:100%}.h-\\[150px\\]{height:150px}.w-\\[84px\\]{width:84px}.w-fit{width:fit-content}.max-w-full{max-width:100%}.shrink-0{flex-shrink:0}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.gap-\\[16px\\]{gap:16px}.gap-\\[4px\\]{gap:4px}.gap-\\[8px\\]{gap:8px}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.rounded-lg{border-radius:.5rem}.border-b{border-bottom-width:1px}.bg-black\\/40{background-color:rgba(0,0,0,.4)}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.p-\\[12px\\]{padding:12px}.p-\\[6px\\]{padding:6px}.px-\\[24px\\]{padding-left:24px;padding-right:24px}.py-\\[16px\\]{padding-bottom:16px;padding-top:16px}.text-center{text-align:center}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.ring-0{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.duration-300{transition-duration:.3s}.hover\\:opacity-100:hover{opacity:1}.\\[\\&_div\\]\\:hover\\:\\!opacity-100:hover div{opacity:1!important}.\\[\\&_img\\]\\:hover\\:shadow-lg:hover img{--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);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.my-2{margin-bottom:.5rem;margin-top:.5rem}.grow{flex-grow:1}.items-stretch{align-items:stretch}.overflow-auto{overflow:auto}.p-\\[16px\\]{padding:16px}@media (min-width:768px){.md\\:justify-between{justify-content:space-between}}.\\[\\&\\>div\\]\\:grow>div{flex-grow:1}.mt-\\[32px\\]{margin-top:32px}.h-\\[25px\\]{height:25px}.h-\\[50px\\]{height:50px}.h-\\[8px\\]{height:8px}.bg-\\[\\#f6f6f6\\]{--tw-bg-opacity:1;background-color:rgb(246 246 246/var(--tw-bg-opacity,1))}.px-\\[16px\\]{padding-left:16px;padding-right:16px}.pt-\\[16px\\]{padding-top:16px}.pt-\\[40px\\]{padding-top:40px}.text-\\[18px\\]{font-size:18px}.font-bold{font-weight:700}.gap-2{gap:.5rem}";
+
+const VehicleWarrantyDetails = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        // ====== Start Localization
+        this.language = 'en';
+        this.locale = Object.assign({ sharedLocales: getLocalLanguage.sharedLocalesSchema.getDefault() }, type.warrantySchema.getDefault());
+        // ====== End Localization
+        // ====== Start Vehicle info layout prop
+        this.coreOnly = false;
+        this.headers = {};
+        this.queryString = '';
+        this.isError = false;
+        this.isLoading = false;
+        // ====== End Vehicle Lookup Component Shared Logic
+        // ====== Start Component Logic
+        this.showSsc = false;
+        this.recaptchaKey = '';
+        this.showWarranty = false;
+        this.unauthorizedSscLookupBaseUrl = '';
+        this.unauthorizedSscLookupQueryString = '';
+        this.cityId = null;
+        this.cityIntegrationId = null;
+        this.companyId = null;
+        this.companyIntegrationId = null;
+        this.companyBranchId = null;
+        this.companyBranchIntegrationId = null;
+        this.userId = null;
+        this.brandIntegrationId = null;
+        this.customerName = null;
+        this.customerPhone = null;
+        this.customerEmail = null;
+        this.showRecaptcha = false;
+        this.unInvoicedByBrokerName = null;
+        this.checkingUnauthorizedSSC = false;
+        this.recaptchaRes = null;
+    }
+    async componentWillLoad() {
+        await this.changeLanguage(this.language);
+    }
+    async changeLanguage(newLanguage) {
+        const [sharedLocales, locale] = await Promise.all([getLocalLanguage.getSharedLocal(newLanguage), getLocalLanguage.getLocaleLanguage(newLanguage, 'vehicleLookup.warranty', type.warrantySchema)]);
+        this.locale = Object.assign({ sharedLocales }, locale);
+    }
+    async setMockData(newMockData) {
+        this.mockData = newMockData;
+    }
+    async fetchData(newData, headers = {}) {
+        this.recaptchaRes = null;
+        clearInterval(this.recaptchaIntervalRef);
+        await setVehicleLookupData(this, newData, headers, {
+            beforeAssignment: async (response, { scopedTimeoutRef }) => {
+                var _a, _b, _c;
+                if (((_a = response === null || response === void 0 ? void 0 : response.saleInformation) === null || _a === void 0 ? void 0 : _a.broker) !== null && ((_c = (_b = response === null || response === void 0 ? void 0 : response.saleInformation) === null || _b === void 0 ? void 0 : _b.broker) === null || _c === void 0 ? void 0 : _c.invoiceDate) === null)
+                    this.unInvoicedByBrokerName = response.saleInformation.broker.brokerName;
+                else
+                    this.unInvoicedByBrokerName = null;
+                await this.handleInitializingRecaptcha(response, scopedTimeoutRef);
+                return response;
+            },
+        });
+    }
+    async setErrorMessage(message) {
+        setVehicleLookupErrorState(this, message);
+    }
+    onLoadingChange(newValue) {
+        if (this.loadingStateChange)
+            this.loadingStateChange(newValue);
+    }
+    async handleInitializingRecaptcha(newVehicleLookup, scopedTimeoutRef) {
+        if ((newVehicleLookup === null || newVehicleLookup === void 0 ? void 0 : newVehicleLookup.isAuthorized) === false && this.showSsc && this.recaptchaKey !== '') {
+            grecaptcha.reset();
+            // await new Promise(r => setTimeout(r, 400));
+            this.recaptchaIntervalRef = setInterval(async () => {
+                const recaptchaResponse = grecaptcha.getResponse();
+                if (recaptchaResponse) {
+                    clearInterval(this.recaptchaIntervalRef);
+                    if (this.isDev) {
+                        this.checkingUnauthorizedSSC = true;
+                        this.showRecaptcha = false;
+                        await new Promise(r => setTimeout(r, 3000));
+                        this.checkingUnauthorizedSSC = false;
+                        const hasPendingSSC = Math.random() < 0.5 ? false : true;
+                        this.recaptchaRes = {
+                            hasSSC: hasPendingSSC,
+                            message: hasPendingSSC ? 'pendingSSC' : 'noPendingSSC',
+                        };
+                    }
+                    else {
+                        this.checkingUnauthorizedSSC = true;
+                        this.showRecaptcha = false;
+                        const response = await fetch(`${this.unauthorizedSscLookupBaseUrl}${newVehicleLookup === null || newVehicleLookup === void 0 ? void 0 : newVehicleLookup.vin}/${newVehicleLookup === null || newVehicleLookup === void 0 ? void 0 : newVehicleLookup.sscLogId}?${this.unauthorizedSscLookupQueryString}`, {
+                            signal: this.abortController.signal,
+                            headers: Object.assign(Object.assign({}, this.headers), { 'Ssc-Recaptcha-Token': recaptchaResponse }),
+                        });
+                        const vinResponse = await response.json();
+                        if (vinResponse && this.networkTimeoutRef === scopedTimeoutRef) {
+                            this.checkingUnauthorizedSSC = false;
+                            const hasPendingSSC = vinResponse.sscLookupStatus === 1;
+                            this.recaptchaRes = {
+                                hasSSC: hasPendingSSC,
+                                message: hasPendingSSC ? 'pendingSSC' : 'noPendingSSC',
+                            };
+                        }
+                        else
+                            throw new Error('wrongResponseFormat');
+                    }
+                }
+            }, 500);
+            this.showRecaptcha = true;
+        }
+        else {
+            this.showRecaptcha = false;
+        }
+    }
+    async componentDidLoad() {
+        if (this.recaptchaKey !== '') {
+            const script = document.createElement('script');
+            script.src = 'https://www.google.com/recaptcha/api.js';
+            script.async = true;
+            script.defer = true;
+            script.onload = () => console.log('reCAPTCHA script loaded');
+            document.head.appendChild(script);
+        }
+    }
+    // ====== End Component Logic
+    render() {
+        var _a, _b, _c, _d, _e, _f;
+        const tableHeaders = [
+            {
+                width: 200,
+                key: 'sscTableCode',
+                label: this.locale.sscTableCode,
+            },
+            {
+                width: 400,
+                key: 'sscTableDescription',
+                label: this.locale.sscTableDescription,
+            },
+            {
+                width: 200,
+                key: 'sscTableRepairStatus',
+                label: this.locale.sscTableRepairStatus,
+            },
+            {
+                width: 200,
+                key: 'sscTableOPCode',
+                label: this.locale.sscTableOPCode,
+            },
+            {
+                width: 200,
+                key: 'sscTablePartNumber',
+                label: this.locale.sscTablePartNumber,
+            },
+        ];
+        const rows = !((_a = this.vehicleLookup) === null || _a === void 0 ? void 0 : _a.ssc)
+            ? []
+            : (_b = this.vehicleLookup) === null || _b === void 0 ? void 0 : _b.ssc.map(sscItem => ({
+                sscTableCode: sscItem === null || sscItem === void 0 ? void 0 : sscItem.sscCode,
+                sscTableDescription: sscItem === null || sscItem === void 0 ? void 0 : sscItem.description,
+                sscTableRepairStatus: () => (index.h("div", { class: "table-cell-container" }, index.h("img", { class: "table-status-icon", src: (sscItem === null || sscItem === void 0 ? void 0 : sscItem.repaired) ? checkSvg : xMarkSvg }), " ", sscItem === null || sscItem === void 0 ? void 0 :
+                    sscItem.repairDate)),
+                sscTableOPCode: () => (index.h("div", { class: "table-cell-container table-cell-labors-container" }, !!(sscItem === null || sscItem === void 0 ? void 0 : sscItem.labors.length)
+                    ? sscItem === null || sscItem === void 0 ? void 0 : sscItem.labors.map(labor => (index.h("div", { key: labor === null || labor === void 0 ? void 0 : labor.laborCode, class: "success" }, labor === null || labor === void 0 ? void 0 : labor.laborCode)))
+                    : '...')),
+                sscTablePartNumber: () => (index.h("div", { class: "table-cell-container table-cell-parts-container" }, !!(sscItem === null || sscItem === void 0 ? void 0 : sscItem.parts.length)
+                    ? sscItem === null || sscItem === void 0 ? void 0 : sscItem.parts.map(part => (index.h("div", { key: part === null || part === void 0 ? void 0 : part.partNumber, class: (part === null || part === void 0 ? void 0 : part.isAvailable) ? 'success' : 'reject' }, part === null || part === void 0 ? void 0 : part.partNumber)))
+                    : '...')),
+            }));
+        const templateRow = {
+            sscTableOPCode: () => index.h("div", { key: '2bf9883223f556cade2096a4a65301b150c07519', class: "h-[25px]" }),
+            sscTablePartNumber: () => index.h("div", { key: 'b565fc2b9099e4466d0d125888ec560194b7075f', class: "h-[25px]" }),
+            sscTableRepairStatus: () => index.h("div", { key: '111268a1f665d8d8d7233123bac0ec7fd526ccb4', class: "h-[25px]" }),
+        };
+        return (index.h(index.Host, { key: 'af4f7f264e7683b9436340a36a3262ecb001c921' }, index.h(vehicleInfoLayout.VehicleInfoLayout, { key: 'f37e2908aa9656fedeac6442ca8286ce9a9976e6', isError: this.isError, coreOnly: this.coreOnly, isLoading: this.isLoading, 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 }, index.h("div", { key: 'b0015df327ff5673695ced677cde2d95fade6c93', class: "p-[16px]" }, this.showWarranty && (index.h(CardsContainer, { key: 'c9e5d546d9f9f6e01b187dfd9c5c02d1073303d6', isLoading: this.isLoading, warrantyLocale: this.locale, vehicleInformation: this.vehicleLookup, isAuthorized: (_d = this.vehicleLookup) === null || _d === void 0 ? void 0 : _d.isAuthorized, unInvoicedByBrokerName: this.unInvoicedByBrokerName })), index.h("div", { key: 'f2132df8863b519ebdbd59ef99f2ee6a22d9e0c7', class: "h-[8px]" }), index.h("flexible-container", { key: '609efd9db96dfe055890e4e04ff623b345e1de90', isOpened: this.showRecaptcha, classes: cn.cn('w-fit mx-auto shift-skeleton', { loading: !this.showRecaptcha || this.isLoading }) }, index.h("div", { key: '2735b5323442a39bbb0de0bfbee3e0a3fead21df', style: { height: 'auto' }, class: "recaptcha-container" }, index.h("slot", { key: '023c78bd79b515e541d0a0e973e2b46870db26c8' })), this.recaptchaRes && (index.h("div", { key: '2dddeaed43b4929feec4751d162a29a3caf8ea6e', class: cn.cn('recaptcha-response', !((_e = this.recaptchaRes) === null || _e === void 0 ? void 0 : _e.hasSSC) ? 'success-card' : 'reject-card ') }, this.locale[(_f = this.recaptchaRes) === null || _f === void 0 ? void 0 : _f.message])))), index.h("flexible-container", { key: 'dec279857eb74e870c6b2c42f2791fd870ecf933', isOpened: this.checkingUnauthorizedSSC, classes: "w-fit mx-auto" }, index.h("div", { key: '555873f6a881158e284edb0f3e5300e6b34d1c5f', class: "pt-[16px]" }, index.h("div", { key: '834c14261475bf3712ddddb35f009615fc84ab3e', class: "flex shift-skeleton flex-col gap-[8px]" }, index.h("strong", { key: '1d36783f3c926fe06825b0eb4ab8b3c27a026a08' }, this.locale.checkingTMC), index.h("div", { key: 'fd212eeedcc50149bdd41c76318a38b1a766ee63', class: "relative pt-[40px]" }, index.h("loading-spinner", { key: '7d9ace19a08b0eedd48663e462de823aba4a420e', isLoading: this.checkingUnauthorizedSSC }))))), index.h("div", { key: 'ec08b847e156a8a0ea2f9d599835c3e77d612ad6', class: "mt-[32px] mx-auto w-fit max-w-full" }, index.h("div", { key: '849df6df9a3c11af46446b3ae16a61c19665a7fe', class: "bg-[#f6f6f6] h-[50px] flex items-center justify-center px-[16px] font-bold text-[18px]" }, this.locale.sscCampings), index.h("div", { key: 'e1f0c2091342d28f598076802966fd23d7354a1e', class: "overflow-x-auto" }, index.h("information-table", { key: '0ef1792b51ed62f5b0ab280d9805b27739a0d120', isLoading: this.isLoading, templateRow: templateRow, rows: rows, headers: tableHeaders }))))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "language": ["changeLanguage"],
+        "isLoading": ["onLoadingChange"]
+    }; }
+};
+VehicleWarrantyDetails.style = vehicleWarrantyDetailsCss;
+
+exports.vehicle_accessories = VehicleAccessories;
+exports.vehicle_claimable_items = VehicleClaimableItems;
+exports.vehicle_paint_thickness = VehiclePaintThickness;
+exports.vehicle_service_history = VehicleServiceHistory;
+exports.vehicle_specification = VehicleSpecification;
+exports.vehicle_warranty_details = VehicleWarrantyDetails;