adp-web-components 0.0.37 → 0.0.40

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

@@ -26,6 +26,7 @@ export class VehicleAccessories {
         this.isDev = false;
         this.queryString = '';
         this.language = 'en';
+        this.errorCallback = undefined;
         this.loadingStateChange = undefined;
         this.loadedResponse = undefined;
         this.locale = localeSchema.getDefault();
@@ -81,12 +82,17 @@ export class VehicleAccessories {
         catch (error) {
             if (error && (error === null || error === void 0 ? void 0 : error.name) === 'AbortError')
                 return;
+            if (this.errorCallback)
+                this.errorCallback(error.message);
             console.error(error);
-            this.state = 'error';
-            this.vehicleInformation = null;
-            this.errorMessage = error.message;
+            this.setErrorMessage(error.message);
         }
     }
+    async setErrorMessage(message) {
+        this.state = 'error';
+        this.vehicleInformation = null;
+        this.errorMessage = message;
+    }
     async fetchData(requestedVin = this.externalVin, headers = {}) {
         await this.setData(requestedVin, headers);
     }
@@ -101,7 +107,7 @@ export class VehicleAccessories {
         var _a, _b;
         const texts = this.locale.vehicleLookup.accessories;
         const accessories = (this === null || this === void 0 ? void 0 : this.vehicleInformation) ? (_a = this.vehicleInformation) === null || _a === void 0 ? void 0 : _a.accessories : [];
-        return (h(Host, { key: 'dd410831ebc3abca4116b316693d671f58ce45e0' }, h("div", { key: '6608457156e38803d4af9268a7b29dd9258ea601', dir: this.locale.direction, class: "min-h-[100px] relative transition-all duration-300 overflow-hidden" }, h("div", { key: '92a6368e66cb585af9ca7c63d99cd648bfb76a76' }, h(Loading, { key: '1b272bfb145a5c3f608de4939c553f3574713308', isLoading: this.state.includes('loading') }), h("div", { key: '742cff5e16205130ac62c636838758bbe41e157b', class: cn('transition-all duration-700', { 'scale-0': this.state.includes('loading') || this.state === 'idle', 'opacity-0': this.state.includes('loading') }) }, h("div", { key: 'd989eb40a3c7e663868dc4e54d35d2f8afbb36b9', class: cn('text-center pt-[4px] text-[20px]', { 'text-red-600': !!this.errorMessage }) }, (_b = this.vehicleInformation) === null || _b === void 0 ? void 0 : _b.vin), ['error', 'error-loading'].includes(this.state) && (h("div", { key: '9605655caf1d0474941c0fe2eb35e511ee49d8a2', class: "py-[16px]" }, h("div", { key: 'f3bcb9806e1c7c01da64f5250c047afc4d4abb0c', class: " px-[16px] py-[8px] border reject-card text-[20px] rounded-[8px] w-fit mx-auto" }, this.locale.errors[this.errorMessage] || this.locale.errors.wildCard))), ['data', 'data-loading'].includes(this.state) && (h("div", { key: '6dce5a0dd4a191aac8fb0412a2ff79fedc898026', class: "flex mt-[12px] max-h-[70dvh] overflow-hidden rounded-[4px] flex-col border border-[#d6d8dc]" }, h("div", { key: '1dae255335699110f224a8dafba266a228cc14b4', class: "w-full h-[40px] flex shrink-0 justify-center text-[18px] items-center text-[#383c43] text-center bg-[#e1e3e5]" }, texts.vehicleAccessories), h("div", { key: '61fa0c5e50dd30000165494e2faf6d498174549b', class: "h-0 overflow-auto flex-1" }, !accessories.length && h("div", { key: '5d582e3eea5a5041a1c79759fe8ac84bd91bc32a', class: "h-[80px] flex items-center justify-center text-[18px]" }, texts.noData), !!accessories.length && (h("table", { key: 'f0c1d1793f7c907b4865530354831a2007582a88', class: "w-full overflow-auto relative border-collapse" }, h("thead", { key: 'a565247ad42b255b5487b9a7df5950d1dda89384', class: "top-0 font-bold z-40 sticky bg-white" }, h("tr", { key: '0b8fa52931ea6c4f198bc22146ce194a673f25a9' }, ['partNumber', 'description', 'image'].map(title => (h("th", { key: title, class: "px-[10px] py-[20px] text-center whitespace-nowrap border-b border-[#d6d8dc]" }, texts[title]))))), h("tbody", { key: '0d13ce25b92ead9bf1ec4a2f9c702493dd47d95b' }, accessories.map((accessory, idx) => {
+        return (h(Host, { key: '233a53fe15f137c207f2a34647db6c995ed43edb' }, h("div", { key: 'b61562a007846e8e49beb150c1d52ebec882d76e', dir: this.locale.direction, class: "min-h-[100px] relative transition-all duration-300 overflow-hidden" }, h("div", { key: '74d8760528c838ba2f0bcf78f25ba165822d8c9d' }, h(Loading, { key: '23e2e9f046673d9a64902e39035f640b9ff2e31d', isLoading: this.state.includes('loading') }), h("div", { key: '1b25bfc7a1c117b301dd3c365fa353bf4d0d31b7', class: cn('transition-all duration-700', { 'scale-0': this.state.includes('loading') || this.state === 'idle', 'opacity-0': this.state.includes('loading') }) }, h("div", { key: 'd40a2a645f75ce46dbe7cdce57f6e023ebda3912', class: cn('text-center pt-[4px] text-[20px]', { 'text-red-600': !!this.errorMessage }) }, (_b = this.vehicleInformation) === null || _b === void 0 ? void 0 : _b.vin), ['error', 'error-loading'].includes(this.state) && (h("div", { key: '5d74f635c82aa3725ebfc257351d68524978b272', class: "py-[16px] min-h-[100px] flex items-center" }, h("div", { key: 'fb0c609677be6a060519b7cec9acc1e7a0ec1c15', class: "px-[16px] py-[8px] border reject-card text-[20px] rounded-[8px] w-fit mx-auto" }, this.locale.errors[this.errorMessage] || this.locale.errors.wildCard))), ['data', 'data-loading'].includes(this.state) && (h("div", { key: 'de03c8406d4f28b2d8625ebba664635365d08aab', class: "flex mt-[12px] max-h-[70dvh] overflow-hidden rounded-[4px] flex-col border border-[#d6d8dc]" }, h("div", { key: '639c08fa36f02f55175d819e91db6e0d42f2dedd', class: "w-full h-[40px] flex shrink-0 justify-center text-[18px] items-center text-[#383c43] text-center bg-[#e1e3e5]" }, texts.vehicleAccessories), h("div", { key: '7054a7a753f1758de4e75f4fd1f0b8bb2d3f6613', class: "h-0 overflow-auto flex-1" }, !accessories.length && h("div", { key: 'ad33e0903b2067dfd961d91be8624fdfb1564e1d', class: "h-[80px] flex items-center justify-center text-[18px]" }, texts.noData), !!accessories.length && (h("table", { key: '2e3c4f553276d954cf4cdecbe6655eb2cc23943b', class: "w-full overflow-auto relative border-collapse" }, h("thead", { key: '02a45fbbf7fcfc86db8edd1c5620166c2c0818d0', class: "top-0 font-bold z-40 sticky bg-white" }, h("tr", { key: '105470076c89e31d41ac500112007f1331946d98' }, ['partNumber', 'description', 'image'].map(title => (h("th", { key: title, class: "px-[10px] py-[20px] text-center whitespace-nowrap border-b border-[#d6d8dc]" }, texts[title]))))), h("tbody", { key: 'b42156638292719d8a25936fbe82a1d43a48230b' }, accessories.map((accessory, idx) => {
             var _a;
             return (h("tr", { class: "transition-colors duration-100 hover:bg-slate-100", key: accessory.partNumber }, ['partNumber', 'description'].map(key => {
                 var _a;
@@ -111,9 +117,9 @@ export class VehicleAccessories {
             }), h("td", { class: cn('px-[10px] py-[10px] text-center whitespace-nowrap border-b border-[#d6d8dc]', {
                     '!border-none': idx === ((_a = this.vehicleInformation) === null || _a === void 0 ? void 0 : _a.serviceHistory.length) - 1,
                 }) }, h("button", { onClick: ({ target }) => this.openImage(target, 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-[133px] max-h-[133px] cursor-pointer shadow-sm rounded-lg transition-all duration-300", src: accessory.image })))));
-        })), h("div", { key: '0815cb6af69a96f2c4f6980a7817fa559d4167a9', onClick: () => this.closeImage(), style: { backdropFilter: this.expandedImage ? 'blur(3px)' : 'blur(0px)' }, class: cn('pointer-events-none w-[100dvw] h-[100dvh] fixed top-0 z-50 left-0 opacity-0 bg-black/40 transition-all duration-400', {
+        })), h("div", { key: '380a9c797d5e6814cbda91c3b007958af5c241fa', onClick: () => this.closeImage(), style: { backdropFilter: this.expandedImage ? 'blur(3px)' : 'blur(0px)' }, class: cn('pointer-events-none w-[100dvw] h-[100dvh] fixed top-0 z-50 left-0 opacity-0 bg-black/40 transition-all duration-400', {
                 'pointer-events-auto opacity-100 delay-200': this.expandedImage,
-            }) }, h("button", { key: '4e786da3510e10586db39497310861743b0cdab4', class: "flex flex-col mt-[16px] items-center justify-center size-12 float-right mr-[16px]", onClick: () => this.closeImage() }, h("div", { key: '8742284194e4dc6ae699ef4a831b2823a6c12d7c', class: "h-1 w-12 rounded-full rotate-45 absolute bg-white" }), h("div", { key: '499ea3d220f4ff8a072f172dffbe4ca8cd35875f', class: "h-1 w-12 rounded-full -rotate-45 absolute bg-white" }))), h("img", { key: '68d06450686c6754445e0f6cbf672d4046fa7fc2', alt: "", id: "expanded-image", class: "fixed opacity-0 z-50 transition-all rounded-lg" })))))))))));
+            }) }, h("button", { key: 'ffd98bd0e98a57f734c935cd1fd8e60a64408fbd', class: "flex flex-col mt-[16px] items-center justify-center size-12 float-right mr-[16px]", onClick: () => this.closeImage() }, h("div", { key: 'b673d0051393f0bfec40b71a614995029e32cf4d', class: "h-1 w-12 rounded-full rotate-45 absolute bg-white" }), h("div", { key: 'd75186e71eb2d6c6aab182f411fe43e058e63bd8', class: "h-1 w-12 rounded-full -rotate-45 absolute bg-white" }))), h("img", { key: 'cca60bc92ba4a26cb06e980c9c8b68444a88ad07', alt: "", id: "expanded-image", class: "fixed opacity-0 z-50 transition-all rounded-lg" })))))))))));
     }
     static get is() { return "vehicle-accessories"; }
     static get encapsulation() { return "shadow"; }
@@ -207,6 +213,27 @@ export class VehicleAccessories {
                 "reflect": false,
                 "defaultValue": "'en'"
             },
+            "errorCallback": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(errorMessage: ErrorKeys) => void",
+                    "resolved": "(errorMessage: ErrorKeys) => void",
+                    "references": {
+                        "ErrorKeys": {
+                            "location": "import",
+                            "path": "~types/locales",
+                            "id": "src/global/types/locales/index.ts::ErrorKeys"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
             "loadingStateChange": {
                 "type": "unknown",
                 "mutable": false,
@@ -291,6 +318,32 @@ export class VehicleAccessories {
                     "tags": []
                 }
             },
+            "setErrorMessage": {
+                "complexType": {
+                    "signature": "(message: ErrorKeys) => Promise<void>",
+                    "parameters": [{
+                            "name": "message",
+                            "type": "OptionalKeys<{ wildCard: string; noBaseUrl: string; invalidVin: string; vinNumberRequired: string; partNumberRequired: string; noServiceAvailable: string; wrongResponseFormat: string; requestFailedPleaseTryAgainLater: string; }>",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "ErrorKeys": {
+                            "location": "import",
+                            "path": "~types/locales",
+                            "id": "src/global/types/locales/index.ts::ErrorKeys"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
             "fetchData": {
                 "complexType": {
                     "signature": "(requestedVin?: string, headers?: any) => Promise<void>",

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

@@ -1 +1 @@
-*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: ;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.block{display:block}:host{display:block}.static{position:static}.hidden{display:none}.w-full{width:100%}.relative{position:relative}.sticky{position:sticky}.top-0{top:0}.mx-auto{margin-left:auto;margin-right:auto}.my-2{margin-bottom:.5rem;margin-top:.5rem}.mt-\[12px\]{margin-top:12px}.flex{display:flex}.table{display:table}.h-0{height:0}.h-\[40px\]{height:40px}.h-\[80px\]{height:80px}.max-h-\[70dvh\]{max-height:70dvh}.min-h-\[100px\]{min-height:100px}.w-fit{width:fit-content}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.scale-0{--tw-scale-x:0;--tw-scale-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))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.whitespace-nowrap{white-space:nowrap}.rounded-\[4px\]{border-radius:4px}.rounded-\[8px\]{border-radius:8px}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-\[\#d6d8dc\]{--tw-border-opacity:1;border-color:rgb(214 216 220/var(--tw-border-opacity,1))}.bg-\[\#e1e3e5\]{--tw-bg-opacity:1;background-color:rgb(225 227 229/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.px-\[10px\]{padding-left:10px;padding-right:10px}.px-\[16px\]{padding-left:16px;padding-right:16px}.py-4{padding-bottom:1rem;padding-top:1rem}.py-\[20px\]{padding-bottom:20px;padding-top:20px}.py-\[8px\]{padding-bottom:8px;padding-top:8px}.pt-\[4px\]{padding-top:4px}.text-center{text-align:center}.text-\[18px\]{font-size:18px}.text-\[20px\]{font-size:20px}.font-bold{font-weight:700}.text-\[\#383c43\]{--tw-text-opacity:1;color:rgb(56 60 67/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.opacity-0{opacity:0}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.duration-700{transition-duration:.7s}.reject-card{background-color:#f7d7d8;border-color:#f2aeb5;color:#58151c}.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))}.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)}.success-card{background-color:#d0e7de;border-color:#a2d0bb;color:#0b3521}
+*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: ;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.block{display:block}:host{display:block}.static{position:static}.hidden{display:none}.w-full{width:100%}.relative{position:relative}.sticky{position:sticky}.top-0{top:0}.mx-auto{margin-left:auto;margin-right:auto}.my-2{margin-bottom:.5rem;margin-top:.5rem}.mt-\[12px\]{margin-top:12px}.flex{display:flex}.table{display:table}.h-0{height:0}.h-\[40px\]{height:40px}.h-\[80px\]{height:80px}.max-h-\[70dvh\]{max-height:70dvh}.min-h-\[100px\]{min-height:100px}.w-fit{width:fit-content}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.scale-0{--tw-scale-x:0;--tw-scale-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))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.whitespace-nowrap{white-space:nowrap}.rounded-\[4px\]{border-radius:4px}.rounded-\[8px\]{border-radius:8px}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-\[\#d6d8dc\]{--tw-border-opacity:1;border-color:rgb(214 216 220/var(--tw-border-opacity,1))}.bg-\[\#e1e3e5\]{--tw-bg-opacity:1;background-color:rgb(225 227 229/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.px-\[10px\]{padding-left:10px;padding-right:10px}.px-\[16px\]{padding-left:16px;padding-right:16px}.py-\[16px\]{padding-bottom:16px;padding-top:16px}.py-\[20px\]{padding-bottom:20px;padding-top:20px}.py-\[8px\]{padding-bottom:8px;padding-top:8px}.pt-\[4px\]{padding-top:4px}.text-center{text-align:center}.text-\[18px\]{font-size:18px}.text-\[20px\]{font-size:20px}.font-bold{font-weight:700}.text-\[\#383c43\]{--tw-text-opacity:1;color:rgb(56 60 67/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.opacity-0{opacity:0}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.duration-700{transition-duration:.7s}.reject-card{background-color:#f7d7d8;border-color:#f2aeb5;color:#58151c}.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))}.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)}.success-card{background-color:#d0e7de;border-color:#a2d0bb;color:#0b3521}

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

@@ -5,74 +5,87 @@
 import { Host, h } from "@stencil/core";
 import cn from "../../global/lib/cn";
 import validateVin from "../../global/lib/validate-vin";
+import { getLocaleLanguage } from "../../global/lib/get-local-language";
+import { localeSchema } from "../../global/types/locales/index";
+const componentTags = {
+    dynamicClaim: 'dynamic-claim',
+    paintThickness: 'paint-thickness',
+    serviceHistory: 'service-history',
+    warrantyDetails: 'warranty-details',
+    vehicleAccessories: 'vehicle-accessories',
+    vehicleSpecification: 'vehicle-specification',
+};
 export class VehicleLookup {
     constructor() {
+        this.syncErrorAcrossComponents = (newErrorMessage) => {
+            Object.values(this.componentsList).forEach(element => {
+                if (element)
+                    element.setErrorMessage(newErrorMessage);
+            });
+        };
+        this.loadingStateChangingMiddleware = (newState) => {
+            if (this.loadingStateChanged)
+                this.loadingStateChanged(newState);
+            if (this.blazorRef && this.blazorOnLoadingStateChange)
+                this.blazorRef.invokeMethodAsync(this.blazorOnLoadingStateChange, newState);
+        };
         this.activeElement = '';
         this.baseUrl = '';
         this.isDev = false;
         this.queryString = '';
         this.language = 'en';
         this.blazorErrorStateListener = '';
+        this.childrenProps = undefined;
         this.blazorOnLoadingStateChange = '';
         this.errorStateListener = undefined;
         this.loadingStateChanged = undefined;
         this.wrapperErrorState = '';
         this.blazorRef = undefined;
+        this.locale = localeSchema.getDefault();
+    }
+    async componentWillLoad() {
+        await this.changeLanguage(this.language);
+    }
+    async changeLanguage(newLanguage) {
+        this.locale = await getLocaleLanguage(newLanguage);
     }
     async componentDidLoad() {
-        const vehicleSpecification = this.el.getElementsByTagName('vehicle-specification')[0];
-        const vehicleAccessories = this.el.getElementsByTagName('vehicle-accessories')[0];
-        const vehicleDetails = this.el.getElementsByTagName('warranty-details')[0];
+        const vehicleClaim = this.el.getElementsByTagName('dynamic-claim')[0];
         const vehicleHistory = this.el.getElementsByTagName('service-history')[0];
         const vehicleThickness = this.el.getElementsByTagName('paint-thickness')[0];
-        const vehicleClaim = this.el.getElementsByTagName('dynamic-claim')[0];
+        const vehicleDetails = this.el.getElementsByTagName('warranty-details')[0];
+        const vehicleAccessories = this.el.getElementsByTagName('vehicle-accessories')[0];
+        const vehicleSpecification = this.el.getElementsByTagName('vehicle-specification')[0];
         this.componentsList = {
-            'vehicle-specification': vehicleSpecification,
-            'vehicle-accessories': vehicleAccessories,
-            'warranty-details': vehicleDetails,
-            'service-history': vehicleHistory,
-            'paint-thickness': vehicleThickness,
-            'dynamic-claim': vehicleClaim,
+            [componentTags.dynamicClaim]: vehicleClaim,
+            [componentTags.serviceHistory]: vehicleHistory,
+            [componentTags.warrantyDetails]: vehicleDetails,
+            [componentTags.paintThickness]: vehicleThickness,
+            [componentTags.vehicleAccessories]: vehicleAccessories,
+            [componentTags.vehicleSpecification]: vehicleSpecification,
         };
         Object.values(this.componentsList).forEach(element => {
             if (!element)
                 return;
-            if (this.loadingStateChanged)
-                element.loadingStateChange = this.loadingStateChanged;
+            element.errorCallback = this.syncErrorAcrossComponents;
+            element.loadingStateChange = this.loadingStateChangingMiddleware;
             element.loadedResponse = newResponse => this.handleLoadData(newResponse, element);
         });
     }
+    handleLoadData(newResponse, activeElement) {
+        Object.values(this.componentsList).forEach(element => {
+            if (element !== null && element !== activeElement && newResponse)
+                element.setData(newResponse);
+        });
+    }
     async errorListener(newState) {
         if (this.errorStateListener)
             this.errorStateListener(newState);
         if (this.blazorRef && this.blazorErrorStateListener)
             this.blazorRef.invokeMethodAsync(this.blazorErrorStateListener, newState);
     }
-    async handleLoadingListenerPropChange(newProp) {
-        Object.values(this.componentsList).forEach(element => {
-            if (!element)
-                return;
-            element.loadingStateChange = newProp;
-        });
-    }
-    async handleBlazorLoadingRefChange(loadingInvokeRef) {
-        if (this.blazorRef) {
-            Object.values(this.componentsList).forEach(element => {
-                if (!element)
-                    return;
-                element.loadingStateChange = newState => this.blazorRef.invokeMethodAsync(loadingInvokeRef, newState);
-            });
-        }
-    }
     async setBlazorRef(newBlazorRef) {
         this.blazorRef = newBlazorRef;
-        if (this.blazorOnLoadingStateChange) {
-            Object.values(this.componentsList).forEach(element => {
-                if (!element)
-                    return;
-                element.loadingStateChange = newState => this.blazorRef.invokeMethodAsync(this.blazorOnLoadingStateChange, newState);
-            });
-        }
     }
     async fetchVin(vin, headers = {}) {
         const activeElement = this.componentsList[this.activeElement] || null;
@@ -80,22 +93,37 @@ export class VehicleLookup {
         if (!activeElement)
             return;
         if (vin == '')
-            return (this.wrapperErrorState = 'VIN is required');
+            return (this.wrapperErrorState = this.locale.errors.vinNumberRequired);
         if (!validateVin(vin))
-            return (this.wrapperErrorState = 'Invalid VIN');
+            return (this.wrapperErrorState = this.locale.errors.invalidVin);
         activeElement.fetchData(vin, headers);
     }
-    async getPageContext() {
-        return { componentsList: this.componentsList };
-    }
-    handleLoadData(newResponse, activeElement) {
-        Object.values(this.componentsList).forEach(element => {
-            if (element !== null && element !== activeElement && newResponse)
-                element.setData(newResponse);
-        });
-    }
     render() {
-        return (h(Host, { key: 'f9e557d773f50b6fa3a76b287bd62cd852e10d06' }, h("div", { key: 'fa267d8aeddb4807e21fab2c61986cf98a29caeb', class: cn('w-full', { hidden: this.activeElement !== 'vehicle-specification' }) }, h("vehicle-specification", { key: '005f0bc2c8db628cbfc006bb8b6452a3691336f2', language: this.language, isDev: this.isDev, "base-url": this.baseUrl, "query-string": this.queryString })), h("div", { key: 'f8dc47e3bd43694d5e1ba2c37e6dbbdbdaf4f9cf', class: cn('w-full', { hidden: this.activeElement !== 'vehicle-accessories' }) }, h("vehicle-accessories", { key: 'c8c291bfc5c639c0b2dbd529e36ee61ee96751e2', language: this.language, isDev: this.isDev, "base-url": this.baseUrl, "query-string": this.queryString })), h("div", { key: '33ed406e5803036cf90a3a12a20225263cf99bb8', class: cn('w-full', { hidden: this.activeElement !== 'warranty-details' }) }, h("warranty-details", { key: '448044d8011c92e0b20827c7e3524e35f989b333', language: this.language, isDev: this.isDev, "show-ssc": "true", "show-warranty": "true", "base-url": this.baseUrl, "query-string": this.queryString }, h("slot", { key: 'f3a3eaf0e887cd5e646cb21aca824096e135c27b' }))), h("div", { key: '624f31cea6c56fc435e2d69202beac8664b65f37', class: cn('w-full', { hidden: this.activeElement !== 'service-history' }) }, h("service-history", { key: 'cd3a450e7dc5933de36bc86a44ffc0c09befd5d2', language: this.language, isDev: this.isDev, "base-url": this.baseUrl, "query-string": this.queryString })), h("div", { key: '2ede71d8e30a4bddfbf70c8036283a4a9d4583d8', class: cn('w-full', { hidden: this.activeElement !== 'paint-thickness' }) }, h("paint-thickness", { key: '872f7b26a5a9dcaa8212af40509ead1691ac2ae6', language: this.language, isDev: this.isDev, "base-url": this.baseUrl, "query-string": this.queryString })), h("div", { key: 'fdfef55e500725605e286ab9ceb3741632cbe3b0', class: cn('w-full', { hidden: this.activeElement !== 'dynamic-claim' }) }, h("dynamic-claim", { key: '80aa8037bf3ad6d5dbf7aa0607ed2cf3c7553c59', language: this.language, isDev: this.isDev, "base-url": this.baseUrl, "query-string": this.queryString }))));
+        const props = {
+            [componentTags.dynamicClaim]: {},
+            [componentTags.paintThickness]: {},
+            [componentTags.serviceHistory]: {},
+            [componentTags.warrantyDetails]: {},
+            [componentTags.vehicleAccessories]: {},
+            [componentTags.vehicleSpecification]: {},
+        };
+        try {
+            if (this.childrenProps) {
+                let parsedProps = {};
+                if (typeof this.childrenProps === 'string')
+                    parsedProps = JSON.parse(this.childrenProps);
+                else if (typeof this.childrenProps === 'object')
+                    parsedProps = this.childrenProps;
+                Object.keys(props).forEach(key => {
+                    if (typeof parsedProps[key] === 'object')
+                        props[key] = parsedProps[key];
+                });
+            }
+        }
+        catch (error) {
+            console.error(error);
+        }
+        return (h(Host, { key: 'e284354c118959a488cc2b0a3c417ef6fdb341b7' }, h("div", { key: '98c852608682c7fd125ff2a5b8be6bc4b2ea084d', class: cn('w-full', { hidden: this.activeElement !== componentTags.vehicleSpecification }) }, h("vehicle-specification", Object.assign({ key: '22afb7982bf095f7faa82796f39d810b55df1623', "base-url": this.baseUrl, language: this.language, "query-string": this.queryString }, props[componentTags.vehicleSpecification]))), h("div", { key: '4d3bc76212cd6315f15e3913bf2be337c314ff9f', class: cn('w-full', { hidden: this.activeElement !== componentTags.vehicleAccessories }) }, h("vehicle-accessories", Object.assign({ key: 'b28c3b612526eab03717873414ab483f768d6df6', "base-url": this.baseUrl, language: this.language, "query-string": this.queryString }, props[componentTags.vehicleAccessories]))), h("div", { key: 'ba95ea2b9d2ec4d9c3fb03f011dfd11ae7c83730', class: cn('w-full', { hidden: this.activeElement !== componentTags.warrantyDetails }) }, h("warranty-details", Object.assign({ key: 'f65cee7a8161bd8380ae0c85cbc1d94681554961', "show-ssc": "true", "show-warranty": "true", "base-url": this.baseUrl, language: this.language, "query-string": this.queryString }, props[componentTags.warrantyDetails]), h("slot", { key: 'da97447c8d7d5913dbbcb1d1003038104b432267' }))), h("div", { key: 'cb9bd440c355bc43b04210f704c042f4cf8bcbe9', class: cn('w-full', { hidden: this.activeElement !== componentTags.serviceHistory }) }, h("service-history", Object.assign({ key: 'f785b0cbbf272662a752a061b8c97fd72ab901c3', language: this.language, "base-url": this.baseUrl, "query-string": this.queryString }, props[componentTags.serviceHistory]))), h("div", { key: '9e658efd82245b13a452fa857f6736913e466977', class: cn('w-full', { hidden: this.activeElement !== componentTags.paintThickness }) }, h("paint-thickness", Object.assign({ key: '2dbcdae4d28a46c63093cbdbe6f663beed967e33', "base-url": this.baseUrl, language: this.language, "query-string": this.queryString }, props[componentTags.paintThickness]))), h("div", { key: '8c20706cfc6862c2955ada0b50f06fd2a335656b', class: cn('w-full', { hidden: this.activeElement !== componentTags.dynamicClaim }) }, h("dynamic-claim", Object.assign({ key: 'e840b4039bb6fa753a735d674ed091c4d830d5a9' }, props[componentTags.dynamicClaim], { language: this.language, "base-url": this.baseUrl, "query-string": this.queryString })))));
     }
     static get is() { return "vehicle-lookup"; }
     static get originalStyleUrls() {
@@ -230,6 +258,28 @@ export class VehicleLookup {
                 "reflect": false,
                 "defaultValue": "''"
             },
+            "childrenProps": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | Object",
+                    "resolved": "Object | string",
+                    "references": {
+                        "Object": {
+                            "location": "global",
+                            "id": "global::Object"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "children-props",
+                "reflect": false
+            },
             "blazorOnLoadingStateChange": {
                 "type": "string",
                 "mutable": false,
@@ -283,7 +333,8 @@ export class VehicleLookup {
     static get states() {
         return {
             "wrapperErrorState": {},
-            "blazorRef": {}
+            "blazorRef": {},
+            "locale": {}
         };
     }
     static get methods() {
@@ -316,7 +367,7 @@ export class VehicleLookup {
             },
             "fetchVin": {
                 "complexType": {
-                    "signature": "(vin: string, headers?: any) => Promise<\"VIN is required\" | \"Invalid VIN\">",
+                    "signature": "(vin: string, headers?: any) => Promise<string>",
                     "parameters": [{
                             "name": "vin",
                             "type": "string",
@@ -332,29 +383,7 @@ export class VehicleLookup {
                             "id": "global::Promise"
                         }
                     },
-                    "return": "Promise<\"VIN is required\" | \"Invalid VIN\">"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
-            "getPageContext": {
-                "complexType": {
-                    "signature": "() => Promise<{ componentsList: ComponentMap; }>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "ComponentMap": {
-                            "location": "local",
-                            "path": "/home/vsts/work/1/s/src/components/vehicle-lookup/vehicle-lookup.tsx",
-                            "id": "src/components/vehicle-lookup/vehicle-lookup.tsx::ComponentMap"
-                        }
-                    },
-                    "return": "Promise<{ componentsList: ComponentMap; }>"
+                    "return": "Promise<string>"
                 },
                 "docs": {
                     "text": "",
@@ -366,14 +395,11 @@ export class VehicleLookup {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "language",
+                "methodName": "changeLanguage"
+            }, {
                 "propName": "wrapperErrorState",
                 "methodName": "errorListener"
-            }, {
-                "propName": "onLoadingStateChanged",
-                "methodName": "handleLoadingListenerPropChange"
-            }, {
-                "propName": "blazorOnLoadingStateChange",
-                "methodName": "handleBlazorLoadingRefChange"
             }];
     }
 }

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

@@ -1 +1 @@
-*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: ;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.block{display:block}:host{all:initial!important;display:block}*{font-family:Arial}.static{position:static}.hidden{display:none}.w-full{width:100%}.relative{position:relative}.sticky{position:sticky}.top-0{top:0}.mx-auto{margin-left:auto;margin-right:auto}.my-2{margin-bottom:.5rem;margin-top:.5rem}.mt-\[12px\]{margin-top:12px}.flex{display:flex}.table{display:table}.h-0{height:0}.h-\[40px\]{height:40px}.h-\[80px\]{height:80px}.max-h-\[70dvh\]{max-height:70dvh}.min-h-\[100px\]{min-height:100px}.w-fit{width:fit-content}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.scale-0{--tw-scale-x:0;--tw-scale-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))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.whitespace-nowrap{white-space:nowrap}.rounded-\[4px\]{border-radius:4px}.rounded-\[8px\]{border-radius:8px}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-\[\#d6d8dc\]{--tw-border-opacity:1;border-color:rgb(214 216 220/var(--tw-border-opacity,1))}.bg-\[\#e1e3e5\]{--tw-bg-opacity:1;background-color:rgb(225 227 229/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.px-\[10px\]{padding-left:10px;padding-right:10px}.px-\[16px\]{padding-left:16px;padding-right:16px}.py-4{padding-bottom:1rem;padding-top:1rem}.py-\[20px\]{padding-bottom:20px;padding-top:20px}.py-\[8px\]{padding-bottom:8px;padding-top:8px}.pt-\[4px\]{padding-top:4px}.text-center{text-align:center}.text-\[18px\]{font-size:18px}.text-\[20px\]{font-size:20px}.font-bold{font-weight:700}.text-\[\#383c43\]{--tw-text-opacity:1;color:rgb(56 60 67/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.opacity-0{opacity:0}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.duration-700{transition-duration:.7s}.reject-card{background-color:#f7d7d8;border-color:#f2aeb5;color:#58151c}.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))}.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)}.success-card{background-color:#d0e7de;border-color:#a2d0bb;color:#0b3521}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.z-50{z-index:50}.size-\[40px\]{height:40px;width:40px}.size-full{height:100%;width:100%}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin-2s{animation:spin 2s linear infinite}.duration-100{transition-duration:.1s}
+*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: ;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.block{display:block}:host{all:initial!important;display:block}*{font-family:Arial}.static{position:static}.hidden{display:none}.w-full{width:100%}.relative{position:relative}.sticky{position:sticky}.top-0{top:0}.mx-auto{margin-left:auto;margin-right:auto}.my-2{margin-bottom:.5rem;margin-top:.5rem}.mt-\[12px\]{margin-top:12px}.flex{display:flex}.table{display:table}.h-0{height:0}.h-\[40px\]{height:40px}.h-\[80px\]{height:80px}.max-h-\[70dvh\]{max-height:70dvh}.min-h-\[100px\]{min-height:100px}.w-fit{width:fit-content}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.scale-0{--tw-scale-x:0;--tw-scale-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))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.whitespace-nowrap{white-space:nowrap}.rounded-\[4px\]{border-radius:4px}.rounded-\[8px\]{border-radius:8px}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-\[\#d6d8dc\]{--tw-border-opacity:1;border-color:rgb(214 216 220/var(--tw-border-opacity,1))}.bg-\[\#e1e3e5\]{--tw-bg-opacity:1;background-color:rgb(225 227 229/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.px-\[10px\]{padding-left:10px;padding-right:10px}.px-\[16px\]{padding-left:16px;padding-right:16px}.py-\[16px\]{padding-bottom:16px;padding-top:16px}.py-\[20px\]{padding-bottom:20px;padding-top:20px}.py-\[8px\]{padding-bottom:8px;padding-top:8px}.pt-\[4px\]{padding-top:4px}.text-center{text-align:center}.text-\[18px\]{font-size:18px}.text-\[20px\]{font-size:20px}.font-bold{font-weight:700}.text-\[\#383c43\]{--tw-text-opacity:1;color:rgb(56 60 67/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.opacity-0{opacity:0}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.duration-700{transition-duration:.7s}.reject-card{background-color:#f7d7d8;border-color:#f2aeb5;color:#58151c}.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))}.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)}.success-card{background-color:#d0e7de;border-color:#a2d0bb;color:#0b3521}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.z-50{z-index:50}.size-\[40px\]{height:40px;width:40px}.size-full{height:100%;width:100%}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin-2s{animation:spin 2s linear infinite}.duration-100{transition-duration:.1s}

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

@@ -15,6 +15,7 @@ export class VehicleSpecification {
         this.isDev = false;
         this.queryString = '';
         this.language = 'en';
+        this.errorCallback = undefined;
         this.loadingStateChange = undefined;
         this.loadedResponse = undefined;
         this.locale = localeSchema.getDefault();
@@ -64,12 +65,17 @@ export class VehicleSpecification {
         catch (error) {
             if (error && (error === null || error === void 0 ? void 0 : error.name) === 'AbortError')
                 return;
+            if (this.errorCallback)
+                this.errorCallback(error.message);
             console.error(error);
-            this.state = 'error';
-            this.vehicleInformation = null;
-            this.errorMessage = error.message;
+            this.setErrorMessage(error.message);
         }
     }
+    async setErrorMessage(message) {
+        this.state = 'error';
+        this.vehicleInformation = null;
+        this.errorMessage = message;
+    }
     async fetchData(requestedVin = this.externalVin, headers = {}) {
         await this.setData(requestedVin, headers);
     }
@@ -83,7 +89,7 @@ export class VehicleSpecification {
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         const texts = this.locale.vehicleLookup.specification;
-        return (h(Host, { key: '2d79e0d9687e42208abffcf58440a9a99af61036' }, h("div", { key: 'b3a2196ae3d83b28c20bf4dd1dd5b38afa9ca75c', dir: this.locale.direction, class: "min-h-[100px] relative transition-all duration-300 overflow-hidden" }, h("div", { key: '0e362941084daa41450a6d98dda0a0a1aee86d16' }, h(Loading, { key: 'aaf8d7ba4cb85f43bbbbd6efcfd3e19c44750669', isLoading: this.state.includes('loading') }), h("div", { key: '10ed2e6c769579ef48d1f9cf43d47dff5d98a062', class: cn('transition-all duration-700', { 'scale-0': this.state.includes('loading') || this.state === 'idle', 'opacity-0': this.state.includes('loading') }) }, h("div", { key: '61fd8dfca3da820240381f130955372c46d2f57e', class: cn('text-center pt-[4px] text-[20px]', { 'text-red-600': !!this.errorMessage }) }, (_a = this.vehicleInformation) === null || _a === void 0 ? void 0 : _a.vin), ['error', 'error-loading'].includes(this.state) && (h("div", { key: 'df94a3d69c05eb0bc7a00e7e49f823b9b686e314', class: "py-4" }, h("div", { key: '72c0e34a6e5aba9d7cc2a58713efd2dadc4eede9', class: " px-[16px] py-[8px] border reject-card text-[20px] rounded-[8px] w-fit mx-auto" }, this.locale.errors[this.errorMessage] || this.locale.errors.wildCard))), ['data', 'data-loading'].includes(this.state) && (h("div", { key: '58ec5d38131d5c4e0f76f6efcf0ed764ffe00e61', class: "flex mt-[12px] max-h-[70dvh] overflow-hidden rounded-[4px] flex-col border border-[#d6d8dc]" }, h("div", { key: 'f0d17e329537615a9a3da5f2e0ba34d0f4870824', class: "w-full h-[40px] flex shrink-0 justify-center text-[18px] items-center text-[#383c43] text-center bg-[#e1e3e5]" }, texts.vehicleSpecification), h("div", { key: 'a6c5583f13b518c5d09fac1c15eb8bf91b3e639b', class: "h-0 overflow-auto flex-1" }, !((_b = this.vehicleInformation) === null || _b === void 0 ? void 0 : _b.vehicleSpecification) && h("div", { key: '8d93979de01580b140be95059c72a00ab9c7f81b', class: "h-[80px] flex items-center justify-center text-[18px]" }, texts.noData), !!((_c = this.vehicleInformation) === null || _c === void 0 ? void 0 : _c.vehicleSpecification) && (h("table", { key: 'fc57854df168b893061c630fec4beaba970eede1', class: "w-full overflow-auto relative border-collapse" }, h("thead", { key: '92bcd38790ef90f9ae9013e24a3b55e8e8115ee4', class: "top-0 font-bold sticky bg-white" }, h("tr", { key: '2d705477de42db9b5605d7aa3338cae6cc0a07ff' }, ['model', 'variant', 'katashiki', 'modelYear', 'sfx'].map(title => (h("th", { key: title, class: "px-[10px] py-[20px] text-center whitespace-nowrap border-b border-[#d6d8dc]" }, texts[title]))))), h("tbody", { key: 'f3f847296d88bdd0a81cf7ce70d6c988a92d9407' }, h("tr", { key: '035b4ae4cc8f81e341d206815ebcf140f6d89343' }, h("td", { key: 'df839d6b2e73675f6f71de7e3e526f04e1a51f1c', class: "px-[10px] py-[20px] text-center whitespace-nowrap" }, ((_e = (_d = this === null || this === void 0 ? void 0 : this.vehicleInformation) === null || _d === void 0 ? void 0 : _d.vehicleVariantInfo) === null || _e === void 0 ? void 0 : _e.modelCode) || '...', " ", h("br", { key: 'daab3259ddf3b111a907f6d635b1df850db106ae', class: "my-2" }), ((_g = (_f = this === null || this === void 0 ? void 0 : this.vehicleInformation) === null || _f === void 0 ? void 0 : _f.vehicleSpecification) === null || _g === void 0 ? void 0 : _g.modelDesc) || '...'), h("td", { key: '8c1936259bc490c555f27d609889054506e263ff', class: "px-[10px] py-[20px] text-center whitespace-nowrap" }, ((_j = (_h = this === null || this === void 0 ? void 0 : this.vehicleInformation) === null || _h === void 0 ? void 0 : _h.identifiers) === null || _j === void 0 ? void 0 : _j.variant) || '...', " ", h("br", { key: 'eaf4d89fb5345dd2dd18823d138874bf988b24c8' }), ((_l = (_k = this === null || this === void 0 ? void 0 : this.vehicleInformation) === null || _k === void 0 ? void 0 : _k.vehicleSpecification) === null || _l === void 0 ? void 0 : _l.variantDesc) || '...'), ['identifiers.katashiki', 'vehicleVariantInfo.modelYear', 'vehicleVariantInfo.sfx'].map(infoPath => {
+        return (h(Host, { key: '10d7da29405e9f6f059789bfe4cabb9de999fd7d' }, h("div", { key: 'b4aaaa70893040e56373280e8b1826f2111dc795', dir: this.locale.direction, class: "min-h-[100px] relative transition-all duration-300 overflow-hidden" }, h("div", { key: '5447aceb47b1ff56de869f2bdc2ceea41fad8d00' }, h(Loading, { key: 'e5afa11e2072dce52cb0c744c2715bc222373b18', isLoading: this.state.includes('loading') }), h("div", { key: '8ef1c896ac4234bb3aeec3df8241b5d461bb3267', class: cn('transition-all duration-700', { 'scale-0': this.state.includes('loading') || this.state === 'idle', 'opacity-0': this.state.includes('loading') }) }, h("div", { key: '5ee0f72bbf2f6c0d79ca4e8aa38067a244c680cd', class: cn('text-center pt-[4px] text-[20px]', { 'text-red-600': !!this.errorMessage }) }, (_a = this.vehicleInformation) === null || _a === void 0 ? void 0 : _a.vin), ['error', 'error-loading'].includes(this.state) && (h("div", { key: '8ff294c1b333731612c0baec23409c0c9d7f6db1', class: "py-[16px] min-h-[100px] flex items-center" }, h("div", { key: '4d61facf67dda7aeda382623017c2e0c380ad90f', class: "px-[16px] py-[8px] border reject-card text-[20px] rounded-[8px] w-fit mx-auto" }, this.locale.errors[this.errorMessage] || this.locale.errors.wildCard))), ['data', 'data-loading'].includes(this.state) && (h("div", { key: 'ccba81927f973552d7cf4d4727d4f460c7a08deb', class: "flex mt-[12px] max-h-[70dvh] overflow-hidden rounded-[4px] flex-col border border-[#d6d8dc]" }, h("div", { key: '1202f36fafd59fb69f99e36d714ca1a4cd8e9593', class: "w-full h-[40px] flex shrink-0 justify-center text-[18px] items-center text-[#383c43] text-center bg-[#e1e3e5]" }, texts.vehicleSpecification), h("div", { key: 'd61786575ebde339955d5e2dfe8888d76a759785', class: "h-0 overflow-auto flex-1" }, !((_b = this.vehicleInformation) === null || _b === void 0 ? void 0 : _b.vehicleSpecification) && h("div", { key: '99ad46e48a387c4aa3a51d0e80bd1838ae276036', class: "h-[80px] flex items-center justify-center text-[18px]" }, texts.noData), !!((_c = this.vehicleInformation) === null || _c === void 0 ? void 0 : _c.vehicleSpecification) && (h("table", { key: 'bdf3c84ac4f92ac37025066133fdbe29bac511cf', class: "w-full overflow-auto relative border-collapse" }, h("thead", { key: '638a5a952ff2ae5321416ab7ab506bc5d716580a', class: "top-0 font-bold sticky bg-white" }, h("tr", { key: 'd6566deba126815e6e3dc919ae23a5c0d4c59e91' }, ['model', 'variant', 'katashiki', 'modelYear', 'sfx'].map(title => (h("th", { key: title, class: "px-[10px] py-[20px] text-center whitespace-nowrap border-b border-[#d6d8dc]" }, texts[title]))))), h("tbody", { key: 'f0fb82022c9e714bd6de988de9b91e82d8dc3af0' }, h("tr", { key: '1fb11f4f0bf979225fd299fe76c41f8b2f4312b8' }, h("td", { key: '6eee318f27ba96ce39cfb32249a7b9a2286414fe', class: "px-[10px] py-[20px] text-center whitespace-nowrap" }, ((_e = (_d = this === null || this === void 0 ? void 0 : this.vehicleInformation) === null || _d === void 0 ? void 0 : _d.vehicleVariantInfo) === null || _e === void 0 ? void 0 : _e.modelCode) || '...', " ", h("br", { key: '884eabac1cce2f941e1cf46127be3a4052678ed8', class: "my-2" }), ((_g = (_f = this === null || this === void 0 ? void 0 : this.vehicleInformation) === null || _f === void 0 ? void 0 : _f.vehicleSpecification) === null || _g === void 0 ? void 0 : _g.modelDesc) || '...'), h("td", { key: 'a1fcf0dc949a213d95a4db18402fdbe3fb5118ed', class: "px-[10px] py-[20px] text-center whitespace-nowrap" }, ((_j = (_h = this === null || this === void 0 ? void 0 : this.vehicleInformation) === null || _h === void 0 ? void 0 : _h.identifiers) === null || _j === void 0 ? void 0 : _j.variant) || '...', " ", h("br", { key: '93f5e7d8d067f4c1acfc1adf87d8c43b94d83a59' }), ((_l = (_k = this === null || this === void 0 ? void 0 : this.vehicleInformation) === null || _k === void 0 ? void 0 : _k.vehicleSpecification) === null || _l === void 0 ? void 0 : _l.variantDesc) || '...'), ['identifiers.katashiki', 'vehicleVariantInfo.modelYear', 'vehicleVariantInfo.sfx'].map(infoPath => {
             var _a;
             const [place, field] = infoPath.split('.');
             const cellValue = (_a = this === null || this === void 0 ? void 0 : this.vehicleInformation) === null || _a === void 0 ? void 0 : _a[place][field].toString();
@@ -182,6 +188,27 @@ export class VehicleSpecification {
                 "reflect": false,
                 "defaultValue": "'en'"
             },
+            "errorCallback": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(errorMessage: ErrorKeys) => void",
+                    "resolved": "(errorMessage: ErrorKeys) => void",
+                    "references": {
+                        "ErrorKeys": {
+                            "location": "import",
+                            "path": "~types/locales",
+                            "id": "src/global/types/locales/index.ts::ErrorKeys"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
             "loadingStateChange": {
                 "type": "unknown",
                 "mutable": false,
@@ -265,6 +292,32 @@ export class VehicleSpecification {
                     "tags": []
                 }
             },
+            "setErrorMessage": {
+                "complexType": {
+                    "signature": "(message: ErrorKeys) => Promise<void>",
+                    "parameters": [{
+                            "name": "message",
+                            "type": "OptionalKeys<{ wildCard: string; noBaseUrl: string; invalidVin: string; vinNumberRequired: string; partNumberRequired: string; noServiceAvailable: string; wrongResponseFormat: string; requestFailedPleaseTryAgainLater: string; }>",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "ErrorKeys": {
+                            "location": "import",
+                            "path": "~types/locales",
+                            "id": "src/global/types/locales/index.ts::ErrorKeys"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
             "fetchData": {
                 "complexType": {
                     "signature": "(requestedVin?: string, headers?: any) => Promise<void>",