CngxDrawerPanel

Directivev0.1.0WCAG AA

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

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

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).

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

Static attributes: rolecomplementary
[attr.aria-hidden]mode() === 'side' ? null : !isOpen()
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'

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:

default 'over'

position#DrawerPosition

input()

Direction the panel slides from.

default 'left'

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' ? null : !isOpen()`