adp-web-components 0.0.50 → 0.0.53

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

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

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

@@ -4,7 +4,6 @@
  */
 import { Host, h } from "@stencil/core";
 import Loader from "~assets/loader.svg";
-import Loading from "./components/Loading";
 import SSCTable from "./components/SSCTable";
 import CardsContainer from "./components/CardsContainer";
 import cn from "../../global/lib/cn";
@@ -193,7 +192,7 @@ export class WarrantyDetails {
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (h(Host, { key: 'a2450072b8322100a2b26fffde2f2368fa6f859e' }, h("div", { key: 'b62fc2c807ee3c7d28d86d247610d79b282bee77', dir: this.locale.direction, class: "min-h-[100px] warranty" }, h("div", { key: '07d047b42d6a2811b09bfb4a679580eae17007e8' }, h(Loading, { key: 'dbc3ab7702d82d35e77360730fb982e862794b29', isLoading: this.state.includes('loading') }), h("div", { key: '290ae621db597035e73f65a856c1bb438cd4b9e7', class: "transition duration-700", style: { transform: this.state.includes('loading') || this.state === 'idle' ? 'scale(0)' : 'scale(1)', opacity: this.state.includes('loading') ? '0' : '1' } }, (this.showSsc || this.showWarranty) && (h("div", { key: '8331397a1da36813069186f23fb40b4189549d27', style: { color: !!this.errorMessage ? 'red' : 'black' }, class: "warranty-vin" }, (_a = this.vehicleInformation) === null || _a === void 0 ? void 0 : _a.vin)), ['error', 'error-loading'].includes(this.state) && (h("div", { key: '0c48f32b6ed6604dad626c32203a30af9107bdae', class: "py-[16px] min-h-[100px] flex items-center" }, h("div", { key: '1ca1709b2e88e66272b1de6f9c32c2b88f444172', class: "px-[16px] py-[8px] border reject-card text-[20px] rounded-[8px] w-fit mx-auto" }, this.locale.errors[this.errorMessage] || this.locale.errors.wildCard))), this.showWarranty && ['data', 'data-loading'].includes(this.state) && (h(CardsContainer, { key: '6c72a9bc36dce8a07de4bb31324160925b99f0f5', locale: this.locale, isAuthorized: (_b = this.vehicleInformation) === null || _b === void 0 ? void 0 : _b.isAuthorized, unInvoicedByBrokerName: this.unInvoicedByBrokerName, warranty: (_c = this.vehicleInformation) === null || _c === void 0 ? void 0 : _c.warranty })), h("div", { key: '1df38bbb43f2068d07be564141d7ad05535a4821', style: Object.assign({}, (this.showRecaptcha ? { height: 'auto', padding: '16px 16px 0px 16px' } : { height: '0px' })), class: "recaptcha-container" }, h("slot", { key: 'c0a13e5c4b8472cec694eb0e3c86ec47126ed17f' })), ['data', 'data-loading'].includes(this.state) && this.recaptchaRes && (h("div", { key: '0538982583473257a4d950bf256c088600515059', class: cn('recaptcha-response', !this.recaptchaRes.hasSSC ? 'success-card' : 'reject-card ') }, this.locale.vehicleLookup.warranty[this.recaptchaRes.message])), this.checkingUnauthorizedSSC && (h("div", { key: 'b124c96b6cb2c04c9e66a26a29408df14658e020', class: "loading-spinner", style: { marginTop: '20px', flexDirection: 'column' } }, h("div", { key: 'c1f047e2cf8cc089ffd68bd973237a418220664d' }, h("strong", { key: 'f99dbf2f323fe499afcd5e4e75a970c40e40503e' }, this.locale.vehicleLookup.warranty.checkingTMC)), h("img", { key: '6232d00679900c7f6625311a3846b0c022b35c53', class: "spin", src: Loader }))), this.showSsc && ['data', 'data-loading'].includes(this.state) && ((_d = this.vehicleInformation) === null || _d === void 0 ? void 0 : _d.ssc) !== null && !!((_e = this.vehicleInformation) === null || _e === void 0 ? void 0 : _e.ssc.length) && (h(SSCTable, { key: '633a617baadedc94ad0aacb5d8db7da6df880258', locale: this.locale, ssc: this.vehicleInformation.ssc })))))));
+        return (h(Host, { key: '8a54ab74f9c9282ac77e5e1e8efa862d32806929' }, h("div", { key: 'f62f8d7e44da8369ebccf18357200e232c641e6e', dir: this.locale.direction, class: "min-h-[100px] warranty" }, h("div", { key: '6b65fb28f1a41bbcb65117d3cd748779827a6692' }, h("loading-spinner", { key: 'ad9d8fa792075417393a6d54beeeb126499d30dd', isLoading: this.state.includes('loading') }), h("div", { key: '8cf4004b8fdbfebf42312a33660bad691c34c093', class: "transition duration-700", style: { transform: this.state.includes('loading') || this.state === 'idle' ? 'scale(0)' : 'scale(1)', opacity: this.state.includes('loading') ? '0' : '1' } }, (this.showSsc || this.showWarranty) && (h("div", { key: '78655152da01b6e584df80d5832889ee6b2cd3aa', style: { color: !!this.errorMessage ? 'red' : 'black' }, class: "warranty-vin" }, (_a = this.vehicleInformation) === null || _a === void 0 ? void 0 : _a.vin)), ['error', 'error-loading'].includes(this.state) && (h("div", { key: '959c622e73bda69b7fc90d180c1ef35c714b9545', class: "py-[16px] min-h-[100px] flex items-center" }, h("div", { key: 'bb50bfc8e0ce0bd54387b7ca227e94ce901b3910', class: "px-[16px] py-[8px] border reject-card text-[20px] rounded-[8px] w-fit mx-auto" }, this.locale.errors[this.errorMessage] || this.locale.errors.wildCard))), this.showWarranty && ['data', 'data-loading'].includes(this.state) && (h(CardsContainer, { key: 'fc6f735c7766cd44e66dfd0c8c7ddfc4de2806d7', locale: this.locale, isAuthorized: (_b = this.vehicleInformation) === null || _b === void 0 ? void 0 : _b.isAuthorized, unInvoicedByBrokerName: this.unInvoicedByBrokerName, warranty: (_c = this.vehicleInformation) === null || _c === void 0 ? void 0 : _c.warranty })), h("div", { key: '9d165393018f648130b09fcb9c4bafac973958f6', style: Object.assign({}, (this.showRecaptcha ? { height: 'auto', padding: '16px 16px 0px 16px' } : { height: '0px' })), class: "recaptcha-container" }, h("slot", { key: 'b0299ac161d86cbddeb49a181d05b9a7d74d1c5f' })), ['data', 'data-loading'].includes(this.state) && this.recaptchaRes && (h("div", { key: 'def624606b1b5dc4f6412305eab3c73acda5c688', class: cn('recaptcha-response', !this.recaptchaRes.hasSSC ? 'success-card' : 'reject-card ') }, this.locale.vehicleLookup.warranty[this.recaptchaRes.message])), this.checkingUnauthorizedSSC && (h("div", { key: 'e1c7c8769c56450011e0d508ccdf8b285bd597ba', class: "loading-spinner", style: { marginTop: '20px', flexDirection: 'column' } }, h("div", { key: 'a3de594a8611b9d0a1eb950d7c12de599e439ece' }, h("strong", { key: '2c89d09942ce1dfd545cb963e41ad341f09a8604' }, this.locale.vehicleLookup.warranty.checkingTMC)), h("img", { key: '0547201acc2ab687f8c80ac2b7032607942dfba6', class: "spin", src: Loader }))), this.showSsc && ['data', 'data-loading'].includes(this.state) && ((_d = this.vehicleInformation) === null || _d === void 0 ? void 0 : _d.ssc) !== null && !!((_e = this.vehicleInformation) === null || _e === void 0 ? void 0 : _e.ssc.length) && (h(SSCTable, { key: '355d99a49741447fbbe3e5f4476853713adbad58', locale: this.locale, ssc: this.vehicleInformation.ssc })))))));
     }
     static get is() { return "warranty-details"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/global/lib/form-hook.js

@@ -4,22 +4,34 @@
  */
 export class FormHook {
     constructor(context, schemaObject, formStateOptions) {
+        this.successAnimation = () => { };
         this.isSubmitted = false;
+        this.cachedValues = {};
         this.subscribers = [];
         this.haltValidation = false;
         this.validationType = 'onSubmit';
         this.subscribedFields = {};
         this.formErrors = {};
+        this.setSuccessAnimation = (newSuccessAnimation) => (this.successAnimation = newSuccessAnimation);
         this.subscribe = (formName, formElement) => this.subscribers.push({ name: formName, context: formElement });
         this.unsubscribe = (formName) => (this.subscribers = this.subscribers.filter(({ name }) => name !== formName));
+        this.onInput = (event) => {
+            const target = event.target;
+            if (this.onValuesUpdate)
+                this.onValuesUpdate(Object.assign(Object.assign({}, this.getValues()), { [target.name]: target.value }));
+            this.validateForm(target.name, target.value);
+        };
         this.resetFormErrorMessage = () => (this.context.errorMessage = '');
         this.getFormErrors = () => this.formErrors;
+        this.setCachedValues = (newValues) => {
+            this.cachedValues = newValues;
+        };
         this.getValues = () => {
             const formDom = this.context.el.shadowRoot || this.context.el;
             const form = formDom.querySelector('form');
             const formData = new FormData(form);
             const formObject = Object.fromEntries(formData.entries());
-            return formObject;
+            return Object.assign(Object.assign({}, this.cachedValues), formObject);
         };
         this.focusFirstInput = (errorFields) => {
             if (errorFields.length) {
@@ -43,7 +55,7 @@ export class FormHook {
                     this.isSubmitted = true;
                     this.context.isLoading = true;
                     this.signal({ isError: false, disabled: true });
-                    const formObject = this.getValues();
+                    const formObject = Object.assign(Object.assign({}, this.cachedValues), this.getValues());
                     const values = await this.schemaObject.validate(formObject, { abortEarly: false });
                     await this.context.formSubmit(values);
                 }
@@ -76,25 +88,17 @@ export class FormHook {
                 }
             })();
         };
-        this.newController = (name, fieldType) => {
+        this.getInputState = (name) => {
             const validationDescription = this.schemaObject.describe().fields[name];
-            const sharedFields = {
-                name,
-                fieldType,
-                isError: false,
-                disabled: false,
-                errorMessage: '',
-                isRequired: validationDescription === null || validationDescription === void 0 ? void 0 : validationDescription.tests.some(test => test.name === 'required'),
-            };
-            if (fieldType === 'text' || fieldType === 'number' || fieldType === 'text-area')
-                this.subscribedFields[name] = Object.assign(Object.assign({}, sharedFields), { inputChanges: (event) => {
-                        const value = event.target.value;
-                        this.onChanges(name, value);
-                    } });
-            else if (fieldType === 'select')
-                this.subscribedFields[name] = Object.assign(Object.assign({}, sharedFields), { inputChanges: (value) => {
-                        this.onChanges(name, value);
-                    } });
+            if (!this.subscribedFields[name])
+                this.subscribedFields[name] = {
+                    name,
+                    isError: false,
+                    disabled: false,
+                    errorMessage: '',
+                    continuousValidation: false,
+                    isRequired: validationDescription === null || validationDescription === void 0 ? void 0 : validationDescription.tests.some(test => test.name === 'required'),
+                };
             return this.subscribedFields[name];
         };
         this.signal = (partialSignal) => {
@@ -108,11 +112,17 @@ export class FormHook {
                 Object.values(this.subscribedFields).forEach(field => Object.assign(field, partialSignal));
             }
         };
-        this.onChanges = async (name, value) => {
-            if (this.haltValidation)
-                return;
-            if (!this.isSubmitted && this.validationType !== 'always')
-                return;
+        this.validateInput = (name) => {
+            const value = (this.getValues()[name] || '');
+            return this.validateForm(name, value, false);
+        };
+        this.validateForm = (name, value, strict = true) => {
+            if (strict) {
+                if (this.haltValidation)
+                    return;
+                if (!this.isSubmitted && this.validationType !== 'always' && !this.subscribedFields[name].continuousValidation)
+                    return;
+            }
             const wasError = this.subscribedFields[name].isError;
             try {
                 // @ts-ignore
@@ -120,17 +130,22 @@ export class FormHook {
                 this.signal([{ name, isError: false }]);
                 if (wasError !== false)
                     this.context.renderControl = {};
+                return { isError: false, errorMessage: '' };
             }
             catch (error) {
                 if (error.message) {
                     this.signal([{ name, isError: true, errorMessage: error.message }]);
                     this.context.renderControl = {};
+                    return { isError: true, errorMessage: error.message };
                 }
             }
+            finally {
+                this.subscribedFields[name].continuousValidation = true;
+            }
         };
         this.context = context;
         this.schemaObject = schemaObject;
-        this.formController = { onSubmit: this.onSubmit };
+        this.formController = { onSubmit: this.onSubmit, onInput: this.onInput };
         if (formStateOptions === null || formStateOptions === void 0 ? void 0 : formStateOptions.validationType)
             this.validationType = formStateOptions.validationType;
     }

package/dist/collection/global/types/locales/general.js

@@ -5,5 +5,7 @@
 import { object, string } from "yup";
 export const generalSchema = object({
     close: string().required(),
+    submit: string().required(),
     noSelectOptions: string().required(),
+    formSubmittedSuccessfully: string().required(),
 });

package/dist/collection/templates/part-lookup/mock-data.js

@@ -52,7 +52,7 @@ const mockData = {
           value: 2.4875,
           currecntySymbol: '$',
           cultureName: 'en-US',
-          formattedValue: '$2.249',
+          formattedValue: null,
         },
         fob: {
           value: 2.4875,
@@ -88,7 +88,7 @@ const mockData = {
           value: 2.4875,
           currecntySymbol: '$',
           cultureName: 'en-US',
-          formattedValue: '$23.49',
+          formattedValue: null,
         },
       },
     ],