@spartan-ng/cli 0.0.1-alpha.451 → 0.0.1-alpha.452
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/package.json +1 -1
- package/src/generators/ui/supported-ui-libraries.json +39 -39
- package/src/generators/ui/libs/ui-aspect-ratio-helm/files/lib/helm-aspect-ratio.directive.spec.ts.template +0 -74
- package/src/generators/ui/libs/ui-avatar-helm/files/lib/fallback/hlm-avatar-fallback.directive.spec.ts.template +0 -70
- package/src/generators/ui/libs/ui-avatar-helm/files/lib/hlm-avatar.component.spec.ts.template +0 -65
- package/src/generators/ui/libs/ui-avatar-helm/files/lib/image/hlm-avatar-image.directive.spec.ts.template +0 -44
- package/src/generators/ui/libs/ui-form-field-helm/files/lib/form-field.spec.ts.template +0 -136
- package/src/generators/ui/libs/ui-icon-helm/files/lib/hlm-icon.directive.spec.ts.template +0 -66
- package/src/generators/ui/libs/ui-switch-helm/files/lib/hlm-switch-ng-model.component.ignore.spec.ts.template +0 -27
package/package.json
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"@angular/core": ">=19.0.0",
|
|
6
6
|
"@ng-icons/core": ">=29.0.0",
|
|
7
7
|
"@ng-icons/lucide": ">=29.0.0",
|
|
8
|
-
"@spartan-ng/brain": "0.0.1-alpha.
|
|
8
|
+
"@spartan-ng/brain": "0.0.1-alpha.452",
|
|
9
9
|
"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
|
|
10
10
|
"clsx": "^2.1.1"
|
|
11
11
|
}
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"internalName": "ui-alert-helm",
|
|
15
15
|
"peerDependencies": {
|
|
16
16
|
"@angular/core": ">=19.0.0",
|
|
17
|
-
"@spartan-ng/brain": "0.0.1-alpha.
|
|
17
|
+
"@spartan-ng/brain": "0.0.1-alpha.452",
|
|
18
18
|
"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
|
|
19
19
|
"class-variance-authority": "^0.7.0",
|
|
20
20
|
"clsx": "^2.1.1"
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"internalName": "ui-alert-dialog-helm",
|
|
25
25
|
"peerDependencies": {
|
|
26
26
|
"@angular/core": ">=19.0.0",
|
|
27
|
-
"@spartan-ng/brain": "0.0.1-alpha.
|
|
27
|
+
"@spartan-ng/brain": "0.0.1-alpha.452",
|
|
28
28
|
"@spartan-ng/ui-button-helm": "0.0.1-alpha.381",
|
|
29
29
|
"clsx": "^2.1.1"
|
|
30
30
|
}
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"peerDependencies": {
|
|
35
35
|
"@angular/cdk": ">=19.0.0",
|
|
36
36
|
"@angular/core": ">=19.0.0",
|
|
37
|
-
"@spartan-ng/brain": "0.0.1-alpha.
|
|
37
|
+
"@spartan-ng/brain": "0.0.1-alpha.452",
|
|
38
38
|
"clsx": "^2.1.1"
|
|
39
39
|
}
|
|
40
40
|
},
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"internalName": "ui-avatar-helm",
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"@angular/core": ">=19.0.0",
|
|
45
|
-
"@spartan-ng/brain": "0.0.1-alpha.
|
|
45
|
+
"@spartan-ng/brain": "0.0.1-alpha.452",
|
|
46
46
|
"class-variance-authority": "^0.7.0",
|
|
47
47
|
"clsx": "^2.1.1"
|
|
48
48
|
}
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"peerDependencies": {
|
|
53
53
|
"@angular/cdk": ">=19.0.0",
|
|
54
54
|
"@angular/core": ">=19.0.0",
|
|
55
|
-
"@spartan-ng/brain": "0.0.1-alpha.
|
|
55
|
+
"@spartan-ng/brain": "0.0.1-alpha.452",
|
|
56
56
|
"class-variance-authority": "^0.7.0",
|
|
57
57
|
"clsx": "^2.1.1"
|
|
58
58
|
}
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
"@angular/router": ">=19.0.0",
|
|
65
65
|
"@ng-icons/core": ">=29.0.0",
|
|
66
66
|
"@ng-icons/lucide": ">=29.0.0",
|
|
67
|
-
"@spartan-ng/brain": "0.0.1-alpha.
|
|
67
|
+
"@spartan-ng/brain": "0.0.1-alpha.452",
|
|
68
68
|
"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
|
|
69
69
|
"clsx": "^2.1.1"
|
|
70
70
|
}
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
"internalName": "ui-button-helm",
|
|
74
74
|
"peerDependencies": {
|
|
75
75
|
"@angular/core": ">=19.0.0",
|
|
76
|
-
"@spartan-ng/brain": "0.0.1-alpha.
|
|
76
|
+
"@spartan-ng/brain": "0.0.1-alpha.452",
|
|
77
77
|
"class-variance-authority": "^0.7.0",
|
|
78
78
|
"clsx": "^2.1.1"
|
|
79
79
|
}
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
"@angular/core": ">=19.0.0",
|
|
86
86
|
"@ng-icons/core": ">=29.0.0",
|
|
87
87
|
"@ng-icons/lucide": ">=29.0.0",
|
|
88
|
-
"@spartan-ng/brain": "0.0.1-alpha.
|
|
88
|
+
"@spartan-ng/brain": "0.0.1-alpha.452",
|
|
89
89
|
"@spartan-ng/ui-button-helm": "0.0.1-alpha.381",
|
|
90
90
|
"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
|
|
91
91
|
"clsx": "^2.1.1"
|
|
@@ -95,7 +95,7 @@
|
|
|
95
95
|
"internalName": "ui-card-helm",
|
|
96
96
|
"peerDependencies": {
|
|
97
97
|
"@angular/core": ">=19.0.0",
|
|
98
|
-
"@spartan-ng/brain": "0.0.1-alpha.
|
|
98
|
+
"@spartan-ng/brain": "0.0.1-alpha.452",
|
|
99
99
|
"class-variance-authority": "^0.7.0",
|
|
100
100
|
"clsx": "^2.1.1"
|
|
101
101
|
}
|
|
@@ -105,7 +105,7 @@
|
|
|
105
105
|
"peerDependencies": {
|
|
106
106
|
"@angular/cdk": ">=19.0.0",
|
|
107
107
|
"@angular/core": ">=19.0.0",
|
|
108
|
-
"@spartan-ng/brain": "0.0.1-alpha.
|
|
108
|
+
"@spartan-ng/brain": "0.0.1-alpha.452",
|
|
109
109
|
"@spartan-ng/ui-button-helm": "0.0.1-alpha.381",
|
|
110
110
|
"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
|
|
111
111
|
"clsx": "^2.1.1"
|
|
@@ -119,7 +119,7 @@
|
|
|
119
119
|
"@angular/forms": ">=19.0.0",
|
|
120
120
|
"@ng-icons/core": ">=29.0.0",
|
|
121
121
|
"@ng-icons/lucide": ">=29.0.0",
|
|
122
|
-
"@spartan-ng/brain": "0.0.1-alpha.
|
|
122
|
+
"@spartan-ng/brain": "0.0.1-alpha.452",
|
|
123
123
|
"@spartan-ng/ui-calendar-helm": "0.0.1-alpha.381",
|
|
124
124
|
"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
|
|
125
125
|
"@spartan-ng/ui-popover-helm": "0.0.1-alpha.381",
|
|
@@ -134,7 +134,7 @@
|
|
|
134
134
|
"@angular/core": ">=19.0.0",
|
|
135
135
|
"@ng-icons/core": ">=29.0.0",
|
|
136
136
|
"@ng-icons/lucide": ">=29.0.0",
|
|
137
|
-
"@spartan-ng/brain": "0.0.1-alpha.
|
|
137
|
+
"@spartan-ng/brain": "0.0.1-alpha.452",
|
|
138
138
|
"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
|
|
139
139
|
"clsx": "^2.1.1"
|
|
140
140
|
}
|
|
@@ -150,7 +150,7 @@
|
|
|
150
150
|
"peerDependencies": {
|
|
151
151
|
"@angular/core": ">=19.0.0",
|
|
152
152
|
"@angular/forms": ">=19.0.0",
|
|
153
|
-
"@spartan-ng/brain": "0.0.1-alpha.
|
|
153
|
+
"@spartan-ng/brain": "0.0.1-alpha.452",
|
|
154
154
|
"class-variance-authority": "^0.7.0",
|
|
155
155
|
"clsx": "^2.1.1"
|
|
156
156
|
}
|
|
@@ -159,7 +159,7 @@
|
|
|
159
159
|
"internalName": "ui-label-helm",
|
|
160
160
|
"peerDependencies": {
|
|
161
161
|
"@angular/core": ">=19.0.0",
|
|
162
|
-
"@spartan-ng/brain": "0.0.1-alpha.
|
|
162
|
+
"@spartan-ng/brain": "0.0.1-alpha.452",
|
|
163
163
|
"class-variance-authority": "^0.7.0",
|
|
164
164
|
"clsx": "^2.1.1"
|
|
165
165
|
}
|
|
@@ -170,7 +170,7 @@
|
|
|
170
170
|
"@angular/core": ">=19.0.0",
|
|
171
171
|
"@ng-icons/core": ">=29.0.0",
|
|
172
172
|
"@ng-icons/lucide": ">=29.0.0",
|
|
173
|
-
"@spartan-ng/brain": "0.0.1-alpha.
|
|
173
|
+
"@spartan-ng/brain": "0.0.1-alpha.452",
|
|
174
174
|
"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
|
|
175
175
|
"class-variance-authority": "^0.7.0",
|
|
176
176
|
"clsx": "^2.1.1"
|
|
@@ -180,7 +180,7 @@
|
|
|
180
180
|
"internalName": "ui-popover-helm",
|
|
181
181
|
"peerDependencies": {
|
|
182
182
|
"@angular/core": ">=19.0.0",
|
|
183
|
-
"@spartan-ng/brain": "0.0.1-alpha.
|
|
183
|
+
"@spartan-ng/brain": "0.0.1-alpha.452",
|
|
184
184
|
"clsx": "^2.1.1"
|
|
185
185
|
}
|
|
186
186
|
},
|
|
@@ -188,7 +188,7 @@
|
|
|
188
188
|
"internalName": "ui-progress-helm",
|
|
189
189
|
"peerDependencies": {
|
|
190
190
|
"@angular/core": ">=19.0.0",
|
|
191
|
-
"@spartan-ng/brain": "0.0.1-alpha.
|
|
191
|
+
"@spartan-ng/brain": "0.0.1-alpha.452",
|
|
192
192
|
"clsx": "^2.1.1"
|
|
193
193
|
}
|
|
194
194
|
},
|
|
@@ -196,7 +196,7 @@
|
|
|
196
196
|
"internalName": "ui-radio-group-helm",
|
|
197
197
|
"peerDependencies": {
|
|
198
198
|
"@angular/core": ">=19.0.0",
|
|
199
|
-
"@spartan-ng/brain": "0.0.1-alpha.
|
|
199
|
+
"@spartan-ng/brain": "0.0.1-alpha.452",
|
|
200
200
|
"clsx": "^2.1.1"
|
|
201
201
|
}
|
|
202
202
|
},
|
|
@@ -204,7 +204,7 @@
|
|
|
204
204
|
"internalName": "ui-scroll-area-helm",
|
|
205
205
|
"peerDependencies": {
|
|
206
206
|
"@angular/core": ">=19.0.0",
|
|
207
|
-
"@spartan-ng/brain": "0.0.1-alpha.
|
|
207
|
+
"@spartan-ng/brain": "0.0.1-alpha.452",
|
|
208
208
|
"clsx": "^2.1.1",
|
|
209
209
|
"ngx-scrollbar": ">=16.0.0"
|
|
210
210
|
}
|
|
@@ -213,7 +213,7 @@
|
|
|
213
213
|
"internalName": "ui-separator-helm",
|
|
214
214
|
"peerDependencies": {
|
|
215
215
|
"@angular/core": ">=19.0.0",
|
|
216
|
-
"@spartan-ng/brain": "0.0.1-alpha.
|
|
216
|
+
"@spartan-ng/brain": "0.0.1-alpha.452",
|
|
217
217
|
"clsx": "^2.1.1"
|
|
218
218
|
}
|
|
219
219
|
},
|
|
@@ -223,7 +223,7 @@
|
|
|
223
223
|
"@angular/core": ">=19.0.0",
|
|
224
224
|
"@ng-icons/core": ">=29.0.0",
|
|
225
225
|
"@ng-icons/lucide": ">=29.0.0",
|
|
226
|
-
"@spartan-ng/brain": "0.0.1-alpha.
|
|
226
|
+
"@spartan-ng/brain": "0.0.1-alpha.452",
|
|
227
227
|
"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
|
|
228
228
|
"class-variance-authority": "^0.7.0",
|
|
229
229
|
"clsx": "^2.1.1"
|
|
@@ -233,7 +233,7 @@
|
|
|
233
233
|
"internalName": "ui-skeleton-helm",
|
|
234
234
|
"peerDependencies": {
|
|
235
235
|
"@angular/core": ">=19.0.0",
|
|
236
|
-
"@spartan-ng/brain": "0.0.1-alpha.
|
|
236
|
+
"@spartan-ng/brain": "0.0.1-alpha.452",
|
|
237
237
|
"clsx": "^2.1.1"
|
|
238
238
|
}
|
|
239
239
|
},
|
|
@@ -241,7 +241,7 @@
|
|
|
241
241
|
"internalName": "ui-spinner-helm",
|
|
242
242
|
"peerDependencies": {
|
|
243
243
|
"@angular/core": ">=19.0.0",
|
|
244
|
-
"@spartan-ng/brain": "0.0.1-alpha.
|
|
244
|
+
"@spartan-ng/brain": "0.0.1-alpha.452",
|
|
245
245
|
"class-variance-authority": "^0.7.0",
|
|
246
246
|
"clsx": "^2.1.1"
|
|
247
247
|
}
|
|
@@ -252,7 +252,7 @@
|
|
|
252
252
|
"@angular/cdk": ">=19.0.0",
|
|
253
253
|
"@angular/core": ">=19.0.0",
|
|
254
254
|
"@angular/forms": ">=19.0.0",
|
|
255
|
-
"@spartan-ng/brain": "0.0.1-alpha.
|
|
255
|
+
"@spartan-ng/brain": "0.0.1-alpha.452",
|
|
256
256
|
"clsx": "^2.1.1"
|
|
257
257
|
}
|
|
258
258
|
},
|
|
@@ -263,7 +263,7 @@
|
|
|
263
263
|
"@angular/core": ">=19.0.0",
|
|
264
264
|
"@ng-icons/core": ">=29.0.0",
|
|
265
265
|
"@ng-icons/lucide": ">=29.0.0",
|
|
266
|
-
"@spartan-ng/brain": "0.0.1-alpha.
|
|
266
|
+
"@spartan-ng/brain": "0.0.1-alpha.452",
|
|
267
267
|
"@spartan-ng/ui-button-helm": "0.0.1-alpha.381",
|
|
268
268
|
"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
|
|
269
269
|
"class-variance-authority": "^0.7.0",
|
|
@@ -274,7 +274,7 @@
|
|
|
274
274
|
"internalName": "ui-toggle-helm",
|
|
275
275
|
"peerDependencies": {
|
|
276
276
|
"@angular/core": ">=19.0.0",
|
|
277
|
-
"@spartan-ng/brain": "0.0.1-alpha.
|
|
277
|
+
"@spartan-ng/brain": "0.0.1-alpha.452",
|
|
278
278
|
"class-variance-authority": "^0.7.0",
|
|
279
279
|
"clsx": "^2.1.1"
|
|
280
280
|
}
|
|
@@ -292,7 +292,7 @@
|
|
|
292
292
|
"internalName": "ui-typography-helm",
|
|
293
293
|
"peerDependencies": {
|
|
294
294
|
"@angular/core": ">=19.0.0",
|
|
295
|
-
"@spartan-ng/brain": "0.0.1-alpha.
|
|
295
|
+
"@spartan-ng/brain": "0.0.1-alpha.452",
|
|
296
296
|
"clsx": "^2.1.1"
|
|
297
297
|
}
|
|
298
298
|
},
|
|
@@ -301,7 +301,7 @@
|
|
|
301
301
|
"peerDependencies": {
|
|
302
302
|
"@angular/common": ">=19.0.0",
|
|
303
303
|
"@angular/core": ">=19.0.0",
|
|
304
|
-
"@spartan-ng/brain": "0.0.1-alpha.
|
|
304
|
+
"@spartan-ng/brain": "0.0.1-alpha.452",
|
|
305
305
|
"clsx": "^2.1.1"
|
|
306
306
|
}
|
|
307
307
|
},
|
|
@@ -309,7 +309,7 @@
|
|
|
309
309
|
"internalName": "ui-hover-card-helm",
|
|
310
310
|
"peerDependencies": {
|
|
311
311
|
"@angular/core": ">=19.0.0",
|
|
312
|
-
"@spartan-ng/brain": "0.0.1-alpha.
|
|
312
|
+
"@spartan-ng/brain": "0.0.1-alpha.452",
|
|
313
313
|
"clsx": "^2.1.1"
|
|
314
314
|
}
|
|
315
315
|
},
|
|
@@ -320,7 +320,7 @@
|
|
|
320
320
|
"@angular/forms": ">=19.0.0",
|
|
321
321
|
"@ng-icons/core": ">=29.0.0",
|
|
322
322
|
"@ng-icons/lucide": ">=29.0.0",
|
|
323
|
-
"@spartan-ng/brain": "0.0.1-alpha.
|
|
323
|
+
"@spartan-ng/brain": "0.0.1-alpha.452",
|
|
324
324
|
"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
|
|
325
325
|
"clsx": "^2.1.1"
|
|
326
326
|
}
|
|
@@ -329,7 +329,7 @@
|
|
|
329
329
|
"internalName": "ui-tooltip-helm",
|
|
330
330
|
"peerDependencies": {
|
|
331
331
|
"@angular/core": ">=19.0.0",
|
|
332
|
-
"@spartan-ng/brain": "0.0.1-alpha.
|
|
332
|
+
"@spartan-ng/brain": "0.0.1-alpha.452"
|
|
333
333
|
}
|
|
334
334
|
},
|
|
335
335
|
"pagination": {
|
|
@@ -341,7 +341,7 @@
|
|
|
341
341
|
"@angular/router": ">=19.0.0",
|
|
342
342
|
"@ng-icons/core": ">=29.0.0",
|
|
343
343
|
"@ng-icons/lucide": ">=29.0.0",
|
|
344
|
-
"@spartan-ng/brain": "0.0.1-alpha.
|
|
344
|
+
"@spartan-ng/brain": "0.0.1-alpha.452",
|
|
345
345
|
"@spartan-ng/ui-button-helm": "0.0.1-alpha.381",
|
|
346
346
|
"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
|
|
347
347
|
"@spartan-ng/ui-select-helm": "0.0.1-alpha.381",
|
|
@@ -355,7 +355,7 @@
|
|
|
355
355
|
"@angular/core": ">=19.0.0",
|
|
356
356
|
"@ng-icons/core": ">=29.0.0",
|
|
357
357
|
"@ng-icons/lucide": ">=29.0.0",
|
|
358
|
-
"@spartan-ng/brain": "0.0.1-alpha.
|
|
358
|
+
"@spartan-ng/brain": "0.0.1-alpha.452",
|
|
359
359
|
"@spartan-ng/ui-button-helm": "0.0.1-alpha.381",
|
|
360
360
|
"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
|
|
361
361
|
"clsx": "^2.1.1",
|
|
@@ -368,7 +368,7 @@
|
|
|
368
368
|
"@angular/core": ">=19.0.0",
|
|
369
369
|
"@ng-icons/core": ">=29.0.0",
|
|
370
370
|
"@ng-icons/lucide": ">=29.0.0",
|
|
371
|
-
"@spartan-ng/brain": "0.0.1-alpha.
|
|
371
|
+
"@spartan-ng/brain": "0.0.1-alpha.452",
|
|
372
372
|
"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
|
|
373
373
|
"class-variance-authority": "^0.7.0",
|
|
374
374
|
"clsx": "^2.1.1"
|
|
@@ -389,14 +389,14 @@
|
|
|
389
389
|
"internalName": "ui-form-field-helm",
|
|
390
390
|
"peerDependencies": {
|
|
391
391
|
"@angular/core": ">=19.0.0",
|
|
392
|
-
"@spartan-ng/brain": "0.0.1-alpha.
|
|
392
|
+
"@spartan-ng/brain": "0.0.1-alpha.452"
|
|
393
393
|
}
|
|
394
394
|
},
|
|
395
395
|
"slider": {
|
|
396
396
|
"internalName": "ui-slider-helm",
|
|
397
397
|
"peerDependencies": {
|
|
398
398
|
"@angular/core": ">=19.0.0",
|
|
399
|
-
"@spartan-ng/brain": "0.0.1-alpha.
|
|
399
|
+
"@spartan-ng/brain": "0.0.1-alpha.452",
|
|
400
400
|
"clsx": "^2.1.1"
|
|
401
401
|
}
|
|
402
402
|
},
|
|
@@ -404,7 +404,7 @@
|
|
|
404
404
|
"internalName": "ui-toggle-group-helm",
|
|
405
405
|
"peerDependencies": {
|
|
406
406
|
"@angular/core": ">=18.0.0",
|
|
407
|
-
"@spartan-ng/brain": "0.0.1-alpha.
|
|
407
|
+
"@spartan-ng/brain": "0.0.1-alpha.452",
|
|
408
408
|
"class-variance-authority": "^0.7.0",
|
|
409
409
|
"clsx": "^2.1.1"
|
|
410
410
|
}
|
|
@@ -416,7 +416,7 @@
|
|
|
416
416
|
"@angular/core": ">=19.0.0",
|
|
417
417
|
"@ng-icons/core": "29.10.0",
|
|
418
418
|
"@ng-icons/lucide": "30.3.0",
|
|
419
|
-
"@spartan-ng/brain": "0.0.1-alpha.
|
|
419
|
+
"@spartan-ng/brain": "0.0.1-alpha.452",
|
|
420
420
|
"@spartan-ng/ui-icon-helm": "0.0.1-alpha.381",
|
|
421
421
|
"clsx": "^2.1.1"
|
|
422
422
|
}
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
import { Component } from '@angular/core';
|
|
2
|
-
import { type ComponentFixture, TestBed } from '@angular/core/testing';
|
|
3
|
-
import { HlmAspectRatioDirective } from './helm-aspect-ratio.directive';
|
|
4
|
-
|
|
5
|
-
@Component({
|
|
6
|
-
selector: 'hlm-mock',
|
|
7
|
-
standalone: true,
|
|
8
|
-
imports: [HlmAspectRatioDirective],
|
|
9
|
-
template: `
|
|
10
|
-
<div [hlmAspectRatio]="ratio">
|
|
11
|
-
<img
|
|
12
|
-
alt="Sample image"
|
|
13
|
-
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII="
|
|
14
|
-
/>
|
|
15
|
-
</div>
|
|
16
|
-
`,
|
|
17
|
-
})
|
|
18
|
-
class MockComponent {
|
|
19
|
-
public ratio: number | undefined = 16 / 9;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
describe('HelmAspectRatioDirective', () => {
|
|
23
|
-
let component: MockComponent;
|
|
24
|
-
let fixture: ComponentFixture<MockComponent>;
|
|
25
|
-
|
|
26
|
-
beforeEach(() => {
|
|
27
|
-
fixture = TestBed.createComponent(MockComponent);
|
|
28
|
-
component = fixture.componentInstance;
|
|
29
|
-
});
|
|
30
|
-
|
|
31
|
-
it('should compile', () => {
|
|
32
|
-
expect(component).toBeTruthy();
|
|
33
|
-
});
|
|
34
|
-
|
|
35
|
-
it('should show the image', () => {
|
|
36
|
-
fixture.detectChanges();
|
|
37
|
-
const img = fixture.nativeElement.querySelector('img');
|
|
38
|
-
expect(img).toBeTruthy();
|
|
39
|
-
});
|
|
40
|
-
|
|
41
|
-
it('should have the correct aspect ratio', () => {
|
|
42
|
-
fixture.detectChanges();
|
|
43
|
-
const div = fixture.nativeElement.querySelector('div');
|
|
44
|
-
expect(div.style.paddingBottom).toEqual(`${100 / (component.ratio || 1)}%`);
|
|
45
|
-
});
|
|
46
|
-
|
|
47
|
-
it('should default to an aspect ratio of 1', () => {
|
|
48
|
-
component.ratio = undefined;
|
|
49
|
-
fixture.detectChanges();
|
|
50
|
-
const div = fixture.nativeElement.querySelector('div');
|
|
51
|
-
expect(div.style.paddingBottom).toEqual('100%');
|
|
52
|
-
});
|
|
53
|
-
|
|
54
|
-
it('should fallback to an aspect ratio of 1 if the ratio is 0', () => {
|
|
55
|
-
component.ratio = 0;
|
|
56
|
-
fixture.detectChanges();
|
|
57
|
-
const div = fixture.nativeElement.querySelector('div');
|
|
58
|
-
expect(div.style.paddingBottom).toEqual('100%');
|
|
59
|
-
});
|
|
60
|
-
|
|
61
|
-
it('should fallback to an aspect ratio of 1 if the ratio is negative', () => {
|
|
62
|
-
component.ratio = -1;
|
|
63
|
-
fixture.detectChanges();
|
|
64
|
-
const div = fixture.nativeElement.querySelector('div');
|
|
65
|
-
expect(div.style.paddingBottom).toEqual('100%');
|
|
66
|
-
});
|
|
67
|
-
|
|
68
|
-
it('should add the correct styles to the image', () => {
|
|
69
|
-
fixture.detectChanges();
|
|
70
|
-
|
|
71
|
-
const img = fixture.nativeElement.querySelector('img') as HTMLImageElement;
|
|
72
|
-
expect(img.classList.toString()).toBe('absolute w-full h-full object-cover');
|
|
73
|
-
});
|
|
74
|
-
});
|
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
import { Component, PLATFORM_ID } from '@angular/core';
|
|
2
|
-
import { type ComponentFixture, TestBed, fakeAsync } from '@angular/core/testing';
|
|
3
|
-
import { hexColorFor, isBright } from '@spartan-ng/brain/avatar';
|
|
4
|
-
import { HlmAvatarFallbackDirective } from './hlm-avatar-fallback.directive';
|
|
5
|
-
|
|
6
|
-
@Component({
|
|
7
|
-
selector: 'hlm-mock',
|
|
8
|
-
standalone: true,
|
|
9
|
-
imports: [HlmAvatarFallbackDirective],
|
|
10
|
-
template: `
|
|
11
|
-
<span hlmAvatarFallback [class]="userCls" [autoColor]="autoColor">fallback2</span>
|
|
12
|
-
`,
|
|
13
|
-
})
|
|
14
|
-
class HlmMockComponent {
|
|
15
|
-
public userCls = '';
|
|
16
|
-
public autoColor = false;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
describe('HlmAvatarFallbackDirective', () => {
|
|
20
|
-
let component: HlmMockComponent;
|
|
21
|
-
let fixture: ComponentFixture<HlmMockComponent>;
|
|
22
|
-
|
|
23
|
-
beforeEach(() => {
|
|
24
|
-
fixture = TestBed.overrideProvider(PLATFORM_ID, { useValue: 'browser' }).createComponent(HlmMockComponent);
|
|
25
|
-
component = fixture.componentInstance;
|
|
26
|
-
});
|
|
27
|
-
|
|
28
|
-
it('should compile', () => {
|
|
29
|
-
expect(component).toBeTruthy();
|
|
30
|
-
});
|
|
31
|
-
|
|
32
|
-
it('should contain the default classes if no inputs are provided', () => {
|
|
33
|
-
fixture.detectChanges();
|
|
34
|
-
expect(fixture.nativeElement.querySelector('span').className).toBe(
|
|
35
|
-
'bg-muted flex h-full items-center justify-center rounded-full w-full',
|
|
36
|
-
);
|
|
37
|
-
});
|
|
38
|
-
|
|
39
|
-
it('should add any user defined classes', async () => {
|
|
40
|
-
component.userCls = 'test-class';
|
|
41
|
-
|
|
42
|
-
fixture.detectChanges();
|
|
43
|
-
expect(fixture.nativeElement.querySelector('span').className).toContain('test-class');
|
|
44
|
-
});
|
|
45
|
-
it('should merge bg-destructive correctly when set as user defined class, therefore removing bg-muted', async () => {
|
|
46
|
-
component.userCls = 'bg-destructive ';
|
|
47
|
-
|
|
48
|
-
fixture.detectChanges();
|
|
49
|
-
expect(fixture.nativeElement.querySelector('span').className).toContain('bg-destructive');
|
|
50
|
-
});
|
|
51
|
-
|
|
52
|
-
describe('autoColor', () => {
|
|
53
|
-
beforeEach(() => {
|
|
54
|
-
component.autoColor = true;
|
|
55
|
-
fixture.detectChanges();
|
|
56
|
-
});
|
|
57
|
-
|
|
58
|
-
it('should remove the bg-muted class from the component', fakeAsync(() => {
|
|
59
|
-
fixture.detectChanges();
|
|
60
|
-
expect(fixture.nativeElement.querySelector('span').className).not.toContain('bg-muted');
|
|
61
|
-
}));
|
|
62
|
-
|
|
63
|
-
it('should remove add a text color class and hex backgroundColor style depending on its content', () => {
|
|
64
|
-
const hex = hexColorFor('fallback2');
|
|
65
|
-
const textCls = isBright(hex) ? 'text-black' : 'text-white';
|
|
66
|
-
expect(fixture.nativeElement.querySelector('span').className).toContain(textCls);
|
|
67
|
-
expect(fixture.nativeElement.querySelector('span').style.backgroundColor).toBe('rgb(144, 53, 149)');
|
|
68
|
-
});
|
|
69
|
-
});
|
|
70
|
-
});
|
package/src/generators/ui/libs/ui-avatar-helm/files/lib/hlm-avatar.component.spec.ts.template
DELETED
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import { Component, Input } from '@angular/core';
|
|
2
|
-
import { type ComponentFixture, TestBed } from '@angular/core/testing';
|
|
3
|
-
import { BrnAvatarFallbackDirective, BrnAvatarImageDirective } from '@spartan-ng/brain/avatar';
|
|
4
|
-
import { HlmAvatarComponent } from './hlm-avatar.component';
|
|
5
|
-
|
|
6
|
-
@Component({
|
|
7
|
-
selector: 'hlm-mock',
|
|
8
|
-
imports: [BrnAvatarImageDirective, BrnAvatarFallbackDirective, HlmAvatarComponent],
|
|
9
|
-
template: `
|
|
10
|
-
<hlm-avatar [class]="class" id="fallbackOnly">
|
|
11
|
-
<span brnAvatarFallback>fallback</span>
|
|
12
|
-
</hlm-avatar>
|
|
13
|
-
`,
|
|
14
|
-
standalone: true,
|
|
15
|
-
})
|
|
16
|
-
class MockComponent {
|
|
17
|
-
@Input() public class = '';
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
describe('HlmAvatarComponent', () => {
|
|
21
|
-
let component: HlmAvatarComponent;
|
|
22
|
-
let fixture: ComponentFixture<HlmAvatarComponent>;
|
|
23
|
-
|
|
24
|
-
beforeEach(() => {
|
|
25
|
-
fixture = TestBed.createComponent(HlmAvatarComponent);
|
|
26
|
-
component = fixture.componentInstance;
|
|
27
|
-
});
|
|
28
|
-
|
|
29
|
-
it('should compile', () => {
|
|
30
|
-
expect(component).toBeTruthy();
|
|
31
|
-
});
|
|
32
|
-
|
|
33
|
-
it('should add the default classes if no inputs are provided', () => {
|
|
34
|
-
fixture.detectChanges();
|
|
35
|
-
expect(fixture.nativeElement.className).toBe('flex h-10 overflow-hidden relative rounded-full shrink-0 w-10');
|
|
36
|
-
});
|
|
37
|
-
|
|
38
|
-
it('should add any user defined classes', () => {
|
|
39
|
-
const mockFixture = TestBed.createComponent(MockComponent);
|
|
40
|
-
mockFixture.componentRef.setInput('class', 'test-class');
|
|
41
|
-
mockFixture.detectChanges();
|
|
42
|
-
const avatar = mockFixture.nativeElement.querySelector('hlm-avatar');
|
|
43
|
-
expect(avatar.className).toContain('test-class');
|
|
44
|
-
});
|
|
45
|
-
|
|
46
|
-
it('should change the size when the variant is changed', () => {
|
|
47
|
-
fixture.componentRef.setInput('variant', 'small');
|
|
48
|
-
fixture.detectChanges();
|
|
49
|
-
expect(fixture.nativeElement.className).toContain('h-6');
|
|
50
|
-
expect(fixture.nativeElement.className).toContain('w-6');
|
|
51
|
-
expect(fixture.nativeElement.className).toContain('text-xs');
|
|
52
|
-
|
|
53
|
-
fixture.componentRef.setInput('variant', 'large');
|
|
54
|
-
fixture.detectChanges();
|
|
55
|
-
expect(fixture.nativeElement.className).toContain('h-14');
|
|
56
|
-
expect(fixture.nativeElement.className).toContain('w-14');
|
|
57
|
-
expect(fixture.nativeElement.className).toContain('text-lg');
|
|
58
|
-
});
|
|
59
|
-
|
|
60
|
-
it('should support brn directives', () => {
|
|
61
|
-
const mockFixture = TestBed.createComponent(MockComponent);
|
|
62
|
-
mockFixture.detectChanges();
|
|
63
|
-
expect(mockFixture.nativeElement.querySelector('span').textContent).toBe('fallback');
|
|
64
|
-
});
|
|
65
|
-
});
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import { Component } from '@angular/core';
|
|
2
|
-
import { type ComponentFixture, TestBed } from '@angular/core/testing';
|
|
3
|
-
import { HlmAvatarImageDirective } from './hlm-avatar-image.directive';
|
|
4
|
-
|
|
5
|
-
@Component({
|
|
6
|
-
selector: 'hlm-mock',
|
|
7
|
-
standalone: true,
|
|
8
|
-
imports: [HlmAvatarImageDirective],
|
|
9
|
-
template: `
|
|
10
|
-
<img hlmAvatarImage alt="Avatar image" [class]="userCls" />
|
|
11
|
-
`,
|
|
12
|
-
})
|
|
13
|
-
class HlmMockComponent {
|
|
14
|
-
public userCls = '';
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
describe('HlmAvatarImageDirective', () => {
|
|
18
|
-
let component: HlmMockComponent;
|
|
19
|
-
let fixture: ComponentFixture<HlmMockComponent>;
|
|
20
|
-
|
|
21
|
-
beforeEach(() => {
|
|
22
|
-
fixture = TestBed.createComponent(HlmMockComponent);
|
|
23
|
-
component = fixture.componentInstance;
|
|
24
|
-
});
|
|
25
|
-
|
|
26
|
-
it('should compile', () => {
|
|
27
|
-
expect(component).toBeTruthy();
|
|
28
|
-
});
|
|
29
|
-
|
|
30
|
-
it('should add the default classes if no inputs are provided', () => {
|
|
31
|
-
fixture.detectChanges();
|
|
32
|
-
expect(fixture.nativeElement.querySelector('img').className).toBe('aspect-square h-full object-cover w-full');
|
|
33
|
-
});
|
|
34
|
-
|
|
35
|
-
it('should add any user defined classes', async () => {
|
|
36
|
-
component.userCls = 'test-class';
|
|
37
|
-
fixture.detectChanges();
|
|
38
|
-
|
|
39
|
-
// fallback uses Promise.resolve().then() so we need to wait for the next tick
|
|
40
|
-
setTimeout(() => {
|
|
41
|
-
expect(fixture.nativeElement.querySelector('img').className).toContain('test-class');
|
|
42
|
-
});
|
|
43
|
-
});
|
|
44
|
-
});
|
|
@@ -1,136 +0,0 @@
|
|
|
1
|
-
/* eslint-disable @angular-eslint/component-class-suffix */
|
|
2
|
-
/* eslint-disable @angular-eslint/component-selector */
|
|
3
|
-
import { Component } from '@angular/core';
|
|
4
|
-
import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
|
|
5
|
-
import { render, screen } from '@testing-library/angular';
|
|
6
|
-
import userEvent from '@testing-library/user-event';
|
|
7
|
-
|
|
8
|
-
import { HlmInputDirective } from '@spartan-ng/ui-input-helm';
|
|
9
|
-
|
|
10
|
-
import { ErrorStateMatcher, ShowOnDirtyErrorStateMatcher } from '@spartan-ng/brain/forms';
|
|
11
|
-
import { HlmErrorDirective } from './hlm-error.directive';
|
|
12
|
-
import { HlmFormFieldComponent } from './hlm-form-field.component';
|
|
13
|
-
import { HlmHintDirective } from './hlm-hint.directive';
|
|
14
|
-
|
|
15
|
-
const DIRECTIVES = [HlmFormFieldComponent, HlmErrorDirective, HlmHintDirective, HlmInputDirective];
|
|
16
|
-
|
|
17
|
-
@Component({
|
|
18
|
-
standalone: true,
|
|
19
|
-
selector: 'single-form-field-example',
|
|
20
|
-
imports: [ReactiveFormsModule, ...DIRECTIVES],
|
|
21
|
-
template: `
|
|
22
|
-
<hlm-form-field>
|
|
23
|
-
<input
|
|
24
|
-
data-testid="hlm-input"
|
|
25
|
-
aria-label="Your Name"
|
|
26
|
-
[formControl]="name"
|
|
27
|
-
class="w-80"
|
|
28
|
-
hlmInput
|
|
29
|
-
type="text"
|
|
30
|
-
placeholder="Your Name"
|
|
31
|
-
/>
|
|
32
|
-
<hlm-error data-testid="hlm-error">Your name is required</hlm-error>
|
|
33
|
-
<hlm-hint data-testid="hlm-hint">This is your public display name.</hlm-hint>
|
|
34
|
-
</hlm-form-field>
|
|
35
|
-
`,
|
|
36
|
-
})
|
|
37
|
-
class SingleFormFieldMock {
|
|
38
|
-
public name = new FormControl('', Validators.required);
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
@Component({
|
|
42
|
-
standalone: true,
|
|
43
|
-
selector: 'single-form-field-dirty-example',
|
|
44
|
-
imports: [ReactiveFormsModule, ...DIRECTIVES],
|
|
45
|
-
template: `
|
|
46
|
-
<hlm-form-field>
|
|
47
|
-
<input
|
|
48
|
-
data-testid="hlm-input"
|
|
49
|
-
aria-label="Your Name"
|
|
50
|
-
[formControl]="name"
|
|
51
|
-
class="w-80"
|
|
52
|
-
hlmInput
|
|
53
|
-
type="text"
|
|
54
|
-
placeholder="Your Name"
|
|
55
|
-
/>
|
|
56
|
-
<hlm-error data-testid="hlm-error">Your name is required</hlm-error>
|
|
57
|
-
<hlm-hint data-testid="hlm-hint">This is your public display name.</hlm-hint>
|
|
58
|
-
</hlm-form-field>
|
|
59
|
-
`,
|
|
60
|
-
providers: [{ provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher }],
|
|
61
|
-
})
|
|
62
|
-
class SingleFormFieldDirtyMock {
|
|
63
|
-
public name = new FormControl('', Validators.required);
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
describe('Hlm Form Field Component', () => {
|
|
67
|
-
const TEXT_HINT = 'This is your public display name.';
|
|
68
|
-
const TEXT_ERROR = 'Your name is required';
|
|
69
|
-
|
|
70
|
-
const setupFormField = async () => {
|
|
71
|
-
const { fixture } = await render(SingleFormFieldMock);
|
|
72
|
-
return {
|
|
73
|
-
user: userEvent.setup(),
|
|
74
|
-
fixture,
|
|
75
|
-
hint: screen.getByTestId('hlm-hint'),
|
|
76
|
-
error: () => screen.queryByTestId('hlm-error'),
|
|
77
|
-
trigger: screen.getByTestId('hlm-input'),
|
|
78
|
-
};
|
|
79
|
-
};
|
|
80
|
-
|
|
81
|
-
const setupFormFieldWithErrorStateDirty = async () => {
|
|
82
|
-
const { fixture } = await render(SingleFormFieldDirtyMock);
|
|
83
|
-
return {
|
|
84
|
-
user: userEvent.setup(),
|
|
85
|
-
fixture,
|
|
86
|
-
hint: screen.getByTestId('hlm-hint'),
|
|
87
|
-
error: () => screen.queryByTestId('hlm-error'),
|
|
88
|
-
trigger: screen.getByTestId('hlm-input'),
|
|
89
|
-
};
|
|
90
|
-
};
|
|
91
|
-
|
|
92
|
-
describe('SingleFormField', () => {
|
|
93
|
-
it('should show the hint if the errorState is false', async () => {
|
|
94
|
-
const { hint } = await setupFormField();
|
|
95
|
-
|
|
96
|
-
expect(hint.textContent).toBe(TEXT_HINT);
|
|
97
|
-
});
|
|
98
|
-
|
|
99
|
-
it('should show the error if the errorState is true', async () => {
|
|
100
|
-
const { user, error, trigger } = await setupFormField();
|
|
101
|
-
|
|
102
|
-
expect(error()).toBeNull();
|
|
103
|
-
|
|
104
|
-
await user.click(trigger);
|
|
105
|
-
|
|
106
|
-
await user.click(document.body);
|
|
107
|
-
|
|
108
|
-
expect(screen.queryByTestId('hlm-hint')).toBeNull();
|
|
109
|
-
expect(error()?.textContent?.trim()).toBe(TEXT_ERROR);
|
|
110
|
-
});
|
|
111
|
-
});
|
|
112
|
-
|
|
113
|
-
describe('SingleFormFieldDirty', () => {
|
|
114
|
-
it('should not display the error if the input does not have the dirty state due to the ErrorStateMatcher', async () => {
|
|
115
|
-
const { error, user, trigger } = await setupFormFieldWithErrorStateDirty();
|
|
116
|
-
|
|
117
|
-
await user.click(trigger);
|
|
118
|
-
|
|
119
|
-
await user.click(document.body);
|
|
120
|
-
|
|
121
|
-
expect(error()).toBeNull();
|
|
122
|
-
});
|
|
123
|
-
|
|
124
|
-
it('should display the error if the input has the dirty state due to the ErrorStateMatcher', async () => {
|
|
125
|
-
const { error, user, trigger } = await setupFormFieldWithErrorStateDirty();
|
|
126
|
-
|
|
127
|
-
await user.click(trigger);
|
|
128
|
-
await user.type(trigger, 'a');
|
|
129
|
-
await user.clear(trigger);
|
|
130
|
-
|
|
131
|
-
await user.click(document.body);
|
|
132
|
-
|
|
133
|
-
expect(error()?.textContent?.trim()).toBe(TEXT_ERROR);
|
|
134
|
-
});
|
|
135
|
-
});
|
|
136
|
-
});
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
|
|
2
|
-
import { By } from '@angular/platform-browser';
|
|
3
|
-
import { NgIcon, provideIcons } from '@ng-icons/core';
|
|
4
|
-
import { lucideCheck } from '@ng-icons/lucide';
|
|
5
|
-
import { type RenderResult, render } from '@testing-library/angular';
|
|
6
|
-
import { HlmIconDirective } from './hlm-icon.directive';
|
|
7
|
-
|
|
8
|
-
@Component({
|
|
9
|
-
selector: 'hlm-mock',
|
|
10
|
-
standalone: true,
|
|
11
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
12
|
-
imports: [HlmIconDirective, NgIcon],
|
|
13
|
-
providers: [provideIcons({ lucideCheck })],
|
|
14
|
-
template: `
|
|
15
|
-
<ng-icon hlm class="test" name="lucideCheck" [size]="size" color="red" strokeWidth="2" />
|
|
16
|
-
`,
|
|
17
|
-
})
|
|
18
|
-
class HlmMockComponent {
|
|
19
|
-
@Input() public size = 'base';
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
describe('HlmIconDirective', () => {
|
|
23
|
-
let r: RenderResult<HlmMockComponent>;
|
|
24
|
-
let icon: HTMLElement;
|
|
25
|
-
|
|
26
|
-
beforeEach(async () => {
|
|
27
|
-
r = await render(HlmMockComponent);
|
|
28
|
-
icon = r.container.querySelector('ng-icon')!;
|
|
29
|
-
});
|
|
30
|
-
|
|
31
|
-
it('should add the xs size', async () => {
|
|
32
|
-
await r.rerender({ componentInputs: { size: 'xs' } });
|
|
33
|
-
r.fixture.detectChanges();
|
|
34
|
-
expect(icon.getAttribute('style')).toContain('--ng-icon__size: 12px');
|
|
35
|
-
});
|
|
36
|
-
|
|
37
|
-
it('should add the sm size', async () => {
|
|
38
|
-
await r.rerender({ componentInputs: { size: 'sm' } });
|
|
39
|
-
r.fixture.detectChanges();
|
|
40
|
-
expect(icon.getAttribute('style')).toContain('--ng-icon__size: 16px');
|
|
41
|
-
});
|
|
42
|
-
|
|
43
|
-
it('should add the base size', () => {
|
|
44
|
-
expect(icon.getAttribute('style')).toContain('--ng-icon__size: 24px');
|
|
45
|
-
});
|
|
46
|
-
|
|
47
|
-
it('should add the lg size', async () => {
|
|
48
|
-
await r.rerender({ componentInputs: { size: 'lg' } });
|
|
49
|
-
r.fixture.detectChanges();
|
|
50
|
-
expect(icon.getAttribute('style')).toContain('--ng-icon__size: 32px');
|
|
51
|
-
});
|
|
52
|
-
|
|
53
|
-
it('should add the xl size', async () => {
|
|
54
|
-
await r.rerender({ componentInputs: { size: 'xl' } });
|
|
55
|
-
r.fixture.detectChanges();
|
|
56
|
-
expect(icon.getAttribute('style')).toContain('--ng-icon__size: 48px');
|
|
57
|
-
});
|
|
58
|
-
|
|
59
|
-
it('should forward the size property if the size is not a pre-defined size', async () => {
|
|
60
|
-
await r.rerender({ componentInputs: { size: '2rem' } });
|
|
61
|
-
r.fixture.detectChanges();
|
|
62
|
-
const debugEl = r.fixture.debugElement.query(By.directive(NgIcon));
|
|
63
|
-
expect(debugEl.componentInstance.size()).toBe('2rem');
|
|
64
|
-
expect(icon.getAttribute('style')).toContain('--ng-icon__size: 2rem');
|
|
65
|
-
});
|
|
66
|
-
});
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { Component, Input } from '@angular/core';
|
|
2
|
-
import { FormsModule } from '@angular/forms';
|
|
3
|
-
import { HlmSwitchComponent } from './hlm-switch.component';
|
|
4
|
-
@Component({
|
|
5
|
-
selector: 'hlm-switch-ng-model',
|
|
6
|
-
template: `
|
|
7
|
-
<!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -->
|
|
8
|
-
<label class="flex items-center" hlmLabel>
|
|
9
|
-
test switch
|
|
10
|
-
<hlm-switch [(ngModel)]="switchValue" id="testSwitchForm" (changed)="handleChange($event)" />
|
|
11
|
-
</label>
|
|
12
|
-
|
|
13
|
-
<p data-testid="switchValue">{{ switchValue }}</p>
|
|
14
|
-
<p data-testid="changedValue">{{ changedValueTo }}</p>
|
|
15
|
-
`,
|
|
16
|
-
imports: [HlmSwitchComponent, FormsModule],
|
|
17
|
-
})
|
|
18
|
-
export class SwitchFormComponent {
|
|
19
|
-
@Input()
|
|
20
|
-
public switchValue = false;
|
|
21
|
-
|
|
22
|
-
protected changedValueTo: boolean | undefined;
|
|
23
|
-
|
|
24
|
-
handleChange(value: boolean) {
|
|
25
|
-
this.changedValueTo = value;
|
|
26
|
-
}
|
|
27
|
-
}
|