ngx-oneforall-mcp 1.0.0 → 1.4.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/README.md +153 -0
- package/data/docs.json +15 -4
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
# ngx-oneforall-mcp
|
|
2
|
+
|
|
3
|
+
Connect AI tools to **ngx-oneforall** documentation using the Model Context Protocol (MCP).
|
|
4
|
+
|
|
5
|
+
The MCP server gives AI assistants like Claude, Cursor, Windsurf, VS Code Copilot, and Antigravity **native knowledge** of all ngx-oneforall utilities — including correct import paths, API references, and usage examples.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## What is MCP?
|
|
10
|
+
|
|
11
|
+
MCP (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.
|
|
12
|
+
|
|
13
|
+
Without MCP, an AI might hallucinate:
|
|
14
|
+
```typescript
|
|
15
|
+
// ❌ Wrong import path
|
|
16
|
+
import { Draggable } from 'ngx-oneforall';
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
With MCP, the AI looks up the correct import:
|
|
20
|
+
```typescript
|
|
21
|
+
// ✅ Correct import path
|
|
22
|
+
import { DraggableDirective } from 'ngx-oneforall/directives/draggable';
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
## Installation
|
|
28
|
+
|
|
29
|
+
Install the MCP server globally or use it via `npx`:
|
|
30
|
+
|
|
31
|
+
```bash
|
|
32
|
+
npx ngx-oneforall-mcp
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
No additional dependencies are required in your Angular project.
|
|
36
|
+
|
|
37
|
+
---
|
|
38
|
+
|
|
39
|
+
## Setup by AI Tool
|
|
40
|
+
|
|
41
|
+
### Claude Desktop
|
|
42
|
+
|
|
43
|
+
Edit `~/Library/Application Support/Claude/claude_desktop_config.json` (macOS) or `%APPDATA%\Claude\claude_desktop_config.json` (Windows):
|
|
44
|
+
|
|
45
|
+
```json
|
|
46
|
+
{
|
|
47
|
+
"mcpServers": {
|
|
48
|
+
"ngx-oneforall": {
|
|
49
|
+
"command": "npx",
|
|
50
|
+
"args": ["-y", "ngx-oneforall-mcp"]
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
Restart Claude Desktop after saving.
|
|
57
|
+
|
|
58
|
+
### Cursor
|
|
59
|
+
|
|
60
|
+
Edit `.cursor/mcp.json` in your project root:
|
|
61
|
+
|
|
62
|
+
```json
|
|
63
|
+
{
|
|
64
|
+
"mcpServers": {
|
|
65
|
+
"ngx-oneforall": {
|
|
66
|
+
"command": "npx",
|
|
67
|
+
"args": ["-y", "ngx-oneforall-mcp"]
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
### Windsurf
|
|
74
|
+
|
|
75
|
+
Edit `~/.codeium/windsurf/mcp_config.json`:
|
|
76
|
+
|
|
77
|
+
```json
|
|
78
|
+
{
|
|
79
|
+
"mcpServers": {
|
|
80
|
+
"ngx-oneforall": {
|
|
81
|
+
"command": "npx",
|
|
82
|
+
"args": ["-y", "ngx-oneforall-mcp"]
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### VS Code (GitHub Copilot)
|
|
89
|
+
|
|
90
|
+
Edit `.vscode/mcp.json` in your project root:
|
|
91
|
+
|
|
92
|
+
```json
|
|
93
|
+
{
|
|
94
|
+
"servers": {
|
|
95
|
+
"ngx-oneforall": {
|
|
96
|
+
"command": "npx",
|
|
97
|
+
"args": ["-y", "ngx-oneforall-mcp"]
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
### Antigravity
|
|
104
|
+
|
|
105
|
+
Configure your Antigravity agent settings:
|
|
106
|
+
|
|
107
|
+
```json
|
|
108
|
+
{
|
|
109
|
+
"mcpServers": {
|
|
110
|
+
"ngx-oneforall": {
|
|
111
|
+
"command": "npx",
|
|
112
|
+
"args": ["-y", "ngx-oneforall-mcp"]
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
---
|
|
119
|
+
|
|
120
|
+
## Available Tools
|
|
121
|
+
|
|
122
|
+
Once configured, your AI assistant can use these tools automatically:
|
|
123
|
+
|
|
124
|
+
| Tool | What it does |
|
|
125
|
+
|------|-------------|
|
|
126
|
+
| `get_utility_docs` | Returns full documentation for any utility by name |
|
|
127
|
+
| `search_utilities` | Searches utilities by keyword across names, descriptions, and docs |
|
|
128
|
+
| `list_utilities` | Lists all utilities, optionally filtered by category |
|
|
129
|
+
| `get_import_path` | Returns the exact TypeScript import statement for a utility |
|
|
130
|
+
|
|
131
|
+
---
|
|
132
|
+
|
|
133
|
+
## Example Usage
|
|
134
|
+
|
|
135
|
+
After setup, just ask your AI assistant naturally:
|
|
136
|
+
|
|
137
|
+
- *"How do I use the draggable directive from ngx-oneforall?"*
|
|
138
|
+
- *"What validators does ngx-oneforall provide?"*
|
|
139
|
+
- *"Show me the import path for the time-ago pipe"*
|
|
140
|
+
- *"What signals are available for reactive routing?"*
|
|
141
|
+
|
|
142
|
+
The AI will automatically call the MCP server to look up accurate documentation and provide correct answers.
|
|
143
|
+
|
|
144
|
+
---
|
|
145
|
+
|
|
146
|
+
## Resources
|
|
147
|
+
|
|
148
|
+
The MCP server also exposes resources that AI tools can read directly:
|
|
149
|
+
|
|
150
|
+
| Resource | URI |
|
|
151
|
+
|----------|-----|
|
|
152
|
+
| Structured index | `ngx-oneforall://llms.txt` |
|
|
153
|
+
| Per-utility docs | `ngx-oneforall://docs/{category}/{utility}` |
|
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",
|
|
@@ -350,7 +350,7 @@
|
|
|
350
350
|
"importPath": "ngx-oneforall/directives/numbers-only",
|
|
351
351
|
"url": "https://love1024.github.io/ngx-oneforall/directives/numbers-only",
|
|
352
352
|
"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"
|
|
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- **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
354
|
},
|
|
355
355
|
{
|
|
356
356
|
"name": "Press Enter",
|
|
@@ -396,6 +396,17 @@
|
|
|
396
396
|
"description": "Binds keyboard shortcuts to trigger actions with support for modifiers and global/scoped listening.",
|
|
397
397
|
"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
398
|
},
|
|
399
|
+
{
|
|
400
|
+
"name": "Show For",
|
|
401
|
+
"category": "directives",
|
|
402
|
+
"categoryTitle": "Directives",
|
|
403
|
+
"dirName": "show-for",
|
|
404
|
+
"routePath": "show-for",
|
|
405
|
+
"importPath": "ngx-oneforall/directives/show-for",
|
|
406
|
+
"url": "https://love1024.github.io/ngx-oneforall/directives/show-for",
|
|
407
|
+
"description": "A structural directive that shows an element for a specified duration, then removes it from the DOM.",
|
|
408
|
+
"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"
|
|
409
|
+
},
|
|
399
410
|
{
|
|
400
411
|
"name": "Typed Template",
|
|
401
412
|
"category": "directives",
|