Template Picker

Template component

<loquix-template-picker> is the whole template library in a modal: a search field and a grid of Template Card elements, sectioned by category.

loquix-template-pickernative dialog elementsearch and categories

Preview

Opening the picker Live component

Browse templates

The picker has no trigger of its own and renders nothing until it is open, so the button above is part of the demo rather than the component. Set open from your own control the same way.

Usage

import '@loquix/core/define/define-template-picker';

const picker = document.querySelector('loquix-template-picker');

picker.templates = await loadTemplates();

openButton.addEventListener('click', () => {
  picker.open = true;
});

picker.addEventListener('loquix-template-select', (event) => {
  composer.value = event.detail.template.prompt;
});

Selecting closes the picker

Choosing a template closes the dialog and sets open back to false before loquix-template-select reaches you, and loquix-template-picker-close fires alongside it. There is no need to close it yourself, and no way to keep it open for a multi-select flow.

Categories

Cards are grouped by their category field. Leave categories unset and the order is derived from the templates; set it to pin an explicit order.

picker.categories = ['Writing', 'Engineering', 'Research'];

Properties

Property	Attribute	Type	Default	Description
templates	templates	Template[]	[]	Templates to display. See the template object.
open	open	boolean	false	Whether the dialog is open.
heading	heading	string	localized	Dialog heading.
searchable	searchable	boolean	true	Shows the search field.
categories	categories	string[]	[]	Explicit category order. Derived from the templates when omitted.
closeOnOutsideClick	close-on-outside-click	boolean	false	Whether clicking the backdrop closes the dialog. Off by default, unlike Search Dialog.

Events

Event	Detail	Description
loquix-template-picker-open	—	Fired when the dialog opens.
loquix-template-picker-close	—	Fired when the dialog closes.
loquix-template-select	{ template }	Fired when a template is chosen.

CSS parts

Part	Purpose
dialog	The native <dialog> element.
search	The search input.

CSS custom properties

Variable	Purpose
--loquix-picker-max-width	Dialog maximum width.
--loquix-picker-border-color	Dialog border color.
--loquix-picker-border-radius	Dialog border radius.
--loquix-picker-bg	Dialog background.
--loquix-picker-backdrop	Backdrop overlay color.
--loquix-picker-gap	Grid gap.
--loquix-picker-card-min-width	Minimum card width in the grid.