adp-web-components 0.0.12 → 0.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (56) hide show
  1. package/dist/cjs/dead-stock-lookup.cjs.entry.js +22 -10
  2. package/dist/cjs/distributor-lookup.cjs.entry.js +25 -15
  3. package/dist/cjs/loader.cjs.js +1 -1
  4. package/dist/cjs/manufacturer-lookup.cjs.entry.js +2 -15
  5. package/dist/cjs/paint-thickness.cjs.entry.js +3 -16
  6. package/dist/cjs/service-history.cjs.entry.js +1 -14
  7. package/dist/cjs/shift-components.cjs.js +1 -1
  8. package/dist/cjs/vehicle-accessories.cjs.entry.js +3 -16
  9. package/dist/cjs/vehicle-specification.cjs.entry.js +1 -14
  10. package/dist/cjs/warranty-details.cjs.entry.js +5 -29
  11. package/dist/collection/components/paint-thickness/paint-thickness.js +3 -16
  12. package/dist/collection/components/part-lookup/dead-stock-lookup.css +1 -1
  13. package/dist/collection/components/part-lookup/dead-stock-lookup.js +34 -23
  14. package/dist/collection/components/part-lookup/distributor-lookup.css +1 -1
  15. package/dist/collection/components/part-lookup/distributor-lookup.js +24 -14
  16. package/dist/collection/components/part-lookup/manufacturer-lookup.css +1 -1
  17. package/dist/collection/components/part-lookup/manufacturer-lookup.js +1 -14
  18. package/dist/collection/components/service-history/service-history.js +1 -14
  19. package/dist/collection/components/vehicle-accessories/vehicle-accessories.js +3 -16
  20. package/dist/collection/components/vehicle-specification/vehicle-specification.js +1 -14
  21. package/dist/collection/components/warranty-details/warranty-details.js +7 -34
  22. package/dist/collection/templates/vehicle-lookup.js +163 -96
  23. package/dist/components/dead-stock-lookup.js +1 -1
  24. package/dist/components/distributor-lookup.js +1 -1
  25. package/dist/components/manufacturer-lookup.js +1 -1
  26. package/dist/components/paint-thickness.js +1 -1
  27. package/dist/components/service-history.js +1 -1
  28. package/dist/components/vehicle-accessories.js +1 -1
  29. package/dist/components/vehicle-specification.js +1 -1
  30. package/dist/components/warranty-details.js +1 -1
  31. package/dist/esm/dead-stock-lookup.entry.js +22 -10
  32. package/dist/esm/distributor-lookup.entry.js +25 -15
  33. package/dist/esm/loader.js +1 -1
  34. package/dist/esm/manufacturer-lookup.entry.js +2 -15
  35. package/dist/esm/paint-thickness.entry.js +3 -16
  36. package/dist/esm/service-history.entry.js +1 -14
  37. package/dist/esm/shift-components.js +1 -1
  38. package/dist/esm/vehicle-accessories.entry.js +3 -16
  39. package/dist/esm/vehicle-specification.entry.js +1 -14
  40. package/dist/esm/warranty-details.entry.js +5 -29
  41. package/dist/shift-components/p-6b21ce2d.entry.js +5 -0
  42. package/dist/shift-components/{p-c274f4ba.entry.js → p-7d85e912.entry.js} +1 -1
  43. package/dist/shift-components/p-7f258017.entry.js +5 -0
  44. package/dist/shift-components/{p-f21722ce.entry.js → p-9653e992.entry.js} +1 -1
  45. package/dist/shift-components/{p-75ea0e53.entry.js → p-d1b9cd93.entry.js} +1 -1
  46. package/dist/shift-components/p-d6f40c8d.entry.js +5 -0
  47. package/dist/shift-components/p-e05acce1.entry.js +5 -0
  48. package/dist/shift-components/{p-91eff216.entry.js → p-faa8070a.entry.js} +1 -1
  49. package/dist/shift-components/shift-components.esm.js +1 -1
  50. package/dist/types/components/part-lookup/dead-stock-lookup.d.ts +2 -3
  51. package/dist/types/components/warranty-details/warranty-details.d.ts +1 -2
  52. package/package.json +1 -1
  53. package/dist/shift-components/p-2e3e8e97.entry.js +0 -5
  54. package/dist/shift-components/p-3bfafc40.entry.js +0 -5
  55. package/dist/shift-components/p-ec9302fb.entry.js +0 -5
  56. package/dist/shift-components/p-f95c7501.entry.js +0 -5
@@ -56,7 +56,6 @@ const VehicleAccessories = class {
56
56
  this.externalVin = vin;
57
57
  try {
58
58
  if (!vin || vin.trim().length === 0) {
59
- //this.componentHeight = '0px';
60
59
  this.state = 'idle';
61
60
  return;
62
61
  }
@@ -89,19 +88,7 @@ const VehicleAccessories = class {
89
88
  async fetchData(requestedVin = this.externalVin, headers = {}) {
90
89
  await this.setData(requestedVin, headers);
91
90
  }
92
- //calculateHeight(componentState: string) {
93
- // if (componentState.includes('loading') && this.componentHeight === '0px') {
94
- // this.componentHeight = '100px';
95
- // } else if (componentState !== 'idle') {
96
- // setTimeout(() => {
97
- // this.componentHeight = `${this.wrapperRef.clientHeight}px`;
98
- // }, 50);
99
- // } else {
100
- // this.componentHeight = '0px';
101
- // }
102
- //}
103
91
  async loadingListener() {
104
- //this.calculateHeight(newState);
105
92
  if (this.loadingStateChange)
106
93
  this.loadingStateChange(this.state.includes('loading'));
107
94
  }
@@ -111,7 +98,7 @@ const VehicleAccessories = class {
111
98
  render() {
112
99
  var _a, _b;
113
100
  const accessories = (this === null || this === void 0 ? void 0 : this.vehicleInformation) ? (_a = this.vehicleInformation) === null || _a === void 0 ? void 0 : _a.accessories : [];
114
- return (index.h(index.Host, { key: '36897fc6f19dc85a4219b4040724412b4b025d6b' }, index.h("div", { key: '22c79f8628e7839a909a973edc5f7cdca6893a50', class: "min-h-[100px] relative transition-all duration-300 overflow-hidden" }, index.h("div", { key: '9bcb7d20e411b0b5b5c24a3f1d37c69c6b4a92ba' }, index.h(Loading.Loading, { key: 'd7c53d1f0acb6a7b5b2dae9ee8c701ecbc4a9c97', isLoading: this.state.includes('loading') }), index.h("div", { key: '8e73ef542f7341ab328413ca16a7d1a509adeb2d', class: cn.cn('transition-all duration-700', { 'scale-0': this.state.includes('loading') || this.state === 'idle', 'opacity-0': this.state.includes('loading') }) }, index.h("div", { key: '46f53a1f41ebd08a566de3ec308657f5691acf05', class: cn.cn('text-center pt-[4px] text-[20px]', { 'text-red-600': !!this.errorMessage }) }, (_b = this.vehicleInformation) === null || _b === void 0 ? void 0 : _b.vin), ['error', 'error-loading'].includes(this.state) && (index.h("div", { key: '2f8dbaf438e62d538a53e3be527923ac7ded7296', class: "py-[16px]" }, index.h("div", { key: '10bb480c52c9ecf3c4715effb4f4dcb93db84d69', class: " px-[16px] py-[8px] border reject-card text-[20px] rounded-[8px] w-fit mx-auto" }, this.errorMessage))), ['data', 'data-loading'].includes(this.state) && (index.h("div", { key: '4e2e6b556f6a1698fdcca13b4cf03c426a396713', class: "flex mt-[12px] max-h-[70dvh] overflow-hidden rounded-[4px] flex-col border border-[#d6d8dc]" }, index.h("div", { key: '30e34ba8eab9a055daf8a3611e7084077977d315', class: "w-full h-[40px] flex shrink-0 justify-center text-[18px] items-center text-[#383c43] text-center bg-[#e1e3e5]" }, "Vehicle Accessories"), index.h("div", { key: '251abde72d8f9d9f80dbe27294501c8a5e89089d', class: "h-0 overflow-auto flex-1" }, !accessories.length && index.h("div", { key: '96238a49e10c2426b03da1f5b816b6bb8cae0397', class: "h-[80px] flex items-center justify-center text-[18px]" }, "No data is available."), !!accessories.length && (index.h("table", { key: '8765e2cdfc3771d4459168908c3b9d65466155b0', class: "w-full overflow-auto relative border-collapse" }, index.h("thead", { key: '99e5c29f2f469f9ac39fc5aec2f80234e804f89d', class: "top-0 font-bold z-40 sticky bg-white" }, index.h("tr", { key: '6addf0eadbc6fcfb2eac08d12febd3f0aab30d6a' }, ['Part Number', 'Description', 'Image'].map(title => (index.h("th", { key: title, class: "px-[10px] py-[20px] text-center whitespace-nowrap border-b border-[#d6d8dc]" }, title))))), index.h("tbody", { key: '925ed2efd7e37c33f7dd4bee0c5202e18358965f' }, accessories.map((accessory, idx) => {
101
+ return (index.h(index.Host, { key: '7e5394e3dad05815f3a514a342f7afbe11a8d4c1' }, index.h("div", { key: '1d3fea9972e6827680908bc1becb9be17a4305db', class: "min-h-[100px] relative transition-all duration-300 overflow-hidden" }, index.h("div", { key: '853e8ff5ad5adf557db5805fc6cc841d7ee224d0' }, index.h(Loading.Loading, { key: '46cdabae84cf49eb88b277bf55b45f233cf28021', isLoading: this.state.includes('loading') }), index.h("div", { key: '948f2861dcf3e7a8b94f84400a75f681f405122a', class: cn.cn('transition-all duration-700', { 'scale-0': this.state.includes('loading') || this.state === 'idle', 'opacity-0': this.state.includes('loading') }) }, index.h("div", { key: '2b53f6a05b1beab10a9436435969bfc0bc383cae', class: cn.cn('text-center pt-[4px] text-[20px]', { 'text-red-600': !!this.errorMessage }) }, (_b = this.vehicleInformation) === null || _b === void 0 ? void 0 : _b.vin), ['error', 'error-loading'].includes(this.state) && (index.h("div", { key: '90d5c9e6f1efd3cef3994d2d7ccd6d278d424a76', class: "py-[16px]" }, index.h("div", { key: '4cd2e9823137e6a7b861fea69f13a6a0343929b2', class: " px-[16px] py-[8px] border reject-card text-[20px] rounded-[8px] w-fit mx-auto" }, this.errorMessage))), ['data', 'data-loading'].includes(this.state) && (index.h("div", { key: '9481a97632f581c0b3ebdf0df9086730d10dfdc1', class: "flex mt-[12px] max-h-[70dvh] overflow-hidden rounded-[4px] flex-col border border-[#d6d8dc]" }, index.h("div", { key: '649fa9917501f66fa2380e3557c5e86ad26d7f89', class: "w-full h-[40px] flex shrink-0 justify-center text-[18px] items-center text-[#383c43] text-center bg-[#e1e3e5]" }, "Vehicle Accessories"), index.h("div", { key: '262a67208efe49dbb113c7925cf6b6ae835b3f0c', class: "h-0 overflow-auto flex-1" }, !accessories.length && index.h("div", { key: 'ec443d025b8ca3e50f397ffb1c66e5b280e42f70', class: "h-[80px] flex items-center justify-center text-[18px]" }, "No data is available."), !!accessories.length && (index.h("table", { key: '48d6e63959a8732972b89ca514b72d5677eb4447', class: "w-full overflow-auto relative border-collapse" }, index.h("thead", { key: 'b9cdc265accdb543d14bacc09756e2a7ac44e6e8', class: "top-0 font-bold z-40 sticky bg-white" }, index.h("tr", { key: '2951863ff3d03fa9eab980acd348d2ae352cc1b4' }, ['Part Number', 'Description', 'Image'].map(title => (index.h("th", { key: title, class: "px-[10px] py-[20px] text-center whitespace-nowrap border-b border-[#d6d8dc]" }, title))))), index.h("tbody", { key: '7106dfb61229963e59d800f630a0e351be1d680f' }, accessories.map((accessory, idx) => {
115
102
  var _a;
116
103
  return (index.h("tr", { class: "transition-colors duration-100 hover:bg-slate-100", key: accessory.partNumber }, ['partNumber', 'description'].map(key => {
117
104
  var _a;
@@ -121,9 +108,9 @@ const VehicleAccessories = class {
121
108
  }), index.h("td", { class: cn.cn('px-[10px] py-[10px] text-center whitespace-nowrap border-b border-[#d6d8dc]', {
122
109
  '!border-none': idx === ((_a = this.vehicleInformation) === null || _a === void 0 ? void 0 : _a.serviceHistory.length) - 1,
123
110
  }) }, index.h("button", { onClick: ({ target }) => this.openImage(target, accessory.image), class: "shrink-0 relative ring-0 outline-none w-fit mx-auto [&_img]:hover:shadow-lg [&_div]:hover:!opacity-100 cursor-pointer" }, index.h("div", { class: "absolute flex-col justify-center gap-[4px] size-full flex items-center pointer-events-none hover:opacity-100 rounded-lg opacity-0 bg-black/40 transition-all duration-300" }, index.h("img", { src: imageExpansion.eyeSvg }), index.h("span", { class: "text-white" }, "Expand")), index.h("img", { class: "w-auto h-auto max-w-[133px] max-h-[133px] cursor-pointer shadow-sm rounded-lg transition-all duration-300", src: accessory.image })))));
124
- })), index.h("div", { key: '00fbf078180b18c4e125297be26c45a3c320aec8', onClick: () => this.closeImage(), style: { backdropFilter: this.expandedImage ? 'blur(3px)' : 'blur(0px)' }, class: cn.cn('pointer-events-none w-[100dvw] h-[100dvh] fixed top-0 z-50 left-0 opacity-0 bg-black/40 transition-all duration-400', {
111
+ })), index.h("div", { key: 'a16654412c64f0811caf281bc9a10b4325143f74', onClick: () => this.closeImage(), style: { backdropFilter: this.expandedImage ? 'blur(3px)' : 'blur(0px)' }, class: cn.cn('pointer-events-none w-[100dvw] h-[100dvh] fixed top-0 z-50 left-0 opacity-0 bg-black/40 transition-all duration-400', {
125
112
  'pointer-events-auto opacity-100 delay-200': this.expandedImage,
126
- }) }, index.h("button", { key: 'd76565b5c51ff17287584b43ddcf9d961f012b7e', class: "flex flex-col mt-[16px] items-center justify-center size-12 float-right mr-[16px]", onClick: () => this.closeImage() }, index.h("div", { key: '9f7b9634e10a2114ba298bd9a49800270a91b642', class: "h-1 w-12 rounded-full rotate-45 absolute bg-white" }), index.h("div", { key: 'bbb15c3b6a4de5d14da9594bc9cc078fbc155dfb', class: "h-1 w-12 rounded-full -rotate-45 absolute bg-white" }))), index.h("img", { key: '33cb3cfe256742f41aff3a62876db9965d40f3dc', alt: "", id: "expanded-image", class: "fixed opacity-0 z-50 transition-all rounded-lg" })))))))))));
113
+ }) }, index.h("button", { key: '2a1f6a6de320d464b549be5c8d0955743eab0c1a', class: "flex flex-col mt-[16px] items-center justify-center size-12 float-right mr-[16px]", onClick: () => this.closeImage() }, index.h("div", { key: '9806406418b9a2588b18a9659a183b494d2dc029', class: "h-1 w-12 rounded-full rotate-45 absolute bg-white" }), index.h("div", { key: 'e52ccc81db9fad6cde21438bae24ac06ed06d886', class: "h-1 w-12 rounded-full -rotate-45 absolute bg-white" }))), index.h("img", { key: '9db20d318e852a02ad255e5dc463d5ffd3135eb5', alt: "", id: "expanded-image", class: "fixed opacity-0 z-50 transition-all rounded-lg" })))))))))));
127
114
  }
128
115
  get el() { return index.getElement(this); }
129
116
  static get watchers() { return {
@@ -40,7 +40,6 @@ const VehicleSpecification = class {
40
40
  this.externalVin = vin;
41
41
  try {
42
42
  if (!vin || vin.trim().length === 0) {
43
- //this.componentHeight = '0px';
44
43
  this.state = 'idle';
45
44
  return;
46
45
  }
@@ -73,19 +72,7 @@ const VehicleSpecification = class {
73
72
  async fetchData(requestedVin = this.externalVin, headers = {}) {
74
73
  await this.setData(requestedVin, headers);
75
74
  }
76
- //calculateHeight(componentState: string) {
77
- // if (componentState.includes('loading') && this.componentHeight === '0px') {
78
- // this.componentHeight = '100px';
79
- // } else if (componentState !== 'idle') {
80
- // setTimeout(() => {
81
- // this.componentHeight = `${this.wrapperRef.clientHeight}px`;
82
- // }, 50);
83
- // } else {
84
- // this.componentHeight = '0px';
85
- // }
86
- //}
87
75
  async loadingListener() {
88
- //this.calculateHeight(newState);
89
76
  if (this.loadingStateChange)
90
77
  this.loadingStateChange(this.state.includes('loading'));
91
78
  }
@@ -94,7 +81,7 @@ const VehicleSpecification = class {
94
81
  }
95
82
  render() {
96
83
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
97
- return (index.h(index.Host, { key: '1b410b6dca3998600be9586345f3fba4bc5de33f' }, index.h("div", { key: '1db4da0ddafab294ca6ad9d791ed85e39e1f1e1a', class: "min-h-[100px] relative transition-all duration-300 overflow-hidden" }, index.h("div", { key: 'f0005424b93a25b295307f88f058df9f53da49b5' }, index.h(Loading.Loading, { key: '6fe07890fef9b23a4a2f7a23a40d94e562897162', isLoading: this.state.includes('loading') }), index.h("div", { key: '0d6e2e3524b6b6febd09eb303d0762c251dbbda3', class: cn.cn('transition-all duration-700', { 'scale-0': this.state.includes('loading') || this.state === 'idle', 'opacity-0': this.state.includes('loading') }) }, index.h("div", { key: 'bf9e058077d836affdcb8356400811e3bc07cb1b', class: cn.cn('text-center pt-[4px] text-[20px]', { 'text-red-600': !!this.errorMessage }) }, (_a = this.vehicleInformation) === null || _a === void 0 ? void 0 : _a.vin), ['error', 'error-loading'].includes(this.state) && (index.h("div", { key: 'ca5ad9383018eed9d68c06c941d4838902b38336', class: "py-4" }, index.h("div", { key: 'b4c3daa0fef5fdcde3cb19eedd9983492c749366', class: " px-[16px] py-[8px] border reject-card text-[20px] rounded-[8px] w-fit mx-auto" }, this.errorMessage))), ['data', 'data-loading'].includes(this.state) && (index.h("div", { key: '1c5ab5cae04fbddef1a60b022f3150fb961c4d29', class: "flex mt-[12px] max-h-[70dvh] overflow-hidden rounded-[4px] flex-col border border-[#d6d8dc]" }, index.h("div", { key: 'cd34df7de4fc24d1f94754c61d68d549f7f83e4d', class: "w-full h-[40px] flex shrink-0 justify-center text-[18px] items-center text-[#383c43] text-center bg-[#e1e3e5]" }, "Vehicle Specifications"), index.h("div", { key: '44a1539cffed09bb9da338841f25d2e8e8e6b712', class: "h-0 overflow-auto flex-1" }, !((_b = this.vehicleInformation) === null || _b === void 0 ? void 0 : _b.vehicleSpecification) && index.h("div", { key: '3fb52690ca9d08a9d4581380e3cec1a86860b286', class: "h-[80px] flex items-center justify-center text-[18px]" }, "No data is available."), !!((_c = this.vehicleInformation) === null || _c === void 0 ? void 0 : _c.vehicleSpecification) && (index.h("table", { key: 'a89c30ce91ed1bfccfa45d0043e4810ae73646bc', class: "w-full overflow-auto relative border-collapse" }, index.h("thead", { key: 'eaa959d3ea6389d34316c3134309411188c95f8b', class: "top-0 font-bold sticky bg-white" }, index.h("tr", { key: '2e5d01ba63b0fd268932fc39e7d7540dd0818bd6' }, ['Model', 'Variant', 'Katashiki', 'Model Year', 'SFX'].map(title => (index.h("th", { key: title, class: "px-[10px] py-[20px] text-center whitespace-nowrap border-b border-[#d6d8dc]" }, title))))), index.h("tbody", { key: 'f5b5643eeb841748f7c3d8cc1943d6ba8ef8e1f9' }, index.h("tr", { key: '050dea500f85bbb91bf79c9d450eec490de49716' }, index.h("td", { key: '2b936b542e35c0536353661def7138634ca35a49', class: "px-[10px] py-[20px] text-center whitespace-nowrap" }, ((_e = (_d = this === null || this === void 0 ? void 0 : this.vehicleInformation) === null || _d === void 0 ? void 0 : _d.vehicleVariantInfo) === null || _e === void 0 ? void 0 : _e.modelCode) || '...', " ", index.h("br", { key: 'b08846e3431982ff329db2603362b0a6ecd57502', class: "my-2" }), ((_g = (_f = this === null || this === void 0 ? void 0 : this.vehicleInformation) === null || _f === void 0 ? void 0 : _f.vehicleSpecification) === null || _g === void 0 ? void 0 : _g.modelDesc) || '...'), index.h("td", { key: '892fbe89881132a274333435a3e023279721afff', class: "px-[10px] py-[20px] text-center whitespace-nowrap" }, ((_j = (_h = this === null || this === void 0 ? void 0 : this.vehicleInformation) === null || _h === void 0 ? void 0 : _h.identifiers) === null || _j === void 0 ? void 0 : _j.variant) || '...', " ", index.h("br", { key: 'dde026ae6e6e5b918f6e919511c8e92554134def' }), ((_l = (_k = this === null || this === void 0 ? void 0 : this.vehicleInformation) === null || _k === void 0 ? void 0 : _k.vehicleSpecification) === null || _l === void 0 ? void 0 : _l.variantDesc) || '...'), ['identifiers.katashiki', 'vehicleVariantInfo.modelYear', 'vehicleVariantInfo.sfx'].map(infoPath => {
84
+ return (index.h(index.Host, { key: 'b9a0f984a08acc14315b7b7b30742ad9f5bdb49e' }, index.h("div", { key: 'af83954e986a078b9e33bfd4fc8797fb79fb028b', class: "min-h-[100px] relative transition-all duration-300 overflow-hidden" }, index.h("div", { key: '448f30f13b9c20fb30ff369e55bf564bd0d8fe20' }, index.h(Loading.Loading, { key: '53523ee006eef27b765fd1b6375f39bf7f1e02c6', isLoading: this.state.includes('loading') }), index.h("div", { key: '78dd7934c80487fb68c67747512c5c96809280ac', class: cn.cn('transition-all duration-700', { 'scale-0': this.state.includes('loading') || this.state === 'idle', 'opacity-0': this.state.includes('loading') }) }, index.h("div", { key: 'da5b237a42b1ff4b0c20fe40ad5c46224c265986', class: cn.cn('text-center pt-[4px] text-[20px]', { 'text-red-600': !!this.errorMessage }) }, (_a = this.vehicleInformation) === null || _a === void 0 ? void 0 : _a.vin), ['error', 'error-loading'].includes(this.state) && (index.h("div", { key: 'dc9cae0fec62f66c747de76185d2e1688162224e', class: "py-4" }, index.h("div", { key: '8f3b7129711bff7688170ac8228417b0bf3b4c5c', class: " px-[16px] py-[8px] border reject-card text-[20px] rounded-[8px] w-fit mx-auto" }, this.errorMessage))), ['data', 'data-loading'].includes(this.state) && (index.h("div", { key: '9215e325e2b80534142c4833b717b569949721ec', class: "flex mt-[12px] max-h-[70dvh] overflow-hidden rounded-[4px] flex-col border border-[#d6d8dc]" }, index.h("div", { key: '87630966a701dc6989221ac7a133ca7e0856fcf1', class: "w-full h-[40px] flex shrink-0 justify-center text-[18px] items-center text-[#383c43] text-center bg-[#e1e3e5]" }, "Vehicle Specifications"), index.h("div", { key: '06489c6c3ad553a5502cdf72cc43724d2b5c74bc', class: "h-0 overflow-auto flex-1" }, !((_b = this.vehicleInformation) === null || _b === void 0 ? void 0 : _b.vehicleSpecification) && index.h("div", { key: 'e6e2d53c4233cacc6571b1b9d2eaa6553bae7831', class: "h-[80px] flex items-center justify-center text-[18px]" }, "No data is available."), !!((_c = this.vehicleInformation) === null || _c === void 0 ? void 0 : _c.vehicleSpecification) && (index.h("table", { key: '30bf7dfaf6c8c5d9829e8a30d9644326c5a2c6d2', class: "w-full overflow-auto relative border-collapse" }, index.h("thead", { key: 'b64236329f77e1e236ad286bbe5068e55f5e40c9', class: "top-0 font-bold sticky bg-white" }, index.h("tr", { key: 'b79c310db87dc4b40a56a0efbe82ffd54da09a21' }, ['Model', 'Variant', 'Katashiki', 'Model Year', 'SFX'].map(title => (index.h("th", { key: title, class: "px-[10px] py-[20px] text-center whitespace-nowrap border-b border-[#d6d8dc]" }, title))))), index.h("tbody", { key: 'b8afb49709c1362e95dd4446978b54c2fc570fcb' }, index.h("tr", { key: 'b566724d705cd430f7fba1e1addab9a1189ebb5d' }, index.h("td", { key: '0577fa2f9221fdd8df0a557b92e77f3bad0885ac', class: "px-[10px] py-[20px] text-center whitespace-nowrap" }, ((_e = (_d = this === null || this === void 0 ? void 0 : this.vehicleInformation) === null || _d === void 0 ? void 0 : _d.vehicleVariantInfo) === null || _e === void 0 ? void 0 : _e.modelCode) || '...', " ", index.h("br", { key: 'f751d6784c076ce25442d7a916bc468ecd007777', class: "my-2" }), ((_g = (_f = this === null || this === void 0 ? void 0 : this.vehicleInformation) === null || _f === void 0 ? void 0 : _f.vehicleSpecification) === null || _g === void 0 ? void 0 : _g.modelDesc) || '...'), index.h("td", { key: '01e40cad1d8dc4cdfc933dcfade4b8e605219d3e', class: "px-[10px] py-[20px] text-center whitespace-nowrap" }, ((_j = (_h = this === null || this === void 0 ? void 0 : this.vehicleInformation) === null || _h === void 0 ? void 0 : _h.identifiers) === null || _j === void 0 ? void 0 : _j.variant) || '...', " ", index.h("br", { key: 'f34677ab8bf2311f6ac2fd7426805cfe50ccafd7' }), ((_l = (_k = this === null || this === void 0 ? void 0 : this.vehicleInformation) === null || _k === void 0 ? void 0 : _k.vehicleSpecification) === null || _l === void 0 ? void 0 : _l.variantDesc) || '...'), ['identifiers.katashiki', 'vehicleVariantInfo.modelYear', 'vehicleVariantInfo.sfx'].map(infoPath => {
98
85
  var _a;
99
86
  const [place, field] = infoPath.split('.');
100
87
  const cellValue = (_a = this === null || this === void 0 ? void 0 : this.vehicleInformation) === null || _a === void 0 ? void 0 : _a[place][field].toString();
@@ -110,6 +110,7 @@ const WarrantyDetails = class {
110
110
  this.vehicleInformation = undefined;
111
111
  this.checkingUnauthorizedSSC = false;
112
112
  this.recaptchaRes = null;
113
+ this.headers = {};
113
114
  }
114
115
  handleSettingData(response) {
115
116
  var _a, _b, _c;
@@ -142,7 +143,6 @@ const WarrantyDetails = class {
142
143
  if (this.isDev) {
143
144
  this.checkingUnauthorizedSSC = true;
144
145
  this.showRecaptcha = false;
145
- //this.calculateHeight(this.state);
146
146
  await new Promise(r => setTimeout(r, 3000));
147
147
  this.checkingUnauthorizedSSC = false;
148
148
  const hasPendingSSC = Math.random() < 0.5 ? false : true;
@@ -150,17 +150,14 @@ const WarrantyDetails = class {
150
150
  hasSSC: hasPendingSSC,
151
151
  message: hasPendingSSC ? 'This Vehicle has a Pending SSC' : 'No Pending SSC',
152
152
  };
153
- //this.calculateHeight(this.state);
154
153
  }
155
154
  else {
156
155
  this.checkingUnauthorizedSSC = true;
157
156
  this.showRecaptcha = false;
158
- //this.calculateHeight(this.state);
157
+ ///
159
158
  const response = await fetch(`${this.unauthorizedSscLookupBaseUrl}${vin}/${(_a = this.vehicleInformation) === null || _a === void 0 ? void 0 : _a.sscLogId}?${this.unauthorizedSscLookupQueryString}`, {
160
159
  signal: this.abortController.signal,
161
- headers: {
162
- 'Ssc-Recaptcha-Token': recaptchaResponse,
163
- },
160
+ headers: Object.assign(Object.assign({}, this.headers), { 'Ssc-Recaptcha-Token': recaptchaResponse }),
164
161
  });
165
162
  const vinResponse = await response.json();
166
163
  if (vinResponse && this.networkTimeoutRef === scopedTimeoutRef) {
@@ -170,7 +167,6 @@ const WarrantyDetails = class {
170
167
  hasSSC: hasPendingSSC,
171
168
  message: hasPendingSSC ? 'This Vehicle has a Pending SSC' : 'No Pending SSC',
172
169
  };
173
- //this.calculateHeight(this.state);
174
170
  }
175
171
  else
176
172
  throw new Error('Wrong response format');
@@ -185,6 +181,7 @@ const WarrantyDetails = class {
185
181
  }
186
182
  async setData(newData, headers = {}) {
187
183
  this.recaptchaRes = null;
184
+ this.headers = headers;
188
185
  clearTimeout(this.networkTimeoutRef);
189
186
  clearInterval(this.recaptchaIntervalRef);
190
187
  if (this.abortController)
@@ -196,7 +193,6 @@ const WarrantyDetails = class {
196
193
  this.externalVin = vin;
197
194
  try {
198
195
  if (!vin || vin.trim().length === 0) {
199
- //this.componentHeight = '0px';
200
196
  this.state = 'idle';
201
197
  return;
202
198
  }
@@ -240,39 +236,19 @@ const WarrantyDetails = class {
240
236
  document.head.appendChild(script);
241
237
  }
242
238
  }
243
- //calculateHeight(componentState: string) {
244
- // if (componentState.includes('loading') && this.componentHeight === '0px') {
245
- // this.componentHeight = '100px';
246
- // } else if (componentState !== 'idle') {
247
- // setTimeout(() => {
248
- // this.componentHeight = `${this.wrapperRef.clientHeight}px`;
249
- // }, 50);
250
- // } else {
251
- // this.componentHeight = '0px';
252
- // }
253
- //}
254
239
  async setMockData(newMockData) {
255
240
  mockData = newMockData;
256
241
  }
257
- onShowSscChange() {
258
- //this.calculateHeight(this.state);
259
- }
260
- onShowWarrantyChange() {
261
- //this.calculateHeight(this.state);
262
- }
263
242
  async loadingListener() {
264
- //this.calculateHeight(newState);
265
243
  if (this.loadingStateChange)
266
244
  this.loadingStateChange(this.state.includes('loading'));
267
245
  }
268
246
  render() {
269
247
  var _a, _b, _c, _d, _e;
270
- return (index.h(index.Host, { key: '788b8a8ffbca4b31a40ab95655fabcb41f0d83df' }, index.h("div", { key: 'ed92ce80c844eb884cd872f58894136c47fb7c4c', class: "min-h-[100px] warranty" }, index.h("div", { key: '016013ecfba73d87df136580fffe5e2e07aaf958' }, index.h(Loading, { key: '3b8de918e7a315e843b8bc42942fc14b57216c94', isLoading: this.state.includes('loading') }), index.h("div", { key: '4c5f2ad067fcfd199ae1c69765509e6bbb1944f4', 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) && (index.h("div", { key: '5174d6380ed09d1e003cbd58d544b9838eaf8b16', 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) && (index.h("div", { key: '9ca23b51fa38b8ae7900c0283d84a27f485e9e87', class: "py-4" }, index.h(StatusCard, { key: '304a1c83cb397b42d297abbbda51c925246105ec', desc: this.errorMessage, className: "mx-auto reject-card max-w-500" }), ' ')), this.showWarranty && ['data', 'data-loading'].includes(this.state) && (index.h(CardsContainer, { key: '542c2cdfb222054604ef7b9ab3614c69339027ed', 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 })), index.h("div", { key: '56c5529bbf8b264b5bc1568b4b9aa3cf687e6915', style: Object.assign({}, (this.showRecaptcha ? { height: 'auto', padding: '16px 16px 0px 16px' } : { height: '0px' })), class: "recaptcha-container" }, index.h("slot", { key: '0211fb8f130efc788e73524c4cd6f79702458aaf' })), ['data', 'data-loading'].includes(this.state) && this.recaptchaRes && (index.h("div", { key: 'cc1e03101e506ffb831e0ad6adacaf86b8c542fe', class: cn.cn('recaptcha-response', !this.recaptchaRes.hasSSC ? 'success-card' : 'reject-card ') }, this.recaptchaRes.message)), this.checkingUnauthorizedSSC && (index.h("div", { key: '557261d532b671e5813c0259e623647a802851a0', class: "loading-spinner", style: { marginTop: '20px', flexDirection: 'column' } }, index.h("div", { key: '1e8a78a692a8b9171cdd201d34aca99a253d0781' }, index.h("strong", { key: '967e34d989ebacb6f4b469fa11c73ae165426fa4' }, "Checking TMC")), index.h("img", { key: '112de8a206bb8877b6cd71ba437755bfc56720be', class: "spin", src: loader.loaderSvg }))), 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) && (index.h(SSCTable, { key: '903b7a27b9093657aa7a2f11a8677ea825fb1d90', ssc: this.vehicleInformation.ssc })))))));
248
+ return (index.h(index.Host, { key: '3c8f75a5285bcae20b14896f48219478873dc56f' }, index.h("div", { key: 'b87f7c2301163f6a8a59ea30005bf5fdce3084b3', class: "min-h-[100px] warranty" }, index.h("div", { key: '2e9eca00ba1b2b5a362966ce7bec90118a255be4' }, index.h(Loading, { key: 'e0dcf745ea9409ffd55f54a2b304bf448f00981d', isLoading: this.state.includes('loading') }), index.h("div", { key: 'ae2feac973e3ddfc3e8b38f1887f1f3ff2da0393', 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) && (index.h("div", { key: 'd27ea304918aad5f6fc6acce7ea4b4da89be5d7b', 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) && (index.h("div", { key: '1f797e76bb68d350ff3b071a11d94cd72f031569', class: "py-4" }, index.h(StatusCard, { key: '4f674cc1259a7628bb565f737575108ef1882569', desc: this.errorMessage, className: "mx-auto reject-card max-w-500" }), ' ')), this.showWarranty && ['data', 'data-loading'].includes(this.state) && (index.h(CardsContainer, { key: '7c47e8a2c5dd921af1df7f8d2453a3897709dde3', 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 })), index.h("div", { key: '250484f60f45bc8470c074056cbd567017fb1fcd', style: Object.assign({}, (this.showRecaptcha ? { height: 'auto', padding: '16px 16px 0px 16px' } : { height: '0px' })), class: "recaptcha-container" }, index.h("slot", { key: '4e728a717fdc8b34a6c861a40ff0cf7ec9dacf95' })), ['data', 'data-loading'].includes(this.state) && this.recaptchaRes && (index.h("div", { key: 'aa3134245674835812a638b4d8ccf6da1baafc13', class: cn.cn('recaptcha-response', !this.recaptchaRes.hasSSC ? 'success-card' : 'reject-card ') }, this.recaptchaRes.message)), this.checkingUnauthorizedSSC && (index.h("div", { key: '33c4511869c04b4780285f35e19efee5362b6240', class: "loading-spinner", style: { marginTop: '20px', flexDirection: 'column' } }, index.h("div", { key: '69c77e7eff03943790b00030068ec3b25c86fb25' }, index.h("strong", { key: 'a6b3cf9c81dc0cf5dcad68189827428511eb289f' }, "Checking TMC")), index.h("img", { key: '812b2eb0ca00baa596ccf6e6e5e4943dccc89159', class: "spin", src: loader.loaderSvg }))), 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) && (index.h(SSCTable, { key: 'be4c7f932929fc7aff56eb3fb6c45e5d2bd3ff1d', ssc: this.vehicleInformation.ssc })))))));
271
249
  }
272
250
  get el() { return index.getElement(this); }
273
251
  static get watchers() { return {
274
- "showSsc": ["onShowSscChange"],
275
- "showWarranty": ["onShowWarrantyChange"],
276
252
  "state": ["loadingListener"]
277
253
  }; }
278
254
  };
@@ -51,7 +51,6 @@ export class PaintThickness {
51
51
  this.externalVin = vin;
52
52
  try {
53
53
  if (!vin || vin.trim().length === 0) {
54
- //this.componentHeight = '0px';
55
54
  this.state = 'idle';
56
55
  return;
57
56
  }
@@ -84,19 +83,7 @@ export class PaintThickness {
84
83
  async fetchData(requestedVin = this.externalVin, headers = {}) {
85
84
  await this.setData(requestedVin, headers);
86
85
  }
87
- //calculateHeight(componentState: string) {
88
- // if (componentState.includes('loading') && this.componentHeight === '0px') {
89
- // this.componentHeight = '100px';
90
- // } else if (componentState !== 'idle') {
91
- // setTimeout(() => {
92
- // this.componentHeight = `${this.wrapperRef.clientHeight}px`;
93
- // }, 50);
94
- // } else {
95
- // this.componentHeight = '0px';
96
- // }
97
- //}
98
86
  async loadingListener() {
99
- //this.calculateHeight(newState);
100
87
  if (this.loadingStateChange)
101
88
  this.loadingStateChange(this.state.includes('loading'));
102
89
  }
@@ -106,11 +93,11 @@ export class PaintThickness {
106
93
  render() {
107
94
  var _a, _b;
108
95
  const { imageGroups, parts } = (this === null || this === void 0 ? void 0 : this.vehicleInformation) ? (_a = this === null || this === void 0 ? void 0 : this.vehicleInformation) === null || _a === void 0 ? void 0 : _a.paintThickness : { imageGroups: [], parts: [] };
109
- return (h(Host, { key: '27ef74f7d3b896fee2b8ec9ea45cabd06771e55f' }, h("div", { key: 'a9d29e02c453d06d1ab3989150ec4a68b4823692', class: "min-h-[100px] relative transition-all duration-300 overflow-hidden" }, h("div", { key: '1a08070d1a9a1899de09dd07f38c8361a6cda178' }, h(Loading, { key: '10897e5c10e7f992f76469d16df7ded2c31c19c3', isLoading: this.state.includes('loading') }), h("div", { key: '5bec28c51b9b07cc8eb2aa137be0b147d8325367', class: cn('transition-all duration-700', { 'scale-0': this.state.includes('loading') || this.state === 'idle', 'opacity-0': this.state.includes('loading') }) }, h("div", { key: '475dcd3dbee8d3fa23aedfbe7b5bec441c0f1b27', class: cn('text-center pt-[4px] text-[20px]', { 'text-red-600': !!this.errorMessage }) }, (_b = this.vehicleInformation) === null || _b === void 0 ? void 0 : _b.vin), ['error', 'error-loading'].includes(this.state) && (h("div", { key: 'b2bf022b4305f0363bbfbbd2e46a4c72736a9b07', class: "py-[16px]" }, h("div", { key: '69ff9a1dbf40e4ab1741ba4feb26ae90eea35e39', class: " px-[16px] py-[8px] border reject-card text-[20px] rounded-[8px] w-fit mx-auto" }, this.errorMessage))), ['data', 'data-loading'].includes(this.state) && (h("div", { key: 'f63916046b17e946708a81b4697d2dafcee6857c', class: "flex mt-[12px] w-full max-h-[70dvh] overflow-hidden mx-auto rounded-[4px] flex-col border border-[#d6d8dc]" }, h("div", { key: '058d7e1ec5c93f183baf62a9e84eac5e28c3fb81', class: "w-full h-[40px] flex shrink-0 justify-center text-[18px] items-center text-[#383c43] text-center bg-[#e1e3e5]" }, "Paint Thickeness"), h("div", { key: '36c9a6ff73d058272be62336a6f36845cdd8d86a', class: "h-0 overflow-auto flex-1" }, !parts.length && h("div", { key: '28236c4b032136da2d69ecf9bbfd428d326ea948', class: "h-[50px] px-[30px] flex items-center justify-center text-[18px]" }, "No parts are available."), !!parts.length && (h("table", { key: 'bd6966dd901c94b5b07396a471a9589077e267a6', class: "w-full overflow-auto relative border-collapse" }, h("thead", { key: 'fa810cf4a8e359dcfa5e558aa54760a066339b73', class: "top-0 font-bold sticky bg-white" }, h("tr", { key: 'c4d34f474f30c08c32b1dedadefd050b8da13a3f' }, ['Part', 'Left', 'Right'].map(title => (h("th", { key: title, class: "px-[15px] min-w-[100px] py-[15px] text-center whitespace-nowrap border-b border-[#d6d8dc]" }, title))))), h("tbody", { key: '65c5905e2e8a84cf3bc9a23db6d6561df877aedf' }, parts.map((part, idx) => (h("tr", { class: "transition-colors duration-100 hover:bg-slate-100", key: part.part }, ['part', 'left', 'right'].map(key => (h("td", { key: part.part + key, class: cn('px-[10px] py-[20px] text-center whitespace-nowrap border-b border-[#d6d8dc]', {
96
+ return (h(Host, { key: 'dd25115d7451c326da5411d30b8cebeac06ea3b4' }, h("div", { key: 'ebec5094a98846ffbe00abcbdc5bb5b987262548', class: "min-h-[100px] relative transition-all duration-300 overflow-hidden" }, h("div", { key: '67d4926b51399a2f990251d95a58558d07c64865' }, h(Loading, { key: 'd56bac7fe821253d2d9aea3a31e19a55002dc1ce', isLoading: this.state.includes('loading') }), h("div", { key: '27b2f517a1f974182c5704d9682213662f3dd2d3', class: cn('transition-all duration-700', { 'scale-0': this.state.includes('loading') || this.state === 'idle', 'opacity-0': this.state.includes('loading') }) }, h("div", { key: 'f9bdf1767f4e8d6f24f018a60649f54b75151de2', class: cn('text-center pt-[4px] text-[20px]', { 'text-red-600': !!this.errorMessage }) }, (_b = this.vehicleInformation) === null || _b === void 0 ? void 0 : _b.vin), ['error', 'error-loading'].includes(this.state) && (h("div", { key: 'd2b739c8f39501a2335a312b6c9d0a0431104300', class: "py-[16px]" }, h("div", { key: '06e78434d8122f36a26faa5fed05a64d759c18c3', class: " px-[16px] py-[8px] border reject-card text-[20px] rounded-[8px] w-fit mx-auto" }, this.errorMessage))), ['data', 'data-loading'].includes(this.state) && (h("div", { key: 'f17f4c019ed1357fb40f6f32c125918ab24069ce', class: "flex mt-[12px] w-full max-h-[70dvh] overflow-hidden mx-auto rounded-[4px] flex-col border border-[#d6d8dc]" }, h("div", { key: 'b79eed13d13b7b91aff4aeb4b2280eb349592896', class: "w-full h-[40px] flex shrink-0 justify-center text-[18px] items-center text-[#383c43] text-center bg-[#e1e3e5]" }, "Paint Thickeness"), h("div", { key: 'aab4ba79f226602f913652e27341df333f5be00d', class: "h-0 overflow-auto flex-1" }, !parts.length && h("div", { key: 'edf880bf05cc8c31000960c1ee9471d166444541', class: "h-[50px] px-[30px] flex items-center justify-center text-[18px]" }, "No parts are available."), !!parts.length && (h("table", { key: 'ddac23c3ba00bb44e58f2b5dfaa11034d4f13594', class: "w-full overflow-auto relative border-collapse" }, h("thead", { key: 'c39718f9cd059c765c51b90ba2f2f4e570b9778b', class: "top-0 font-bold sticky bg-white" }, h("tr", { key: 'ba28cd9cadfc036162a735d7353a089a581a8559' }, ['Part', 'Left', 'Right'].map(title => (h("th", { key: title, class: "px-[15px] min-w-[100px] py-[15px] text-center whitespace-nowrap border-b border-[#d6d8dc]" }, title))))), h("tbody", { key: '6049aecd19316b1d7e1c79606d7cf304b0b260ec' }, parts.map((part, idx) => (h("tr", { class: "transition-colors duration-100 hover:bg-slate-100", key: part.part }, ['part', 'left', 'right'].map(key => (h("td", { key: part.part + key, class: cn('px-[10px] py-[20px] text-center whitespace-nowrap border-b border-[#d6d8dc]', {
110
97
  '!border-none': idx === parts.length - 1,
111
- }) }, part[key] || '...')))))))))))), ['data', 'data-loading'].includes(this.state) && (h("div", { key: '4297103d40bfc9642958065df2d5bd9a2f558634' }, !imageGroups.length && h("div", { key: '1573a3b1715217cb5af0097f0a8d8eea6b560ce7', class: "h-[40px] px-[30px] flex text-red-500 items-center justify-center text-[18px]" }, "No image groups are available."), !!imageGroups.length && (h("div", { key: '11f0a30c184766471e1e9dd0bfac5f96a612f279', class: "py-[16px] gap-[16px] justify-center flex flex-wrap px-[24px] w-full" }, imageGroups.map(imageGroup => (h("div", { class: "shrink-0 rounded-lg shadow-sm border overflow-hidden flex flex-col", key: imageGroup.name }, h("h1", { class: "text-center border-b bg-slate-200 font-semibold p-[6px]" }, imageGroup.name), h("div", { class: "flex p-[12px] gap-[8px]" }, imageGroup.images.map(image => (h("div", { class: "flex gap-[8px]", key: image }, h("button", { onClick: ({ target }) => this.openImage(target, image), class: "shrink-0 relative ring-0 outline-none w-fit mx-auto [&_img]:hover:shadow-lg [&_div]:hover:!opacity-100 cursor-pointer" }, h("div", { class: "absolute flex-col justify-center gap-[4px] size-full flex items-center pointer-events-none hover:opacity-100 rounded-lg opacity-0 bg-black/40 transition-all duration-300" }, h("img", { src: Eye }), h("span", { class: "text-white" }, "Expand")), h("img", { class: "w-auto h-[150px] cursor-pointer shadow-sm rounded-lg transition-all duration-300", src: image }))))))))), h("div", { key: '6920779802a4da3d9399619e6ee9c788db3b204c', onClick: () => this.closeImage(), style: { backdropFilter: this.expandedImage ? 'blur(3px)' : 'blur(0px)' }, class: cn('pointer-events-none w-[100dvw] h-[100dvh] fixed top-0 z-10 left-0 opacity-0 bg-black/40 transition-all duration-400', {
98
+ }) }, part[key] || '...')))))))))))), ['data', 'data-loading'].includes(this.state) && (h("div", { key: '73bfbe41ad8f91591c23b0dccd7be84b4505ede8' }, !imageGroups.length && h("div", { key: '33c2491e22faf7a5f11b6ec2ee62a1b758123b8e', class: "h-[40px] px-[30px] flex text-red-500 items-center justify-center text-[18px]" }, "No image groups are available."), !!imageGroups.length && (h("div", { key: '02103207298b679bdbe8d336c70d2cb8936087a4', class: "py-[16px] gap-[16px] justify-center flex flex-wrap px-[24px] w-full" }, imageGroups.map(imageGroup => (h("div", { class: "shrink-0 rounded-lg shadow-sm border overflow-hidden flex flex-col", key: imageGroup.name }, h("h1", { class: "text-center border-b bg-slate-200 font-semibold p-[6px]" }, imageGroup.name), h("div", { class: "flex p-[12px] gap-[8px]" }, imageGroup.images.map(image => (h("div", { class: "flex gap-[8px]", key: image }, h("button", { onClick: ({ target }) => this.openImage(target, image), class: "shrink-0 relative ring-0 outline-none w-fit mx-auto [&_img]:hover:shadow-lg [&_div]:hover:!opacity-100 cursor-pointer" }, h("div", { class: "absolute flex-col justify-center gap-[4px] size-full flex items-center pointer-events-none hover:opacity-100 rounded-lg opacity-0 bg-black/40 transition-all duration-300" }, h("img", { src: Eye }), h("span", { class: "text-white" }, "Expand")), h("img", { class: "w-auto h-[150px] cursor-pointer shadow-sm rounded-lg transition-all duration-300", src: image }))))))))), h("div", { key: '7e239537ed9d3b07119fbf15fcb8cb238280c095', onClick: () => this.closeImage(), style: { backdropFilter: this.expandedImage ? 'blur(3px)' : 'blur(0px)' }, class: cn('pointer-events-none w-[100dvw] h-[100dvh] fixed top-0 z-10 left-0 opacity-0 bg-black/40 transition-all duration-400', {
112
99
  'pointer-events-auto opacity-100 delay-200': this.expandedImage,
113
- }) }, h("button", { key: 'e6e11c7cf4ff71de129d92977f2971eb6f9b9268', class: "flex flex-col mt-[16px] items-center justify-center size-12 float-right mr-[16px]", onClick: () => this.closeImage() }, h("div", { key: 'cad4548287110796c756160c79a43ea0eb3f22d3', class: "h-1 w-12 rounded-full rotate-45 absolute bg-white" }), h("div", { key: 'c117d12d51b4058a392e80802630896aeca7192f', class: "h-1 w-12 rounded-full -rotate-45 absolute bg-white" }))), h("img", { key: 'a900ecc78d2b3ab5aaaf42f23469fe3fa4b07db2', alt: "", id: "expanded-image", class: "fixed opacity-0 z-40 transition-all rounded-lg" }))))))))));
100
+ }) }, h("button", { key: 'a961871288f09b8776ca9530a6e5ae56133cb3bc', class: "flex flex-col mt-[16px] items-center justify-center size-12 float-right mr-[16px]", onClick: () => this.closeImage() }, h("div", { key: '6db275131cf9b431540c2402552449a4ca2d4289', class: "h-1 w-12 rounded-full rotate-45 absolute bg-white" }), h("div", { key: '1b0c9149a6d22c436e89baf35fb146c08d13a40a', class: "h-1 w-12 rounded-full -rotate-45 absolute bg-white" }))), h("img", { key: '38939c47ad696305c5cc2b3ccb4c72112eea2cce', alt: "", id: "expanded-image", class: "fixed opacity-0 z-40 transition-all rounded-lg" }))))))))));
114
101
  }
115
102
  static get is() { return "paint-thickness"; }
116
103
  static get encapsulation() { return "shadow"; }
@@ -1 +1 @@
1
- *,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: ;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.block{display:block}.flex{display:flex}.hidden{display:none}.max-h-screen{max-height:100vh}.rotate-180{--tw-rotate:180deg}.rotate-180,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}:host{all:initial!important;display:block}*{font-family:Arial}.accordion-item{border-bottom:1px solid #e2e8f0}.accordion-header{align-items:center;cursor:pointer;display:flex;justify-content:space-between;width:100%}.accordion-content{max-height:0;overflow:hidden;transition:max-height .3s ease-in-out}.accordion-content.max-h-screen{max-height:1000px}.icon{transition:transform .3s ease-in-out}.icon.rotate-180{transform:rotate(180deg)}.static{position:static}.relative{position:relative}.mx-auto{margin-left:auto;margin-right:auto}.mt-\[12px\]{margin-top:12px}.table{display:table}.h-4{height:1rem}.h-\[40px\]{height:40px}.max-h-0{max-height:0}.max-h-\[70dvh\]{max-height:70dvh}.min-h-\[100px\]{min-height:100px}.w-4{width:1rem}.w-fit{width:fit-content}.w-full{width:100%}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.rotate-180,.scale-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))}.scale-0{--tw-scale-x:0;--tw-scale-y:0}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.whitespace-nowrap{white-space:nowrap}.rounded-\[4px\]{border-radius:4px}.rounded-\[8px\]{border-radius:8px}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-\[\#d6d8dc\]{--tw-border-opacity:1;border-color:rgb(214 216 220/var(--tw-border-opacity,1))}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity,1))}.bg-\[\#e1e3e5\]{--tw-bg-opacity:1;background-color:rgb(225 227 229/var(--tw-bg-opacity,1))}.px-\[10px\]{padding-left:10px;padding-right:10px}.px-\[16px\]{padding-left:16px;padding-right:16px}.py-5{padding-bottom:1.25rem;padding-top:1.25rem}.py-\[16px\]{padding-bottom:16px;padding-top:16px}.py-\[20px\]{padding-bottom:20px;padding-top:20px}.py-\[8px\]{padding-bottom:8px;padding-top:8px}.text-left{text-align:left}.text-center{text-align:center}.text-\[18px\]{font-size:18px}.text-\[20px\]{font-size:20px}.text-\[\#383c43\]{--tw-text-opacity:1;color:rgb(56 60 67/var(--tw-text-opacity,1))}.text-slate-800{--tw-text-opacity:1;color:rgb(30 41 59/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)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-100{transition-duration:.1s}.duration-300{transition-duration:.3s}.duration-700{transition-duration:.7s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.reject-card{background-color:#f7d7d8;border-color:#f2aeb5;color:#58151c}.hover\:bg-slate-100:hover{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.z-50{z-index:50}.size-\[40px\]{height:40px;width:40px}.size-full{height:100%;width:100%}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin-2s{animation:spin 2s linear infinite}
1
+ *,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: ;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.block{display:block}:host{all:initial!important;display:block}*{font-family:Arial}.static{position:static}.relative{position:relative}.mx-auto{margin-left:auto;margin-right:auto}.mb-\[10px\]{margin-bottom:10px}.mt-\[12px\]{margin-top:12px}.flex{display:flex}.table{display:table}.size-\[22px\]{height:22px;width:22px}.h-\[40px\]{height:40px}.max-h-\[70dvh\]{max-height:70dvh}.min-h-\[100px\]{min-height:100px}.w-fit{width:fit-content}.w-full{width:100%}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.scale-0{--tw-scale-x:0;--tw-scale-y:0}.scale-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))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.whitespace-nowrap{white-space:nowrap}.rounded-\[4px\]{border-radius:4px}.rounded-\[8px\]{border-radius:8px}.rounded-md{border-radius:.375rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-\[\#d6d8dc\]{--tw-border-opacity:1;border-color:rgb(214 216 220/var(--tw-border-opacity,1))}.bg-\[\#e1e3e5\]{--tw-bg-opacity:1;background-color:rgb(225 227 229/var(--tw-bg-opacity,1))}.px-\[10px\]{padding-left:10px;padding-right:10px}.px-\[16px\]{padding-left:16px;padding-right:16px}.px-\[20px\]{padding-left:20px;padding-right:20px}.py-\[10px\]{padding-bottom:10px;padding-top:10px}.py-\[16px\]{padding-bottom:16px;padding-top:16px}.py-\[20px\]{padding-bottom:20px;padding-top:20px}.py-\[8px\]{padding-bottom:8px;padding-top:8px}.text-left{text-align:left}.text-center{text-align:center}.text-\[18px\]{font-size:18px}.text-\[20px\]{font-size:20px}.text-\[\#383c43\]{--tw-text-opacity:1;color:rgb(56 60 67/var(--tw-text-opacity,1))}.text-slate-800{--tw-text-opacity:1;color:rgb(30 41 59/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)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-100{transition-duration:.1s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.duration-700{transition-duration:.7s}.reject-card{background-color:#f7d7d8;border-color:#f2aeb5;color:#58151c}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.last\:border-none:last-child{border-style:none}.hover\:bg-slate-100:hover{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.z-50{z-index:50}.size-\[40px\]{height:40px;width:40px}.size-full{height:100%;width:100%}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin-2s{animation:spin 2s linear infinite}
@@ -7,10 +7,11 @@ import { getPartInformation } from "../../global/api/partInformation";
7
7
  import Loading from "../parts/Loading";
8
8
  import cn from "../../global/lib/cn";
9
9
  let mockData = {};
10
+ const closedAccordionHeight = '46px';
10
11
  export class DeadStockLookup {
11
12
  constructor() {
12
- this.isDev = false;
13
13
  this.baseUrl = '';
14
+ this.isDev = false;
14
15
  this.queryString = '';
15
16
  this.loadingStateChange = undefined;
16
17
  this.loadedResponse = undefined;
@@ -18,14 +19,10 @@ export class DeadStockLookup {
18
19
  this.externalPartNumber = null;
19
20
  this.errorMessage = null;
20
21
  this.partInformation = undefined;
21
- this.activeIndex = null;
22
22
  }
23
23
  handleSettingData(response) {
24
24
  this.partInformation = response;
25
25
  }
26
- toggleAccordion(index) {
27
- this.activeIndex = this.activeIndex === index ? null : index;
28
- }
29
26
  async setData(newData, headers = {}) {
30
27
  clearTimeout(this.networkTimeoutRef);
31
28
  if (this.abortController)
@@ -37,7 +34,6 @@ export class DeadStockLookup {
37
34
  this.externalPartNumber = partNumber;
38
35
  try {
39
36
  if (!partNumber || partNumber.trim().length === 0) {
40
- //this.componentHeight = '0px';
41
37
  this.state = 'idle';
42
38
  return;
43
39
  }
@@ -71,17 +67,33 @@ export class DeadStockLookup {
71
67
  await this.setData(partNumber, headers);
72
68
  }
73
69
  async loadingListener() {
74
- //this.calculateHeight(newState);
75
70
  if (this.loadingStateChange)
76
71
  this.loadingStateChange(this.state.includes('loading'));
77
72
  }
78
73
  async setMockData(newMockData) {
79
74
  mockData = newMockData;
80
75
  }
76
+ toggleAccordion(event) {
77
+ const container = event.target.parentElement;
78
+ const icon = container.getElementsByClassName('icon')[0];
79
+ const isExpanded = container.getAttribute('aria-expanded') === 'true';
80
+ if (isExpanded) {
81
+ container.style.height = closedAccordionHeight;
82
+ icon.style.transform = 'rotate(0deg)';
83
+ container.setAttribute('aria-expanded', 'false');
84
+ }
85
+ else {
86
+ const content = container.getElementsByClassName('content')[0];
87
+ const totalHeight = +closedAccordionHeight.replace('px', '') + content.getClientRects()[0].height;
88
+ container.style.height = `${totalHeight}px`;
89
+ icon.style.transform = 'rotate(180deg)';
90
+ container.setAttribute('aria-expanded', 'true');
91
+ }
92
+ }
81
93
  render() {
82
94
  var _a, _b;
83
- return (h(Host, { key: '3a3c612f26d4a50303a00056983a967b2215ed27' }, h("div", { key: 'fbbef3d5226e849ad7fc864c62b581f4c9dff507', class: "min-h-[100px] relative transition-all duration-300 overflow-hidden" }, h("div", { key: 'b5059f256646d672ddd0d1c09a4de3c8b5e66dc0' }, h(Loading, { key: '311ba459650a88d1c87f45963b81748885055cf6', isLoading: this.state.includes('loading') }), h("div", { key: '5a9de2b501e5d6e33da6b9581be2a5c34327a2e5', class: cn('transition-all duration-700', { 'scale-0': this.state.includes('loading') || this.state === 'idle', 'opacity-0': this.state.includes('loading') }) }, ['error', 'error-loading'].includes(this.state) && (h("div", { key: 'c49cac2c5a97860ce92ef7ca3ca8bd71866d9168', class: "py-[16px]" }, h("div", { key: '3f00000ec1798ee3afc0a9c135e56470220a8b40', class: " px-[16px] py-[8px] border reject-card text-[20px] rounded-[8px] w-fit mx-auto" }, this.errorMessage))), ['data', 'data-loading'].includes(this.state) && (h("div", { key: '9d31d42ac64f1fae58e8e6e802f62fe3bb29bf5c' }, h("div", { key: 'bac3865cb1e2570e2b20193ff0ffb474fad0a57c', class: "flex mt-[12px] max-h-[70dvh] overflow-hidden rounded-[4px] flex-col border border-[#d6d8dc]" }, h("div", { key: '0d4537c5db76475425e6862837ce49f60c0cbc76', class: "w-full h-[40px] flex shrink-0 justify-center text-[18px] items-center text-[#383c43] text-center bg-[#e1e3e5]" }, "Deadstock"), (_b = (_a = this.partInformation) === null || _a === void 0 ? void 0 : _a.deadStock) === null || _b === void 0 ? void 0 :
84
- _b.map((deadStock, i) => (h("div", { style: { padding: '10px 20px' } }, h("div", { class: "accordion-item border-b border-slate-200", style: { boxShadow: 'rgb(225 225 225) 0px 0px 4px 1px', borderRadius: '5px', padding: '0 10px', marginBottom: '10px' }, key: deadStock.companyIntegrationID }, h("button", { class: "accordion-header w-full flex justify-between items-center py-5 text-slate-800", onClick: () => this.toggleAccordion(i) }, h("strong", null, deadStock.companyName), h("span", { class: `icon text-slate-800 transition-transform duration-300 ${this.activeIndex === i ? 'rotate-180' : ''}` }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", class: "w-4 h-4" }, h("path", { "fill-rule": "evenodd", d: "M11.78 9.78a.75.75 0 0 1-1.06 0L8 7.06 5.28 9.78a.75.75 0 0 1-1.06-1.06l3.25-3.25a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06Z", "clip-rule": "evenodd" })))), h("div", { class: `accordion-content overflow-hidden transition-all duration-300 ease-in-out ${this.activeIndex === i ? 'max-h-screen' : 'max-h-0'}` }, h("table", { class: "w-full overflow-auto relative border-collapse" }, h("thead", null, h("tr", null, h("th", { class: "px-[10px] py-[20px] text-left whitespace-nowrap border-b border-[#d6d8dc]" }, "Branch"), h("th", { class: "px-[10px] py-[20px] text-left whitespace-nowrap border-b border-[#d6d8dc]" }, "Available Qty"))), h("tbody", null, deadStock === null || deadStock === void 0 ? void 0 : deadStock.branchDeadStock.map(branchDeadStock => (h("tr", { class: "transition-colors duration-100 hover:bg-slate-100", key: branchDeadStock.companyBranchIntegrationID }, h("td", { class: cn('px-[10px] py-[20px] text-left whitespace-nowrap border-b border-[#d6d8dc]') }, branchDeadStock.companyBranchName), h("td", { class: cn('px-[10px] py-[20px] text-left whitespace-nowrap border-b border-[#d6d8dc]') }, h("strong", null, branchDeadStock.quantity))))))))))))))))))));
95
+ return (h(Host, { key: 'f868a1c81dc98548642bb3baf78bc96d0a602c6a' }, h("div", { key: 'a868a68dc54e4a5463ad6395e209e6538f972960', class: "min-h-[100px] relative transition-all duration-300 overflow-hidden" }, h("div", { key: 'c5cc22080a9c9ebc4b55dd038bfbc263c3cf4dd1' }, h(Loading, { key: 'c2d039a04fc763b329fd3d0ad0e70c68a2a3d716', isLoading: this.state.includes('loading') }), h("div", { key: 'f29a10d23d05c5266880fdb1f3c1618e87e1379d', class: cn('transition-all duration-700', { 'scale-0': this.state.includes('loading') || this.state === 'idle', 'opacity-0': this.state.includes('loading') }) }, ['error', 'error-loading'].includes(this.state) && (h("div", { key: 'd886904d0fe6521ea5a068a8a04b0828605c0264', class: "py-[16px]" }, h("div", { key: 'e59d14518de70ebbb5da2588199e5be6ff20d6d7', class: " px-[16px] py-[8px] border reject-card text-[20px] rounded-[8px] w-fit mx-auto" }, this.errorMessage))), ['data', 'data-loading'].includes(this.state) && (h("div", { key: '7b088662fc257bb3284a01fb492c0b976ef78a44' }, h("div", { key: '93df28e47a2ac1384606072e4fa1e4748d5f539a', class: "flex mt-[12px] max-h-[70dvh] overflow-hidden rounded-[4px] flex-col border border-[#d6d8dc]" }, h("div", { key: '0ccf2ca8e0761803289e0b07961c0ae294f27fd2', class: "w-full h-[40px] flex shrink-0 justify-center text-[18px] items-center text-[#383c43] text-center bg-[#e1e3e5]" }, "Dead stock"), (_b = (_a = this.partInformation) === null || _a === void 0 ? void 0 : _a.deadStock) === null || _b === void 0 ? void 0 :
96
+ _b.map(deadStock => (h("div", { key: deadStock.companyIntegrationID, class: "py-[10px] px-[20px]" }, h("div", { "aria-expanded": "false", style: { height: closedAccordionHeight }, class: "border shadow transition-all duration-500 overflow-hidden rounded-md mb-[10px] border-[#d6d8dc]" }, h("button", { onClick: this.toggleAccordion, style: { height: closedAccordionHeight }, class: "w-full flex px-[10px] justify-between items-center text-slate-800" }, h("strong", null, deadStock.companyName), h("span", { class: "icon text-slate-800 transition-transform duration-500" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", class: "size-[22px]" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.78 9.78a.75.75 0 0 1-1.06 0L8 7.06 5.28 9.78a.75.75 0 0 1-1.06-1.06l3.25-3.25a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06Z" })))), h("div", { class: "content" }, h("table", { class: "w-full overflow-auto relative border-collapse" }, h("thead", null, h("tr", null, h("th", { class: "py-[20px] px-[10px] text-left whitespace-nowrap border-b border-[#d6d8dc]" }, "Branch"), h("th", { class: "py-[20px] px-[10px] text-left whitespace-nowrap border-b border-[#d6d8dc]" }, "Available Qty"))), h("tbody", null, deadStock === null || deadStock === void 0 ? void 0 : deadStock.branchDeadStock.map(branchDeadStock => (h("tr", { class: "transition-colors border-b border-[#d6d8dc] last:border-none duration-100 hover:bg-slate-100", key: branchDeadStock.companyBranchIntegrationID }, h("td", { class: cn('py-[20px] px-[10px] text-left whitespace-nowrap') }, branchDeadStock.companyBranchName), h("td", { class: cn('py-[20px] px-[10px] text-left whitespace-nowrap') }, h("strong", null, branchDeadStock.quantity))))))))))))))))))));
85
97
  }
86
98
  static get is() { return "dead-stock-lookup"; }
87
99
  static get encapsulation() { return "shadow"; }
@@ -97,12 +109,12 @@ export class DeadStockLookup {
97
109
  }
98
110
  static get properties() {
99
111
  return {
100
- "isDev": {
101
- "type": "boolean",
112
+ "baseUrl": {
113
+ "type": "string",
102
114
  "mutable": false,
103
115
  "complexType": {
104
- "original": "boolean",
105
- "resolved": "boolean",
116
+ "original": "string",
117
+ "resolved": "string",
106
118
  "references": {}
107
119
  },
108
120
  "required": false,
@@ -111,16 +123,16 @@ export class DeadStockLookup {
111
123
  "tags": [],
112
124
  "text": ""
113
125
  },
114
- "attribute": "is-dev",
126
+ "attribute": "base-url",
115
127
  "reflect": false,
116
- "defaultValue": "false"
128
+ "defaultValue": "''"
117
129
  },
118
- "baseUrl": {
119
- "type": "string",
130
+ "isDev": {
131
+ "type": "boolean",
120
132
  "mutable": false,
121
133
  "complexType": {
122
- "original": "string",
123
- "resolved": "string",
134
+ "original": "boolean",
135
+ "resolved": "boolean",
124
136
  "references": {}
125
137
  },
126
138
  "required": false,
@@ -129,9 +141,9 @@ export class DeadStockLookup {
129
141
  "tags": [],
130
142
  "text": ""
131
143
  },
132
- "attribute": "base-url",
144
+ "attribute": "is-dev",
133
145
  "reflect": false,
134
- "defaultValue": "''"
146
+ "defaultValue": "false"
135
147
  },
136
148
  "queryString": {
137
149
  "type": "string",
@@ -194,8 +206,7 @@ export class DeadStockLookup {
194
206
  "state": {},
195
207
  "externalPartNumber": {},
196
208
  "errorMessage": {},
197
- "partInformation": {},
198
- "activeIndex": {}
209
+ "partInformation": {}
199
210
  };
200
211
  }
201
212
  static get methods() {
@@ -1 +1 @@
1
- *,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: ;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.block{display:block}:host{all:initial!important;display:block}*{font-family:Arial}.success{color:green}.warning{color:orange}.reject{color:red}.static{position:static}.relative{position:relative}.sticky{position:sticky}.top-0{top:0}.mx-auto{margin-left:auto;margin-right:auto}.mt-\[12px\]{margin-top:12px}.flex{display:flex}.table{display:table}.h-\[40px\]{height:40px}.max-h-\[70dvh\]{max-height:70dvh}.min-h-\[100px\]{min-height:100px}.w-fit{width:fit-content}.w-full{width:100%}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.scale-0{--tw-scale-x:0;--tw-scale-y:0;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.whitespace-nowrap{white-space:nowrap}.rounded-\[4px\]{border-radius:4px}.rounded-\[8px\]{border-radius:8px}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-\[\#d6d8dc\]{--tw-border-opacity:1;border-color:rgb(214 216 220/var(--tw-border-opacity,1))}.bg-\[\#e1e3e5\]{--tw-bg-opacity:1;background-color:rgb(225 227 229/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.px-\[10px\]{padding-left:10px;padding-right:10px}.px-\[16px\]{padding-left:16px;padding-right:16px}.py-\[16px\]{padding-bottom:16px;padding-top:16px}.py-\[20px\]{padding-bottom:20px;padding-top:20px}.py-\[8px\]{padding-bottom:8px;padding-top:8px}.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))}.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)}.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-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-100{transition-duration:.1s}.duration-300{transition-duration:.3s}.duration-700{transition-duration:.7s}.reject-card{background-color:#f7d7d8;border-color:#f2aeb5;color:#58151c}.hover\:bg-slate-100:hover{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.z-50{z-index:50}.size-\[40px\]{height:40px;width:40px}.size-full{height:100%;width:100%}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin-2s{animation:spin 2s linear infinite}
1
+ *,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: ;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.block{display:block}:host{all:initial!important;display:block}*{font-family:Arial}.static{position:static}.relative{position:relative}.sticky{position:sticky}.top-0{top:0}.mx-auto{margin-left:auto;margin-right:auto}.mt-\[12px\]{margin-top:12px}.flex{display:flex}.table{display:table}.h-\[40px\]{height:40px}.max-h-\[70dvh\]{max-height:70dvh}.min-h-\[100px\]{min-height:100px}.w-fit{width:fit-content}.w-full{width:100%}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.scale-0{--tw-scale-x:0;--tw-scale-y:0;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-\[15px\]{gap:15px}.gap-\[50px\]{gap:50px}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.whitespace-nowrap{white-space:nowrap}.rounded-\[4px\]{border-radius:4px}.rounded-\[8px\]{border-radius:8px}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-\[\#d6d8dc\]{--tw-border-opacity:1;border-color:rgb(214 216 220/var(--tw-border-opacity,1))}.border-b-\[gray\],.border-b-\[grey\]{--tw-border-opacity:1;border-bottom-color:rgb(128 128 128/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-0{padding-left:0;padding-right:0}.px-\[10px\]{padding-left:10px;padding-right:10px}.px-\[16px\]{padding-left:16px;padding-right:16px}.py-\[10px\]{padding-bottom:10px;padding-top:10px}.py-\[16px\]{padding-bottom:16px;padding-top:16px}.py-\[20px\]{padding-bottom:20px;padding-top:20px}.py-\[8px\]{padding-bottom:8px;padding-top:8px}.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-\[green\]{--tw-text-opacity:1;color:rgb(0 128 0/var(--tw-text-opacity,1))}.text-\[orange\]{--tw-text-opacity:1;color:rgb(255 165 0/var(--tw-text-opacity,1))}.text-\[red\]{--tw-text-opacity:1;color:rgb(255 0 0/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)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-100{transition-duration:.1s}.duration-300{transition-duration:.3s}.duration-700{transition-duration:.7s}.reject-card{background-color:#f7d7d8;border-color:#f2aeb5;color:#58151c}.last\:border-none:last-child{border-style:none}.hover\:bg-slate-100:hover{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.z-50{z-index:50}.size-\[40px\]{height:40px;width:40px}.size-full{height:100%;width:100%}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin-2s{animation:spin 2s linear infinite}