Side Dialog

A slide-in drawer / side sheet. Full-height panel fixed to a side edge, with its own backdrop, focus trap, Esc-to-close, and focus restore — the modal mechanics of a dialog with edge-anchored layout.

Inherited wc import '@esa/ecology/esa-side-dialog';

Preview

Drawer body content goes here. It scrolls if it overflows, with the header and footer pinned.

Use it for filters, detail panes, and create/edit forms that don't warrant a full page.

<button id="open-sd">Open drawer</button>
<esa-side-dialog id="sd" heading="Filters" position="right">
  <p>Drawer body content…</p>
  <button slot="footer">Apply</button>
</esa-side-dialog>

Positions & sizes

Slides from left or right; width via size (sm 320 · md 400 · lg 520).

<esa-side-dialog position="left" size="sm" heading="Left, sm">…</esa-side-dialog>

API

Prop	Type	Default	Description
`open`	`boolean`	`false`
`heading`	`string`	`''`	Title shown in the header.
`position`	`'left' \| 'right'`	`'right'`	Edge the drawer slides in from.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Panel width — 320 / 400 / 520px.
`show-close-button`	`boolean`	`true`	Render the header close (✕) button. Property: `showCloseButton`. On by default. Write `="false"` to turn it off — unusually for a boolean attribute, this one reads the value.

Binding these events from Angular

Every one of these is a CustomEvent, so the payload is on $event.detail — $event.target.value reads empty, with no error. The names are lowercase and Angular passes them to addEventListener verbatim, so camel-casing one means it never fires.

(close)="onClose($event.detail)"

Methods

Prop	Type	Default	Description
`show()`	`method`	—	Open the drawer.
`close()`	`method`	—	Close it (restores focus, emits `close`).

Events

Event	Type	Default	Description
`close`	`CustomEvent`	—	Fired when the drawer closes (Esc, backdrop, or close button).

Side Dialog

Preview

Positions & sizes

API

Methods

Events

Accessibility