@mohityadav0903/branintelle-mcp 2.0.0 → 2.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/components-data.js +904 -43
- package/package.json +1 -1
package/components-data.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Branintelle UI Library - Component Metadata
|
|
3
|
-
*
|
|
2
|
+
* Branintelle UI Library - Complete Component Metadata
|
|
3
|
+
* All 36 components with inputs, outputs, interfaces, and examples
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
export const COMPONENTS_DATA = {
|
|
7
7
|
// ======================
|
|
8
|
-
// BUTTONS
|
|
8
|
+
// BUTTONS (5)
|
|
9
9
|
// ======================
|
|
10
10
|
CustomButton: {
|
|
11
11
|
name: 'CustomButton',
|
|
@@ -35,6 +35,96 @@ export const COMPONENTS_DATA = {
|
|
|
35
35
|
tokens: ['--violet-500', '--white', '--body-large-size']
|
|
36
36
|
},
|
|
37
37
|
|
|
38
|
+
ApproveButton: {
|
|
39
|
+
name: 'ApproveButton',
|
|
40
|
+
category: 'Buttons',
|
|
41
|
+
selector: 'bi-approve-button',
|
|
42
|
+
description: 'Approve action button with checkmark icon',
|
|
43
|
+
inputs: {
|
|
44
|
+
label: { type: 'string', required: true, description: 'Button label text' },
|
|
45
|
+
isActive: { type: 'boolean', default: true, description: 'Enable/disable state' },
|
|
46
|
+
width: { type: 'string', default: 'auto', description: 'Button width' }
|
|
47
|
+
},
|
|
48
|
+
outputs: {
|
|
49
|
+
onClick: { type: 'EventEmitter<void>', description: 'Emitted on button click' }
|
|
50
|
+
},
|
|
51
|
+
example: `<bi-approve-button
|
|
52
|
+
[label]="'Approve'"
|
|
53
|
+
[isActive]="canApprove"
|
|
54
|
+
(onClick)="handleApproval()">
|
|
55
|
+
</bi-approve-button>`,
|
|
56
|
+
usagePattern: 'primary-actions',
|
|
57
|
+
tokens: ['--positive-high', '--white']
|
|
58
|
+
},
|
|
59
|
+
|
|
60
|
+
CancelButton: {
|
|
61
|
+
name: 'CancelButton',
|
|
62
|
+
category: 'Buttons',
|
|
63
|
+
selector: 'bi-cancel-button',
|
|
64
|
+
description: 'Cancel/dismiss button with configurable styling',
|
|
65
|
+
inputs: {
|
|
66
|
+
config: { type: 'CancelButtonConfig', required: true, description: 'Button configuration object' }
|
|
67
|
+
},
|
|
68
|
+
outputs: {
|
|
69
|
+
onClick: { type: 'EventEmitter<void>', description: 'Click event' }
|
|
70
|
+
},
|
|
71
|
+
interfaces: {
|
|
72
|
+
CancelButtonConfig: `{
|
|
73
|
+
label: string;
|
|
74
|
+
width?: string;
|
|
75
|
+
height?: string;
|
|
76
|
+
}`
|
|
77
|
+
},
|
|
78
|
+
example: `<bi-cancel-button
|
|
79
|
+
[config]="{label: 'Cancel', width: '120px'}"
|
|
80
|
+
(onClick)="handleCancel()">
|
|
81
|
+
</bi-cancel-button>`,
|
|
82
|
+
usagePattern: 'primary-actions',
|
|
83
|
+
tokens: ['--text-300', '--stroke-1']
|
|
84
|
+
},
|
|
85
|
+
|
|
86
|
+
BackButton: {
|
|
87
|
+
name: 'BackButton',
|
|
88
|
+
category: 'Buttons',
|
|
89
|
+
selector: 'bi-back-button',
|
|
90
|
+
description: 'Navigation back button with arrow icon',
|
|
91
|
+
inputs: {
|
|
92
|
+
label: { type: 'string', default: 'Back', description: 'Button label' },
|
|
93
|
+
showIcon: { type: 'boolean', default: true, description: 'Show back arrow icon' }
|
|
94
|
+
},
|
|
95
|
+
outputs: {
|
|
96
|
+
onClick: { type: 'EventEmitter<void>', description: 'Back button clicked' }
|
|
97
|
+
},
|
|
98
|
+
example: `<bi-back-button
|
|
99
|
+
[label]="'Go Back'"
|
|
100
|
+
(onClick)="navigateBack()">
|
|
101
|
+
</bi-back-button>`,
|
|
102
|
+
usagePattern: 'primary-actions',
|
|
103
|
+
tokens: ['--violet-500', '--body-large-size']
|
|
104
|
+
},
|
|
105
|
+
|
|
106
|
+
ButtonImage: {
|
|
107
|
+
name: 'ButtonImage',
|
|
108
|
+
category: 'Buttons',
|
|
109
|
+
selector: 'bi-button-image',
|
|
110
|
+
description: 'Button with image/icon support',
|
|
111
|
+
inputs: {
|
|
112
|
+
imageSrc: { type: 'string', required: true, description: 'Image source path' },
|
|
113
|
+
label: { type: 'string', required: false, description: 'Optional button label' },
|
|
114
|
+
width: { type: 'string', default: 'auto', description: 'Button width' }
|
|
115
|
+
},
|
|
116
|
+
outputs: {},
|
|
117
|
+
example: `<bi-button-image
|
|
118
|
+
[imageSrc]="'assets/icons/upload.svg'"
|
|
119
|
+
[label]="'Upload'">
|
|
120
|
+
</bi-button-image>`,
|
|
121
|
+
usagePattern: 'primary-actions',
|
|
122
|
+
tokens: ['--violet-500']
|
|
123
|
+
},
|
|
124
|
+
|
|
125
|
+
// ======================
|
|
126
|
+
// STATUS (3)
|
|
127
|
+
// ======================
|
|
38
128
|
StatusPill: {
|
|
39
129
|
name: 'StatusPill',
|
|
40
130
|
category: 'Status',
|
|
@@ -57,6 +147,102 @@ export const COMPONENTS_DATA = {
|
|
|
57
147
|
tokens: ['--positive-high', '--positive-low', '--body-medium-size']
|
|
58
148
|
},
|
|
59
149
|
|
|
150
|
+
PillBadge: {
|
|
151
|
+
name: 'PillBadge',
|
|
152
|
+
category: 'Status',
|
|
153
|
+
selector: 'bi-pill-badge',
|
|
154
|
+
description: 'Small badge for counts and indicators',
|
|
155
|
+
inputs: {
|
|
156
|
+
count: { type: 'number', required: true, description: 'Count to display' },
|
|
157
|
+
color: { type: 'string', default: '#544d7c', description: 'Badge background color' }
|
|
158
|
+
},
|
|
159
|
+
outputs: {},
|
|
160
|
+
example: `<bi-pill-badge
|
|
161
|
+
[count]="5"
|
|
162
|
+
[color]="'#544d7c'">
|
|
163
|
+
</bi-pill-badge>`,
|
|
164
|
+
usagePattern: 'status-indicators',
|
|
165
|
+
tokens: ['--violet-500', '--white']
|
|
166
|
+
},
|
|
167
|
+
|
|
168
|
+
PillBox: {
|
|
169
|
+
name: 'PillBox',
|
|
170
|
+
category: 'Status',
|
|
171
|
+
selector: 'bi-pill-box',
|
|
172
|
+
description: 'Tag-style pill component',
|
|
173
|
+
inputs: {
|
|
174
|
+
text: { type: 'string', required: true, description: 'Pill text' },
|
|
175
|
+
backgroundColor: { type: 'string', required: true, description: 'Background color' },
|
|
176
|
+
textColor: { type: 'string', required: true, description: 'Text color' }
|
|
177
|
+
},
|
|
178
|
+
outputs: {},
|
|
179
|
+
example: `<bi-pill-box
|
|
180
|
+
[text]="'Premium'"
|
|
181
|
+
[backgroundColor]="'#f0f2ff'"
|
|
182
|
+
[textColor]="'#544d7c'">
|
|
183
|
+
</bi-pill-box>`,
|
|
184
|
+
usagePattern: 'status-indicators',
|
|
185
|
+
tokens: ['--selected-low', '--violet-500']
|
|
186
|
+
},
|
|
187
|
+
|
|
188
|
+
// ======================
|
|
189
|
+
// PROGRESS (2)
|
|
190
|
+
// ======================
|
|
191
|
+
ProgressBar: {
|
|
192
|
+
name: 'ProgressBar',
|
|
193
|
+
category: 'Progress',
|
|
194
|
+
selector: 'bi-progress-bar',
|
|
195
|
+
description: 'Linear progress indicator',
|
|
196
|
+
inputs: {
|
|
197
|
+
progress: { type: 'number', required: true, description: 'Progress percentage (0-100)' },
|
|
198
|
+
height: { type: 'string', default: '8px', description: 'Bar height' },
|
|
199
|
+
color: { type: 'string', default: '#544d7c', description: 'Progress bar color' }
|
|
200
|
+
},
|
|
201
|
+
outputs: {},
|
|
202
|
+
example: `<bi-progress-bar
|
|
203
|
+
[progress]="75"
|
|
204
|
+
[height]="'10px'"
|
|
205
|
+
[color]="'#544d7c'">
|
|
206
|
+
</bi-progress-bar>`,
|
|
207
|
+
usagePattern: 'status-indicators',
|
|
208
|
+
tokens: ['--violet-500', '--violet-100']
|
|
209
|
+
},
|
|
210
|
+
|
|
211
|
+
SegmentedProgressBar: {
|
|
212
|
+
name: 'SegmentedProgressBar',
|
|
213
|
+
category: 'Progress',
|
|
214
|
+
selector: 'bi-segmented-progress-bar',
|
|
215
|
+
description: 'Multi-segment progress bar',
|
|
216
|
+
inputs: {
|
|
217
|
+
segments: { type: 'ProgressSegment[]', required: true, description: 'Array of progress segments' },
|
|
218
|
+
height: { type: 'string', default: '8px', description: 'Bar height' }
|
|
219
|
+
},
|
|
220
|
+
outputs: {},
|
|
221
|
+
interfaces: {
|
|
222
|
+
ProgressSegment: `{
|
|
223
|
+
value: number;
|
|
224
|
+
color: string;
|
|
225
|
+
label?: string;
|
|
226
|
+
}`
|
|
227
|
+
},
|
|
228
|
+
example: `<bi-segmented-progress-bar
|
|
229
|
+
[segments]="progressSegments"
|
|
230
|
+
[height]="'12px'">
|
|
231
|
+
</bi-segmented-progress-bar>
|
|
232
|
+
|
|
233
|
+
// Component
|
|
234
|
+
progressSegments = [
|
|
235
|
+
{ value: 30, color: '#2c9148', label: 'Complete' },
|
|
236
|
+
{ value: 50, color: '#544d7c', label: 'In Progress' },
|
|
237
|
+
{ value: 20, color: '#dedfe0', label: 'Remaining' }
|
|
238
|
+
];`,
|
|
239
|
+
usagePattern: 'status-indicators',
|
|
240
|
+
tokens: ['--violet-500', '--positive-high', '--stroke-1']
|
|
241
|
+
},
|
|
242
|
+
|
|
243
|
+
// ======================
|
|
244
|
+
// NAVIGATION (3)
|
|
245
|
+
// ======================
|
|
60
246
|
VerticalStepper: {
|
|
61
247
|
name: 'VerticalStepper',
|
|
62
248
|
category: 'Navigation',
|
|
@@ -92,6 +278,601 @@ workflowSteps: Step[] = [
|
|
|
92
278
|
tokens: ['--violet-500', '--positive-high', '--text-300']
|
|
93
279
|
},
|
|
94
280
|
|
|
281
|
+
CustomBreadcrumb: {
|
|
282
|
+
name: 'CustomBreadcrumb',
|
|
283
|
+
category: 'Navigation',
|
|
284
|
+
selector: 'bi-custom-breadcrumb',
|
|
285
|
+
description: 'Breadcrumb navigation component',
|
|
286
|
+
inputs: {
|
|
287
|
+
items: { type: 'string[]', required: true, description: 'Breadcrumb items array' },
|
|
288
|
+
separator: { type: 'string', default: '/', description: 'Separator character' }
|
|
289
|
+
},
|
|
290
|
+
outputs: {
|
|
291
|
+
itemClick: { type: 'EventEmitter<number>', description: 'Breadcrumb item clicked' }
|
|
292
|
+
},
|
|
293
|
+
example: `<bi-custom-breadcrumb
|
|
294
|
+
[items]="['Home', 'Products', 'Details']"
|
|
295
|
+
[separator]="'>'"
|
|
296
|
+
(itemClick)="navigateTo($event)">
|
|
297
|
+
</bi-custom-breadcrumb>`,
|
|
298
|
+
usagePattern: 'navigation',
|
|
299
|
+
tokens: ['--text-300', '--violet-500']
|
|
300
|
+
},
|
|
301
|
+
|
|
302
|
+
HeaderTabs: {
|
|
303
|
+
name: 'HeaderTabs',
|
|
304
|
+
category: 'Navigation',
|
|
305
|
+
selector: 'bi-header-tabs',
|
|
306
|
+
description: 'Tab navigation with status counts',
|
|
307
|
+
inputs: {
|
|
308
|
+
tabs: { type: 'StatusItem[]', required: true, description: 'Array of tab items with counts' },
|
|
309
|
+
activeTab: { type: 'number', default: 0, description: 'Active tab index' }
|
|
310
|
+
},
|
|
311
|
+
outputs: {
|
|
312
|
+
tabChange: { type: 'EventEmitter<number>', description: 'Tab changed event' }
|
|
313
|
+
},
|
|
314
|
+
interfaces: {
|
|
315
|
+
StatusItem: `{
|
|
316
|
+
label: string;
|
|
317
|
+
count?: number;
|
|
318
|
+
status?: string;
|
|
319
|
+
}`
|
|
320
|
+
},
|
|
321
|
+
example: `<bi-header-tabs
|
|
322
|
+
[tabs]="statusTabs"
|
|
323
|
+
[activeTab]="0"
|
|
324
|
+
(tabChange)="onTabChange($event)">
|
|
325
|
+
</bi-header-tabs>
|
|
326
|
+
|
|
327
|
+
// Component
|
|
328
|
+
statusTabs = [
|
|
329
|
+
{ label: 'All', count: 42 },
|
|
330
|
+
{ label: 'Active', count: 15 },
|
|
331
|
+
{ label: 'Completed', count: 27 }
|
|
332
|
+
];`,
|
|
333
|
+
usagePattern: 'navigation',
|
|
334
|
+
tokens: ['--violet-500', '--text-300', '--stroke-1']
|
|
335
|
+
},
|
|
336
|
+
|
|
337
|
+
// ======================
|
|
338
|
+
// TEXT (2)
|
|
339
|
+
// ======================
|
|
340
|
+
TitleHeaderSubtext: {
|
|
341
|
+
name: 'TitleHeaderSubtext',
|
|
342
|
+
category: 'Text',
|
|
343
|
+
selector: 'bi-title-header-subtext',
|
|
344
|
+
description: 'Title with subtitle component',
|
|
345
|
+
inputs: {
|
|
346
|
+
title: { type: 'string', required: true, description: 'Main title text' },
|
|
347
|
+
subtitle: { type: 'string', required: true, description: 'Subtitle text' }
|
|
348
|
+
},
|
|
349
|
+
outputs: {},
|
|
350
|
+
example: `<bi-title-header-subtext
|
|
351
|
+
[title]="'Dashboard'"
|
|
352
|
+
[subtitle]="'Overview of your projects'">
|
|
353
|
+
</bi-title-header-subtext>`,
|
|
354
|
+
usagePattern: 'content',
|
|
355
|
+
tokens: ['--text-600', '--text-300', '--heading-large-size']
|
|
356
|
+
},
|
|
357
|
+
|
|
358
|
+
HelpText: {
|
|
359
|
+
name: 'HelpText',
|
|
360
|
+
category: 'Text',
|
|
361
|
+
selector: 'bi-help-text',
|
|
362
|
+
description: 'Helper text with info icon',
|
|
363
|
+
inputs: {
|
|
364
|
+
text: { type: 'string', required: true, description: 'Help text content' }
|
|
365
|
+
},
|
|
366
|
+
outputs: {},
|
|
367
|
+
example: `<bi-help-text
|
|
368
|
+
[text]="'Enter a valid email address'">
|
|
369
|
+
</bi-help-text>`,
|
|
370
|
+
usagePattern: 'form-inputs',
|
|
371
|
+
tokens: ['--text-300', '--body-small-size']
|
|
372
|
+
},
|
|
373
|
+
|
|
374
|
+
// ======================
|
|
375
|
+
// FORMS (2)
|
|
376
|
+
// ======================
|
|
377
|
+
SearchBar: {
|
|
378
|
+
name: 'SearchBar',
|
|
379
|
+
category: 'Forms',
|
|
380
|
+
selector: 'bi-search-bar',
|
|
381
|
+
description: 'Search input with icon',
|
|
382
|
+
inputs: {
|
|
383
|
+
placeholder: { type: 'string', default: 'Search...', description: 'Placeholder text' },
|
|
384
|
+
value: { type: 'string', required: false, description: 'Search value' }
|
|
385
|
+
},
|
|
386
|
+
outputs: {
|
|
387
|
+
searchChange: { type: 'EventEmitter<string>', description: 'Search value changed' },
|
|
388
|
+
searchSubmit: { type: 'EventEmitter<string>', description: 'Search submitted' }
|
|
389
|
+
},
|
|
390
|
+
example: `<bi-search-bar
|
|
391
|
+
[placeholder]="'Search products...'"
|
|
392
|
+
[value]="searchQuery"
|
|
393
|
+
(searchChange)="onSearch($event)">
|
|
394
|
+
</bi-search-bar>`,
|
|
395
|
+
usagePattern: 'form-inputs',
|
|
396
|
+
tokens: ['--stroke-1', '--text-400', '--body-medium-size']
|
|
397
|
+
},
|
|
398
|
+
|
|
399
|
+
Checklist: {
|
|
400
|
+
name: 'Checklist',
|
|
401
|
+
category: 'Forms',
|
|
402
|
+
selector: 'bi-checklist',
|
|
403
|
+
description: 'Checklist with selectable items',
|
|
404
|
+
inputs: {
|
|
405
|
+
items: { type: 'any[]', required: true, description: 'Checklist items' },
|
|
406
|
+
selectedItems: { type: 'any[]', required: false, description: 'Pre-selected items' }
|
|
407
|
+
},
|
|
408
|
+
outputs: {
|
|
409
|
+
selectionChange: { type: 'EventEmitter<any[]>', description: 'Selection changed' }
|
|
410
|
+
},
|
|
411
|
+
example: `<bi-checklist
|
|
412
|
+
[items]="taskList"
|
|
413
|
+
[selectedItems]="completedTasks"
|
|
414
|
+
(selectionChange)="onTasksChange($event)">
|
|
415
|
+
</bi-checklist>`,
|
|
416
|
+
usagePattern: 'form-inputs',
|
|
417
|
+
tokens: ['--violet-500', '--stroke-1']
|
|
418
|
+
},
|
|
419
|
+
|
|
420
|
+
// ======================
|
|
421
|
+
// CARDS (4)
|
|
422
|
+
// ======================
|
|
423
|
+
HorizontalCard: {
|
|
424
|
+
name: 'HorizontalCard',
|
|
425
|
+
category: 'Cards',
|
|
426
|
+
selector: 'bi-horizontal-card',
|
|
427
|
+
description: 'Horizontal layout card',
|
|
428
|
+
inputs: {
|
|
429
|
+
items: { type: 'HorizontalCardItem[]', required: true, description: 'Card items array' }
|
|
430
|
+
},
|
|
431
|
+
outputs: {
|
|
432
|
+
itemClick: { type: 'EventEmitter<any>', description: 'Card item clicked' }
|
|
433
|
+
},
|
|
434
|
+
interfaces: {
|
|
435
|
+
HorizontalCardItem: `{
|
|
436
|
+
title: string;
|
|
437
|
+
value: string;
|
|
438
|
+
icon?: string;
|
|
439
|
+
}`
|
|
440
|
+
},
|
|
441
|
+
example: `<bi-horizontal-card
|
|
442
|
+
[items]="cardItems"
|
|
443
|
+
(itemClick)="handleClick($event)">
|
|
444
|
+
</bi-horizontal-card>`,
|
|
445
|
+
usagePattern: 'data-display',
|
|
446
|
+
tokens: ['--stroke-1', '--text-500', '--text-300']
|
|
447
|
+
},
|
|
448
|
+
|
|
449
|
+
InfoActionCard: {
|
|
450
|
+
name: 'InfoActionCard',
|
|
451
|
+
category: 'Cards',
|
|
452
|
+
selector: 'bi-info-action-card',
|
|
453
|
+
description: 'Card with action buttons',
|
|
454
|
+
inputs: {
|
|
455
|
+
cardData: { type: 'InfoActionCardInput', required: true, description: 'Card configuration' },
|
|
456
|
+
size: { type: 'CardSize', default: 'medium', description: 'Card size' }
|
|
457
|
+
},
|
|
458
|
+
outputs: {
|
|
459
|
+
actionClick: { type: 'EventEmitter<string>', description: 'Action button clicked' }
|
|
460
|
+
},
|
|
461
|
+
interfaces: {
|
|
462
|
+
InfoActionCardInput: `{
|
|
463
|
+
title: string;
|
|
464
|
+
description: string;
|
|
465
|
+
actions: { label: string; value: string }[];
|
|
466
|
+
}`,
|
|
467
|
+
CardSize: `'small' | 'medium' | 'large'`
|
|
468
|
+
},
|
|
469
|
+
example: `<bi-info-action-card
|
|
470
|
+
[cardData]="{
|
|
471
|
+
title: 'Confirm Action',
|
|
472
|
+
description: 'Are you sure?',
|
|
473
|
+
actions: [{label: 'Confirm', value: 'confirm'}]
|
|
474
|
+
}"
|
|
475
|
+
(actionClick)="onAction($event)">
|
|
476
|
+
</bi-info-action-card>`,
|
|
477
|
+
usagePattern: 'content',
|
|
478
|
+
tokens: ['--stroke-1', '--violet-500']
|
|
479
|
+
},
|
|
480
|
+
|
|
481
|
+
ProgressDisplayCard: {
|
|
482
|
+
name: 'ProgressDisplayCard',
|
|
483
|
+
category: 'Cards',
|
|
484
|
+
selector: 'bi-progress-display-card',
|
|
485
|
+
description: 'Card showing progress information',
|
|
486
|
+
inputs: {
|
|
487
|
+
title: { type: 'string', required: true, description: 'Card title' },
|
|
488
|
+
progress: { type: 'number', required: true, description: 'Progress percentage' },
|
|
489
|
+
description: { type: 'string', required: false, description: 'Additional description' }
|
|
490
|
+
},
|
|
491
|
+
outputs: {},
|
|
492
|
+
example: `<bi-progress-display-card
|
|
493
|
+
[title]="'Project Completion'"
|
|
494
|
+
[progress]="75"
|
|
495
|
+
[description]="'3 of 4 tasks done'">
|
|
496
|
+
</bi-progress-display-card>`,
|
|
497
|
+
usagePattern: 'data-display',
|
|
498
|
+
tokens: ['--violet-500', '--text-500']
|
|
499
|
+
},
|
|
500
|
+
|
|
501
|
+
ProfileImageList: {
|
|
502
|
+
name: 'ProfileImageList',
|
|
503
|
+
category: 'Cards',
|
|
504
|
+
selector: 'bi-profile-image-list',
|
|
505
|
+
description: 'Avatar stack component',
|
|
506
|
+
inputs: {
|
|
507
|
+
users: { type: 'ProfileUser[]', required: true, description: 'Array of user profile objects' },
|
|
508
|
+
maxDisplay: { type: 'number', default: 4, description: 'Maximum avatars to display' }
|
|
509
|
+
},
|
|
510
|
+
outputs: {},
|
|
511
|
+
interfaces: {
|
|
512
|
+
ProfileUser: `{
|
|
513
|
+
name: string;
|
|
514
|
+
imageUrl?: string;
|
|
515
|
+
initials?: string;
|
|
516
|
+
}`
|
|
517
|
+
},
|
|
518
|
+
example: `<bi-profile-image-list
|
|
519
|
+
[users]="teamMembers"
|
|
520
|
+
[maxDisplay]="3">
|
|
521
|
+
</bi-profile-image-list>`,
|
|
522
|
+
usagePattern: 'data-display',
|
|
523
|
+
tokens: ['--violet-500', '--white']
|
|
524
|
+
},
|
|
525
|
+
|
|
526
|
+
// ======================
|
|
527
|
+
// DROPDOWNS (5)
|
|
528
|
+
// ======================
|
|
529
|
+
SingleSelectDropdown: {
|
|
530
|
+
name: 'SingleSelectDropdown',
|
|
531
|
+
category: 'Dropdowns',
|
|
532
|
+
selector: 'bi-single-select-dropdown',
|
|
533
|
+
description: 'Single selection dropdown with search',
|
|
534
|
+
inputs: {
|
|
535
|
+
options: { type: 'DropdownItem[]', required: true, description: 'List of dropdown options' },
|
|
536
|
+
selectedValue: { type: 'string', required: false, description: 'Currently selected value' },
|
|
537
|
+
placeholder: { type: 'string', default: 'Select...', description: 'Placeholder text' },
|
|
538
|
+
searchable: { type: 'boolean', default: true, description: 'Enable search functionality' }
|
|
539
|
+
},
|
|
540
|
+
outputs: {
|
|
541
|
+
selectionChange: { type: 'EventEmitter<string>', description: 'Emitted when selection changes' }
|
|
542
|
+
},
|
|
543
|
+
interfaces: {
|
|
544
|
+
DropdownItem: `{
|
|
545
|
+
label: string;
|
|
546
|
+
value: string;
|
|
547
|
+
disabled?: boolean;
|
|
548
|
+
}`
|
|
549
|
+
},
|
|
550
|
+
example: `<bi-single-select-dropdown
|
|
551
|
+
[options]="categoryOptions"
|
|
552
|
+
[selectedValue]="selectedCategory"
|
|
553
|
+
[placeholder]="'Select category'"
|
|
554
|
+
(selectionChange)="onCategoryChange($event)">
|
|
555
|
+
</bi-single-select-dropdown>`,
|
|
556
|
+
usagePattern: 'form-inputs',
|
|
557
|
+
tokens: ['--stroke-1', '--violet-500', '--hover']
|
|
558
|
+
},
|
|
559
|
+
|
|
560
|
+
MultiSelectDropdown: {
|
|
561
|
+
name: 'MultiSelectDropdown',
|
|
562
|
+
category: 'Dropdowns',
|
|
563
|
+
selector: 'bi-multi-select-dropdown',
|
|
564
|
+
description: 'Multi-selection dropdown with chips',
|
|
565
|
+
inputs: {
|
|
566
|
+
options: { type: 'MultiSelectOption[]', required: true, description: 'Dropdown options' },
|
|
567
|
+
selectedValues: { type: 'string[]', required: false, description: 'Selected values array' },
|
|
568
|
+
placeholder: { type: 'string', default: 'Select multiple...', description: 'Placeholder' }
|
|
569
|
+
},
|
|
570
|
+
outputs: {
|
|
571
|
+
selectionChange: { type: 'EventEmitter<string[]>', description: 'Selection array changed' }
|
|
572
|
+
},
|
|
573
|
+
interfaces: {
|
|
574
|
+
MultiSelectOption: `{
|
|
575
|
+
label: string;
|
|
576
|
+
value: string;
|
|
577
|
+
disabled?: boolean;
|
|
578
|
+
}`
|
|
579
|
+
},
|
|
580
|
+
example: `<bi-multi-select-dropdown
|
|
581
|
+
[options]="tagOptions"
|
|
582
|
+
[selectedValues]="selectedTags"
|
|
583
|
+
(selectionChange)="onTagsChange($event)">
|
|
584
|
+
</bi-multi-select-dropdown>`,
|
|
585
|
+
usagePattern: 'form-inputs',
|
|
586
|
+
tokens: ['--stroke-1', '--violet-500', '--selected-low']
|
|
587
|
+
},
|
|
588
|
+
|
|
589
|
+
DropdownWithStatus: {
|
|
590
|
+
name: 'DropdownWithStatus',
|
|
591
|
+
category: 'Dropdowns',
|
|
592
|
+
selector: 'bi-dropdown-with-status',
|
|
593
|
+
description: 'Dropdown with status indicators',
|
|
594
|
+
inputs: {
|
|
595
|
+
options: { type: 'StatusDropdownItem[]', required: true, description: 'Options with status' },
|
|
596
|
+
selectedValue: { type: 'string', required: false, description: 'Selected value' }
|
|
597
|
+
},
|
|
598
|
+
outputs: {
|
|
599
|
+
selectionChange: { type: 'EventEmitter<string>', description: 'Selection changed' }
|
|
600
|
+
},
|
|
601
|
+
interfaces: {
|
|
602
|
+
StatusDropdownItem: `{
|
|
603
|
+
label: string;
|
|
604
|
+
value: string;
|
|
605
|
+
status: string;
|
|
606
|
+
statusColor: string;
|
|
607
|
+
}`
|
|
608
|
+
},
|
|
609
|
+
example: `<bi-dropdown-with-status
|
|
610
|
+
[options]="statusOptions"
|
|
611
|
+
[selectedValue]="currentStatus"
|
|
612
|
+
(selectionChange)="onStatusChange($event)">
|
|
613
|
+
</bi-dropdown-with-status>`,
|
|
614
|
+
usagePattern: 'form-inputs',
|
|
615
|
+
tokens: ['--stroke-1', '--positive-high', '--negative-high']
|
|
616
|
+
},
|
|
617
|
+
|
|
618
|
+
MultilineOptionDropdown: {
|
|
619
|
+
name: 'MultilineOptionDropdown',
|
|
620
|
+
category: 'Dropdowns',
|
|
621
|
+
selector: 'bi-multiline-option-dropdown',
|
|
622
|
+
description: 'Dropdown with multiline options',
|
|
623
|
+
inputs: {
|
|
624
|
+
options: { type: 'MultilineDropdownItem[]', required: true, description: 'Multiline options' },
|
|
625
|
+
selectedValue: { type: 'string', required: false, description: 'Selected value' }
|
|
626
|
+
},
|
|
627
|
+
outputs: {
|
|
628
|
+
selectionChange: { type: 'EventEmitter<string>', description: 'Selection event' }
|
|
629
|
+
},
|
|
630
|
+
interfaces: {
|
|
631
|
+
MultilineDropdownItem: `{
|
|
632
|
+
title: string;
|
|
633
|
+
subtitle: string;
|
|
634
|
+
value: string;
|
|
635
|
+
}`
|
|
636
|
+
},
|
|
637
|
+
example: `<bi-multiline-option-dropdown
|
|
638
|
+
[options]="vendorOptions"
|
|
639
|
+
[selectedValue]="selectedVendor"
|
|
640
|
+
(selectionChange)="onVendorSelect($event)">
|
|
641
|
+
</bi-multiline-option-dropdown>`,
|
|
642
|
+
usagePattern: 'form-inputs',
|
|
643
|
+
tokens: ['--stroke-1', '--text-500', '--text-300']
|
|
644
|
+
},
|
|
645
|
+
|
|
646
|
+
ExpandableMenuDropdown: {
|
|
647
|
+
name: 'ExpandableMenuDropdown',
|
|
648
|
+
category: 'Dropdowns',
|
|
649
|
+
selector: 'bi-expandable-menu-dropdown',
|
|
650
|
+
description: 'Nested menu dropdown with expandable sections',
|
|
651
|
+
inputs: {
|
|
652
|
+
menuItems: { type: 'MenuDropdownItem[]', required: true, description: 'Nested menu structure' }
|
|
653
|
+
},
|
|
654
|
+
outputs: {
|
|
655
|
+
itemSelect: { type: 'EventEmitter<any>', description: 'Menu item selected' }
|
|
656
|
+
},
|
|
657
|
+
interfaces: {
|
|
658
|
+
MenuDropdownItem: `{
|
|
659
|
+
label: string;
|
|
660
|
+
value: string;
|
|
661
|
+
children?: MenuDropdownItem[];
|
|
662
|
+
}`
|
|
663
|
+
},
|
|
664
|
+
example: `<bi-expandable-menu-dropdown
|
|
665
|
+
[menuItems]="navigationMenu"
|
|
666
|
+
(itemSelect)="onMenuSelect($event)">
|
|
667
|
+
</bi-expandable-menu-dropdown>`,
|
|
668
|
+
usagePattern: 'navigation',
|
|
669
|
+
tokens: ['--stroke-1', '--hover', '--violet-500']
|
|
670
|
+
},
|
|
671
|
+
|
|
672
|
+
// ======================
|
|
673
|
+
// OVERLAYS (2)
|
|
674
|
+
// ======================
|
|
675
|
+
CustomTooltip: {
|
|
676
|
+
name: 'CustomTooltip',
|
|
677
|
+
category: 'Overlays',
|
|
678
|
+
selector: 'bi-custom-tooltip',
|
|
679
|
+
description: 'Customizable tooltip component',
|
|
680
|
+
inputs: {
|
|
681
|
+
text: { type: 'string', required: true, description: 'Tooltip text' },
|
|
682
|
+
position: { type: 'string', default: 'top', description: 'Tooltip position' }
|
|
683
|
+
},
|
|
684
|
+
outputs: {},
|
|
685
|
+
example: `<bi-custom-tooltip
|
|
686
|
+
[text]="'Click to edit'"
|
|
687
|
+
[position]="'right'">
|
|
688
|
+
<button>Edit</button>
|
|
689
|
+
</bi-custom-tooltip>`,
|
|
690
|
+
usagePattern: 'content',
|
|
691
|
+
tokens: ['--violet-800', '--white', '--body-small-size']
|
|
692
|
+
},
|
|
693
|
+
|
|
694
|
+
ConfirmWarning: {
|
|
695
|
+
name: 'ConfirmWarning',
|
|
696
|
+
category: 'Overlays',
|
|
697
|
+
selector: 'bi-confirm-warning',
|
|
698
|
+
description: 'Confirmation dialog with warning',
|
|
699
|
+
inputs: {
|
|
700
|
+
title: { type: 'string', required: true, description: 'Dialog title' },
|
|
701
|
+
message: { type: 'string', required: true, description: 'Warning message' },
|
|
702
|
+
confirmLabel: { type: 'string', default: 'Confirm', description: 'Confirm button label' },
|
|
703
|
+
cancelLabel: { type: 'string', default: 'Cancel', description: 'Cancel button label' }
|
|
704
|
+
},
|
|
705
|
+
outputs: {
|
|
706
|
+
confirm: { type: 'EventEmitter<void>', description: 'User confirmed' },
|
|
707
|
+
cancel: { type: 'EventEmitter<void>', description: 'User cancelled' }
|
|
708
|
+
},
|
|
709
|
+
example: `<bi-confirm-warning
|
|
710
|
+
[title]="'Delete Item'"
|
|
711
|
+
[message]="'This action cannot be undone'"
|
|
712
|
+
(confirm)="deleteItem()"
|
|
713
|
+
(cancel)="closeDialog()">
|
|
714
|
+
</bi-confirm-warning>`,
|
|
715
|
+
usagePattern: 'content',
|
|
716
|
+
tokens: ['--negative-high', '--stroke-1']
|
|
717
|
+
},
|
|
718
|
+
|
|
719
|
+
// ======================
|
|
720
|
+
// WORKFLOWS (3)
|
|
721
|
+
// ======================
|
|
722
|
+
VerticalStages: {
|
|
723
|
+
name: 'VerticalStages',
|
|
724
|
+
category: 'Workflows',
|
|
725
|
+
selector: 'bi-vertical-stages',
|
|
726
|
+
description: 'Vertical stage indicator for workflows',
|
|
727
|
+
inputs: {
|
|
728
|
+
stages: { type: 'StageItem[]', required: true, description: 'Workflow stages' },
|
|
729
|
+
currentStage: { type: 'number', default: 0, description: 'Current stage index' }
|
|
730
|
+
},
|
|
731
|
+
outputs: {},
|
|
732
|
+
interfaces: {
|
|
733
|
+
StageItem: `{
|
|
734
|
+
label: string;
|
|
735
|
+
status: 'completed' | 'current' | 'pending';
|
|
736
|
+
}`
|
|
737
|
+
},
|
|
738
|
+
example: `<bi-vertical-stages
|
|
739
|
+
[stages]="workflowStages"
|
|
740
|
+
[currentStage]="2">
|
|
741
|
+
</bi-vertical-stages>`,
|
|
742
|
+
usagePattern: 'multi-step-forms',
|
|
743
|
+
tokens: ['--violet-500', '--positive-high', '--text-300']
|
|
744
|
+
},
|
|
745
|
+
|
|
746
|
+
UserSelection: {
|
|
747
|
+
name: 'UserSelection',
|
|
748
|
+
category: 'Workflows',
|
|
749
|
+
selector: 'bi-user-selection',
|
|
750
|
+
description: 'User selection component with search',
|
|
751
|
+
inputs: {
|
|
752
|
+
users: { type: 'UserSelectionUser[]', required: true, description: 'Available users' },
|
|
753
|
+
selectedUsers: { type: 'any[]', required: false, description: 'Pre-selected users' }
|
|
754
|
+
},
|
|
755
|
+
outputs: {
|
|
756
|
+
selectionChange: { type: 'EventEmitter<any[]>', description: 'User selection changed' }
|
|
757
|
+
},
|
|
758
|
+
interfaces: {
|
|
759
|
+
UserSelectionUser: `{
|
|
760
|
+
id: string;
|
|
761
|
+
name: string;
|
|
762
|
+
email: string;
|
|
763
|
+
avatar?: string;
|
|
764
|
+
}`
|
|
765
|
+
},
|
|
766
|
+
example: `<bi-user-selection
|
|
767
|
+
[users]="allUsers"
|
|
768
|
+
[selectedUsers]="assignedUsers"
|
|
769
|
+
(selectionChange)="onUsersChange($event)">
|
|
770
|
+
</bi-user-selection>`,
|
|
771
|
+
usagePattern: 'form-inputs',
|
|
772
|
+
tokens: ['--stroke-1', '--violet-500']
|
|
773
|
+
},
|
|
774
|
+
|
|
775
|
+
Accordion: {
|
|
776
|
+
name: 'Accordion',
|
|
777
|
+
category: 'Workflows',
|
|
778
|
+
selector: 'bi-accordion',
|
|
779
|
+
description: 'Collapsible accordion component',
|
|
780
|
+
inputs: {
|
|
781
|
+
items: { type: 'AccordionMenu[]', required: true, description: 'Accordion items' },
|
|
782
|
+
config: { type: 'AccordionConfig', required: false, description: 'Accordion configuration' }
|
|
783
|
+
},
|
|
784
|
+
outputs: {
|
|
785
|
+
itemClick: { type: 'EventEmitter<any>', description: 'Accordion item clicked' }
|
|
786
|
+
},
|
|
787
|
+
interfaces: {
|
|
788
|
+
AccordionMenu: `{
|
|
789
|
+
label: string;
|
|
790
|
+
value: string;
|
|
791
|
+
children?: AccordionSubmenu[];
|
|
792
|
+
}`,
|
|
793
|
+
AccordionSubmenu: `{
|
|
794
|
+
label: string;
|
|
795
|
+
value: string;
|
|
796
|
+
}`,
|
|
797
|
+
AccordionConfig: `{
|
|
798
|
+
allowMultiple?: boolean;
|
|
799
|
+
expandFirst?: boolean;
|
|
800
|
+
}`
|
|
801
|
+
},
|
|
802
|
+
example: `<bi-accordion
|
|
803
|
+
[items]="menuItems"
|
|
804
|
+
[config]="{allowMultiple: false}"
|
|
805
|
+
(itemClick)="onItemSelect($event)">
|
|
806
|
+
</bi-accordion>`,
|
|
807
|
+
usagePattern: 'navigation',
|
|
808
|
+
tokens: ['--stroke-1', '--hover', '--violet-500']
|
|
809
|
+
},
|
|
810
|
+
|
|
811
|
+
// ======================
|
|
812
|
+
// FILTERS (2)
|
|
813
|
+
// ======================
|
|
814
|
+
GeoTagFilter: {
|
|
815
|
+
name: 'GeoTagFilter',
|
|
816
|
+
category: 'Filters',
|
|
817
|
+
selector: 'bi-geo-tag-filter',
|
|
818
|
+
description: 'Geographic tag filter with tabs',
|
|
819
|
+
inputs: {
|
|
820
|
+
tabs: { type: 'FilterTab[]', required: true, description: 'Filter tabs' },
|
|
821
|
+
options: { type: 'FilterOption[]', required: true, description: 'Filter options' }
|
|
822
|
+
},
|
|
823
|
+
outputs: {
|
|
824
|
+
filterChange: { type: 'EventEmitter<any>', description: 'Filter selection changed' }
|
|
825
|
+
},
|
|
826
|
+
interfaces: {
|
|
827
|
+
FilterTab: `{
|
|
828
|
+
label: string;
|
|
829
|
+
value: string;
|
|
830
|
+
}`,
|
|
831
|
+
FilterOption: `{
|
|
832
|
+
label: string;
|
|
833
|
+
value: string;
|
|
834
|
+
count?: number;
|
|
835
|
+
}`
|
|
836
|
+
},
|
|
837
|
+
example: `<bi-geo-tag-filter
|
|
838
|
+
[tabs]="regionTabs"
|
|
839
|
+
[options]="locationOptions"
|
|
840
|
+
(filterChange)="onFilterChange($event)">
|
|
841
|
+
</bi-geo-tag-filter>`,
|
|
842
|
+
usagePattern: 'data-display',
|
|
843
|
+
tokens: ['--violet-500', '--stroke-1', '--selected-low']
|
|
844
|
+
},
|
|
845
|
+
|
|
846
|
+
TableActionMenu: {
|
|
847
|
+
name: 'TableActionMenu',
|
|
848
|
+
category: 'Filters',
|
|
849
|
+
selector: 'bi-table-action-menu',
|
|
850
|
+
description: 'Action menu for table rows',
|
|
851
|
+
inputs: {
|
|
852
|
+
actions: { type: 'ActionMenuItem[]', required: true, description: 'Available actions' }
|
|
853
|
+
},
|
|
854
|
+
outputs: {
|
|
855
|
+
actionSelect: { type: 'EventEmitter<string>', description: 'Action selected' }
|
|
856
|
+
},
|
|
857
|
+
interfaces: {
|
|
858
|
+
ActionMenuItem: `{
|
|
859
|
+
label: string;
|
|
860
|
+
value: string;
|
|
861
|
+
icon?: string;
|
|
862
|
+
destructive?: boolean;
|
|
863
|
+
}`
|
|
864
|
+
},
|
|
865
|
+
example: `<bi-table-action-menu
|
|
866
|
+
[actions]="rowActions"
|
|
867
|
+
(actionSelect)="handleAction($event)">
|
|
868
|
+
</bi-table-action-menu>`,
|
|
869
|
+
usagePattern: 'data-display',
|
|
870
|
+
tokens: ['--stroke-1', '--hover', '--negative-high']
|
|
871
|
+
},
|
|
872
|
+
|
|
873
|
+
// ======================
|
|
874
|
+
// TABLES (3)
|
|
875
|
+
// ======================
|
|
95
876
|
ScrollableDataTable: {
|
|
96
877
|
name: 'ScrollableDataTable',
|
|
97
878
|
category: 'Tables',
|
|
@@ -135,39 +916,54 @@ tableColumns: TableColumn[] = [
|
|
|
135
916
|
tokens: ['--stroke-1', '--hover', '--text-400', '--body-medium-size']
|
|
136
917
|
},
|
|
137
918
|
|
|
138
|
-
|
|
139
|
-
name: '
|
|
140
|
-
category: '
|
|
141
|
-
selector: 'bi-
|
|
142
|
-
description: '
|
|
919
|
+
CollapsableTable: {
|
|
920
|
+
name: 'CollapsableTable',
|
|
921
|
+
category: 'Tables',
|
|
922
|
+
selector: 'bi-collapsable-table',
|
|
923
|
+
description: 'Budget table with collapsible rows and Excel export',
|
|
143
924
|
inputs: {
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
searchable: { type: 'boolean', default: true, description: 'Enable search functionality' }
|
|
925
|
+
data: { type: 'any', required: true, description: 'Hierarchical table data' },
|
|
926
|
+
columns: { type: 'string[]', required: true, description: 'Month column names' },
|
|
927
|
+
editable: { type: 'boolean', default: true, description: 'Enable inline editing' }
|
|
148
928
|
},
|
|
149
929
|
outputs: {
|
|
150
|
-
|
|
930
|
+
dataChange: { type: 'EventEmitter<any>', description: 'Data modified' },
|
|
931
|
+
export: { type: 'EventEmitter<void>', description: 'Export triggered' }
|
|
151
932
|
},
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
933
|
+
example: `<bi-collapsable-table
|
|
934
|
+
[data]="budgetData"
|
|
935
|
+
[columns]="monthColumns"
|
|
936
|
+
[editable]="true"
|
|
937
|
+
(dataChange)="onBudgetChange($event)">
|
|
938
|
+
</bi-collapsable-table>`,
|
|
939
|
+
usagePattern: 'data-display',
|
|
940
|
+
tokens: ['--stroke-1', '--violet-100', '--text-400']
|
|
941
|
+
},
|
|
942
|
+
|
|
943
|
+
CollapsableTableSmall: {
|
|
944
|
+
name: 'CollapsableTableSmall',
|
|
945
|
+
category: 'Tables',
|
|
946
|
+
selector: 'bi-collapsable-table-small',
|
|
947
|
+
description: 'Compact collapsible budget table',
|
|
948
|
+
inputs: {
|
|
949
|
+
data: { type: 'any', required: true, description: 'Table data' },
|
|
950
|
+
columns: { type: 'string[]', required: true, description: 'Column headers' },
|
|
951
|
+
compact: { type: 'boolean', default: true, description: 'Use compact layout' }
|
|
158
952
|
},
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
953
|
+
outputs: {
|
|
954
|
+
dataChange: { type: 'EventEmitter<any>', description: 'Data updated' }
|
|
955
|
+
},
|
|
956
|
+
example: `<bi-collapsable-table-small
|
|
957
|
+
[data]="compactBudgetData"
|
|
958
|
+
[columns]="quarters"
|
|
959
|
+
(dataChange)="onDataUpdate($event)">
|
|
960
|
+
</bi-collapsable-table-small>`,
|
|
961
|
+
usagePattern: 'data-display',
|
|
962
|
+
tokens: ['--stroke-1', '--violet-100', '--body-small-size']
|
|
167
963
|
}
|
|
168
964
|
};
|
|
169
965
|
|
|
170
|
-
//
|
|
966
|
+
// Component categories mapping
|
|
171
967
|
export const COMPONENT_CATEGORIES = {
|
|
172
968
|
'Buttons': ['CustomButton', 'ApproveButton', 'CancelButton', 'BackButton', 'ButtonImage'],
|
|
173
969
|
'Status': ['StatusPill', 'PillBadge', 'PillBox'],
|
|
@@ -183,64 +979,129 @@ export const COMPONENT_CATEGORIES = {
|
|
|
183
979
|
'Tables': ['ScrollableDataTable', 'CollapsableTable', 'CollapsableTableSmall']
|
|
184
980
|
};
|
|
185
981
|
|
|
982
|
+
// Usage patterns with recommendations
|
|
186
983
|
export const USAGE_PATTERNS = {
|
|
187
984
|
'primary-actions': {
|
|
188
985
|
name: 'Primary Actions',
|
|
189
|
-
description: 'Main call-to-action buttons',
|
|
190
|
-
components: ['CustomButton', 'ApproveButton'],
|
|
986
|
+
description: 'Main call-to-action buttons for forms and workflows',
|
|
987
|
+
components: ['CustomButton', 'ApproveButton', 'CancelButton', 'BackButton'],
|
|
191
988
|
example: `// Primary action button
|
|
192
989
|
<bi-custom-button
|
|
193
990
|
[label]="'Submit Form'"
|
|
194
991
|
[isActive]="formValid"
|
|
195
992
|
[isLoading]="isSubmitting"
|
|
196
993
|
(onClick)="submitForm()">
|
|
197
|
-
</bi-custom-button
|
|
994
|
+
</bi-custom-button>
|
|
995
|
+
|
|
996
|
+
// Approve with confirmation
|
|
997
|
+
<bi-approve-button
|
|
998
|
+
[label]="'Approve Request'"
|
|
999
|
+
[isActive]="canApprove"
|
|
1000
|
+
(onClick)="handleApproval()">
|
|
1001
|
+
</bi-approve-button>`
|
|
198
1002
|
},
|
|
199
1003
|
'status-indicators': {
|
|
200
1004
|
name: 'Status Indicators',
|
|
201
|
-
description: 'Show status with colored pills and
|
|
202
|
-
components: ['StatusPill', 'PillBadge'],
|
|
1005
|
+
description: 'Show status with colored pills, badges, and progress bars',
|
|
1006
|
+
components: ['StatusPill', 'PillBadge', 'PillBox', 'ProgressBar', 'SegmentedProgressBar'],
|
|
203
1007
|
example: `// Status pill with icon
|
|
204
1008
|
<bi-status-pill
|
|
205
1009
|
[statusText]="item.status"
|
|
206
1010
|
[statusImage]="getStatusIcon(item.status)"
|
|
207
1011
|
[statusColor]="getStatusColor(item.status)"
|
|
208
1012
|
[statusTextColor]="getStatusTextColor(item.status)">
|
|
209
|
-
</bi-status-pill
|
|
1013
|
+
</bi-status-pill>
|
|
1014
|
+
|
|
1015
|
+
// Count badge
|
|
1016
|
+
<bi-pill-badge [count]="notificationCount">
|
|
1017
|
+
</bi-pill-badge>`
|
|
210
1018
|
},
|
|
211
1019
|
'multi-step-forms': {
|
|
212
1020
|
name: 'Multi-Step Forms',
|
|
213
|
-
description: 'Guided workflows with step indicators',
|
|
1021
|
+
description: 'Guided workflows with step indicators and stage tracking',
|
|
214
1022
|
components: ['VerticalStepper', 'VerticalStages'],
|
|
215
1023
|
example: `// Vertical stepper for workflow
|
|
216
1024
|
<bi-vertical-stepper
|
|
217
1025
|
[steps]="formSteps"
|
|
218
1026
|
[activeStep]="currentStepIndex"
|
|
219
1027
|
(stepClick)="navigateToStep($event)">
|
|
220
|
-
</bi-vertical-stepper
|
|
1028
|
+
</bi-vertical-stepper>
|
|
1029
|
+
|
|
1030
|
+
// Stages indicator
|
|
1031
|
+
<bi-vertical-stages
|
|
1032
|
+
[stages]="processStages"
|
|
1033
|
+
[currentStage]="activeStage">
|
|
1034
|
+
</bi-vertical-stages>`
|
|
221
1035
|
},
|
|
222
1036
|
'data-display': {
|
|
223
1037
|
name: 'Data Display',
|
|
224
|
-
description: 'Tables and
|
|
225
|
-
components: ['ScrollableDataTable', 'CollapsableTable'],
|
|
1038
|
+
description: 'Tables and cards for displaying structured data',
|
|
1039
|
+
components: ['ScrollableDataTable', 'CollapsableTable', 'CollapsableTableSmall', 'HorizontalCard'],
|
|
226
1040
|
example: `// Data table with sorting
|
|
227
1041
|
<bi-scrollable-data-table
|
|
228
1042
|
[columns]="columns"
|
|
229
1043
|
[data]="rows"
|
|
230
1044
|
[enableSort]="true"
|
|
231
1045
|
(rowClick)="viewDetails($event)">
|
|
232
|
-
</bi-scrollable-data-table
|
|
1046
|
+
</bi-scrollable-data-table>
|
|
1047
|
+
|
|
1048
|
+
// Collapsible budget table
|
|
1049
|
+
<bi-collapsable-table
|
|
1050
|
+
[data]="budgetData"
|
|
1051
|
+
[columns]="months"
|
|
1052
|
+
[editable]="true"
|
|
1053
|
+
(dataChange)="onBudgetUpdate($event)">
|
|
1054
|
+
</bi-collapsable-table>`
|
|
233
1055
|
},
|
|
234
1056
|
'form-inputs': {
|
|
235
1057
|
name: 'Form Inputs',
|
|
236
|
-
description: 'Input controls for forms',
|
|
237
|
-
components: ['SingleSelectDropdown', 'MultiSelectDropdown', 'SearchBar'],
|
|
1058
|
+
description: 'Input controls for forms and data entry',
|
|
1059
|
+
components: ['SingleSelectDropdown', 'MultiSelectDropdown', 'SearchBar', 'Checklist', 'UserSelection'],
|
|
238
1060
|
example: `// Dropdown with search
|
|
239
1061
|
<bi-single-select-dropdown
|
|
240
1062
|
[options]="options"
|
|
241
1063
|
[selectedValue]="value"
|
|
1064
|
+
[searchable]="true"
|
|
242
1065
|
(selectionChange)="onValueChange($event)">
|
|
243
|
-
</bi-single-select-dropdown
|
|
1066
|
+
</bi-single-select-dropdown>
|
|
1067
|
+
|
|
1068
|
+
// Multi-select with chips
|
|
1069
|
+
<bi-multi-select-dropdown
|
|
1070
|
+
[options]="tags"
|
|
1071
|
+
[selectedValues]="selectedTags"
|
|
1072
|
+
(selectionChange)="onTagsUpdate($event)">
|
|
1073
|
+
</bi-multi-select-dropdown>`
|
|
1074
|
+
},
|
|
1075
|
+
'navigation': {
|
|
1076
|
+
name: 'Navigation',
|
|
1077
|
+
description: 'Navigation elements like breadcrumbs, tabs, and menus',
|
|
1078
|
+
components: ['CustomBreadcrumb', 'HeaderTabs', 'ExpandableMenuDropdown', 'Accordion'],
|
|
1079
|
+
example: `// Breadcrumb navigation
|
|
1080
|
+
<bi-custom-breadcrumb
|
|
1081
|
+
[items]="['Home', 'Products', 'Details']"
|
|
1082
|
+
(itemClick)="navigateTo($event)">
|
|
1083
|
+
</bi-custom-breadcrumb>
|
|
1084
|
+
|
|
1085
|
+
// Tab navigation
|
|
1086
|
+
<bi-header-tabs
|
|
1087
|
+
[tabs]="tabs"
|
|
1088
|
+
[activeTab]="currentTab"
|
|
1089
|
+
(tabChange)="onTabChange($event)">
|
|
1090
|
+
</bi-header-tabs>`
|
|
1091
|
+
},
|
|
1092
|
+
'content': {
|
|
1093
|
+
name: 'Content Display',
|
|
1094
|
+
description: 'Text, tooltips, and informational components',
|
|
1095
|
+
components: ['TitleHeaderSubtext', 'HelpText', 'CustomTooltip', 'InfoActionCard', 'ConfirmWarning'],
|
|
1096
|
+
example: `// Page header
|
|
1097
|
+
<bi-title-header-subtext
|
|
1098
|
+
[title]="'Dashboard'"
|
|
1099
|
+
[subtitle]="'Overview of your projects'">
|
|
1100
|
+
</bi-title-header-subtext>
|
|
1101
|
+
|
|
1102
|
+
// Tooltip
|
|
1103
|
+
<bi-custom-tooltip [text]="'Click to edit'">
|
|
1104
|
+
<button>Edit</button>
|
|
1105
|
+
</bi-custom-tooltip>`
|
|
244
1106
|
}
|
|
245
1107
|
};
|
|
246
|
-
|
package/package.json
CHANGED