adp-web-components 0.0.89 → 0.0.91

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

@@ -1,414 +0,0 @@
-/*!
- * Built by ShiftSoftware
- * Copyright (c)
- */
-import { Host, h } from "@stencil/core";
-import cn from "../../global/lib/cn";
-import { closeImageViewer, openImageViewer } from "../../global/lib/image-expansion";
-import { getLocaleLanguage, getSharedLocal, sharedLocalesSchema } from "../../global/lib/get-local-language";
-import { getVehicleInformation } from "../../global/api/vehicleInformation";
-import Eye from "~assets/eye.svg";
-import paintThicknessSchema from "../../locales/vehicleLookup/paintThickness/type";
-let mockData = {};
-export class PaintThickness {
-    constructor() {
-        this.closeImageListener = (event) => {
-            this.closeImage(event);
-        };
-        this.openImage = (target, imageSrc) => {
-            openImageViewer(this, target, imageSrc);
-        };
-        this.closeImage = (event) => {
-            closeImageViewer(this, event);
-        };
-        this.baseUrl = '';
-        this.isDev = false;
-        this.queryString = '';
-        this.language = 'en';
-        this.errorCallback = undefined;
-        this.loadingStateChange = undefined;
-        this.loadedResponse = undefined;
-        this.sharedLocales = sharedLocalesSchema.getDefault();
-        this.locale = paintThicknessSchema.getDefault();
-        this.state = 'idle';
-        this.externalVin = null;
-        this.expandedImage = null;
-        this.errorMessage = null;
-        this.vehicleInformation = undefined;
-    }
-    async componentWillLoad() {
-        await this.changeLanguage(this.language);
-    }
-    async changeLanguage(newLanguage) {
-        const localeResponses = await Promise.all([getLocaleLanguage(newLanguage, 'vehicleLookup.paintThickness', paintThicknessSchema), getSharedLocal(newLanguage)]);
-        this.locale = localeResponses[0];
-        this.sharedLocales = localeResponses[1];
-    }
-    handleSettingData(response) {
-        if (!response.paintThickness)
-            response.paintThickness = { imageGroups: [], parts: [] };
-        if (!response.paintThickness.parts || !Array.isArray(response.paintThickness.parts))
-            response.paintThickness.parts = [];
-        if (!response.paintThickness.imageGroups || !Array.isArray(response.paintThickness.imageGroups))
-            response.paintThickness.imageGroups = [];
-        this.vehicleInformation = response;
-    }
-    async setData(newData, headers = {}) {
-        clearTimeout(this.networkTimeoutRef);
-        if (this.abortController)
-            this.abortController.abort();
-        this.abortController = new AbortController();
-        let scopedTimeoutRef;
-        const isVinRequest = typeof newData === 'string';
-        const vin = isVinRequest ? newData : newData === null || newData === void 0 ? void 0 : newData.vin;
-        this.externalVin = vin;
-        try {
-            if (!vin || vin.trim().length === 0) {
-                this.state = 'idle';
-                return;
-            }
-            if (this.state === 'data' || this.state === 'error') {
-                this.state = (this.state + '-loading');
-            }
-            else
-                this.state = 'loading';
-            await new Promise(r => {
-                scopedTimeoutRef = setTimeout(r, 700);
-                this.networkTimeoutRef = scopedTimeoutRef;
-            });
-            const vehicleResponse = isVinRequest ? await getVehicleInformation(this, { scopedTimeoutRef, vin, mockData }, headers) : newData;
-            if (this.networkTimeoutRef === scopedTimeoutRef) {
-                if (!vehicleResponse)
-                    throw new Error('wrongResponseFormat');
-                this.handleSettingData(vehicleResponse);
-            }
-            this.errorMessage = null;
-            this.state = 'data';
-        }
-        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.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);
-    }
-    async loadingListener() {
-        if (this.loadingStateChange)
-            this.loadingStateChange(this.state.includes('loading'));
-    }
-    async setMockData(newMockData) {
-        mockData = newMockData;
-    }
-    render() {
-        var _a, _b;
-        const texts = this.locale;
-        const { imageGroups, parts } = (this === null || this === void 0 ? void 0 : this.vehicleInformation) ? (_a = this === null || this === void 0 ? void 0 : this.vehicleInformation) === null || _a === void 0 ? void 0 : _a.paintThickness : { imageGroups: [], parts: [] };
-        return (h(Host, { key: '5cf6027c08c9c5a8c4de538b21f2c326ea833ada' }, h("div", { key: '5236eb6c195132999d5d0d10998438cd5fe3d860', dir: this.sharedLocales.direction, class: "min-h-[100px] relative transition-all duration-300 overflow-hidden" }, h("div", { key: 'e0fd50defb44a210d4d506c60de0837af738e059' }, h("loading-spinner", { key: '023b451e2ec4820432133ca81ec8ce41738577c6', isLoading: this.state.includes('loading') }), h("div", { key: 'b4039f92553e97f84c84b2b343119a82eb6d33c3', class: cn('transition-all !duration-700', { 'scale-0': this.state.includes('loading') || this.state === 'idle', 'opacity-0': this.state.includes('loading') }) }, h("div", { key: '27f471f599de69c000e7e72a636754683611bcdb', 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: 'a0b40d877bcef9d481e36542f1ca55b9de54f134', class: "py-[16px] min-h-[100px] flex items-center" }, h("div", { key: '2ec7c16dfdd380c0633f88d791f0ccd652dc6905', class: "px-[16px] py-[8px] border reject-card text-[20px] rounded-[8px] w-fit mx-auto" }, this.sharedLocales.errors[this.errorMessage] || this.sharedLocales.errors.wildCard))), ['data', 'data-loading'].includes(this.state) && (h("div", { key: 'd515c83a7c872a7f41876d616a76aee8c8759244', class: "flex mt-[12px] w-full max-h-[70dvh] overflow-hidden mx-auto rounded-[4px] flex-col border border-[#d6d8dc]" }, h("div", { key: 'e5438160a2a723e00fb56329e7a4a262c65bb677', class: "w-full h-[40px] flex shrink-0 justify-center text-[18px] items-center text-[#383c43] text-center bg-[#e1e3e5]" }, texts.paintThickness), h("div", { key: '3e9b5cfa0f0030e61d9c7964a98b36410c8c5794', class: "h-0 overflow-auto flex-1" }, !parts.length && h("div", { key: '71e6473211447e656dd1676a5f6c2972558e5498', class: "h-[50px] px-[30px] flex items-center justify-center text-[18px]" }, texts.noData), !!parts.length && (h("table", { key: '29e1eb38df1415643f5ebb004399b63c85cae106', class: "w-full overflow-auto relative border-collapse" }, h("thead", { key: '35ad4d6c4842cc1c04b79ffda3535d27a4b9c350', class: "top-0 font-bold sticky bg-white" }, h("tr", { key: 'b90b810337112bb7309aa316dc9752966215e5b9' }, ['part', 'left', 'right'].map(title => (h("th", { key: title, class: "px-[15px] min-w-[100px] py-[15px] text-center whitespace-nowrap border-b border-[#d6d8dc]" }, texts[title]))))), h("tbody", { key: 'aee596b314c239e10b2f8c297e00012519eb00bb' }, parts.map((part, idx) => (h("tr", { class: "transition-colors duration-100 hover:bg-slate-100", key: part.part }, ['part', 'left', 'right'].map(key => (h("td", { key: part.part + key, class: cn('px-[10px] py-[20px] text-center whitespace-nowrap border-b border-[#d6d8dc]', {
-                '!border-none': idx === parts.length - 1,
-            }) }, part[key] || '...')))))))))))), ['data', 'data-loading'].includes(this.state) && (h("div", { key: 'ac3c37f44035acc79c42cf0c35b9b4503bbfbdfb' }, !imageGroups.length && h("div", { key: '30ae37f513121bb4b6c6c1d96662b0672196ee89', class: "h-[40px] px-[30px] flex text-red-500 items-center justify-center text-[18px]" }, texts.noImageGroups), !!imageGroups.length && (h("div", { key: '4ddadccfb0f2973033a4e05c6af575156605dbb4', class: "py-[16px] gap-[16px] justify-center flex flex-wrap px-[24px] w-full" }, imageGroups.map(imageGroup => (h("div", { class: "shrink-0 rounded-lg shadow-sm border overflow-hidden flex flex-col", key: imageGroup.name }, h("h1", { class: "text-center border-b bg-slate-200 font-semibold p-[6px]" }, imageGroup.name), h("div", { class: "flex p-[12px] gap-[8px]" }, imageGroup.images.map(image => (h("div", { class: "flex gap-[8px]", key: image }, h("button", { onClick: ({ target }) => this.openImage(target, image), class: "shrink-0 relative ring-0 outline-none w-fit mx-auto [&_img]:hover:shadow-lg [&_div]:hover:!opacity-100 cursor-pointer" }, h("div", { class: "absolute flex-col justify-center gap-[4px] size-full flex items-center pointer-events-none hover:opacity-100 rounded-lg opacity-0 bg-black/40 transition-all duration-300" }, h("img", { src: Eye }), h("span", { class: "text-white" }, texts.expand)), h("img", { class: "w-auto h-[150px] cursor-pointer shadow-sm rounded-lg transition-all duration-300", src: image }))))))))), h("div", { key: '3c760384222e35e6ccb5874d0f5eac00a75418a5', onClick: () => this.closeImage(), style: { backdropFilter: this.expandedImage ? 'blur(3px)' : 'blur(0px)' }, class: cn('pointer-events-none w-[100dvw] h-[100dvh] fixed top-0 z-10 left-0 opacity-0 bg-black/40 transition-all duration-400', {
-                'pointer-events-auto opacity-100 delay-200': this.expandedImage,
-            }) }, h("button", { key: '98da1dba1744bda8d4add7df8e6c7b59248476c0', class: "flex flex-col mt-[16px] items-center justify-center size-12 float-right mr-[16px]", onClick: () => this.closeImage() }, h("div", { key: 'bd5e413346012fa83b351435a2ceb0c707a78238', class: "h-1 w-12 rounded-full rotate-45 absolute bg-white" }), h("div", { key: '503cadb97679a46e94581d96436364b0c00e5800', class: "h-1 w-12 rounded-full -rotate-45 absolute bg-white" }))), h("img", { key: '5b623cfab2cff6ffe8242ded2c59b1ce6729f411', alt: "", id: "expanded-image", class: "fixed opacity-0 z-40 transition-all rounded-lg" }))))))))));
-    }
-    static get is() { return "paint-thickness"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["paint-thickness.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["paint-thickness.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "baseUrl": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "base-url",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "isDev": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "is-dev",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "queryString": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "query-string",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "language": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "LanguageKeys",
-                    "resolved": "\"ar\" | \"en\" | \"ku\" | \"ru\"",
-                    "references": {
-                        "LanguageKeys": {
-                            "location": "import",
-                            "path": "~types/locale",
-                            "id": "src/global/types/locale.ts::LanguageKeys"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "language",
-                "reflect": false,
-                "defaultValue": "'en'"
-            },
-            "errorCallback": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "(errorMessage: ErrorKeys) => void",
-                    "resolved": "(errorMessage: OptionalKeys<{ noBaseUrl: string; invalidVin: string; vinNumberRequired: string; partNumberRequired: string; wrongResponseFormat: string; noPartsFound: string; noServiceAvailable: string; wrongFormStructure: string; wildCard: string; requestFailedPleaseTryAgainLater: string; }>) => void",
-                    "references": {
-                        "ErrorKeys": {
-                            "location": "import",
-                            "path": "~lib/get-local-language",
-                            "id": "src/global/lib/get-local-language.ts::ErrorKeys"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                }
-            },
-            "loadingStateChange": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "(isLoading: boolean) => void",
-                    "resolved": "(isLoading: boolean) => void",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                }
-            },
-            "loadedResponse": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "(response: VehicleInformation) => void",
-                    "resolved": "(response: VehicleInformation) => void",
-                    "references": {
-                        "VehicleInformation": {
-                            "location": "import",
-                            "path": "~types/vehicle-information",
-                            "id": "src/global/types/vehicle-information.ts::VehicleInformation"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                }
-            }
-        };
-    }
-    static get states() {
-        return {
-            "sharedLocales": {},
-            "locale": {},
-            "state": {},
-            "externalVin": {},
-            "expandedImage": {},
-            "errorMessage": {},
-            "vehicleInformation": {}
-        };
-    }
-    static get methods() {
-        return {
-            "setData": {
-                "complexType": {
-                    "signature": "(newData: VehicleInformation | string, headers?: any) => Promise<void>",
-                    "parameters": [{
-                            "name": "newData",
-                            "type": "string | VehicleInformation",
-                            "docs": ""
-                        }, {
-                            "name": "headers",
-                            "type": "any",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "VehicleInformation": {
-                            "location": "import",
-                            "path": "~types/vehicle-information",
-                            "id": "src/global/types/vehicle-information.ts::VehicleInformation"
-                        },
-                        "ReturnType": {
-                            "location": "global",
-                            "id": "global::ReturnType"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
-            "setErrorMessage": {
-                "complexType": {
-                    "signature": "(message: ErrorKeys) => Promise<void>",
-                    "parameters": [{
-                            "name": "message",
-                            "type": "\"noBaseUrl\" | \"invalidVin\" | \"vinNumberRequired\" | \"partNumberRequired\" | \"wrongResponseFormat\" | \"noPartsFound\" | \"noServiceAvailable\" | \"wrongFormStructure\" | \"wildCard\" | \"requestFailedPleaseTryAgainLater\"",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "ErrorKeys": {
-                            "location": "import",
-                            "path": "~lib/get-local-language",
-                            "id": "src/global/lib/get-local-language.ts::ErrorKeys"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
-            "fetchData": {
-                "complexType": {
-                    "signature": "(requestedVin?: string, headers?: any) => Promise<void>",
-                    "parameters": [{
-                            "name": "requestedVin",
-                            "type": "string",
-                            "docs": ""
-                        }, {
-                            "name": "headers",
-                            "type": "any",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
-            "setMockData": {
-                "complexType": {
-                    "signature": "(newMockData: MockJson<VehicleInformation>) => Promise<void>",
-                    "parameters": [{
-                            "name": "newMockData",
-                            "type": "{ [key: string]: VehicleInformation; }",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "MockJson": {
-                            "location": "import",
-                            "path": "~types/components",
-                            "id": "src/global/types/components.ts::MockJson"
-                        },
-                        "VehicleInformation": {
-                            "location": "import",
-                            "path": "~types/vehicle-information",
-                            "id": "src/global/types/vehicle-information.ts::VehicleInformation"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            }
-        };
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "language",
-                "methodName": "changeLanguage"
-            }, {
-                "propName": "state",
-                "methodName": "loadingListener"
-            }];
-    }
-}