@testgorilla/tgo-ui 11.22.3 → 12.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (225) hide show
  1. package/fesm2022/testgorilla-tgo-ui-components-accordion.mjs +335 -229
  2. package/fesm2022/testgorilla-tgo-ui-components-accordion.mjs.map +1 -1
  3. package/fesm2022/testgorilla-tgo-ui-components-ai-audio-circle.mjs +547 -465
  4. package/fesm2022/testgorilla-tgo-ui-components-ai-audio-circle.mjs.map +1 -1
  5. package/fesm2022/testgorilla-tgo-ui-components-ai-caveat.mjs +160 -75
  6. package/fesm2022/testgorilla-tgo-ui-components-ai-caveat.mjs.map +1 -1
  7. package/fesm2022/testgorilla-tgo-ui-components-ai-feedback.mjs +678 -278
  8. package/fesm2022/testgorilla-tgo-ui-components-ai-feedback.mjs.map +1 -1
  9. package/fesm2022/testgorilla-tgo-ui-components-alert-banner.mjs +337 -274
  10. package/fesm2022/testgorilla-tgo-ui-components-alert-banner.mjs.map +1 -1
  11. package/fesm2022/testgorilla-tgo-ui-components-audio-waveform.mjs +351 -192
  12. package/fesm2022/testgorilla-tgo-ui-components-audio-waveform.mjs.map +1 -1
  13. package/fesm2022/testgorilla-tgo-ui-components-autocomplete-v2.mjs +1950 -960
  14. package/fesm2022/testgorilla-tgo-ui-components-autocomplete-v2.mjs.map +1 -1
  15. package/fesm2022/testgorilla-tgo-ui-components-autocomplete.mjs +1206 -1044
  16. package/fesm2022/testgorilla-tgo-ui-components-autocomplete.mjs.map +1 -1
  17. package/fesm2022/testgorilla-tgo-ui-components-avatar.mjs +328 -182
  18. package/fesm2022/testgorilla-tgo-ui-components-avatar.mjs.map +1 -1
  19. package/fesm2022/testgorilla-tgo-ui-components-badge.mjs +383 -203
  20. package/fesm2022/testgorilla-tgo-ui-components-badge.mjs.map +1 -1
  21. package/fesm2022/testgorilla-tgo-ui-components-breadcrumb.mjs +553 -261
  22. package/fesm2022/testgorilla-tgo-ui-components-breadcrumb.mjs.map +1 -1
  23. package/fesm2022/testgorilla-tgo-ui-components-button.mjs +709 -739
  24. package/fesm2022/testgorilla-tgo-ui-components-button.mjs.map +1 -1
  25. package/fesm2022/testgorilla-tgo-ui-components-card.mjs +219 -184
  26. package/fesm2022/testgorilla-tgo-ui-components-card.mjs.map +1 -1
  27. package/fesm2022/testgorilla-tgo-ui-components-checkbox.mjs +515 -458
  28. package/fesm2022/testgorilla-tgo-ui-components-checkbox.mjs.map +1 -1
  29. package/fesm2022/testgorilla-tgo-ui-components-checklist.mjs +423 -162
  30. package/fesm2022/testgorilla-tgo-ui-components-checklist.mjs.map +1 -1
  31. package/fesm2022/testgorilla-tgo-ui-components-core.mjs +10784 -10996
  32. package/fesm2022/testgorilla-tgo-ui-components-core.mjs.map +1 -1
  33. package/fesm2022/testgorilla-tgo-ui-components-datepicker.mjs +810 -533
  34. package/fesm2022/testgorilla-tgo-ui-components-datepicker.mjs.map +1 -1
  35. package/fesm2022/testgorilla-tgo-ui-components-device-control.mjs +473 -116
  36. package/fesm2022/testgorilla-tgo-ui-components-device-control.mjs.map +1 -1
  37. package/fesm2022/testgorilla-tgo-ui-components-dialog.mjs +1149 -540
  38. package/fesm2022/testgorilla-tgo-ui-components-dialog.mjs.map +1 -1
  39. package/fesm2022/testgorilla-tgo-ui-components-divider.mjs +148 -84
  40. package/fesm2022/testgorilla-tgo-ui-components-divider.mjs.map +1 -1
  41. package/fesm2022/testgorilla-tgo-ui-components-donut-chart.mjs +239 -142
  42. package/fesm2022/testgorilla-tgo-ui-components-donut-chart.mjs.map +1 -1
  43. package/fesm2022/testgorilla-tgo-ui-components-dropdown.mjs +599 -467
  44. package/fesm2022/testgorilla-tgo-ui-components-dropdown.mjs.map +1 -1
  45. package/fesm2022/testgorilla-tgo-ui-components-elevation-shadow.mjs +126 -70
  46. package/fesm2022/testgorilla-tgo-ui-components-elevation-shadow.mjs.map +1 -1
  47. package/fesm2022/testgorilla-tgo-ui-components-empty-state.mjs +324 -329
  48. package/fesm2022/testgorilla-tgo-ui-components-empty-state.mjs.map +1 -1
  49. package/fesm2022/testgorilla-tgo-ui-components-field.mjs +969 -648
  50. package/fesm2022/testgorilla-tgo-ui-components-field.mjs.map +1 -1
  51. package/fesm2022/testgorilla-tgo-ui-components-file-upload.mjs +553 -419
  52. package/fesm2022/testgorilla-tgo-ui-components-file-upload.mjs.map +1 -1
  53. package/fesm2022/testgorilla-tgo-ui-components-filter-button.mjs +847 -452
  54. package/fesm2022/testgorilla-tgo-ui-components-filter-button.mjs.map +1 -1
  55. package/fesm2022/testgorilla-tgo-ui-components-gaussian-chart.mjs +398 -302
  56. package/fesm2022/testgorilla-tgo-ui-components-gaussian-chart.mjs.map +1 -1
  57. package/fesm2022/testgorilla-tgo-ui-components-icon-label.mjs +162 -95
  58. package/fesm2022/testgorilla-tgo-ui-components-icon-label.mjs.map +1 -1
  59. package/fesm2022/testgorilla-tgo-ui-components-icon.mjs +1825 -1795
  60. package/fesm2022/testgorilla-tgo-ui-components-icon.mjs.map +1 -1
  61. package/fesm2022/testgorilla-tgo-ui-components-infinite-scroll-table.mjs +1018 -672
  62. package/fesm2022/testgorilla-tgo-ui-components-infinite-scroll-table.mjs.map +1 -1
  63. package/fesm2022/testgorilla-tgo-ui-components-inline-field.mjs +758 -368
  64. package/fesm2022/testgorilla-tgo-ui-components-inline-field.mjs.map +1 -1
  65. package/fesm2022/testgorilla-tgo-ui-components-logo.mjs +204 -212
  66. package/fesm2022/testgorilla-tgo-ui-components-logo.mjs.map +1 -1
  67. package/fesm2022/testgorilla-tgo-ui-components-media-card.mjs +183 -48
  68. package/fesm2022/testgorilla-tgo-ui-components-media-card.mjs.map +1 -1
  69. package/fesm2022/testgorilla-tgo-ui-components-media-dialog.mjs +243 -79
  70. package/fesm2022/testgorilla-tgo-ui-components-media-dialog.mjs.map +1 -1
  71. package/fesm2022/testgorilla-tgo-ui-components-multi-input.mjs +751 -361
  72. package/fesm2022/testgorilla-tgo-ui-components-multi-input.mjs.map +1 -1
  73. package/fesm2022/testgorilla-tgo-ui-components-navbar.mjs +1122 -385
  74. package/fesm2022/testgorilla-tgo-ui-components-navbar.mjs.map +1 -1
  75. package/fesm2022/testgorilla-tgo-ui-components-overflow-menu.mjs +689 -413
  76. package/fesm2022/testgorilla-tgo-ui-components-overflow-menu.mjs.map +1 -1
  77. package/fesm2022/testgorilla-tgo-ui-components-page-header.mjs +227 -92
  78. package/fesm2022/testgorilla-tgo-ui-components-page-header.mjs.map +1 -1
  79. package/fesm2022/testgorilla-tgo-ui-components-paginator.mjs +174 -113
  80. package/fesm2022/testgorilla-tgo-ui-components-paginator.mjs.map +1 -1
  81. package/fesm2022/testgorilla-tgo-ui-components-password-criteria.mjs +367 -165
  82. package/fesm2022/testgorilla-tgo-ui-components-password-criteria.mjs.map +1 -1
  83. package/fesm2022/testgorilla-tgo-ui-components-password-strength.mjs +253 -118
  84. package/fesm2022/testgorilla-tgo-ui-components-password-strength.mjs.map +1 -1
  85. package/fesm2022/testgorilla-tgo-ui-components-phone-input.mjs +730 -444
  86. package/fesm2022/testgorilla-tgo-ui-components-phone-input.mjs.map +1 -1
  87. package/fesm2022/testgorilla-tgo-ui-components-popover.mjs +533 -221
  88. package/fesm2022/testgorilla-tgo-ui-components-popover.mjs.map +1 -1
  89. package/fesm2022/testgorilla-tgo-ui-components-popup-tip.mjs +274 -76
  90. package/fesm2022/testgorilla-tgo-ui-components-popup-tip.mjs.map +1 -1
  91. package/fesm2022/testgorilla-tgo-ui-components-progress-bar.mjs +184 -124
  92. package/fesm2022/testgorilla-tgo-ui-components-progress-bar.mjs.map +1 -1
  93. package/fesm2022/testgorilla-tgo-ui-components-prompt.mjs +1223 -574
  94. package/fesm2022/testgorilla-tgo-ui-components-prompt.mjs.map +1 -1
  95. package/fesm2022/testgorilla-tgo-ui-components-radial-progress.mjs +249 -160
  96. package/fesm2022/testgorilla-tgo-ui-components-radial-progress.mjs.map +1 -1
  97. package/fesm2022/testgorilla-tgo-ui-components-radio-button.mjs +447 -439
  98. package/fesm2022/testgorilla-tgo-ui-components-radio-button.mjs.map +1 -1
  99. package/fesm2022/testgorilla-tgo-ui-components-rating.mjs +226 -150
  100. package/fesm2022/testgorilla-tgo-ui-components-rating.mjs.map +1 -1
  101. package/fesm2022/testgorilla-tgo-ui-components-scale-table.mjs +255 -67
  102. package/fesm2022/testgorilla-tgo-ui-components-scale-table.mjs.map +1 -1
  103. package/fesm2022/testgorilla-tgo-ui-components-scale.mjs +205 -162
  104. package/fesm2022/testgorilla-tgo-ui-components-scale.mjs.map +1 -1
  105. package/fesm2022/testgorilla-tgo-ui-components-segmented-bar.mjs +245 -153
  106. package/fesm2022/testgorilla-tgo-ui-components-segmented-bar.mjs.map +1 -1
  107. package/fesm2022/testgorilla-tgo-ui-components-segmented-button.mjs +274 -140
  108. package/fesm2022/testgorilla-tgo-ui-components-segmented-button.mjs.map +1 -1
  109. package/fesm2022/testgorilla-tgo-ui-components-segmented-toggle.mjs +319 -147
  110. package/fesm2022/testgorilla-tgo-ui-components-segmented-toggle.mjs.map +1 -1
  111. package/fesm2022/testgorilla-tgo-ui-components-selectable-card.mjs +286 -84
  112. package/fesm2022/testgorilla-tgo-ui-components-selectable-card.mjs.map +1 -1
  113. package/fesm2022/testgorilla-tgo-ui-components-side-navigation.mjs +660 -208
  114. package/fesm2022/testgorilla-tgo-ui-components-side-navigation.mjs.map +1 -1
  115. package/fesm2022/testgorilla-tgo-ui-components-side-panel.mjs +579 -320
  116. package/fesm2022/testgorilla-tgo-ui-components-side-panel.mjs.map +1 -1
  117. package/fesm2022/testgorilla-tgo-ui-components-side-sheet.mjs +419 -200
  118. package/fesm2022/testgorilla-tgo-ui-components-side-sheet.mjs.map +1 -1
  119. package/fesm2022/testgorilla-tgo-ui-components-skeleton.mjs +132 -80
  120. package/fesm2022/testgorilla-tgo-ui-components-skeleton.mjs.map +1 -1
  121. package/fesm2022/testgorilla-tgo-ui-components-slider.mjs +741 -390
  122. package/fesm2022/testgorilla-tgo-ui-components-slider.mjs.map +1 -1
  123. package/fesm2022/testgorilla-tgo-ui-components-snackbar.mjs +455 -329
  124. package/fesm2022/testgorilla-tgo-ui-components-snackbar.mjs.map +1 -1
  125. package/fesm2022/testgorilla-tgo-ui-components-spider-chart.mjs +543 -514
  126. package/fesm2022/testgorilla-tgo-ui-components-spider-chart.mjs.map +1 -1
  127. package/fesm2022/testgorilla-tgo-ui-components-spinner.mjs +193 -104
  128. package/fesm2022/testgorilla-tgo-ui-components-spinner.mjs.map +1 -1
  129. package/fesm2022/testgorilla-tgo-ui-components-stepper.mjs +760 -524
  130. package/fesm2022/testgorilla-tgo-ui-components-stepper.mjs.map +1 -1
  131. package/fesm2022/testgorilla-tgo-ui-components-table.mjs +714 -415
  132. package/fesm2022/testgorilla-tgo-ui-components-table.mjs.map +1 -1
  133. package/fesm2022/testgorilla-tgo-ui-components-tabs.mjs +847 -438
  134. package/fesm2022/testgorilla-tgo-ui-components-tabs.mjs.map +1 -1
  135. package/fesm2022/testgorilla-tgo-ui-components-tag.mjs +535 -275
  136. package/fesm2022/testgorilla-tgo-ui-components-tag.mjs.map +1 -1
  137. package/fesm2022/testgorilla-tgo-ui-components-toggle.mjs +316 -246
  138. package/fesm2022/testgorilla-tgo-ui-components-toggle.mjs.map +1 -1
  139. package/fesm2022/testgorilla-tgo-ui-components-tooltip.mjs +404 -284
  140. package/fesm2022/testgorilla-tgo-ui-components-tooltip.mjs.map +1 -1
  141. package/fesm2022/testgorilla-tgo-ui-components-universal-skills.mjs +664 -383
  142. package/fesm2022/testgorilla-tgo-ui-components-universal-skills.mjs.map +1 -1
  143. package/fesm2022/testgorilla-tgo-ui-components-validation-error.mjs +201 -112
  144. package/fesm2022/testgorilla-tgo-ui-components-validation-error.mjs.map +1 -1
  145. package/fesm2022/testgorilla-tgo-ui-components-write-with-ai.mjs +1014 -458
  146. package/fesm2022/testgorilla-tgo-ui-components-write-with-ai.mjs.map +1 -1
  147. package/fesm2022/testgorilla-tgo-ui.mjs +147 -155
  148. package/fesm2022/testgorilla-tgo-ui.mjs.map +1 -1
  149. package/mcp/catalog.json +1 -1
  150. package/package.json +16 -17
  151. package/projects/tgo-canopy-ui/theme/_palette.scss +23 -18
  152. package/types/testgorilla-tgo-ui-components-accordion.d.ts +214 -158
  153. package/types/testgorilla-tgo-ui-components-ai-audio-circle.d.ts +93 -69
  154. package/types/testgorilla-tgo-ui-components-ai-caveat.d.ts +37 -34
  155. package/types/testgorilla-tgo-ui-components-ai-feedback.d.ts +126 -86
  156. package/types/testgorilla-tgo-ui-components-alert-banner.d.ts +260 -185
  157. package/types/testgorilla-tgo-ui-components-audio-waveform.d.ts +96 -67
  158. package/types/testgorilla-tgo-ui-components-autocomplete-v2.d.ts +455 -256
  159. package/types/testgorilla-tgo-ui-components-autocomplete.d.ts +545 -390
  160. package/types/testgorilla-tgo-ui-components-avatar.d.ts +128 -102
  161. package/types/testgorilla-tgo-ui-components-badge.d.ts +191 -139
  162. package/types/testgorilla-tgo-ui-components-breadcrumb.d.ts +100 -62
  163. package/types/testgorilla-tgo-ui-components-button.d.ts +479 -340
  164. package/types/testgorilla-tgo-ui-components-card.d.ts +153 -114
  165. package/types/testgorilla-tgo-ui-components-checkbox.d.ts +299 -223
  166. package/types/testgorilla-tgo-ui-components-checklist.d.ts +149 -97
  167. package/types/testgorilla-tgo-ui-components-core.d.ts +307 -295
  168. package/types/testgorilla-tgo-ui-components-datepicker.d.ts +404 -299
  169. package/types/testgorilla-tgo-ui-components-device-control.d.ts +151 -81
  170. package/types/testgorilla-tgo-ui-components-dialog.d.ts +442 -329
  171. package/types/testgorilla-tgo-ui-components-divider.d.ts +64 -51
  172. package/types/testgorilla-tgo-ui-components-donut-chart.d.ts +41 -37
  173. package/types/testgorilla-tgo-ui-components-dropdown.d.ts +335 -241
  174. package/types/testgorilla-tgo-ui-components-elevation-shadow.d.ts +48 -43
  175. package/types/testgorilla-tgo-ui-components-empty-state.d.ts +317 -215
  176. package/types/testgorilla-tgo-ui-components-field.d.ts +559 -388
  177. package/types/testgorilla-tgo-ui-components-file-upload.d.ts +230 -168
  178. package/types/testgorilla-tgo-ui-components-filter-button.d.ts +263 -206
  179. package/types/testgorilla-tgo-ui-components-gaussian-chart.d.ts +107 -94
  180. package/types/testgorilla-tgo-ui-components-icon-label.d.ts +84 -61
  181. package/types/testgorilla-tgo-ui-components-icon.d.ts +137 -110
  182. package/types/testgorilla-tgo-ui-components-infinite-scroll-table.d.ts +429 -303
  183. package/types/testgorilla-tgo-ui-components-inline-field.d.ts +338 -254
  184. package/types/testgorilla-tgo-ui-components-logo.d.ts +119 -101
  185. package/types/testgorilla-tgo-ui-components-media-card.d.ts +51 -35
  186. package/types/testgorilla-tgo-ui-components-media-dialog.d.ts +40 -45
  187. package/types/testgorilla-tgo-ui-components-multi-input.d.ts +283 -194
  188. package/types/testgorilla-tgo-ui-components-navbar.d.ts +326 -208
  189. package/types/testgorilla-tgo-ui-components-overflow-menu.d.ts +276 -204
  190. package/types/testgorilla-tgo-ui-components-page-header.d.ts +67 -50
  191. package/types/testgorilla-tgo-ui-components-paginator.d.ts +103 -70
  192. package/types/testgorilla-tgo-ui-components-password-criteria.d.ts +67 -58
  193. package/types/testgorilla-tgo-ui-components-password-strength.d.ts +66 -57
  194. package/types/testgorilla-tgo-ui-components-phone-input.d.ts +217 -175
  195. package/types/testgorilla-tgo-ui-components-popover.d.ts +94 -53
  196. package/types/testgorilla-tgo-ui-components-popup-tip.d.ts +81 -44
  197. package/types/testgorilla-tgo-ui-components-progress-bar.d.ts +115 -84
  198. package/types/testgorilla-tgo-ui-components-prompt.d.ts +315 -219
  199. package/types/testgorilla-tgo-ui-components-radial-progress.d.ts +146 -107
  200. package/types/testgorilla-tgo-ui-components-radio-button.d.ts +296 -219
  201. package/types/testgorilla-tgo-ui-components-rating.d.ts +134 -95
  202. package/types/testgorilla-tgo-ui-components-scale-table.d.ts +67 -47
  203. package/types/testgorilla-tgo-ui-components-scale.d.ts +91 -66
  204. package/types/testgorilla-tgo-ui-components-segmented-bar.d.ts +118 -89
  205. package/types/testgorilla-tgo-ui-components-segmented-button.d.ts +107 -80
  206. package/types/testgorilla-tgo-ui-components-segmented-toggle.d.ts +138 -105
  207. package/types/testgorilla-tgo-ui-components-selectable-card.d.ts +90 -56
  208. package/types/testgorilla-tgo-ui-components-side-navigation.d.ts +183 -107
  209. package/types/testgorilla-tgo-ui-components-side-panel.d.ts +156 -145
  210. package/types/testgorilla-tgo-ui-components-side-sheet.d.ts +98 -89
  211. package/types/testgorilla-tgo-ui-components-skeleton.d.ts +50 -33
  212. package/types/testgorilla-tgo-ui-components-slider.d.ts +278 -198
  213. package/types/testgorilla-tgo-ui-components-snackbar.d.ts +211 -159
  214. package/types/testgorilla-tgo-ui-components-spider-chart.d.ts +140 -121
  215. package/types/testgorilla-tgo-ui-components-spinner.d.ts +93 -72
  216. package/types/testgorilla-tgo-ui-components-stepper.d.ts +480 -338
  217. package/types/testgorilla-tgo-ui-components-table.d.ts +280 -233
  218. package/types/testgorilla-tgo-ui-components-tabs.d.ts +282 -183
  219. package/types/testgorilla-tgo-ui-components-tag.d.ts +266 -193
  220. package/types/testgorilla-tgo-ui-components-toggle.d.ts +180 -132
  221. package/types/testgorilla-tgo-ui-components-tooltip.d.ts +142 -105
  222. package/types/testgorilla-tgo-ui-components-universal-skills.d.ts +165 -144
  223. package/types/testgorilla-tgo-ui-components-validation-error.d.ts +70 -51
  224. package/types/testgorilla-tgo-ui-components-write-with-ai.d.ts +210 -133
  225. package/types/testgorilla-tgo-ui.d.ts +52 -45
@@ -1,440 +1,448 @@
1
- import { FocusMonitor } from '@angular/cdk/a11y';
2
- import { NgClass, CommonModule } from '@angular/common';
3
- import * as i0 from '@angular/core';
4
- import { EventEmitter, inject, DestroyRef, NgZone, ChangeDetectorRef, ViewChild, Output, Input, HostBinding, HostListener, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
5
- import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
6
- import { NgControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
7
- import { MatRadioButton, MatRadioModule } from '@angular/material/radio';
8
- import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
9
- import { EllipseTextDirective } from '@testgorilla/tgo-ui/components/core';
10
- import { MatCheckboxModule } from '@angular/material/checkbox';
11
- import { MatInputModule } from '@angular/material/input';
12
- import { FocusVisibleDirective } from '@testgorilla/tgo-ui/components/checkbox';
13
-
14
- /* eslint-disable no-underscore-dangle */
15
- class RadioButtonComponent {
16
- onHostClick(event) {
17
- if (this._isProcessingClick) {
18
- return;
19
- }
20
- const target = event.target;
21
- const targetClasses = target?.classList?.value ?? '';
22
- const fromMediaArea = this.mediaCard && target?.closest?.('.media-card-wrapper');
23
- if (targetClasses.includes('mat-mdc-radio-button') || targetClasses.includes('mdc-form-field') || fromMediaArea) {
24
- this._isProcessingClick = true;
25
- this.radioElement._inputElement.nativeElement.click();
26
- this._isProcessingClick = false;
27
- }
28
- }
29
- get selected() {
30
- return this._selected;
31
- }
32
- set selected(selected) {
33
- this._selected = selected;
34
- }
35
- constructor() {
36
- this._isProcessingClick = false;
37
- /**
38
- * Determines whether the radio button is disabled.
39
- * Default: false.
40
- *
41
- * @type {boolean}
42
- * @memberof RadioButtonComponent
43
- */
44
- this.disabled = false;
45
- /**
46
- * Determines whether the radio button is checked.
47
- * Default: false.
48
- *
49
- * @type {boolean}
50
- * @memberof RadioButtonComponent
51
- */
52
- //@Input() selected = false;
53
- this._selected = false;
54
- /**
55
- * Determines whether the radio button can be unchecked.
56
- * Default: false.
57
- *
58
- * @type {boolean}
59
- * @memberof RadioButtonComponent
60
- */
61
- this.allowUnselect = false;
62
- /**
63
- * Determines the radio button color.
64
- * Default: Test Gorilla primary color.
65
- *
66
- * @type {string}
67
- * @memberof RadioButtonComponent
68
- */
69
- this.companyColor = null;
70
- /**
71
- * Used to group radios for unique selection.
72
- *
73
- * @type {string}
74
- * @memberof RadioButtonComponent
75
- */
76
- this.name = '';
77
- /**
78
- * Text content will be applied to the input element if present.
79
- *
80
- * @type {string}
81
- * @memberof RadioButtonComponent
82
- */
83
- this.label = '';
84
- /**
85
- * Determines whether the radio button is a multiple choice cell.
86
- * Default: false
87
- *
88
- * @type {boolean}
89
- * @memberof RadioButtonComponent
90
- */
91
- this.multiple = false;
92
- /**
93
- * Renders the radio button as a media card. The image/video/gif passed via
94
- * the `[radio-media]` content slot fills the card and the radio + label sit
95
- * on top, in the bottom-left, with a dark scrim for contrast.
96
- *
97
- * @type {boolean}
98
- * @memberof RadioButtonComponent
99
- */
100
- this.mediaCard = false;
101
- /**
102
- *
103
- * Defines the application theme
104
- *
105
- * @type {ApplicationTheme}
106
- * @memberof RadioButtonComponent
107
- */
108
- this.applicationTheme = 'light';
109
- this.testId = null;
110
- /**
111
- * A string representing the ARIA requirement for accessibility.
112
- * This attribute is used to indicate whether an input field is required for form submission.
113
- * @type {boolean}
114
- * @memberof RadioButtonComponent
115
- */
116
- this.ariaRequired = false;
117
- /**
118
- * Defines if checkbox has error
119
- *
120
- * @type {boolean}
121
- * @memberof RadioButtonComponent
122
- */
123
- this.hasError = false;
124
- /**
125
- * A string representing the ARIA requirement for accessibility.
126
- * This attribute is used to indicate whether an input field is required for form submission.
127
- * @type {string}
128
- * @memberof RadioButtonComponent
129
- */
130
- this.ariaLabelledby = '';
131
- /**
132
- * A string representing the ARIA requirement for accessibility.
133
- * This attribute is used to indicate whether an input field is required for form submission.
134
- * @type {string}
135
- * @memberof RadioButtonComponent
136
- */
137
- this.ariaDescribedby = '';
138
- /**
139
- * Truncate text if it is too long
140
- * @type {boolean}
141
- * @memberof RadioButtonComponent
142
- */
143
- this.truncateText = false;
144
- /**
145
- * Text alignment
146
- * @type {'center' | 'top'}
147
- * @memberof RadioButtonComponent
148
- */
149
- this.alignment = 'center';
150
- /**
151
- * Sets the tab index for the checkbox component.
152
- * This determines the order in which elements receive focus when the user navigates through them using the Tab key.
153
- * Default value is 0.
154
- *
155
- * @type {number}
156
- * @memberof RadioButtonComponent
157
- */
158
- this.tabIndex = 0;
159
- /**
160
- * Show tooltip when label is truncated
161
- * @type {boolean}
162
- * @memberof RadioButtonComponent
163
- */
164
- this.hideTooltipOnEllipsis = false;
165
- /**
166
- * Event emitted when the checked state of the radio button changes.
167
- *
168
- * @type {boolean}
169
- * @memberof RadioButtonComponent
170
- */
171
- this.changeRadio = new EventEmitter();
172
- this.showTooltip = false;
173
- this.origin = null;
174
- this.appliedTestId = null;
175
- this.defaultAppTheme = inject('CANOPYUI_DEFAULT_APPLICATION_THEME', {
176
- optional: true,
177
- });
178
- this.ngControl = inject(NgControl, { optional: true, self: true });
179
- this.hostNgControl = inject(NgControl, { optional: true, host: true });
180
- this.destroyRef = inject(DestroyRef);
181
- this.focusMonitor = inject(FocusMonitor);
182
- this.ngZone = inject(NgZone);
183
- this.cdr = inject(ChangeDetectorRef);
184
- this.onChange = () => { };
185
- /**
186
- * @ignore
187
- */
188
- this.onTouch = () => { };
189
- if (this.defaultAppTheme) {
190
- this.applicationTheme = this.defaultAppTheme;
191
- }
192
- if (this.ngControl !== null) {
193
- this.ngControl.valueAccessor = this;
194
- }
195
- }
196
- ngOnInit() {
197
- this.checkHost();
198
- this.classMultiple = this.setClass();
199
- }
200
- ngOnChanges(changes) {
201
- if (changes['selected']) {
202
- this.classMultiple = this.setClass();
203
- }
204
- this.setCompanyColor();
205
- this.applyTestId();
206
- }
207
- // MatRadioButton takes no attribute passthrough, so the id is set on the native input directly.
208
- applyTestId() {
209
- if (!this.radioElement || this.testId === this.appliedTestId) {
210
- return;
211
- }
212
- const radioNativeInput = this.radioElement._inputElement.nativeElement;
213
- if (this.testId) {
214
- radioNativeInput.setAttribute('data-testid', this.testId);
215
- }
216
- else {
217
- radioNativeInput.removeAttribute('data-testid');
218
- }
219
- this.appliedTestId = this.testId;
220
- }
221
- ngAfterViewInit() {
222
- this.radioElement._inputElement.nativeElement.setAttribute('role', 'radio');
223
- this.applyTestId();
224
- this.radioElement._inputElement.nativeElement.onclick = () => {
225
- this.clickRadio();
226
- };
227
- this.focusMonitor
228
- .monitor(this.radioElement._inputElement.nativeElement)
229
- .pipe(takeUntilDestroyed(this.destroyRef))
230
- .subscribe(origin => this.ngZone.run(() => {
231
- this.origin = origin;
232
- this.cdr.markForCheck();
233
- this.onFocus(origin === 'keyboard');
234
- }));
235
- }
236
- ngOnDestroy() {
237
- this.focusMonitor.stopMonitoring(this.radioElement._inputElement.nativeElement);
238
- }
239
- //Click method
240
- clickRadio() {
241
- if (this.allowUnselect) {
242
- this.radioElement.checked = !this.radioElement.checked;
243
- this._selected = this.radioElement.checked;
244
- this.classMultiple = this.setClass();
245
- this.selected = this.radioElement.checked;
246
- this.changeRadio?.emit({
247
- optionName: this.radioElement.value,
248
- optionChecked: this.radioElement.checked,
249
- });
250
- }
251
- else {
252
- if (!this.hostNgControl) {
253
- this.selected = true;
254
- }
255
- this.changeRadio.emit({ optionName: this.radioElement.value, optionChecked: true });
256
- }
257
- if (this.disabled) {
258
- this._selected = false;
259
- this.changeRadio.emit({ optionName: '', optionChecked: false });
260
- }
261
- this.onChange(this._selected);
262
- }
263
- writeValue(value) {
264
- if (typeof value === 'boolean' || value === this.value) {
265
- this.selected = value;
266
- }
267
- // The forms API calls this from outside the component's own change
268
- // detection — under OnPush the view must be marked explicitly.
269
- this.cdr.markForCheck();
270
- }
271
- registerOnChange(fn) {
272
- this.onChange = fn;
273
- }
274
- registerOnTouched(fn) {
275
- this.onTouch = fn;
276
- }
277
- setDisabledState(isDisabled) {
278
- this.disabled = isDisabled;
279
- this.cdr.markForCheck();
280
- }
281
- //Set class for multiple radio
282
- setClass() {
283
- if (this.multiple) {
284
- return this._selected ? 'multiple-checked' : 'multiple-unchecked';
285
- }
286
- return '';
287
- }
288
- onLabelEllipsisChange(isEllipsis) {
289
- this.showTooltip = isEllipsis && !this.hideTooltipOnEllipsis;
290
- }
291
- checkHost() {
292
- if (this.hostNgControl) {
293
- this.selected = this.value === this.hostNgControl.value;
294
- this.hostNgControl.valueChanges?.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {
295
- this.selected = value === this.value;
296
- this.classMultiple = this.setClass();
297
- });
298
- }
299
- }
300
- setCompanyColor() {
301
- // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- empty companyColor falls back to the theme colour
302
- this.companyColor = this.companyColor
303
- ? this.companyColor
304
- : this.applicationTheme === 'classic'
305
- ? '#46A997'
306
- : '#D410AA';
307
- }
308
- onFocus(isFocus) {
309
- setTimeout(() => {
310
- if (this.tooltipElement) {
311
- if (this.showTooltip && isFocus) {
312
- this.tooltipElement.show();
313
- }
314
- else {
315
- this.tooltipElement.hide();
316
- }
317
- }
318
- }, 0);
319
- }
320
- focus() {
321
- this.radioElement.focus();
322
- }
323
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
324
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: RadioButtonComponent, isStandalone: true, selector: "ui-radio-button", inputs: { disabled: "disabled", selected: "selected", allowUnselect: "allowUnselect", companyColor: "companyColor", name: "name", label: "label", multiple: "multiple", mediaCard: "mediaCard", value: "value", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", testId: "testId", ariaRequired: "ariaRequired", hasError: "hasError", ariaLabelledby: "ariaLabelledby", ariaDescribedby: "ariaDescribedby", truncateText: "truncateText", alignment: "alignment", tabIndex: "tabIndex", hideTooltipOnEllipsis: "hideTooltipOnEllipsis" }, outputs: { changeRadio: "changeRadio" }, host: { listeners: { "focus": "radioElement.focus()", "click": "onHostClick($event)" }, properties: { "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "style.--color": "this.companyColor" } }, viewQueries: [{ propertyName: "radioElement", first: true, predicate: ["radio"], descendants: true }, { propertyName: "tooltipElement", first: true, predicate: ["tooltip"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n #radioContainer\n tabindex=\"0\"\n [class]=\"multiple ? 'radio-container' : 'radio'\"\n [class.multiple-disabled]=\"disabled && multiple\"\n [class.media-card]=\"mediaCard\"\n [class.media-card-selected]=\"mediaCard && selected\"\n [ngClass]=\"classMultiple\"\n [attr.alignment]=\"alignment\"\n [attr.truncate-text]=\"truncateText\"\n [attr.theme]=\"applicationTheme\"\n [attr.hasError]=\"hasError\"\n (keydown.enter)=\"clickRadio(); radioContainer.focus()\"\n (keydown.space)=\"clickRadio(); radioContainer.focus()\"\n>\n @if (mediaCard) {\n <div class=\"media-card-wrapper\" aria-hidden=\"true\">\n <ng-content select=\"[radio-media]\"></ng-content>\n </div>\n }\n <mat-radio-button\n #radio\n [checked]=\"selected\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [value]=\"value\"\n class=\"radio-button\"\n [required]=\"ariaRequired\"\n [aria-label]=\"ariaLabel\"\n [aria-labelledby]=\"ariaLabelledby ? ariaLabelledby : label\"\n [aria-describedby]=\"ariaDescribedby\"\n (keydown.enter)=\"$event.preventDefault()\"\n (keydown.space)=\"$event.preventDefault()\"\n [tabIndex]=\"tabIndex\"\n >\n @if (label) {\n <span\n #tooltip=\"matTooltip\"\n class=\"label\"\n uiEllipseText\n (onChangeTextState)=\"onLabelEllipsisChange($event)\"\n [matTooltip]=\"showTooltip ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n >{{ label }}</span\n >\n }\n <ng-content select=\"[radio-label]\"></ng-content>\n </mat-radio-button>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.mat-mdc-radio-button.mat-accent{--mat-radio-checked-ripple-color: var(--color) !important;--mdc-radio-selected-focus-icon-color: var(--color) !important;--mdc-radio-selected-pressed-icon-color: var(--color) !important;--mat-radio-selected-focus-icon-color: var(--color) !important;--mat-radio-selected-pressed-icon-color: var(--color) !important;--mat-radio-selected-icon-color: var(--color) !important;--mat-radio-selected-hover-icon-color: var(--color) !important}::ng-deep .mat-mdc-radio-checked .mdc-radio__outer-circle{border-color:var(--color)!important}::ng-deep .mat-mdc-radio-checked .mdc-radio__inner-circle{background-color:var(--color)!important;border-color:var(--color)!important}::ng-deep .mat-mdc-radio-button .mat-ripple-element{background-color:var(--color)!important}::ng-deep .mat-mdc-radio-button.mat-radio-disabled.mat-radio-checked .mdc-radio__outer-circle,.mat-radio-button.mat-radio-disabled .mdc-radio__outer-circle{border-color:#888!important}::ng-deep .mat-mdc-radio-button.mat-radio-disabled .mdc-radio__inner-circle{background-color:#888!important}[theme=dark] .mat-mdc-radio-button,[theme=light] .mat-mdc-radio-button{width:100%!important}[theme=dark] ::ng-deep .mdc-form-field,[theme=dark] ::ng-deep .mat-internal-form-field,[theme=light] ::ng-deep .mdc-form-field,[theme=light] ::ng-deep .mat-internal-form-field{width:100%}[theme=dark] .mat-mdc-radio-button.mat-accent,[theme=light] .mat-mdc-radio-button.mat-accent{--mdc-radio-unselected-icon-color: #242424 !important;--mat-radio-unselected-icon-color: #242424 !important;--mat-radio-unselected-hover-icon-color: #242424 !important;--mat-radio-unselected-focus-icon-color: #242424 !important;--mat-radio-unselected-pressed-icon-color: #242424 !important}[theme=dark] ::ng-deep .mdc-radio.mdc-radio--disabled,[theme=light] ::ng-deep .mdc-radio.mdc-radio--disabled{--mdc-radio-disabled-unselected-icon-color: #919191;--mdc-radio-disabled-selected-icon-opacity: 1;--mdc-radio-disabled-unselected-icon-opacity: 1;--mat-radio-disabled-unselected-icon-color: #919191;--mat-radio-disabled-selected-icon-opacity: 1;--mat-radio-disabled-unselected-icon-opacity: 1;--color: #919191}[theme=dark] ::ng-deep .mdc-radio.mdc-radio--disabled .mdc-radio__background,[theme=light] ::ng-deep .mdc-radio.mdc-radio--disabled .mdc-radio__background{background:#e9e9e9;border-radius:100%}[theme=dark] ::ng-deep .mdc-radio__background,[theme=light] ::ng-deep .mdc-radio__background{background:#fff!important;border-radius:100%;scale:.8}[theme=dark] ::ng-deep .mdc-radio__background .mdc-radio__outer-circle,[theme=light] ::ng-deep .mdc-radio__background .mdc-radio__outer-circle{border-width:1px}[theme=dark] ::ng-deep .mat-ripple,[theme=light] ::ng-deep .mat-ripple{display:none}[theme=dark] ::ng-deep .mdc-radio__background:before,[theme=light] ::ng-deep .mdc-radio__background:before{display:none}[haserror=true] ::ng-deep .mdc-radio__background .mdc-radio__outer-circle{border-width:2px}.multiple-checked{border:1px solid var(--color);display:flex;flex-direction:row;align-items:center;gap:16px;background:var(--color);border-radius:8px}.multiple-checked ::ng-deep .mat-mdc-radio-button{width:100%;height:100%;padding:8px}.multiple-checked ::ng-deep .mat-mdc-radio-checked .mdc-radio__outer-circle{border:1px solid #ffffff;border-radius:64px;background:#fff}.multiple-checked ::ng-deep label{color:#fff;height:100%}.multiple-checked[theme=dark][hasError=false],.multiple-checked[theme=light][hasError=false]{background:#f4f4f4;border-color:#242424;outline:1px solid #242424}.multiple-checked[theme=dark][hasError=false] ::ng-deep label,.multiple-checked[theme=light][hasError=false] ::ng-deep label{color:#242424}.multiple-checked[theme=dark][hasError=true],.multiple-checked[theme=light][hasError=true]{border:1px solid #e02800;outline:1px solid #e02800;background:#fff;border-radius:10px}.multiple-checked[theme=dark][hasError=true] ::ng-deep label,.multiple-checked[theme=light][hasError=true] ::ng-deep label{color:#242424}.multiple-checked[theme=classic][hasError=true]{border:1px solid #e02800;outline:1px solid #e02800}.multiple-unchecked{border:1px solid #e0e0e0;display:flex;flex-direction:row;align-items:center;gap:16px;background:#fff;border-radius:8px}.multiple-unchecked ::ng-deep .mat-mdc-radio-button{width:100%;height:100%;padding:8px}.multiple-unchecked:hover{background:#f6f6f6;border:1px solid #e0e0e0}.multiple-unchecked ::ng-deep label{height:100%}.multiple-unchecked ::ng-deep .mat-mdc-radio-button .mdc-radio .mdc-radio__background:before{opacity:0!important}.multiple-unchecked[theme=dark][hasError=false],.multiple-unchecked[theme=light][hasError=false]{border:1px solid #919191;background:#fff}.multiple-unchecked[theme=dark][hasError=false]:not(.multiple-disabled):hover,.multiple-unchecked[theme=light][hasError=false]:not(.multiple-disabled):hover{outline:1px solid #242424;background:#fff;border-color:#242424!important}.multiple-unchecked[hasError=true]{border:1px solid #e02800;outline:1px solid #e02800;background:#fff}.multiple-unchecked[hasError=true]:not([theme=classic]){border-radius:10px}.multiple-unchecked ::ng-deep label,.multiple-checked ::ng-deep label{padding-left:0;width:fit-content;cursor:pointer}.radio-container{cursor:pointer}.radio-container .label{cursor:pointer;-webkit-user-select:none;user-select:none}.radio-button .label{cursor:pointer;-webkit-user-select:none;user-select:none;padding-left:4px}:host *[hasError=true] .mat-mdc-radio-button.mat-accent{--mdc-radio-unselected-icon-color: #e02800 !important;--mdc-radio-unselected-hover-icon-color: #e02800 !important;--mdc-radio-unselected-focus-icon-color: #e02800 !important;--mat-radio-unselected-icon-color: #e02800 !important;--mat-radio-unselected-hover-icon-color: #e02800 !important;--mat-radio-unselected-focus-icon-color: #e02800 !important}:host ::ng-deep .mat-mdc-radio-touch-target{height:40px;width:40px}.radio,.radio-container{--border-width-default-state: 4px;--border-width-animation-state: 6px;width:100%}.radio[alignment=top] ::ng-deep .mdc-form-field,.radio[alignment=top] ::ng-deep .mat-internal-form-field,.radio-container[alignment=top] ::ng-deep .mdc-form-field,.radio-container[alignment=top] ::ng-deep .mat-internal-form-field{align-items:start}.radio[alignment=top] .label,.radio-container[alignment=top] .label{margin-top:10px}.radio[truncate-text=true] .label,.radio[truncate-text=true] ::ng-deep label,.radio-container[truncate-text=true] .label,.radio-container[truncate-text=true] ::ng-deep label{-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes focus-ring-animation{0%{outline-width:var(--border-width-animation-state)}to{outline-width:var(--border-width-default-state)}}.radio-container[hasError=true]{outline:1px solid #e02800}.media-card{position:relative;overflow:hidden;border-radius:10px;cursor:pointer;background:#242424}.media-card .media-card-wrapper{display:block;width:100%;height:100%}.media-card .media-card-wrapper ::ng-deep>*{display:block;width:100%;height:100%;object-fit:cover}.media-card ::ng-deep .mat-mdc-radio-button{position:absolute;bottom:12px;left:12px;z-index:1;width:auto!important}.media-card ::ng-deep .mat-mdc-radio-button .mdc-form-field{border-radius:100px;background:#242424bf;padding-right:10px}.media-card ::ng-deep .mat-mdc-radio-button .mdc-form-field .mdc-radio{padding-right:0}.media-card ::ng-deep .mat-mdc-radio-button .mat-mdc-tooltip-trigger.label{color:#fff;font-weight:500}.media-card ::ng-deep .mdc-form-field{width:auto}.media-card[hasError=true]{outline:2px solid #e02800;outline-offset:2px}.media-card-selected{outline:2px solid #242424;outline-offset:2px}.radio .label{display:block;width:100%;cursor:pointer}::ng-deep .mat-mdc-radio-button.mat-accent.cdk-keyboard-focused{outline:none;--mat-radio-checked-ripple-color: transparent !important;--mat-radio-ripple-color: transparent !important}::ng-deep .mat-mdc-radio-button.mat-accent.cdk-keyboard-focused ::ng-deep .mdc-radio__background{outline:3px solid #242424;animation:focus-ring-animation .4s forwards}::ng-deep .mat-mdc-radio-button.mat-accent.cdk-keyboard-focused ::ng-deep .mdc-radio__background:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;outline:2px solid #ffffff;border-radius:100px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
325
- }
326
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: RadioButtonComponent, decorators: [{
327
- type: Component,
328
- args: [{ selector: 'ui-radio-button', changeDetection: ChangeDetectionStrategy.OnPush, host: {
329
- // Needs to be removed since it causes some a11y issues (https://github.com/angular/components/issues/21266).
330
- '[attr.tabindex]': 'null',
331
- '[attr.aria-label]': 'null',
332
- '[attr.aria-labelledby]': 'null',
333
- '[attr.aria-describedby]': 'null',
334
- // Note: under normal conditions focus shouldn't land on this element, however it may be
335
- // programmatically set, for example inside of a focus trap, in this case we want to forward
336
- // the focus to the mat-radio-button element.
337
- '(focus)': 'radioElement.focus()',
338
- }, imports: [NgClass, MatRadioButton, EllipseTextDirective, MatTooltip], template: "<div\n #radioContainer\n tabindex=\"0\"\n [class]=\"multiple ? 'radio-container' : 'radio'\"\n [class.multiple-disabled]=\"disabled && multiple\"\n [class.media-card]=\"mediaCard\"\n [class.media-card-selected]=\"mediaCard && selected\"\n [ngClass]=\"classMultiple\"\n [attr.alignment]=\"alignment\"\n [attr.truncate-text]=\"truncateText\"\n [attr.theme]=\"applicationTheme\"\n [attr.hasError]=\"hasError\"\n (keydown.enter)=\"clickRadio(); radioContainer.focus()\"\n (keydown.space)=\"clickRadio(); radioContainer.focus()\"\n>\n @if (mediaCard) {\n <div class=\"media-card-wrapper\" aria-hidden=\"true\">\n <ng-content select=\"[radio-media]\"></ng-content>\n </div>\n }\n <mat-radio-button\n #radio\n [checked]=\"selected\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [value]=\"value\"\n class=\"radio-button\"\n [required]=\"ariaRequired\"\n [aria-label]=\"ariaLabel\"\n [aria-labelledby]=\"ariaLabelledby ? ariaLabelledby : label\"\n [aria-describedby]=\"ariaDescribedby\"\n (keydown.enter)=\"$event.preventDefault()\"\n (keydown.space)=\"$event.preventDefault()\"\n [tabIndex]=\"tabIndex\"\n >\n @if (label) {\n <span\n #tooltip=\"matTooltip\"\n class=\"label\"\n uiEllipseText\n (onChangeTextState)=\"onLabelEllipsisChange($event)\"\n [matTooltip]=\"showTooltip ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n >{{ label }}</span\n >\n }\n <ng-content select=\"[radio-label]\"></ng-content>\n </mat-radio-button>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.mat-mdc-radio-button.mat-accent{--mat-radio-checked-ripple-color: var(--color) !important;--mdc-radio-selected-focus-icon-color: var(--color) !important;--mdc-radio-selected-pressed-icon-color: var(--color) !important;--mat-radio-selected-focus-icon-color: var(--color) !important;--mat-radio-selected-pressed-icon-color: var(--color) !important;--mat-radio-selected-icon-color: var(--color) !important;--mat-radio-selected-hover-icon-color: var(--color) !important}::ng-deep .mat-mdc-radio-checked .mdc-radio__outer-circle{border-color:var(--color)!important}::ng-deep .mat-mdc-radio-checked .mdc-radio__inner-circle{background-color:var(--color)!important;border-color:var(--color)!important}::ng-deep .mat-mdc-radio-button .mat-ripple-element{background-color:var(--color)!important}::ng-deep .mat-mdc-radio-button.mat-radio-disabled.mat-radio-checked .mdc-radio__outer-circle,.mat-radio-button.mat-radio-disabled .mdc-radio__outer-circle{border-color:#888!important}::ng-deep .mat-mdc-radio-button.mat-radio-disabled .mdc-radio__inner-circle{background-color:#888!important}[theme=dark] .mat-mdc-radio-button,[theme=light] .mat-mdc-radio-button{width:100%!important}[theme=dark] ::ng-deep .mdc-form-field,[theme=dark] ::ng-deep .mat-internal-form-field,[theme=light] ::ng-deep .mdc-form-field,[theme=light] ::ng-deep .mat-internal-form-field{width:100%}[theme=dark] .mat-mdc-radio-button.mat-accent,[theme=light] .mat-mdc-radio-button.mat-accent{--mdc-radio-unselected-icon-color: #242424 !important;--mat-radio-unselected-icon-color: #242424 !important;--mat-radio-unselected-hover-icon-color: #242424 !important;--mat-radio-unselected-focus-icon-color: #242424 !important;--mat-radio-unselected-pressed-icon-color: #242424 !important}[theme=dark] ::ng-deep .mdc-radio.mdc-radio--disabled,[theme=light] ::ng-deep .mdc-radio.mdc-radio--disabled{--mdc-radio-disabled-unselected-icon-color: #919191;--mdc-radio-disabled-selected-icon-opacity: 1;--mdc-radio-disabled-unselected-icon-opacity: 1;--mat-radio-disabled-unselected-icon-color: #919191;--mat-radio-disabled-selected-icon-opacity: 1;--mat-radio-disabled-unselected-icon-opacity: 1;--color: #919191}[theme=dark] ::ng-deep .mdc-radio.mdc-radio--disabled .mdc-radio__background,[theme=light] ::ng-deep .mdc-radio.mdc-radio--disabled .mdc-radio__background{background:#e9e9e9;border-radius:100%}[theme=dark] ::ng-deep .mdc-radio__background,[theme=light] ::ng-deep .mdc-radio__background{background:#fff!important;border-radius:100%;scale:.8}[theme=dark] ::ng-deep .mdc-radio__background .mdc-radio__outer-circle,[theme=light] ::ng-deep .mdc-radio__background .mdc-radio__outer-circle{border-width:1px}[theme=dark] ::ng-deep .mat-ripple,[theme=light] ::ng-deep .mat-ripple{display:none}[theme=dark] ::ng-deep .mdc-radio__background:before,[theme=light] ::ng-deep .mdc-radio__background:before{display:none}[haserror=true] ::ng-deep .mdc-radio__background .mdc-radio__outer-circle{border-width:2px}.multiple-checked{border:1px solid var(--color);display:flex;flex-direction:row;align-items:center;gap:16px;background:var(--color);border-radius:8px}.multiple-checked ::ng-deep .mat-mdc-radio-button{width:100%;height:100%;padding:8px}.multiple-checked ::ng-deep .mat-mdc-radio-checked .mdc-radio__outer-circle{border:1px solid #ffffff;border-radius:64px;background:#fff}.multiple-checked ::ng-deep label{color:#fff;height:100%}.multiple-checked[theme=dark][hasError=false],.multiple-checked[theme=light][hasError=false]{background:#f4f4f4;border-color:#242424;outline:1px solid #242424}.multiple-checked[theme=dark][hasError=false] ::ng-deep label,.multiple-checked[theme=light][hasError=false] ::ng-deep label{color:#242424}.multiple-checked[theme=dark][hasError=true],.multiple-checked[theme=light][hasError=true]{border:1px solid #e02800;outline:1px solid #e02800;background:#fff;border-radius:10px}.multiple-checked[theme=dark][hasError=true] ::ng-deep label,.multiple-checked[theme=light][hasError=true] ::ng-deep label{color:#242424}.multiple-checked[theme=classic][hasError=true]{border:1px solid #e02800;outline:1px solid #e02800}.multiple-unchecked{border:1px solid #e0e0e0;display:flex;flex-direction:row;align-items:center;gap:16px;background:#fff;border-radius:8px}.multiple-unchecked ::ng-deep .mat-mdc-radio-button{width:100%;height:100%;padding:8px}.multiple-unchecked:hover{background:#f6f6f6;border:1px solid #e0e0e0}.multiple-unchecked ::ng-deep label{height:100%}.multiple-unchecked ::ng-deep .mat-mdc-radio-button .mdc-radio .mdc-radio__background:before{opacity:0!important}.multiple-unchecked[theme=dark][hasError=false],.multiple-unchecked[theme=light][hasError=false]{border:1px solid #919191;background:#fff}.multiple-unchecked[theme=dark][hasError=false]:not(.multiple-disabled):hover,.multiple-unchecked[theme=light][hasError=false]:not(.multiple-disabled):hover{outline:1px solid #242424;background:#fff;border-color:#242424!important}.multiple-unchecked[hasError=true]{border:1px solid #e02800;outline:1px solid #e02800;background:#fff}.multiple-unchecked[hasError=true]:not([theme=classic]){border-radius:10px}.multiple-unchecked ::ng-deep label,.multiple-checked ::ng-deep label{padding-left:0;width:fit-content;cursor:pointer}.radio-container{cursor:pointer}.radio-container .label{cursor:pointer;-webkit-user-select:none;user-select:none}.radio-button .label{cursor:pointer;-webkit-user-select:none;user-select:none;padding-left:4px}:host *[hasError=true] .mat-mdc-radio-button.mat-accent{--mdc-radio-unselected-icon-color: #e02800 !important;--mdc-radio-unselected-hover-icon-color: #e02800 !important;--mdc-radio-unselected-focus-icon-color: #e02800 !important;--mat-radio-unselected-icon-color: #e02800 !important;--mat-radio-unselected-hover-icon-color: #e02800 !important;--mat-radio-unselected-focus-icon-color: #e02800 !important}:host ::ng-deep .mat-mdc-radio-touch-target{height:40px;width:40px}.radio,.radio-container{--border-width-default-state: 4px;--border-width-animation-state: 6px;width:100%}.radio[alignment=top] ::ng-deep .mdc-form-field,.radio[alignment=top] ::ng-deep .mat-internal-form-field,.radio-container[alignment=top] ::ng-deep .mdc-form-field,.radio-container[alignment=top] ::ng-deep .mat-internal-form-field{align-items:start}.radio[alignment=top] .label,.radio-container[alignment=top] .label{margin-top:10px}.radio[truncate-text=true] .label,.radio[truncate-text=true] ::ng-deep label,.radio-container[truncate-text=true] .label,.radio-container[truncate-text=true] ::ng-deep label{-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes focus-ring-animation{0%{outline-width:var(--border-width-animation-state)}to{outline-width:var(--border-width-default-state)}}.radio-container[hasError=true]{outline:1px solid #e02800}.media-card{position:relative;overflow:hidden;border-radius:10px;cursor:pointer;background:#242424}.media-card .media-card-wrapper{display:block;width:100%;height:100%}.media-card .media-card-wrapper ::ng-deep>*{display:block;width:100%;height:100%;object-fit:cover}.media-card ::ng-deep .mat-mdc-radio-button{position:absolute;bottom:12px;left:12px;z-index:1;width:auto!important}.media-card ::ng-deep .mat-mdc-radio-button .mdc-form-field{border-radius:100px;background:#242424bf;padding-right:10px}.media-card ::ng-deep .mat-mdc-radio-button .mdc-form-field .mdc-radio{padding-right:0}.media-card ::ng-deep .mat-mdc-radio-button .mat-mdc-tooltip-trigger.label{color:#fff;font-weight:500}.media-card ::ng-deep .mdc-form-field{width:auto}.media-card[hasError=true]{outline:2px solid #e02800;outline-offset:2px}.media-card-selected{outline:2px solid #242424;outline-offset:2px}.radio .label{display:block;width:100%;cursor:pointer}::ng-deep .mat-mdc-radio-button.mat-accent.cdk-keyboard-focused{outline:none;--mat-radio-checked-ripple-color: transparent !important;--mat-radio-ripple-color: transparent !important}::ng-deep .mat-mdc-radio-button.mat-accent.cdk-keyboard-focused ::ng-deep .mdc-radio__background{outline:3px solid #242424;animation:focus-ring-animation .4s forwards}::ng-deep .mat-mdc-radio-button.mat-accent.cdk-keyboard-focused ::ng-deep .mdc-radio__background:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;outline:2px solid #ffffff;border-radius:100px}\n"] }]
339
- }], ctorParameters: () => [], propDecorators: { onHostClick: [{
340
- type: HostListener,
341
- args: ['click', ['$event']]
342
- }], disabled: [{
343
- type: Input
344
- }], selected: [{
345
- type: Input
346
- }], allowUnselect: [{
347
- type: Input
348
- }], companyColor: [{
349
- type: HostBinding,
350
- args: ['style.--color']
351
- }, {
352
- type: Input
353
- }], name: [{
354
- type: Input
355
- }], label: [{
356
- type: Input
357
- }], multiple: [{
358
- type: Input
359
- }], mediaCard: [{
360
- type: Input
361
- }], value: [{
362
- type: Input
363
- }], applicationTheme: [{
364
- type: Input
365
- }], ariaLabel: [{
366
- type: Input
367
- }], testId: [{
368
- type: Input
369
- }], ariaRequired: [{
370
- type: Input
371
- }], hasError: [{
372
- type: Input
373
- }], ariaLabelledby: [{
374
- type: Input
375
- }], ariaDescribedby: [{
376
- type: Input
377
- }], truncateText: [{
378
- type: Input
379
- }], alignment: [{
380
- type: Input
381
- }], tabIndex: [{
382
- type: Input
383
- }], hideTooltipOnEllipsis: [{
384
- type: Input
385
- }], changeRadio: [{
386
- type: Output
387
- }], radioElement: [{
388
- type: ViewChild,
389
- args: ['radio']
390
- }], tooltipElement: [{
391
- type: ViewChild,
392
- args: ['tooltip']
393
- }] } });
394
-
395
- class RadioButtonComponentModule {
396
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: RadioButtonComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
397
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: RadioButtonComponentModule, imports: [CommonModule,
398
- MatRadioModule,
399
- FormsModule,
400
- ReactiveFormsModule,
401
- MatInputModule,
402
- EllipseTextDirective,
403
- MatTooltipModule,
404
- MatCheckboxModule,
405
- FocusVisibleDirective,
406
- RadioButtonComponent], exports: [RadioButtonComponent] }); }
407
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: RadioButtonComponentModule, imports: [CommonModule,
408
- MatRadioModule,
409
- FormsModule,
410
- ReactiveFormsModule,
411
- MatInputModule,
412
- MatTooltipModule,
413
- MatCheckboxModule,
414
- RadioButtonComponent] }); }
415
- }
416
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: RadioButtonComponentModule, decorators: [{
417
- type: NgModule,
418
- args: [{
419
- imports: [
420
- CommonModule,
421
- MatRadioModule,
422
- FormsModule,
423
- ReactiveFormsModule,
424
- MatInputModule,
425
- EllipseTextDirective,
426
- MatTooltipModule,
427
- MatCheckboxModule,
428
- FocusVisibleDirective,
429
- RadioButtonComponent,
430
- ],
431
- exports: [RadioButtonComponent],
432
- }]
433
- }] });
434
-
435
- /**
436
- * Generated bundle index. Do not edit.
437
- */
438
-
1
+ import { FocusMonitor } from "@angular/cdk/a11y";
2
+ import { CommonModule, NgClass } from "@angular/common";
3
+ import * as i0 from "@angular/core";
4
+ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, EventEmitter, HostBinding, HostListener, Input, NgModule, NgZone, Output, ViewChild, inject } from "@angular/core";
5
+ import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
6
+ import { FormsModule, NgControl, ReactiveFormsModule } from "@angular/forms";
7
+ import { MatRadioButton, MatRadioModule } from "@angular/material/radio";
8
+ import { MatTooltip, MatTooltipModule } from "@angular/material/tooltip";
9
+ import { EllipseTextDirective } from "@testgorilla/tgo-ui/components/core";
10
+ import { MatCheckboxModule } from "@angular/material/checkbox";
11
+ import { MatInputModule } from "@angular/material/input";
12
+ import { FocusVisibleDirective } from "@testgorilla/tgo-ui/components/checkbox";
13
+ var RadioButtonComponent = class RadioButtonComponent {
14
+ onHostClick(event) {
15
+ if (this._isProcessingClick) return;
16
+ const target = event.target;
17
+ const targetClasses = target?.classList?.value ?? "";
18
+ const fromMediaArea = this.mediaCard && target?.closest?.(".media-card-wrapper");
19
+ if (targetClasses.includes("mat-mdc-radio-button") || targetClasses.includes("mdc-form-field") || fromMediaArea) {
20
+ this._isProcessingClick = true;
21
+ this.radioElement._inputElement.nativeElement.click();
22
+ this._isProcessingClick = false;
23
+ }
24
+ }
25
+ get selected() {
26
+ return this._selected;
27
+ }
28
+ set selected(selected) {
29
+ this._selected = selected;
30
+ }
31
+ constructor() {
32
+ this._isProcessingClick = false;
33
+ this.disabled = false;
34
+ this._selected = false;
35
+ this.allowUnselect = false;
36
+ this.companyColor = null;
37
+ this.name = "";
38
+ this.label = "";
39
+ this.multiple = false;
40
+ this.mediaCard = false;
41
+ this.applicationTheme = "light";
42
+ this.testId = null;
43
+ this.ariaRequired = false;
44
+ this.hasError = false;
45
+ this.ariaLabelledby = "";
46
+ this.ariaDescribedby = "";
47
+ this.truncateText = false;
48
+ this.alignment = "center";
49
+ this.tabIndex = 0;
50
+ this.hideTooltipOnEllipsis = false;
51
+ this.changeRadio = new EventEmitter();
52
+ this.showTooltip = false;
53
+ this.origin = null;
54
+ this.appliedTestId = null;
55
+ this.defaultAppTheme = inject("CANOPYUI_DEFAULT_APPLICATION_THEME", { optional: true });
56
+ this.ngControl = inject(NgControl, {
57
+ optional: true,
58
+ self: true
59
+ });
60
+ this.hostNgControl = inject(NgControl, {
61
+ optional: true,
62
+ host: true
63
+ });
64
+ this.destroyRef = inject(DestroyRef);
65
+ this.focusMonitor = inject(FocusMonitor);
66
+ this.ngZone = inject(NgZone);
67
+ this.cdr = inject(ChangeDetectorRef);
68
+ this.onChange = () => {};
69
+ this.onTouch = () => {};
70
+ if (this.defaultAppTheme) this.applicationTheme = this.defaultAppTheme;
71
+ if (this.ngControl !== null) this.ngControl.valueAccessor = this;
72
+ }
73
+ ngOnInit() {
74
+ this.checkHost();
75
+ this.classMultiple = this.setClass();
76
+ }
77
+ ngOnChanges(changes) {
78
+ if (changes["selected"]) this.classMultiple = this.setClass();
79
+ this.setCompanyColor();
80
+ this.applyTestId();
81
+ }
82
+ applyTestId() {
83
+ if (!this.radioElement || this.testId === this.appliedTestId) return;
84
+ const radioNativeInput = this.radioElement._inputElement.nativeElement;
85
+ if (this.testId) radioNativeInput.setAttribute("data-testid", this.testId);
86
+ else radioNativeInput.removeAttribute("data-testid");
87
+ this.appliedTestId = this.testId;
88
+ }
89
+ ngAfterViewInit() {
90
+ this.radioElement._inputElement.nativeElement.setAttribute("role", "radio");
91
+ this.applyTestId();
92
+ this.radioElement._inputElement.nativeElement.onclick = () => {
93
+ this.clickRadio();
94
+ };
95
+ this.focusMonitor.monitor(this.radioElement._inputElement.nativeElement).pipe(takeUntilDestroyed(this.destroyRef)).subscribe((origin) => this.ngZone.run(() => {
96
+ this.origin = origin;
97
+ this.cdr.markForCheck();
98
+ this.onFocus(origin === "keyboard");
99
+ }));
100
+ }
101
+ ngOnDestroy() {
102
+ this.focusMonitor.stopMonitoring(this.radioElement._inputElement.nativeElement);
103
+ }
104
+ clickRadio() {
105
+ if (this.allowUnselect) {
106
+ this.radioElement.checked = !this.radioElement.checked;
107
+ this._selected = this.radioElement.checked;
108
+ this.classMultiple = this.setClass();
109
+ this.selected = this.radioElement.checked;
110
+ this.changeRadio?.emit({
111
+ optionName: this.radioElement.value,
112
+ optionChecked: this.radioElement.checked
113
+ });
114
+ } else {
115
+ if (!this.hostNgControl) this.selected = true;
116
+ this.changeRadio.emit({
117
+ optionName: this.radioElement.value,
118
+ optionChecked: true
119
+ });
120
+ }
121
+ if (this.disabled) {
122
+ this._selected = false;
123
+ this.changeRadio.emit({
124
+ optionName: "",
125
+ optionChecked: false
126
+ });
127
+ }
128
+ this.onChange(this._selected);
129
+ }
130
+ writeValue(value) {
131
+ if (typeof value === "boolean" || value === this.value) this.selected = value;
132
+ this.cdr.markForCheck();
133
+ }
134
+ registerOnChange(fn) {
135
+ this.onChange = fn;
136
+ }
137
+ registerOnTouched(fn) {
138
+ this.onTouch = fn;
139
+ }
140
+ setDisabledState(isDisabled) {
141
+ this.disabled = isDisabled;
142
+ this.cdr.markForCheck();
143
+ }
144
+ setClass() {
145
+ if (this.multiple) return this._selected ? "multiple-checked" : "multiple-unchecked";
146
+ return "";
147
+ }
148
+ onLabelEllipsisChange(isEllipsis) {
149
+ this.showTooltip = isEllipsis && !this.hideTooltipOnEllipsis;
150
+ }
151
+ checkHost() {
152
+ if (this.hostNgControl) {
153
+ this.selected = this.value === this.hostNgControl.value;
154
+ this.hostNgControl.valueChanges?.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {
155
+ this.selected = value === this.value;
156
+ this.classMultiple = this.setClass();
157
+ });
158
+ }
159
+ }
160
+ setCompanyColor() {
161
+ this.companyColor = this.companyColor ? this.companyColor : this.applicationTheme === "classic" ? "#46A997" : "#D410AA";
162
+ }
163
+ onFocus(isFocus) {
164
+ setTimeout(() => {
165
+ if (this.tooltipElement) {
166
+ if (this.showTooltip && isFocus) this.tooltipElement.show();
167
+ else this.tooltipElement.hide();
168
+ }
169
+ }, 0);
170
+ }
171
+ focus() {
172
+ this.radioElement.focus();
173
+ }
174
+ static {
175
+ this.ɵfac = i0.ɵɵngDeclareFactory({
176
+ minVersion: "12.0.0",
177
+ version: "22.2.4",
178
+ ngImport: i0,
179
+ type: RadioButtonComponent,
180
+ deps: [],
181
+ target: i0.ɵɵFactoryTarget.Component
182
+ });
183
+ }
184
+ static {
185
+ this.ɵcmp = i0.ɵɵngDeclareComponent({
186
+ minVersion: "17.0.0",
187
+ version: "22.2.4",
188
+ type: RadioButtonComponent,
189
+ isStandalone: true,
190
+ selector: "ui-radio-button",
191
+ inputs: {
192
+ disabled: "disabled",
193
+ selected: "selected",
194
+ allowUnselect: "allowUnselect",
195
+ companyColor: "companyColor",
196
+ name: "name",
197
+ label: "label",
198
+ multiple: "multiple",
199
+ mediaCard: "mediaCard",
200
+ value: "value",
201
+ applicationTheme: "applicationTheme",
202
+ ariaLabel: "ariaLabel",
203
+ testId: "testId",
204
+ ariaRequired: "ariaRequired",
205
+ hasError: "hasError",
206
+ ariaLabelledby: "ariaLabelledby",
207
+ ariaDescribedby: "ariaDescribedby",
208
+ truncateText: "truncateText",
209
+ alignment: "alignment",
210
+ tabIndex: "tabIndex",
211
+ hideTooltipOnEllipsis: "hideTooltipOnEllipsis"
212
+ },
213
+ outputs: { changeRadio: "changeRadio" },
214
+ host: {
215
+ listeners: {
216
+ "focus": "radioElement.focus()",
217
+ "click": "onHostClick($event)"
218
+ },
219
+ properties: {
220
+ "attr.tabindex": "null",
221
+ "attr.aria-label": "null",
222
+ "attr.aria-labelledby": "null",
223
+ "attr.aria-describedby": "null",
224
+ "style.--color": "this.companyColor"
225
+ }
226
+ },
227
+ viewQueries: [{
228
+ propertyName: "radioElement",
229
+ first: true,
230
+ predicate: ["radio"],
231
+ descendants: true
232
+ }, {
233
+ propertyName: "tooltipElement",
234
+ first: true,
235
+ predicate: ["tooltip"],
236
+ descendants: true
237
+ }],
238
+ usesOnChanges: true,
239
+ ngImport: i0,
240
+ template: "<div\n #radioContainer\n tabindex=\"0\"\n [class]=\"multiple ? 'radio-container' : 'radio'\"\n [class.multiple-disabled]=\"disabled && multiple\"\n [class.media-card]=\"mediaCard\"\n [class.media-card-selected]=\"mediaCard && selected\"\n [ngClass]=\"classMultiple\"\n [attr.alignment]=\"alignment\"\n [attr.truncate-text]=\"truncateText\"\n [attr.theme]=\"applicationTheme\"\n [attr.hasError]=\"hasError\"\n (keydown.enter)=\"clickRadio(); radioContainer.focus()\"\n (keydown.space)=\"clickRadio(); radioContainer.focus()\"\n>\n @if (mediaCard) {\n <div class=\"media-card-wrapper\" aria-hidden=\"true\">\n <ng-content select=\"[radio-media]\"></ng-content>\n </div>\n }\n <mat-radio-button\n #radio\n [checked]=\"selected\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [value]=\"value\"\n class=\"radio-button\"\n [required]=\"ariaRequired\"\n [aria-label]=\"ariaLabel\"\n [aria-labelledby]=\"ariaLabelledby ? ariaLabelledby : label\"\n [aria-describedby]=\"ariaDescribedby\"\n (keydown.enter)=\"$event.preventDefault()\"\n (keydown.space)=\"$event.preventDefault()\"\n [tabIndex]=\"tabIndex\"\n >\n @if (label) {\n <span\n #tooltip=\"matTooltip\"\n class=\"label\"\n uiEllipseText\n (onChangeTextState)=\"onLabelEllipsisChange($event)\"\n [matTooltip]=\"showTooltip ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n >{{ label }}</span\n >\n }\n <ng-content select=\"[radio-label]\"></ng-content>\n </mat-radio-button>\n</div>\n",
241
+ styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.mat-mdc-radio-button.mat-accent{--mat-radio-checked-ripple-color: var(--color) !important;--mdc-radio-selected-focus-icon-color: var(--color) !important;--mdc-radio-selected-pressed-icon-color: var(--color) !important;--mat-radio-selected-focus-icon-color: var(--color) !important;--mat-radio-selected-pressed-icon-color: var(--color) !important;--mat-radio-selected-icon-color: var(--color) !important;--mat-radio-selected-hover-icon-color: var(--color) !important}::ng-deep .mat-mdc-radio-checked .mdc-radio__outer-circle{border-color:var(--color)!important}::ng-deep .mat-mdc-radio-checked .mdc-radio__inner-circle{background-color:var(--color)!important;border-color:var(--color)!important}::ng-deep .mat-mdc-radio-button .mat-ripple-element{background-color:var(--color)!important}::ng-deep .mat-mdc-radio-button.mat-radio-disabled.mat-radio-checked .mdc-radio__outer-circle,.mat-radio-button.mat-radio-disabled .mdc-radio__outer-circle{border-color:#888!important}::ng-deep .mat-mdc-radio-button.mat-radio-disabled .mdc-radio__inner-circle{background-color:#888!important}[theme=dark] .mat-mdc-radio-button,[theme=light] .mat-mdc-radio-button{width:100%!important}[theme=dark] ::ng-deep .mdc-form-field,[theme=dark] ::ng-deep .mat-internal-form-field,[theme=light] ::ng-deep .mdc-form-field,[theme=light] ::ng-deep .mat-internal-form-field{width:100%}[theme=dark] .mat-mdc-radio-button.mat-accent,[theme=light] .mat-mdc-radio-button.mat-accent{--mdc-radio-unselected-icon-color: #242424 !important;--mat-radio-unselected-icon-color: #242424 !important;--mat-radio-unselected-hover-icon-color: #242424 !important;--mat-radio-unselected-focus-icon-color: #242424 !important;--mat-radio-unselected-pressed-icon-color: #242424 !important}[theme=dark] ::ng-deep .mdc-radio.mdc-radio--disabled,[theme=light] ::ng-deep .mdc-radio.mdc-radio--disabled{--mdc-radio-disabled-unselected-icon-color: #919191;--mdc-radio-disabled-selected-icon-opacity: 1;--mdc-radio-disabled-unselected-icon-opacity: 1;--mat-radio-disabled-unselected-icon-color: #919191;--mat-radio-disabled-selected-icon-opacity: 1;--mat-radio-disabled-unselected-icon-opacity: 1;--color: #919191}[theme=dark] ::ng-deep .mdc-radio.mdc-radio--disabled .mdc-radio__background,[theme=light] ::ng-deep .mdc-radio.mdc-radio--disabled .mdc-radio__background{background:#e9e9e9;border-radius:100%}[theme=dark] ::ng-deep .mdc-radio__background,[theme=light] ::ng-deep .mdc-radio__background{background:#fff!important;border-radius:100%;scale:.8}[theme=dark] ::ng-deep .mdc-radio__background .mdc-radio__outer-circle,[theme=light] ::ng-deep .mdc-radio__background .mdc-radio__outer-circle{border-width:1px}[theme=dark] ::ng-deep .mat-ripple,[theme=light] ::ng-deep .mat-ripple{display:none}[theme=dark] ::ng-deep .mdc-radio__background:before,[theme=light] ::ng-deep .mdc-radio__background:before{display:none}[haserror=true] ::ng-deep .mdc-radio__background .mdc-radio__outer-circle{border-width:2px}.multiple-checked{border:1px solid var(--color);display:flex;flex-direction:row;align-items:center;gap:16px;background:var(--color);border-radius:8px}.multiple-checked ::ng-deep .mat-mdc-radio-button{width:100%;height:100%;padding:8px}.multiple-checked ::ng-deep .mat-mdc-radio-checked .mdc-radio__outer-circle{border:1px solid #ffffff;border-radius:64px;background:#fff}.multiple-checked ::ng-deep .mdc-label{color:#fff;height:100%}.multiple-checked[theme=dark][hasError=false],.multiple-checked[theme=light][hasError=false]{background:#f4f4f4;border-color:#242424;outline:1px solid #242424}.multiple-checked[theme=dark][hasError=false] ::ng-deep .mdc-label,.multiple-checked[theme=light][hasError=false] ::ng-deep .mdc-label{color:#242424}.multiple-checked[theme=dark][hasError=true],.multiple-checked[theme=light][hasError=true]{border:1px solid #e02800;outline:1px solid #e02800;background:#fff;border-radius:10px}.multiple-checked[theme=dark][hasError=true] ::ng-deep .mdc-label,.multiple-checked[theme=light][hasError=true] ::ng-deep .mdc-label{color:#242424}.multiple-checked[theme=classic][hasError=true]{border:1px solid #e02800;outline:1px solid #e02800}.multiple-unchecked{border:1px solid #e0e0e0;display:flex;flex-direction:row;align-items:center;gap:16px;background:#fff;border-radius:8px}.multiple-unchecked ::ng-deep .mat-mdc-radio-button{width:100%;height:100%;padding:8px}.multiple-unchecked:hover{background:#f6f6f6;border:1px solid #e0e0e0}.multiple-unchecked ::ng-deep .mdc-label{height:100%}.multiple-unchecked ::ng-deep .mat-mdc-radio-button .mdc-radio .mdc-radio__background:before{opacity:0!important}.multiple-unchecked[theme=dark][hasError=false],.multiple-unchecked[theme=light][hasError=false]{border:1px solid #919191;background:#fff}.multiple-unchecked[theme=dark][hasError=false]:not(.multiple-disabled):hover,.multiple-unchecked[theme=light][hasError=false]:not(.multiple-disabled):hover{outline:1px solid #242424;background:#fff;border-color:#242424!important}.multiple-unchecked[hasError=true]{border:1px solid #e02800;outline:1px solid #e02800;background:#fff}.multiple-unchecked[hasError=true]:not([theme=classic]){border-radius:10px}.multiple-unchecked ::ng-deep .mdc-label,.multiple-checked ::ng-deep .mdc-label{padding-left:0;width:fit-content;cursor:pointer}.radio-container{cursor:pointer}.radio-container .label{cursor:pointer;-webkit-user-select:none;user-select:none}.radio-button .label{cursor:pointer;-webkit-user-select:none;user-select:none;padding-left:4px}:host *[hasError=true] .mat-mdc-radio-button.mat-accent{--mdc-radio-unselected-icon-color: #e02800 !important;--mdc-radio-unselected-hover-icon-color: #e02800 !important;--mdc-radio-unselected-focus-icon-color: #e02800 !important;--mat-radio-unselected-icon-color: #e02800 !important;--mat-radio-unselected-hover-icon-color: #e02800 !important;--mat-radio-unselected-focus-icon-color: #e02800 !important}:host ::ng-deep .mat-mdc-radio-touch-target{height:40px;width:40px}.radio,.radio-container{--border-width-default-state: 4px;--border-width-animation-state: 6px;width:100%}.radio[alignment=top] ::ng-deep .mdc-form-field,.radio[alignment=top] ::ng-deep .mat-internal-form-field,.radio-container[alignment=top] ::ng-deep .mdc-form-field,.radio-container[alignment=top] ::ng-deep .mat-internal-form-field{align-items:start}.radio[alignment=top] .label,.radio-container[alignment=top] .label{margin-top:10px}.radio[truncate-text=true] .label,.radio[truncate-text=true] ::ng-deep .mdc-label,.radio-container[truncate-text=true] .label,.radio-container[truncate-text=true] ::ng-deep .mdc-label{-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes focus-ring-animation{0%{outline-width:var(--border-width-animation-state)}to{outline-width:var(--border-width-default-state)}}.radio-container[hasError=true]{outline:1px solid #e02800}.media-card{position:relative;overflow:hidden;border-radius:10px;cursor:pointer;background:#242424}.media-card .media-card-wrapper{display:block;width:100%;height:100%}.media-card .media-card-wrapper ::ng-deep>*{display:block;width:100%;height:100%;object-fit:cover}.media-card ::ng-deep .mat-mdc-radio-button{position:absolute;bottom:12px;left:12px;z-index:1;width:auto!important}.media-card ::ng-deep .mat-mdc-radio-button .mdc-form-field{border-radius:100px;background:#242424bf;padding-right:10px}.media-card ::ng-deep .mat-mdc-radio-button .mdc-form-field .mdc-radio{padding-right:0}.media-card ::ng-deep .mat-mdc-radio-button .mat-mdc-tooltip-trigger.label{color:#fff;font-weight:500}.media-card ::ng-deep .mdc-form-field{width:auto}.media-card[hasError=true]{outline:2px solid #e02800;outline-offset:2px}.media-card-selected{outline:2px solid #242424;outline-offset:2px}.radio .label{display:block;width:100%;cursor:pointer}::ng-deep .mat-mdc-radio-button.mat-accent.cdk-keyboard-focused{outline:none;--mat-radio-checked-ripple-color: transparent !important;--mat-radio-ripple-color: transparent !important}::ng-deep .mat-mdc-radio-button.mat-accent.cdk-keyboard-focused ::ng-deep .mdc-radio__background{outline:3px solid #242424;animation:focus-ring-animation .4s forwards}::ng-deep .mat-mdc-radio-button.mat-accent.cdk-keyboard-focused ::ng-deep .mdc-radio__background:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;outline:2px solid #ffffff;border-radius:100px}\n"],
242
+ dependencies: [
243
+ {
244
+ kind: "directive",
245
+ type: NgClass,
246
+ selector: "[ngClass]",
247
+ inputs: ["class", "ngClass"]
248
+ },
249
+ {
250
+ kind: "component",
251
+ type: MatRadioButton,
252
+ selector: "mat-radio-button",
253
+ inputs: [
254
+ "id",
255
+ "name",
256
+ "aria-label",
257
+ "aria-labelledby",
258
+ "aria-describedby",
259
+ "disableRipple",
260
+ "tabIndex",
261
+ "checked",
262
+ "value",
263
+ "labelPosition",
264
+ "disabled",
265
+ "required",
266
+ "color",
267
+ "disabledInteractive"
268
+ ],
269
+ outputs: ["change"],
270
+ exportAs: ["matRadioButton"]
271
+ },
272
+ {
273
+ kind: "directive",
274
+ type: EllipseTextDirective,
275
+ selector: "[uiEllipseText]",
276
+ inputs: [
277
+ "isMultiline",
278
+ "maxDiffPixels",
279
+ "refresh"
280
+ ],
281
+ outputs: ["onChangeTextState"]
282
+ },
283
+ {
284
+ kind: "directive",
285
+ type: MatTooltip,
286
+ selector: "[matTooltip]",
287
+ inputs: [
288
+ "matTooltipPosition",
289
+ "matTooltipPositionAtOrigin",
290
+ "matTooltipDisabled",
291
+ "matTooltipShowDelay",
292
+ "matTooltipHideDelay",
293
+ "matTooltipTouchGestures",
294
+ "matTooltip",
295
+ "matTooltipClass"
296
+ ],
297
+ exportAs: ["matTooltip"]
298
+ }
299
+ ],
300
+ changeDetection: i0.ChangeDetectionStrategy.OnPush
301
+ });
302
+ }
303
+ };
304
+ i0.ɵɵngDeclareClassMetadata({
305
+ minVersion: "12.0.0",
306
+ version: "22.2.4",
307
+ ngImport: i0,
308
+ type: RadioButtonComponent,
309
+ decorators: [{
310
+ type: Component,
311
+ args: [{
312
+ selector: "ui-radio-button",
313
+ changeDetection: ChangeDetectionStrategy.OnPush,
314
+ host: {
315
+ "[attr.tabindex]": "null",
316
+ "[attr.aria-label]": "null",
317
+ "[attr.aria-labelledby]": "null",
318
+ "[attr.aria-describedby]": "null",
319
+ "(focus)": "radioElement.focus()"
320
+ },
321
+ imports: [
322
+ NgClass,
323
+ MatRadioButton,
324
+ EllipseTextDirective,
325
+ MatTooltip
326
+ ],
327
+ template: "<div\n #radioContainer\n tabindex=\"0\"\n [class]=\"multiple ? 'radio-container' : 'radio'\"\n [class.multiple-disabled]=\"disabled && multiple\"\n [class.media-card]=\"mediaCard\"\n [class.media-card-selected]=\"mediaCard && selected\"\n [ngClass]=\"classMultiple\"\n [attr.alignment]=\"alignment\"\n [attr.truncate-text]=\"truncateText\"\n [attr.theme]=\"applicationTheme\"\n [attr.hasError]=\"hasError\"\n (keydown.enter)=\"clickRadio(); radioContainer.focus()\"\n (keydown.space)=\"clickRadio(); radioContainer.focus()\"\n>\n @if (mediaCard) {\n <div class=\"media-card-wrapper\" aria-hidden=\"true\">\n <ng-content select=\"[radio-media]\"></ng-content>\n </div>\n }\n <mat-radio-button\n #radio\n [checked]=\"selected\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [value]=\"value\"\n class=\"radio-button\"\n [required]=\"ariaRequired\"\n [aria-label]=\"ariaLabel\"\n [aria-labelledby]=\"ariaLabelledby ? ariaLabelledby : label\"\n [aria-describedby]=\"ariaDescribedby\"\n (keydown.enter)=\"$event.preventDefault()\"\n (keydown.space)=\"$event.preventDefault()\"\n [tabIndex]=\"tabIndex\"\n >\n @if (label) {\n <span\n #tooltip=\"matTooltip\"\n class=\"label\"\n uiEllipseText\n (onChangeTextState)=\"onLabelEllipsisChange($event)\"\n [matTooltip]=\"showTooltip ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n >{{ label }}</span\n >\n }\n <ng-content select=\"[radio-label]\"></ng-content>\n </mat-radio-button>\n</div>\n",
328
+ styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.mat-mdc-radio-button.mat-accent{--mat-radio-checked-ripple-color: var(--color) !important;--mdc-radio-selected-focus-icon-color: var(--color) !important;--mdc-radio-selected-pressed-icon-color: var(--color) !important;--mat-radio-selected-focus-icon-color: var(--color) !important;--mat-radio-selected-pressed-icon-color: var(--color) !important;--mat-radio-selected-icon-color: var(--color) !important;--mat-radio-selected-hover-icon-color: var(--color) !important}::ng-deep .mat-mdc-radio-checked .mdc-radio__outer-circle{border-color:var(--color)!important}::ng-deep .mat-mdc-radio-checked .mdc-radio__inner-circle{background-color:var(--color)!important;border-color:var(--color)!important}::ng-deep .mat-mdc-radio-button .mat-ripple-element{background-color:var(--color)!important}::ng-deep .mat-mdc-radio-button.mat-radio-disabled.mat-radio-checked .mdc-radio__outer-circle,.mat-radio-button.mat-radio-disabled .mdc-radio__outer-circle{border-color:#888!important}::ng-deep .mat-mdc-radio-button.mat-radio-disabled .mdc-radio__inner-circle{background-color:#888!important}[theme=dark] .mat-mdc-radio-button,[theme=light] .mat-mdc-radio-button{width:100%!important}[theme=dark] ::ng-deep .mdc-form-field,[theme=dark] ::ng-deep .mat-internal-form-field,[theme=light] ::ng-deep .mdc-form-field,[theme=light] ::ng-deep .mat-internal-form-field{width:100%}[theme=dark] .mat-mdc-radio-button.mat-accent,[theme=light] .mat-mdc-radio-button.mat-accent{--mdc-radio-unselected-icon-color: #242424 !important;--mat-radio-unselected-icon-color: #242424 !important;--mat-radio-unselected-hover-icon-color: #242424 !important;--mat-radio-unselected-focus-icon-color: #242424 !important;--mat-radio-unselected-pressed-icon-color: #242424 !important}[theme=dark] ::ng-deep .mdc-radio.mdc-radio--disabled,[theme=light] ::ng-deep .mdc-radio.mdc-radio--disabled{--mdc-radio-disabled-unselected-icon-color: #919191;--mdc-radio-disabled-selected-icon-opacity: 1;--mdc-radio-disabled-unselected-icon-opacity: 1;--mat-radio-disabled-unselected-icon-color: #919191;--mat-radio-disabled-selected-icon-opacity: 1;--mat-radio-disabled-unselected-icon-opacity: 1;--color: #919191}[theme=dark] ::ng-deep .mdc-radio.mdc-radio--disabled .mdc-radio__background,[theme=light] ::ng-deep .mdc-radio.mdc-radio--disabled .mdc-radio__background{background:#e9e9e9;border-radius:100%}[theme=dark] ::ng-deep .mdc-radio__background,[theme=light] ::ng-deep .mdc-radio__background{background:#fff!important;border-radius:100%;scale:.8}[theme=dark] ::ng-deep .mdc-radio__background .mdc-radio__outer-circle,[theme=light] ::ng-deep .mdc-radio__background .mdc-radio__outer-circle{border-width:1px}[theme=dark] ::ng-deep .mat-ripple,[theme=light] ::ng-deep .mat-ripple{display:none}[theme=dark] ::ng-deep .mdc-radio__background:before,[theme=light] ::ng-deep .mdc-radio__background:before{display:none}[haserror=true] ::ng-deep .mdc-radio__background .mdc-radio__outer-circle{border-width:2px}.multiple-checked{border:1px solid var(--color);display:flex;flex-direction:row;align-items:center;gap:16px;background:var(--color);border-radius:8px}.multiple-checked ::ng-deep .mat-mdc-radio-button{width:100%;height:100%;padding:8px}.multiple-checked ::ng-deep .mat-mdc-radio-checked .mdc-radio__outer-circle{border:1px solid #ffffff;border-radius:64px;background:#fff}.multiple-checked ::ng-deep .mdc-label{color:#fff;height:100%}.multiple-checked[theme=dark][hasError=false],.multiple-checked[theme=light][hasError=false]{background:#f4f4f4;border-color:#242424;outline:1px solid #242424}.multiple-checked[theme=dark][hasError=false] ::ng-deep .mdc-label,.multiple-checked[theme=light][hasError=false] ::ng-deep .mdc-label{color:#242424}.multiple-checked[theme=dark][hasError=true],.multiple-checked[theme=light][hasError=true]{border:1px solid #e02800;outline:1px solid #e02800;background:#fff;border-radius:10px}.multiple-checked[theme=dark][hasError=true] ::ng-deep .mdc-label,.multiple-checked[theme=light][hasError=true] ::ng-deep .mdc-label{color:#242424}.multiple-checked[theme=classic][hasError=true]{border:1px solid #e02800;outline:1px solid #e02800}.multiple-unchecked{border:1px solid #e0e0e0;display:flex;flex-direction:row;align-items:center;gap:16px;background:#fff;border-radius:8px}.multiple-unchecked ::ng-deep .mat-mdc-radio-button{width:100%;height:100%;padding:8px}.multiple-unchecked:hover{background:#f6f6f6;border:1px solid #e0e0e0}.multiple-unchecked ::ng-deep .mdc-label{height:100%}.multiple-unchecked ::ng-deep .mat-mdc-radio-button .mdc-radio .mdc-radio__background:before{opacity:0!important}.multiple-unchecked[theme=dark][hasError=false],.multiple-unchecked[theme=light][hasError=false]{border:1px solid #919191;background:#fff}.multiple-unchecked[theme=dark][hasError=false]:not(.multiple-disabled):hover,.multiple-unchecked[theme=light][hasError=false]:not(.multiple-disabled):hover{outline:1px solid #242424;background:#fff;border-color:#242424!important}.multiple-unchecked[hasError=true]{border:1px solid #e02800;outline:1px solid #e02800;background:#fff}.multiple-unchecked[hasError=true]:not([theme=classic]){border-radius:10px}.multiple-unchecked ::ng-deep .mdc-label,.multiple-checked ::ng-deep .mdc-label{padding-left:0;width:fit-content;cursor:pointer}.radio-container{cursor:pointer}.radio-container .label{cursor:pointer;-webkit-user-select:none;user-select:none}.radio-button .label{cursor:pointer;-webkit-user-select:none;user-select:none;padding-left:4px}:host *[hasError=true] .mat-mdc-radio-button.mat-accent{--mdc-radio-unselected-icon-color: #e02800 !important;--mdc-radio-unselected-hover-icon-color: #e02800 !important;--mdc-radio-unselected-focus-icon-color: #e02800 !important;--mat-radio-unselected-icon-color: #e02800 !important;--mat-radio-unselected-hover-icon-color: #e02800 !important;--mat-radio-unselected-focus-icon-color: #e02800 !important}:host ::ng-deep .mat-mdc-radio-touch-target{height:40px;width:40px}.radio,.radio-container{--border-width-default-state: 4px;--border-width-animation-state: 6px;width:100%}.radio[alignment=top] ::ng-deep .mdc-form-field,.radio[alignment=top] ::ng-deep .mat-internal-form-field,.radio-container[alignment=top] ::ng-deep .mdc-form-field,.radio-container[alignment=top] ::ng-deep .mat-internal-form-field{align-items:start}.radio[alignment=top] .label,.radio-container[alignment=top] .label{margin-top:10px}.radio[truncate-text=true] .label,.radio[truncate-text=true] ::ng-deep .mdc-label,.radio-container[truncate-text=true] .label,.radio-container[truncate-text=true] ::ng-deep .mdc-label{-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes focus-ring-animation{0%{outline-width:var(--border-width-animation-state)}to{outline-width:var(--border-width-default-state)}}.radio-container[hasError=true]{outline:1px solid #e02800}.media-card{position:relative;overflow:hidden;border-radius:10px;cursor:pointer;background:#242424}.media-card .media-card-wrapper{display:block;width:100%;height:100%}.media-card .media-card-wrapper ::ng-deep>*{display:block;width:100%;height:100%;object-fit:cover}.media-card ::ng-deep .mat-mdc-radio-button{position:absolute;bottom:12px;left:12px;z-index:1;width:auto!important}.media-card ::ng-deep .mat-mdc-radio-button .mdc-form-field{border-radius:100px;background:#242424bf;padding-right:10px}.media-card ::ng-deep .mat-mdc-radio-button .mdc-form-field .mdc-radio{padding-right:0}.media-card ::ng-deep .mat-mdc-radio-button .mat-mdc-tooltip-trigger.label{color:#fff;font-weight:500}.media-card ::ng-deep .mdc-form-field{width:auto}.media-card[hasError=true]{outline:2px solid #e02800;outline-offset:2px}.media-card-selected{outline:2px solid #242424;outline-offset:2px}.radio .label{display:block;width:100%;cursor:pointer}::ng-deep .mat-mdc-radio-button.mat-accent.cdk-keyboard-focused{outline:none;--mat-radio-checked-ripple-color: transparent !important;--mat-radio-ripple-color: transparent !important}::ng-deep .mat-mdc-radio-button.mat-accent.cdk-keyboard-focused ::ng-deep .mdc-radio__background{outline:3px solid #242424;animation:focus-ring-animation .4s forwards}::ng-deep .mat-mdc-radio-button.mat-accent.cdk-keyboard-focused ::ng-deep .mdc-radio__background:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;outline:2px solid #ffffff;border-radius:100px}\n"]
329
+ }]
330
+ }],
331
+ ctorParameters: () => [],
332
+ propDecorators: {
333
+ onHostClick: [{
334
+ type: HostListener,
335
+ args: ["click", ["$event"]]
336
+ }],
337
+ disabled: [{ type: Input }],
338
+ selected: [{ type: Input }],
339
+ allowUnselect: [{ type: Input }],
340
+ companyColor: [{
341
+ type: HostBinding,
342
+ args: ["style.--color"]
343
+ }, { type: Input }],
344
+ name: [{ type: Input }],
345
+ label: [{ type: Input }],
346
+ multiple: [{ type: Input }],
347
+ mediaCard: [{ type: Input }],
348
+ value: [{ type: Input }],
349
+ applicationTheme: [{ type: Input }],
350
+ ariaLabel: [{ type: Input }],
351
+ testId: [{ type: Input }],
352
+ ariaRequired: [{ type: Input }],
353
+ hasError: [{ type: Input }],
354
+ ariaLabelledby: [{ type: Input }],
355
+ ariaDescribedby: [{ type: Input }],
356
+ truncateText: [{ type: Input }],
357
+ alignment: [{ type: Input }],
358
+ tabIndex: [{ type: Input }],
359
+ hideTooltipOnEllipsis: [{ type: Input }],
360
+ changeRadio: [{ type: Output }],
361
+ radioElement: [{
362
+ type: ViewChild,
363
+ args: ["radio"]
364
+ }],
365
+ tooltipElement: [{
366
+ type: ViewChild,
367
+ args: ["tooltip"]
368
+ }]
369
+ }
370
+ });
371
+ var RadioButtonComponentModule = class RadioButtonComponentModule {
372
+ static {
373
+ this.ɵfac = i0.ɵɵngDeclareFactory({
374
+ minVersion: "12.0.0",
375
+ version: "22.2.4",
376
+ ngImport: i0,
377
+ type: RadioButtonComponentModule,
378
+ deps: [],
379
+ target: i0.ɵɵFactoryTarget.NgModule
380
+ });
381
+ }
382
+ static {
383
+ this.ɵmod = i0.ɵɵngDeclareNgModule({
384
+ minVersion: "14.0.0",
385
+ version: "22.2.4",
386
+ ngImport: i0,
387
+ type: RadioButtonComponentModule,
388
+ imports: [
389
+ CommonModule,
390
+ MatRadioModule,
391
+ FormsModule,
392
+ ReactiveFormsModule,
393
+ MatInputModule,
394
+ EllipseTextDirective,
395
+ MatTooltipModule,
396
+ MatCheckboxModule,
397
+ FocusVisibleDirective,
398
+ RadioButtonComponent
399
+ ],
400
+ exports: [RadioButtonComponent]
401
+ });
402
+ }
403
+ static {
404
+ this.ɵinj = i0.ɵɵngDeclareInjector({
405
+ minVersion: "12.0.0",
406
+ version: "22.2.4",
407
+ ngImport: i0,
408
+ type: RadioButtonComponentModule,
409
+ imports: [
410
+ CommonModule,
411
+ MatRadioModule,
412
+ FormsModule,
413
+ ReactiveFormsModule,
414
+ MatInputModule,
415
+ MatTooltipModule,
416
+ MatCheckboxModule,
417
+ RadioButtonComponent
418
+ ]
419
+ });
420
+ }
421
+ };
422
+ i0.ɵɵngDeclareClassMetadata({
423
+ minVersion: "12.0.0",
424
+ version: "22.2.4",
425
+ ngImport: i0,
426
+ type: RadioButtonComponentModule,
427
+ decorators: [{
428
+ type: NgModule,
429
+ args: [{
430
+ imports: [
431
+ CommonModule,
432
+ MatRadioModule,
433
+ FormsModule,
434
+ ReactiveFormsModule,
435
+ MatInputModule,
436
+ EllipseTextDirective,
437
+ MatTooltipModule,
438
+ MatCheckboxModule,
439
+ FocusVisibleDirective,
440
+ RadioButtonComponent
441
+ ],
442
+ exports: [RadioButtonComponent]
443
+ }]
444
+ }]
445
+ });
439
446
  export { RadioButtonComponent, RadioButtonComponentModule };
440
- //# sourceMappingURL=testgorilla-tgo-ui-components-radio-button.mjs.map
447
+
448
+ //# sourceMappingURL=testgorilla-tgo-ui-components-radio-button.mjs.map