@tociva/tailng-cdk 0.1.0 → 0.7.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 +111 -4
- package/package.json +9 -1
package/README.md
CHANGED
|
@@ -1,10 +1,117 @@
|
|
|
1
1
|
# @tociva/tailng-cdk
|
|
2
2
|
|
|
3
|
-
Headless Angular utilities and primitives
|
|
3
|
+
Headless Angular utilities and primitives for building accessible, interactive components.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
## Overview
|
|
6
|
+
|
|
7
|
+
`@tociva/tailng-cdk` provides logic-only building blocks for Angular applications. This package contains utilities for accessibility, keyboard navigation, focus management, and component primitives that power the Tailng UI component library.
|
|
7
8
|
|
|
8
9
|
## Installation
|
|
10
|
+
|
|
9
11
|
```bash
|
|
10
|
-
npm install @tociva/tailng-cdk
|
|
12
|
+
npm install @tociva/tailng-cdk
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Peer Dependencies
|
|
16
|
+
|
|
17
|
+
- `@angular/core`: ^21.0.0
|
|
18
|
+
- `@angular/common`: ^21.0.0
|
|
19
|
+
|
|
20
|
+
## Features
|
|
21
|
+
|
|
22
|
+
- **Accessibility (a11y)**: Focus trap directive and utilities for managing focus in modals and overlays
|
|
23
|
+
- **Keyboard Navigation**: Utilities for handling keyboard interactions in lists, menus, and interactive components
|
|
24
|
+
- **Scroll Management**: Utilities for scrolling elements into view
|
|
25
|
+
- **Component Utilities**: Helper functions for common component patterns like option lists
|
|
26
|
+
|
|
27
|
+
## Usage
|
|
28
|
+
|
|
29
|
+
### Focus Trap Directive
|
|
30
|
+
|
|
31
|
+
Manage focus trapping in modals, dialogs, and overlays:
|
|
32
|
+
|
|
33
|
+
```typescript
|
|
34
|
+
import { Component } from '@angular/core';
|
|
35
|
+
import { TailngFocusTrapDirective } from '@tociva/tailng-cdk';
|
|
36
|
+
|
|
37
|
+
@Component({
|
|
38
|
+
selector: 'app-modal',
|
|
39
|
+
standalone: true,
|
|
40
|
+
imports: [TailngFocusTrapDirective],
|
|
41
|
+
template: `
|
|
42
|
+
<div tngFocusTrap>
|
|
43
|
+
<h2>Modal Content</h2>
|
|
44
|
+
<button>Close</button>
|
|
45
|
+
</div>
|
|
46
|
+
`,
|
|
47
|
+
})
|
|
48
|
+
export class ModalComponent {}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### Keyboard Navigation
|
|
52
|
+
|
|
53
|
+
Handle keyboard navigation in lists and menus:
|
|
54
|
+
|
|
55
|
+
```typescript
|
|
56
|
+
import { keyboardNavigation } from '@tociva/tailng-cdk';
|
|
57
|
+
|
|
58
|
+
// Use in your component to handle arrow key navigation
|
|
59
|
+
const state = keyboardNavigation({
|
|
60
|
+
// Configuration for keyboard navigation
|
|
61
|
+
});
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### Option List Utilities
|
|
65
|
+
|
|
66
|
+
Utilities for managing option list state and context:
|
|
67
|
+
|
|
68
|
+
```typescript
|
|
69
|
+
import { OptionTplContext } from '@tociva/tailng-cdk';
|
|
70
|
+
|
|
71
|
+
// Type for option template context
|
|
72
|
+
type MyOption = { id: string; label: string };
|
|
73
|
+
const context: OptionTplContext<MyOption> = {
|
|
74
|
+
$implicit: { id: '1', label: 'Option 1' },
|
|
75
|
+
index: 0,
|
|
76
|
+
active: true,
|
|
77
|
+
selected: false,
|
|
78
|
+
};
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
### Scroll Utilities
|
|
82
|
+
|
|
83
|
+
Scroll elements into view:
|
|
84
|
+
|
|
85
|
+
```typescript
|
|
86
|
+
import { scrollActiveIntoView } from '@tociva/tailng-cdk';
|
|
87
|
+
|
|
88
|
+
scrollActiveIntoView({
|
|
89
|
+
container: elementRef.nativeElement,
|
|
90
|
+
activeIndex: 2,
|
|
91
|
+
itemSelector: '[data-index]',
|
|
92
|
+
behavior: 'smooth',
|
|
93
|
+
});
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
## API Reference
|
|
97
|
+
|
|
98
|
+
### Directives
|
|
99
|
+
|
|
100
|
+
- **`TailngFocusTrapDirective`**: Standalone directive for trapping focus within an element
|
|
101
|
+
|
|
102
|
+
### Utilities
|
|
103
|
+
|
|
104
|
+
- **`createTailngFocusTrap`**: Create a focus trap instance
|
|
105
|
+
- **`keyboardNavigation`**: Keyboard navigation state management
|
|
106
|
+
- **`scrollActiveIntoView`**: Scroll an element into view
|
|
107
|
+
- **`OptionTplContext`**: Type for option template context
|
|
108
|
+
|
|
109
|
+
## Related Packages
|
|
110
|
+
|
|
111
|
+
- [`@tociva/tailng-ui`](../ui/README.md) - UI components built on top of this CDK
|
|
112
|
+
- [`@tociva/tailng-icons`](../icons/README.md) - Icon components
|
|
113
|
+
- [`@tociva/tailng-theme`](../theme/README.md) - Tailwind CSS theme preset
|
|
114
|
+
|
|
115
|
+
## License
|
|
116
|
+
|
|
117
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,8 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tociva/tailng-cdk",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.0",
|
|
4
4
|
"description": "Headless Angular utilities and primitives for Tailng",
|
|
5
5
|
"license": "MIT",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "https://github.com/tociva/tailng.git"
|
|
9
|
+
},
|
|
10
|
+
"homepage": "https://github.com/tociva/tailng",
|
|
11
|
+
"bugs": {
|
|
12
|
+
"url": "https://github.com/tociva/tailng/issues"
|
|
13
|
+
},
|
|
6
14
|
"sideEffects": false,
|
|
7
15
|
"peerDependencies": {
|
|
8
16
|
"@angular/core": "^21.0.0",
|