@ngxsmk/cdk

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.

Part of the NGXSMK UI kit.

Compatibility

• Angular 17.3+
• zone.js optional (zoneless-friendly)

Install

npm install @ngxsmk/cdk

@ngxsmk/cdk depends only on @angular/core and @angular/common.

Usage

Click outside

Emits when a pointer press lands outside the host element.

<div class="menu" (ngxsmkClickOutside)="close()">…</div>

import { NgxsmkClickOutside } from '@ngxsmk/cdk/click-outside';

Focus trap

Traps Tab focus inside a container. ngxsmkFocusTrapAutoCapture moves focus in on init and restores the previously focused element on destroy.

<div ngxsmkFocusTrap ngxsmkFocusTrapAutoCapture>…</div>

Scroll lock

Reference-counted body scroll lock for dialogs, drawers, and sheets. Compensates for scrollbar width to avoid layout shift.

import { NgxsmkScrollLock } from '@ngxsmk/cdk/scroll-lock';

constructor(private lock: NgxsmkScrollLock) {}
open() { this.lock.lock(); }
close() { this.lock.unlock(); }

Live announcer

Announces messages to assistive technology via a visually hidden aria-live region.

import { NgxsmkLiveAnnouncer } from '@ngxsmk/cdk/live-announcer';

this.announcer.announce('Item deleted', 'polite');

Media query

Reactive, signal-based media-query helper (call in an injection context).

import { injectMediaQuery } from '@ngxsmk/cdk/media-query';

private readonly isMobile = injectMediaQuery('(max-width: 767px)');

Visually hidden

Hides content visually while keeping it available to screen readers.

<span ngxsmkVisuallyHidden>Opens in a new window</span>

Entry points

click-outside, focusable, focus-trap, live-announcer, media-query, scroll-lock, visually-hidden, intersection-observer, resize-observer, autofocus, testing.

Prefer deep imports (e.g. @ngxsmk/cdk/click-outside) so the bundler tree-shakes unused behaviors.