adp-web-components 0.3.13 → 0.3.15

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

@@ -0,0 +1,317 @@
+/*!
+ * Built by ShiftSoftware
+ * Copyright (c)
+ */
+import { h } from "@stencil/core";
+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) => (h("div", { class: "collapsible", "data-open": open ? 'true' : 'false', "aria-hidden": open ? null : 'true' }, h("div", { class: "collapsible-body" }, children)));
+const NoticeStrip = ({ text }) => (h("div", { class: "warranty-notice", role: "status" }, h("svg", { class: "notice-icon", viewBox: "0 0 512 512", "aria-hidden": "true", focusable: "false" }, h("path", { fill: "currentColor", d: BADGE_GLYPHS.negative })), 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 (h("span", { class: `status-badge is-${state}`, "aria-label": idle ? null : text, "aria-hidden": idle ? 'true' : null }, h("svg", { class: "badge-icon", viewBox: "0 0 512 512", "aria-hidden": "true", focusable: "false" }, !idle && h("path", { fill: "currentColor", d: state === 'positive' ? BADGE_GLYPHS.positive : BADGE_GLYPHS.negative })), h("span", null, idle ? '' : text)));
+};
+export default 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 (h("article", { class: "coverage-timeline warranty-card", "data-empty": hasCoverage ? 'false' : 'true', style: { '--card-accent': cardAccent } }, h("header", { class: "activation-header" }, h("div", { class: "activation-main" }, h("p", { class: "activation-title" }, h("span", null, dealerLabel, ":"), " ", h("strong", null, dealerName || '—')), h("div", { class: "broker-slot", "data-empty": activatingBroker ? 'false' : 'true', "aria-hidden": activatingBroker ? null : 'true' }, h("p", { class: "activation-broker" }, h("span", null, locale.broker, ":"), " ", h("strong", null, activatingBroker)))), h("div", { class: "total-slot", "data-empty": hasCoverage ? 'false' : 'true', "aria-hidden": hasCoverage ? null : 'true' }, h(TotalCoverage, { coverages: coverages, locale: locale }))), h(Collapsible, { open: !!notice }, h(NoticeStrip, { text: notice })), h("section", { class: "journey", "aria-label": locale.warrantyCoverage }, h("div", { class: "journey-head" }, h(StatusBadge, { state: verdict(isAuthorized), text: isAuthorized ? locale.authorized : locale.unauthorized }), h(StatusBadge, { state: verdict(hasActiveWarranty), text: hasActiveWarranty ? locale.activeWarranty : locale.notActiveWarranty })), h("div", { class: "timeline-shell", "data-empty": hasCoverage ? 'false' : 'true', "aria-hidden": hasCoverage ? null : 'true' }, h("div", { class: "timeline shift-skeleton", role: "group", "aria-label": locale.warrantyCoverage }, h("div", { class: "today-head", "aria-hidden": "true", style: { '--at': asPercentage(todayPosition) }, ref: element => positionTodayPill(element, todayPosition) }, hasCoverage && h("span", { class: "today-pill" }, `${locale.today} · ${snapshot}`)), 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 (h("span", { class: "axis-date", key: tick, "data-align": at <= 0.5 ? 'start' : at >= 99.5 ? 'end' : 'mid', style: { '--at': asPercentage(at) } }, tick));
+    })), h("div", { class: "lane" }, hasCoverage && h("span", { class: "today-tail", "aria-hidden": "true", style: { '--at': asPercentage(todayPosition) } }), 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 (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)) }, h("div", { class: `segment ${coverage.kind === 'standard' ? 'is-standard' : 'is-extended'}${coverage.alt ? ' tone-alt' : ''}` }, coverage.kind === 'standard' ? (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.
+        h("img", { class: "provider-logo", src: coverage.logo, alt: "", loading: "lazy" })) : null), h("span", { class: "coverage-label" }, coverage.label)));
+    })), hasCoverage && h("span", { class: "past-wash", "aria-hidden": "true", style: { '--to': asPercentage(todayPosition) } }), h("div", { class: "boundary-layer", "aria-hidden": "true" }, coverages.slice(1).map(coverage => (h("span", { key: coverage.id, class: "boundary", style: Object.assign({ '--at': asPercentage(positionInRange(coverage.start)) }, toneVariables(coverage.tone)) })))), hasCoverage && h("span", { class: "today-marker", "aria-hidden": "true", style: { '--at': asPercentage(todayPosition) } })), hasCoverage && 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 (h("aside", { class: "total-coverage", "aria-label": `${locale.totalPlannedProtection}: ${mix || total}` }, h("span", null, locale.totalPlannedProtection), h("strong", null, total), h("span", { class: "coverage-mix" }, mix)));
+}

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

@@ -77,9 +77,9 @@ export class VehicleAccessories {
             image: () => (h("div", { class: "size-[100px] flex mx-auto items-center justify-center" }, h("button", { onClick: ({ target }) => openImageViewer.bind(this)(target, accessory === null || accessory === void 0 ? void 0 : accessory.image), class: "shrink-0 relative ring-0 outline-none w-fit mx-auto [&_img]:hover:shadow-lg [&_div]:hover:!opacity-100 cursor-pointer" }, h("div", { class: "absolute flex-col justify-center gap-[4px] size-full flex items-center pointer-events-none hover:opacity-100 rounded-lg opacity-0 bg-black/40 transition-all duration-300" }, h("img", { src: Eye }), h("span", { class: "text-white" }, texts.expand)), h("img", { class: "w-auto h-auto max-w-[100px] max-h-[100px] cursor-pointer shadow-sm rounded-lg transition-all duration-300", src: accessory === null || accessory === void 0 ? void 0 : accessory.image })))),
         }));
         const templateRow = {
-            image: () => h("div", { key: 'a3f944e419e8c0e635f57ac58f397ba9e30f9b0e', class: "size-[100px] flex mx-auto items-center justify-center" }, "\u00A0"),
+            image: () => h("div", { key: 'e9d29ca002cbdff7ba6861a76b667292d8776764', class: "size-[100px] flex mx-auto items-center justify-center" }, "\u00A0"),
         };
-        return (h(Host, { key: 'b2beef21cb88c79008e35c0a17728290a0d8d4d4', translate: "no" }, h(ImageViewer, { key: '8e839e67f529c05b35162032a33636c2afbc27b5', closeImageViewer: () => closeImageViewer.bind(this)(), expandedImage: this.expandedImage }), h(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 }, h("div", { key: '1b2c52ee66e2d942e94e88f1d001f2cf16c8f3b4', class: "overflow-x-auto" }, h("information-table", { key: '21a4f6151dc2503bace293e106a4a06bbd6b114a', templateRow: templateRow, rows: rows, headers: tableHeaders, isLoading: this.isLoading })))));
+        return (h(Host, { key: '5754d83d9a87285824e896a8bb7531a2b68a5f01', translate: "no" }, h(ImageViewer, { key: 'a7102dba9d94d368c84f62bd40892105596014da', closeImageViewer: () => closeImageViewer.bind(this)(), expandedImage: this.expandedImage }), h(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 }, h("div", { key: '416ef484b9c8f892512d8b72cbab3bcd22c022ea', class: "overflow-x-auto" }, h("information-table", { key: 'ba80b210fdf468ceea7661237ae4d548c4fd8205', templateRow: templateRow, rows: rows, headers: tableHeaders, isLoading: this.isLoading })))));
     }
     static get is() { return "vehicle-accessories"; }
     static get encapsulation() { return "shadow"; }

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

@@ -504,19 +504,19 @@ export class VehicleClaimableItems {
         const showActivationBox = showActivationRequired || showActivationBlocked || this.showPrintBox;
         const isBlockedBox = showActivationBlocked && !this.showPrintBox;
         const showActionButton = this.showPrintBox || showActivationRequired;
-        return (h(Host, { key: 'df9cfe8fcfa140c95d8b82739ebcf5b3359778be', translate: "no" }, 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) }), 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 }), 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 }), h(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 ? (h("button", { type: "button", class: "trace-trigger-button", title: this.locale.viewTrace, "aria-label": this.locale.viewTrace, onClick: this.openTraceModal }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("circle", { cx: "6", cy: "19", r: "3" }), h("path", { d: "M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15" }), h("circle", { cx: "18", cy: "5", r: "3" })))) : null }, h("div", { key: '330de13921b7ce1410f97e0e853685585f746247', dir: "ltr", class: cn('relative flex items-center h-[320px] transition-all duration-300', { loading: this.isLoading || this.tabAnimationLoading }) }, h("div", { key: 'a5fd082db1ca3b314653bb1b77d8dbaa9995af85', dir: this.locale.sharedLocales.direction, class: "absolute top-0 z-10 w-full pt-[16px]" }, h("div", { key: 'e46422c6f21e67e43a937c7b9ab1ddc76d2364f5', class: cn('duration-300', { 'translate-y-[-50%] opacity-0': hideTabs }) }, h("shift-tabs", { key: '59196fc9a9d588b6c022542846d71073889e422a', activeTabLabel: this.activeTab, changeActiveTab: this.onActiveTabChange, tabs: tabs }))), h("div", { key: '2582749f45fbb774ea8c1608d04e057268a20301', class: cn('absolute w-[calc(100%-60px)] left-[30px] progress-container-style opacity-0', { 'opacity-100': this.isLoading || this.tabAnimationLoading }) }, h("div", { key: '091bba8e3de011477934d573fad7e8318c56f546', class: "w-full h-full rounded-[4px] overflow-x-hidden absolute left-0 top-0" }, h("div", { key: 'be32e3e21647bbde190dcf5c59f0dfd1f47ba602', class: "absolute opacity-0 bg-[#1a1a1a] w-[150%] h-full" }), h("div", { key: '75fcaae453dd32e8306cfc01dff4d3049d1fbeec', class: "absolute h-full bg-[linear-gradient(to_bottom,_#428bca_0%,_#3071a9_100%)] lane-inc" }), h("div", { key: 'a90fd86d0bd0e195928966916ac978c91991872c', class: "absolute h-full bg-[linear-gradient(to_bottom,_#428bca_0%,_#3071a9_100%)] lane-dec" }))), h("div", { key: '6a0b6604a05b9413aa4701bd25bd00827b5cb8e3', dir: this.locale.sharedLocales.direction, class: 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 (h(Host, { key: '68bae301ffc05d11cf272f7dec997c72c26aba6e', translate: "no" }, 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) }), 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 }), 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 }), h(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 ? (h("button", { type: "button", class: "trace-trigger-button", title: this.locale.viewTrace, "aria-label": this.locale.viewTrace, onClick: this.openTraceModal }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("circle", { cx: "6", cy: "19", r: "3" }), h("path", { d: "M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15" }), h("circle", { cx: "18", cy: "5", r: "3" })))) : null }, h("div", { key: 'e6db5f9381c858f90942a0ebe69950fa72ab2dbb', dir: "ltr", class: cn('relative flex items-center h-[320px] transition-all duration-300', { loading: this.isLoading || this.tabAnimationLoading }) }, h("div", { key: '364b107f12160895213a1c12c2ecda8a3d4fcc9c', dir: this.locale.sharedLocales.direction, class: "absolute top-0 z-10 w-full pt-[16px]" }, h("div", { key: '3bfe16b7177cd4601d3cb512736afbdface2baee', class: cn('duration-300', { 'translate-y-[-50%] opacity-0': hideTabs }) }, h("shift-tabs", { key: '2bcda9871bb627060a31996397ef9f34167d9245', activeTabLabel: this.activeTab, changeActiveTab: this.onActiveTabChange, tabs: tabs }))), h("div", { key: 'd8b7439570750e8ab05f7cf367c6f662d005d291', class: cn('absolute w-[calc(100%-60px)] left-[30px] progress-container-style opacity-0', { 'opacity-100': this.isLoading || this.tabAnimationLoading }) }, h("div", { key: '1e52fc280b2387c1325edfe5039359c71d9f20dc', class: "w-full h-full rounded-[4px] overflow-x-hidden absolute left-0 top-0" }, h("div", { key: 'b8ceab588402eaa72cb3e8da8d3ebafb69a2c392', class: "absolute opacity-0 bg-[#1a1a1a] w-[150%] h-full" }), h("div", { key: 'bdc2ddcc9de7c9a7fae5641b845934bda31a31c6', class: "absolute h-full bg-[linear-gradient(to_bottom,_#428bca_0%,_#3071a9_100%)] lane-inc" }), h("div", { key: '7244762ba3628f89fcc155e1ff0f5ab8ae9f4b8d', class: "absolute h-full bg-[linear-gradient(to_bottom,_#428bca_0%,_#3071a9_100%)] lane-dec" }))), h("div", { key: 'f9d7efabd0f7ebaedc9ff62ac918f7c693693d7d', dir: this.locale.sharedLocales.direction, class: 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,
-            }) }, h("span", { key: '1951c3f50ca9e3772ab3b383c79cff4a999d08bc', class: "font-semibold" }, this.showPrintBox
+            }) }, h("span", { key: '99bcca2ae1af8cf8011b09b8f9095471d849f1c0', class: "font-semibold" }, this.showPrintBox
             ? this.locale.successFulClaimMessage
             : showActivationBlocked
                 ? this.locale.activationBlockedNotAllocated
-                : this.locale.warrantyAndServicesNotActivated), showActionButton && (h("button", { key: '40c6021e8b6cea1f63131bd0ac1e9c2019f417ff', class: "claim-button", onClick: this.showPrintBox ? this.printLastClaimResponse : this.activateClaimItem }, this.showPrintBox ? h(PrintIcon, { class: "size-[30px] duration-200" }) : h(ActivationIcon, { class: "size-[30px] duration-200" }), h("span", { key: '32fd1e6eb7a5cd6b2c6b8c597a387210463df37a' }, this.showPrintBox ? this.locale.print : this.locale.activateNow)))), h("div", { key: 'b672849aa4fee7fc18ee211b0ea42d62be7e182f', class: "claimable-items-box px-[30px] min-w-full relative overflow-x-scroll h-full overflow-y-hidden" }, h("div", { key: 'f95373f7e84f4c7f4536becea66bbc0b30cd57d8', class: "flex relative w-fit min-w-full items-center h-full [&_*]:shrink-0 gap-[250px] justify-between" }, h("div", { key: 'c57a29ac7c21bf4c199d47550a0f80e81191c7a0', class: cn('progress-container-style progress-lane absolute overflow-hidden w-[calc(100%-0px)] translate-y-0 opacity-100', {
+                : this.locale.warrantyAndServicesNotActivated), showActionButton && (h("button", { key: '11e5a0ba57ea6a87314d1805a339464e27db5340', class: "claim-button", onClick: this.showPrintBox ? this.printLastClaimResponse : this.activateClaimItem }, this.showPrintBox ? h(PrintIcon, { class: "size-[30px] duration-200" }) : h(ActivationIcon, { class: "size-[30px] duration-200" }), h("span", { key: '8c6d367d50296dcfabe5c0fde4baa4517fc47d6a' }, this.showPrintBox ? this.locale.print : this.locale.activateNow)))), h("div", { key: 'c0e7808bac5ce9c07ca8be88d0e03b1c0766bbf6', class: "claimable-items-box px-[30px] min-w-full relative overflow-x-scroll h-full overflow-y-hidden" }, h("div", { key: '82cbe7ef5d767f5ba9d2962e112921a8d4b8895b', class: "flex relative w-fit min-w-full items-center h-full [&_*]:shrink-0 gap-[250px] justify-between" }, h("div", { key: '8042a3f857f7034c33db5b81f6b5339386a5dd61', class: cn('progress-container-style progress-lane absolute overflow-hidden w-[calc(100%-0px)] translate-y-0 opacity-100', {
                 'opacity-0': this.isLoading || this.tabAnimationLoading || isNoServicesAvailable || !this.vehicleLookup,
-            }) }, h("div", { key: 'b4a644f5846314d8e7dc65968bdaaf0e707a4dff', part: "progress-bar", class: "progress-bar transition-all w-1/2 h-full bg-[linear-gradient(to_bottom,_#428bca_0%,_#3071a9_100%)]" })), h("div", { key: '31c56097be767e1afa32b6c2fb53a37683795476', class: "ml-[-125px]" }), serviceItems.map((item, idx) => (h(ClaimableItem, { item: item, locale: this.locale, setClaimableItemPopover: this.setClaimableItemPopover, addStatusClass: item.status !== 'pending' || serviceItems.findIndex(i => i.status === 'pending') === idx }))), h("div", { key: '4ef500d7bce733939ee622fa7f2ee7ea51c43b5c', class: "ml-[-125px]" })), h("div", { key: '9243cb60a9872c35811dbdd05c65eb3c723f7980', dir: this.locale.sharedLocales.direction, class: cn('absolute top-0 left-0 pointer-events-none size-full box-content flex flex-col justify-center opacity-0 transition duration-500 items-center text-slate-700', {
+            }) }, h("div", { key: 'c622a8a612849f8ab57b2c09bcd45cf1087dc07d', part: "progress-bar", class: "progress-bar transition-all w-1/2 h-full bg-[linear-gradient(to_bottom,_#428bca_0%,_#3071a9_100%)]" })), h("div", { key: '60ee69cc976626263ea85a413e0b0cae59f20c2f', class: "ml-[-125px]" }), serviceItems.map((item, idx) => (h(ClaimableItem, { item: item, locale: this.locale, setClaimableItemPopover: this.setClaimableItemPopover, addStatusClass: item.status !== 'pending' || serviceItems.findIndex(i => i.status === 'pending') === idx }))), h("div", { key: '8712c4482963e722fda2bae3fcd6d705c8c88967', class: "ml-[-125px]" })), h("div", { key: '4625d3e324199a0341e99c9d86d9d84ecf753eb6', dir: this.locale.sharedLocales.direction, class: cn('absolute top-0 left-0 pointer-events-none size-full box-content flex flex-col justify-center opacity-0 transition duration-500 items-center text-slate-700', {
                 'opacity-100 scale-100': isNoServicesAvailable,
-            }) }, h(EmptyTableIcon, { key: '862c167ef3da93a0d06da302535ccdd475685eec', class: "size-[90px]" }), h("div", { key: 'ad109c235c9ee1ee5e8fbbf06420e943909bc45b', class: "text-[22px]" }, this.locale.sharedLocales.errors.noServiceAvailable)))))));
+            }) }, h(EmptyTableIcon, { key: 'a27ff22d00a9eaa4838d81eb9b89c6f49301736f', class: "size-[90px]" }), h("div", { key: '5c64b22e1433391a015dccab10c0ec37d2f92004', class: "text-[22px]" }, this.locale.sharedLocales.errors.noServiceAvailable)))))));
     }
     static get is() { return "vehicle-claimable-items"; }
     static get encapsulation() { return "shadow"; }

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

@@ -335,22 +335,22 @@ export class VehicleItemClaimForm {
         const isFormValid = this.getIsFormValid();
         const hasDocuments = !!((_d = (_c = this.inputs) === null || _c === void 0 ? void 0 : _c.documents) === null || _d === void 0 ? void 0 : _d.length);
         const showUploadProgress = this.isLoading && ((_e = this.item) === null || _e === void 0 ? void 0 : _e.showDocumentUploader) && hasDocuments;
-        return (h(Host, { key: '3a09d53fd961d1904d09c894a9977a999bce6290', translate: "no" }, h(ImageViewer, { key: 'fb1f5fd69a8fc340f0bbd431681487428e004c51', style: { 'z-index': '99999999' }, expandedImage: this.expandedImage, imageStyle: { 'z-index': '999999999' }, closeImageViewer: () => closeImageViewer.bind(this)() }), h("div", { key: 'a95fdacea2063289449edea25d9aa2f147fbad36', dir: this.locale.sharedLocales.direction, class: cn('claim-scrim fixed top-0 left-0 z-[999] w-[100dvw] h-[100dvh] overflow-y-auto overscroll-contain pointer-events-none transition duration-500 scale-[110%] opacity-0', {
+        return (h(Host, { key: 'dfa721300fb98c893f247372f2de9fddbba07e5e', translate: "no" }, h(ImageViewer, { key: '71707b85fdc518b0c9e377c5d5fe50fdeb8f6fd3', style: { 'z-index': '99999999' }, expandedImage: this.expandedImage, imageStyle: { 'z-index': '999999999' }, closeImageViewer: () => closeImageViewer.bind(this)() }), h("div", { key: '5528511e812402fc426a356d72d076f998d85b75', dir: this.locale.sharedLocales.direction, class: cn('claim-scrim fixed top-0 left-0 z-[999] w-[100dvw] h-[100dvh] overflow-y-auto overscroll-contain pointer-events-none transition duration-500 scale-[110%] opacity-0', {
                 'opacity-1 scale-100 pointer-events-auto': this.isOpened,
                 'compact': this.compact,
-            }) }, h("div", { key: '47d2009c2620c71e9bf4e71d1f7397cb82d2d6db', class: "stage" }, h("div", { key: '4ee0d752a656732574c0c8d23fb33ea6e79c6f1f', class: cn('voucher', { side: !isBottomStub, bottom: isBottomStub, qr: isQRScannerForm }) }, h("button", { key: 'b06a4a445e9c7abced3e0cffca8a4e1b35a79d87', disabled: this.isLoading, onClick: this.close.bind(this), class: "btn-close", "aria-label": "Close" }, h(AddIcon, { key: '04770841e967650ba1d7934cf2dc144eebe73d5d', class: "stroke-[1.5px]" })), h("section", { key: '89a1d272edd04198447a0d6206da3fbea5884573', class: "v-body" }, h("div", { key: 'cafe76bafdbb5ddf7169701a47bc15f45ec35ea8', class: "item-row" }, h("div", { key: '66cb6281a1a6c33322c7d2853effe582a6d63237' }, !!((_f = this.item) === null || _f === void 0 ? void 0 : _f.type) && h("span", { key: 'e09d034d8659edd3a827e9a7214de1a01732436e', class: "item-type" }, this.item.type), h("div", { key: '9b5cc0d71f3eb86b824bca550a9f4926a8847f40', class: "item-name" }, (_g = this.item) === null || _g === void 0 ? void 0 : _g.name)), h("div", { key: 'fcaad6353795aab5f23a2487164d7933a266a8f7', class: "vin-stamp" }, h("div", { key: '67675a3e2ae40facde3a132a5930bbcfbfec4a30', class: "lab" }, this.locale.vin), h("div", { key: '7cdf792c06cc2b72bfacd2590a8e5ffe101b055e', class: "vin", dir: "ltr" }, this.vin), !!((_h = this.item) === null || _h === void 0 ? void 0 : _h.printUrl) && (h("button", { key: '50b020cc847a9094bb7112a039fdc2abb182efea', class: "btn-print", onClick: () => { var _a; return (_a = window.open(this.item.printUrl, '_blank')) === null || _a === void 0 ? void 0 : _a.focus(); } }, h(PrinterIcon, { key: '60ab78a26c8099730d7d3c63d2ca1c6a0aa37db4' }), this.locale.print)))), h("div", { key: '21f301a99b804aa7dea590f7465f6d337c1a6ef7', class: "specs" }, h("div", { key: '7c6314d7c36c4c7f22dc69bbfd407f83a380bdc8', class: "spec" }, h("div", { key: '4fe65caa6c11ef31886d0d932ffe92002d681e22', class: "lab" }, this.locale.activationDate), h("div", { key: '64d19ed572c2223edd8d6d4ab3c5b72145fd421f', class: "val", dir: "ltr" }, ((_j = this.item) === null || _j === void 0 ? void 0 : _j.activatedAt) || '—')), h("div", { key: 'cbb976acf0b8700c1da2d87dc2d10b35f8e90924', class: "spec" }, h("div", { key: 'ceacc4cad3bbfd66278c061bc7d447e601bf5bb4', class: "lab" }, this.locale.expireDate), h("div", { key: 'fda8cf92980bec97d59ceffa5542162e795a3a02', class: "val", dir: "ltr" }, ((_k = this.item) === null || _k === void 0 ? void 0 : _k.expiresAt) || '—')), h("div", { key: 'c59a1ea45f41875c4a4d8c269223a33aae0dafd1', class: "spec pkg" }, h("div", { key: '8e8cb21c06555f88fd4d5063c0ae2f084d0db378', class: "lab" }, this.locale.packageCode), h("div", { key: 'cf4833cf6d832dc6e3ca5c49fbdd72fe12d71797', class: "val", dir: "ltr" }, ((_l = this.item) === null || _l === void 0 ? void 0 : _l.packageCode) || '—'))), Array.isArray((_m = this.item) === null || _m === void 0 ? void 0 : _m.warnings) && !!this.item.warnings.length && (h("div", { key: '2d3b9abad25e7a1007d200648362685720a75a09', class: "notices" }, this.item.warnings.map(warning => (h("div", { key: warning.key, class: cn('notice', { info: !(warning === null || warning === void 0 ? void 0 : warning.confirmationText) }) }, h("div", { class: "doc-row" }, h("div", { class: "ntc-body", innerHTML: warning.bodyContent }), (warning === null || warning === void 0 ? void 0 : warning.imageUrl) && (h("button", { class: "doc-thumb-btn", title: this.locale.expand, onClick: event => this.openWarningImage(event, warning === null || warning === void 0 ? void 0 : warning.imageUrl) }, h("span", { class: "thumb-overlay" }, h("img", { src: Eye }), this.locale.expand), h("img", { class: "doc-thumb", src: warning === null || warning === void 0 ? void 0 : warning.imageUrl })))), (warning === null || warning === void 0 ? void 0 : warning.confirmationText) && (h("div", { class: "confirm" }, h("label", { class: cn({ disabled: this.isLoading }) }, h("input", { type: "checkbox", class: "sr-only", disabled: this.isLoading, checked: !!this.confirmationStates[warning.key], onChange: this.onConfirmCheckboxChange(warning.key) }), h("span", { class: "cbx-face" }, h(CheckIcon, null)), warning === null || warning === void 0 ? void 0 :
-            warning.confirmationText))))))))), h("aside", { key: '8575678299db15654aef32745f2ebf9065eb2fe5', class: "stub" }, h("div", { key: 'ec8960e4dc691d6b50ba090d01810bbd27961283', class: "perf" }), h("span", { key: 'b8483abc2a24b9b6dc758194a35fa598bc53f1d3', class: "punch p1" }), h("span", { key: '329b4207e3ac2c1bda01df70bd92f9557b351e12', class: "punch p2" }), isQRScannerForm && h("div", { key: '4d8ea41cad5fe2720e19ba732a680cb56df3eb1e', class: "field-label" }, this.locale.qrCode), h("div", { key: '1fcc19f531fbde24a846aed57430c2e4c9fdb080', class: "claim-area" }, isQRScannerForm ? (h("div", { class: cn('scanzone', { disabled: disableInputs }) }, h("div", { class: "sz-row" }, h("span", { class: "qr-ic" }, h(QrCodeScanIcon, null)), h("input", { dir: "ltr", autofocus: true, type: "text", spellcheck: "false", autocomplete: "off", disabled: disableInputs, onBlur: () => {
+            }) }, h("div", { key: 'a0bafc489eab356888b93d2e65a18c577238e3cc', class: "stage" }, h("div", { key: '6d3442bb216b475329923901e994232acce93ff9', class: cn('voucher', { side: !isBottomStub, bottom: isBottomStub, qr: isQRScannerForm }) }, h("button", { key: 'e8488f1141179eaca2bbd69e8fd2ae410369a9db', disabled: this.isLoading, onClick: this.close.bind(this), class: "btn-close", "aria-label": "Close" }, h(AddIcon, { key: 'eb58c2e25f30ab700ad14e723b5dac526381300a', class: "stroke-[1.5px]" })), h("section", { key: '2bbf81e8a0fe142b5cc14fcf6b36185bc76983e2', class: "v-body" }, h("div", { key: 'e6ba957329613aa3967fcc0da9850f6ad1aeb4e7', class: "item-row" }, h("div", { key: '9a99d5a5a7ee64c2990cd6ac781d01668c7b1747' }, !!((_f = this.item) === null || _f === void 0 ? void 0 : _f.type) && h("span", { key: 'c4bb8f384daf072cf5584edae06447ab96ff7df3', class: "item-type" }, this.item.type), h("div", { key: 'ac53358728ac2b01caa8b4276ed1d564a96e6ea3', class: "item-name" }, (_g = this.item) === null || _g === void 0 ? void 0 : _g.name)), h("div", { key: '7297983b82c0a926f0cece27b9e94b3ffac4fe85', class: "vin-stamp" }, h("div", { key: '48e80c5bda5961f2072930b452cc1864688d0af7', class: "lab" }, this.locale.vin), h("div", { key: '54c4c9b3f49bb1145beb49ffc6c5473d29332b48', class: "vin", dir: "ltr" }, this.vin), !!((_h = this.item) === null || _h === void 0 ? void 0 : _h.printUrl) && (h("button", { key: 'c7923872e635cd05e50cb6d1b588111610ae2d6f', class: "btn-print", onClick: () => { var _a; return (_a = window.open(this.item.printUrl, '_blank')) === null || _a === void 0 ? void 0 : _a.focus(); } }, h(PrinterIcon, { key: 'c661306cb71d96957361aaf57fdc67e1ceecb1c6' }), this.locale.print)))), h("div", { key: 'ba247787efb4de44f9625c4203054f0924dfeef6', class: "specs" }, h("div", { key: '22b0a8cde864ecf870b2f71ec1c039ac12086125', class: "spec" }, h("div", { key: '068447dbe1cfb5336995837eee2e3c049db1a763', class: "lab" }, this.locale.activationDate), h("div", { key: '4cd6dc0be3df47c701fa9ae5b732eb771befb2ad', class: "val", dir: "ltr" }, ((_j = this.item) === null || _j === void 0 ? void 0 : _j.activatedAt) || '—')), h("div", { key: '91fb411ade3a634375873d4fa466c9d0a1704549', class: "spec" }, h("div", { key: 'e4329555926da264de20b915408fc8fdf3a6726b', class: "lab" }, this.locale.expireDate), h("div", { key: '357e23015eabdcfbac0fb984a21964b96d51c229', class: "val", dir: "ltr" }, ((_k = this.item) === null || _k === void 0 ? void 0 : _k.expiresAt) || '—')), h("div", { key: '76e1136f4086c8f0887ae1376186077590b63671', class: "spec pkg" }, h("div", { key: '22e0e053939cfaeac44966126d50e8c3384a55b4', class: "lab" }, this.locale.packageCode), h("div", { key: '18dba510d560f639901e3f28aea5393ce33b4fcc', class: "val", dir: "ltr" }, ((_l = this.item) === null || _l === void 0 ? void 0 : _l.packageCode) || '—'))), Array.isArray((_m = this.item) === null || _m === void 0 ? void 0 : _m.warnings) && !!this.item.warnings.length && (h("div", { key: '84ff1f044b099055e77efa6e7e6dff8c15d343a8', class: "notices" }, this.item.warnings.map(warning => (h("div", { key: warning.key, class: cn('notice', { info: !(warning === null || warning === void 0 ? void 0 : warning.confirmationText) }) }, h("div", { class: "doc-row" }, h("div", { class: "ntc-body", innerHTML: warning.bodyContent }), (warning === null || warning === void 0 ? void 0 : warning.imageUrl) && (h("button", { class: "doc-thumb-btn", title: this.locale.expand, onClick: event => this.openWarningImage(event, warning === null || warning === void 0 ? void 0 : warning.imageUrl) }, h("span", { class: "thumb-overlay" }, h("img", { src: Eye }), this.locale.expand), h("img", { class: "doc-thumb", src: warning === null || warning === void 0 ? void 0 : warning.imageUrl })))), (warning === null || warning === void 0 ? void 0 : warning.confirmationText) && (h("div", { class: "confirm" }, h("label", { class: cn({ disabled: this.isLoading }) }, h("input", { type: "checkbox", class: "sr-only", disabled: this.isLoading, checked: !!this.confirmationStates[warning.key], onChange: this.onConfirmCheckboxChange(warning.key) }), h("span", { class: "cbx-face" }, h(CheckIcon, null)), warning === null || warning === void 0 ? void 0 :
+            warning.confirmationText))))))))), h("aside", { key: '3b704a2d1ebc36d028c5bd53027e60b223297c50', class: "stub" }, h("div", { key: '38c395c2c11beab0f9f0b779f4ccaea7f0500903', class: "perf" }), h("span", { key: 'ffdab5220aa5751b1a4457dfd405c8af6b8c3093', class: "punch p1" }), h("span", { key: '7a21360c2a6febd33259b315bf9e72bb38b87f5b', class: "punch p2" }), isQRScannerForm && h("div", { key: 'd5becfa26b6222ec84ed8885ddb55f5e2f045459', class: "field-label" }, this.locale.qrCode), h("div", { key: '3706f527a430972913fe6955b2f891ce5c62c6f5', class: "claim-area" }, isQRScannerForm ? (h("div", { class: cn('scanzone', { disabled: disableInputs }) }, h("div", { class: "sz-row" }, h("span", { class: "qr-ic" }, h(QrCodeScanIcon, null)), h("input", { dir: "ltr", autofocus: true, type: "text", spellcheck: "false", autocomplete: "off", disabled: disableInputs, onBlur: () => {
                 if (!this.claimError)
                     this.focusInputs();
             }, onKeyDown: this.onKeyDown, value: (_o = this.inputs) === null || _o === void 0 ? void 0 : _o.qrCode, placeholder: this.locale.scanTheVoucher, onInput: event => this.setInputValue('qrCode', event.target.value) })), h("div", { class: "scan-hint" }, h("span", { class: "dot" }), this.locale.scanHint))) : ([
             h("div", { class: "field", key: "invoice" }, h("label", null, this.locale.invoice), h("input", { dir: "ltr", autofocus: true, type: "text", spellcheck: "false", autocomplete: "off", disabled: disableInputs, onKeyDown: this.onKeyDown, value: (_p = this.inputs) === null || _p === void 0 ? void 0 : _p.invoice, placeholder: this.locale.invoice, onInput: event => this.setInputValue('invoice', event.target.value) })),
             h("div", { class: "field", key: "jobNumber" }, h("label", null, this.locale.jobNumber), h("input", { dir: "ltr", type: "text", spellcheck: "false", autocomplete: "off", disabled: disableInputs, onKeyDown: this.onKeyDown, value: (_q = this.inputs) === null || _q === void 0 ? void 0 : _q.jobNumber, placeholder: this.locale.jobNumber, onInput: event => this.setInputValue('jobNumber', event.target.value) })),
-        ]), ((_r = this.item) === null || _r === void 0 ? void 0 : _r.showDocumentUploader) && (h("div", { key: '73de78933bb8e0555f2a78b823ab0871073e423f', class: "upload-wrap" }, h("input", { key: '9b8883fa0fe04a3314d4504344a7810d13635bad', hidden: true, type: "file", class: "document-uploader", disabled: this.isLoading, accept: "image/*,application/pdf", onChange: this.onFileUploaderChange, multiple: this.uploadMultipleDocuments, "data-max-size": this.maximumDocumentFileSizeInMb * 1024 * 1024 }), h("div", { key: 'bfd473f6a103bfed2b1baf91c249fa40e6193f2e', class: cn('upload', { disabled: disableInputs }), onClick: this.onDocumentButtonClicked }, h("span", { key: 'cacae0265fe1c474ca6dea8a5f405fb91e9e756a', class: "ic" }, h(AttachIcon, { key: '9e68372260a29a941b038e15ac6101a43c32e65e' })), h("span", { key: '40f71a8e713f8fecf33d9f8d68b45ded7ead2260', class: "upload-text" }, h("span", { key: '288972dd90a2d8ed8ffead8ff3563b080d9c480d', class: "ut", title: this.uploadMultipleDocuments ? this.locale.uploadMultipleDocument : this.locale.uploadSingleDocument }, this.uploadMultipleDocuments ? this.locale.uploadMultipleDocument : this.locale.uploadSingleDocument, ((_s = this === null || this === void 0 ? void 0 : this.item) === null || _s === void 0 ? void 0 : _s.documentUploaderIsRequired) && !hasDocuments && h("span", { key: 'b941c3e76deee9c348e20aae1479c475557a834b', class: "req" }, "*")), h("span", { key: 'ad0867177d96d32c22ee0f5f786c1417c6e10e04', class: "us" }, this.locale.uploadHint)), hasDocuments && (h("button", { key: 'ea540553021cee975e0a6d2480539c331152bc2a', class: "upload-clear", onClick: this.clearFile, "aria-label": "Clear" }, h(AddIcon, { key: 'caab5cee1ab27f8ead7eea6c50202af47d14edbc' })))), h("flexible-container", { key: '8683efc9bd571a833a11fdbdde8448ae7e3191e7', isOpened: !!((_u = (_t = this.errors) === null || _t === void 0 ? void 0 : _t.documents) === null || _u === void 0 ? void 0 : _u.show) }, h("div", { key: 'fa1ca438a5094a440588080433bb74463f6e9c00', class: "upload-error" }, ((_w = (_v = this.errors) === null || _v === void 0 ? void 0 : _v.documents) === null || _w === void 0 ? void 0 : _w.text) === 'documentLimitError'
+        ]), ((_r = this.item) === null || _r === void 0 ? void 0 : _r.showDocumentUploader) && (h("div", { key: 'e55801cca5a24088b2da068a0857ebe21b00356c', class: "upload-wrap" }, h("input", { key: 'c3a9262a34b3a06698ca23eadf1cd511d64c3b78', hidden: true, type: "file", class: "document-uploader", disabled: this.isLoading, accept: "image/*,application/pdf", onChange: this.onFileUploaderChange, multiple: this.uploadMultipleDocuments, "data-max-size": this.maximumDocumentFileSizeInMb * 1024 * 1024 }), h("div", { key: '2c2a7bb687fcdc1e08bcd46d55d01991157a35a1', class: cn('upload', { disabled: disableInputs }), onClick: this.onDocumentButtonClicked }, h("span", { key: 'f56558763a578d2711f25c6516781a9f4bfd4437', class: "ic" }, h(AttachIcon, { key: '2ebd3293be2c35f3058f5f28c8e047305a6d1e5e' })), h("span", { key: '42980687115cdc8aebea4627301011fa57b636b8', class: "upload-text" }, h("span", { key: '1f2d94bec57f5a2fd80a50a0ff3abfc6fa574f7c', class: "ut", title: this.uploadMultipleDocuments ? this.locale.uploadMultipleDocument : this.locale.uploadSingleDocument }, this.uploadMultipleDocuments ? this.locale.uploadMultipleDocument : this.locale.uploadSingleDocument, ((_s = this === null || this === void 0 ? void 0 : this.item) === null || _s === void 0 ? void 0 : _s.documentUploaderIsRequired) && !hasDocuments && h("span", { key: 'cb9a2a4b24a7abbce8723129f9e8e139b4a68dca', class: "req" }, "*")), h("span", { key: '88f2a50a9a61fda99c4428ac0a08be29fd08c420', class: "us" }, this.locale.uploadHint)), hasDocuments && (h("button", { key: 'b02e0cde0240af8ae98523d6382dd48fd8fa27b0', class: "upload-clear", onClick: this.clearFile, "aria-label": "Clear" }, h(AddIcon, { key: '640c53b9a8f705d195778a22f04a5bac92016946' })))), h("flexible-container", { key: '4d8d03d740177dc0167062d589113e0a05a84536', isOpened: !!((_u = (_t = this.errors) === null || _t === void 0 ? void 0 : _t.documents) === null || _u === void 0 ? void 0 : _u.show) }, h("div", { key: 'be97a54285f4f9f2331fdb8022a054297407ad02', class: "upload-error" }, ((_w = (_v = this.errors) === null || _v === void 0 ? void 0 : _v.documents) === null || _w === void 0 ? void 0 : _w.text) === 'documentLimitError'
             ? this.locale.documentLimitError + `${this.maximumDocumentFileSizeInMb}Mb`
-            : this.locale.documentRequiredError || this.locale.sharedLocales.errors.wildCard)), h("flexible-container", { key: '5ad01fafcae699d08437e07982c33e837e11d40a', isOpened: hasDocuments, containerClasses: "" }, h("div", { key: '551e762eaa802a335ed0d66c68f1a4a94e60ef0d', class: "chips" }, (_y = (_x = this.inputs) === null || _x === void 0 ? void 0 : _x.documents) === null || _y === void 0 ? void 0 : _y.map((doc, idx) => (h("div", { class: cn('chip', { disabled: disableInputs }) }, h("span", { title: doc.name }, doc.name), h("button", { disabled: disableInputs, onClick: () => this.clearFile(idx), "aria-label": "Remove" }, h(AddIcon, null))))))))), h("div", { key: 'c60fbdc5fed587523a11ba1f379e5753eb9d29f2', class: "stub-spacer" }), h("button", { key: '8c17261d7bdbaca5d1a9994e4c6833428b17b576', class: cn('btn-claim', { loading: this.isLoading }), onClick: this.submit, disabled: !isFormValid || disableInputs }, this.isLoading && h("span", { key: 'ede8dbb96d10dee1cd44d5cd291c40deb800b2ea', class: "claim-progress", style: { width: `${showUploadProgress ? this.uploadProgress : 100}%` } }), h("span", { key: 'c850ac7904b65e8fb5bf07c5a2c4daf5a2378258', class: "claim-label" }, !this.isLoading && h(CheckIcon, { key: '2fa33f6b1d76f4d52d5b478f73ebcda411cce7c9' }), h("span", { key: '5021cfc3e85f34ba8591ff38bb1d90296de94e9f' }, this.isLoading ? `${this.locale.processing}${showUploadProgress ? ` ${this.uploadProgress}%` : ''}` : this.locale.claim))))))), !!this.claimError && (h("div", { key: 'c65dcd693c8fba4560e0a72f3d6775e593ad1b00', class: "err-scrim", onClick: event => {
+            : this.locale.documentRequiredError || this.locale.sharedLocales.errors.wildCard)), h("flexible-container", { key: '86a275dc553a892a5abfdcc3680a4fc57bbda6df', isOpened: hasDocuments, containerClasses: "" }, h("div", { key: '46c5ce3684baddb2598ef49d715f1d7e1e84ec6e', class: "chips" }, (_y = (_x = this.inputs) === null || _x === void 0 ? void 0 : _x.documents) === null || _y === void 0 ? void 0 : _y.map((doc, idx) => (h("div", { class: cn('chip', { disabled: disableInputs }) }, h("span", { title: doc.name }, doc.name), h("button", { disabled: disableInputs, onClick: () => this.clearFile(idx), "aria-label": "Remove" }, h(AddIcon, null))))))))), h("div", { key: 'd6f8c4f335fccc507cf182c9b262e86d0c09896a', class: "stub-spacer" }), h("button", { key: '34fe61c1d65a26726f44832cc656dfed27c65cc1', class: cn('btn-claim', { loading: this.isLoading }), onClick: this.submit, disabled: !isFormValid || disableInputs }, this.isLoading && h("span", { key: '91789e237e1e7ae69fd57fa72d14e8eab1c6550f', class: "claim-progress", style: { width: `${showUploadProgress ? this.uploadProgress : 100}%` } }), h("span", { key: 'ae904877057a7b0d7cec840534676b90c682d700', class: "claim-label" }, !this.isLoading && h(CheckIcon, { key: '00a4eb17e9a39e95534eb6f938de345ab2d6916c' }), h("span", { key: '364060dbf8aceddccf97050fbcbd21b4f60cc944' }, this.isLoading ? `${this.locale.processing}${showUploadProgress ? ` ${this.uploadProgress}%` : ''}` : this.locale.claim))))))), !!this.claimError && (h("div", { key: '5dc91e936df9890620a77e78665fd4cc1040559f', class: "err-scrim", onClick: event => {
                 if (event.target === event.currentTarget)
                     this.dismissError();
-            } }, h("div", { key: '71d0da7efc126db1f7e296f66a2bff7b4f772fc8', class: "err-card", role: "alertdialog", "aria-modal": "true" }, h("button", { key: 'a0972977cf450a5991f1b94bc9be7b52ce9b4a4a', class: "btn-close", onClick: this.dismissError, "aria-label": "Close" }, h(AddIcon, { key: 'd09fb6ed1237fe5ad90d0fecabe69033263d3c46', class: "stroke-[1.5px]" })), h("div", { key: '979e5e77ba129de6e51b1b9c8dac26dfa14c8181', class: "err-head" }, h("span", { key: '240f05e9d433008eb0f26d59a884d8a79fa1feb5', class: "err-ic" }, h(TriangleAlertIcon, { key: '8a1868d758121d9549514ad30f1a9fb5f92530c9' })), h("span", { key: '08ed8c54b7ea86c0d54e8688aac6ff085184c738', class: "err-title" }, this.locale.claimFailed)), h("div", { key: '6ab69820f70b72b73b3fabe612b7457bd7d24692', class: "err-msg" }, this.claimError), h("div", { key: '8091344c6aa8a98a1b15f666a893881222b28009', class: "err-foot" }, h("button", { key: 'e9c236ee11387027f9c20b144171850f3345c98c', class: "btn-err-ok", onClick: this.dismissError }, this.locale.ok))))))));
+            } }, h("div", { key: '042222287cefdee8be5a351cebd06cc729679aee', class: "err-card", role: "alertdialog", "aria-modal": "true" }, h("button", { key: 'ec05fb9e5bca5622b4d48a11df066caaff2d8aa7', class: "btn-close", onClick: this.dismissError, "aria-label": "Close" }, h(AddIcon, { key: '0ac641a87095ea4f0321dff554db2d955938b156', class: "stroke-[1.5px]" })), h("div", { key: '6db7a47a0ed3e650cdad19af9f90bb077304568f', class: "err-head" }, h("span", { key: 'f5acd69a8c6a9e83c8f7d0d1a55167101e29f747', class: "err-ic" }, h(TriangleAlertIcon, { key: '94476ccbbf12988c4c481b81202a7eeefc632644' })), h("span", { key: '13d43261be7df1fb9acfe5bea3838c7956b137fb', class: "err-title" }, this.locale.claimFailed)), h("div", { key: 'd095d495bebef6137b04a1973dc88fcc63229675', class: "err-msg" }, this.claimError), h("div", { key: 'd9a77b8ed7fdab0bae9ca8bfe978bc1bfc661782', class: "err-foot" }, h("button", { key: '94b2d72e59a6297218b6c39210bec74653f1a54a', class: "btn-err-ok", onClick: this.dismissError }, this.locale.ok))))))));
     }
     static get is() { return "vehicle-item-claim-form"; }
     static get encapsulation() { return "shadow"; }
@@ -470,7 +470,7 @@ export class VehicleItemClaimForm {
                 "mutable": false,
                 "complexType": {
                     "original": "{ sharedLocales: SharedLocales } & ClaimFormType",
-                    "resolved": "{ sharedLocales: { lang?: string; direction?: string; language?: string; noData?: string; errors?: { noBaseUrl?: string; invalidVin?: string; vinNumberRequired?: string; partNumberRequired?: string; wrongResponseFormat?: string; noPartsFound?: string; noServiceAvailable?: string; wrongFormStructure?: string; wildCard?: string; requestFailedPleaseTryAgainLater?: string; }; }; } & { name?: string; vin?: string; uploadSingleDocument?: string; uploadMultipleDocument?: string; uploadHint?: string; serviceType?: string; print?: string; expand?: string; documentLimitError?: string; documentRequiredError?: string; activationDate?: string; expireDate?: string; packageCode?: string; scanTheVoucher?: string; scanHint?: string; qrCode?: string; processing?: string; enterServiceInfo?: string; invoice?: string; jobNumber?: string; claim?: string; claimFailed?: string; ok?: string; }",
+                    "resolved": "{ sharedLocales: { direction?: string; lang?: string; language?: string; noData?: string; errors?: { noBaseUrl?: string; invalidVin?: string; vinNumberRequired?: string; partNumberRequired?: string; wrongResponseFormat?: string; noPartsFound?: string; noServiceAvailable?: string; wrongFormStructure?: string; wildCard?: string; requestFailedPleaseTryAgainLater?: string; }; }; } & { name?: string; vin?: string; uploadSingleDocument?: string; uploadMultipleDocument?: string; uploadHint?: string; serviceType?: string; print?: string; expand?: string; documentLimitError?: string; documentRequiredError?: string; activationDate?: string; expireDate?: string; packageCode?: string; scanTheVoucher?: string; scanHint?: string; qrCode?: string; processing?: string; enterServiceInfo?: string; invoice?: string; jobNumber?: string; claim?: string; claimFailed?: string; ok?: string; }",
                     "references": {
                         "SharedLocales": {
                             "location": "import",

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

@@ -15,6 +15,7 @@ const componentTags = {
     vehicleClaimableItems: 'vehicle-claimable-items',
     vehicleSaleInformation: 'vehicle-sale-information',
     vehicleWarrantyDetails: 'vehicle-warranty-details',
+    vehicleWarrantyTimeline: 'vehicle-warranty-timeline',
     vehicleSsc: 'vehicle-ssc',
 };
 export class VehicleLookup {
@@ -70,6 +71,7 @@ export class VehicleLookup {
         const vehicleClaim = this.el.shadowRoot.getElementById('vehicle-claimable-items');
         const vehicleHistory = this.el.shadowRoot.getElementById('vehicle-service-history');
         const vehicleDetails = this.el.shadowRoot.getElementById('vehicle-warranty-details');
+        const vehicleTimeline = this.el.shadowRoot.getElementById('vehicle-warranty-timeline');
         const vehicleThickness = this.el.shadowRoot.getElementById('vehicle-paint-thickness');
         const vehicleSpecification = this.el.shadowRoot.getElementById('vehicle-specification');
         const vehicleSaleInformation = this.el.shadowRoot.getElementById('vehicle-sale-information');
@@ -78,6 +80,7 @@ export class VehicleLookup {
             [componentTags.vehicleClaimableItems]: vehicleClaim,
             [componentTags.vehicleServiceHistory]: vehicleHistory,
             [componentTags.vehicleWarrantyDetails]: vehicleDetails,
+            [componentTags.vehicleWarrantyTimeline]: vehicleTimeline,
             [componentTags.vehicleAccessories]: vehicleAccessories,
             [componentTags.vehiclePaintThickness]: vehicleThickness,
             [componentTags.vehicleSpecification]: vehicleSpecification,
@@ -182,6 +185,7 @@ export class VehicleLookup {
             [componentTags.vehiclePaintThickness]: {},
             [componentTags.vehicleServiceHistory]: {},
             [componentTags.vehicleWarrantyDetails]: {},
+            [componentTags.vehicleWarrantyTimeline]: {},
             [componentTags.vehicleSaleInformation]: {},
             [componentTags.vehicleSsc]: {},
         };
@@ -207,7 +211,7 @@ export class VehicleLookup {
             .filter(Boolean));
         if (!Object.values(componentTags).includes(this.activeElement) || hiddenSet.has(this.activeElement))
             return h("div", { class: "w-full h-[200px] text-[26px] text-red-600 flex items-center justify-center" }, "Invalid tag");
-        const allComponents = Object.assign(Object.assign({ 'vehicle-specification': (h("vehicle-specification", Object.assign({ coreOnly: true, isDev: this.isDev, disableVinValidation: this.disableVinValidation, "base-url": this.baseUrl, language: this.language, "query-string": this.queryString, id: componentTags.vehicleSpecification }, props[componentTags.vehicleSpecification]))), 'vehicle-accessories': (h("vehicle-accessories", Object.assign({ coreOnly: true, isDev: this.isDev, disableVinValidation: this.disableVinValidation, "base-url": this.baseUrl, language: this.language, "query-string": this.queryString, id: componentTags.vehicleAccessories }, props[componentTags.vehicleAccessories]))), 'vehicle-sale-information': (h("vehicle-sale-information", Object.assign({ coreOnly: true, isDev: this.isDev, disableVinValidation: this.disableVinValidation, "base-url": this.baseUrl, language: this.language, "query-string": this.queryString, id: componentTags.vehicleSaleInformation }, props[componentTags.vehicleSaleInformation]))), 'vehicle-warranty-details': (h("vehicle-warranty-details", Object.assign({ coreOnly: true, "show-ssc": !this.separateSsc, isDev: this.isDev, mockRecaptcha: this.mockRecaptcha, disableVinValidation: this.disableVinValidation, "show-warranty": "true", "base-url": this.baseUrl, language: this.language, "query-string": !this.separateSsc && this.sscQueryString ? [this.queryString, this.sscQueryString].filter(Boolean).join('&') : this.queryString, id: componentTags.vehicleWarrantyDetails }, props[componentTags.vehicleWarrantyDetails]))) }, (this.separateSsc
+        const allComponents = Object.assign(Object.assign({ 'vehicle-specification': (h("vehicle-specification", Object.assign({ coreOnly: true, isDev: this.isDev, disableVinValidation: this.disableVinValidation, "base-url": this.baseUrl, language: this.language, "query-string": this.queryString, id: componentTags.vehicleSpecification }, props[componentTags.vehicleSpecification]))), 'vehicle-accessories': (h("vehicle-accessories", Object.assign({ coreOnly: true, isDev: this.isDev, disableVinValidation: this.disableVinValidation, "base-url": this.baseUrl, language: this.language, "query-string": this.queryString, id: componentTags.vehicleAccessories }, props[componentTags.vehicleAccessories]))), 'vehicle-sale-information': (h("vehicle-sale-information", Object.assign({ coreOnly: true, isDev: this.isDev, disableVinValidation: this.disableVinValidation, "base-url": this.baseUrl, language: this.language, "query-string": this.queryString, id: componentTags.vehicleSaleInformation }, props[componentTags.vehicleSaleInformation]))), 'vehicle-warranty-details': (h("vehicle-warranty-details", Object.assign({ coreOnly: true, "show-ssc": !this.separateSsc, isDev: this.isDev, mockRecaptcha: this.mockRecaptcha, disableVinValidation: this.disableVinValidation, "show-warranty": "true", "base-url": this.baseUrl, language: this.language, "query-string": !this.separateSsc && this.sscQueryString ? [this.queryString, this.sscQueryString].filter(Boolean).join('&') : this.queryString, id: componentTags.vehicleWarrantyDetails }, props[componentTags.vehicleWarrantyDetails]))), 'vehicle-warranty-timeline': (h("vehicle-warranty-timeline", Object.assign({ coreOnly: true, isDev: this.isDev, disableVinValidation: this.disableVinValidation, "base-url": this.baseUrl, language: this.language, "query-string": this.queryString, id: componentTags.vehicleWarrantyTimeline }, props[componentTags.vehicleWarrantyTimeline]))) }, (this.separateSsc
             ? {
                 'vehicle-ssc': (h("vehicle-warranty-details", Object.assign({ coreOnly: true, "show-ssc": "true", isDev: this.isDev, mockRecaptcha: this.mockRecaptcha, disableVinValidation: this.disableVinValidation, "show-warranty": "false", "base-url": this.baseUrl, language: this.language, "query-string": [this.queryString, this.sscQueryString].filter(Boolean).join('&'), id: componentTags.vehicleSsc }, props[componentTags.vehicleSsc]))),
             }
@@ -267,7 +271,7 @@ export class VehicleLookup {
                 "mutable": false,
                 "complexType": {
                     "original": "ActiveElement",
-                    "resolved": "\"\" | \"vehicle-accessories\" | \"vehicle-claimable-items\" | \"vehicle-paint-thickness\" | \"vehicle-sale-information\" | \"vehicle-service-history\" | \"vehicle-specification\" | \"vehicle-ssc\" | \"vehicle-warranty-details\"",
+                    "resolved": "\"\" | \"vehicle-accessories\" | \"vehicle-claimable-items\" | \"vehicle-paint-thickness\" | \"vehicle-sale-information\" | \"vehicle-service-history\" | \"vehicle-specification\" | \"vehicle-ssc\" | \"vehicle-warranty-details\" | \"vehicle-warranty-timeline\"",
                     "references": {
                         "ActiveElement": {
                             "location": "local",

package/dist/collection/components/vehicle-lookup/vehicle-sale-information.js

@@ -165,11 +165,11 @@ export class VehicleSaleInformation {
         ];
         const filteredFields = FIELDS.filter(field => !hiddenFields.includes(field.fieldName));
         const filteredEndCustomerFields = END_CUSTOMER_FIELDS.filter(field => !hiddenFields.includes(field.fieldName));
-        return (h(Host, { key: '4510061526f2aa3d1081bd030cd6eca7a17f6a35', translate: "no" }, h(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 }, h("flexible-container", { key: '6dc4085553173c91a68f8ce55cc8af3a0ecf2395' }, h("flexible-container", { key: 'ac4916a365ca82fa3d041ed90e11a635efed8bb2', classes: cn({ loading: this.isLoading || this.isError || !this.vehicleLookup }), isOpened: !!this.vehicleLookup && !this.isError }, h("div", { key: '38ddc0bc13a1463576a5aa9f8e58ba1fb126d3ee', class: "p-[16px] mx-auto !pb-0 max-w-[520px]" }, h("div", { key: '1b1790af7b56c1675802ffb5c9994a973eedfbfe', class: cn('relative shift-skeleton !rounded-[12px] shift-card', { 'shift-card-warning': !hasEndCustomer }) }, h("div", { key: '4e979b9063241e93b4400756353a7fb03608ec37', class: 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') }, h("div", { key: '6d5c3205ee05480a5e2b5c000893ed34a6c9fa0a', class: "w-full max-w-[460px] rounded-[14px] px-[14px] py-[12px]" }, h("div", { key: 'c551e5cd506fbfd4805fcabb0e454e1ff59eab68', class: "size-full flex flex-col justify-start gap-[12px] items-center" }, h("span", { key: 'd9b1548ff9969f0d9b1eb3e1462ad4cb26d01a86', class: "shift-card-icon", "aria-hidden": "true" }, h(TriangleAlertIcon, { key: '61dc69fe6ca3ca545f5b41770f02f103afe95224' })), 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.'] || '')))), h("div", { key: '803e737c35b878615aab93f46ba403f82b7cdab8', class: cn('transition-opacity', !hasEndCustomer ? 'opacity-0 pointer-events-none select-none' : 'opacity-100') }, h("h2", { key: '88f3e9e5920eb917c7f7f3861ef7735aac02efa8', class: "shift-card-header" }, texts.customerInformation), h("div", { key: 'ca8f52232483c7d564750102b547ce8db0d22cfe', class: "flex flex-col gap-[2px]" }, filteredEndCustomerFields.map(field => {
+        return (h(Host, { key: '83d8b7666eb93b40fbc0fbb963603cc74d2acde8', translate: "no" }, h(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 }, h("flexible-container", { key: '8a8da84882eb2c9a522a5e2c0ef64b6f923e79fc' }, h("flexible-container", { key: 'fdc5d3ed4d057a6d5f1e3fcbe82b498936323cb4', classes: cn({ loading: this.isLoading || this.isError || !this.vehicleLookup }), isOpened: !!this.vehicleLookup && !this.isError }, h("div", { key: '7e49581a4b83c9c075fa250b487f07e8daf4ee10', class: "p-[16px] mx-auto !pb-0 max-w-[520px]" }, h("div", { key: '7dd4ae69f32fdbf15bbe9fdddab5c1c460c00f1d', class: cn('relative shift-skeleton !rounded-[12px] shift-card', { 'shift-card-warning': !hasEndCustomer }) }, h("div", { key: '3fbb61d18adac8b428f49477bfd8ccb4e80d571e', class: 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') }, h("div", { key: '5b6a10a401655c098ea2d3a761f7dc47c82182b3', class: "w-full max-w-[460px] rounded-[14px] px-[14px] py-[12px]" }, h("div", { key: '0778642e8703e64b297b5671e9c87704ef4fe113', class: "size-full flex flex-col justify-start gap-[12px] items-center" }, h("span", { key: '124a1e092988e291f9461ba2cf0361a3961ed99b', class: "shift-card-icon", "aria-hidden": "true" }, h(TriangleAlertIcon, { key: '4eaafd886053f7f9089d64664418baa150a63919' })), 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.'] || '')))), h("div", { key: 'f34bfb5518ae68dd8c003e38349525039cabf7ad', class: cn('transition-opacity', !hasEndCustomer ? 'opacity-0 pointer-events-none select-none' : 'opacity-100') }, h("h2", { key: 'e879d3e6575d7534c6891ad67ac75866a094d31b', class: "shift-card-header" }, texts.customerInformation), h("div", { key: '880bc54b1a2334190e5fbc4f0d3aea004dd0c091', class: "flex flex-col gap-[2px]" }, filteredEndCustomerFields.map(field => {
             const value = field.value || '';
             const Icon = field.Icon;
             return (h("div", { class: "flex gap-[12px] items-start" }, h("span", { class: "shift-card-icon", "aria-hidden": "true" }, h(Icon, null)), h("div", { class: "flex flex-col translate-y-[-4px]" }, h("div", { class: "shift-card-seconary-text" }, field.title, ":"), h("div", { class: cn('shift-card-primary-text translate-y-[-4px]', { 'shift-card-empty-text': !value }) }, value || '—'))));
-        })))))), 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 => (h(MaterialCard, { title: field.title, desc: field.value, minWidth: "250px" }))), !hiddenFields.includes('intermediaries') &&
+        })))))), 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 => (h(MaterialCard, { title: field.title, desc: field.value, minWidth: "250px" }))), !hiddenFields.includes('intermediaries') &&
             ((sale === null || sale === void 0 ? void 0 : sale.intermediaries) || []).map(intermediary => h(MaterialCard, { title: texts.intermediaryName, desc: getText(intermediary === null || intermediary === void 0 ? void 0 : intermediary.companyName), minWidth: "250px" })))))));
     }
     static get is() { return "vehicle-sale-information"; }

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

@@ -56,7 +56,7 @@ export class VehicleServiceHistory {
             { key: 'serviceType', label: this.locale.serviceType, maxWidth: 420 },
             { key: 'mileage', label: this.locale.odometer, nowrap: true },
         ];
-        return (h(Host, { key: '8f65959d8d5f390e8fa5035d57e5febaa8c6caad', translate: "no" }, h(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 }, h("div", { key: '8f6f9e240b89f8b6d56eff3163f094f02ccbd830', class: "overflow-x-auto" }, 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) => h(ServiceHistorySubRow, { row: row, locale: this.locale }) })))));
+        return (h(Host, { key: '214ea7f9322f4ded5dfe88ed30ec4b5e6e596205', translate: "no" }, h(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 }, h("div", { key: 'ceebe28112ce490245ebb6f4d37638138f74163a', class: "overflow-x-auto" }, 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) => h(ServiceHistorySubRow, { row: row, locale: this.locale }) })))));
     }
     static get is() { return "vehicle-service-history"; }
     static get encapsulation() { return "shadow"; }