@ptcwebops/ptcw-design 5.1.5 → 5.1.7

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 (57) hide show
  1. package/dist/cjs/blog-detail-content_2.cjs.entry.js +1 -1
  2. package/dist/cjs/blog-detail-layout.cjs.entry.js +1 -1
  3. package/dist/cjs/icon-asset.cjs.entry.js +1 -1
  4. package/dist/cjs/ptc-card_2.cjs.entry.js +1 -1
  5. package/dist/cjs/ptc-data-lookup.cjs.entry.js +35 -17
  6. package/dist/cjs/ptc-filter-tag_2.cjs.entry.js +1 -1
  7. package/dist/cjs/ptc-form-checkbox_2.cjs.entry.js +185 -76
  8. package/dist/cjs/ptc-jumbotron.cjs.entry.js +1 -1
  9. package/dist/cjs/ptc-mobile-select.cjs.entry.js +3 -4
  10. package/dist/cjs/ptc-pricing-tabs.cjs.entry.js +1 -1
  11. package/dist/cjs/ptc-quantity-counter.cjs.entry.js +1 -1
  12. package/dist/collection/components/icon-asset/icon-asset.css +2 -2
  13. package/dist/collection/components/organism-bundles/blog-detail-content/blog-detail-content.css +1 -1
  14. package/dist/collection/components/organism-bundles/blog-detail-layout/blog-detail-layout.css +1 -1
  15. package/dist/collection/components/ptc-card/ptc-card.css +1 -1
  16. package/dist/collection/components/ptc-form-checkbox/ptc-form-checkbox.css +7 -7
  17. package/dist/collection/components/ptc-jumbotron/ptc-jumbotron.css +2 -2
  18. package/dist/collection/components/ptc-pagenation/ptc-pagenation.css +1 -1
  19. package/dist/collection/components/ptc-pricing-tabs/ptc-pricing-tabs.css +2 -2
  20. package/dist/collection/components/ptc-quantity-counter/ptc-quantity-counter.js +1 -1
  21. package/dist/collection/components/ptc-textfield/ptc-textfield.css +51 -34
  22. package/dist/collection/utils/elq-lib.js +35 -17
  23. package/dist/collection/utils/utils.js +28 -0
  24. package/dist/custom-elements/index.js +231 -105
  25. package/dist/esm/blog-detail-content_2.entry.js +1 -1
  26. package/dist/esm/blog-detail-layout.entry.js +1 -1
  27. package/dist/esm/icon-asset.entry.js +1 -1
  28. package/dist/esm/ptc-card_2.entry.js +1 -1
  29. package/dist/esm/ptc-data-lookup.entry.js +35 -17
  30. package/dist/esm/ptc-filter-tag_2.entry.js +1 -1
  31. package/dist/esm/ptc-form-checkbox_2.entry.js +185 -76
  32. package/dist/esm/ptc-jumbotron.entry.js +1 -1
  33. package/dist/esm/ptc-mobile-select.entry.js +3 -4
  34. package/dist/esm/ptc-pricing-tabs.entry.js +1 -1
  35. package/dist/esm/ptc-quantity-counter.entry.js +1 -1
  36. package/dist/ptcw-design/p-1e95df47.entry.js +68 -0
  37. package/dist/ptcw-design/p-3d8902b8.entry.js +1 -0
  38. package/dist/ptcw-design/p-51c4fc63.entry.js +1 -0
  39. package/dist/ptcw-design/{p-95c74739.entry.js → p-661e7736.entry.js} +1 -1
  40. package/dist/ptcw-design/{p-a27e3899.entry.js → p-8e6059b8.entry.js} +1 -1
  41. package/dist/ptcw-design/{p-b76cd8af.entry.js → p-a11dbfda.entry.js} +1 -1
  42. package/dist/ptcw-design/{p-9a077de7.entry.js → p-a3ae424f.entry.js} +1 -1
  43. package/dist/ptcw-design/p-b064333b.entry.js +1 -0
  44. package/dist/ptcw-design/{p-4452f0cb.entry.js → p-dfeb5574.entry.js} +1 -1
  45. package/dist/ptcw-design/{p-657ecf13.entry.js → p-fc51fc29.entry.js} +1 -1
  46. package/dist/ptcw-design/p-fe14b5ea.entry.js +1 -0
  47. package/dist/ptcw-design/ptcw-design.css +1 -1
  48. package/dist/ptcw-design/ptcw-design.esm.js +1 -1
  49. package/dist/types/utils/elq-lib.d.ts +1 -0
  50. package/dist/types/utils/utils.d.ts +7 -0
  51. package/package.json +1 -1
  52. package/readme.md +1 -1
  53. package/dist/ptcw-design/p-02828faf.entry.js +0 -1
  54. package/dist/ptcw-design/p-14dce880.entry.js +0 -1
  55. package/dist/ptcw-design/p-bc115cf2.entry.js +0 -1
  56. package/dist/ptcw-design/p-cabb1a4d.entry.js +0 -68
  57. package/dist/ptcw-design/p-e732466f.entry.js +0 -1
@@ -77,7 +77,7 @@ const PtcQuantityCounter = class {
77
77
  this.disabled = false;
78
78
  }
79
79
  render() {
80
- return (index.h(index.Host, null, index.h("div", { class: "quantity-counter" }, index.h("button", { class: "decrement", onClick: this.handleDecrement, disabled: this.disabled }, index.h("span", null, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: "none" }, index.h("path", { d: "M0 3.15039V4.85039H8V3.15039H0Z", fill: "#20262A" })))), index.h("input", { type: "number", onInput: this.handleInputChange, onClick: this.selectText, min: "1", max: "999", value: this.count, ref: el => (this.itemCountInput = el) }), index.h("button", { class: "increment", onClick: this.handleIncrement, disabled: this.disabled }, index.h("span", null, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: "none" }, index.h("g", { "clip-path": "url(#clip0_2974_659)" }, index.h("path", { d: "M7.95006 3.14981H4.85005V0.0498047H3.15005V3.14981H0.0500488V4.84981H3.15005V7.9498H4.85005V4.84981H7.95006V3.14981Z", fill: "#20262A" })), index.h("defs", null, index.h("clipPath", { id: "clip0_2974_659" }, index.h("rect", { width: "8", height: "8", fill: "white" }))))))), index.h("ptc-button", { disabled: this.disabled, type: "button", color: "ptc-quaternary", onClick: this.addToCart, ref: el => (this.addToCartCta = el), styles: this.defaultStyles }, this.addToCartLabel)));
80
+ return (index.h(index.Host, null, index.h("div", { class: "quantity-counter" }, index.h("button", { class: "decrement", onClick: this.handleDecrement, disabled: this.disabled }, index.h("span", null, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: "none" }, index.h("path", { d: "M0 3.15039V4.85039H8V3.15039H0Z", fill: "#20262A" })))), index.h("input", { type: "number", onInput: this.handleInputChange, onClick: this.selectText, min: "1", max: "999", value: this.count, ref: el => (this.itemCountInput = el), disabled: this.disabled }), index.h("button", { class: "increment", onClick: this.handleIncrement, disabled: this.disabled }, index.h("span", null, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: "none" }, index.h("g", { "clip-path": "url(#clip0_2974_659)" }, index.h("path", { d: "M7.95006 3.14981H4.85005V0.0498047H3.15005V3.14981H0.0500488V4.84981H3.15005V7.9498H4.85005V4.84981H7.95006V3.14981Z", fill: "#20262A" })), index.h("defs", null, index.h("clipPath", { id: "clip0_2974_659" }, index.h("rect", { width: "8", height: "8", fill: "white" }))))))), index.h("ptc-button", { disabled: this.disabled, type: "button", color: "ptc-quaternary", onClick: this.addToCart, ref: el => (this.addToCartCta = el), styles: this.defaultStyles }, this.addToCartLabel)));
81
81
  }
82
82
  };
83
83
  PtcQuantityCounter.style = ptcQuantityCounterCss;
@@ -67,8 +67,8 @@ svg {
67
67
  transition: all var(--ptc-transition-medium) var(--ptc-ease-inout);
68
68
  }
69
69
  svg.micro {
70
- width: calc(var(--ptc-font-size-x-small)/2);
71
- height: calc(var(--ptc-font-size-x-small)/2);
70
+ width: calc(var(--ptc-font-size-x-small) / 2);
71
+ height: calc(var(--ptc-font-size-x-small) / 2);
72
72
  }
73
73
  svg.xxx-small {
74
74
  width: var(--ptc-font-size-xxx-small);
@@ -236,7 +236,7 @@ ptc-link, ptc-square-card,
236
236
  }
237
237
  }
238
238
  :host #blog-detail-content {
239
- margin-top: calc(2*var(--ptc-element-spacing-06) + 27px + 48px);
239
+ margin-top: calc(2 * var(--ptc-element-spacing-06) + 27px + 48px);
240
240
  }
241
241
  @media only screen and (min-width: 992px) {
242
242
  :host #blog-detail-content {
@@ -81,7 +81,7 @@ ptc-link, ptc-square-card,
81
81
  width: 100%;
82
82
  height: 85px;
83
83
  /* TODO: Dynamic usage of desktop TOC height */
84
- margin-bottom: calc(48px + 132px);
84
+ margin-bottom: 180px;
85
85
  background-color: var(--color-gray-08);
86
86
  position: sticky;
87
87
  top: 0;
@@ -200,7 +200,7 @@ ptc-link, ptc-square-card,
200
200
  border-radius: var(--ptc-border-radius-standard);
201
201
  }
202
202
  :host(.clip-edge-card) .card-body {
203
- transform: translateY(calc((-1) * var(--ptc-element-spacing-04)));
203
+ transform: translateY(calc(-1 * var(--ptc-element-spacing-04)));
204
204
  overflow: hidden;
205
205
  width: calc(95% - var(--ptc-element-spacing-04) - var(--ptc-element-spacing-04));
206
206
  font-size: var(--ptc-font-size-xx-small);
@@ -1133,29 +1133,29 @@ ptc-link, ptc-square-card,
1133
1133
 
1134
1134
  .mdc-checkbox {
1135
1135
  transform: translateX(-8px);
1136
- padding: calc((34px - 18px) / 2);
1136
+ padding: 8px;
1137
1137
  /* @alternate */
1138
1138
  padding: calc((var(--mdc-checkbox-ripple-size, 34px) - 18px) / 2);
1139
- margin: calc((34px - 34px) / 2);
1139
+ margin: 0px;
1140
1140
  /* @alternate */
1141
1141
  margin: calc((var(--mdc-checkbox-touch-target-size, 34px) - 34px) / 2);
1142
1142
  }
1143
1143
  .mdc-checkbox .mdc-checkbox__background {
1144
- top: calc((34px - 18px) / 2);
1144
+ top: 8px;
1145
1145
  /* @alternate */
1146
1146
  top: calc((var(--mdc-checkbox-ripple-size, 34px) - 18px) / 2);
1147
- left: calc((34px - 18px) / 2);
1147
+ left: 8px;
1148
1148
  /* @alternate */
1149
1149
  left: calc((var(--mdc-checkbox-ripple-size, 34px) - 18px) / 2);
1150
1150
  }
1151
1151
  .mdc-checkbox .mdc-checkbox__native-control {
1152
- top: calc((34px - 34px) / 2);
1152
+ top: 0px;
1153
1153
  /* @alternate */
1154
1154
  top: calc((34px - var(--mdc-checkbox-touch-target-size, 34px)) / 2);
1155
- right: calc((34px - 34px) / 2);
1155
+ right: 0px;
1156
1156
  /* @alternate */
1157
1157
  right: calc((34px - var(--mdc-checkbox-touch-target-size, 34px)) / 2);
1158
- left: calc((34px - 34px) / 2);
1158
+ left: 0px;
1159
1159
  /* @alternate */
1160
1160
  left: calc((34px - var(--mdc-checkbox-touch-target-size, 34px)) / 2);
1161
1161
  width: 34px;
@@ -1101,7 +1101,7 @@ ptc-link, ptc-square-card,
1101
1101
  }
1102
1102
  @media only screen and (min-width: 992px) {
1103
1103
  .u-3-col-grid .u-3-col {
1104
- width: calc(33.333333333333% - 10.66666666px);
1104
+ width: calc(33.3333333333% - 10.66666666px);
1105
1105
  }
1106
1106
  }
1107
1107
  .u-3-col-grid.u-col-space-lg {
@@ -1118,7 +1118,7 @@ ptc-link, ptc-square-card,
1118
1118
  }
1119
1119
  @media only screen and (min-width: 992px) {
1120
1120
  .u-3-col-grid.u-col-space-lg .u-3-col {
1121
- width: calc(33.333333333333% - 21.3333333px);
1121
+ width: calc(33.3333333333% - 21.3333333px);
1122
1122
  }
1123
1123
  }
1124
1124
 
@@ -128,7 +128,7 @@ ptc-link, ptc-square-card,
128
128
  width: 1.125rem;
129
129
  height: 1.125rem;
130
130
  border: 1px solid var(--color-gray-10);
131
- border-radius: calc(var(--ptc-border-radius-standard)/2);
131
+ border-radius: calc(var(--ptc-border-radius-standard) / 2);
132
132
  transition: background-color var(--ptc-ease-out) var(--ptc-transition-medium), fill var(--ptc-ease-out) var(--ptc-transition-medium), border-color var(--ptc-ease-out) var(--ptc-transition-medium);
133
133
  }
134
134
  .standard-filter .next-button:hover, .standard-filter .previous-button:hover {
@@ -1046,7 +1046,7 @@ ptc-link, ptc-square-card,
1046
1046
  }
1047
1047
  @media only screen and (min-width: 992px) {
1048
1048
  .u-3-col-grid .u-3-col {
1049
- width: calc(33.333333333333% - 10.66666666px);
1049
+ width: calc(33.3333333333% - 10.66666666px);
1050
1050
  }
1051
1051
  }
1052
1052
  .u-3-col-grid.u-col-space-lg {
@@ -1063,7 +1063,7 @@ ptc-link, ptc-square-card,
1063
1063
  }
1064
1064
  @media only screen and (min-width: 992px) {
1065
1065
  .u-3-col-grid.u-col-space-lg .u-3-col {
1066
- width: calc(33.333333333333% - 21.3333333px);
1066
+ width: calc(33.3333333333% - 21.3333333px);
1067
1067
  }
1068
1068
  }
1069
1069
 
@@ -68,7 +68,7 @@ export class PtcQuantityCounter {
68
68
  this.disabled = false;
69
69
  }
70
70
  render() {
71
- return (h(Host, null, h("div", { class: "quantity-counter" }, h("button", { class: "decrement", onClick: this.handleDecrement, disabled: this.disabled }, h("span", null, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: "none" }, h("path", { d: "M0 3.15039V4.85039H8V3.15039H0Z", fill: "#20262A" })))), h("input", { type: "number", onInput: this.handleInputChange, onClick: this.selectText, min: "1", max: "999", value: this.count, ref: el => (this.itemCountInput = el) }), h("button", { class: "increment", onClick: this.handleIncrement, disabled: this.disabled }, h("span", null, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: "none" }, h("g", { "clip-path": "url(#clip0_2974_659)" }, h("path", { d: "M7.95006 3.14981H4.85005V0.0498047H3.15005V3.14981H0.0500488V4.84981H3.15005V7.9498H4.85005V4.84981H7.95006V3.14981Z", fill: "#20262A" })), h("defs", null, h("clipPath", { id: "clip0_2974_659" }, h("rect", { width: "8", height: "8", fill: "white" }))))))), h("ptc-button", { disabled: this.disabled, type: "button", color: "ptc-quaternary", onClick: this.addToCart, ref: el => (this.addToCartCta = el), styles: this.defaultStyles }, this.addToCartLabel)));
71
+ return (h(Host, null, h("div", { class: "quantity-counter" }, h("button", { class: "decrement", onClick: this.handleDecrement, disabled: this.disabled }, h("span", null, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: "none" }, h("path", { d: "M0 3.15039V4.85039H8V3.15039H0Z", fill: "#20262A" })))), h("input", { type: "number", onInput: this.handleInputChange, onClick: this.selectText, min: "1", max: "999", value: this.count, ref: el => (this.itemCountInput = el), disabled: this.disabled }), h("button", { class: "increment", onClick: this.handleIncrement, disabled: this.disabled }, h("span", null, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: "none" }, h("g", { "clip-path": "url(#clip0_2974_659)" }, h("path", { d: "M7.95006 3.14981H4.85005V0.0498047H3.15005V3.14981H0.0500488V4.84981H3.15005V7.9498H4.85005V4.84981H7.95006V3.14981Z", fill: "#20262A" })), h("defs", null, h("clipPath", { id: "clip0_2974_659" }, h("rect", { width: "8", height: "8", fill: "white" }))))))), h("ptc-button", { disabled: this.disabled, type: "button", color: "ptc-quaternary", onClick: this.addToCart, ref: el => (this.addToCartCta = el), styles: this.defaultStyles }, this.addToCartLabel)));
72
72
  }
73
73
  static get is() { return "ptc-quantity-counter"; }
74
74
  static get encapsulation() { return "shadow"; }
@@ -2215,9 +2215,9 @@
2215
2215
  .iti__v-hide {
2216
2216
  visibility: hidden;
2217
2217
  }
2218
- .iti input,
2219
- .iti input[type=text],
2220
- .iti input[type=tel] {
2218
+ .iti input.iti__tel-input,
2219
+ .iti input.iti__tel-input[type=text],
2220
+ .iti input.iti__tel-input[type=tel] {
2221
2221
  position: relative;
2222
2222
  z-index: 0;
2223
2223
  margin-top: 0 !important;
@@ -2256,26 +2256,35 @@
2256
2256
  border-top: none;
2257
2257
  border-bottom: 4px solid #555;
2258
2258
  }
2259
- .iti__country-list {
2259
+ .iti__dropdown-content {
2260
2260
  position: absolute;
2261
2261
  z-index: 2;
2262
- list-style: none;
2263
- padding: 0;
2264
- margin: 0 0 0 -1px;
2262
+ margin-left: -1px;
2265
2263
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
2266
2264
  background-color: white;
2267
2265
  border: 1px solid #ccc;
2268
- white-space: nowrap;
2269
2266
  max-height: 200px;
2270
2267
  overflow-y: scroll;
2271
2268
  -webkit-overflow-scrolling: touch;
2272
2269
  }
2273
- .iti__country-list--dropup {
2270
+ .iti__dropdown-content--dropup {
2274
2271
  bottom: 100%;
2275
2272
  margin-bottom: -1px;
2276
2273
  }
2274
+ .iti__search-input {
2275
+ width: 100%;
2276
+ border-width: 0;
2277
+ }
2278
+ .iti__country-list {
2279
+ list-style: none;
2280
+ padding: 0;
2281
+ margin: 0;
2282
+ }
2283
+ .iti--flexible-dropdown-width .iti__country-list {
2284
+ white-space: nowrap;
2285
+ }
2277
2286
  @media (max-width: 500px) {
2278
- .iti__country-list {
2287
+ .iti--flexible-dropdown-width .iti__country-list {
2279
2288
  white-space: normal;
2280
2289
  }
2281
2290
  }
@@ -2307,20 +2316,20 @@
2307
2316
  margin-right: 0;
2308
2317
  margin-left: 6px;
2309
2318
  }
2310
- .iti--allow-dropdown input,
2311
- .iti--allow-dropdown input[type=text],
2312
- .iti--allow-dropdown input[type=tel], .iti--separate-dial-code input,
2313
- .iti--separate-dial-code input[type=text],
2314
- .iti--separate-dial-code input[type=tel] {
2319
+ .iti--allow-dropdown input.iti__tel-input,
2320
+ .iti--allow-dropdown input.iti__tel-input[type=text],
2321
+ .iti--allow-dropdown input.iti__tel-input[type=tel], .iti--separate-dial-code input.iti__tel-input,
2322
+ .iti--separate-dial-code input.iti__tel-input[type=text],
2323
+ .iti--separate-dial-code input.iti__tel-input[type=tel] {
2315
2324
  padding-right: 6px;
2316
2325
  padding-left: 52px;
2317
2326
  margin-left: 0;
2318
2327
  }
2319
- [dir=rtl] .iti--allow-dropdown input,
2320
- [dir=rtl] .iti--allow-dropdown input[type=text],
2321
- [dir=rtl] .iti--allow-dropdown input[type=tel], [dir=rtl] .iti--separate-dial-code input,
2322
- [dir=rtl] .iti--separate-dial-code input[type=text],
2323
- [dir=rtl] .iti--separate-dial-code input[type=tel] {
2328
+ [dir=rtl] .iti--allow-dropdown input.iti__tel-input,
2329
+ [dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=text],
2330
+ [dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=tel], [dir=rtl] .iti--separate-dial-code input.iti__tel-input,
2331
+ [dir=rtl] .iti--separate-dial-code input.iti__tel-input[type=text],
2332
+ [dir=rtl] .iti--separate-dial-code input.iti__tel-input[type=tel] {
2324
2333
  padding-right: 52px;
2325
2334
  padding-left: 6px;
2326
2335
  margin-right: 0;
@@ -2339,12 +2348,12 @@
2339
2348
  .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
2340
2349
  background-color: rgba(0, 0, 0, 0.05);
2341
2350
  }
2342
- .iti--allow-dropdown input[disabled] + .iti__flag-container:hover,
2343
- .iti--allow-dropdown input[readonly] + .iti__flag-container:hover {
2351
+ .iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover,
2352
+ .iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover {
2344
2353
  cursor: default;
2345
2354
  }
2346
- .iti--allow-dropdown input[disabled] + .iti__flag-container:hover .iti__selected-flag,
2347
- .iti--allow-dropdown input[readonly] + .iti__flag-container:hover .iti__selected-flag {
2355
+ .iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover .iti__selected-flag,
2356
+ .iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover .iti__selected-flag {
2348
2357
  background-color: transparent;
2349
2358
  }
2350
2359
  .iti--separate-dial-code .iti__selected-flag {
@@ -2368,18 +2377,26 @@
2368
2377
  cursor: pointer;
2369
2378
  }
2370
2379
 
2371
- .iti-mobile .iti--container {
2372
- top: 30px;
2373
- bottom: 30px;
2374
- left: 30px;
2375
- right: 30px;
2380
+ .iti--fullscreen-popup.iti--container {
2381
+ background-color: rgba(0, 0, 0, 0.5);
2382
+ top: 0;
2383
+ bottom: 0;
2384
+ left: 0;
2385
+ right: 0;
2376
2386
  position: fixed;
2387
+ padding: 30px;
2388
+ display: flex;
2389
+ flex-direction: column;
2390
+ justify-content: center;
2391
+ }
2392
+ .iti--fullscreen-popup.iti--container.iti--country-search {
2393
+ justify-content: flex-start;
2377
2394
  }
2378
- .iti-mobile .iti__country-list {
2395
+ .iti--fullscreen-popup .iti__dropdown-content {
2379
2396
  max-height: 100%;
2380
- width: 100%;
2397
+ position: relative;
2381
2398
  }
2382
- .iti-mobile .iti__country {
2399
+ .iti--fullscreen-popup .iti__country {
2383
2400
  padding: 10px 10px;
2384
2401
  line-height: 1.5em;
2385
2402
  }
@@ -2405,7 +2422,7 @@
2405
2422
  .iti__flag.iti__va {
2406
2423
  width: 15px;
2407
2424
  }
2408
- @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
2425
+ @media (min-resolution: 2x) {
2409
2426
  .iti__flag {
2410
2427
  background-size: 5762px 15px;
2411
2428
  }
@@ -3471,7 +3488,7 @@
3471
3488
  background-color: #dbdbdb;
3472
3489
  background-position: 20px 0;
3473
3490
  }
3474
- @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
3491
+ @media (min-resolution: 2x) {
3475
3492
  .iti__flag {
3476
3493
  background-image: url("../img/flags@2x.png?1");
3477
3494
  }
@@ -78,8 +78,7 @@ export class ElqLib {
78
78
  this.lookup_visitor_by_recipient_id();
79
79
  }
80
80
  else {
81
- // If no visitor ID, attempt to do a visitor lookup with an Eloqua cookie
82
- //this.lookup_visitor_by_cookie(); //preference center
81
+ //Looking for users info with elq_contact_lookup_key
83
82
  this.lookup_contact_by_email();
84
83
  }
85
84
  }
@@ -89,17 +88,18 @@ export class ElqLib {
89
88
  add_queue_action(action) {
90
89
  this.callback_queue.push(action);
91
90
  }
92
- //publish function for preference center
91
+ //public function for preference center
93
92
  //Fires a lookups to get membership info
94
93
  find_eloqua_subscription_info() {
95
- //disable_submit_button();
96
- //this.lookup_subscription_by_email();
97
- console.log('CONTACT LOOKUP: Attempting to find Eloqua subscription...');
94
+ console.log('Subscription Lookup: running find_eloqua_subscription_info 1. push handle_visitor_lookup into callback queue, 2. push populateCheckboxes into callback queue...');
98
95
  // Queue callback action for the return of lookup
99
- //this.callback_queue.push(this.handle_visitor_lookup.bind(this));
96
+ this.callback_queue.push(this.handle_visitor_lookup.bind(this));
97
+ this.callback_queue.push(this.populateCheckboxes.bind(this));
100
98
  if (this.visitor_elq_id !== null) {
101
99
  //this.lookup_visitor_by_recipient_id(); //This lookup comes back no results, check with Eloqua
102
- this.lookup_visitor_by_cookie();
100
+ //Triggers the first callback function(SetElqContent) from Eloqua with info V_Email_Address
101
+ //this.lookup_visitor_by_cookie();
102
+ this.retry_visitor_by_cookie(3, 1000);
103
103
  }
104
104
  }
105
105
  store_url_vars() {
@@ -120,6 +120,7 @@ export class ElqLib {
120
120
  // Optionally, log the stored URL variables
121
121
  console.log('URL variables stored:', this.url_vars);
122
122
  }
123
+ // A visitor elq id will be produced from the preference center link
123
124
  store_visitor_elq_id() {
124
125
  console.log("INIT: Looking for visitor's Eloqua ID in URL...");
125
126
  const elqIdParam = this.url_vars['elq'];
@@ -144,7 +145,7 @@ export class ElqLib {
144
145
  // return root;
145
146
  // }
146
147
  eloqua_callback() {
147
- console.log('LOOKUP: Eloqua lookup finished');
148
+ console.log('LOOKUP: Eloqua lookup finished and calling setElqContent');
148
149
  // Process each action in the callback queue
149
150
  let actionSucceeded = true;
150
151
  while (actionSucceeded && this.callback_queue.length > 0) {
@@ -163,16 +164,17 @@ export class ElqLib {
163
164
  }
164
165
  }
165
166
  // After processing the queue, update user details or perform other operations
167
+ // Move this under the handle_contact_lookup?
166
168
  if (actionSucceeded && this.visitor_elq_id === null && typeof window.GetElqGroupMembershipStatus !== 'function') {
167
169
  this.update_user_details();
168
170
  this.populate_mapped_fields();
169
171
  }
170
- if (actionSucceeded && typeof window.GetElqContentPersonalizationValue === 'function' && window.GetElqContentPersonalizationValue(this.params.elq_field_visitor_email) !== '') {
171
- this.handle_visitor_lookup();
172
- }
173
- if (actionSucceeded && typeof window.GetElqGroupMembershipStatus === 'function') {
174
- this.populateCheckboxes();
175
- }
172
+ // if (actionSucceeded && typeof window.GetElqContentPersonalizationValue === 'function' && window.GetElqContentPersonalizationValue(this.params.elq_field_visitor_email) !== '') {
173
+ // this.handle_visitor_lookup();
174
+ // }
175
+ // if (actionSucceeded && typeof window.GetElqGroupMembershipStatus === 'function') {
176
+ // this.populateCheckboxes();
177
+ // }
176
178
  }
177
179
  lookup_visitor_by_cookie() {
178
180
  if (this.params.elq_visitor_lookup_key != '') {
@@ -183,6 +185,24 @@ export class ElqLib {
183
185
  console.log('LOOKUP: A visitor lookup cannot be performed as no lookup key was defined');
184
186
  }
185
187
  }
188
+ retry_visitor_by_cookie(attempts = 3, delay = 1000) {
189
+ if (attempts > 0) {
190
+ if (typeof window.SetElqContent !== 'function') {
191
+ console.warn(`setContent is not available, retrying... (${attempts} attempts left)`);
192
+ // Retry after the specified delay
193
+ setTimeout(() => {
194
+ this.retry_visitor_by_cookie(attempts - 1, delay);
195
+ }, delay);
196
+ }
197
+ else {
198
+ // If SetElqContent is available, perform the data lookup
199
+ this.lookup_visitor_by_cookie();
200
+ }
201
+ }
202
+ else {
203
+ console.error('setContent is still not available after 3 attempts');
204
+ }
205
+ }
186
206
  lookup_visitor_by_recipient_id() {
187
207
  if (this.params.elq_recipient_id_lookup_key != '') {
188
208
  ElqLib._elqQ.push([
@@ -424,8 +444,6 @@ export class ElqLib {
424
444
  this.user_elq_email = '';
425
445
  this.user_elq_firstname = '';
426
446
  this.user_elq_lastname = '';
427
- // $('.' + this.params.notme_fields_class).val('');
428
- //const linkDiv = document.getElementById(this.params.notme_link_id);
429
447
  const topAdditional = document.getElementById('not-me-additional-top');
430
448
  const bottomAdditional = document.getElementById('not-me-additional-bottom');
431
449
  //linkDiv.querySelector('a').remove();
@@ -199,3 +199,31 @@ export function observeInView(hostEle, selector, runOnce = false) {
199
199
  const allAnimatedElements = hostEle.shadowRoot.querySelectorAll(selector);
200
200
  allAnimatedElements.forEach((element) => observer.observe(element));
201
201
  }
202
+ // retryHandler.ts
203
+ export class RetryHandler {
204
+ constructor(retries = 3, delay = 1000) {
205
+ this.retries = retries;
206
+ this.delay = delay;
207
+ }
208
+ async execute(dataLookupFn) {
209
+ if (this.retries > 0 && !this.isSetContentAvailable()) {
210
+ console.warn(`Retrying... (${this.retries} attempts left)`);
211
+ this.retries--;
212
+ // Delay and then retry using setTimeout
213
+ setTimeout(() => {
214
+ this.execute(dataLookupFn);
215
+ }, this.delay);
216
+ }
217
+ else if (!this.isSetContentAvailable()) {
218
+ throw new Error('setContent is not available after multiple attempts');
219
+ }
220
+ else {
221
+ // Once setContent is detected, run the provided data lookup function
222
+ await dataLookupFn();
223
+ }
224
+ }
225
+ isSetContentAvailable() {
226
+ // Check if the setContent function exists in the window object
227
+ return typeof window.SetElqContent === 'function';
228
+ }
229
+ }