@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.
- package/fesm2022/testgorilla-tgo-ui-components-accordion.mjs +335 -229
- package/fesm2022/testgorilla-tgo-ui-components-accordion.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-ai-audio-circle.mjs +547 -465
- package/fesm2022/testgorilla-tgo-ui-components-ai-audio-circle.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-ai-caveat.mjs +160 -75
- package/fesm2022/testgorilla-tgo-ui-components-ai-caveat.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-ai-feedback.mjs +678 -278
- package/fesm2022/testgorilla-tgo-ui-components-ai-feedback.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-alert-banner.mjs +337 -274
- package/fesm2022/testgorilla-tgo-ui-components-alert-banner.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-audio-waveform.mjs +351 -192
- package/fesm2022/testgorilla-tgo-ui-components-audio-waveform.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-autocomplete-v2.mjs +1950 -960
- package/fesm2022/testgorilla-tgo-ui-components-autocomplete-v2.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-autocomplete.mjs +1206 -1044
- package/fesm2022/testgorilla-tgo-ui-components-autocomplete.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-avatar.mjs +328 -182
- package/fesm2022/testgorilla-tgo-ui-components-avatar.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-badge.mjs +383 -203
- package/fesm2022/testgorilla-tgo-ui-components-badge.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-breadcrumb.mjs +553 -261
- package/fesm2022/testgorilla-tgo-ui-components-breadcrumb.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-button.mjs +709 -739
- package/fesm2022/testgorilla-tgo-ui-components-button.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-card.mjs +219 -184
- package/fesm2022/testgorilla-tgo-ui-components-card.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-checkbox.mjs +515 -458
- package/fesm2022/testgorilla-tgo-ui-components-checkbox.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-checklist.mjs +423 -162
- package/fesm2022/testgorilla-tgo-ui-components-checklist.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-core.mjs +10784 -10996
- package/fesm2022/testgorilla-tgo-ui-components-core.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-datepicker.mjs +810 -533
- package/fesm2022/testgorilla-tgo-ui-components-datepicker.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-device-control.mjs +473 -116
- package/fesm2022/testgorilla-tgo-ui-components-device-control.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-dialog.mjs +1149 -540
- package/fesm2022/testgorilla-tgo-ui-components-dialog.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-divider.mjs +148 -84
- package/fesm2022/testgorilla-tgo-ui-components-divider.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-donut-chart.mjs +239 -142
- package/fesm2022/testgorilla-tgo-ui-components-donut-chart.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-dropdown.mjs +599 -467
- package/fesm2022/testgorilla-tgo-ui-components-dropdown.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-elevation-shadow.mjs +126 -70
- package/fesm2022/testgorilla-tgo-ui-components-elevation-shadow.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-empty-state.mjs +324 -329
- package/fesm2022/testgorilla-tgo-ui-components-empty-state.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-field.mjs +969 -648
- package/fesm2022/testgorilla-tgo-ui-components-field.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-file-upload.mjs +553 -419
- package/fesm2022/testgorilla-tgo-ui-components-file-upload.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-filter-button.mjs +847 -452
- package/fesm2022/testgorilla-tgo-ui-components-filter-button.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-gaussian-chart.mjs +398 -302
- package/fesm2022/testgorilla-tgo-ui-components-gaussian-chart.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-icon-label.mjs +162 -95
- package/fesm2022/testgorilla-tgo-ui-components-icon-label.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-icon.mjs +1825 -1795
- package/fesm2022/testgorilla-tgo-ui-components-icon.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-infinite-scroll-table.mjs +1018 -672
- package/fesm2022/testgorilla-tgo-ui-components-infinite-scroll-table.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-inline-field.mjs +758 -368
- package/fesm2022/testgorilla-tgo-ui-components-inline-field.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-logo.mjs +204 -212
- package/fesm2022/testgorilla-tgo-ui-components-logo.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-media-card.mjs +183 -48
- package/fesm2022/testgorilla-tgo-ui-components-media-card.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-media-dialog.mjs +243 -79
- package/fesm2022/testgorilla-tgo-ui-components-media-dialog.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-multi-input.mjs +751 -361
- package/fesm2022/testgorilla-tgo-ui-components-multi-input.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-navbar.mjs +1122 -385
- package/fesm2022/testgorilla-tgo-ui-components-navbar.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-overflow-menu.mjs +689 -413
- package/fesm2022/testgorilla-tgo-ui-components-overflow-menu.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-page-header.mjs +227 -92
- package/fesm2022/testgorilla-tgo-ui-components-page-header.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-paginator.mjs +174 -113
- package/fesm2022/testgorilla-tgo-ui-components-paginator.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-password-criteria.mjs +367 -165
- package/fesm2022/testgorilla-tgo-ui-components-password-criteria.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-password-strength.mjs +253 -118
- package/fesm2022/testgorilla-tgo-ui-components-password-strength.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-phone-input.mjs +730 -444
- package/fesm2022/testgorilla-tgo-ui-components-phone-input.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-popover.mjs +533 -221
- package/fesm2022/testgorilla-tgo-ui-components-popover.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-popup-tip.mjs +274 -76
- package/fesm2022/testgorilla-tgo-ui-components-popup-tip.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-progress-bar.mjs +184 -124
- package/fesm2022/testgorilla-tgo-ui-components-progress-bar.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-prompt.mjs +1223 -574
- package/fesm2022/testgorilla-tgo-ui-components-prompt.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-radial-progress.mjs +249 -160
- package/fesm2022/testgorilla-tgo-ui-components-radial-progress.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-radio-button.mjs +447 -439
- package/fesm2022/testgorilla-tgo-ui-components-radio-button.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-rating.mjs +226 -150
- package/fesm2022/testgorilla-tgo-ui-components-rating.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-scale-table.mjs +255 -67
- package/fesm2022/testgorilla-tgo-ui-components-scale-table.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-scale.mjs +205 -162
- package/fesm2022/testgorilla-tgo-ui-components-scale.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-segmented-bar.mjs +245 -153
- package/fesm2022/testgorilla-tgo-ui-components-segmented-bar.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-segmented-button.mjs +274 -140
- package/fesm2022/testgorilla-tgo-ui-components-segmented-button.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-segmented-toggle.mjs +319 -147
- package/fesm2022/testgorilla-tgo-ui-components-segmented-toggle.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-selectable-card.mjs +286 -84
- package/fesm2022/testgorilla-tgo-ui-components-selectable-card.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-side-navigation.mjs +660 -208
- package/fesm2022/testgorilla-tgo-ui-components-side-navigation.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-side-panel.mjs +579 -320
- package/fesm2022/testgorilla-tgo-ui-components-side-panel.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-side-sheet.mjs +419 -200
- package/fesm2022/testgorilla-tgo-ui-components-side-sheet.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-skeleton.mjs +132 -80
- package/fesm2022/testgorilla-tgo-ui-components-skeleton.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-slider.mjs +741 -390
- package/fesm2022/testgorilla-tgo-ui-components-slider.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-snackbar.mjs +455 -329
- package/fesm2022/testgorilla-tgo-ui-components-snackbar.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-spider-chart.mjs +543 -514
- package/fesm2022/testgorilla-tgo-ui-components-spider-chart.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-spinner.mjs +193 -104
- package/fesm2022/testgorilla-tgo-ui-components-spinner.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-stepper.mjs +760 -524
- package/fesm2022/testgorilla-tgo-ui-components-stepper.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-table.mjs +714 -415
- package/fesm2022/testgorilla-tgo-ui-components-table.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-tabs.mjs +847 -438
- package/fesm2022/testgorilla-tgo-ui-components-tabs.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-tag.mjs +535 -275
- package/fesm2022/testgorilla-tgo-ui-components-tag.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-toggle.mjs +316 -246
- package/fesm2022/testgorilla-tgo-ui-components-toggle.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-tooltip.mjs +404 -284
- package/fesm2022/testgorilla-tgo-ui-components-tooltip.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-universal-skills.mjs +664 -383
- package/fesm2022/testgorilla-tgo-ui-components-universal-skills.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-validation-error.mjs +201 -112
- package/fesm2022/testgorilla-tgo-ui-components-validation-error.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-write-with-ai.mjs +1014 -458
- package/fesm2022/testgorilla-tgo-ui-components-write-with-ai.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui.mjs +147 -155
- package/fesm2022/testgorilla-tgo-ui.mjs.map +1 -1
- package/mcp/catalog.json +1 -1
- package/package.json +16 -17
- package/projects/tgo-canopy-ui/theme/_palette.scss +23 -18
- package/types/testgorilla-tgo-ui-components-accordion.d.ts +214 -158
- package/types/testgorilla-tgo-ui-components-ai-audio-circle.d.ts +93 -69
- package/types/testgorilla-tgo-ui-components-ai-caveat.d.ts +37 -34
- package/types/testgorilla-tgo-ui-components-ai-feedback.d.ts +126 -86
- package/types/testgorilla-tgo-ui-components-alert-banner.d.ts +260 -185
- package/types/testgorilla-tgo-ui-components-audio-waveform.d.ts +96 -67
- package/types/testgorilla-tgo-ui-components-autocomplete-v2.d.ts +455 -256
- package/types/testgorilla-tgo-ui-components-autocomplete.d.ts +545 -390
- package/types/testgorilla-tgo-ui-components-avatar.d.ts +128 -102
- package/types/testgorilla-tgo-ui-components-badge.d.ts +191 -139
- package/types/testgorilla-tgo-ui-components-breadcrumb.d.ts +100 -62
- package/types/testgorilla-tgo-ui-components-button.d.ts +479 -340
- package/types/testgorilla-tgo-ui-components-card.d.ts +153 -114
- package/types/testgorilla-tgo-ui-components-checkbox.d.ts +299 -223
- package/types/testgorilla-tgo-ui-components-checklist.d.ts +149 -97
- package/types/testgorilla-tgo-ui-components-core.d.ts +307 -295
- package/types/testgorilla-tgo-ui-components-datepicker.d.ts +404 -299
- package/types/testgorilla-tgo-ui-components-device-control.d.ts +151 -81
- package/types/testgorilla-tgo-ui-components-dialog.d.ts +442 -329
- package/types/testgorilla-tgo-ui-components-divider.d.ts +64 -51
- package/types/testgorilla-tgo-ui-components-donut-chart.d.ts +41 -37
- package/types/testgorilla-tgo-ui-components-dropdown.d.ts +335 -241
- package/types/testgorilla-tgo-ui-components-elevation-shadow.d.ts +48 -43
- package/types/testgorilla-tgo-ui-components-empty-state.d.ts +317 -215
- package/types/testgorilla-tgo-ui-components-field.d.ts +559 -388
- package/types/testgorilla-tgo-ui-components-file-upload.d.ts +230 -168
- package/types/testgorilla-tgo-ui-components-filter-button.d.ts +263 -206
- package/types/testgorilla-tgo-ui-components-gaussian-chart.d.ts +107 -94
- package/types/testgorilla-tgo-ui-components-icon-label.d.ts +84 -61
- package/types/testgorilla-tgo-ui-components-icon.d.ts +137 -110
- package/types/testgorilla-tgo-ui-components-infinite-scroll-table.d.ts +429 -303
- package/types/testgorilla-tgo-ui-components-inline-field.d.ts +338 -254
- package/types/testgorilla-tgo-ui-components-logo.d.ts +119 -101
- package/types/testgorilla-tgo-ui-components-media-card.d.ts +51 -35
- package/types/testgorilla-tgo-ui-components-media-dialog.d.ts +40 -45
- package/types/testgorilla-tgo-ui-components-multi-input.d.ts +283 -194
- package/types/testgorilla-tgo-ui-components-navbar.d.ts +326 -208
- package/types/testgorilla-tgo-ui-components-overflow-menu.d.ts +276 -204
- package/types/testgorilla-tgo-ui-components-page-header.d.ts +67 -50
- package/types/testgorilla-tgo-ui-components-paginator.d.ts +103 -70
- package/types/testgorilla-tgo-ui-components-password-criteria.d.ts +67 -58
- package/types/testgorilla-tgo-ui-components-password-strength.d.ts +66 -57
- package/types/testgorilla-tgo-ui-components-phone-input.d.ts +217 -175
- package/types/testgorilla-tgo-ui-components-popover.d.ts +94 -53
- package/types/testgorilla-tgo-ui-components-popup-tip.d.ts +81 -44
- package/types/testgorilla-tgo-ui-components-progress-bar.d.ts +115 -84
- package/types/testgorilla-tgo-ui-components-prompt.d.ts +315 -219
- package/types/testgorilla-tgo-ui-components-radial-progress.d.ts +146 -107
- package/types/testgorilla-tgo-ui-components-radio-button.d.ts +296 -219
- package/types/testgorilla-tgo-ui-components-rating.d.ts +134 -95
- package/types/testgorilla-tgo-ui-components-scale-table.d.ts +67 -47
- package/types/testgorilla-tgo-ui-components-scale.d.ts +91 -66
- package/types/testgorilla-tgo-ui-components-segmented-bar.d.ts +118 -89
- package/types/testgorilla-tgo-ui-components-segmented-button.d.ts +107 -80
- package/types/testgorilla-tgo-ui-components-segmented-toggle.d.ts +138 -105
- package/types/testgorilla-tgo-ui-components-selectable-card.d.ts +90 -56
- package/types/testgorilla-tgo-ui-components-side-navigation.d.ts +183 -107
- package/types/testgorilla-tgo-ui-components-side-panel.d.ts +156 -145
- package/types/testgorilla-tgo-ui-components-side-sheet.d.ts +98 -89
- package/types/testgorilla-tgo-ui-components-skeleton.d.ts +50 -33
- package/types/testgorilla-tgo-ui-components-slider.d.ts +278 -198
- package/types/testgorilla-tgo-ui-components-snackbar.d.ts +211 -159
- package/types/testgorilla-tgo-ui-components-spider-chart.d.ts +140 -121
- package/types/testgorilla-tgo-ui-components-spinner.d.ts +93 -72
- package/types/testgorilla-tgo-ui-components-stepper.d.ts +480 -338
- package/types/testgorilla-tgo-ui-components-table.d.ts +280 -233
- package/types/testgorilla-tgo-ui-components-tabs.d.ts +282 -183
- package/types/testgorilla-tgo-ui-components-tag.d.ts +266 -193
- package/types/testgorilla-tgo-ui-components-toggle.d.ts +180 -132
- package/types/testgorilla-tgo-ui-components-tooltip.d.ts +142 -105
- package/types/testgorilla-tgo-ui-components-universal-skills.d.ts +165 -144
- package/types/testgorilla-tgo-ui-components-validation-error.d.ts +70 -51
- package/types/testgorilla-tgo-ui-components-write-with-ai.d.ts +210 -133
- package/types/testgorilla-tgo-ui.d.ts +52 -45
|
@@ -1,187 +1,222 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import * as i0 from
|
|
3
|
-
import {
|
|
4
|
-
import * as i1 from
|
|
5
|
-
import { IconComponentModule } from
|
|
6
|
-
|
|
1
|
+
import { CommonModule, NgClass } from "@angular/common";
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, NgModule, Optional, Output } from "@angular/core";
|
|
4
|
+
import * as i1 from "@testgorilla/tgo-ui/components/icon";
|
|
5
|
+
import { IconComponentModule } from "@testgorilla/tgo-ui/components/icon";
|
|
7
6
|
const NON_SELECTABLE_CARD_VARIANTS = [
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
7
|
+
"educative",
|
|
8
|
+
"premium",
|
|
9
|
+
"ai",
|
|
10
|
+
"actionDriver",
|
|
11
|
+
"neutral"
|
|
13
12
|
];
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
13
|
+
var CardComponent = class CardComponent {
|
|
14
|
+
set errors(errors) {
|
|
15
|
+
this.safeErrors = errors?.filter(Boolean) ?? [];
|
|
16
|
+
}
|
|
17
|
+
constructor(defaultAppTheme) {
|
|
18
|
+
this.defaultAppTheme = defaultAppTheme;
|
|
19
|
+
this.size = "medium";
|
|
20
|
+
this.sizeVariant = "regular";
|
|
21
|
+
this.variant = "default";
|
|
22
|
+
this.applicationTheme = "light";
|
|
23
|
+
this.errorsSize = "default";
|
|
24
|
+
this.selected = false;
|
|
25
|
+
this.allowSelect = false;
|
|
26
|
+
this.allowFocus = true;
|
|
27
|
+
this.testId = null;
|
|
28
|
+
this.cardSelected = new EventEmitter();
|
|
29
|
+
this.safeErrors = [];
|
|
30
|
+
this.classes = "";
|
|
31
|
+
if (defaultAppTheme) this.applicationTheme = defaultAppTheme;
|
|
32
|
+
}
|
|
33
|
+
ngOnChanges() {
|
|
34
|
+
this.classes = `card-size-${this.size ?? "medium"} ${this.sizeVariant ?? "regular"} ${this.cardVariant ?? "default"}`;
|
|
35
|
+
}
|
|
36
|
+
ngOnInit() {
|
|
37
|
+
this.classes = `card-size-${this.size ?? "medium"} ${this.sizeVariant ?? "regular"} ${this.cardVariant ?? "default"}`;
|
|
38
|
+
}
|
|
39
|
+
get cardVariant() {
|
|
40
|
+
return this.safeErrors?.length ? "error" : this.variant;
|
|
41
|
+
}
|
|
42
|
+
get errorIconSize() {
|
|
43
|
+
return this.errorsSize === "small" ? "16" : "24";
|
|
44
|
+
}
|
|
45
|
+
get isSelected() {
|
|
46
|
+
return this.selected && !NON_SELECTABLE_CARD_VARIANTS.includes(this.variant);
|
|
47
|
+
}
|
|
48
|
+
get isActionable() {
|
|
49
|
+
return this.allowSelect && this.variant !== "default" && !NON_SELECTABLE_CARD_VARIANTS.includes(this.variant);
|
|
50
|
+
}
|
|
51
|
+
selectCard(event) {
|
|
52
|
+
if (!this.isActionable || this.isFromProjectedFooter(event)) return;
|
|
53
|
+
this.selected = true;
|
|
54
|
+
this.cardSelected.emit(this.selected);
|
|
55
|
+
}
|
|
56
|
+
isFromProjectedFooter(event) {
|
|
57
|
+
const target = event?.target;
|
|
58
|
+
return target instanceof Element && Boolean(target.closest(".card-footer"));
|
|
59
|
+
}
|
|
60
|
+
static {
|
|
61
|
+
this.ɵfac = i0.ɵɵngDeclareFactory({
|
|
62
|
+
minVersion: "12.0.0",
|
|
63
|
+
version: "22.2.4",
|
|
64
|
+
ngImport: i0,
|
|
65
|
+
type: CardComponent,
|
|
66
|
+
deps: [{
|
|
67
|
+
token: "CANOPYUI_DEFAULT_APPLICATION_THEME",
|
|
68
|
+
optional: true
|
|
69
|
+
}],
|
|
70
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
static {
|
|
74
|
+
this.ɵcmp = i0.ɵɵngDeclareComponent({
|
|
75
|
+
minVersion: "17.0.0",
|
|
76
|
+
version: "22.2.4",
|
|
77
|
+
type: CardComponent,
|
|
78
|
+
isStandalone: true,
|
|
79
|
+
selector: "ui-card",
|
|
80
|
+
inputs: {
|
|
81
|
+
size: "size",
|
|
82
|
+
sizeVariant: "sizeVariant",
|
|
83
|
+
variant: "variant",
|
|
84
|
+
applicationTheme: "applicationTheme",
|
|
85
|
+
errors: "errors",
|
|
86
|
+
errorsSize: "errorsSize",
|
|
87
|
+
selected: "selected",
|
|
88
|
+
allowSelect: "allowSelect",
|
|
89
|
+
allowFocus: "allowFocus",
|
|
90
|
+
testId: "testId"
|
|
91
|
+
},
|
|
92
|
+
outputs: { cardSelected: "cardSelected" },
|
|
93
|
+
usesOnChanges: true,
|
|
94
|
+
ngImport: i0,
|
|
95
|
+
template: "<div\n class=\"card-container\"\n (keydown.enter)=\"selectCard($event)\"\n (keydown.space)=\"selectCard($event)\"\n (click)=\"selectCard($event)\"\n [ngClass]=\"[classes, isSelected ? 'selected' : '']\"\n [attr.theme]=\"applicationTheme\"\n [attr.tabindex]=\"allowFocus && isActionable ? 0 : null\"\n [attr.role]=\"isActionable ? 'button' : null\"\n [attr.aria-pressed]=\"isActionable ? isSelected : null\"\n [attr.data-testid]=\"testId\"\n>\n <ng-content></ng-content>\n\n <div class=\"card-footer\">\n <ng-content select=\"[cardFooter]\"></ng-content>\n </div>\n</div>\n@if (safeErrors?.length) {\n <div class=\"errors\" [class.errors-small]=\"errorsSize === 'small'\">\n @for (error of safeErrors; track error) {\n <div class=\"error\">\n <ui-icon [size]=\"errorIconSize\" [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n }\n </div>\n}\n",
|
|
96
|
+
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}.card-container{--ui-card-padding-x: 24px;--ui-card-padding-y: 24px;border:1px solid #e0e0e0;background:#fff;padding:var(--ui-card-padding-y) var(--ui-card-padding-x);position:relative;transition:box-shadow .25s ease;outline-offset:-2px;--ui-card-ring: none;--ui-card-ring-inset: -1px}.card-container:after{content:\"\";position:absolute;z-index:1;inset:var(--ui-card-ring-inset);border-radius:inherit;box-shadow:var(--ui-card-ring);pointer-events:none}.card-container.card-size-medium{--ui-card-padding-x: 24px;--ui-card-padding-y: 24px}.card-container.card-size-medium.condensed{--ui-card-padding-x: 24px;--ui-card-padding-y: 16px}.card-container.card-size-large{--ui-card-padding-x: 80px;--ui-card-padding-y: 80px}.card-container.card-size-small{--ui-card-padding-x: 16px;--ui-card-padding-y: 16px}.card-container.card-size-small.condensed{--ui-card-padding-x: 16px;--ui-card-padding-y: 12px}.card-container[theme=dark],.card-container[theme=light]{border-color:#d3d3d3;border-radius:10px;border-width:1px}.card-container[theme=dark].shadow,.card-container[theme=light].shadow{box-shadow:0 4px 100px #2424240a}.card-container[theme=dark].error,.card-container[theme=light].error{--ui-card-ring-inset: -2px;border-width:2px;border-color:#e02800}.card-container[theme=dark].ai,.card-container[theme=light].ai{--ui-card-ring-inset: -2px;border:2px solid transparent;background:linear-gradient(to left,#fff,#fff),linear-gradient(to right,#d410aa 25%,#0165fc);background-clip:padding-box,border-box;background-origin:padding-box,border-box}.card-container[theme=dark].educative,.card-container[theme=light].educative{background:#d9e8ff;border-color:#1a47aa}.card-container[theme=dark].premium,.card-container[theme=light].premium{background:#fff5e6;border-color:#d07d00}.card-container[theme=dark].actionDriver,.card-container[theme=light].actionDriver{background:#242424;border:none}.card-container[theme=dark].neutral,.card-container[theme=light].neutral{background:#f4f4f4;border:none}.card-container[theme=dark].state,.card-container[theme=light].state{cursor:pointer}.card-container[theme=dark].state:hover,.card-container[theme=dark].state:hover:focus,.card-container[theme=light].state:hover,.card-container[theme=light].state:hover:focus{--ui-card-ring: inset 0 0 0 2px #242424;border-color:#242424;outline:1px solid #242424}.card-container[theme=dark].state.selected:focus:not(:focus-visible),.card-container[theme=light].state.selected:focus:not(:focus-visible){--ui-card-ring: inset 0 0 0 2px #242424;border-color:#242424;outline:1px solid #242424}.card-container[theme=dark].neutral-state,.card-container[theme=light].neutral-state{--ui-card-ring: inset 0 0 0 2px #242424;background:#f4f4f4;border-color:#242424;outline:1px solid #242424}.card-container[theme=dark].selected,.card-container[theme=light].selected{--ui-card-ring: inset 0 0 0 2px #242424;border-color:#242424;outline:1px solid #242424}.card-container[theme=dark]:focus-visible:not(.selected),.card-container[theme=light]:focus-visible:not(.selected){--ui-card-ring: inset 0 0 0 2px #242424, inset 0 0 0 3px #ffffff, inset 0 0 0 5px #242424;outline:1px solid black;border-color:#242424;animation:none}.card-container[theme=dark]:focus-visible:not(.selected):before,.card-container[theme=light]:focus-visible:not(.selected):before{display:none}.card-container[theme=dark]:focus-visible:is(.selected),.card-container[theme=light]:focus-visible:is(.selected){--ui-card-ring: inset 0 0 0 2px #242424, inset 0 0 0 3px #ffffff, inset 0 0 0 5px #242424;outline:1px solid black;border-color:#242424;animation:none}.card-container[theme=dark]:focus-visible:is(.selected):before,.card-container[theme=light]:focus-visible:is(.selected):before{display:none}.card-container[theme=dark].default,.card-container[theme=light].default{border-color:#d3d3d3}.card-size-brand.card-size-medium{--ui-card-padding-x: 23px;--ui-card-padding-y: 23px}.card-size-brand.card-size-large{--ui-card-padding-x: 79px;--ui-card-padding-y: 79px}.card-size-brand.card-size-small{--ui-card-padding-x: 15px;--ui-card-padding-y: 15px}.card-footer{display:none}.card-footer:has(*){display:block;margin:0 calc(-1 * var(--ui-card-padding-x)) calc(-1 * var(--ui-card-padding-y));overflow:hidden;border-radius:0 0 9px 9px}.errors{margin-top:8px}.errors.errors-small{margin-top:4px}.errors.errors-small .error{font-size:12px}.errors .error{font-size:14px;display:flex;flex-direction:row;align-items:center}.errors .error ui-icon{margin-right:8px}.errors .error ui-icon ::ng-deep svg{color:#e02800}.errors .error{color:#e02800}\n"],
|
|
97
|
+
dependencies: [
|
|
98
|
+
{
|
|
99
|
+
kind: "directive",
|
|
100
|
+
type: NgClass,
|
|
101
|
+
selector: "[ngClass]",
|
|
102
|
+
inputs: ["class", "ngClass"]
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
kind: "ngmodule",
|
|
106
|
+
type: IconComponentModule
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
kind: "component",
|
|
110
|
+
type: i1.IconComponent,
|
|
111
|
+
selector: "ui-icon",
|
|
112
|
+
inputs: [
|
|
113
|
+
"size",
|
|
114
|
+
"cssClass",
|
|
115
|
+
"name",
|
|
116
|
+
"color",
|
|
117
|
+
"filled",
|
|
118
|
+
"toggleIconStyle",
|
|
119
|
+
"applicationTheme",
|
|
120
|
+
"useFullIconName"
|
|
121
|
+
]
|
|
122
|
+
}
|
|
123
|
+
],
|
|
124
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
125
|
+
});
|
|
126
|
+
}
|
|
127
|
+
};
|
|
128
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
129
|
+
minVersion: "12.0.0",
|
|
130
|
+
version: "22.2.4",
|
|
131
|
+
ngImport: i0,
|
|
132
|
+
type: CardComponent,
|
|
133
|
+
decorators: [{
|
|
134
|
+
type: Component,
|
|
135
|
+
args: [{
|
|
136
|
+
selector: "ui-card",
|
|
137
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
138
|
+
imports: [NgClass, IconComponentModule],
|
|
139
|
+
template: "<div\n class=\"card-container\"\n (keydown.enter)=\"selectCard($event)\"\n (keydown.space)=\"selectCard($event)\"\n (click)=\"selectCard($event)\"\n [ngClass]=\"[classes, isSelected ? 'selected' : '']\"\n [attr.theme]=\"applicationTheme\"\n [attr.tabindex]=\"allowFocus && isActionable ? 0 : null\"\n [attr.role]=\"isActionable ? 'button' : null\"\n [attr.aria-pressed]=\"isActionable ? isSelected : null\"\n [attr.data-testid]=\"testId\"\n>\n <ng-content></ng-content>\n\n <div class=\"card-footer\">\n <ng-content select=\"[cardFooter]\"></ng-content>\n </div>\n</div>\n@if (safeErrors?.length) {\n <div class=\"errors\" [class.errors-small]=\"errorsSize === 'small'\">\n @for (error of safeErrors; track error) {\n <div class=\"error\">\n <ui-icon [size]=\"errorIconSize\" [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n }\n </div>\n}\n",
|
|
140
|
+
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}.card-container{--ui-card-padding-x: 24px;--ui-card-padding-y: 24px;border:1px solid #e0e0e0;background:#fff;padding:var(--ui-card-padding-y) var(--ui-card-padding-x);position:relative;transition:box-shadow .25s ease;outline-offset:-2px;--ui-card-ring: none;--ui-card-ring-inset: -1px}.card-container:after{content:\"\";position:absolute;z-index:1;inset:var(--ui-card-ring-inset);border-radius:inherit;box-shadow:var(--ui-card-ring);pointer-events:none}.card-container.card-size-medium{--ui-card-padding-x: 24px;--ui-card-padding-y: 24px}.card-container.card-size-medium.condensed{--ui-card-padding-x: 24px;--ui-card-padding-y: 16px}.card-container.card-size-large{--ui-card-padding-x: 80px;--ui-card-padding-y: 80px}.card-container.card-size-small{--ui-card-padding-x: 16px;--ui-card-padding-y: 16px}.card-container.card-size-small.condensed{--ui-card-padding-x: 16px;--ui-card-padding-y: 12px}.card-container[theme=dark],.card-container[theme=light]{border-color:#d3d3d3;border-radius:10px;border-width:1px}.card-container[theme=dark].shadow,.card-container[theme=light].shadow{box-shadow:0 4px 100px #2424240a}.card-container[theme=dark].error,.card-container[theme=light].error{--ui-card-ring-inset: -2px;border-width:2px;border-color:#e02800}.card-container[theme=dark].ai,.card-container[theme=light].ai{--ui-card-ring-inset: -2px;border:2px solid transparent;background:linear-gradient(to left,#fff,#fff),linear-gradient(to right,#d410aa 25%,#0165fc);background-clip:padding-box,border-box;background-origin:padding-box,border-box}.card-container[theme=dark].educative,.card-container[theme=light].educative{background:#d9e8ff;border-color:#1a47aa}.card-container[theme=dark].premium,.card-container[theme=light].premium{background:#fff5e6;border-color:#d07d00}.card-container[theme=dark].actionDriver,.card-container[theme=light].actionDriver{background:#242424;border:none}.card-container[theme=dark].neutral,.card-container[theme=light].neutral{background:#f4f4f4;border:none}.card-container[theme=dark].state,.card-container[theme=light].state{cursor:pointer}.card-container[theme=dark].state:hover,.card-container[theme=dark].state:hover:focus,.card-container[theme=light].state:hover,.card-container[theme=light].state:hover:focus{--ui-card-ring: inset 0 0 0 2px #242424;border-color:#242424;outline:1px solid #242424}.card-container[theme=dark].state.selected:focus:not(:focus-visible),.card-container[theme=light].state.selected:focus:not(:focus-visible){--ui-card-ring: inset 0 0 0 2px #242424;border-color:#242424;outline:1px solid #242424}.card-container[theme=dark].neutral-state,.card-container[theme=light].neutral-state{--ui-card-ring: inset 0 0 0 2px #242424;background:#f4f4f4;border-color:#242424;outline:1px solid #242424}.card-container[theme=dark].selected,.card-container[theme=light].selected{--ui-card-ring: inset 0 0 0 2px #242424;border-color:#242424;outline:1px solid #242424}.card-container[theme=dark]:focus-visible:not(.selected),.card-container[theme=light]:focus-visible:not(.selected){--ui-card-ring: inset 0 0 0 2px #242424, inset 0 0 0 3px #ffffff, inset 0 0 0 5px #242424;outline:1px solid black;border-color:#242424;animation:none}.card-container[theme=dark]:focus-visible:not(.selected):before,.card-container[theme=light]:focus-visible:not(.selected):before{display:none}.card-container[theme=dark]:focus-visible:is(.selected),.card-container[theme=light]:focus-visible:is(.selected){--ui-card-ring: inset 0 0 0 2px #242424, inset 0 0 0 3px #ffffff, inset 0 0 0 5px #242424;outline:1px solid black;border-color:#242424;animation:none}.card-container[theme=dark]:focus-visible:is(.selected):before,.card-container[theme=light]:focus-visible:is(.selected):before{display:none}.card-container[theme=dark].default,.card-container[theme=light].default{border-color:#d3d3d3}.card-size-brand.card-size-medium{--ui-card-padding-x: 23px;--ui-card-padding-y: 23px}.card-size-brand.card-size-large{--ui-card-padding-x: 79px;--ui-card-padding-y: 79px}.card-size-brand.card-size-small{--ui-card-padding-x: 15px;--ui-card-padding-y: 15px}.card-footer{display:none}.card-footer:has(*){display:block;margin:0 calc(-1 * var(--ui-card-padding-x)) calc(-1 * var(--ui-card-padding-y));overflow:hidden;border-radius:0 0 9px 9px}.errors{margin-top:8px}.errors.errors-small{margin-top:4px}.errors.errors-small .error{font-size:12px}.errors .error{font-size:14px;display:flex;flex-direction:row;align-items:center}.errors .error ui-icon{margin-right:8px}.errors .error ui-icon ::ng-deep svg{color:#e02800}.errors .error{color:#e02800}\n"]
|
|
141
|
+
}]
|
|
142
|
+
}],
|
|
143
|
+
ctorParameters: () => [{
|
|
144
|
+
type: void 0,
|
|
145
|
+
decorators: [{ type: Optional }, {
|
|
146
|
+
type: Inject,
|
|
147
|
+
args: ["CANOPYUI_DEFAULT_APPLICATION_THEME"]
|
|
148
|
+
}]
|
|
149
|
+
}],
|
|
150
|
+
propDecorators: {
|
|
151
|
+
size: [{ type: Input }],
|
|
152
|
+
sizeVariant: [{ type: Input }],
|
|
153
|
+
variant: [{ type: Input }],
|
|
154
|
+
applicationTheme: [{ type: Input }],
|
|
155
|
+
errors: [{ type: Input }],
|
|
156
|
+
errorsSize: [{ type: Input }],
|
|
157
|
+
selected: [{ type: Input }],
|
|
158
|
+
allowSelect: [{ type: Input }],
|
|
159
|
+
allowFocus: [{ type: Input }],
|
|
160
|
+
testId: [{ type: Input }],
|
|
161
|
+
cardSelected: [{ type: Output }]
|
|
162
|
+
}
|
|
163
|
+
});
|
|
164
|
+
var CardComponentModule = class CardComponentModule {
|
|
165
|
+
static {
|
|
166
|
+
this.ɵfac = i0.ɵɵngDeclareFactory({
|
|
167
|
+
minVersion: "12.0.0",
|
|
168
|
+
version: "22.2.4",
|
|
169
|
+
ngImport: i0,
|
|
170
|
+
type: CardComponentModule,
|
|
171
|
+
deps: [],
|
|
172
|
+
target: i0.ɵɵFactoryTarget.NgModule
|
|
173
|
+
});
|
|
174
|
+
}
|
|
175
|
+
static {
|
|
176
|
+
this.ɵmod = i0.ɵɵngDeclareNgModule({
|
|
177
|
+
minVersion: "14.0.0",
|
|
178
|
+
version: "22.2.4",
|
|
179
|
+
ngImport: i0,
|
|
180
|
+
type: CardComponentModule,
|
|
181
|
+
imports: [
|
|
182
|
+
CommonModule,
|
|
183
|
+
IconComponentModule,
|
|
184
|
+
CardComponent
|
|
185
|
+
],
|
|
186
|
+
exports: [CardComponent]
|
|
187
|
+
});
|
|
188
|
+
}
|
|
189
|
+
static {
|
|
190
|
+
this.ɵinj = i0.ɵɵngDeclareInjector({
|
|
191
|
+
minVersion: "12.0.0",
|
|
192
|
+
version: "22.2.4",
|
|
193
|
+
ngImport: i0,
|
|
194
|
+
type: CardComponentModule,
|
|
195
|
+
imports: [
|
|
196
|
+
CommonModule,
|
|
197
|
+
IconComponentModule,
|
|
198
|
+
CardComponent
|
|
199
|
+
]
|
|
200
|
+
});
|
|
201
|
+
}
|
|
202
|
+
};
|
|
203
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
204
|
+
minVersion: "12.0.0",
|
|
205
|
+
version: "22.2.4",
|
|
206
|
+
ngImport: i0,
|
|
207
|
+
type: CardComponentModule,
|
|
208
|
+
decorators: [{
|
|
209
|
+
type: NgModule,
|
|
210
|
+
args: [{
|
|
211
|
+
imports: [
|
|
212
|
+
CommonModule,
|
|
213
|
+
IconComponentModule,
|
|
214
|
+
CardComponent
|
|
215
|
+
],
|
|
216
|
+
exports: [CardComponent]
|
|
217
|
+
}]
|
|
218
|
+
}]
|
|
219
|
+
});
|
|
186
220
|
export { CardComponent, CardComponentModule, NON_SELECTABLE_CARD_VARIANTS };
|
|
187
|
-
|
|
221
|
+
|
|
222
|
+
//# sourceMappingURL=testgorilla-tgo-ui-components-card.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"testgorilla-tgo-ui-components-card.mjs","sources":["../../../components/card/card.model.ts","../../../components/card/card.component.ts","../../../components/card/card.component.html","../../../components/card/card.component.module.ts","../../../components/card/testgorilla-tgo-ui-components-card.ts"],"sourcesContent":["export type CardSize = 'small' | 'medium' | 'large';\nexport type CardSizeVariant = 'regular' | 'condensed';\nexport type CardVariant =\n | 'default'\n | 'shadow'\n | 'state'\n | 'error'\n | 'educative'\n | 'premium'\n | 'ai'\n | 'actionDriver'\n | 'neutral'\n | 'neutral-state';\n\nexport const NON_SELECTABLE_CARD_VARIANTS: readonly CardVariant[] = [\n 'educative',\n 'premium',\n 'ai',\n 'actionDriver',\n 'neutral',\n];\n","import { NgClass } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Inject,\n Input,\n OnChanges,\n OnInit,\n Optional,\n Output,\n} from '@angular/core';\n\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { IconSize, IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\n\nimport { CardSize, CardSizeVariant, CardVariant, NON_SELECTABLE_CARD_VARIANTS } from './card.model';\n\n@Component({\n selector: 'ui-card',\n templateUrl: './card.component.html',\n styleUrls: ['./card.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [NgClass, IconComponentModule],\n})\nexport class CardComponent implements OnChanges, OnInit {\n /**\n * Card size. Defaults \"medium\".\n *\n * @type {CardSize}\n * @memberof CardComponent\n */\n @Input() size: CardSize = 'medium';\n\n /**\n * Card size variant. Defaults \"default\".\n *\n * @type {CardSizeVariant}\n * @memberof CardComponent\n */\n @Input() sizeVariant: CardSizeVariant = 'regular';\n\n /**\n * Card variants. Defaults \"default\".\n *\n * @type {CardVariant}\n * @memberof CardComponent\n */\n @Input() variant: CardVariant = 'default';\n\n /**\n *\n * Defines the application theme\n *\n * @type {ApplicationTheme}\n * @memberof CardComponent\n */\n @Input() applicationTheme: ApplicationTheme = 'light';\n\n /**\n * Show errors below card.\n *\n * @type {string[]}\n * @memberof CardComponent\n */\n @Input() set errors(errors: string[]) {\n this.safeErrors = errors?.filter(Boolean) ?? [];\n }\n\n /**\n * Errors size\n *\n * @type {string}\n * @memberof CardComponent\n */\n @Input() errorsSize? = 'default';\n\n /**\n * Marks card as selected\n *\n * @type {boolean}\n * @memberof CardComponent\n */\n @Input() selected = false;\n\n /**\n * Marks card as readonly. Defaults \"false\".\n *\n * @type {boolean}\n * @memberof CardComponent\n */\n @Input() allowSelect = false;\n\n /**\n * Marks card as focusable. Defaults \"true\".\n *\n * @type {boolean}\n * @memberof CardComponent\n */\n @Input() allowFocus = true;\n\n @Input() testId: string | null = null;\n\n /**\n * Emits when card is being selected\n */\n @Output() cardSelected = new EventEmitter<boolean>();\n\n safeErrors: string[] = [];\n\n classes = '';\n\n constructor(\n @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme\n ) {\n if (defaultAppTheme) {\n this.applicationTheme = defaultAppTheme;\n }\n }\n\n ngOnChanges(): void {\n this.classes = `card-size-${this.size ?? 'medium'} ${this.sizeVariant ?? 'regular'} ${this.cardVariant ?? 'default'}`;\n }\n\n ngOnInit(): void {\n this.classes = `card-size-${this.size ?? 'medium'} ${this.sizeVariant ?? 'regular'} ${this.cardVariant ?? 'default'}`;\n }\n\n get cardVariant(): CardVariant {\n return this.safeErrors?.length ? 'error' : this.variant;\n }\n\n get errorIconSize(): IconSize {\n return this.errorsSize === 'small' ? '16' : '24';\n }\n\n get isSelected(): boolean {\n // educative, premium, ai, actionDriver and neutral variants shouldn't have any selected/interactive states\n return this.selected && !NON_SELECTABLE_CARD_VARIANTS.includes(this.variant);\n }\n\n /**\n * Whether activating the card does anything. Drives `tabindex`, `role` and `aria-pressed`.\n *\n * @type {boolean}\n * @memberof CardComponent\n */\n get isActionable(): boolean {\n return this.allowSelect && this.variant !== 'default' && !NON_SELECTABLE_CARD_VARIANTS.includes(this.variant);\n }\n\n /**\n * @param event The originating DOM event. Events raised inside the projected footer are ignored.\n */\n selectCard(event?: Event) {\n if (!this.isActionable || this.isFromProjectedFooter(event)) {\n return;\n }\n\n this.selected = true;\n this.cardSelected.emit(this.selected);\n }\n\n private isFromProjectedFooter(event?: Event): boolean {\n const target = event?.target;\n return target instanceof Element && Boolean(target.closest('.card-footer'));\n }\n}\n","<div\n class=\"card-container\"\n (keydown.enter)=\"selectCard($event)\"\n (keydown.space)=\"selectCard($event)\"\n (click)=\"selectCard($event)\"\n [ngClass]=\"[classes, isSelected ? 'selected' : '']\"\n [attr.theme]=\"applicationTheme\"\n [attr.tabindex]=\"allowFocus && isActionable ? 0 : null\"\n [attr.role]=\"isActionable ? 'button' : null\"\n [attr.aria-pressed]=\"isActionable ? isSelected : null\"\n [attr.data-testid]=\"testId\"\n>\n <ng-content></ng-content>\n\n <div class=\"card-footer\">\n <ng-content select=\"[cardFooter]\"></ng-content>\n </div>\n</div>\n@if (safeErrors?.length) {\n <div class=\"errors\" [class.errors-small]=\"errorsSize === 'small'\">\n @for (error of safeErrors; track error) {\n <div class=\"error\">\n <ui-icon [size]=\"errorIconSize\" [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n }\n </div>\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\n\nimport { CardComponent } from './card.component';\n\n@NgModule({\n imports: [CommonModule, IconComponentModule, CardComponent],\n exports: [CardComponent],\n})\nexport class CardComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"testgorilla-tgo-ui-components-card.mjs","names":[],"sources":["../../../components/card/card.model.ts","../../../components/card/card.component.ts","../../../components/card/card.component.html","../../../components/card/card.component.module.ts"],"sourcesContent":["export type CardSize = 'small' | 'medium' | 'large';\nexport type CardSizeVariant = 'regular' | 'condensed';\nexport type CardVariant =\n | 'default'\n | 'shadow'\n | 'state'\n | 'error'\n | 'educative'\n | 'premium'\n | 'ai'\n | 'actionDriver'\n | 'neutral'\n | 'neutral-state';\n\nexport const NON_SELECTABLE_CARD_VARIANTS: readonly CardVariant[] = [\n 'educative',\n 'premium',\n 'ai',\n 'actionDriver',\n 'neutral',\n];\n","import { NgClass } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Inject,\n Input,\n OnChanges,\n OnInit,\n Optional,\n Output,\n} from '@angular/core';\n\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { IconSize, IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\n\nimport { CardSize, CardSizeVariant, CardVariant, NON_SELECTABLE_CARD_VARIANTS } from './card.model';\n\n@Component({\n selector: 'ui-card',\n templateUrl: './card.component.html',\n styleUrls: ['./card.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [NgClass, IconComponentModule],\n})\nexport class CardComponent implements OnChanges, OnInit {\n /**\n * Card size. Defaults \"medium\".\n *\n * @type {CardSize}\n * @memberof CardComponent\n */\n @Input() size: CardSize = 'medium';\n\n /**\n * Card size variant. Defaults \"default\".\n *\n * @type {CardSizeVariant}\n * @memberof CardComponent\n */\n @Input() sizeVariant: CardSizeVariant = 'regular';\n\n /**\n * Card variants. Defaults \"default\".\n *\n * @type {CardVariant}\n * @memberof CardComponent\n */\n @Input() variant: CardVariant = 'default';\n\n /**\n *\n * Defines the application theme\n *\n * @type {ApplicationTheme}\n * @memberof CardComponent\n */\n @Input() applicationTheme: ApplicationTheme = 'light';\n\n /**\n * Show errors below card.\n *\n * @type {string[]}\n * @memberof CardComponent\n */\n @Input() set errors(errors: string[]) {\n this.safeErrors = errors?.filter(Boolean) ?? [];\n }\n\n /**\n * Errors size\n *\n * @type {string}\n * @memberof CardComponent\n */\n @Input() errorsSize? = 'default';\n\n /**\n * Marks card as selected\n *\n * @type {boolean}\n * @memberof CardComponent\n */\n @Input() selected = false;\n\n /**\n * Marks card as readonly. Defaults \"false\".\n *\n * @type {boolean}\n * @memberof CardComponent\n */\n @Input() allowSelect = false;\n\n /**\n * Marks card as focusable. Defaults \"true\".\n *\n * @type {boolean}\n * @memberof CardComponent\n */\n @Input() allowFocus = true;\n\n @Input() testId: string | null = null;\n\n /**\n * Emits when card is being selected\n */\n @Output() cardSelected = new EventEmitter<boolean>();\n\n safeErrors: string[] = [];\n\n classes = '';\n\n constructor(\n @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme\n ) {\n if (defaultAppTheme) {\n this.applicationTheme = defaultAppTheme;\n }\n }\n\n ngOnChanges(): void {\n this.classes = `card-size-${this.size ?? 'medium'} ${this.sizeVariant ?? 'regular'} ${this.cardVariant ?? 'default'}`;\n }\n\n ngOnInit(): void {\n this.classes = `card-size-${this.size ?? 'medium'} ${this.sizeVariant ?? 'regular'} ${this.cardVariant ?? 'default'}`;\n }\n\n get cardVariant(): CardVariant {\n return this.safeErrors?.length ? 'error' : this.variant;\n }\n\n get errorIconSize(): IconSize {\n return this.errorsSize === 'small' ? '16' : '24';\n }\n\n get isSelected(): boolean {\n // educative, premium, ai, actionDriver and neutral variants shouldn't have any selected/interactive states\n return this.selected && !NON_SELECTABLE_CARD_VARIANTS.includes(this.variant);\n }\n\n /**\n * Whether activating the card does anything. Drives `tabindex`, `role` and `aria-pressed`.\n *\n * @type {boolean}\n * @memberof CardComponent\n */\n get isActionable(): boolean {\n return this.allowSelect && this.variant !== 'default' && !NON_SELECTABLE_CARD_VARIANTS.includes(this.variant);\n }\n\n /**\n * @param event The originating DOM event. Events raised inside the projected footer are ignored.\n */\n selectCard(event?: Event) {\n if (!this.isActionable || this.isFromProjectedFooter(event)) {\n return;\n }\n\n this.selected = true;\n this.cardSelected.emit(this.selected);\n }\n\n private isFromProjectedFooter(event?: Event): boolean {\n const target = event?.target;\n return target instanceof Element && Boolean(target.closest('.card-footer'));\n }\n}\n","<div\n class=\"card-container\"\n (keydown.enter)=\"selectCard($event)\"\n (keydown.space)=\"selectCard($event)\"\n (click)=\"selectCard($event)\"\n [ngClass]=\"[classes, isSelected ? 'selected' : '']\"\n [attr.theme]=\"applicationTheme\"\n [attr.tabindex]=\"allowFocus && isActionable ? 0 : null\"\n [attr.role]=\"isActionable ? 'button' : null\"\n [attr.aria-pressed]=\"isActionable ? isSelected : null\"\n [attr.data-testid]=\"testId\"\n>\n <ng-content></ng-content>\n\n <div class=\"card-footer\">\n <ng-content select=\"[cardFooter]\"></ng-content>\n </div>\n</div>\n@if (safeErrors?.length) {\n <div class=\"errors\" [class.errors-small]=\"errorsSize === 'small'\">\n @for (error of safeErrors; track error) {\n <div class=\"error\">\n <ui-icon [size]=\"errorIconSize\" [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n }\n </div>\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\n\nimport { CardComponent } from './card.component';\n\n@NgModule({\n imports: [CommonModule, IconComponentModule, CardComponent],\n exports: [CardComponent],\n})\nexport class CardComponentModule {}\n"],"mappings":";;;;;AAcA,MAAa,+BAAuD;CAClE;CACA;CACA;CACA;CACA;AACD;ACKD,IAAa,gBAAb,MAAa,cAAa;CAwCxB,IAAa,OAAO,QAAgB;EAClC,KAAK,aAAa,QAAQ,OAAO,OAAO,KAAK,CAAA;CAC/C;CA6CA,YAC6E,iBAAiC;EAAjC,KAAA,kBAAA;EAjFpE,KAAA,OAAiB;EAQjB,KAAA,cAA+B;EAQ/B,KAAA,UAAuB;EASvB,KAAA,mBAAqC;EAkBrC,KAAA,aAAc;EAQd,KAAA,WAAW;EAQX,KAAA,cAAc;EAQd,KAAA,aAAa;EAEb,KAAA,SAAwB;EAKvB,KAAA,eAAe,IAAI,aAAY;EAEzC,KAAA,aAAuB,CAAA;EAEvB,KAAA,UAAU;EAKR,IAAI,iBACF,KAAK,mBAAmB;CAE5B;CAEA,cAAW;EACT,KAAK,UAAU,aAAa,KAAK,QAAQ,SAAQ,GAAI,KAAK,eAAe,UAAS,GAAI,KAAK,eAAe;CAC5G;CAEA,WAAQ;EACN,KAAK,UAAU,aAAa,KAAK,QAAQ,SAAQ,GAAI,KAAK,eAAe,UAAS,GAAI,KAAK,eAAe;CAC5G;CAEA,IAAI,cAAW;EACb,OAAO,KAAK,YAAY,SAAS,UAAU,KAAK;CAClD;CAEA,IAAI,gBAAa;EACf,OAAO,KAAK,eAAe,UAAU,OAAO;CAC9C;CAEA,IAAI,aAAU;EAEZ,OAAO,KAAK,YAAY,CAAC,6BAA6B,SAAS,KAAK,OAAO;CAC7E;CAQA,IAAI,eAAY;EACd,OAAO,KAAK,eAAe,KAAK,YAAY,aAAa,CAAC,6BAA6B,SAAS,KAAK,OAAO;CAC9G;CAKA,WAAW,OAAa;EACtB,IAAI,CAAC,KAAK,gBAAgB,KAAK,sBAAsB,KAAK,GACxD;EAGF,KAAK,WAAW;EAChB,KAAK,aAAa,KAAK,KAAK,QAAQ;CACtC;CAEQ,sBAAsB,OAAa;EACzC,MAAM,SAAS,OAAO;EACtB,OAAO,kBAAkB,WAAW,QAAQ,OAAO,QAAQ,cAAc,CAAC;CAC5E;CA7IW;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAa,MAAA,CAAA;IAAA,OAwFF;IAAoC,UAAA;GAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAxF/C;EAAA,KAAA,OAAA,GAAA,qBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,MAAA;GAAa,cAAA;GAAA,UAAA;GAAA,QAAA;IAAA,MAAA;IAAA,aAAA;IAAA,SAAA;IAAA,kBAAA;IAAA,QAAA;IAAA,YAAA;IAAA,UAAA;IAAA,aAAA;IAAA,YAAA;IAAA,QAAA;GAAA;GAAA,SAAA,EAAA,cAAA,eAAA;GAAA,eAAA;GAAA,UAAA;GAAA,UCzB1B;GA4BA,QAAA,CAAA,mkNAAA;GAAA,cAAA;IAAA;KAAA,MAAA;KAAA,MDLY;KAAO,UAAA;KAAA,QAAA,CAAA,SAAA,SAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MAAE;IAAmB;IAAA;KAAA,MAAA;KAAA,MAAA,GAAA;KAAA,UAAA;KAAA,QAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;KAAA;IAAA;GAAA;GAAA,iBAAA,GAAA,wBAAA;EAAA,CAAA;CAAA;;AAE3B,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAa,YAAA,CAAA;EAPzB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAS,iBAGF,wBAAwB;GAAM,SACtC,CAAC,SAAS,mBAAmB;GAAC,UAAA;GAAA,QAAA,CAAA,mkNAAA;EAAA,CAAA;;;;E,eA0FpC,MAAA,S;GAAY,MAAA;GAAO,MAAA,CAAA,oCAAoC;;;;E,SAjFzD,MAAA,M;E,gBAQA,MAAA,M;E,YAQA,MAAA,M;E,qBASA,MAAA,M;E,WAQA,MAAA,M;E,eAUA,MAAA,M;E,aAQA,MAAA,M;E,gBAQA,MAAA,M;E,eAQA,MAAA,M;E,WAEA,MAAA,M;E,iBAKA,MAAA,O;;;AE/FH,IAAa,sBAAb,MAAa,oBAAmB;CAAnB;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAmB,MAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAAnB;EAAA,KAAA,OAAA,GAAA,oBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAmB,SAAA;IAHpB;IAAc;IAAqB;GAAa;GAAA,SAAA,CAChD,aAAa;EAAA,CAAA;CAAA;CAEZ;EAAA,KAAA,OAAA,GAAA,oBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAmB,SAAA;IAHpB;IAAc;IAAqB;GAAa;EAAA,CAAA;CAAA;;AAG/C,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAmB,YAAA,CAAA;EAJ/B,MAAA;EAAS,MAAA,CAAA;GACR,SAAS;IAAC;IAAc;IAAqB;GAAa;GAC1D,SAAS,CAAC,aAAa;EACxB,CAAA"}
|