@vroxal/vd-angular 1.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/README.md +63 -0
- package/fesm2022/vroxal-vd-angular.mjs +4768 -0
- package/fesm2022/vroxal-vd-angular.mjs.map +1 -0
- package/guidelines/COMPONENT_REGISTRY.md +94 -0
- package/guidelines/USAGE_GUIDELINES.md +70 -0
- package/guidelines/component-registry.json +723 -0
- package/package.json +43 -0
- package/styles/style.css +0 -0
- package/types/vroxal-vd-angular.d.ts +1335 -0
|
@@ -0,0 +1,723 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": "1.0.0",
|
|
3
|
+
"packageName": "@vroxal/vd-angular",
|
|
4
|
+
"importPath": "@vroxal/vd-angular",
|
|
5
|
+
"sourceOfTruth": "projects/angular-components/src/public-api.ts",
|
|
6
|
+
"lastReviewed": "2026-03-08",
|
|
7
|
+
"rules": [
|
|
8
|
+
"If a listed component matches the requirement, use it instead of creating custom UI.",
|
|
9
|
+
"Import from the package root only; do not deep import from src/lib.",
|
|
10
|
+
"Use Vroxal Design token variables and semantic typography for any custom CSS around components.",
|
|
11
|
+
"Prefer service-based APIs for toast, dialog, drawer, and confirmation-dialog flows."
|
|
12
|
+
],
|
|
13
|
+
"components": [
|
|
14
|
+
{
|
|
15
|
+
"name": "Button",
|
|
16
|
+
"className": "VdButton",
|
|
17
|
+
"selector": "vd-button",
|
|
18
|
+
"kind": "component",
|
|
19
|
+
"category": "actions",
|
|
20
|
+
"useFor": ["primary actions", "secondary actions", "form submission"],
|
|
21
|
+
"avoidFor": ["route navigation links"],
|
|
22
|
+
"inputs": [
|
|
23
|
+
"label",
|
|
24
|
+
"variant",
|
|
25
|
+
"color",
|
|
26
|
+
"size",
|
|
27
|
+
"rounded",
|
|
28
|
+
"disabled",
|
|
29
|
+
"loading",
|
|
30
|
+
"leftIcon",
|
|
31
|
+
"rightIcon",
|
|
32
|
+
"type"
|
|
33
|
+
],
|
|
34
|
+
"outputs": []
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"name": "Icon",
|
|
38
|
+
"className": "VdIcon",
|
|
39
|
+
"selector": "vd-icon",
|
|
40
|
+
"kind": "component",
|
|
41
|
+
"category": "display",
|
|
42
|
+
"useFor": ["decorative icons", "status/context icons next to text"],
|
|
43
|
+
"avoidFor": ["standalone critical actions without accessible label"],
|
|
44
|
+
"inputs": ["name", "size", "color"],
|
|
45
|
+
"outputs": []
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"name": "Icon Button",
|
|
49
|
+
"className": "VdIconButton",
|
|
50
|
+
"selector": "vd-icon-button",
|
|
51
|
+
"kind": "component",
|
|
52
|
+
"category": "actions",
|
|
53
|
+
"useFor": ["icon-only actions", "toolbar actions"],
|
|
54
|
+
"avoidFor": ["actions requiring text-heavy labels"],
|
|
55
|
+
"inputs": ["icon", "ariaLabel", "variant", "color", "size", "rounded", "disabled", "loading"],
|
|
56
|
+
"outputs": []
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"name": "Input",
|
|
60
|
+
"className": "VdInput",
|
|
61
|
+
"selector": "vd-input",
|
|
62
|
+
"kind": "component",
|
|
63
|
+
"category": "forms",
|
|
64
|
+
"useFor": ["single-line text input", "email/password/text fields"],
|
|
65
|
+
"avoidFor": ["multi-line text", "numeric stepper interactions"],
|
|
66
|
+
"inputs": [
|
|
67
|
+
"label",
|
|
68
|
+
"hintText",
|
|
69
|
+
"helperText",
|
|
70
|
+
"optional",
|
|
71
|
+
"leadingIcon",
|
|
72
|
+
"trailingActionIcon",
|
|
73
|
+
"placeholder",
|
|
74
|
+
"type",
|
|
75
|
+
"value",
|
|
76
|
+
"maxInputCount",
|
|
77
|
+
"readOnly",
|
|
78
|
+
"disabled",
|
|
79
|
+
"state"
|
|
80
|
+
],
|
|
81
|
+
"outputs": ["valueChange", "valueCommit", "trailingActionClick", "inputFocus"]
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
"name": "Textarea",
|
|
85
|
+
"className": "VdTextarea",
|
|
86
|
+
"selector": "vd-textarea",
|
|
87
|
+
"kind": "component",
|
|
88
|
+
"category": "forms",
|
|
89
|
+
"useFor": ["multi-line text input", "notes and descriptions"],
|
|
90
|
+
"avoidFor": ["single-line compact input"],
|
|
91
|
+
"inputs": [
|
|
92
|
+
"label",
|
|
93
|
+
"hintText",
|
|
94
|
+
"helperText",
|
|
95
|
+
"optional",
|
|
96
|
+
"leadingIcon",
|
|
97
|
+
"trailingActionIcon",
|
|
98
|
+
"placeholder",
|
|
99
|
+
"type",
|
|
100
|
+
"value",
|
|
101
|
+
"maxInputCount",
|
|
102
|
+
"disabled",
|
|
103
|
+
"state"
|
|
104
|
+
],
|
|
105
|
+
"outputs": ["valueChange", "valueCommit", "trailingActionClick", "inputFocus"]
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
"name": "Select",
|
|
109
|
+
"className": "VdSelect",
|
|
110
|
+
"selector": "vd-select",
|
|
111
|
+
"kind": "component",
|
|
112
|
+
"category": "forms",
|
|
113
|
+
"useFor": ["single selection from predefined options"],
|
|
114
|
+
"avoidFor": ["free text entry"],
|
|
115
|
+
"inputs": [
|
|
116
|
+
"label",
|
|
117
|
+
"hintText",
|
|
118
|
+
"helperText",
|
|
119
|
+
"optional",
|
|
120
|
+
"leadingIcon",
|
|
121
|
+
"placeholder",
|
|
122
|
+
"disabled",
|
|
123
|
+
"options",
|
|
124
|
+
"value",
|
|
125
|
+
"state"
|
|
126
|
+
],
|
|
127
|
+
"outputs": ["valueChange", "valueCommit", "inputFocus"]
|
|
128
|
+
},
|
|
129
|
+
{
|
|
130
|
+
"name": "Number Input",
|
|
131
|
+
"className": "VdNumberInput",
|
|
132
|
+
"selector": "vd-number-input",
|
|
133
|
+
"kind": "component",
|
|
134
|
+
"category": "forms",
|
|
135
|
+
"useFor": ["numeric input with increment/decrement behavior"],
|
|
136
|
+
"avoidFor": ["plain text fields"],
|
|
137
|
+
"inputs": [
|
|
138
|
+
"label",
|
|
139
|
+
"hintText",
|
|
140
|
+
"helperText",
|
|
141
|
+
"optional",
|
|
142
|
+
"leadingIcon",
|
|
143
|
+
"trailingActionIcon",
|
|
144
|
+
"placeholder",
|
|
145
|
+
"value",
|
|
146
|
+
"min",
|
|
147
|
+
"max",
|
|
148
|
+
"step",
|
|
149
|
+
"readOnly",
|
|
150
|
+
"disabled",
|
|
151
|
+
"state"
|
|
152
|
+
],
|
|
153
|
+
"outputs": ["valueChange", "valueCommit", "trailingActionClick", "inputFocus"]
|
|
154
|
+
},
|
|
155
|
+
{
|
|
156
|
+
"name": "File Input",
|
|
157
|
+
"className": "VdFileInput",
|
|
158
|
+
"selector": "vd-file-input",
|
|
159
|
+
"kind": "component",
|
|
160
|
+
"category": "forms",
|
|
161
|
+
"useFor": ["file upload selection"],
|
|
162
|
+
"avoidFor": ["text or number entry"],
|
|
163
|
+
"inputs": [
|
|
164
|
+
"label",
|
|
165
|
+
"hintText",
|
|
166
|
+
"optional",
|
|
167
|
+
"layout",
|
|
168
|
+
"supportedFiles",
|
|
169
|
+
"supportingText",
|
|
170
|
+
"maxSize",
|
|
171
|
+
"multiple",
|
|
172
|
+
"disabled",
|
|
173
|
+
"state",
|
|
174
|
+
"helperText"
|
|
175
|
+
],
|
|
176
|
+
"outputs": ["filesChange"]
|
|
177
|
+
},
|
|
178
|
+
{
|
|
179
|
+
"name": "Verification Code Input",
|
|
180
|
+
"className": "VdVerificationCodeInput",
|
|
181
|
+
"selector": "vd-verification-code-input",
|
|
182
|
+
"kind": "component",
|
|
183
|
+
"category": "forms",
|
|
184
|
+
"useFor": ["OTP and verification code entry"],
|
|
185
|
+
"avoidFor": ["general text input"],
|
|
186
|
+
"inputs": [
|
|
187
|
+
"length",
|
|
188
|
+
"value",
|
|
189
|
+
"disabled",
|
|
190
|
+
"state",
|
|
191
|
+
"label",
|
|
192
|
+
"helperText",
|
|
193
|
+
"autoFocus",
|
|
194
|
+
"mask"
|
|
195
|
+
],
|
|
196
|
+
"outputs": ["valueChange", "completed"]
|
|
197
|
+
},
|
|
198
|
+
{
|
|
199
|
+
"name": "Checkbox",
|
|
200
|
+
"className": "VdCheckbox",
|
|
201
|
+
"selector": "vd-checkbox",
|
|
202
|
+
"kind": "component",
|
|
203
|
+
"category": "selection",
|
|
204
|
+
"useFor": ["independent true/false options", "multi-select option items"],
|
|
205
|
+
"avoidFor": ["exclusive single-choice selection"],
|
|
206
|
+
"inputs": [
|
|
207
|
+
"label",
|
|
208
|
+
"description",
|
|
209
|
+
"checked",
|
|
210
|
+
"indeterminate",
|
|
211
|
+
"disabled",
|
|
212
|
+
"id",
|
|
213
|
+
"name",
|
|
214
|
+
"ariaLabel"
|
|
215
|
+
],
|
|
216
|
+
"outputs": ["change"]
|
|
217
|
+
},
|
|
218
|
+
{
|
|
219
|
+
"name": "Checkbox Group",
|
|
220
|
+
"className": "VdCheckboxGroup",
|
|
221
|
+
"selector": "vd-checkbox-group",
|
|
222
|
+
"kind": "component",
|
|
223
|
+
"category": "selection",
|
|
224
|
+
"useFor": ["grouping related checkbox options"],
|
|
225
|
+
"avoidFor": ["single-choice selections"],
|
|
226
|
+
"inputs": ["items", "direction", "value", "disabled"],
|
|
227
|
+
"outputs": ["valueChange"]
|
|
228
|
+
},
|
|
229
|
+
{
|
|
230
|
+
"name": "Radio Button",
|
|
231
|
+
"className": "VdRadioButton",
|
|
232
|
+
"selector": "vd-radio-button",
|
|
233
|
+
"kind": "component",
|
|
234
|
+
"category": "selection",
|
|
235
|
+
"useFor": ["single option in a radio set"],
|
|
236
|
+
"avoidFor": ["multi-select requirements"],
|
|
237
|
+
"inputs": ["label", "description", "value", "checked", "disabled", "id", "name", "ariaLabel"],
|
|
238
|
+
"outputs": ["select"]
|
|
239
|
+
},
|
|
240
|
+
{
|
|
241
|
+
"name": "Radio Group",
|
|
242
|
+
"className": "VdRadioGroup",
|
|
243
|
+
"selector": "vd-radio-group",
|
|
244
|
+
"kind": "component",
|
|
245
|
+
"category": "selection",
|
|
246
|
+
"useFor": ["single-choice selection across options"],
|
|
247
|
+
"avoidFor": ["independent toggles"],
|
|
248
|
+
"inputs": ["items", "direction", "value", "disabled", "name"],
|
|
249
|
+
"outputs": ["valueChange"]
|
|
250
|
+
},
|
|
251
|
+
{
|
|
252
|
+
"name": "Switch",
|
|
253
|
+
"className": "VdSwitch",
|
|
254
|
+
"selector": "vd-switch",
|
|
255
|
+
"kind": "component",
|
|
256
|
+
"category": "selection",
|
|
257
|
+
"useFor": ["on/off settings toggles"],
|
|
258
|
+
"avoidFor": ["multi-state selection"],
|
|
259
|
+
"inputs": ["label", "checked", "disabled"],
|
|
260
|
+
"outputs": ["change"]
|
|
261
|
+
},
|
|
262
|
+
{
|
|
263
|
+
"name": "Tab",
|
|
264
|
+
"className": "VdTab",
|
|
265
|
+
"selector": "vd-tab",
|
|
266
|
+
"kind": "component",
|
|
267
|
+
"category": "navigation",
|
|
268
|
+
"useFor": ["switching between sibling views or sections"],
|
|
269
|
+
"avoidFor": ["wizard-style step progression"],
|
|
270
|
+
"inputs": ["tabs", "value", "type", "direction"],
|
|
271
|
+
"outputs": ["valueChange", "tabChange"]
|
|
272
|
+
},
|
|
273
|
+
{
|
|
274
|
+
"name": "Date Time Picker",
|
|
275
|
+
"className": "VdDateTimePicker",
|
|
276
|
+
"selector": "vd-date-time-picker",
|
|
277
|
+
"kind": "component",
|
|
278
|
+
"category": "date-time",
|
|
279
|
+
"useFor": ["single or range date selection with optional time"],
|
|
280
|
+
"avoidFor": ["simple time-only input"],
|
|
281
|
+
"inputs": [
|
|
282
|
+
"mode",
|
|
283
|
+
"withTime",
|
|
284
|
+
"label",
|
|
285
|
+
"hintText",
|
|
286
|
+
"helperText",
|
|
287
|
+
"optional",
|
|
288
|
+
"placeholder",
|
|
289
|
+
"disabled",
|
|
290
|
+
"leadingIcon",
|
|
291
|
+
"showMonthYearSelector",
|
|
292
|
+
"dropdownPosition",
|
|
293
|
+
"minDate",
|
|
294
|
+
"maxDate",
|
|
295
|
+
"value",
|
|
296
|
+
"state"
|
|
297
|
+
],
|
|
298
|
+
"outputs": ["valueChange", "inputFocus", "inputBlur"]
|
|
299
|
+
},
|
|
300
|
+
{
|
|
301
|
+
"name": "Single Date Picker",
|
|
302
|
+
"className": "VdSingleDatePicker",
|
|
303
|
+
"selector": "vd-single-date-picker",
|
|
304
|
+
"kind": "component",
|
|
305
|
+
"category": "date-time",
|
|
306
|
+
"useFor": ["single date selection"],
|
|
307
|
+
"avoidFor": ["date range selection"],
|
|
308
|
+
"inputs": [
|
|
309
|
+
"label",
|
|
310
|
+
"hintText",
|
|
311
|
+
"helperText",
|
|
312
|
+
"optional",
|
|
313
|
+
"placeholder",
|
|
314
|
+
"disabled",
|
|
315
|
+
"leadingIcon",
|
|
316
|
+
"showMonthYearSelector",
|
|
317
|
+
"dropdownPosition",
|
|
318
|
+
"minDate",
|
|
319
|
+
"maxDate",
|
|
320
|
+
"value",
|
|
321
|
+
"state"
|
|
322
|
+
],
|
|
323
|
+
"outputs": ["valueChange", "inputFocus", "inputBlur"]
|
|
324
|
+
},
|
|
325
|
+
{
|
|
326
|
+
"name": "Range Date Picker",
|
|
327
|
+
"className": "VdRangeDatePicker",
|
|
328
|
+
"selector": "vd-range-date-picker",
|
|
329
|
+
"kind": "component",
|
|
330
|
+
"category": "date-time",
|
|
331
|
+
"useFor": ["start and end date selection"],
|
|
332
|
+
"avoidFor": ["single date selection"],
|
|
333
|
+
"inputs": [
|
|
334
|
+
"label",
|
|
335
|
+
"hintText",
|
|
336
|
+
"helperText",
|
|
337
|
+
"optional",
|
|
338
|
+
"placeholder",
|
|
339
|
+
"disabled",
|
|
340
|
+
"leadingIcon",
|
|
341
|
+
"dropdownPosition",
|
|
342
|
+
"minDate",
|
|
343
|
+
"maxDate",
|
|
344
|
+
"value",
|
|
345
|
+
"state"
|
|
346
|
+
],
|
|
347
|
+
"outputs": ["valueChange", "inputFocus", "inputBlur"]
|
|
348
|
+
},
|
|
349
|
+
{
|
|
350
|
+
"name": "Time Picker",
|
|
351
|
+
"className": "VdTimePicker",
|
|
352
|
+
"selector": "vd-time-picker",
|
|
353
|
+
"kind": "component",
|
|
354
|
+
"category": "date-time",
|
|
355
|
+
"useFor": ["time-only selection"],
|
|
356
|
+
"avoidFor": ["date selection"],
|
|
357
|
+
"inputs": [
|
|
358
|
+
"label",
|
|
359
|
+
"hintText",
|
|
360
|
+
"helperText",
|
|
361
|
+
"optional",
|
|
362
|
+
"leadingIcon",
|
|
363
|
+
"trailingActionIcon",
|
|
364
|
+
"placeholder",
|
|
365
|
+
"type",
|
|
366
|
+
"value",
|
|
367
|
+
"maxInputCount",
|
|
368
|
+
"disabled",
|
|
369
|
+
"state"
|
|
370
|
+
],
|
|
371
|
+
"outputs": ["valueChange", "valueCommit", "trailingActionClick", "inputFocus"]
|
|
372
|
+
},
|
|
373
|
+
{
|
|
374
|
+
"name": "Single Date Inline",
|
|
375
|
+
"className": "VdSingleDateInline",
|
|
376
|
+
"selector": "vd-single-date-inline",
|
|
377
|
+
"kind": "component",
|
|
378
|
+
"category": "date-time",
|
|
379
|
+
"useFor": ["always-visible single-date calendar interactions"],
|
|
380
|
+
"avoidFor": ["compact input field workflows"],
|
|
381
|
+
"inputs": ["value", "showMonthYearSelector", "minDate", "maxDate", "disabled"],
|
|
382
|
+
"outputs": ["valueChange"]
|
|
383
|
+
},
|
|
384
|
+
{
|
|
385
|
+
"name": "Range Date Inline",
|
|
386
|
+
"className": "VdRangeDateInline",
|
|
387
|
+
"selector": "vd-range-date-inline",
|
|
388
|
+
"kind": "component",
|
|
389
|
+
"category": "date-time",
|
|
390
|
+
"useFor": ["always-visible date-range calendar interactions"],
|
|
391
|
+
"avoidFor": ["single-date workflows"],
|
|
392
|
+
"inputs": ["value", "minDate", "maxDate", "disabled"],
|
|
393
|
+
"outputs": ["valueChange"]
|
|
394
|
+
},
|
|
395
|
+
{
|
|
396
|
+
"name": "Datatable",
|
|
397
|
+
"className": "VdDatatable",
|
|
398
|
+
"selector": "vd-datatable",
|
|
399
|
+
"kind": "component",
|
|
400
|
+
"category": "data",
|
|
401
|
+
"useFor": ["tabular data rendering with defined columns"],
|
|
402
|
+
"avoidFor": ["small card-style content"],
|
|
403
|
+
"inputs": [
|
|
404
|
+
"data",
|
|
405
|
+
"columns",
|
|
406
|
+
"expandedColumns",
|
|
407
|
+
"actions",
|
|
408
|
+
"currentPage",
|
|
409
|
+
"totalPages",
|
|
410
|
+
"rowsPerPage",
|
|
411
|
+
"totalRows"
|
|
412
|
+
],
|
|
413
|
+
"outputs": ["actionTriggered", "rowClicked", "pageChange"]
|
|
414
|
+
},
|
|
415
|
+
{
|
|
416
|
+
"name": "Pagination",
|
|
417
|
+
"className": "VdPagination",
|
|
418
|
+
"selector": "vd-pagination",
|
|
419
|
+
"kind": "component",
|
|
420
|
+
"category": "data",
|
|
421
|
+
"useFor": ["navigating paged datasets"],
|
|
422
|
+
"avoidFor": ["infinite-scroll-only experiences"],
|
|
423
|
+
"inputs": ["totalPages", "currentPage"],
|
|
424
|
+
"outputs": ["pageChange"]
|
|
425
|
+
},
|
|
426
|
+
{
|
|
427
|
+
"name": "Accordion",
|
|
428
|
+
"className": "VdAccordion",
|
|
429
|
+
"selector": "vd-accordion",
|
|
430
|
+
"kind": "component",
|
|
431
|
+
"category": "data",
|
|
432
|
+
"useFor": ["collapsible content sections"],
|
|
433
|
+
"avoidFor": ["critical always-visible content"],
|
|
434
|
+
"inputs": ["title", "variant", "icon", "active"],
|
|
435
|
+
"outputs": []
|
|
436
|
+
},
|
|
437
|
+
{
|
|
438
|
+
"name": "Badge",
|
|
439
|
+
"className": "VdBadge",
|
|
440
|
+
"selector": "vd-badge",
|
|
441
|
+
"kind": "component",
|
|
442
|
+
"category": "feedback",
|
|
443
|
+
"useFor": ["small status labels", "counts and tags"],
|
|
444
|
+
"avoidFor": ["long descriptive messages"],
|
|
445
|
+
"inputs": ["label", "variant", "color", "size", "rounded"],
|
|
446
|
+
"outputs": []
|
|
447
|
+
},
|
|
448
|
+
{
|
|
449
|
+
"name": "Alert",
|
|
450
|
+
"className": "VdAlert",
|
|
451
|
+
"selector": "vd-alert",
|
|
452
|
+
"kind": "component",
|
|
453
|
+
"category": "feedback",
|
|
454
|
+
"useFor": ["inline status, warning, success, or error messages"],
|
|
455
|
+
"avoidFor": ["short-lived toasts"],
|
|
456
|
+
"inputs": [
|
|
457
|
+
"title",
|
|
458
|
+
"description",
|
|
459
|
+
"color",
|
|
460
|
+
"action",
|
|
461
|
+
"closable",
|
|
462
|
+
"actionLabel",
|
|
463
|
+
"actionInline",
|
|
464
|
+
"icon",
|
|
465
|
+
"onClose",
|
|
466
|
+
"onAction"
|
|
467
|
+
],
|
|
468
|
+
"outputs": []
|
|
469
|
+
},
|
|
470
|
+
{
|
|
471
|
+
"name": "Toast",
|
|
472
|
+
"className": "VdToast",
|
|
473
|
+
"selector": "vd-toast",
|
|
474
|
+
"kind": "component",
|
|
475
|
+
"category": "feedback",
|
|
476
|
+
"useFor": ["transient notification host"],
|
|
477
|
+
"avoidFor": ["blocking confirmation flows"],
|
|
478
|
+
"preferredApi": "VdToastService.show(...)",
|
|
479
|
+
"inputs": ["maxStack"],
|
|
480
|
+
"outputs": []
|
|
481
|
+
},
|
|
482
|
+
{
|
|
483
|
+
"name": "Progress Tracker",
|
|
484
|
+
"className": "VdProgressTracker",
|
|
485
|
+
"selector": "vd-progress-tracker",
|
|
486
|
+
"kind": "component",
|
|
487
|
+
"category": "feedback",
|
|
488
|
+
"useFor": ["multi-step process progress"],
|
|
489
|
+
"avoidFor": ["single-step status"],
|
|
490
|
+
"inputs": [
|
|
491
|
+
"items",
|
|
492
|
+
"direction",
|
|
493
|
+
"indicatorType",
|
|
494
|
+
"showDescription",
|
|
495
|
+
"showConnector",
|
|
496
|
+
"defaultIcon"
|
|
497
|
+
],
|
|
498
|
+
"outputs": ["itemClick"]
|
|
499
|
+
},
|
|
500
|
+
{
|
|
501
|
+
"name": "Empty State",
|
|
502
|
+
"className": "VdEmptyState",
|
|
503
|
+
"selector": "vd-empty-state",
|
|
504
|
+
"kind": "component",
|
|
505
|
+
"category": "feedback",
|
|
506
|
+
"useFor": [
|
|
507
|
+
"empty data views",
|
|
508
|
+
"first-use screens with no content yet",
|
|
509
|
+
"guiding users to the next action when content is unavailable"
|
|
510
|
+
],
|
|
511
|
+
"avoidFor": ["loading states", "error alert messaging", "content-rich instructional pages"],
|
|
512
|
+
"inputs": [
|
|
513
|
+
"title",
|
|
514
|
+
"description",
|
|
515
|
+
"icon",
|
|
516
|
+
"showIcon",
|
|
517
|
+
"boxed",
|
|
518
|
+
"primaryActionLabel",
|
|
519
|
+
"secondaryActionLabel"
|
|
520
|
+
],
|
|
521
|
+
"outputs": ["primaryActionClick", "secondaryActionClick"]
|
|
522
|
+
},
|
|
523
|
+
{
|
|
524
|
+
"name": "Loading State",
|
|
525
|
+
"className": "VdLoadingState",
|
|
526
|
+
"selector": "vd-loading-state",
|
|
527
|
+
"kind": "component",
|
|
528
|
+
"category": "feedback",
|
|
529
|
+
"useFor": [
|
|
530
|
+
"loading placeholders while async data is being fetched",
|
|
531
|
+
"communicating in-progress operations with contextual text"
|
|
532
|
+
],
|
|
533
|
+
"avoidFor": ["empty data states after loading completes", "error or warning messages"],
|
|
534
|
+
"inputs": ["title", "description"],
|
|
535
|
+
"outputs": []
|
|
536
|
+
},
|
|
537
|
+
{
|
|
538
|
+
"name": "Divider",
|
|
539
|
+
"className": "VdDivider",
|
|
540
|
+
"selector": "vd-divider",
|
|
541
|
+
"kind": "component",
|
|
542
|
+
"category": "layout",
|
|
543
|
+
"useFor": ["visual separation between sections"],
|
|
544
|
+
"avoidFor": ["spacing-only adjustments"],
|
|
545
|
+
"inputs": ["dashed", "color", "direction", "inset"],
|
|
546
|
+
"outputs": []
|
|
547
|
+
},
|
|
548
|
+
{
|
|
549
|
+
"name": "Breadcrumb",
|
|
550
|
+
"className": "VdBreadcrumb",
|
|
551
|
+
"selector": "vd-breadcrumb",
|
|
552
|
+
"kind": "component",
|
|
553
|
+
"category": "navigation",
|
|
554
|
+
"useFor": ["hierarchical page path navigation"],
|
|
555
|
+
"avoidFor": ["top-level site navigation"],
|
|
556
|
+
"inputs": ["items", "separatorIcon", "size"],
|
|
557
|
+
"outputs": ["itemClick"]
|
|
558
|
+
},
|
|
559
|
+
{
|
|
560
|
+
"name": "Navbar",
|
|
561
|
+
"className": "VdNavbar",
|
|
562
|
+
"selector": "vd-navbar",
|
|
563
|
+
"kind": "component",
|
|
564
|
+
"category": "navigation",
|
|
565
|
+
"useFor": ["top-level app or page navigation bar"],
|
|
566
|
+
"avoidFor": ["contextual side navigation"],
|
|
567
|
+
"inputs": ["logoUrl", "logoAlt"],
|
|
568
|
+
"outputs": []
|
|
569
|
+
},
|
|
570
|
+
{
|
|
571
|
+
"name": "Sidebar",
|
|
572
|
+
"className": "VdSidebar",
|
|
573
|
+
"selector": "vd-sidebar",
|
|
574
|
+
"kind": "component",
|
|
575
|
+
"category": "navigation",
|
|
576
|
+
"useFor": ["persistent section/app side navigation"],
|
|
577
|
+
"avoidFor": ["single inline menu"],
|
|
578
|
+
"inputs": ["sections"],
|
|
579
|
+
"outputs": []
|
|
580
|
+
},
|
|
581
|
+
{
|
|
582
|
+
"name": "Dropdown",
|
|
583
|
+
"className": "VdDropdown",
|
|
584
|
+
"selector": "vd-dropdown",
|
|
585
|
+
"kind": "component",
|
|
586
|
+
"category": "overlay",
|
|
587
|
+
"useFor": ["action menus and contextual menu containers"],
|
|
588
|
+
"avoidFor": ["long-form selection requiring search"],
|
|
589
|
+
"inputs": ["position"],
|
|
590
|
+
"outputs": []
|
|
591
|
+
},
|
|
592
|
+
{
|
|
593
|
+
"name": "Dropdown Item",
|
|
594
|
+
"className": "VdDropdownItem",
|
|
595
|
+
"selector": "vd-dropdown-item",
|
|
596
|
+
"kind": "component",
|
|
597
|
+
"category": "overlay",
|
|
598
|
+
"useFor": ["actionable row within dropdown content"],
|
|
599
|
+
"avoidFor": ["standalone page actions"],
|
|
600
|
+
"inputs": ["title", "description", "icon", "disabled"],
|
|
601
|
+
"outputs": ["select"]
|
|
602
|
+
},
|
|
603
|
+
{
|
|
604
|
+
"name": "Dropdown Item Link",
|
|
605
|
+
"className": "VdDropdownItemLink",
|
|
606
|
+
"selector": "vd-dropdown-item-link",
|
|
607
|
+
"kind": "component",
|
|
608
|
+
"category": "overlay",
|
|
609
|
+
"useFor": ["navigation link row in dropdown content"],
|
|
610
|
+
"avoidFor": ["button-like command actions"],
|
|
611
|
+
"inputs": ["href", "target", "title", "disabled"],
|
|
612
|
+
"outputs": ["select"]
|
|
613
|
+
},
|
|
614
|
+
{
|
|
615
|
+
"name": "Dropdown Item Divider",
|
|
616
|
+
"className": "VdDropdownItemDivider",
|
|
617
|
+
"selector": "vd-dropdown-item-divider",
|
|
618
|
+
"kind": "component",
|
|
619
|
+
"category": "overlay",
|
|
620
|
+
"useFor": ["visual grouping separators inside dropdown menus"],
|
|
621
|
+
"avoidFor": ["layout spacing outside dropdown"],
|
|
622
|
+
"inputs": [],
|
|
623
|
+
"outputs": []
|
|
624
|
+
},
|
|
625
|
+
{
|
|
626
|
+
"name": "Dropdown Item Group",
|
|
627
|
+
"className": "VdDropdownItemGroup",
|
|
628
|
+
"selector": "vd-dropdown-item-group",
|
|
629
|
+
"kind": "component",
|
|
630
|
+
"category": "overlay",
|
|
631
|
+
"useFor": ["grouping related dropdown items under a section"],
|
|
632
|
+
"avoidFor": ["single flat menu rows"],
|
|
633
|
+
"inputs": ["name"],
|
|
634
|
+
"outputs": []
|
|
635
|
+
},
|
|
636
|
+
{
|
|
637
|
+
"name": "Tooltip",
|
|
638
|
+
"className": "VdTooltip",
|
|
639
|
+
"selector": "vd-tooltip",
|
|
640
|
+
"kind": "component",
|
|
641
|
+
"category": "overlay",
|
|
642
|
+
"useFor": ["custom tooltip host/content rendering"],
|
|
643
|
+
"avoidFor": ["persistent inline helper text"],
|
|
644
|
+
"inputs": ["text", "position"],
|
|
645
|
+
"outputs": []
|
|
646
|
+
},
|
|
647
|
+
{
|
|
648
|
+
"name": "Tooltip Directive",
|
|
649
|
+
"className": "VdTooltipDirective",
|
|
650
|
+
"selector": "[vdTooltip]",
|
|
651
|
+
"kind": "directive",
|
|
652
|
+
"category": "overlay",
|
|
653
|
+
"useFor": ["attaching tooltip text to existing elements"],
|
|
654
|
+
"avoidFor": ["static always-visible content"],
|
|
655
|
+
"inputs": ["vdTooltip", "vdTooltipPosition"],
|
|
656
|
+
"outputs": []
|
|
657
|
+
},
|
|
658
|
+
{
|
|
659
|
+
"name": "Dialog",
|
|
660
|
+
"className": "VdDialog",
|
|
661
|
+
"selector": "vd-dialog",
|
|
662
|
+
"kind": "component",
|
|
663
|
+
"category": "overlay",
|
|
664
|
+
"useFor": ["general modal dialogs"],
|
|
665
|
+
"avoidFor": ["non-blocking notifications"],
|
|
666
|
+
"preferredApi": "VdDialogService.open(...)",
|
|
667
|
+
"inputs": [],
|
|
668
|
+
"outputs": []
|
|
669
|
+
},
|
|
670
|
+
{
|
|
671
|
+
"name": "Drawer",
|
|
672
|
+
"className": "VdDrawer",
|
|
673
|
+
"selector": "vd-drawer",
|
|
674
|
+
"kind": "component",
|
|
675
|
+
"category": "overlay",
|
|
676
|
+
"useFor": ["side panel workflows and detail editing"],
|
|
677
|
+
"avoidFor": ["small confirmation prompts"],
|
|
678
|
+
"preferredApi": "VdDrawerService.open(...)",
|
|
679
|
+
"inputs": [],
|
|
680
|
+
"outputs": []
|
|
681
|
+
},
|
|
682
|
+
{
|
|
683
|
+
"name": "Confirmation Dialog",
|
|
684
|
+
"className": "VdConfirmationDialog",
|
|
685
|
+
"selector": "vd-confirmation-dialog",
|
|
686
|
+
"kind": "component",
|
|
687
|
+
"category": "overlay",
|
|
688
|
+
"useFor": ["destructive or high-impact confirmations"],
|
|
689
|
+
"avoidFor": ["multi-step forms or long content"],
|
|
690
|
+
"preferredApi": "VdConfirmationDialogService.confirm(...)",
|
|
691
|
+
"inputs": [],
|
|
692
|
+
"outputs": []
|
|
693
|
+
}
|
|
694
|
+
],
|
|
695
|
+
"nonComponentExports": {
|
|
696
|
+
"modules": [
|
|
697
|
+
{
|
|
698
|
+
"name": "AngularComponentsModule",
|
|
699
|
+
"useFor": "Bulk NgModule import of standalone Vroxal components"
|
|
700
|
+
}
|
|
701
|
+
],
|
|
702
|
+
"services": [
|
|
703
|
+
{
|
|
704
|
+
"name": "VdToastService",
|
|
705
|
+
"methods": ["configure", "setMaxToasts", "show", "dismiss", "pause", "resume"],
|
|
706
|
+
"requires": ["vd-toast"]
|
|
707
|
+
},
|
|
708
|
+
{
|
|
709
|
+
"name": "VdDialogService",
|
|
710
|
+
"methods": ["open"]
|
|
711
|
+
},
|
|
712
|
+
{
|
|
713
|
+
"name": "VdDrawerService",
|
|
714
|
+
"methods": ["open"]
|
|
715
|
+
},
|
|
716
|
+
{
|
|
717
|
+
"name": "VdConfirmationDialogService",
|
|
718
|
+
"methods": ["confirm"]
|
|
719
|
+
}
|
|
720
|
+
],
|
|
721
|
+
"models": ["Toast", "ToastColor", "ToastPosition"]
|
|
722
|
+
}
|
|
723
|
+
}
|