CngxAudioZone
projects/common/audio/zone-mode/audio-zone.directive.ts
Import#
import { CngxAudioZone } from '@cngx/common/audio'
Description#
Zone-mode audio binder. Plays earcons as the pointer or keyboard focus enters
and leaves the host — a spatial complement to [cngxAudio]. The record input
makes the four zone transitions explicit rather than encoding them in the
event:earcon string grammar, because the listener set (pointer/focus zone)
and the shape (record vs string) are semantically distinct from event-mode.
<div [cngxAudioZone]="{ enter: 'notification', leave: 'tap' }">Hover me</div>
<button [cngxAudioZone]="{ focus: 'tap', blur: 'tap' }">Focus me</button>Playback obeys the same gates as the rest of the family: skipped when
[audioDisabled], muted, reduced-motion-gated, autoplay-not-armed, or still
within the debounce window. [audioVolume] scales just this element's plays.
Metadata#
Host#
Index#
Methods
HostListeners
Inputs#
Suppress this element's audio without unbinding.
false, { transform: booleanAttribute }number | undefinedPer-element volume multiplier in [0, 1]; unset uses the engine volume.
Earcon per zone transition. Any omitted key plays nothing.
{}, { alias: 'cngxAudioZone' }Methods#
handleFocusCross(kind: "focus" | "blur", event: FocusEvent)focusin/focusout bubble, so a zone wrapping focusable children would
otherwise fire on every internal tab move. Only a crossing of the zone
boundary counts — the focus counterpart of pointerenter/pointerleave.
"focus" | "blur"FocusEventHostListeners#
| Event | Handler |
|---|---|
(pointerenter) | pointerenter() |
(pointerleave) | pointerleave() |
(focusin) | focusin() |
(focusout) | focusout() |