cats-ui-lib 2.0.5 → 2.0.6
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 +111 -85
- package/assets/images/check-disabled.svg +3 -0
- package/assets/images/chevron-down.svg +3 -1
- package/assets/images/chevron-up.svg +3 -1
- package/assets/images/expand.svg +4 -0
- package/assets/images/minimize-expand.svg +4 -0
- package/fesm2022/cats-ui-lib.mjs +281 -43
- package/fesm2022/cats-ui-lib.mjs.map +1 -1
- package/index.d.ts +55 -2
- package/package.json +1 -1
- package/styles/_utilities.scss +76 -4
package/README.md
CHANGED
|
@@ -32,18 +32,6 @@ Add the following inside the `build > options` section of your `angular.json`:
|
|
|
32
32
|
"node_modules/cats-ui-lib/styles/_index.scss"
|
|
33
33
|
]
|
|
34
34
|
```
|
|
35
|
-
|
|
36
|
-
### 2. Import the Module
|
|
37
|
-
|
|
38
|
-
```typescript
|
|
39
|
-
import { CatsUiModule } from 'cats-ui-lib';
|
|
40
|
-
|
|
41
|
-
@NgModule({
|
|
42
|
-
imports: [CatsUiModule],
|
|
43
|
-
})
|
|
44
|
-
export class AppModule {}
|
|
45
|
-
```
|
|
46
|
-
|
|
47
35
|
---
|
|
48
36
|
|
|
49
37
|
## 🧩 Components
|
|
@@ -425,76 +413,6 @@ onToggled(data: any) {
|
|
|
425
413
|
|
|
426
414
|
---
|
|
427
415
|
|
|
428
|
-
### `TabComponent` — `<cats-ui-tab>`
|
|
429
|
-
|
|
430
|
-
Supports `horizontal` (default) and `vertical` orientations with optional disabled tabs.
|
|
431
|
-
|
|
432
|
-
**Template:**
|
|
433
|
-
```html
|
|
434
|
-
<cats-ui-tab
|
|
435
|
-
[activeTab]="0"
|
|
436
|
-
orientation="vertical"
|
|
437
|
-
[disabledTabs]="[1]"
|
|
438
|
-
(selectTab)="onTabSelected($event)">
|
|
439
|
-
|
|
440
|
-
<cats-ui-tab-item>
|
|
441
|
-
<ng-template tabHeading>Home</ng-template>
|
|
442
|
-
<ng-template tabContent>Home content</ng-template>
|
|
443
|
-
</cats-ui-tab-item>
|
|
444
|
-
|
|
445
|
-
<cats-ui-tab-item>
|
|
446
|
-
<ng-template tabHeading>Profile</ng-template>
|
|
447
|
-
<ng-template tabContent>Profile content</ng-template>
|
|
448
|
-
</cats-ui-tab-item>
|
|
449
|
-
|
|
450
|
-
</cats-ui-tab>
|
|
451
|
-
```
|
|
452
|
-
|
|
453
|
-
**Dynamic tabs with close button:**
|
|
454
|
-
```html
|
|
455
|
-
<cats-ui-tab
|
|
456
|
-
[activeTab]="activeTabIndex"
|
|
457
|
-
[disabledTabs]="disabledTabs"
|
|
458
|
-
(selectTab)="onTabSelected($event)">
|
|
459
|
-
|
|
460
|
-
@for (tab of tabs; track $index) {
|
|
461
|
-
<cats-ui-tab-item>
|
|
462
|
-
<ng-template tabHeading>
|
|
463
|
-
{{ tab.heading }}
|
|
464
|
-
<span class="btn-close ms-3" (click)="closeTab($index)">x</span>
|
|
465
|
-
</ng-template>
|
|
466
|
-
<ng-template tabContent>{{ tab.content }}</ng-template>
|
|
467
|
-
</cats-ui-tab-item>
|
|
468
|
-
}
|
|
469
|
-
|
|
470
|
-
</cats-ui-tab>
|
|
471
|
-
```
|
|
472
|
-
|
|
473
|
-
**TypeScript:**
|
|
474
|
-
```typescript
|
|
475
|
-
tabs = [
|
|
476
|
-
{ heading: 'Home', content: 'Home content' },
|
|
477
|
-
{ heading: 'Profile', content: 'Profile content' },
|
|
478
|
-
];
|
|
479
|
-
activeTabIndex = 0;
|
|
480
|
-
disabledTabs: number[] = [1];
|
|
481
|
-
|
|
482
|
-
onTabSelected(index: number) {
|
|
483
|
-
this.activeTabIndex = index;
|
|
484
|
-
}
|
|
485
|
-
|
|
486
|
-
closeTab(index: number) {
|
|
487
|
-
if (this.tabs.length > 1) {
|
|
488
|
-
this.tabs.splice(index, 1);
|
|
489
|
-
if (this.activeTabIndex >= this.tabs.length) {
|
|
490
|
-
this.activeTabIndex = this.tabs.length - 1;
|
|
491
|
-
}
|
|
492
|
-
}
|
|
493
|
-
}
|
|
494
|
-
```
|
|
495
|
-
|
|
496
|
-
---
|
|
497
|
-
|
|
498
416
|
### `TabsetComponent` — `<cats-ui-tabset>`
|
|
499
417
|
|
|
500
418
|
An advanced tabset with add/close tab support, icons, badge counts, and a home tab.
|
|
@@ -503,7 +421,7 @@ An advanced tabset with add/close tab support, icons, badge counts, and a home t
|
|
|
503
421
|
```html
|
|
504
422
|
<cats-ui-tabset
|
|
505
423
|
[tabs]="tab1"
|
|
506
|
-
[
|
|
424
|
+
[activeTab]="activeTab"
|
|
507
425
|
[tabConfig]="tabConfig"
|
|
508
426
|
(tabAdded)="onTabAdded($event)"
|
|
509
427
|
(tabClosed)="onTabClosed($event)"
|
|
@@ -537,7 +455,7 @@ tab1 = [
|
|
|
537
455
|
},
|
|
538
456
|
];
|
|
539
457
|
|
|
540
|
-
activeTab:
|
|
458
|
+
activeTab: 1;
|
|
541
459
|
tab = 6; // counter for dynamic tab IDs
|
|
542
460
|
|
|
543
461
|
onTabAdded(ev: any) {
|
|
@@ -570,6 +488,113 @@ activeTabChange(dt: any) {
|
|
|
570
488
|
|
|
571
489
|
---
|
|
572
490
|
|
|
491
|
+
### `WizardComponent` — `<cats-ui-wizard>`
|
|
492
|
+
|
|
493
|
+
A multi-step wizard modal with optional progress bar, step badge, and expandable layout. Steps are defined via `ng-template` using the `wizardStep` directive, and wizard state is managed through an injected `WizardService`.
|
|
494
|
+
|
|
495
|
+
**Template:**
|
|
496
|
+
```html
|
|
497
|
+
<!-- Trigger button -->
|
|
498
|
+
<button (click)="openUserWizard()">Open User Wizard</button>
|
|
499
|
+
|
|
500
|
+
@if (wizard.isOpen('classification')()) {
|
|
501
|
+
<cats-ui-wizard
|
|
502
|
+
wizardId="classification"
|
|
503
|
+
title="Data Classification"
|
|
504
|
+
[showProgressBar]="true"
|
|
505
|
+
[showStepBadge]="true"
|
|
506
|
+
[expandable]="true"
|
|
507
|
+
(closed)="closeModal()">
|
|
508
|
+
|
|
509
|
+
<ng-template wizardStep>
|
|
510
|
+
<app-step-one></app-step-one>
|
|
511
|
+
</ng-template>
|
|
512
|
+
|
|
513
|
+
<ng-template wizardStep>
|
|
514
|
+
<app-step-two></app-step-two>
|
|
515
|
+
</ng-template>
|
|
516
|
+
|
|
517
|
+
<ng-template wizardStep>
|
|
518
|
+
<app-step-three></app-step-three>
|
|
519
|
+
</ng-template>
|
|
520
|
+
|
|
521
|
+
<ng-template wizardStep>
|
|
522
|
+
<app-step-four></app-step-four>
|
|
523
|
+
</ng-template>
|
|
524
|
+
|
|
525
|
+
</cats-ui-wizard>
|
|
526
|
+
}
|
|
527
|
+
```
|
|
528
|
+
|
|
529
|
+
**TypeScript:**
|
|
530
|
+
```typescript
|
|
531
|
+
import { WizardService } from 'cats-ui-lib';
|
|
532
|
+
|
|
533
|
+
export class ParentComponent {
|
|
534
|
+
constructor(public wizard: WizardService) {}
|
|
535
|
+
|
|
536
|
+
openUserWizard() {
|
|
537
|
+
const wizardId = 'classification';
|
|
538
|
+
|
|
539
|
+
// Define the step titles and initial states
|
|
540
|
+
this.wizard.stepConfig.update((config: any) => {
|
|
541
|
+
config[wizardId] = [
|
|
542
|
+
{ title: 'User Info', state: 'active' },
|
|
543
|
+
{ title: 'Details', state: 'normal' },
|
|
544
|
+
{ title: 'Review', state: 'normal' },
|
|
545
|
+
{ title: 'Confirm', state: 'normal' },
|
|
546
|
+
];
|
|
547
|
+
return config;
|
|
548
|
+
});
|
|
549
|
+
|
|
550
|
+
this.wizard.open(wizardId, { steps: [] });
|
|
551
|
+
}
|
|
552
|
+
|
|
553
|
+
closeModal() {
|
|
554
|
+
this.wizard.close('classification');
|
|
555
|
+
}
|
|
556
|
+
}
|
|
557
|
+
```
|
|
558
|
+
|
|
559
|
+
**Component inputs:**
|
|
560
|
+
|
|
561
|
+
| Input | Type | Description |
|
|
562
|
+
|-------------------|-----------|-------------------------------------------------------|
|
|
563
|
+
| `wizardId` | `string` | Unique identifier matching the ID used in the service |
|
|
564
|
+
| `title` | `string` | Title displayed in the wizard header |
|
|
565
|
+
| `showProgressBar` | `boolean` | Show a progress bar across the top of the wizard |
|
|
566
|
+
| `showStepBadge` | `boolean` | Show a step counter badge (e.g. "Step 2 of 4") |
|
|
567
|
+
| `expandable` | `boolean` | Allow the wizard to be expanded to full screen |
|
|
568
|
+
|
|
569
|
+
**Component outputs:**
|
|
570
|
+
|
|
571
|
+
| Output | Type | Description |
|
|
572
|
+
|----------|-------------------------|------------------------------------------|
|
|
573
|
+
| `closed` | `EventEmitter<void>` | Emitted when the wizard is closed |
|
|
574
|
+
|
|
575
|
+
**`WizardService` API:**
|
|
576
|
+
|
|
577
|
+
| Method / Property | Signature | Description |
|
|
578
|
+
|--------------------|-------------------------------------------------|--------------------------------------------------|
|
|
579
|
+
| `open()` | `open(id: string, options: { steps: [] }): void`| Opens the wizard with the given ID |
|
|
580
|
+
| `close()` | `close(id: string): void` | Closes the wizard with the given ID |
|
|
581
|
+
| `isOpen()` | `isOpen(id: string): Signal<boolean>` | Returns a signal indicating if the wizard is open|
|
|
582
|
+
| `stepConfig` | `WritableSignal<Record<string, StepConfig[]>>` | Signal holding step definitions per wizard ID |
|
|
583
|
+
|
|
584
|
+
**Step config object fields:**
|
|
585
|
+
|
|
586
|
+
| Field | Type | Description |
|
|
587
|
+
|---------|----------|-------------------------------------------------------|
|
|
588
|
+
| `title` | `string` | Display label for the step in the progress bar |
|
|
589
|
+
| `state` | `string` | Initial state: `'active'` (current) or `'normal'` |
|
|
590
|
+
|
|
591
|
+
**Notes:**
|
|
592
|
+
- Each `<ng-template wizardStep>` maps to a step in the order it appears.
|
|
593
|
+
- The number of `<ng-template wizardStep>` blocks should match the number of entries in `stepConfig`.
|
|
594
|
+
- The wizard uses Angular Signals internally; use `wizard.isOpen('id')()` (note the call `()`) to read the signal value in templates.
|
|
595
|
+
|
|
596
|
+
---
|
|
597
|
+
|
|
573
598
|
### `CustomDatePickerComponent` — `<cats-ui-custom-date-picker>`
|
|
574
599
|
|
|
575
600
|
Supports `single`, `range`, and `dual` modes with optional time selection.
|
|
@@ -749,7 +774,8 @@ cats-ui-lib/
|
|
|
749
774
|
├── tabs/
|
|
750
775
|
├── tabset/
|
|
751
776
|
├── timestamp-filter/
|
|
752
|
-
|
|
777
|
+
├── toogle-button/
|
|
778
|
+
└── wizard/
|
|
753
779
|
```
|
|
754
780
|
|
|
755
781
|
---
|
|
@@ -1 +1,3 @@
|
|
|
1
|
-
<svg
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M6 9L12 15L18 9" stroke="#040D17" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
</svg>
|
|
@@ -1 +1,3 @@
|
|
|
1
|
-
<svg
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M18 15L12 9L6 15" stroke="#040D17" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M0 4C0 1.79086 1.79086 0 4 0H24C26.2091 0 28 1.79086 28 4V24C28 26.2091 26.2091 28 24 28H4C1.79086 28 0 26.2091 0 24V4Z" fill="white"/>
|
|
3
|
+
<path d="M20.2222 15.5556V17.7333C20.2222 18.6045 20.2222 19.0401 20.0527 19.3729C19.9035 19.6656 19.6656 19.9035 19.3729 20.0527C19.0401 20.2222 18.6045 20.2222 17.7333 20.2222H15.5556M12.4444 7.77778H10.2667C9.39547 7.77778 8.95988 7.77778 8.62713 7.94732C8.33443 8.09646 8.09646 8.33443 7.94732 8.62713C7.77778 8.95988 7.77778 9.39547 7.77778 10.2667V12.4444M16.3333 11.6667L21 7M21 7H16.3333M21 7V11.6667M11.6667 16.3333L7 21M7 21H11.6667M7 21L7 16.3333" stroke="#434A51" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M0 4C0 1.79086 1.79086 0 4 0H24C26.2091 0 28 1.79086 28 4V24C28 26.2091 26.2091 28 24 28H4C1.79086 28 0 26.2091 0 24V4Z" fill="white"/>
|
|
3
|
+
<path d="M20.2222 15.5556V17.7333C20.2222 18.6045 20.2222 19.0401 20.0527 19.3729C19.9035 19.6656 19.6656 19.9035 19.3729 20.0527C19.0401 20.2222 18.6045 20.2222 17.7333 20.2222H15.5556M12.4444 7.77778H10.2667C9.39547 7.77778 8.95988 7.77778 8.62713 7.94732C8.33443 8.09646 8.09646 8.33443 7.94732 8.62713C7.77778 8.95988 7.77778 9.39547 7.77778 10.2667V12.4444M21 7L16.3333 11.6667M16.3333 11.6667L21 11.6667M16.3333 11.6667V7M7 21L11.6667 16.3333M11.6667 16.3333H7M11.6667 16.3333L11.6667 21" stroke="#434A51" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
</svg>
|