@testgorilla/tgo-ui 4.1.2-beta → 4.1.3-beta
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/components/autocomplete/autocomplete.component.d.ts +1 -1
- package/components/autocomplete/autocomplete.component.module.d.ts +7 -8
- package/components/autocomplete/index.d.ts +5 -0
- package/components/autocomplete/public-api.d.ts +4 -0
- package/components/avatar/avatar.component.module.d.ts +1 -1
- package/components/avatar/index.d.ts +5 -0
- package/components/avatar/public-api.d.ts +4 -0
- package/components/card/index.d.ts +5 -0
- package/components/card/public-api.d.ts +4 -0
- package/components/checkbox/checkbox.component.d.ts +1 -1
- package/components/checkbox/checkbox.component.module.d.ts +4 -5
- package/components/checkbox/index.d.ts +5 -0
- package/components/checkbox/public-api.d.ts +4 -0
- package/components/core/has-validation-error.pipe.d.ts +15 -0
- package/components/core/keyboard-events.model.d.ts +11 -0
- package/components/core/public-api.d.ts +7 -0
- package/components/core/select-text.directive.d.ts +19 -0
- package/components/datepicker/datepicker.component.module.d.ts +1 -1
- package/components/dropdown/dropdown.component.module.d.ts +2 -3
- package/components/dropdown/index.d.ts +5 -0
- package/components/dropdown/public-api.d.ts +4 -0
- package/components/empty-state/index.d.ts +5 -0
- package/components/empty-state/public-api.d.ts +4 -0
- package/components/field/field.component.d.ts +1 -1
- package/components/field/field.component.module.d.ts +3 -5
- package/components/field/index.d.ts +5 -0
- package/components/field/public-api.d.ts +4 -0
- package/components/file-upload/file-upload.component.module.d.ts +1 -1
- package/components/filter-button/filter-button.component.module.d.ts +3 -3
- package/components/filter-button/index.d.ts +5 -0
- package/components/filter-button/public-api.d.ts +4 -0
- package/components/inline-field/index.d.ts +5 -0
- package/components/inline-field/inline-field.component.d.ts +2 -2
- package/components/inline-field/inline-field.component.module.d.ts +1 -1
- package/components/inline-field/public-api.d.ts +4 -0
- package/components/logo/index.d.ts +5 -0
- package/components/logo/public-api.d.ts +4 -0
- package/components/multi-input/multi-input.component.module.d.ts +5 -6
- package/components/navbar/mobile-navbar-side-sheet/mobile-navbar-side-sheet.component.d.ts +1 -1
- package/components/navbar/navbar.component.d.ts +2 -2
- package/components/navbar/navbar.component.module.d.ts +2 -2
- package/components/paginator/index.d.ts +5 -0
- package/components/paginator/public-api.d.ts +3 -0
- package/components/password-criteria/password.component.module.d.ts +2 -2
- package/components/password-strength/password-strength.component.module.d.ts +1 -1
- package/components/phone-input/phone-input.component.module.d.ts +2 -2
- package/components/progress-bar/index.d.ts +5 -0
- package/components/progress-bar/public-api.d.ts +3 -0
- package/components/prompt/prompt.component.d.ts +1 -1
- package/components/prompt/prompt.module.d.ts +3 -3
- package/components/radial-progress/index.d.ts +5 -0
- package/components/radial-progress/public-api.d.ts +4 -0
- package/components/radio-button/index.d.ts +5 -0
- package/components/radio-button/public-api.d.ts +4 -0
- package/components/radio-button/radio-button.component.d.ts +1 -1
- package/components/radio-button/radio-button.component.module.d.ts +1 -1
- package/components/rating/index.d.ts +5 -0
- package/components/rating/public-api.d.ts +3 -0
- package/components/scale/index.d.ts +5 -0
- package/components/scale/public-api.d.ts +3 -0
- package/components/segmented-bar/index.d.ts +5 -0
- package/components/segmented-bar/public-api.d.ts +4 -0
- package/components/segmented-button/index.d.ts +5 -0
- package/components/segmented-button/public-api.d.ts +4 -0
- package/components/selectable-card/selectable-card.component.d.ts +1 -1
- package/components/selectable-card/selectable-card.component.module.d.ts +2 -2
- package/components/side-sheet/side-sheet.component.module.d.ts +1 -1
- package/components/slider/index.d.ts +5 -0
- package/components/slider/public-api.d.ts +4 -0
- package/components/spider-chart/spider-chart.module.d.ts +1 -1
- package/components/spinner/index.d.ts +5 -0
- package/components/spinner/public-api.d.ts +4 -0
- package/components/stepper/stepper.component.module.d.ts +1 -1
- package/components/table/table.component.module.d.ts +1 -1
- package/components/tag/index.d.ts +5 -0
- package/components/tag/public-api.d.ts +4 -0
- package/components/toggle/index.d.ts +5 -0
- package/components/toggle/public-api.d.ts +3 -0
- package/components/toggle/toggle.component.module.d.ts +1 -1
- package/components/universal-skills-report/universal-skills-report.component.module.d.ts +1 -1
- package/components/universal-skills-spider-charts/universal-skills-spider-charts.component.module.d.ts +1 -1
- package/components/validation-error/index.d.ts +5 -0
- package/components/validation-error/public-api.d.ts +3 -0
- package/fesm2022/testgorilla-tgo-ui-components-autocomplete.mjs +1045 -0
- package/fesm2022/testgorilla-tgo-ui-components-autocomplete.mjs.map +1 -0
- package/fesm2022/testgorilla-tgo-ui-components-avatar.mjs +173 -0
- package/fesm2022/testgorilla-tgo-ui-components-avatar.mjs.map +1 -0
- package/fesm2022/testgorilla-tgo-ui-components-card.mjs +164 -0
- package/fesm2022/testgorilla-tgo-ui-components-card.mjs.map +1 -0
- package/fesm2022/testgorilla-tgo-ui-components-checkbox.mjs +402 -0
- package/fesm2022/testgorilla-tgo-ui-components-checkbox.mjs.map +1 -0
- package/fesm2022/testgorilla-tgo-ui-components-core.mjs +240 -1
- package/fesm2022/testgorilla-tgo-ui-components-core.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-dropdown.mjs +434 -0
- package/fesm2022/testgorilla-tgo-ui-components-dropdown.mjs.map +1 -0
- package/fesm2022/testgorilla-tgo-ui-components-empty-state.mjs +326 -0
- package/fesm2022/testgorilla-tgo-ui-components-empty-state.mjs.map +1 -0
- package/fesm2022/testgorilla-tgo-ui-components-field.mjs +638 -0
- package/fesm2022/testgorilla-tgo-ui-components-field.mjs.map +1 -0
- package/fesm2022/testgorilla-tgo-ui-components-filter-button.mjs +314 -0
- package/fesm2022/testgorilla-tgo-ui-components-filter-button.mjs.map +1 -0
- package/fesm2022/testgorilla-tgo-ui-components-inline-field.mjs +367 -0
- package/fesm2022/testgorilla-tgo-ui-components-inline-field.mjs.map +1 -0
- package/fesm2022/testgorilla-tgo-ui-components-logo.mjs +218 -0
- package/fesm2022/testgorilla-tgo-ui-components-logo.mjs.map +1 -0
- package/fesm2022/testgorilla-tgo-ui-components-paginator.mjs +110 -0
- package/fesm2022/testgorilla-tgo-ui-components-paginator.mjs.map +1 -0
- package/fesm2022/testgorilla-tgo-ui-components-progress-bar.mjs +128 -0
- package/fesm2022/testgorilla-tgo-ui-components-progress-bar.mjs.map +1 -0
- package/fesm2022/testgorilla-tgo-ui-components-radial-progress.mjs +152 -0
- package/fesm2022/testgorilla-tgo-ui-components-radial-progress.mjs.map +1 -0
- package/fesm2022/testgorilla-tgo-ui-components-radio-button.mjs +373 -0
- package/fesm2022/testgorilla-tgo-ui-components-radio-button.mjs.map +1 -0
- package/fesm2022/testgorilla-tgo-ui-components-rating.mjs +150 -0
- package/fesm2022/testgorilla-tgo-ui-components-rating.mjs.map +1 -0
- package/fesm2022/testgorilla-tgo-ui-components-scale.mjs +158 -0
- package/fesm2022/testgorilla-tgo-ui-components-scale.mjs.map +1 -0
- package/fesm2022/testgorilla-tgo-ui-components-segmented-bar.mjs +137 -0
- package/fesm2022/testgorilla-tgo-ui-components-segmented-bar.mjs.map +1 -0
- package/fesm2022/testgorilla-tgo-ui-components-segmented-button.mjs +128 -0
- package/fesm2022/testgorilla-tgo-ui-components-segmented-button.mjs.map +1 -0
- package/fesm2022/testgorilla-tgo-ui-components-slider.mjs +274 -0
- package/fesm2022/testgorilla-tgo-ui-components-slider.mjs.map +1 -0
- package/fesm2022/testgorilla-tgo-ui-components-spinner.mjs +108 -0
- package/fesm2022/testgorilla-tgo-ui-components-spinner.mjs.map +1 -0
- package/fesm2022/testgorilla-tgo-ui-components-tag.mjs +239 -0
- package/fesm2022/testgorilla-tgo-ui-components-tag.mjs.map +1 -0
- package/fesm2022/testgorilla-tgo-ui-components-toggle.mjs +216 -0
- package/fesm2022/testgorilla-tgo-ui-components-toggle.mjs.map +1 -0
- package/fesm2022/testgorilla-tgo-ui-components-validation-error.mjs +79 -0
- package/fesm2022/testgorilla-tgo-ui-components-validation-error.mjs.map +1 -0
- package/fesm2022/testgorilla-tgo-ui.mjs +3057 -9093
- package/fesm2022/testgorilla-tgo-ui.mjs.map +1 -1
- package/package.json +99 -7
- package/public-api.d.ts +0 -63
- /package/{directives → components/autocomplete}/select-text.directive.d.ts +0 -0
- /package/{pipes → components/avatar}/name-initials.pipe.d.ts +0 -0
- /package/{utils → components/core}/autocomplete-utils.d.ts +0 -0
- /package/{models → components/core}/checkbox.model.d.ts +0 -0
- /package/{directives → components/core}/digits-only.directive.d.ts +0 -0
- /package/{utils → components/core}/hex-to-rgb.d.ts +0 -0
|
@@ -0,0 +1,326 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { inject, EventEmitter, Output, Input, Optional, Inject, Component, NgModule } from '@angular/core';
|
|
3
|
+
import { DomSanitizer } from '@angular/platform-browser';
|
|
4
|
+
import * as i1 from '@angular/common';
|
|
5
|
+
import { CommonModule, NgOptimizedImage } from '@angular/common';
|
|
6
|
+
import * as i2 from '@testgorilla/tgo-ui/components/icon';
|
|
7
|
+
import { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';
|
|
8
|
+
import * as i3 from '@testgorilla/tgo-ui/components/button';
|
|
9
|
+
import { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';
|
|
10
|
+
import * as i4 from '@testgorilla/tgo-ui/components/core';
|
|
11
|
+
import { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';
|
|
12
|
+
|
|
13
|
+
class EmptyStateComponent {
|
|
14
|
+
/**
|
|
15
|
+
* @description The body text or description of the empty state.
|
|
16
|
+
* @type {string}
|
|
17
|
+
* @memberof EmptyStateComponent
|
|
18
|
+
*/
|
|
19
|
+
set bodyText(value) {
|
|
20
|
+
if (value) {
|
|
21
|
+
this.safeBodyText = this.domSanitizer.bypassSecurityTrustHtml(value);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
constructor(defaultAppTheme) {
|
|
25
|
+
this.defaultAppTheme = defaultAppTheme;
|
|
26
|
+
this.domSanitizer = inject(DomSanitizer);
|
|
27
|
+
this.safeBodyText = '';
|
|
28
|
+
/**
|
|
29
|
+
* @description If the default image should be displayed.
|
|
30
|
+
* @type {boolean}
|
|
31
|
+
* @memberof EmptyStateComponent
|
|
32
|
+
*/
|
|
33
|
+
this.showIllustration = false;
|
|
34
|
+
/**
|
|
35
|
+
* @description If the default image should be displayed.
|
|
36
|
+
* @type {IllustrationVariant}
|
|
37
|
+
* @memberof EmptyStateComponent
|
|
38
|
+
*/
|
|
39
|
+
this.illustrationVariant = 'Empty-search';
|
|
40
|
+
/**
|
|
41
|
+
* @description The icon to be displayed in the empty state.
|
|
42
|
+
* @type {IconName}
|
|
43
|
+
* @memberof EmptyStateComponent
|
|
44
|
+
*/
|
|
45
|
+
this.icon = '';
|
|
46
|
+
/**
|
|
47
|
+
* @description The empty state variant.
|
|
48
|
+
* @type {EmptyStateVariant}
|
|
49
|
+
* @memberof EmptyStateComponent
|
|
50
|
+
*/
|
|
51
|
+
this.emptyStateVariant = 'desktop';
|
|
52
|
+
/**
|
|
53
|
+
* @description The title of the empty state.
|
|
54
|
+
* @type {string}
|
|
55
|
+
* @memberof EmptyStateComponent
|
|
56
|
+
*/
|
|
57
|
+
this.title = '';
|
|
58
|
+
/**
|
|
59
|
+
* @description Displays primary button if passed.
|
|
60
|
+
* @type {string}
|
|
61
|
+
* @memberof EmptyStateComponent
|
|
62
|
+
*/
|
|
63
|
+
this.primaryButtonText = '';
|
|
64
|
+
/**
|
|
65
|
+
* Primary button variant - only for new theme.
|
|
66
|
+
* @type {ButtonVariant}
|
|
67
|
+
* @memberof EmptyStateComponent
|
|
68
|
+
*/
|
|
69
|
+
this.primaryButtonVariant = 'pink';
|
|
70
|
+
/**
|
|
71
|
+
* General button variation - only for new theme.
|
|
72
|
+
* @type {ButtonColor}
|
|
73
|
+
* @memberof EmptyStateComponent
|
|
74
|
+
*/
|
|
75
|
+
this.generalButtonVariation = 'primary';
|
|
76
|
+
/**
|
|
77
|
+
* @description Name of ui-icon for primary button
|
|
78
|
+
* @type {IconName}
|
|
79
|
+
* @memberof EmptyStateComponent
|
|
80
|
+
*/
|
|
81
|
+
this.primaryButtonIconName = '';
|
|
82
|
+
/**
|
|
83
|
+
* @description Position of ui-icon for primary button
|
|
84
|
+
* @type {ButtonIconPosition}
|
|
85
|
+
* @memberof EmptyStateComponent
|
|
86
|
+
*/
|
|
87
|
+
this.primaryButtonIconPosition = 'left';
|
|
88
|
+
/**
|
|
89
|
+
* @description Displays secondary button if passed.
|
|
90
|
+
* @type {string}
|
|
91
|
+
* @memberof EmptyStateComponent
|
|
92
|
+
*/
|
|
93
|
+
this.secondaryButtonText = '';
|
|
94
|
+
/**
|
|
95
|
+
* Secondary button variant - only for new theme.
|
|
96
|
+
* @type {ButtonVariant}
|
|
97
|
+
* @memberof EmptyStateComponent
|
|
98
|
+
*/
|
|
99
|
+
this.secondaryButtonVariant = 'black';
|
|
100
|
+
/**
|
|
101
|
+
* @description Name of ui-icon for secondary button
|
|
102
|
+
* @type {IconName}
|
|
103
|
+
* @memberof EmptyStateComponent
|
|
104
|
+
*/
|
|
105
|
+
this.secondaryButtonIconName = '';
|
|
106
|
+
/**
|
|
107
|
+
* @description Position of ui-icon for secondary button
|
|
108
|
+
* @type {ButtonIconPosition}
|
|
109
|
+
* @memberof EmptyStateComponent
|
|
110
|
+
*/
|
|
111
|
+
this.secondaryButtonIconPosition = 'left';
|
|
112
|
+
/**
|
|
113
|
+
* @description Displays tertiary button if passed.
|
|
114
|
+
* @type {string}
|
|
115
|
+
* @memberof EmptyStateComponent
|
|
116
|
+
*/
|
|
117
|
+
this.tertiaryButtonText = '';
|
|
118
|
+
/**
|
|
119
|
+
* Tertiary button variant - only for new theme.
|
|
120
|
+
* @type {ButtonVariant}
|
|
121
|
+
* @memberof EmptyStateComponent
|
|
122
|
+
*/
|
|
123
|
+
this.tertiaryButtonVariant = 'ghost';
|
|
124
|
+
/**
|
|
125
|
+
* @description Name of ui-icon for tertiary button
|
|
126
|
+
* @type {IconName}
|
|
127
|
+
* @memberof EmptyStateComponent
|
|
128
|
+
*/
|
|
129
|
+
this.tertiaryButtonIconName = '';
|
|
130
|
+
/**
|
|
131
|
+
* @description Position of ui-icon for tertiary button
|
|
132
|
+
* @type {ButtonIconPosition}
|
|
133
|
+
* @memberof EmptyStateComponent
|
|
134
|
+
*/
|
|
135
|
+
this.tertiaryButtonIconPosition = 'left';
|
|
136
|
+
/**
|
|
137
|
+
* @description Displays general variation button if passed.
|
|
138
|
+
* @type {string}
|
|
139
|
+
* @memberof EmptyStateComponent
|
|
140
|
+
*/
|
|
141
|
+
this.generalVariationButtonText = '';
|
|
142
|
+
/**
|
|
143
|
+
* @description Displays general variation button if passed.
|
|
144
|
+
* @type {string}
|
|
145
|
+
* @memberof EmptyStateComponent
|
|
146
|
+
*/
|
|
147
|
+
this.generalVariationButtonSize = 'big';
|
|
148
|
+
/**
|
|
149
|
+
* @description Name of ui-icon for general variation button
|
|
150
|
+
* @type {IconName}
|
|
151
|
+
* @memberof EmptyStateComponent
|
|
152
|
+
*/
|
|
153
|
+
this.generalVariationButtonIconName = '';
|
|
154
|
+
/**
|
|
155
|
+
* @description Position of ui-icon for general variation button
|
|
156
|
+
* @type {ButtonIconPosition}
|
|
157
|
+
* @memberof EmptyStateComponent
|
|
158
|
+
*/
|
|
159
|
+
this.generalVariationButtonIconPosition = 'left';
|
|
160
|
+
/**
|
|
161
|
+
* @description Disabled state for general variation button
|
|
162
|
+
* @type {boolean}
|
|
163
|
+
* @memberof EmptyStateComponent
|
|
164
|
+
*/
|
|
165
|
+
this.generalVariationButtonDisabled = false;
|
|
166
|
+
/**
|
|
167
|
+
*
|
|
168
|
+
* Defines the application theme
|
|
169
|
+
*
|
|
170
|
+
* @type {ApplicationTheme}
|
|
171
|
+
* @memberof EmptyStateComponent
|
|
172
|
+
*/
|
|
173
|
+
this.applicationTheme = 'light';
|
|
174
|
+
/**
|
|
175
|
+
* Event triggered when the primary button is clicked.
|
|
176
|
+
* @type {Event}
|
|
177
|
+
* @event
|
|
178
|
+
* @memberof TagComponent
|
|
179
|
+
*/
|
|
180
|
+
this.primaryButtonClick = new EventEmitter();
|
|
181
|
+
/**
|
|
182
|
+
* Event triggered when the secondary button is clicked.
|
|
183
|
+
* @type {Event}
|
|
184
|
+
* @event
|
|
185
|
+
* @memberof TagComponent
|
|
186
|
+
*/
|
|
187
|
+
this.secondaryButtonClick = new EventEmitter();
|
|
188
|
+
/**
|
|
189
|
+
* Event triggered when the tertiary button is clicked.
|
|
190
|
+
* @type {Event}
|
|
191
|
+
* @event
|
|
192
|
+
* @memberof TagComponent
|
|
193
|
+
*/
|
|
194
|
+
this.tertiaryButtonClick = new EventEmitter();
|
|
195
|
+
/**
|
|
196
|
+
* Event triggered when the general variation button is clicked.
|
|
197
|
+
* @type {Event}
|
|
198
|
+
* @event
|
|
199
|
+
* @memberof TagComponent
|
|
200
|
+
*/
|
|
201
|
+
this.generalVariationButtonClick = new EventEmitter();
|
|
202
|
+
if (defaultAppTheme) {
|
|
203
|
+
this.applicationTheme = defaultAppTheme;
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
ngOnInit() {
|
|
207
|
+
if (this.applicationTheme !== 'classic') {
|
|
208
|
+
this.buttonApplicationTheme = this.applicationTheme;
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
onPrimaryButtonClick(event) {
|
|
212
|
+
this.primaryButtonClick.emit(event);
|
|
213
|
+
}
|
|
214
|
+
onSecondaryButtonClick(event) {
|
|
215
|
+
this.secondaryButtonClick.emit(event);
|
|
216
|
+
}
|
|
217
|
+
onTertiaryButtonClick(event) {
|
|
218
|
+
this.tertiaryButtonClick.emit(event);
|
|
219
|
+
}
|
|
220
|
+
onGeneralVariationButtonClick(event) {
|
|
221
|
+
this.generalVariationButtonClick.emit(event);
|
|
222
|
+
}
|
|
223
|
+
getVariant(variant) {
|
|
224
|
+
if (variant === 'pink') {
|
|
225
|
+
return 'primary';
|
|
226
|
+
}
|
|
227
|
+
else if (variant === 'black') {
|
|
228
|
+
this.buttonApplicationTheme = 'light';
|
|
229
|
+
return 'secondary';
|
|
230
|
+
}
|
|
231
|
+
else {
|
|
232
|
+
this.buttonApplicationTheme = 'light';
|
|
233
|
+
return 'ghost';
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EmptyStateComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
237
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: EmptyStateComponent, isStandalone: false, selector: "ui-empty-state", inputs: { showIllustration: "showIllustration", illustrationVariant: "illustrationVariant", icon: "icon", emptyStateVariant: "emptyStateVariant", title: "title", bodyText: "bodyText", primaryButtonText: "primaryButtonText", primaryButtonVariant: "primaryButtonVariant", generalButtonVariation: "generalButtonVariation", primaryButtonIconName: "primaryButtonIconName", primaryButtonIconPosition: "primaryButtonIconPosition", secondaryButtonText: "secondaryButtonText", secondaryButtonVariant: "secondaryButtonVariant", secondaryButtonIconName: "secondaryButtonIconName", secondaryButtonIconPosition: "secondaryButtonIconPosition", tertiaryButtonText: "tertiaryButtonText", tertiaryButtonVariant: "tertiaryButtonVariant", tertiaryButtonIconName: "tertiaryButtonIconName", tertiaryButtonIconPosition: "tertiaryButtonIconPosition", generalVariationButtonText: "generalVariationButtonText", generalVariationButtonSize: "generalVariationButtonSize", generalVariationButtonIconName: "generalVariationButtonIconName", generalVariationButtonIconPosition: "generalVariationButtonIconPosition", generalVariationButtonDisabled: "generalVariationButtonDisabled", applicationTheme: "applicationTheme" }, outputs: { primaryButtonClick: "primaryButtonClick", secondaryButtonClick: "secondaryButtonClick", tertiaryButtonClick: "tertiaryButtonClick", generalVariationButtonClick: "generalVariationButtonClick" }, ngImport: i0, template: "<ng-container>\n <div class=\"empty-state-container\" [attr.theme]=\"applicationTheme\" [class.mobile]=\"emptyStateVariant === 'mobile'\">\n\n <div class=\"illustration\" *ngIf=\"showIllustration\" [attr.aria-hidden]=\"true\">\n <img *ngIf=\"applicationTheme === 'classic'\" [attr.src]=\"'/images/empty-state-default.svg'\" [width]=\"160\" [height]=\"160\" alt=\"illustration\">\n <img *ngIf=\"applicationTheme !== 'classic'\" [attr.src]=\"'/icons/rebrand/'+illustrationVariant+'-in-line.svg'\" [width]=\"160\" [height]=\"160\" alt=\"illustration\">\n </div>\n\n <div class=\"icon\" *ngIf=\"icon\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"icon\" size=\"40\"></ui-icon>\n </div>\n\n <div class=\"text-content\">\n <div class=\"title\">{{ title ? title : ('COMMON.NO_RESULTS') | uiTranslate | async }}</div>\n @if (safeBodyText) {\n <div class=\"body-text\" [innerHTML]=\"safeBodyText\"></div>\n }\n </div>\n\n <div class=\"actions\">\n <ui-button [fullWidth]=\"emptyStateVariant === 'mobile'\" [applicationTheme]=\"buttonApplicationTheme\" class=\"action-button\" *ngIf=\"primaryButtonText\" [variant]=\"applicationTheme !== 'classic' ? getVariant(primaryButtonVariant) : 'primary'\" [label]=\"primaryButtonText\" [iconName]=\"primaryButtonIconName\" [iconPosition]=\"primaryButtonIconPosition\" (buttonClickEvent)=\"onPrimaryButtonClick($event)\"></ui-button>\n <ui-button [fullWidth]=\"emptyStateVariant === 'mobile'\" [applicationTheme]=\"buttonApplicationTheme\" class=\"action-button\" *ngIf=\"secondaryButtonText\" [variant]=\"applicationTheme !== 'classic' ? getVariant(secondaryButtonVariant) : 'secondary'\" [label]=\"secondaryButtonText\" [iconName]=\"secondaryButtonIconName\" [iconPosition]=\"secondaryButtonIconPosition\" (buttonClickEvent)=\"onSecondaryButtonClick($event)\"></ui-button>\n <ui-button [fullWidth]=\"emptyStateVariant === 'mobile'\" [applicationTheme]=\"buttonApplicationTheme\" class=\"action-button\" *ngIf=\"tertiaryButtonText\" [variant]=\"applicationTheme !== 'classic' ? getVariant(tertiaryButtonVariant) : 'tertiary'\" [label]=\"tertiaryButtonText\" [iconName]=\"tertiaryButtonIconName\" [iconPosition]=\"tertiaryButtonIconPosition\" (buttonClickEvent)=\"onTertiaryButtonClick($event)\"></ui-button>\n @if (generalVariationButtonText) {\n <ui-button class=\"action-button\"\n [fullWidth]=\"emptyStateVariant === 'mobile'\"\n [applicationTheme]=\"buttonApplicationTheme\"\n [variant]=\"generalButtonVariation\"\n [label]=\"generalVariationButtonText\"\n [iconName]=\"generalVariationButtonIconName\"\n [iconPosition]=\"generalVariationButtonIconPosition\"\n [disabled]=\"generalVariationButtonDisabled\"\n [size]=\"generalVariationButtonSize\"\n (buttonClickEvent)=\"onGeneralVariationButtonClick($event)\"></ui-button>\n }\n </div>\n </div>\n</ng-container>\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}.empty-state-container{max-width:480px;margin:0 auto;flex-direction:column;padding:32px}.empty-state-container.mobile{max-width:none;padding:16px}.empty-state-container.mobile .actions{flex-direction:column;width:100%}@media (max-width: 600px){.empty-state-container{margin:0;padding:16px}.empty-state-container .actions{flex-direction:column;width:100%}.empty-state-container .actions ui-button{width:100%}.empty-state-container .actions ui-button ::ng-deep .button-wrapper,.empty-state-container .actions ui-button ::ng-deep button{width:100%}}.empty-state-container .text-content{margin:24px 0;flex-direction:column}.empty-state-container .text-content .title{font-weight:700;font-size:20px;line-height:26px;margin-bottom:8px;text-align:center}.empty-state-container .text-content .body-text{font-size:16px;line-height:24px;text-align:center}.empty-state-container .actions{display:flex;flex-wrap:wrap;justify-content:center}.empty-state-container .actions .action-button{margin:8px}.flex-center,.empty-state-container,.empty-state-container .text-content{display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: i3.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.UiTranslatePipe, name: "uiTranslate" }] }); }
|
|
238
|
+
}
|
|
239
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EmptyStateComponent, decorators: [{
|
|
240
|
+
type: Component,
|
|
241
|
+
args: [{ selector: 'ui-empty-state', standalone: false, template: "<ng-container>\n <div class=\"empty-state-container\" [attr.theme]=\"applicationTheme\" [class.mobile]=\"emptyStateVariant === 'mobile'\">\n\n <div class=\"illustration\" *ngIf=\"showIllustration\" [attr.aria-hidden]=\"true\">\n <img *ngIf=\"applicationTheme === 'classic'\" [attr.src]=\"'/images/empty-state-default.svg'\" [width]=\"160\" [height]=\"160\" alt=\"illustration\">\n <img *ngIf=\"applicationTheme !== 'classic'\" [attr.src]=\"'/icons/rebrand/'+illustrationVariant+'-in-line.svg'\" [width]=\"160\" [height]=\"160\" alt=\"illustration\">\n </div>\n\n <div class=\"icon\" *ngIf=\"icon\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"icon\" size=\"40\"></ui-icon>\n </div>\n\n <div class=\"text-content\">\n <div class=\"title\">{{ title ? title : ('COMMON.NO_RESULTS') | uiTranslate | async }}</div>\n @if (safeBodyText) {\n <div class=\"body-text\" [innerHTML]=\"safeBodyText\"></div>\n }\n </div>\n\n <div class=\"actions\">\n <ui-button [fullWidth]=\"emptyStateVariant === 'mobile'\" [applicationTheme]=\"buttonApplicationTheme\" class=\"action-button\" *ngIf=\"primaryButtonText\" [variant]=\"applicationTheme !== 'classic' ? getVariant(primaryButtonVariant) : 'primary'\" [label]=\"primaryButtonText\" [iconName]=\"primaryButtonIconName\" [iconPosition]=\"primaryButtonIconPosition\" (buttonClickEvent)=\"onPrimaryButtonClick($event)\"></ui-button>\n <ui-button [fullWidth]=\"emptyStateVariant === 'mobile'\" [applicationTheme]=\"buttonApplicationTheme\" class=\"action-button\" *ngIf=\"secondaryButtonText\" [variant]=\"applicationTheme !== 'classic' ? getVariant(secondaryButtonVariant) : 'secondary'\" [label]=\"secondaryButtonText\" [iconName]=\"secondaryButtonIconName\" [iconPosition]=\"secondaryButtonIconPosition\" (buttonClickEvent)=\"onSecondaryButtonClick($event)\"></ui-button>\n <ui-button [fullWidth]=\"emptyStateVariant === 'mobile'\" [applicationTheme]=\"buttonApplicationTheme\" class=\"action-button\" *ngIf=\"tertiaryButtonText\" [variant]=\"applicationTheme !== 'classic' ? getVariant(tertiaryButtonVariant) : 'tertiary'\" [label]=\"tertiaryButtonText\" [iconName]=\"tertiaryButtonIconName\" [iconPosition]=\"tertiaryButtonIconPosition\" (buttonClickEvent)=\"onTertiaryButtonClick($event)\"></ui-button>\n @if (generalVariationButtonText) {\n <ui-button class=\"action-button\"\n [fullWidth]=\"emptyStateVariant === 'mobile'\"\n [applicationTheme]=\"buttonApplicationTheme\"\n [variant]=\"generalButtonVariation\"\n [label]=\"generalVariationButtonText\"\n [iconName]=\"generalVariationButtonIconName\"\n [iconPosition]=\"generalVariationButtonIconPosition\"\n [disabled]=\"generalVariationButtonDisabled\"\n [size]=\"generalVariationButtonSize\"\n (buttonClickEvent)=\"onGeneralVariationButtonClick($event)\"></ui-button>\n }\n </div>\n </div>\n</ng-container>\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}.empty-state-container{max-width:480px;margin:0 auto;flex-direction:column;padding:32px}.empty-state-container.mobile{max-width:none;padding:16px}.empty-state-container.mobile .actions{flex-direction:column;width:100%}@media (max-width: 600px){.empty-state-container{margin:0;padding:16px}.empty-state-container .actions{flex-direction:column;width:100%}.empty-state-container .actions ui-button{width:100%}.empty-state-container .actions ui-button ::ng-deep .button-wrapper,.empty-state-container .actions ui-button ::ng-deep button{width:100%}}.empty-state-container .text-content{margin:24px 0;flex-direction:column}.empty-state-container .text-content .title{font-weight:700;font-size:20px;line-height:26px;margin-bottom:8px;text-align:center}.empty-state-container .text-content .body-text{font-size:16px;line-height:24px;text-align:center}.empty-state-container .actions{display:flex;flex-wrap:wrap;justify-content:center}.empty-state-container .actions .action-button{margin:8px}.flex-center,.empty-state-container,.empty-state-container .text-content{display:flex;justify-content:center;align-items:center}\n"] }]
|
|
242
|
+
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
243
|
+
type: Optional
|
|
244
|
+
}, {
|
|
245
|
+
type: Inject,
|
|
246
|
+
args: ['CANOPYUI_DEFAULT_APPLICATION_THEME']
|
|
247
|
+
}] }], propDecorators: { showIllustration: [{
|
|
248
|
+
type: Input
|
|
249
|
+
}], illustrationVariant: [{
|
|
250
|
+
type: Input
|
|
251
|
+
}], icon: [{
|
|
252
|
+
type: Input
|
|
253
|
+
}], emptyStateVariant: [{
|
|
254
|
+
type: Input
|
|
255
|
+
}], title: [{
|
|
256
|
+
type: Input
|
|
257
|
+
}], bodyText: [{
|
|
258
|
+
type: Input
|
|
259
|
+
}], primaryButtonText: [{
|
|
260
|
+
type: Input
|
|
261
|
+
}], primaryButtonVariant: [{
|
|
262
|
+
type: Input
|
|
263
|
+
}], generalButtonVariation: [{
|
|
264
|
+
type: Input
|
|
265
|
+
}], primaryButtonIconName: [{
|
|
266
|
+
type: Input
|
|
267
|
+
}], primaryButtonIconPosition: [{
|
|
268
|
+
type: Input
|
|
269
|
+
}], secondaryButtonText: [{
|
|
270
|
+
type: Input
|
|
271
|
+
}], secondaryButtonVariant: [{
|
|
272
|
+
type: Input
|
|
273
|
+
}], secondaryButtonIconName: [{
|
|
274
|
+
type: Input
|
|
275
|
+
}], secondaryButtonIconPosition: [{
|
|
276
|
+
type: Input
|
|
277
|
+
}], tertiaryButtonText: [{
|
|
278
|
+
type: Input
|
|
279
|
+
}], tertiaryButtonVariant: [{
|
|
280
|
+
type: Input
|
|
281
|
+
}], tertiaryButtonIconName: [{
|
|
282
|
+
type: Input
|
|
283
|
+
}], tertiaryButtonIconPosition: [{
|
|
284
|
+
type: Input
|
|
285
|
+
}], generalVariationButtonText: [{
|
|
286
|
+
type: Input
|
|
287
|
+
}], generalVariationButtonSize: [{
|
|
288
|
+
type: Input
|
|
289
|
+
}], generalVariationButtonIconName: [{
|
|
290
|
+
type: Input
|
|
291
|
+
}], generalVariationButtonIconPosition: [{
|
|
292
|
+
type: Input
|
|
293
|
+
}], generalVariationButtonDisabled: [{
|
|
294
|
+
type: Input
|
|
295
|
+
}], applicationTheme: [{
|
|
296
|
+
type: Input
|
|
297
|
+
}], primaryButtonClick: [{
|
|
298
|
+
type: Output
|
|
299
|
+
}], secondaryButtonClick: [{
|
|
300
|
+
type: Output
|
|
301
|
+
}], tertiaryButtonClick: [{
|
|
302
|
+
type: Output
|
|
303
|
+
}], generalVariationButtonClick: [{
|
|
304
|
+
type: Output
|
|
305
|
+
}] } });
|
|
306
|
+
|
|
307
|
+
class EmptyStateComponentModule {
|
|
308
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EmptyStateComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
309
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: EmptyStateComponentModule, declarations: [EmptyStateComponent], imports: [CommonModule, IconComponentModule, NgOptimizedImage, ButtonComponentModule, UiTranslatePipe], exports: [EmptyStateComponent] }); }
|
|
310
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EmptyStateComponentModule, imports: [CommonModule, IconComponentModule, ButtonComponentModule] }); }
|
|
311
|
+
}
|
|
312
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EmptyStateComponentModule, decorators: [{
|
|
313
|
+
type: NgModule,
|
|
314
|
+
args: [{
|
|
315
|
+
declarations: [EmptyStateComponent],
|
|
316
|
+
imports: [CommonModule, IconComponentModule, NgOptimizedImage, ButtonComponentModule, UiTranslatePipe],
|
|
317
|
+
exports: [EmptyStateComponent],
|
|
318
|
+
}]
|
|
319
|
+
}] });
|
|
320
|
+
|
|
321
|
+
/**
|
|
322
|
+
* Generated bundle index. Do not edit.
|
|
323
|
+
*/
|
|
324
|
+
|
|
325
|
+
export { EmptyStateComponent, EmptyStateComponentModule };
|
|
326
|
+
//# sourceMappingURL=testgorilla-tgo-ui-components-empty-state.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"testgorilla-tgo-ui-components-empty-state.mjs","sources":["../../../components/empty-state/empty-state.component.ts","../../../components/empty-state/empty-state.component.html","../../../components/empty-state/empty-state.component.module.ts","../../../components/empty-state/testgorilla-tgo-ui-components-empty-state.ts"],"sourcesContent":["import { Component, EventEmitter, inject, Inject, Input, Optional, Output } from '@angular/core';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { ButtonColor, ButtonIconPosition, ButtonSize } from '@testgorilla/tgo-ui/components/button';\nimport { IconName } from '@testgorilla/tgo-ui/components/icon';\nimport { ButtonVariant, EmptyStateVariant, IllustrationVariant } from './empty-state.model';\n\n@Component({\n selector: 'ui-empty-state',\n templateUrl: './empty-state.component.html',\n styleUrls: ['./empty-state.component.scss'],\n standalone: false\n})\nexport class EmptyStateComponent {\n private domSanitizer = inject(DomSanitizer);\n\n safeBodyText: SafeHtml = '';\n /**\n * @description If the default image should be displayed.\n * @type {boolean}\n * @memberof EmptyStateComponent\n */\n @Input() showIllustration = false;\n /**\n * @description If the default image should be displayed.\n * @type {IllustrationVariant}\n * @memberof EmptyStateComponent\n */\n @Input() illustrationVariant: IllustrationVariant = 'Empty-search';\n /**\n * @description The icon to be displayed in the empty state.\n * @type {IconName}\n * @memberof EmptyStateComponent\n */\n @Input() icon: IconName = '';\n\n /**\n * @description The empty state variant.\n * @type {EmptyStateVariant}\n * @memberof EmptyStateComponent\n */\n @Input() emptyStateVariant: EmptyStateVariant = 'desktop';\n\n /**\n * @description The title of the empty state.\n * @type {string}\n * @memberof EmptyStateComponent\n */\n @Input() title = '';\n\n /**\n * @description The body text or description of the empty state.\n * @type {string}\n * @memberof EmptyStateComponent\n */\n @Input() set bodyText(value: string) {\n if (value) {\n this.safeBodyText = this.domSanitizer.bypassSecurityTrustHtml(value);\n }\n }\n\n /**\n * @description Displays primary button if passed.\n * @type {string}\n * @memberof EmptyStateComponent\n */\n @Input() primaryButtonText = '';\n\n /**\n * Primary button variant - only for new theme.\n * @type {ButtonVariant}\n * @memberof EmptyStateComponent\n */\n @Input() primaryButtonVariant: ButtonVariant = 'pink';\n\n /**\n * General button variation - only for new theme.\n * @type {ButtonColor}\n * @memberof EmptyStateComponent\n */\n @Input() generalButtonVariation: ButtonColor = 'primary';\n\n /**\n * @description Name of ui-icon for primary button\n * @type {IconName}\n * @memberof EmptyStateComponent\n */\n @Input() primaryButtonIconName: IconName = '';\n\n /**\n * @description Position of ui-icon for primary button\n * @type {ButtonIconPosition}\n * @memberof EmptyStateComponent\n */\n @Input() primaryButtonIconPosition: ButtonIconPosition = 'left';\n\n /**\n * @description Displays secondary button if passed.\n * @type {string}\n * @memberof EmptyStateComponent\n */\n @Input() secondaryButtonText = '';\n\n /**\n * Secondary button variant - only for new theme.\n * @type {ButtonVariant}\n * @memberof EmptyStateComponent\n */\n @Input() secondaryButtonVariant: ButtonVariant = 'black';\n\n /**\n * @description Name of ui-icon for secondary button\n * @type {IconName}\n * @memberof EmptyStateComponent\n */\n @Input() secondaryButtonIconName: IconName = '';\n\n /**\n * @description Position of ui-icon for secondary button\n * @type {ButtonIconPosition}\n * @memberof EmptyStateComponent\n */\n @Input() secondaryButtonIconPosition: ButtonIconPosition = 'left';\n\n /**\n * @description Displays tertiary button if passed.\n * @type {string}\n * @memberof EmptyStateComponent\n */\n @Input() tertiaryButtonText = '';\n\n /**\n * Tertiary button variant - only for new theme.\n * @type {ButtonVariant}\n * @memberof EmptyStateComponent\n */\n @Input() tertiaryButtonVariant: ButtonVariant = 'ghost';\n\n /**\n * @description Name of ui-icon for tertiary button\n * @type {IconName}\n * @memberof EmptyStateComponent\n */\n @Input() tertiaryButtonIconName: IconName = '';\n\n /**\n * @description Position of ui-icon for tertiary button\n * @type {ButtonIconPosition}\n * @memberof EmptyStateComponent\n */\n @Input() tertiaryButtonIconPosition: ButtonIconPosition = 'left';\n\n /**\n * @description Displays general variation button if passed.\n * @type {string}\n * @memberof EmptyStateComponent\n */\n @Input() generalVariationButtonText = '';\n\n /**\n * @description Displays general variation button if passed.\n * @type {string}\n * @memberof EmptyStateComponent\n */\n @Input() generalVariationButtonSize: ButtonSize = 'big';\n\n /**\n * @description Name of ui-icon for general variation button\n * @type {IconName}\n * @memberof EmptyStateComponent\n */\n @Input() generalVariationButtonIconName: IconName = '';\n\n /**\n * @description Position of ui-icon for general variation button\n * @type {ButtonIconPosition}\n * @memberof EmptyStateComponent\n */\n @Input() generalVariationButtonIconPosition: ButtonIconPosition = 'left';\n\n /**\n * @description Disabled state for general variation button\n * @type {boolean}\n * @memberof EmptyStateComponent\n */\n @Input() generalVariationButtonDisabled = false;\n\n /**\n *\n * Defines the application theme\n *\n * @type {ApplicationTheme}\n * @memberof EmptyStateComponent\n */\n @Input() applicationTheme: ApplicationTheme = 'light';\n\n /**\n * Event triggered when the primary button is clicked.\n * @type {Event}\n * @event\n * @memberof TagComponent\n */\n @Output() primaryButtonClick = new EventEmitter<Event>();\n\n /**\n * Event triggered when the secondary button is clicked.\n * @type {Event}\n * @event\n * @memberof TagComponent\n */\n @Output() secondaryButtonClick = new EventEmitter<Event>();\n\n /**\n * Event triggered when the tertiary button is clicked.\n * @type {Event}\n * @event\n * @memberof TagComponent\n */\n @Output() tertiaryButtonClick = new EventEmitter<Event>();\n\n /**\n * Event triggered when the general variation button is clicked.\n * @type {Event}\n * @event\n * @memberof TagComponent\n */\n @Output() generalVariationButtonClick = new EventEmitter<Event>();\n\n buttonApplicationTheme: ApplicationTheme;\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 ngOnInit() {\n if (this.applicationTheme !== 'classic') {\n this.buttonApplicationTheme = this.applicationTheme;\n }\n }\n\n onPrimaryButtonClick(event: Event): void {\n this.primaryButtonClick.emit(event);\n }\n\n onSecondaryButtonClick(event: Event): void {\n this.secondaryButtonClick.emit(event);\n }\n\n onTertiaryButtonClick(event: Event): void {\n this.tertiaryButtonClick.emit(event);\n }\n\n onGeneralVariationButtonClick(event: Event): void {\n this.generalVariationButtonClick.emit(event);\n }\n\n getVariant(variant: ButtonVariant) {\n if (variant === 'pink') {\n return 'primary';\n } else if (variant === 'black') {\n this.buttonApplicationTheme = 'light';\n return 'secondary';\n } else {\n this.buttonApplicationTheme = 'light';\n return 'ghost';\n }\n }\n}\n","<ng-container>\n <div class=\"empty-state-container\" [attr.theme]=\"applicationTheme\" [class.mobile]=\"emptyStateVariant === 'mobile'\">\n\n <div class=\"illustration\" *ngIf=\"showIllustration\" [attr.aria-hidden]=\"true\">\n <img *ngIf=\"applicationTheme === 'classic'\" [attr.src]=\"'/images/empty-state-default.svg'\" [width]=\"160\" [height]=\"160\" alt=\"illustration\">\n <img *ngIf=\"applicationTheme !== 'classic'\" [attr.src]=\"'/icons/rebrand/'+illustrationVariant+'-in-line.svg'\" [width]=\"160\" [height]=\"160\" alt=\"illustration\">\n </div>\n\n <div class=\"icon\" *ngIf=\"icon\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"icon\" size=\"40\"></ui-icon>\n </div>\n\n <div class=\"text-content\">\n <div class=\"title\">{{ title ? title : ('COMMON.NO_RESULTS') | uiTranslate | async }}</div>\n @if (safeBodyText) {\n <div class=\"body-text\" [innerHTML]=\"safeBodyText\"></div>\n }\n </div>\n\n <div class=\"actions\">\n <ui-button [fullWidth]=\"emptyStateVariant === 'mobile'\" [applicationTheme]=\"buttonApplicationTheme\" class=\"action-button\" *ngIf=\"primaryButtonText\" [variant]=\"applicationTheme !== 'classic' ? getVariant(primaryButtonVariant) : 'primary'\" [label]=\"primaryButtonText\" [iconName]=\"primaryButtonIconName\" [iconPosition]=\"primaryButtonIconPosition\" (buttonClickEvent)=\"onPrimaryButtonClick($event)\"></ui-button>\n <ui-button [fullWidth]=\"emptyStateVariant === 'mobile'\" [applicationTheme]=\"buttonApplicationTheme\" class=\"action-button\" *ngIf=\"secondaryButtonText\" [variant]=\"applicationTheme !== 'classic' ? getVariant(secondaryButtonVariant) : 'secondary'\" [label]=\"secondaryButtonText\" [iconName]=\"secondaryButtonIconName\" [iconPosition]=\"secondaryButtonIconPosition\" (buttonClickEvent)=\"onSecondaryButtonClick($event)\"></ui-button>\n <ui-button [fullWidth]=\"emptyStateVariant === 'mobile'\" [applicationTheme]=\"buttonApplicationTheme\" class=\"action-button\" *ngIf=\"tertiaryButtonText\" [variant]=\"applicationTheme !== 'classic' ? getVariant(tertiaryButtonVariant) : 'tertiary'\" [label]=\"tertiaryButtonText\" [iconName]=\"tertiaryButtonIconName\" [iconPosition]=\"tertiaryButtonIconPosition\" (buttonClickEvent)=\"onTertiaryButtonClick($event)\"></ui-button>\n @if (generalVariationButtonText) {\n <ui-button class=\"action-button\"\n [fullWidth]=\"emptyStateVariant === 'mobile'\"\n [applicationTheme]=\"buttonApplicationTheme\"\n [variant]=\"generalButtonVariation\"\n [label]=\"generalVariationButtonText\"\n [iconName]=\"generalVariationButtonIconName\"\n [iconPosition]=\"generalVariationButtonIconPosition\"\n [disabled]=\"generalVariationButtonDisabled\"\n [size]=\"generalVariationButtonSize\"\n (buttonClickEvent)=\"onGeneralVariationButtonClick($event)\"></ui-button>\n }\n </div>\n </div>\n</ng-container>\n\n","import { NgModule } from '@angular/core';\nimport { CommonModule, NgOptimizedImage } from '@angular/common';\nimport { EmptyStateComponent } from './empty-state.component';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\n\n@NgModule({\n declarations: [EmptyStateComponent],\n imports: [CommonModule, IconComponentModule, NgOptimizedImage, ButtonComponentModule, UiTranslatePipe],\n exports: [EmptyStateComponent],\n})\nexport class EmptyStateComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|