@ngxsmk/cdk 1.2.0 → 1.3.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.
Files changed (2) hide show
  1. package/README.md +59 -16
  2. package/package.json +29 -19
package/README.md CHANGED
@@ -1,13 +1,6 @@
1
1
  # @ngxsmk/cdk
2
2
 
3
- Low-level, framework-agnostic Angular behaviors used by NGXSMK components:
4
-
5
- - `ClickOutside` — detect clicks outside an element
6
- - `FocusTrap` — trap focus within a container
7
- - `ScrollLock` — lock/unlock page scroll
8
- - `LiveAnnouncer` — announce messages to assistive tech
9
- - `MediaQuery` — reactive media-query signals
10
- - `VisuallyHidden` — visually hide content while keeping it accessible
3
+ Low-level, zoneless-friendly Angular behaviors that power NGXSMK components. Each behavior is its own secondary entry point, so you only bundle what you import.
11
4
 
12
5
  Part of the [NGXSMK UI kit](https://github.com/NGXSMK/ngxsmk-ui-kit).
13
6
 
@@ -26,18 +19,68 @@ npm install @ngxsmk/cdk
26
19
 
27
20
  ## Usage
28
21
 
22
+ ### Click outside
23
+
24
+ Emits when a pointer press lands outside the host element.
25
+
26
+ ```html
27
+ <div class="menu" (ngxsmkClickOutside)="close()">…</div>
28
+ ```
29
+
29
30
  ```ts
30
- import { ClickOutside } from '@ngxsmk/cdk/click-outside';
31
+ import { NgxsmkClickOutside } from '@ngxsmk/cdk/click-outside';
31
32
  ```
32
33
 
33
- Prefer deep entry-point imports (e.g. `@ngxsmk/cdk/click-outside`) so the
34
- bundler tree-shakes unused behaviors.
34
+ ### Focus trap
35
+
36
+ Traps Tab focus inside a container. `ngxsmkFocusTrapAutoCapture` moves focus in on init and restores the previously focused element on destroy.
35
37
 
36
- ## Building & publishing
38
+ ```html
39
+ <div ngxsmkFocusTrap ngxsmkFocusTrapAutoCapture>…</div>
40
+ ```
37
41
 
38
- Built with the rest of the workspace via `npm run build:libs`. The published
39
- artifact lives in `dist/ngxsmk/cdk`. To publish all packages:
42
+ ### Scroll lock
40
43
 
41
- ```bash
42
- npm run publish
44
+ Reference-counted body scroll lock for dialogs, drawers, and sheets. Compensates for scrollbar width to avoid layout shift.
45
+
46
+ ```ts
47
+ import { NgxsmkScrollLock } from '@ngxsmk/cdk/scroll-lock';
48
+
49
+ constructor(private lock: NgxsmkScrollLock) {}
50
+ open() { this.lock.lock(); }
51
+ close() { this.lock.unlock(); }
52
+ ```
53
+
54
+ ### Live announcer
55
+
56
+ Announces messages to assistive technology via a visually hidden `aria-live` region.
57
+
58
+ ```ts
59
+ import { NgxsmkLiveAnnouncer } from '@ngxsmk/cdk/live-announcer';
60
+
61
+ this.announcer.announce('Item deleted', 'polite');
62
+ ```
63
+
64
+ ### Media query
65
+
66
+ Reactive, signal-based media-query helper (call in an injection context).
67
+
68
+ ```ts
69
+ import { injectMediaQuery } from '@ngxsmk/cdk/media-query';
70
+
71
+ private readonly isMobile = injectMediaQuery('(max-width: 767px)');
43
72
  ```
73
+
74
+ ### Visually hidden
75
+
76
+ Hides content visually while keeping it available to screen readers.
77
+
78
+ ```html
79
+ <span ngxsmkVisuallyHidden>Opens in a new window</span>
80
+ ```
81
+
82
+ ## Entry points
83
+
84
+ `click-outside`, `focusable`, `focus-trap`, `live-announcer`, `media-query`, `scroll-lock`, `visually-hidden`, `intersection-observer`, `resize-observer`, `autofocus`, `testing`.
85
+
86
+ Prefer deep imports (e.g. `@ngxsmk/cdk/click-outside`) so the bundler tree-shakes unused behaviors.
package/package.json CHANGED
@@ -1,6 +1,16 @@
1
1
  {
2
2
  "name": "@ngxsmk/cdk",
3
- "version": "1.2.0",
3
+ "version": "1.3.0",
4
+ "description": "Low-level Angular directives and utilities (click-outside, focus-trap, media-query, scroll-lock) for @ngxsmk.",
5
+ "keywords": [
6
+ "angular",
7
+ "angular-cdk",
8
+ "cdk",
9
+ "directives",
10
+ "utilities",
11
+ "signals",
12
+ "helpers"
13
+ ],
4
14
  "license": "MIT",
5
15
  "peerDependencies": {
6
16
  "@angular/common": ">=17.3.0",
@@ -31,30 +41,30 @@
31
41
  "esm": "./esm2022/autofocus/ngxsmk-cdk-autofocus.mjs",
32
42
  "default": "./fesm2022/ngxsmk-cdk-autofocus.mjs"
33
43
  },
34
- "./click-outside": {
35
- "types": "./click-outside/index.d.ts",
36
- "esm2022": "./esm2022/click-outside/ngxsmk-cdk-click-outside.mjs",
37
- "esm": "./esm2022/click-outside/ngxsmk-cdk-click-outside.mjs",
38
- "default": "./fesm2022/ngxsmk-cdk-click-outside.mjs"
39
- },
40
44
  "./focus-trap": {
41
45
  "types": "./focus-trap/index.d.ts",
42
46
  "esm2022": "./esm2022/focus-trap/ngxsmk-cdk-focus-trap.mjs",
43
47
  "esm": "./esm2022/focus-trap/ngxsmk-cdk-focus-trap.mjs",
44
48
  "default": "./fesm2022/ngxsmk-cdk-focus-trap.mjs"
45
49
  },
46
- "./focusable": {
47
- "types": "./focusable/index.d.ts",
48
- "esm2022": "./esm2022/focusable/ngxsmk-cdk-focusable.mjs",
49
- "esm": "./esm2022/focusable/ngxsmk-cdk-focusable.mjs",
50
- "default": "./fesm2022/ngxsmk-cdk-focusable.mjs"
51
- },
52
50
  "./live-announcer": {
53
51
  "types": "./live-announcer/index.d.ts",
54
52
  "esm2022": "./esm2022/live-announcer/ngxsmk-cdk-live-announcer.mjs",
55
53
  "esm": "./esm2022/live-announcer/ngxsmk-cdk-live-announcer.mjs",
56
54
  "default": "./fesm2022/ngxsmk-cdk-live-announcer.mjs"
57
55
  },
56
+ "./click-outside": {
57
+ "types": "./click-outside/index.d.ts",
58
+ "esm2022": "./esm2022/click-outside/ngxsmk-cdk-click-outside.mjs",
59
+ "esm": "./esm2022/click-outside/ngxsmk-cdk-click-outside.mjs",
60
+ "default": "./fesm2022/ngxsmk-cdk-click-outside.mjs"
61
+ },
62
+ "./focusable": {
63
+ "types": "./focusable/index.d.ts",
64
+ "esm2022": "./esm2022/focusable/ngxsmk-cdk-focusable.mjs",
65
+ "esm": "./esm2022/focusable/ngxsmk-cdk-focusable.mjs",
66
+ "default": "./fesm2022/ngxsmk-cdk-focusable.mjs"
67
+ },
58
68
  "./media-query": {
59
69
  "types": "./media-query/index.d.ts",
60
70
  "esm2022": "./esm2022/media-query/ngxsmk-cdk-media-query.mjs",
@@ -73,18 +83,18 @@
73
83
  "esm": "./esm2022/resize-observer/ngxsmk-cdk-resize-observer.mjs",
74
84
  "default": "./fesm2022/ngxsmk-cdk-resize-observer.mjs"
75
85
  },
76
- "./scroll-lock": {
77
- "types": "./scroll-lock/index.d.ts",
78
- "esm2022": "./esm2022/scroll-lock/ngxsmk-cdk-scroll-lock.mjs",
79
- "esm": "./esm2022/scroll-lock/ngxsmk-cdk-scroll-lock.mjs",
80
- "default": "./fesm2022/ngxsmk-cdk-scroll-lock.mjs"
81
- },
82
86
  "./testing": {
83
87
  "types": "./testing/index.d.ts",
84
88
  "esm2022": "./esm2022/testing/ngxsmk-cdk-testing.mjs",
85
89
  "esm": "./esm2022/testing/ngxsmk-cdk-testing.mjs",
86
90
  "default": "./fesm2022/ngxsmk-cdk-testing.mjs"
87
91
  },
92
+ "./scroll-lock": {
93
+ "types": "./scroll-lock/index.d.ts",
94
+ "esm2022": "./esm2022/scroll-lock/ngxsmk-cdk-scroll-lock.mjs",
95
+ "esm": "./esm2022/scroll-lock/ngxsmk-cdk-scroll-lock.mjs",
96
+ "default": "./fesm2022/ngxsmk-cdk-scroll-lock.mjs"
97
+ },
88
98
  "./visually-hidden": {
89
99
  "types": "./visually-hidden/index.d.ts",
90
100
  "esm2022": "./esm2022/visually-hidden/ngxsmk-cdk-visually-hidden.mjs",