@rededor/cura 1.6.1-alpha.7 → 1.6.1-alpha.8

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 (135) hide show
  1. package/dist/cjs/cura-accordion_18.cjs.entry.js +9 -9
  2. package/dist/cjs/cura-checkbox.cjs.entry.js +3 -2
  3. package/dist/cjs/cura-checkbox.cjs.entry.js.map +1 -1
  4. package/dist/cjs/cura-display.cjs.entry.js +1 -1
  5. package/dist/cjs/cura-input-date.cjs.entry.js +1 -1
  6. package/dist/cjs/cura-loader-bar.cjs.entry.js +1 -1
  7. package/dist/cjs/cura-modal.cjs.entry.js +15 -2
  8. package/dist/cjs/cura-modal.cjs.entry.js.map +1 -1
  9. package/dist/cjs/cura-progress-bar_2.cjs.entry.js +2 -2
  10. package/dist/cjs/cura-radio.cjs.entry.js +18 -17
  11. package/dist/cjs/cura-radio.cjs.entry.js.map +1 -1
  12. package/dist/cjs/cura-stepper.cjs.entry.js +1 -1
  13. package/dist/cjs/cura-switch.cjs.entry.js +4 -2
  14. package/dist/cjs/cura-switch.cjs.entry.js.map +1 -1
  15. package/dist/cjs/cura-toast.cjs.entry.js +1 -1
  16. package/dist/cjs/cura-tooltip.cjs.entry.js +1 -1
  17. package/dist/cjs/cura.cjs.js +1 -1
  18. package/dist/cjs/loader.cjs.js +1 -1
  19. package/dist/collection/components/cura-modal/cura-modal.css +3 -2
  20. package/dist/collection/components/cura-modal/cura-modal.js +14 -1
  21. package/dist/collection/components/cura-modal/cura-modal.js.map +1 -1
  22. package/dist/collection/components/cura-page-template/cura-page-template.js +1 -1
  23. package/dist/collection/components/cura-stepper/cura-progress-bar/cura-progress-bar.js +1 -1
  24. package/dist/collection/components/cura-stepper/cura-stepper-item/cura-stepper-item.js +1 -1
  25. package/dist/collection/components/cura-stepper/cura-stepper.js +1 -1
  26. package/dist/collection/components/cura-toast/cura-toast.js +1 -1
  27. package/dist/collection/components/cura-tooltip/cura-tooltip.js +1 -1
  28. package/dist/collection/components/forms/cura-checkbox/cura-checkbox.css +19 -1
  29. package/dist/collection/components/forms/cura-checkbox/cura-checkbox.js +20 -1
  30. package/dist/collection/components/forms/cura-checkbox/cura-checkbox.js.map +1 -1
  31. package/dist/collection/components/forms/cura-checkbox/cura-checkbox.stories.js +16 -2
  32. package/dist/collection/components/forms/cura-checkbox/cura-checkbox.stories.js.map +1 -1
  33. package/dist/collection/components/forms/cura-input-date/cura-input-date.js +1 -1
  34. package/dist/collection/components/forms/cura-label/cura-label.js +1 -1
  35. package/dist/collection/components/forms/cura-radio/cura-radio.css +19 -1
  36. package/dist/collection/components/forms/cura-radio/cura-radio.js +37 -18
  37. package/dist/collection/components/forms/cura-radio/cura-radio.js.map +1 -1
  38. package/dist/collection/components/forms/cura-radio/cura-radio.stories.js +17 -4
  39. package/dist/collection/components/forms/cura-radio/cura-radio.stories.js.map +1 -1
  40. package/dist/collection/components/forms/cura-select/cura-select.js +3 -3
  41. package/dist/collection/components/forms/cura-select-options/cura-select-option.js +1 -1
  42. package/dist/collection/components/forms/cura-switch/cura-switch.css +14 -1
  43. package/dist/collection/components/forms/cura-switch/cura-switch.js +21 -1
  44. package/dist/collection/components/forms/cura-switch/cura-switch.js.map +1 -1
  45. package/dist/collection/components/forms/cura-switch/cura-switch.stories.js +16 -2
  46. package/dist/collection/components/forms/cura-switch/cura-switch.stories.js.map +1 -1
  47. package/dist/collection/components/loaders/cura-loader-bar/cura-loader-bar.js +1 -1
  48. package/dist/collection/components/loaders/cura-loader-circle/cura-loader-circle.js +1 -1
  49. package/dist/collection/components/text/cura-display/cura-display.js +1 -1
  50. package/dist/collection/components/text/cura-heading/cura-heading.js +1 -1
  51. package/dist/collection/components/text/cura-paragraph/cura-paragraph.js +1 -1
  52. package/dist/components/cura-checkbox.js +4 -2
  53. package/dist/components/cura-checkbox.js.map +1 -1
  54. package/dist/components/cura-display.js +1 -1
  55. package/dist/components/cura-heading2.js +1 -1
  56. package/dist/components/cura-input-date.js +1 -1
  57. package/dist/components/cura-label2.js +1 -1
  58. package/dist/components/cura-loader-bar2.js +1 -1
  59. package/dist/components/cura-loader-circle2.js +1 -1
  60. package/dist/components/cura-modal.js +31 -6
  61. package/dist/components/cura-modal.js.map +1 -1
  62. package/dist/components/cura-page-template.js +1 -1
  63. package/dist/components/cura-paragraph2.js +1 -1
  64. package/dist/components/cura-progress-bar2.js +1 -1
  65. package/dist/components/cura-radio.js +19 -17
  66. package/dist/components/cura-radio.js.map +1 -1
  67. package/dist/components/cura-select-option2.js +1 -1
  68. package/dist/components/cura-select2.js +3 -3
  69. package/dist/components/cura-stepper-item2.js +1 -1
  70. package/dist/components/cura-stepper.js +1 -1
  71. package/dist/components/cura-switch.js +5 -2
  72. package/dist/components/cura-switch.js.map +1 -1
  73. package/dist/components/cura-toast.js +1 -1
  74. package/dist/components/cura-tooltip.js +1 -1
  75. package/dist/cura/cura.esm.js +1 -1
  76. package/dist/cura/cura.esm.js.map +1 -1
  77. package/dist/cura/p-03feed94.entry.js +2 -0
  78. package/dist/cura/p-03feed94.entry.js.map +1 -0
  79. package/dist/cura/{p-25932952.entry.js → p-0b872499.entry.js} +2 -2
  80. package/dist/cura/{p-777decf9.entry.js → p-137f003b.entry.js} +2 -2
  81. package/dist/cura/{p-3c305dbd.entry.js → p-202dc01a.entry.js} +2 -2
  82. package/dist/cura/{p-57c854b3.entry.js → p-20b05d8f.entry.js} +2 -2
  83. package/dist/cura/{p-1c9c62f1.entry.js → p-5a43e745.entry.js} +2 -2
  84. package/dist/cura/{p-0342c255.entry.js → p-84c18273.entry.js} +2 -2
  85. package/dist/cura/p-9fce5ec5.entry.js +2 -0
  86. package/dist/cura/p-9fce5ec5.entry.js.map +1 -0
  87. package/dist/cura/{p-b5464dfc.entry.js → p-ac01bec2.entry.js} +2 -2
  88. package/dist/cura/p-b84924e1.entry.js +2 -0
  89. package/dist/cura/p-b84924e1.entry.js.map +1 -0
  90. package/dist/cura/p-b856b946.entry.js +2 -0
  91. package/dist/cura/p-b856b946.entry.js.map +1 -0
  92. package/dist/cura/{p-d7f46266.entry.js → p-d97719bc.entry.js} +2 -2
  93. package/dist/esm/cura-accordion_18.entry.js +9 -9
  94. package/dist/esm/cura-checkbox.entry.js +3 -2
  95. package/dist/esm/cura-checkbox.entry.js.map +1 -1
  96. package/dist/esm/cura-display.entry.js +1 -1
  97. package/dist/esm/cura-input-date.entry.js +1 -1
  98. package/dist/esm/cura-loader-bar.entry.js +1 -1
  99. package/dist/esm/cura-modal.entry.js +15 -2
  100. package/dist/esm/cura-modal.entry.js.map +1 -1
  101. package/dist/esm/cura-progress-bar_2.entry.js +2 -2
  102. package/dist/esm/cura-radio.entry.js +18 -17
  103. package/dist/esm/cura-radio.entry.js.map +1 -1
  104. package/dist/esm/cura-stepper.entry.js +1 -1
  105. package/dist/esm/cura-switch.entry.js +4 -2
  106. package/dist/esm/cura-switch.entry.js.map +1 -1
  107. package/dist/esm/cura-toast.entry.js +1 -1
  108. package/dist/esm/cura-tooltip.entry.js +1 -1
  109. package/dist/esm/cura.js +1 -1
  110. package/dist/esm/loader.js +1 -1
  111. package/dist/types/components/cura-modal/cura-modal.d.ts +3 -0
  112. package/dist/types/components/forms/cura-checkbox/cura-checkbox.d.ts +5 -0
  113. package/dist/types/components/forms/cura-checkbox/cura-checkbox.stories.d.ts +15 -0
  114. package/dist/types/components/forms/cura-radio/cura-radio.d.ts +17 -12
  115. package/dist/types/components/forms/cura-radio/cura-radio.stories.d.ts +15 -0
  116. package/dist/types/components/forms/cura-switch/cura-switch.d.ts +5 -0
  117. package/dist/types/components/forms/cura-switch/cura-switch.stories.d.ts +15 -0
  118. package/dist/types/components.d.ts +28 -4
  119. package/package.json +2 -2
  120. package/dist/cura/p-0d78f2ed.entry.js +0 -2
  121. package/dist/cura/p-0d78f2ed.entry.js.map +0 -1
  122. package/dist/cura/p-3c3d330f.entry.js +0 -2
  123. package/dist/cura/p-3c3d330f.entry.js.map +0 -1
  124. package/dist/cura/p-9db912ea.entry.js +0 -2
  125. package/dist/cura/p-9db912ea.entry.js.map +0 -1
  126. package/dist/cura/p-d6897ac1.entry.js +0 -2
  127. package/dist/cura/p-d6897ac1.entry.js.map +0 -1
  128. /package/dist/cura/{p-25932952.entry.js.map → p-0b872499.entry.js.map} +0 -0
  129. /package/dist/cura/{p-777decf9.entry.js.map → p-137f003b.entry.js.map} +0 -0
  130. /package/dist/cura/{p-3c305dbd.entry.js.map → p-202dc01a.entry.js.map} +0 -0
  131. /package/dist/cura/{p-57c854b3.entry.js.map → p-20b05d8f.entry.js.map} +0 -0
  132. /package/dist/cura/{p-1c9c62f1.entry.js.map → p-5a43e745.entry.js.map} +0 -0
  133. /package/dist/cura/{p-0342c255.entry.js.map → p-84c18273.entry.js.map} +0 -0
  134. /package/dist/cura/{p-b5464dfc.entry.js.map → p-ac01bec2.entry.js.map} +0 -0
  135. /package/dist/cura/{p-d7f46266.entry.js.map → p-d97719bc.entry.js.map} +0 -0
@@ -28,10 +28,12 @@ export default {
28
28
  value="${args.value}"` : ''}${args.name ? `
29
29
  name="${args.name}"` : ''}${args.label ? `
30
30
  label="${args.label}"` : ''}${args.status && args.status !== 'default' ? `
31
- status="${args.status}"` : ''}>
32
- ${message ? `
33
- ${message}` : ''}
34
- </cura-radio>
31
+ status="${args.status}"` : ''}${args.textOverflow && args.textOverflow !== 'none' ? `
32
+ text-overflow="${args.textOverflow}"` : ''}
33
+ >
34
+ ${message ? ` ${message}` : ''}
35
+
36
+ </cura-radio>
35
37
  `;
36
38
  return block;
37
39
  },
@@ -154,6 +156,16 @@ export default {
154
156
  defaultValue: { summary: '' },
155
157
  },
156
158
  },
159
+ textOverflow: {
160
+ control: { type: 'select' },
161
+ options: ['none', 'single'],
162
+ description: 'Aplica definições de corte de texto com `ellipsis`.',
163
+ name: 'text-overflow',
164
+ table: {
165
+ category: 'Properties',
166
+ defaultValue: { summary: 'none' }
167
+ }
168
+ },
157
169
  },
158
170
  };
159
171
  export const CuraRadioStory = {
@@ -171,6 +183,7 @@ export const CuraRadioStory = {
171
183
  value: '',
172
184
  name: 'radio-group',
173
185
  ontabindex: 0,
186
+ textOverflow: 'none',
174
187
  },
175
188
  };
176
189
  //# sourceMappingURL=cura-radio.stories.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"cura-radio.stories.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-radio/cura-radio.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { baseColors } from '../../../utils/utils';\n\nexport default {\n title: 'Componentes/Forms/Radio',\n tags: ['autodocs'],\n render: ({ message, ...args }) => {\n const block = `<cura-radio${args.checked ? `\n checked` : ''}${args.disabled ? `\n disabled` : ''}${args.required ? `\n required` : ''}${args.size && args.size !== 'medium' ? `\n size=\"${args.size}\"` : ''}${args.position && args.position !== 'left' ? `\n position=\"${args.position}\"` : ''}${args.ontabindex !== 0 ? `\n ontabindex=\"${args.ontabindex}\"` : ''}${args.background && args.background !== 'light' ? `\n background=\"${args.background}\"` : ''}${args.color && args.color !== 'accent' ? `\n color=\"${args.color}\"` : ''}${args.value ? `\n value=\"${args.value}\"` : ''}${args.name ? `\n name=\"${args.name}\"` : ''}${args.label ? `\n label=\"${args.label}\"` : ''}${args.status && args.status !== 'default' ? `\n status=\"${args.status}\"` : ''}>\n ${message ? `\n ${message}` : ''}\n</cura-radio>\n`;\n return block;\n },\n argTypes: {\n label: {\n control: 'text',\n description: 'Texto da label do radio.',\n table: {\n category: 'Properties',\n },\n },\n message: {\n control: 'text',\n description: 'Conteúdo de ajuda ou mensagem.',\n name: 'content',\n table: {\n category: 'Slot',\n },\n },\n checked: {\n control: 'boolean',\n description: 'Define se o radio está checado.',\n table: {\n category: 'States',\n defaultValue: { summary: false }\n }\n },\n disabled: {\n control: 'boolean',\n description: 'Desabilita o radio.',\n table: {\n category: 'States',\n defaultValue: { summary: false }\n }\n },\n required: {\n control: 'boolean',\n description: 'Torna o radio obrigatório.',\n table: {\n category: 'States',\n defaultValue: { summary: false }\n }\n },\n ontabindex: {\n control: 'number',\n description: 'Define o tabIndex do radio.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 0 }\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 label.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'left' }\n },\n name: 'position'\n },\n size: {\n control: { type: 'inline-radio' },\n options: ['small', 'medium', 'large'],\n description: 'Tamanho do radio.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'medium' }\n }\n },\n background: {\n control: { type: 'inline-radio' },\n options: ['dark', 'light'],\n description: 'Tema do radio.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'light' }\n }\n },\n color: {\n control: { type: 'select' },\n options: ['', ...baseColors],\n description: 'Cor do radio.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'accent' }\n }\n },\n value: {\n control: 'text',\n description: 'Valor associado ao radio.',\n table: {\n category: 'Properties',\n defaultValue: { summary: '' }\n }\n },\n name: {\n control: 'text',\n description: 'Nome do grupo de radio buttons.',\n table: {\n category: 'Properties',\n defaultValue: { summary: '' }\n }\n },\n status: {\n control: { type: 'select' },\n options: ['default', 'success', 'error'],\n description: 'Status do checkbox.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'default' },\n },\n },\n onchange: {\n control: 'none',\n description: 'Este evento via Listener quando o estado do radio é alterado.`{ checked: boolean, value: string }`',\n table: {\n category: 'Event',\n defaultValue: { summary: '' },\n },\n },\n },\n};\n\nexport const CuraRadioStory = {\n args: {\n label: 'Radio',\n message: 'Info text',\n checked: false,\n required: false,\n disabled: false,\n size: 'medium',\n position: 'left',\n background: 'light',\n status: 'default',\n color: 'accent',\n value: '',\n name: 'radio-group',\n ontabindex: 0,\n },\n};\n"]}
1
+ {"version":3,"file":"cura-radio.stories.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-radio/cura-radio.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { baseColors } from '../../../utils/utils';\n\nexport default {\n title: 'Componentes/Forms/Radio',\n tags: ['autodocs'],\n render: ({ message, ...args }) => {\n const block = `<cura-radio${args.checked ? `\n checked` : ''}${args.disabled ? `\n disabled` : ''}${args.required ? `\n required` : ''}${args.size && args.size !== 'medium' ? `\n size=\"${args.size}\"` : ''}${args.position && args.position !== 'left' ? `\n position=\"${args.position}\"` : ''}${args.ontabindex !== 0 ? `\n ontabindex=\"${args.ontabindex}\"` : ''}${args.background && args.background !== 'light' ? `\n background=\"${args.background}\"` : ''}${args.color && args.color !== 'accent' ? `\n color=\"${args.color}\"` : ''}${args.value ? `\n value=\"${args.value}\"` : ''}${args.name ? `\n name=\"${args.name}\"` : ''}${args.label ? `\n label=\"${args.label}\"` : ''}${args.status && args.status !== 'default' ? `\n status=\"${args.status}\"` : ''}${args.textOverflow && args.textOverflow !== 'none' ? `\n text-overflow=\"${args.textOverflow}\"` : ''} \n >\n ${message ? ` ${message}` : ''} \n \n </cura-radio>\n`;\n return block;\n },\n argTypes: {\n label: {\n control: 'text',\n description: 'Texto da label do radio.',\n table: {\n category: 'Properties',\n },\n },\n message: {\n control: 'text',\n description: 'Conteúdo de ajuda ou mensagem.',\n name: 'content',\n table: {\n category: 'Slot',\n },\n },\n checked: {\n control: 'boolean',\n description: 'Define se o radio está checado.',\n table: {\n category: 'States',\n defaultValue: { summary: false }\n }\n },\n disabled: {\n control: 'boolean',\n description: 'Desabilita o radio.',\n table: {\n category: 'States',\n defaultValue: { summary: false }\n }\n },\n required: {\n control: 'boolean',\n description: 'Torna o radio obrigatório.',\n table: {\n category: 'States',\n defaultValue: { summary: false }\n }\n },\n ontabindex: {\n control: 'number',\n description: 'Define o tabIndex do radio.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 0 }\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 label.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'left' }\n },\n name: 'position'\n },\n size: {\n control: { type: 'inline-radio' },\n options: ['small', 'medium', 'large'],\n description: 'Tamanho do radio.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'medium' }\n }\n },\n background: {\n control: { type: 'inline-radio' },\n options: ['dark', 'light'],\n description: 'Tema do radio.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'light' }\n }\n },\n color: {\n control: { type: 'select' },\n options: ['', ...baseColors],\n description: 'Cor do radio.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'accent' }\n }\n },\n value: {\n control: 'text',\n description: 'Valor associado ao radio.',\n table: {\n category: 'Properties',\n defaultValue: { summary: '' }\n }\n },\n name: {\n control: 'text',\n description: 'Nome do grupo de radio buttons.',\n table: {\n category: 'Properties',\n defaultValue: { summary: '' }\n }\n },\n status: {\n control: { type: 'select' },\n options: ['default', 'success', 'error'],\n description: 'Status do checkbox.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'default' },\n },\n },\n onchange: {\n control: 'none',\n description: 'Este evento via Listener quando o estado do radio é alterado.`{ checked: 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 CuraRadioStory = {\n args: {\n label: 'Radio',\n message: 'Info text',\n checked: false,\n required: false,\n disabled: false,\n size: 'medium',\n position: 'left',\n background: 'light',\n status: 'default',\n color: 'accent',\n value: '',\n name: 'radio-group',\n ontabindex: 0,\n textOverflow: 'none',\n },\n};\n"]}
@@ -304,13 +304,13 @@ export class CuraSelect {
304
304
  document.removeEventListener('click', this.handleClickOutside);
305
305
  }
306
306
  render() {
307
- return (h(Host, { key: '204eff3c538294ba26db1925c1710f1b089674b0', style: this.styles, role: "combobox", "aria-label": this.label, "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error') }, h("div", { key: 'e8a743f563ebfdc837df682ad54e2dfcb6c749a9', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (h("cura-label", { key: '6ea67e7ea1e93234fd54dd97f16aafc57481f7d7', class: "label", weight: "bold", size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && h("span", { key: '203a7ef371ede9f383aa050f6075f426269d2711', class: "required" }, "* "))), h("div", { key: '295e7162bad99252a5a0e49cb7a4f7569796a387', class: {
307
+ return (h(Host, { key: '1757de6c21410c258aa495d9ed484fbf6d4e07fa', style: this.styles, role: "combobox", "aria-label": this.label, "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error') }, h("div", { key: 'beaa6e3ae5a41efe8055b271ab0505b83bb25e03', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (h("cura-label", { key: '249e2a4343abacdd445f6fd350008312fe5577fe', class: "label", weight: "bold", size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && h("span", { key: '910c7089a86b7f4a539e10a37aa771027aa035bd', class: "required" }, "* "))), h("div", { key: 'd352865d850a8bbbe186189538f370d38bce5062', class: {
308
308
  'cura-input-field': true,
309
309
  'open': this.isOpen,
310
- } }, this.renderIcon(), h("input", { key: 'ecfcd45a931d93db436c74ae01d0e09c2e082d44', 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 }), h("button", { key: 'ddc05493b274a812e9431aacf486dfe16d89fbf9', class: "up-down-button" }, h("cura-icon", { key: '6d0f85680a2078692042bec1909a81e95e47813d', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: "default" }))), h("cura-label", { key: 'b3efec5743d3b563024be3fadebcee43a74d490d', class: "helper-text", size: "xsmall", color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, h("slot", { key: '319da1cf6b77891b088fc96d02be63b7a3aa1390' })), this.isOpen && (h("div", { key: 'f6b8c54d6205bae09f5f235df9c5936f1677ea83', class: {
310
+ } }, this.renderIcon(), h("input", { key: 'bf14408d2d134530198ec108a2c885fc7c0283f5', 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 }), h("button", { key: '7ffaf78d35c784e4dddbe67a3a52bacd5a7c8525', class: "up-down-button" }, h("cura-icon", { key: '436612e326a50aa6b6d5fe27246b1e10b5b4c14c', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: "default" }))), h("cura-label", { key: '34f20c65e37fe40cc708bab29054cdb436fb233a', class: "helper-text", size: "xsmall", color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, h("slot", { key: 'fd4ab76af19470d7c82b2bd7931a6b329f5db8ba' })), this.isOpen && (h("div", { key: '2a831c778efbbb4ad989bfb1ccc207741890285d', class: {
311
311
  menu: true,
312
312
  open: this.isOpen,
313
- } }, h("slot", { key: 'eba73a1eec9462556599d5e8c9aa0d237ab81ad1', name: "option" }))))));
313
+ } }, h("slot", { key: '4acd7b45bf96420a9cb9db294c67b8173245b452', name: "option" }))))));
314
314
  }
315
315
  static get is() { return "cura-select"; }
316
316
  static get encapsulation() { return "shadow"; }
@@ -33,7 +33,7 @@ export class CuraSelectOption {
33
33
  };
34
34
  }
35
35
  render() {
36
- return (h(Host, { key: '308213609f8d024bab472202e0764187e70c3da1', slot: "option", role: "option", "aria-selected": this.selected }, h("div", { key: 'c8b496423f2bc796b712877bc8397f27c15cc538', class: this.getClasses(), style: this.styles }, h("cura-label", { key: 'a8b9260527c741049e3fdca684b262ba024766db', color: `${this.selected ? 'primary-base' : 'neutral-black'}`, size: this.getSize('label'), "margin-block": "0" }, h("slot", { key: '0c4c47cf39e10205bc92b747fd93ce2e1323fd98' })), this.selected && h("cura-icon", { key: 'ff9a8842bdff1206797b43ce578c180c0203a2b9', name: 'check', size: this.getSize('icon'), color: "primary-base" }))));
36
+ return (h(Host, { key: '0822f9ef2bf99e9f2fd9b82757c232449cec3397', slot: "option", role: "option", "aria-selected": this.selected }, h("div", { key: '97ce07635ab1e67676cdf80bce6b1eada30e035c', class: this.getClasses(), style: this.styles }, h("cura-label", { key: 'd6fb19b666f1d12d713ba1e6270ebb62a12d86ab', color: `${this.selected ? 'primary-base' : 'neutral-black'}`, size: this.getSize('label'), "margin-block": "0" }, h("slot", { key: '78f64d9347185fd398e1adbc45650cf247894481' })), this.selected && h("cura-icon", { key: '948e0d36d71e4c236a2472032703dbb47a371910', name: 'check', size: this.getSize('icon'), color: "primary-base" }))));
37
37
  }
38
38
  static get is() { return "cura-select-option"; }
39
39
  static get encapsulation() { return "shadow"; }
@@ -42,24 +42,37 @@
42
42
  * Required CSS Properties: --primary-base opacity: 0.16
43
43
  * Use: @include shadow-level3-primary(){ ... }
44
44
  */
45
+ /**
46
+ * Truncate text in single line
47
+ * Use: @include truncate-single() { ... }
48
+ */
45
49
  :host {
46
50
  display: block;
47
- width: fit-content;
48
51
  box-sizing: border-box;
52
+ min-width: 0;
49
53
  }
50
54
 
51
55
  .container {
52
56
  display: flex;
53
57
  align-items: center;
54
58
  flex-direction: row-reverse;
59
+ justify-content: start;
55
60
  gap: var(--gap);
56
61
  text-align: left;
62
+ cursor: pointer;
57
63
  }
58
64
 
59
65
  .position {
60
66
  flex-direction: row;
61
67
  }
62
68
 
69
+ .info.textoverflow-single {
70
+ text-overflow: ellipsis;
71
+ white-space: nowrap;
72
+ overflow: hidden;
73
+ display: block;
74
+ }
75
+
63
76
  .label,
64
77
  .message {
65
78
  text-align: left;
@@ -23,6 +23,7 @@ export class CuraSwitch {
23
23
  this.size = 'medium';
24
24
  this.background = 'light';
25
25
  this.color = 'accent';
26
+ this.textOverflow = 'none';
26
27
  this.styles = {};
27
28
  }
28
29
  sizeHandler() {
@@ -89,10 +90,11 @@ export class CuraSwitch {
89
90
  classes['checked'] = this.checked;
90
91
  classes['disabled'] = this.disabled;
91
92
  classes['position'] = this.position === 'right';
93
+ classes['textoverflow-single'] = this.textOverflow === 'single';
92
94
  return classes;
93
95
  }
94
96
  render() {
95
- return (h(Host, { key: '6d6dee59547a29e11ba423aed2e0c3beb0fe7cc7', role: "switch", "aria-checked": this.checked, "aria-disabled": this.disabled }, h("div", { key: '85d2f2d78f4e43a92c694fee2bf22d4dbfb3eb5d', class: this.getClasses(), style: this.styles }, h("div", { key: '09802da22abd10e235f9110b051717244588eb04', class: "info" }, h("cura-label", { key: '2df09ee13d301f6b9392d7387373326d9f4efe22', 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), h("cura-label", { key: '6474c893ba57f14ab9cd96307b03492bff568cf4', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, h("slot", { key: '2329e2d7855a9357d00c36f93858d54f7857bdca' }))), h("div", { key: '39c3b260ce60a409c9c04c98d9d8426ff9afd6af', onClick: this.toggleSwitch, class: "control" }, h("div", { key: 'dd613f737b66c2facca47adc52a79f010eafaa3d', class: `track ${this.size.toLowerCase()}` }, h("div", { key: '7ab3462d12f7e3448130c81a09064bec2b4b60da', class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
97
+ return (h(Host, { key: '774e59c0c00a11d231e30d032d7872d99eb3b8d1', role: "switch", "aria-checked": this.checked, "aria-disabled": this.disabled }, h("div", { key: 'e2bd25d79535f61b586fbf8a43915b5fccc308a2', class: this.getClasses(), style: this.styles, onClick: this.toggleSwitch }, h("div", { key: 'e68b9fac16600090db42037c507c2af81c1be0f3', class: `info ${this.textOverflow === 'single' ? 'textoverflow-single' : ''}` }, h("cura-label", { key: '70a99aa8a108b00d46bb0354785b601e393d6cc1', textOverflow: this.textOverflow, 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), h("cura-label", { key: '09b1ae5f5a3b4062b473dec49bd68583d24ce2c0', textOverflow: this.textOverflow, style: { textAlign: this.position === 'right' ? 'right' : 'left' }, color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, h("slot", { key: '380a487d0387fc5934413f558e5f6f2558cb19de' }))), h("div", { key: '3a1ebdc9faf0c34e5b2e1b1e55b1a57161e14cb5', class: "control" }, h("div", { key: 'bd027689060ae72fce3e77ef739822ccb4f16b49', class: `track ${this.size.toLowerCase()}` }, h("div", { key: '918744f9117e5f7ddcc0e9c9cdbf7735b396dc87', class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
96
98
  }
97
99
  static get is() { return "cura-switch"; }
98
100
  static get encapsulation() { return "shadow"; }
@@ -252,6 +254,24 @@ export class CuraSwitch {
252
254
  "attribute": "color",
253
255
  "reflect": false,
254
256
  "defaultValue": "'accent'"
257
+ },
258
+ "textOverflow": {
259
+ "type": "string",
260
+ "mutable": false,
261
+ "complexType": {
262
+ "original": "'none' | 'single' | string",
263
+ "resolved": "string",
264
+ "references": {}
265
+ },
266
+ "required": false,
267
+ "optional": false,
268
+ "docs": {
269
+ "tags": [],
270
+ "text": "Apply text-overflow ellipsis definitions.\nDefault to none"
271
+ },
272
+ "attribute": "text-overflow",
273
+ "reflect": true,
274
+ "defaultValue": "'none'"
255
275
  }
256
276
  };
257
277
  }
@@ -1 +1 @@
1
- {"version":3,"file":"cura-switch.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-switch/cura-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, h, Host, Watch, EventEmitter, State, AttachInternals } from '@stencil/core';\nimport { formsSizes } from '../cura-forms.definitions';\n\n@Component({\n tag: 'cura-switch',\n styleUrl: 'cura-switch.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class CuraSwitch {\n /**\n * Indicates whether the switch is checked or not.\n */\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n /**\n * Indicates whether the switch is disabled or not.\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n /**\n * The label text to display next to the switch.\n */\n @Prop({ reflect: true }) label: string = '';\n /**\n * Tab index for the switch element.\n * Reflects as an HTML attribute.\n */\n @Prop({ reflect: true }) ontabindex: number = 0;\n /**\n * Position of the label relative to the switch.\n * Can be 'left' or 'right'.\n */\n @Prop({ reflect: true }) position: 'left' | 'right' = 'left';\n /**\n * Size of the switch.\n * Can be 'small', 'medium', or 'large'.\n */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n /**\n * Background style of the switch.\n * Can be 'dark' or 'light'.\n */\n @Prop() background: 'dark' | 'light' = 'light';\n /**\n * Accent color of the switch.\n */\n @Prop() color = 'accent';\n\n @State() styles = {};\n\n @Event({ eventName: 'onchange', composed: true, cancelable: true, bubbles: true }) onchange: EventEmitter<{ checked: boolean }>;\n\n @AttachInternals() internals: ElementInternals;\n\n sizes = {\n large: { size: 64 },\n medium: { size: 48 },\n small: { size: 40 },\n };\n\n isDarkbackground = () => this.background === 'dark';\n\n @Watch('size')\n sizeHandler() {\n this.styles = {\n ...this.styles,\n '--size-track': `${this.sizes[this.size].size}px`,\n '--size': `${formsSizes[this.size].size}px`,\n '--gap': `${formsSizes[this.size].gap}px`,\n };\n }\n\n @Watch('color')\n @Watch('background')\n setColors() {\n const colors = [\n { name: '--info-base', background: 'info-base' },\n { name: '--neutral-black-shadow', background: 'neutral-black', opacity: 0.16 },\n { name: '--neutral-purewhite', background: 'neutral-purewhite' },\n { name: '--neutral-medium', background: 'neutral-medium' },\n { name: '--neutral-pale', background: 'neutral-pale' },\n { name: '--neutral-dark-base', background: `neutral-${this.isDarkbackground() ? 'dark' : 'base'}` },\n { name: '--neutral-darker-medium', background: `neutral-${this.isDarkbackground() ? 'darker' : 'medium'}` },\n { name: '--neutral-black-neutral-pale', background: `${this.isDarkbackground() ? 'neutral-black' : 'neutral-pale'}` },\n { name: '--neutral-black-neutral-base', background: `${this.isDarkbackground() ? 'neutral-dark' : 'neutral-base'}` },\n { name: '--color-base-light', background: `${this.color}-light` },\n { name: '--color-dark', background: `${this.color}-dark` },\n ];\n\n colors.forEach(color => {\n this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background, color?.opacity);\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 }) {\n this.checked = state.value === 'true';\n this.internals.setFormValue(this.checked.toString());\n }\n\n /**\n * Callback to reset the switch state when the form is reset.\n */\n formResetCallback() {\n this.checked = false;\n this.internals.setValidity({});\n this.internals.setFormValue(this.checked.toString());\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 toggleSwitch = () => {\n if (this.disabled) return null;\n\n this.checked = !this.checked;\n this.internals.setFormValue(this.checked.toString());\n this.onchange.emit({ checked: this.checked });\n };\n\n assignColor(colorDark: string, colorLight: string) {\n if (this.disabled) return this.isDarkbackground() ? 'neutral-dark' : 'neutral-dark';\n return this.isDarkbackground() ? colorDark : colorLight;\n }\n\n getClasses() {\n const classes = {};\n classes['container'] = true;\n classes['checked'] = this.checked;\n classes['disabled'] = this.disabled;\n classes['position'] = this.position === 'right';\n\n return classes;\n }\n\n render() {\n return (\n <Host role=\"switch\"\n aria-checked={this.checked}\n aria-disabled={this.disabled}>\n <div class={this.getClasses()} style={this.styles}>\n <div class=\"info\">\n <cura-label\n style={{ textAlign: this.position === 'right' ? 'right' : 'left' }}\n class=\"label\"\n weight=\"bold\"\n size={this.size === 'large' ? 'medium' : 'xsmall'}\n lineHeight=\"125%\"\n color={this.assignColor('neutral-white', 'neutral-black')}\n >\n {this.label}\n </cura-label>\n <cura-label\n style={{ textAlign: this.position === 'right' ? 'right' : 'left' }}\n color={this.assignColor('primary-lighter', 'neutral-dark')}\n size=\"xsmall\"\n class=\"message\"\n >\n <slot></slot>\n </cura-label>\n </div>\n\n <div onClick={this.toggleSwitch} class=\"control\">\n <div class={`track ${this.size.toLowerCase()}`}>\n <div class={`thumb ${this.size.toLowerCase()}`} tabIndex={this.ontabindex}></div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"cura-switch.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-switch/cura-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, h, Host, Watch, EventEmitter, State, AttachInternals } from '@stencil/core';\nimport { formsSizes } from '../cura-forms.definitions';\n\n@Component({\n tag: 'cura-switch',\n styleUrl: 'cura-switch.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class CuraSwitch {\n /**\n * Indicates whether the switch is checked or not.\n */\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n /**\n * Indicates whether the switch is disabled or not.\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n /**\n * The label text to display next to the switch.\n */\n @Prop({ reflect: true }) label: string = '';\n /**\n * Tab index for the switch element.\n * Reflects as an HTML attribute.\n */\n @Prop({ reflect: true }) ontabindex: number = 0;\n /**\n * Position of the label relative to the switch.\n * Can be 'left' or 'right'.\n */\n @Prop({ reflect: true }) position: 'left' | 'right' = 'left';\n /**\n * Size of the switch.\n * Can be 'small', 'medium', or 'large'.\n */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n /**\n * Background style of the switch.\n * Can be 'dark' or 'light'.\n */\n @Prop() background: 'dark' | 'light' = 'light';\n /**\n * Accent color of the switch.\n */\n @Prop() color = 'accent';\n\n /**\n * Apply text-overflow ellipsis definitions.\n * Default to none\n */\n @Prop({ reflect: true }) textOverflow: 'none' | 'single' | string = 'none';\n\n @State() styles = {};\n\n @Event({ eventName: 'onchange', composed: true, cancelable: true, bubbles: true }) onchange: EventEmitter<{ checked: boolean }>;\n\n @AttachInternals() internals: ElementInternals;\n\n sizes = {\n large: { size: 64 },\n medium: { size: 48 },\n small: { size: 40 },\n };\n\n isDarkbackground = () => this.background === 'dark';\n\n @Watch('size')\n sizeHandler() {\n this.styles = {\n ...this.styles,\n '--size-track': `${this.sizes[this.size].size}px`,\n '--size': `${formsSizes[this.size].size}px`,\n '--gap': `${formsSizes[this.size].gap}px`,\n };\n }\n\n @Watch('color')\n @Watch('background')\n setColors() {\n const colors = [\n { name: '--info-base', background: 'info-base' },\n { name: '--neutral-black-shadow', background: 'neutral-black', opacity: 0.16 },\n { name: '--neutral-purewhite', background: 'neutral-purewhite' },\n { name: '--neutral-medium', background: 'neutral-medium' },\n { name: '--neutral-pale', background: 'neutral-pale' },\n { name: '--neutral-dark-base', background: `neutral-${this.isDarkbackground() ? 'dark' : 'base'}` },\n { name: '--neutral-darker-medium', background: `neutral-${this.isDarkbackground() ? 'darker' : 'medium'}` },\n { name: '--neutral-black-neutral-pale', background: `${this.isDarkbackground() ? 'neutral-black' : 'neutral-pale'}` },\n { name: '--neutral-black-neutral-base', background: `${this.isDarkbackground() ? 'neutral-dark' : 'neutral-base'}` },\n { name: '--color-base-light', background: `${this.color}-light` },\n { name: '--color-dark', background: `${this.color}-dark` },\n ];\n\n colors.forEach(color => {\n this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background, color?.opacity);\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 }) {\n this.checked = state.value === 'true';\n this.internals.setFormValue(this.checked.toString());\n }\n\n /**\n * Callback to reset the switch state when the form is reset.\n */\n formResetCallback() {\n this.checked = false;\n this.internals.setValidity({});\n this.internals.setFormValue(this.checked.toString());\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 toggleSwitch = () => {\n if (this.disabled) return null;\n\n this.checked = !this.checked;\n this.internals.setFormValue(this.checked.toString());\n this.onchange.emit({ checked: this.checked });\n };\n\n assignColor(colorDark: string, colorLight: string) {\n if (this.disabled) return this.isDarkbackground() ? 'neutral-dark' : 'neutral-dark';\n return this.isDarkbackground() ? colorDark : colorLight;\n }\n\n getClasses() {\n const classes = {};\n classes['container'] = true;\n classes['checked'] = this.checked;\n classes['disabled'] = this.disabled;\n classes['position'] = this.position === 'right';\n classes['textoverflow-single'] = this.textOverflow === 'single';\n\n return classes;\n }\n\n render() {\n return (\n <Host role=\"switch\" aria-checked={this.checked} aria-disabled={this.disabled}>\n <div class={this.getClasses()} style={this.styles} onClick={this.toggleSwitch}>\n <div class={`info ${this.textOverflow === 'single' ? 'textoverflow-single' : ''}`}>\n <cura-label\n textOverflow={this.textOverflow}\n style={{ textAlign: this.position === 'right' ? 'right' : 'left' }}\n class=\"label\"\n weight=\"bold\"\n size={this.size === 'large' ? 'medium' : 'xsmall'}\n lineHeight=\"125%\"\n color={this.assignColor('neutral-white', 'neutral-black')}\n >\n {this.label}\n </cura-label>\n <cura-label\n textOverflow={this.textOverflow}\n style={{ textAlign: this.position === 'right' ? 'right' : 'left' }}\n color={this.assignColor('primary-lighter', 'neutral-dark')}\n size=\"xsmall\"\n class=\"message\"\n >\n <slot></slot>\n </cura-label>\n </div>\n\n <div class=\"control\">\n <div class={`track ${this.size.toLowerCase()}`}>\n <div class={`thumb ${this.size.toLowerCase()}`} tabIndex={this.ontabindex}></div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
@@ -19,8 +19,11 @@ const renderCuraSwitch = (label, message, args) => {
19
19
  ontabindex="${args.ontabindex}"` : ''}${args.background && args.background !== 'light' ? `
20
20
  background="${args.background}"` : ''}${args.color && args.color !== 'accent' ? `
21
21
  color="${args.color}"` : ''}${label ? `
22
- label="${label}"` : ''}>${message ? `
23
- ${message}` : ''}
22
+ label="${label}"` : ''}${args.textOverflow && args.textOverflow !== 'none' ? `
23
+ text-overflow="${args.textOverflow}"` : ''}
24
+ >
25
+
26
+ ${message ? ` ${message}` : ''}
24
27
  </cura-switch>
25
28
  `;
26
29
  return `${block}`;
@@ -119,6 +122,16 @@ export default {
119
122
  defaultValue: { summary: '' },
120
123
  },
121
124
  },
125
+ textOverflow: {
126
+ control: { type: 'select' },
127
+ options: ['none', 'single'],
128
+ description: 'Aplica definições de corte de texto com `ellipsis`.',
129
+ name: 'text-overflow',
130
+ table: {
131
+ category: 'Properties',
132
+ defaultValue: { summary: 'none' }
133
+ }
134
+ },
122
135
  },
123
136
  };
124
137
  export const CuraSwitchStory = {
@@ -132,6 +145,7 @@ export const CuraSwitchStory = {
132
145
  position: 'left',
133
146
  background: 'light',
134
147
  ontabindex: 0,
148
+ textOverflow: 'none',
135
149
  },
136
150
  };
137
151
  //# sourceMappingURL=cura-switch.stories.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"cura-switch.stories.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-switch/cura-switch.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,MAAM,gBAAgB,GAAG,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IAChD,MAAM,KAAK,GAAG,eAAe,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;UACpC,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC;UAC9C,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;WACnC,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC;cACjD,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,UAAU,KAAK,CAAC,CAAC,CAAC,CAAC;gBAC9C,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,KAAK,OAAO,CAAC,CAAC,CAAC;gBAC3E,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC;WACvE,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK,CAAC,CAAC,CAAC;WAC7B,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,OAAO,CAAC,CAAC,CAAC;IAClC,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE;;CAEjB,CAAC;IACA,OAAO,GAAG,KAAK,EAAE,CAAC;AACpB,CAAC,CAAC;AAEF,eAAe;IACb,KAAK,EAAE,0BAA0B;IACjC,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,gBAAgB,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC;IAChD,CAAC;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,2BAA2B;YACxC,IAAI,EAAE,OAAO;YACb,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;SACF;QACD,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,uCAAuC;YACpD,IAAI,EAAE,SAAS;YACf,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;aAClB;SACF;QACD,OAAO,EAAE;YACP,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,kCAAkC;YAC/C,KAAK,EAAE;gBACL,QAAQ,EAAE,QAAQ;gBAClB,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACjC;SACF;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,sBAAsB;YACnC,KAAK,EAAE;gBACL,QAAQ,EAAE,QAAQ;gBAClB,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACjC;SACF;QACD,UAAU,EAAE;YACV,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,8BAA8B;YAC3C,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;aAC7B;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,cAAc,EAAE;YACjC,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC;YACrC,WAAW,EAAE,oBAAoB;YACjC,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;aACpC;SACF;QACD,UAAU,EAAE;YACV,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE;YACjC,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;YAC1B,WAAW,EAAE,uBAAuB;YACpC,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;aACnC;SACF;QACD,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,CAAC;YAC3C,WAAW,EAAE,gBAAgB;YAC7B,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,wFAAwF;YACrG,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;gBACjB,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;aAC9B;SACF;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,IAAI,EAAE;QACJ,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,QAAQ;QACf,OAAO,EAAE,oBAAoB;QAC7B,OAAO,EAAE,KAAK;QACd,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,OAAO;QACnB,UAAU,EAAE,CAAC;KACd;CACF,CAAC","sourcesContent":["const renderCuraSwitch = (label, message, args) => {\n const block = `<cura-switch${args.checked ? `\n checked` : ''}${args.size && args.size !== 'medium' ? `\n size=\"${args.size}\"` : ''}${args.disabled ? `\n disabled` : ''}${args.position && args.position !== 'left' ? `\n position=\"${args.position}\"` : ''}${args.ontabindex !== 0 ? `\n ontabindex=\"${args.ontabindex}\"` : ''}${args.background && args.background !== 'light' ? `\n background=\"${args.background}\"` : ''}${args.color && args.color !== 'accent' ? `\n color=\"${args.color}\"` : ''}${label ? `\n label=\"${label}\"` : ''}>${message ? `\n ${message}` : ''}\n</cura-switch>\n`;\n return `${block}`;\n};\n\nexport default {\n title: 'Componentes/Forms/Switch',\n tags: ['autodocs'],\n render: ({ label, message, ...args }) => {\n return renderCuraSwitch(label, message, args);\n },\n argTypes: {\n label: {\n control: 'text',\n description: 'Texto do label do switch.',\n name: 'label',\n table: {\n category: 'Properties',\n },\n },\n message: {\n control: 'text',\n description: 'Texto adicional de ajuda ou mensagem.',\n name: 'Content',\n table: {\n category: 'Slots',\n },\n },\n checked: {\n control: 'boolean',\n description: 'Define se o switch está checado.',\n table: {\n category: 'States',\n defaultValue: { summary: false },\n },\n },\n disabled: {\n control: 'boolean',\n description: 'Desabilita o switch.',\n table: {\n category: 'States',\n defaultValue: { summary: false },\n },\n },\n ontabindex: {\n control: 'number',\n description: 'Define o tabIndex do switch.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 0 },\n },\n name: 'ontabindex',\n },\n position: {\n control: { type: 'inline-radio' },\n options: ['left', 'right'],\n description: 'Posição do label em relação ao switch.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'left' },\n },\n name: 'position',\n },\n size: {\n control: { type: 'inline-radio' },\n options: ['small', 'medium', 'large'],\n description: 'Tamanho do switch.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'medium' },\n },\n },\n background: {\n control: { type: 'inline-radio' },\n options: ['dark', 'light'],\n description: 'Background do switch.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'light' },\n },\n },\n color: {\n control: { type: 'select' },\n options: ['primary', 'secondary', 'accent'],\n description: 'Cor do switch.',\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 Switch é alterado. `{ checked: boolean }`',\n table: {\n category: 'Event',\n defaultValue: { summary: '' },\n },\n },\n },\n};\n\nexport const CuraSwitchStory = {\n args: {\n label: 'Switch',\n color: 'accent',\n message: 'Mensagem do switch',\n checked: false,\n size: 'medium',\n disabled: false,\n position: 'left',\n background: 'light',\n ontabindex: 0,\n },\n};\n"]}
1
+ {"version":3,"file":"cura-switch.stories.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-switch/cura-switch.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["const renderCuraSwitch = (label, message, args) => {\n const block = `<cura-switch${args.checked ? `\n checked` : ''}${args.size && args.size !== 'medium' ? `\n size=\"${args.size}\"` : ''}${args.disabled ? `\n disabled` : ''}${args.position && args.position !== 'left' ? `\n position=\"${args.position}\"` : ''}${args.ontabindex !== 0 ? `\n ontabindex=\"${args.ontabindex}\"` : ''}${args.background && args.background !== 'light' ? `\n background=\"${args.background}\"` : ''}${args.color && args.color !== 'accent' ? `\n color=\"${args.color}\"` : ''}${label ? `\n label=\"${label}\"` : ''}${args.textOverflow && args.textOverflow !== 'none' ? `\n text-overflow=\"${args.textOverflow}\"` : ''} \n >\n \n ${message ? ` ${message}` : ''}\n</cura-switch>\n`;\n return `${block}`;\n};\n\nexport default {\n title: 'Componentes/Forms/Switch',\n tags: ['autodocs'],\n render: ({ label, message, ...args }) => {\n return renderCuraSwitch(label, message, args);\n },\n argTypes: {\n label: {\n control: 'text',\n description: 'Texto do label do switch.',\n name: 'label',\n table: {\n category: 'Properties',\n },\n },\n message: {\n control: 'text',\n description: 'Texto adicional de ajuda ou mensagem.',\n name: 'Content',\n table: {\n category: 'Slots',\n },\n },\n checked: {\n control: 'boolean',\n description: 'Define se o switch está checado.',\n table: {\n category: 'States',\n defaultValue: { summary: false },\n },\n },\n disabled: {\n control: 'boolean',\n description: 'Desabilita o switch.',\n table: {\n category: 'States',\n defaultValue: { summary: false },\n },\n },\n ontabindex: {\n control: 'number',\n description: 'Define o tabIndex do switch.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 0 },\n },\n name: 'ontabindex',\n },\n position: {\n control: { type: 'inline-radio' },\n options: ['left', 'right'],\n description: 'Posição do label em relação ao switch.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'left' },\n },\n name: 'position',\n },\n size: {\n control: { type: 'inline-radio' },\n options: ['small', 'medium', 'large'],\n description: 'Tamanho do switch.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'medium' },\n },\n },\n background: {\n control: { type: 'inline-radio' },\n options: ['dark', 'light'],\n description: 'Background do switch.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'light' },\n },\n },\n color: {\n control: { type: 'select' },\n options: ['primary', 'secondary', 'accent'],\n description: 'Cor do switch.',\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 Switch é alterado. `{ checked: boolean }`',\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 CuraSwitchStory = {\n args: {\n label: 'Switch',\n color: 'accent',\n message: 'Mensagem do switch',\n checked: false,\n size: 'medium',\n disabled: false,\n position: 'left',\n background: 'light',\n ontabindex: 0,\n textOverflow: 'none',\n },\n};\n"]}
@@ -16,7 +16,7 @@ export class CuraLoaderBar {
16
16
  this.setProgress();
17
17
  }
18
18
  render() {
19
- return (h(Host, { key: '9516df3511a04244e7c7cdff92dc4fc94f85570f', role: "progressbar", "aria-valuenow": this.progress, "aria-valuemin": 0, "aria-valuemax": 100 }, h("div", { key: '3e1018d32c2c7b4e7deee9d699c01381c559cd19', id: "progress-bar", class: "progress-bar", style: this.styles }, h("span", { key: 'dfafc3cd61c518a6c610d55dae0a1d32a622f15f', class: "progress-bar-fill" }))));
19
+ return (h(Host, { key: '397073d5ad18c49fedee1832e89c15108b693e01', role: "progressbar", "aria-valuenow": this.progress, "aria-valuemin": 0, "aria-valuemax": 100 }, h("div", { key: 'e3c46bc440ee9c54b308679fa8358df4f10c6a9c', id: "progress-bar", class: "progress-bar", style: this.styles }, h("span", { key: '1635e7d72dd6b34455a1891f6a1907f603c91cb7', class: "progress-bar-fill" }))));
20
20
  }
21
21
  setColor() {
22
22
  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) });
@@ -19,7 +19,7 @@ export class CuraLoaderCircle {
19
19
  };
20
20
  }
21
21
  render() {
22
- return (h(Host, { key: '5681023e48d452e968e13c95759900f9b9e2ca04', style: this.getStyles(), role: "progressbar" }, h("svg", { key: '010916114948876e3bfb11f70aeb23ce88e582aa', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '738ba83e424453ee974e694b87d1aef03949a0d2' }, h("circle", { key: 'df9f0d86e2f7806324fb93e04280ffdcc62e5cfe', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), h("path", { key: '7c2e746cd731dce20609f8f55051d540077fb748', 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" })), h("defs", { key: '53a76bde6d4398783b111c9c3f62baa59359b4af' }, h("linearGradient", { key: '2cef8fb23782caf0302c2384c1e68219aab9ddcd', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '7332a418e255cda7691825f4c9ea508614123a75' }), h("stop", { key: '5a33eb0cd2df624a9e14a3878e1dd5d5c25c1cf6', offset: "1" }))))));
22
+ return (h(Host, { key: '09f72e4ec206571c1bfb4333a76da3113f2b386d', style: this.getStyles(), role: "progressbar" }, h("svg", { key: 'd446c093c9ae6c1ebca50e023f2eba592f37eb07', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '8d8bf0fefcb924af391977d672f777face8bf24f' }, h("circle", { key: 'd77eaba65fc61c265b7c495e95dae22d9732732b', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), h("path", { key: 'ab82247a03c327a6eac8f5c0770932e3520aa32c', 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" })), h("defs", { key: '6291d976f90dd54aecaead32f8314e977dad4c3f' }, h("linearGradient", { key: '8f213ed3cb1e55f9aae79f18d43f414b48f45a19', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'c723178770cb0d49746a72fff6c9c8dc7fbb07b4' }), h("stop", { key: '07bb208a3ca3f3b7a317b1e2386dc9cf683fd155', offset: "1" }))))));
23
23
  }
24
24
  static get is() { return "cura-loader-circle"; }
25
25
  static get encapsulation() { return "shadow"; }
@@ -60,7 +60,7 @@ export class CuraDisplay {
60
60
  return tags[`${this.level}`] || tags['default'];
61
61
  }
62
62
  render() {
63
- return (h(Host, { key: '76779076f7d74c1f377ae6e1e4a1dcbb0171da8e', style: this.hostCSSProperties(), role: "heading", "aria-level": this.level }, this.getHeadingTag()));
63
+ return (h(Host, { key: 'd06d5fe13d7e9b52f2c4ba2da4367f5f96b3bd45', style: this.hostCSSProperties(), role: "heading", "aria-level": this.level }, this.getHeadingTag()));
64
64
  }
65
65
  static get is() { return "cura-display"; }
66
66
  static get encapsulation() { return "shadow"; }
@@ -59,7 +59,7 @@ export class CuraHeading {
59
59
  return tags[`${this.level}`] || tags['default'];
60
60
  }
61
61
  render() {
62
- return (h(Host, { key: '8669a9a513c440b3eef8e372e19126005178925f', style: this.hostCSSProperties(), role: "heading", "aria-level": this.level }, this.getHeadingTag()));
62
+ return (h(Host, { key: '2dfeadb768cc139b6899a588bfd7dc69777bca22', style: this.hostCSSProperties(), role: "heading", "aria-level": this.level }, this.getHeadingTag()));
63
63
  }
64
64
  static get is() { return "cura-heading"; }
65
65
  static get encapsulation() { return "shadow"; }
@@ -43,7 +43,7 @@ export class CuraParagraph {
43
43
  return classes;
44
44
  }
45
45
  render() {
46
- return (h(Host, { key: '82a00d925fb71039df0ae6f2e3a5d9cca5303088', style: this.hostCSSProperties() }, h("p", { key: 'f4254d6492ffcd18f5f8fe1c50337b57e70124b7', style: this.styles, class: this.getClasses() }, h("slot", { key: 'a1fde2f7ce4185535c204e06883ce3588e6023c8' }))));
46
+ return (h(Host, { key: '7d8ec17290b3b8eaa731994ff75ac7dedf28fbb9', style: this.hostCSSProperties() }, h("p", { key: '72333398b57ca936d2d971db8ee6d7ba442cebec', style: this.styles, class: this.getClasses() }, h("slot", { key: 'ec65120173b5a1791d4018ca8a8583deb74efdc5' }))));
47
47
  }
48
48
  static get is() { return "cura-paragraph"; }
49
49
  static get encapsulation() { return "shadow"; }
@@ -4,7 +4,7 @@ import { d as defineCustomElement$4 } from './cura-icon2.js';
4
4
  import { d as defineCustomElement$3 } from './cura-label2.js';
5
5
  import { d as defineCustomElement$2 } from './cura-paragraph2.js';
6
6
 
7
- const curaCheckboxCss = "@charset \"UTF-8\";:host{display:block;width:fit-content;box-sizing:border-box}.container{display:flex;align-items:center;flex-direction:row-reverse;gap:var(--gap)}.position.container{flex-direction:row}.position .label-wrapper{justify-content:end}.position .message{text-align:right}.position .label{order:1}.info{display:flex;flex-direction:column}.label-wrapper{display:flex;justify-content:start;align-items:center;gap:5px}.control{width:fit-content;cursor:pointer;position:relative}.checkbox{appearance:none;border:2px solid var(--neutral-base-neutral-medium);border-radius:4px;background:var(--neutral-black-neutral-purewhite);flex:1 0;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;box-sizing:border-box;width:var(--size);height:var(--size);flex:0 0 var(--size)}.icon{position:absolute;display:flex;opacity:0;transition:opacity 0.3s}.checkbox:focus{border-color:var(--info-base) !important}.disabled .checkbox{background:var(--neutral-black-neutral-white);border-color:var(--neutral-darker-neutral-base);cursor:not-allowed}.disabled .checkbox:hover{border-color:var(--neutral-darker-neutral-base) !important}.disabled.checked .checkbox,.disabled.indeterminate .checkbox{background:var(--neutral-black-neutral-white);border-color:var(--neutral-darker-neutral-base)}.disabled.checked .checkbox:hover,.disabled.indeterminate .checkbox:hover{border-color:var(--neutral-base-neutral-white);background:var(--primary-base-neutral-white)}.disabled .checkbox:focus{border-color:var(--neutral-darker-neutral-base) !important}.checked .checkbox{border-color:var(--color-dark);background:var(--color-base)}.checked .checkbox:hover{border-color:var(--color-base) !important;background:var(--color-light)}.indeterminate .checkbox{border-color:var(--color-base);background:var(--color-light)}.indeterminate .checkbox:hover{border-color:var(--color-dark) !important;background:var(--color-base)}.checked .icon,.indeterminate .icon{opacity:1}:not(.disabled):not(.checked):not(.indeterminate) .checkbox:hover{border-color:var(--neutral-purewhite-neutral-dark)}.success.dark .checkbox{background:var(--neutral-black)}.success .checkbox{border-color:var(--success-base);background:var(--success-lighter)}.success .checkbox:hover{border-color:var(--success-base) !important}.success.checked .checkbox{border-color:var(--success-dark-base);background:var(--success-base-lighter)}.success.checked .checkbox:hover{border-color:var(--success-dark-base)}.error.dark .checkbox{background:var(--neutral-black)}.error .checkbox{border-color:var(--error-base);background:var(--error-lighter)}.error .checkbox:hover{border-color:var(--error-base) !important}.error.checked .checkbox{border-color:var(--error-dark-base);background:var(--error-base-lighter)}.error.checked .checkbox:hover{border-color:var(--error-dark-base)}input{appearance:none;-webkit-appearance:none;-moz-appearance:none}";
7
+ const curaCheckboxCss = "@charset \"UTF-8\";:host{display:block;box-sizing:border-box;min-width:0}.container{display:flex;align-items:center;flex-direction:row-reverse;justify-content:start;gap:var(--gap);cursor:pointer}.position.container{flex-direction:row}.position .label-wrapper{justify-content:end}.position .message{text-align:right}.position .label{order:1}.info{display:flex;flex-direction:column}.info.textoverflow-single{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block}.label-wrapper{display:flex;justify-content:start;align-items:center;gap:5px}.label-wrapper.textoverflow-single{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block}.control{width:fit-content;cursor:pointer;position:relative}.checkbox{appearance:none;border:2px solid var(--neutral-base-neutral-medium);border-radius:4px;background:var(--neutral-black-neutral-purewhite);flex:1 0;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;box-sizing:border-box;width:var(--size);height:var(--size);flex:0 0 var(--size)}.icon{position:absolute;display:flex;opacity:0;transition:opacity 0.3s}.checkbox:focus{border-color:var(--info-base) !important}.disabled .checkbox{background:var(--neutral-black-neutral-white);border-color:var(--neutral-darker-neutral-base);cursor:not-allowed}.disabled .checkbox:hover{border-color:var(--neutral-darker-neutral-base) !important}.disabled.checked .checkbox,.disabled.indeterminate .checkbox{background:var(--neutral-black-neutral-white);border-color:var(--neutral-darker-neutral-base)}.disabled.checked .checkbox:hover,.disabled.indeterminate .checkbox:hover{border-color:var(--neutral-base-neutral-white);background:var(--primary-base-neutral-white)}.disabled .checkbox:focus{border-color:var(--neutral-darker-neutral-base) !important}.checked .checkbox{border-color:var(--color-dark);background:var(--color-base)}.checked .checkbox:hover{border-color:var(--color-base) !important;background:var(--color-light)}.indeterminate .checkbox{border-color:var(--color-base);background:var(--color-light)}.indeterminate .checkbox:hover{border-color:var(--color-dark) !important;background:var(--color-base)}.checked .icon,.indeterminate .icon{opacity:1}:not(.disabled):not(.checked):not(.indeterminate) .checkbox:hover{border-color:var(--neutral-purewhite-neutral-dark)}.success.dark .checkbox{background:var(--neutral-black)}.success .checkbox{border-color:var(--success-base);background:var(--success-lighter)}.success .checkbox:hover{border-color:var(--success-base) !important}.success.checked .checkbox{border-color:var(--success-dark-base);background:var(--success-base-lighter)}.success.checked .checkbox:hover{border-color:var(--success-dark-base)}.error.dark .checkbox{background:var(--neutral-black)}.error .checkbox{border-color:var(--error-base);background:var(--error-lighter)}.error .checkbox:hover{border-color:var(--error-base) !important}.error.checked .checkbox{border-color:var(--error-dark-base);background:var(--error-base-lighter)}.error.checked .checkbox:hover{border-color:var(--error-dark-base)}input{appearance:none;-webkit-appearance:none;-moz-appearance:none}";
8
8
  const CuraCheckboxStyle0 = curaCheckboxCss;
9
9
 
10
10
  const CuraCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class CuraCheckbox extends HTMLElement {
@@ -38,6 +38,7 @@ const CuraCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class CuraCheckbox exten
38
38
  this.background = 'light';
39
39
  this.iconColor = 'dark';
40
40
  this.color = 'accent';
41
+ this.textOverflow = 'none';
41
42
  this.styles = {};
42
43
  }
43
44
  sizeHandler() {
@@ -159,7 +160,7 @@ const CuraCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class CuraCheckbox exten
159
160
  return h("cura-icon", { class: "icon", name: iconName, size: iconSize, color: iconColor });
160
161
  }
161
162
  render() {
162
- 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()))));
163
+ return (h(Host, { key: 'e21d722715810f05cf3e466e9be5bfd336612b16', role: "checkbox", "aria-checked": this.checked, "aria-disabled": this.disabled, "aria-required": this.required, "aria-invalid": this.status === 'error' }, h("div", { key: '2395e186f4ec1af0618bc887d0c363b8f48a4ae1', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, h("div", { key: '8448200d67bdc09dddab7c9c2f5da5cb894ff010', class: `info ${this.textOverflow === 'single' ? 'textoverflow-single' : ''}` }, h("div", { key: '8b53feb54371634444781ce5d7bc9b62398ec373', class: `label-wrapper ${this.textOverflow === 'single' ? 'textoverflow-single' : ''}` }, h("cura-label", { key: '554e0e9d53a28d43b308f7f65555bd691958401a', textOverflow: this.textOverflow, class: "label", weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && (h("cura-paragraph", { key: 'b1fb3b2604b9012adb03a582f38eeaa46c144017', lineHeight: "0%", marginBlock: "0", color: "error-base" }, "*", ' '))), h("cura-label", { key: 'abd1d31bc14d10c624833f298b2d34f80a99d412', textOverflow: this.textOverflow, color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: '2ffd772eb62811f918e47dbbd5248339b8bbab8f' }))), h("div", { key: 'ccb93d0dcbc7c4eba7df0c63e7654eb2a9c4bdf1', class: 'checkbox', tabIndex: this.ontabindex }, h("input", { key: '93c5fc6e54828a9691b73a85eff57120aeb39e29', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
163
164
  }
164
165
  static get formAssociated() { return true; }
165
166
  get host() { return this; }
@@ -185,6 +186,7 @@ const CuraCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class CuraCheckbox exten
185
186
  "background": [1],
186
187
  "iconColor": [1, "icon-color"],
187
188
  "color": [1],
189
+ "textOverflow": [513, "text-overflow"],
188
190
  "styles": [32]
189
191
  }, undefined, {
190
192
  "size": ["sizeHandler"],
@@ -1 +1 @@
1
- {"file":"cura-checkbox.js","mappings":"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","names":["CuraCheckbox"],"sources":["src/components/forms/cura-checkbox/cura-checkbox.scss?tag=cura-checkbox&encapsulation=shadow","src/components/forms/cura-checkbox/cura-checkbox.tsx"],"sourcesContent":[":host {\n display: block;\n width: fit-content;\n box-sizing: border-box;\n}\n\n/* Container e Layout */\n.container {\n display: flex;\n align-items: center;\n flex-direction: row-reverse;\n gap: var(--gap);\n}\n\n.position {\n &.container {\n flex-direction: row;\n }\n\n .label-wrapper {\n justify-content: end;\n }\n\n .message {\n text-align: right;\n }\n\n .label {\n order: 1;\n }\n}\n\n.info {\n display: flex;\n flex-direction: column;\n}\n\n.label-wrapper {\n display: flex;\n justify-content: start;\n align-items: center;\n gap: 5px;\n}\n\n/* Control e Checkbox */\n.control {\n width: fit-content;\n cursor: pointer;\n position: relative;\n}\n\n.checkbox {\n appearance: none;\n border: 2px solid var(--neutral-base-neutral-medium);\n border-radius: 4px;\n background: var(--neutral-black-neutral-purewhite);\n flex: 1 0;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n cursor: pointer;\n box-sizing: border-box;\n width: var(--size);\n height: var(--size);\n flex: 0 0 var(--size);\n}\n\n.icon {\n position: absolute;\n display: flex;\n opacity: 0;\n transition: opacity 0.3s;\n}\n\n/* Estados de Foco */\n.checkbox:focus {\n border-color: var(--info-base) !important;\n}\n\n/* Estado Disabled */\n.disabled .checkbox {\n background: var(--neutral-black-neutral-white);\n border-color: var(--neutral-darker-neutral-base);\n cursor: not-allowed;\n\n &:hover {\n border-color: var(--neutral-darker-neutral-base) !important;\n }\n}\n\n.disabled.checked .checkbox,\n.disabled.indeterminate .checkbox {\n background: var(--neutral-black-neutral-white);\n border-color: var(--neutral-darker-neutral-base);\n\n &:hover {\n border-color: var(--neutral-base-neutral-white);\n background: var(--primary-base-neutral-white);\n }\n}\n\n.disabled .checkbox:focus {\n border-color: var(--neutral-darker-neutral-base) !important;\n}\n\n/* Estado Checked */\n.checked .checkbox {\n border-color: var(--color-dark);\n background: var(--color-base);\n\n &:hover {\n border-color: var(--color-base) !important;\n background: var(--color-light);\n }\n}\n\n/* Estado Indeterminate */\n.indeterminate .checkbox {\n border-color: var(--color-base);\n background: var(--color-light);\n\n &:hover {\n border-color: var(--color-dark) !important;\n background: var(--color-base);\n }\n}\n\n.checked .icon,\n.indeterminate .icon {\n opacity: 1;\n}\n\n/* Hover para não disabled, default, checked, indeterminate */\n:not(.disabled):not(.checked):not(.indeterminate) .checkbox:hover {\n border-color: var(--neutral-purewhite-neutral-dark);\n}\n\n/* Estado Success */\n\n.success.dark .checkbox {\n background: var(--neutral-black) ;\n}\n\n.success .checkbox {\n border-color: var(--success-base);\n background: var(--success-lighter);\n\n &:hover {\n border-color: var(--success-base) !important;\n }\n}\n\n.success.checked .checkbox {\n border-color: var(--success-dark-base);\n background: var(--success-base-lighter);\n\n &:hover {\n border-color: var(--success-dark-base);\n }\n}\n\n/* Estado Error */\n\n.error.dark .checkbox {\n background: var(--neutral-black) ;\n}\n\n.error .checkbox {\n border-color: var(--error-base);\n background: var(--error-lighter);\n\n &:hover {\n border-color: var(--error-base) !important;\n }\n}\n\n.error.checked .checkbox {\n border-color: var(--error-dark-base);\n background: var(--error-base-lighter);\n\n &:hover {\n border-color: var(--error-dark-base);\n }\n}\n\n/* Input */\ninput {\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n}\n","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"],"version":3}
1
+ {"file":"cura-checkbox.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,ykGAAykG,CAAC;AAClmG,2BAAe,eAAe;;MCQjBA,cAAY;;;;;;;QA+EvB,qBAAgB,GAAG,MAAM,IAAI,CAAC,UAAU,KAAK,MAAM,CAAC;QAEpD,oBAAe,GAAG,MAAM,IAAI,CAAC,SAAS,KAAK,MAAM,CAAC;QAyFlD,gBAAW,GAAG;YACZ,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAC3B,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;YAC7B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACxC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,aAAa,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;SACrG,CAAC;uBA5KyD,KAAK;6BAKC,KAAK;sBAKY,SAAS;wBAI9C,KAAK;wBAIL,KAAK;;0BAQJ,CAAC;wBAKO,MAAM;;;oBAaE,QAAQ;0BAK/B,OAAO;yBAKR,MAAM;qBAI5B,QAAQ;4BAM4C,MAAM;sBAExD,EAAE;;IAapB,WAAW;QACT,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,QAAQ,EAAE,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,IAAI,EAC3C,OAAO,EAAE,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,GAC1C,CAAC;KACH;;;;IAOD,SAAS;QACP,MAAM,MAAM,GAAG;YACb,EAAE,IAAI,EAAE,cAAc,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,OAAO,EAAE;YAC1D,EAAE,IAAI,EAAE,iBAAiB,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,UAAU,EAAE;YAChE,EAAE,IAAI,EAAE,eAAe,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,QAAQ,EAAE;YAC5D,EAAE,IAAI,EAAE,cAAc,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,OAAO,EAAE;YAC1D,EAAE,IAAI,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,EAAE;YAChD,EAAE,IAAI,EAAE,cAAc,EAAE,UAAU,EAAE,YAAY,EAAE;YAClD,EAAE,IAAI,EAAE,mBAAmB,EAAE,UAAU,EAAE,iBAAiB,EAAE;YAC5D,EAAE,IAAI,EAAE,gBAAgB,EAAE,UAAU,EAAE,cAAc,EAAE;YACtD,EAAE,IAAI,EAAE,gBAAgB,EAAE,UAAU,EAAE,cAAc,EAAE;YACtD,EAAE,IAAI,EAAE,iBAAiB,EAAE,UAAU,EAAE,eAAe,EAAE;YACxD,EAAE,IAAI,EAAE,iBAAiB,EAAE,UAAU,EAAE,eAAe,EAAE;YACxD,EAAE,IAAI,EAAE,8BAA8B,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,GAAG,cAAc,GAAG,eAAe,EAAE;YAChH,EAAE,IAAI,EAAE,+BAA+B,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,GAAG,cAAc,GAAG,gBAAgB,EAAE;YAClH,EAAE,IAAI,EAAE,mCAAmC,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,GAAG,eAAe,GAAG,mBAAmB,EAAE;YAC1H,EAAE,IAAI,EAAE,+BAA+B,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,GAAG,eAAe,GAAG,eAAe,EAAE;YAClH,EAAE,IAAI,EAAE,+BAA+B,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,GAAG,gBAAgB,GAAG,cAAc,EAAE;YAClH,EAAE,IAAI,EAAE,6BAA6B,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,GAAG,cAAc,GAAG,cAAc,EAAE;YAC9G,EAAE,IAAI,EAAE,kCAAkC,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,GAAG,mBAAmB,GAAG,cAAc,EAAE;YACxH,EAAE,IAAI,EAAE,+BAA+B,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,GAAG,cAAc,GAAG,gBAAgB,EAAE;YAClH,EAAE,IAAI,EAAE,wBAAwB,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,GAAG,cAAc,GAAG,iBAAiB,EAAE;YAC5G,EAAE,IAAI,EAAE,qBAAqB,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,GAAG,cAAc,GAAG,cAAc,EAAE;YACtG,EAAE,IAAI,EAAE,sBAAsB,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,GAAG,YAAY,GAAG,eAAe,EAAE;YACtG,EAAE,IAAI,EAAE,mBAAmB,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,GAAG,YAAY,GAAG,YAAY,EAAE;SACjG,CAAC;QAEF,MAAM,CAAC,OAAO,CAAC,KAAK;YAClB,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;SAClF,CAAC,CAAC;QACH,IAAI,CAAC,MAAM,qBAAQ,IAAI,CAAC,MAAM,CAAE,CAAC;KAClC;IAED,iBAAiB;QACf,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;;;;IAKD,sBAAsB,CAAC,IAA2B;QAChD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC;KAC7B;;;;IAKD,wBAAwB,CAAC,KAAkE;QACzF,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;QACzB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC;QACzC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACzC;;;;IAKD,iBAAiB;QACf,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAC/B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACzC;;;;IAKD,oBAAoB,CAAC,QAAiB;QACpC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;KAC1B;IAWD,UAAU;QACR,MAAM,OAAO,GAAG,EAAE,CAAC;QACnB,OAAO,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;QAC5B,OAAO,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC;QAClC,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;QACpC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC;QAChC,OAAO,CAAC,eAAe,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC;QAC9C,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,QAAQ,KAAK,OAAO,CAAC;QAChD,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;QAE5B,OAAO,OAAO,CAAC;KAChB;;;;;IAQD,WAAW,CAAC,IAAkC;QAC5C,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO,IAAI,CAAC,gBAAgB,EAAE,GAAG,cAAc,GAAG,cAAc,CAAC;QAEpF,MAAM,YAAY,GAAG;YACnB,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;gBACpB,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,GAAG,iBAAiB,GAAG,gBAAgB;gBACrE,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,GAAG,cAAc,GAAG,cAAc;aACnE;YACD,KAAK,EAAE;gBACL,IAAI,EAAE,YAAY;gBAClB,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,GAAG,eAAe,GAAG,gBAAgB;gBACnE,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,GAAG,YAAY,GAAG,YAAY;aAC/D;YACD,OAAO,EAAE;gBACP,IAAI,EAAE,IAAI,CAAC,eAAe,EAAE,GAAG,eAAe,GAAG,mBAAmB;gBACpE,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,GAAG,eAAe,GAAG,eAAe;gBAClE,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,GAAG,iBAAiB,GAAG,cAAc;aACtE;SACF,CAAC;QAEF,OAAO,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC;KACxC;;;;IAKD,OAAO;QACL,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,GAAG,OAAO,GAAG,OAAO,CAAC;QACxD,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QAC3C,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,EAAE,GAAG,OAAO,CAAC;QAEtD,OAAO,iBAAW,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,GAAc,CAAC;KAC/F;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,kBAAe,IAAI,CAAC,OAAO,mBAAiB,IAAI,CAAC,QAAQ,mBAAiB,IAAI,CAAC,QAAQ,kBAAgB,IAAI,CAAC,MAAM,KAAK,OAAO,IACjJ,4DAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,IAC1E,4DAAK,KAAK,EAAE,QAAQ,IAAI,CAAC,YAAY,KAAK,QAAQ,GAAG,qBAAqB,GAAG,EAAE,EAAE,IAC/E,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,YAAY,KAAK,QAAQ,GAAG,qBAAqB,GAAG,EAAE,EAAE,IACxF,mEAAY,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,KAAK,EAAC,OAAO,EAAC,MAAM,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,QAAQ,GAAG,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,IACzJ,IAAI,CAAC,KAAK,CACA,EACZ,IAAI,CAAC,QAAQ,KACZ,uEAAgB,UAAU,EAAC,IAAI,EAAC,WAAW,EAAC,GAAG,EAAC,KAAK,EAAC,YAAY,SAC9D,GAAG,CACU,CAClB,CACG,EACN,mEAAY,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,SAAS,IAC5G,8DAAa,CACF,CACT,EACN,4DAAK,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,CAAC,UAAU,IAC/C,8DACE,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,aAAa,EAAE,IAAI,CAAC,aAAa,GACjC,EACD,IAAI,CAAC,OAAO,EAAE,CACX,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CuraCheckbox"],"sources":["src/components/forms/cura-checkbox/cura-checkbox.scss?tag=cura-checkbox&encapsulation=shadow","src/components/forms/cura-checkbox/cura-checkbox.tsx"],"sourcesContent":["@import '../../../scss/mixins/text.scss';\n\n:host {\n display: block;\n box-sizing: border-box;\n\n min-width: 0;\n}\n\n/* Container e Layout */\n.container {\n display: flex;\n align-items: center;\n flex-direction: row-reverse;\n justify-content: start;\n gap: var(--gap);\n\n cursor: pointer;\n}\n\n.position {\n &.container {\n flex-direction: row;\n }\n\n .label-wrapper {\n justify-content: end;\n }\n\n .message {\n text-align: right;\n }\n\n .label {\n order: 1;\n }\n}\n\n.info {\n display: flex;\n flex-direction: column;\n\n &.textoverflow-single {\n @include truncate-single();\n }\n}\n\n.label-wrapper {\n display: flex;\n justify-content: start;\n align-items: center;\n gap: 5px;\n\n &.textoverflow-single {\n @include truncate-single();\n }\n}\n\n/* Control e Checkbox */\n.control {\n width: fit-content;\n cursor: pointer;\n position: relative;\n}\n\n.checkbox {\n appearance: none;\n border: 2px solid var(--neutral-base-neutral-medium);\n border-radius: 4px;\n background: var(--neutral-black-neutral-purewhite);\n flex: 1 0;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n cursor: pointer;\n box-sizing: border-box;\n width: var(--size);\n height: var(--size);\n flex: 0 0 var(--size);\n}\n\n.icon {\n position: absolute;\n display: flex;\n opacity: 0;\n transition: opacity 0.3s;\n}\n\n/* Estados de Foco */\n.checkbox:focus {\n border-color: var(--info-base) !important;\n}\n\n/* Estado Disabled */\n.disabled .checkbox {\n background: var(--neutral-black-neutral-white);\n border-color: var(--neutral-darker-neutral-base);\n cursor: not-allowed;\n\n &:hover {\n border-color: var(--neutral-darker-neutral-base) !important;\n }\n}\n\n.disabled.checked .checkbox,\n.disabled.indeterminate .checkbox {\n background: var(--neutral-black-neutral-white);\n border-color: var(--neutral-darker-neutral-base);\n\n &:hover {\n border-color: var(--neutral-base-neutral-white);\n background: var(--primary-base-neutral-white);\n }\n}\n\n.disabled .checkbox:focus {\n border-color: var(--neutral-darker-neutral-base) !important;\n}\n\n/* Estado Checked */\n.checked .checkbox {\n border-color: var(--color-dark);\n background: var(--color-base);\n\n &:hover {\n border-color: var(--color-base) !important;\n background: var(--color-light);\n }\n}\n\n/* Estado Indeterminate */\n.indeterminate .checkbox {\n border-color: var(--color-base);\n background: var(--color-light);\n\n &:hover {\n border-color: var(--color-dark) !important;\n background: var(--color-base);\n }\n}\n\n.checked .icon,\n.indeterminate .icon {\n opacity: 1;\n}\n\n/* Hover para não disabled, default, checked, indeterminate */\n:not(.disabled):not(.checked):not(.indeterminate) .checkbox:hover {\n border-color: var(--neutral-purewhite-neutral-dark);\n}\n\n/* Estado Success */\n\n.success.dark .checkbox {\n background: var(--neutral-black);\n}\n\n.success .checkbox {\n border-color: var(--success-base);\n background: var(--success-lighter);\n\n &:hover {\n border-color: var(--success-base) !important;\n }\n}\n\n.success.checked .checkbox {\n border-color: var(--success-dark-base);\n background: var(--success-base-lighter);\n\n &:hover {\n border-color: var(--success-dark-base);\n }\n}\n\n/* Estado Error */\n\n.error.dark .checkbox {\n background: var(--neutral-black);\n}\n\n.error .checkbox {\n border-color: var(--error-base);\n background: var(--error-lighter);\n\n &:hover {\n border-color: var(--error-base) !important;\n }\n}\n\n.error.checked .checkbox {\n border-color: var(--error-dark-base);\n background: var(--error-base-lighter);\n\n &:hover {\n border-color: var(--error-dark-base);\n }\n}\n\n/* Input */\ninput {\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n}\n","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 * Apply text-overflow ellipsis definitions.\n * Default to none\n */\n @Prop({ reflect: true }) textOverflow: '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 ${this.textOverflow === 'single' ? 'textoverflow-single' : ''}`}>\n <div class={`label-wrapper ${this.textOverflow === 'single' ? 'textoverflow-single' : ''}`}>\n <cura-label textOverflow={this.textOverflow} class=\"label\" weight=\"bold\" size={this.size === 'large' ? 'medium' : 'xsmall'} color={this.assignColor('label')}>\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.textOverflow} 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"],"version":3}
@@ -67,7 +67,7 @@ const CuraDisplay$1 = /*@__PURE__*/ proxyCustomElement(class CuraDisplay extends
67
67
  return tags[`${this.level}`] || tags['default'];
68
68
  }
69
69
  render() {
70
- return (h(Host, { key: '76779076f7d74c1f377ae6e1e4a1dcbb0171da8e', style: this.hostCSSProperties(), role: "heading", "aria-level": this.level }, this.getHeadingTag()));
70
+ return (h(Host, { key: 'd06d5fe13d7e9b52f2c4ba2da4367f5f96b3bd45', style: this.hostCSSProperties(), role: "heading", "aria-level": this.level }, this.getHeadingTag()));
71
71
  }
72
72
  get host() { return this; }
73
73
  static get watchers() { return {
@@ -66,7 +66,7 @@ const CuraHeading = /*@__PURE__*/ proxyCustomElement(class CuraHeading extends H
66
66
  return tags[`${this.level}`] || tags['default'];
67
67
  }
68
68
  render() {
69
- return (h(Host, { key: '8669a9a513c440b3eef8e372e19126005178925f', style: this.hostCSSProperties(), role: "heading", "aria-level": this.level }, this.getHeadingTag()));
69
+ return (h(Host, { key: '2dfeadb768cc139b6899a588bfd7dc69777bca22', style: this.hostCSSProperties(), role: "heading", "aria-level": this.level }, this.getHeadingTag()));
70
70
  }
71
71
  get host() { return this; }
72
72
  static get style() { return CuraHeadingStyle0; }