Prototype Library

Search Panel

A slide-in search overlay. Open it, type a query, and pick a result. It is form-associated — the live query is mirrored into the owning form — and also dispatches bubbling search and result-select events. Esc or the backdrop closes it.

Inherited wc import '@esa/ecology/esa-search-panel';

Preview

Set el.results in a script, then open with el.open = true.

<button id="open-right">Open search</button>

<esa-search-panel id="sp-right" position="right"></esa-search-panel>

Positions

The panel slides in from the right (default) or the left.

<esa-search-panel position="right"></esa-search-panel>
<esa-search-panel position="left"></esa-search-panel>

States

Set loading to show a searching message while results are fetched.

<esa-search-panel position="right" loading></esa-search-panel>

API

PropTypeDefaultDescription
open boolean false Reflected attribute that drives visibility. Toggle by setting the property.
placeholder string 'Search...' Input placeholder text.
results EsaSearchResult[] [] Results to render, set as a property. Each: { id, title, subtitle?, icon?, category? }. Same-category items are grouped.
loading boolean false Reflected; shows a loading message instead of results.
position 'right' | 'left' 'right' Side the panel slides in from.
name string | undefined — Form field name — the key this control submits under.

Events

EventTypeDefaultDescription
search CustomEvent<{ value: string }> — Fired on each input change with the current query.
result-select CustomEvent<EsaSearchResult> — Fired when a result is chosen.
open-change CustomEvent<{ open: boolean }> — Fired when the panel closes (Esc or backdrop).
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.

  • (open-change)="onOpenChange($event.detail)"
  • (result-select)="onResultSelect($event.detail)"
  • (search)="onSearch($event.detail)"

The live query also participates in the enclosing <form> via ElementInternals.

Accessibility

  • The panel is role="search"; the close button carries an aria-label.
  • The input is focused automatically when the panel opens.
  • Escape and backdrop click both close the panel and fire open-change.