/*!
 * Built by ShiftSoftware
 * Copyright (c)
 */
import cn from "../../global/lib/cn";
import { Host, h } from "@stencil/core";
import { MaterialCard } from "../components/material-card";
import { closeImageViewer, ImageViewer, openImageViewer } from "../../features/image-viewer/index";
import { AddIcon } from "../../global/assets/add-icon";
import { AlertIcon } from "../../global/assets/alert-icon";
import { CheckIcon } from "../../global/assets/check-icon";
import { AttachIcon } from "../../global/assets/attach-icon";
import { FormSubmitSVG } from "../../global/assets/form-submit-svg";
import { ActivationIcon } from "../../global/assets/activation-icon";
import { PrintIcon } from "../../global/assets/print-icon";
import Eye from "~assets/eye.svg";
export class VehicleItemClaimForm {
    constructor() {
        // #region Image Viewer Logic
        this.expandedImage = '';
        this.uploadMultipleDocuments = true;
        this.uploadProgress = 0;
        this.isOpened = false;
        this.isLoading = false;
        this.confirmationStates = {};
        this.errors = {};
        this.inputs = {
            documents: [],
        };
        this.setErrorValue = (errorName, value) => {
            const previousError = (this.errors[errorName] || {});
            this.errors = Object.assign(Object.assign({}, this.errors), { [errorName]: Object.assign(Object.assign({}, previousError), value) });
        };
        this.setInputValue = (inputName, value) => {
            this.inputs = Object.assign(Object.assign({}, this.inputs), { [inputName]: value });
        };
        this.onFileUploaderChange = (event) => {
            var _a, _b, _c, _d, _e;
            const input = event.target;
            if (!input.files)
                return;
            const maxSize = parseInt(input.dataset.maxSize || '0', 10);
            const newFiles = this.uploadMultipleDocuments ? Array.from(input.files) : [input.files[0]];
            input.value = '';
            let anyFileExceedsMaxSize = false;
            const filteredNewFiles = newFiles.filter(newFile => {
                var _a, _b;
                const isFileSizeValid = newFile.size <= maxSize;
                if (!isFileSizeValid) {
                    anyFileExceedsMaxSize = true;
                    return false;
                }
                const isFileAlreadyExists = (_b = (_a = this.inputs) === null || _a === void 0 ? void 0 : _a.documents) === null || _b === void 0 ? void 0 : _b.some(existingFile => existingFile.name === newFile.name && existingFile.size === newFile.size && existingFile.lastModified === newFile.lastModified);
                return !isFileAlreadyExists;
            });
            this.setInputValue('documents', this.uploadMultipleDocuments ? [...(((_a = this.inputs) === null || _a === void 0 ? void 0 : _a.documents) || []), ...filteredNewFiles] : filteredNewFiles);
            if (anyFileExceedsMaxSize) {
                this.setErrorValue('documents', {
                    show: true,
                    text: 'documentLimitError',
                });
                return;
            }
            else if ((_b = this.errors) === null || _b === void 0 ? void 0 : _b.documents)
                this.setErrorValue('documents', { text: (_c = this.errors.documents) === null || _c === void 0 ? void 0 : _c.text, show: false });
            if (((_d = this.item) === null || _d === void 0 ? void 0 : _d.claimingMethodEnum) === 'ClaimByScanningQRCode') {
                if ((_e = this.inputs) === null || _e === void 0 ? void 0 : _e.qrCode)
                    this.submit();
            }
            else
                this.focusInputs();
        };
        this.onDocumentButtonClicked = () => {
            const documentUploader = this.el.shadowRoot.querySelector('.document-uploader');
            if (documentUploader)
                documentUploader.click();
        };
        this.focusInputs = () => {
            setTimeout(() => {
                const inputs = this.el.shadowRoot.querySelectorAll('input[type="text"]');
                const firstEnabled = Array.from(inputs).find(input => !input.disabled && !input.readOnly);
                if (firstEnabled)
                    firstEnabled.focus();
            }, 50);
        };
        this.focusEmptyInputs = () => {
            var _a, _b;
            const inputs = this.el.shadowRoot.querySelectorAll('input[type="text"]');
            const firstEmptyInput = Array.from(inputs).find(input => { var _a; return !((_a = input.value) === null || _a === void 0 ? void 0 : _a.trim()); });
            if (firstEmptyInput)
                firstEmptyInput.focus();
            if (((_a = this.item) === null || _a === void 0 ? void 0 : _a.documentUploaderIsRequired) && !((_b = this.inputs) === null || _b === void 0 ? void 0 : _b.documents.length)) {
                this.setErrorValue('documents', {
                    show: true,
                    text: 'documentRequiredError',
                });
            }
        };
        this.submit = async () => {
            var _a, _b, _c, _d, _e, _f, _g, _h;
            if (!this.getIsFormValid())
                return this.focusEmptyInputs();
            if (!this.getIsFormConfirmed())
                return;
            if ((_a = this.item) === null || _a === void 0 ? void 0 : _a.showDocumentUploader) {
                if (((_b = this.item) === null || _b === void 0 ? void 0 : _b.documentUploaderIsRequired) && !((_d = (_c = this.inputs) === null || _c === void 0 ? void 0 : _c.documents) === null || _d === void 0 ? void 0 : _d.length)) {
                    this.setErrorValue('documents', {
                        show: true,
                        text: 'documentRequiredError',
                    });
                    return;
                }
            }
            this.isLoading = true;
            try {
                if (this.handleClaiming) {
                    await this.handleClaiming((_e = this.inputs) === null || _e === void 0 ? void 0 : _e.documents, {
                        qrCode: (_f = this.inputs) === null || _f === void 0 ? void 0 : _f.qrCode,
                        invoice: (_g = this.inputs) === null || _g === void 0 ? void 0 : _g.invoice,
                        jobNumber: (_h = this.inputs) === null || _h === void 0 ? void 0 : _h.jobNumber,
                    });
                }
                this.close(true);
            }
            catch (error) {
                console.error(error);
            }
            finally {
                this.isLoading = false;
            }
        };
        this.onConfirmCheckboxChange = (confirmationName) => (event) => {
            const target = event.target;
            this.confirmationStates = Object.assign(Object.assign({}, this.confirmationStates), { [confirmationName]: target.checked });
            if (this.getIsFormConfirmed)
                this.focusInputs();
        };
        this.getIsFormConfirmed = () => {
            var _a, _b;
            if (Array.isArray((_a = this.item) === null || _a === void 0 ? void 0 : _a.warnings)) {
                for (let idx = 0; idx < ((_b = this.item) === null || _b === void 0 ? void 0 : _b.warnings.length); idx++) {
                    const warning = this.item.warnings[idx];
                    if (!!(warning === null || warning === void 0 ? void 0 : warning.confirmationText) && !this.confirmationStates[warning.key])
                        return false;
                }
            }
            return true;
        };
        this.getIsFormValid = () => {
            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
            if (((_a = this.item) === null || _a === void 0 ? void 0 : _a.claimingMethodEnum) === 'ClaimByScanningQRCode') {
                if (!((_c = (_b = this.inputs) === null || _b === void 0 ? void 0 : _b.qrCode) === null || _c === void 0 ? void 0 : _c.trim().length))
                    return false;
            }
            else {
                if (!((_e = (_d = this.inputs) === null || _d === void 0 ? void 0 : _d.invoice) === null || _e === void 0 ? void 0 : _e.trim().length))
                    return false;
                if (!((_g = (_f = this.inputs) === null || _f === void 0 ? void 0 : _f.jobNumber) === null || _g === void 0 ? void 0 : _g.trim().length))
                    return false;
            }
            if (((_h = this.item) === null || _h === void 0 ? void 0 : _h.documentUploaderIsRequired) && !((_j = this.inputs) === null || _j === void 0 ? void 0 : _j.documents.length))
                return false;
            return true;
        };
        this.resetState = () => {
            this.item = null;
            this.errors = {};
            this.inputs = {
                documents: [],
            };
            this.isLoading = false;
            this.confirmationStates = {};
        };
        this.clearFile = (event) => {
            var _a, _b, _c;
            if (typeof event === 'number') {
                const newDocuments = this.inputs.documents.filter((_, idx) => idx !== event);
                this.setInputValue('documents', newDocuments);
                if (((_a = this === null || this === void 0 ? void 0 : this.item) === null || _a === void 0 ? void 0 : _a.documentUploaderIsRequired) && !newDocuments.length) {
                    this.setErrorValue('documents', {
                        show: true,
                        text: 'documentRequiredError',
                    });
                }
            }
            else {
                event.stopPropagation();
                this.setInputValue('documents', []);
                if ((_b = this.errors) === null || _b === void 0 ? void 0 : _b.documents)
                    this.setErrorValue('documents', { text: (_c = this.errors.documents) === null || _c === void 0 ? void 0 : _c.text, show: false });
            }
        };
        this.onKeyDown = (event) => {
            if (event.key === 'Enter')
                this.submit();
        };
    }
    onImageViewerToggles(newValue) {
        window.removeEventListener('keydown', this.closeModalListenerRef);
        if (newValue === null) {
            setTimeout(() => {
                this.closeModalListenerRef = (event) => event.key === 'Escape' && this.close();
                window.addEventListener('keydown', this.closeModalListenerRef);
            }, 200);
        }
    }
    async open() {
        this.isOpened = true;
        document.body.style.overflow = 'hidden';
        this.focusInputs();
        window.removeEventListener('keydown', this.closeModalListenerRef);
        this.closeModalListenerRef = (event) => event.key === 'Escape' && this.close();
        window.addEventListener('keydown', this.closeModalListenerRef);
    }
    onIsLoadingChange(newValue) {
        if (this.loadingStateChange)
            this.loadingStateChange(newValue);
    }
    async close(forceClose = false) {
        if (this.isLoading && !forceClose)
            return;
        this.isOpened = false;
        document.body.style.overflow = 'auto';
        await new Promise(r => setTimeout(r, 500));
        this.resetState();
        window.removeEventListener('keydown', this.closeModalListenerRef);
    }
    async setFileUploadProgression(uploadPercentage) {
        this.uploadProgress = uploadPercentage;
    }
    // #endregion
    render() {
        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
        const isQRScannerForm = ((_a = this.item) === null || _a === void 0 ? void 0 : _a.claimingMethodEnum) === 'ClaimByScanningQRCode';
        const disableInputs = !this.getIsFormConfirmed() || this.isLoading;
        const isFormValid = this.getIsFormValid();
        return (h(Host, { key: '5561d30f1ca5ccb798ea1511ad74559136795319', translate: "no" }, h(ImageViewer, { key: 'ec5c77a121a796c46f2d0eb07c343065199d6aac', style: { 'z-index': '99999999' }, expandedImage: this.expandedImage, imageStyle: { 'z-index': '999999999' }, closeImageViewer: () => closeImageViewer.bind(this)() }), h("div", { key: '7b81805c8f425a473a32d34bbfb11b57dac9ad7c', dir: this.locale.sharedLocales.direction, class: cn('min-w-[100dvw] pointer-events-none h-[100dvh] bg-white fixed top-0 left-0 z-[999] flex flex-col transition duration-500 scale-[110%] opacity-0 justify-between p-[50px] box-border overflow-auto', {
                'opacity-1 scale-100 pointer-events-auto': this.isOpened,
            }) }, h("button", { key: 'd748d63ec7fe0773d54087beff454e84a7a5f260', disabled: this.isLoading, onClick: this.close.bind(this), class: "disabled:opacity-50 transition absolute right-[50px] duration-500 rounded-full enabled:hover:bg-red-200 enabled:hover:text-red-400 text-black enabled:hover:scale-[150%] enabled:hover:rotate-[135deg] size-[35px] rotate-[45deg]" }, h(AddIcon, { key: 'be9aa144470f37a806505e4e87882204ee5aec81', class: "stroke-[1.5px]" })), h("div", { key: 'c741aea9361f654675753cfef8d350c1daa9f70f', class: "flex flex-col h-full gap-[32px] justify-between" }, h("div", { key: '2e40a6ae8b1cd4f5b12aed7d6c70a0630898f403', class: "flex mt-[50px] flex-col shrink-0 gap-[20px]" }, h("div", { key: '96d23ba0793a5fdd3ae09d5a4ab92067b00870dd', class: "border overflow-hidden rounded-[6px] border-[#dcdcdc] box-border" }, h("div", { key: 'a42197b6ab296cc47e596ce597e0ad9391d3d9fe', class: "relative text-[16px] h-[50px] font-semibold flex items-center justify-center bg-[#f6f6f6]" }, this.vin, !!((_b = this.item) === null || _b === void 0 ? void 0 : _b.printUrl) && (h("button", { key: '1b637431fa1e5408befbb2a253e20b8802983bfb', class: "outline-button absolute end-[16px]", onClick: () => window.open(this.item.printUrl, '_blank').focus() }, h(PrintIcon, { key: 'bc0dbb58548978dd28b4024119a7ec1f9270dd04', class: "size-[30px] duration-200" }), h("span", { key: 'cb2ab2014edde96174e7b0fd0fe3df2c8024b7ba' }, this.locale.print)))), h("div", { key: '77045d80a0ba24fdac46c10536c6aa22941f4dab', class: "overflow-hidden flex p-[22px] [&_div]:min-w-[200px] gap-[32px] flex-wrap justify-center" }, h(MaterialCard, { key: '5bdb13e7f0cdbd02389bdaaeda419f0986ccda88', title: this.locale.serviceType }, (_c = this.item) === null || _c === void 0 ? void 0 : _c.type), h(MaterialCard, { key: '2116e584b13b384892eaa47dbd35c9f9757e532c', title: this.locale.name }, (_d = this.item) === null || _d === void 0 ? void 0 : _d.name), h(MaterialCard, { key: '182370045eebb8be6e07b772d0faf1ef7ec758b1', title: this.locale.activationDate }, (_e = this.item) === null || _e === void 0 ? void 0 : _e.activatedAt), h(MaterialCard, { key: '8f0b7da9f272ac59783f12ee0116217165e5edb0', title: this.locale.expireDate }, (_f = this.item) === null || _f === void 0 ? void 0 : _f.expiresAt), h(MaterialCard, { key: 'e00a9a53b8bf0776daae9371b7d27ccdc4ff1977', title: this.locale.packageCode }, (_g = this.item) === null || _g === void 0 ? void 0 : _g.packageCode))), Array.isArray((_h = this.item) === null || _h === void 0 ? void 0 : _h.warnings) &&
            this.item.warnings.map(warning => (h("div", { key: warning.key, class: "border overflow-hidden rounded-[6px] border-[#ff9100] box-border" }, h("div", { class: "text-[16px] px-[22px] h-[50px] font-semibold flex items-center gap-[8px] bg-[#ff91001a]" }, h(AlertIcon, { class: "size-[25px] text-[#ff9100]" }), " ", warning.title), h("div", { class: "p-[16px]" }, h("div", { class: "text-[16px] flex-col items-center md:flex-row flex gap-[16px]" }, h("div", { class: "flex-1", innerHTML: warning.bodyContent }), (warning === null || warning === void 0 ? void 0 : warning.imageUrl) && (h("button", { onClick: ({ target }) => openImageViewer.bind(this)(target, warning === null || warning === void 0 ? void 0 : warning.imageUrl), 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" }, this.locale.expand)), h("img", { class: "w-auto h-auto max-w-[200px] max-h-[200px] cursor-pointer shadow-sm rounded-lg transition-all duration-300", src: warning === null || warning === void 0 ? void 0 : warning.imageUrl })))), (warning === null || warning === void 0 ? void 0 : warning.confirmationText) && (h("label", { class: cn('select-none text-[16px] flex font-semibold group items-center px-[16px] gap-[10px] mt-[20px] h-[36px] transition duration-300 rounded-[6px] cursor-pointer text-[#663c00] bg-[#ff91001a] border border-[#ffd28f]', {
                    'hover:bg-[#fff8e1]': !this.isLoading,
                    'opacity-50 pointer-events-none': this.isLoading,
                }) }, h("input", { type: "checkbox", class: "peer sr-only", disabled: this.isLoading, checked: !!this.confirmationStates[warning.key], onChange: this.onConfirmCheckboxChange(warning.key) }), h("div", { class: "size-[20px] rounded border border-[#ffb74d] transition duration-300 text-transparent peer-checked:text-white peer-checked:bg-[#ff9100] peer-checked:border-[#ff9100] flex items-center justify-center" }, h(CheckIcon, { class: "size-[18px]" })), warning === null || warning === void 0 ? void 0 :
                warning.confirmationText))))))), h("div", { key: 'da34367cd8a9fa28fac5120692045f323880e18a', class: cn('flex flex-col shrink-0 my-auto gap-[20px] h-fit p-[50px] border-[2px] border-[#3071a9] transition duration-500 items-center rounded-[8px] shadow-lg bg-[#f4f4f4]', {
                'border-[#f4f4f4]': this.isLoading,
            }) }, h("div", { key: '8541c67b9d2ea4d87e5b06b30ab3f3ad0e383677', class: "relative w-[200px] h-[140px]" }, h("div", { key: '8d47eb6c6fbf4fae065cce471a19dcc5736ed72a', class: cn('absolute size-full transition-all duration-500 flex flex-col items-center gap-[12px] left-0 top-0', { 'left-full opacity-0': this.isLoading }) }, h(FormSubmitSVG, { key: 'bc8880b8423d4027b396a89ba31c864f6f1f53a3', class: "size-[100px] fill-[#3071a9] text-[#3071a9]" }), h("div", { key: 'ea81346caf2ec28cd4343a55846508ec66feb262', class: "text-[16px] text-[#3071a9] font-semibold" }, isQRScannerForm ? this.locale.scanTheVoucher : this.locale.enterServiceInfo)), h("div", { key: '3cc9476d37e4abd86a85f7f11e57e2af830a784c', class: cn('absolute size-full opacity-0 transition-all duration-500 -left-full flex flex-col gap-[12px] items-center', { 'left-0 opacity-100': this.isLoading }) }, h("div", { key: '69d10097bb241cb0d0b6ad6db6898a86f8cd061d', class: cn('relative size-[100px] flex items-center justify-center') }, h("div", { key: 'f3d3ae341e37dc4e79c7eff597cf83a240eea881', class: "lds-ripple" }), h("div", { key: 'd1ae548f72dc52500fa1e4283714a65289843e02', class: "lds-ripple" })), ((_j = this.item) === null || _j === void 0 ? void 0 : _j.showDocumentUploader) && !!this.inputs['documents'].length ? (h("div", { class: "relative border-[#3071a9] text-[#3071a9] text-[16px] w-[300px] border-[2px] font-semibold h-[30px] overflow-hidden rounded-full flex items-center justify-center" }, h("span", { class: "relative z-20" }, this.locale.processing, " ", `${this.uploadProgress}%`), h("div", { style: {
                width: `${this.uploadProgress}%`,
                background: `linear-gradient(to right, rgba(219, 234, 254, ${Math.min(0.1 + this.uploadProgress / 100, 1)}), rgba(191, 219, 254, ${Math.min(0.15 + this.uploadProgress / 100, 1)}), rgba(147, 197, 253, ${Math.min(0.2 + this.uploadProgress / 100, 1)}))`,
            }, class: "absolute left-0 z-10 top-0 h-full transition-[width] duration-700 ease-out" }))) : (h("div", { class: "text-[16px] text-[#3071a9] font-semibold" }, this.locale.processing)))), ((_k = this.item) === null || _k === void 0 ? void 0 : _k.showDocumentUploader) && (h("div", { key: '0f7d7ff149c98fad673676453214e46690f73dcb', class: "flex mb-[16px] w-full flex-col" }, h("input", { key: '67a11a161799a76947c1f202afee0dca017d134b', hidden: true, type: "file", class: "document-uploader", disabled: this.isLoading, accept: "image/*,application/pdf", onChange: this.onFileUploaderChange, multiple: this.uploadMultipleDocuments, "data-max-size": this.maximumDocumentFileSizeInMb * 1024 * 1024 }), h("div", { key: '69d2eeed08a3e438167d7abcac0c0ebd561a9f5e', onClick: this.onDocumentButtonClicked, class: cn('overflow-hidden flex items-center w-fit mx-auto cursor-pointer gap-[16px] ps-[8px] h-[32px] transition duration-300 text-white bg-[#275e8f] active:bg-[#223f57] hover:bg-[#3071a9] rounded-[5px]', { 'pointer-events-none bg-[#d5d5d5] cursor-default': disableInputs }) }, h("div", { key: '99d1f4d9e8218b504afa671d148edb770fa5bc65', title: this.uploadMultipleDocuments ? this.locale.uploadMultipleDocument : this.locale.uploadSingleDocument, class: "max-w-[200px] truncate whitespace-nowrap overflow-hidden text-ellipsis" }, this.uploadMultipleDocuments ? this.locale.uploadMultipleDocument : this.locale.uploadSingleDocument, ((_l = this === null || this === void 0 ? void 0 : this.item) === null || _l === void 0 ? void 0 : _l.documentUploaderIsRequired) && !((_m = this.inputs) === null || _m === void 0 ? void 0 : _m.documents.length) && (h("span", { key: '62980124a5c71834fbce70a9f84b77750c8d7617', class: cn('ps-[4px] text-red-500', { 'text-white': disableInputs }) }, "*"))), h("button", { key: '621f3062f8d0f2df57a2fd57d01f67f516cebd9c', onClick: this.clearFile, class: cn('overflow-hidden transition duration-300 hover:bg-red-600 relative cursor-pointer flex items-center justify-center size-[32px]', {
                'pointer-events-none cursor-default': !((_o = this.inputs) === null || _o === void 0 ? void 0 : _o.documents.length),
            }) }, h(AttachIcon, { key: '91448d2d3b784e700337c731ef08cd5ee8ec3545', class: cn('size-[24px] absolute transition duration-500', { '-translate-y-[32px]': !!((_p = this.inputs) === null || _p === void 0 ? void 0 : _p.documents.length) }) }), h(AddIcon, { key: '317553061ca86c0dcebb550957f8144b85897681', class: cn('size-[24px] rotate-[45deg] absolute transition translate-y-[32px] duration-500', { 'translate-y-0': !!((_q = this.inputs) === null || _q === void 0 ? void 0 : _q.documents.length) }) }))), h("flexible-container", { key: '0fe92e873f6bf7669f13b7a041213355272df442', isOpened: !!((_s = (_r = this.errors) === null || _r === void 0 ? void 0 : _r.documents) === null || _s === void 0 ? void 0 : _s.show) }, h("div", { key: 'e387cf32127437be4b85629f2235ba81fac3c6d9', class: "text-red-700 w-fit mx-auto pt-[8px]" }, ((_u = (_t = this.errors) === null || _t === void 0 ? void 0 : _t.documents) === null || _u === void 0 ? void 0 : _u.text) === 'documentLimitError'
            ? this.locale.documentLimitError + `${this.maximumDocumentFileSizeInMb}Mb`
            : this.locale.documentRequiredError || this.locale.sharedLocales.errors.wildCard)), h("flexible-container", { key: '628e57099a45ff6c648b91d560eba6ec690766af', isOpened: !!((_w = (_v = this.inputs) === null || _v === void 0 ? void 0 : _v.documents) === null || _w === void 0 ? void 0 : _w.length), containerClasses: "" }, h("div", { key: 'f5b6c14a56ad5345864aa2ca8f8ec28069442b8c', class: "flex w-full pt-[16px] flex-wrap justify-center gap-[16px]" }, (_y = (_x = this.inputs) === null || _x === void 0 ? void 0 : _x.documents) === null || _y === void 0 ? void 0 : _y.map((doc, idx) => {
            var _a;
            return (h("div", { class: cn('flex relative overflow-hidden max-w-[400px] items-center justify-between gap-[20px] bg-slate-400 rounded-[4px] text-white text-[14px]', {
                    'pointer-events-none bg-[#d5d5d5] cursor-default': disableInputs,
                }) }, h("span", { title: doc.name, class: "truncate ps-[16px] py-[8px]" }, doc.name), h("button", { disabled: disableInputs, onClick: () => this.clearFile(idx), class: cn('overflow-hidden transition duration-300 hover:bg-red-600 relative cursor-pointer flex items-center justify-center size-[32px]', {
                    'pointer-events-none cursor-default': !((_a = this.inputs) === null || _a === void 0 ? void 0 : _a.documents.length),
                }) }, h(AddIcon, { class: "size-[24px] rotate-[45deg]" }))));
        }))))), isQRScannerForm && (h("div", { key: '375abba2793426ae52b32c0141f00d332bf2ac52', class: "overflow-hidden w-full" }, h("input", { key: '7436124a915cf6e25ca0e969691d47d1f0994a26', dir: "ltr", autofocus: true, type: "text", spellcheck: "false", autocomplete: "off", disabled: disableInputs, onBlur: this.focusInputs, onKeyDown: this.onKeyDown, value: (_z = this.inputs) === null || _z === void 0 ? void 0 : _z.qrCode, placeholder: this.locale.qrCode, onInput: event => this.setInputValue('qrCode', event.target.value), class: "bg-transparent flex-1 outline-none border-b border-[#ddd] text-[#424242] w-full text-center p-[7px] text-[16px] transition-all duration-300 focus:border-[#3071a9] focus:scale-110 focus:-translate-y-[8px]" }))), !isQRScannerForm && (h("div", { key: '60036624de049b92960934151313d9b434e7a804', class: "flex w-full overflow-hidden gap-[75px]" }, h("input", { key: 'bf4106a5ba29dee60e3b91ed47eadb285aeb74b6', dir: "ltr", autofocus: true, type: "text", spellcheck: "false", autocomplete: "off", disabled: disableInputs, onKeyDown: this.onKeyDown, value: (_0 = this.inputs) === null || _0 === void 0 ? void 0 : _0.invoice, placeholder: this.locale.invoice, onInput: event => this.setInputValue('invoice', event.target.value), class: "bg-transparent flex-1 outline-none border-b border-[#ddd] text-[#424242] w-full text-center p-[7px] text-[16px] transition-all duration-300 focus:border-[#3071a9] focus:scale-110 focus:-translate-y-[8px]" }), h("input", { key: '3c82270341197a6eb8f63f2f6b66d423b9d4fad4', dir: "ltr", type: "text", spellcheck: "false", autocomplete: "off", disabled: disableInputs, onKeyDown: this.onKeyDown, value: (_1 = this.inputs) === null || _1 === void 0 ? void 0 : _1.jobNumber, placeholder: this.locale.jobNumber, onInput: event => this.setInputValue('jobNumber', event.target.value), class: "bg-transparent flex-1 outline-none border-b border-[#ddd] text-[#424242] w-full text-center p-[7px] text-[16px] transition-all duration-300 focus:border-[#3071a9] focus:scale-110 focus:-translate-y-[8px]" }))), h("button", { key: '2c715224ce746e3e02afd14b8dcd293ed954f7d3', onClick: this.submit, disabled: !isFormValid || disableInputs, class: "text-[22px] transition duration-500 hover: mt-[16px] disabled:opacity-50 text-white w-full max-w-[250px] px-[8px] h-[40px] enabled:hover:scale-110 flex gap-[8px] border rounded-[4px] enabled:shadow items-center justify-center border-[#27ae60] bg-[#32b267] enabled:hover:border-[#27ae5fc1] enabled:hover:bg-[#32b267c7]" }, h(ActivationIcon, { key: '9e782a666f34d4250a69649fe66f98bd2d28ac87', class: "size-[30px] [&_circle]:fill-white stroke-white text-red-300" }), h("span", { key: 'af691122a32e4d3127c259b8120de67d44149bb8' }, this.locale.claim))), h("div", { key: '4d5bc8ad8d5520ed45057dc1e83b00a36b59627c', class: "shrink-0 h-[16px]" })))));
    }
    static get is() { return "vehicle-item-claim-form"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["vehicle-item-claim-form.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["vehicle-item-claim-form.css"]
        };
    }
    static get properties() {
        return {
            "vin": {
                "type": "string",
                "attribute": "vin",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "item": {
                "type": "unknown",
                "attribute": "item",
                "mutable": false,
                "complexType": {
                    "original": "VehicleServiceItemDTO",
                    "resolved": "{ group: VehicleServiceItemGroup; showDocumentUploader: boolean; warnings?: VehicleItemWarning[]; printUrl?: string; documentUploaderIsRequired: boolean; name: string; description: string; title: string; image: string; type: string; typeEnum: \"Free\" | \"Paid\"; activatedAt: string; expiresAt?: string; status: string; statusEnum: \"Pending\" | \"Processed\" | \"Expired\" | \"Cancelled\" | \"ActivationRequired\"; campaignID?: number; campaignUniqueReference: string; packageCode: string; cost?: number; claimDate?: string; modelCostID?: number; serviceItemID: string; paidServiceInvoiceLineID?: string; companyName: string; invoiceNumber: string; jobNumber: string; maximumMileage?: number; claimable: boolean; claimingMethodEnum: \"ClaimByScanningQRCode\" | \"ClaimByEnteringInvoiceAndJobNumber\"; vehicleInspectionID: string; vehicleInspectionTypeID: string; campaignVinEntryID: string; signature: string; signatureExpiry: string; }",
                    "references": {
                        "VehicleServiceItemDTO": {
                            "location": "import",
                            "path": "~types/generated/vehicle-lookup/vehicle-service-item-dto",
                            "id": "src/global/types/generated/vehicle-lookup/vehicle-service-item-dto.ts::VehicleServiceItemDTO"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "maximumDocumentFileSizeInMb": {
                "type": "number",
                "attribute": "maximum-document-file-size-in-mb",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "uploadMultipleDocuments": {
                "type": "boolean",
                "attribute": "upload-multiple-documents",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "true"
            },
            "loadingStateChange": {
                "type": "unknown",
                "attribute": "loading-state-change",
                "mutable": false,
                "complexType": {
                    "original": "(isLoading: boolean) => void",
                    "resolved": "(isLoading: boolean) => void",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "locale": {
                "type": "unknown",
                "attribute": "locale",
                "mutable": false,
                "complexType": {
                    "original": "{ sharedLocales: SharedLocales } & ClaimFormType",
                    "resolved": "{ sharedLocales: { lang?: string; direction?: string; language?: string; noData?: string; errors?: { noBaseUrl?: string; invalidVin?: string; vinNumberRequired?: string; partNumberRequired?: string; wrongResponseFormat?: string; noPartsFound?: string; noServiceAvailable?: string; wrongFormStructure?: string; wildCard?: string; requestFailedPleaseTryAgainLater?: string; }; }; } & { name?: string; print?: string; expand?: string; uploadSingleDocument?: string; uploadMultipleDocument?: string; serviceType?: string; documentLimitError?: string; documentRequiredError?: string; activationDate?: string; expireDate?: string; packageCode?: string; scanTheVoucher?: string; qrCode?: string; processing?: string; enterServiceInfo?: string; invoice?: string; jobNumber?: string; claim?: string; }",
                    "references": {
                        "SharedLocales": {
                            "location": "import",
                            "path": "~features/multi-lingual",
                            "id": "src/features/multi-lingual/index.ts::SharedLocales"
                        },
                        "ClaimFormType": {
                            "location": "import",
                            "path": "~locales/vehicleLookup/claimableItems/type",
                            "id": "src/locales/vehicleLookup/claimableItems/type.ts::ClaimFormType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "handleClaiming": {
                "type": "unknown",
                "attribute": "handle-claiming",
                "mutable": false,
                "complexType": {
                    "original": "(documents: File[], payload: ItemClaimDTO) => Promise<void>",
                    "resolved": "(documents: File[], payload: ItemClaimDTO) => Promise<void>",
                    "references": {
                        "File": {
                            "location": "global",
                            "id": "global::File"
                        },
                        "ItemClaimDTO": {
                            "location": "import",
                            "path": "../../global/types/generated/vehicle-lookup/item-claim-dto",
                            "id": "src/global/types/generated/vehicle-lookup/item-claim-dto.ts::ItemClaimDTO"
                        },
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            }
        };
    }
    static get states() {
        return {
            "expandedImage": {},
            "uploadProgress": {},
            "isOpened": {},
            "isLoading": {},
            "confirmationStates": {},
            "errors": {},
            "inputs": {}
        };
    }
    static get methods() {
        return {
            "open": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "KeyboardEvent": {
                            "location": "global",
                            "id": "global::KeyboardEvent"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "",
                    "tags": []
                }
            },
            "close": {
                "complexType": {
                    "signature": "(forceClose?: boolean) => Promise<void>",
                    "parameters": [{
                            "name": "forceClose",
                            "type": "boolean",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "",
                    "tags": []
                }
            },
            "setFileUploadProgression": {
                "complexType": {
                    "signature": "(uploadPercentage: number) => Promise<void>",
                    "parameters": [{
                            "name": "uploadPercentage",
                            "type": "number",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "expandedImage",
                "methodName": "onImageViewerToggles"
            }, {
                "propName": "isLoading",
                "methodName": "onIsLoadingChange"
            }];
    }
}
