ngx-oneforall-mcp 1.3.0 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data/docs.json +38 -5
- package/package.json +1 -1
package/data/docs.json
CHANGED
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"importPath": "ngx-oneforall/getting-started/introduction",
|
|
21
21
|
"url": "https://love1024.github.io/ngx-oneforall/getting-started/introduction",
|
|
22
22
|
"description": "Every utility is written from scratch and optimized specifically for Angular. We prioritize memory efficiency and runtime performance rather than just wrapping existing heavy libraries. Maximum size of a utility is 3kb gzipped.",
|
|
23
|
-
"fullContent": "**ngx-oneforall** is a collection of 100+ high-quality Angular utilities designed to solve common development challenges. Instead of reinventing the wheel or managing dozens of small dependencies, you get a unified toolkit that just works.\n\n\n\n> **One For All** - A single library providing the essential blocks for modern Angular development.\n\n\n# Key Features\n\n### Performance & Efficiency\nEvery utility is written from scratch and optimized specifically for Angular. We prioritize memory efficiency and runtime performance rather than just wrapping existing heavy libraries. Maximum size of a utility is 3kb gzipped.\n\n### Modular & Tree-shakable\nImport only what you use. The library is fully tree-shakable, so adding one utility doesn't bloat your bundle with the rest of the library.\n\n### Zero Dependencies\nWe keep the dependency tree clean. **ngx-oneforall** has **NO third-party dependencies** (except `libphonenumber-js` for the phone validator). This reduces security risks, simplifies updates, and prevents version conflicts.\n\n### First-Class SSR Support\nBuilt for modern hydration. Every component and utility is designed to work seamlessly in Server-Side Rendering (SSR) environments out of the box.\n\n### 100% Test Coverage\nWe take reliability seriously. The entire library is fully covered by tests to ensure edge cases are handled and behavior remains consistent across updates.\n\n### Built for Modern Angular\nDesigned with **Signals** and **Standalone Components** in mind. This isn't a legacy port—it's built for the current and future state of Angular.\n\n---\n\n# Why Use It?\n\n### Stop Re-writing Utilities\nAvoid copy-pasting the same regex patterns, validators, and helper functions between projects. Use a standardized, tested set of utilities instead.\n\n### Focus on Business Logic\nDon't waste time maintaining generic boilerplate code. Use these proven primitives to build your actual application features faster.\n\n### Better Developer Experience\nFully typed APIs and consistent behavior make these utilities predictable and easy to work with. You get strict typing and comprehensive documentation right in your IDE.\n\n---\n\n# Available Utilities\n\n| Category | Utilities |\n|----------|-----------|\n| **Constants** | `breakpoints`, `device`, `file-extension`, `host-platforms`, `http`, `key`, `regex`, `sort-direction`, `time`, `types` |\n| **Decorators** | `cache`, `catch-error`, `debounce`, `log-execution-time`, `memoize`, `only-in-browser`, `throttle` |\n| **Directives** | `auto-focus`, `click-outside`, `click-throttle`, `hover-class`, `infinite-scroll`, `numbers-only`, `press-enter`, `repeat`, `resized`, `shortcut`, `typed-template`, `visibility-change` |\n| **Guards** | `param`, `query-param`, `unsaved-changes` |\n| **Interceptors** | `base-url`, `cache`, `correlation-id`, `encryption`, `jwt`, `performance`, `timeout` |\n| **Pipes** | `bytes`, `call`, `first-error-key`, `highlight-search`, `initials`, `pluralize`, `range`, `safe-html`, `time-ago`, `truncate` |\n| **Rxjs** | `backoff-retry`, `catch-error-with-fallback`, `data-polling`, `debug`, `live-search`, `loading-status` |\n| **Services** | `cache`, `clipboard`, `cookie`, `device`, `event`, `history`, `idle`, `jwt`, `logger`, `network-status`, `shortcut`, `storage` |\n| **Signals** | `breakpoint-matcher`, `debounced-signal`, `deep-computed`, `event-signal`, `interval-signal`, `route-param-signal`, `route-query-param-signal`, `router-event-signal`, `state-signal`, `storage-signal`, `throttled-signal`, `websocket-signal` |\n| **Utils** | `base64`, `download-link`, `find-type`, `hash`, `host-platform`, `is-key-defined`, `is-number`, `is-present`, `is-record`, `normalize-key`, `safe-await`, `safe-serialize`, `unique-component-id` |\n| **Validators** | `credit-card`, `date`, `match-field`, `max-date`, `min-date`, `min-length-trimmed`, `not-blank`, `number`, `phone`, `range`, `range-length`, `url` |\n\n---\n\n# Issues & Feature Requests\n\nFound a bug or edge case? Have an idea for a new utility? We'd love to hear from you!\n\n- **Report Issues**: If you encounter any bugs or unexpected behavior, please [open an issue](https://github.com/love1024/ngx-oneforall/issues).\n- **Feature Requests**: Have a utility in mind that would benefit the community? Submit a feature request via [GitHub Issues](https://github.com/love1024/ngx-oneforall/issues)."
|
|
23
|
+
"fullContent": "**ngx-oneforall** is a collection of 100+ high-quality Angular utilities designed to solve common development challenges. Instead of reinventing the wheel or managing dozens of small dependencies, you get a unified toolkit that just works.\n\n\n\n> **One For All** - A single library providing the essential blocks for modern Angular development.\n\n\n# Key Features\n\n### Performance & Efficiency\nEvery utility is written from scratch and optimized specifically for Angular. We prioritize memory efficiency and runtime performance rather than just wrapping existing heavy libraries. Maximum size of a utility is 3kb gzipped.\n\n### Modular & Tree-shakable\nImport only what you use. The library is fully tree-shakable, so adding one utility doesn't bloat your bundle with the rest of the library.\n\n### Zero Dependencies\nWe keep the dependency tree clean. **ngx-oneforall** has **NO third-party dependencies** (except `libphonenumber-js` for the phone validator). This reduces security risks, simplifies updates, and prevents version conflicts.\n\n### First-Class SSR Support\nBuilt for modern hydration. Every component and utility is designed to work seamlessly in Server-Side Rendering (SSR) environments out of the box.\n\n### 100% Test Coverage\nWe take reliability seriously. The entire library is fully covered by tests to ensure edge cases are handled and behavior remains consistent across updates.\n\n### Built for Modern Angular\nDesigned with **Signals** and **Standalone Components** in mind. This isn't a legacy port—it's built for the current and future state of Angular.\n\n---\n\n# Why Use It?\n\n### Stop Re-writing Utilities\nAvoid copy-pasting the same regex patterns, validators, and helper functions between projects. Use a standardized, tested set of utilities instead.\n\n### Focus on Business Logic\nDon't waste time maintaining generic boilerplate code. Use these proven primitives to build your actual application features faster.\n\n### Better Developer Experience\nFully typed APIs and consistent behavior make these utilities predictable and easy to work with. You get strict typing and comprehensive documentation right in your IDE.\n\n---\n\n# Available Utilities\n\n| Category | Utilities |\n|----------|-----------|\n| **Constants** | `breakpoints`, `device`, `file-extension`, `host-platforms`, `http`, `key`, `regex`, `sort-direction`, `time`, `types` |\n| **Decorators** | `cache`, `catch-error`, `debounce`, `log-execution-time`, `memoize`, `only-in-browser`, `throttle` |\n| **Directives** | `auto-focus`, `click-outside`, `click-throttle`, `hover-class`, `infinite-scroll`, `numbers-only`, `press-enter`, `repeat`, `resized`, `shortcut`, `show-for`, `typed-template`, `visibility-change` |\n| **Guards** | `param`, `query-param`, `unsaved-changes` |\n| **Interceptors** | `base-url`, `cache`, `correlation-id`, `encryption`, `jwt`, `performance`, `timeout` |\n| **Pipes** | `bytes`, `call`, `first-error-key`, `highlight-search`, `initials`, `pluralize`, `range`, `safe-html`, `time-ago`, `truncate` |\n| **Rxjs** | `backoff-retry`, `catch-error-with-fallback`, `data-polling`, `debug`, `live-search`, `loading-status` |\n| **Services** | `cache`, `clipboard`, `cookie`, `device`, `event`, `history`, `idle`, `jwt`, `logger`, `network-status`, `shortcut`, `storage` |\n| **Signals** | `breakpoint-matcher`, `debounced-signal`, `deep-computed`, `event-signal`, `interval-signal`, `route-param-signal`, `route-query-param-signal`, `router-event-signal`, `state-signal`, `storage-signal`, `throttled-signal`, `websocket-signal` |\n| **Utils** | `base64`, `download-link`, `find-type`, `hash`, `host-platform`, `is-key-defined`, `is-number`, `is-present`, `is-record`, `normalize-key`, `safe-await`, `safe-serialize`, `unique-component-id` |\n| **Validators** | `credit-card`, `date`, `match-field`, `max-date`, `min-date`, `min-length-trimmed`, `not-blank`, `number`, `phone`, `range`, `range-length`, `url` |\n\n---\n\n# Issues & Feature Requests\n\nFound a bug or edge case? Have an idea for a new utility? We'd love to hear from you!\n\n- **Report Issues**: If you encounter any bugs or unexpected behavior, please [open an issue](https://github.com/love1024/ngx-oneforall/issues).\n- **Feature Requests**: Have a utility in mind that would benefit the community? Submit a feature request via [GitHub Issues](https://github.com/love1024/ngx-oneforall/issues)."
|
|
24
24
|
},
|
|
25
25
|
{
|
|
26
26
|
"name": "LLMs.txt",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"importPath": "ngx-oneforall/getting-started/mcp-server",
|
|
43
43
|
"url": "https://love1024.github.io/ngx-oneforall/getting-started/mcp-server",
|
|
44
44
|
"description": "Connect AI tools to ngx-oneforall documentation using the Model Context Protocol (MCP).",
|
|
45
|
-
"fullContent": "Connect AI tools to ngx-oneforall documentation using the Model Context Protocol (MCP).\n\nThe MCP server gives AI assistants like Claude, Cursor, Windsurf, and VS Code Copilot **native knowledge** of all ngx-oneforall utilities — including correct import paths, API references, and usage examples.\n\n---\n\n## What is MCP?\n\nMCP (Model Context Protocol) is a standard that lets AI tools connect to external knowledge sources. Instead of the AI guessing about your library, it can **look up real documentation** in real-time.\n\nWithout MCP, an AI might hallucinate:\n```typescript\n// ❌ Wrong import path\nimport { Draggable } from 'ngx-oneforall';\n```\n\nWith MCP, the AI looks up the correct import:\n```typescript\n// ✅ Correct import path\nimport { DraggableDirective } from 'ngx-oneforall/directives/draggable';\n```\n\n---\n\n## Installation\n\nInstall the MCP server globally or use it via `npx`:\n\n```bash\nnpx ngx-oneforall-mcp\n```\n\nNo additional dependencies are required in your Angular project.\n\n---\n\n## Setup by AI Tool\n\n### Claude Desktop\n\nEdit `~/Library/Application Support/Claude/claude_desktop_config.json` (macOS) or `%APPDATA%\\Claude\\claude_desktop_config.json` (Windows):\n\n```json\n{\n \"mcpServers\": {\n \"ngx-oneforall\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"ngx-oneforall-mcp\"]\n }\n }\n}\n```\n\nRestart Claude Desktop after saving.\n\n### Cursor\n\nEdit `.cursor/mcp.json` in your project root:\n\n```json\n{\n \"mcpServers\": {\n \"ngx-oneforall\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"ngx-oneforall-mcp\"]\n }\n }\n}\n```\n\n### Windsurf\n\nEdit `~/.codeium/windsurf/mcp_config.json`:\n\n```json\n{\n \"mcpServers\": {\n \"ngx-oneforall\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"ngx-oneforall-mcp\"]\n }\n }\n}\n```\n\n### VS Code (GitHub Copilot)\n\nEdit `.vscode/mcp.json` in your project root:\n\n```json\n{\n \"servers\": {\n \"ngx-oneforall\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"ngx-oneforall-mcp\"]\n }\n }\n}\n```\n\n---\n\n## Available Tools\n\nOnce configured, your AI assistant can use these tools automatically:\n\n| Tool | What it does |\n|------|-------------|\n| `get_utility_docs` | Returns full documentation for any utility by name |\n| `search_utilities` | Searches utilities by keyword across names, descriptions, and docs |\n| `list_utilities` | Lists all utilities, optionally filtered by category |\n| `get_import_path` | Returns the exact TypeScript import statement for a utility |\n\n---\n\n## Example Usage\n\nAfter setup, just ask your AI assistant naturally:\n\n- *\"How do I use the draggable directive from ngx-oneforall?\"*\n- *\"What validators does ngx-oneforall provide?\"*\n- *\"Show me the import path for the time-ago pipe\"*\n- *\"What signals are available for reactive routing?\"*\n\nThe AI will automatically call the MCP server to look up accurate documentation and provide correct answers.\n\n---\n\n## Resources\n\nThe MCP server also exposes resources that AI tools can read directly:\n\n| Resource | URI |\n|----------|-----|\n| Structured index | `ngx-oneforall://llms.txt` |\n| Per-utility docs | `ngx-oneforall://docs/{category}/{utility}` |"
|
|
45
|
+
"fullContent": "Connect AI tools to ngx-oneforall documentation using the Model Context Protocol (MCP).\n\nThe MCP server gives AI assistants like Claude, Cursor, Windsurf, and VS Code Copilot **native knowledge** of all ngx-oneforall utilities — including correct import paths, API references, and usage examples.\n\n---\n\n## What is MCP?\n\nMCP (Model Context Protocol) is a standard that lets AI tools connect to external knowledge sources. Instead of the AI guessing about your library, it can **look up real documentation** in real-time.\n\nWithout MCP, an AI might hallucinate:\n```typescript\n// ❌ Wrong import path\nimport { Draggable } from 'ngx-oneforall';\n```\n\nWith MCP, the AI looks up the correct import:\n```typescript\n// ✅ Correct import path\nimport { DraggableDirective } from 'ngx-oneforall/directives/draggable';\n```\n\n---\n\n## Installation\n\nInstall the MCP server globally or use it via `npx`:\n\n```bash\nnpx ngx-oneforall-mcp\n```\n\nNo additional dependencies are required in your Angular project.\n\n---\n\n## Setup by AI Tool\n\n### Claude Desktop\n\nEdit `~/Library/Application Support/Claude/claude_desktop_config.json` (macOS) or `%APPDATA%\\Claude\\claude_desktop_config.json` (Windows):\n\n```json\n{\n \"mcpServers\": {\n \"ngx-oneforall\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"ngx-oneforall-mcp\"]\n }\n }\n}\n```\n\nRestart Claude Desktop after saving.\n\n### Cursor\n\nEdit `.cursor/mcp.json` in your project root:\n\n```json\n{\n \"mcpServers\": {\n \"ngx-oneforall\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"ngx-oneforall-mcp\"]\n }\n }\n}\n```\n\n### Windsurf\n\nEdit `~/.codeium/windsurf/mcp_config.json`:\n\n```json\n{\n \"mcpServers\": {\n \"ngx-oneforall\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"ngx-oneforall-mcp\"]\n }\n }\n}\n```\n\n### VS Code (GitHub Copilot)\n\nEdit `.vscode/mcp.json` in your project root:\n\n```json\n{\n \"servers\": {\n \"ngx-oneforall\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"ngx-oneforall-mcp\"]\n }\n }\n}\n```\n\n### Antigravity\n\nConfigure your Antigravity agent settings:\n\n```json\n{\n \"mcpServers\": {\n \"ngx-oneforall\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"ngx-oneforall-mcp\"]\n }\n }\n}\n```\n\n---\n\n## Available Tools\n\nOnce configured, your AI assistant can use these tools automatically:\n\n| Tool | What it does |\n|------|-------------|\n| `get_utility_docs` | Returns full documentation for any utility by name |\n| `search_utilities` | Searches utilities by keyword across names, descriptions, and docs |\n| `list_utilities` | Lists all utilities, optionally filtered by category |\n| `get_import_path` | Returns the exact TypeScript import statement for a utility |\n\n---\n\n## Example Usage\n\nAfter setup, just ask your AI assistant naturally:\n\n- *\"How do I use the draggable directive from ngx-oneforall?\"*\n- *\"What validators does ngx-oneforall provide?\"*\n- *\"Show me the import path for the time-ago pipe\"*\n- *\"What signals are available for reactive routing?\"*\n\nThe AI will automatically call the MCP server to look up accurate documentation and provide correct answers.\n\n---\n\n## Resources\n\nThe MCP server also exposes resources that AI tools can read directly:\n\n| Resource | URI |\n|----------|-----|\n| Structured index | `ngx-oneforall://llms.txt` |\n| Per-utility docs | `ngx-oneforall://docs/{category}/{utility}` |"
|
|
46
46
|
},
|
|
47
47
|
{
|
|
48
48
|
"name": "Breakpoints",
|
|
@@ -284,7 +284,7 @@
|
|
|
284
284
|
"importPath": "ngx-oneforall/directives/drag-auto-scroll",
|
|
285
285
|
"url": "https://love1024.github.io/ngx-oneforall/directives/drag-auto-scroll",
|
|
286
286
|
"description": "Automatically scrolls a container when a dragged item approaches the top or bottom edge. Apply to any scrollable element used with drag-and-drop.",
|
|
287
|
-
"fullContent": "Automatically scrolls a container when a dragged item approaches the top or bottom edge. Apply to any scrollable element used with drag-and-drop.\n\n## Features\n\n- **CDK & Native Compatible** — Listens on `document` so it works with CDK drag-drop and native HTML5 drag\n- **Proportional Speed** — Scrolls faster as the cursor gets closer to the edge\n- **Horizontal Bounds** — Only triggers when the cursor is horizontally over the container (with configurable tolerance)\n- **Configurable** — Customize margin zone, max speed, and horizontal tolerance\n- **Zone Optimized** — Runs outside Angular zone for better performance\n- **SSR Safe** — Only activates in the browser\n- **Toggleable** — Enable/disable via `dragAutoScrollDisabled` input\n\n---\n\n## Installation\n\n```typescript\nimport { DragAutoScrollDirective } from 'ngx-oneforall/directives/drag-auto-scroll';\n```\n\n---\n\n## Basic Usage\n\n```html\n<ul dragAutoScroll style=\"overflow-y: auto; height: 400px\">\n @for (item of items; track $index) {\n <li draggable=\"true\"></li>\n }\n</ul>\n```\n\n---\n\n## API Reference\n\n| Input | Type | Default | Description |\n|---|---|---|---|\n| `dragAutoScrollMargin` | `number` | `50` | Edge zone height (px) that triggers scrolling |\n| `dragAutoScrollSpeed` | `number` | `10` | Maximum scroll speed (px/frame) |\n| `dragAutoScrollTolerance` | `number` | `50` | Horizontal tolerance (px) outside container bounds above which scrolling does not trigger |\n| `dragAutoScrollDisabled` | `boolean` | `false` | Disables auto-scroll behavior |\n\n### `dragAutoScrollMargin`\n\nDefines the height (in pixels) of the invisible zone at the top and bottom edges of the container. When the cursor enters this zone during a drag, scrolling begins. Larger values make it easier to trigger scrolling, smaller values require the cursor to be closer to the edge.\n\n### `dragAutoScrollSpeed`\n\nThe maximum scroll speed in pixels per animation frame. The actual speed scales proportionally — when the cursor is at the very edge, it scrolls at full speed; at the outer boundary of the margin zone, it scrolls slowly. Increase for long lists where users need to scroll quickly.\n\n### `dragAutoScrollTolerance`\n\nHow far (in pixels) the cursor can be **horizontally** outside the container's left/right edges before scrolling stops. This prevents accidental scrolling when the cursor drifts sideways during a drag. Set to `0` to require the cursor to be strictly inside the container horizontally.\n\n### `dragAutoScrollDisabled`\n\nWhen `true`, the directive stops responding to drag events entirely. Useful for conditionally disabling auto-scroll based on application state.\n\n---\n\n## Custom Configuration\n\nIncrease the edge zone and scroll speed for large lists:\n\n```html\n<div\n dragAutoScroll\n [dragAutoScrollMargin]=\"80\"\n [dragAutoScrollSpeed]=\"15\"\n style=\"overflow-y: auto; max-height: 600px\"\n>\n <!-- draggable content -->\n</div>\n```\n\n---\n\n## How It Works\n\n1. The directive listens for `dragover` events on `document` (works even when a drag preview covers the container)\n2. It checks the cursor is horizontally within the container bounds (± tolerance)\n3. When the cursor enters the top or bottom margin zone, scrolling starts via `requestAnimationFrame`\n4. Scroll speed scales linearly — the closer to the edge, the faster it scrolls\n5. Scrolling stops on `drop`, `dragend`, or when the cursor moves to the center or outside bounds\n\n---\n\n## Live Demo"
|
|
287
|
+
"fullContent": "Automatically scrolls a container when a dragged item approaches the top or bottom edge. Apply to any scrollable element used with drag-and-drop.\n\n## Features\n\n- **CDK & Native Compatible** — Listens on `document` so it works with CDK drag-drop and native HTML5 drag\n- **Smart Target Auto-Detection** — Automatically finds the nearest scrollable parent element, with a graceful fallback to the `window`\n- **Explicit Scroll Target** — Optionally define exactly which element or window should scroll\n- **Proportional Speed** — Scrolls faster as the cursor gets closer to the edge\n- **Horizontal Bounds** — Only triggers when the cursor is horizontally over the container (with configurable tolerance)\n- **Configurable** — Customize margin zone, max speed, and horizontal tolerance\n- **Zone Optimized** — Runs outside Angular zone for better performance\n- **SSR Safe** — Only activates in the browser\n- **Toggleable** — Enable/disable via `dragAutoScrollDisabled` input\n\n> **Note**\n> By default, the directive is smart enough to find the scrollable container even if it's placed on a non-scrollable child element. If it fails to find an element with `overflow-y: auto` or `scroll`, it will scroll the `window`.\n\n---\n\n## Installation\n\n```typescript\nimport { DragAutoScrollDirective } from 'ngx-oneforall/directives/drag-auto-scroll';\n```\n\n---\n\n## Basic Usage\n\n```html\n<ul dragAutoScroll style=\"overflow-y: auto; height: 400px\">\n @for (item of items; track $index) {\n <li draggable=\"true\"></li>\n }\n</ul>\n```\n\n---\n\n## API Reference\n\n| Input | Type | Default | Description |\n|---|---|---|---|\n| `dragAutoScrollMargin` | `number` | `50` | Edge zone height (px) that triggers scrolling |\n| `dragAutoScrollSpeed` | `number` | `10` | Maximum scroll speed (px/frame) |\n| `dragAutoScrollTolerance` | `number` | `50` | Horizontal tolerance (px) outside container bounds above which scrolling does not trigger |\n| `dragAutoScrollDisabled` | `boolean` | `false` | Disables auto-scroll behavior |\n| `dragAutoScrollTarget` | `HTMLElement \\| Window \\| 'window'` | `undefined` | Optional explicit target to scroll instead of auto-detecting |\n\n### `dragAutoScrollTarget`\n\nBy default, the directive auto-detects the nearest scrollable parent. Use this input if you want to override the auto-detection and explicitly define the scroll target. It accepts an `HTMLElement`, the global `Window` object, or the string literal `'window'`.\n\n### `dragAutoScrollMargin`\n\nDefines the height (in pixels) of the invisible zone at the top and bottom edges of the container. When the cursor enters this zone during a drag, scrolling begins. Larger values make it easier to trigger scrolling, smaller values require the cursor to be closer to the edge.\n\n### `dragAutoScrollSpeed`\n\nThe maximum scroll speed in pixels per animation frame. The actual speed scales proportionally — when the cursor is at the very edge, it scrolls at full speed; at the outer boundary of the margin zone, it scrolls slowly. Increase for long lists where users need to scroll quickly.\n\n### `dragAutoScrollTolerance`\n\nHow far (in pixels) the cursor can be **horizontally** outside the container's left/right edges before scrolling stops. This prevents accidental scrolling when the cursor drifts sideways during a drag. Set to `0` to require the cursor to be strictly inside the container horizontally.\n\n### `dragAutoScrollDisabled`\n\nWhen `true`, the directive stops responding to drag events entirely. Useful for conditionally disabling auto-scroll based on application state.\n\n---\n\n## Custom Configuration\n\nIncrease the edge zone and scroll speed for large lists:\n\n```html\n<div\n dragAutoScroll\n [dragAutoScrollMargin]=\"80\"\n [dragAutoScrollSpeed]=\"15\"\n style=\"overflow-y: auto; max-height: 600px\"\n>\n <!-- draggable content -->\n</div>\n```\n\n---\n\n## How It Works\n\n1. The directive listens for `dragover` events on `document` (works even when a drag preview covers the container)\n2. It checks the cursor is horizontally within the container bounds (± tolerance)\n3. When the cursor enters the top or bottom margin zone, scrolling starts via `requestAnimationFrame`\n4. Scroll speed scales linearly — the closer to the edge, the faster it scrolls\n5. Scrolling stops on `drop`, `dragend`, or when the cursor moves to the center or outside bounds\n\n---\n\n## Live Demo"
|
|
288
288
|
},
|
|
289
289
|
{
|
|
290
290
|
"name": "Draggable",
|
|
@@ -341,6 +341,17 @@
|
|
|
341
341
|
"description": "Apply input masks to format user input as they type.",
|
|
342
342
|
"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"
|
|
343
343
|
},
|
|
344
|
+
{
|
|
345
|
+
"name": "Number Input",
|
|
346
|
+
"category": "directives",
|
|
347
|
+
"categoryTitle": "Directives",
|
|
348
|
+
"dirName": "number-input",
|
|
349
|
+
"routePath": "number-input",
|
|
350
|
+
"importPath": "ngx-oneforall/directives/number-input",
|
|
351
|
+
"url": "https://love1024.github.io/ngx-oneforall/directives/number-input",
|
|
352
|
+
"description": "Formats numerical input using the browser's native Intl.NumberFormat with full local support.",
|
|
353
|
+
"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"
|
|
354
|
+
},
|
|
344
355
|
{
|
|
345
356
|
"name": "Numbers Only",
|
|
346
357
|
"category": "directives",
|
|
@@ -350,7 +361,7 @@
|
|
|
350
361
|
"importPath": "ngx-oneforall/directives/numbers-only",
|
|
351
362
|
"url": "https://love1024.github.io/ngx-oneforall/directives/numbers-only",
|
|
352
363
|
"description": "Restricts user input to valid numeric values with configurable decimal places and negative number support.",
|
|
353
|
-
"fullContent": "Restricts user input to valid numeric values with configurable decimal places and negative number support.\n\n## Features\n\n- **Input Validation** — Blocks non-numeric characters on input, paste, and cut\n- **Decimal Control** — Configure allowed decimal places\n- **Negative Support** — Optionally allow negative numbers\n- **Custom Separator** — Use any decimal separator (`.`, `,`, etc.)\n- **Forms Compatible** — Works with both native inputs and Angular forms\n\n---\n\n## Installation\n\n```typescript\nimport { NumbersOnlyDirective } from 'ngx-oneforall/directives/numbers-only';\n```\n\n---\n\n## API Reference\n\n| Input | Type | Default | Description |\n|-------|------|---------|-------------|\n| `decimals` | `number` | `0` | Decimal places allowed (0 = integers only) |\n| `negative` | `boolean` | `false` | Allow negative numbers |\n| `separator` | `string` | `'.'` | Decimal separator character |\n\n---\n\n## Basic Usage\n\n```html\n<!-- Integers only (default) -->\n<input numbersOnly />\n\n<!-- Allow 2 decimal places -->\n<input numbersOnly [decimals]=\"2\" />\n\n<!-- Allow negative values -->\n<input numbersOnly [negative]=\"true\" />\n\n<!-- Custom separator (comma) -->\n<input numbersOnly [decimals]=\"2\" [separator]=\"','\" />\n```\n\n---\n\n## Common Use Cases\n\n### Currency Input\n\n```html\n<input \n numbersOnly \n [decimals]=\"2\" \n placeholder=\"$0.00\" />\n```\n\n### Quantity Field\n\n```html\n<input \n numbersOnly \n [negative]=\"true\" \n placeholder=\"Enter quantity\" />\n```\n\n### Reactive Forms\n\n```typescript\n@Component({\n template: `<input numbersOnly [decimals]=\"2\" [formControl]=\"price\" />`,\n imports: [NumbersOnlyDirective, ReactiveFormsModule]\n})\nexport class PriceFormComponent {\n price = new FormControl('');\n}\n```\n\n---\n\n## Live Demo"
|
|
364
|
+
"fullContent": "Restricts user input to valid numeric values with configurable decimal places and negative number support.\n\n## Features\n\n- **Input Validation** — Blocks non-numeric characters on input, paste, and cut\n- **Decimal Control** — Configure allowed decimal places\n- **Negative Support** — Optionally allow negative numbers\n- **Custom Separator** — Use any decimal separator (`.`, `,`, etc.)\n- **Auto-Formatting** — *NEW* Format as you type with thousand separators while preserving cursor position\n- **Forms Compatible** — Works with both native inputs and Angular forms\n\n---\n\n## Installation\n\n```typescript\nimport { NumbersOnlyDirective } from 'ngx-oneforall/directives/numbers-only';\n```\n\n---\n\n## API Reference\n\n| Input | Type | Default | Description |\n|-------|------|---------|-------------|\n| `decimals` | `number` | `0` | Decimal places allowed (0 = integers only) |\n| `negative` | `boolean` | `false` | Allow negative numbers |\n| `separator` | `string` | `'.'` | Decimal separator character |\n| `enableThousandSeparator` | `boolean` | `false` | Enable thousand separator auto-formatting |\n| `thousandSeparator` | `string` | `','` | Thousand separator character |\n\n---\n\n## Basic Usage\n\n```html\n<!-- Integers only (default) -->\n<input numbersOnly />\n\n<!-- Allow 2 decimal places -->\n<input numbersOnly [decimals]=\"2\" />\n\n<!-- Allow negative values -->\n<input numbersOnly [negative]=\"true\" />\n\n<!-- Custom separator (comma) -->\n<input numbersOnly [decimals]=\"2\" [separator]=\"','\" />\n\n<!-- Auto-format with thousand separators -->\n<input numbersOnly [enableThousandSeparator]=\"true\" />\n```\n\n---\n\n## Common Use Cases\n\n### Currency Input\n\n```html\n<input \n numbersOnly \n [decimals]=\"2\" \n placeholder=\"$0.00\" />\n```\n\n### Quantity Field\n\n```html\n<input \n numbersOnly \n [negative]=\"true\" \n placeholder=\"Enter quantity\" />\n```\n\n### Reactive Forms\n\n```typescript\n@Component({\n template: `<input numbersOnly [decimals]=\"2\" [formControl]=\"price\" />`,\n imports: [NumbersOnlyDirective, ReactiveFormsModule]\n})\nexport class PriceFormComponent {\n price = new FormControl('');\n}\n```\n\n---\n\n## Live Demo"
|
|
354
365
|
},
|
|
355
366
|
{
|
|
356
367
|
"name": "Press Enter",
|
|
@@ -396,6 +407,17 @@
|
|
|
396
407
|
"description": "Binds keyboard shortcuts to trigger actions with support for modifiers and global/scoped listening.",
|
|
397
408
|
"fullContent": "Binds keyboard shortcuts to trigger actions with support for modifiers and global/scoped listening.\n\n## Features\n\n- **Multiple Shortcuts** — Comma-separated patterns (e.g., `'ctrl.s, meta.s'`)\n- **Modifier Support** — `ctrl`, `shift`, `alt`, `meta` (cmd)\n- **Global/Scoped** — Listen on window or element-only\n- **Layout Independent** — Uses physical key codes for cross-keyboard support\n- **Performance Optimized** — Cached shortcut parsing with computed signals\n\n---\n\n## Installation\n\n```typescript\nimport { ShortcutDirective } from 'ngx-oneforall/directives/shortcut';\n```\n\n---\n\n## API Reference\n\n| Input | Type | Default | Description |\n|-------|------|---------|-------------|\n| `shortcut` | `string` | **Required** | Shortcut pattern(s) |\n| `isGlobal` | `boolean` | `false` | Listen globally on window |\n\n| Output | Type | Description |\n|--------|------|-------------|\n| `action` | `void` | Emits when shortcut is triggered |\n\n### Shortcut Format\n\n```\nmodifier.modifier.key\n```\n\n**Modifiers:** `ctrl`, `shift`, `alt`, `meta`, `cmd`\n\n**Examples:**\n- `ctrl.s` — Ctrl+S\n- `meta.s` — Cmd+S (Mac)\n- `ctrl.shift.s` — Ctrl+Shift+S\n- `ctrl.s, meta.s` — Ctrl+S or Cmd+S\n\n---\n\n## Basic Usage\n\n```html\n<!-- Element scoped (requires focus) -->\n<input [shortcut]=\"'ctrl.s'\" (action)=\"save()\" />\n\n<!-- Global (works anywhere) -->\n<div [shortcut]=\"'ctrl.k'\" [isGlobal]=\"true\" (action)=\"openSearch()\"></div>\n```\n\n---\n\n## Common Use Cases\n\n### Save Shortcut (Cross-Platform)\n\n```html\n<div [shortcut]=\"'ctrl.s, meta.s'\" [isGlobal]=\"true\" (action)=\"save()\">\n Press Ctrl+S or Cmd+S to save\n</div>\n```\n\n### Command Palette\n\n```typescript\n@Component({\n template: `\n <div [shortcut]=\"'ctrl.k, meta.k'\" [isGlobal]=\"true\" (action)=\"openPalette()\">\n @if (paletteOpen()) {\n <command-palette />\n }\n </div>\n `,\n imports: [ShortcutDirective]\n})\nexport class AppComponent {\n paletteOpen = signal(false);\n \n openPalette() {\n this.paletteOpen.set(true);\n }\n}\n```\n\n---\n\n## Live Demo"
|
|
398
409
|
},
|
|
410
|
+
{
|
|
411
|
+
"name": "Show For",
|
|
412
|
+
"category": "directives",
|
|
413
|
+
"categoryTitle": "Directives",
|
|
414
|
+
"dirName": "show-for",
|
|
415
|
+
"routePath": "show-for",
|
|
416
|
+
"importPath": "ngx-oneforall/directives/show-for",
|
|
417
|
+
"url": "https://love1024.github.io/ngx-oneforall/directives/show-for",
|
|
418
|
+
"description": "A structural directive that shows an element for a specified duration, then removes it from the DOM.",
|
|
419
|
+
"fullContent": "A structural directive that shows an element for a specified duration, then removes it from the DOM.\n\n## Features\n\n- **Timer-based** — Shows element for a given duration, then removes it\n- **Then template** — Optionally swap to a different template after expiry\n- **Reactive** — Resets timer when duration input changes\n- **Clean** — Automatically clears timer on destroy\n\n---\n\n## Installation\n\n```typescript\nimport { ShowForDirective } from 'ngx-oneforall/directives/show-for';\n```\n\n---\n\n## API Reference\n\n| Input | Type | Default | Description |\n|-------|------|---------|-------------|\n| `showFor` | `number` | — | Duration in ms to show the element |\n| `showForThen` | `TemplateRef` | `undefined` | Template to render after expiry |\n\n| Output | Type | Description |\n|--------|------|-------------|\n| `showForOnExpired` | `void` | Emits when the timer expires |\n\n---\n\n## Basic Usage\n\n```html\n<div *showFor=\"5000\">\n This disappears after 5 seconds\n</div>\n```\n\n---\n\n## Swap Template on Expiry\n\n```html\n<div *showFor=\"3000; then expiredTpl\">\n 🔥 Limited time offer!\n</div>\n\n<ng-template #expiredTpl>\n <div>Offer expired. Come back tomorrow!</div>\n</ng-template>\n```\n\n---\n\n## Listen for Expiry\n\n```html\n<ng-template [showFor]=\"2000\" (showForOnExpired)=\"onBannerExpired()\">\n <div>Welcome to our site!</div>\n</ng-template>\n```\n\n```typescript\nonBannerExpired() {\n console.log('Banner dismissed');\n}\n```\n\n---\n\n## Common Use Cases\n\n### Flash Message\n\n```html\n<div *showFor=\"4000\" class=\"flash-success\">\n ✅ Saved successfully!\n</div>\n```\n\n### Intro Banner with CTA Swap\n\n```html\n<div *showFor=\"5000; then ctaTpl\" class=\"intro-banner\">\n 👋 Welcome! Here's a quick tip...\n</div>\n\n<ng-template #ctaTpl>\n <button>Get Started</button>\n</ng-template>\n```\n\n### Temporary Discount Badge\n\n```html\n<span *showFor=\"10000\" class=\"badge\">NEW</span>\n```\n\n---\n\n## Live Demo"
|
|
420
|
+
},
|
|
399
421
|
{
|
|
400
422
|
"name": "Typed Template",
|
|
401
423
|
"category": "directives",
|
|
@@ -594,6 +616,17 @@
|
|
|
594
616
|
"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.",
|
|
595
617
|
"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"
|
|
596
618
|
},
|
|
619
|
+
{
|
|
620
|
+
"name": "Mask Pipe",
|
|
621
|
+
"category": "pipes",
|
|
622
|
+
"categoryTitle": "Pipes",
|
|
623
|
+
"dirName": "mask",
|
|
624
|
+
"routePath": "mask",
|
|
625
|
+
"importPath": "ngx-oneforall/pipes/mask",
|
|
626
|
+
"url": "https://love1024.github.io/ngx-oneforall/pipes/mask",
|
|
627
|
+
"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.",
|
|
628
|
+
"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"
|
|
629
|
+
},
|
|
597
630
|
{
|
|
598
631
|
"name": "Pluralize Pipe",
|
|
599
632
|
"category": "pipes",
|
|
@@ -1241,7 +1274,7 @@
|
|
|
1241
1274
|
"importPath": "ngx-oneforall/utils/unique-component-id",
|
|
1242
1275
|
"url": "https://love1024.github.io/ngx-oneforall/utils/unique-component-id",
|
|
1243
1276
|
"description": "Generates unique ID strings for Angular components. Useful for form elements, ARIA attributes, and dynamically created components.",
|
|
1244
|
-
"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}
|
|
1277
|
+
"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"
|
|
1245
1278
|
},
|
|
1246
1279
|
{
|
|
1247
1280
|
"name": "Credit Card",
|