@fagon/ngx-intellitoolx 16.0.2 → 16.0.4

package/README.md

@@ -1,303 +1,386 @@
+# IntelliToolx
+
+![Angular](https://img.shields.io/badge/Angular-14%2B-red)
+![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue)
+![License](https://img.shields.io/badge/License-MIT-green)
+![Reactive Forms](https://img.shields.io/badge/Reactive%20Forms-Supported-orange)
+![Standalone Components](https://img.shields.io/badge/Standalone-Compatible-purple)
+
+## Overview
+
+IntelliToolx is a comprehensive Angular utility library designed to simplify reactive form development, validation, and user experience.
+
+It provides powerful helpers, reusable validators, smart error handling, UI components, and developer-friendly utilities that eliminate repetitive boilerplate and enforce consistent form behavior across applications.
+
+Built with scalability, accessibility, and maintainability in mind, IntelliToolx helps teams build robust, user-friendly form workflows faster and with fewer bugs.
+
+### Installation
+
+```bash
+npm install intellitoolx
+```
+
 # IntelliToolxHelper
 
 Utility helpers for working with Angular Reactive Forms, deep comparisons, change detection, and common data transformations.
 Designed to simplify form state management, prevent accidental navigation, and normalize user input.
 
-## Import
+### Import
 
-import { IntelliToolxHelper } from 'intellitoolx-helper';
+```ts
+import { IntelliToolxHelper } from "intellitoolx";
+```
 
-Methods
+## Methods
 
-## captureInitialFormValue(form)
+### captureInitialFormValue(form)
 
 Captures and clones the initial value of a form and marks it as pristine.
 
-static captureInitialValue(form: AbstractControl): any
+```ts
+static captureInitialFormValue(form: AbstractControl): any
+```
 
 Features
-Uses getRawValue() when available
-Marks form as pristine
-Returns a deep clone of the initial value
+
+- Uses getRawValue() when available
+- Marks form as pristine
+- Returns a deep clone of the initial value
 
 Example
-const initial = IntelliToolxHelper.captureInitialValue(this.form);
 
-## trimFormGroup(control)
+```ts
+const initial = IntelliToolxHelper.captureInitialFormValue(this.form);
+```
+
+### trimFormGroup(control)
 
 Recursively trims whitespace from all string values in a form.
 
+```ts
 static trimFormGroup(control: AbstractControl): void
+```
 
 Supports
-FormGroup
-FormArray
-FormControl
+
+- FormGroup
+- FormArray
+- FormControl
 
 Example
+
+```ts
 IntelliToolxHelper.trimFormGroup(this.form);
+```
 
-## deepEqual(obj1, obj2)
+### deepEqual(obj1, obj2)
 
 Performs a deep comparison between two values.
 
+```ts
 static deepEqual(obj1: any, obj2: any): boolean
+```
 
 Special behavior
-Treats null, undefined, and "" as equal
-Normalizes numeric comparisons
-Compares File objects by metadata
-Supports nested objects & arrays
+
+- Treats null, undefined, and "" as equal
+- Normalizes numeric comparisons
+- Compares File objects by metadata
+- Supports nested objects & arrays
 
 Example
+
+```ts
 IntelliToolxHelper.deepEqual(a, b);
+```
 
-## isEmpty(value)
+### isEmpty(value)
 
 Checks if a value is empty.
 
+```ts
 static isEmpty(value: any): boolean
+```
 
-Returns true for:
-null
-undefined
-empty string
-whitespace-only string
+Returns true for: `null, undefined, empty string, whitespace-only string `
 
-## clone(value)
+### clone(value)
 
 Creates a deep clone.
 
+```ts
 static clone(value: any): any
+```
 
 Uses structuredClone (Angular 14+ compatible).
 
-## formHasChanges(initialValue, form)
+### formHasChanges(initialValue, form)
 
 Determines whether a form value has changed.
 
+```ts
 static formHasChanges(initialValue: any, form: AbstractControl): boolean
+```
 
 Example
+
+```ts
 if (IntelliToolxHelper.formHasChanges(initial, this.form)) {
-// prompt user
+  // prompt user
 }
+```
 
-## confirmIfChanged(hasChanges, confirmHandler?)
+### confirmIfChanged(hasChanges, confirmHandler?)
 
 Shows confirmation if changes exist.
 
-static confirmIfChanged(
-hasChanges: boolean,
-confirmHandler?: ConfirmHandler
-): Promise<boolean>
+```ts
+static confirmIfChanged(hasChanges: boolean, confirmHandler?: ConfirmHandler): Promise<boolean>
+```
 
 Behavior
-Returns true if no changes
-Uses provided handler if available
-Falls back to browser confirm()
+
+- Returns true if no changes
+- Uses provided handler if available
+- Falls back to browser confirm()
 
 Example
-const canLeave = await IntelliToolxHelper.confirmIfChanged(
-hasChanges,
-() => dialog.confirm()
-);
 
-## registerBeforeUnload(shouldBlock, message?)
+```ts
+const canLeave = await IntelliToolxHelper.confirmIfChanged(hasChanges, () => dialog.confirm());
+```
+
+### registerBeforeUnload(shouldBlock, message?)
 
 Prevents accidental page exit when changes exist.
 
-static registerBeforeUnload(
-shouldBlock: () => boolean,
-message?: string
-): () => void
+```ts
+static registerBeforeUnload(shouldBlock: () => boolean, message?: string): () => void
+```
 
-Returns
-Cleanup function to remove the listener.
+Returns `Cleanup function to remove the listener.`
 
 Example
-const cleanup = IntelliToolxHelper.registerBeforeUnload(() =>
-this.form.dirty
-);
 
+```ts
+const cleanup = IntelliToolxHelper.registerBeforeUnload(() => this.form.dirty);
 // later
 cleanup();
+```
 
-## getFormControl(form, path)
+### getFormControl(form, path)
 
 Retrieves a nested FormControl using dot notation.
 
-static getFormControl<T>(
-form: AbstractControl,
-path: string
-): FormControl<T> | null
+```ts
+static getFormControl<T>(form: AbstractControl, path: string): FormControl<T> | null
+```
 
 Supports
-Nested FormGroups
-FormArrays using numeric indexes
+
+- Nested FormGroups
+- FormArrays using numeric indexes
 
 Example
-const control = IntelliToolxHelper.getFormControl(this.form, 'address.street');
-const item = IntelliToolxHelper.getFormControl(this.form, 'items.0.name');
 
-## convertImageToBase64(file)
+```ts
+const control = IntelliToolxHelper.getFormControl(this.form, "address.street");
+const item = IntelliToolxHelper.getFormControl(this.form, "items.0.name");
+```
+
+### convertImageToBase64(file)
 
 Converts an image file to a Base64 string.
 
+```ts
 static convertImageToBase64(file: File): Promise<string>
+```
 
 Example
+
+```ts
 const base64 = await IntelliToolxHelper.convertImageToBase64(file);
+```
 
-## replaceCharacter(text, replaceChar, replaceWithChar)
+### replaceCharacter(text, replaceChar, replaceWithChar)
 
 Replaces all occurrences of a character in a string.
 
-static replaceCharacter(
-text: any,
-replaceChar: string,
-replaceWithChar: string
-): string
+```ts
+static replaceCharacter(text: any, replaceChar: string, replaceWithChar: string): string
+```
 
 Example
-IntelliToolxHelper.replaceCharacter('1-2-3', '-', ':');
+
+```ts
+IntelliToolxHelper.replaceCharacter("1-2-3", "-", ":");
 // 1:2:3
+```
 
-## convertJsonStringToJson(value)
+### convertJsonStringToJson(value)
 
 Safely converts a JSON string into an object.
 
-static convertJsonStringToJson<T>(
-value: T | string | null | undefined
-): T | null
+```ts
+static convertJsonStringToJson<T>(value: T | string | null | undefined): T | null
+```
 
 Behavior
-Returns parsed object if valid JSON string
-Returns original object if already parsed
-Returns null if parsing fails
+
+- Returns parsed object if valid JSON string
+- Returns original object if already parsed
+- Returns null if parsing fails
 
 Example
+
+```ts
 const data = IntelliToolxHelper.convertJsonStringToJson<MyType>(jsonString);
+```
 
-### Usage Pattern (Recommended)
+Usage Pattern (Recommended)
 
-initialValue = IntelliToolxHelper.captureInitialValue(this.form);
+```ts
+initialValue = IntelliToolxHelper.captureInitialFormValue(this.form);
 
 save() {
-IntelliToolxHelper.trimFormGroup(this.form);
-
-if (!IntelliToolxHelper.formHasChanges(this.initialValue, this.form)) {
-return;
-}
+	IntelliToolxHelper.trimFormGroup(this.form);
 
-// proceed with save
+	if (!IntelliToolxHelper.formHasChanges(this.initialValue, this.form)) {
+		return;
+	}
+	// proceed with save
 }
+```
 
 # IntellitoolxRegExps
 
 A collection of commonly used regular expressions for validation in Angular and TypeScript applications.
 
-Designed for:
-Reactive Forms validation
-Input sanitization
-Reusable validation patterns
-Consistent form behavior across projects
+1. Designed for:
+2. Reactive Forms validation
+3. Input sanitization
+4. Reusable validation patterns
+5. Consistent form behavior across projects
 
-Import
-import { IntellitoolxRegExps } from 'intellitoolx-helper';
+### Import
+
+```ts
+import { IntellitoolxRegExps } from "intellitoolx";
+```
 
-Available Regular Expressions
+## Available Regular Expressions
 
-## EMAIL_REGEX
+### EMAIL_REGEX
 
-EMAIL*REGEX: /^(?=.{1,50}$)[a-zA-Z0-9.*%+-]+@[a-zA-Z0-9.-]+\.[A-Za-z]{2,}$/
+`EMAIL*REGEX: /^(?=.{1,50}$)[a-zA-Z0-9.*%+-]+@[a-zA-Z0-9.-]+\.[A-Za-z]{2,}$/`
 
 Validates an email address with:
-Maximum length of 50 characters
-Standard email format
-Requires valid domain suffix (min 2 characters)
+
+1. Maximum length of 50 characters
+2. Standard email format
+3. Requires valid domain suffix (min 2 characters)
 
 Valid Examples
-test@example.com
-user.name@mail-domain.org
-info123@test.co
+
+- test@example.com
+- user.name@mail-domain.org
+- info123@test.co
 
 Invalid Examples
-invalid-email
-user@
-@test.com
+
+- invalid-email
+- user@
+- @test.com
 
 Usage (Angular Validator)
 
+```ts
 this.form = new FormGroup({
-email: new FormControl('', [
-Validators.pattern(IntellitoolxRegExps.EMAIL_REGEX),
-]),
+  email: new FormControl("", [Validators.pattern(IntellitoolxRegExps.EMAIL_REGEX)]),
 });
+```
 
-## NUMBER_REGEX
+### NUMBER_REGEX
 
-NUMBER_REGEX: /^\d+$/
+`NUMBER_REGEX: /^\d+$/`
 
 Validates:
-Whole numbers only
-No decimals
-No negative values
-No spaces or characters
+
+- Whole numbers only
+- No decimals
+- No negative values
+- No spaces or characters
 
 Valid Examples
-1, 25, 99999
+
+- 1
+- 25
+- 99999
 
 Invalid Examples
-1.5, -10, abc
 
-## AMOUNT_REGEX
+- 1.5
+- -10
+- abc
 
-AMOUNT_REGEX: /^\d+(\.\d{1,2})?$/
+### AMOUNT_REGEX
+
+`AMOUNT_REGEX: /^\d+(\.\d{1,2})?$/`
 
 Validates monetary amounts:
-Whole numbers
-Optional decimal
-Maximum 2 decimal places
+
+1. Whole numbers
+2. Optional decimal
+3. Maximum 2 decimal places
 
 Valid Examples
-10, 10.5, 10.50, 9999.99
+
+- 10,
+- 10.5
+- 10.50
+- 9999.99
 
 Invalid Examples
-10., 10.999, abc
 
-## DOMAIN_REGEX
+- 10.
+- 10.999
+- abc
+
+### DOMAIN_REGEX
 
-DOMAIN_REGEX:
-/^(?=.{1,255}$)(https?|ftp):\/\/([\w.-]+)\.([a-z\.]{2,6})(:[0-9]{1,5})?(\/\S*)?$/
+`DOMAIN_REGEX: /^(?=.{1,255}$)(https?|ftp):\/\/([\w.-]+)\.([a-z\.]{2,6})(:[0-9]{1,5})?(\/\S*)?$/`
 
 Validates full URLs with:
 http, https, or ftp protocol
 
 Valid domain
-Optional port
-Optional path
-Maximum length of 255 characters
+
+1. Optional port
+2. Optional path
+3. Maximum length of 255 characters
 
 Valid Examples
-https://example.com, http://sub.domain.org, https://example.com:8080/path, ftp://files.server.net
+
+- https://example.com
+- http://sub.domain.org
+- https://example.com:8080/path
+- ftp://files.server.net
 
 Invalid Examples
-example.com, http:/example.com, htp://domain.com
 
-### Usage in Angular Reactive Forms
+- example.com
+- http:/example.com
+- htp://domain.com
 
+Usage in Angular Reactive Forms
+
+```ts
 this.form = new FormGroup({
-email: new FormControl('', [
-Validators.pattern(IntellitoolxRegExps.EMAIL_REGEX),
-]),
-amount: new FormControl('', [
-Validators.pattern(IntellitoolxRegExps.AMOUNT_REGEX),
-]),
-website: new FormControl('', [
-Validators.pattern(IntellitoolxRegExps.DOMAIN_REGEX),
-]),
+  email: new FormControl("", [Validators.pattern(IntellitoolxRegExps.EMAIL_REGEX)]),
+  amount: new FormControl("", [Validators.pattern(IntellitoolxRegExps.AMOUNT_REGEX)]),
+  website: new FormControl("", [Validators.pattern(IntellitoolxRegExps.DOMAIN_REGEX)]),
 });
+```
 
 # IntellitoolxFormUpdateMessage
 
@@ -305,159 +388,187 @@ A lightweight Angular standalone component that displays a configurable warning
 
 Designed to improve user experience by clearly informing users why an action (such as saving) cannot proceed.
 
-## Import
+### Import
+
+```ts
+import { IntellitoolxFormUpdateMessage } from "intellitoolx";
+```
 
-import { IntellitoolxFormUpdateMessage } from 'intellitoolx-helper';
 Because it is standalone, import it directly:
 
+```ts
 @Component({
-standalone: true,
-imports: [IntellitoolxFormUpdateMessage],
+	standalone: true,
+	imports: [IntellitoolxFormUpdateMessage],
 })
+```
 
-## Basic Usage
+Basic Usage
 
+```
 <itx-form-update-message></itx-form-update-message>
+```
 
-### Default message:
+Default message:
 
-There are no changes to save. Please modify a field to continue.
-With Configuration
+`There are no changes to save. Please modify a field to continue.`
+
+### With Configuration
 
 Customize text and styling using itxFormUpdateMessageConfig.
 
-<itx-form-update-message
-[itxFormUpdateMessageConfig]="updateMessageConfig"
+```html
+<itx-form-update-message [itxFormUpdateMessageConfig]="updateMessageConfig"> </itx-form-update-message>
+```
 
-> </itx-form-update-message>
-> updateMessageConfig = {
->   message: 'Nothing changed yet.',
->   textColor: '#0c5460',
->   backgroundColor: '#d1ecf1',
->   borderColor: '#bee5eb',
-> };
+```ts
+updateMessageConfig = {
+  message: "Nothing changed yet.",
+  textColor: "#0c5460",
+  backgroundColor: "#d1ecf1",
+  borderColor: "#bee5eb",
+};
+```
 
-## Configuration Interface
+Configuration Interface
 
+```ts
 export interface IntellitoolxFormUpdateMessageConfig {
-message?: string;
-textColor?: string;
-backgroundColor?: string;
-borderColor?: string;
-padding?: string;
-iconAndMessageGap?: string;
-borderRadius?: string;
-fontWeight?: number | string;
-iconSize?: string;
+  message?: string;
+  textColor?: string;
+  backgroundColor?: string;
+  borderColor?: string;
+  padding?: string;
+  iconAndMessageGap?: string;
+  borderRadius?: string;
+  fontWeight?: number | string;
+  iconSize?: string;
 }
+```
 
 All properties are optional.
 
-## Default Styling Behavior
-
+Default Styling Behavior
 If no configuration is provided, the component uses accessible warning styles.
 
-Property Default
-text color #963C00
-background #fff3cd
-border #f3cd5a
-padding 1rem
-border radius 0.5rem
-gap 0.5rem
-font weight 400
-icon size 1rem
+| Property      | Default |
+| ------------- | ------- |
+| text color    | #963C00 |
+| background    | #fff3cd |
+| border        | #f3cd5a |
+| padding       | 1rem    |
+| border radius | 0.5rem  |
+| gap           | 0.5rem  |
+| font weight   | 400     |
+| icon size     | 1rem    |
+
 Accessibility
 
-Uses role="alert" to notify assistive technologies
-Icon is hidden from screen readers with aria-hidden="true"
-Provides clear visual contrast for warning context
+- Uses role="alert" to notify assistive technologies
+- Icon is hidden from screen readers with aria-hidden="true"
+- Provides clear visual contrast for warning context
 
 Example: Show When No Changes Exist
-<itx-form-update-message
-\*ngIf="!formHasChanges"
+formHasChanges = false;
+
+```html
+<itx-form-update-message *ngIf="!formHasChanges"> </itx-form-update-message>
+```
+
+Example: Integrating With IntelliToolxHelper
 
-> </itx-form-update-message>
-> formHasChanges = false;
-> Example: Integrating With IntelliToolxHelper
-> hasChanges = IntelliToolxHelper.formHasChanges(this.initialValue, this.form);
-> <itx-form-update-message
->   *ngIf="!hasChanges"
-> </itx-form-update-message>
+```ts
+hasChanges = IntelliToolxHelper.formHasChanges(this.initialValue, this.form);
+```
 
-## Theming Examples
+```html
+<itx-form-update-message *ngIf="!hasChanges"> </itx-form-update-message>
+```
 
+Theming Examples
 Success Style
+
+```ts
 updateMessageConfig = {
-message: 'No updates were made.',
-textColor: '#155724',
-backgroundColor: '#d4edda',
-borderColor: '#c3e6cb',
+  message: "No updates were made.",
+  textColor: "#155724",
+  backgroundColor: "#d4edda",
+  borderColor: "#c3e6cb",
 };
+```
 
 Minimal Style
+
+```ts
 updateMessageConfig = {
-backgroundColor: 'transparent',
-borderColor: '#ddd',
-textColor: '#555',
+  backgroundColor: "transparent",
+  borderColor: "#ddd",
+  textColor: "#555",
 };
+```
 
-## When to Use
-
+When to Use
 Use this component when:
-A save/update action is triggered without changes
-Preventing redundant submissions
-Improving form UX clarity
-Displaying inline form state feedback
+
+1. A save/update action is triggered without changes
+2. Preventing redundant submissions
+3. Improving form UX clarity
+4. Displaying inline form state feedback
 
 # IntellitoolxFormErrors
 
 A lightweight Angular standalone component for displaying reactive form validation errors with customizable and extensible error messages.
-
 Built to:
-standardize validation messages
-support component-level overrides
-allow global extension of error messages
-simplify template error handling
 
-Import
-import { IntellitoolxFormErrors } from 'intellitoolx-helper';
+1. standardize validation messages
+2. support component-level overrides
+3. allow global extension of error messages
+4. simplify template error handling
+
+### Import
+
+```ts
+import { IntellitoolxFormErrors } from "intellitoolx";
+```
 
 You can import it directly into any component.
 
-## Basic Usage
+### Basic Usage
 
-<input [formControl]="emailControl" />
-<itx-form-errors [control]="emailControl"></itx-form-errors>
+```html
+<input [formControl]="emailControl" /> <itx-form-errors [control]="emailControl"></itx-form-errors>
+```
 
 Errors will display automatically when:
-control is touched
-control is invalid
 
-Default Supported Errors
+- control is touched
+- control is invalid
+
+### Default Supported Errors
+
 The component includes built-in messages for common validators:
 
-Error Key Message
-required This field is required
-email The email entered is invalid
-minlength You must enter at least X characters
-maxlength You must not enter more than X characters
-pattern Your entry must match the required pattern
-passwordMismatch Password and confirm password do not match
-futureDate Future date is not allowed
-duplicateEmail Each email must be unique
-maxWords Exceeded maximum number of words
-maxMonthYear Date is later than allowed
-minMonthYear Date is earlier than allowed
-exceededAllowedDateDifference Date difference can only be one month
-exceededLeastDateAllowed Start date cannot be greater than end date
-
-## Adding Control Labels (User-Friendly Messages)
-
-<itx-form-errors
-[control]="amountControl"
-controlLabel="Amount"
-
-> </itx-form-errors>
+| Error Key                     | Message                                    |
+| ----------------------------- | ------------------------------------------ |
+| required                      | This field is required                     |
+| email                         | The email entered is invalid               |
+| minlength                     | You must enter at least X characters       |
+| maxlength                     | You must not enter more than X characters  |
+| pattern                       | Your entry must match the required pattern |
+| passwordMismatch              | Password and confirm password do not match |
+| futureDate                    | Future date is not allowed                 |
+| duplicateEmail                | Each email must be unique                  |
+| maxWords                      | Exceeded maximum number of words           |
+| maxMonthYear                  | Date is later than allowed                 |
+| minMonthYear                  | Date is earlier than allowed               |
+| exceededAllowedDateDifference | Date difference can only be one month      |
+| exceededLeastDateAllowed      | Start date cannot be greater than end date |
+
+### Adding Control Labels (User-Friendly Messages)
+
+```html
+<itx-form-errors [control]="amountControl" controlLabel="Amount"> </itx-form-errors>
+```
 
 Example output:
 Amount cannot be greater than 100
@@ -465,482 +576,570 @@ Amount cannot be greater than 100
 Component-Level Custom Messages
 Override messages for a specific field.
 
+```ts
 componentValidation = {
-required: { message: 'Email is mandatory' },
-minlength: { message: 'Too short' },
+  required: { message: "Email is mandatory" },
+  minlength: { message: "Too short" },
 };
+```
 
-<itx-form-errors
-[control]="emailControl"
-[componentValidation]="componentValidation"
-
-> </itx-form-errors>
+```html
+<itx-form-errors [control]="emailControl" [componentValidation]="componentValidation"> </itx-form-errors>
+```
 
 ### Using Custom Validators with Messages
 
 If your validator returns an object:
-return { customMinValue: { message: 'Value is too small' } };
+
+```ts
+return { customMinValue: { message: "Value is too small" } };
+```
 
 The component will display:
 Value is too small
 
-## Extending Error Messages (Recommended)
+### Extending Error Messages (Recommended)
 
 Consumers can extend the component to add global or shared messages.
 
-### Option 1 — Extend the Component
+Option 1 — Extend the Component
 
 Create your own reusable error component:
 
-import { Component } from '@angular/core';
-import { IntellitoolxFormErrors } from 'intellitoolx-helper';
+```ts
+import { Component } from "@angular/core";
+import { IntellitoolxFormErrors } from "intellitoolx";
 
 @Component({
-selector: 'app-form-errors',
-standalone: true,
-imports: [IntellitoolxFormErrors],
-template: `     <itx-form-errors
-      [control]="control"
-      [componentValidation]="componentValidation"
-      [controlLabel]="controlLabel"
-    />
-  `,
+  selector: "app-form-errors",
+  standalone: true,
+  imports: [IntellitoolxFormErrors],
+  template: ` <itx-form-errors [control]="control" [componentValidation]="componentValidation" [controlLabel]="controlLabel" /> `,
 })
 export class AppFormErrors extends IntellitoolxFormErrors {
-override errorMessages = {
-...this.errorMessages,
-required: 'This field cannot be empty',
-phone: 'Phone number is invalid',
-usernameTaken: 'This username is already taken',
-};
+  override errorMessages = {
+    ...this.errorMessages,
+    required: "This field cannot be empty",
+    phone: "Phone number is invalid",
+    usernameTaken: "This username is already taken",
+  };
 }
+```
 
 Now use:
+
+```html
 <app-form-errors [control]="control"></app-form-errors>
+```
 
-### Option 2 — Extend via Custom Validator Keys
+Option 2 — Extend via Custom Validator Keys
 
 Return new error keys from validators:
 
+```ts
 return { usernameTaken: true };
+```
 
 Then provide the message:
 
+```ts
 componentValidation = {
-usernameTaken: { message: 'Username already exists' },
+  usernameTaken: { message: "Username already exists" },
 };
+```
 
-### Option 3 — Global Shared Messages Service (Advanced)
+Option 3 — Global Shared Messages Service (Advanced)
 
 Create a shared constant:
 
+```ts
 export const APP_ERROR_MESSAGES = {
-required: 'Required field',
-email: 'Invalid email address',
+  required: "Required field",
+  email: "Invalid email address",
 };
+```
 
 Then extend:
+
+```ts
 override errorMessages = {
 ...APP_ERROR_MESSAGES,
 };
+```
 
-## Supported Error Value Types
+### Supported Error Value Types
 
 The component intelligently handles different validator outputs:
-Boolean { required: true } → uses default or custom message
-String { customError: 'Invalid value provided' } → displays string directly
-Object { minlength: { requiredLength: 5 } } → dynamic message rendering
 
-### Built-in Smart Messages
+- Boolean { required: true } → uses default or custom message
+- String { customError: 'Invalid value provided' } → displays string directly
+- Object { minlength: { requiredLength: 5 } } → dynamic message rendering
+
+Built-in Smart Messages
 
-Pattern Errors
-Displays:
-Please provide a valid {controlLabel}
-Min / Max Validators
-Age cannot be less than 18
-Price cannot be greater than 100
-Ngb Date Errors
-Invalid date format provided
+- Pattern Errors Display: `Please provide a valid {controlLabel}`
+- Min / Max Validators Display: `Age cannot be less than 18` / `Price cannot be greater than 100`
+- Ngb Date Errors Display: `Invalid date format provided`
 
-### Best Practices
+Best Practices
 
-✔ Always provide controlLabel for better UX
-✔ Use componentValidation for field-specific overrides
-✔ Extend the component for app-wide consistency
-✔ Return structured error objects from custom validators
-✔ Keep error keys consistent across the application
+- Always provide controlLabel for better UX
+- Use componentValidation for field-specific overrides
+- Extend the component for app-wide consistency
+- Return structured error objects from custom validators
+- Keep error keys consistent across the application
 
 ### Example (Full Integration)
 
+```html
 <input formControlName="email" />
 
-<app-form-errors
-[control]="form.controls.email"
-controlLabel="Email Address"
-
-> </app-form-errors>
+<app-form-errors [control]="form.controls.email" controlLabel="Email Address"> </app-form-errors>
+```
 
 # RequiredMarkerDirective
 
 An Angular standalone directive that automatically adds a visual required marker to form labels when the associated form control has a required validator.
 This ensures consistent UX and eliminates manual asterisk management.
 
-## Import
+### Import
 
-import { RequiredMarkerDirective } from 'intellitoolx-helper';
+```ts
+import { RequiredMarkerDirective } from "intellitoolx";
+```
 
 Because it is standalone, import it directly:
 
+```ts
 @Component({
-standalone: true,
-imports: [RequiredMarkerDirective],
+	standalone: true,
+	imports: [RequiredMarkerDirective],
 })
+```
 
-## Basic Usage
+### Basic Usage
 
 Add the directive to a <label> element.
 
+```html
 <label for="email" itxRequired>Email</label>
+
 <input id="email" formControlName="email" />
+```
 
 If the control has Validators.required, the output becomes:
-Email \*
+Email\*
 
-## How It Works
+### How It Works
 
-Reads the label’s for attribute.
-Finds the matching control inside the parent FormGroup.
-Checks for Validators.required.
-Adds or removes the required marker dynamically.
-Updates when value or status changes.
-
-## Dynamic Updates
+- Reads the label’s for attribute.
+- Finds the matching control inside the parent FormGroup.
+- Checks for Validators.required.
+- Adds or removes the required marker dynamically.
+- Updates when value or status changes.
 
+Dynamic Updates
 If required validation is added or removed at runtime:
+
+```ts
 control.setValidators([Validators.required]);
 control.updateValueAndValidity();
+```
+
 The label updates automatically.
 
-## Default Marker Behavior
+### Default Marker Behavior
 
-Property Default
-marker sign \*
-color red
-spacing 0.25rem
-position after label text
-Global Configuration
+| Property             | Default |
+| -------------------- | ------- |
+| marker sign          | \*      |
+| color                | red     |
+| spacing              | 0.25rem |
+| position after label | text    |
 
-## You can configure marker appearance globally using the provided injection token.
+### Global Configuration
 
+You can configure marker appearance globally using the provided injection token.
 Step 1 — Provide Configuration
-import { REQUIRED_MARKER_GLOBAL_CONFIG } from 'intellitoolx-helper';
+
+```ts
+import { REQUIRED_MARKER_GLOBAL_CONFIG } from "intellitoolx";
 
 providers: [
-{
-provide: REQUIRED_MARKER_GLOBAL_CONFIG,
-useValue: {
-sign: '*',
-color: '#d9534f',
-spacing: '4px',
-position: 'after', // 'before' | 'after'
-},
-},
+  {
+    provide: REQUIRED_MARKER_GLOBAL_CONFIG,
+    useValue: {
+      sign: "*",
+      color: "#d9534f",
+      spacing: "4px",
+      position: "after", // 'before' | 'after'
+    },
+  },
 ];
+```
 
 Configuration Options
+
+```ts
 export interface ResolvedRequiredMarkerConfig {
-sign: string;
-color: string;
-spacing: string;
-position: 'before' | 'after';
+  sign: string;
+  color: string;
+  spacing: string;
+  position: "before" | "after";
 }
+```
 
 Positioning the Marker
-After (default)
-Email \*
-Before
-position: 'before'
-
-- Email
+After (default) `Email \*`
+Before position: 'before' `\* Email`
 
 Preserves Additional Label Text
 The directive preserves text in parentheses or suffix content.
+
+```html
 <label for="dob" itxRequired>Date of Birth (optional)</label>
+```
 
-Output when required:
-Date of Birth \* (optional)
+Output when required: `Date of Birth \* (optional)`
 Works With Nested Form Groups
-Ensure the for attribute matches the control name.
+Ensure the `for` attribute matches the control name.
+
+```html
 <label for="address.street" itxRequired>Street</label>
+
 <input formControlName="street" />
+```
 
-## Requirements
+### Requirements
 
-Must be used inside a form with FormGroupDirective
-Label for attribute must match control name
+- Must be used inside a form with FormGroupDirective
+- Label for attribute must match control name
 
-## Common Mistakes
+### Common Mistakes
 
-Missing for attribute
-Label not associated with control
-Control name mismatch
+- Missing for attribute
+- Label not associated with control
+- Control name mismatch
 
 Example (Complete)
 
+```html
 <form [formGroup]="form">
   <label for="email" itxRequired>Email</label>
   <input id="email" formControlName="email" />
 </form>
-email: new FormControl('', Validators.required);
+```
+
+```ts
+email: new FormControl("", Validators.required);
+```
 
 # JsonParsePipe
 
 An Angular standalone pipe that safely parses JSON strings into JavaScript objects.
+Built on top of `IntelliToolxHelper.convertJsonStringToJson`, this pipe prevents template errors when dealing with dynamic or stringified JSON data.
 
-Built on top of IntelliToolxHelper.convertJsonStringToJson, this pipe prevents template errors when dealing with dynamic or stringified JSON data.
-
-## Import
+### Import
 
-import { JsonParsePipe } from 'intellitoolx-helper';
+```ts
+import { JsonParsePipe } from "intellitoolx";
+```
 
 Because it is standalone, import it directly:
 
+```ts
 @Component({
-standalone: true,
-imports: [JsonParsePipe],
+	standalone: true,
+	imports: [JsonParsePipe],
 })
+```
 
-## Usage
+### Usage
 
 Basic Example
+
+```
 {{ jsonString | jsonParse | json }}
+```
 
 Input
+
+```ts
 jsonString = '{"name":"John","age":30}';
+```
 
 Output
+
+```json
 {
-"name": "John",
-"age": 30
+  "name": "John",
+  "age": 30
 }
+```
 
-## When to Use
+### When to Use
 
 Use jsonParse when:
-API responses contain stringified JSON
-Form values store serialized objects
-LocalStorage data needs parsing
-Preventing template crashes from invalid JSON
 
-## Behavior
+- API responses contain stringified JSON
+- Form values store serialized objects
+- LocalStorage data needs parsing
+- Preventing template crashes from invalid JSON
+
+### Behavior
 
 The pipe safely handles multiple input types:
 
-Input Result
-Valid JSON string Parsed object
-Invalid JSON string null
-Object Returned unchanged
-null / undefined null
+| Input                    | Result    |
+| ------------------------ | --------- |
+| Valid JSON string Parsed | object    |
+| Invalid JSON string      | null      |
+| Object Returned          | unchanged |
+| null / undefined         | null      |
 
 Examples
 Parse API Data
 
-<div *ngIf="user.data | jsonParse as parsed">
-  {{ parsed.name }}
-</div>
+```html
+<div *ngIf="user.data | jsonParse as parsed">{{ parsed.name }}</div>
+```
 
 Parse Stored JSON
+
+```
 {{ localStorageValue | jsonParse | json }}
+```
 
 Safe Access with Optional Chaining
+
+```
 {{ (settings | jsonParse)?.theme }}
+```
 
 Equivalent TypeScript Logic
 
 The pipe internally performs:
+
+```ts
 IntelliToolxHelper.convertJsonStringToJson(value);
+```
 
 Error Safety
+
 Unlike JSON.parse() directly in templates, this pipe:
-prevents runtime template errors
-avoids breaking change detection
-returns null on parsing failure
+
+- prevents runtime template errors
+- avoids breaking change detection
+- returns null on parsing failure
 
 For large datasets or repeated bindings:
 Prefer parsing in the component
+
+```ts
 parsedData = IntelliToolxHelper.convertJsonStringToJson(data);
+```
 
 # IntelliToolx Validators
 
 A set of reusable Angular Reactive Form validators designed for common business rules such as amount limits, password matching, word limits, and duplicate detection.
-
-These validators integrate seamlessly with Angular forms and work perfectly with IntellitoolxFormErrors for displaying user-friendly messages.
+These validators integrate seamlessly with Angular forms and work perfectly with `IntellitoolxFormErrors` for displaying user-friendly messages.
 
 Import
-import {
-customMaxAmountValidator,
-customMinAmountValidator,
-MaxWordsValidator,
-PasswordMismatchValidator,
-uniqueEmailsValidator
-} from 'intellitoolx-helper';
 
-## Validators Overview
+```ts
+import { customMaxAmountValidator, customMinAmountValidator, maxWordsValidator, passwordMismatchValidator, uniqueEmailsValidator } from "intellitoolx";
+```
+
+### Validators Overview
 
-Validator Purpose
-customMaxAmountValidator Enforces maximum numeric value
-customMinAmountValidator Enforces minimum numeric value
-MaxWordsValidator Limits number of words
-PasswordMismatchValidator Ensures password fields match
-uniqueEmailsValidator Prevents duplicate emails in FormArray
+| Validator                 | Purpose                                |
+| ------------------------- | -------------------------------------- |
+| customMaxAmountValidator  | Enforces maximum numeric value         |
+| customMinAmountValidator  | Enforces minimum numeric value         |
+| maxWordsValidator         | Limits number of words                 |
+| passwordMismatchValidator | Ensures password fields match          |
+| uniqueEmailsValidator     | Prevents duplicate emails in FormArray |
 
-## customMaxAmountValidator(maxValue)
+### customMaxAmountValidator(maxValue)
 
 Ensures a numeric value does not exceed a specified maximum.
+
+```ts
 customMaxAmountValidator(maxValue: number): ValidatorFn
+```
 
 Example
-amount = new FormControl('', [
-customMaxAmountValidator(1000)
-]);
+
+```ts
+amount = new FormControl("", [customMaxAmountValidator(1000)]);
+```
 
 Error Output
+
+```json
 {
-customMaxValue: {
-requiredMin: 1000,
-actual: 1200,
-message: "The value must not exceed 1000.00"
-}
+  "customMaxValue": {
+    "requiredMin": 1000,
+    "actual": 1200,
+    "message": "The value must not exceed 1000.00"
+  }
 }
+```
 
 Notes
-Accepts numeric values only
-Returns a formatted error message
-Works with IntellitoolxFormErrors automatically
 
-## customMinAmountValidator(minValue)
+- Accepts numeric values only
+- Returns a formatted error message
+- Works with IntellitoolxFormErrors automatically
+
+### customMinAmountValidator(minValue)
 
 Ensures a numeric value is at least the specified minimum.
+
+```ts
 customMinAmountValidator(minValue: number): ValidatorFn
+```
 
 Example
-amount = new FormControl('', [
-customMinAmountValidator(10)
-]);
+
+```ts
+amount = new FormControl("", [customMinAmountValidator(10)]);
+```
+
 Error Output
+
+```json
 {
-customMinValue: {
-requiredMin: 10,
-actual: 5,
-message: "The value must be at least 10.00"
-}
+  "customMinValue": {
+    "requiredMin": 10,
+    "actual": 5,
+    "message": "The value must be at least 10.00"
+  }
 }
+```
 
-## MaxWordsValidator(maxWords)
+### maxWordsValidator(maxWords)
 
 Limits the number of words in a text input.
-MaxWordsValidator(maxWords: number): ValidatorFn
+maxWordsValidator(maxWords: number): ValidatorFn
 
 Example
-description = new FormControl('', [
-MaxWordsValidator(20)
-]);
 
-### Behavior
+```ts
+description = new FormControl("", [maxWordsValidator(20)]);
+```
+
+Behavior
 
-Ignores extra whitespace
-Counts words separated by spaces
+- Ignores extra whitespace
+- Counts words separated by spaces
 
 Error Output
+
+```json
 {
-maxWords: {
-actual: 25,
-max: 20
-}
+  "maxWords": {
+    "actual": 25,
+    "max": 20
+  }
 }
+```
 
-## PasswordMismatchValidator(controlName, matchingControlName)
+### passwordMismatchValidator(controlName, matchingControlName)
 
 Validates that two form fields match (commonly used for password confirmation).
-PasswordMismatchValidator(
-controlName: string,
-matchingControlName: string
+
+```ts
+passwordMismatchValidator(
+	controlName: string,
+	matchingControlName: string
 )
+```
 
 Example
+
+```ts
 this.form = new FormGroup(
-{
-password: new FormControl(''),
-confirmPassword: new FormControl('')
-},
-{
-validators: PasswordMismatchValidator('password', 'confirmPassword')
-}
+  {
+    password: new FormControl(""),
+    confirmPassword: new FormControl(""),
+  },
+  {
+    validators: passwordMismatchValidator("password", "confirmPassword"),
+  },
 );
+```
 
 Error Output
+
+```
 { passwordMismatch: true }
+```
 
 Notes
-Error is applied to the matching control
-Ideal for password confirmation fields
 
-## uniqueEmailsValidator()
+- Error is applied to the matching control
+- Ideal for password confirmation fields
+
+### uniqueEmailsValidator()
 
 Ensures all email addresses inside a FormArray are unique.
+
+```ts
 uniqueEmailsValidator(): ValidatorFn
+```
 
 Example
+
+```ts
 this.form = new FormGroup({
-contacts: new FormArray([
-new FormGroup({
-email: new FormControl('')
-})
-])
+  contacts: new FormArray([
+    new FormGroup({
+      email: new FormControl(""),
+    }),
+  ]),
 });
 
 this.contacts.setValidators(uniqueEmailsValidator());
+```
 
-### Behavior
+Behavior
 
-Ignores case and whitespace
-Flags duplicates automatically
-Updates errors dynamically
+- Ignores case and whitespace
+- Flags duplicates automatically
+- Updates errors dynamically
 
-Error Output (control level)
-{ duplicateEmail: true }
-Error Output (form array level)
-{ duplicateEmails: true }
+Error Output (control level) `{ duplicateEmail: true }`
+Error Output (form array level) `{ duplicateEmails: true }`
 
 ### Integration with IntellitoolxFormErrors
 
 These validators return error keys compatible with the error component:
-Validator Error Key
-customMaxAmountValidator customMaxValue
-customMinAmountValidator customMinValue
-MaxWordsValidator maxWords
-PasswordMismatchValidator passwordMismatch
-uniqueEmailsValidator duplicateEmail
 
-### Best Practices
+| Validator Error           | Key              |
+| ------------------------- | ---------------- |
+| customMaxAmountValidator  | customMaxValue   |
+| customMinAmountValidator  | customMinValue   |
+| maxWordsValidator         | maxWords         |
+| passwordMismatchValidator | passwordMismatch |
+| uniqueEmailsValidator     | duplicateEmail   |
+
+Best Practices
 
-✔ Use with Reactive Forms only
-✔ Combine with required validators when necessary
-✔ Provide control labels for better error messages
-✔ Normalize numeric inputs before validation
-✔ Use FormArray validators for dynamic lists
+- Use with Reactive Forms only
+- Combine with required validators when necessary
+- Provide control labels for better error messages
+- Normalize numeric inputs before validation
+- Use FormArray validators for dynamic lists
 
 ### Complete Example
 
+```ts
 this.form = new FormGroup({
-amount: new FormControl('', [
-customMinAmountValidator(10),
-customMaxAmountValidator(1000),
-]),
-description: new FormControl('', [
-MaxWordsValidator(20)
-]),
+  amount: new FormControl("", [customMinAmountValidator(10), customMaxAmountValidator(1000)]),
+  description: new FormControl("", [maxWordsValidator(20)]),
 });
+```
 
 License
 MIT