CngxDrawerPanel

Directivev0.1.0WCAG AA

projects/common/layout/drawer/drawer-panel.directive.ts

Import#

import { CngxDrawerPanel } from '@cngx/common/layout'

Description#

The sliding panel of a drawer. Reads its open state from an explicit [cngxDrawerPanel] reference - no ancestor injection.

Composes CngxFocusTrap as a hostDirective - the consumer controls the [enabled] and [autoFocus] inputs from the template.

Optionally closes the drawer when the user clicks outside the panel (closeOnClickOutside, default true). The click that opened the drawer never counts as an outside click. While closed (except in side mode) the panel is aria-hidden AND inert, so its focusable children are unreachable for keyboard and AT alike. On close, focus returns to the element that was focused when the drawer opened - unless the user moved focus to another focusable element themselves (a click on a focusable outside target keeps its focus).

The role input defaults to complementary. On a <nav> host pass [role]="null" so the implicit navigation landmark survives:

<nav [cngxDrawerPanel]="drawer" position="left" mode="over" [role]="null"
     [enabled]="drawer.opened()" [autoFocus]="true">
  <a href="/home">Home</a>
</nav>

https://cngxjs.github.io/cngx/examples/#/common/layout/drawer/basic-scroll-lock-backdrop https://cngxjs.github.io/cngx/examples/#/common/layout/drawer/controlled-mode https://cngxjs.github.io/cngx/examples/#/common/layout/drawer/direction-all-four-sides https://cngxjs.github.io/cngx/examples/#/common/layout/drawer/events-openedchange-closed https://cngxjs.github.io/cngx/examples/#/common/layout/drawer/mode-over-push-side https://cngxjs.github.io/cngx/examples/#/common/layout/drawer/pattern-consumer-wiring

Metadata#

Selector: [cngxDrawerPanel]
Export as: cngxDrawerPanel
Host directives: CngxFocusTrap
inputs enabled autoFocus

Host#

Static attributes: [attr.aria-hidden]mode() !== 'side' && !isOpen() ? true : null
[attr.inert]mode() !== 'side' && !isOpen() ? '' : null
[attr.role]role()
Bound classes: cngx-drawer-panel ← true cngx-drawer-panel--open ← isOpen cngx-drawer-panel--left ← position() === 'left' cngx-drawer-panel--right ← position() === 'right' cngx-drawer-panel--top ← position() === 'top' cngx-drawer-panel--bottom ← position() === 'bottom' cngx-drawer-panel--over ← mode() === 'over' cngx-drawer-panel--push ← mode() === 'push' cngx-drawer-panel--side ← mode() === 'side'

Index#

Inputs#

closeOnClickOutside#boolean

input()

Whether clicking outside the panel closes the drawer.

default true

drawerRef#CngxDrawer

input()Required

Reference to the parent CngxDrawer state owner.

default { alias: 'cngxDrawerPanel' }

mode#DrawerMode

input()

How the panel interacts with the content area:

'over' (default) - overlays content (absolute positioned)
'push' - pushes content aside (content gets margin)
'side' - always visible, no toggle behavior

default 'over'

position#DrawerPosition

input()

Direction the panel slides from.

default 'left'

role#string | null

input()

Landmark role rendered on the panel. Defaults to complementary; pass navigation for nav drawers or null to keep the element's implicit role (e.g. on a <nav> host).

default 'complementary'

HostBindings#

Binding	Expression
`[class.cngx-drawer-panel]`	`true`
`[class.cngx-drawer-panel--open]`	`isOpen()`
`[class.cngx-drawer-panel--left]`	`position() === 'left'`
`[class.cngx-drawer-panel--right]`	`position() === 'right'`
`[class.cngx-drawer-panel--top]`	`position() === 'top'`
`[class.cngx-drawer-panel--bottom]`	`position() === 'bottom'`
`[class.cngx-drawer-panel--over]`	`mode() === 'over'`
`[class.cngx-drawer-panel--push]`	`mode() === 'push'`
`[class.cngx-drawer-panel--side]`	`mode() === 'side'`
`[attr.aria-hidden]`	`mode() !== 'side' && !isOpen() ? true : null`
`[attr.inert]`	`mode() !== 'side' && !isOpen() ? '' : null`
`[attr.role]`	`role()`

CngxDrawerPanel

Import#

Description#

Related#

Metadata#

Host#

Index#

Inputs

Derived State

HostBindings

Inputs#

HostBindings#