@rededor/cura 1.6.1-alpha.7 → 1.6.1-alpha.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 (148) hide show
  1. package/dist/cjs/app-globals-28c6f5c4.js.map +1 -1
  2. package/dist/cjs/cura-accordion_18.cjs.entry.js +10 -10
  3. package/dist/cjs/cura-accordion_18.cjs.entry.js.map +1 -1
  4. package/dist/cjs/cura-checkbox.cjs.entry.js +4 -2
  5. package/dist/cjs/cura-checkbox.cjs.entry.js.map +1 -1
  6. package/dist/cjs/cura-display.cjs.entry.js +1 -1
  7. package/dist/cjs/cura-input-date.cjs.entry.js +1 -1
  8. package/dist/cjs/cura-loader-bar.cjs.entry.js +1 -1
  9. package/dist/cjs/cura-modal.cjs.entry.js +15 -2
  10. package/dist/cjs/cura-modal.cjs.entry.js.map +1 -1
  11. package/dist/cjs/cura-progress-bar_2.cjs.entry.js +2 -2
  12. package/dist/cjs/cura-radio.cjs.entry.js +19 -17
  13. package/dist/cjs/cura-radio.cjs.entry.js.map +1 -1
  14. package/dist/cjs/cura-stepper.cjs.entry.js +1 -1
  15. package/dist/cjs/cura-switch.cjs.entry.js +4 -2
  16. package/dist/cjs/cura-switch.cjs.entry.js.map +1 -1
  17. package/dist/cjs/cura-toast.cjs.entry.js +1 -1
  18. package/dist/cjs/cura-tooltip.cjs.entry.js +1 -1
  19. package/dist/cjs/cura.cjs.js +1 -1
  20. package/dist/cjs/loader.cjs.js +1 -1
  21. package/dist/collection/components/cura-avatar/cura-avatar.js +34 -16
  22. package/dist/collection/components/cura-avatar/cura-avatar.js.map +1 -1
  23. package/dist/collection/components/cura-modal/cura-modal.css +3 -2
  24. package/dist/collection/components/cura-modal/cura-modal.js +14 -1
  25. package/dist/collection/components/cura-modal/cura-modal.js.map +1 -1
  26. package/dist/collection/components/cura-page-template/cura-page-template.js +1 -1
  27. package/dist/collection/components/cura-stepper/cura-progress-bar/cura-progress-bar.js +1 -1
  28. package/dist/collection/components/cura-stepper/cura-stepper-item/cura-stepper-item.js +1 -1
  29. package/dist/collection/components/cura-stepper/cura-stepper.js +1 -1
  30. package/dist/collection/components/cura-toast/cura-toast.js +1 -1
  31. package/dist/collection/components/cura-tooltip/cura-tooltip.js +1 -1
  32. package/dist/collection/components/forms/cura-checkbox/cura-checkbox.css +17 -1
  33. package/dist/collection/components/forms/cura-checkbox/cura-checkbox.js +45 -1
  34. package/dist/collection/components/forms/cura-checkbox/cura-checkbox.js.map +1 -1
  35. package/dist/collection/components/forms/cura-checkbox/cura-checkbox.stories.js +16 -2
  36. package/dist/collection/components/forms/cura-checkbox/cura-checkbox.stories.js.map +1 -1
  37. package/dist/collection/components/forms/cura-input-date/cura-input-date.js +1 -1
  38. package/dist/collection/components/forms/cura-input-text/cura-input-text.js +1 -1
  39. package/dist/collection/components/forms/cura-label/cura-label.js +1 -1
  40. package/dist/collection/components/forms/cura-radio/cura-radio.css +16 -1
  41. package/dist/collection/components/forms/cura-radio/cura-radio.js +62 -18
  42. package/dist/collection/components/forms/cura-radio/cura-radio.js.map +1 -1
  43. package/dist/collection/components/forms/cura-radio/cura-radio.stories.js +17 -4
  44. package/dist/collection/components/forms/cura-radio/cura-radio.stories.js.map +1 -1
  45. package/dist/collection/components/forms/cura-select/cura-select.js +3 -3
  46. package/dist/collection/components/forms/cura-select-options/cura-select-option.js +1 -1
  47. package/dist/collection/components/forms/cura-switch/cura-switch.css +11 -1
  48. package/dist/collection/components/forms/cura-switch/cura-switch.js +45 -1
  49. package/dist/collection/components/forms/cura-switch/cura-switch.js.map +1 -1
  50. package/dist/collection/components/forms/cura-switch/cura-switch.stories.js +16 -2
  51. package/dist/collection/components/forms/cura-switch/cura-switch.stories.js.map +1 -1
  52. package/dist/collection/components/loaders/cura-loader-bar/cura-loader-bar.js +1 -1
  53. package/dist/collection/components/loaders/cura-loader-circle/cura-loader-circle.js +1 -1
  54. package/dist/collection/components/text/cura-display/cura-display.js +1 -1
  55. package/dist/collection/components/text/cura-heading/cura-heading.js +1 -1
  56. package/dist/collection/components/text/cura-paragraph/cura-paragraph.js +1 -1
  57. package/dist/components/cura-avatar.js +1 -1
  58. package/dist/components/cura-avatar.js.map +1 -1
  59. package/dist/components/cura-checkbox.js +6 -2
  60. package/dist/components/cura-checkbox.js.map +1 -1
  61. package/dist/components/cura-display.js +1 -1
  62. package/dist/components/cura-heading2.js +1 -1
  63. package/dist/components/cura-input-date.js +1 -1
  64. package/dist/components/cura-label2.js +1 -1
  65. package/dist/components/cura-loader-bar2.js +1 -1
  66. package/dist/components/cura-loader-circle2.js +1 -1
  67. package/dist/components/cura-modal.js +31 -6
  68. package/dist/components/cura-modal.js.map +1 -1
  69. package/dist/components/cura-page-template.js +1 -1
  70. package/dist/components/cura-paragraph2.js +1 -1
  71. package/dist/components/cura-progress-bar2.js +1 -1
  72. package/dist/components/cura-radio.js +21 -17
  73. package/dist/components/cura-radio.js.map +1 -1
  74. package/dist/components/cura-select-option2.js +1 -1
  75. package/dist/components/cura-select2.js +3 -3
  76. package/dist/components/cura-stepper-item2.js +1 -1
  77. package/dist/components/cura-stepper.js +1 -1
  78. package/dist/components/cura-switch.js +6 -2
  79. package/dist/components/cura-switch.js.map +1 -1
  80. package/dist/components/cura-toast.js +1 -1
  81. package/dist/components/cura-tooltip.js +1 -1
  82. package/dist/components/index.js.map +1 -1
  83. package/dist/cura/cura.esm.js +1 -1
  84. package/dist/cura/cura.esm.js.map +1 -1
  85. package/dist/cura/{p-25932952.entry.js → p-0b872499.entry.js} +2 -2
  86. package/dist/cura/p-0c25333f.js.map +1 -1
  87. package/dist/cura/p-0ccde0ff.entry.js +2 -0
  88. package/dist/cura/p-0ccde0ff.entry.js.map +1 -0
  89. package/dist/cura/{p-777decf9.entry.js → p-137f003b.entry.js} +2 -2
  90. package/dist/cura/{p-3c305dbd.entry.js → p-202dc01a.entry.js} +2 -2
  91. package/dist/cura/{p-57c854b3.entry.js → p-20b05d8f.entry.js} +2 -2
  92. package/dist/cura/{p-1c9c62f1.entry.js → p-5a43e745.entry.js} +2 -2
  93. package/dist/cura/p-7a68835f.entry.js +2 -0
  94. package/dist/cura/p-7a68835f.entry.js.map +1 -0
  95. package/dist/cura/p-9fce5ec5.entry.js +2 -0
  96. package/dist/cura/p-9fce5ec5.entry.js.map +1 -0
  97. package/dist/cura/{p-b5464dfc.entry.js → p-ac01bec2.entry.js} +2 -2
  98. package/dist/cura/{p-0342c255.entry.js → p-b5d8a26b.entry.js} +2 -2
  99. package/dist/cura/p-b5d8a26b.entry.js.map +1 -0
  100. package/dist/cura/p-d8e1e182.entry.js +2 -0
  101. package/dist/cura/p-d8e1e182.entry.js.map +1 -0
  102. package/dist/cura/{p-d7f46266.entry.js → p-d97719bc.entry.js} +2 -2
  103. package/dist/esm/app-globals-ca1945d1.js.map +1 -1
  104. package/dist/esm/cura-accordion_18.entry.js +10 -10
  105. package/dist/esm/cura-accordion_18.entry.js.map +1 -1
  106. package/dist/esm/cura-checkbox.entry.js +4 -2
  107. package/dist/esm/cura-checkbox.entry.js.map +1 -1
  108. package/dist/esm/cura-display.entry.js +1 -1
  109. package/dist/esm/cura-input-date.entry.js +1 -1
  110. package/dist/esm/cura-loader-bar.entry.js +1 -1
  111. package/dist/esm/cura-modal.entry.js +15 -2
  112. package/dist/esm/cura-modal.entry.js.map +1 -1
  113. package/dist/esm/cura-progress-bar_2.entry.js +2 -2
  114. package/dist/esm/cura-radio.entry.js +19 -17
  115. package/dist/esm/cura-radio.entry.js.map +1 -1
  116. package/dist/esm/cura-stepper.entry.js +1 -1
  117. package/dist/esm/cura-switch.entry.js +4 -2
  118. package/dist/esm/cura-switch.entry.js.map +1 -1
  119. package/dist/esm/cura-toast.entry.js +1 -1
  120. package/dist/esm/cura-tooltip.entry.js +1 -1
  121. package/dist/esm/cura.js +1 -1
  122. package/dist/esm/loader.js +1 -1
  123. package/dist/types/components/cura-avatar/cura-avatar.d.ts +37 -0
  124. package/dist/types/components/cura-modal/cura-modal.d.ts +3 -0
  125. package/dist/types/components/forms/cura-checkbox/cura-checkbox.d.ts +18 -0
  126. package/dist/types/components/forms/cura-checkbox/cura-checkbox.stories.d.ts +15 -0
  127. package/dist/types/components/forms/cura-radio/cura-radio.d.ts +30 -12
  128. package/dist/types/components/forms/cura-radio/cura-radio.stories.d.ts +15 -0
  129. package/dist/types/components/forms/cura-switch/cura-switch.d.ts +18 -0
  130. package/dist/types/components/forms/cura-switch/cura-switch.stories.d.ts +15 -0
  131. package/dist/types/components.d.ts +130 -4
  132. package/package.json +2 -2
  133. package/dist/cura/p-0342c255.entry.js.map +0 -1
  134. package/dist/cura/p-0d78f2ed.entry.js +0 -2
  135. package/dist/cura/p-0d78f2ed.entry.js.map +0 -1
  136. package/dist/cura/p-3c3d330f.entry.js +0 -2
  137. package/dist/cura/p-3c3d330f.entry.js.map +0 -1
  138. package/dist/cura/p-9db912ea.entry.js +0 -2
  139. package/dist/cura/p-9db912ea.entry.js.map +0 -1
  140. package/dist/cura/p-d6897ac1.entry.js +0 -2
  141. package/dist/cura/p-d6897ac1.entry.js.map +0 -1
  142. /package/dist/cura/{p-25932952.entry.js.map → p-0b872499.entry.js.map} +0 -0
  143. /package/dist/cura/{p-777decf9.entry.js.map → p-137f003b.entry.js.map} +0 -0
  144. /package/dist/cura/{p-3c305dbd.entry.js.map → p-202dc01a.entry.js.map} +0 -0
  145. /package/dist/cura/{p-57c854b3.entry.js.map → p-20b05d8f.entry.js.map} +0 -0
  146. /package/dist/cura/{p-1c9c62f1.entry.js.map → p-5a43e745.entry.js.map} +0 -0
  147. /package/dist/cura/{p-b5464dfc.entry.js.map → p-ac01bec2.entry.js.map} +0 -0
  148. /package/dist/cura/{p-d7f46266.entry.js.map → p-d97719bc.entry.js.map} +0 -0
@@ -27,7 +27,7 @@ export class CuraToast {
27
27
  this.setStyle();
28
28
  }
29
29
  render() {
30
- return (h(Host, { key: '170ec58690de00c4f80f61deff092db8118dc687', role: "alert", "aria-live": "polite", "aria-atomic": "true", "aria-label": this.label }, h("div", { key: '0a517e467e419e97178dddcda25524e2bcc43b1a', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: '1ecb4868e9526d4511be7ef4d131ae861af1b4c8', class: "default-icon", name: this.getNameIcon(), size: 16, color: `${this.type}-dark` }), h("div", { key: '4f1b88c995c525f2e3071853133251252f0808ba', class: "content" }, h("cura-heading", { key: 'aab64a0da0ea1db946c72d19ab8e9299ceb7beb2', level: 4, size: "xsmall", color: `${this.type}-dark`, weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: 'ecdb23f680013f16dff3994b0884ad9722990a48', color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: '33788e3eb6460857d29cfccdb6190e7cb36af239' })), h("slot", { key: '1db817ac72b421fa667bbd1803d5dbd111b990bd', name: "actions" })), this.closeButton && h("cura-icon", { key: '8670807c9f9639b8da4ae81b040ca93cdef8c201', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.loader && !!this.autoCloseDelay && h("cura-loader-bar", { key: '8c3938fa9a6c2dfc54a9713fc32ad2538d4bcf28', color: `${this.type}-base`, progress: this.progress }))));
30
+ return (h(Host, { key: 'c65f4295ed41485cdeb992dc29a76b4aeef87a39', role: "alert", "aria-live": "polite", "aria-atomic": "true", "aria-label": this.label }, h("div", { key: '62ec0a3170f862d0634df42ac4ccf0708c80fa32', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: 'bdb68633080a0032c4fdc2f3bb53a668e5b8ab1b', class: "default-icon", name: this.getNameIcon(), size: 16, color: `${this.type}-dark` }), h("div", { key: '42516aa76455a7b2c7e96613d6e0f38d8f9fbfba', class: "content" }, h("cura-heading", { key: '07402cf186ed3626248d682239b1105378dc2ae6', level: 4, size: "xsmall", color: `${this.type}-dark`, weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: 'f8239bb5c4ca52e3ce55cc50fab46bd45440e2ee', color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: 'd0491202942530967ddb5d34ecf1333975c8dda0' })), h("slot", { key: '3024563fbc18c2b4a4954849f74014b0be6b34ee', name: "actions" })), this.closeButton && h("cura-icon", { key: '20b315655b9d8ff4ddfc6c2cec6ebc8981f64643', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.loader && !!this.autoCloseDelay && h("cura-loader-bar", { key: 'a81f9da8704799af13009fa046b58e9d6eeb453c', color: `${this.type}-base`, progress: this.progress }))));
31
31
  }
32
32
  componentDidLoad() {
33
33
  this.openContainer();
@@ -25,7 +25,7 @@ export class CuraTooltip {
25
25
  this.setStyle();
26
26
  }
27
27
  render() {
28
- return (h(Host, { key: '8d60e1300b236087fdb740e018c1c0537cae8d14', role: "tooltip", id: this.elementId }, h("div", { key: '1ee4abd823d291a62a0890f15e6dcf7de93d27ce', class: "container", style: this.styles }, h("div", { key: '5b77522f5bfa31f0c57d1461c4fe74bb28056853', class: "content" }, h("cura-heading", { key: '1829def9107ea1a6d4c26a7529f6342b9d1c3a4e', level: 4, size: "xsmall", color: "neutral-black", weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: 'd7ef9857d141ef5aea60b1d9d1d79f47ebe1f6f8', color: "neutral-dark", "spot-color": "secondary-darker", size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: 'f2dc8c8e8142205d0553af200875131a0cc09111' }))), this.closeButton && !this.isMobile && h("cura-icon", { key: 'e7666bb54a3366f8c2ab3b0429237f7b5307b36a', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.isMobile && h("cura-button-transparent", { key: 'cc64d822bf10b1d7788fd2df85a6b97287b7f7ee', class: "close-button", size: "small", type: "button", color: "error", "icon-name": "close", "icon-position": "right", onClick: this.handleClose }, "OK, entendi."))));
28
+ return (h(Host, { key: '655c6aae9efc3aad790c6a45a7192ef01baeac97', role: "tooltip", id: this.elementId }, h("div", { key: 'c552ffd20262eed5e71f4cd93c078852cc52c1ca', class: "container", style: this.styles }, h("div", { key: '110f11205496428b674431e1b2bc8c3f95f9397a', class: "content" }, h("cura-heading", { key: 'd2a0caf6a338c9c0b839ea8671c6d524b943ca86', level: 4, size: "xsmall", color: "neutral-black", weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: 'bd7addb352119fead424151294e01eae111915e2', color: "neutral-dark", "spot-color": "secondary-darker", size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: '2323f1af541803e16caa042e9969953557a28976' }))), this.closeButton && !this.isMobile && h("cura-icon", { key: '92a672d383b057c53ce1771bea1ff9374a9a50a7', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.isMobile && h("cura-button-transparent", { key: 'a31de7e78e092b4fbf6b0e0b85c0c664399081a0', class: "close-button", size: "small", type: "button", color: "error", "icon-name": "close", "icon-position": "right", onClick: this.handleClose }, "OK, entendi."))));
29
29
  }
30
30
  componentDidLoad() {
31
31
  var _a, _b, _c, _d, _e;
@@ -1,8 +1,12 @@
1
1
  @charset "UTF-8";
2
+ /**
3
+ * Truncate text in single line
4
+ * Use: @include truncate-single() { ... }
5
+ */
2
6
  :host {
3
7
  display: block;
4
- width: fit-content;
5
8
  box-sizing: border-box;
9
+ min-width: 0;
6
10
  }
7
11
 
8
12
  /* Container e Layout */
@@ -10,7 +14,9 @@
10
14
  display: flex;
11
15
  align-items: center;
12
16
  flex-direction: row-reverse;
17
+ justify-content: start;
13
18
  gap: var(--gap);
19
+ cursor: pointer;
14
20
  }
15
21
 
16
22
  .position.container {
@@ -29,6 +35,16 @@
29
35
  .info {
30
36
  display: flex;
31
37
  flex-direction: column;
38
+ overflow: hidden;
39
+ }
40
+
41
+ .label.textoverflow-single {
42
+ text-overflow: ellipsis;
43
+ white-space: nowrap;
44
+ overflow: hidden;
45
+ display: block;
46
+ min-width: 0;
47
+ max-width: 100%;
32
48
  }
33
49
 
34
50
  .label-wrapper {
@@ -26,6 +26,8 @@ export class CuraCheckbox {
26
26
  this.background = 'light';
27
27
  this.iconColor = 'dark';
28
28
  this.color = 'accent';
29
+ this.overflowLabel = 'none';
30
+ this.overflowHelper = 'none';
29
31
  this.styles = {};
30
32
  }
31
33
  sizeHandler() {
@@ -147,7 +149,7 @@ export class CuraCheckbox {
147
149
  return h("cura-icon", { class: "icon", name: iconName, size: iconSize, color: iconColor });
148
150
  }
149
151
  render() {
150
- return (h(Host, { key: '38dc1c859eaacfa8a0a60efca1fe47586a596188', role: "checkbox", "aria-checked": this.checked, "aria-disabled": this.disabled, "aria-required": this.required, "aria-invalid": this.status === 'error' }, h("div", { key: 'f7ed7a6f038dc25a410bb28b9d1c460cbd6cfc06', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, h("div", { key: 'd967848cdfbf62dbafcb25a53e7f406d5ea52dba', class: "info" }, h("div", { key: '2042553ad48d01211bdb1be932288066bb680437', class: "label-wrapper" }, h("cura-label", { key: '15c411defab17c9da0c5a9857a158ea910715ccf', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: 'd6363a35853c75e88e7d2ba9433aa10d1836a453', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: 'dcaa4aabaa1f0ae23c2f1580390411791e5bc5dc', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: '54c48d59491756083ce98052956ca98193394c54' }))), h("div", { key: '522472497187f857f589aa258795b50a41f4fa05', class: 'checkbox', tabIndex: this.ontabindex }, h("input", { key: 'fc052a7fe97d6ca47ba6c89cdf4335b23e1625b8', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
152
+ return (h(Host, { key: '2e951be46f80c67ea87aaf1c613e29ae7a1cc856', role: "checkbox", "aria-checked": this.checked, "aria-disabled": this.disabled, "aria-required": this.required, "aria-invalid": this.status === 'error' }, h("div", { key: '341a30934dd6660b03e6be161999fad24fb005ef', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, h("div", { key: '58f32f6b047d19b8af2468b6007cf2dfb1297476', class: "info" }, h("div", { key: 'e23407390368c638e4e8cd9119ad3ccd1767d861', class: "label-wrapper" }, h("cura-label", { key: 'd7ce7b39441203e9058b0227edbfc75dd320806f', textOverflow: this.overflowLabel, class: `label${this.overflowLabel === 'single' ? ' textoverflow-single' : ''}`, weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && (h("cura-paragraph", { key: '0684b9ab1f517083bc681bd0731aedf6d38c9873', lineHeight: "0%", marginBlock: "0", color: "error-base" }, "*", ' '))), h("cura-label", { key: '499419ee720a7c7ba7e42fc8fcebccfb4e0b0c42', textOverflow: this.overflowHelper, color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: '7c9637fa4a8082f6451851452db1b751218a20ec' }))), h("div", { key: '91b0a1f42d65d72aca24ff8a852d3c6f461a9cb7', class: 'checkbox', tabIndex: this.ontabindex }, h("input", { key: '4f1db30730b2d68d3d0f3036fd5924a9da1b541b', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
151
153
  }
152
154
  static get is() { return "cura-checkbox"; }
153
155
  static get encapsulation() { return "shadow"; }
@@ -412,6 +414,48 @@ export class CuraCheckbox {
412
414
  "attribute": "color",
413
415
  "reflect": false,
414
416
  "defaultValue": "'accent'"
417
+ },
418
+ "overflowLabel": {
419
+ "type": "string",
420
+ "mutable": false,
421
+ "complexType": {
422
+ "original": "'none' | 'single' | string",
423
+ "resolved": "string",
424
+ "references": {}
425
+ },
426
+ "required": false,
427
+ "optional": false,
428
+ "docs": {
429
+ "tags": [{
430
+ "name": "default",
431
+ "text": "'none'"
432
+ }],
433
+ "text": "Controls how the label text should handle overflow.\n- `'none'`: No overflow handling; the label displays normally.\n- `'single'`: The label will be truncated with an ellipsis if it overflows a single line.\n- `string`: Custom overflow handling mode."
434
+ },
435
+ "attribute": "overflow-label",
436
+ "reflect": true,
437
+ "defaultValue": "'none'"
438
+ },
439
+ "overflowHelper": {
440
+ "type": "string",
441
+ "mutable": false,
442
+ "complexType": {
443
+ "original": "'none' | 'single' | string",
444
+ "resolved": "string",
445
+ "references": {}
446
+ },
447
+ "required": false,
448
+ "optional": false,
449
+ "docs": {
450
+ "tags": [{
451
+ "name": "default",
452
+ "text": "'none'"
453
+ }],
454
+ "text": "Controls how the helper text should handle overflow.\n- `'none'`: No overflow handling; the label displays normally.\n- `'single'`: The label will be truncated with an ellipsis if it overflows a single line.\n- `string`: Custom overflow handling mode."
455
+ },
456
+ "attribute": "overflow-helper",
457
+ "reflect": true,
458
+ "defaultValue": "'none'"
415
459
  }
416
460
  };
417
461
  }
@@ -1 +1 @@
1
- {"version":3,"file":"cura-checkbox.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-checkbox/cura-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, Element, h, Host, Watch, EventEmitter, State, AttachInternals } from '@stencil/core';\nimport { formsSizes } from '../cura-forms.definitions';\n\n@Component({\n tag: 'cura-checkbox',\n styleUrl: 'cura-checkbox.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class CuraCheckbox {\n /**\n * Reflects the checked state of the checkbox.\n * Mutable property allowing state change.\n */\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n /**\n * Reflects the indeterminate state of the checkbox.\n * Mutable property allowing state change.\n */\n @Prop({ reflect: true, mutable: true }) indeterminate: boolean = false;\n /**\n * Status of the checkbox.\n * Can be 'error', 'success', or 'default'.\n */\n @Prop({ reflect: true, mutable: true }) status: 'error' | 'success' | 'default' = 'default';\n /**\n * Reflects the disabled state of the checkbox.\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n /**\n * Reflects the required state of the checkbox.\n */\n @Prop({ reflect: true }) required: boolean = false;\n /**\n * Text label associated with the checkbox.\n */\n @Prop({ reflect: true }) label: string;\n /**\n * Specifies the tabindex of the checkbox.\n */\n @Prop({ reflect: true }) ontabindex: number = 0;\n /**\n * Position of the label relative to the checkbox.\n * Can be 'left' or 'right'.\n */\n @Prop({ reflect: true }) position: 'left' | 'right' = 'left';\n /**\n * Value associated with the checkbox.\n */\n @Prop({ reflect: true }) value: string;\n /**\n * Name attribute of the checkbox.\n */\n @Prop({ reflect: true }) name: string;\n /**\n * Size of the checkbox.\n * Can be 'small', 'medium', or 'large'.\n */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n /**\n * Background theme of the checkbox.\n * Can be 'dark' or 'light'.\n */\n @Prop() background: 'dark' | 'light' = 'light';\n /**\n * iconColor theme of the checkbox.\n * Can be 'dark' or 'light'.\n */\n @Prop() iconColor: 'dark' | 'light' = 'dark';\n /**\n * Color theme of the checkbox.\n */\n @Prop() color = 'accent';\n\n @State() styles = {};\n\n @Element() host: HTMLElement;\n\n @Event() onchange: EventEmitter<{ value: string; checked: boolean; indeterminate: boolean }>;\n\n @AttachInternals() internals: ElementInternals;\n\n isDarkBackground = () => this.background === 'dark';\n\n isDarkIconColor = () => this.iconColor === 'dark';\n\n @Watch('size')\n sizeHandler() {\n this.styles = {\n ...this.styles,\n '--size': `${formsSizes[this.size].size}px`,\n '--gap': `${formsSizes[this.size].gap}px`,\n };\n }\n\n /**\n * Watches changes in color and background properties to update styles.\n */\n @Watch('color')\n @Watch('background')\n setColors() {\n const colors = [\n { name: '--color-base', background: `${this.color}-base` },\n { name: '--color-lighter', background: `${this.color}-lighter` },\n { name: '--color-light', background: `${this.color}-light` },\n { name: '--color-dark', background: `${this.color}-dark` },\n { name: '--info-base', background: 'info-base' },\n { name: '--error-base', background: 'error-base' },\n { name: '--success-lighter', background: 'success-lighter' },\n { name: '--success-base', background: 'success-base' },\n { name: '--success-dark', background: 'success-dark' },\n { name: '--error-lighter', background: 'error-lighter' },\n { name: '--neutral-black', background: 'neutral-black' },\n { name: '--primary-base-neutral-white', background: this.isDarkBackground() ? 'primary-base' : 'neutral-white' },\n { name: '--neutral-base-neutral-medium', background: this.isDarkBackground() ? 'neutral-base' : 'neutral-medium' },\n { name: '--neutral-black-neutral-purewhite', background: this.isDarkBackground() ? 'neutral-black' : 'neutral-purewhite' },\n { name: '--neutral-black-neutral-white', background: this.isDarkBackground() ? 'neutral-black' : 'neutral-white' },\n { name: '--neutral-darker-neutral-base', background: this.isDarkBackground() ? 'neutral-darker' : 'neutral-base' },\n { name: '--neutral-base-neutral-base', background: this.isDarkBackground() ? 'primary-base' : 'neutral-base' },\n { name: '--neutral-purewhite-neutral-dark', background: this.isDarkBackground() ? 'neutral-purewhite' : 'neutral-dark' },\n { name: '--primary-base-neutral-medium', background: this.isDarkBackground() ? 'primary-base' : 'neutral-medium' },\n { name: '--success-base-lighter', background: this.isDarkBackground() ? 'success-base' : 'success-lighter' },\n { name: '--success-dark-base', background: this.isDarkBackground() ? 'success-dark' : 'success-base' },\n { name: '--error-base-lighter', background: this.isDarkBackground() ? 'error-base' : 'error-lighter' },\n { name: '--error-dark-base', background: this.isDarkBackground() ? 'error-dark' : 'error-base' },\n ];\n\n colors.forEach(color => {\n this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background);\n });\n this.styles = { ...this.styles };\n }\n\n connectedCallback() {\n this.sizeHandler();\n this.setColors();\n }\n\n /**\n * Callback for form association.\n */\n formAssociatedCallback(form: { ariaLabel: string }) {\n form.ariaLabel = this.label;\n }\n\n /**\n * Callback to restore the switch state from the form.\n */\n formStateRestoreCallback(state: { value: string; checked: boolean; indeterminate: boolean }) {\n this.value = state.value;\n this.checked = state.checked;\n this.indeterminate = state.indeterminate;\n this.internals.setFormValue(this.value);\n }\n\n /**\n * Callback to reset the switch state when the form is reset.\n */\n formResetCallback() {\n this.value = '';\n this.checked = false;\n this.indeterminate = false;\n this.internals.setValidity({});\n this.internals.setFormValue(this.value);\n }\n\n /**\n * Callback to update the switch's disabled state when the form's disabled state changes.\n */\n formDisabledCallback(disabled: boolean) {\n this.disabled = disabled;\n }\n\n handleClick = () => {\n if (this.disabled) return;\n\n this.indeterminate = false;\n this.checked = !this.checked;\n this.internals.setFormValue(this.value);\n this.onchange.emit({ value: this.value, checked: this.checked, indeterminate: this.indeterminate });\n };\n\n getClasses() {\n const classes = {};\n classes['container'] = true;\n classes['checked'] = this.checked;\n classes['disabled'] = this.disabled;\n classes[this.background] = true;\n classes['indeterminate'] = this.indeterminate;\n classes['position'] = this.position === 'right';\n classes[this.status] = true;\n\n return classes;\n }\n\n /**\n * Assigns color based on status and background theme.\n * @param defaultColor Default color.\n */\n @Watch('background')\n @Watch('iconColor')\n assignColor(type: 'icon' | 'label' | 'message') {\n if (this.disabled) return this.isDarkBackground() ? 'neutral-dark' : 'neutral-dark';\n\n const statusColors = {\n success: {\n icon: 'success-dark',\n label: this.isDarkBackground() ? 'success-lighter' : 'success-darker',\n message: this.isDarkBackground() ? 'success-base' : 'success-dark',\n },\n error: {\n icon: 'error-dark',\n label: this.isDarkBackground() ? 'error-lighter' : 'neutral-darker',\n message: this.isDarkBackground() ? 'error-base' : 'error-dark',\n },\n default: {\n icon: this.isDarkIconColor() ? 'neutral-black' : 'neutral-purewhite',\n label: this.isDarkBackground() ? 'neutral-white' : 'neutral-black',\n message: this.isDarkBackground() ? 'primary-lighter' : 'neutral-dark',\n },\n };\n\n return statusColors[this.status][type];\n }\n\n /**\n * Retrieves icon element based on checkbox state.\n */\n getIcon() {\n const iconName = this.indeterminate ? 'minus' : 'check';\n const iconColor = this.assignColor('icon');\n const iconSize = this.size === 'large' ? 20 : 'micro';\n\n return <cura-icon class=\"icon\" name={iconName} size={iconSize} color={iconColor}></cura-icon>;\n }\n\n render() {\n return (\n <Host role=\"checkbox\"\n aria-checked={this.checked}\n aria-disabled={this.disabled}\n aria-required={this.required}\n aria-invalid={this.status === 'error'}>\n <div class={this.getClasses()} style={this.styles} onClick={this.handleClick}>\n <div class=\"info\">\n <div class=\"label-wrapper\">\n <cura-label class=\"label\" weight='bold' size={this.size === 'large' ? 'medium' : 'xsmall'} color={this.assignColor('label')}>\n {this.label}\n </cura-label>\n {this.required && <cura-paragraph lineHeight='0%' marginBlock='0' color=\"error-base\" >* </cura-paragraph>}\n </div>\n <cura-label color={this.assignColor('message')} size=\"xsmall\" class=\"message\">\n <slot></slot>\n </cura-label>\n </div>\n <div class={'checkbox'} tabIndex={this.ontabindex}>\n <input\n type=\"checkbox\"\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n required={this.required}\n checked={this.checked}\n indeterminate={this.indeterminate}\n />\n {this.getIcon()}\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"cura-checkbox.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-checkbox/cura-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, Element, h, Host, Watch, EventEmitter, State, AttachInternals } from '@stencil/core';\nimport { formsSizes } from '../cura-forms.definitions';\n\n@Component({\n tag: 'cura-checkbox',\n styleUrl: 'cura-checkbox.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class CuraCheckbox {\n /**\n * Reflects the checked state of the checkbox.\n * Mutable property allowing state change.\n */\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n /**\n * Reflects the indeterminate state of the checkbox.\n * Mutable property allowing state change.\n */\n @Prop({ reflect: true, mutable: true }) indeterminate: boolean = false;\n /**\n * Status of the checkbox.\n * Can be 'error', 'success', or 'default'.\n */\n @Prop({ reflect: true, mutable: true }) status: 'error' | 'success' | 'default' = 'default';\n /**\n * Reflects the disabled state of the checkbox.\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n /**\n * Reflects the required state of the checkbox.\n */\n @Prop({ reflect: true }) required: boolean = false;\n /**\n * Text label associated with the checkbox.\n */\n @Prop({ reflect: true }) label: string;\n /**\n * Specifies the tabindex of the checkbox.\n */\n @Prop({ reflect: true }) ontabindex: number = 0;\n /**\n * Position of the label relative to the checkbox.\n * Can be 'left' or 'right'.\n */\n @Prop({ reflect: true }) position: 'left' | 'right' = 'left';\n /**\n * Value associated with the checkbox.\n */\n @Prop({ reflect: true }) value: string;\n /**\n * Name attribute of the checkbox.\n */\n @Prop({ reflect: true }) name: string;\n /**\n * Size of the checkbox.\n * Can be 'small', 'medium', or 'large'.\n */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n /**\n * Background theme of the checkbox.\n * Can be 'dark' or 'light'.\n */\n @Prop() background: 'dark' | 'light' = 'light';\n /**\n * iconColor theme of the checkbox.\n * Can be 'dark' or 'light'.\n */\n @Prop() iconColor: 'dark' | 'light' = 'dark';\n /**\n * Color theme of the checkbox.\n */\n @Prop() color = 'accent';\n\n /**\n * Controls how the label text should handle overflow.\n * - `'none'`: No overflow handling; the label displays normally.\n * - `'single'`: The label will be truncated with an ellipsis if it overflows a single line.\n * - `string`: Custom overflow handling mode.\n *\n * @default 'none'\n */\n @Prop({ reflect: true }) overflowLabel: 'none' | 'single' | string = 'none';\n\n /**\n * Controls how the helper text should handle overflow.\n * - `'none'`: No overflow handling; the label displays normally.\n * - `'single'`: The label will be truncated with an ellipsis if it overflows a single line.\n * - `string`: Custom overflow handling mode.\n *\n * @default 'none'\n */\n @Prop({ reflect: true }) overflowHelper: 'none' | 'single' | string = 'none';\n\n @State() styles = {};\n\n @Element() host: HTMLElement;\n\n @Event() onchange: EventEmitter<{ value: string; checked: boolean; indeterminate: boolean }>;\n\n @AttachInternals() internals: ElementInternals;\n\n isDarkBackground = () => this.background === 'dark';\n\n isDarkIconColor = () => this.iconColor === 'dark';\n\n @Watch('size')\n sizeHandler() {\n this.styles = {\n ...this.styles,\n '--size': `${formsSizes[this.size].size}px`,\n '--gap': `${formsSizes[this.size].gap}px`,\n };\n }\n\n /**\n * Watches changes in color and background properties to update styles.\n */\n @Watch('color')\n @Watch('background')\n setColors() {\n const colors = [\n { name: '--color-base', background: `${this.color}-base` },\n { name: '--color-lighter', background: `${this.color}-lighter` },\n { name: '--color-light', background: `${this.color}-light` },\n { name: '--color-dark', background: `${this.color}-dark` },\n { name: '--info-base', background: 'info-base' },\n { name: '--error-base', background: 'error-base' },\n { name: '--success-lighter', background: 'success-lighter' },\n { name: '--success-base', background: 'success-base' },\n { name: '--success-dark', background: 'success-dark' },\n { name: '--error-lighter', background: 'error-lighter' },\n { name: '--neutral-black', background: 'neutral-black' },\n { name: '--primary-base-neutral-white', background: this.isDarkBackground() ? 'primary-base' : 'neutral-white' },\n { name: '--neutral-base-neutral-medium', background: this.isDarkBackground() ? 'neutral-base' : 'neutral-medium' },\n { name: '--neutral-black-neutral-purewhite', background: this.isDarkBackground() ? 'neutral-black' : 'neutral-purewhite' },\n { name: '--neutral-black-neutral-white', background: this.isDarkBackground() ? 'neutral-black' : 'neutral-white' },\n { name: '--neutral-darker-neutral-base', background: this.isDarkBackground() ? 'neutral-darker' : 'neutral-base' },\n { name: '--neutral-base-neutral-base', background: this.isDarkBackground() ? 'primary-base' : 'neutral-base' },\n { name: '--neutral-purewhite-neutral-dark', background: this.isDarkBackground() ? 'neutral-purewhite' : 'neutral-dark' },\n { name: '--primary-base-neutral-medium', background: this.isDarkBackground() ? 'primary-base' : 'neutral-medium' },\n { name: '--success-base-lighter', background: this.isDarkBackground() ? 'success-base' : 'success-lighter' },\n { name: '--success-dark-base', background: this.isDarkBackground() ? 'success-dark' : 'success-base' },\n { name: '--error-base-lighter', background: this.isDarkBackground() ? 'error-base' : 'error-lighter' },\n { name: '--error-dark-base', background: this.isDarkBackground() ? 'error-dark' : 'error-base' },\n ];\n\n colors.forEach(color => {\n this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background);\n });\n this.styles = { ...this.styles };\n }\n\n connectedCallback() {\n this.sizeHandler();\n this.setColors();\n }\n\n /**\n * Callback for form association.\n */\n formAssociatedCallback(form: { ariaLabel: string }) {\n form.ariaLabel = this.label;\n }\n\n /**\n * Callback to restore the switch state from the form.\n */\n formStateRestoreCallback(state: { value: string; checked: boolean; indeterminate: boolean }) {\n this.value = state.value;\n this.checked = state.checked;\n this.indeterminate = state.indeterminate;\n this.internals.setFormValue(this.value);\n }\n\n /**\n * Callback to reset the switch state when the form is reset.\n */\n formResetCallback() {\n this.value = '';\n this.checked = false;\n this.indeterminate = false;\n this.internals.setValidity({});\n this.internals.setFormValue(this.value);\n }\n\n /**\n * Callback to update the switch's disabled state when the form's disabled state changes.\n */\n formDisabledCallback(disabled: boolean) {\n this.disabled = disabled;\n }\n\n handleClick = () => {\n if (this.disabled) return;\n\n this.indeterminate = false;\n this.checked = !this.checked;\n this.internals.setFormValue(this.value);\n this.onchange.emit({ value: this.value, checked: this.checked, indeterminate: this.indeterminate });\n };\n\n getClasses() {\n const classes = {};\n classes['container'] = true;\n classes['checked'] = this.checked;\n classes['disabled'] = this.disabled;\n classes[this.background] = true;\n classes['indeterminate'] = this.indeterminate;\n classes['position'] = this.position === 'right';\n classes[this.status] = true;\n\n return classes;\n }\n\n /**\n * Assigns color based on status and background theme.\n * @param defaultColor Default color.\n */\n @Watch('background')\n @Watch('iconColor')\n assignColor(type: 'icon' | 'label' | 'message') {\n if (this.disabled) return this.isDarkBackground() ? 'neutral-dark' : 'neutral-dark';\n\n const statusColors = {\n success: {\n icon: 'success-dark',\n label: this.isDarkBackground() ? 'success-lighter' : 'success-darker',\n message: this.isDarkBackground() ? 'success-base' : 'success-dark',\n },\n error: {\n icon: 'error-dark',\n label: this.isDarkBackground() ? 'error-lighter' : 'neutral-darker',\n message: this.isDarkBackground() ? 'error-base' : 'error-dark',\n },\n default: {\n icon: this.isDarkIconColor() ? 'neutral-black' : 'neutral-purewhite',\n label: this.isDarkBackground() ? 'neutral-white' : 'neutral-black',\n message: this.isDarkBackground() ? 'primary-lighter' : 'neutral-dark',\n },\n };\n\n return statusColors[this.status][type];\n }\n\n /**\n * Retrieves icon element based on checkbox state.\n */\n getIcon() {\n const iconName = this.indeterminate ? 'minus' : 'check';\n const iconColor = this.assignColor('icon');\n const iconSize = this.size === 'large' ? 20 : 'micro';\n\n return <cura-icon class=\"icon\" name={iconName} size={iconSize} color={iconColor}></cura-icon>;\n }\n\n render() {\n return (\n <Host role=\"checkbox\" aria-checked={this.checked} aria-disabled={this.disabled} aria-required={this.required} aria-invalid={this.status === 'error'}>\n <div class={this.getClasses()} style={this.styles} onClick={this.handleClick}>\n <div class=\"info\">\n <div class=\"label-wrapper\">\n <cura-label\n textOverflow={this.overflowLabel}\n class={`label${this.overflowLabel === 'single' ? ' textoverflow-single' : ''}`}\n weight=\"bold\"\n size={this.size === 'large' ? 'medium' : 'xsmall'}\n color={this.assignColor('label')}\n >\n {this.label}\n </cura-label>\n {this.required && (\n <cura-paragraph lineHeight=\"0%\" marginBlock=\"0\" color=\"error-base\">\n *{' '}\n </cura-paragraph>\n )}\n </div>\n <cura-label textOverflow={this.overflowHelper} color={this.assignColor('message')} size=\"xsmall\" class=\"message\">\n <slot></slot>\n </cura-label>\n </div>\n <div class={'checkbox'} tabIndex={this.ontabindex}>\n <input\n type=\"checkbox\"\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n required={this.required}\n checked={this.checked}\n indeterminate={this.indeterminate}\n />\n {this.getIcon()}\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
@@ -24,8 +24,11 @@ const renderCuraCheckbox = (label, message, args) => {
24
24
  checked="${args.checked}"` : ''}${args.required ? `
25
25
  required="${args.required}"` : ''}${args.indeterminate ? `
26
26
  indeterminate="${args.indeterminate}"` : ''}${args.disabled ? `
27
- disabled="${args.disabled}"` : ''}>${message ? `
28
- ${message}` : ''}
27
+ disabled="${args.disabled}"` : ''}${args.textOverflow && args.textOverflow !== 'none' ? `
28
+ text-overflow="${args.textOverflow}"` : ''}
29
+ >
30
+
31
+ ${message ? ` ${message}` : ''}
29
32
  </cura-checkbox>
30
33
  `;
31
34
  return `${block}`;
@@ -172,6 +175,16 @@ export default {
172
175
  defaultValue: { summary: '' },
173
176
  },
174
177
  },
178
+ textOverflow: {
179
+ control: { type: 'select' },
180
+ options: ['none', 'single'],
181
+ description: 'Aplica definições de corte de texto com `ellipsis`.',
182
+ name: 'text-overflow',
183
+ table: {
184
+ category: 'Properties',
185
+ defaultValue: { summary: 'none' }
186
+ }
187
+ },
175
188
  },
176
189
  };
177
190
  export const Checkbox = {
@@ -191,6 +204,7 @@ export const Checkbox = {
191
204
  required: false,
192
205
  indeterminate: false,
193
206
  disabled: false,
207
+ textOverflow: 'none',
194
208
  },
195
209
  };
196
210
  //# sourceMappingURL=cura-checkbox.stories.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"cura-checkbox.stories.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-checkbox/cura-checkbox.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,MAAM,kBAAkB,GAAG,CAAC,KAAa,EAAE,OAAe,EAAE,IAAS,EAAE,EAAE;IACvE,MAAM,KAAK,GAAG,iBAAiB,KAAK,CAAC,CAAC,CAAC;WAC9B,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC;UACvD,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC;YAC7D,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC;cAChE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC;WACnE,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,KAAK,OAAO,CAAC,CAAC,CAAC;gBACjE,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC;gBACxE,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;WAC3C,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;gBAClC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;aAC5C,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;cACtC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;mBACxC,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;cAClD,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,OAAO,CAAC,CAAC,CAAC;IAC7C,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE;;CAEjB,CAAC;IACA,OAAO,GAAG,KAAK,EAAE,CAAC;AACpB,CAAC,CAAA;AAED,eAAe;IACb,KAAK,EAAE,4BAA4B;IACnC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,EAAE,CAAC,EAA2B,EAAE,EAAE;YAA/B,EAAE,KAAK,EAAE,OAAO,OAAW,EAAN,IAAI,cAAzB,oBAA2B,CAAF;QAChC,OAAO,kBAAkB,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC;IAClD,CAAC;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,qBAAqB;YAClC,IAAI,EAAE,OAAO;YACb,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;SACF;QACD,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,IAAI,EAAE,WAAW;YACjB,WAAW,EAAE,uDAAuD;YACpE,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;aAClB;SACF;QACD,OAAO,EAAE;YACP,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,iCAAiC;YAC9C,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;gBACjB,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACjC;SACF;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,kFAAkF;YAC/F,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;gBACjB,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACjC;SACF;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC;YACxC,WAAW,EAAE,kFAAkF;YAC/F,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;aACrC;SACF;QACD,aAAa,EAAE;YACb,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,+DAA+D;YAC5E,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;gBACjB,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACjC;SACF;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,yCAAyC;YACtD,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;gBACjB,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACjC;SACF;QACD,UAAU,EAAE;YACV,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,kCAAkC;YAC/C,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;YACD,IAAI,EAAE,YAAY;SACnB;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE;YACjC,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;YAC1B,WAAW,EAAE,wCAAwC;YACrD,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;aAClC;YACD,IAAI,EAAE,UAAU;SACjB;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC;YACrC,WAAW,EAAE,oEAAoE;YACjF,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;aACpC;SACF;QACD,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,oBAAoB;YACjC,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;SACF;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,mBAAmB;YAChC,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;SACF;QACD,UAAU,EAAE;YACV,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE;YACjC,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;YAC1B,WAAW,EAAE,iGAAiG;YAC9G,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;aACnC;SACF;QACD,SAAS,EAAE;YACT,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE;YACjC,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;YAC1B,WAAW,EAAE,2FAA2F;YACxG,IAAI,EAAE,YAAY;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;aAClC;SACF;QACD,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,CAAE;YAC5C,WAAW,EAAE,yFAAyF;YACtG,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;aACpC;SACF;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,gIAAgI;YAC7I,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;gBACjB,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;aAC9B;SACF;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE;QACJ,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,SAAS;QACjB,KAAK,EAAE,QAAQ;QACf,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,OAAO;QACnB,SAAS,EAAE,MAAM;QACjB,KAAK,EAAE,EAAE;QACT,IAAI,EAAE,EAAE;QACR,UAAU,EAAE,CAAC;QACb,OAAO,EAAE,aAAa;QACtB,OAAO,EAAE,KAAK;QACd,QAAQ,EAAE,KAAK;QACf,aAAa,EAAE,KAAK;QACpB,QAAQ,EAAE,KAAK;KAChB;CACF,CAAC","sourcesContent":["const renderCuraCheckbox = (label: string, message: string, args: any) => {\n const block = `<cura-checkbox${label ? `\n label=\"${label}\"` : ''}${args.size && args.size !== 'medium' ? `\n size=\"${args.size}\"` : ''}${args.status && args.status !== 'default' ? `\n status=\"${args.status}\"` : ''}${args.position && args.position !== 'left' ? `\n position=\"${args.position}\"` : ''}${args.color && args.color !== 'accent' ? `\n color=\"${args.color}\"` : ''}${args.background && args.background !== 'light' ? `\n background=\"${args.background}\"` : ''}${args.iconColor && args.iconColor !== 'dark' ? `\n icon-color=\"${args.iconColor}\"` : ''}${args.value ? `\n value=\"${args.value}\"` : ''}${args.ontabindex ? `\n ontabindex=\"${args.ontabindex}\"` : ''}${args.checked ? `\n checked=\"${args.checked}\"` : ''}${args.required ? `\n required=\"${args.required}\"` : ''}${args.indeterminate ? `\n indeterminate=\"${args.indeterminate}\"` : ''}${args.disabled ? `\n disabled=\"${args.disabled}\"` : ''}>${message ? `\n ${message}` : ''}\n</cura-checkbox>\n`;\n return `${block}`;\n}\n\nexport default {\n title: 'Componentes/Forms/Checkbox',\n tags: ['autodocs'],\n render: ({ label, message, ...args }) => {\n return renderCuraCheckbox(label, message, args);\n },\n argTypes: {\n label: {\n control: 'text',\n description: 'Título do checkbox.',\n name: 'label',\n table: {\n category: 'Properties',\n },\n },\n message: {\n control: 'text',\n name: 'Info text',\n description: 'Texto adicional de ajuda ou mensagem de erro/sucesso.',\n table: {\n category: 'Slots',\n },\n },\n checked: {\n control: 'boolean',\n description: 'Define o checkbox como marcado.',\n table: {\n category: 'State',\n defaultValue: { summary: false },\n },\n },\n required: {\n control: 'boolean',\n description: 'Define a marcação do checkbox como obrigatória e insere o símbolo `*` no título.',\n table: {\n category: 'State',\n defaultValue: { summary: false }\n },\n },\n status: {\n control: { type: 'select' },\n options: ['default', 'success', 'error'],\n description: 'Define o estado do checkbox para <b>default</b>, <b>success</b> ou <b>error</b>.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'default' },\n },\n },\n indeterminate: {\n control: 'boolean',\n description: 'Define se o checkbox está em estado indeterminado de seleção.',\n table: {\n category: 'State',\n defaultValue: { summary: false },\n },\n },\n disabled: {\n control: 'boolean',\n description: 'Define se o checkbox está desabilitado.',\n table: {\n category: 'State',\n defaultValue: { summary: false },\n },\n },\n ontabindex: {\n control: 'number',\n description: 'Índice de tabulação do checkbox.',\n table: {\n category: 'Properties',\n },\n name: 'ontabindex'\n },\n position: {\n control: { type: 'inline-radio' },\n options: ['left', 'right'],\n description: 'Posição do box em relação ao controle.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'left' }\n },\n name: 'position'\n },\n size: {\n control: { type: 'select' },\n options: ['small', 'medium', 'large'],\n description: 'Tamanhos do checkbox: <b>small</b>, <b>medium</b> ou <b>large</b>.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'medium' }\n }\n },\n value: {\n control: 'text',\n description: 'Valor do checkbox.',\n table: {\n category: 'Properties',\n },\n },\n name: {\n control: 'text',\n description: 'Nome do checkbox.',\n table: {\n category: 'Properties',\n },\n },\n background: {\n control: { type: 'inline-radio' },\n options: ['dark', 'light'],\n description: 'Define o tipo de fundo onde o checkbox está inserido com as opções <b>dark</b> ou <b>light</b>.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'light' }\n }\n },\n iconColor: {\n control: { type: 'inline-radio' },\n options: ['dark', 'light'],\n description: 'Define a cor do ícone para o estado `checked` com os valores <b>dark</b> ou <b>light</b>.',\n name: 'icon-color',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'dark' }\n },\n },\n color: {\n control: { type: 'select' },\n options: ['primary', 'secondary', 'accent' ],\n description: 'Define a cor do checkbox. As opções são as cores principais do tema (sem profundidade).',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'accent' },\n },\n },\n onchange: {\n control: 'none',\n description: 'Emite evento via Listener quando o estado do Checkbox é alterado.`{ checked: boolean, indeterminate: boolean, value: string }`',\n table: {\n category: 'Event',\n defaultValue: { summary: '' },\n },\n },\n },\n};\n\nexport const Checkbox = {\n args: {\n label: 'Checkbox',\n size: 'medium',\n status: 'default',\n color: 'accent',\n position: 'left',\n background: 'light',\n iconColor: 'dark',\n value: '',\n name: '',\n ontabindex: 0,\n message: 'Helper text',\n checked: false,\n required: false,\n indeterminate: false,\n disabled: false,\n },\n};\n"]}
1
+ {"version":3,"file":"cura-checkbox.stories.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-checkbox/cura-checkbox.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["const renderCuraCheckbox = (label: string, message: string, args: any) => {\n const block = `<cura-checkbox${label ? `\n label=\"${label}\"` : ''}${args.size && args.size !== 'medium' ? `\n size=\"${args.size}\"` : ''}${args.status && args.status !== 'default' ? `\n status=\"${args.status}\"` : ''}${args.position && args.position !== 'left' ? `\n position=\"${args.position}\"` : ''}${args.color && args.color !== 'accent' ? `\n color=\"${args.color}\"` : ''}${args.background && args.background !== 'light' ? `\n background=\"${args.background}\"` : ''}${args.iconColor && args.iconColor !== 'dark' ? `\n icon-color=\"${args.iconColor}\"` : ''}${args.value ? `\n value=\"${args.value}\"` : ''}${args.ontabindex ? `\n ontabindex=\"${args.ontabindex}\"` : ''}${args.checked ? `\n checked=\"${args.checked}\"` : ''}${args.required ? `\n required=\"${args.required}\"` : ''}${args.indeterminate ? `\n indeterminate=\"${args.indeterminate}\"` : ''}${args.disabled ? `\n disabled=\"${args.disabled}\"` : ''}${args.textOverflow && args.textOverflow !== 'none' ? `\n text-overflow=\"${args.textOverflow}\"` : ''} \n >\n\n ${message ? ` ${message}` : ''}\n</cura-checkbox>\n`;\n return `${block}`;\n}\n\nexport default {\n title: 'Componentes/Forms/Checkbox',\n tags: ['autodocs'],\n render: ({ label, message, ...args }) => {\n return renderCuraCheckbox(label, message, args);\n },\n argTypes: {\n label: {\n control: 'text',\n description: 'Título do checkbox.',\n name: 'label',\n table: {\n category: 'Properties',\n },\n },\n message: {\n control: 'text',\n name: 'Info text',\n description: 'Texto adicional de ajuda ou mensagem de erro/sucesso.',\n table: {\n category: 'Slots',\n },\n },\n checked: {\n control: 'boolean',\n description: 'Define o checkbox como marcado.',\n table: {\n category: 'State',\n defaultValue: { summary: false },\n },\n },\n required: {\n control: 'boolean',\n description: 'Define a marcação do checkbox como obrigatória e insere o símbolo `*` no título.',\n table: {\n category: 'State',\n defaultValue: { summary: false }\n },\n },\n status: {\n control: { type: 'select' },\n options: ['default', 'success', 'error'],\n description: 'Define o estado do checkbox para <b>default</b>, <b>success</b> ou <b>error</b>.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'default' },\n },\n },\n indeterminate: {\n control: 'boolean',\n description: 'Define se o checkbox está em estado indeterminado de seleção.',\n table: {\n category: 'State',\n defaultValue: { summary: false },\n },\n },\n disabled: {\n control: 'boolean',\n description: 'Define se o checkbox está desabilitado.',\n table: {\n category: 'State',\n defaultValue: { summary: false },\n },\n },\n ontabindex: {\n control: 'number',\n description: 'Índice de tabulação do checkbox.',\n table: {\n category: 'Properties',\n },\n name: 'ontabindex'\n },\n position: {\n control: { type: 'inline-radio' },\n options: ['left', 'right'],\n description: 'Posição do box em relação ao controle.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'left' }\n },\n name: 'position'\n },\n size: {\n control: { type: 'select' },\n options: ['small', 'medium', 'large'],\n description: 'Tamanhos do checkbox: <b>small</b>, <b>medium</b> ou <b>large</b>.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'medium' }\n }\n },\n value: {\n control: 'text',\n description: 'Valor do checkbox.',\n table: {\n category: 'Properties',\n },\n },\n name: {\n control: 'text',\n description: 'Nome do checkbox.',\n table: {\n category: 'Properties',\n },\n },\n background: {\n control: { type: 'inline-radio' },\n options: ['dark', 'light'],\n description: 'Define o tipo de fundo onde o checkbox está inserido com as opções <b>dark</b> ou <b>light</b>.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'light' }\n }\n },\n iconColor: {\n control: { type: 'inline-radio' },\n options: ['dark', 'light'],\n description: 'Define a cor do ícone para o estado `checked` com os valores <b>dark</b> ou <b>light</b>.',\n name: 'icon-color',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'dark' }\n },\n },\n color: {\n control: { type: 'select' },\n options: ['primary', 'secondary', 'accent' ],\n description: 'Define a cor do checkbox. As opções são as cores principais do tema (sem profundidade).',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'accent' },\n },\n },\n onchange: {\n control: 'none',\n description: 'Emite evento via Listener quando o estado do Checkbox é alterado.`{ checked: boolean, indeterminate: boolean, value: string }`',\n table: {\n category: 'Event',\n defaultValue: { summary: '' },\n },\n },\n textOverflow: {\n control: { type: 'select' },\n options: ['none', 'single'],\n description: 'Aplica definições de corte de texto com `ellipsis`.',\n name: 'text-overflow',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'none'}\n }\n },\n },\n};\n\nexport const Checkbox = {\n args: {\n label: 'Checkbox',\n size: 'medium',\n status: 'default',\n color: 'accent',\n position: 'left',\n background: 'light',\n iconColor: 'dark',\n value: '',\n name: '',\n ontabindex: 0,\n message: 'Helper text',\n checked: false,\n required: false,\n indeterminate: false,\n disabled: false,\n textOverflow: 'none',\n },\n};\n"]}
@@ -162,7 +162,7 @@ export class CuraInputDate {
162
162
  }
163
163
  }
164
164
  render() {
165
- return (h(Host, { key: 'd10f396cd49243f58ecbf5502e384a27ccfd0922' }, h("div", { key: 'cbde3cfd318c010a9704664c24ae25b23a17506d', class: "container", style: this.styles }, h("cura-input-text", { key: '55a8ba43111ce2af88c1a63de5d302190e6b4e54', 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()))));
165
+ return (h(Host, { key: 'ea03b59085ffb7eb7cc5b483c5bbd4cd9f75bed4' }, h("div", { key: '4eee147138b0159ae0ff0079e93fe99a3e8571e0', class: "container", style: this.styles }, h("cura-input-text", { key: '0d41b38fb6ad1463f827e72e0d74b473f52b4829', 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()))));
166
166
  }
167
167
  static get is() { return "cura-input-date"; }
168
168
  static get encapsulation() { return "shadow"; }
@@ -562,7 +562,7 @@ export class CuraInputText {
562
562
  "references": {
563
563
  "MaskPreset": {
564
564
  "location": "local",
565
- "path": "/Users/fellipesoares/Code/cura/packages/component-lib/src/components/forms/cura-input-text/cura-input-text.tsx",
565
+ "path": "/home/marcuslima/Documents/www/rededor/web/cura/packages/component-lib/src/components/forms/cura-input-text/cura-input-text.tsx",
566
566
  "id": "src/components/forms/cura-input-text/cura-input-text.tsx::MaskPreset"
567
567
  }
568
568
  }
@@ -50,7 +50,7 @@ export class CuraLabel {
50
50
  };
51
51
  }
52
52
  render() {
53
- return (h(Host, { key: '3b60258fa4dd9330296e8112a763b2242771c6fc', style: this.hostCSSProperties() }, h("p", { key: 'dbfc16e29a61c0f116d2055bdc1e3b61d79908b8', style: this.styles, class: this.getClasses() }, h("slot", { key: '032986e008067aae5b6b17b1e5fa70decf64d9e0' }))));
53
+ return (h(Host, { key: '7d49bffcd8408352d48e9d2f4d1a085232b0a388', style: this.hostCSSProperties() }, h("p", { key: '9479efc64405d2653e2aaf185138c37c4ecca95c', style: this.styles, class: this.getClasses() }, h("slot", { key: '6de7990505b1f2e4af8988e9a9cc3a96ae18cf75' }))));
54
54
  }
55
55
  static get is() { return "cura-label"; }
56
56
  static get encapsulation() { return "shadow"; }
@@ -1,8 +1,12 @@
1
1
  @charset "UTF-8";
2
+ /**
3
+ * Truncate text in single line
4
+ * Use: @include truncate-single() { ... }
5
+ */
2
6
  :host {
3
7
  display: block;
4
- width: fit-content;
5
8
  box-sizing: border-box;
9
+ min-width: 0;
6
10
  /* Estado Success */
7
11
  /* Estado Error */
8
12
  /* Estado checked */
@@ -13,7 +17,9 @@
13
17
  display: flex;
14
18
  align-items: center;
15
19
  flex-direction: row-reverse;
20
+ justify-content: start;
16
21
  gap: var(--gap);
22
+ cursor: pointer;
17
23
  }
18
24
  :host .position.container {
19
25
  flex-direction: row;
@@ -27,9 +33,18 @@
27
33
  :host .position .label {
28
34
  order: 1;
29
35
  }
36
+ :host .label.textoverflow-single {
37
+ text-overflow: ellipsis;
38
+ white-space: nowrap;
39
+ overflow: hidden;
40
+ display: block;
41
+ min-width: 0;
42
+ max-width: 100%;
43
+ }
30
44
  :host .info {
31
45
  display: flex;
32
46
  flex-direction: column;
47
+ overflow: hidden;
33
48
  }
34
49
  :host .label-wrapper {
35
50
  display: flex;
@@ -3,9 +3,9 @@ import { formsSizes } from "../cura-forms.definitions";
3
3
  export class CuraRadio {
4
4
  constructor() {
5
5
  this.sizes = {
6
- "large": { size: 20 },
7
- "medium": { size: 14 },
8
- "small": { size: 10 },
6
+ large: { size: 20 },
7
+ medium: { size: 14 },
8
+ small: { size: 10 },
9
9
  };
10
10
  this.isDarkbackground = () => this.background === 'dark';
11
11
  this.handleClick = () => {
@@ -27,6 +27,8 @@ export class CuraRadio {
27
27
  this.background = 'light';
28
28
  this.size = 'medium';
29
29
  this.color = 'accent';
30
+ this.overflowLabel = 'none';
31
+ this.overflowHelper = 'none';
30
32
  this.styles = {};
31
33
  }
32
34
  sizeHandler() {
@@ -59,22 +61,22 @@ export class CuraRadio {
59
61
  this.styles = Object.assign({}, this.styles);
60
62
  }
61
63
  /**
62
- * Callback for form association.
63
- */
64
+ * Callback for form association.
65
+ */
64
66
  formAssociatedCallback(form) {
65
67
  form.ariaLabel = this.label;
66
68
  }
67
69
  /**
68
- * Callback to restore the switch state from the form.
69
- */
70
+ * Callback to restore the switch state from the form.
71
+ */
70
72
  formStateRestoreCallback(state) {
71
73
  this.value = state.value;
72
74
  this.checked = state.checked;
73
75
  this.internals.setFormValue(this.value);
74
76
  }
75
77
  /**
76
- * Callback to reset the switch state when the form is reset.
77
- */
78
+ * Callback to reset the switch state when the form is reset.
79
+ */
78
80
  formResetCallback() {
79
81
  this.value = '';
80
82
  this.checked = false;
@@ -82,8 +84,8 @@ export class CuraRadio {
82
84
  this.internals.setFormValue(this.value);
83
85
  }
84
86
  /**
85
- * Callback to update the switch's disabled state when the form's disabled state changes.
86
- */
87
+ * Callback to update the switch's disabled state when the form's disabled state changes.
88
+ */
87
89
  formDisabledCallback(disabled) {
88
90
  this.disabled = disabled;
89
91
  }
@@ -106,21 +108,21 @@ export class CuraRadio {
106
108
  const statusColors = {
107
109
  success: {
108
110
  label: this.isDarkbackground() ? 'success-lighter' : 'success-darker',
109
- message: this.isDarkbackground() ? 'success-base' : 'success-dark'
111
+ message: this.isDarkbackground() ? 'success-base' : 'success-dark',
110
112
  },
111
113
  error: {
112
114
  label: this.isDarkbackground() ? 'error-lighter' : 'neutral-darker',
113
- message: this.isDarkbackground() ? 'error-base' : 'error-dark'
115
+ message: this.isDarkbackground() ? 'error-base' : 'error-dark',
114
116
  },
115
117
  default: {
116
118
  label: this.isDarkbackground() ? 'neutral-white' : 'neutral-black',
117
- message: this.isDarkbackground() ? 'primary-lighter' : 'neutral-dark'
118
- }
119
+ message: this.isDarkbackground() ? 'primary-lighter' : 'neutral-dark',
120
+ },
119
121
  };
120
122
  return statusColors[this.status][type];
121
123
  }
122
124
  render() {
123
- return (h(Host, { key: '73974985488d137a905266282c8baed872afb7b6', role: "radio", "aria-checked": this.checked, "aria-disabled": this.disabled, "aria-required": this.required, "aria-invalid": this.status === 'error' }, h("div", { key: 'd0dc114fda0829fa588f4a79deceec572d1a6c05', class: this.getClasses(), style: this.styles }, h("div", { key: 'a0e5eba07c667423e866d388385e5c874e20d2de', class: "info" }, h("div", { key: '776244c29497773dcd1437fbbff2d6cc1429776e', class: "label-wrapper" }, h("cura-label", { key: '4e340091e13ee08fbd7e5461a1a26c8d6161d509', class: "label", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: '082446dae9772ffde74131b3cbfb14464140e2be', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: 'd2fd69bf7aa35a0861eb60a718c64742cabeb521', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: 'b4d9c088779cacdcff50d3f0340d987339705465' }))), h("input", { key: 'bfd06db3f307be85b8a7ecc541305ceb6bb5c9b6', 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 }))));
125
+ return (h(Host, { key: '550e164f2be33f4fdad6c194302723a00e51843c', role: "radio", "aria-checked": this.checked, "aria-disabled": this.disabled, "aria-required": this.required, "aria-invalid": this.status === 'error' }, h("div", { key: 'ebcfef353b7dd4655b1d809025060db952927521', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, h("div", { key: '436ecc0f4fd72ff6a00a2a47f494e08aae65b3d6', class: "info" }, h("div", { key: '4836e4ce83d1fc3b338cfd216b46a7791ba6dc90', class: "label-wrapper" }, h("cura-label", { key: '434f0b816eee11b7da0b44f37880e31c52e2f853', textOverflow: this.overflowLabel, class: `label${this.overflowLabel === 'single' ? ' textoverflow-single' : ''}`, size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && (h("cura-paragraph", { key: '1d06464488947f469abd5c3d1c25ebb2ed63a5bd', lineHeight: "0%", marginBlock: "0", color: "error-base" }, "*", ' '))), h("cura-label", { key: '508bb787d2da5d25de48516ed64d6b02c94d8546', textOverflow: this.overflowHelper, color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: 'f35d5c895f74ec02987474e71df9a5067ea51e70' }))), h("input", { key: 'fbd6ba47d6e8a9c812ad986964749507f9d33d62', 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 }))));
124
126
  }
125
127
  static get is() { return "cura-radio"; }
126
128
  static get encapsulation() { return "shadow"; }
@@ -248,7 +250,7 @@ export class CuraRadio {
248
250
  "type": "string",
249
251
  "mutable": false,
250
252
  "complexType": {
251
- "original": "\"left\" | \"right\"",
253
+ "original": "'left' | 'right'",
252
254
  "resolved": "\"left\" | \"right\"",
253
255
  "references": {}
254
256
  },
@@ -351,6 +353,48 @@ export class CuraRadio {
351
353
  "attribute": "color",
352
354
  "reflect": false,
353
355
  "defaultValue": "'accent'"
356
+ },
357
+ "overflowLabel": {
358
+ "type": "string",
359
+ "mutable": false,
360
+ "complexType": {
361
+ "original": "'none' | 'single' | string",
362
+ "resolved": "string",
363
+ "references": {}
364
+ },
365
+ "required": false,
366
+ "optional": false,
367
+ "docs": {
368
+ "tags": [{
369
+ "name": "default",
370
+ "text": "'none'"
371
+ }],
372
+ "text": "Controls how the label text should handle overflow.\n- `'none'`: No overflow handling; the label displays normally.\n- `'single'`: The label will be truncated with an ellipsis if it overflows a single line.\n- `string`: Custom overflow handling mode."
373
+ },
374
+ "attribute": "overflow-label",
375
+ "reflect": true,
376
+ "defaultValue": "'none'"
377
+ },
378
+ "overflowHelper": {
379
+ "type": "string",
380
+ "mutable": false,
381
+ "complexType": {
382
+ "original": "'none' | 'single' | string",
383
+ "resolved": "string",
384
+ "references": {}
385
+ },
386
+ "required": false,
387
+ "optional": false,
388
+ "docs": {
389
+ "tags": [{
390
+ "name": "default",
391
+ "text": "'none'"
392
+ }],
393
+ "text": "Controls how the helper text should handle overflow.\n- `'none'`: No overflow handling; the label displays normally.\n- `'single'`: The label will be truncated with an ellipsis if it overflows a single line.\n- `string`: Custom overflow handling mode."
394
+ },
395
+ "attribute": "overflow-helper",
396
+ "reflect": true,
397
+ "defaultValue": "'none'"
354
398
  }
355
399
  };
356
400
  }
@@ -371,7 +415,7 @@ export class CuraRadio {
371
415
  "text": ""
372
416
  },
373
417
  "complexType": {
374
- "original": "{ value: string, checked: boolean }",
418
+ "original": "{ value: string; checked: boolean }",
375
419
  "resolved": "{ value: string; checked: boolean; }",
376
420
  "references": {}
377
421
  }