adp-web-components 0.3.13 → 0.3.15

package/dist/cjs/{vehicle-accessories_7.cjs.entry.js → vehicle-accessories_8.cjs.entry.js}

@@ -4,19 +4,19 @@
  */
 'use strict';
 
-var index = require('./index-Bi6W8dMN.js');
-var triangleAlert = require('./triangle-alert-CN15U99s.js');
+var index = require('./index-BdHAYIvO.js');
+var triangleAlert = require('./triangle-alert-BjQBwsRv.js');
 var type = require('./type-BHyLb1S8.js');
-var vehicleInfoLayout = require('./vehicle-info-layout-sV6altzn.js');
+var vehicleInfoLayout = require('./vehicle-info-layout-CRpL8UMY.js');
 var smartInvokable = require('./smart-invokable-BdyCLX9_.js');
 var validateVin = require('./validate-vin-CJDIXpJO.js');
 var types = require('./types-DV_cOCRi.js');
-var getLocalLanguage = require('./get-local-language-BR0p0bBg.js');
+var getLocalLanguage = require('./get-local-language-BSOLV9z2.js');
 var cn = require('./cn-BHnqYtun.js');
-var loaderIcon = require('./loader-icon-By94sKO7.js');
-var materialCard = require('./material-card-BqsZgRVE.js');
-var arrowIcon = require('./arrow-icon-CJX1aUJ8.js');
-var calendarDaysIcon = require('./calendar-days-icon-CsHz2cgV.js');
+var loaderIcon = require('./loader-icon-aY56OHXW.js');
+var materialCard = require('./material-card-D1UQcy6U.js');
+var arrowIcon = require('./arrow-icon-yMlETDbD.js');
+var calendarDaysIcon = require('./calendar-days-icon-Cf14ROXV.js');
 
 const vehicleRequestHeaders = {
     cityId: 'City-Id',
@@ -190,9 +190,9 @@ const VehicleAccessories = class {
             image: () => (index.h("div", { class: "size-[100px] flex mx-auto items-center justify-center" }, index.h("button", { onClick: ({ target }) => triangleAlert.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: triangleAlert.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: 'a3f944e419e8c0e635f57ac58f397ba9e30f9b0e', class: "size-[100px] flex mx-auto items-center justify-center" }, "\u00A0"),
+            image: () => index.h("div", { key: 'e9d29ca002cbdff7ba6861a76b667292d8776764', class: "size-[100px] flex mx-auto items-center justify-center" }, "\u00A0"),
         };
-        return (index.h(index.Host, { key: 'b2beef21cb88c79008e35c0a17728290a0d8d4d4', translate: "no" }, index.h(triangleAlert.ImageViewer, { key: '8e839e67f529c05b35162032a33636c2afbc27b5', closeImageViewer: () => triangleAlert.closeImageViewer.bind(this)(), expandedImage: this.expandedImage }), index.h(vehicleInfoLayout.VehicleInfoLayout, { key: '4be670885f74a659a731fd0381af89cfbffd4434', 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: '1b2c52ee66e2d942e94e88f1d001f2cf16c8f3b4', class: "overflow-x-auto" }, index.h("information-table", { key: '21a4f6151dc2503bace293e106a4a06bbd6b114a', templateRow: templateRow, rows: rows, headers: tableHeaders, isLoading: this.isLoading })))));
+        return (index.h(index.Host, { key: '5754d83d9a87285824e896a8bb7531a2b68a5f01', translate: "no" }, index.h(triangleAlert.ImageViewer, { key: 'a7102dba9d94d368c84f62bd40892105596014da', closeImageViewer: () => triangleAlert.closeImageViewer.bind(this)(), expandedImage: this.expandedImage }), index.h(vehicleInfoLayout.VehicleInfoLayout, { key: '370101d7d7223328381e5b48f3b9cd5b33f3b4cc', 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: '416ef484b9c8f892512d8b72cbab3bcd22c022ea', class: "overflow-x-auto" }, index.h("information-table", { key: 'ba80b210fdf468ceea7661237ae4d548c4fd8205', templateRow: templateRow, rows: rows, headers: tableHeaders, isLoading: this.isLoading })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -805,19 +805,19 @@ const VehicleClaimableItems = class {
         const showActivationBox = showActivationRequired || showActivationBlocked || this.showPrintBox;
         const isBlockedBox = showActivationBlocked && !this.showPrintBox;
         const showActionButton = this.showPrintBox || showActivationRequired;
-        return (index.h(index.Host, { key: 'df9cfe8fcfa140c95d8b82739ebcf5b3359778be', translate: "no" }, index.h("vehicle-item-claim-form", { key: '61bf6ce983c72ab8e119e6a68d2b2419cf59fa29', 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: 'ffab99e901047c2777ab3d96489ae2c50384a26a', locale: this.locale, claim: this.claim.bind(this), item: this.selectedClaimItem, showPopover: this.showClaimableItemPopover, target: this.popoverTarget, popoverHeight: this.popoverHeight, fadingOut: this.popoverFadingOut, contentFading: this.popoverContentFading, bodyContentHeight: this.popoverBodyContentHeight, onMouseEnter: this.onPopoverMouseEnter, onMouseLeave: this.onPopoverMouseLeave }), index.h(ClaimableTraceModal, { key: '1228b3aa321aa0c9733677b7262ff17e070278c4', isOpen: this.showTraceModal, fadingOut: this.traceModalFadingOut, isLoading: this.isLoadingTrace, errorMessage: this.traceError, vin: (_d = this.vehicleLookup) === null || _d === void 0 ? void 0 : _d.vin, traceHtml: this.traceHtml, locale: this.locale, onClose: this.closeTraceModal }), index.h(vehicleInfoLayout.VehicleInfoLayout, { key: 'b41f4fbbbf7105053bbdeac560fb02951974ffe4', isError: this.isError, coreOnly: this.coreOnly, header: (_e = this.vehicleLookup) === null || _e === void 0 ? void 0 : _e.vin, direction: this.locale.sharedLocales.direction, isLoading: this.isLoading || this.tabAnimationLoading, errorMessage: this.locale.sharedLocales.errors[this.errorMessage] || this.locale.sharedLocales.errors.wildCard, headerRight: this.showTrace && this.vehicleLookup && !this.isLoading && !this.tabAnimationLoading && !this.isError ? (index.h("button", { type: "button", class: "trace-trigger-button", title: this.locale.viewTrace, "aria-label": this.locale.viewTrace, onClick: this.openTraceModal }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("circle", { cx: "6", cy: "19", r: "3" }), index.h("path", { d: "M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15" }), index.h("circle", { cx: "18", cy: "5", r: "3" })))) : null }, index.h("div", { key: '330de13921b7ce1410f97e0e853685585f746247', dir: "ltr", class: cn.cn('relative flex items-center h-[320px] transition-all duration-300', { loading: this.isLoading || this.tabAnimationLoading }) }, index.h("div", { key: 'a5fd082db1ca3b314653bb1b77d8dbaa9995af85', dir: this.locale.sharedLocales.direction, class: "absolute top-0 z-10 w-full pt-[16px]" }, index.h("div", { key: 'e46422c6f21e67e43a937c7b9ab1ddc76d2364f5', class: cn.cn('duration-300', { 'translate-y-[-50%] opacity-0': hideTabs }) }, index.h("shift-tabs", { key: '59196fc9a9d588b6c022542846d71073889e422a', activeTabLabel: this.activeTab, changeActiveTab: this.onActiveTabChange, tabs: tabs }))), index.h("div", { key: '2582749f45fbb774ea8c1608d04e057268a20301', 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: '091bba8e3de011477934d573fad7e8318c56f546', class: "w-full h-full rounded-[4px] overflow-x-hidden absolute left-0 top-0" }, index.h("div", { key: 'be32e3e21647bbde190dcf5c59f0dfd1f47ba602', class: "absolute opacity-0 bg-[#1a1a1a] w-[150%] h-full" }), index.h("div", { key: '75fcaae453dd32e8306cfc01dff4d3049d1fbeec', class: "absolute h-full bg-[linear-gradient(to_bottom,_#428bca_0%,_#3071a9_100%)] lane-inc" }), index.h("div", { key: 'a90fd86d0bd0e195928966916ac978c91991872c', class: "absolute h-full bg-[linear-gradient(to_bottom,_#428bca_0%,_#3071a9_100%)] lane-dec" }))), index.h("div", { key: '6a0b6604a05b9413aa4701bd25bd00827b5cb8e3', dir: this.locale.sharedLocales.direction, class: cn.cn('absolute w-[90%] z-10 pointer-events-none border opacity-0 translate-y-[-5px] scale-[70%] p-[25px] text-[16px] rounded-[6px] flex items-center justify-between left-1/2 -translate-x-1/2 h-10 bottom-[40px] transition duration-500', {
+        return (index.h(index.Host, { key: '68bae301ffc05d11cf272f7dec997c72c26aba6e', translate: "no" }, index.h("vehicle-item-claim-form", { key: '04f23d58066e76923378ff71a81c3573b5d131ce', 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: '1d9d5dd185f8aeac647535fe60b25c4457e9ad63', locale: this.locale, claim: this.claim.bind(this), item: this.selectedClaimItem, showPopover: this.showClaimableItemPopover, target: this.popoverTarget, popoverHeight: this.popoverHeight, fadingOut: this.popoverFadingOut, contentFading: this.popoverContentFading, bodyContentHeight: this.popoverBodyContentHeight, onMouseEnter: this.onPopoverMouseEnter, onMouseLeave: this.onPopoverMouseLeave }), index.h(ClaimableTraceModal, { key: 'afd799719789eef78f606383d9961fc68f8ac918', isOpen: this.showTraceModal, fadingOut: this.traceModalFadingOut, isLoading: this.isLoadingTrace, errorMessage: this.traceError, vin: (_d = this.vehicleLookup) === null || _d === void 0 ? void 0 : _d.vin, traceHtml: this.traceHtml, locale: this.locale, onClose: this.closeTraceModal }), index.h(vehicleInfoLayout.VehicleInfoLayout, { key: '25882202afee3c7da4dd80475784d4cdb53de406', isError: this.isError, coreOnly: this.coreOnly, header: (_e = this.vehicleLookup) === null || _e === void 0 ? void 0 : _e.vin, direction: this.locale.sharedLocales.direction, isLoading: this.isLoading || this.tabAnimationLoading, errorMessage: this.locale.sharedLocales.errors[this.errorMessage] || this.locale.sharedLocales.errors.wildCard, headerRight: this.showTrace && this.vehicleLookup && !this.isLoading && !this.tabAnimationLoading && !this.isError ? (index.h("button", { type: "button", class: "trace-trigger-button", title: this.locale.viewTrace, "aria-label": this.locale.viewTrace, onClick: this.openTraceModal }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("circle", { cx: "6", cy: "19", r: "3" }), index.h("path", { d: "M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15" }), index.h("circle", { cx: "18", cy: "5", r: "3" })))) : null }, index.h("div", { key: 'e6db5f9381c858f90942a0ebe69950fa72ab2dbb', dir: "ltr", class: cn.cn('relative flex items-center h-[320px] transition-all duration-300', { loading: this.isLoading || this.tabAnimationLoading }) }, index.h("div", { key: '364b107f12160895213a1c12c2ecda8a3d4fcc9c', dir: this.locale.sharedLocales.direction, class: "absolute top-0 z-10 w-full pt-[16px]" }, index.h("div", { key: '3bfe16b7177cd4601d3cb512736afbdface2baee', class: cn.cn('duration-300', { 'translate-y-[-50%] opacity-0': hideTabs }) }, index.h("shift-tabs", { key: '2bcda9871bb627060a31996397ef9f34167d9245', activeTabLabel: this.activeTab, changeActiveTab: this.onActiveTabChange, tabs: tabs }))), index.h("div", { key: 'd8b7439570750e8ab05f7cf367c6f662d005d291', 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: '1e52fc280b2387c1325edfe5039359c71d9f20dc', class: "w-full h-full rounded-[4px] overflow-x-hidden absolute left-0 top-0" }, index.h("div", { key: 'b8ceab588402eaa72cb3e8da8d3ebafb69a2c392', class: "absolute opacity-0 bg-[#1a1a1a] w-[150%] h-full" }), index.h("div", { key: 'bdc2ddcc9de7c9a7fae5641b845934bda31a31c6', class: "absolute h-full bg-[linear-gradient(to_bottom,_#428bca_0%,_#3071a9_100%)] lane-inc" }), index.h("div", { key: '7244762ba3628f89fcc155e1ff0f5ab8ae9f4b8d', class: "absolute h-full bg-[linear-gradient(to_bottom,_#428bca_0%,_#3071a9_100%)] lane-dec" }))), index.h("div", { key: 'f9d7efabd0f7ebaedc9ff62ac918f7c693693d7d', dir: this.locale.sharedLocales.direction, class: cn.cn('absolute w-[90%] z-10 pointer-events-none border opacity-0 translate-y-[-5px] scale-[70%] 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', {
                 'text-[#8a6d3b] bg-[#fcf8e3] border-[#faebcc]': !isBlockedBox,
                 'text-[#58151c] bg-[#f7d7d8] border-[#f2aeb5]': isBlockedBox,
                 'opacity-100 pointer-events-auto translate-y-0 scale-100': !this.isLoading && this.vehicleLookup && !this.tabAnimationLoading && showActivationBox,
-            }) }, index.h("span", { key: '1951c3f50ca9e3772ab3b383c79cff4a999d08bc', class: "font-semibold" }, this.showPrintBox
+            }) }, index.h("span", { key: '99bcca2ae1af8cf8011b09b8f9095471d849f1c0', class: "font-semibold" }, this.showPrintBox
             ? this.locale.successFulClaimMessage
             : showActivationBlocked
                 ? this.locale.activationBlockedNotAllocated
-                : this.locale.warrantyAndServicesNotActivated), showActionButton && (index.h("button", { key: '40c6021e8b6cea1f63131bd0ac1e9c2019f417ff', class: "claim-button", onClick: this.showPrintBox ? this.printLastClaimResponse : this.activateClaimItem }, this.showPrintBox ? index.h(PrintIcon, { class: "size-[30px] duration-200" }) : index.h(ActivationIcon, { class: "size-[30px] duration-200" }), index.h("span", { key: '32fd1e6eb7a5cd6b2c6b8c597a387210463df37a' }, this.showPrintBox ? this.locale.print : this.locale.activateNow)))), index.h("div", { key: 'b672849aa4fee7fc18ee211b0ea42d62be7e182f', class: "claimable-items-box px-[30px] min-w-full relative overflow-x-scroll h-full overflow-y-hidden" }, index.h("div", { key: 'f95373f7e84f4c7f4536becea66bbc0b30cd57d8', class: "flex relative w-fit min-w-full items-center h-full [&_*]:shrink-0 gap-[250px] justify-between" }, index.h("div", { key: 'c57a29ac7c21bf4c199d47550a0f80e81191c7a0', class: cn.cn('progress-container-style progress-lane absolute overflow-hidden w-[calc(100%-0px)] translate-y-0 opacity-100', {
+                : this.locale.warrantyAndServicesNotActivated), showActionButton && (index.h("button", { key: '11e5a0ba57ea6a87314d1805a339464e27db5340', class: "claim-button", onClick: this.showPrintBox ? this.printLastClaimResponse : this.activateClaimItem }, this.showPrintBox ? index.h(PrintIcon, { class: "size-[30px] duration-200" }) : index.h(ActivationIcon, { class: "size-[30px] duration-200" }), index.h("span", { key: '8c6d367d50296dcfabe5c0fde4baa4517fc47d6a' }, this.showPrintBox ? this.locale.print : this.locale.activateNow)))), index.h("div", { key: 'c0e7808bac5ce9c07ca8be88d0e03b1c0766bbf6', class: "claimable-items-box px-[30px] min-w-full relative overflow-x-scroll h-full overflow-y-hidden" }, index.h("div", { key: '82cbe7ef5d767f5ba9d2962e112921a8d4b8895b', class: "flex relative w-fit min-w-full items-center h-full [&_*]:shrink-0 gap-[250px] justify-between" }, index.h("div", { key: '8042a3f857f7034c33db5b81f6b5339386a5dd61', 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: 'b4a644f5846314d8e7dc65968bdaaf0e707a4dff', 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: '31c56097be767e1afa32b6c2fb53a37683795476', 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: '4ef500d7bce733939ee622fa7f2ee7ea51c43b5c', class: "ml-[-125px]" })), index.h("div", { key: '9243cb60a9872c35811dbdd05c65eb3c723f7980', 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', {
+            }) }, index.h("div", { key: 'c622a8a612849f8ab57b2c09bcd45cf1087dc07d', 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: '60ee69cc976626263ea85a413e0b0cae59f20c2f', 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: '8712c4482963e722fda2bae3fcd6d705c8c88967', class: "ml-[-125px]" })), index.h("div", { key: '4625d3e324199a0341e99c9d86d9d84ecf753eb6', 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(materialCard.EmptyTableIcon, { key: '862c167ef3da93a0d06da302535ccdd475685eec', class: "size-[90px]" }), index.h("div", { key: 'ad109c235c9ee1ee5e8fbbf06420e943909bc45b', class: "text-[22px]" }, this.locale.sharedLocales.errors.noServiceAvailable)))))));
+            }) }, index.h(materialCard.EmptyTableIcon, { key: 'a27ff22d00a9eaa4838d81eb9b89c6f49301736f', class: "size-[90px]" }), index.h("div", { key: '5c64b22e1433391a015dccab10c0ec37d2f92004', class: "text-[22px]" }, this.locale.sharedLocales.errors.noServiceAvailable)))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -1149,11 +1149,11 @@ const VehicleSaleInformation = class {
         ];
         const filteredFields = FIELDS.filter(field => !hiddenFields.includes(field.fieldName));
         const filteredEndCustomerFields = END_CUSTOMER_FIELDS.filter(field => !hiddenFields.includes(field.fieldName));
-        return (index.h(index.Host, { key: '4510061526f2aa3d1081bd030cd6eca7a17f6a35', translate: "no" }, index.h(vehicleInfoLayout.VehicleInfoLayout, { key: 'ccd0b8cf410271109d07628b10521b933ba381b1', isError: this.isError, coreOnly: this.coreOnly, isLoading: this.isLoading, header: (_q = this.vehicleLookup) === null || _q === void 0 ? void 0 : _q.vin, direction: this.locale.sharedLocales.direction, errorMessage: this.locale.sharedLocales.errors[this.errorMessage] || this.locale.sharedLocales.errors.wildCard }, index.h("flexible-container", { key: '6dc4085553173c91a68f8ce55cc8af3a0ecf2395' }, index.h("flexible-container", { key: 'ac4916a365ca82fa3d041ed90e11a635efed8bb2', classes: cn.cn({ loading: this.isLoading || this.isError || !this.vehicleLookup }), isOpened: !!this.vehicleLookup && !this.isError }, index.h("div", { key: '38ddc0bc13a1463576a5aa9f8e58ba1fb126d3ee', class: "p-[16px] mx-auto !pb-0 max-w-[520px]" }, index.h("div", { key: '1b1790af7b56c1675802ffb5c9994a973eedfbfe', class: cn.cn('relative shift-skeleton !rounded-[12px] shift-card', { 'shift-card-warning': !hasEndCustomer }) }, index.h("div", { key: '4e979b9063241e93b4400756353a7fb03608ec37', class: cn.cn('absolute flex size-full left-0 top-0 px-[12px] items-center justify-center p-[12px] transition-opacity', !hasEndCustomer ? 'opacity-100' : 'opacity-0 pointer-events-none select-none') }, index.h("div", { key: '6d5c3205ee05480a5e2b5c000893ed34a6c9fa0a', class: "w-full max-w-[460px] rounded-[14px] px-[14px] py-[12px]" }, index.h("div", { key: 'c551e5cd506fbfd4805fcabb0e454e1ff59eab68', class: "size-full flex flex-col justify-start gap-[12px] items-center" }, index.h("span", { key: 'd9b1548ff9969f0d9b1eb3e1462ad4cb26d01a86', class: "shift-card-icon", "aria-hidden": "true" }, index.h(triangleAlert.TriangleAlertIcon, { key: '61dc69fe6ca3ca545f5b41770f02f103afe95224' })), index.h("p", { key: '63cf9c5c01461ef53e8b4cdc77ee3c51c3f093ef', class: "mt-[4px] text-[13.5px] text-center text-amber-900/90 leading-[1.35]" }, texts['Vehicle has no end customer.'] || '')))), index.h("div", { key: '803e737c35b878615aab93f46ba403f82b7cdab8', class: cn.cn('transition-opacity', !hasEndCustomer ? 'opacity-0 pointer-events-none select-none' : 'opacity-100') }, index.h("h2", { key: '88f3e9e5920eb917c7f7f3861ef7735aac02efa8', class: "shift-card-header" }, texts.customerInformation), index.h("div", { key: 'ca8f52232483c7d564750102b547ce8db0d22cfe', class: "flex flex-col gap-[2px]" }, filteredEndCustomerFields.map(field => {
+        return (index.h(index.Host, { key: '83d8b7666eb93b40fbc0fbb963603cc74d2acde8', translate: "no" }, index.h(vehicleInfoLayout.VehicleInfoLayout, { key: '7247ffd68231ff88d931346551e74203ad05f857', isError: this.isError, coreOnly: this.coreOnly, isLoading: this.isLoading, header: (_q = this.vehicleLookup) === null || _q === void 0 ? void 0 : _q.vin, direction: this.locale.sharedLocales.direction, errorMessage: this.locale.sharedLocales.errors[this.errorMessage] || this.locale.sharedLocales.errors.wildCard }, index.h("flexible-container", { key: '8a8da84882eb2c9a522a5e2c0ef64b6f923e79fc' }, index.h("flexible-container", { key: 'fdc5d3ed4d057a6d5f1e3fcbe82b498936323cb4', classes: cn.cn({ loading: this.isLoading || this.isError || !this.vehicleLookup }), isOpened: !!this.vehicleLookup && !this.isError }, index.h("div", { key: '7e49581a4b83c9c075fa250b487f07e8daf4ee10', class: "p-[16px] mx-auto !pb-0 max-w-[520px]" }, index.h("div", { key: '7dd4ae69f32fdbf15bbe9fdddab5c1c460c00f1d', class: cn.cn('relative shift-skeleton !rounded-[12px] shift-card', { 'shift-card-warning': !hasEndCustomer }) }, index.h("div", { key: '3fbb61d18adac8b428f49477bfd8ccb4e80d571e', class: cn.cn('absolute flex size-full left-0 top-0 px-[12px] items-center justify-center p-[12px] transition-opacity', !hasEndCustomer ? 'opacity-100' : 'opacity-0 pointer-events-none select-none') }, index.h("div", { key: '5b6a10a401655c098ea2d3a761f7dc47c82182b3', class: "w-full max-w-[460px] rounded-[14px] px-[14px] py-[12px]" }, index.h("div", { key: '0778642e8703e64b297b5671e9c87704ef4fe113', class: "size-full flex flex-col justify-start gap-[12px] items-center" }, index.h("span", { key: '124a1e092988e291f9461ba2cf0361a3961ed99b', class: "shift-card-icon", "aria-hidden": "true" }, index.h(triangleAlert.TriangleAlertIcon, { key: '4eaafd886053f7f9089d64664418baa150a63919' })), index.h("p", { key: '67b701a8af6d48422f46a373e23d316c023b5941', class: "mt-[4px] text-[13.5px] text-center text-amber-900/90 leading-[1.35]" }, texts['Vehicle has no end customer.'] || '')))), index.h("div", { key: 'f34bfb5518ae68dd8c003e38349525039cabf7ad', class: cn.cn('transition-opacity', !hasEndCustomer ? 'opacity-0 pointer-events-none select-none' : 'opacity-100') }, index.h("h2", { key: 'e879d3e6575d7534c6891ad67ac75866a094d31b', class: "shift-card-header" }, texts.customerInformation), index.h("div", { key: '880bc54b1a2334190e5fbc4f0d3aea004dd0c091', class: "flex flex-col gap-[2px]" }, filteredEndCustomerFields.map(field => {
             const value = field.value || '';
             const Icon = field.Icon;
             return (index.h("div", { class: "flex gap-[12px] items-start" }, index.h("span", { class: "shift-card-icon", "aria-hidden": "true" }, index.h(Icon, null)), index.h("div", { class: "flex flex-col translate-y-[-4px]" }, index.h("div", { class: "shift-card-seconary-text" }, field.title, ":"), index.h("div", { class: cn.cn('shift-card-primary-text translate-y-[-4px]', { 'shift-card-empty-text': !value }) }, value || '—'))));
-        })))))), index.h("div", { key: '3163d055799ebb60e69151e4620392c9272d0b89', class: "flex p-[16px] [&>div]:grow overflow-auto gap-[16px] items-stretch justify-center md:justify-between flex-wrap" }, filteredFields.map(field => (index.h(materialCard.MaterialCard, { title: field.title, desc: field.value, minWidth: "250px" }))), !hiddenFields.includes('intermediaries') &&
+        })))))), index.h("div", { key: '61c5b56c2a7cebbf21f7159102c75e3bc3048176', class: "flex p-[16px] [&>div]:grow overflow-auto gap-[16px] items-stretch justify-center md:justify-between flex-wrap" }, filteredFields.map(field => (index.h(materialCard.MaterialCard, { title: field.title, desc: field.value, minWidth: "250px" }))), !hiddenFields.includes('intermediaries') &&
             ((sale === null || sale === void 0 ? void 0 : sale.intermediaries) || []).map(intermediary => index.h(materialCard.MaterialCard, { title: texts.intermediaryName, desc: getText(intermediary === null || intermediary === void 0 ? void 0 : intermediary.companyName), minWidth: "250px" })))))));
     }
     get el() { return index.getElement(this); }
@@ -1236,7 +1236,7 @@ const VehicleServiceHistory = class {
             { key: 'serviceType', label: this.locale.serviceType, maxWidth: 420 },
             { key: 'mileage', label: this.locale.odometer, nowrap: true },
         ];
-        return (index.h(index.Host, { key: '8f65959d8d5f390e8fa5035d57e5febaa8c6caad', translate: "no" }, index.h(vehicleInfoLayout.VehicleInfoLayout, { key: '887afe9400b375fe282ac92b536af0a411af045d', 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: '8f6f9e240b89f8b6d56eff3163f094f02ccbd830', class: "overflow-x-auto" }, index.h("information-table", { key: '31d7eb6d4e27b47d982a76c508e45b2df0d4fa40', size: "small", allowAutoWidth: true, scrollExpandedIntoView: true, expandUsingEntireRow: true, headers: tableHeaders, isLoading: this.isLoading, rows: ((_b = this.vehicleLookup) === null || _b === void 0 ? void 0 : _b.serviceHistory) || [], subRowRenderer: (row) => index.h(ServiceHistorySubRow, { row: row, locale: this.locale }) })))));
+        return (index.h(index.Host, { key: '214ea7f9322f4ded5dfe88ed30ec4b5e6e596205', translate: "no" }, index.h(vehicleInfoLayout.VehicleInfoLayout, { key: '2ab295e79de66098a037002316eaf9d25eb86ca6', 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: 'ceebe28112ce490245ebb6f4d37638138f74163a', class: "overflow-x-auto" }, index.h("information-table", { key: '38bfb22243c4c209794a3d1297be43cf5bd43f20', size: "small", allowAutoWidth: true, scrollExpandedIntoView: true, expandUsingEntireRow: true, headers: tableHeaders, isLoading: this.isLoading, rows: ((_b = this.vehicleLookup) === null || _b === void 0 ? void 0 : _b.serviceHistory) || [], subRowRenderer: (row) => index.h(ServiceHistorySubRow, { row: row, locale: this.locale }) })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -1306,7 +1306,7 @@ const VehicleSpecification = class {
         catch (error) {
             productionDate = null;
         }
-        return (index.h(index.Host, { key: '82be9d7c37c939566edc9688e5d3dd74c1ca7caa', translate: "no" }, index.h(vehicleInfoLayout.VehicleInfoLayout, { key: '050c0a46ca5f6ac3facfbb24a19aca0d2887728e', 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: '53bc980680142e039a11c56cd8b0e96cb54a6bcf' }, index.h("div", { key: 'da2866dc3adba9ea69efd999815559a97092d367', class: "flex p-[16px] [&>div]:grow overflow-auto gap-[16px] items-stretch justify-center md:justify-between flex-wrap" }, index.h(materialCard.MaterialCard, { key: 'baf89f84228926f11f44e9c0b7724ce6f205a1ec', class: "grow", title: texts === null || texts === void 0 ? void 0 : texts.model, minWidth: "300px" }, index.h(materialCard.MaterialCardChildren, { key: '247e98233a96c2c68b5fdada25351012cceee1c7', 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: '7f653acf7368bca5c7eb823d355ae546c3a7faef', 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: '12215c8d95d47fba716f36dc2c577fb8f401929b', class: "grow", title: texts === null || texts === void 0 ? void 0 : texts.variant, minWidth: "300px" }, index.h(materialCard.MaterialCardChildren, { key: '1dbe9d326d7d883c3c828e4ff33acf47549fef7b', 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: 'e5caefead2620f8cefcfeaefd6ac52530e60c79b' }), ((_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: '9cf57f369c8bd43a14c47e7b49e9862a3c6617cc', 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: '7bb01ce0b3000c08007f51dfab863f55db406982', 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: '098930234119023ae722f0547a34a7ae202a886a', desc: productionDate ? productionDate : '', title: texts === null || texts === void 0 ? void 0 : texts.productionDate, minWidth: "250px" }), index.h(materialCard.MaterialCard, { key: 'f5c329f53ae91ab7046ca3adf7da9dbed4ce7a6b', desc: ((_14 = (_13 = (_12 = this === null || this === void 0 ? void 0 : this.vehicleLookup) === null || _12 === void 0 ? void 0 : _12.vehicleVariantInfo) === null || _13 === void 0 ? void 0 : _13.sfx) === null || _14 === void 0 ? void 0 : _14.trim()) || '', title: texts === null || texts === void 0 ? void 0 : texts.sfx, minWidth: "250px" }))))));
+        return (index.h(index.Host, { key: 'c7d7bae4704f9c1bfdc13eeb414ed22d99a04cdf', translate: "no" }, index.h(vehicleInfoLayout.VehicleInfoLayout, { key: '9ff22d904b28b77128c3db2229b4c15dc6e21c89', 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: 'ba632131f398ab9c7e864cd4344e327ec2ea4f31' }, index.h("div", { key: '8ca79e77610982b8e6aa00ea8b0acc6ccce1cafb', class: "flex p-[16px] [&>div]:grow overflow-auto gap-[16px] items-stretch justify-center md:justify-between flex-wrap" }, index.h(materialCard.MaterialCard, { key: 'b863b731893372b4cd193c0972172dae87d07a1a', class: "grow", title: texts === null || texts === void 0 ? void 0 : texts.model, minWidth: "300px" }, index.h(materialCard.MaterialCardChildren, { key: 'f6758abc6b10a2c3ad606de475ea13db520eb917', 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: '9265670a0c1584b0cca657152ca024fa6a5e3e01', 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: '4a62dbe07fa9b77d803466df5f99ef3a7a14cfb9', class: "grow", title: texts === null || texts === void 0 ? void 0 : texts.variant, minWidth: "300px" }, index.h(materialCard.MaterialCardChildren, { key: '19dcf5e0e36c02fee2814c2904f19cb4e82deb80', 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: '6b8ea41c2414acaf2c108a8fdb83e734ae6477f2' }), ((_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: '1159bec426e817e4df6796ef6ca1f4e9e973e448', 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: '2f41e1423b3bc4deaa2f632a7a6e404990e5e0e2', 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: '6287100e29542ae8c7f06182067af75033abe37a', desc: productionDate ? productionDate : '', title: texts === null || texts === void 0 ? void 0 : texts.productionDate, minWidth: "250px" }), index.h(materialCard.MaterialCard, { key: '18f923cad3f4937afc3e6133aeece236b9912f6a', 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 {
@@ -1616,6 +1616,404 @@ const VehicleWarrantyDetails = class {
 };
 VehicleWarrantyDetails.style = vehicleWarrantyDetailsCss();
 
+const warrantyTimelineSchema = types.yupTypeMapper([
+    'dealer',
+    'activatedBy',
+    'broker',
+    'authorized',
+    'unauthorized',
+    'activeWarranty',
+    'notActiveWarranty',
+    'warrantyCoverage',
+    'totalPlannedProtection',
+    'standardWarranty',
+    'standardWarrantyMark',
+    'extendedWarranty',
+    'standard',
+    'extended',
+    'today',
+    'year',
+    'years',
+    'month',
+    'months',
+    'warrantyNotStarted',
+    'awaitingBrokerInvoice',
+    'awaitingEndCustomerSale',
+    'awaitingActivation',
+]);
+
+const TONE_STANDARD = {
+    base: 'var(--green)',
+    dark: 'var(--green-dark)',
+    tint: 'rgba(232, 244, 237, 0.9)',
+    border: 'rgba(44, 138, 88, 0.55)',
+};
+// Extended coverages cycle through these. The prototype hard-coded one class per
+// provider; a vehicle can hold more than two, so the tone repeats and the segment's
+// alternating border style keeps neighbouring bands apart.
+const TONES_EXTENDED = [
+    { base: 'var(--blue)', dark: 'var(--blue-dark)', tint: 'rgba(232, 241, 248, 0.88)', border: 'rgba(48, 113, 169, 0.64)' },
+    { base: 'var(--violet)', dark: 'var(--violet-dark)', tint: 'rgba(240, 236, 247, 0.9)', border: 'rgba(117, 90, 165, 0.65)' },
+];
+const toTimestamp = (isoDate) => Date.parse(`${isoDate}T00:00:00Z`);
+/** DTO dates are serialized as yyyy-MM-dd, but tolerate a full timestamp. */
+const asDate = (value) => (value || '').slice(0, 10);
+const todayInUtc = () => new Date().toISOString().slice(0, 10);
+const clampPercentage = (value) => Math.min(100, Math.max(0, value));
+const asPercentage = (value) => `${value.toFixed(6)}%`;
+const monthsBetween = (start, end) => {
+    const [startYear, startMonth, startDay] = start.split('-').map(Number);
+    const [endYear, endMonth, endDay] = end.split('-').map(Number);
+    const months = (endYear - startYear) * 12 + (endMonth - startMonth) - (endDay < startDay ? 1 : 0);
+    return Math.max(0, months);
+};
+const formatDuration = (months, locale) => {
+    const years = Math.floor(months / 12);
+    const remainingMonths = months % 12;
+    const parts = [];
+    if (years)
+        parts.push(`${years} ${years === 1 ? locale.year : locale.years}`);
+    if (remainingMonths || !years)
+        parts.push(`${remainingMonths} ${remainingMonths === 1 ? locale.month : locale.months}`);
+    return parts.join(' ');
+};
+const buildCoverages = (vehicleInformation, locale) => {
+    const warranty = vehicleInformation === null || vehicleInformation === void 0 ? void 0 : vehicleInformation.warranty;
+    const coverages = [];
+    const standardStart = asDate(warranty === null || warranty === void 0 ? void 0 : warranty.warrantyStartDate);
+    const standardEnd = asDate(warranty === null || warranty === void 0 ? void 0 : warranty.warrantyEndDate);
+    if (standardStart && standardEnd && toTimestamp(standardEnd) > toTimestamp(standardStart))
+        coverages.push({
+            id: 'standard',
+            kind: 'standard',
+            label: locale.standardWarranty,
+            start: standardStart,
+            end: standardEnd,
+            tone: TONE_STANDARD,
+            alt: false,
+        });
+    ((warranty === null || warranty === void 0 ? void 0 : warranty.extendedWarranties) || [])
+        .map(coverage => ({
+        id: (coverage === null || coverage === void 0 ? void 0 : coverage.id) || '',
+        name: (coverage === null || coverage === void 0 ? void 0 : coverage.name) || '',
+        providerName: (coverage === null || coverage === void 0 ? void 0 : coverage.providerCompanyName) || '',
+        logo: (coverage === null || coverage === void 0 ? void 0 : coverage.providerCompanyLogo) || '',
+        start: asDate(coverage === null || coverage === void 0 ? void 0 : coverage.startDate),
+        end: asDate(coverage === null || coverage === void 0 ? void 0 : coverage.endDate),
+    }))
+        .filter(coverage => coverage.start && coverage.end && toTimestamp(coverage.end) > toTimestamp(coverage.start))
+        .sort((a, b) => toTimestamp(a.start) - toTimestamp(b.start))
+        .forEach((coverage, index) => {
+        coverages.push({
+            id: coverage.id || `extended-${index}`,
+            kind: 'extended',
+            // The identifier is not a display string. A configured definition supplies a name;
+            // a persisted entry has none, so those fall back to the generic label.
+            label: coverage.name || locale.extendedWarranty,
+            start: coverage.start,
+            end: coverage.end,
+            tone: TONES_EXTENDED[index % TONES_EXTENDED.length],
+            alt: index % 2 === 1,
+            logo: coverage.logo || undefined,
+            providerName: coverage.providerName || undefined,
+        });
+    });
+    return coverages;
+};
+/** Coverage name, qualified by the provider when one resolved. Used for the accessible text only. */
+const describe = (coverage) => (coverage.providerName ? `${coverage.label} · ${coverage.providerName}` : coverage.label);
+const coverageStatus = (coverage, today) => {
+    const snapshot = toTimestamp(today);
+    if (snapshot < toTimestamp(coverage.start))
+        return 'upcoming';
+    if (snapshot >= toTimestamp(coverage.end))
+        return 'expired';
+    return 'active';
+};
+/** Track drawn past the snapshot so the marker sits in the rail rather than on its edge. */
+const RAIL_HEADROOM = 0.04;
+/**
+ * The span the rail draws. Coverage fixes one end; today is always inside it.
+ *
+ * A rail that stopped at the last expiry date would put "today" hard against its edge and lose the
+ * one thing a lapsed warranty most needs to show — how long ago cover ran out. Drawing through to
+ * today instead turns that into what it is: empty track, as wide as the time that has passed.
+ */
+const railRange = (coverages, today) => {
+    const first = toTimestamp(coverages[0].start);
+    const last = coverages.reduce((latest, coverage) => Math.max(latest, toTimestamp(coverage.end)), toTimestamp(coverages[0].end));
+    const snapshot = toTimestamp(today);
+    const headroom = Math.round((Math.max(last, snapshot) - Math.min(first, snapshot)) * RAIL_HEADROOM);
+    return {
+        from: first <= snapshot ? first : snapshot - headroom,
+        to: last >= snapshot ? last : snapshot + headroom,
+    };
+};
+const toneVariables = (tone) => ({
+    '--tone': tone.base,
+    '--tone-dark': tone.dark,
+    '--tone-tint': tone.tint,
+    '--tone-border': tone.border,
+});
+/** Clearance between two axis dates before they read as one smudge. */
+const AXIS_GAP = 10;
+/**
+ * Hides the axis dates that would collide, always keeping the closing one.
+ *
+ * Crowding is not only a narrow-screen problem: consecutive coverages routinely hand over within a
+ * week of each other on a rail spanning years, and those two labels overlap at any width. The
+ * decision needs the measured width of rendered text, which the render pass cannot know, so it is
+ * applied to the DOM afterwards and re-applied whenever the rail is resized.
+ */
+const thinAxis = (axis) => {
+    if (!axis)
+        return;
+    const apply = () => {
+        const dates = Array.from(axis.children);
+        const railWidth = axis.clientWidth;
+        // jsdom reports no layout, so specs leave every date alone rather than hiding all of them.
+        if (dates.length < 2 || !railWidth)
+            return;
+        dates.forEach(date => date.classList.remove('is-crowded'));
+        const last = dates.length - 1;
+        const boxOf = (date) => {
+            const at = (parseFloat(date.style.getPropertyValue('--at')) / 100) * railWidth;
+            const width = date.offsetWidth;
+            // Mirrors the stylesheet: a date at the rail's start runs rightwards from its tick, one at
+            // its end leftwards from its own, and everything between is centred on its tick.
+            if (date.dataset.align === 'start')
+                return [at, at + width];
+            if (date.dataset.align === 'end')
+                return [at - width, at];
+            return [at - width / 2, at + width / 2];
+        };
+        const boxes = dates.map(boxOf);
+        const survives = new Set([0, last]);
+        let occupiedTo = boxes[0][1];
+        for (let index = 1; index < last; index++) {
+            const [left, right] = boxes[index];
+            if (left < occupiedTo + AXIS_GAP)
+                continue;
+            if (right + AXIS_GAP > boxes[last][0])
+                continue;
+            survives.add(index);
+            occupiedTo = right;
+        }
+        // A rail too narrow to hold even the two bounds keeps the closing date: when the cover runs out
+        // is the question the panel is answering.
+        if (boxes[0][1] + AXIS_GAP > boxes[last][0])
+            survives.delete(0);
+        dates.forEach((date, index) => date.classList.toggle('is-crowded', !survives.has(index)));
+    };
+    const schedule = () => (typeof requestAnimationFrame === 'function' ? requestAnimationFrame(apply) : apply());
+    schedule();
+    // Both triggers are needed and neither is enough on its own: the rail resizes without the dates
+    // changing, and switching vehicle replaces the dates without the rail resizing.
+    if (axis.__axisWatched)
+        return;
+    axis.__axisWatched = true;
+    if (typeof ResizeObserver !== 'undefined')
+        new ResizeObserver(schedule).observe(axis);
+    if (typeof MutationObserver !== 'undefined')
+        new MutationObserver(schedule).observe(axis, { childList: true });
+};
+/** Pulls the snapshot pill back onto the rail when centring it would overhang either edge. */
+const positionTodayPill = (head, todayPosition) => {
+    if (!head)
+        return;
+    const apply = () => {
+        const pill = head.firstElementChild;
+        if (!pill || !head.clientWidth)
+            return;
+        const pillCentre = (head.clientWidth * clampPercentage(todayPosition)) / 100;
+        head.classList.toggle('is-near-end', pillCentre + pill.offsetWidth / 2 > head.clientWidth);
+        head.classList.toggle('is-near-start', pillCentre - pill.offsetWidth / 2 < 0);
+    };
+    if (typeof requestAnimationFrame === 'function')
+        requestAnimationFrame(apply);
+    else
+        apply();
+};
+// Inline rather than an ~assets import: the glyph takes its colour from the badge
+// state via currentColor, which an <img src> cannot do.
+const BADGE_GLYPHS = {
+    positive: 'M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z',
+    negative: 'M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z',
+};
+/**
+ * Why the warranty has not started. Possession is not a sale: while the distributor, an intermediary
+ * or an un-invoiced broker still holds the vehicle, coverage deliberately has not begun and the
+ * holder's invoice date is not used — the customer would lose that period off the front. The panel
+ * says so rather than showing an unexplained empty rail.
+ *
+ * Only the broker case is derivable from the response; the supply-chain cases depend on the host's
+ * own company classification, so the reason is read from the DTO. An older API that does not send
+ * `startState` reads as started and shows nothing, exactly as before.
+ */
+const notStartedMessage = (vehicleInformation, locale) => {
+    var _a, _b, _c;
+    const startState = (_a = vehicleInformation === null || vehicleInformation === void 0 ? void 0 : vehicleInformation.warranty) === null || _a === void 0 ? void 0 : _a.startState;
+    if (!vehicleInformation || !startState || startState === 'Started')
+        return '';
+    if (startState === 'AwaitingBrokerInvoice')
+        return locale.awaitingBrokerInvoice + (((_c = (_b = vehicleInformation === null || vehicleInformation === void 0 ? void 0 : vehicleInformation.saleInformation) === null || _b === void 0 ? void 0 : _b.broker) === null || _c === void 0 ? void 0 : _c.brokerName) || '');
+    if (startState === 'AwaitingEndCustomerSale')
+        return locale.awaitingEndCustomerSale;
+    return locale.awaitingActivation;
+};
+/**
+ * The one row the card is allowed to gain and lose. The grid track animates the height rather than
+ * the content, so the row still slides shut on the frame its message is cleared. Everything else
+ * keeps its place and fades, which is what holds the card to a single height across vehicles.
+ */
+const Collapsible = ({ open }, children) => (index.h("div", { class: "collapsible", "data-open": open ? 'true' : 'false', "aria-hidden": open ? null : 'true' }, index.h("div", { class: "collapsible-body" }, children)));
+const NoticeStrip = ({ text }) => (index.h("div", { class: "warranty-notice", role: "status" }, index.h("svg", { class: "notice-icon", viewBox: "0 0 512 512", "aria-hidden": "true", focusable: "false" }, index.h("path", { fill: "currentColor", d: BADGE_GLYPHS.negative })), index.h("span", null, text)));
+/**
+ * A verdict, or the absence of one. Before a lookup there is no vehicle to judge, and an absent
+ * `isAuthorized` reading as `false` opened the panel accusing every vehicle of being unauthorized
+ * and out of cover. The idle chip keeps its box and its split cap so nothing shifts when the
+ * verdict lands, and asserts nothing until it does — the treatment the older warranty panel
+ * already gives its own cards.
+ */
+const StatusBadge = ({ state, text }) => {
+    const idle = state === 'idle';
+    return (index.h("span", { class: `status-badge is-${state}`, "aria-label": idle ? null : text, "aria-hidden": idle ? 'true' : null }, index.h("svg", { class: "badge-icon", viewBox: "0 0 512 512", "aria-hidden": "true", focusable: "false" }, !idle && index.h("path", { fill: "currentColor", d: state === 'positive' ? BADGE_GLYPHS.positive : BADGE_GLYPHS.negative })), index.h("span", null, idle ? '' : text)));
+};
+function CoverageTimeline({ vehicleInformation, locale, isAuthorized, today }) {
+    var _a, _b;
+    const snapshot = today || todayInUtc();
+    const coverages = buildCoverages(vehicleInformation, locale);
+    const hasCoverage = coverages.length > 0;
+    const dealerName = ((_a = vehicleInformation === null || vehicleInformation === void 0 ? void 0 : vehicleInformation.saleInformation) === null || _a === void 0 ? void 0 : _a.companyName) || '';
+    const notice = notStartedMessage(vehicleInformation, locale);
+    // The broker that actually anchored the warranty — a warranty fact, not a sale fact, so it is read
+    // from the warranty DTO rather than inferred from the presence of a broker on the sale.
+    const activatingBroker = ((_b = vehicleInformation === null || vehicleInformation === void 0 ? void 0 : vehicleInformation.warranty) === null || _b === void 0 ? void 0 : _b.activatedByBrokerName) || '';
+    // "Activated by" is only truthful once something started the coverage. Before that the company is
+    // just the dealer holding it, and when a broker started it both parties matter.
+    const dealerLabel = activatingBroker || notice ? locale.dealer : locale.activatedBy;
+    const hasActiveWarranty = coverages.some(coverage => coverageStatus(coverage, snapshot) === 'active');
+    // Both chips are verdicts about a vehicle, so neither can be given before there is one to judge.
+    const verdict = (isPositive) => (!vehicleInformation ? 'idle' : isPositive ? 'positive' : 'negative');
+    const range = hasCoverage ? railRange(coverages, snapshot) : { from: 0, to: 1 };
+    const positionInRange = (isoDate) => ((toTimestamp(isoDate) - range.from) / (range.to - range.from)) * 100;
+    // The stripe is proportioned across the cover itself, not the rail. The rail stretches to reach
+    // today, so sharing its scale would leave the stripe part-drawn, with the last band's colour
+    // running out to the edge on any vehicle whose warranty has lapsed.
+    const planFrom = hasCoverage ? toTimestamp(coverages[0].start) : 0;
+    const planTo = hasCoverage ? coverages.reduce((latest, coverage) => Math.max(latest, toTimestamp(coverage.end)), planFrom + 1) : 1;
+    const positionInPlan = (isoDate) => ((toTimestamp(isoDate) - planFrom) / (planTo - planFrom)) * 100;
+    const ticks = hasCoverage ? Array.from(new Set(coverages.flatMap(coverage => [coverage.start, coverage.end]))).sort((a, b) => toTimestamp(a) - toTimestamp(b)) : [];
+    // Inside the rail by construction; clamped anyway so malformed dates can never put an element at
+    // `left: 190%`, which widens the rail to match and makes the card scroll sideways to reach it.
+    const todayPosition = hasCoverage ? clampPercentage(positionInRange(snapshot)) : 0;
+    const cardAccent = !hasCoverage
+        ? // No bands means no coverage to describe, so the accent must not fall through to a
+            // green/blue/violet gradient — that reads as a three-stage plan on a vehicle that has none.
+            // Red when we are saying why coverage has not started, otherwise inert.
+            notice
+                ? 'var(--red)'
+                : 'var(--line)'
+        : coverages.length === 1
+            ? TONE_STANDARD.base
+            : `linear-gradient(90deg, ${coverages
+                .map(coverage => `${coverage.tone.base} ${asPercentage(positionInPlan(coverage.start))} ${asPercentage(positionInPlan(coverage.end))}`)
+                .join(', ')})`;
+    const summary = coverages.map(coverage => `${describe(coverage)}: ${coverage.start} — ${coverage.end} (${coverageStatus(coverage, snapshot)})`).join('. ');
+    // One structure for every vehicle. Blocks a vehicle has nothing to put in fade out in place
+    // instead of being dropped, so moving between vehicles does not resize the card under the reader.
+    return (index.h("article", { class: "coverage-timeline warranty-card", "data-empty": hasCoverage ? 'false' : 'true', style: { '--card-accent': cardAccent } }, index.h("header", { class: "activation-header" }, index.h("div", { class: "activation-main" }, index.h("p", { class: "activation-title" }, index.h("span", null, dealerLabel, ":"), " ", index.h("strong", null, dealerName || '—')), index.h("div", { class: "broker-slot", "data-empty": activatingBroker ? 'false' : 'true', "aria-hidden": activatingBroker ? null : 'true' }, index.h("p", { class: "activation-broker" }, index.h("span", null, locale.broker, ":"), " ", index.h("strong", null, activatingBroker)))), index.h("div", { class: "total-slot", "data-empty": hasCoverage ? 'false' : 'true', "aria-hidden": hasCoverage ? null : 'true' }, index.h(TotalCoverage, { coverages: coverages, locale: locale }))), index.h(Collapsible, { open: !!notice }, index.h(NoticeStrip, { text: notice })), index.h("section", { class: "journey", "aria-label": locale.warrantyCoverage }, index.h("div", { class: "journey-head" }, index.h(StatusBadge, { state: verdict(isAuthorized), text: isAuthorized ? locale.authorized : locale.unauthorized }), index.h(StatusBadge, { state: verdict(hasActiveWarranty), text: hasActiveWarranty ? locale.activeWarranty : locale.notActiveWarranty })), index.h("div", { class: "timeline-shell", "data-empty": hasCoverage ? 'false' : 'true', "aria-hidden": hasCoverage ? null : 'true' }, index.h("div", { class: "timeline shift-skeleton", role: "group", "aria-label": locale.warrantyCoverage }, index.h("div", { class: "today-head", "aria-hidden": "true", style: { '--at': asPercentage(todayPosition) }, ref: element => positionTodayPill(element, todayPosition) }, hasCoverage && index.h("span", { class: "today-pill" }, `${locale.today} · ${snapshot}`)), index.h("div", { class: "axis", "aria-hidden": "true", ref: thinAxis }, ticks.map(tick => {
+        const at = positionInRange(tick);
+        // Ticks no longer necessarily reach the rail's ends — a lapsed warranty's dates all
+        // sit left of today — so which way a date is set follows its position rather than
+        // its place in the list.
+        return (index.h("span", { class: "axis-date", key: tick, "data-align": at <= 0.5 ? 'start' : at >= 99.5 ? 'end' : 'mid', style: { '--at': asPercentage(at) } }, tick));
+    })), index.h("div", { class: "lane" }, hasCoverage && index.h("span", { class: "today-tail", "aria-hidden": "true", style: { '--at': asPercentage(todayPosition) } }), index.h("div", { class: "coverage-list", role: "list" }, coverages.map(coverage => {
+        const status = coverageStatus(coverage, snapshot);
+        const start = positionInRange(coverage.start);
+        const span = positionInRange(coverage.end) - start;
+        return (index.h("div", { key: coverage.id, role: "listitem", class: "coverage-entry", "data-kind": coverage.kind, "data-status": status, "aria-label": `${describe(coverage)}, ${coverage.start} — ${coverage.end}`, style: Object.assign({ '--start': asPercentage(start), '--span': asPercentage(span) }, toneVariables(coverage.tone)) }, index.h("div", { class: `segment ${coverage.kind === 'standard' ? 'is-standard' : 'is-extended'}${coverage.alt ? ' tone-alt' : ''}` }, coverage.kind === 'standard' ? (index.h("strong", null, locale.standardWarrantyMark)) : coverage.logo ? (
+        // Decorative: the provider is already named in the entry's aria-label,
+        // so alt text here would announce it twice.
+        index.h("img", { class: "provider-logo", src: coverage.logo, alt: "", loading: "lazy" })) : null), index.h("span", { class: "coverage-label" }, coverage.label)));
+    })), hasCoverage && index.h("span", { class: "past-wash", "aria-hidden": "true", style: { '--to': asPercentage(todayPosition) } }), index.h("div", { class: "boundary-layer", "aria-hidden": "true" }, coverages.slice(1).map(coverage => (index.h("span", { key: coverage.id, class: "boundary", style: Object.assign({ '--at': asPercentage(positionInRange(coverage.start)) }, toneVariables(coverage.tone)) })))), hasCoverage && index.h("span", { class: "today-marker", "aria-hidden": "true", style: { '--at': asPercentage(todayPosition) } })), hasCoverage && index.h("p", { class: "sr-only" }, summary))))));
+}
+function TotalCoverage({ coverages, locale }) {
+    const monthsFor = (kind) => coverages.filter(coverage => coverage.kind === kind).reduce((total, coverage) => total + monthsBetween(coverage.start, coverage.end), 0);
+    const standardMonths = monthsFor('standard');
+    const extendedMonths = monthsFor('extended');
+    const mix = [
+        standardMonths ? `${formatDuration(standardMonths, locale)} ${locale.standard}` : '',
+        extendedMonths ? `${formatDuration(extendedMonths, locale)} ${locale.extended}` : '',
+    ]
+        .filter(Boolean)
+        .join(' + ');
+    // The block keeps its box on a vehicle with no coverage so the header does not resize, but it
+    // reports no total rather than a total of zero — and a dash is narrow enough that it does not
+    // reflow the label beside it, which is what made the invisible block taller than a real one.
+    const total = mix ? formatDuration(standardMonths + extendedMonths, locale) : '—';
+    return (index.h("aside", { class: "total-coverage", "aria-label": `${locale.totalPlannedProtection}: ${mix || total}` }, index.h("span", null, locale.totalPlannedProtection), index.h("strong", null, total), index.h("span", { class: "coverage-mix" }, mix)));
+}
+
+const vehicleWarrantyTimelineCss = () => `*,: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;}: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}.sr-only{clip:rect(0,0,0,0);border:0;border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.\\!pointer-events-none{pointer-events:none!important}.visible{visibility:visible}.invisible{visibility:hidden}.static{position:static}.absolute{position:absolute}.\\!relative{position:relative!important}.relative{position:relative}.left-0{left:0}.top-0{top:0}.isolate{isolation:isolate}.z-10{z-index:10}.block{display:block}.flex{display:flex}.grid{display:grid}.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))}.flex-wrap{flex-wrap:wrap}.\\!overflow-hidden{overflow:hidden!important}.rounded{border-radius:.25rem}.rounded-\\[4px\\]{border-radius:4px}.border{border-width:1px}.uppercase{text-transform:uppercase}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-100{opacity:1}.outline{outline-style:solid}.ring{--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(3px + 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)}.grayscale{--tw-grayscale:grayscale(100%)}.filter,.grayscale{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)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.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)}.duration-500{transition-duration:.5s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.shift-skeleton{border-radius:4px;position:relative!important}.loading .shift-skeleton,.loading.shift-skeleton{border-style:none!important;overflow:hidden!important;pointer-events:none!important;position:relative!important}.shift-skeleton:after{background:linear-gradient(-45deg,#d4d8de,#e2e5e9,#d4d8de);background-color:#dde1e6;background-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.85) 50%,hsla(0,0%,100%,0));background-repeat:no-repeat;background-size:300% 300%;background-size:45% 100%;border-radius:inherit!important;content:"";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transform-origin:left;transition-duration:.5s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%;z-index:10}.loading .shift-skeleton:after,.loading.shift-skeleton:after{--tw-scale-x:1;animation:shimmer 2s ease-in-out infinite;opacity:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes shimmer{0%{background-position:100% 0}50%{background-position:0 100%}to{background-position:100% 0}}.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;position:relative;text-align:center}.vehicle-info-header-action{align-items:center;display:flex;position:absolute;right:12px;top:50%;transform:translateY(-50%)}.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{--paper:#fff;--ink:#1a2530;--muted:#5f6c78;--line:#d5dce2;--line-soft:#e8ecef;--blue:#3071a9;--blue-dark:#275e8f;--green:#2c8a58;--green-dark:#216b44;--red:#b42318;--red-dark:#9b2c2c;--red-tint:#fff1f0;--green-tint:#e8f4ed;--violet:#755aa5;--violet-dark:#5f4887;--paper-soft:#f7f9fa;--blue-tint:#e8f1f8;--shadow:0 18px 45px rgba(27,45,61,.1),0 2px 7px rgba(27,45,61,.06);--settle:320ms;--leave-scale:1.25;--rail-leave-scale:1.06;container-name:warranty-panel;container-type:inline-size;display:block}.coverage-timeline,.coverage-timeline *,.coverage-timeline :after,.coverage-timeline :before{box-sizing:border-box}.coverage-timeline{color:var(--ink);font-family:Segoe UI,Roboto,Helvetica,Arial,sans-serif}.warranty-card{background:var(--paper);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);overflow:hidden;position:relative;width:100%}.warranty-card:before{background:var(--card-accent,var(--line));content:"";height:4px;inset:0 0 auto;position:absolute;transition:opacity var(--settle) ease;z-index:3}.collapsible{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows var(--settle) ease,opacity calc(var(--settle) - 60ms) ease}.collapsible[data-open=true]{grid-template-rows:1fr;opacity:1}.collapsible-body{overflow:hidden}.activation-broker,.activation-title,.status-badge>span,.total-coverage,.warranty-notice>span{transition:opacity var(--settle) ease,transform var(--settle) ease}.activation-broker,.activation-title,.warranty-notice>span{transform-origin:left center}.total-coverage{background:transparent;border:0;border-inline-start:2px solid var(--green);border-radius:0;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;padding:2px 0 2px 14px}.total-coverage,[dir=rtl] .activation-broker,[dir=rtl] .activation-title,[dir=rtl] .warranty-notice>span{transform-origin:right center}[dir=rtl] .total-coverage{transform-origin:left center}.loading .activation-broker,.loading .activation-title,.loading .status-badge>span,.loading .total-coverage,.loading .warranty-notice>span{opacity:0;transform:scale(var(--leave-scale))}.notice-icon{flex:0 0 auto;height:16px;transition:opacity var(--settle) ease;width:16px}.loading .badge-icon,.loading .notice-icon{opacity:0}.axis,.lane,.today-head{transition:opacity var(--settle) ease,transform var(--settle) ease}.loading .axis,.loading .lane,.loading .today-head{opacity:0;transform:scale(var(--rail-leave-scale))}.loading .shift-skeleton:after{animation:warranty-sheen 1.3s linear infinite}@keyframes warranty-sheen{0%{background-position:-100% 0}to{background-position:200% 0}}.loading .warranty-card:before{opacity:0}.broker-slot,.timeline-shell,.total-slot{transition:opacity var(--settle) ease}.broker-slot[data-empty=true],.broker-slot[data-empty=true] .activation-broker,.collapsible[data-open=false] .notice-icon,.collapsible[data-open=false] .warranty-notice>span,.total-slot[data-empty=true],.total-slot[data-empty=true] .total-coverage{opacity:0}.timeline-shell[data-empty=true]{opacity:.45}.activation-header{align-items:center;display:grid;gap:14px;grid-template-columns:minmax(130px,1fr) auto;padding:14px 20px 12px}.activation-main{min-width:0}.status-badge{align-items:center;border-radius:999px;display:inline-flex;flex:1 1 0;font-size:13px;font-weight:700;gap:0;letter-spacing:-.005em;line-height:1.15;min-height:30px;min-width:0;overflow:hidden;padding:0;transition:color var(--settle) ease,background var(--settle) ease,box-shadow var(--settle) ease}.status-badge.is-positive{background:var(--green-tint);box-shadow:inset 0 0 0 1px rgba(44,138,88,.32);color:var(--green-dark)}.status-badge.is-negative{background:var(--red-tint);box-shadow:inset 0 0 0 1px rgba(180,35,24,.28);color:var(--red-dark)}.status-badge.is-idle{background:var(--line-soft);box-shadow:inset 0 0 0 1px rgba(95,108,120,.22);color:var(--muted)}.status-badge.is-idle .badge-icon{background:var(--line)}.status-badge>span{flex:1 1 auto;padding:6px 13px 6px 11px;text-align:center}.badge-icon{align-self:stretch;box-sizing:border-box;color:#fff;display:block;flex:0 0 auto;height:auto;padding:6px 9px;transition:opacity var(--settle) ease,background var(--settle) ease;width:34px}.status-badge.is-positive .badge-icon{background:var(--green)}.status-badge.is-negative .badge-icon{background:var(--red)}.loading .status-badge{animation:warranty-sheen 1.3s linear infinite;background-color:#dcdfe4;background-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.85) 50%,hsla(0,0%,100%,0));background-repeat:no-repeat;background-size:45% 100%;box-shadow:inset 0 0 0 1px rgba(95,108,120,.42)}.loading .status-badge .badge-icon{background:#dcdfe4}.loading .warranty-notice{animation:warranty-sheen 1.3s linear infinite;background-color:#dcdfe4;background-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.85) 50%,hsla(0,0%,100%,0));background-repeat:no-repeat;background-size:45% 100%;box-shadow:inset 0 1px 0 rgba(95,108,120,.42),inset 0 -1px 0 rgba(95,108,120,.42)}.activation-title{font-size:clamp(16px,3.2cqw,20px);font-weight:500;letter-spacing:-.025em;line-height:1.15;margin:0;overflow-wrap:anywhere}.activation-title span{color:var(--muted)}.activation-title strong{color:var(--ink);font-weight:760}.activation-broker{-webkit-box-orient:vertical;-webkit-line-clamp:1;display:-webkit-box;font-size:13px;font-weight:500;line-height:1.2;margin:3px 0 0;overflow:hidden;overflow-wrap:anywhere}.activation-broker span{color:var(--muted)}.activation-broker strong{color:var(--ink);font-weight:700}.warranty-notice{align-items:center;background:var(--red-tint);border-radius:0;box-shadow:inset 0 1px 0 rgba(180,35,24,.18),inset 0 -1px 0 rgba(180,35,24,.18);color:var(--red-dark);display:flex;font-size:13px;font-weight:650;gap:8px;line-height:1.3;margin-bottom:10px;padding:9px 20px}.total-slot{min-width:250px}.total-coverage span{color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.total-coverage strong{align-self:center;color:var(--green-dark);font-size:20px;grid-column:2;grid-row:1/span 2;line-height:1.1;margin:0 0 0 10px}.total-coverage .coverage-mix{color:var(--muted);font-size:9px;font-weight:600;letter-spacing:0;line-height:1.3;margin-top:2px;min-height:1.3em;text-transform:none}.journey{border-top:1px dashed var(--line);padding:10px 20px 12px}.journey-head{align-items:stretch;display:flex;flex-wrap:wrap;gap:7px 12px;justify-content:space-between;margin-bottom:8px}.timeline-shell{background:var(--paper-soft);border:1px solid var(--line);border-radius:10px;overflow:hidden;position:relative}.timeline{--axis-height:18px;padding:12px 14px 7px}.axis{border-bottom:1px solid #bdc7cf;height:var(--axis-height);margin:0 8px;position:relative;z-index:2}.axis-date{background:var(--paper-soft);color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;font-weight:800;inset:0 auto auto var(--at);line-height:1;padding:0 3px;position:absolute;transform:translateX(-50%);white-space:nowrap}.axis-date.is-crowded{display:none}.axis-date[data-align=start]{transform:none}.axis-date[data-align=end]{transform:translateX(-100%)}.axis-date:after{background:#aeb9c2;content:"";height:12px;left:50%;position:absolute;top:var(--axis-height);width:1px}.axis-date[data-align=start]:after{left:0}.axis-date[data-align=end]:after{left:100%}.lane{--track-top:16px;--track-height:54px;--label-band:41px;height:calc(var(--track-top) + var(--track-height) + var(--label-band));isolation:isolate;margin:0 8px;position:relative}.lane:before{background:repeating-linear-gradient(-45deg,rgba(95,108,120,.035) 0 5px,transparent 5px 10px),#edf1f3;border:1px solid var(--line-soft);border-radius:8px;content:"";height:var(--track-height);inset:var(--track-top) 0 auto;position:absolute}.today-head{height:50px;margin:0 8px;position:relative}.today-pill{background:var(--blue-tint);border:1px solid rgba(48,113,169,.32);border-radius:999px;color:var(--blue-dark);font-size:9px;font-weight:800;left:var(--at);letter-spacing:.04em;padding:3px 6px;position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}.today-head.is-near-end .today-pill{transform:translateX(calc(-100% + 8px))}.today-head.is-near-start .today-pill{transform:translateX(-8px)}.today-marker{bottom:var(--label-band);left:var(--at);pointer-events:none;position:absolute;top:calc(var(--axis-height)*-1 - 21px);width:0;z-index:5}.today-marker:before{background:var(--blue);bottom:0;box-shadow:0 0 0 1px hsla(0,0%,100%,.72);content:"";left:-1px;position:absolute;top:0;width:2px}.today-tail{bottom:0;left:var(--at);pointer-events:none;position:absolute;top:calc(100% - var(--label-band));width:0;z-index:0}.today-tail:before{background:var(--blue);box-shadow:0 0 0 1px hsla(0,0%,100%,.72);content:"";inset:0 auto 0 -1px;position:absolute;width:2px}.today-marker:after{background:var(--paper);border:2px solid var(--blue);border-radius:50%;content:"";height:8px;left:0;position:absolute;top:0;transform:translateX(-50%);width:8px}.coverage-entry{left:var(--start);min-width:0;position:absolute;top:var(--track-top);transition:opacity .16s ease,filter .16s ease;width:var(--span);z-index:var(--layer,1)}.coverage-list{inset:0;position:absolute;z-index:1}.segment{align-items:center;border:1px solid;border-radius:8px;box-shadow:inset 0 1px 0 hsla(0,0%,100%,.56);display:flex;height:var(--track-height);justify-content:center;min-width:0;overflow:hidden;position:relative;width:100%}.segment.is-standard{background:var(--tone-tint);border-color:var(--tone-border);border-inline-start:4px solid var(--tone);color:var(--tone-dark);justify-content:flex-start;padding:0 16px}.segment.is-standard strong{font-size:12px;font-weight:800;letter-spacing:.015em}.segment.is-extended{background:var(--tone-tint);border-color:var(--tone-border);border-style:dashed}.segment.is-extended.tone-alt{border-style:dotted;border-width:2px}.provider-logo{display:block;flex:0 0 auto;height:46px;max-width:calc(100% - 12px);-o-object-fit:contain;object-fit:contain;width:auto}.coverage-label{-webkit-box-orient:vertical;-webkit-line-clamp:3;color:var(--ink);display:-webkit-box;font-size:10px;font-weight:800;line-height:1.2;margin-top:5px;min-height:24px;overflow:hidden;overflow-wrap:anywhere;padding:0 4px;text-align:center;width:100%}.boundary{background:var(--tone,var(--blue));border:2px solid var(--paper);border-radius:50%;box-shadow:0 0 0 1px var(--tone-border,rgba(48,113,169,.46));height:10px;left:var(--at);top:calc(var(--track-top) + var(--track-height)/2);transform:translate(-50%,-50%);width:10px;z-index:6}.boundary,.past-wash{pointer-events:none;position:absolute}.past-wash{backdrop-filter:grayscale(.92);-webkit-backdrop-filter:grayscale(.92);background:linear-gradient(90deg,rgba(228,233,236,.62),rgba(228,233,236,.46));border-radius:8px 0 0 8px;height:var(--track-height);left:0;top:var(--track-top);width:var(--to,0);z-index:4}.boundary-layer{inset:0;pointer-events:none;position:absolute;z-index:6}@container warranty-panel (max-width: 820px){.activation-header{gap:6px 10px;grid-template-columns:minmax(0,1fr) auto;padding:10px 12px 9px}.activation-title{font-size:16px}.total-slot{justify-self:end;min-width:0;width:clamp(170px,50cqw,190px)}.total-coverage{padding-inline-start:10px}.total-coverage .coverage-mix{min-height:2.6em}}@container warranty-panel (max-width: 700px){.warranty-notice{font-size:12px;margin-bottom:8px;padding:8px 12px}.journey{padding:8px 8px 10px}.journey-head{gap:6px;margin-bottom:6px;padding-inline:4px}.status-badge{font-size:12px;min-height:28px}.status-badge>span{padding:5px 10px 5px 9px}.badge-icon{padding:5px 8px;width:30px}.timeline{--axis-height:30px;padding:10px 10px 5px}.today-head.is-near-end .today-pill{transform:translateX(calc(-100% - 46px))}.today-head.is-near-end .today-pill:after{border-top:1px solid rgba(48,113,169,.42);content:"";left:100%;position:absolute;top:50%;width:46px}.axis-date[data-align=end]{top:13px}.axis-date[data-align=end]:after{top:calc(var(--axis-height) - 13px)}}@container warranty-panel (max-width: 430px){.journey-head{align-items:stretch;flex-direction:column}.status-badge{justify-content:center}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}.h-\\[200px\\]{height:200px}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.text-\\[26px\\]{font-size:26px}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.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)}.pointer-events-none{pointer-events:none}.mx-auto{margin-left:auto;margin-right:auto}.size-\\[100px\\]{height:100px;width:100px}.size-full{height:100%;width:100%}.h-auto{height:auto}.max-h-\\[100px\\]{max-height:100px}.w-auto{width:auto}.w-fit{width:fit-content}.max-w-\\[100px\\]{max-width:100px}.shrink-0{flex-shrink:0}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.gap-\\[4px\\]{gap:4px}.overflow-x-auto{overflow-x:auto}.rounded-lg{border-radius:.5rem}.bg-black\\/40{background-color:rgba(0,0,0,.4)}.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)}.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)}.pointer-events-auto{pointer-events:auto}.bottom-\\[40px\\]{bottom:40px}.left-1\\/2{left:50%}.left-\\[30px\\]{left:30px}.ml-\\[-125px\\]{margin-left:-125px}.box-content{box-sizing:content-box}.size-\\[30px\\]{height:30px;width:30px}.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{--tw-translate-x:-50%}.-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))}.translate-y-\\[-5px\\]{--tw-translate-y:-5px}.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))}.scale-\\[70\\%\\]{--tw-scale-x:70%;--tw-scale-y:70%}.resize{resize:both}.justify-between{justify-content:space-between}.gap-\\[250px\\]{gap:250px}.overflow-hidden{overflow:hidden}.overflow-x-hidden{overflow-x:hidden}.overflow-y-hidden{overflow-y:hidden}.overflow-x-scroll{overflow-x:scroll}.rounded-\\[6px\\]{border-radius:6px}.border-\\[\\#f2aeb5\\]{--tw-border-opacity:1;border-color:rgb(242 174 181/var(--tw-border-opacity,1))}.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-\\[\\#f7d7d8\\]{--tw-bg-opacity:1;background-color:rgb(247 215 216/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}.pt-\\[16px\\]{padding-top:16px}.text-\\[16px\\]{font-size:16px}.text-\\[22px\\]{font-size:22px}.font-semibold{font-weight:600}.text-\\[\\#58151c\\]{--tw-text-opacity:1;color:rgb(88 21 28/var(--tw-text-opacity,1))}.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))}.duration-200{transition-duration:.2s}.\\[\\&_\\*\\]\\:shrink-0 *{flex-shrink:0}.end-0{inset-inline-end:0}.top-full{top:100%}.my-auto{margin-bottom:auto;margin-top:auto}.me-\\[16px\\]{margin-inline-end:16px}.mt-\\[4px\\]{margin-top:4px}.size-\\[16px\\]{height:16px;width:16px}.size-\\[18px\\]{height:18px;width:18px}.h-\\[150px\\]{height:150px}.w-\\[84px\\]{width:84px}.min-w-0{min-width:0}.max-w-full{max-width:100%}.flex-1{flex:1 1 0%}.rotate-180{--tw-rotate:180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.gap-\\[16px\\]{gap:16px}.gap-\\[6px\\]{gap:6px}.gap-\\[8px\\]{gap:8px}.whitespace-nowrap{white-space:nowrap}.border-b{border-bottom-width:1px}.border-amber-500{--tw-border-opacity:1;border-color:rgb(245 158 11/var(--tw-border-opacity,1))}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity,1))}.bg-amber-500{--tw-bg-opacity:1;background-color:rgb(245 158 11/var(--tw-bg-opacity,1))}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.p-\\[12px\\]{padding:12px}.p-\\[6px\\]{padding:6px}.px-\\[16px\\]{padding-left:16px;padding-right:16px}.px-\\[24px\\]{padding-left:24px;padding-right:24px}.py-\\[10px\\]{padding-bottom:10px;padding-top:10px}.py-\\[15px\\]{padding-bottom:15px;padding-top:15px}.py-\\[16px\\]{padding-bottom:16px;padding-top:16px}.py-\\[6px\\]{padding-bottom:6px;padding-top:6px}.py-\\[8px\\]{padding-bottom:8px;padding-top:8px}.text-center{text-align:center}.text-\\[17px\\]{font-size:17px}.font-medium{font-weight:500}.no-underline{text-decoration-line:none}.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-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150{transition-duration:.15s}.last\\:border-b-0:last-child{border-bottom-width:0}.hover\\:border-amber-600:hover{--tw-border-opacity:1;border-color:rgb(217 119 6/var(--tw-border-opacity,1))}.hover\\:bg-amber-50:hover{--tw-bg-opacity:1;background-color:rgb(255 251 235/var(--tw-bg-opacity,1))}.hover\\:bg-amber-600:hover{--tw-bg-opacity:1;background-color:rgb(217 119 6/var(--tw-bg-opacity,1))}.hover\\:bg-sky-100\\/50:hover{background-color:rgba(224,242,254,.5)}.max-w-\\[460px\\]{max-width:460px}.max-w-\\[520px\\]{max-width:520px}.translate-y-\\[-4px\\]{--tw-translate-y:-4px;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))}.select-none{user-select:none}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-start{justify-content:flex-start}.gap-\\[12px\\]{gap:12px}.gap-\\[2px\\]{gap:2px}.overflow-auto{overflow:auto}.\\!rounded-\\[12px\\]{border-radius:12px!important}.rounded-\\[14px\\]{border-radius:14px}.p-\\[16px\\]{padding:16px}.px-\\[12px\\]{padding-left:12px;padding-right:12px}.px-\\[14px\\]{padding-left:14px;padding-right:14px}.py-\\[12px\\]{padding-bottom:12px;padding-top:12px}.\\!pb-0{padding-bottom:0!important}.text-\\[13\\.5px\\]{font-size:13.5px}.leading-\\[1\\.35\\]{line-height:1.35}.text-amber-900\\/90{color:rgba(120,53,15,.9)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}@media (min-width:768px){.md\\:justify-between{justify-content:space-between}}.\\[\\&\\>div\\]\\:grow>div{flex-grow:1}.my-2{margin-bottom:.5rem;margin-top:.5rem}.grow{flex-grow:1}.fixed{position:fixed}.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))}.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}.z-\\[999\\]{z-index:999}.h-\\[100dvh\\]{height:100dvh}.w-\\[100dvw\\]{width:100dvw}.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%}.overflow-y-auto{overflow-y:auto}.overscroll-contain{overscroll-behavior:contain}.stroke-\\[1\\.5px\\]{stroke-width:1.5px}`;
+
+const VehicleWarrantyTimeline = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        // #region Localization
+        this.language = 'en';
+        this.locale = Object.assign({ sharedLocales: types.sharedLocalesSchema.getDefault() }, warrantyTimelineSchema.getDefault());
+        // #endregion
+        // #region Vehicle info layout prop
+        this.coreOnly = false;
+        this.disableVinValidation = 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.warrantyTimeline', warrantyTimelineSchema)]);
+        this.locale = Object.assign({ sharedLocales }, locale);
+    }
+    async setBlazorRef(newBlazorRef) {
+        this.blazorRef = newBlazorRef;
+    }
+    async setMockData(newMockData) {
+        this.mockData = newMockData;
+    }
+    async fetchVin(newData, headers = {}) {
+        await setVehicleLookupData(this, newData, headers);
+    }
+    async setErrorMessage(message) {
+        setVehicleLookupErrorState(this, message);
+    }
+    async clearData() {
+        this.vehicleLookup = undefined;
+    }
+    onLoadingChange(newValue) {
+        smartInvokable.smartInvokable.bind(this)(this.loadingStateChange, newValue);
+    }
+    // #endregion
+    render() {
+        var _a, _b;
+        return (index.h(index.Host, { key: '8d89add2d61e4dcee130eede83bea9a02733cec1', translate: "no" }, index.h(vehicleInfoLayout.VehicleInfoLayout, { key: '280006f828f2ded8ecd148a8cc8a7db939e1af29', 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: '81ecffef7b0c7fcb80d657ca0cc34c0afff11a88', class: "p-[16px]" }, index.h(CoverageTimeline, { key: '2532220db169ace764e9da2fd23c027a5023d12a', vehicleInformation: this.vehicleLookup, locale: this.locale, isAuthorized: (_b = this.vehicleLookup) === null || _b === void 0 ? void 0 : _b.isAuthorized })))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "language": [{
+                "changeLanguage": 0
+            }],
+        "isLoading": [{
+                "onLoadingChange": 0
+            }]
+    }; }
+};
+VehicleWarrantyTimeline.style = vehicleWarrantyTimelineCss();
+
 exports.vehicle_accessories = VehicleAccessories;
 exports.vehicle_claimable_items = VehicleClaimableItems;
 exports.vehicle_paint_thickness = VehiclePaintThickness;
@@ -1623,3 +2021,4 @@ exports.vehicle_sale_information = VehicleSaleInformation;
 exports.vehicle_service_history = VehicleServiceHistory;
 exports.vehicle_specification = VehicleSpecification;
 exports.vehicle_warranty_details = VehicleWarrantyDetails;
+exports.vehicle_warranty_timeline = VehicleWarrantyTimeline;