cats-ui-lib 2.0.5 → 2.0.7

package/README.md

@@ -32,18 +32,6 @@ Add the following inside the `build > options` section of your `angular.json`:
   "node_modules/cats-ui-lib/styles/_index.scss"
 ]
 ```
-
-### 2. Import the Module
-
-```typescript
-import { CatsUiModule } from 'cats-ui-lib';
-
-@NgModule({
-  imports: [CatsUiModule],
-})
-export class AppModule {}
-```
-
 ---
 
 ## 🧩 Components
@@ -425,76 +413,6 @@ onToggled(data: any) {
 
 ---
 
-### `TabComponent` — `<cats-ui-tab>`
-
-Supports `horizontal` (default) and `vertical` orientations with optional disabled tabs.
-
-**Template:**
-```html
-<cats-ui-tab
-  [activeTab]="0"
-  orientation="vertical"
-  [disabledTabs]="[1]"
-  (selectTab)="onTabSelected($event)">
-
-  <cats-ui-tab-item>
-    <ng-template tabHeading>Home</ng-template>
-    <ng-template tabContent>Home content</ng-template>
-  </cats-ui-tab-item>
-
-  <cats-ui-tab-item>
-    <ng-template tabHeading>Profile</ng-template>
-    <ng-template tabContent>Profile content</ng-template>
-  </cats-ui-tab-item>
-
-</cats-ui-tab>
-```
-
-**Dynamic tabs with close button:**
-```html
-<cats-ui-tab
-  [activeTab]="activeTabIndex"
-  [disabledTabs]="disabledTabs"
-  (selectTab)="onTabSelected($event)">
-
-  @for (tab of tabs; track $index) {
-    <cats-ui-tab-item>
-      <ng-template tabHeading>
-        {{ tab.heading }}
-        <span class="btn-close ms-3" (click)="closeTab($index)">x</span>
-      </ng-template>
-      <ng-template tabContent>{{ tab.content }}</ng-template>
-    </cats-ui-tab-item>
-  }
-
-</cats-ui-tab>
-```
-
-**TypeScript:**
-```typescript
-tabs = [
-  { heading: 'Home',    content: 'Home content'    },
-  { heading: 'Profile', content: 'Profile content' },
-];
-activeTabIndex = 0;
-disabledTabs: number[] = [1];
-
-onTabSelected(index: number) {
-  this.activeTabIndex = index;
-}
-
-closeTab(index: number) {
-  if (this.tabs.length > 1) {
-    this.tabs.splice(index, 1);
-    if (this.activeTabIndex >= this.tabs.length) {
-      this.activeTabIndex = this.tabs.length - 1;
-    }
-  }
-}
-```
-
----
-
 ### `TabsetComponent` — `<cats-ui-tabset>`
 
 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
 ```html
 <cats-ui-tabset
   [tabs]="tab1"
-  [(activeTab)]="activeTab"
+  [activeTab]="activeTab"
   [tabConfig]="tabConfig"
   (tabAdded)="onTabAdded($event)"
   (tabClosed)="onTabClosed($event)"
@@ -537,7 +455,7 @@ tab1 = [
   },
 ];
 
-activeTab: any;
+activeTab: 1;
 tab = 6; // counter for dynamic tab IDs
 
 onTabAdded(ev: any) {
@@ -570,6 +488,112 @@ activeTabChange(dt: any) {
 
 ---
 
+### `WizardComponent` — `<cats-ui-wizard>`
+
+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`.
+
+**Template:**
+```html
+<!-- Trigger button -->
+<button (click)="openUserWizard()">Open User Wizard</button>
+
+@if (wizard.isOpen('classification')()) {
+  <cats-ui-wizard
+    wizardId="classification"
+    title="Data Classification"
+    [showProgressBar]="true"
+    [showStepBadge]="true"
+    (closed)="closeModal()">
+
+    <ng-template wizardStep>
+      <app-step-one></app-step-one>
+    </ng-template>
+
+    <ng-template wizardStep>
+      <app-step-two></app-step-two>
+    </ng-template>
+
+    <ng-template wizardStep>
+      <app-step-three></app-step-three>
+    </ng-template>
+
+    <ng-template wizardStep>
+      <app-step-four></app-step-four>
+    </ng-template>
+
+  </cats-ui-wizard>
+}
+```
+
+**TypeScript:**
+```typescript
+import { WizardService } from 'cats-ui-lib';
+
+export class ParentComponent {
+  constructor(public wizard: WizardService) {}
+
+  openUserWizard() {
+    const wizardId = 'classification';
+
+    // Define the step titles and initial states
+    this.wizard.stepConfig.update((config: any) => {
+      config[wizardId] = [
+        { title: 'User Info', state: 'active' },
+        { title: 'Details',   state: 'normal' },
+        { title: 'Review',    state: 'normal' },
+        { title: 'Confirm',   state: 'normal' },
+      ];
+      return config;
+    });
+
+    this.wizard.open(wizardId, { steps: [] });
+  }
+
+  closeModal() {
+    this.wizard.close('classification');
+  }
+}
+```
+
+**Component inputs:**
+
+| Input             | Type      | Description                                           |
+|-------------------|-----------|-------------------------------------------------------|
+| `wizardId`        | `string`  | Unique identifier matching the ID used in the service |
+| `title`           | `string`  | Title displayed in the wizard header                  |
+| `showProgressBar` | `boolean` | Show a progress bar across the top of the wizard      |
+| `showStepBadge`   | `boolean` | Show a step counter badge (e.g. "Step 2 of 4")        |
+| `expandable`      | `boolean` | Allow the wizard to be expanded to full screen        |
+
+**Component outputs:**
+
+| Output   | Type                    | Description                              |
+|----------|-------------------------|------------------------------------------|
+| `closed` | `EventEmitter<void>`    | Emitted when the wizard is closed        |
+
+**`WizardService` API:**
+
+| Method / Property  | Signature                                       | Description                                      |
+|--------------------|-------------------------------------------------|--------------------------------------------------|
+| `open()`           | `open(id: string, options: { steps: [] }): void`| Opens the wizard with the given ID               |
+| `close()`          | `close(id: string): void`                       | Closes the wizard with the given ID              |
+| `isOpen()`         | `isOpen(id: string): Signal<boolean>`           | Returns a signal indicating if the wizard is open|
+| `stepConfig`       | `WritableSignal<Record<string, StepConfig[]>>`  | Signal holding step definitions per wizard ID    |
+
+**Step config object fields:**
+
+| Field   | Type     | Description                                           |
+|---------|----------|-------------------------------------------------------|
+| `title` | `string` | Display label for the step in the progress bar        |
+| `state` | `string` | Initial state: `'active'` (current) or `'normal'`    |
+
+**Notes:**
+- Each `<ng-template wizardStep>` maps to a step in the order it appears.
+- The number of `<ng-template wizardStep>` blocks should match the number of entries in `stepConfig`.
+- The wizard uses Angular Signals internally; use `wizard.isOpen('id')()` (note the call `()`) to read the signal value in templates.
+
+---
+
 ### `CustomDatePickerComponent` — `<cats-ui-custom-date-picker>`
 
 Supports `single`, `range`, and `dual` modes with optional time selection.
@@ -749,7 +773,8 @@ cats-ui-lib/
 ├── tabs/
 ├── tabset/
 ├── timestamp-filter/
-└── toogle-button/
+├── toogle-button/
+└── wizard/
 ```
 
 ---

package/assets/images/check-disabled.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.62497 0.624977L2.49997 4.74998L0.624973 2.87498" stroke="#C0C2C5" stroke-width="1.24995" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/assets/images/chevron-down.svg

@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 9L12 15L18 9" stroke="#040D17" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/assets/images/chevron-up.svg

@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up"><polyline points="18 15 12 9 6 15"></polyline></svg>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 15L12 9L6 15" stroke="#040D17" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/assets/images/expand.svg

@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<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"/>
+<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"/>
+</svg>

package/assets/images/minimize-expand.svg

@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<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"/>
+<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"/>
+</svg>