@rededor/cura 1.3.0 → 1.4.0-alpha.1

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 (119) hide show
  1. package/dist/cjs/cura-accordion_12.cjs.entry.js +9 -9
  2. package/dist/cjs/cura-checkbox.cjs.entry.js +1 -1
  3. package/dist/cjs/cura-display.cjs.entry.js +1 -1
  4. package/dist/cjs/cura-dropdown-search-option-title.cjs.entry.js +1 -1
  5. package/dist/cjs/cura-dropdown-search-option.cjs.entry.js +2 -2
  6. package/dist/cjs/cura-dropdown-search.cjs.entry.js +24 -15
  7. package/dist/cjs/cura-dropdown-search.cjs.entry.js.map +1 -1
  8. package/dist/cjs/cura-input-date.cjs.entry.js +1 -1
  9. package/dist/cjs/cura-loader-bar.cjs.entry.js +1 -1
  10. package/dist/cjs/cura-modal.cjs.entry.js +50 -0
  11. package/dist/cjs/cura-modal.cjs.entry.js.map +1 -0
  12. package/dist/cjs/cura-radio.cjs.entry.js +1 -1
  13. package/dist/cjs/cura-switch.cjs.entry.js +1 -1
  14. package/dist/cjs/cura-toast.cjs.entry.js +1 -1
  15. package/dist/cjs/cura-tooltip.cjs.entry.js +1 -1
  16. package/dist/cjs/cura.cjs.js +1 -1
  17. package/dist/cjs/loader.cjs.js +1 -1
  18. package/dist/collection/collection-manifest.json +1 -0
  19. package/dist/collection/components/cura-modal/cura-modal.css +211 -0
  20. package/dist/collection/components/cura-modal/cura-modal.js +134 -0
  21. package/dist/collection/components/cura-modal/cura-modal.js.map +1 -0
  22. package/dist/collection/components/cura-modal/cura-modal.stories.js +85 -0
  23. package/dist/collection/components/cura-modal/cura-modal.stories.js.map +1 -0
  24. package/dist/collection/components/cura-page-template/cura-page-template.js +1 -1
  25. package/dist/collection/components/cura-toast/cura-toast.js +1 -1
  26. package/dist/collection/components/cura-tooltip/cura-tooltip.js +1 -1
  27. package/dist/collection/components/forms/cura-checkbox/cura-checkbox.js +1 -1
  28. package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.js +2 -2
  29. package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search-option-title/cura-dropdown-search-option-title.js +1 -1
  30. package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search.js +26 -16
  31. package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search.js.map +1 -1
  32. package/dist/collection/components/forms/cura-input-date/cura-input-date.js +1 -1
  33. package/dist/collection/components/forms/cura-label/cura-label.js +1 -1
  34. package/dist/collection/components/forms/cura-radio/cura-radio.js +1 -1
  35. package/dist/collection/components/forms/cura-select/cura-select.js +3 -3
  36. package/dist/collection/components/forms/cura-select-options/cura-select-option.js +1 -1
  37. package/dist/collection/components/forms/cura-switch/cura-switch.js +1 -1
  38. package/dist/collection/components/loaders/cura-loader-bar/cura-loader-bar.js +1 -1
  39. package/dist/collection/components/loaders/cura-loader-circle/cura-loader-circle.js +1 -1
  40. package/dist/collection/components/text/cura-display/cura-display.js +1 -1
  41. package/dist/collection/components/text/cura-heading/cura-heading.js +1 -1
  42. package/dist/collection/components/text/cura-paragraph/cura-paragraph.js +1 -1
  43. package/dist/components/cura-checkbox.js +1 -1
  44. package/dist/components/cura-display.js +1 -1
  45. package/dist/components/cura-dropdown-search-option-title.js +1 -1
  46. package/dist/components/cura-dropdown-search-option.js +2 -2
  47. package/dist/components/cura-dropdown-search.js +26 -16
  48. package/dist/components/cura-dropdown-search.js.map +1 -1
  49. package/dist/components/cura-heading2.js +1 -1
  50. package/dist/components/cura-input-date.js +1 -1
  51. package/dist/components/cura-label2.js +1 -1
  52. package/dist/components/cura-loader-bar2.js +1 -1
  53. package/dist/components/cura-loader-circle2.js +1 -1
  54. package/dist/components/cura-modal.d.ts +11 -0
  55. package/dist/components/cura-modal.js +84 -0
  56. package/dist/components/cura-modal.js.map +1 -0
  57. package/dist/components/cura-page-template.js +1 -1
  58. package/dist/components/cura-paragraph2.js +1 -1
  59. package/dist/components/cura-radio.js +1 -1
  60. package/dist/components/cura-select-option2.js +1 -1
  61. package/dist/components/cura-select2.js +3 -3
  62. package/dist/components/cura-switch.js +1 -1
  63. package/dist/components/cura-toast.js +1 -1
  64. package/dist/components/cura-tooltip.js +1 -1
  65. package/dist/components/index.js +2 -0
  66. package/dist/components/index.js.map +1 -1
  67. package/dist/cura/cura.esm.js +1 -1
  68. package/dist/cura/cura.esm.js.map +1 -1
  69. package/dist/cura/{p-022b22b6.entry.js → p-075b02de.entry.js} +2 -2
  70. package/dist/cura/{p-df851816.entry.js → p-0e28f1c8.entry.js} +2 -2
  71. package/dist/cura/{p-c444e692.entry.js → p-1f53580a.entry.js} +2 -2
  72. package/dist/cura/{p-2b9eadc7.entry.js → p-3536c96b.entry.js} +2 -2
  73. package/dist/cura/{p-93525d68.entry.js → p-71a2dcef.entry.js} +2 -2
  74. package/dist/cura/p-9a7e3f48.entry.js +2 -0
  75. package/dist/cura/p-9a7e3f48.entry.js.map +1 -0
  76. package/dist/cura/{p-e3d3bc3d.entry.js → p-dbd9eab3.entry.js} +2 -2
  77. package/dist/cura/p-deadde8d.entry.js +2 -0
  78. package/dist/cura/p-deadde8d.entry.js.map +1 -0
  79. package/dist/cura/{p-b883e098.entry.js → p-e5b0dd74.entry.js} +2 -2
  80. package/dist/cura/p-ebed83d1.entry.js +2 -0
  81. package/dist/cura/{p-639c1b67.entry.js → p-ed839f1e.entry.js} +2 -2
  82. package/dist/cura/{p-2c0f5497.entry.js → p-eea093b2.entry.js} +2 -2
  83. package/dist/cura/{p-9e3d26fe.entry.js → p-f375a612.entry.js} +2 -2
  84. package/dist/esm/cura-accordion_12.entry.js +9 -9
  85. package/dist/esm/cura-checkbox.entry.js +1 -1
  86. package/dist/esm/cura-display.entry.js +1 -1
  87. package/dist/esm/cura-dropdown-search-option-title.entry.js +1 -1
  88. package/dist/esm/cura-dropdown-search-option.entry.js +2 -2
  89. package/dist/esm/cura-dropdown-search.entry.js +24 -15
  90. package/dist/esm/cura-dropdown-search.entry.js.map +1 -1
  91. package/dist/esm/cura-input-date.entry.js +1 -1
  92. package/dist/esm/cura-loader-bar.entry.js +1 -1
  93. package/dist/esm/cura-modal.entry.js +46 -0
  94. package/dist/esm/cura-modal.entry.js.map +1 -0
  95. package/dist/esm/cura-radio.entry.js +1 -1
  96. package/dist/esm/cura-switch.entry.js +1 -1
  97. package/dist/esm/cura-toast.entry.js +1 -1
  98. package/dist/esm/cura-tooltip.entry.js +1 -1
  99. package/dist/esm/cura.js +1 -1
  100. package/dist/esm/loader.js +1 -1
  101. package/dist/types/components/cura-modal/cura-modal.d.ts +28 -0
  102. package/dist/types/components/cura-modal/cura-modal.stories.d.ts +70 -0
  103. package/dist/types/components/forms/cura-dropdown-search/cura-dropdown-search.d.ts +8 -0
  104. package/dist/types/components.d.ts +56 -0
  105. package/package.json +2 -2
  106. package/dist/cura/p-22e921d9.entry.js +0 -2
  107. package/dist/cura/p-22e921d9.entry.js.map +0 -1
  108. package/dist/cura/p-9991f7db.entry.js +0 -2
  109. /package/dist/cura/{p-022b22b6.entry.js.map → p-075b02de.entry.js.map} +0 -0
  110. /package/dist/cura/{p-df851816.entry.js.map → p-0e28f1c8.entry.js.map} +0 -0
  111. /package/dist/cura/{p-c444e692.entry.js.map → p-1f53580a.entry.js.map} +0 -0
  112. /package/dist/cura/{p-2b9eadc7.entry.js.map → p-3536c96b.entry.js.map} +0 -0
  113. /package/dist/cura/{p-93525d68.entry.js.map → p-71a2dcef.entry.js.map} +0 -0
  114. /package/dist/cura/{p-e3d3bc3d.entry.js.map → p-dbd9eab3.entry.js.map} +0 -0
  115. /package/dist/cura/{p-b883e098.entry.js.map → p-e5b0dd74.entry.js.map} +0 -0
  116. /package/dist/cura/{p-9991f7db.entry.js.map → p-ebed83d1.entry.js.map} +0 -0
  117. /package/dist/cura/{p-639c1b67.entry.js.map → p-ed839f1e.entry.js.map} +0 -0
  118. /package/dist/cura/{p-2c0f5497.entry.js.map → p-eea093b2.entry.js.map} +0 -0
  119. /package/dist/cura/{p-9e3d26fe.entry.js.map → p-f375a612.entry.js.map} +0 -0
@@ -307,7 +307,7 @@ const CuraHeading = class {
307
307
  return tags[`${this.level}`] || tags['default'];
308
308
  }
309
309
  render() {
310
- return (index.h(index.Host, { key: '4a130c7453ba61027050fc8f4a5739cad34d1c0a', style: this.hostCSSProperties() }, this.getHeadingTag()));
310
+ return (index.h(index.Host, { key: '83a6a2a08051c3654f609f0e1824f41f48a6ff83', style: this.hostCSSProperties() }, this.getHeadingTag()));
311
311
  }
312
312
  get host() { return index.getElement(this); }
313
313
  static get watchers() { return {
@@ -4369,7 +4369,7 @@ const CuraLabel = class {
4369
4369
  };
4370
4370
  }
4371
4371
  render() {
4372
- return (index.h(index.Host, { key: 'ae255523f9f465d4e9f76dccf24e127a73d35b46', style: this.hostCSSProperties() }, index.h("p", { key: 'b517371dcedfcd256dff4fcaddfe40c946541513', style: this.styles, class: this.getClasses() }, index.h("slot", { key: '38ed6316d7882ba14a1e1710091be8d12158cd74' }))));
4372
+ return (index.h(index.Host, { key: '8d691e1d4c38c30d1e50bc981b9e6de89b3506e0', style: this.hostCSSProperties() }, index.h("p", { key: 'b68944f4fe1e65aecf6a627f3bba547418bc125b', style: this.styles, class: this.getClasses() }, index.h("slot", { key: 'f8ac467674d94fe94adc075743b12111d1e32469' }))));
4373
4373
  }
4374
4374
  get host() { return index.getElement(this); }
4375
4375
  static get watchers() { return {
@@ -4403,7 +4403,7 @@ const CuraLoaderCircle = class {
4403
4403
  };
4404
4404
  }
4405
4405
  render() {
4406
- return (index.h(index.Host, { key: 'c7fb273559e35a8ac66c4a06e09150990dd62629', style: this.getStyles() }, index.h("svg", { key: '1ef6af84e79a0bf20c78d8f28129c890f990902f', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("g", { key: '37718a9e3271cce4d939b9ee4ab7123f39d7de39' }, index.h("circle", { key: '50284396589d4165a5e222b6e7aa7d7eba7d1f72', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), index.h("path", { key: '1bd1557ecd739e50cacd67675d91aa56f63ec335', d: "M1 8C1 4.13401 4.11877 1 7.96596 1C9.53445 1 10.9819 1.52093 12.1462 2.4C12.8959 2.96601 13.5282 3.68049 14 4.5", "stroke-width": "2" })), index.h("defs", { key: '6c68b50e1cce6210827f55ade5f822c0398ebfae' }, index.h("linearGradient", { key: '9d8f1a4955b753070618e0998205a8b48a83976a', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, index.h("stop", { key: 'd81f6995a1de8007ede765a2f49d236f7fcff187' }), index.h("stop", { key: 'b88855e6b35f247fa1395c220e3c0ee76093a7d2', offset: "1" }))))));
4406
+ return (index.h(index.Host, { key: '9ef3dd91b5958a5aeb90fe51120f5d9cc768ca62', style: this.getStyles() }, index.h("svg", { key: '96b6a2ac1ee77c14b68ea7ee462bae4a122f0c1f', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("g", { key: '01e9425e96b2f8b63a0115dfba358a46d86574c5' }, index.h("circle", { key: '5ba2e9d288de3b48d33c57ef9c8c282511683739', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), index.h("path", { key: 'b2069b38fc2a810c6b838eb4c924619a14ef5648', d: "M1 8C1 4.13401 4.11877 1 7.96596 1C9.53445 1 10.9819 1.52093 12.1462 2.4C12.8959 2.96601 13.5282 3.68049 14 4.5", "stroke-width": "2" })), index.h("defs", { key: '4e04a92c3cb8ba0084112f1a14a7815317ca92c5' }, index.h("linearGradient", { key: '4369f1a5c6d66b37cc00ca88c3e5c77867867fbf', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, index.h("stop", { key: '224eac239fcd4f22e3ca7b044d89942757381b9e' }), index.h("stop", { key: '35236a39f2156fefea7878a60dd1e559d3d1f850', offset: "1" }))))));
4407
4407
  }
4408
4408
  };
4409
4409
  CuraLoaderCircle.style = CuraLoaderCircleStyle0;
@@ -4427,7 +4427,7 @@ const CuraPageTemplate = class {
4427
4427
  return classes;
4428
4428
  }
4429
4429
  render() {
4430
- return (index.h(index.Host, { key: 'cc20723aa41b91ea1dc91ea638988b1758295194' }, index.h("div", { key: '77a47c8042fde17042614e9dfa451418f5599203', style: this.styles, class: "grid-template" }, index.h("div", { key: 'b6364534caa10c454c88cb0bee0cb15d5f5b3290', id: "sub-header" }, index.h("slot", { key: 'e9e8232ea90df3a7a9b41077c11b7471958b31ea', name: 'sub-header' })), index.h("div", { key: 'b5407cdf0d167f65a41c27b3056dffb8963f9494', id: "header" }, index.h("slot", { key: '75ca70a52852ba84507d836e20c3cd6e49b5ed7e', name: 'header' })), index.h("div", { key: 'b1a18551c7c91f0356a909d0187654af7cacfd9c', id: "pre-content" }, index.h("slot", { key: '46c5d27c42f0082115ed56b00ee5d9537a16b351', name: 'pre-content' })), index.h("div", { key: '9f9c30b4057d00cc026509eba99b8b066285f518', id: "content-container", class: this.getClasses() }, index.h("div", { key: '74c71d693d351e38183b501ab1ed955b1120bd13', id: "sidebar-left" }, index.h("slot", { key: 'f09fd413d695cb57cbdeba49192d0230dddb51ca', name: 'sidebar-left' })), index.h("div", { key: '60d8785cf429bbdc94132517707d672afa7cfca3', id: "content" }, index.h("slot", { key: 'd440f897831ff64fb3bed669728bf6d8c557037c', name: "content" }), index.h("slot", { key: '0e7fbe336f24608d80e7eda07869f58faf98c121' })), index.h("div", { key: 'e92ffc7632e10b98c25ea8f3dbe854bbdbd225a8', id: "sidebar-right" }, index.h("slot", { key: '9c9a8887643a1967df21c1d6625266ea119e828b', name: 'sidebar-right' }))), index.h("div", { key: '9ee23371a9d003db9ebb8b2f2d1803e71da01bd7', id: "post-body" }, index.h("slot", { key: '449fdc120956fd36f1fe71a7a5f2855a09baa9b3', name: 'post-body' })), index.h("div", { key: '31bc1a11a0152628a6bff3fee1b2cf739ef7cd82', id: "footer" }, index.h("slot", { key: '680ac49ea86a4945c13e52e8236e384d20a2867c', name: 'footer' })), index.h("div", { key: '1aebe595604aadc3b31e467d71532dd9d93301bf', id: "sub-footer" }, index.h("slot", { key: '58a2d0cebc85f73d09980b6daf8a04e7fceac133', name: 'sub-footer' })))));
4430
+ return (index.h(index.Host, { key: 'd79c3d22ccbd93d8a56c700e3016507d18720464' }, index.h("div", { key: 'a717f44d6b5df9f00ffe61fff816721705748040', style: this.styles, class: "grid-template" }, index.h("div", { key: '7a3d585d4213799b32e2043327442b21833fd4fc', id: "sub-header" }, index.h("slot", { key: 'dbab9738fe221a426642e5d63e88130e1f351591', name: 'sub-header' })), index.h("div", { key: '39f2878cac260b70b8e53b57b6b9b5b07f658251', id: "header" }, index.h("slot", { key: '511af91f30dfcfde3ced7bce4c341a2802c88db8', name: 'header' })), index.h("div", { key: 'ed8d1b1e0d5ffca939c525ee8320da7f2afde95d', id: "pre-content" }, index.h("slot", { key: 'dd8c722ddd113f49965a6397625980aace8b78e8', name: 'pre-content' })), index.h("div", { key: '64a5767bbc858f18e44a3339b6bb567b3e5a8c0d', id: "content-container", class: this.getClasses() }, index.h("div", { key: '919e9d54e10f1469264f193545e80b680b63c801', id: "sidebar-left" }, index.h("slot", { key: '8ddeb7358bd9f6d0e08b1e3f323219b8980eec9c', name: 'sidebar-left' })), index.h("div", { key: '48e3860c1674658c386124c80a35b85bdb085e3e', id: "content" }, index.h("slot", { key: '8bc21a187897a5e9cd2e922285364a02425cefa6', name: "content" }), index.h("slot", { key: '587d13eed3fedcbf9e33dc4084cb2554ba70125d' })), index.h("div", { key: '7f620fd04b4cf4a051954dca8a95293c2a7c1d9a', id: "sidebar-right" }, index.h("slot", { key: '3499275e67a00fcaab4f044535dbeb19c1040569', name: 'sidebar-right' }))), index.h("div", { key: '59b9e4a5fe541f2ad6dac53a40588482b33e0cad', id: "post-body" }, index.h("slot", { key: '7493b3b330cabf263990a149c1b526501260de95', name: 'post-body' })), index.h("div", { key: '4a35c95f7ad04f04bb8673babc06d243e1b8f931', id: "footer" }, index.h("slot", { key: 'f69ffbd9c9cabe72e1ee4f147f7a1448311a7f0c', name: 'footer' })), index.h("div", { key: 'd53b60b2d9170797e7dc12b3179c24b7f76ac41d', id: "sub-footer" }, index.h("slot", { key: '75dcebb2f223ed1d0b1181ea3773fbb6bf096e33', name: 'sub-footer' })))));
4431
4431
  }
4432
4432
  get host() { return index.getElement(this); }
4433
4433
  };
@@ -4483,7 +4483,7 @@ const CuraParagraph = class {
4483
4483
  };
4484
4484
  }
4485
4485
  render() {
4486
- return (index.h(index.Host, { key: '0ee9f41b45e758b509a18ab8ff216482d9c83af4', style: this.hostCSSProperties() }, index.h("p", { key: '02edfbf600b0cb372e49ee8b6fc7192f19108997', style: this.styles, class: this.setsizeClass() }, index.h("slot", { key: '0b2bd3c94a190999cc8a8dec94b14aae2af2fa09' }))));
4486
+ return (index.h(index.Host, { key: 'fc146c5173887dd80bb1798d58b7fbe29775e2de', style: this.hostCSSProperties() }, index.h("p", { key: '0defc510c08182261e22a4ab47a24d939199db24', style: this.styles, class: this.setsizeClass() }, index.h("slot", { key: 'e70c68a1da0596dc8d2273f5679c9193a354e313' }))));
4487
4487
  }
4488
4488
  get host() { return index.getElement(this); }
4489
4489
  static get watchers() { return {
@@ -4771,13 +4771,13 @@ const CuraSelect = class {
4771
4771
  return (index.h("cura-icon", { class: 'feedback-icon', name: icon, iconset: 'default', size: this.size === 'large' ? 20 : 16, color: this.getColor('icon'), style: this.styles }));
4772
4772
  }
4773
4773
  render() {
4774
- return (index.h(index.Host, { key: '1f9549c90dbc1c5a958488fdaa7e6b320730691a', style: this.styles }, index.h("div", { key: '52f93a983269e95bf4e19b590c47a8de472f9cb1', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (index.h("cura-label", { key: '1fbbdb175324020e975e515c07a7eb85e593eb19', class: 'label', weight: 'bold', size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && index.h("span", { key: 'b76d8b6fc6399af17f8345d097f70e29ef9a549e', class: 'required' }, "* "))), index.h("div", { key: '0f1484f9debd047eb99760adb2c2da6d124c39f0', class: {
4774
+ return (index.h(index.Host, { key: 'f01b52d0da1c417723c9da0ce7002155b3cbb07d', style: this.styles }, index.h("div", { key: '2798e5cd7f16e8679520900374e569cca1e5bee8', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (index.h("cura-label", { key: '5f9f645c3199e6299f000f5ab167139f536442b8', class: 'label', weight: 'bold', size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && index.h("span", { key: '2bca7ed64c1d44152161c2d71173f70b8b2fbacc', class: 'required' }, "* "))), index.h("div", { key: 'c1e77ccc2d1853b8749fea57e5ca3554363ef168', class: {
4775
4775
  'cura-input-field': true,
4776
4776
  'open': this.isOpen
4777
- } }, this.renderIcon(), index.h("input", { key: '2b10751ad085669523eeaba20a9d8736b4332dc0', type: "text", autocomplete: 'off', onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), onKeyDown: this.handleKeyNavigation, "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error'), onInput: this.handleInputChange, style: this.styles, placeholder: this.placeholder, disabled: this.disabled, required: this.required, value: this.textInput, readonly: this.searchBehavior ? null : true }), index.h("cura-icon", { key: '965687e4884ab2da4de009ccee8a2607a80ca0d3', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: 'default' })), index.h("cura-label", { key: 'ec844637fe1b96ac3719a53fc4753a66dde5710f', class: "helper-text", size: 'xsmall', color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, index.h("slot", { key: 'fdc615752aad7bc80ba97a380c4086a3e81fad48' })), this.isOpen && (index.h("div", { key: 'cac6207d71dabbf2ad7d6dd0f5a152d23f64e554', class: {
4777
+ } }, this.renderIcon(), index.h("input", { key: '66e99e0a7c3b00516cc2f1240d08511c9434201b', type: "text", autocomplete: 'off', onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), onKeyDown: this.handleKeyNavigation, "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error'), onInput: this.handleInputChange, style: this.styles, placeholder: this.placeholder, disabled: this.disabled, required: this.required, value: this.textInput, readonly: this.searchBehavior ? null : true }), index.h("cura-icon", { key: '4efde985b30016b633818f9fafe6c1f538b4776e', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: 'default' })), index.h("cura-label", { key: 'ead6b6a9f95acc7f2cf2e7474f72c1627e0bd8cd', class: "helper-text", size: 'xsmall', color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, index.h("slot", { key: 'e01c6c99fecb78822d092a41db0b969ca160cea1' })), this.isOpen && (index.h("div", { key: '0fedad3cac056457810c984eb471bd9a703f2ff4', class: {
4778
4778
  'menu': true,
4779
4779
  'open': this.isOpen
4780
- } }, index.h("slot", { key: '3414977f685fd5f7692e1b5fbcf8b8af11992fba', name: 'option' }))))));
4780
+ } }, index.h("slot", { key: '1330a45037f002b5fd20a356f1fe5b982999e512', name: 'option' }))))));
4781
4781
  }
4782
4782
  static get formAssociated() { return true; }
4783
4783
  get host() { return index.getElement(this); }
@@ -4827,7 +4827,7 @@ const CuraSelectOption = class {
4827
4827
  };
4828
4828
  }
4829
4829
  render() {
4830
- return (index.h(index.Host, { key: 'd65a51c56c05c15db545fa9dec1da8849e45235d', slot: "option" }, index.h("div", { key: '892175c91b317d015f13f9d5d9bc0a956272a49f', class: this.getClasses(), style: this.styles }, index.h("cura-label", { key: 'aaabd66fc3e8e6beb0d840e4b12dbcfb3282e392', color: `${this.selected ? 'primary-base' : 'neutral-black'}`, size: this.getSize('label'), "margin-block": "0" }, index.h("slot", { key: 'a1570b98b56147b8cf8d0b01f504a19efbdf4749' })), this.selected && index.h("cura-icon", { key: 'fcd06691f5d18e460b14e5cd7ae99c06fec26e3f', name: 'check', size: this.getSize('icon'), color: "primary-base" }))));
4830
+ return (index.h(index.Host, { key: '42fe72a8cadcb2745fa41cced2bf8f571ca0fb81', slot: "option" }, index.h("div", { key: '275c6ba6baaf1c28af3c6cce6abc36dc8c496e13', class: this.getClasses(), style: this.styles }, index.h("cura-label", { key: 'a5f2e672f55fe16b749f6f5d33c1ba64eb415ca8', color: `${this.selected ? 'primary-base' : 'neutral-black'}`, size: this.getSize('label'), "margin-block": "0" }, index.h("slot", { key: '37b09097f6f51515fe63f07a5b6bb2449ba51e60' })), this.selected && index.h("cura-icon", { key: '88b01b9505ea9c46ddd19be78db4bd084601687d', name: 'check', size: this.getSize('icon'), color: "primary-base" }))));
4831
4831
  }
4832
4832
  get host() { return index.getElement(this); }
4833
4833
  static get watchers() { return {
@@ -164,7 +164,7 @@ const CuraCheckbox = class {
164
164
  return index.h("cura-icon", { class: "icon", name: iconName, size: iconSize, color: iconColor });
165
165
  }
166
166
  render() {
167
- return (index.h(index.Host, { key: '00334ec058edf0849cf30c65d2f9e2e2e051de96' }, index.h("div", { key: 'd7c7857afa27a033f0642369717eb3be406f9f27', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, index.h("div", { key: 'aed0ec8155b2a5c0e3000b416afd6c5455c55f0e', class: "info" }, index.h("div", { key: 'd90166401c6946c508d2cace62976c2e7374689f', class: "label-wrapper" }, index.h("cura-label", { key: '7c0c5cc650db37f09127050333f49c5f4b4c7dc6', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && index.h("cura-paragraph", { key: '3c1cd2dcad221f4d93bde959ca33273270f0fe45', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), index.h("cura-label", { key: '3fd01d993596f36da00b3acfeef02f2a28340eae', color: this.assignColor('message'), size: "xsmall", class: "message" }, index.h("slot", { key: '2c106bd163a1b330a18061c0e99eb21c911d7da9' }))), index.h("div", { key: '2286927b31856a224049693295caa9e037695749', class: 'checkbox', tabIndex: this.ontabindex }, index.h("input", { key: '9bb8a436f1500d046a9b57972307cf5feff183d3', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
167
+ return (index.h(index.Host, { key: '876fa0a7aa0fc7110cbf0ffeb2d95d529fa78e64' }, index.h("div", { key: '3e6d730765590ee75d7e045cadc7d03e5fc035e2', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, index.h("div", { key: '0f7f6f3bc61a80e899d940d76fee266af1914f5a', class: "info" }, index.h("div", { key: 'a836cb0d7751a1a812364fe93a30403b02ec5c95', class: "label-wrapper" }, index.h("cura-label", { key: '5d180552ec71e22ddd8822727bd32d4167215f33', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && index.h("cura-paragraph", { key: '047413aa21a28bc33984d19ad4dc10a38289c205', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), index.h("cura-label", { key: '68c9dd6f228ec3204647795f1cae32a8f8797bc2', color: this.assignColor('message'), size: "xsmall", class: "message" }, index.h("slot", { key: '3a35a1219f135002f1b9ae64c0eb4227529bc904' }))), index.h("div", { key: 'fe969ee332b3c64a259ec552f411b5d2d4bc81e4', class: 'checkbox', tabIndex: this.ontabindex }, index.h("input", { key: '2cbcbe56130bddb5853cfcc3a8ef1b421f39bc7b', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
168
168
  }
169
169
  static get formAssociated() { return true; }
170
170
  get host() { return index.getElement(this); }
@@ -69,7 +69,7 @@ const CuraDisplay = class {
69
69
  return tags[`${this.level}`] || tags['default'];
70
70
  }
71
71
  render() {
72
- return (index.h(index.Host, { key: 'bf5c1121ffd1debb9b5763acdde1c7244b4afcc3', style: this.hostCSSProperties() }, this.getHeadingTag()));
72
+ return (index.h(index.Host, { key: '9d75215eaa43baaf9ca9aada36dfdbff4596afb2', style: this.hostCSSProperties() }, this.getHeadingTag()));
73
73
  }
74
74
  get host() { return index.getElement(this); }
75
75
  static get watchers() { return {
@@ -12,7 +12,7 @@ const CuraDropdownSearchOptionTitle = class {
12
12
  index.registerInstance(this, hostRef);
13
13
  }
14
14
  render() {
15
- return (index.h(index.Host, { key: 'e4929a8c5c1c1f11b3e51dc088b2dd506e1bdfa0', slot: "dropdown-search-option" }, index.h("cura-label", { key: '5bb5406c11a39a6a587737cf99eb1d2deb2ea0da', color: "neutral-dark", size: "xsmall", lineHeight: "16px", marginBlock: "0" }, index.h("slot", { key: 'c781e560b512d5362370e9855551b3e088ffbec1' }))));
15
+ return (index.h(index.Host, { key: 'ed1d2aeeba08c3c53f04f434fa46cb178271f405', slot: "dropdown-search-option" }, index.h("cura-label", { key: '910b1ada8d333ace0171a3180ba6320e813e4fce', color: "neutral-dark", size: "xsmall", lineHeight: "16px", marginBlock: "0" }, index.h("slot", { key: '20816c3a0c9805a88074f36e060ad850157427e2' }))));
16
16
  }
17
17
  };
18
18
  CuraDropdownSearchOptionTitle.style = CuraDropdownSearchOptionTitleStyle0;
@@ -46,12 +46,12 @@ const CuraDropdownSearchOption = class {
46
46
  }
47
47
  }
48
48
  render() {
49
- return (index.h(index.Host, { key: 'a084adaf6f89be71c8d5dc141705e7a71af353bb', slot: "dropdown-search-option" }, index.h("div", { key: '58ac361d8f16fdab8ef07d3be3f9c12a8c4b85ef', style: this.styles, class: {
49
+ return (index.h(index.Host, { key: '0dfb8d67f1aee692af5abdad170f2fc3e6c5ffc6', slot: "dropdown-search-option" }, index.h("div", { key: '6596c224bbfc0e9b5c3d2a39d064852019af5b74', style: this.styles, class: {
50
50
  "option-container": true,
51
51
  hovered: this.selectable ? this.hovered : false,
52
52
  selected: this.selected,
53
53
  disabled: !this.selectable
54
- } }, index.h("div", { key: '0a7f959582b45df5c30fbbd225fccfc93aa937f4', class: "content-container" }, index.h("div", { key: '74b8a9626430847bf9dfb32d5188303427d2fd28', class: "option-info", onClick: (e) => this.handleOptionClick(e) }, index.h("slot", { key: '1dba6e28939841569f290c9fb18d3b7595bac06a', name: "image" }), index.h("cura-heading", { key: 'f7722edfd7ab87f7d9bacf475d988a1e80af41ef', size: "xsmall", lineHeight: "16px", marginBlock: "0px", weight: "bold", color: "neutral-black" }, index.h("slot", { key: 'db0385e5e3d2c450ba9a96d75e7913d2fe913d98' }))), index.h("slot", { key: '734b467cfce5ce114b06a10e3a153723da7ad41d', name: "action" })))));
54
+ } }, index.h("div", { key: 'b73badabbcde37615c58707d8a62832363deb694', class: "content-container" }, index.h("div", { key: '6ea1e5cfa3aa5f7bb7d0a4a2c9c8aff6e076304c', class: "option-info", onClick: (e) => this.handleOptionClick(e) }, index.h("slot", { key: '9e6272b220a723fbc1b52a23f59873cb4eea0986', name: "image" }), index.h("cura-heading", { key: '4bec4f91fd5ef5759373d846c0876678e67b1b48', size: "xsmall", lineHeight: "16px", marginBlock: "0px", weight: "bold", color: "neutral-black" }, index.h("slot", { key: 'c485bfd68ddf4b5bcfa0c590c11344352939fe87' }))), index.h("slot", { key: '0ce8978f72401af3580c72919b6079ef222dcc0d', name: "action" })))));
55
55
  }
56
56
  get hostElement() { return index.getElement(this); }
57
57
  static get watchers() { return {
@@ -19,20 +19,10 @@ const CuraDropdownSearch = class {
19
19
  const isKeyboardOpen = window.innerHeight < window.screen.height * 0.8;
20
20
  const dropdown = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-mobile');
21
21
  if (dropdown) {
22
- if (isKeyboardOpen) {
23
- dropdown.style.position = 'absolute';
24
- dropdown.style.bottom = `${window.screen.height - window.innerHeight}px`;
25
- }
26
- else {
27
- dropdown.style.position = 'fixed';
28
- dropdown.style.bottom = '0';
29
- }
22
+ dropdown.style.position = isKeyboardOpen ? 'absolute' : 'fixed';
23
+ dropdown.style.bottom = isKeyboardOpen ? `${window.screen.height - window.innerHeight}px` : '0';
24
+ window.scroll({ top: 0, left: 0, behavior: 'smooth' });
30
25
  }
31
- window.scroll({
32
- top: 0,
33
- left: 0,
34
- behavior: 'smooth',
35
- });
36
26
  });
37
27
  };
38
28
  this.handleSlotChange = () => {
@@ -70,6 +60,7 @@ const CuraDropdownSearch = class {
70
60
  this.showOverlay();
71
61
  }
72
62
  else {
63
+ this.resetDropdownStyles();
73
64
  this.removeOverlay();
74
65
  }
75
66
  }
@@ -94,6 +85,7 @@ const CuraDropdownSearch = class {
94
85
  this.isOnBlurInput = true;
95
86
  this.hoveredIndex = -1;
96
87
  this.options = [];
88
+ this.originalOverflow = '';
97
89
  }
98
90
  connectedCallback() {
99
91
  this.weights = window.CuraAPI.theme.fonts.getWeights();
@@ -145,12 +137,15 @@ const CuraDropdownSearch = class {
145
137
  this.overlayElement.style.zIndex = '9999';
146
138
  this.overlayElement.style.backgroundColor = 'white';
147
139
  document.body.appendChild(this.overlayElement);
140
+ this.originalOverflow = document.body.style.overflow;
141
+ document.body.style.overflow = 'hidden';
148
142
  }
149
143
  }
150
144
  removeOverlay() {
151
145
  if (this.overlayElement && this.overlayElement.parentNode === document.body) {
152
146
  document.body.removeChild(this.overlayElement);
153
147
  this.overlayElement = null;
148
+ document.body.style.overflow = this.originalOverflow;
154
149
  }
155
150
  }
156
151
  addClickListenersToOptions() {
@@ -174,6 +169,7 @@ const CuraDropdownSearch = class {
174
169
  this.updateSelectedOption(this.value);
175
170
  this.isDropdownOpen = false;
176
171
  this.isOnBlurInput = true;
172
+ this.resetDropdownStyles();
177
173
  this.removeOverlay();
178
174
  }
179
175
  }
@@ -213,6 +209,7 @@ const CuraDropdownSearch = class {
213
209
  if (this.isOnBlurInput === true) {
214
210
  setTimeout(() => {
215
211
  this.isDropdownOpen = false;
212
+ this.resetDropdownStyles();
216
213
  this.removeOverlay();
217
214
  }, 200);
218
215
  }
@@ -246,11 +243,23 @@ const CuraDropdownSearch = class {
246
243
  this.host.style.setProperty('--dynamic-input-search-height', `${dropdownInputSearchElement.offsetHeight}px`);
247
244
  }
248
245
  }
246
+ handleGoBack() {
247
+ this.resetDropdownStyles();
248
+ this.isMobile = false;
249
+ }
250
+ resetDropdownStyles() {
251
+ var _a;
252
+ const dropdown = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-mobile');
253
+ if (dropdown && dropdown.style.position === 'fixed') {
254
+ dropdown.style.position = 'relative';
255
+ dropdown.style.removeProperty('bottom');
256
+ }
257
+ }
249
258
  render() {
250
259
  const isMobileDropdown = this.isMobile && this.isDropdownOpen;
251
- return (index.h(index.Host, { key: '36a0df3dfbe9f164ccb41541fb5373b0e94c86bd', style: this.hostCSSProperties(), class: "dropdown-overlay" }, index.h("div", { key: 'e17cf1eec89b0346f49f497ffc6e5ea272fcd3eb', class: `dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`, style: this.styles }, index.h("div", { key: 'eb33cc0c6abd4792cb18a4e55eaed913e4f75761', class: this.getClasses() }, this.isMobile && this.isDropdownOpen && (index.h("cura-button-transparent", { key: 'd837a3a15a89a9bd14260a32e3e218a3f53a18b1', fontColor: "dark", onClick: () => (this.isMobile = false), iconName: "arrowLeft", size: "medium", iconOnly: true, color: "primary" })), index.h("cura-input-text", { key: 'c8a02959ee1d637fde64fbcd8be238b7562f0790', disabled: this.disabled, label: this.label, part: "cura-input-field", mode: isMobileDropdown ? 'transparent' : 'default', required: this.required, hideErrorIcon: this.status === 'error', iconName: this.iconName || 'search', value: this.value, status: this.status, onValueChange: e => this.onValueChange(e.target.value), onInput: e => this.handleInputChange(e), onFocus: () => this.handleOnFocus(), onClick: () => (window.innerWidth < 768 ? (this.isMobile = true) : null), onBlur: () => {
260
+ return (index.h(index.Host, { key: '21f8601dd62ce272ac6856e6f951268b2fbbf32d', style: this.hostCSSProperties(), class: "dropdown-overlay" }, index.h("div", { key: 'a6841c5564454fcc33a4d053cd506c17f53026d3', class: `dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`, style: this.styles }, index.h("div", { key: '3653377bc88d97c60a049731f6286aa5d7fc516c', class: this.getClasses() }, this.isMobile && this.isDropdownOpen && (index.h("cura-button-transparent", { key: 'bd4614e2859df22d74d27532171e73de1cf60979', fontColor: "dark", onClick: () => this.handleGoBack(), iconName: "arrowLeft", size: "medium", iconOnly: true, color: "primary" })), index.h("cura-input-text", { key: '811d3745b6963d3aff02d58a39f7f1be472646fa', disabled: this.disabled, label: this.label, part: "cura-input-field", mode: isMobileDropdown ? 'transparent' : 'default', required: this.required, hideErrorIcon: this.status === 'error', iconName: this.iconName || 'search', value: this.value, status: this.status, onValueChange: e => this.onValueChange(e.target.value), onInput: e => this.handleInputChange(e), onFocus: () => this.handleOnFocus(), onClick: () => (window.innerWidth < 768 ? (this.isMobile = true) : null), onBlur: () => {
252
261
  this.handleOnBlur();
253
- }, placeholder: this.placeholder, size: this.size, onKeyDown: this.handleKeyDown }, index.h("slot", { key: '9cc22d4cf269fee171456169b787be54a814189e', name: "helperText" }))), index.h("div", { key: '4a9ce1710312984d2af67ac3a04df504183caaf6', id: "dropdown-search-list", class: this.getDropdownClasses() }, index.h("slot", { key: 'afdeb4b938c3d6767e440f4b32316c45b2a5e86f', name: "dropdown-search-option", onSlotchange: this.handleSlotChange })))));
262
+ }, placeholder: this.placeholder, size: this.size, onKeyDown: this.handleKeyDown }, index.h("slot", { key: 'a928b64d301c0cd674612698839a213344dc6798', name: "helperText" }))), index.h("div", { key: '06ba9b411e46969ccf7378869bc37d202084ead0', id: "dropdown-search-list", class: this.getDropdownClasses() }, index.h("slot", { key: '8915959d70f28a28c7b8035e77c34ed1f7035727', name: "dropdown-search-option", onSlotchange: this.handleSlotChange })))));
254
263
  }
255
264
  get host() { return index.getElement(this); }
256
265
  static get watchers() { return {
@@ -1 +1 @@
1
- {"file":"cura-dropdown-search.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/forms/cura-dropdown-search/cura-dropdown-search.scss?tag=cura-dropdown-search&encapsulation=shadow","src/components/forms/cura-dropdown-search/cura-dropdown-search.tsx"],"sourcesContent":["@import '../../../scss/mixins/shadows.scss';\n\n:host {\n display: block;\n width: 100%;\n box-sizing: border-box;\n}\n\n.dropdown {\n display: flex;\n position: relative;\n\n flex-direction: column;\n width: inherit;\n\n .dropdown-search-list {\n z-index: 1000;\n }\n\n &-input-search {\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n background: transparent;\n\n\n &.dropdown-open {\n ::part(cura-input-field) {\n border-radius: 4px 4px 0px 0px;\n }\n ::slotted([slot='helperText']) {\n display: none;\n }\n\n cura-input-text {\n ::slotted([slot='helperText']) {\n display: none;\n }\n }\n }\n }\n\n &-search-list {\n position: absolute;\n top: calc(100% - 8px);\n width: 100%;\n max-height: var(--dropdown-max-height);\n padding: 12px 12px;\n margin: 0;\n box-sizing: border-box;\n @include shadow-level3(--neutral-black-shadow);\n border-radius: 0px 0px 4px 4px;\n border-top: 0 var(--neutral-light);\n border-right: 2px solid var(--neutral-light);\n border-bottom: 2px solid var(--neutral-light);\n border-left: 2px solid var(--neutral-light);\n background-color: var(--neutral-purewhite);\n list-style: none;\n overflow-y: auto;\n display: none;\n\n &.visible {\n display: block;\n }\n\n &-input-search {\n width: inherit;\n\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 16px 8px;\n border-bottom: 2px solid var(--info-base);\n background-color: var(--neutral-purewhite);\n\n cura-input-text {\n width: inherit;\n }\n\n &.error {\n background-color: var(--error-lighter);\n border-bottom: 2px solid var(--error-dark);\n }\n }\n }\n\n &-mobile {\n position: fixed;\n top: 1%;\n left: 0;\n right: 0;\n width: 100%;\n\n z-index: 10000;\n .dropdown-input-search {\n display: flex;\n gap: 4px;\n padding: 12px 8px;\n background-color: var(--neutral-purewhite);\n border-bottom: 2px solid var(--info-base);\n z-index: 10000;\n cura-button-transparent {\n display: flex;\n }\n &.error {\n background-color: var(--error-lighter);\n border-bottom: 2px solid var(--error-dark);\n }\n &.dropdown-open {\n display: flex;\n\n ::slotted([slot='helperText']) {\n display: block;\n }\n }\n }\n .dropdown-search-list {\n position: static;\n width: 100%;\n height: calc(100vh - var(--dynamic-input-search-height, 0));\n max-height: none;\n padding: 12px 12px;\n margin: 0;\n box-sizing: border-box;\n box-shadow: none;\n border: none;\n background-color: var(--neutral-purewhite);\n list-style: none;\n overflow-y: auto;\n z-index: 10000;\n }\n }\n}\n","import { Component, Host, Prop, State, Event, EventEmitter, Element, Watch, h } from '@stencil/core';\n\n@Component({\n tag: 'cura-dropdown-search',\n styleUrl: 'cura-dropdown-search.scss',\n shadow: true,\n})\nexport class CuraDropdownSearch {\n /**\n * Size of the dropdown search mode default: 'small', 'medium', or 'large' (default: 'large')\n */\n @Prop({ reflect: true, mutable: true }) size: 'small' | 'medium' | 'large' = 'large';\n\n /**\n * Define the status of the dropdown search.\n */\n @Prop({ reflect: true }) status: 'error' | 'default' = 'default';\n\n /**\n * Whether the select component is disabled.\n * Reflects as an attribute in the DOM.\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * The name of the dropdown search component.\n */\n @Prop({ reflect: true }) name: string;\n\n /**\n * Indicates if the dropdown search is required.\n */\n @Prop({ reflect: true, mutable: true }) required: boolean = false;\n\n /**\n * Indicates if the dropdown search is selected.\n */\n @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n\n /**\n * The value of the dropdown search.\n */\n @Prop({ reflect: true, mutable: true }) value: string = '';\n\n /**\n * The placeholder text for the dropdown search.\n */\n @Prop({ reflect: true, mutable: true }) placeholder: string = '';\n\n /**\n * The label for the dropdown search.\n */\n @Prop({ reflect: true, mutable: true }) label: string = '';\n\n /**\n * Custom icon name. Default: search.\n */\n @Prop({ reflect: true }) iconName = 'search';\n\n /**\n * CSS max-height property for dropdown item.\n * Default to 630px\n */\n @Prop({ reflect: true }) dropdownMaxHeight = '630px';\n\n /**\n * Reference to the host element.\n */\n @Element() host: HTMLElement;\n\n /**\n * Indicates if the overlay is visible.\n */\n @State() overlayVisible: boolean = false;\n\n /**\n * Event emitted when the value changes.\n */\n @Event() valueChanged: EventEmitter<string>;\n\n /**\n * Indicates if the dropdown is open.\n */\n @State() isDropdownOpen: boolean = false;\n\n /**\n * Styles for the component.\n\n */\n @State() styles = {};\n\n /**\n * Indicates if the component is being viewed on a mobile device.\n */\n @State() isMobile: boolean = window.innerWidth < 768;\n\n /**\n * The mode of the dropdown search.\n */\n @State() mode: 'default' | 'transparent' = 'default';\n\n @Event() onselect: EventEmitter;\n\n @State() inputTextRef!: HTMLCuraInputTextElement;\n\n /**\n * Indicates if the input is on blur.\n */\n @State() isOnBlurInput: boolean = true;\n\n /**\n * The index of the currently hovered option.\n */\n @State() hoveredIndex: number = -1;\n\n /**\n * The options for the dropdown search.\n * @type {HTMLCuraDropdownSearchOptionElement[]}\n */\n\n weights;\n\n private overlayElement: HTMLDivElement | null = null;\n\n @State() options: HTMLCuraDropdownSearchOptionElement[] = [];\n\n private adjustInputPosition = () => {\n window.visualViewport.addEventListener('resize', () => {\n const isKeyboardOpen = window.innerHeight < window.screen.height * 0.8;\n const dropdown = this.host.shadowRoot?.querySelector('.dropdown-mobile') as HTMLInputElement;\n\n if (dropdown) {\n if (isKeyboardOpen) {\n dropdown.style.position = 'absolute';\n dropdown.style.bottom = `${window.screen.height - window.innerHeight}px`;\n } else {\n dropdown.style.position = 'fixed';\n dropdown.style.bottom = '0';\n }\n }\n\n window.scroll({\n top: 0,\n left: 0,\n behavior: 'smooth',\n });\n });\n };\n\n connectedCallback() {\n this.weights = window.CuraAPI.theme.fonts.getWeights();\n this.styles['--info-base'] = window.CuraAPI.theme.colors.getColor('info-base');\n this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor('neutral-purewhite');\n this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor('neutral-light');\n this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor('neutral-dark');\n this.styles['--neutral-black-shadow'] = window.CuraAPI.theme.colors.getColor(`neutral-black`, 0.16);\n this.styles['--error-dark'] = window.CuraAPI.theme.colors.getColor('error-dark');\n this.styles['--error-lighter'] = window.CuraAPI.theme.colors.getColor('error-lighter');\n this.styles['--breakpoints'] = window.CuraAPI.theme.breakpoints.get();\n this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n this.styles['--font-weight-medium'] = this.weights.medium;\n }\n\n @Watch('value')\n onValueChange(newValue: string) {\n this.updateSelectedOption(newValue);\n this.valueChanged.emit(newValue);\n }\n\n componentWillLoad() {\n this.updateSelectedOption(this.value);\n }\n\n componentDidRender() {\n if (this.isDropdownOpen && this.isMobile) {\n this.showOverlay();\n this.getDropdownSearchListHeight();\n } else {\n this.removeOverlay();\n }\n }\n componentDidLoad() {\n window.addEventListener('resize', this.handleResize);\n window.addEventListener('resize', this.adjustInputPosition);\n }\n\n disconnectedCallback() {\n window.removeEventListener('resize', this.handleResize);\n window.removeEventListener('resize', this.adjustInputPosition);\n }\n\n private showOverlay() {\n if (!this.overlayElement) {\n this.overlayElement = document.createElement('div');\n this.overlayElement.className = 'dropdown-overlay';\n this.overlayElement.style.position = 'fixed';\n this.overlayElement.style.top = '0';\n this.overlayElement.style.left = '0';\n this.overlayElement.style.width = '100%';\n this.overlayElement.style.height = '100%';\n this.overlayElement.style.zIndex = '9999';\n this.overlayElement.style.backgroundColor = 'white';\n document.body.appendChild(this.overlayElement);\n }\n }\n\n private removeOverlay() {\n if (this.overlayElement && this.overlayElement.parentNode === document.body) {\n document.body.removeChild(this.overlayElement);\n this.overlayElement = null;\n }\n }\n\n private handleSlotChange = () => {\n this.options = Array.from(this.host.querySelectorAll('cura-dropdown-search-option'));\n this.addClickListenersToOptions();\n this.updateHoveredIndex();\n };\n\n private addClickListenersToOptions() {\n this.options.forEach((option, index) => {\n option.addEventListener('optionSelected', () => this.onSelectedOption(index));\n });\n }\n\n private updateSelectedOption(value: string) {\n const selectedOptionIndex = this.options.findIndex(option => option.getAttribute('value') === value);\n this.hoveredIndex = selectedOptionIndex;\n this.updateOptionAttribute('hovered', this.hoveredIndex);\n this.updateOptionAttribute('selected', this.hoveredIndex);\n\n this.scrollIntoView();\n this.adjustInputPosition();\n }\n\n private handleInputChange = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.value = input.value;\n this.onValueChange(this.value);\n // this.valueChanged.emit(this.value);\n };\n\n private onSelectedOption(index: number) {\n const selectedOption = this.options[index];\n if (selectedOption.selectable) {\n const selectedValue = selectedOption.getAttribute('value') || selectedOption.textContent;\n\n this.value = selectedValue || '';\n this.updateSelectedOption(this.value);\n\n this.isDropdownOpen = false;\n this.isOnBlurInput = true;\n this.removeOverlay();\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n this.moveHighlight(1);\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n this.moveHighlight(-1);\n } else if (event.key === 'Enter') {\n event.preventDefault();\n if (this.hoveredIndex > -1) {\n this.handleOnBlur();\n this.onSelectedOption(this.hoveredIndex);\n }\n }\n };\n\n private moveHighlight(direction: number) {\n const visibleOptions = this.options;\n const newIndex = (this.hoveredIndex + direction + visibleOptions.length) % visibleOptions.length;\n this.hoveredIndex = newIndex;\n this.updateOptionAttribute('hovered', this.hoveredIndex);\n this.scrollIntoView();\n }\n\n private updateOptionAttribute(attribute: string, indexToUpdate: number) {\n this.options.forEach((option, index) => {\n (option as any)[attribute] = index === indexToUpdate;\n });\n }\n\n private updateHoveredIndex() {\n const visibleOptions = this.options;\n const currentValue = this.value;\n this.hoveredIndex = visibleOptions.findIndex(option => option.getAttribute('value') === currentValue);\n }\n\n private scrollIntoView() {\n const container = this.host.shadowRoot?.querySelector('.dropdown-search-list');\n const hoveredOption = this.options[this.hoveredIndex];\n\n if (container && hoveredOption) {\n const optionRect = hoveredOption.getBoundingClientRect();\n const containerRect = container.getBoundingClientRect();\n\n if (optionRect.bottom > containerRect.bottom) {\n container.scrollTop += optionRect.bottom - containerRect.bottom;\n }\n\n if (optionRect.top < containerRect.top) {\n container.scrollTop -= containerRect.top - optionRect.top;\n }\n }\n }\n\n private handleResize = () => {\n this.isMobile = window.innerWidth < 768;\n if (this.isDropdownOpen) {\n if (this.isMobile) {\n this.showOverlay();\n } else {\n this.removeOverlay();\n }\n }\n };\n\n handleOnBlur() {\n if (this.isOnBlurInput === true) {\n setTimeout(() => {\n this.isDropdownOpen = false;\n this.removeOverlay();\n }, 200);\n }\n }\n getClasses() {\n return {\n 'dropdown-input-search': true,\n 'dropdown-open': this.isDropdownOpen,\n 'disabled': this.disabled,\n [this.status]: true,\n };\n }\n\n getDropdownClasses() {\n return {\n 'dropdown-search-list': true,\n 'visible': this.options.length && this.isDropdownOpen ? true : false,\n };\n }\n\n hostCSSProperties() {\n return {\n '--dropdown-max-height': this.dropdownMaxHeight,\n };\n }\n\n handleOnFocus() {\n this.isDropdownOpen = true;\n }\n\n getDropdownSearchListHeight() {\n const dropdownInputSearchElement = this.host.shadowRoot?.querySelector('.dropdown-input-search') as HTMLInputElement;\n if (dropdownInputSearchElement) {\n this.host.style.setProperty('--dynamic-input-search-height', `${dropdownInputSearchElement.offsetHeight}px`);\n }\n }\n\n render() {\n const isMobileDropdown = this.isMobile && this.isDropdownOpen;\n return (\n <Host style={this.hostCSSProperties()} class=\"dropdown-overlay\">\n <div class={`dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`} style={this.styles}>\n <div class={this.getClasses()}>\n {this.isMobile && this.isDropdownOpen && (\n <cura-button-transparent\n fontColor=\"dark\"\n onClick={() => (this.isMobile = false)}\n iconName=\"arrowLeft\"\n size=\"medium\"\n iconOnly\n color=\"primary\"\n ></cura-button-transparent>\n )}\n <cura-input-text\n disabled={this.disabled}\n label={this.label}\n part=\"cura-input-field\"\n mode={isMobileDropdown ? 'transparent' : 'default'}\n required={this.required}\n hideErrorIcon={this.status === 'error'}\n iconName={this.iconName || 'search'}\n value={this.value}\n status={this.status}\n onValueChange={e => this.onValueChange(e.target.value as string)}\n onInput={e => this.handleInputChange(e)}\n onFocus={() => this.handleOnFocus()}\n onClick={() => (window.innerWidth < 768 ? (this.isMobile = true) : null)}\n onBlur={() => {\n this.handleOnBlur();\n }}\n placeholder={this.placeholder}\n size={this.size}\n onKeyDown={this.handleKeyDown}\n >\n <slot name=\"helperText\"></slot>\n </cura-input-text>\n </div>\n <div id=\"dropdown-search-list\" class={this.getDropdownClasses()}>\n <slot name=\"dropdown-search-option\" onSlotchange={this.handleSlotChange}></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"cura-dropdown-search.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/forms/cura-dropdown-search/cura-dropdown-search.scss?tag=cura-dropdown-search&encapsulation=shadow","src/components/forms/cura-dropdown-search/cura-dropdown-search.tsx"],"sourcesContent":["@import '../../../scss/mixins/shadows.scss';\n\n:host {\n display: block;\n width: 100%;\n box-sizing: border-box;\n}\n\n.dropdown {\n display: flex;\n position: relative;\n\n flex-direction: column;\n width: inherit;\n\n .dropdown-search-list {\n z-index: 1000;\n }\n\n &-input-search {\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n background: transparent;\n\n\n &.dropdown-open {\n ::part(cura-input-field) {\n border-radius: 4px 4px 0px 0px;\n }\n ::slotted([slot='helperText']) {\n display: none;\n }\n\n cura-input-text {\n ::slotted([slot='helperText']) {\n display: none;\n }\n }\n }\n }\n\n &-search-list {\n position: absolute;\n top: calc(100% - 8px);\n width: 100%;\n max-height: var(--dropdown-max-height);\n padding: 12px 12px;\n margin: 0;\n box-sizing: border-box;\n @include shadow-level3(--neutral-black-shadow);\n border-radius: 0px 0px 4px 4px;\n border-top: 0 var(--neutral-light);\n border-right: 2px solid var(--neutral-light);\n border-bottom: 2px solid var(--neutral-light);\n border-left: 2px solid var(--neutral-light);\n background-color: var(--neutral-purewhite);\n list-style: none;\n overflow-y: auto;\n display: none;\n\n &.visible {\n display: block;\n }\n\n &-input-search {\n width: inherit;\n\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 16px 8px;\n border-bottom: 2px solid var(--info-base);\n background-color: var(--neutral-purewhite);\n\n cura-input-text {\n width: inherit;\n }\n\n &.error {\n background-color: var(--error-lighter);\n border-bottom: 2px solid var(--error-dark);\n }\n }\n }\n\n &-mobile {\n position: fixed;\n top: 1%;\n left: 0;\n right: 0;\n width: 100%;\n\n z-index: 10000;\n .dropdown-input-search {\n display: flex;\n gap: 4px;\n padding: 12px 8px;\n background-color: var(--neutral-purewhite);\n border-bottom: 2px solid var(--info-base);\n z-index: 10000;\n cura-button-transparent {\n display: flex;\n }\n &.error {\n background-color: var(--error-lighter);\n border-bottom: 2px solid var(--error-dark);\n }\n &.dropdown-open {\n display: flex;\n\n ::slotted([slot='helperText']) {\n display: block;\n }\n }\n }\n .dropdown-search-list {\n position: static;\n width: 100%;\n height: calc(100vh - var(--dynamic-input-search-height, 0));\n max-height: none;\n padding: 12px 12px;\n margin: 0;\n box-sizing: border-box;\n box-shadow: none;\n border: none;\n background-color: var(--neutral-purewhite);\n list-style: none;\n overflow-y: auto;\n z-index: 10000;\n }\n }\n}\n","import { Component, Host, Prop, State, Event, EventEmitter, Element, Watch, h } from '@stencil/core';\n\n@Component({\n tag: 'cura-dropdown-search',\n styleUrl: 'cura-dropdown-search.scss',\n shadow: true,\n})\nexport class CuraDropdownSearch {\n /**\n * Size of the dropdown search mode default: 'small', 'medium', or 'large' (default: 'large')\n */\n @Prop({ reflect: true, mutable: true }) size: 'small' | 'medium' | 'large' = 'large';\n\n /**\n * Define the status of the dropdown search.\n */\n @Prop({ reflect: true }) status: 'error' | 'default' = 'default';\n\n /**\n * Whether the select component is disabled.\n * Reflects as an attribute in the DOM.\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * The name of the dropdown search component.\n */\n @Prop({ reflect: true }) name: string;\n\n /**\n * Indicates if the dropdown search is required.\n */\n @Prop({ reflect: true, mutable: true }) required: boolean = false;\n\n /**\n * Indicates if the dropdown search is selected.\n */\n @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n\n /**\n * The value of the dropdown search.\n */\n @Prop({ reflect: true, mutable: true }) value: string = '';\n\n /**\n * The placeholder text for the dropdown search.\n */\n @Prop({ reflect: true, mutable: true }) placeholder: string = '';\n\n /**\n * The label for the dropdown search.\n */\n @Prop({ reflect: true, mutable: true }) label: string = '';\n\n /**\n * Custom icon name. Default: search.\n */\n @Prop({ reflect: true }) iconName = 'search';\n\n /**\n * CSS max-height property for dropdown item.\n * Default to 630px\n */\n @Prop({ reflect: true }) dropdownMaxHeight = '630px';\n\n /**\n * Reference to the host element.\n */\n @Element() host: HTMLElement;\n\n /**\n * Indicates if the overlay is visible.\n */\n @State() overlayVisible: boolean = false;\n\n /**\n * Event emitted when the value changes.\n */\n @Event() valueChanged: EventEmitter<string>;\n\n /**\n * Indicates if the dropdown is open.\n */\n @State() isDropdownOpen: boolean = false;\n\n /**\n * Styles for the component.\n\n */\n @State() styles = {};\n\n /**\n * Indicates if the component is being viewed on a mobile device.\n */\n @State() isMobile: boolean = window.innerWidth < 768;\n\n /**\n * The mode of the dropdown search.\n */\n @State() mode: 'default' | 'transparent' = 'default';\n\n @Event() onselect: EventEmitter;\n\n @State() inputTextRef!: HTMLCuraInputTextElement;\n\n /**\n * Indicates if the input is on blur.\n */\n @State() isOnBlurInput: boolean = true;\n\n /**\n * The index of the currently hovered option.\n */\n @State() hoveredIndex: number = -1;\n\n /**\n * The options for the dropdown search.\n * @type {HTMLCuraDropdownSearchOptionElement[]}\n */\n\n weights;\n\n private overlayElement: HTMLDivElement | null = null;\n\n @State() options: HTMLCuraDropdownSearchOptionElement[] = [];\n\n /**\n *\n * Stores the original value of the 'overflow' style of the body\n * before blocking the scroll.\n */\n @State() originalOverflow: string = '';\n\n private adjustInputPosition = () => {\n window.visualViewport.addEventListener('resize', () => {\n const isKeyboardOpen = window.innerHeight < window.screen.height * 0.8;\n const dropdown = this.host.shadowRoot?.querySelector('.dropdown-mobile') as HTMLInputElement;\n\n if (dropdown) {\n dropdown.style.position = isKeyboardOpen ? 'absolute' : 'fixed';\n dropdown.style.bottom = isKeyboardOpen ? `${window.screen.height - window.innerHeight}px` : '0';\n window.scroll({ top: 0, left: 0, behavior: 'smooth' });\n }\n });\n };\n\n connectedCallback() {\n this.weights = window.CuraAPI.theme.fonts.getWeights();\n this.styles['--info-base'] = window.CuraAPI.theme.colors.getColor('info-base');\n this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor('neutral-purewhite');\n this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor('neutral-light');\n this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor('neutral-dark');\n this.styles['--neutral-black-shadow'] = window.CuraAPI.theme.colors.getColor(`neutral-black`, 0.16);\n this.styles['--error-dark'] = window.CuraAPI.theme.colors.getColor('error-dark');\n this.styles['--error-lighter'] = window.CuraAPI.theme.colors.getColor('error-lighter');\n this.styles['--breakpoints'] = window.CuraAPI.theme.breakpoints.get();\n this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n this.styles['--font-weight-medium'] = this.weights.medium;\n }\n\n @Watch('value')\n onValueChange(newValue: string) {\n this.updateSelectedOption(newValue);\n this.valueChanged.emit(newValue);\n }\n\n componentWillLoad() {\n this.updateSelectedOption(this.value);\n }\n\n componentDidRender() {\n if (this.isDropdownOpen && this.isMobile) {\n this.showOverlay();\n this.getDropdownSearchListHeight();\n } else {\n this.removeOverlay();\n }\n }\n componentDidLoad() {\n window.addEventListener('resize', this.handleResize);\n window.addEventListener('resize', this.adjustInputPosition);\n }\n\n disconnectedCallback() {\n window.removeEventListener('resize', this.handleResize);\n window.removeEventListener('resize', this.adjustInputPosition);\n }\n\n private showOverlay() {\n if (!this.overlayElement) {\n this.overlayElement = document.createElement('div');\n this.overlayElement.className = 'dropdown-overlay';\n this.overlayElement.style.position = 'fixed';\n this.overlayElement.style.top = '0';\n this.overlayElement.style.left = '0';\n this.overlayElement.style.width = '100%';\n this.overlayElement.style.height = '100%';\n this.overlayElement.style.zIndex = '9999';\n this.overlayElement.style.backgroundColor = 'white';\n document.body.appendChild(this.overlayElement);\n\n this.originalOverflow = document.body.style.overflow;\n document.body.style.overflow = 'hidden';\n }\n }\n\n private removeOverlay() {\n if (this.overlayElement && this.overlayElement.parentNode === document.body) {\n document.body.removeChild(this.overlayElement);\n this.overlayElement = null;\n document.body.style.overflow = this.originalOverflow;\n }\n }\n\n private handleSlotChange = () => {\n this.options = Array.from(this.host.querySelectorAll('cura-dropdown-search-option'));\n this.addClickListenersToOptions();\n this.updateHoveredIndex();\n };\n\n private addClickListenersToOptions() {\n this.options.forEach((option, index) => {\n option.addEventListener('optionSelected', () => this.onSelectedOption(index));\n });\n }\n\n private updateSelectedOption(value: string) {\n const selectedOptionIndex = this.options.findIndex(option => option.getAttribute('value') === value);\n this.hoveredIndex = selectedOptionIndex;\n this.updateOptionAttribute('hovered', this.hoveredIndex);\n this.updateOptionAttribute('selected', this.hoveredIndex);\n\n this.scrollIntoView();\n this.adjustInputPosition();\n }\n\n private handleInputChange = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.value = input.value;\n this.onValueChange(this.value);\n // this.valueChanged.emit(this.value);\n };\n\n private onSelectedOption(index: number) {\n const selectedOption = this.options[index];\n if (selectedOption.selectable) {\n const selectedValue = selectedOption.getAttribute('value') || selectedOption.textContent;\n\n this.value = selectedValue || '';\n this.updateSelectedOption(this.value);\n\n this.isDropdownOpen = false;\n this.isOnBlurInput = true;\n this.resetDropdownStyles();\n this.removeOverlay();\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n this.moveHighlight(1);\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n this.moveHighlight(-1);\n } else if (event.key === 'Enter') {\n event.preventDefault();\n if (this.hoveredIndex > -1) {\n this.handleOnBlur();\n this.onSelectedOption(this.hoveredIndex);\n }\n }\n };\n\n private moveHighlight(direction: number) {\n const visibleOptions = this.options;\n const newIndex = (this.hoveredIndex + direction + visibleOptions.length) % visibleOptions.length;\n this.hoveredIndex = newIndex;\n this.updateOptionAttribute('hovered', this.hoveredIndex);\n this.scrollIntoView();\n }\n\n private updateOptionAttribute(attribute: string, indexToUpdate: number) {\n this.options.forEach((option, index) => {\n (option as any)[attribute] = index === indexToUpdate;\n });\n }\n\n private updateHoveredIndex() {\n const visibleOptions = this.options;\n const currentValue = this.value;\n this.hoveredIndex = visibleOptions.findIndex(option => option.getAttribute('value') === currentValue);\n }\n\n private scrollIntoView() {\n const container = this.host.shadowRoot?.querySelector('.dropdown-search-list');\n const hoveredOption = this.options[this.hoveredIndex];\n\n if (container && hoveredOption) {\n const optionRect = hoveredOption.getBoundingClientRect();\n const containerRect = container.getBoundingClientRect();\n\n if (optionRect.bottom > containerRect.bottom) {\n container.scrollTop += optionRect.bottom - containerRect.bottom;\n }\n\n if (optionRect.top < containerRect.top) {\n container.scrollTop -= containerRect.top - optionRect.top;\n }\n }\n }\n\n private handleResize = () => {\n this.isMobile = window.innerWidth < 768;\n if (this.isDropdownOpen) {\n if (this.isMobile) {\n this.showOverlay();\n } else {\n this.resetDropdownStyles();\n this.removeOverlay();\n }\n }\n };\n\n handleOnBlur() {\n if (this.isOnBlurInput === true) {\n setTimeout(() => {\n this.isDropdownOpen = false;\n this.resetDropdownStyles();\n this.removeOverlay();\n }, 200);\n }\n }\n getClasses() {\n return {\n 'dropdown-input-search': true,\n 'dropdown-open': this.isDropdownOpen,\n 'disabled': this.disabled,\n [this.status]: true,\n };\n }\n\n getDropdownClasses() {\n return {\n 'dropdown-search-list': true,\n 'visible': this.options.length && this.isDropdownOpen ? true : false,\n };\n }\n\n hostCSSProperties() {\n return {\n '--dropdown-max-height': this.dropdownMaxHeight,\n };\n }\n\n handleOnFocus() {\n this.isDropdownOpen = true;\n }\n\n getDropdownSearchListHeight() {\n const dropdownInputSearchElement = this.host.shadowRoot?.querySelector('.dropdown-input-search') as HTMLInputElement;\n if (dropdownInputSearchElement) {\n this.host.style.setProperty('--dynamic-input-search-height', `${dropdownInputSearchElement.offsetHeight}px`);\n }\n }\n\n handleGoBack() {\n this.resetDropdownStyles();\n this.isMobile = false;\n }\n\n resetDropdownStyles() {\n const dropdown = this.host.shadowRoot?.querySelector('.dropdown-mobile') as HTMLInputElement;\n if (dropdown && dropdown.style.position === 'fixed') {\n dropdown.style.position = 'relative';\n dropdown.style.removeProperty('bottom');\n }\n }\n\n render() {\n const isMobileDropdown = this.isMobile && this.isDropdownOpen;\n return (\n <Host style={this.hostCSSProperties()} class=\"dropdown-overlay\">\n <div class={`dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`} style={this.styles}>\n <div class={this.getClasses()}>\n {this.isMobile && this.isDropdownOpen && (\n <cura-button-transparent fontColor=\"dark\" onClick={() => this.handleGoBack()} iconName=\"arrowLeft\" size=\"medium\" iconOnly color=\"primary\"></cura-button-transparent>\n )}\n <cura-input-text\n disabled={this.disabled}\n label={this.label}\n part=\"cura-input-field\"\n mode={isMobileDropdown ? 'transparent' : 'default'}\n required={this.required}\n hideErrorIcon={this.status === 'error'}\n iconName={this.iconName || 'search'}\n value={this.value}\n status={this.status}\n onValueChange={e => this.onValueChange(e.target.value as string)}\n onInput={e => this.handleInputChange(e)}\n onFocus={() => this.handleOnFocus()}\n onClick={() => (window.innerWidth < 768 ? (this.isMobile = true) : null)}\n onBlur={() => {\n this.handleOnBlur();\n }}\n placeholder={this.placeholder}\n size={this.size}\n onKeyDown={this.handleKeyDown}\n >\n <slot name=\"helperText\"></slot>\n </cura-input-text>\n </div>\n <div id=\"dropdown-search-list\" class={this.getDropdownClasses()}>\n <slot name=\"dropdown-search-option\" onSlotchange={this.handleSlotChange}></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
@@ -173,7 +173,7 @@ const CuraInputDate = class {
173
173
  }
174
174
  }
175
175
  render() {
176
- return (index.h(index.Host, { key: 'a85d8edd29146ca4068bb0fb5f718a5b6426638e' }, index.h("div", { key: '99a69b37f9370bdf242d0dc698f707f28cf0325a', class: "container", style: this.styles }, index.h("cura-input-text", { key: '5f5450f7390792c1188e17f48a9d04f4339fc156', label: this.label, name: this.name, status: this.status, value: this.value, onFocus: () => this.showCalendar(), size: this.size, "icon-name": this.iconName, placeholder: this.dateSettings.placeholder, "mask-preset": this.dateSettings.mask, "enable-selection-mode": true, onKeyUp: event => this.handleInputDates(event), autocomplete: "off", onValueChange: event => this.handleChangeDates(event) }, this.renderCalendarOrHelperText()))));
176
+ return (index.h(index.Host, { key: 'bcda0a8a2601f24d445775e40535d1c8a80be5c0' }, index.h("div", { key: '3a3e11f1bd7082d563537a8679f69f976f242a4a', class: "container", style: this.styles }, index.h("cura-input-text", { key: '86ce4be158090c4ad4bfaa1e5196548fa5e1c105', label: this.label, name: this.name, status: this.status, value: this.value, onFocus: () => this.showCalendar(), size: this.size, "icon-name": this.iconName, placeholder: this.dateSettings.placeholder, "mask-preset": this.dateSettings.mask, "enable-selection-mode": true, onKeyUp: event => this.handleInputDates(event), autocomplete: "off", onValueChange: event => this.handleChangeDates(event) }, this.renderCalendarOrHelperText()))));
177
177
  }
178
178
  static get formAssociated() { return true; }
179
179
  get el() { return index.getElement(this); }
@@ -25,7 +25,7 @@ const CuraLoaderBar = class {
25
25
  this.setProgress();
26
26
  }
27
27
  render() {
28
- return (index.h(index.Host, { key: 'af0397ee6a031081a84200da4863752ccbf937ce' }, index.h("div", { key: '5e054c2b571053bdb58b415a6ca642a8bc0385f3', id: "progress-bar", class: "progress-bar", style: this.styles }, index.h("span", { key: '2463789bf8737e13b6b5a49a1af4e51ce1637176', class: "progress-bar-fill" }))));
28
+ return (index.h(index.Host, { key: 'b24471535bdf9ada29ae81baa05f5c9abe7b79f9' }, index.h("div", { key: '15eb6b0b6abb45246c98d9e5957c492f44544062', id: "progress-bar", class: "progress-bar", style: this.styles }, index.h("span", { key: '032eee4ae4da0d5ad88f0df735d93ed37b8be26b', class: "progress-bar-fill" }))));
29
29
  }
30
30
  setColor() {
31
31
  this.styles = Object.assign(Object.assign({}, this.styles), { '--neutral-base': window.CuraAPI.theme.colors.getColor(`neutral-base`, 0.2), '--color-base': window.CuraAPI.theme.colors.getColor(this.color) });
@@ -0,0 +1,50 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ const index = require('./index-e6d728ec.js');
6
+
7
+ const curaModalCss = ":host{display:block}.modal{position:fixed;height:100%;width:100%;top:0px;bottom:0px;z-index:-1;margin-top:var(--offset-top)}.modal.open{z-index:100}.modal.open .backdrop,.modal.open .wrapper{opacity:1;visibility:visible;animation:fadeIn 0.3s ease-out}.container{display:flex;align-items:center;justify-content:center}.backdrop,.wrapper{opacity:0;visibility:hidden;transition:opacity 0.3s ease, visibility 0.3s ease}.backdrop{background-color:var(--background-color);z-index:90;animation:fadeIn 0.3s ease-out}.wrapper{position:fixed;background-color:var(--neutral-white);border:2px solid var(--neutral-light);border-radius:calc(var(--base-spacing) * 3px);width:700px;max-width:600px;min-width:200px;padding:0px calc(var(--base-spacing) * 4px) calc(var(--base-spacing) * 4px) calc(var(--base-spacing) * 4px);z-index:100;box-shadow:0px 8px 16px 0px var(--neutral-black-shadow-4, rgba(38, 38, 38, 0.12));transform:scale(0.95);transition:transform 0.3s ease-out, opacity 0.3s ease, visibility 0.3s ease}.wrapper ::slotted(*){max-height:80vh;overflow:auto;padding-right:calc(var(--base-spacing) * 5px)}.modal.open .wrapper{transform:scale(1);opacity:1;visibility:visible}.close{justify-self:flex-end;padding-top:calc(var(--base-spacing) * 4px);background:none;border:none;cursor:pointer}.close.mobile{display:none}.close.desktop{display:flex}@media (max-width: 768px){.wrapper{position:fixed;bottom:0px;width:80%;padding-top:calc(var(--base-spacing) * 4px);padding-bottom:0px;border-radius:calc(var(--base-spacing) * 3px) calc(var(--base-spacing) * 3px) 0px 0px;border-bottom:none}.close{align-items:center;border-top:1px dashed var(--neutral-light);margin-top:calc(var(--base-spacing) * 4px);padding:calc(var(--base-spacing) * 4px) 0px;justify-content:center;width:100%}.close.mobile{display:flex;gap:calc(var(--base-spacing) * 2px)}.close.desktop{display:none}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}";
8
+ const CuraModalStyle0 = curaModalCss;
9
+
10
+ const CuraModal = class {
11
+ constructor(hostRef) {
12
+ index.registerInstance(this, hostRef);
13
+ this.modalClose = index.createEvent(this, "modalClose", 7);
14
+ this.handleClose = () => {
15
+ this.modalClose.emit();
16
+ this.open = false;
17
+ };
18
+ this.open = false;
19
+ this.background = 'light';
20
+ this.topOffset = 0;
21
+ this.styles = {};
22
+ }
23
+ setColors() {
24
+ const backgroundTheme = {
25
+ dark: window.CuraAPI.theme.colors.getColor('neutral-black', 0.4),
26
+ light: window.CuraAPI.theme.colors.getColor('primary-darker', 0.8),
27
+ };
28
+ this.styles = Object.assign(Object.assign({}, this.styles), { '--background-color': backgroundTheme[this.background] });
29
+ }
30
+ setOffsetTop() {
31
+ this.styles = Object.assign(Object.assign({}, this.styles), { '--offset-top': `${this.topOffset}px` });
32
+ }
33
+ connectedCallback() {
34
+ this.styles = Object.assign(Object.assign({}, this.styles), { '--neutral-white': window.CuraAPI.theme.colors.getColor('neutral-white'), '--neutral-light': window.CuraAPI.theme.colors.getColor('neutral-light'), '--base-spacing': window.CuraAPI.theme.spacing.getSpacing() });
35
+ this.setColors();
36
+ this.setOffsetTop();
37
+ }
38
+ render() {
39
+ return (index.h(index.Host, { key: '002525d3ad03f3271b11b0dacfd748ccfbfbaf1c', role: "dialog", "aria-modal": "true" }, index.h("div", { key: 'a684163919124acc33469b38cffeb6826dd2dd8d', class: this.open ? 'modal container open' : 'modal container', style: this.styles }, index.h("div", { key: 'bff07303351e5f7a75870b9c0f2b4a16736110bc', class: this.open ? 'modal backdrop open' : 'modal backdrop', onClick: this.handleClose }), index.h("div", { key: '4e8ac2fd00c10abf24060c644bbdcd6a5275bacb', class: "wrapper" }, index.h("button", { key: '6a0ab79a39181216882559f115107edf1c20a2c7', class: "close desktop", onClick: this.handleClose }, index.h("cura-icon", { key: '3be3e5ee04fc5caa8786efaac0e03c946d0bdd14', name: "close", color: "error-dark", size: "small" })), index.h("slot", { key: '90fbd8951a449d41e2409ba10445a61e296c45e5' }), index.h("button", { key: '3075523254d90f7f7f4ca75f28a5724b2402f7d5', class: "close mobile", onClick: this.handleClose }, index.h("cura-icon", { key: '9bfd171b87d0f1ff625b17f043ff90fa9dbad6e7', name: "close", color: "error-dark", size: "16" }), index.h("cura-paragraph", { key: 'c17191a5570c08400cfb1409fa1ebf3f0e03a270', color: "error-dark", size: "small", marginBlock: "0" }, "Fechar"))))));
40
+ }
41
+ static get watchers() { return {
42
+ "background": ["setColors"],
43
+ "topOffset": ["setOffsetTop"]
44
+ }; }
45
+ };
46
+ CuraModal.style = CuraModalStyle0;
47
+
48
+ exports.cura_modal = CuraModal;
49
+
50
+ //# sourceMappingURL=cura-modal.cjs.entry.js.map
@@ -0,0 +1 @@
1
+ {"file":"cura-modal.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,k6DAAk6D,CAAC;AACx7D,wBAAe,YAAY;;MCMd,SAAS;;;;QAuDZ,gBAAW,GAAG;YACpB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;SACnB,CAAC;oBArDuD,KAAK;0BAKtB,OAAO;yBAKlB,CAAC;sBAMZ,EAAE;;IAGpB,SAAS;QACP,MAAM,eAAe,GAAG;YACtB,IAAI,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,EAAE,GAAG,CAAC;YAChE,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,EAAE,GAAG,CAAC;SACnE,CAAC;QAEF,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,oBAAoB,EAAE,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,GACvD,CAAC;KACH;IAGD,YAAY;QACV,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,cAAc,EAAE,GAAG,IAAI,CAAC,SAAS,IAAI,GACtC,CAAC;KACH;IAED,iBAAiB;QACf,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,iBAAiB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,EACxE,iBAAiB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,EACxE,gBAAgB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,GAC5D,CAAC;QACF,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;IAOD,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,IAAI,EAAC,QAAQ,gBAAY,MAAM,IACnCD,kEAAK,KAAK,EAAE,IAAI,CAAC,IAAI,GAAG,sBAAsB,GAAG,iBAAiB,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,IACpFA,kEAAK,KAAK,EAAE,IAAI,CAAC,IAAI,GAAG,qBAAqB,GAAG,gBAAgB,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,GAAQ,EACnGA,kEAAK,KAAK,EAAC,SAAS,IAElBA,qEAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IACrDA,wEAAW,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,GAAa,CAC7D,EACTA,oEAAa,EAEbA,qEAAQ,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IACpDA,wEAAW,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,GAAa,EACjEA,6EAAgB,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,GAAG,aAE9C,CACV,CACL,CACF,CACD,EACP;KACH;;;;;;;;;;","names":["h","Host"],"sources":["src/components/cura-modal/cura-modal.scss?tag=cura-modal&encapsulation=shadow","src/components/cura-modal/cura-modal.tsx"],"sourcesContent":["@import '../../../src/scss/mixins/spacing.scss';\n@import '../../../src/scss/mixins/shadows.scss';\n@import '../../../src/scss/mixins/responsive.scss';\n@import '../../../src/scss/mixins/animations.scss';\n\n:host {\n display: block;\n}\n\n.modal {\n position: fixed;\n height: 100%;\n width: 100%;\n top: #{$spacing-none};\n bottom: #{$spacing-none};\n z-index: -1;\n margin-top: var(--offset-top);\n\n &.open {\n z-index: 100;\n\n .backdrop,\n .wrapper {\n opacity: 1;\n visibility: visible;\n animation: fadeIn 0.3s ease-out;\n }\n }\n}\n\n.container {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.backdrop,\n.wrapper {\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s ease, visibility 0.3s ease;\n}\n\n.backdrop {\n background-color: var(--background-color);\n z-index: 90;\n animation: fadeIn 0.3s ease-out;\n}\n\n.wrapper {\n position: fixed;\n background-color: var(--neutral-white);\n border: 2px solid var(--neutral-light);\n border-radius: #{$spacing-xxxs};\n width: 700px;\n max-width: 600px;\n min-width: 200px;\n padding: #{$spacing-none} #{$spacing-xxs} #{$spacing-xxs} #{$spacing-xxs};\n z-index: 100;\n\n @include shadow-level4();\n\n transform: scale(0.95);\n transition: transform 0.3s ease-out, opacity 0.3s ease, visibility 0.3s ease;\n\n ::slotted(*) {\n max-height: 80vh;\n overflow: auto;\n padding-right: #{$spacing-xs};\n }\n}\n\n.modal.open .wrapper {\n transform: scale(1);\n opacity: 1;\n visibility: visible;\n}\n\n.close {\n justify-self: flex-end;\n padding-top: #{$spacing-xxs};\n background: none;\n border: none;\n cursor: pointer;\n\n &.mobile {\n display: none;\n }\n\n &.desktop {\n display: flex;\n }\n}\n\n@include mobile-only() {\n .wrapper {\n position: fixed;\n bottom: #{$spacing-none};\n width: 80%;\n padding-top: #{$spacing-xxs};\n padding-bottom: #{$spacing-none};\n border-radius: #{$spacing-xxxs} #{$spacing-xxxs} #{$spacing-none} #{$spacing-none};\n border-bottom: none;\n }\n\n .close {\n align-items: center;\n border-top: 1px dashed var(--neutral-light);\n margin-top: #{$spacing-xxs};\n padding: #{$spacing-xxs} #{$spacing-none};\n justify-content: center;\n width: 100%;\n\n &.mobile {\n display: flex;\n gap: #{$spacing-mini};\n }\n\n &.desktop {\n display: none;\n }\n }\n}\n\n@include fadeIn();\n@include fadeOut();\n","import { Component, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\n\n@Component({\n tag: 'cura-modal',\n styleUrl: 'cura-modal.scss',\n shadow: true,\n})\nexport class CuraModal {\n /**\n * Property open to control modal visibility.\n * Default: false\n */\n @Prop({ mutable: true, reflect: true }) open?: boolean = false;\n /**\n * Property background to control modal backdrop color.\n * Default: light\n */\n @Prop() background?: 'dark' | 'light' = 'light';\n /**\n * Property offsetTop to control modal top position.\n * Default: 0px\n */\n @Prop() topOffset?: number = 0;\n /**\n * Event close to handle modal close.\n */\n @Event({ eventName: 'modalClose' }) modalClose: EventEmitter<void>;\n\n @State() styles = {};\n\n @Watch('background')\n setColors() {\n const backgroundTheme = {\n dark: window.CuraAPI.theme.colors.getColor('neutral-black', 0.4),\n light: window.CuraAPI.theme.colors.getColor('primary-darker', 0.8),\n };\n\n this.styles = {\n ...this.styles,\n '--background-color': backgroundTheme[this.background],\n };\n }\n\n @Watch('topOffset')\n setOffsetTop() {\n this.styles = {\n ...this.styles,\n '--offset-top': `${this.topOffset}px`,\n };\n }\n\n connectedCallback() {\n this.styles = {\n ...this.styles,\n '--neutral-white': window.CuraAPI.theme.colors.getColor('neutral-white'),\n '--neutral-light': window.CuraAPI.theme.colors.getColor('neutral-light'),\n '--base-spacing': window.CuraAPI.theme.spacing.getSpacing(),\n };\n this.setColors();\n this.setOffsetTop();\n }\n\n private handleClose = () => {\n this.modalClose.emit();\n this.open = false;\n };\n\n render() {\n return (\n <Host role=\"dialog\" aria-modal=\"true\">\n <div class={this.open ? 'modal container open' : 'modal container'} style={this.styles}>\n <div class={this.open ? 'modal backdrop open' : 'modal backdrop'} onClick={this.handleClose}></div>\n <div class=\"wrapper\">\n {/* Desktop button */}\n <button class=\"close desktop\" onClick={this.handleClose}>\n <cura-icon name=\"close\" color=\"error-dark\" size=\"small\"></cura-icon>\n </button>\n <slot></slot>\n {/* Mobile button */}\n <button class=\"close mobile\" onClick={this.handleClose}>\n <cura-icon name=\"close\" color=\"error-dark\" size=\"16\"></cura-icon>\n <cura-paragraph color=\"error-dark\" size=\"small\" marginBlock=\"0\">\n Fechar\n </cura-paragraph>\n </button>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
@@ -137,7 +137,7 @@ const CuraRadio = class {
137
137
  return statusColors[this.status][type];
138
138
  }
139
139
  render() {
140
- return (index.h(index.Host, { key: 'a0d89eeaf13690af56498ab584c22082b071b851' }, index.h("div", { key: '17a7ffae366d1942cdf8daccb0693434468040f8', class: this.getClasses(), style: this.styles }, index.h("div", { key: '2a03b1cc6eb6c26227bff90ec40f1f739e543613', class: "info" }, index.h("div", { key: '63a3f9a9f99504fc5f0e824a6398d502c2d7bec7', class: "label-wrapper" }, index.h("cura-label", { key: 'cddaf7347318cba1cd480352cde13321b44cc244', class: "label", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && index.h("cura-paragraph", { key: 'b2f5f549427841feb97ba43e26930e62e7d8f432', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), index.h("cura-label", { key: '7d32540fd194b86224189d2ba3da8da4cae9d2a9', color: this.assignColor('message'), size: "xsmall", class: "message" }, index.h("slot", { key: 'c4e8fa9a1fb18040da0038aa5ea7e6bcb0ee17bc' }))), index.h("input", { key: 'eaebe407c25af0bc72df251451a652fc6376ef9a', type: "radio", class: `radio ${this.size.toLocaleLowerCase()}`, name: this.name, value: this.value, required: this.required, tabIndex: this.ontabindex, disabled: this.disabled, checked: this.checked, onClick: this.handleClick }))));
140
+ return (index.h(index.Host, { key: '07ed893348b28a188a67ee6b5e8eedb0598d2309' }, index.h("div", { key: 'b80a2b0e3db1f5dcac77617ecb9629b219460dbe', class: this.getClasses(), style: this.styles }, index.h("div", { key: '945ceedc874bf7b8ecb48683d26fa626449fb377', class: "info" }, index.h("div", { key: '3257b5a46d040d0177e8a791a2d810bf278f7517', class: "label-wrapper" }, index.h("cura-label", { key: '8c68882b6e2f852a2d1929449b3c82469474fab3', class: "label", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && index.h("cura-paragraph", { key: 'e9adfe5998b2c5f705589461bff38705f0ddbbc7', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), index.h("cura-label", { key: '50063f682a67c74a0ce2292cc823c21e6db90bcd', color: this.assignColor('message'), size: "xsmall", class: "message" }, index.h("slot", { key: 'c746a61b3e7ea6d4a63143b794fd8c482829e834' }))), index.h("input", { key: '078275db7eb3a4878d93d77b120c3caaa0b5e0b7', type: "radio", class: `radio ${this.size.toLocaleLowerCase()}`, name: this.name, value: this.value, required: this.required, tabIndex: this.ontabindex, disabled: this.disabled, checked: this.checked, onClick: this.handleClick }))));
141
141
  }
142
142
  static get formAssociated() { return true; }
143
143
  get host() { return index.getElement(this); }
@@ -109,7 +109,7 @@ const CuraSwitch = class {
109
109
  return classes;
110
110
  }
111
111
  render() {
112
- return (index.h(index.Host, { key: '019642743001393249cba0ac937b861a0b309af3' }, index.h("div", { key: '32d6358af066b24b60fb2967891b0eda03027a25', class: this.getClasses(), style: this.styles }, index.h("div", { key: 'c29681689cbf04ee89afa793dd84f1a3c1198fb7', class: "info" }, index.h("cura-label", { key: '0865c7e0c45843769046039981382e4f7a9cf8cf', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, class: "label", weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', lineHeight: "125%", color: this.assignColor('neutral-white', 'neutral-black') }, this.label), index.h("cura-label", { key: 'b1fff87c188c2a1f306630a692c254dcacc5b03b', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, index.h("slot", { key: '553757a5022374bd10af67f4a0c449511203e2e6' }))), index.h("div", { key: 'a8babf17cdd9c8bb95225fce8501015859122ec6', onClick: this.toggleSwitch, class: "control" }, index.h("div", { key: '4828791117512af2526ed94b5981a0dab04b3e5c', class: `track ${this.size.toLowerCase()}` }, index.h("div", { key: '30a712271bcee777e9a3c79d04a2038db5b84869', class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
112
+ return (index.h(index.Host, { key: '7d90b4378da63462ce63f48a54b73c1ae73e75cd' }, index.h("div", { key: '880d8117e073b11e33acfe2915b4aa2695f6eda4', class: this.getClasses(), style: this.styles }, index.h("div", { key: '475056ce32564bd91dc48cd0d9d08059db77c030', class: "info" }, index.h("cura-label", { key: 'f391c5eb73fbae218a7037d0381fd49b9c739298', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, class: "label", weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', lineHeight: "125%", color: this.assignColor('neutral-white', 'neutral-black') }, this.label), index.h("cura-label", { key: 'd587a5d17813f65a77563ce70f0c5e924bbf737d', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, index.h("slot", { key: '9cb6d99b2c6e7f0f398fb2899823717c9b1b565e' }))), index.h("div", { key: 'c7fd172953c607baa30186dd1429b39af28093ca', onClick: this.toggleSwitch, class: "control" }, index.h("div", { key: '0392a5ea1bd31068aa8af7f95fe21f3c7bf7797e', class: `track ${this.size.toLowerCase()}` }, index.h("div", { key: '98d36e0853ec222beaefd6da984483cbc872a5fa', class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
113
113
  }
114
114
  static get formAssociated() { return true; }
115
115
  static get watchers() { return {
@@ -31,7 +31,7 @@ const CuraToast = class {
31
31
  this.setStyle();
32
32
  }
33
33
  render() {
34
- return (index.h(index.Host, { key: 'eb867953a8c56ae385b1226686cbe1b1e9df4318' }, index.h("div", { key: 'c901632a6fb414c981b5c149fdd7081306ae1130', class: this.getClasses(), style: this.styles }, index.h("cura-icon", { key: '98c9a49501c71ee60c6ae1d783bba11d5bdce999', class: "default-icon", name: this.getNameIcon(), size: 16, color: `${this.type}-dark` }), index.h("div", { key: '19b2e0bd0d816e94f3b9d1f113f4b833e770cee3', class: "content" }, index.h("cura-heading", { key: '17ed67e5b531b45b94f8dbc7d65675f7a57308f9', level: 4, size: "xsmall", color: `${this.type}-dark`, weight: "bold", "margin-block": "0" }, this.label), index.h("cura-paragraph", { key: 'dd90e612d924dff9b3e9896dc29cef2541ae51af', color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, index.h("slot", { key: '33cd9c1dd10ae6d3ebd857fab5c70ca7151f8a1b' })), index.h("slot", { key: '12d18bd482b957cdc5ee7a4fab20bdffe6bc647d', name: "actions" })), this.closeButton && index.h("cura-icon", { key: '3a83cdd43c6c11587013111c29673f916509b165', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.loader && !!this.autoCloseDelay && index.h("cura-loader-bar", { key: '13ec00fd7146119e9eab81ed6d52b1020d1eb1e8', color: `${this.type}-base`, progress: this.progress }))));
34
+ return (index.h(index.Host, { key: '467952f8386d659d44090163f3e14c0231dfcafd' }, index.h("div", { key: 'f510e12d309c79842d30cc24409b61433a6fe58e', class: this.getClasses(), style: this.styles }, index.h("cura-icon", { key: 'acd2a9d52ad91565c7bd36bc205753bdfe6e3e59', class: "default-icon", name: this.getNameIcon(), size: 16, color: `${this.type}-dark` }), index.h("div", { key: 'dced39ca17901673360dacbf27764b1387eff20d', class: "content" }, index.h("cura-heading", { key: '6ac55c8ae757f654c808b72b4f44b54dc822107c', level: 4, size: "xsmall", color: `${this.type}-dark`, weight: "bold", "margin-block": "0" }, this.label), index.h("cura-paragraph", { key: 'e8e83b891e0b7e02901999f1622a183afc94c28e', color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, index.h("slot", { key: '080891767b1b552520d7d3ed59002a9478eb0288' })), index.h("slot", { key: '0a43f99bbaf2e4cdd2fd7dc1d5a0431602b76361', name: "actions" })), this.closeButton && index.h("cura-icon", { key: '1ec27e6d6d44b82ed26a59cb6ba967858b4c8809', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.loader && !!this.autoCloseDelay && index.h("cura-loader-bar", { key: '6457bb003e4706d3f60b85aa3faa3e0b6b276869', color: `${this.type}-base`, progress: this.progress }))));
35
35
  }
36
36
  componentDidLoad() {
37
37
  this.openContainer();
@@ -35,7 +35,7 @@ const CuraTooltip = class {
35
35
  this.setStyle();
36
36
  }
37
37
  render() {
38
- return (index.h(index.Host, { key: '228558663e00355ca59429d70a129e4b0e426dc1', role: "tooltip", id: this.elementId }, index.h("div", { key: 'd8fa27a56dd894a4cfb335fc9de348402590aa93', class: "container", style: this.styles }, index.h("div", { key: '974114d04252a106deb2174bfe8ecf204e689d26', class: "content" }, index.h("cura-heading", { key: '14be9154283064e48d2435bc4bb6af6469b18e04', level: 4, size: "xsmall", color: "neutral-black", weight: "bold", "margin-block": "0" }, this.label), index.h("cura-paragraph", { key: 'db64a96112781640be945502b995dc07392977bd', color: "neutral-dark", "spot-color": "secondary-darker", size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, index.h("slot", { key: 'b3a9a3f7a5f227ddc92ac9498c3aee93f9196f77' }))), this.closeButton && !this.isMobile && index.h("cura-icon", { key: '66c113fe2c3b4c67b1b9e98408b8ca1736d4eb86', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.isMobile && index.h("cura-button-transparent", { key: '059b4e579bebc92b5082d98ce8ae3cce9f4da95d', class: "close-button", size: "small", type: "button", color: "error", "icon-name": "close", "icon-position": "right", onClick: this.handleClose }, "OK, entendi."))));
38
+ return (index.h(index.Host, { key: '732345360f527ffc69743818657643616b2ee611', role: "tooltip", id: this.elementId }, index.h("div", { key: '166aa0dd54c933f8b3b8ecc5c5c76824ef180d71', class: "container", style: this.styles }, index.h("div", { key: '7b54ec53f3b454979c45415ddcd164a71a9ab2b0', class: "content" }, index.h("cura-heading", { key: '71bf328ed2f9e5d704e6d06989a4bef6d7c4993d', level: 4, size: "xsmall", color: "neutral-black", weight: "bold", "margin-block": "0" }, this.label), index.h("cura-paragraph", { key: 'a427a4b9df7bfae50300c9947db9df825a2f7da0', color: "neutral-dark", "spot-color": "secondary-darker", size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, index.h("slot", { key: '65875debf5bd3eec9f3070ab96cf644460897c3b' }))), this.closeButton && !this.isMobile && index.h("cura-icon", { key: 'dac8229dc0f348b45ea3af9392c2001f638a0efb', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.isMobile && index.h("cura-button-transparent", { key: '6c90921145206d47ab84eaee972a08b9dcad7cf0', class: "close-button", size: "small", type: "button", color: "error", "icon-name": "close", "icon-position": "right", onClick: this.handleClose }, "OK, entendi."))));
39
39
  }
40
40
  componentDidLoad() {
41
41
  this.targetElement = document.querySelector(`[aria-labelledby="${this.elementId}"]`);