ng-prime-tools 1.0.72 → 1.0.73

package/README.md

@@ -7,6 +7,7 @@ An advanced PrimeNG tools library for Angular.
 - [Introduction](#introduction)
 - [Installation](#installation)
 - [Compatibility](#compatibility)
+- [PrimeNG Theme Configuration](#primeng-theme-configuration)
 - [Usage](#usage)
   - [pt-advanced-prime-table](#pt-advanced-prime-table)
     - [Inputs](#inputs)
@@ -24,114 +25,185 @@ An advanced PrimeNG tools library for Angular.
 
 ## Introduction
 
-`ng-prime-tools` is a collection of advanced tools built on top of PrimeNG for Angular applications.
+`ng-prime-tools` is a collection of advanced reusable UI tools built on top of PrimeNG for Angular applications.
 
-To include the necessary steps for installing `ng-prime-tools` along with its dependencies, you can update the installation instructions as follows:
+The library provides configurable components for advanced tables, dynamic forms, dashboards, cards, menus, dialogs, charts, search criteria, page skeletons, and other common application needs.
+
+Version `2.x` targets Angular 21 and PrimeNG 21.
 
 ## Installation
 
-To install `ng-prime-tools` and its necessary dependencies, use the following commands:
+Install `ng-prime-tools` with its required peer dependencies:
 
 ```bash
 npm install ng-prime-tools
+npm install primeng @primeng/themes primeicons primeflex
 npm install chart.js chartjs-plugin-datalabels
 ```
 
-This ensures that all required libraries are properly installed and available for use in your project.
+For Angular 21, use a compatible Node.js, TypeScript, and RxJS environment.
+
+Recommended versions:
+
+- Node.js: `^20.19.0 || ^22.12.0 || ^24.0.0`
+- TypeScript: `>=5.9.0 <6.0.0`
+- RxJS: `^7.4.0`
+- Zone.js: `~0.15.1`
+
+Angular 21 officially supports Node.js `^20.19.0 || ^22.12.0 || ^24.0.0`, TypeScript `>=5.9.0 <6.0.0`, and RxJS `^6.5.3 || ^7.4.0`. For this library, RxJS `^7.4.0` is recommended.
 
 ## Compatibility
 
-- **Angular Version**: 17.3.1 or higher
-- **PrimeNG Version**: 17.18.0 or higher
+| Library                   | Version          |
+| ------------------------- | ---------------- |
+| Angular                   | `^21.0.0`        |
+| PrimeNG                   | `^21.0.0`        |
+| @primeng/themes           | `^21.0.0`        |
+| PrimeIcons                | `^7.0.0`         |
+| PrimeFlex                 | `^4.0.0`         |
+| Chart.js                  | `^4.4.4`         |
+| chartjs-plugin-datalabels | `^2.2.0`         |
+| RxJS                      | `^7.4.0`         |
+| TypeScript                | `>=5.9.0 <6.0.0` |
+| Zone.js                   | `~0.15.1`        |
+
+`ng-prime-tools` version `2.x` targets Angular 21 and PrimeNG 21.
+
+For Angular 17 / PrimeNG 17 applications, use the previous `1.x` version of the library.
+
+## PrimeNG Theme Configuration
+
+PrimeNG 21 uses the styled-mode theme system with presets such as Aura, Material, Lara, and Nora. It no longer relies on the old global CSS imports from `primeng/resources/...`.
+
+Remove these old style entries from `angular.json` if they exist:
+
+```json
+"node_modules/primeng/resources/themes/saga-blue/theme.css",
+"node_modules/primeng/resources/primeng.min.css"
+```
+
+Keep only the application stylesheet and the icon/layout libraries:
+
+```json
+"styles": [
+  "src/styles.css",
+  "node_modules/primeicons/primeicons.css",
+  "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
+  "node_modules/primeflex/primeflex.css"
+]
+```
+
+Then configure PrimeNG using `providePrimeNG`.
+
+Example `app.config.ts`:
+
+```typescript
+import { ApplicationConfig } from "@angular/core";
+import { provideRouter } from "@angular/router";
+import { provideAnimations } from "@angular/platform-browser/animations";
+import { providePrimeNG } from "primeng/config";
+import Aura from "@primeng/themes/aura";
+
+import { routes } from "./app.routes";
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(routes),
+    provideAnimations(),
+    providePrimeNG({
+      theme: {
+        preset: Aura,
+      },
+    }),
+  ],
+};
+```
 
 ## Usage
 
 ### pt-advanced-prime-table
 
-To use the `pt-advanced-prime-table` component, follow these steps:
-
-1. **Import the Module:**
-
-   Import the `NgAdvancedPrimeTableModule` in your Angular module or standalone component.
-
-   ```typescript
-   import { NgAdvancedPrimeTableModule, TableColumn, TableTypeEnum } from "ng-prime-tools";
-   ```
-
-2. **Add the Component:**
-
-   Add the `pt-advanced-prime-table` component to your template:
-
-   ```html
-   <pt-advanced-prime-table [columns]="columns" [data]="data" [hasSearchFilter]="true" [hasColumnFilter]="true" [isPaginated]="true" [totalRecords]="totalRecords" [isSortable]="true"></pt-advanced-prime-table>
-   ```
-
-3. **Define the Inputs:**
-
-   In your component, define the necessary inputs for the table:
-
-   ```typescript
-   import { Component, OnInit } from "@angular/core";
-   import { NgAdvancedPrimeTableModule } from "ng-prime-tools/pt-advanced-prime-table";
-   import { TableColumn } from "ng-prime-tools/models";
-   import { TableTypeEnum } from "ng-prime-tools/enums";
-
-   @Component({
-     selector: "app-root",
-     standalone: true,
-     imports: [NgAdvancedPrimeTableModule],
-     templateUrl: "./app.component.html",
-     styleUrls: ["./app.component.css"],
-   })
-   export class AppComponent implements OnInit {
-     columns: TableColumn[] = [];
-     data: any[] = [];
-     totalRecords: number = 0;
-
-     ngOnInit(): void {
-       this.columns = [
-         {
-           title: "Name",
-           code: "name",
-           type: TableTypeEnum.STRING,
-           isEditable: true,
-         },
-         {
-           title: "Date",
-           code: "date",
-           type: TableTypeEnum.DATE,
-           isEditable: true,
-         },
-         {
-           title: "Amount",
-           code: "amount",
-           type: TableTypeEnum.AMOUNT,
-           currency: "USD",
-           isEditable: true,
-         },
-       ];
-
-       this.data = [
-         { name: "John Doe", date: "11/06/2024", amount: 100 },
-         { name: "Jane Doe", date: "20/06/2024", amount: 200 },
-       ];
-
-       this.totalRecords = this.data.length;
-     }
-   }
-   ```
+To use the `pt-advanced-prime-table` component, follow these steps.
+
+#### Import the module
+
+Import `PTAdvancedPrimeTableModule` in your Angular module or standalone component.
+
+```typescript
+import { PTAdvancedPrimeTableModule, TableColumn, TableTypeEnum } from "ng-prime-tools";
+```
+
+#### Add the component
+
+Add the `pt-advanced-prime-table` component to your template:
+
+```html
+<pt-advanced-prime-table [columns]="columns" [data]="data" [hasSearchFilter]="true" [hasColumnFilter]="true" [isPaginated]="true" [totalRecords]="totalRecords" [isSortable]="true"></pt-advanced-prime-table>
+```
+
+#### Define the inputs
+
+```typescript
+import { Component, OnInit } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { PTAdvancedPrimeTableModule, TableColumn, TableTypeEnum } from "ng-prime-tools";
+
+@Component({
+  selector: "app-root",
+  standalone: true,
+  imports: [CommonModule, PTAdvancedPrimeTableModule],
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.css"],
+})
+export class AppComponent implements OnInit {
+  columns: TableColumn[] = [];
+  data: any[] = [];
+  totalRecords = 0;
+
+  ngOnInit(): void {
+    this.columns = [
+      {
+        title: "Name",
+        code: "name",
+        type: TableTypeEnum.STRING,
+        isEditable: true,
+      },
+      {
+        title: "Date",
+        code: "date",
+        type: TableTypeEnum.DATE,
+        isEditable: true,
+      },
+      {
+        title: "Amount",
+        code: "amount",
+        type: TableTypeEnum.AMOUNT,
+        currency: "USD",
+        isEditable: true,
+      },
+    ];
+
+    this.data = [
+      { name: "John Doe", date: "11/06/2024", amount: 100 },
+      { name: "Jane Doe", date: "20/06/2024", amount: 200 },
+    ];
+
+    this.totalRecords = this.data.length;
+  }
+}
+```
 
 ### Inputs
 
 - **data** (`any[]`): The data to be displayed in the table.
-- **columns** (`TableColumn[]`): The columns configuration for the table.
+- **columns** (`TableColumn[]`): The column configuration for the table.
 - **totalRecords** (`number`): The total number of records.
 - **rowsPerPage** (`number[]`): The number of rows per page options for pagination.
-- **hasSearchFilter** (`boolean`): Whether the table has a global search filter.
-- **hasColumnFilter** (`boolean`): Whether the table has column-specific filters.
-- **isPaginated** (`boolean`): Whether the table is paginated.
-- **actions** (`any[]`): The actions available for the table rows.
-- **isSortable** (`boolean`): Whether the table columns are sortable.
+- **hasSearchFilter** (`boolean`): Enables or disables the global search filter.
+- **hasColumnFilter** (`boolean`): Enables or disables column-specific filters.
+- **isPaginated** (`boolean`): Enables or disables pagination.
+- **actions** (`any[]`): The actions available for table rows.
+- **isSortable** (`boolean`): Enables or disables sortable columns.
 
 ### Outputs
 
@@ -140,26 +212,22 @@ To use the `pt-advanced-prime-table` component, follow these steps:
 
 ### Example
 
-Here's a complete example of how to use the `pt-advanced-prime-table` component:
-
 ```typescript
 import { Component, OnInit } from "@angular/core";
 import { CommonModule } from "@angular/common";
-import { NgAdvancedPrimeTableModule } from "ng-prime-tools/pt-advanced-prime-table";
-import { TableColumn } from "ng-prime-tools/models";
-import { TableTypeEnum } from "ng-prime-tools/enums";
+import { PTAdvancedPrimeTableModule, TableColumn, TableTypeEnum } from "ng-prime-tools";
 
 @Component({
   selector: "app-root",
   standalone: true,
-  imports: [CommonModule, NgAdvancedPrimeTableModule],
+  imports: [CommonModule, PTAdvancedPrimeTableModule],
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"],
 })
 export class AppComponent implements OnInit {
   columns: TableColumn[] = [];
   data: any[] = [];
-  totalRecords: number = 0;
+  totalRecords = 0;
 
   ngOnInit(): void {
     this.columns = [
@@ -200,133 +268,133 @@ export class AppComponent implements OnInit {
 
 ### multi-search-criteria
 
-To use the `multi-search-criteria` component, follow these steps:
-
-1. **Import the Module:**
-
-   Import the `MultiSearchCriteriaModule` in your Angular module or standalone component.
-
-   ```typescript
-   import { MultiSearchCriteriaModule, SearchCriteria, SearchCriteriaTypeEnum } from "ng-prime-tools";
-   ```
-
-2. **Add the Component:**
-
-   Add the `multi-search-criteria` component to your template:
-
-   ```html
-   <multi-search-criteria [title]="'Multi-Criteria Search'" [criteria]="criteria" [data]="data" [mode]="'dynamic'" (filteredData)="onFilteredData($event)" (searchCriteria)="onSearchData($event)"></multi-search-criteria>
-   ```
-
-3. **Define the Inputs:**
-
-   In your component, define the necessary inputs for the criteria:
-
-   ```typescript
-   import { Component, OnInit } from "@angular/core";
-   import { CommonModule } from "@angular/common";
-   import { MultiSearchCriteriaModule, SearchCriteria, SearchCriteriaTypeEnum, FilterOption } from "ng-prime-tools";
-
-   @Component({
-     selector: "app-root",
-     standalone: true,
-     imports: [CommonModule, MultiSearchCriteriaModule],
-     templateUrl: "./app.component.html",
-     styleUrls: ["./app.component.css"],
-   })
-   export class AppComponent implements OnInit {
-     criteria: SearchCriteria[] = [];
-     data: any[] = [];
-     filteredData: any[] = [];
-     totalRecords: number = 0;
-
-     ngOnInit(): void {
-       this.criteria = [
-         {
-           title: "Name",
-           code: "name",
-           type: SearchCriteriaTypeEnum.STRING,
-         },
-         {
-           title: "Date Range",
-           code: "dateRange",
-           type: SearchCriteriaTypeEnum.DATERANGE,
-         },
-         {
-           title: "Amount",
-           code: "amount",
-           type: SearchCriteriaTypeEnum.AMOUNT,
-           currency: "USD",
-         },
-         {
-           title: "Type",
-           code: "type",
-           type: SearchCriteriaTypeEnum.MULTISELECT,
-           filterOptions: [
-             { label: "Invoice", value: "Invoice" },
-             { label: "Bill", value: "Bill" },
-           ],
-         },
-       ];
-
-       this.data = [
-         { name: "ZAK JAAI", date: "11/06/2024", amount: 100, type: "Invoice" },
-         { name: "ZAK2 JAAI", date: "20/06/2024", amount: 200, type: "Bill" },
-       ];
-
-       this.filteredData = [...this.data];
-       this.totalRecords = this.data.length;
-     }
-
-     onFilteredData(filteredData: any[]): void {
-       this.filteredData = filteredData;
-       this.totalRecords = filteredData.length;
-     }
-
-     onSearchData(searchCriteria: { [key: string]: any }): void {
-       console.log(searchCriteria);
-     }
-   }
-   ```
+To use the `multi-search-criteria` component, follow these steps.
 
-### Inputs
+#### Import the module
+
+```typescript
+import { MultiSearchCriteriaModule, SearchCriteria, SearchCriteriaTypeEnum } from "ng-prime-tools";
+```
+
+#### Add the component
+
+```html
+<multi-search-criteria [title]="'Multi-Criteria Search'" [criteria]="criteria" [data]="data" [mode]="'dynamic'" (filteredData)="onFilteredData($event)" (searchCriteria)="onSearchData($event)"></multi-search-criteria>
+```
 
-- **title** (`
+#### Define the inputs
 
-string`): The title of the multi-search criteria panel.
+```typescript
+import { Component, OnInit } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { MultiSearchCriteriaModule, SearchCriteria, SearchCriteriaTypeEnum, FilterOption } from "ng-prime-tools";
 
+@Component({
+  selector: "app-root",
+  standalone: true,
+  imports: [CommonModule, MultiSearchCriteriaModule],
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.css"],
+})
+export class AppComponent implements OnInit {
+  criteria: SearchCriteria[] = [];
+  data: any[] = [];
+  filteredData: any[] = [];
+  totalRecords = 0;
+
+  ngOnInit(): void {
+    this.criteria = [
+      {
+        title: "Name",
+        code: "name",
+        type: SearchCriteriaTypeEnum.STRING,
+      },
+      {
+        title: "Date Range",
+        code: "dateRange",
+        type: SearchCriteriaTypeEnum.DATERANGE,
+      },
+      {
+        title: "Amount",
+        code: "amount",
+        type: SearchCriteriaTypeEnum.AMOUNT,
+        currency: "USD",
+      },
+      {
+        title: "Type",
+        code: "type",
+        type: SearchCriteriaTypeEnum.MULTISELECT,
+        filterOptions: [
+          { label: "Invoice", value: "Invoice" },
+          { label: "Bill", value: "Bill" },
+        ] as FilterOption[],
+      },
+    ];
+
+    this.data = [
+      {
+        name: "ZAK JAAI",
+        date: "11/06/2024",
+        amount: 100,
+        type: "Invoice",
+      },
+      {
+        name: "ZAK2 JAAI",
+        date: "20/06/2024",
+        amount: 200,
+        type: "Bill",
+      },
+    ];
+
+    this.filteredData = [...this.data];
+    this.totalRecords = this.data.length;
+  }
+
+  onFilteredData(filteredData: any[]): void {
+    this.filteredData = filteredData;
+    this.totalRecords = filteredData.length;
+  }
+
+  onSearchData(searchCriteria: { [key: string]: any }): void {
+    console.log(searchCriteria);
+  }
+}
+```
+
+### Inputs
+
+- **title** (`string`): The title of the multi-search criteria panel.
 - **criteria** (`SearchCriteria[]`): The search criteria configuration.
-- **data** (`any[]`): The data to be filtered (used in static mode).
-- **mode** (`'static' | 'dynamic'`): The mode of the multi-search criteria component.
-  - `'static'`: Filters the data directly within the component.
-  - `'dynamic'`: Emits the search criteria to be handled externally (e.g., for server-side filtering).
+- **data** (`any[]`): The data to be filtered when the component is used in static mode.
+- **mode** (`'static' | 'dynamic'`): The filtering mode.
+  - `'static'`: Filters the provided data directly inside the component.
+  - `'dynamic'`: Emits the search criteria so that the parent component or backend can handle filtering.
 
 ### Outputs
 
-- **filteredData** (`EventEmitter<any[]>`): Emitted with the filtered data (only in static mode).
-- **searchCriteria** (`EventEmitter<{ [key: string]: any }>`): Emitted with the search criteria (only in dynamic mode).
+- **filteredData** (`EventEmitter<any[]>`): Emitted with the filtered data in static mode.
+- **searchCriteria** (`EventEmitter<{ [key: string]: any }>`): Emitted with the search criteria in dynamic mode.
 
 ### Example
 
-Here's a complete example of how to use the `multi-search-criteria` component in dynamic mode:
-
 ```typescript
 import { Component, OnInit } from "@angular/core";
 import { CommonModule } from "@angular/common";
-import { MultiSearchCriteriaModule, SearchCriteria, SearchCriteriaTypeEnum, FilterOption } from "ng-prime-tools";
+import { MultiSearchCriteriaModule, SearchCriteria, SearchCriteriaTypeEnum, FilterOption, PTAdvancedPrimeTableModule, TableColumn, TableTypeEnum } from "ng-prime-tools";
 
 @Component({
   selector: "app-root",
   standalone: true,
-  imports: [CommonModule, MultiSearchCriteriaModule],
+  imports: [CommonModule, MultiSearchCriteriaModule, PTAdvancedPrimeTableModule],
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"],
 })
 export class AppComponent implements OnInit {
   criteria: SearchCriteria[] = [];
+  columns: TableColumn[] = [];
   data: any[] = [];
   filteredData: any[] = [];
-  totalRecords: number = 0;
+  totalRecords = 0;
 
   ngOnInit(): void {
     this.criteria = [
@@ -353,13 +421,42 @@ export class AppComponent implements OnInit {
         filterOptions: [
           { label: "Invoice", value: "Invoice" },
           { label: "Bill", value: "Bill" },
-        ],
+        ] as FilterOption[],
+      },
+    ];
+
+    this.columns = [
+      {
+        title: "Name",
+        code: "name",
+        type: TableTypeEnum.STRING,
+      },
+      {
+        title: "Amount",
+        code: "amount",
+        type: TableTypeEnum.AMOUNT,
+        currency: "USD",
+      },
+      {
+        title: "Type",
+        code: "type",
+        type: TableTypeEnum.STRING,
       },
     ];
 
     this.data = [
-      { name: "ZAK JAAI", date: "11/06/2024", amount: 100, type: "Invoice" },
-      { name: "ZAK2 JAAI", date: "20/06/2024", amount: 200, type: "Bill" },
+      {
+        name: "ZAK JAAI",
+        date: "11/06/2024",
+        amount: 100,
+        type: "Invoice",
+      },
+      {
+        name: "ZAK2 JAAI",
+        date: "20/06/2024",
+        amount: 200,
+        type: "Bill",
+      },
     ];
 
     this.filteredData = [...this.data];
@@ -373,7 +470,6 @@ export class AppComponent implements OnInit {
 
   onSearchData(searchCriteria: { [key: string]: any }): void {
     console.log(searchCriteria);
-    // Perform server-side search or any other external data fetching logic
   }
 }
 ```
@@ -393,15 +489,26 @@ The `FormBuilder` component is a powerful and flexible tool for dynamically gene
 The `FormBuilder` leverages several input components to build comprehensive forms:
 
 - **`pt-check-box-input`**: A customizable checkbox input component.
-- **`pt-date-input`**: A versatile date input component supporting both single date and date range selections.
-- **`pt-dropdown`**: A dropdown input component for selecting from a list of options.
+- **`pt-date-input`**: A date input component based on PrimeNG DatePicker.
+- **`pt-dropdown`**: A select input component based on PrimeNG Select.
 - **`pt-form-builder`**: The form builder component that dynamically renders form fields.
 - **`pt-multi-select`**: A multi-select dropdown component for selecting multiple values from a list.
 - **`pt-number-input`**: A numeric input component with support for validation and formatting.
-- **`pt-switch-input`**: A switch input component, ideal for toggling settings.
-- **`pt-text-area-input`**: A text area input component for larger, multi-line text entries.
+- **`pt-switch-input`**: A toggle switch input component based on PrimeNG ToggleSwitch.
+- **`pt-text-area-input`**: A text area input component based on PrimeNG Textarea.
 - **`pt-text-input`**: A standard text input component with support for icons, placeholders, and validation.
 
+#### PrimeNG component mapping
+
+During the Angular 21 / PrimeNG 21 migration, the following PrimeNG components were replaced:
+
+| Old PrimeNG API                          | New PrimeNG API                         |
+| ---------------------------------------- | --------------------------------------- |
+| `InputSwitchModule` / `p-inputSwitch`    | `ToggleSwitchModule` / `p-toggleswitch` |
+| `CalendarModule` / `p-calendar`          | `DatePickerModule` / `p-datepicker`     |
+| `DropdownModule` / `p-dropdown`          | `SelectModule` / `p-select`             |
+| `InputTextareaModule` / `pInputTextarea` | `TextareaModule` / `pTextarea`          |
+
 #### Example
 
 Below is an example of how to use the `FormBuilder` component to create a user registration form with various input fields:
@@ -410,7 +517,7 @@ Below is an example of how to use the `FormBuilder` component to create a user r
 import { Component, OnInit } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { ReactiveFormsModule } from "@angular/forms";
-import { FormFieldGroup, FormInputTypeEnum, ButtonColorEnum, FormButton, PTFormBuilderModule, InputValidationEnum, FormTextField, FormCheckBoxField, FormSwitchField, FormNumberField, FormDateField, FormDropdownField, FormMultiSelectField, FormTextAreaField } from "ng-prime-tools";
+import { ButtonColorEnum, FormButton, FormCheckBoxField, FormDateField, FormDropdownField, FormFieldGroup, FormInputTypeEnum, FormMultiSelectField, FormNumberField, FormSwitchField, FormTextAreaField, FormTextField, InputValidationEnum, PTFormBuilderModule } from "ng-prime-tools";
 
 @Component({
   selector: "app-form-builder-tester",
@@ -423,16 +530,16 @@ export class FormBuilderTesterComponent implements OnInit {
   mainGroup: FormFieldGroup = { fields: [], groups: [] };
   buttons: FormButton[] = [];
 
-  ngOnInit() {
+  ngOnInit(): void {
     this.initializeSettings();
   }
 
-  initializeSettings() {
+  initializeSettings(): void {
     this.initializeMainGroup();
     this.initializeButtons();
   }
 
-  initializeMainGroup() {
+  initializeMainGroup(): void {
     this.mainGroup = {
       groups: [this.createNameGroup(), this.createSubscriptionGroup(), this.createAgeGroup(), this.createBirthdateGroup(), this.createDateRangeGroup(), this.createAmountGroup(), this.createCountryGroup(), this.createHobbiesGroup(), this.createDescriptionGroup()],
     };
@@ -611,7 +718,7 @@ export class FormBuilderTesterComponent implements OnInit {
     };
   }
 
-  initializeButtons() {
+  initializeButtons(): void {
     this.buttons = [
       {
         text: "Custom Action",
@@ -619,16 +726,24 @@ export class FormBuilderTesterComponent implements OnInit {
         color: ButtonColorEnum.SUCCESS,
         icon: "pi pi-check",
       },
-      { text: "Submit", color: ButtonColorEnum.PRIMARY, isSubmit: true },
-      { text: "Clear", color: ButtonColorEnum.SECONDARY, isClear: true },
+      {
+        text: "Submit",
+        color: ButtonColorEnum.PRIMARY,
+        isSubmit: true,
+      },
+      {
+        text: "Clear",
+        color: ButtonColorEnum.SECONDARY,
+        isClear: true,
+      },
     ];
   }
 
-  customAction() {
+  customAction(): void {
     console.log("Custom action executed");
   }
 
-  onFormSubmit(formData: { [key: string]: any }) {
+  onFormSubmit(formData: { [key: string]: any }): void {
     console.log("Form submitted with data:", formData);
   }
 }
@@ -636,15 +751,33 @@ export class FormBuilderTesterComponent implements OnInit {
 
 ## Changelog
 
+### Version 2.0.0 - Release Date: 25/05/2026
+
+- Migrated the library to **Angular 21**.
+- Migrated PrimeNG dependencies to **PrimeNG 21**.
+- Updated the library peer dependencies for Angular 21, PrimeNG 21, RxJS 7, and TypeScript 5.9.
+- Replaced deprecated PrimeNG components:
+  - `InputSwitchModule` / `p-inputSwitch` → `ToggleSwitchModule` / `p-toggleswitch`
+  - `CalendarModule` / `p-calendar` → `DatePickerModule` / `p-datepicker`
+  - `DropdownModule` / `p-dropdown` → `SelectModule` / `p-select`
+  - `InputTextareaModule` / `pInputTextarea` → `TextareaModule` / `pTextarea`
+- Updated PrimeNG theme configuration to use `@primeng/themes` and `providePrimeNG`.
+- Removed old PrimeNG CSS resource imports:
+  - `primeng/resources/themes/...`
+  - `primeng/resources/primeng.min.css`
+- Updated severity handling to support PrimeNG 21 severity values, including `warn` instead of the old `warning` value.
+- Updated Angular templates progressively to support the latest Angular syntax and PrimeNG 21 compatibility.
+- Removed obsolete Angular tooling such as TSLint, Codelyzer, and Protractor from the migration target.
+
 ### Version 1.0.31 - Release Date: 16/04/2025
 
-- pt-advanced-table : Fixing the filters with asynchronous data and composed types.
+- pt-advanced-table: Fixing the filters with asynchronous data and composed types.
 
 ### Version 1.0.30 - Release Date: 10/04/2025
 
 - fixing the disabling btn in pt-login
 
-### Version 1.0.28 - 1.O.29 - Release Date: 05/04/2025
+### Version 1.0.28 - 1.0.29 - Release Date: 05/04/2025
 
 - Changing style of pt-button when disabled
 
@@ -689,7 +822,7 @@ export class FormBuilderTesterComponent implements OnInit {
 ### Version 1.0.18 - Release Date: 22/01/2025
 
 - fixing search in sidebar position
-- pt-card : adding background color transparency and pattern image transparency
+- pt-card: adding background color transparency and pattern image transparency
 
 ### Version 1.0.17 - Release Date: 21/01/2025
 
@@ -705,7 +838,7 @@ export class FormBuilderTesterComponent implements OnInit {
 
 ### Version 1.0.14 - Release Date: 15/11/2024
 
-- fix metric-card 'fixedWidth' param
+- fix metric-card `fixedWidth` param
 - adding design for icons in metric cards
 - fix issue having multiple charts using pt-chart
 
@@ -727,79 +860,69 @@ export class FormBuilderTesterComponent implements OnInit {
 ### Version 1.0.10 - Release Date: 25/09/2024
 
 - **New Components:**
-
-  - **`pt-bar`:** Introduced a new bar component to visually represent progress or metrics in a horizontal bar layout.
-  - **`pt-text-input`:** Added a customizable text input component to handle various form input needs with validation and error handling.
-  - **`pt-page-skeleton`:** Introduced a page skeleton component for loading states, offering a clean UI while data is being fetched.
-  - **`pt-footer`:** A new footer component providing a customizable and responsive footer layout for pages.
-  - **`pt-menu-fancy`:** Added a new fancy menu component for stylish navigation menus with enhanced layout options.
-  - **`pt-button`:** Introduced a highly customizable button component with various styles, icons, and action support.
-  - **`pt-confirm-dialog`:** Added a flexible dialog component for modal-based interactions, supporting customizable content, actions, and layout.
+  - **`pt-bar`**: Introduced a new bar component to visually represent progress or metrics in a horizontal bar layout.
+  - **`pt-text-input`**: Added a customizable text input component to handle various form input needs with validation and error handling.
+  - **`pt-page-skeleton`**: Introduced a page skeleton component for loading states, offering a clean UI while data is being fetched.
+  - **`pt-footer`**: A new footer component providing a customizable and responsive footer layout for pages.
+  - **`pt-menu-fancy`**: Added a new fancy menu component for stylish navigation menus with enhanced layout options.
+  - **`pt-button`**: Introduced a highly customizable button component with various styles, icons, and action support.
+  - **`pt-confirm-dialog`**: Added a flexible dialog component for modal-based interactions, supporting customizable content, actions, and layout.
 
 - **Enhancements to `pt-advanced-prime-table`:**
-  - **Dynamic Column Width:** Enhanced the table to support dynamic column width adjustments based on content, ensuring alignment between header and body cells.
-  - **Customizable Sticky Headers:** Improved sticky header behavior, allowing users to define `max-height` for tables with large datasets.
-  - **Improved Icon Handling:** Optimized column and icon width calculations for better alignment and a more consistent visual experience.
+  - **Dynamic Column Width:** Enhanced the table to support dynamic column width adjustments based on content.
+  - **Customizable Sticky Headers:** Improved sticky header behavior for tables with large datasets.
+  - **Improved Icon Handling:** Optimized column and icon width calculations.
   - **Cell Alignment Fixes:** Resolved issues with header and body cell misalignment when header content wraps.
 
 ### Version 1.0.9 - Release Date: 02/09/2024
 
 - **`pt-advanced-prime-table`:**
+  - **Loading Indicator:** Added loading spinner functionality.
+  - **Vertical Scrolling:** Enabled vertical scrolling for large datasets.
+  - **Empty Record Message:** Introduced a customizable empty-state message.
 
-  - **Loading Indicator:** Added loading spinner functionality to provide visual feedback during data fetching.
-  - **Vertical Scrolling:** Enabled vertical scrolling to handle large datasets and improve usability.
-  - **Empty Record Message:** Introduced a customizable message for when no data is available in the table.
-
-- **`pt-metric-card-group` & `pt-metric-card`:** Introduced a new metric card component and its group, designed for displaying key performance indicators in a visually appealing way.
-- **`pt-chart`:** Added a new chart component that supports various chart types (line, bar, doughnut, pie, etc.), with extensive customization options.
-- **`pt-card`:** Introduced a new card component for displaying content within a bordered and customizable container.
-- **`pt-menu`:** Added a new menu component to be used within cards, supporting various actions and a customizable layout.
+- **`pt-metric-card-group` & `pt-metric-card`**: Introduced metric card components for KPI display.
+- **`pt-chart`**: Added chart component support for line, bar, doughnut, pie, and other chart types.
+- **`pt-card`**: Introduced a configurable card component.
+- **`pt-menu`**: Added a menu component for cards and actions.
 
 #### Version 1.0.8
 
-Fix bug on size of buttons exports
+- Fix bug on size of buttons exports.
 
 #### Version 1.0.7
 
-Adding export to pdf and excel buttons in the `pt-advanced-prime-table`.
+- Adding export to PDF and Excel buttons in the `pt-advanced-prime-table`.
 
-```
-  [hasExportExcel]="true"
-  [hasExportPDF]="true"
-  (exportExcelEvent)="onExportExcel()"
-  (exportPdfEvent)="onExportPDF()"
+```html
+<pt-advanced-prime-table [hasExportExcel]="true" [hasExportPDF]="true" (exportExcelEvent)="onExportExcel()" (exportPdfEvent)="onExportPDF()"></pt-advanced-prime-table>
 ```
 
 #### Version 1.0.6
 
-- **FormBuilder Component:**  
-  Introduced a powerful and flexible `FormBuilder` component that allows developers to dynamically create forms with various input types. The `FormBuilder` supports nested groups, input validation, and customizable form behavior. This component simplifies the process of building complex forms by providing a consistent and reusable structure.
-
+- **FormBuilder Component:** Introduced a flexible `FormBuilder` component for dynamically creating forms with various input types.
 - **New Input Components:**
-  - **`pt-check-box-input`**: A customizable checkbox input component for boolean selections.
-  - **`pt-date-input`**: A versatile date input component supporting both single date and date range selections with customizable formats.
-  - **`pt-dropdown`**: A dropdown input component for selecting single options from a list.
-  - **`pt-multi-select`**: A multi-select dropdown component for selecting multiple values from a list.
-  - **`pt-number-input`**: A numeric input component with support for validation (e.g., min/max values) and formatting.
-  - **`pt-switch-input`**: A switch input component for toggling between two states.
-  - **`pt-text-area-input`**: A text area input component for multi-line text entries with customizable rows and validation.
-  - **`pt-text-input`**: A standard text input component with support for icons, placeholders, and input validation.
+  - **`pt-check-box-input`**: A customizable checkbox input component.
+  - **`pt-date-input`**: A date input component supporting single date and range selections.
+  - **`pt-dropdown`**: A select input component for choosing a single option.
+  - **`pt-multi-select`**: A multi-select component for choosing multiple values.
+  - **`pt-number-input`**: A numeric input component with validation and formatting support.
+  - **`pt-switch-input`**: A toggle switch input component.
+  - **`pt-text-area-input`**: A multi-line text area input component.
+  - **`pt-text-input`**: A standard text input component.
 
 ### Version 1.0.5
 
 - **`multi-search-criteria` Component**
-
   - Added support for `mode` input to handle dynamic and static filtering.
-    - `mode` input can be set to `'dynamic'` or `'static'`. When set to `'dynamic'`, the component emits search criteria for backend filtering. When set to `'static'`, the component filters data locally.
   - Fixed the bug in the `selectAll` functionality for multi-select filters.
-    - Users can select or deselect all options in a multi-select filter.
 
 - **`pt-advanced-prime-table` Component**
   - Added support for customizable amount formatting.
-    - New inputs for columns of type `AMOUNT`:
-      - `thousandSeparator` (`comma` or `space`): Specifies the character used for thousands separator.
-      - `decimalSeparator` (`comma` or `dot`): Specifies the character used for decimal separator.
-    - Updated the `customCurrency` pipe to handle optional currency display and customizable separators.
+  - New inputs for columns of type `AMOUNT`:
+    - `thousandSeparator` (`comma` or `space`)
+    - `decimalSeparator` (`comma` or `dot`)
+  - Updated the `customCurrency` pipe to handle optional currency display and customizable separators.
 
 ### Version 1.0.4