adp-web-components 0.0.89 → 0.0.91

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

@@ -0,0 +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}.absolute{position:absolute}.z-10{z-index:10}.box-border{box-sizing:border-box}.block{display:block}.border-\[4px\]{border-width:4px}.border-\[\#3071a9\]{--tw-border-opacity:1;border-color:rgb(48 113 169/var(--tw-border-opacity,1))}:host{all:initial!important;display:block}*{font-family:Arial}.lds-ripple{--tw-border-opacity:1;animation:lds-ripple 1s cubic-bezier(0,.2,.8,1) infinite;border-color:rgb(48 113 169/var(--tw-border-opacity,1));border-radius:9999px;border-width:4px;box-sizing:border-box;position:absolute;z-index:10}.lds-ripple:nth-child(2){animation-delay:-.5s}@keyframes lds-ripple{0%{height:8px;opacity:0;width:8px}4.9%{height:8px;opacity:0;width:8px}5%{height:8px;opacity:1;width:8px}to{height:100%;opacity:0;width:100%}}.static{position:static}.flex{display:flex}.h-\[200px\]{height:200px}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.text-\[26px\]{font-size:26px}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.pointer-events-none{pointer-events:none}.relative{position:relative}.mx-auto{margin-left:auto;margin-right:auto}.size-full{height:100%;width:100%}.h-\[150px\]{height:150px}.w-\[84px\]{width:84px}.w-fit{width:fit-content}.max-w-full{max-width:100%}.shrink-0{flex-shrink:0}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.gap-\[16px\]{gap:16px}.gap-\[4px\]{gap:4px}.gap-\[8px\]{gap:8px}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.bg-black\/40{background-color:rgba(0,0,0,.4)}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.p-\[12px\]{padding:12px}.p-\[6px\]{padding:6px}.px-\[24px\]{padding-left:24px;padding-right:24px}.py-\[16px\]{padding-bottom:16px;padding-top:16px}.text-center{text-align:center}.font-semibold{font-weight:600}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/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)}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.ring-0{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.hover\:opacity-100:hover{opacity:1}.\[\&_div\]\:hover\:\!opacity-100:hover div{opacity:1!important}.\[\&_img\]\:hover\:shadow-lg:hover img{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.my-2{margin-bottom:.5rem;margin-top:.5rem}.hidden{display:none}.grow{flex-grow:1}.items-stretch{align-items:stretch}.overflow-auto{overflow:auto}.p-\[16px\]{padding:16px}@media (min-width:768px){.md\:justify-between{justify-content:space-between}}.\[\&\>div\]\:grow>div{flex-grow:1}.mt-\[32px\]{margin-top:32px}.h-\[25px\]{height:25px}.h-\[50px\]{height:50px}.h-\[8px\]{height:8px}.bg-\[\#f6f6f6\]{--tw-bg-opacity:1;background-color:rgb(246 246 246/var(--tw-bg-opacity,1))}.px-\[16px\]{padding-left:16px;padding-right:16px}.pt-\[16px\]{padding-top:16px}.pt-\[40px\]{padding-top:40px}.text-\[18px\]{font-size:18px}.font-bold{font-weight:700}.success-card{background-color:#d0e7de;border-color:#a2d0bb;color:#0b3521}.reject-card{background-color:#f7d7d8;border-color:#f2aeb5;color:#58151c}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pointer-events-auto{pointer-events:auto}.fixed{position:fixed}.-left-full{left:-100%}.left-0{left:0}.left-full{left:100%}.right-\[50px\]{right:50px}.top-0{top:0}.z-20{z-index:20}.z-\[999\]{z-index:999}.my-auto{margin-bottom:auto;margin-top:auto}.mb-\[16px\]{margin-bottom:16px}.ms-\[50px\]{margin-inline-start:50px}.mt-\[16px\]{margin-top:16px}.mt-\[20px\]{margin-top:20px}.mt-\[4px\]{margin-top:4px}.mt-\[50px\]{margin-top:50px}.size-\[100px\]{height:100px;width:100px}.size-\[18px\]{height:18px;width:18px}.size-\[20px\]{height:20px;width:20px}.size-\[24px\]{height:24px;width:24px}.size-\[25px\]{height:25px;width:25px}.size-\[30px\]{height:30px;width:30px}.size-\[32px\]{height:32px;width:32px}.size-\[35px\]{height:35px;width:35px}.h-\[100dvh\]{height:100dvh}.h-\[140px\]{height:140px}.h-\[16px\]{height:16px}.h-\[30px\]{height:30px}.h-\[32px\]{height:32px}.h-\[36px\]{height:36px}.h-\[40px\]{height:40px}.h-fit{height:fit-content}.h-full{height:100%}.w-\[200px\]{width:200px}.w-\[300px\]{width:300px}.min-w-\[100dvw\]{min-width:100dvw}.max-w-\[200px\]{max-width:200px}.max-w-\[250px\]{max-width:250px}.max-w-\[400px\]{max-width:400px}.flex-1{flex:1 1 0%}.-translate-y-\[32px\]{--tw-translate-y:-32px}.-translate-y-\[32px\],.translate-y-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-0{--tw-translate-y:0px}.translate-y-\[32px\]{--tw-translate-y:32px}.rotate-\[45deg\],.translate-y-\[32px\]{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))}.rotate-\[45deg\]{--tw-rotate:45deg}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.scale-100,.scale-\[110\%\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-\[110\%\]{--tw-scale-x:110%;--tw-scale-y:110%}.cursor-default{cursor:default}.select-none{user-select:none}.list-disc{list-style-type:disc}.justify-between{justify-content:space-between}.gap-\[10px\]{gap:10px}.gap-\[12px\]{gap:12px}.gap-\[20px\]{gap:20px}.gap-\[32px\]{gap:32px}.gap-\[75px\]{gap:75px}.truncate{overflow:hidden;white-space:nowrap}.text-ellipsis,.truncate{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-\[4px\]{border-radius:4px}.rounded-\[5px\]{border-radius:5px}.rounded-\[6px\]{border-radius:6px}.rounded-\[8px\]{border-radius:8px}.rounded-full{border-radius:9999px}.border-\[2px\]{border-width:2px}.border-\[\#27ae60\]{--tw-border-opacity:1;border-color:rgb(39 174 96/var(--tw-border-opacity,1))}.border-\[\#dcdcdc\]{--tw-border-opacity:1;border-color:rgb(220 220 220/var(--tw-border-opacity,1))}.border-\[\#ddd\]{--tw-border-opacity:1;border-color:rgb(221 221 221/var(--tw-border-opacity,1))}.border-\[\#f4f4f4\]{--tw-border-opacity:1;border-color:rgb(244 244 244/var(--tw-border-opacity,1))}.border-\[\#ff9100\]{--tw-border-opacity:1;border-color:rgb(255 145 0/var(--tw-border-opacity,1))}.border-\[\#ffb74d\]{--tw-border-opacity:1;border-color:rgb(255 183 77/var(--tw-border-opacity,1))}.border-\[\#ffd28f\]{--tw-border-opacity:1;border-color:rgb(255 210 143/var(--tw-border-opacity,1))}.bg-\[\#275e8f\]{--tw-bg-opacity:1;background-color:rgb(39 94 143/var(--tw-bg-opacity,1))}.bg-\[\#32b267\]{--tw-bg-opacity:1;background-color:rgb(50 178 103/var(--tw-bg-opacity,1))}.bg-\[\#d5d5d5\]{--tw-bg-opacity:1;background-color:rgb(213 213 213/var(--tw-bg-opacity,1))}.bg-\[\#f4f4f4\]{--tw-bg-opacity:1;background-color:rgb(244 244 244/var(--tw-bg-opacity,1))}.bg-\[\#ff91001a\]{background-color:#ff91001a}.bg-slate-400{--tw-bg-opacity:1;background-color:rgb(148 163 184/var(--tw-bg-opacity,1))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.fill-\[\#3071a9\]{fill:#3071a9}.stroke-white{stroke:#fff}.stroke-\[1\.5px\]{stroke-width:1.5px}.p-\[22px\]{padding:22px}.p-\[50px\]{padding:50px}.p-\[7px\]{padding:7px}.px-\[22px\]{padding-left:22px;padding-right:22px}.px-\[8px\]{padding-left:8px;padding-right:8px}.py-\[8px\]{padding-bottom:8px;padding-top:8px}.ps-\[16px\]{padding-inline-start:16px}.ps-\[4px\]{padding-inline-start:4px}.ps-\[8px\]{padding-inline-start:8px}.pt-\[8px\]{padding-top:8px}.text-\[14px\]{font-size:14px}.text-\[16px\]{font-size:16px}.text-\[22px\]{font-size:22px}.text-\[\#3071a9\]{--tw-text-opacity:1;color:rgb(48 113 169/var(--tw-text-opacity,1))}.text-\[\#424242\]{--tw-text-opacity:1;color:rgb(66 66 66/var(--tw-text-opacity,1))}.text-\[\#663c00\]{--tw-text-opacity:1;color:rgb(102 60 0/var(--tw-text-opacity,1))}.text-\[\#ff9100\]{--tw-text-opacity:1;color:rgb(255 145 0/var(--tw-text-opacity,1))}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.text-red-300{--tw-text-opacity:1;color:rgb(252 165 165/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-red-700{--tw-text-opacity:1;color:rgb(185 28 28/var(--tw-text-opacity,1))}.text-transparent{color:transparent}.opacity-100{opacity:1}.opacity-50{opacity:.5}.shadow,.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-\[width\]{transition-duration:.15s;transition-property:width;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-500{transition-duration:.5s}.duration-700{transition-duration:.7s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.hover\:bg-\[\#3071a9\]:hover{--tw-bg-opacity:1;background-color:rgb(48 113 169/var(--tw-bg-opacity,1))}.hover\:bg-\[\#fff8e1\]:hover{--tw-bg-opacity:1;background-color:rgb(255 248 225/var(--tw-bg-opacity,1))}.hover\:bg-red-600:hover{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}.focus\:-translate-y-\[8px\]:focus{--tw-translate-y:-8px}.focus\:-translate-y-\[8px\]:focus,.focus\:scale-110:focus{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))}.focus\:scale-110:focus{--tw-scale-x:1.1;--tw-scale-y:1.1}.focus\:border-\[\#3071a9\]:focus{--tw-border-opacity:1;border-color:rgb(48 113 169/var(--tw-border-opacity,1))}.active\:bg-\[\#223f57\]:active{--tw-bg-opacity:1;background-color:rgb(34 63 87/var(--tw-bg-opacity,1))}.enabled\:shadow:enabled{--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)}.enabled\:hover\:rotate-\[135deg\]:hover:enabled{--tw-rotate:135deg}.enabled\:hover\:rotate-\[135deg\]:hover:enabled,.enabled\:hover\:scale-110:hover:enabled{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))}.enabled\:hover\:scale-110:hover:enabled{--tw-scale-x:1.1;--tw-scale-y:1.1}.enabled\:hover\:scale-\[150\%\]:hover:enabled{--tw-scale-x:150%;--tw-scale-y:150%;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))}.enabled\:hover\:border-\[\#27ae5fc1\]:hover:enabled{border-color:#27ae5fc1}.enabled\:hover\:bg-\[\#32b267c7\]:hover:enabled{background-color:#32b267c7}.enabled\:hover\:bg-red-200:hover:enabled{--tw-bg-opacity:1;background-color:rgb(254 202 202/var(--tw-bg-opacity,1))}.enabled\:hover\:text-red-400:hover:enabled{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.disabled\:opacity-50:disabled{opacity:.5}.peer:checked~.peer-checked\:border-\[\#ff9100\]{--tw-border-opacity:1;border-color:rgb(255 145 0/var(--tw-border-opacity,1))}.peer:checked~.peer-checked\:bg-\[\#ff9100\]{--tw-bg-opacity:1;background-color:rgb(255 145 0/var(--tw-bg-opacity,1))}.peer:checked~.peer-checked\:text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.\[\&_circle\]\:fill-white circle{fill:#fff}.\[\&_div\]\:min-w-\[200px\] div{min-width:200px}.bottom-\[40px\]{bottom:40px}.left-1\/2{left:50%}.left-\[30px\]{left:30px}.ml-\[-125px\]{margin-left:-125px}.box-content{box-sizing:content-box}.size-\[90px\]{height:90px;width:90px}.h-10{height:2.5rem}.h-\[320px\]{height:320px}.w-1\/2{width:50%}.w-\[150\%\]{width:150%}.w-\[90\%\]{width:90%}.w-\[calc\(100\%-0px\)\]{width:100%}.w-\[calc\(100\%-60px\)\]{width:calc(100% - 60px)}.min-w-full{min-width:100%}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.translate-y-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-\[-50\%\]{--tw-translate-y:-50%}.translate-y-\[-50\%\],.translate-y-\[-5px\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-\[-5px\]{--tw-translate-y:-5px}.scale-100,.scale-\[70\%\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-\[70\%\]{--tw-scale-x:70%;--tw-scale-y:70%}.resize{resize:both}.gap-\[250px\]{gap:250px}.overflow-x-hidden{overflow-x:hidden}.overflow-y-hidden{overflow-y:hidden}.overflow-x-scroll{overflow-x:scroll}.border-\[\#faebcc\]{--tw-border-opacity:1;border-color:rgb(250 235 204/var(--tw-border-opacity,1))}.bg-\[\#1a1a1a\]{--tw-bg-opacity:1;background-color:rgb(26 26 26/var(--tw-bg-opacity,1))}.bg-\[\#fcf8e3\]{--tw-bg-opacity:1;background-color:rgb(252 248 227/var(--tw-bg-opacity,1))}.bg-\[linear-gradient\(to_bottom\2c _\#428bca_0\%\2c _\#3071a9_100\%\)\]{background-image:linear-gradient(180deg,#428bca,#3071a9)}.p-\[25px\]{padding:25px}.px-\[30px\]{padding-left:30px;padding-right:30px}.text-\[\#8a6d3b\]{--tw-text-opacity:1;color:rgb(138 109 59/var(--tw-text-opacity,1))}.text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1))}.duration-200{transition-duration:.2s}.\[\&_\*\]\:shrink-0 *{flex-shrink:0}.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))}

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

@@ -0,0 +1,542 @@
+/*!
+ * Built by ShiftSoftware
+ * Copyright (c)
+ */
+import cn from "../../global/lib/cn";
+import { Host, h } from "@stencil/core";
+import { MaterialCard } from "../components/material-card";
+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";
+export class VehicleItemClaimForm {
+    constructor() {
+        this.uploadMultipleDocuments = true;
+        this.canceledItems = [];
+        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;
+            if (this.handleClaiming)
+                await this.handleClaiming({
+                    qrCode: (_e = this.inputs) === null || _e === void 0 ? void 0 : _e.qrCode,
+                    invoice: (_f = this.inputs) === null || _f === void 0 ? void 0 : _f.invoice,
+                    documents: (_g = this.inputs) === null || _g === void 0 ? void 0 : _g.documents,
+                    jobNumber: (_h = this.inputs) === null || _h === void 0 ? void 0 : _h.jobNumber,
+                });
+            this.close(true);
+        };
+        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, _c;
+            if (!!((_a = this.canceledItems) === null || _a === void 0 ? void 0 : _a.length) && !((_b = this.confirmationStates) === null || _b === void 0 ? void 0 : _b.canceledItems))
+                return false;
+            if (!!this.unInvoicedByBrokerName && !((_c = this.confirmationStates) === null || _c === void 0 ? void 0 : _c.unInvoicedByBrokerName))
+                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.canceledItems = [];
+            this.confirmationStates = {};
+            this.unInvoicedByBrokerName = null;
+        };
+        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();
+        };
+    }
+    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;
+    }
+    // ====== End Component Logic
+    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;
+        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: '01755a3288d30acda3d401a2c7b16fc1792f3b5d' }, h("div", { key: '951904bb433ec341d5ee5ae1cdbc5f72525ec32c', 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: 'fc390c01240c3325b320ca92158fe85c0b846d10', 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: 'a2cbdb917e0b1f716f34100dbe0405278cf12e9a', class: "stroke-[1.5px]" })), h("div", { key: 'b2ba37b199d2b8d04d59fc7208445c0e38166ee8', class: "flex flex-col h-full gap-[32px] justify-between" }, h("div", { key: '21d8788b5f2b24c46e271302ed6184efe00199f3', class: "flex mt-[50px] flex-col shrink-0 gap-[20px]" }, h("div", { key: '6cb912223bf83dc13dbd850e80993ca4ecd2bd15', class: "border overflow-hidden rounded-[6px] border-[#dcdcdc] box-border" }, h("div", { key: 'acc7df86b6aba9a47aa686a4855e9250b4333840', class: "text-[16px] h-[50px] font-semibold flex items-center justify-center bg-[#f6f6f6]" }, this.vin), h("div", { key: '6299ddf15e3681fb947070ffc527ad822a2050dc', class: "overflow-hidden flex p-[22px] [&_div]:min-w-[200px] gap-[32px] flex-wrap justify-center" }, h(MaterialCard, { key: '6cf096a18efc47796799312a7787993309031a52', title: this.locale.serviceType }, (_b = this.item) === null || _b === void 0 ? void 0 : _b.type), h(MaterialCard, { key: 'b7935f543fff167a6f352b2b30630d51f641c92f', title: this.locale.name }, (_c = this.item) === null || _c === void 0 ? void 0 : _c.name), h(MaterialCard, { key: 'ce4b153a2c2fe003cbad078563ed6a3396fccc20', title: this.locale.activationDate }, (_d = this.item) === null || _d === void 0 ? void 0 : _d.activatedAt), h(MaterialCard, { key: '6f4536a7c8cec5c87a357a0f575c403c172a81de', title: this.locale.expireDate }, (_e = this.item) === null || _e === void 0 ? void 0 : _e.expiresAt), h(MaterialCard, { key: '939125c9b3675beceb5c816dbce1fadd5d074365', title: this.locale.packageCode }, (_f = this.item) === null || _f === void 0 ? void 0 : _f.packageCode))), h("div", { key: '730f5df5253b82845e1453b4c2293422417093a7', class: cn('border overflow-hidden rounded-[6px] border-[#ff9100] box-border', { hidden: !this.canceledItems.length }) }, h("div", { key: 'd7d8f56e654003700a8ae1a678917cf1a97f098d', class: "text-[16px] px-[22px] h-[50px] font-semibold flex items-center gap-[8px] bg-[#ff91001a]" }, h(AlertIcon, { key: '65560a937f3eaf872af618732587b728a7ff3c48', class: "size-[25px] text-[#ff9100]" }), " ", this.locale.warning), h("div", { key: 'ef846cbd6805246dea3b4f779b61ef78b15f3522', class: "p-[16px]" }, h("div", { key: 'b656831212615c0a954542d7e092d9730cdaa66f', class: "text-[16px]" }, this.locale.skipServicesWarning), h("ul", { key: '7064e446d61785b3e3027364327718a0255afa10', class: "list-disc mt-[16px]" }, this.canceledItems.map(({ name }) => (h("li", { class: "ms-[50px] text-[16px] mt-[4px]" }, name)))), h("label", { key: '131afb6bef974e6f3290669c844b7081497eb0e8', 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", { key: '88a3fab854bd79fa08f431a274e45e3f1f4affc6', type: "checkbox", class: "peer sr-only", disabled: this.isLoading, checked: !!this.confirmationStates.canceledItems, onChange: this.onConfirmCheckboxChange('canceledItems') }), h("div", { key: '0ad2d733c7dfe6c3b58e8e87b9046b73d90880f8', 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, { key: '282c7c217770df254d7d038ae75ab5b772fb8b6d', class: "size-[18px]" })), this.locale.confirmSkipServices))), h("div", { key: 'ce1acea29c6d44f9f9bf5c5a42586ab27c40a9bc', class: cn('border overflow-hidden rounded-[6px] border-[#ff9100] box-border', { hidden: !this.unInvoicedByBrokerName }) }, h("div", { key: '864cc25efe5c5fd5ebb5da9f7353b9df909310d1', class: "text-[16px] px-[22px] h-[50px] font-semibold flex items-center gap-[8px] bg-[#ff91001a]" }, h(AlertIcon, { key: '6e5564f54f14ea31cee1c10ac053519a07acacb3', class: "size-[25px] text-[#ff9100]" }), " ", this.locale.warning), h("div", { key: '6f6919e0b57e31bf73944090806ddc5854ba9131', class: "p-[16px]" }, h("div", { key: '648723969cd87d409d2999d9cd0bbc7b8b8509b0', class: "flex gap-[8px] text-[16px]" }, this.locale.notInvoiced, " ", h("b", { key: 'e9976ce87542b7978f5637b19a0ac272489c44ba' }, this.unInvoicedByBrokerName)), h("label", { key: 'cfc7e6c41dc1972ae5494106f1cfc364f9cfc220', 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", { key: '91a3a038e244c2b0056a6b1cac6a26d27871d3e0', type: "checkbox", class: "peer sr-only", disabled: this.isLoading, checked: !!this.confirmationStates.unInvoicedByBrokerName, onChange: this.onConfirmCheckboxChange('unInvoicedByBrokerName') }), h("div", { key: '044a72bd401c618d1d3406b3e7c45a39b381a686', 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, { key: 'c2c094f7542c327715ea17a65811089afd4ea2ee', class: "size-[18px]" })), this.locale.confirmNotInvoiced)))), h("div", { key: '3a0f0c12721a0acaf5d6d987334d29f2682b37aa', 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: '8f7bc1953165a1c660096a847c3395c855a64410', class: "relative w-[200px] h-[140px]" }, h("div", { key: '32682e831575ac66a0a058c8df3487f8abf942bf', 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: '5236d94682b282f329da7655454f235485854043', class: "size-[100px] fill-[#3071a9] text-[#3071a9]" }), h("div", { key: '7cd1674a6d77297b0394b6c87dda25f013f6b7c3', class: "text-[16px] text-[#3071a9] font-semibold" }, isQRScannerForm ? this.locale.scanTheVoucher : this.locale.enterServiceInfo)), h("div", { key: 'fe848f07f7502845a37c17fe7899de772cc89b66', 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: '566d2561ca96694049629588688b5e468519b6ae', class: cn('relative size-[100px] flex items-center justify-center') }, h("div", { key: '8ddaaa926509f5f4253395bb904d1704d53b97da', class: "lds-ripple" }), h("div", { key: 'd30c4c54957fed290a7d654aa15f05e17f1edfba', class: "lds-ripple" })), ((_g = this.item) === null || _g === void 0 ? void 0 : _g.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)))), ((_h = this.item) === null || _h === void 0 ? void 0 : _h.showDocumentUploader) && (h("div", { key: 'bc2c9954e1ebd3e9a21767538b1a6a3f22a48d97', class: "flex mb-[16px] w-full flex-col" }, h("input", { key: '5b74ca55cdd9a876f6ada2c98b77d594ef27cbfc', 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: '1b70aa2d0f0f6318ed9f0313ec549b8f165be927', 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: '6702769b71de05c9ac02b3c732422f19c9c12e28', 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, ((_j = this === null || this === void 0 ? void 0 : this.item) === null || _j === void 0 ? void 0 : _j.documentUploaderIsRequired) && !((_k = this.inputs) === null || _k === void 0 ? void 0 : _k.documents.length) && (h("span", { key: 'e8c9622b2b33609877c60cd753b1968c5b1d247e', class: cn('ps-[4px] text-red-500', { 'text-white': disableInputs }) }, "*"))), h("button", { key: 'cd72045d2940cf27d399cf162d92e4da25ec623a', 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': !((_l = this.inputs) === null || _l === void 0 ? void 0 : _l.documents.length),
+            }) }, h(AttachIcon, { key: '83cd82664420061719092cba423512a0d6446299', class: cn('size-[24px] absolute transition duration-500', { '-translate-y-[32px]': !!((_m = this.inputs) === null || _m === void 0 ? void 0 : _m.documents.length) }) }), h(AddIcon, { key: 'e3c14be569ee4a36b5ccb7611b73d271b7a5f018', class: cn('size-[24px] rotate-[45deg] absolute transition translate-y-[32px] duration-500', { 'translate-y-0': !!((_o = this.inputs) === null || _o === void 0 ? void 0 : _o.documents.length) }) }))), h("flexible-container", { key: 'a50ff7ac9c92e8b55ee286795ce39018b2ebf37a', isOpened: !!((_q = (_p = this.errors) === null || _p === void 0 ? void 0 : _p.documents) === null || _q === void 0 ? void 0 : _q.show) }, h("div", { key: '48b5f136f9d1ae3b9487b01d2bdafed1e0816be8', class: "text-red-700 w-fit mx-auto pt-[8px]" }, ((_s = (_r = this.errors) === null || _r === void 0 ? void 0 : _r.documents) === null || _s === void 0 ? void 0 : _s.text) === 'documentLimitError'
+            ? this.locale.documentLimitError + `${this.maximumDocumentFileSizeInMb}Mb`
+            : this.locale.documentRequiredError || this.locale.sharedLocales.errors.wildCard)), h("flexible-container", { key: '38e81cf16955af66a3cb1bbced4850c2ec895384', isOpened: !!((_u = (_t = this.inputs) === null || _t === void 0 ? void 0 : _t.documents) === null || _u === void 0 ? void 0 : _u.length), containerClasses: "" }, h("div", { key: '880c1c7f6a234ffbd37c7681ad70d2f5db94dcec', class: "flex w-full pt-[16px] flex-wrap justify-center gap-[16px]" }, (_w = (_v = this.inputs) === null || _v === void 0 ? void 0 : _v.documents) === null || _w === void 0 ? void 0 : _w.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: '081764f7cc6bd8bdc3549497d2060cff07e78933', class: "overflow-hidden w-full" }, h("input", { key: 'cc451df06f591279484845f182d25f58df938d3d', dir: "ltr", autofocus: true, type: "text", spellcheck: "false", autocomplete: "off", disabled: disableInputs, onBlur: this.focusInputs, onKeyDown: this.onKeyDown, value: (_x = this.inputs) === null || _x === void 0 ? void 0 : _x.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: '69f7e1f1dd88c18319267bf0c8549d64d605deea', class: "flex w-full overflow-hidden gap-[75px]" }, h("input", { key: '28ddca943dc7fa97f8068b41089ae6283ab9d7ac', dir: "ltr", autofocus: true, type: "text", spellcheck: "false", autocomplete: "off", disabled: disableInputs, onKeyDown: this.onKeyDown, value: (_y = this.inputs) === null || _y === void 0 ? void 0 : _y.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: 'a78a00bfc36730def5c2c97494db8904ae9505ea', dir: "ltr", type: "text", spellcheck: "false", autocomplete: "off", disabled: disableInputs, onKeyDown: this.onKeyDown, value: (_z = this.inputs) === null || _z === void 0 ? void 0 : _z.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: 'bb0a32bddd012dd5759c4c52e57a2675dc9aedb6', 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: 'df809962fb53f68bd8dcc4cca05230c9fca0ad0d', class: "size-[30px] [&_circle]:fill-white stroke-white text-red-300" }), h("span", { key: '38d7ce5b9c19c49ce6dac353a8ccf95a2bcbd700' }, this.locale.claim))), h("div", { key: '430759dc1a5a0ea34f6fd02f37acf11fe38998c1', 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; documentUploaderIsRequired: boolean; name: string; description: string; title: string; image: string; type: string; typeEnum: \"Free\" | \"Paid\"; activatedAt: string; expiresAt?: string; status: string; statusEnum: \"Processed\" | \"Expired\" | \"Pending\" | \"Cancelled\" | \"ActivationRequired\"; campaignID?: number; campaignUniqueReference: string; packageCode: string; cost?: number; claimDate?: string; modelCostID?: number; serviceItemID: number; paidServiceInvoiceLineID?: number; companyID: string; companyName: string; invoiceNumber: string; jobNumber: string; maximumMileage?: number; claimable: boolean; claimingMethodEnum: \"ClaimByScanningQRCode\" | \"ClaimByEnteringInvoiceAndJobNumber\"; vehicleInspectionID: 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
+            },
+            "unInvoicedByBrokerName": {
+                "type": "string",
+                "attribute": "un-invoiced-by-broker-name",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": 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"
+            },
+            "canceledItems": {
+                "type": "unknown",
+                "attribute": "canceled-items",
+                "mutable": false,
+                "complexType": {
+                    "original": "VehicleServiceItemDTO[]",
+                    "resolved": "VehicleServiceItemDTO[]",
+                    "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,
+                "defaultValue": "[]"
+            },
+            "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; uploadSingleDocument?: string; uploadMultipleDocument?: string; serviceType?: string; documentLimitError?: string; documentRequiredError?: string; activationDate?: string; expireDate?: string; packageCode?: string; scanTheVoucher?: string; qrCode?: string; processing?: string; warning?: string; skipServicesWarning?: string; confirmSkipServices?: string; notInvoiced?: string; confirmNotInvoiced?: 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": "(payload: ClaimFormPayload) => Promise<void>",
+                    "resolved": "(payload: ClaimFormPayload) => Promise<void>",
+                    "references": {
+                        "ClaimFormPayload": {
+                            "location": "local",
+                            "path": "/home/vsts/work/1/s/ADP.WebComponents/adp-web-components/src/components/vehicle-lookup/vehicle-item-claim-form.tsx",
+                            "id": "src/components/vehicle-lookup/vehicle-item-claim-form.tsx::ClaimFormPayload"
+                        },
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "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": "isLoading",
+                "methodName": "onIsLoadingChange"
+            }];
+    }
+}