@ptcwebops/ptcw-design 5.8.7 → 5.8.9

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 (46) hide show
  1. package/dist/cjs/blog-detail-content_21.cjs.entry.js +7 -7
  2. package/dist/cjs/embedded-form.cjs.entry.js +1 -1
  3. package/dist/cjs/ptc-card_2.cjs.entry.js +1 -1
  4. package/dist/cjs/ptc-filter-tag_2.cjs.entry.js +1 -1
  5. package/dist/cjs/ptc-form-checkbox_2.cjs.entry.js +100 -190
  6. package/dist/cjs/ptc-multi-select_2.cjs.entry.js +2 -2
  7. package/dist/cjs/ptc-pricing-tabs.cjs.entry.js +1 -1
  8. package/dist/collection/components/icon-asset/icon-asset.css +2 -2
  9. package/dist/collection/components/organism-bundles/blog-detail-content/blog-detail-content.css +1 -1
  10. package/dist/collection/components/organism-bundles/blog-detail-layout/blog-detail-layout.css +1 -1
  11. package/dist/collection/components/organism-bundles/form/embedded-form/embedded-form.js +1 -1
  12. package/dist/collection/components/ptc-card/ptc-card.css +1 -1
  13. package/dist/collection/components/ptc-form-checkbox/ptc-form-checkbox.css +12 -7
  14. package/dist/collection/components/ptc-form-checkbox/ptc-form-checkbox.js +24 -5
  15. package/dist/collection/components/ptc-jumbotron/ptc-jumbotron.css +7 -9
  16. package/dist/collection/components/ptc-multi-select/ptc-multi-select.js +1 -1
  17. package/dist/collection/components/ptc-pagenation/ptc-pagenation.css +1 -1
  18. package/dist/collection/components/ptc-preloader-section/ptc-preloader-section.css +37 -3
  19. package/dist/collection/components/ptc-preloader-section/ptc-preloader-section.js +2 -2
  20. package/dist/collection/components/ptc-pricing-tabs/ptc-pricing-tabs.css +2 -2
  21. package/dist/collection/components/ptc-select/ptc-select.js +1 -1
  22. package/dist/collection/components/ptc-textfield/ptc-textfield.css +34 -51
  23. package/dist/custom-elements/index.js +113 -203
  24. package/dist/esm/blog-detail-content_21.entry.js +7 -7
  25. package/dist/esm/embedded-form.entry.js +1 -1
  26. package/dist/esm/ptc-card_2.entry.js +1 -1
  27. package/dist/esm/ptc-filter-tag_2.entry.js +1 -1
  28. package/dist/esm/ptc-form-checkbox_2.entry.js +100 -190
  29. package/dist/esm/ptc-multi-select_2.entry.js +2 -2
  30. package/dist/esm/ptc-pricing-tabs.entry.js +1 -1
  31. package/dist/ptcw-design/p-1ed632b2.entry.js +1 -0
  32. package/dist/ptcw-design/{p-00980d4d.entry.js → p-20c01caa.entry.js} +1 -1
  33. package/dist/ptcw-design/p-3784738e.entry.js +68 -0
  34. package/dist/ptcw-design/p-5d8333af.entry.js +1 -0
  35. package/dist/ptcw-design/{p-fc51fc29.entry.js → p-657ecf13.entry.js} +1 -1
  36. package/dist/ptcw-design/{p-27ef9182.entry.js → p-8c692bd6.entry.js} +1 -1
  37. package/dist/ptcw-design/p-a83d18b8.entry.js +1 -0
  38. package/dist/ptcw-design/ptcw-design.css +1 -1
  39. package/dist/ptcw-design/ptcw-design.esm.js +1 -1
  40. package/dist/types/components/ptc-form-checkbox/ptc-form-checkbox.d.ts +7 -4
  41. package/package.json +1 -1
  42. package/readme.md +1 -1
  43. package/dist/ptcw-design/p-14122d3f.entry.js +0 -68
  44. package/dist/ptcw-design/p-3dae22b8.entry.js +0 -1
  45. package/dist/ptcw-design/p-4ea01422.entry.js +0 -1
  46. package/dist/ptcw-design/p-9a9d5b49.entry.js +0 -1
@@ -37,11 +37,13 @@ export class PtcFormCheckbox {
37
37
  componentDidLoad() {
38
38
  this.mdcCheckboxComponent = MDCCheckbox.attachTo(this.mdcCheckbox);
39
39
  this.mdcFormfieldComponent = MDCFormField.attachTo(this.mdcFormfield);
40
+ this.mdcCheckboxComponent.checked = this.isChecked;
41
+ this.mdcCheckboxComponent.disabled = this.disabled;
40
42
  }
41
43
  async validateCheckbox() {
42
44
  // this.isCheckboxChecked = !this.isCheckboxChecked; // Toggle checkbox state
43
45
  if (this.isRequired) {
44
- if (!this.checkboxInput.checked) {
46
+ if (!this.isChecked) {
45
47
  this.hasError = true; // Set error state to true
46
48
  if (!this.el.classList.contains('invalid-checkbox')) {
47
49
  this.el.classList.add('invalid-checkbox');
@@ -59,15 +61,32 @@ export class PtcFormCheckbox {
59
61
  // console.log("lang type: " + type);
60
62
  return ValidationMessages[this.language][type];
61
63
  }
64
+ handleKeyDown(event) {
65
+ if (this.disabled) {
66
+ return;
67
+ }
68
+ if (event.key === 'Enter') {
69
+ event.preventDefault();
70
+ this.isChecked = !this.isChecked;
71
+ this.checkboxChanged.emit(this.isChecked);
72
+ if (this.checkboxInput) {
73
+ this.checkboxInput.checked = this.isChecked;
74
+ }
75
+ if (this.mdcCheckboxComponent) {
76
+ this.mdcCheckboxComponent.checked = this.isChecked;
77
+ }
78
+ this.validateCheckbox();
79
+ }
80
+ }
62
81
  render() {
63
82
  return (h(Host, { class: "ptc-checkbox-field" }, [
64
- h("div", { class: `mdc-form-field ${this.hideCheckbox ? 'label-only' : ''}`, ref: mdcFormfield => {
83
+ h("div", { class: `mdc-form-field ${this.hideCheckbox ? 'label-only' : ''}`, ref: (mdcFormfield) => {
65
84
  this.mdcFormfield = mdcFormfield;
66
- } }, h("div", { class: "mdc-checkbox", ref: mdcCheckbox => {
85
+ }, "aria-labelledby": this.checkboxId }, h("div", { class: "mdc-checkbox", ref: (mdcCheckbox) => {
67
86
  this.mdcCheckbox = mdcCheckbox;
68
- } }, h("input", Object.assign({ id: this.checkboxId, ref: checkboxInput => {
87
+ }, "aria-checked": this.isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("input", Object.assign({ id: this.checkboxId, ref: checkboxInput => {
69
88
  this.checkboxInput = checkboxInput;
70
- }, type: "checkbox" }, (this.isRequired ? { required: true } : { required: false }), (this.ignoreBlindSubmit ? { ignoreBlindSubmit: true } : null), { "data-eloqua-name": this.ptcDataEloquaName, class: "mdc-checkbox__native-control", onChange: this.handleChange.bind(this) })), h("div", { class: "mdc-checkbox__background" }, h("svg", { class: "mdc-checkbox__checkmark", viewBox: "0 0 24 24" }, h("path", { class: "mdc-checkbox__checkmark-path", fill: "none", d: "M1.73,12.91 8.1,19.28 22.79,4.59" })), h("div", { class: "mdc-checkbox__mixedmark" })), h("div", { class: "mdc-checkbox__ripple" })), h("label", { htmlFor: this.checkboxId, innerHTML: this.label })),
89
+ }, type: "checkbox" }, (this.isRequired ? { required: true } : { required: false }), (this.ignoreBlindSubmit ? { ignoreBlindSubmit: true } : null), { "data-eloqua-name": this.ptcDataEloquaName, class: "mdc-checkbox__native-control", onChange: this.handleChange.bind(this), onKeyDown: this.handleKeyDown.bind(this), checked: this.isChecked, disabled: this.disabled, "aria-invalid": this.hasError })), h("div", { class: "mdc-checkbox__background" }, h("svg", { class: "mdc-checkbox__checkmark", viewBox: "0 0 24 24" }, h("path", { class: "mdc-checkbox__checkmark-path", fill: "none", d: "M1.73,12.91 8.1,19.28 22.79,4.59" })), h("div", { class: "mdc-checkbox__mixedmark" })), h("div", { class: "mdc-checkbox__ripple" })), h("label", { htmlFor: this.checkboxId, innerHTML: this.label })),
71
90
  this.hasError ? (h("div", { class: "checkbox-helper-wrapper" }, h("p", { id: this.name }, h("svg", { class: "select-error-svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { "clip-path": "url(#clip0_12_1424)" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.3156 0L16 4.68444V11.3156L11.3156 16H4.68444L0 11.3156V4.68444L4.68444 0H11.3156ZM8 10.4C7.36 10.4 6.84444 10.9156 6.84444 11.5556C6.84444 12.1956 7.36 12.7111 8 12.7111C8.64 12.7111 9.15556 12.1956 9.15556 11.5556C9.15556 10.9156 8.64 10.4 8 10.4ZM8.88889 3.55556H7.11111V8.88889H8.88889V3.55556Z", fill: "#AF3231" })), h("defs", null, h("clipPath", { id: "clip0_12_1424" }, h("rect", { width: "16", height: "16", fill: "white" })))), this.helpertext))) : null,
72
91
  ]));
73
92
  }
@@ -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.3333333333% - 10.66666666px);
1104
+ width: calc(33.333333333333% - 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.3333333333% - 21.3333333px);
1121
+ width: calc(33.333333333333% - 21.3333333px);
1122
1122
  }
1123
1123
  }
1124
1124
 
@@ -1259,13 +1259,6 @@ a:focus-visible {
1259
1259
 
1260
1260
  .hp-adjustments {
1261
1261
  background-color: var(--color-black);
1262
- height: auto;
1263
- min-height: 640px !important;
1264
- }
1265
- @media (min-height: 640px) {
1266
- .hp-adjustments {
1267
- min-height: 72vh !important;
1268
- }
1269
1262
  }
1270
1263
  .hp-adjustments .div1 {
1271
1264
  grid-area: 1/1/3/2;
@@ -1299,6 +1292,11 @@ a:focus-visible {
1299
1292
  opacity: 0;
1300
1293
  }
1301
1294
 
1295
+ @media screen and (min-width: 992.01px) {
1296
+ .hp-adjustments {
1297
+ height: 90vh;
1298
+ }
1299
+ }
1302
1300
  .div1 {
1303
1301
  grid-area: 1/1/2/2;
1304
1302
  min-height: 300px;
@@ -235,7 +235,7 @@ export class PtcMultiSelect {
235
235
  if (selectedItemsCount === 1) {
236
236
  displayText = selectedItems[0].text;
237
237
  }
238
- return (h(Host, { class: { 'ptc-multi-select': true, 'invalid': !this.isValid } }, h("label", { class: "multi-select-label", id: `multi-select-label-${this.label}` }, this.label, this.isRequired ? '*' : ''), h("div", { class: "selected-items", role: "button", "aria-haspopup": "listbox", "aria-expanded": this.showDropdown, "aria-labelledby": `multi-select-label-${this.label}`, tabIndex: 0, onClick: () => this.toggleDropdown(), onKeyDown: (event) => this.handleKeyDownToggle(event) }, h("div", { class: "input-text" }, displayText), h("span", { class: "multi-select-icon" }, h("svg", { class: "multi-arrow-svg", width: "10", height: "10", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1.375 1.875L5 5.5L8.625 1.875L9.9375 3.1875L5 8.125L0.0625 3.1875L1.375 1.875Z" })))), h("ul", { class: 'dropdown' + (this.showDropdown ? ' show' : ''), role: "listbox", "aria-labelledby": `multi-select-label-${this.label}`, tabIndex: -1 }, h("li", { id: `multi-select-item-0`, role: "option", "aria-selected": isAllSelected, class: { selected: isAllSelected }, tabIndex: -1, onKeyDown: (event) => this.handleKeyDownItem(event, 0) }, h("button", { onClick: (event) => {
238
+ return (h(Host, { class: { 'ptc-multi-select': true, 'invalid': !this.isValid, 'mf-listen': true } }, h("label", { class: "multi-select-label", id: `multi-select-label-${this.label}` }, this.label), h("div", { class: "selected-items", role: "button", "aria-haspopup": "listbox", "aria-expanded": this.showDropdown, "aria-labelledby": `multi-select-label-${this.label}`, tabIndex: 0, onClick: () => this.toggleDropdown(), onKeyDown: (event) => this.handleKeyDownToggle(event) }, h("div", { class: "input-text" }, displayText), h("span", { class: "multi-select-icon" }, h("svg", { class: "multi-arrow-svg", width: "10", height: "10", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1.375 1.875L5 5.5L8.625 1.875L9.9375 3.1875L5 8.125L0.0625 3.1875L1.375 1.875Z" })))), h("ul", { class: 'dropdown' + (this.showDropdown ? ' show' : ''), role: "listbox", "aria-labelledby": `multi-select-label-${this.label}`, tabIndex: -1 }, h("li", { id: `multi-select-item-0`, role: "option", "aria-selected": isAllSelected, class: { selected: isAllSelected }, tabIndex: -1, onKeyDown: (event) => this.handleKeyDownItem(event, 0) }, h("button", { onClick: (event) => {
239
239
  event.preventDefault();
240
240
  event.stopPropagation();
241
241
  buttonAction(event);
@@ -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 {
@@ -1604,11 +1604,31 @@ ptc-link, ptc-square-card,
1604
1604
  position: relative;
1605
1605
  }
1606
1606
  .preloader-white-paper .content-container .grid-top {
1607
- margin-top: 4px;
1608
- margin-bottom: 40px;
1607
+ margin-bottom: 30px;
1608
+ }
1609
+ .preloader-white-paper .content-container .row-margin-btm {
1610
+ margin-bottom: 10px;
1611
+ }
1612
+ .preloader-white-paper .content-container .grid-mrgn {
1613
+ margin: 0;
1614
+ }
1615
+ @media only screen and (min-width: 992px) {
1616
+ .preloader-white-paper .content-container .grid-mrgn {
1617
+ margin: 0 18px;
1618
+ }
1619
+ }
1620
+ @media only screen and (min-width: 1200px) {
1621
+ .preloader-white-paper .content-container .grid-mrgn {
1622
+ margin: 0 26px;
1623
+ }
1624
+ }
1625
+ @media only screen and (min-width: 1440px) {
1626
+ .preloader-white-paper .content-container .grid-mrgn {
1627
+ margin: 0 29px;
1628
+ }
1609
1629
  }
1610
1630
  .preloader-white-paper .content-container .grid-top-2 {
1611
- margin-bottom: 28px;
1631
+ margin-bottom: 20px;
1612
1632
  }
1613
1633
  .preloader-white-paper .content-container .block-1 {
1614
1634
  height: 527px;
@@ -1622,6 +1642,12 @@ ptc-link, ptc-square-card,
1622
1642
  .preloader-white-paper .content-container .skeleton .skeleton-block.long {
1623
1643
  width: 93%;
1624
1644
  }
1645
+ .preloader-white-paper .content-container .skeleton .skeleton-block.thick-1 {
1646
+ height: 43px;
1647
+ }
1648
+ .preloader-white-paper .content-container .skeleton .skeleton-block.extra-bold-1 {
1649
+ height: 52px;
1650
+ }
1625
1651
  .preloader-white-paper .related-items {
1626
1652
  margin-top: 157px;
1627
1653
  padding-bottom: 40px;
@@ -1686,6 +1712,10 @@ ptc-link, ptc-square-card,
1686
1712
  margin-top: 4px;
1687
1713
  margin-bottom: 40px;
1688
1714
  }
1715
+ .preloader-value-led .content-container .grid-1 {
1716
+ margin-top: 4px;
1717
+ margin-bottom: 4px;
1718
+ }
1689
1719
  .preloader-value-led .content-container .grid-top-1 {
1690
1720
  margin-bottom: 49px;
1691
1721
  }
@@ -1719,6 +1749,10 @@ ptc-link, ptc-square-card,
1719
1749
  .preloader-value-led .content-container .skeleton .skeleton-block.thinnnest {
1720
1750
  height: 19px;
1721
1751
  }
1752
+ .preloader-value-led .content-container .skeleton .skeleton-block.thinnest-1 {
1753
+ height: 19px;
1754
+ margin-bottom: 4px !important;
1755
+ }
1722
1756
 
1723
1757
  @keyframes pulse {
1724
1758
  0% {
@@ -55,10 +55,10 @@ export class PtcPreloaderSection {
55
55
  return (h("div", { class: "preloader-wrapper skeleton-on-demand" }, h("div", { class: "ptc-container-lg" }, h("div", { class: "skeleton" }, h("div", { class: "on-demand-vl" }, h("div", { class: "is-grid block grid-top" }, h("div", { class: "is-col-6 is-placed-left" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin medium-1 left" }))), h("div", { class: "is-col-6 is-placed-right" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thick medium-1 right" })))), h("div", { class: "is-grid block" }, h("div", { class: "is-col-12 is-placed-left" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thick short left" }), h("div", { class: "skeleton-block thin wide-sm-1 left" }), h("div", { class: "skeleton-block thin wide-md left" }), h("div", { class: "skeleton-block thin wide-md-1 left" }), h("div", { class: "skeleton-block thin wide-md left" }), h("div", { class: "skeleton-block thin wide-sm-2 left" }), h("div", { class: "skeleton-block thin smallest left" })))), h("div", { class: "grid-medium" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin short left" })), h("div", { class: "grid-vl has-col-gap-sm" }, h("div", { class: "block hide-bl" }, h("div", { class: "skeleton-block block-8 " }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })), h("div", { class: "block hide-xs" }, h("div", { class: "skeleton-block block-8 " }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })), h("div", { class: "block hide-sm" }, h("div", { class: "skeleton-block block-8 " }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })), h("div", { class: "block hide-lg" }, h("div", { class: "skeleton-block block-8 " }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })), h("div", { class: "block hide-xl" }, h("div", { class: "skeleton-block block-8 " }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })))), h("div", { class: "grid-medium-2" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin short left" })), h("div", { class: "grid-vl has-col-gap-sm" }, h("div", { class: "block hide-bl" }, h("div", { class: "skeleton-block block-9 " })), h("div", { class: "block hide-xs" }, h("div", { class: "skeleton-block block-9 " })), h("div", { class: "block hide-sm" }, h("div", { class: "skeleton-block block-9 " })), h("div", { class: "block hide-lg" }, h("div", { class: "skeleton-block block-9 " })), h("div", { class: "block hide-xl" }, h("div", { class: "skeleton-block block-9 " })))), h("div", { class: "grid-bottom-1" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin short left" })), h("div", { class: "is-grid has-col-gap-sm" }, h("div", { class: "is-col-12-xs is-col-6-sm" }, h("div", { class: "block" }, h("div", { class: "skeleton-block block-10 hide-bl" }))), h("div", { class: "is-col-12-xs is-col-6-sm" }, h("div", { class: "block" }, h("div", { class: "skeleton-block block-10 hide-sm" }))))), h("div", { class: "grid-bottom-2" }, h("div", { class: "is-grid" }, h("div", { class: "is-col-12" }, h("div", { class: "block" }, h("div", { class: "skeleton-block block-11" }))))), h("div", { class: "grid-bottom" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin short left" })), h("div", { class: "grid-vl has-col-gap-sm" }, h("div", { class: "block hide-bl" }, h("div", { class: "skeleton-block block-8 " }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })), h("div", { class: "block hide-xs" }, h("div", { class: "skeleton-block block-8 " }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })), h("div", { class: "block hide-sm" }, h("div", { class: "skeleton-block block-8 " }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })), h("div", { class: "block hide-lg" }, h("div", { class: "skeleton-block block-8 " }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })), h("div", { class: "block hide-xl" }, h("div", { class: "skeleton-block block-8 " }), h("div", { class: "skeleton-block thin long left" }), h("div", { class: "skeleton-block thin left" })))))))));
56
56
  }
57
57
  case 'white-paper': {
58
- return (h("div", { class: "preloader-wrapper" }, h("div", { class: "preloader-white-paper" }, h("div", { class: "hero-image" }), h("div", { class: "ptc-container content-container" }, h("div", { class: "content-container-child" }, h("div", { class: "skeleton" }, h("div", { class: "is-grid block grid-top" }, h("div", { class: "is-col-6 is-placed-left" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block bold medium left" }))), h("div", { class: "is-col-6 is-placed-right" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block extra-bold narrow right" })))), h("div", { class: "is-grid block grid-top-2 has-no-row-gap has-no-col-gap" }, h("div", { class: "is-col-12" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thick" }))), h("div", { class: "is-col-6" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thick medium left" })))), h("div", { class: "" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block block-1" }))), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin long" }), h("div", { class: "skeleton-block thin wide" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin long" }), h("div", { class: "skeleton-block thin wide" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin long" }), h("div", { class: "skeleton-block thin wide" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }))), h("div", { class: "related-items" }, h("div", { class: "is-grid" }, h("div", { class: "is-col-12" }, h("div", { class: "title" }, h("div", { class: "skeleton-block thick long" }))), h("div", { class: "is-col-12 is-col-4-md" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block block-2" }))), h("div", { class: "is-col-12 is-col-4-md" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block block-2" }))), h("div", { class: "is-col-12 is-col-4-md" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block block-2" }))))), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" })))));
58
+ return (h("div", { class: "preloader-wrapper" }, h("div", { class: "preloader-white-paper" }, h("div", { class: "hero-image" }), h("div", { class: "ptc-container content-container" }, h("div", { class: "content-container-child" }, h("div", { class: "skeleton" }, h("div", { class: "is-grid block grid-top" }, h("div", { class: "is-col-6 is-placed-left" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block bold medium left" }))), h("div", { class: "is-col-6 is-placed-right" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block extra-bold-1 narrow right" })))), h("div", { class: "grid-mrgn" }, h("div", { class: "is-grid block grid-top-2 has-no-row-gap has-no-col-gap skeleton" }, h("div", { class: "is-col-12 row-margin-btm" }, h("div", { class: "skeleton-block longer thick-1" })), h("div", { class: "is-col-12" }, h("div", { class: "skeleton-block medium thick-1 left" }))), h("div", { class: "" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block block-1" }))), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin long" }), h("div", { class: "skeleton-block thin wide" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium bold" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin long" }), h("div", { class: "skeleton-block thin wide" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block thin longer" }), h("div", { class: "skeleton-block thin longest" }), h("div", { class: "skeleton-block thin long" }), h("div", { class: "skeleton-block thin wide" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" })))), h("div", { class: "related-items" }, h("div", { class: "is-grid" }, h("div", { class: "is-col-12" }, h("div", { class: "title" }, h("div", { class: "skeleton-block thick long" }))), h("div", { class: "is-col-12 is-col-4-md" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block block-2" }))), h("div", { class: "is-col-12 is-col-4-md" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block block-2" }))), h("div", { class: "is-col-12 is-col-4-md" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block block-2" }))))), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" })))));
59
59
  }
60
60
  case 'value-led': {
61
- return (h("div", { class: "preloader-wrapper" }, h("div", { class: "preloader-value-led" }, h("div", { class: "hero-image" }), h("div", { class: "ptc-container content-container" }, h("div", { class: "content-container-child" }, h("div", { class: "is-grid has-col-gap-md" }, h("div", { class: "is-col-3-lg" }, h("div", { class: "skeleton container-child-1" }, h("div", { class: "is-grid block grid-top" }, h("div", { class: "is-col-12 is-placed-left" }, Array.from({ length: 8 }).map(() => (h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thinnest" }), h("div", { class: "skeleton-block thinnest long-4" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" })))))))), h("div", { class: "is-col-12 is-col-9-lg" }, h("div", { class: "skeleton container-child-2" }, h("div", { class: "is-grid block grid-top" }, h("div", { class: "is-col-12 is-placed-left" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin smallest left" }), h("div", { class: "skeleton-block thick long-1" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block bold long-2" }), h("div", { class: "skeleton-block bold long-1" }), h("div", { class: "skeleton-block bold long-3" })))), h("div", { class: "grid-top-1" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block block-1" }))), h("div", { class: "skeleton-block bold" }), h("div", { class: "skeleton-block bold long-2" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block thinnnest longer" }), h("div", { class: "skeleton-block thinnnest longer" }), h("div", { class: "skeleton-block thinnnest longest" }), h("div", { class: "skeleton-block thinnnest long" }), h("div", { class: "skeleton-block thinnnest long-4" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block bold" }), h("div", { class: "skeleton-block bold long-2" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block thinnnest longer" }), h("div", { class: "skeleton-block thinnnest longer" }), h("div", { class: "skeleton-block thinnnest longest" }), h("div", { class: "skeleton-block thinnnest long" }), h("div", { class: "skeleton-block thinnnest long-4" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block thinnnest longer" }), h("div", { class: "skeleton-block thinnnest longer" }), h("div", { class: "skeleton-block thinnnest longest" }), h("div", { class: "skeleton-block thinnnest long" }), h("div", { class: "skeleton-block thinnnest long-4" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }))))), h("div", { class: "related-items" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" })))));
61
+ return (h("div", { class: "preloader-wrapper" }, h("div", { class: "preloader-value-led" }, h("div", { class: "hero-image" }), h("div", { class: "ptc-container content-container" }, h("div", { class: "content-container-child" }, h("div", { class: "is-grid has-col-gap-md" }, h("div", { class: "is-col-3-lg" }, h("div", { class: "skeleton container-child-1" }, h("div", { class: "is-grid block grid-1" }, h("div", { class: "is-col-12 is-placed-left" }, Array.from({ length: 8 }).map(() => (h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thinnest-1" }), h("div", { class: "skeleton-block thinnest-1 long-4" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" })))))))), h("div", { class: "is-col-12 is-col-9-lg" }, h("div", { class: "skeleton container-child-2" }, h("div", { class: "is-grid block grid-top" }, h("div", { class: "is-col-12 is-placed-left" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin smallest left" }), h("div", { class: "skeleton-block thick long-1" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block bold long-2" }), h("div", { class: "skeleton-block bold long-1" }), h("div", { class: "skeleton-block bold long-3" })))), h("div", { class: "grid-top-1" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block block-1" }))), h("div", { class: "skeleton-block bold" }), h("div", { class: "skeleton-block bold long-2" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block thinnnest longer" }), h("div", { class: "skeleton-block thinnnest longer" }), h("div", { class: "skeleton-block thinnnest longest" }), h("div", { class: "skeleton-block thinnnest long" }), h("div", { class: "skeleton-block thinnnest long-4" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block bold" }), h("div", { class: "skeleton-block bold long-2" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block thinnnest longer" }), h("div", { class: "skeleton-block thinnnest longer" }), h("div", { class: "skeleton-block thinnnest longest" }), h("div", { class: "skeleton-block thinnnest long" }), h("div", { class: "skeleton-block thinnnest long-4" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block thinnnest longer" }), h("div", { class: "skeleton-block thinnnest longer" }), h("div", { class: "skeleton-block thinnnest longest" }), h("div", { class: "skeleton-block thinnnest long" }), h("div", { class: "skeleton-block thinnnest long-4" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }))))), h("div", { class: "related-items" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" })))));
62
62
  }
63
63
  default:
64
64
  return (h("div", { class: "ptc-section-standard preload-min-height" }, h("div", { class: "ptc-container" }, h("max-width-container", { "max-width": "960", breakpoint: 1200 }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-header" }, h("div", { class: "skeleton-block bold" }), h("div", { class: "skeleton-block wide bold" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "skeleton-block medium" }), h("div", { class: "skeleton-block narrow" }), h("div", { class: "skeleton-block short" })), h("div", { class: "skeleton-image" }), h("div", { class: "skeleton-text" }, h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block long" }), h("div", { class: "skeleton-block narrow" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block medium" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block long" }), h("div", { class: "skeleton-block medium" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block long" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block medium" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block wide" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block short bold" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block wide" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block medium" })))))));
@@ -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.3333333333% - 10.66666666px);
1049
+ width: calc(33.333333333333% - 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.3333333333% - 21.3333333px);
1066
+ width: calc(33.333333333333% - 21.3333333px);
1067
1067
  }
1068
1068
  }
1069
1069
 
@@ -375,7 +375,7 @@ export class PtcSelect {
375
375
  return className;
376
376
  }
377
377
  render() {
378
- return (h(Host, { class: "ptc-select mf-listen" }, h("div", { class: this.getSelectClassName() }, h("label", { class: "ptc-label-select", htmlFor: this.fieldId }, " ", this.label, " ", this.isRequired ? '*' : '', " "), h("div", Object.assign({ class: "mdc-select__anchor", "aria-labelledby": "outlined-select-label" }, (this.isRequired ? { 'aria-required': true } : null)), h("span", { class: "mdc-notched-outline" }, h("span", { class: "mdc-notched-outline__leading" }), h("span", { class: "mdc-notched-outline__trailing" })), h("span", { class: "mdc-select__selected-text-container" }, h("span", { id: this.fieldId, class: "mdc-select__selected-text", "aria-controls": this.fieldName, "aria-describedby": this.fieldName, "data-eloqua-name": this.ptcDataEloquaName, "data-target-eloqua-name": this.ptcDataTargetEloquaName })), h("span", { class: "mdc-select__dropdown-icon" }, h("svg", { class: "", width: "10", height: "10", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M1.375 1.875L5 5.5L8.625 1.875L9.9375 3.1875L5 8.125L0.0625 3.1875L1.375 1.875Z" })))), h("div", { class: "mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth", role: "listbox", "aria-label": this.label }, h("slot", null)), h("p", { id: this.fieldName, class: "mdc-select-helper-text mdc-select-helper-text--validation-msg" }, h("svg", { class: "select-error-svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("g", { "clip-path": "url(#clip0_12_1424)" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.3156 0L16 4.68444V11.3156L11.3156 16H4.68444L0 11.3156V4.68444L4.68444 0H11.3156ZM8 10.4C7.36 10.4 6.84444 10.9156 6.84444 11.5556C6.84444 12.1956 7.36 12.7111 8 12.7111C8.64 12.7111 9.15556 12.1956 9.15556 11.5556C9.15556 10.9156 8.64 10.4 8 10.4ZM8.88889 3.55556H7.11111V8.88889H8.88889V3.55556Z", fill: "#AF3231" })), h("defs", null, h("clipPath", { id: "clip0_12_1424" }, h("rect", { width: "16", height: "16", fill: "white" })))), this.helpertext), this.infoText ? h("p", { class: "mdc-select-helper-text mdc-select-helper-text--info-msg" }, this.infoText) : null)));
378
+ return (h(Host, { class: "ptc-select mf-listen" }, h("div", { class: this.getSelectClassName() }, h("label", { class: "ptc-label-select", htmlFor: this.fieldId }, this.label), h("div", Object.assign({ class: "mdc-select__anchor", "aria-labelledby": "outlined-select-label" }, (this.isRequired ? { 'ariaRequired': true } : null)), h("span", { class: "mdc-notched-outline" }, h("span", { class: "mdc-notched-outline__leading" }), h("span", { class: "mdc-notched-outline__trailing" })), h("span", { class: "mdc-select__selected-text-container" }, h("span", { id: this.fieldId, class: "mdc-select__selected-text", "aria-controls": this.fieldName, "aria-describedby": this.fieldName, "data-eloqua-name": this.ptcDataEloquaName, "data-target-eloqua-name": this.ptcDataTargetEloquaName })), h("span", { class: "mdc-select__dropdown-icon" }, h("svg", { class: "", width: "10", height: "10", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1.375 1.875L5 5.5L8.625 1.875L9.9375 3.1875L5 8.125L0.0625 3.1875L1.375 1.875Z" })))), h("div", { class: "mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth", role: "listbox", "aria-label": this.label }, h("slot", null)), h("p", { id: this.fieldName, class: "mdc-select-helper-text mdc-select-helper-text--validation-msg" }, h("svg", { class: "select-error-svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { "clip-path": "url(#clip0_12_1424)" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.3156 0L16 4.68444V11.3156L11.3156 16H4.68444L0 11.3156V4.68444L4.68444 0H11.3156ZM8 10.4C7.36 10.4 6.84444 10.9156 6.84444 11.5556C6.84444 12.1956 7.36 12.7111 8 12.7111C8.64 12.7111 9.15556 12.1956 9.15556 11.5556C9.15556 10.9156 8.64 10.4 8 10.4ZM8.88889 3.55556H7.11111V8.88889H8.88889V3.55556Z", fill: "#AF3231" })), h("defs", null, h("clipPath", { id: "clip0_12_1424" }, h("rect", { width: "16", height: "16", fill: "white" })))), this.helpertext), this.infoText ? h("p", { class: "mdc-select-helper-text mdc-select-helper-text--info-msg" }, this.infoText) : null)));
379
379
  }
380
380
  static get is() { return "ptc-select"; }
381
381
  static get originalStyleUrls() {
@@ -2215,9 +2215,9 @@
2215
2215
  .iti__v-hide {
2216
2216
  visibility: hidden;
2217
2217
  }
2218
- .iti input.iti__tel-input,
2219
- .iti input.iti__tel-input[type=text],
2220
- .iti input.iti__tel-input[type=tel] {
2218
+ .iti input,
2219
+ .iti input[type=text],
2220
+ .iti input[type=tel] {
2221
2221
  position: relative;
2222
2222
  z-index: 0;
2223
2223
  margin-top: 0 !important;
@@ -2256,35 +2256,26 @@
2256
2256
  border-top: none;
2257
2257
  border-bottom: 4px solid #555;
2258
2258
  }
2259
- .iti__dropdown-content {
2259
+ .iti__country-list {
2260
2260
  position: absolute;
2261
2261
  z-index: 2;
2262
- margin-left: -1px;
2262
+ list-style: none;
2263
+ padding: 0;
2264
+ margin: 0 0 0 -1px;
2263
2265
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
2264
2266
  background-color: white;
2265
2267
  border: 1px solid #ccc;
2268
+ white-space: nowrap;
2266
2269
  max-height: 200px;
2267
2270
  overflow-y: scroll;
2268
2271
  -webkit-overflow-scrolling: touch;
2269
2272
  }
2270
- .iti__dropdown-content--dropup {
2273
+ .iti__country-list--dropup {
2271
2274
  bottom: 100%;
2272
2275
  margin-bottom: -1px;
2273
2276
  }
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
- }
2286
2277
  @media (max-width: 500px) {
2287
- .iti--flexible-dropdown-width .iti__country-list {
2278
+ .iti__country-list {
2288
2279
  white-space: normal;
2289
2280
  }
2290
2281
  }
@@ -2316,20 +2307,20 @@
2316
2307
  margin-right: 0;
2317
2308
  margin-left: 6px;
2318
2309
  }
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] {
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] {
2324
2315
  padding-right: 6px;
2325
2316
  padding-left: 52px;
2326
2317
  margin-left: 0;
2327
2318
  }
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] {
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] {
2333
2324
  padding-right: 52px;
2334
2325
  padding-left: 6px;
2335
2326
  margin-right: 0;
@@ -2348,12 +2339,12 @@
2348
2339
  .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
2349
2340
  background-color: rgba(0, 0, 0, 0.05);
2350
2341
  }
2351
- .iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover,
2352
- .iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover {
2342
+ .iti--allow-dropdown input[disabled] + .iti__flag-container:hover,
2343
+ .iti--allow-dropdown input[readonly] + .iti__flag-container:hover {
2353
2344
  cursor: default;
2354
2345
  }
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 {
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 {
2357
2348
  background-color: transparent;
2358
2349
  }
2359
2350
  .iti--separate-dial-code .iti__selected-flag {
@@ -2377,26 +2368,18 @@
2377
2368
  cursor: pointer;
2378
2369
  }
2379
2370
 
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;
2371
+ .iti-mobile .iti--container {
2372
+ top: 30px;
2373
+ bottom: 30px;
2374
+ left: 30px;
2375
+ right: 30px;
2386
2376
  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;
2394
2377
  }
2395
- .iti--fullscreen-popup .iti__dropdown-content {
2378
+ .iti-mobile .iti__country-list {
2396
2379
  max-height: 100%;
2397
- position: relative;
2380
+ width: 100%;
2398
2381
  }
2399
- .iti--fullscreen-popup .iti__country {
2382
+ .iti-mobile .iti__country {
2400
2383
  padding: 10px 10px;
2401
2384
  line-height: 1.5em;
2402
2385
  }
@@ -2422,7 +2405,7 @@
2422
2405
  .iti__flag.iti__va {
2423
2406
  width: 15px;
2424
2407
  }
2425
- @media (min-resolution: 2x) {
2408
+ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
2426
2409
  .iti__flag {
2427
2410
  background-size: 5762px 15px;
2428
2411
  }
@@ -3488,7 +3471,7 @@
3488
3471
  background-color: #dbdbdb;
3489
3472
  background-position: 20px 0;
3490
3473
  }
3491
- @media (min-resolution: 2x) {
3474
+ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
3492
3475
  .iti__flag {
3493
3476
  background-image: url("../img/flags@2x.png?1");
3494
3477
  }