ngx-oneforall-mcp 1.4.0 → 1.5.1

package/data/docs.json

@@ -317,7 +317,7 @@
       "importPath": "ngx-oneforall/directives/infinite-scroll",
       "url": "https://love1024.github.io/ngx-oneforall/directives/infinite-scroll",
       "description": "Implements infinite scroll behavior using IntersectionObserver for efficient detection.",
-      "fullContent": "Implements infinite scroll behavior using IntersectionObserver for efficient detection.\n\n## Features\n\n- **IntersectionObserver** — No scroll event listeners, better performance\n- **Reactive** — Automatically reinitializes when inputs change\n- **Flexible Container** — Works with window, custom container, or auto-detects parent\n- **Configurable Threshold** — Control trigger distance via `bottomMargin`\n- **SSR Safe** — Only activates in the browser\n\n---\n\n## Installation\n\n```typescript\nimport { InfiniteScrollDirective } from 'ngx-oneforall/directives/infinite-scroll';\n```\n\n---\n\n## Basic Usage\n\n```html\n<!-- Window scrolling (default) -->\n<div infiniteScroll (scrolled)=\"loadMore()\">\n  @for (item of items(); track item.id) {\n    <div></div>\n  }\n</div>\n```\n\n---\n\n## API Reference\n\n| Input | Type | Default | Description |\n|-------|------|---------|-------------|\n| `bottomMargin` | `number` | `20` | Distance (%) from bottom to trigger |\n| `useWindow` | `boolean` | `true` | Use window vs container scroll |\n| `scrollContainer` | `string` | `null` | CSS selector for custom container |\n| `disabled` | `boolean` | `false` | Disable scroll detection |\n| `checkOnInit` | `boolean` | `true` | Emit on initial render if visible |\n| `initDelay` | `number` | `1000` | Delay (ms) to ignore initial intersections |\n\n| Output | Type | Description |\n|--------|------|-------------|\n| `scrolled` | `void` | Emits when scroll reaches threshold |\n\n---\n\n## Container Scrolling\n\nFor a specific scrollable container:\n\n```html\n<div \n  class=\"scroll-container\" \n  infiniteScroll \n  [useWindow]=\"false\"\n  [scrollContainer]=\"'.scroll-container'\"\n  (scrolled)=\"loadMore()\">\n  <!-- Items -->\n</div>\n```\n\n---\n\n## Common Use Cases\n\n### Paginated List\n\n```typescript\n@Component({\n  template: `\n    <div infiniteScroll (scrolled)=\"loadNextPage()\" [disabled]=\"loading()\">\n      @for (item of items(); track item.id) {\n        <app-item [data]=\"item\" />\n      }\n      @if (loading()) {\n        <div class=\"spinner\">Loading...</div>\n      }\n    </div>\n  `,\n  imports: [InfiniteScrollDirective]\n})\nexport class ListComponent {\n  items = signal<Item[]>([]);\n  loading = signal(false);\n  page = 0;\n\n  loadNextPage() {\n    this.loading.set(true);\n    this.api.getItems(++this.page).subscribe(newItems => {\n      this.items.update(items => [...items, ...newItems]);\n      this.loading.set(false);\n    });\n  }\n}\n```\n\n---\n\n## Live Demo"
+      "fullContent": "Implements infinite scroll behavior using IntersectionObserver for efficient detection.\n\n## Features\n\n- **IntersectionObserver** — No scroll event listeners, better performance\n- **Reactive** — Automatically reinitializes when inputs change\n- **Flexible Container** — Works with window, custom container, or auto-detects parent\n- **Configurable Threshold** — Control trigger distance via `bottomMargin`\n- **SSR Safe** — Only activates in the browser\n\n---\n\n## Installation\n\n```typescript\nimport { InfiniteScrollDirective } from 'ngx-oneforall/directives/infinite-scroll';\n```\n\n---\n\n## Basic Usage\n\n```html\n<!-- Window scrolling (default) -->\n<div infiniteScroll (scrolled)=\"loadMore()\">\n  @for (item of items(); track item.id) {\n    <div></div>\n  }\n</div>\n```\n\n---\n\n## API Reference\n\n| Input | Type | Default | Description |\n|-------|------|---------|-------------|\n| `bottomMargin` | `number` | `20` | Distance (%) from bottom to trigger |\n| `useWindow` | `boolean` | `true` | Use window vs container scroll |\n| `scrollContainer` | `string` | `null` | CSS selector for custom container |\n| `disabled` | `boolean` | `false` | Disable scroll detection |\n| `checkOnInit` | `boolean` | `true` | Emit on initial render if visible |\n\n| Output | Type | Description |\n|--------|------|-------------|\n| `scrolled` | `void` | Emits when scroll reaches threshold |\n\n---\n\n## Container Scrolling\n\nFor a specific scrollable container:\n\n```html\n<div \n  class=\"scroll-container\" \n  infiniteScroll \n  [useWindow]=\"false\"\n  [scrollContainer]=\"'.scroll-container'\"\n  (scrolled)=\"loadMore()\">\n  <!-- Items -->\n</div>\n```\n\n---\n\n## Common Use Cases\n\n### Paginated List\n\n```typescript\n@Component({\n  template: `\n    <div infiniteScroll (scrolled)=\"loadNextPage()\" [disabled]=\"loading()\">\n      @for (item of items(); track item.id) {\n        <app-item [data]=\"item\" />\n      }\n      @if (loading()) {\n        <div class=\"spinner\">Loading...</div>\n      }\n    </div>\n  `,\n  imports: [InfiniteScrollDirective]\n})\nexport class ListComponent {\n  items = signal<Item[]>([]);\n  loading = signal(false);\n  page = 0;\n\n  loadNextPage() {\n    this.loading.set(true);\n    this.api.getItems(++this.page).subscribe(newItems => {\n      this.items.update(items => [...items, ...newItems]);\n      this.loading.set(false);\n    });\n  }\n}\n```\n\n---\n\n## Live Demo"
     },
     {
       "name": "Lowercase",
@@ -341,6 +341,17 @@
       "description": "Apply input masks to format user input as they type.",
       "fullContent": "Apply input masks to format user input as they type.\n\n## Features\n\n- **Pattern-based masking** — Define mask patterns using simple characters\n- **Quantifiers** — Use `?` (optional) and `*` (zero or more) for flexible patterns\n- **Auto-insert separators** — Automatically adds separators like `-`, `/`, `(`, `)`\n- **Prefix & Suffix** — Add unmodifiable prefix and suffix strings\n- **Form validation** — Implements Angular's `Validator` interface for reactive forms\n- **SSR Safe** — Only runs in the browser\n\n---\n\n## Installation\n\n```typescript\nimport { MaskDirective } from 'ngx-oneforall/directives/mask';\n```\n\n---\n\n## Basic Usage\n\n```html\n<!-- Phone number -->\n<input [mask]=\"'(###) ###-####'\" />\n\n<!-- Credit card -->\n<input [mask]=\"'#### #### #### ####'\" />\n```\n\n---\n\n## Pattern Characters\n\n| Pattern | Description | Example |\n|---------|-------------|---------|\n| `#` | Required digit (0-9) | `###` → \"123\" |\n| `A` | Required alphanumeric | `AAA` → \"A1B\" |\n| `@` | Required letter (a-z, A-Z) | `@@@` → \"ABC\" |\n| `U` | Required uppercase letter | `UUU` → \"ABC\" |\n| `L` | Required lowercase letter | `LLL` → \"abc\" |\n\n---\n\n## Quantifiers\n\n| Quantifier | Description |\n|------------|-------------|\n| `?` | Makes the preceding pattern optional (0 or 1 match) |\n| `*` | Matches zero or more of the preceding pattern |\n\n### Practical Examples\n\n**Optional (`?`):**\n```html\n<!-- IP address (1-3 digits per octet) -->\n<input [mask]=\"'#?#?#.#?#?#.#?#?#.#?#?#'\" />\n\n<!-- License plate: \"ABC-1234\" or \"AB-1234\" -->\n<input [mask]=\"'@@?@?-####'\" />\n```\n\n**Zero or more (`*`):**\n```html\n<!-- Email: \"user@domain.com\" -->\n<input [mask]=\"'A*\\@A*.A*'\" />\n\n<!-- Hashtag: \"#a\", \"#hello\", \"#Angular\" -->\n<input [mask]=\"'\\#@*'\" />\n```\n\n---\n\n## API Reference\n\n| Input | Type | Description |\n|-------|------|-------------|\n| `mask` | `string` | The mask pattern to apply |\n| `prefix` | `string` | Text to prepend to the masked value |\n| `suffix` | `string` | Text to append to the masked value |\n| `customPatterns` | `Record<string, IConfigPattern>` | Custom patterns to extend or override built-in patterns |\n| `clearIfNotMatch` | `boolean` | If `true`, clears the input on blur when mask is incomplete (default: `false`) |\n| `specialCharacters` | `string[]` | List of characters to be treated as separators/literals. These are the ONLY non-pattern characters allowed in the mask. By default, they are removed from the raw value. (default: `['-', '/', '(', ')', '.', ':', ' ', '+', ',', '@', '[', ']', '\"', \"'\"]`) |\n| `mergeSpecialChars` | `boolean` | If `true`, merges your `specialCharacters` list with the default list. If `false` (default), uses ONLY your provided list. |\n| `removeSpecialCharacters` | `boolean` | If `true`, removes characters defined in `specialCharacters` from the raw value. If `false`, includes them. (default: `true`) |\n\n### Special Characters Configuration\n\nBy default, the directive defines common separators (like `-`, `/`, `(`) as special characters. These characters play two roles:\n1. They are **allowed** in your mask pattern as literals.\n2. They are **removed** from the model value (raw value) by default (unless `removeSpecialCharacters` is `false`).\n\n> **Warning** If your mask contains any literal characters (characters that are not patterns like `0` or `A`) that are NOT in the `specialCharacters` list (either the default list or your custom one), the directive will throw an error.\n\n**Example: Custom Special Characters**\n\n```html\n<input [mask]=\"'A-A'\" [specialCharacters]=\"['-']\" /> \n<!-- Valid because '-' is in specialCharacters -->\n\n<input [mask]=\"'A*A'\" [specialCharacters]=\"['-']\" /> \n<!-- ERROR: '*' is not a pattern and not in specialCharacters -->\n```\n\n**Example: Keep Special Characters in Raw Value**\n\n```html\n<input \n  [mask]=\"'AAA-###/###'\" \n  [specialCharacters]=\"['-', '/']\"\n  [removeSpecialCharacters]=\"false\" /> \n<!-- Input: \"ABC-123/456\" -> Raw Value: \"ABC-123/456\" -->\n<!-- '-' and '/' are kept because they are in specialCharacters and removeSpecialCharacters is false. -->\n```\n\n### IConfigPattern Interface\n\n```typescript\ninterface IConfigPattern {\n  pattern: RegExp;     // The regex pattern to match\n  optional?: boolean;  // If true, equivalent to ? quantifier\n}\n```\n\n---\n\n## Custom Patterns\n\nDefine your own pattern characters or override built-in ones:\n\n```html\n<!-- Custom hex digit pattern -->\n<input \n  [mask]=\"'XX-XX-XX'\" \n  [customPatterns]=\"{ X: { pattern: /[0-9A-Fa-f]/ } }\" />\n\n\n\n<!-- Optional pattern via property -->\n<input \n  [mask]=\"'O##'\" \n  [customPatterns]=\"{ O: { pattern: /\\\\d/, optional: true } }\" />\n```\n\n---\n\n## Validation\n\nThe directive implements Angular's `Validator` interface. When used with reactive forms, it returns a `mask` error if the input is incomplete:\n\n```typescript\n// Error object when input is incomplete\n{\n  mask: {\n    requiredMask: '(###) ###-####',  // The mask pattern\n    actualLength: 4,                 // Current length of the value\n    expectedLength: 10               // Expected length based on mask\n  }\n}\n```\n\n```html\n<input [formControl]=\"phone\" [mask]=\"'(###) ###-####'\" />\n@if (phone.errors?.['mask']) {\n  <span class=\"error\">\n    Incomplete:  phone.errors['mask'].actualLength }}/ phone.errors['mask'].expectedLength }} characters\n  </span>\n}\n```\n\n---\n\n## Demo"
     },
+    {
+      "name": "Number Input",
+      "category": "directives",
+      "categoryTitle": "Directives",
+      "dirName": "number-input",
+      "routePath": "number-input",
+      "importPath": "ngx-oneforall/directives/number-input",
+      "url": "https://love1024.github.io/ngx-oneforall/directives/number-input",
+      "description": "Formats numerical input using the browser's native Intl.NumberFormat with full local support.",
+      "fullContent": "Formats numerical input using the browser's native `Intl.NumberFormat` with full local support. \n\n## Features\n\n- **Native Formatting** — Leverages the browser's high-performance `Intl.NumberFormat` engine\n- **UX Focused** — Displays localized, formatted strings on `blur` and reveals raw numbers on `focus` for seamless editing\n- **Multi-purpose** — Built-in support for Currency, Percentages, Units, and standard Decimals\n- **Locale-aware Parsing** — Automatically normalizes local decimal separators (e.g. converting `12,34` in German locales to `12.34` internally)\n- **Forms Compatible** — Native support for Reactive and Template-driven Angular forms\n\n---\n\n## Installation\n\n```typescript\nimport { NumberInputDirective } from 'ngx-oneforall/directives/number-input';\n```\n\n---\n\n## API Reference\n\n| Input | Type | Default | Description |\n|-------|------|---------|-------------|\n| `locale` | `string` | `navigator.language` | BCP 47 language tag (e.g. `en-US`, `de-DE`, `pt-PT`) |\n| `options`    | `Intl.NumberFormatOptions` | `undefined`          | Options passed directly to the `Intl.NumberFormat` constructor. For a full list of options, see the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat). |\n| `min`        | `number`                   | `undefined`          | Minimum allowed numerical value. If `>= 0`, restricts the user from typing a `-` sign. |\n| `max`        | `number`                   | `undefined`          | Maximum allowed numerical value. |\n\n### Common Options\n\nThe `options` input accepts all `Intl.NumberFormatOptions`. Here are some of the most common configuration blocks:\n\n- **`style`**: The formatting style to use (`decimal`, `currency`, `percent`, or `unit`).\n- **`currency`**: The currency to use in currency formatting (e.g., `USD`, `EUR`, `JPY`).\n- **`useGrouping`**: Whether to use grouping separators, such as thousands separators (`true` by default).\n- **`minimumFractionDigits`**: The minimum number of fraction digits to use (range: `0-20`).\n- **`maximumFractionDigits`**: The maximum number of fraction digits to use (range: `0-20`).\n- **`notation`**: The formatting that should be used for the number (`standard`, `scientific`, `engineering`, or `compact`).\n\n---\n\n## Range Constraints\n\nYou can use `min` and `max` to enforce numerical ranges. When `min` is set to `0` or higher, the directive will automatically prevent the user from typing or pasting negative signs.\n\n### Positive Numbers Only\n```html\n<input \n  numberInput \n  min=\"0\" \n  [options]=\"{ minimumFractionDigits: 2 }\" />\n```\n\n### Age Range (0-120)\n```html\n<input \n  numberInput \n  min=\"0\" \n  max=\"120\" />\n```\n\n\n---\n\n## Validation Errors\n\nThe directive implements the `Validator` interface and returns the following error keys:\n\n| Error Key | Description | Returned Object |\n|-----------|-------------|-----------------|\n| `invalidNumber` | The input cannot be parsed into a valid number. | `{ invalidNumber: true }` |\n| `min` | The value is less than the `min` input. | `{ min: { min: number, actual: number } }` |\n| `max` | The value is greater than the `max` input. | `{ max: { max: number, actual: number } }` |\n\nExample usage in templates:\n{% raw %}\n```html\n@if (model.hasError('min')) {\n  <div>Value must be at least !</div>\n}\n```\n{% endraw %}\n\n---\n\n## Basic Usage\n\nThe directive is standalone and can be applied directly to a text input.\n\n### Currency Formatting\nDisplays formatted currency on blur (e.g., \"$1,234.56\").\n\n```html\n<input \n  numberInput \n  locale=\"en-US\" \n  [options]=\"{ style: 'currency', currency: 'USD' }\" />\n```\n\n### Percentage Formatting\nDisplays percentage values (e.g., \"85.6%\").\n\n```html\n<input \n  numberInput \n  [options]=\"{ style: 'percent', maximumFractionDigits: 1 }\" />\n```\n\n### Unit Formatting\nDisplays units supported by `Intl` (e.g., \"120 km/h\").\n\n```html\n<input \n  numberInput \n  locale=\"pt-PT\" \n  [options]=\"{ style: 'unit', unit: 'kilometer-per-hour', unitDisplay: 'long' }\" />\n```\n\n### Standard Decimal Formatting\nUseful for high-precision or grouped numbers.\n\n```html\n<input \n  numberInput \n  [options]=\"{ minimumFractionDigits: 2, useGrouping: true }\" />\n```\n\n---\n\n## Forms Integration\n\nThe directive keeps your Angular model as a clean `number | null`, regardless of what formatting is displayed visually in the input.\n\n```typescript\n@Component({\n  template: `<input numberInput [options]=\"{ style: 'currency', currency: 'USD' }\" [formControl]=\"amount\" />`,\n  imports: [NumberInputDirective, ReactiveFormsModule]\n})\nexport class PaymentFormComponent {\n  amount = new FormControl(1234.56);\n}\n```\n\n---\n\n## Live Demo"
+    },
     {
       "name": "Numbers Only",
       "category": "directives",
@@ -605,6 +616,17 @@
       "description": "The initials pipe transforms a name or string into its initials. It handles single or multiple words and allows customizing the number of initials returned.",
       "fullContent": "The `initials` pipe transforms a name or string into its initials. It handles single or multiple words and allows customizing the number of initials returned.\n\n### Installation\n\n```ts\nimport { InitialsPipe } from 'ngx-oneforall/pipes/initials';\n```\n\n### Usage\n\n```html file=\"./snippets.html\"#L2-L3\n```\n\n### Examples\n\n#### Basic Usage\n\n```html file=\"./snippets.html\"#L2-L3\n```\n\n#### Single Name\n\n```html file=\"./snippets.html\"#L6-L7\n```\n\n#### Custom Limit (1 Initial)\n\n```html file=\"./snippets.html\"#L10-L11\n```\n\n#### Custom Limit (3 Initials)\n\n```html file=\"./snippets.html\"#L14-L15\n```\n\n### Parameters\n\n| Name | Type | Default | Description |\n|------|------|---------|-------------|\n| `value` | `string` | - | The input string to transform |\n| `count` | `number` | `2` | The maximum number of initials to return |\n\n### Live Demo"
     },
+    {
+      "name": "Mask Pipe",
+      "category": "pipes",
+      "categoryTitle": "Pipes",
+      "dirName": "mask",
+      "routePath": "mask",
+      "importPath": "ngx-oneforall/pipes/mask",
+      "url": "https://love1024.github.io/ngx-oneforall/pipes/mask",
+      "description": "The MaskPipe formats a raw string or number by applying a mask pattern. It uses the same masking engine as the MaskDirective, making it ideal for displaying pre-formatted values in templates without needing an input element.",
+      "fullContent": "The `MaskPipe` formats a raw string or number by applying a mask pattern. It uses the same masking engine as the `MaskDirective`, making it ideal for displaying pre-formatted values in templates without needing an input element.\n\n> **Note** For interactive input masking (with cursor management, validation, and form integration), use the `MaskDirective` instead.\n\n---\n\n## Installation\n\n```typescript\nimport { MaskPipe } from 'ngx-oneforall/pipes/mask';\n```\n\n---\n\n## Usage\n\n```html file=\"./snippets.html\"#L2-L5\n```\n\n---\n\n## Parameters\n\n| Parameter | Type | Default | Description |\n|-----------|------|---------|-------------|\n| `value` | `string \\| number \\| null \\| undefined` | — | The raw value to mask |\n| `mask` | `string` | — | The mask pattern to apply |\n| `config` | `MaskConfig` | `{}` | Optional configuration object |\n\n### MaskConfig\n\n| Property | Type | Default | Description |\n|----------|------|---------|-------------|\n| `prefix` | `string` | `''` | Text to prepend to the masked output |\n| `suffix` | `string` | `''` | Text to append to the masked output |\n| `customPatterns` | `Record<string, IConfigPattern>` | `{}` | Custom patterns to extend or override built-ins |\n| `specialCharacters` | `string[]` | `['-', '/', '(', ')', '.', ':', ' ', '+', ',', '@', '[', ']', '\"', \"'\"]` | Characters treated as separators in the mask |\n| `mergeSpecialChars` | `boolean` | `false` | Merge custom special characters with defaults |\n| `removeSpecialCharacters` | `boolean` | `true` | Remove special characters from the raw output |\n\n---\n\n## Pattern Characters\n\n| Pattern | Description | Example |\n|---------|-------------|---------|\n| `#` | Required digit (0-9) | `###` → \"123\" |\n| `A` | Required alphanumeric | `AAA` → \"A1B\" |\n| `@` | Required letter (a-z, A-Z) | `@@@` → \"ABC\" |\n| `U` | Required uppercase letter | `UUU` → \"ABC\" |\n| `L` | Required lowercase letter | `LLL` → \"abc\" |\n\n---\n\n## Examples\n\n### Prefix & Suffix\n\n```html file=\"./snippets.html\"#L8-L11\n```\n\n### Custom Patterns\n\n```html file=\"./snippets.html\"#L14-L17\n```\n\n### Optional Quantifier\n\n```html file=\"./snippets.html\"#L20-L23\n```\n\n---\n\n## Demo"
+    },
     {
       "name": "Pluralize Pipe",
       "category": "pipes",
@@ -1252,7 +1274,7 @@
       "importPath": "ngx-oneforall/utils/unique-component-id",
       "url": "https://love1024.github.io/ngx-oneforall/utils/unique-component-id",
       "description": "Generates unique ID strings for Angular components. Useful for form elements, ARIA attributes, and dynamically created components.",
-      "fullContent": "Generates unique ID strings for Angular components. Useful for form elements, ARIA attributes, and dynamically created components.\n\n## Usage\n\n```typescript\nimport { uniqueComponentId } from 'ngx-oneforall/utils/unique-component-id';\n```\n\n## API\n\n`uniqueComponentId(prefix?: string): string`\n\n| Parameter | Type | Default | Description |\n|-----------|------|---------|-------------|\n| `prefix` | `string` | `'id'` | Prefix for the generated ID |\n\nReturns a unique string in the format `{prefix}{counter}`.\n\n```typescript\nuniqueComponentId();        // 'id1'\nuniqueComponentId();        // 'id2'\nuniqueComponentId('btn');   // 'btn1'  (independent counter)\nuniqueComponentId('input'); // 'input1' (independent counter)\nuniqueComponentId('btn');   // 'btn2'\n```\n\n> **Note**\n> Each prefix has its own independent counter. `btn1, btn2, input1, input2` instead of a shared global counter.\n\n## Example: Form Label Association\n\n```typescript\n@Component({\n  selector: 'app-text-input',\n  template: `\n    <label [attr.for]=\"inputId\"></label>\n    <input [id]=\"inputId\" type=\"text\">\n  `\n})\nexport class TextInputComponent {\n  @Input() label = '';\n  inputId = uniqueComponentId('input');\n}\n```\n\n## Example: ARIA Attributes\n\n```typescript\n@Component({\n  selector: 'app-dialog',\n  template: `\n    <div role=\"dialog\" [attr.aria-labelledby]=\"titleId\">\n      <h2 [id]=\"titleId\"></h2>\n      <ng-content></ng-content>\n    </div>\n  `\n})\nexport class DialogComponent {\n  @Input() title = '';\n  titleId = uniqueComponentId('dialog-title');\n}\n```\n\n## Example: Multiple Instances\n\n```typescript\n@Component({\n  selector: 'app-accordion-item',\n  template: `\n    <button [attr.aria-controls]=\"panelId\" (click)=\"toggle()\">\n      \n    </button>\n    <div [id]=\"panelId\" *ngIf=\"expanded\">\n      <ng-content></ng-content>\n    </div>\n  `\n})\nexport class AccordionItemComponent {\n  @Input() header = '';\n  panelId = uniqueComponentId('panel');\n  expanded = false;\n  \n  toggle() { this.expanded = !this.expanded; }\n}\n```\n\n## Use Cases\n\n- **Form controls**: Associate labels with inputs via `for`/`id` pairing\n- **ARIA attributes**: `aria-labelledby`, `aria-describedby`, `aria-controls`\n- **Dynamic components**: Ensure unique IDs across multiple instances\n- **Accordion/tabs**: Link triggers to their content panels"
+      "fullContent": "Generates unique ID strings for Angular components. Useful for form elements, ARIA attributes, and dynamically created components.\n\n## Usage\n\n```typescript\nimport { uniqueComponentId } from 'ngx-oneforall/utils/unique-component-id';\n```\n\n## API\n\n`uniqueComponentId(prefix?: string): string`\n\n| Parameter | Type | Default | Description |\n|-----------|------|---------|-------------|\n| `prefix` | `string` | `'id'` | Prefix for the generated ID |\n\nReturns a unique string in the format `{prefix}-{sessionPrefix}-{counter}`. The session prefix ensures IDs do not conflict across page reloads.\n\n```typescript\n// Assuming session prefix 'lxw9a3zb'\nuniqueComponentId();        // 'id-lxw9a3zb-1'\nuniqueComponentId();        // 'id-lxw9a3zb-2'\nuniqueComponentId('btn');   // 'btn-lxw9a3zb-1'  (independent counter)\nuniqueComponentId('input'); // 'input-lxw9a3zb-1' (independent counter)\nuniqueComponentId('btn');   // 'btn-lxw9a3zb-2'\n```\n\n> **Note**\n> Each prefix has its own independent counter. `btn-lxw9a3zb-1, btn-lxw9a3zb-2, input-lxw9a3zb-1, input-lxw9a3zb-2` instead of a shared global counter.\n\n## Example: Form Label Association\n\n```typescript\n@Component({\n  selector: 'app-text-input',\n  template: `\n    <label [attr.for]=\"inputId\"></label>\n    <input [id]=\"inputId\" type=\"text\">\n  `\n})\nexport class TextInputComponent {\n  @Input() label = '';\n  inputId = uniqueComponentId('input');\n}\n```\n\n## Example: ARIA Attributes\n\n```typescript\n@Component({\n  selector: 'app-dialog',\n  template: `\n    <div role=\"dialog\" [attr.aria-labelledby]=\"titleId\">\n      <h2 [id]=\"titleId\"></h2>\n      <ng-content></ng-content>\n    </div>\n  `\n})\nexport class DialogComponent {\n  @Input() title = '';\n  titleId = uniqueComponentId('dialog-title');\n}\n```\n\n## Example: Multiple Instances\n\n```typescript\n@Component({\n  selector: 'app-accordion-item',\n  template: `\n    <button [attr.aria-controls]=\"panelId\" (click)=\"toggle()\">\n      \n    </button>\n    <div [id]=\"panelId\" *ngIf=\"expanded\">\n      <ng-content></ng-content>\n    </div>\n  `\n})\nexport class AccordionItemComponent {\n  @Input() header = '';\n  panelId = uniqueComponentId('panel');\n  expanded = false;\n  \n  toggle() { this.expanded = !this.expanded; }\n}\n```\n\n## Use Cases\n\n- **Form controls**: Associate labels with inputs via `for`/`id` pairing\n- **ARIA attributes**: `aria-labelledby`, `aria-describedby`, `aria-controls`\n- **Dynamic components**: Ensure unique IDs across multiple instances\n- **Accordion/tabs**: Link triggers to their content panels"
     },
     {
       "name": "Credit Card",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-oneforall-mcp",
-  "version": "1.4.0",
+  "version": "1.5.1",
   "description": "MCP server for ngx-oneforall Angular utility library — gives AI tools native knowledge of all utilities",
   "type": "module",
   "bin": {