@testgorilla/tgo-ui 11.22.3 → 12.0.0

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,275 +1,338 @@
1
- import { trigger, transition, animate, style } from '@angular/animations';
2
- import { NgClass, AsyncPipe, UpperCasePipe, CommonModule } from '@angular/common';
3
- import * as i0 from '@angular/core';
4
- import { EventEmitter, HostBinding, Output, Input, Optional, Inject, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
5
- import { ButtonComponent, ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';
6
- import { alertBarsUtil, UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';
7
- import * as i1 from '@testgorilla/tgo-ui/components/icon';
8
- import { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';
9
- import { SpinnerComponent, SpinnerComponentModule } from '@testgorilla/tgo-ui/components/spinner';
10
-
11
- class AlertBannerComponent {
12
- constructor(defaultAppTheme) {
13
- this.defaultAppTheme = defaultAppTheme;
14
- /**
15
- * Alert Banner type
16
- *
17
- * @type {AlertBarType}
18
- * @default 'success'
19
- * @memberof AlertBannerComponent
20
- */
21
- this.alertType = 'success';
22
- /**
23
- * Alert Banner variant
24
- *
25
- * @type {AlertVariant}
26
- * @default 'banner'
27
- * @memberof AlertBannerComponent
28
- */
29
- this.alertVariant = 'banner';
30
- /**
31
- * Alert banner message
32
- *
33
- * @memberof AlertBannerComponent
34
- */
35
- this.message = '';
36
- /**
37
- * Include dismmiss button
38
- *
39
- * @default true
40
- * @memberof AlertBannerComponent
41
- */
42
- this.includeDismissButton = true;
43
- /**
44
- * Include shadow or not
45
- *
46
- * @default false
47
- * @memberof AlertBannerComponent
48
- */
49
- this.shadow = false;
50
- /**
51
- * Link text that will appended at the end of message
52
- *
53
- * @default ''
54
- * @memberof AlertBannerComponent
55
- */
56
- this.linkText = '';
57
- /**
58
- * Link target
59
- *
60
- * @type {@type {LinkTargetType}}
61
- * @default '_blank'
62
- * @memberof AlertBannerComponent
63
- */
64
- this.linkTarget = '_blank';
65
- /**
66
- * Optional action buttons displayed on the right side of the banner.
67
- *
68
- * @type {AlertBannerAction[]}
69
- * @default []
70
- * @memberof AlertBannerComponent
71
- */
72
- this.actions = [];
73
- /**
74
- *
75
- * Defines the application theme
76
- *
77
- * @type {ApplicationTheme}
78
- * @default 'light'
79
- * @memberof AlertBannerComponent
80
- */
81
- this.applicationTheme = 'light';
82
- /**
83
- * Alert density
84
- *
85
- * @type {AlertBannerSize}
86
- * @default 'default'
87
- * @memberof AlertBannerComponent
88
- */
89
- this.size = 'default';
90
- /**
91
- * Close button tooltip
92
- *
93
- * @type {string}
94
- * @default ''
95
- * @memberof AlertBannerComponent
96
- */
97
- this.closeButtonTooltip = '';
98
- this.testId = null;
99
- /**
100
- * Shows icon
101
- *
102
- * @type {boolean}
103
- * @default true
104
- * @memberof AlertBannerComponent
105
- */
106
- this.hasIcon = true;
107
- /**
108
- * Controls loading state for spinner visibility.
109
- *
110
- * @type {boolean}
111
- * @default false
112
- * @memberof AlertBannerComponent
113
- */
114
- this.isLoading = false;
115
- /**
116
- * Sets the alert banner position
117
- *
118
- * @type {boolean}
119
- * @default false
120
- * @memberof AlertBannerComponent
121
- */
122
- this.fixed = false;
123
- /**
124
- * A string representing the ARIA requirement for accessibility.
125
- * This attribute is used to indicate whether an input field is required for form submission.
126
- * @type {string}
127
- * @memberof AlertBannerComponent
128
- */
129
- this.ariaDescribedby = '';
130
- this.secondaryAlerts = [];
131
- /**
132
- * Emitted when the user clicks the built-in dismiss button.
133
- *
134
- * @memberof AlertBannerComponent
135
- */
136
- this.dismiss = new EventEmitter();
137
- this.visible = true;
138
- this.dismissAlertBanner = false;
139
- if (defaultAppTheme) {
140
- this.applicationTheme = defaultAppTheme;
141
- }
142
- }
143
- get dismissButtonTestId() {
144
- return this.testId ? `${this.testId}-dismiss` : null;
145
- }
146
- get isDismissed() {
147
- return this.dismissAlertBanner;
148
- }
149
- get iconSize() {
150
- return this.size === 'small' ? '16' : '24';
151
- }
152
- ngOnInit() {
153
- this.updateBanner();
154
- }
155
- ngOnChanges(changes) {
156
- if (changes['alertType']) {
157
- this.updateBanner();
158
- }
159
- }
160
- updateBanner() {
161
- this.iconName = alertBarsUtil.setIcon(this.alertType);
162
- this.iconColor = alertBarsUtil.setIconColor(this.alertType);
163
- this.position = alertBarsUtil.setPosition(this.fixed);
164
- this.fullWidth = this.isFullWidth ?? this.alertVariant === 'banner';
165
- this.cssClass = alertBarsUtil.setCssClass(this.fullWidth, this.alertType, this.position, this.alertVariant);
166
- }
167
- //Hide snackbar when dismiss button is clicked
168
- dismissClick() {
169
- this.visible = false;
170
- this.dismiss.emit();
171
- setTimeout(() => {
172
- this.dismissAlertBanner = true;
173
- }, 200);
174
- }
175
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: AlertBannerComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
176
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: AlertBannerComponent, isStandalone: true, selector: "ui-alert-banner", inputs: { alertType: "alertType", alertVariant: "alertVariant", message: "message", includeDismissButton: "includeDismissButton", shadow: "shadow", linkText: "linkText", linkUrl: "linkUrl", linkTarget: "linkTarget", actions: "actions", applicationTheme: "applicationTheme", size: "size", isFullWidth: "isFullWidth", closeButtonTooltip: "closeButtonTooltip", testId: "testId", hasIcon: "hasIcon", isLoading: "isLoading", fixed: "fixed", ariaDescribedby: "ariaDescribedby", secondaryAlerts: "secondaryAlerts" }, outputs: { dismiss: "dismiss" }, host: { properties: { "class.display-none": "this.isDismissed" } }, usesOnChanges: true, ngImport: i0, template: "@if (visible) {\n <div\n [ngClass]=\"cssClass\"\n [@openClose]\n role=\"alert\"\n class=\"alert-container\"\n [attr.theme]=\"applicationTheme\"\n [class.shadow]=\"alertVariant === 'callout' && shadow\"\n [class.size-small]=\"size === 'small'\"\n [attr.aria-live]=\"alertType === 'error' || alertType === 'warning' ? 'assertive' : 'polite'\"\n [attr.aria-describedby]=\"'describedby'\"\n [attr.aria-labelledby]=\"'labelledby'\"\n [attr.data-testid]=\"testId\"\n [tabIndex]=\"0\"\n >\n <span style=\"position: absolute; left: -9999px\" id=\"labelledby\">{{\n 'ALERT_BANNER.' + (alertType | uppercase) | uiTranslate | async\n }}</span>\n <span [style.display]=\"'none'\" id=\"describedby\">{{ ariaDescribedby }}</span>\n <div class=\"primary-alert-container\">\n <div class=\"alert-text\">\n @if (hasIcon) {\n <ui-icon\n class=\"left-icon\"\n [name]=\"iconName\"\n [size]=\"iconSize\"\n [color]=\"iconColor\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-icon>\n }\n @if (isLoading) {\n <ui-spinner\n class=\"loading-spinner\"\n size=\"small\"\n [isLoader]=\"false\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-spinner>\n }\n <span [innerHTML]=\"message\"></span>\n <span class=\"projected-content\"><ng-content></ng-content></span>\n @if (!!linkText) {\n <a [target]=\"linkTarget\" [href]=\"linkUrl\">{{ linkText }}</a>\n }\n </div>\n @if (actions.length > 0) {\n <div class=\"actions-container\">\n @for (action of actions; track $index) {\n <ui-button\n class=\"action-button\"\n [variant]=\"action.variant ?? 'text-inline'\"\n [label]=\"action.label\"\n [size]=\"action.size ?? 'medium'\"\n [disabled]=\"!!action.disabled\"\n [applicationTheme]=\"applicationTheme\"\n (buttonClickEvent)=\"action.onClick($event)\"\n [testId]=\"action.testId ?? null\"\n [fullWidth]=\"true\"\n ></ui-button>\n }\n </div>\n }\n @let closeLabel = (closeButtonTooltip || ('COMMON.CLOSE' | uiTranslate | async))!;\n @if (includeDismissButton && applicationTheme === 'classic') {\n <ui-button\n variant=\"text\"\n [justIcon]=\"true\"\n class=\"close\"\n iconName=\"Close\"\n [ariaLabel]=\"closeLabel\"\n [tooltip]=\"closeLabel\"\n (buttonClickEvent)=\"dismissClick()\"\n [testId]=\"dismissButtonTestId\"\n ></ui-button>\n }\n @if (includeDismissButton && applicationTheme !== 'classic') {\n <ui-button\n class=\"right-icon\"\n [variant]=\"'icon-button'\"\n [applicationTheme]=\"applicationTheme\"\n [iconName]=\"'Close'\"\n [size]=\"'small'\"\n [justIcon]=\"true\"\n [tooltip]=\"closeLabel\"\n [ariaLabel]=\"closeLabel\"\n [testId]=\"dismissButtonTestId\"\n (click)=\"dismissClick()\"\n ></ui-button>\n }\n </div>\n @if (secondaryAlerts.length > 0) {\n <div class=\"secondary-alerts-container\">\n <ul>\n @for (alert of secondaryAlerts; track alert) {\n <li class=\"secondary-alert-item\" [innerHTML]=\"alert\"></li>\n }\n </ul>\n </div>\n }\n </div>\n}\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}:host{display:flex;width:100%;justify-content:center}:host .snackbar-container{max-width:600px}:host .alert-container,:host .snackbar-container{margin:0 auto;display:flex;padding:0 14px;border-radius:4px;align-items:center;justify-content:space-between;opacity:1;min-height:48px}:host .alert-container.fixed,:host .snackbar-container.fixed{position:fixed}:host .alert-container.static,:host .snackbar-container.static{position:relative}:host .alert-container ui-icon,:host .snackbar-container ui-icon{margin-right:14px}:host .alert-container ui-button,:host .snackbar-container ui-button{margin-left:14px}:host .alert-container ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container ::ng-deep button.mat-mdc-unelevated-button.big{padding:0;min-width:auto}:host .alert-container .alert-text,:host .alert-container .snackbar-text,:host .snackbar-container .alert-text,:host .snackbar-container .snackbar-text{display:flex;align-items:center;color:#000}:host .alert-container .alert-text a,:host .alert-container .snackbar-text a,:host .snackbar-container .alert-text a,:host .snackbar-container .snackbar-text a{color:#000;text-decoration:underline;font-weight:700}:host .alert-container .alert-text a:hover,:host .alert-container .alert-text a:visited,:host .alert-container .alert-text a:focus,:host .alert-container .snackbar-text a:hover,:host .alert-container .snackbar-text a:visited,:host .alert-container .snackbar-text a:focus,:host .snackbar-container .alert-text a:hover,:host .snackbar-container .alert-text a:visited,:host .snackbar-container .alert-text a:focus,:host .snackbar-container .snackbar-text a:hover,:host .snackbar-container .snackbar-text a:visited,:host .snackbar-container .snackbar-text a:focus{text-decoration:none}:host .alert-container.success,:host .snackbar-container.success{background-color:#cbd6cb}:host .alert-container.info,:host .snackbar-container.info{background-color:#c8d7de}:host .alert-container.warning,:host .snackbar-container.warning{background-color:#f0d6bb}:host .alert-container.error,:host .snackbar-container.error{background-color:#e3c3c6}:host .alert-container[theme=dark].success,:host .alert-container[theme=light].success,:host .snackbar-container[theme=dark].success,:host .snackbar-container[theme=light].success{background-color:#aae47a}:host .alert-container[theme=dark].info,:host .alert-container[theme=light].info,:host .snackbar-container[theme=dark].info,:host .snackbar-container[theme=light].info{background-color:#d9e8ff}:host .alert-container[theme=dark].warning,:host .alert-container[theme=light].warning,:host .snackbar-container[theme=dark].warning,:host .snackbar-container[theme=light].warning{background-color:#ffe1b3}:host .alert-container[theme=dark].error,:host .alert-container[theme=light].error,:host .snackbar-container[theme=dark].error,:host .snackbar-container[theme=light].error{background-color:#ffac9a}:host .alert-container[theme=dark].ai,:host .alert-container[theme=light].ai,:host .snackbar-container[theme=dark].ai,:host .snackbar-container[theme=light].ai{background-color:#fff2fc;border:1px solid #ffe6fa;padding:12px 16px}:host .alert-container[theme=dark].ai ::ng-deep button.mat-mdc-unelevated-button.big,:host .alert-container[theme=light].ai ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container[theme=dark].ai ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container[theme=light].ai ::ng-deep button.mat-mdc-unelevated-button.big{padding:12px 24px}::ng-deep .display-none{display:none!important}@media(max-width:600px){:host .alert-container,:host .snackbar-container{padding:8px 14px}}:host .alert-container{max-width:1312px;flex-direction:column}:host .alert-container.fixed{top:0;z-index:98}:host .alert-container.full-width{width:100%;min-width:100%}:host .alert-container.size-small{min-height:32px;padding:0 10px;font-size:12px}:host .alert-container.size-small a{margin-left:5px}:host .alert-container.size-small .loading-spinner{margin-right:6px}:host .alert-container.size-small .primary-alert-container{gap:6px}:host .alert-container.size-small .actions-container{gap:6px}:host .alert-container.size-small .secondary-alerts-container{padding-left:6px;padding-bottom:12px}:host .alert-container a{margin-left:7px}:host .alert-container .projected-content ::ng-deep a{color:#000;text-decoration:none;font-weight:700}:host .alert-container .projected-content ::ng-deep a:hover,:host .alert-container .projected-content ::ng-deep a:focus{text-decoration:underline}:host .alert-container[theme=dark] .alert-text,:host .alert-container[theme=light] .alert-text{padding:12px 0}:host .alert-container[theme=dark].banner,:host .alert-container[theme=light].banner{border-radius:0}:host .alert-container[theme=dark].callout,:host .alert-container[theme=light].callout{border-radius:10px}:host .alert-container[theme=dark].shadow,:host .alert-container[theme=light].shadow{box-shadow:0 4px 16px #2424240a}:host .alert-container[theme=dark] .left-icon,:host .alert-container[theme=light] .left-icon{margin-right:8px}:host .alert-container[theme=dark] .right-icon,:host .alert-container[theme=light] .right-icon{cursor:pointer;margin-left:0;margin-right:2px}:host .alert-container[theme=dark].size-small.callout,:host .alert-container[theme=light].size-small.callout{border-radius:8px}:host .alert-container[theme=dark].size-small .alert-text,:host .alert-container[theme=light].size-small .alert-text{padding:8px 0}:host .alert-container[theme=dark].size-small .left-icon,:host .alert-container[theme=light].size-small .left-icon{margin-right:6px}:host .alert-container .loading-spinner{margin-right:8px;display:inline-flex;vertical-align:middle}:host .alert-container .primary-alert-container{display:flex;justify-content:space-between;align-items:center;width:100%;gap:8px}:host .alert-container .actions-container{display:flex;align-items:center;gap:8px;white-space:nowrap}:host .alert-container .actions-container ui-button{margin-left:0}:host .alert-container .secondary-alerts-container{padding-left:8px;padding-bottom:16px;display:flex;width:100%;flex-direction:column}:host .alert-container.ai .alert-text{padding:0}@media(max-width:600px){:host .alert-container.ai .primary-alert-container{flex-direction:column;align-items:stretch}:host .alert-container.ai .actions-container ui-button{width:100%}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i1.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: SpinnerComponent, selector: "ui-spinner", inputs: ["size", "isLoader", "text", "applicationTheme", "iconName", "iconSize"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "trailingIconName", "trailingIconFilled", "disabled", "loading", "loadingWithLabel", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaExpanded", "ariaControls", "ariaPressed", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled", "testId"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], animations: [
177
- trigger('openClose', [
178
- transition(':enter', [animate('0.2s ease-out', style({ opacity: 1 }))]),
179
- transition(':leave', [animate('0.2s ease-in', style({ opacity: 0 }))]),
180
- ]),
181
- ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
182
- }
183
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: AlertBannerComponent, decorators: [{
184
- type: Component,
185
- args: [{ selector: 'ui-alert-banner', animations: [
186
- trigger('openClose', [
187
- transition(':enter', [animate('0.2s ease-out', style({ opacity: 1 }))]),
188
- transition(':leave', [animate('0.2s ease-in', style({ opacity: 0 }))]),
189
- ]),
190
- ], changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, IconComponentModule, SpinnerComponent, ButtonComponent, AsyncPipe, UpperCasePipe, UiTranslatePipe], template: "@if (visible) {\n <div\n [ngClass]=\"cssClass\"\n [@openClose]\n role=\"alert\"\n class=\"alert-container\"\n [attr.theme]=\"applicationTheme\"\n [class.shadow]=\"alertVariant === 'callout' && shadow\"\n [class.size-small]=\"size === 'small'\"\n [attr.aria-live]=\"alertType === 'error' || alertType === 'warning' ? 'assertive' : 'polite'\"\n [attr.aria-describedby]=\"'describedby'\"\n [attr.aria-labelledby]=\"'labelledby'\"\n [attr.data-testid]=\"testId\"\n [tabIndex]=\"0\"\n >\n <span style=\"position: absolute; left: -9999px\" id=\"labelledby\">{{\n 'ALERT_BANNER.' + (alertType | uppercase) | uiTranslate | async\n }}</span>\n <span [style.display]=\"'none'\" id=\"describedby\">{{ ariaDescribedby }}</span>\n <div class=\"primary-alert-container\">\n <div class=\"alert-text\">\n @if (hasIcon) {\n <ui-icon\n class=\"left-icon\"\n [name]=\"iconName\"\n [size]=\"iconSize\"\n [color]=\"iconColor\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-icon>\n }\n @if (isLoading) {\n <ui-spinner\n class=\"loading-spinner\"\n size=\"small\"\n [isLoader]=\"false\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-spinner>\n }\n <span [innerHTML]=\"message\"></span>\n <span class=\"projected-content\"><ng-content></ng-content></span>\n @if (!!linkText) {\n <a [target]=\"linkTarget\" [href]=\"linkUrl\">{{ linkText }}</a>\n }\n </div>\n @if (actions.length > 0) {\n <div class=\"actions-container\">\n @for (action of actions; track $index) {\n <ui-button\n class=\"action-button\"\n [variant]=\"action.variant ?? 'text-inline'\"\n [label]=\"action.label\"\n [size]=\"action.size ?? 'medium'\"\n [disabled]=\"!!action.disabled\"\n [applicationTheme]=\"applicationTheme\"\n (buttonClickEvent)=\"action.onClick($event)\"\n [testId]=\"action.testId ?? null\"\n [fullWidth]=\"true\"\n ></ui-button>\n }\n </div>\n }\n @let closeLabel = (closeButtonTooltip || ('COMMON.CLOSE' | uiTranslate | async))!;\n @if (includeDismissButton && applicationTheme === 'classic') {\n <ui-button\n variant=\"text\"\n [justIcon]=\"true\"\n class=\"close\"\n iconName=\"Close\"\n [ariaLabel]=\"closeLabel\"\n [tooltip]=\"closeLabel\"\n (buttonClickEvent)=\"dismissClick()\"\n [testId]=\"dismissButtonTestId\"\n ></ui-button>\n }\n @if (includeDismissButton && applicationTheme !== 'classic') {\n <ui-button\n class=\"right-icon\"\n [variant]=\"'icon-button'\"\n [applicationTheme]=\"applicationTheme\"\n [iconName]=\"'Close'\"\n [size]=\"'small'\"\n [justIcon]=\"true\"\n [tooltip]=\"closeLabel\"\n [ariaLabel]=\"closeLabel\"\n [testId]=\"dismissButtonTestId\"\n (click)=\"dismissClick()\"\n ></ui-button>\n }\n </div>\n @if (secondaryAlerts.length > 0) {\n <div class=\"secondary-alerts-container\">\n <ul>\n @for (alert of secondaryAlerts; track alert) {\n <li class=\"secondary-alert-item\" [innerHTML]=\"alert\"></li>\n }\n </ul>\n </div>\n }\n </div>\n}\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}:host{display:flex;width:100%;justify-content:center}:host .snackbar-container{max-width:600px}:host .alert-container,:host .snackbar-container{margin:0 auto;display:flex;padding:0 14px;border-radius:4px;align-items:center;justify-content:space-between;opacity:1;min-height:48px}:host .alert-container.fixed,:host .snackbar-container.fixed{position:fixed}:host .alert-container.static,:host .snackbar-container.static{position:relative}:host .alert-container ui-icon,:host .snackbar-container ui-icon{margin-right:14px}:host .alert-container ui-button,:host .snackbar-container ui-button{margin-left:14px}:host .alert-container ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container ::ng-deep button.mat-mdc-unelevated-button.big{padding:0;min-width:auto}:host .alert-container .alert-text,:host .alert-container .snackbar-text,:host .snackbar-container .alert-text,:host .snackbar-container .snackbar-text{display:flex;align-items:center;color:#000}:host .alert-container .alert-text a,:host .alert-container .snackbar-text a,:host .snackbar-container .alert-text a,:host .snackbar-container .snackbar-text a{color:#000;text-decoration:underline;font-weight:700}:host .alert-container .alert-text a:hover,:host .alert-container .alert-text a:visited,:host .alert-container .alert-text a:focus,:host .alert-container .snackbar-text a:hover,:host .alert-container .snackbar-text a:visited,:host .alert-container .snackbar-text a:focus,:host .snackbar-container .alert-text a:hover,:host .snackbar-container .alert-text a:visited,:host .snackbar-container .alert-text a:focus,:host .snackbar-container .snackbar-text a:hover,:host .snackbar-container .snackbar-text a:visited,:host .snackbar-container .snackbar-text a:focus{text-decoration:none}:host .alert-container.success,:host .snackbar-container.success{background-color:#cbd6cb}:host .alert-container.info,:host .snackbar-container.info{background-color:#c8d7de}:host .alert-container.warning,:host .snackbar-container.warning{background-color:#f0d6bb}:host .alert-container.error,:host .snackbar-container.error{background-color:#e3c3c6}:host .alert-container[theme=dark].success,:host .alert-container[theme=light].success,:host .snackbar-container[theme=dark].success,:host .snackbar-container[theme=light].success{background-color:#aae47a}:host .alert-container[theme=dark].info,:host .alert-container[theme=light].info,:host .snackbar-container[theme=dark].info,:host .snackbar-container[theme=light].info{background-color:#d9e8ff}:host .alert-container[theme=dark].warning,:host .alert-container[theme=light].warning,:host .snackbar-container[theme=dark].warning,:host .snackbar-container[theme=light].warning{background-color:#ffe1b3}:host .alert-container[theme=dark].error,:host .alert-container[theme=light].error,:host .snackbar-container[theme=dark].error,:host .snackbar-container[theme=light].error{background-color:#ffac9a}:host .alert-container[theme=dark].ai,:host .alert-container[theme=light].ai,:host .snackbar-container[theme=dark].ai,:host .snackbar-container[theme=light].ai{background-color:#fff2fc;border:1px solid #ffe6fa;padding:12px 16px}:host .alert-container[theme=dark].ai ::ng-deep button.mat-mdc-unelevated-button.big,:host .alert-container[theme=light].ai ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container[theme=dark].ai ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container[theme=light].ai ::ng-deep button.mat-mdc-unelevated-button.big{padding:12px 24px}::ng-deep .display-none{display:none!important}@media(max-width:600px){:host .alert-container,:host .snackbar-container{padding:8px 14px}}:host .alert-container{max-width:1312px;flex-direction:column}:host .alert-container.fixed{top:0;z-index:98}:host .alert-container.full-width{width:100%;min-width:100%}:host .alert-container.size-small{min-height:32px;padding:0 10px;font-size:12px}:host .alert-container.size-small a{margin-left:5px}:host .alert-container.size-small .loading-spinner{margin-right:6px}:host .alert-container.size-small .primary-alert-container{gap:6px}:host .alert-container.size-small .actions-container{gap:6px}:host .alert-container.size-small .secondary-alerts-container{padding-left:6px;padding-bottom:12px}:host .alert-container a{margin-left:7px}:host .alert-container .projected-content ::ng-deep a{color:#000;text-decoration:none;font-weight:700}:host .alert-container .projected-content ::ng-deep a:hover,:host .alert-container .projected-content ::ng-deep a:focus{text-decoration:underline}:host .alert-container[theme=dark] .alert-text,:host .alert-container[theme=light] .alert-text{padding:12px 0}:host .alert-container[theme=dark].banner,:host .alert-container[theme=light].banner{border-radius:0}:host .alert-container[theme=dark].callout,:host .alert-container[theme=light].callout{border-radius:10px}:host .alert-container[theme=dark].shadow,:host .alert-container[theme=light].shadow{box-shadow:0 4px 16px #2424240a}:host .alert-container[theme=dark] .left-icon,:host .alert-container[theme=light] .left-icon{margin-right:8px}:host .alert-container[theme=dark] .right-icon,:host .alert-container[theme=light] .right-icon{cursor:pointer;margin-left:0;margin-right:2px}:host .alert-container[theme=dark].size-small.callout,:host .alert-container[theme=light].size-small.callout{border-radius:8px}:host .alert-container[theme=dark].size-small .alert-text,:host .alert-container[theme=light].size-small .alert-text{padding:8px 0}:host .alert-container[theme=dark].size-small .left-icon,:host .alert-container[theme=light].size-small .left-icon{margin-right:6px}:host .alert-container .loading-spinner{margin-right:8px;display:inline-flex;vertical-align:middle}:host .alert-container .primary-alert-container{display:flex;justify-content:space-between;align-items:center;width:100%;gap:8px}:host .alert-container .actions-container{display:flex;align-items:center;gap:8px;white-space:nowrap}:host .alert-container .actions-container ui-button{margin-left:0}:host .alert-container .secondary-alerts-container{padding-left:8px;padding-bottom:16px;display:flex;width:100%;flex-direction:column}:host .alert-container.ai .alert-text{padding:0}@media(max-width:600px){:host .alert-container.ai .primary-alert-container{flex-direction:column;align-items:stretch}:host .alert-container.ai .actions-container ui-button{width:100%}}\n"] }]
191
- }], ctorParameters: () => [{ type: undefined, decorators: [{
192
- type: Optional
193
- }, {
194
- type: Inject,
195
- args: ['CANOPYUI_DEFAULT_APPLICATION_THEME']
196
- }] }], propDecorators: { alertType: [{
197
- type: Input
198
- }], alertVariant: [{
199
- type: Input
200
- }], message: [{
201
- type: Input
202
- }], includeDismissButton: [{
203
- type: Input
204
- }], shadow: [{
205
- type: Input
206
- }], linkText: [{
207
- type: Input
208
- }], linkUrl: [{
209
- type: Input
210
- }], linkTarget: [{
211
- type: Input
212
- }], actions: [{
213
- type: Input
214
- }], applicationTheme: [{
215
- type: Input
216
- }], size: [{
217
- type: Input
218
- }], isFullWidth: [{
219
- type: Input
220
- }], closeButtonTooltip: [{
221
- type: Input
222
- }], testId: [{
223
- type: Input
224
- }], hasIcon: [{
225
- type: Input
226
- }], isLoading: [{
227
- type: Input
228
- }], fixed: [{
229
- type: Input
230
- }], ariaDescribedby: [{
231
- type: Input
232
- }], secondaryAlerts: [{
233
- type: Input
234
- }], dismiss: [{
235
- type: Output
236
- }], isDismissed: [{
237
- type: HostBinding,
238
- args: ['class.display-none']
239
- }] } });
240
-
241
- class AlertBannerComponentModule {
242
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: AlertBannerComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
243
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: AlertBannerComponentModule, imports: [CommonModule,
244
- ButtonComponentModule,
245
- IconComponentModule,
246
- SpinnerComponentModule,
247
- UiTranslatePipe,
248
- AlertBannerComponent], exports: [AlertBannerComponent] }); }
249
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: AlertBannerComponentModule, imports: [CommonModule,
250
- ButtonComponentModule,
251
- IconComponentModule,
252
- SpinnerComponentModule,
253
- AlertBannerComponent] }); }
254
- }
255
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: AlertBannerComponentModule, decorators: [{
256
- type: NgModule,
257
- args: [{
258
- imports: [
259
- CommonModule,
260
- ButtonComponentModule,
261
- IconComponentModule,
262
- SpinnerComponentModule,
263
- UiTranslatePipe,
264
- AlertBannerComponent,
265
- ],
266
- exports: [AlertBannerComponent],
267
- }]
268
- }] });
269
-
270
- /**
271
- * Generated bundle index. Do not edit.
272
- */
273
-
1
+ import { animate, style, transition, trigger } from "@angular/animations";
2
+ import { AsyncPipe, CommonModule, NgClass, UpperCasePipe } from "@angular/common";
3
+ import * as i0 from "@angular/core";
4
+ import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Inject, Input, NgModule, Optional, Output } from "@angular/core";
5
+ import { ButtonComponent, ButtonComponentModule } from "@testgorilla/tgo-ui/components/button";
6
+ import { UiTranslatePipe, alertBarsUtil } from "@testgorilla/tgo-ui/components/core";
7
+ import * as i1 from "@testgorilla/tgo-ui/components/icon";
8
+ import { IconComponentModule } from "@testgorilla/tgo-ui/components/icon";
9
+ import { SpinnerComponent, SpinnerComponentModule } from "@testgorilla/tgo-ui/components/spinner";
10
+ var AlertBannerComponent = class AlertBannerComponent {
11
+ constructor(defaultAppTheme) {
12
+ this.defaultAppTheme = defaultAppTheme;
13
+ this.alertType = "success";
14
+ this.alertVariant = "banner";
15
+ this.message = "";
16
+ this.includeDismissButton = true;
17
+ this.shadow = false;
18
+ this.linkText = "";
19
+ this.linkTarget = "_blank";
20
+ this.actions = [];
21
+ this.applicationTheme = "light";
22
+ this.size = "default";
23
+ this.closeButtonTooltip = "";
24
+ this.testId = null;
25
+ this.hasIcon = true;
26
+ this.isLoading = false;
27
+ this.fixed = false;
28
+ this.ariaDescribedby = "";
29
+ this.secondaryAlerts = [];
30
+ this.dismiss = new EventEmitter();
31
+ this.visible = true;
32
+ this.dismissAlertBanner = false;
33
+ if (defaultAppTheme) this.applicationTheme = defaultAppTheme;
34
+ }
35
+ get dismissButtonTestId() {
36
+ return this.testId ? `${this.testId}-dismiss` : null;
37
+ }
38
+ get isDismissed() {
39
+ return this.dismissAlertBanner;
40
+ }
41
+ get iconSize() {
42
+ return this.size === "small" ? "16" : "24";
43
+ }
44
+ ngOnInit() {
45
+ this.updateBanner();
46
+ }
47
+ ngOnChanges(changes) {
48
+ if (changes["alertType"]) this.updateBanner();
49
+ }
50
+ updateBanner() {
51
+ this.iconName = alertBarsUtil.setIcon(this.alertType);
52
+ this.iconColor = alertBarsUtil.setIconColor(this.alertType);
53
+ this.position = alertBarsUtil.setPosition(this.fixed);
54
+ this.fullWidth = this.isFullWidth ?? this.alertVariant === "banner";
55
+ this.cssClass = alertBarsUtil.setCssClass(this.fullWidth, this.alertType, this.position, this.alertVariant);
56
+ }
57
+ dismissClick() {
58
+ this.visible = false;
59
+ this.dismiss.emit();
60
+ setTimeout(() => {
61
+ this.dismissAlertBanner = true;
62
+ }, 200);
63
+ }
64
+ static {
65
+ this.ɵfac = i0.ɵɵngDeclareFactory({
66
+ minVersion: "12.0.0",
67
+ version: "22.2.4",
68
+ ngImport: i0,
69
+ type: AlertBannerComponent,
70
+ deps: [{
71
+ token: "CANOPYUI_DEFAULT_APPLICATION_THEME",
72
+ optional: true
73
+ }],
74
+ target: i0.ɵɵFactoryTarget.Component
75
+ });
76
+ }
77
+ static {
78
+ this.ɵcmp = i0.ɵɵngDeclareComponent({
79
+ minVersion: "17.0.0",
80
+ version: "22.2.4",
81
+ type: AlertBannerComponent,
82
+ isStandalone: true,
83
+ selector: "ui-alert-banner",
84
+ inputs: {
85
+ alertType: "alertType",
86
+ alertVariant: "alertVariant",
87
+ message: "message",
88
+ includeDismissButton: "includeDismissButton",
89
+ shadow: "shadow",
90
+ linkText: "linkText",
91
+ linkUrl: "linkUrl",
92
+ linkTarget: "linkTarget",
93
+ actions: "actions",
94
+ applicationTheme: "applicationTheme",
95
+ size: "size",
96
+ isFullWidth: "isFullWidth",
97
+ closeButtonTooltip: "closeButtonTooltip",
98
+ testId: "testId",
99
+ hasIcon: "hasIcon",
100
+ isLoading: "isLoading",
101
+ fixed: "fixed",
102
+ ariaDescribedby: "ariaDescribedby",
103
+ secondaryAlerts: "secondaryAlerts"
104
+ },
105
+ outputs: { dismiss: "dismiss" },
106
+ host: { properties: { "class.display-none": "this.isDismissed" } },
107
+ usesOnChanges: true,
108
+ ngImport: i0,
109
+ template: "@if (visible) {\n <div\n [ngClass]=\"cssClass\"\n [@openClose]\n role=\"alert\"\n class=\"alert-container\"\n [attr.theme]=\"applicationTheme\"\n [class.shadow]=\"alertVariant === 'callout' && shadow\"\n [class.size-small]=\"size === 'small'\"\n [attr.aria-live]=\"alertType === 'error' || alertType === 'warning' ? 'assertive' : 'polite'\"\n [attr.aria-describedby]=\"'describedby'\"\n [attr.aria-labelledby]=\"'labelledby'\"\n [attr.data-testid]=\"testId\"\n [tabIndex]=\"0\"\n >\n <span style=\"position: absolute; left: -9999px\" id=\"labelledby\">{{\n 'ALERT_BANNER.' + (alertType | uppercase) | uiTranslate | async\n }}</span>\n <span [style.display]=\"'none'\" id=\"describedby\">{{ ariaDescribedby }}</span>\n <div class=\"primary-alert-container\">\n <div class=\"alert-text\">\n @if (hasIcon) {\n <ui-icon\n class=\"left-icon\"\n [name]=\"iconName\"\n [size]=\"iconSize\"\n [color]=\"iconColor\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-icon>\n }\n @if (isLoading) {\n <ui-spinner\n class=\"loading-spinner\"\n size=\"small\"\n [isLoader]=\"false\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-spinner>\n }\n <span [innerHTML]=\"message\"></span>\n <span class=\"projected-content\"><ng-content></ng-content></span>\n @if (!!linkText) {\n <a [target]=\"linkTarget\" [href]=\"linkUrl\">{{ linkText }}</a>\n }\n </div>\n @if (actions.length > 0) {\n <div class=\"actions-container\">\n @for (action of actions; track $index) {\n <ui-button\n class=\"action-button\"\n [variant]=\"action.variant ?? 'text-inline'\"\n [label]=\"action.label\"\n [size]=\"action.size ?? 'medium'\"\n [disabled]=\"!!action.disabled\"\n [applicationTheme]=\"applicationTheme\"\n (buttonClickEvent)=\"action.onClick($event)\"\n [testId]=\"action.testId ?? null\"\n [fullWidth]=\"true\"\n ></ui-button>\n }\n </div>\n }\n @let closeLabel = (closeButtonTooltip || ('COMMON.CLOSE' | uiTranslate | async))!;\n @if (includeDismissButton && applicationTheme === 'classic') {\n <ui-button\n variant=\"text\"\n [justIcon]=\"true\"\n class=\"close\"\n iconName=\"Close\"\n [ariaLabel]=\"closeLabel\"\n [tooltip]=\"closeLabel\"\n (buttonClickEvent)=\"dismissClick()\"\n [testId]=\"dismissButtonTestId\"\n ></ui-button>\n }\n @if (includeDismissButton && applicationTheme !== 'classic') {\n <ui-button\n class=\"right-icon\"\n [variant]=\"'icon-button'\"\n [applicationTheme]=\"applicationTheme\"\n [iconName]=\"'Close'\"\n [size]=\"'small'\"\n [justIcon]=\"true\"\n [tooltip]=\"closeLabel\"\n [ariaLabel]=\"closeLabel\"\n [testId]=\"dismissButtonTestId\"\n (click)=\"dismissClick()\"\n ></ui-button>\n }\n </div>\n @if (secondaryAlerts.length > 0) {\n <div class=\"secondary-alerts-container\">\n <ul>\n @for (alert of secondaryAlerts; track alert) {\n <li class=\"secondary-alert-item\" [innerHTML]=\"alert\"></li>\n }\n </ul>\n </div>\n }\n </div>\n}\n",
110
+ 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}:host{display:flex;width:100%;justify-content:center}:host .snackbar-container{max-width:600px}:host .alert-container,:host .snackbar-container{margin:0 auto;display:flex;padding:0 14px;border-radius:4px;align-items:center;justify-content:space-between;opacity:1;min-height:48px}:host .alert-container.fixed,:host .snackbar-container.fixed{position:fixed}:host .alert-container.static,:host .snackbar-container.static{position:relative}:host .alert-container ui-icon,:host .snackbar-container ui-icon{margin-right:14px}:host .alert-container ui-button,:host .snackbar-container ui-button{margin-left:14px}:host .alert-container ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container ::ng-deep button.mat-mdc-unelevated-button.big{padding:0;min-width:auto}:host .alert-container .alert-text,:host .alert-container .snackbar-text,:host .snackbar-container .alert-text,:host .snackbar-container .snackbar-text{display:flex;align-items:center;color:#000}:host .alert-container .alert-text a,:host .alert-container .snackbar-text a,:host .snackbar-container .alert-text a,:host .snackbar-container .snackbar-text a{color:#000;text-decoration:underline;font-weight:700}:host .alert-container .alert-text a:hover,:host .alert-container .alert-text a:visited,:host .alert-container .alert-text a:focus,:host .alert-container .snackbar-text a:hover,:host .alert-container .snackbar-text a:visited,:host .alert-container .snackbar-text a:focus,:host .snackbar-container .alert-text a:hover,:host .snackbar-container .alert-text a:visited,:host .snackbar-container .alert-text a:focus,:host .snackbar-container .snackbar-text a:hover,:host .snackbar-container .snackbar-text a:visited,:host .snackbar-container .snackbar-text a:focus{text-decoration:none}:host .alert-container.success,:host .snackbar-container.success{background-color:#cbd6cb}:host .alert-container.info,:host .snackbar-container.info{background-color:#c8d7de}:host .alert-container.warning,:host .snackbar-container.warning{background-color:#f0d6bb}:host .alert-container.error,:host .snackbar-container.error{background-color:#e3c3c6}:host .alert-container[theme=dark].success,:host .alert-container[theme=light].success,:host .snackbar-container[theme=dark].success,:host .snackbar-container[theme=light].success{background-color:#aae47a}:host .alert-container[theme=dark].info,:host .alert-container[theme=light].info,:host .snackbar-container[theme=dark].info,:host .snackbar-container[theme=light].info{background-color:#d9e8ff}:host .alert-container[theme=dark].warning,:host .alert-container[theme=light].warning,:host .snackbar-container[theme=dark].warning,:host .snackbar-container[theme=light].warning{background-color:#ffe1b3}:host .alert-container[theme=dark].error,:host .alert-container[theme=light].error,:host .snackbar-container[theme=dark].error,:host .snackbar-container[theme=light].error{background-color:#ffac9a}:host .alert-container[theme=dark].ai,:host .alert-container[theme=light].ai,:host .snackbar-container[theme=dark].ai,:host .snackbar-container[theme=light].ai{background-color:#fff2fc;border:1px solid #ffe6fa;padding:12px 16px}:host .alert-container[theme=dark].ai ::ng-deep button.mat-mdc-unelevated-button.big,:host .alert-container[theme=light].ai ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container[theme=dark].ai ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container[theme=light].ai ::ng-deep button.mat-mdc-unelevated-button.big{padding:12px 24px}::ng-deep .display-none{display:none!important}@media(max-width:600px){:host .alert-container,:host .snackbar-container{padding:8px 14px}}:host .alert-container{max-width:1312px;flex-direction:column}:host .alert-container.fixed{top:0;z-index:98}:host .alert-container.full-width{width:100%;min-width:100%}:host .alert-container.size-small{min-height:32px;padding:0 10px;font-size:12px}:host .alert-container.size-small a{margin-left:5px}:host .alert-container.size-small .loading-spinner{margin-right:6px}:host .alert-container.size-small .primary-alert-container{gap:6px}:host .alert-container.size-small .actions-container{gap:6px}:host .alert-container.size-small .secondary-alerts-container{padding-left:6px;padding-bottom:12px}:host .alert-container a{margin-left:7px}:host .alert-container .projected-content ::ng-deep a{color:#000;text-decoration:none;font-weight:700}:host .alert-container .projected-content ::ng-deep a:hover,:host .alert-container .projected-content ::ng-deep a:focus{text-decoration:underline}:host .alert-container[theme=dark] .alert-text,:host .alert-container[theme=light] .alert-text{padding:12px 0}:host .alert-container[theme=dark].banner,:host .alert-container[theme=light].banner{border-radius:0}:host .alert-container[theme=dark].callout,:host .alert-container[theme=light].callout{border-radius:10px}:host .alert-container[theme=dark].shadow,:host .alert-container[theme=light].shadow{box-shadow:0 4px 16px #2424240a}:host .alert-container[theme=dark] .left-icon,:host .alert-container[theme=light] .left-icon{margin-right:8px}:host .alert-container[theme=dark] .right-icon,:host .alert-container[theme=light] .right-icon{cursor:pointer;margin-left:0;margin-right:2px}:host .alert-container[theme=dark].size-small.callout,:host .alert-container[theme=light].size-small.callout{border-radius:8px}:host .alert-container[theme=dark].size-small .alert-text,:host .alert-container[theme=light].size-small .alert-text{padding:8px 0}:host .alert-container[theme=dark].size-small .left-icon,:host .alert-container[theme=light].size-small .left-icon{margin-right:6px}:host .alert-container .loading-spinner{margin-right:8px;display:inline-flex;vertical-align:middle}:host .alert-container .primary-alert-container{display:flex;justify-content:space-between;align-items:center;width:100%;gap:8px}:host .alert-container .actions-container{display:flex;align-items:center;gap:8px;white-space:nowrap}:host .alert-container .actions-container ui-button{margin-left:0}:host .alert-container .secondary-alerts-container{padding-left:8px;padding-bottom:16px;display:flex;width:100%;flex-direction:column}:host .alert-container.ai .alert-text{padding:0}@media(max-width:600px){:host .alert-container.ai .primary-alert-container{flex-direction:column;align-items:stretch}:host .alert-container.ai .actions-container ui-button{width:100%}}\n"],
111
+ dependencies: [
112
+ {
113
+ kind: "directive",
114
+ type: NgClass,
115
+ selector: "[ngClass]",
116
+ inputs: ["class", "ngClass"]
117
+ },
118
+ {
119
+ kind: "ngmodule",
120
+ type: IconComponentModule
121
+ },
122
+ {
123
+ kind: "component",
124
+ type: i1.IconComponent,
125
+ selector: "ui-icon",
126
+ inputs: [
127
+ "size",
128
+ "cssClass",
129
+ "name",
130
+ "color",
131
+ "filled",
132
+ "toggleIconStyle",
133
+ "applicationTheme",
134
+ "useFullIconName"
135
+ ]
136
+ },
137
+ {
138
+ kind: "component",
139
+ type: SpinnerComponent,
140
+ selector: "ui-spinner",
141
+ inputs: [
142
+ "size",
143
+ "isLoader",
144
+ "text",
145
+ "applicationTheme",
146
+ "iconName",
147
+ "iconSize"
148
+ ]
149
+ },
150
+ {
151
+ kind: "component",
152
+ type: ButtonComponent,
153
+ selector: "ui-button",
154
+ inputs: [
155
+ "size",
156
+ "variant",
157
+ "label",
158
+ "iconPosition",
159
+ "justIcon",
160
+ "iconName",
161
+ "trailingIconName",
162
+ "trailingIconFilled",
163
+ "disabled",
164
+ "loading",
165
+ "loadingWithLabel",
166
+ "fullWidth",
167
+ "url",
168
+ "urlTarget",
169
+ "value",
170
+ "tooltip",
171
+ "isPremium",
172
+ "type",
173
+ "companyColor",
174
+ "buttonBadgeConfig",
175
+ "applicationTheme",
176
+ "disabledScaleOnClick",
177
+ "ariaLabel",
178
+ "ariaExpanded",
179
+ "ariaControls",
180
+ "ariaPressed",
181
+ "ariaRequired",
182
+ "ariaLabelledby",
183
+ "ariaDescribedby",
184
+ "preventDefault",
185
+ "hasBackground",
186
+ "tooltipPosition",
187
+ "role",
188
+ "iconFilled",
189
+ "testId"
190
+ ],
191
+ outputs: ["buttonClickEvent", "buttonHoverEvent"]
192
+ },
193
+ {
194
+ kind: "pipe",
195
+ type: AsyncPipe,
196
+ name: "async"
197
+ },
198
+ {
199
+ kind: "pipe",
200
+ type: UpperCasePipe,
201
+ name: "uppercase"
202
+ },
203
+ {
204
+ kind: "pipe",
205
+ type: UiTranslatePipe,
206
+ name: "uiTranslate"
207
+ }
208
+ ],
209
+ animations: [trigger("openClose", [transition(":enter", [animate("0.2s ease-out", style({ opacity: 1 }))]), transition(":leave", [animate("0.2s ease-in", style({ opacity: 0 }))])])],
210
+ changeDetection: i0.ChangeDetectionStrategy.OnPush
211
+ });
212
+ }
213
+ };
214
+ i0.ɵɵngDeclareClassMetadata({
215
+ minVersion: "12.0.0",
216
+ version: "22.2.4",
217
+ ngImport: i0,
218
+ type: AlertBannerComponent,
219
+ decorators: [{
220
+ type: Component,
221
+ args: [{
222
+ selector: "ui-alert-banner",
223
+ animations: [trigger("openClose", [transition(":enter", [animate("0.2s ease-out", style({ opacity: 1 }))]), transition(":leave", [animate("0.2s ease-in", style({ opacity: 0 }))])])],
224
+ changeDetection: ChangeDetectionStrategy.OnPush,
225
+ imports: [
226
+ NgClass,
227
+ IconComponentModule,
228
+ SpinnerComponent,
229
+ ButtonComponent,
230
+ AsyncPipe,
231
+ UpperCasePipe,
232
+ UiTranslatePipe
233
+ ],
234
+ template: "@if (visible) {\n <div\n [ngClass]=\"cssClass\"\n [@openClose]\n role=\"alert\"\n class=\"alert-container\"\n [attr.theme]=\"applicationTheme\"\n [class.shadow]=\"alertVariant === 'callout' && shadow\"\n [class.size-small]=\"size === 'small'\"\n [attr.aria-live]=\"alertType === 'error' || alertType === 'warning' ? 'assertive' : 'polite'\"\n [attr.aria-describedby]=\"'describedby'\"\n [attr.aria-labelledby]=\"'labelledby'\"\n [attr.data-testid]=\"testId\"\n [tabIndex]=\"0\"\n >\n <span style=\"position: absolute; left: -9999px\" id=\"labelledby\">{{\n 'ALERT_BANNER.' + (alertType | uppercase) | uiTranslate | async\n }}</span>\n <span [style.display]=\"'none'\" id=\"describedby\">{{ ariaDescribedby }}</span>\n <div class=\"primary-alert-container\">\n <div class=\"alert-text\">\n @if (hasIcon) {\n <ui-icon\n class=\"left-icon\"\n [name]=\"iconName\"\n [size]=\"iconSize\"\n [color]=\"iconColor\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-icon>\n }\n @if (isLoading) {\n <ui-spinner\n class=\"loading-spinner\"\n size=\"small\"\n [isLoader]=\"false\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-spinner>\n }\n <span [innerHTML]=\"message\"></span>\n <span class=\"projected-content\"><ng-content></ng-content></span>\n @if (!!linkText) {\n <a [target]=\"linkTarget\" [href]=\"linkUrl\">{{ linkText }}</a>\n }\n </div>\n @if (actions.length > 0) {\n <div class=\"actions-container\">\n @for (action of actions; track $index) {\n <ui-button\n class=\"action-button\"\n [variant]=\"action.variant ?? 'text-inline'\"\n [label]=\"action.label\"\n [size]=\"action.size ?? 'medium'\"\n [disabled]=\"!!action.disabled\"\n [applicationTheme]=\"applicationTheme\"\n (buttonClickEvent)=\"action.onClick($event)\"\n [testId]=\"action.testId ?? null\"\n [fullWidth]=\"true\"\n ></ui-button>\n }\n </div>\n }\n @let closeLabel = (closeButtonTooltip || ('COMMON.CLOSE' | uiTranslate | async))!;\n @if (includeDismissButton && applicationTheme === 'classic') {\n <ui-button\n variant=\"text\"\n [justIcon]=\"true\"\n class=\"close\"\n iconName=\"Close\"\n [ariaLabel]=\"closeLabel\"\n [tooltip]=\"closeLabel\"\n (buttonClickEvent)=\"dismissClick()\"\n [testId]=\"dismissButtonTestId\"\n ></ui-button>\n }\n @if (includeDismissButton && applicationTheme !== 'classic') {\n <ui-button\n class=\"right-icon\"\n [variant]=\"'icon-button'\"\n [applicationTheme]=\"applicationTheme\"\n [iconName]=\"'Close'\"\n [size]=\"'small'\"\n [justIcon]=\"true\"\n [tooltip]=\"closeLabel\"\n [ariaLabel]=\"closeLabel\"\n [testId]=\"dismissButtonTestId\"\n (click)=\"dismissClick()\"\n ></ui-button>\n }\n </div>\n @if (secondaryAlerts.length > 0) {\n <div class=\"secondary-alerts-container\">\n <ul>\n @for (alert of secondaryAlerts; track alert) {\n <li class=\"secondary-alert-item\" [innerHTML]=\"alert\"></li>\n }\n </ul>\n </div>\n }\n </div>\n}\n",
235
+ 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}:host{display:flex;width:100%;justify-content:center}:host .snackbar-container{max-width:600px}:host .alert-container,:host .snackbar-container{margin:0 auto;display:flex;padding:0 14px;border-radius:4px;align-items:center;justify-content:space-between;opacity:1;min-height:48px}:host .alert-container.fixed,:host .snackbar-container.fixed{position:fixed}:host .alert-container.static,:host .snackbar-container.static{position:relative}:host .alert-container ui-icon,:host .snackbar-container ui-icon{margin-right:14px}:host .alert-container ui-button,:host .snackbar-container ui-button{margin-left:14px}:host .alert-container ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container ::ng-deep button.mat-mdc-unelevated-button.big{padding:0;min-width:auto}:host .alert-container .alert-text,:host .alert-container .snackbar-text,:host .snackbar-container .alert-text,:host .snackbar-container .snackbar-text{display:flex;align-items:center;color:#000}:host .alert-container .alert-text a,:host .alert-container .snackbar-text a,:host .snackbar-container .alert-text a,:host .snackbar-container .snackbar-text a{color:#000;text-decoration:underline;font-weight:700}:host .alert-container .alert-text a:hover,:host .alert-container .alert-text a:visited,:host .alert-container .alert-text a:focus,:host .alert-container .snackbar-text a:hover,:host .alert-container .snackbar-text a:visited,:host .alert-container .snackbar-text a:focus,:host .snackbar-container .alert-text a:hover,:host .snackbar-container .alert-text a:visited,:host .snackbar-container .alert-text a:focus,:host .snackbar-container .snackbar-text a:hover,:host .snackbar-container .snackbar-text a:visited,:host .snackbar-container .snackbar-text a:focus{text-decoration:none}:host .alert-container.success,:host .snackbar-container.success{background-color:#cbd6cb}:host .alert-container.info,:host .snackbar-container.info{background-color:#c8d7de}:host .alert-container.warning,:host .snackbar-container.warning{background-color:#f0d6bb}:host .alert-container.error,:host .snackbar-container.error{background-color:#e3c3c6}:host .alert-container[theme=dark].success,:host .alert-container[theme=light].success,:host .snackbar-container[theme=dark].success,:host .snackbar-container[theme=light].success{background-color:#aae47a}:host .alert-container[theme=dark].info,:host .alert-container[theme=light].info,:host .snackbar-container[theme=dark].info,:host .snackbar-container[theme=light].info{background-color:#d9e8ff}:host .alert-container[theme=dark].warning,:host .alert-container[theme=light].warning,:host .snackbar-container[theme=dark].warning,:host .snackbar-container[theme=light].warning{background-color:#ffe1b3}:host .alert-container[theme=dark].error,:host .alert-container[theme=light].error,:host .snackbar-container[theme=dark].error,:host .snackbar-container[theme=light].error{background-color:#ffac9a}:host .alert-container[theme=dark].ai,:host .alert-container[theme=light].ai,:host .snackbar-container[theme=dark].ai,:host .snackbar-container[theme=light].ai{background-color:#fff2fc;border:1px solid #ffe6fa;padding:12px 16px}:host .alert-container[theme=dark].ai ::ng-deep button.mat-mdc-unelevated-button.big,:host .alert-container[theme=light].ai ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container[theme=dark].ai ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container[theme=light].ai ::ng-deep button.mat-mdc-unelevated-button.big{padding:12px 24px}::ng-deep .display-none{display:none!important}@media(max-width:600px){:host .alert-container,:host .snackbar-container{padding:8px 14px}}:host .alert-container{max-width:1312px;flex-direction:column}:host .alert-container.fixed{top:0;z-index:98}:host .alert-container.full-width{width:100%;min-width:100%}:host .alert-container.size-small{min-height:32px;padding:0 10px;font-size:12px}:host .alert-container.size-small a{margin-left:5px}:host .alert-container.size-small .loading-spinner{margin-right:6px}:host .alert-container.size-small .primary-alert-container{gap:6px}:host .alert-container.size-small .actions-container{gap:6px}:host .alert-container.size-small .secondary-alerts-container{padding-left:6px;padding-bottom:12px}:host .alert-container a{margin-left:7px}:host .alert-container .projected-content ::ng-deep a{color:#000;text-decoration:none;font-weight:700}:host .alert-container .projected-content ::ng-deep a:hover,:host .alert-container .projected-content ::ng-deep a:focus{text-decoration:underline}:host .alert-container[theme=dark] .alert-text,:host .alert-container[theme=light] .alert-text{padding:12px 0}:host .alert-container[theme=dark].banner,:host .alert-container[theme=light].banner{border-radius:0}:host .alert-container[theme=dark].callout,:host .alert-container[theme=light].callout{border-radius:10px}:host .alert-container[theme=dark].shadow,:host .alert-container[theme=light].shadow{box-shadow:0 4px 16px #2424240a}:host .alert-container[theme=dark] .left-icon,:host .alert-container[theme=light] .left-icon{margin-right:8px}:host .alert-container[theme=dark] .right-icon,:host .alert-container[theme=light] .right-icon{cursor:pointer;margin-left:0;margin-right:2px}:host .alert-container[theme=dark].size-small.callout,:host .alert-container[theme=light].size-small.callout{border-radius:8px}:host .alert-container[theme=dark].size-small .alert-text,:host .alert-container[theme=light].size-small .alert-text{padding:8px 0}:host .alert-container[theme=dark].size-small .left-icon,:host .alert-container[theme=light].size-small .left-icon{margin-right:6px}:host .alert-container .loading-spinner{margin-right:8px;display:inline-flex;vertical-align:middle}:host .alert-container .primary-alert-container{display:flex;justify-content:space-between;align-items:center;width:100%;gap:8px}:host .alert-container .actions-container{display:flex;align-items:center;gap:8px;white-space:nowrap}:host .alert-container .actions-container ui-button{margin-left:0}:host .alert-container .secondary-alerts-container{padding-left:8px;padding-bottom:16px;display:flex;width:100%;flex-direction:column}:host .alert-container.ai .alert-text{padding:0}@media(max-width:600px){:host .alert-container.ai .primary-alert-container{flex-direction:column;align-items:stretch}:host .alert-container.ai .actions-container ui-button{width:100%}}\n"]
236
+ }]
237
+ }],
238
+ ctorParameters: () => [{
239
+ type: void 0,
240
+ decorators: [{ type: Optional }, {
241
+ type: Inject,
242
+ args: ["CANOPYUI_DEFAULT_APPLICATION_THEME"]
243
+ }]
244
+ }],
245
+ propDecorators: {
246
+ alertType: [{ type: Input }],
247
+ alertVariant: [{ type: Input }],
248
+ message: [{ type: Input }],
249
+ includeDismissButton: [{ type: Input }],
250
+ shadow: [{ type: Input }],
251
+ linkText: [{ type: Input }],
252
+ linkUrl: [{ type: Input }],
253
+ linkTarget: [{ type: Input }],
254
+ actions: [{ type: Input }],
255
+ applicationTheme: [{ type: Input }],
256
+ size: [{ type: Input }],
257
+ isFullWidth: [{ type: Input }],
258
+ closeButtonTooltip: [{ type: Input }],
259
+ testId: [{ type: Input }],
260
+ hasIcon: [{ type: Input }],
261
+ isLoading: [{ type: Input }],
262
+ fixed: [{ type: Input }],
263
+ ariaDescribedby: [{ type: Input }],
264
+ secondaryAlerts: [{ type: Input }],
265
+ dismiss: [{ type: Output }],
266
+ isDismissed: [{
267
+ type: HostBinding,
268
+ args: ["class.display-none"]
269
+ }]
270
+ }
271
+ });
272
+ var AlertBannerComponentModule = class AlertBannerComponentModule {
273
+ static {
274
+ this.ɵfac = i0.ɵɵngDeclareFactory({
275
+ minVersion: "12.0.0",
276
+ version: "22.2.4",
277
+ ngImport: i0,
278
+ type: AlertBannerComponentModule,
279
+ deps: [],
280
+ target: i0.ɵɵFactoryTarget.NgModule
281
+ });
282
+ }
283
+ static {
284
+ this.ɵmod = i0.ɵɵngDeclareNgModule({
285
+ minVersion: "14.0.0",
286
+ version: "22.2.4",
287
+ ngImport: i0,
288
+ type: AlertBannerComponentModule,
289
+ imports: [
290
+ CommonModule,
291
+ ButtonComponentModule,
292
+ IconComponentModule,
293
+ SpinnerComponentModule,
294
+ UiTranslatePipe,
295
+ AlertBannerComponent
296
+ ],
297
+ exports: [AlertBannerComponent]
298
+ });
299
+ }
300
+ static {
301
+ this.ɵinj = i0.ɵɵngDeclareInjector({
302
+ minVersion: "12.0.0",
303
+ version: "22.2.4",
304
+ ngImport: i0,
305
+ type: AlertBannerComponentModule,
306
+ imports: [
307
+ CommonModule,
308
+ ButtonComponentModule,
309
+ IconComponentModule,
310
+ SpinnerComponentModule,
311
+ AlertBannerComponent
312
+ ]
313
+ });
314
+ }
315
+ };
316
+ i0.ɵɵngDeclareClassMetadata({
317
+ minVersion: "12.0.0",
318
+ version: "22.2.4",
319
+ ngImport: i0,
320
+ type: AlertBannerComponentModule,
321
+ decorators: [{
322
+ type: NgModule,
323
+ args: [{
324
+ imports: [
325
+ CommonModule,
326
+ ButtonComponentModule,
327
+ IconComponentModule,
328
+ SpinnerComponentModule,
329
+ UiTranslatePipe,
330
+ AlertBannerComponent
331
+ ],
332
+ exports: [AlertBannerComponent]
333
+ }]
334
+ }]
335
+ });
274
336
  export { AlertBannerComponent, AlertBannerComponentModule };
275
- //# sourceMappingURL=testgorilla-tgo-ui-components-alert-banner.mjs.map
337
+
338
+ //# sourceMappingURL=testgorilla-tgo-ui-components-alert-banner.mjs.map