cats-ui-lib 2.0.15 → 2.0.16

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.
Files changed (5) hide show
  1. package/README.md +179 -223
  2. package/fesm2022/cats-ui-lib.mjs +24 -4
  3. package/fesm2022/cats-ui-lib.mjs.map +1 -1
  4. package/index.d.ts +39 -3
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -25,13 +25,14 @@ Add the following inside the `build > options` section of your `angular.json`:
25
25
  "assets": [
26
26
  {
27
27
  "glob": "**/*",
28
- "input": "node_modules/cats-ui/assets"
28
+ "input": "node_modules/cats-ui-lib/assets"
29
29
  }
30
30
  ],
31
31
  "styles": [
32
32
  "node_modules/cats-ui-lib/styles/_index.scss"
33
33
  ]
34
34
  ```
35
+
35
36
  ---
36
37
 
37
38
  ## 🧩 Components
@@ -43,53 +44,44 @@ Add the following inside the `build > options` section of your `angular.json`:
43
44
  Supports types: `text` · `number` · `email` · `password`
44
45
 
45
46
  **Template:**
47
+
46
48
  ```html
47
- <cats-ui-input
48
- [inputConfig]="inputConfig"
49
- [(ngModel)]="name"
50
- required>
51
- </cats-ui-input>
49
+ <cats-ui-input [inputConfig]="inputConfig" [(ngModel)]="name" required> </cats-ui-input>
52
50
 
53
51
  <!-- Disabled state -->
54
- <cats-ui-input
55
- [disabled]="true"
56
- [inputConfig]="inputConfig"
57
- [(ngModel)]="name">
58
- </cats-ui-input>
52
+ <cats-ui-input [disabled]="true" [inputConfig]="inputConfig" [(ngModel)]="name"> </cats-ui-input>
59
53
  ```
60
54
 
61
55
  **TypeScript:**
56
+
62
57
  ```typescript
63
- import { InputConfig } from 'cats-ui-lib';
58
+ import { InputConfig } from "cats-ui-lib";
64
59
 
65
60
  inputConfig: InputConfig = {
66
- type: 'text',
67
- placeholder: 'Enter value',
61
+ type: "text",
62
+ placeholder: "Enter value",
68
63
  };
69
64
  ```
70
65
 
71
66
  **`InputConfig` options:**
72
67
 
73
- | Property | Type | Description |
74
- |---------------|----------|--------------------------------------------------|
75
- | `type` | `string` | Input type: `text`, `email`, `password`, `number`|
76
- | `placeholder` | `string` | Placeholder text |
68
+ | Property | Type | Description |
69
+ | ------------- | -------- | ------------------------------------------------- |
70
+ | `type` | `string` | Input type: `text`, `email`, `password`, `number` |
71
+ | `placeholder` | `string` | Placeholder text |
77
72
 
78
73
  ---
79
74
 
80
75
  ### `SingleSelectComponent` — `<cats-ui-single-select>`
81
76
 
82
77
  **Template:**
78
+
83
79
  ```html
84
- <cats-ui-single-select
85
- [optionList]="options"
86
- [singleSelectConfig]="singleConfig"
87
- [parentNativeElement]="'parent'"
88
- (onSelection)="onSelection($event)">
89
- </cats-ui-single-select>
80
+ <cats-ui-single-select [optionList]="options" [singleSelectConfig]="singleConfig" [parentNativeElement]="'parent'" (onSelection)="onSelection($event)"> </cats-ui-single-select>
90
81
  ```
91
82
 
92
83
  **TypeScript:**
84
+
93
85
  ```typescript
94
86
  import { SingleSelectConfig } from 'cats-ui-lib';
95
87
 
@@ -112,36 +104,34 @@ onSelection(dt: any) {
112
104
 
113
105
  **`SingleSelectConfig` options:**
114
106
 
115
- | Property | Type | Description |
116
- |-----------------|----------|------------------------------------|
117
- | `idField` | `string` | Key for option ID |
118
- | `textField` | `string` | Key for display label |
119
- | `disabledField` | `string` | Key to mark option as disabled |
120
- | `placeholder` | `string` | Placeholder text |
107
+ | Property | Type | Description |
108
+ | --------------- | -------- | ------------------------------ |
109
+ | `idField` | `string` | Key for option ID |
110
+ | `textField` | `string` | Key for display label |
111
+ | `disabledField` | `string` | Key to mark option as disabled |
112
+ | `placeholder` | `string` | Placeholder text |
121
113
 
122
114
  ---
123
115
 
124
116
  ### `MultiSelectComponent` — `<cats-ui-multi-select>`
125
117
 
126
118
  **Template:**
119
+
127
120
  ```html
128
- <cats-ui-multi-select
129
- [optionList]="options"
130
- [multiSelectConfig]="multiSelectConfig"
131
- (onSelection)="onSelection($event)">
132
- </cats-ui-multi-select>
121
+ <cats-ui-multi-select [optionList]="options" [multiSelectConfig]="multiSelectConfig" (onSelection)="onSelection($event)"> </cats-ui-multi-select>
133
122
  ```
134
123
 
135
124
  **TypeScript:**
125
+
136
126
  ```typescript
137
- import { MultiSelectConfig } from 'cats-ui-lib';
127
+ import { MultiSelectConfig } from "cats-ui-lib";
138
128
 
139
129
  multiSelectConfig: MultiSelectConfig = {
140
- idField: 'id',
141
- textField: 'name',
142
- disabledField: 'disable',
143
- placeholder: 'Select Option',
144
- prefixLabel: '',
130
+ idField: "id",
131
+ textField: "name",
132
+ disabledField: "disable",
133
+ placeholder: "Select Option",
134
+ prefixLabel: "",
145
135
  enableSearch: true,
146
136
  chipLimit: 2,
147
137
  selectAll: true,
@@ -151,40 +141,38 @@ multiSelectConfig: MultiSelectConfig = {
151
141
 
152
142
  **`MultiSelectConfig` options:**
153
143
 
154
- | Property | Type | Description |
155
- |-----------------|-----------|----------------------------------------------|
156
- | `idField` | `string` | Key for option ID |
157
- | `textField` | `string` | Key for display label |
158
- | `disabledField` | `string` | Key to mark option as disabled |
159
- | `placeholder` | `string` | Placeholder text |
160
- | `prefixLabel` | `string` | Label prefix shown before selected chips |
161
- | `enableSearch` | `boolean` | Show search input inside dropdown |
162
- | `chipLimit` | `number` | Max chips to display before `+N more` |
163
- | `selectAll` | `boolean` | Show "Select All" option |
164
- | `required` | `boolean` | Mark field as required |
144
+ | Property | Type | Description |
145
+ | --------------- | --------- | ---------------------------------------- |
146
+ | `idField` | `string` | Key for option ID |
147
+ | `textField` | `string` | Key for display label |
148
+ | `disabledField` | `string` | Key to mark option as disabled |
149
+ | `placeholder` | `string` | Placeholder text |
150
+ | `prefixLabel` | `string` | Label prefix shown before selected chips |
151
+ | `enableSearch` | `boolean` | Show search input inside dropdown |
152
+ | `chipLimit` | `number` | Max chips to display before `+N more` |
153
+ | `selectAll` | `boolean` | Show "Select All" option |
154
+ | `required` | `boolean` | Mark field as required |
165
155
 
166
156
  ---
167
157
 
168
158
  ### `AutoComplete SingleSelect` — `<cats-ui-input-single-select>`
169
159
 
170
160
  **Template:**
161
+
171
162
  ```html
172
- <cats-ui-input-single-select
173
- [optionsList]="options"
174
- [autoSingleSelectConfig]="autoSingleSelectConfig"
175
- (onItemSelection)="onSelection($event)">
176
- </cats-ui-input-single-select>
163
+ <cats-ui-input-single-select [optionsList]="options" [autoSingleSelectConfig]="autoSingleSelectConfig" (onItemSelection)="onSelection($event)"> </cats-ui-input-single-select>
177
164
  ```
178
165
 
179
166
  **TypeScript:**
167
+
180
168
  ```typescript
181
- import { AutoCompleteSingleSelectConfig } from 'cats-ui-lib';
169
+ import { AutoCompleteSingleSelectConfig } from "cats-ui-lib";
182
170
 
183
171
  autoSingleSelectConfig: AutoCompleteSingleSelectConfig = {
184
- idField: 'id',
185
- textField: 'name',
186
- disabledField: '',
187
- placeholder: 'Enter or select',
172
+ idField: "id",
173
+ textField: "name",
174
+ disabledField: "",
175
+ placeholder: "Enter or select",
188
176
  required: false,
189
177
  customInput: true,
190
178
  };
@@ -193,7 +181,7 @@ autoSingleSelectConfig: AutoCompleteSingleSelectConfig = {
193
181
  **`AutoCompleteSingleSelectConfig` options:**
194
182
 
195
183
  | Property | Type | Description |
196
- |-----------------|-----------|------------------------------------------|
184
+ | --------------- | --------- | ---------------------------------------- |
197
185
  | `idField` | `string` | Key for option ID |
198
186
  | `textField` | `string` | Key for display label |
199
187
  | `disabledField` | `string` | Key to mark option as disabled |
@@ -206,27 +194,25 @@ autoSingleSelectConfig: AutoCompleteSingleSelectConfig = {
206
194
  ### `AutoComplete MultiSelect` — `<cats-ui-input-multi-select>`
207
195
 
208
196
  **Template:**
197
+
209
198
  ```html
210
- <cats-ui-input-multi-select
211
- [optionsList]="options"
212
- [autoCompleteMultiSelectConfig]="autoMultiSelectConfig"
213
- (onItemSelection)="onSelection($event)">
214
- </cats-ui-input-multi-select>
199
+ <cats-ui-input-multi-select [optionsList]="options" [autoCompleteMultiSelectConfig]="autoMultiSelectConfig" (onItemSelection)="onSelection($event)"> </cats-ui-input-multi-select>
215
200
  ```
216
201
 
217
202
  **TypeScript:**
203
+
218
204
  ```typescript
219
- import { AutoCompleteMultiSelectConfig } from 'cats-ui-lib';
205
+ import { AutoCompleteMultiSelectConfig } from "cats-ui-lib";
220
206
 
221
207
  autoMultiSelectConfig: AutoCompleteMultiSelectConfig = {
222
- idField: 'id',
223
- textField: 'name',
224
- disabledField: 'disable',
225
- placeholder: 'Type to Search',
208
+ idField: "id",
209
+ textField: "name",
210
+ disabledField: "disable",
211
+ placeholder: "Type to Search",
226
212
  selectAll: false,
227
213
  chipLimit: 2,
228
214
  customInput: false,
229
- infoText: 'Select any 8 KPIs',
215
+ infoText: "Select any 8 KPIs",
230
216
  selectionLimit: 5,
231
217
  };
232
218
  ```
@@ -234,7 +220,7 @@ autoMultiSelectConfig: AutoCompleteMultiSelectConfig = {
234
220
  **`AutoCompleteMultiSelectConfig` options:**
235
221
 
236
222
  | Property | Type | Description |
237
- |------------------|-----------|------------------------------------------|
223
+ | ---------------- | --------- | ---------------------------------------- |
238
224
  | `idField` | `string` | Key for option ID |
239
225
  | `textField` | `string` | Key for display label |
240
226
  | `disabledField` | `string` | Key to mark option as disabled |
@@ -250,14 +236,13 @@ autoMultiSelectConfig: AutoCompleteMultiSelectConfig = {
250
236
  ### `SearchBoxComponent` — `<cats-ui-search-box>`
251
237
 
252
238
  **Template:**
239
+
253
240
  ```html
254
- <cats-ui-search-box
255
- [searchConfig]="searchConfig"
256
- (searchParamValue)="searchParamValue($event)">
257
- </cats-ui-search-box>
241
+ <cats-ui-search-box [searchConfig]="searchConfig" (searchParamValue)="searchParamValue($event)"> </cats-ui-search-box>
258
242
  ```
259
243
 
260
244
  **TypeScript:**
245
+
261
246
  ```typescript
262
247
  import { SearchConfig } from 'cats-ui-lib';
263
248
 
@@ -276,6 +261,7 @@ searchParamValue(data: any) {
276
261
  ### `AccordionComponent` — `<cats-ui-accordion>`
277
262
 
278
263
  **Template:**
264
+
279
265
  ```html
280
266
  <cats-ui-accordion>
281
267
  <cats-ui-accordion-item title="Panel 1" [index]="0">
@@ -297,15 +283,13 @@ searchParamValue(data: any) {
297
283
  ### `RadioButtonComponent` — `<cats-ui-radio-button>`
298
284
 
299
285
  **Template:**
286
+
300
287
  ```html
301
- <cats-ui-radio-button
302
- [config]="radioConfig"
303
- [optionList]="options"
304
- (selectionChange)="onRadio($event)">
305
- </cats-ui-radio-button>
288
+ <cats-ui-radio-button [config]="radioConfig" [optionList]="options" (selectionChange)="onRadio($event)"> </cats-ui-radio-button>
306
289
  ```
307
290
 
308
291
  **TypeScript:**
292
+
309
293
  ```typescript
310
294
  import { RadioButtonConfig } from 'cats-ui-lib';
311
295
 
@@ -328,27 +312,25 @@ onRadio(data: any) {
328
312
 
329
313
  **`RadioButtonConfig` options:**
330
314
 
331
- | Property | Type | Description |
332
- |---------------|----------|------------------------------------|
333
- | `valueField` | `string` | Key for option value |
334
- | `textField` | `string` | Key for display label |
335
- | `name` | `string` | HTML radio group name |
336
- | `disabled` | `string` | Key to mark an option as disabled |
315
+ | Property | Type | Description |
316
+ | ------------ | -------- | --------------------------------- |
317
+ | `valueField` | `string` | Key for option value |
318
+ | `textField` | `string` | Key for display label |
319
+ | `name` | `string` | HTML radio group name |
320
+ | `disabled` | `string` | Key to mark an option as disabled |
337
321
 
338
322
  ---
339
323
 
340
324
  ### `CheckboxComponent` — `<cats-ui-checkbox-button>`
341
325
 
342
326
  **Template:**
327
+
343
328
  ```html
344
- <cats-ui-checkbox-button
345
- [checkBoxConfig]="checkBoxConfig"
346
- [optionList]="taskOptions"
347
- (onCheckBoxSelection)="checkBox($event)">
348
- </cats-ui-checkbox-button>
329
+ <cats-ui-checkbox-button [checkBoxConfig]="checkBoxConfig" [optionList]="taskOptions" (onCheckBoxSelection)="checkBox($event)"> </cats-ui-checkbox-button>
349
330
  ```
350
331
 
351
332
  **TypeScript:**
333
+
352
334
  ```typescript
353
335
  import { CheckBoxConfig } from 'cats-ui-lib';
354
336
 
@@ -372,7 +354,7 @@ checkBox(data: any) {
372
354
  **`CheckBoxConfig` options:**
373
355
 
374
356
  | Property | Type | Description |
375
- |-----------------|----------|-----------------------------------|
357
+ | --------------- | -------- | --------------------------------- |
376
358
  | `idField` | `string` | Key for option ID |
377
359
  | `textField` | `string` | Key for display label |
378
360
  | `name` | `string` | HTML checkbox group name |
@@ -383,14 +365,13 @@ checkBox(data: any) {
383
365
  ### `ToggleComponent` — `<cats-ui-toogle-button>`
384
366
 
385
367
  **Template:**
368
+
386
369
  ```html
387
- <cats-ui-toogle-button
388
- [toggleConfig]="toggleConfig"
389
- (onToggled)="onToggled($event)">
390
- </cats-ui-toogle-button>
370
+ <cats-ui-toogle-button [toggleConfig]="toggleConfig" (onToggled)="onToggled($event)"> </cats-ui-toogle-button>
391
371
  ```
392
372
 
393
373
  **TypeScript:**
374
+
394
375
  ```typescript
395
376
  import { ToggleConfig } from 'cats-ui-lib';
396
377
 
@@ -406,10 +387,10 @@ onToggled(data: any) {
406
387
 
407
388
  **`ToggleConfig` options:**
408
389
 
409
- | Property | Type | Description |
410
- |------------|-----------|----------------------------------|
411
- | `disabled` | `boolean` | Disable the toggle |
412
- | `checked` | `boolean` | Initial checked state |
390
+ | Property | Type | Description |
391
+ | ---------- | --------- | --------------------- |
392
+ | `disabled` | `boolean` | Disable the toggle |
393
+ | `checked` | `boolean` | Initial checked state |
413
394
 
414
395
  ---
415
396
 
@@ -418,24 +399,18 @@ onToggled(data: any) {
418
399
  An advanced tabset with add/close tab support, icons, badge counts, and a home tab.
419
400
 
420
401
  **Template:**
421
- ```html
422
- <cats-ui-tabset
423
- [tabs]="tab1"
424
- [activeTab]="activeTab"
425
- [tabConfig]="tabConfig"
426
- (tabAdded)="onTabAdded($event)"
427
- (tabClosed)="onTabClosed($event)"
428
- (activeTabChange)="activeTabChange($event)">
429
402
 
403
+ ```html
404
+ <cats-ui-tabset [tabs]="tab1" [activeTab]="activeTab" [tabConfig]="tabConfig" (tabAdded)="onTabAdded($event)" (tabClosed)="onTabClosed($event)" (activeTabChange)="activeTabChange($event)">
430
405
  <!-- Tab ID 0 is the Home tab (requires homeTab: true in tabConfig) -->
431
406
  <cats-ui-tab-content [tabId]="0">Home Content</cats-ui-tab-content>
432
407
  <cats-ui-tab-content [tabId]="1">Tab 1 Content</cats-ui-tab-content>
433
408
  <cats-ui-tab-content [tabId]="2">Tab 2 Content</cats-ui-tab-content>
434
-
435
409
  </cats-ui-tabset>
436
410
  ```
437
411
 
438
412
  **TypeScript:**
413
+
439
414
  ```typescript
440
415
  tabConfig = {
441
416
  addTab: true, // Show "+" add tab button
@@ -478,13 +453,13 @@ activeTabChange(dt: any) {
478
453
 
479
454
  **Tab item options:**
480
455
 
481
- | Property | Type | Description |
482
- |---------------|----------|--------------------------------------|
483
- | `id` | `number` | Unique tab ID |
484
- | `title` | `string` | Tab label |
485
- | `leadingIcon` | `string` | Icon path shown before the title |
486
- | `tralingIocn` | `string` | Icon path shown after the title |
487
- | `count` | `number` | Badge count shown on the tab |
456
+ | Property | Type | Description |
457
+ | ------------- | -------- | -------------------------------- |
458
+ | `id` | `number` | Unique tab ID |
459
+ | `title` | `string` | Tab label |
460
+ | `leadingIcon` | `string` | Icon path shown before the title |
461
+ | `tralingIocn` | `string` | Icon path shown after the title |
462
+ | `count` | `number` | Badge count shown on the tab |
488
463
 
489
464
  ---
490
465
 
@@ -493,55 +468,50 @@ activeTabChange(dt: any) {
493
468
  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
469
 
495
470
  **Template:**
471
+
496
472
  ```html
497
473
  <!-- Trigger button -->
498
474
  <button (click)="openUserWizard()">Open User Wizard</button>
499
475
 
500
476
  @if (wizard.isOpen('classification')()) {
501
- <cats-ui-wizard
502
- wizardId="classification"
503
- title="Data Classification"
504
- [showProgressBar]="true"
505
- [showStepBadge]="true"
506
- (closed)="closeModal()">
507
-
508
- <ng-template wizardStep>
509
- <app-step-one></app-step-one>
510
- </ng-template>
511
-
512
- <ng-template wizardStep>
513
- <app-step-two></app-step-two>
514
- </ng-template>
515
-
516
- <ng-template wizardStep>
517
- <app-step-three></app-step-three>
518
- </ng-template>
519
-
520
- <ng-template wizardStep>
521
- <app-step-four></app-step-four>
522
- </ng-template>
523
-
524
- </cats-ui-wizard>
477
+ <cats-ui-wizard wizardId="classification" title="Data Classification" [showProgressBar]="true" [showStepBadge]="true" (closed)="closeModal()">
478
+ <ng-template wizardStep>
479
+ <app-step-one></app-step-one>
480
+ </ng-template>
481
+
482
+ <ng-template wizardStep>
483
+ <app-step-two></app-step-two>
484
+ </ng-template>
485
+
486
+ <ng-template wizardStep>
487
+ <app-step-three></app-step-three>
488
+ </ng-template>
489
+
490
+ <ng-template wizardStep>
491
+ <app-step-four></app-step-four>
492
+ </ng-template>
493
+ </cats-ui-wizard>
525
494
  }
526
495
  ```
527
496
 
528
497
  **TypeScript:**
498
+
529
499
  ```typescript
530
- import { WizardService } from 'cats-ui-lib';
500
+ import { WizardService } from "cats-ui-lib";
531
501
 
532
502
  export class ParentComponent {
533
503
  constructor(public wizard: WizardService) {}
534
504
 
535
505
  openUserWizard() {
536
- const wizardId = 'classification';
506
+ const wizardId = "classification";
537
507
 
538
508
  // Define the step titles and initial states
539
509
  this.wizard.stepConfig.update((config: any) => {
540
510
  config[wizardId] = [
541
- { title: 'User Info', state: 'active' },
542
- { title: 'Details', state: 'normal' },
543
- { title: 'Review', state: 'normal' },
544
- { title: 'Confirm', state: 'normal' },
511
+ { title: "User Info", state: "active" },
512
+ { title: "Details", state: "normal" },
513
+ { title: "Review", state: "normal" },
514
+ { title: "Confirm", state: "normal" },
545
515
  ];
546
516
  return config;
547
517
  });
@@ -550,7 +520,7 @@ export class ParentComponent {
550
520
  }
551
521
 
552
522
  closeModal() {
553
- this.wizard.close('classification');
523
+ this.wizard.close("classification");
554
524
  }
555
525
  }
556
526
  ```
@@ -558,7 +528,7 @@ export class ParentComponent {
558
528
  **Component inputs:**
559
529
 
560
530
  | Input | Type | Description |
561
- |-------------------|-----------|-------------------------------------------------------|
531
+ | ----------------- | --------- | ----------------------------------------------------- |
562
532
  | `wizardId` | `string` | Unique identifier matching the ID used in the service |
563
533
  | `title` | `string` | Title displayed in the wizard header |
564
534
  | `showProgressBar` | `boolean` | Show a progress bar across the top of the wizard |
@@ -567,27 +537,28 @@ export class ParentComponent {
567
537
 
568
538
  **Component outputs:**
569
539
 
570
- | Output | Type | Description |
571
- |----------|-------------------------|------------------------------------------|
572
- | `closed` | `EventEmitter<void>` | Emitted when the wizard is closed |
540
+ | Output | Type | Description |
541
+ | -------- | -------------------- | --------------------------------- |
542
+ | `closed` | `EventEmitter<void>` | Emitted when the wizard is closed |
573
543
 
574
544
  **`WizardService` API:**
575
545
 
576
- | Method / Property | Signature | Description |
577
- |--------------------|-------------------------------------------------|--------------------------------------------------|
578
- | `open()` | `open(id: string, options: { steps: [] }): void`| Opens the wizard with the given ID |
579
- | `close()` | `close(id: string): void` | Closes the wizard with the given ID |
580
- | `isOpen()` | `isOpen(id: string): Signal<boolean>` | Returns a signal indicating if the wizard is open|
581
- | `stepConfig` | `WritableSignal<Record<string, StepConfig[]>>` | Signal holding step definitions per wizard ID |
546
+ | Method / Property | Signature | Description |
547
+ | ----------------- | ------------------------------------------------ | ------------------------------------------------- |
548
+ | `open()` | `open(id: string, options: { steps: [] }): void` | Opens the wizard with the given ID |
549
+ | `close()` | `close(id: string): void` | Closes the wizard with the given ID |
550
+ | `isOpen()` | `isOpen(id: string): Signal<boolean>` | Returns a signal indicating if the wizard is open |
551
+ | `stepConfig` | `WritableSignal<Record<string, StepConfig[]>>` | Signal holding step definitions per wizard ID |
582
552
 
583
553
  **Step config object fields:**
584
554
 
585
- | Field | Type | Description |
586
- |---------|----------|-------------------------------------------------------|
587
- | `title` | `string` | Display label for the step in the progress bar |
588
- | `state` | `string` | Initial state: `'active'` (current) or `'normal'` |
555
+ | Field | Type | Description |
556
+ | ------- | -------- | ------------------------------------------------- |
557
+ | `title` | `string` | Display label for the step in the progress bar |
558
+ | `state` | `string` | Initial state: `'active'` (current) or `'normal'` |
589
559
 
590
560
  **Notes:**
561
+
591
562
  - Each `<ng-template wizardStep>` maps to a step in the order it appears.
592
563
  - The number of `<ng-template wizardStep>` blocks should match the number of entries in `stepConfig`.
593
564
  - The wizard uses Angular Signals internally; use `wizard.isOpen('id')()` (note the call `()`) to read the signal value in templates.
@@ -598,61 +569,47 @@ export class ParentComponent {
598
569
 
599
570
  Supports `single`, `range`, and `dual` modes with optional time selection.
600
571
 
601
- | Mode | Description |
602
- |----------|-------------------------------------|
603
- | `single` | Single date picker (± time) |
604
- | `range` | Start and end date picker (± time) |
605
- | `dual` | Two-calendar view (± time) |
572
+ | Mode | Description |
573
+ | -------- | ---------------------------------- |
574
+ | `single` | Single date picker (± time) |
575
+ | `range` | Start and end date picker (± time) |
576
+ | `dual` | Two-calendar view (± time) |
606
577
 
607
578
  **Template:**
579
+
608
580
  ```html
609
581
  <!-- Single date + time -->
610
- <cats-ui-custom-date-picker
611
- [config]="{ mode: 'single', time: true, parentDateFormat: 'MM/dd/yyyy' }"
612
- (applied)="displayData($event)">
613
- </cats-ui-custom-date-picker>
582
+ <cats-ui-custom-date-picker [config]="{ mode: 'single', time: true, parentDateFormat: 'MM/dd/yyyy' }" (applied)="displayData($event)"> </cats-ui-custom-date-picker>
614
583
 
615
584
  <!-- Date range -->
616
- <cats-ui-custom-date-picker
617
- [config]="{ mode: 'range', time: false, parentDateFormat: 'MM/dd/yyyy' }"
618
- (applied)="displayData($event)">
619
- </cats-ui-custom-date-picker>
585
+ <cats-ui-custom-date-picker [config]="{ mode: 'range', time: false, parentDateFormat: 'MM/dd/yyyy' }" (applied)="displayData($event)"> </cats-ui-custom-date-picker>
620
586
 
621
587
  <!-- Date range + time -->
622
- <cats-ui-custom-date-picker
623
- [config]="{ mode: 'range', time: true, parentDateFormat: 'MM/dd/yyyy' }"
624
- (applied)="displayData($event)">
625
- </cats-ui-custom-date-picker>
588
+ <cats-ui-custom-date-picker [config]="{ mode: 'range', time: true, parentDateFormat: 'MM/dd/yyyy' }" (applied)="displayData($event)"> </cats-ui-custom-date-picker>
626
589
 
627
590
  <!-- Dual calendar -->
628
- <cats-ui-custom-date-picker
629
- [config]="{ mode: 'dual', time: false, parentDateFormat: 'MM/dd/yyyy' }"
630
- (applied)="displayData($event)">
631
- </cats-ui-custom-date-picker>
591
+ <cats-ui-custom-date-picker [config]="{ mode: 'dual', time: false, parentDateFormat: 'MM/dd/yyyy' }" (applied)="displayData($event)"> </cats-ui-custom-date-picker>
632
592
 
633
593
  <!-- Dual calendar + time -->
634
- <cats-ui-custom-date-picker
635
- [config]="{ mode: 'dual', time: true, parentDateFormat: 'MM/dd/yyyy' }"
636
- (applied)="displayData($event)">
637
- </cats-ui-custom-date-picker>
594
+ <cats-ui-custom-date-picker [config]="{ mode: 'dual', time: true, parentDateFormat: 'MM/dd/yyyy' }" (applied)="displayData($event)"> </cats-ui-custom-date-picker>
638
595
  ```
639
596
 
640
597
  **Config options:**
641
598
 
642
- | Property | Type | Description |
643
- |--------------------|-----------|-----------------------------------------------------|
644
- | `mode` | `string` | `'single'` \| `'range'` \| `'dual'` |
645
- | `time` | `boolean` | Show time picker alongside the date |
646
- | `parentDateFormat` | `string` | Output date format, e.g. `'MM/dd/yyyy'` |
647
- | `minDate` | `Date` | Minimum selectable date |
648
- | `maxDate` | `Date` | Maximum selectable date |
649
- | `placeholder` | `string` | Placeholder for single-date mode |
650
- | `fromPlaceholder` | `string` | Placeholder for start date in range/dual mode |
651
- | `toPlaceholder` | `string` | Placeholder for end date in range/dual mode |
652
- | `disabledDates` | `Date[]` | Array of dates to disable |
653
- | `disablePastDays` | `number` | Number of past days to disable |
654
- | `showDateLabel` | `boolean` | Show label above date input |
655
- | `showTimeLabel` | `boolean` | Show label above time input |
599
+ | Property | Type | Description |
600
+ | ------------------ | --------- | --------------------------------------------- |
601
+ | `mode` | `string` | `'single'` \| `'range'` \| `'dual'` |
602
+ | `time` | `boolean` | Show time picker alongside the date |
603
+ | `parentDateFormat` | `string` | Output date format, e.g. `'MM/dd/yyyy'` |
604
+ | `minDate` | `Date` | Minimum selectable date |
605
+ | `maxDate` | `Date` | Maximum selectable date |
606
+ | `placeholder` | `string` | Placeholder for single-date mode |
607
+ | `fromPlaceholder` | `string` | Placeholder for start date in range/dual mode |
608
+ | `toPlaceholder` | `string` | Placeholder for end date in range/dual mode |
609
+ | `disabledDates` | `Date[]` | Array of dates to disable |
610
+ | `disablePastDays` | `number` | Number of past days to disable |
611
+ | `showDateLabel` | `boolean` | Show label above date input |
612
+ | `showTimeLabel` | `boolean` | Show label above time input |
656
613
 
657
614
  ---
658
615
 
@@ -661,14 +618,13 @@ Supports `single`, `range`, and `dual` modes with optional time selection.
661
618
  A pre-built filter component with quick date presets, custom input, and date picker submenus.
662
619
 
663
620
  **Template:**
621
+
664
622
  ```html
665
- <cats-ui-timestamp-filter
666
- [config]="timeFilterConfig"
667
- (selectionChange)="onFilterChange($event)">
668
- </cats-ui-timestamp-filter>
623
+ <cats-ui-timestamp-filter [config]="timeFilterConfig" (selectionChange)="onFilterChange($event)"> </cats-ui-timestamp-filter>
669
624
  ```
670
625
 
671
626
  **TypeScript:**
627
+
672
628
  ```typescript
673
629
  timeFilterConfig = {
674
630
  title: 'Timestamp Filter',
@@ -725,23 +681,23 @@ onFilterChange(dt: any) {
725
681
 
726
682
  **Config options:**
727
683
 
728
- | Property | Type | Description |
729
- |-------------|-----------|-----------------------------------------|
730
- | `title` | `string` | Label shown above the filter |
731
- | `showReset` | `boolean` | Show a reset button |
732
- | `options` | `array` | Array of filter option objects |
684
+ | Property | Type | Description |
685
+ | ----------- | --------- | ------------------------------ |
686
+ | `title` | `string` | Label shown above the filter |
687
+ | `showReset` | `boolean` | Show a reset button |
688
+ | `options` | `array` | Array of filter option objects |
733
689
 
734
690
  **Option object fields:**
735
691
 
736
- | Field | Type | Description |
737
- |--------------------|-----------|-----------------------------------------------------------------|
738
- | `label` | `string` | Display label for the option |
739
- | `value` | `string` | Emitted value on selection |
740
- | `default` | `boolean` | Pre-select this option on load |
741
- | `type` | `string` | `'input'` for numeric entry, `'submenu'` for date picker popup |
742
- | `custom` | `boolean` | Marks as a custom/user-defined option |
692
+ | Field | Type | Description |
693
+ | ------------------ | --------- | -------------------------------------------------------------- |
694
+ | `label` | `string` | Display label for the option |
695
+ | `value` | `string` | Emitted value on selection |
696
+ | `default` | `boolean` | Pre-select this option on load |
697
+ | `type` | `string` | `'input'` for numeric entry, `'submenu'` for date picker popup |
698
+ | `custom` | `boolean` | Marks as a custom/user-defined option |
743
699
  | `pickerMode` | `string` | Date picker mode: `'single'` \| `'range'` |
744
- | `parentDateFormat` | `string` | Output date format for picker submenus |
700
+ | `parentDateFormat` | `string` | Output date format for picker submenus |
745
701
 
746
702
  ---
747
703
 
@@ -813,7 +769,7 @@ npm publish
813
769
  ## 📋 Requirements
814
770
 
815
771
  | Dependency | Version |
816
- |------------|---------|
772
+ | ---------- | ------- |
817
773
  | Angular | >= 19.x |
818
774
  | Node.js | >= 18.x |
819
775
 
@@ -821,4 +777,4 @@ npm publish
821
777
 
822
778
  ## 📄 License
823
779
 
824
- MIT © cats-ui-lib
780
+ MIT © cats-ui-lib