@govbr-ds/webcomponents 2.0.0-next.15 → 2.0.0-next.16

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 (163) hide show
  1. package/dist/cjs/br-avatar.cjs.entry.js +2 -2
  2. package/dist/cjs/br-avatar.cjs.entry.js.map +1 -1
  3. package/dist/cjs/br-button_2.cjs.entry.js +3 -3
  4. package/dist/cjs/br-button_2.cjs.entry.js.map +1 -1
  5. package/dist/cjs/br-checkbox.cjs.entry.js +2 -2
  6. package/dist/cjs/br-checkbox.cjs.entry.js.map +1 -1
  7. package/dist/cjs/br-dropdown.cjs.entry.js +2 -2
  8. package/dist/cjs/br-dropdown.cjs.entry.js.map +1 -1
  9. package/dist/cjs/br-input.cjs.entry.js +2 -2
  10. package/dist/cjs/br-input.cjs.entry.js.map +1 -1
  11. package/dist/cjs/br-item.cjs.entry.js +2 -2
  12. package/dist/cjs/br-item.cjs.entry.js.map +1 -1
  13. package/dist/cjs/br-list.cjs.entry.js +2 -2
  14. package/dist/cjs/br-list.cjs.entry.js.map +1 -1
  15. package/dist/cjs/br-loading.cjs.entry.js +2 -2
  16. package/dist/cjs/br-loading.cjs.entry.js.map +1 -1
  17. package/dist/cjs/br-message.cjs.entry.js +2 -2
  18. package/dist/cjs/br-message.cjs.entry.js.map +1 -1
  19. package/dist/cjs/br-radio.cjs.entry.js +41 -37
  20. package/dist/cjs/br-radio.cjs.entry.js.map +1 -1
  21. package/dist/cjs/br-switch.cjs.entry.js +3 -3
  22. package/dist/cjs/br-switch.cjs.entry.js.map +1 -1
  23. package/dist/cjs/br-textarea.cjs.entry.js +3 -3
  24. package/dist/cjs/br-textarea.cjs.entry.js.map +1 -1
  25. package/dist/cjs/{index-fb4e9eaf.js → index-a1cc4aa4.js} +3 -2
  26. package/dist/cjs/index-a1cc4aa4.js.map +1 -0
  27. package/dist/cjs/loader.cjs.js +2 -2
  28. package/dist/cjs/webcomponents.cjs.js +2 -2
  29. package/dist/collection/components/avatar/avatar.css +0 -18
  30. package/dist/collection/components/button/button.css +7 -18
  31. package/dist/collection/components/checkbox/checkbox.css +0 -18
  32. package/dist/collection/components/dropdown/dropdown.css +0 -18
  33. package/dist/collection/components/icon/icon.css +0 -18
  34. package/dist/collection/components/input/input.css +0 -18
  35. package/dist/collection/components/item/item.css +0 -18
  36. package/dist/collection/components/list/list.css +0 -18
  37. package/dist/collection/components/loading/loading.css +7 -18
  38. package/dist/collection/components/message/message.css +0 -18
  39. package/dist/collection/components/radio/radio.css +0 -18
  40. package/dist/collection/components/radio/radio.js +43 -62
  41. package/dist/collection/components/radio/radio.js.map +1 -1
  42. package/dist/collection/components/switch/switch.css +0 -18
  43. package/dist/collection/components/switch/switch.js +1 -1
  44. package/dist/collection/components/textarea/textarea.css +0 -18
  45. package/dist/collection/components/textarea/textarea.js +1 -1
  46. package/dist/collection/components/textarea/textarea.js.map +1 -1
  47. package/dist/collection/pages/radio/radio.js +1 -1
  48. package/dist/collection/scripts/menu.js +1 -1
  49. package/dist/collection/utils/unique-id-generator.js +9 -0
  50. package/dist/collection/utils/unique-id-generator.js.map +1 -0
  51. package/dist/components/br-avatar.js +3 -3
  52. package/dist/components/br-avatar.js.map +1 -1
  53. package/dist/components/br-button.js +1 -1
  54. package/dist/components/br-checkbox.js +2 -2
  55. package/dist/components/br-checkbox.js.map +1 -1
  56. package/dist/components/br-dropdown.js +2 -2
  57. package/dist/components/br-dropdown.js.map +1 -1
  58. package/dist/components/br-icon.js +1 -1
  59. package/dist/components/br-input.js +4 -4
  60. package/dist/components/br-input.js.map +1 -1
  61. package/dist/components/br-item.js +2 -2
  62. package/dist/components/br-item.js.map +1 -1
  63. package/dist/components/br-list.js +2 -2
  64. package/dist/components/br-list.js.map +1 -1
  65. package/dist/components/br-loading.js +2 -2
  66. package/dist/components/br-loading.js.map +1 -1
  67. package/dist/components/br-message.js +4 -4
  68. package/dist/components/br-message.js.map +1 -1
  69. package/dist/components/br-radio.js +45 -40
  70. package/dist/components/br-radio.js.map +1 -1
  71. package/dist/components/br-switch.js +3 -3
  72. package/dist/components/br-switch.js.map +1 -1
  73. package/dist/components/br-textarea.js +3 -3
  74. package/dist/components/br-textarea.js.map +1 -1
  75. package/dist/components/index.js +1 -1
  76. package/dist/components/{p-af0dfebc.js → p-215ac56c.js} +3 -3
  77. package/dist/components/{p-af0dfebc.js.map → p-215ac56c.js.map} +1 -1
  78. package/dist/components/{p-698e7a18.js → p-62a01df5.js} +3 -2
  79. package/dist/{esm/index-c7037515.js.map → components/p-62a01df5.js.map} +1 -1
  80. package/dist/components/p-6eb1a607.js +138 -0
  81. package/dist/components/{p-baa2948a.js.map → p-6eb1a607.js.map} +1 -1
  82. package/dist/esm/br-avatar.entry.js +2 -2
  83. package/dist/esm/br-avatar.entry.js.map +1 -1
  84. package/dist/esm/br-button_2.entry.js +3 -3
  85. package/dist/esm/br-button_2.entry.js.map +1 -1
  86. package/dist/esm/br-checkbox.entry.js +2 -2
  87. package/dist/esm/br-checkbox.entry.js.map +1 -1
  88. package/dist/esm/br-dropdown.entry.js +2 -2
  89. package/dist/esm/br-dropdown.entry.js.map +1 -1
  90. package/dist/esm/br-input.entry.js +2 -2
  91. package/dist/esm/br-input.entry.js.map +1 -1
  92. package/dist/esm/br-item.entry.js +2 -2
  93. package/dist/esm/br-item.entry.js.map +1 -1
  94. package/dist/esm/br-list.entry.js +2 -2
  95. package/dist/esm/br-list.entry.js.map +1 -1
  96. package/dist/esm/br-loading.entry.js +2 -2
  97. package/dist/esm/br-loading.entry.js.map +1 -1
  98. package/dist/esm/br-message.entry.js +2 -2
  99. package/dist/esm/br-message.entry.js.map +1 -1
  100. package/dist/esm/br-radio.entry.js +41 -37
  101. package/dist/esm/br-radio.entry.js.map +1 -1
  102. package/dist/esm/br-switch.entry.js +3 -3
  103. package/dist/esm/br-switch.entry.js.map +1 -1
  104. package/dist/esm/br-textarea.entry.js +3 -3
  105. package/dist/esm/br-textarea.entry.js.map +1 -1
  106. package/dist/esm/{index-c7037515.js → index-cad6e6c3.js} +3 -2
  107. package/dist/esm/index-cad6e6c3.js.map +1 -0
  108. package/dist/esm/loader.js +3 -3
  109. package/dist/esm/webcomponents.js +3 -3
  110. package/dist/types/components/radio/radio.d.ts +18 -23
  111. package/dist/types/components/textarea/textarea.d.ts +2 -2
  112. package/dist/types/components.d.ts +4 -12
  113. package/dist/types/utils/unique-id-generator.d.ts +1 -0
  114. package/dist/webcomponents/p-35f43cf0.entry.js +2 -0
  115. package/dist/webcomponents/{p-4645bc22.entry.js.map → p-35f43cf0.entry.js.map} +1 -1
  116. package/dist/webcomponents/p-3bbf9a07.entry.js +2 -0
  117. package/dist/webcomponents/{p-2bc17aba.entry.js.map → p-3bbf9a07.entry.js.map} +1 -1
  118. package/dist/webcomponents/p-70216f4a.entry.js +13 -0
  119. package/dist/webcomponents/{p-2ff6ee7a.entry.js.map → p-70216f4a.entry.js.map} +1 -1
  120. package/dist/webcomponents/p-7ef2814e.entry.js +2 -0
  121. package/dist/webcomponents/{p-f66d6a1e.entry.js.map → p-7ef2814e.entry.js.map} +1 -1
  122. package/dist/webcomponents/p-8030cff4.entry.js +2 -0
  123. package/dist/webcomponents/p-8030cff4.entry.js.map +1 -0
  124. package/dist/webcomponents/p-80726c0b.entry.js +2 -0
  125. package/dist/webcomponents/p-80726c0b.entry.js.map +1 -0
  126. package/dist/webcomponents/{p-6849daee.js → p-8dfeb926.js} +3 -3
  127. package/dist/webcomponents/p-8dfeb926.js.map +1 -0
  128. package/dist/webcomponents/p-a80407ae.entry.js +2 -0
  129. package/dist/webcomponents/{p-4e1a6b1e.entry.js.map → p-a80407ae.entry.js.map} +1 -1
  130. package/dist/webcomponents/p-a9efcaff.entry.js +2 -0
  131. package/dist/webcomponents/{p-ffbd85fd.entry.js.map → p-a9efcaff.entry.js.map} +1 -1
  132. package/dist/webcomponents/p-c8bf074f.entry.js +2 -0
  133. package/dist/webcomponents/{p-e1d4a515.entry.js.map → p-c8bf074f.entry.js.map} +1 -1
  134. package/dist/webcomponents/p-d3bb77aa.entry.js +2 -0
  135. package/dist/webcomponents/{p-128b4b58.entry.js.map → p-d3bb77aa.entry.js.map} +1 -1
  136. package/dist/webcomponents/p-e24e46e9.entry.js +2 -0
  137. package/dist/webcomponents/{p-53a18892.entry.js.map → p-e24e46e9.entry.js.map} +1 -1
  138. package/dist/webcomponents/p-ee647c4a.entry.js +2 -0
  139. package/dist/webcomponents/{p-6783eb4f.entry.js.map → p-ee647c4a.entry.js.map} +1 -1
  140. package/dist/webcomponents/webcomponents.esm.js +1 -1
  141. package/dist/webcomponents/webcomponents.esm.js.map +1 -1
  142. package/hydrate/index.js +59 -55
  143. package/hydrate/index.mjs +59 -55
  144. package/package.json +1 -1
  145. package/vscode-data.json +1 -5
  146. package/dist/cjs/index-fb4e9eaf.js.map +0 -1
  147. package/dist/components/p-698e7a18.js.map +0 -1
  148. package/dist/components/p-baa2948a.js +0 -138
  149. package/dist/webcomponents/p-0f8df882.entry.js +0 -2
  150. package/dist/webcomponents/p-0f8df882.entry.js.map +0 -1
  151. package/dist/webcomponents/p-128b4b58.entry.js +0 -2
  152. package/dist/webcomponents/p-2bc17aba.entry.js +0 -2
  153. package/dist/webcomponents/p-2ff6ee7a.entry.js +0 -13
  154. package/dist/webcomponents/p-4645bc22.entry.js +0 -2
  155. package/dist/webcomponents/p-4e1a6b1e.entry.js +0 -2
  156. package/dist/webcomponents/p-53a18892.entry.js +0 -2
  157. package/dist/webcomponents/p-6783eb4f.entry.js +0 -2
  158. package/dist/webcomponents/p-6849daee.js.map +0 -1
  159. package/dist/webcomponents/p-e1d4a515.entry.js +0 -2
  160. package/dist/webcomponents/p-e74737f9.entry.js +0 -2
  161. package/dist/webcomponents/p-e74737f9.entry.js.map +0 -1
  162. package/dist/webcomponents/p-f66d6a1e.entry.js +0 -2
  163. package/dist/webcomponents/p-ffbd85fd.entry.js +0 -2
@@ -24,11 +24,6 @@ strong {
24
24
  font-weight: bolder;
25
25
  }
26
26
 
27
- code {
28
- font-family: monospace;
29
- font-size: 1em;
30
- }
31
-
32
27
  small {
33
28
  font-size: 80%;
34
29
  }
@@ -352,19 +347,6 @@ textarea,
352
347
  margin-bottom: var(--spacing-scale-half);
353
348
  }
354
349
 
355
- code,
356
- .code {
357
- background: var(--gray-5);
358
- border-radius: 4px;
359
- color: var(--gray-80);
360
- display: inline-block;
361
- font-family: monospace;
362
- font-size: var(--font-size-scale-base);
363
- font-weight: var(--font-weight-medium);
364
- line-height: var(--font-line-height-low);
365
- padding: var(--spacing-scale-half);
366
- }
367
-
368
350
  .text-pure-0 {
369
351
  color: var(--pure-0) !important;
370
352
  }
@@ -714,6 +696,13 @@ a.br-button {
714
696
  animation: fill ease-in-out 2s;
715
697
  transform: rotate(9deg);
716
698
  }
699
+ .loading[data-progress="8"] .br-loading-mask.full,
700
+ .loading[data-progress="8"] .br-loading-fill,
701
+ .br-loading[data-progress="8"] .br-loading-mask.full,
702
+ .br-loading[data-progress="8"] .br-loading-fill {
703
+ animation: fill ease-in-out 2s;
704
+ transform: rotate(14.4deg);
705
+ }
717
706
  .loading[data-progress="10"] .br-loading-mask.full,
718
707
  .loading[data-progress="10"] .br-loading-fill,
719
708
  .br-loading[data-progress="10"] .br-loading-mask.full,
@@ -24,11 +24,6 @@ strong {
24
24
  font-weight: bolder;
25
25
  }
26
26
 
27
- code {
28
- font-family: monospace;
29
- font-size: 1em;
30
- }
31
-
32
27
  small {
33
28
  font-size: 80%;
34
29
  }
@@ -352,19 +347,6 @@ textarea,
352
347
  margin-bottom: var(--spacing-scale-half);
353
348
  }
354
349
 
355
- code,
356
- .code {
357
- background: var(--gray-5);
358
- border-radius: 4px;
359
- color: var(--gray-80);
360
- display: inline-block;
361
- font-family: monospace;
362
- font-size: var(--font-size-scale-base);
363
- font-weight: var(--font-weight-medium);
364
- line-height: var(--font-line-height-low);
365
- padding: var(--spacing-scale-half);
366
- }
367
-
368
350
  .text-pure-0 {
369
351
  color: var(--pure-0) !important;
370
352
  }
@@ -24,11 +24,6 @@ strong {
24
24
  font-weight: bolder;
25
25
  }
26
26
 
27
- code {
28
- font-family: monospace;
29
- font-size: 1em;
30
- }
31
-
32
27
  small {
33
28
  font-size: 80%;
34
29
  }
@@ -352,19 +347,6 @@ textarea,
352
347
  margin-bottom: var(--spacing-scale-half);
353
348
  }
354
349
 
355
- code,
356
- .code {
357
- background: var(--gray-5);
358
- border-radius: 4px;
359
- color: var(--gray-80);
360
- display: inline-block;
361
- font-family: monospace;
362
- font-size: var(--font-size-scale-base);
363
- font-weight: var(--font-weight-medium);
364
- line-height: var(--font-line-height-low);
365
- padding: var(--spacing-scale-half);
366
- }
367
-
368
350
  .text-pure-0 {
369
351
  color: var(--pure-0) !important;
370
352
  }
@@ -24,11 +24,6 @@ strong {
24
24
  font-weight: bolder;
25
25
  }
26
26
 
27
- code {
28
- font-family: monospace;
29
- font-size: 1em;
30
- }
31
-
32
27
  small {
33
28
  font-size: 80%;
34
29
  }
@@ -352,19 +347,6 @@ textarea,
352
347
  margin-bottom: var(--spacing-scale-half);
353
348
  }
354
349
 
355
- code,
356
- .code {
357
- background: var(--gray-5);
358
- border-radius: 4px;
359
- color: var(--gray-80);
360
- display: inline-block;
361
- font-family: monospace;
362
- font-size: var(--font-size-scale-base);
363
- font-weight: var(--font-weight-medium);
364
- line-height: var(--font-line-height-low);
365
- padding: var(--spacing-scale-half);
366
- }
367
-
368
350
  .text-pure-0 {
369
351
  color: var(--pure-0) !important;
370
352
  }
@@ -24,11 +24,6 @@ strong {
24
24
  font-weight: bolder;
25
25
  }
26
26
 
27
- code {
28
- font-family: monospace;
29
- font-size: 1em;
30
- }
31
-
32
27
  small {
33
28
  font-size: 80%;
34
29
  }
@@ -352,19 +347,6 @@ textarea,
352
347
  margin-bottom: var(--spacing-scale-half);
353
348
  }
354
349
 
355
- code,
356
- .code {
357
- background: var(--gray-5);
358
- border-radius: 4px;
359
- color: var(--gray-80);
360
- display: inline-block;
361
- font-family: monospace;
362
- font-size: var(--font-size-scale-base);
363
- font-weight: var(--font-weight-medium);
364
- line-height: var(--font-line-height-low);
365
- padding: var(--spacing-scale-half);
366
- }
367
-
368
350
  .text-pure-0 {
369
351
  color: var(--pure-0) !important;
370
352
  }
@@ -24,11 +24,6 @@ strong {
24
24
  font-weight: bolder;
25
25
  }
26
26
 
27
- code {
28
- font-family: monospace;
29
- font-size: 1em;
30
- }
31
-
32
27
  small {
33
28
  font-size: 80%;
34
29
  }
@@ -352,19 +347,6 @@ textarea,
352
347
  margin-bottom: var(--spacing-scale-half);
353
348
  }
354
349
 
355
- code,
356
- .code {
357
- background: var(--gray-5);
358
- border-radius: 4px;
359
- color: var(--gray-80);
360
- display: inline-block;
361
- font-family: monospace;
362
- font-size: var(--font-size-scale-base);
363
- font-weight: var(--font-weight-medium);
364
- line-height: var(--font-line-height-low);
365
- padding: var(--spacing-scale-half);
366
- }
367
-
368
350
  .text-pure-0 {
369
351
  color: var(--pure-0) !important;
370
352
  }
@@ -24,11 +24,6 @@ strong {
24
24
  font-weight: bolder;
25
25
  }
26
26
 
27
- code {
28
- font-family: monospace;
29
- font-size: 1em;
30
- }
31
-
32
27
  small {
33
28
  font-size: 80%;
34
29
  }
@@ -352,19 +347,6 @@ textarea,
352
347
  margin-bottom: var(--spacing-scale-half);
353
348
  }
354
349
 
355
- code,
356
- .code {
357
- background: var(--gray-5);
358
- border-radius: 4px;
359
- color: var(--gray-80);
360
- display: inline-block;
361
- font-family: monospace;
362
- font-size: var(--font-size-scale-base);
363
- font-weight: var(--font-weight-medium);
364
- line-height: var(--font-line-height-low);
365
- padding: var(--spacing-scale-half);
366
- }
367
-
368
350
  .text-pure-0 {
369
351
  color: var(--pure-0) !important;
370
352
  }
@@ -24,11 +24,6 @@ strong {
24
24
  font-weight: bolder;
25
25
  }
26
26
 
27
- code {
28
- font-family: monospace;
29
- font-size: 1em;
30
- }
31
-
32
27
  small {
33
28
  font-size: 80%;
34
29
  }
@@ -352,19 +347,6 @@ textarea,
352
347
  margin-bottom: var(--spacing-scale-half);
353
348
  }
354
349
 
355
- code,
356
- .code {
357
- background: var(--gray-5);
358
- border-radius: 4px;
359
- color: var(--gray-80);
360
- display: inline-block;
361
- font-family: monospace;
362
- font-size: var(--font-size-scale-base);
363
- font-weight: var(--font-weight-medium);
364
- line-height: var(--font-line-height-low);
365
- padding: var(--spacing-scale-half);
366
- }
367
-
368
350
  .text-pure-0 {
369
351
  color: var(--pure-0) !important;
370
352
  }
@@ -569,6 +551,13 @@ code,
569
551
  animation: fill ease-in-out 2s;
570
552
  transform: rotate(9deg);
571
553
  }
554
+ .loading[data-progress="8"] .br-loading-mask.full,
555
+ .loading[data-progress="8"] .br-loading-fill,
556
+ .br-loading[data-progress="8"] .br-loading-mask.full,
557
+ .br-loading[data-progress="8"] .br-loading-fill {
558
+ animation: fill ease-in-out 2s;
559
+ transform: rotate(14.4deg);
560
+ }
572
561
  .loading[data-progress="10"] .br-loading-mask.full,
573
562
  .loading[data-progress="10"] .br-loading-fill,
574
563
  .br-loading[data-progress="10"] .br-loading-mask.full,
@@ -24,11 +24,6 @@ strong {
24
24
  font-weight: bolder;
25
25
  }
26
26
 
27
- code {
28
- font-family: monospace;
29
- font-size: 1em;
30
- }
31
-
32
27
  small {
33
28
  font-size: 80%;
34
29
  }
@@ -352,19 +347,6 @@ textarea,
352
347
  margin-bottom: var(--spacing-scale-half);
353
348
  }
354
349
 
355
- code,
356
- .code {
357
- background: var(--gray-5);
358
- border-radius: 4px;
359
- color: var(--gray-80);
360
- display: inline-block;
361
- font-family: monospace;
362
- font-size: var(--font-size-scale-base);
363
- font-weight: var(--font-weight-medium);
364
- line-height: var(--font-line-height-low);
365
- padding: var(--spacing-scale-half);
366
- }
367
-
368
350
  .text-pure-0 {
369
351
  color: var(--pure-0) !important;
370
352
  }
@@ -24,11 +24,6 @@ strong {
24
24
  font-weight: bolder;
25
25
  }
26
26
 
27
- code {
28
- font-family: monospace;
29
- font-size: 1em;
30
- }
31
-
32
27
  small {
33
28
  font-size: 80%;
34
29
  }
@@ -352,19 +347,6 @@ textarea,
352
347
  margin-bottom: var(--spacing-scale-half);
353
348
  }
354
349
 
355
- code,
356
- .code {
357
- background: var(--gray-5);
358
- border-radius: 4px;
359
- color: var(--gray-80);
360
- display: inline-block;
361
- font-family: monospace;
362
- font-size: var(--font-size-scale-base);
363
- font-weight: var(--font-weight-medium);
364
- line-height: var(--font-line-height-low);
365
- padding: var(--spacing-scale-half);
366
- }
367
-
368
350
  .text-pure-0 {
369
351
  color: var(--pure-0) !important;
370
352
  }
@@ -1,5 +1,6 @@
1
- import { h, Host } from "@stencil/core";
1
+ import { h, Host, } from "@stencil/core";
2
2
  import { inheritAriaAttributes } from "../../utils/inherited-attributes";
3
+ import generateUniqueId from "../../utils/unique-id-generator";
3
4
  /**
4
5
  * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/radio?tab=designer).
5
6
  *
@@ -8,28 +9,21 @@ import { inheritAriaAttributes } from "../../utils/inherited-attributes";
8
9
  export class Radio {
9
10
  constructor() {
10
11
  this.inheritedAttributes = {};
11
- this.handleClick = () => {
12
- this.toggleChecked();
13
- };
14
- this.handleKeyDown = (event) => {
15
- // Permite alternar o estado apenas quando a tecla pressionada é 'Space'
16
- if (event.code === 'Space') {
17
- event.preventDefault(); // Impede o comportamento padrão da tecla 'Space'
18
- this.toggleChecked();
19
- }
20
- };
21
12
  /**
22
- * Controla o comportamento de alternar o estado checked.
13
+ * Handler para o event "click"
14
+ * @param event Objeto Event
23
15
  */
24
- this.toggleChecked = () => {
25
- if (this.toggle) {
26
- this.checked = !this.checked;
27
- this.brDidCheckedChange.emit({ value: this.value, checked: this.checked });
28
- }
29
- };
30
- this.stopPropagation = (event) => {
16
+ this.onClick = (event) => {
31
17
  event.stopPropagation();
18
+ this.checked = event.target.checked;
19
+ };
20
+ /**
21
+ * Handler para o evento "change"
22
+ */
23
+ this.onChange = () => {
24
+ this.brDidChange.emit({ id: this.computedId, name: this.name, value: this.value, checked: this.checked });
32
25
  };
26
+ this.computedId = undefined;
33
27
  this.checked = false;
34
28
  this.disabled = false;
35
29
  this.state = null;
@@ -38,25 +32,20 @@ export class Radio {
38
32
  this.label = undefined;
39
33
  this.value = undefined;
40
34
  this.customId = undefined;
41
- this.toggle = false;
42
- this._slotDefault = false;
43
35
  }
44
- // Faz a marcação do checkbox de acordo com a seleção do componente item do tipo is-interactive
45
- handleItemInteractiveSelect(event) {
46
- var _a;
47
- // Verifica se o evento é de um pai correto
48
- const target = event.target;
49
- const brItem = target.closest('br-item');
50
- if (brItem && ((_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.contains(brItem))) {
51
- this.checked = event.detail.selected;
36
+ onCustomIdChange(newValue) {
37
+ if (newValue) {
38
+ this.computedId = newValue;
39
+ }
40
+ else {
41
+ this.computedId = generateUniqueId('radio', 8);
52
42
  }
53
- event.stopPropagation();
54
43
  }
55
44
  connectedCallback() {
45
+ this.getComputedId();
56
46
  this.brDidConnect.emit();
57
47
  }
58
48
  componentWillLoad() {
59
- this.hasSlotContentDefault();
60
49
  this.brWillLoad.emit();
61
50
  this.inheritedAttributes = inheritAriaAttributes(this.el);
62
51
  }
@@ -93,8 +82,12 @@ export class Radio {
93
82
  formStateRestoreCallback(state, _mode) {
94
83
  this.brFormStateRestoreCallback.emit([state, _mode]);
95
84
  }
96
- hasSlotContentDefault() {
97
- this._slotDefault = this.el.innerHTML !== '';
85
+ // Ouvinte para o evento "brDidChange"
86
+ onBrDidChange(event) {
87
+ // If the event is from another radio with the same name, deselect this one
88
+ if (event.detail.id !== this.computedId && event.detail.name === this.name) {
89
+ this.checked = false;
90
+ }
98
91
  }
99
92
  getCssClassMap() {
100
93
  return {
@@ -110,10 +103,10 @@ export class Radio {
110
103
  */
111
104
  getComputedId() {
112
105
  var _a;
113
- return ((_a = this.customId) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.customId : this.name;
106
+ this.computedId = (_a = this.customId) !== null && _a !== void 0 ? _a : generateUniqueId('radio', 8);
114
107
  }
115
108
  render() {
116
- return (h(Host, { key: '5da5a61be5135f9d6938a3f71d5423947c62f786', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '84fb3469e320751f3f9d10f727f3bd113bea0c7d', class: this.getCssClassMap(), onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("input", Object.assign({ key: 'e2dfa7551a548ed986d2d1be7343cd67645150b9', "aria-label": this.label, type: "radio", id: this.getComputedId(), name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, onClick: this.stopPropagation }, this.inheritedAttributes)), h("label", { key: 'fa025229ad31f88416a552fb6dc9cd00f0da6876', htmlFor: this.getComputedId() }, this._slotDefault ? h("slot", null) : this.label))));
109
+ return (h(Host, { key: '157fbced7af9781ebec0d96ce5046d623e2d585d', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: 'f34f4954e2369d118ef3af1f41ca96883717830e', class: this.getCssClassMap() }, h("input", Object.assign({ key: 'b04146beacb034b9d86a5140d0a88019f5d21ba9', "aria-label": this.label, type: "radio", id: this.computedId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, onClick: this.onClick, onChange: this.onChange }, this.inheritedAttributes)), h("label", { key: 'ef29ce8a1ac83addc13723bfe97f0a65198c6133', htmlFor: this.computedId }, h("slot", { key: '1ad0ef5ad91ca8e7adeb7146fa3e270cb2f36a0f' }, this.label)))));
117
110
  }
118
111
  static get is() { return "br-radio"; }
119
112
  static get encapsulation() { return "shadow"; }
@@ -265,34 +258,16 @@ export class Radio {
265
258
  "optional": false,
266
259
  "docs": {
267
260
  "tags": [],
268
- "text": "Especifica o ID do componente, que \u00E9 usado para conectar o label correspondente ao radio.\nSe n\u00E3o for fornecido, o ID ser\u00E1 o mesmo valor atribu\u00EDdo \u00E0 propriedade `name`."
261
+ "text": "Especifica o ID do componente, que \u00E9 usado para conectar o label correspondente ao radio.\nSe n\u00E3o for fornecido, o ID ser\u00E1 gerado automaticamente e de forma aleat\u00F3ria"
269
262
  },
270
263
  "attribute": "id",
271
264
  "reflect": true
272
- },
273
- "toggle": {
274
- "type": "boolean",
275
- "mutable": false,
276
- "complexType": {
277
- "original": "boolean",
278
- "resolved": "boolean",
279
- "references": {}
280
- },
281
- "required": false,
282
- "optional": false,
283
- "docs": {
284
- "tags": [],
285
- "text": "Indica se o radio pode alternar seu estado checked"
286
- },
287
- "attribute": "toggle",
288
- "reflect": true,
289
- "defaultValue": "false"
290
265
  }
291
266
  };
292
267
  }
293
268
  static get states() {
294
269
  return {
295
- "_slotDefault": {}
270
+ "computedId": {}
296
271
  };
297
272
  }
298
273
  static get events() {
@@ -509,8 +484,8 @@ export class Radio {
509
484
  "references": {}
510
485
  }
511
486
  }, {
512
- "method": "brDidCheckedChange",
513
- "name": "brDidCheckedChange",
487
+ "method": "brDidChange",
488
+ "name": "brDidChange",
514
489
  "bubbles": true,
515
490
  "cancelable": true,
516
491
  "composed": true,
@@ -519,18 +494,24 @@ export class Radio {
519
494
  "text": "Componente teve seu estado \"checked\" alterado"
520
495
  },
521
496
  "complexType": {
522
- "original": "{ value: boolean; checked: boolean }",
523
- "resolved": "{ value: boolean; checked: boolean; }",
497
+ "original": "any",
498
+ "resolved": "any",
524
499
  "references": {}
525
500
  }
526
501
  }];
527
502
  }
528
503
  static get elementRef() { return "el"; }
504
+ static get watchers() {
505
+ return [{
506
+ "propName": "customId",
507
+ "methodName": "onCustomIdChange"
508
+ }];
509
+ }
529
510
  static get listeners() {
530
511
  return [{
531
- "name": "brDidSelect",
532
- "method": "handleItemInteractiveSelect",
533
- "target": "document",
512
+ "name": "brDidChange",
513
+ "method": "onBrDidChange",
514
+ "target": "window",
534
515
  "capture": false,
535
516
  "passive": false
536
517
  }];
@@ -1 +1 @@
1
- {"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State } from '@stencil/core'\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/radio?tab=designer).\n *\n * @slot default - O texto descritivo pode ser passado por propriedade (label) ou por slot.\n */\n\n@Component({\n tag: 'br-radio',\n styleUrl: 'radio.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class Radio {\n /**\n * Referência ao elemento host do componente.\n * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.\n */\n @Element() el: HTMLBrRadioElement\n\n @AttachInternals() elementInternals: ElementInternals\n\n /**\n * Define o estado de seleção do radio.\n * Se definido como verdadeiro, o radio estará marcado. Caso contrário, estará desmarcado.\n */\n @Prop({ reflect: true, mutable: true }) checked: boolean = false\n\n /**\n * Desativa o radio, tornando-o não interativo.\n */\n @Prop({ reflect: true }) disabled: boolean = false\n\n /**\n * Indica a validade do radio.\n * Valores possíveis:\n * - 'valid': O radio é considerado válido.\n * - 'invalid': O radio é considerado inválido.\n * Se não for especificado, o valor padrão é `null`, indicando que a validade não foi definida.\n */\n @Prop({ reflect: true }) state: 'valid' | 'invalid' = null\n\n /**\n * Define se o label associado ao radio deve ser oculto.\n * Se definido como verdadeiro, o texto do label será oculto, mas o radio ainda estará visível e funcional.\n */\n @Prop({ reflect: true, attribute: 'has-hidden-label' }) hasHiddenLabel: boolean = false\n\n /**\n * Define o nome do radio, que é utilizado para agrupar radios em formulários e identificar o campo.\n * O valor é obrigatório e deve ser fornecido para garantir o correto funcionamento em formulários.\n */\n\n @Prop({ reflect: true }) name!: string\n\n /**\n * Texto descritivo exibido à direita do radio.\n * Caso um slot seja utilizado para fornecer um texto alternativo, o valor desta propriedade será ignorado.\n */\n @Prop({ reflect: true }) label: string\n\n /**\n * Define o valor associado ao radio quando ele faz parte de um formulário nativo (`<form>`).\n * Esse valor é enviado com o formulário quando o radio está selecionado.\n * **Nota:** Esta propriedade não deve ser utilizada para determinar se o radio está selecionado; para verificar o estado de seleção, use a propriedade `checked`.\n */\n @Prop({ reflect: true }) value: any\n\n /**\n * Especifica o ID do componente, que é usado para conectar o label correspondente ao radio.\n * Se não for fornecido, o ID será o mesmo valor atribuído à propriedade `name`.\n */\n @Prop({ reflect: true, attribute: 'id' }) customId: string\n\n /**\n * Indica se o radio pode alternar seu estado checked\n */\n @Prop({ reflect: true }) toggle: boolean = false\n\n /**\n * Propriedade que vai guardar o valor da validação do slot\n */\n @State() _slotDefault: boolean = false\n\n // Faz a marcação do checkbox de acordo com a seleção do componente item do tipo is-interactive\n @Listen('brDidSelect', { target: 'document' })\n handleItemInteractiveSelect(event: CustomEvent) {\n // Verifica se o evento é de um pai correto\n const target = event.target as HTMLElement\n const brItem = target.closest('br-item') as HTMLElement\n\n if (brItem && this.el.parentElement?.contains(brItem)) {\n this.checked = event.detail.selected\n }\n\n event.stopPropagation()\n }\n\n /**\n * Emite um evento quando o componente é conectado ao DOM.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#connectedcallback) para mais detalhes.\n */\n @Event() brDidConnect: EventEmitter<void>\n connectedCallback() {\n this.brDidConnect.emit()\n }\n\n /**\n * Emite um evento antes que o componente seja carregado pela primeira vez.\n * Utilize este evento para realizar tarefas de inicialização antes do componente ser exibido.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillload) para mais detalhes.\n */\n @Event() brWillLoad: EventEmitter<void>\n componentWillLoad() {\n this.hasSlotContentDefault()\n this.brWillLoad.emit()\n this.inheritedAttributes = inheritAriaAttributes(this.el)\n }\n\n /**\n * Emite um evento após o componente ter sido carregado pela primeira vez.\n * Utilize este evento para realizar ações que devem ocorrer depois que o componente foi totalmente carregado.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.\n */\n @Event() brDidLoad: EventEmitter<void>\n componentDidLoad() {\n this.brDidLoad.emit()\n }\n\n /**\n * Emite um evento antes do componente ser renderizado.\n * Utilize este evento para preparar o componente antes de sua renderização.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillrender) para mais detalhes.\n */\n @Event() brWillRender: EventEmitter<void>\n componentWillRender() {\n this.brWillRender.emit()\n }\n\n /**\n * Emite um evento após o componente ter sido renderizado.\n * Utilize este evento para executar ações que devem ocorrer após a renderização do componente.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidrender) para mais detalhes.\n */\n @Event() brDidRender: EventEmitter<void>\n componentDidRender() {\n this.brDidRender.emit()\n }\n\n /**\n * Emite um evento para indicar se o componente deve ser atualizado ou não.\n * Este evento é chamado antes de qualquer atualização do componente para decidir se a atualização deve prosseguir.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentshouldupdate) para mais detalhes.\n */\n @Event() brShouldUpdate: EventEmitter<void>\n componentShouldUpdate() {\n this.brShouldUpdate.emit()\n }\n\n /**\n * Emite um evento antes de o componente ser atualizado.\n * Utilize este evento para realizar ações preparatórias antes da atualização do componente.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillupdate) para mais detalhes.\n */\n @Event() brWillUpdate: EventEmitter<void>\n componentWillUpdate() {\n this.brWillUpdate.emit()\n }\n\n /**\n * Emite um evento após o componente ter sido atualizado.\n * Utilize este evento para realizar ações após a atualização do componente.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidupdate) para mais detalhes.\n */\n @Event() brDidUpdate: EventEmitter<void>\n componentDidUpdate() {\n this.brDidUpdate.emit()\n }\n\n /**\n * Emite um evento quando o componente é desconectado do DOM.\n * Utilize este evento para realizar a limpeza ou outras ações necessárias quando o componente é removido.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#disconnectedcallback) para mais detalhes.\n */\n @Event() brDidDisconnect: EventEmitter<void>\n disconnectedCallback() {\n this.brDidDisconnect.emit()\n }\n\n /**\n * Emite um evento quando o componente é associado ou removido de um `<form>`.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formassociatedcallback) para mais detalhes.\n *\n * @param form - Dados do formulário associado.\n */\n @Event() brFormAssociatedCallback: EventEmitter<FormData>\n formAssociatedCallback(form: FormData) {\n this.brFormAssociatedCallback.emit(form)\n }\n\n /**\n * Emite um evento quando o estado `disabled` do componente muda dentro de um `<form>`.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formdisabledcallback) para mais informações.\n *\n * @param disabled - Novo estado `disabled` do componente dentro do formulário.\n */\n @Event() brFormDisabledCallback: EventEmitter<boolean>\n formDisabledCallback(disabled: boolean) {\n this.brFormDisabledCallback.emit(disabled)\n }\n\n /**\n * Emite um evento quando um `<form>` é resetado.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formresetcallback) para mais detalhes.\n */\n @Event() brFormResetCallback: EventEmitter<void>\n formResetCallback() {\n this.brFormResetCallback.emit()\n }\n\n /**\n * Emite um evento quando o navegador preenche automaticamente os campos de um `<form>`.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formstaterestorecallback) para mais informações.\n *\n * @param state - Estado restaurado do formulário.\n * @param _mode - Modo de preenchimento automático do navegador.\n */\n @Event() brFormStateRestoreCallback: EventEmitter<[state: string, _mode: string]>\n formStateRestoreCallback(state: string, _mode: string) {\n this.brFormStateRestoreCallback.emit([state, _mode])\n }\n\n private hasSlotContentDefault(): any {\n this._slotDefault = this.el.innerHTML !== ''\n }\n\n private getCssClassMap(): CssClassMap {\n return {\n 'br-radio': true,\n valid: this.state === 'valid',\n invalid: this.state === 'invalid',\n disabled: this.disabled,\n 'hidden-label': this.hasHiddenLabel,\n }\n }\n\n private inheritedAttributes: Attributes = {}\n\n /**\n * Componente teve seu estado \"checked\" alterado\n */\n @Event() brDidCheckedChange: EventEmitter<{ value: boolean; checked: boolean }>\n\n private readonly handleClick = () => {\n this.toggleChecked()\n }\n\n private readonly handleKeyDown = (event: KeyboardEvent) => {\n // Permite alternar o estado apenas quando a tecla pressionada é 'Space'\n if (event.code === 'Space') {\n event.preventDefault() // Impede o comportamento padrão da tecla 'Space'\n this.toggleChecked()\n }\n }\n\n /**\n * Controla o comportamento de alternar o estado checked.\n */\n private readonly toggleChecked = () => {\n if (this.toggle) {\n this.checked = !this.checked\n this.brDidCheckedChange.emit({ value: this.value, checked: this.checked })\n }\n }\n\n /**\n * Determina um id para o radio.\n */\n private getComputedId(): string {\n return this.customId?.length > 0 ? this.customId : this.name\n }\n\n private readonly stopPropagation = (event: Event) => {\n event.stopPropagation()\n }\n\n render() {\n return (\n <Host aria-disabled={this.disabled ? 'true' : null}>\n <div class={this.getCssClassMap()} onClick={this.handleClick} onKeyDown={this.handleKeyDown}>\n <input\n aria-label={this.label}\n type=\"radio\"\n id={this.getComputedId()}\n name={this.name}\n checked={this.checked}\n disabled={this.disabled}\n value={this.value}\n onClick={this.stopPropagation}\n {...this.inheritedAttributes}\n />\n <label htmlFor={this.getComputedId()}>{this._slotDefault ? <slot></slot> : this.label}</label>\n </div>\n </Host>\n )\n }\n}\n"]}
1
+ {"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n AttachInternals,\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\nimport { CssClassMap } from '../../utils/interfaces'\nimport generateUniqueId from '../../utils/unique-id-generator'\n\n/**\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/radio?tab=designer).\n *\n * @slot default - O texto descritivo pode ser passado por propriedade (label) ou por slot.\n */\n\n@Component({\n tag: 'br-radio',\n styleUrl: 'radio.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class Radio {\n /**\n * Referência ao elemento host do componente.\n * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.\n */\n @Element() el: HTMLBrRadioElement\n\n @AttachInternals() elementInternals: ElementInternals\n\n /**\n * Contém o id usado internamente no componente\n */\n @State() computedId: string\n\n /**\n * Define o estado de seleção do radio.\n * Se definido como verdadeiro, o radio estará marcado. Caso contrário, estará desmarcado.\n */\n @Prop({ reflect: true, mutable: true }) checked: boolean = false\n\n /**\n * Desativa o radio, tornando-o não interativo.\n */\n @Prop({ reflect: true }) disabled: boolean = false\n\n /**\n * Indica a validade do radio.\n * Valores possíveis:\n * - 'valid': O radio é considerado válido.\n * - 'invalid': O radio é considerado inválido.\n * Se não for especificado, o valor padrão é `null`, indicando que a validade não foi definida.\n */\n @Prop({ reflect: true }) state: 'valid' | 'invalid' = null\n\n /**\n * Define se o label associado ao radio deve ser oculto.\n * Se definido como verdadeiro, o texto do label será oculto, mas o radio ainda estará visível e funcional.\n */\n @Prop({ reflect: true, attribute: 'has-hidden-label' }) hasHiddenLabel: boolean = false\n\n /**\n * Define o nome do radio, que é utilizado para agrupar radios em formulários e identificar o campo.\n * O valor é obrigatório e deve ser fornecido para garantir o correto funcionamento em formulários.\n */\n\n @Prop({ reflect: true }) name!: string\n\n /**\n * Texto descritivo exibido à direita do radio.\n * Caso um slot seja utilizado para fornecer um texto alternativo, o valor desta propriedade será ignorado.\n */\n @Prop({ reflect: true }) label: string\n\n /**\n * Define o valor associado ao radio quando ele faz parte de um formulário nativo (`<form>`).\n * Esse valor é enviado com o formulário quando o radio está selecionado.\n * **Nota:** Esta propriedade não deve ser utilizada para determinar se o radio está selecionado; para verificar o estado de seleção, use a propriedade `checked`.\n */\n @Prop({ reflect: true }) value: any\n\n /**\n * Especifica o ID do componente, que é usado para conectar o label correspondente ao radio.\n * Se não for fornecido, o ID será gerado automaticamente e de forma aleatória\n */\n @Prop({ reflect: true, attribute: 'id' }) customId: string\n\n @Watch('customId')\n onCustomIdChange(newValue) {\n if (newValue) {\n this.computedId = newValue\n } else {\n this.computedId = generateUniqueId('radio', 8)\n }\n }\n\n /**\n * Emite um evento quando o componente é conectado ao DOM.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#connectedcallback) para mais detalhes.\n */\n @Event() brDidConnect: EventEmitter<void>\n connectedCallback() {\n this.getComputedId()\n this.brDidConnect.emit()\n }\n\n /**\n * Emite um evento antes que o componente seja carregado pela primeira vez.\n * Utilize este evento para realizar tarefas de inicialização antes do componente ser exibido.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillload) para mais detalhes.\n */\n @Event() brWillLoad: EventEmitter<void>\n componentWillLoad() {\n this.brWillLoad.emit()\n this.inheritedAttributes = inheritAriaAttributes(this.el)\n }\n\n /**\n * Emite um evento após o componente ter sido carregado pela primeira vez.\n * Utilize este evento para realizar ações que devem ocorrer depois que o componente foi totalmente carregado.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.\n */\n @Event() brDidLoad: EventEmitter<void>\n componentDidLoad() {\n this.brDidLoad.emit()\n }\n\n /**\n * Emite um evento antes do componente ser renderizado.\n * Utilize este evento para preparar o componente antes de sua renderização.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillrender) para mais detalhes.\n */\n @Event() brWillRender: EventEmitter<void>\n componentWillRender() {\n this.brWillRender.emit()\n }\n\n /**\n * Emite um evento após o componente ter sido renderizado.\n * Utilize este evento para executar ações que devem ocorrer após a renderização do componente.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidrender) para mais detalhes.\n */\n @Event() brDidRender: EventEmitter<void>\n componentDidRender() {\n this.brDidRender.emit()\n }\n\n /**\n * Emite um evento para indicar se o componente deve ser atualizado ou não.\n * Este evento é chamado antes de qualquer atualização do componente para decidir se a atualização deve prosseguir.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentshouldupdate) para mais detalhes.\n */\n @Event() brShouldUpdate: EventEmitter<void>\n componentShouldUpdate() {\n this.brShouldUpdate.emit()\n }\n\n /**\n * Emite um evento antes de o componente ser atualizado.\n * Utilize este evento para realizar ações preparatórias antes da atualização do componente.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentwillupdate) para mais detalhes.\n */\n @Event() brWillUpdate: EventEmitter<void>\n componentWillUpdate() {\n this.brWillUpdate.emit()\n }\n\n /**\n * Emite um evento após o componente ter sido atualizado.\n * Utilize este evento para realizar ações após a atualização do componente.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidupdate) para mais detalhes.\n */\n @Event() brDidUpdate: EventEmitter<void>\n componentDidUpdate() {\n this.brDidUpdate.emit()\n }\n\n /**\n * Emite um evento quando o componente é desconectado do DOM.\n * Utilize este evento para realizar a limpeza ou outras ações necessárias quando o componente é removido.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#disconnectedcallback) para mais detalhes.\n */\n @Event() brDidDisconnect: EventEmitter<void>\n disconnectedCallback() {\n this.brDidDisconnect.emit()\n }\n\n /**\n * Emite um evento quando o componente é associado ou removido de um `<form>`.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formassociatedcallback) para mais detalhes.\n *\n * @param form - Dados do formulário associado.\n */\n @Event() brFormAssociatedCallback: EventEmitter<FormData>\n formAssociatedCallback(form: FormData) {\n this.brFormAssociatedCallback.emit(form)\n }\n\n /**\n * Emite um evento quando o estado `disabled` do componente muda dentro de um `<form>`.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formdisabledcallback) para mais informações.\n *\n * @param disabled - Novo estado `disabled` do componente dentro do formulário.\n */\n @Event() brFormDisabledCallback: EventEmitter<boolean>\n formDisabledCallback(disabled: boolean) {\n this.brFormDisabledCallback.emit(disabled)\n }\n\n /**\n * Emite um evento quando um `<form>` é resetado.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formresetcallback) para mais detalhes.\n */\n @Event() brFormResetCallback: EventEmitter<void>\n formResetCallback() {\n this.brFormResetCallback.emit()\n }\n\n /**\n * Emite um evento quando o navegador preenche automaticamente os campos de um `<form>`.\n * Consulte a documentação do [Stencil](https://stenciljs.com/docs/form-associated#formstaterestorecallback) para mais informações.\n *\n * @param state - Estado restaurado do formulário.\n * @param _mode - Modo de preenchimento automático do navegador.\n */\n @Event() brFormStateRestoreCallback: EventEmitter<[state: string, _mode: string]>\n formStateRestoreCallback(state: string, _mode: string) {\n this.brFormStateRestoreCallback.emit([state, _mode])\n }\n\n /**\n * Componente teve seu estado \"checked\" alterado\n */\n @Event({ bubbles: true, composed: true }) brDidChange: EventEmitter\n\n // Ouvinte para o evento \"brDidChange\"\n @Listen('brDidChange', { target: 'window' })\n onBrDidChange(event: CustomEvent) {\n // If the event is from another radio with the same name, deselect this one\n if (event.detail.id !== this.computedId && event.detail.name === this.name) {\n this.checked = false\n }\n }\n\n private getCssClassMap(): CssClassMap {\n return {\n 'br-radio': true,\n valid: this.state === 'valid',\n invalid: this.state === 'invalid',\n disabled: this.disabled,\n 'hidden-label': this.hasHiddenLabel,\n }\n }\n\n private inheritedAttributes: Attributes = {}\n\n /**\n * Determina um id para o radio.\n */\n private getComputedId() {\n this.computedId = this.customId ?? generateUniqueId('radio', 8)\n }\n\n /**\n * Handler para o event \"click\"\n * @param event Objeto Event\n */\n private onClick = (event: MouseEvent) => {\n event.stopPropagation()\n this.checked = (event.target as HTMLInputElement).checked\n }\n\n /**\n * Handler para o evento \"change\"\n */\n private onChange = () => {\n this.brDidChange.emit({ id: this.computedId, name: this.name, value: this.value, checked: this.checked })\n }\n\n render() {\n return (\n <Host aria-disabled={this.disabled ? 'true' : null}>\n <div class={this.getCssClassMap()}>\n <input\n aria-label={this.label}\n type=\"radio\"\n id={this.computedId}\n name={this.name}\n checked={this.checked}\n disabled={this.disabled}\n value={this.value}\n onClick={this.onClick}\n onChange={this.onChange}\n {...this.inheritedAttributes}\n />\n <label htmlFor={this.computedId}>\n <slot>{this.label}</slot>\n </label>\n </div>\n </Host>\n )\n }\n}\n"]}
@@ -24,11 +24,6 @@ strong {
24
24
  font-weight: bolder;
25
25
  }
26
26
 
27
- code {
28
- font-family: monospace;
29
- font-size: 1em;
30
- }
31
-
32
27
  small {
33
28
  font-size: 80%;
34
29
  }
@@ -352,19 +347,6 @@ textarea,
352
347
  margin-bottom: var(--spacing-scale-half);
353
348
  }
354
349
 
355
- code,
356
- .code {
357
- background: var(--gray-5);
358
- border-radius: 4px;
359
- color: var(--gray-80);
360
- display: inline-block;
361
- font-family: monospace;
362
- font-size: var(--font-size-scale-base);
363
- font-weight: var(--font-weight-medium);
364
- line-height: var(--font-line-height-low);
365
- padding: var(--spacing-scale-half);
366
- }
367
-
368
350
  .text-pure-0 {
369
351
  color: var(--pure-0) !important;
370
352
  }
@@ -99,7 +99,7 @@ export class Switch {
99
99
  };
100
100
  }
101
101
  render() {
102
- return (h(Host, { key: 'c73ea35b03a02980c62a05f1f658e141eda7fc9f' }, h("div", Object.assign({ key: '5bbe6ec79b43a3a68acbdbde2ca9b55a79bb5d82', class: this.getCssClassMap() }, this.inheritedAttributes), h("input", { key: 'c4d13635f0faf10204e989731817ec5fd83e38aa', id: this._getComputedId(), type: "checkbox", name: this.name, checked: this._checkedValue, disabled: this.disabled, role: "switch", "aria-checked": this._checkedValue.toString(), "aria-disabled": this.disabled ? 'true' : null, onChange: this.handleCheckedChange }), h("label", { key: '7ac07bf9f187f11689491cefd515380aa0d6c2f2', htmlFor: this._getComputedId() }, this._slotDefault ? h("slot", null) : this.label), this.labelOn && this.labelOff && (h("div", { key: '316afcde426fa4bea73aab1675af0cbb6c067d59', class: "switch-data", "data-enabled": this.labelOn, "data-disabled": this.labelOff })))));
102
+ return (h(Host, { key: 'd2cc950b9044ce062e96f3b1dd9eda0829d02b9e' }, h("div", Object.assign({ key: '8783b57e8133cb0f53354cf48eee863123c4197b', class: this.getCssClassMap() }, this.inheritedAttributes), h("input", { key: '396d817ecc1dca472abb3e95fe5869f266047dcc', id: this._getComputedId(), type: "checkbox", name: this.name, checked: this._checkedValue, disabled: this.disabled, role: "switch", "aria-checked": this._checkedValue.toString(), "aria-disabled": this.disabled ? 'true' : null, onChange: this.handleCheckedChange }), h("label", { key: 'b0c4dff57a94c2661859b18a9e55ee8a77d541a6', htmlFor: this._getComputedId() }, this._slotDefault ? h("slot", null) : this.label), this.labelOn && this.labelOff && (h("div", { key: '18f77feda3016dcd4c645cedd943312dcaa0db1a', class: "switch-data", "data-enabled": this.labelOn, "data-disabled": this.labelOff })))));
103
103
  }
104
104
  static get is() { return "br-switch"; }
105
105
  static get encapsulation() { return "shadow"; }