@ojiepermana/angular 22.1.11 → 22.1.13

package/fesm2022/ojiepermana-angular-component-pillbox.mjs

@@ -1,7 +1,1003 @@
-export * from '@ojiepermana/angular-component/pillbox';
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, ElementRef, contentChild, input, booleanAttribute, output, computed, Component, numberAttribute, DestroyRef, signal, viewChild, contentChildren, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { cn, injectUniqueId } from '@ojiepermana/angular/component/utils/core';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+/**
+ * What roving focus needs from one option, whichever kind of option it is.
+ *
+ * `Pillbox` renders two things with `role="option"` into the same listbox -- a
+ * value option and the "create" affordance -- and a listbox owes exactly one tab
+ * stop across all of them. Both kinds implement this, so the roving model can
+ * treat them as one ordered list without caring which is which.
+ */
+class PillboxRovingOption {
+}
+class PillboxContext {
+}
+
+class PillboxSelectedDirective {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PillboxSelectedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: PillboxSelectedDirective, isStandalone: true, selector: "ng-template[PillboxSelected]", exportAs: ["PillboxSelected"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PillboxSelectedDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[PillboxSelected]',
+                    exportAs: 'PillboxSelected',
+                }]
+        }] });
+class PillboxOptionComponent extends PillboxRovingOption {
+    context = inject(PillboxContext);
+    element = inject(ElementRef);
+    selectedTemplate = contentChild(PillboxSelectedDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedTemplate" }] : /* istanbul ignore next */ []));
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    selectedLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    filterable = input(true, { ...(ngDevMode ? { debugName: "filterable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    selectedChange = output();
+    selected = computed(() => this.context.optionSelected(this), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    visible = computed(() => this.context.optionVisible(this), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    tabIndex = computed(() => this.context.optionTabIndex(this), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('relative flex w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors', 'hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground', 'data-[selected]:bg-accent data-[selected]:text-accent-foreground', 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    rovingVisible() {
+        return this.visible();
+    }
+    nativeElement() {
+        return this.element.nativeElement;
+    }
+    focus() {
+        this.element.nativeElement.focus();
+    }
+    textLabel() {
+        return (this.label() || this.element.nativeElement.textContent || String(this.value())).trim();
+    }
+    pillLabel() {
+        return (this.selectedLabel() || this.textLabel()).trim();
+    }
+    pillTemplate() {
+        return this.selectedTemplate()?.template ?? null;
+    }
+    handleClick(event) {
+        this.context.chooseOption(this, event);
+    }
+    handleFocus() {
+        this.context.activateOption(this);
+    }
+    handleKeydown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.context.chooseOption(this, event);
+            return;
+        }
+        this.context.handleOptionKeydown(this, event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PillboxOptionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: PillboxOptionComponent, isStandalone: true, selector: "PillboxOption, button[PillboxOption]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, selectedLabel: { classPropertyName: "selectedLabel", publicName: "selectedLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange" }, host: { attributes: { "type": "button" }, listeners: { "click": "handleClick($event)", "focus": "handleFocus()", "keydown": "handleKeydown($any($event))" }, properties: { "class": "classes()", "attr.data-slot": "\"pillbox-option\"", "attr.data-selected": "selected() ? \"\" : null", "attr.data-disabled": "disabled() ? \"\" : null", "attr.role": "\"option\"", "attr.aria-selected": "selected()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.tabindex": "tabIndex()", "hidden": "!visible()" } }, queries: [{ propertyName: "selectedTemplate", first: true, predicate: PillboxSelectedDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <span class="min-w-0 flex-1 truncate text-left"><ng-content /></span>
+    @if (selected()) {
+      <svg
+        aria-hidden="true"
+        class="ml-auto size-4 shrink-0"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M20 6 9 17l-5-5" />
+      </svg>
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PillboxOptionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'PillboxOption, button[PillboxOption]',
+                    host: {
+                        type: 'button',
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"pillbox-option"',
+                        '[attr.data-selected]': 'selected() ? "" : null',
+                        '[attr.data-disabled]': 'disabled() ? "" : null',
+                        '[attr.role]': '"option"',
+                        '[attr.aria-selected]': 'selected()',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '[attr.tabindex]': 'tabIndex()',
+                        '[hidden]': '!visible()',
+                        '(click)': 'handleClick($event)',
+                        '(focus)': 'handleFocus()',
+                        '(keydown)': 'handleKeydown($any($event))',
+                    },
+                    template: `
+    <span class="min-w-0 flex-1 truncate text-left"><ng-content /></span>
+    @if (selected()) {
+      <svg
+        aria-hidden="true"
+        class="ml-auto size-4 shrink-0"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M20 6 9 17l-5-5" />
+      </svg>
+    }
+  `,
+                }]
+        }], propDecorators: { selectedTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PillboxSelectedDirective), { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], selectedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }] } });
+class PillboxOptionCreateComponent extends PillboxRovingOption {
+    context = inject(PillboxContext);
+    element = inject(ElementRef);
+    minLength = input(1, { ...(ngDevMode ? { debugName: "minLength" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    selected = output();
+    visible = computed(() => this.context.createVisible(this), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    tabIndex = computed(() => this.context.optionTabIndex(this), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm font-medium text-primary outline-none transition-colors', 'hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground', 'aria-disabled:pointer-events-none aria-disabled:opacity-50', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    rovingVisible() {
+        return this.visible();
+    }
+    nativeElement() {
+        return this.element.nativeElement;
+    }
+    focus() {
+        this.element.nativeElement.focus();
+    }
+    handleClick(event) {
+        this.context.chooseCreate(this, event);
+    }
+    handleFocus() {
+        this.context.activateOption(this);
+    }
+    handleKeydown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.context.chooseCreate(this, event);
+            return;
+        }
+        this.context.handleOptionKeydown(this, event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PillboxOptionCreateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: PillboxOptionCreateComponent, isStandalone: true, selector: "PillboxOptionCreate, button[PillboxOptionCreate]", inputs: { minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, host: { attributes: { "type": "button" }, listeners: { "click": "handleClick($event)", "focus": "handleFocus()", "keydown": "handleKeydown($any($event))" }, properties: { "class": "classes()", "attr.data-slot": "\"pillbox-option-create\"", "attr.role": "\"option\"", "attr.tabindex": "tabIndex()", "attr.aria-disabled": "disabled() ? \"true\" : null", "hidden": "!visible()" } }, usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PillboxOptionCreateComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'PillboxOptionCreate, button[PillboxOptionCreate]',
+                    host: {
+                        type: 'button',
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"pillbox-option-create"',
+                        '[attr.role]': '"option"',
+                        '[attr.tabindex]': 'tabIndex()',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '[hidden]': '!visible()',
+                        '(click)': 'handleClick($event)',
+                        '(focus)': 'handleFocus()',
+                        '(keydown)': 'handleKeydown($any($event))',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
+class PillboxOptionEmptyComponent {
+    context = inject(PillboxContext);
+    whenLoading = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "whenLoading" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('px-2 py-6 text-center text-sm text-muted-foreground', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PillboxOptionEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: PillboxOptionEmptyComponent, isStandalone: true, selector: "PillboxOptionEmpty", inputs: { whenLoading: { classPropertyName: "whenLoading", publicName: "whenLoading", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "presentation" }, properties: { "class": "classes()", "attr.data-slot": "\"pillbox-option-empty\"", "hidden": "!context.emptyVisible()" } }, ngImport: i0, template: `
+    @if (context.emptyMessage()) {
+      {{ context.emptyMessage() }}
+    } @else {
+      <ng-content />
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PillboxOptionEmptyComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'PillboxOptionEmpty',
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"pillbox-option-empty"',
+                        role: 'presentation',
+                        '[hidden]': '!context.emptyVisible()',
+                    },
+                    template: `
+    @if (context.emptyMessage()) {
+      {{ context.emptyMessage() }}
+    } @else {
+      <ng-content />
+    }
+  `,
+                }]
+        }], propDecorators: { whenLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "whenLoading", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const pillboxTriggerSizeClasses = {
+    default: 'min-h-10 px-3 py-2 text-sm',
+    sm: 'min-h-8 px-2.5 py-1.5 text-xs',
+};
+const pillboxPillSizeClasses = {
+    default: 'min-h-6 px-2 text-xs',
+    sm: 'min-h-5 px-1.5 text-2xs-plus',
+};
+class PillboxComponent extends PillboxContext {
+    element = inject(ElementRef);
+    document = inject(DOCUMENT);
+    destroyRef = inject(DestroyRef);
+    id = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    placeholder = input('Choose options...', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    searchPlaceholder = input('Search...', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+    size = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    variant = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    searchable = input(false, { ...(ngDevMode ? { debugName: "searchable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    filter = input(true, { ...(ngDevMode ? { debugName: "filter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    clearable = input(true, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * How a bound value is matched against an option's value. The default is
+     * identity, which never matches objects re-fetched from a server: pass a key
+     * comparison there instead.
+     */
+    compareWith = input(Object.is, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []));
+    emptyText = input('No options found.', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
+    loadingText = input('Loading...', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadingText" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    ariaDescribedby = input(null, { ...(ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
+    ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    searchChange = output();
+    create = output();
+    openedChange = output();
+    query = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    openState = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openState" }] : /* istanbul ignore next */ []));
+    selectedValues = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedValues" }] : /* istanbul ignore next */ []));
+    activeOption = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeOption" }] : /* istanbul ignore next */ []));
+    disabledFromControl = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledFromControl" }] : /* istanbul ignore next */ []));
+    generatedId = injectUniqueId('Pillbox');
+    trigger = viewChild.required('trigger', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+    inlineSearch = viewChild('inlineSearch', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inlineSearch" }] : /* istanbul ignore next */ []));
+    panelSearch = viewChild('panelSearch', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelSearch" }] : /* istanbul ignore next */ []));
+    options = contentChildren(PillboxOptionComponent, { ...(ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {}), descendants: true });
+    createOptions = contentChildren(PillboxOptionCreateComponent, { ...(ngDevMode ? { debugName: "createOptions" } : /* istanbul ignore next */ {}), descendants: true });
+    emptyOptions = contentChildren(PillboxOptionEmptyComponent, { ...(ngDevMode ? { debugName: "emptyOptions" } : /* istanbul ignore next */ {}), descendants: true });
+    removeDocumentListener = null;
+    onChange = () => { };
+    onTouched = () => { };
+    panelId = `${this.generatedId}-panel`;
+    resolvedId = computed(() => this.id() ?? this.generatedId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedId" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the widget renders a text input. When it does, that input is the
+     * combobox -- ARIA puts the role on the field the user types into, and a
+     * combobox-roled wrapper around it would leave the field itself unannounced
+     * and add a second tab stop in front of it.
+     */
+    hasInlineSearch = computed(() => this.variant() === 'combobox', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasInlineSearch" }] : /* istanbul ignore next */ []));
+    disabledState = computed(() => this.disabled() || this.disabledFromControl(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('relative block w-full min-w-0 text-sm text-foreground', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    triggerClasses = computed(() => cn('flex w-full min-w-0 cursor-default items-center gap-2 rounded-md border border-input bg-background shadow-sm transition-colors', 'focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background', 'hover:bg-accent/20', pillboxTriggerSizeClasses[this.size()], this.invalid() ? 'border-destructive ring-1 ring-destructive' : '', this.disabledState() ? 'pointer-events-none cursor-not-allowed opacity-50' : ''), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerClasses" }] : /* istanbul ignore next */ []));
+    pillClasses = computed(() => cn('inline-flex max-w-full shrink-0 items-center gap-1 rounded-md border border-border bg-muted font-medium text-muted-foreground', pillboxPillSizeClasses[this.size()]), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pillClasses" }] : /* istanbul ignore next */ []));
+    panelClasses = computed(() => cn('absolute left-0 right-0 z-50 mt-1 overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md', 'min-w-full'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelClasses" }] : /* istanbul ignore next */ []));
+    selectedItems = computed(() => this.selectedValues().map((value) => {
+        const option = this.findOption(value);
+        return {
+            value,
+            label: option?.pillLabel() || String(value),
+            template: option?.pillTemplate() ?? null,
+            // Track by the option value (selected values are unique) so removing a
+            // middle pill doesn't recreate the DOM of every pill after it.
+            track: value,
+        };
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedItems" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        this.destroyRef.onDestroy(() => this.removeOutsideListener());
+    }
+    /**
+     * Every option the user can reach right now, in the order they are painted.
+     *
+     * Both kinds of `role="option"` live in the same listbox, so they rove as one
+     * list. `contentChildren` only orders within a single type, hence the document
+     * comparison: it is the rendered order that a roving model has to follow.
+     */
+    rovingOptions = computed(() => {
+        const all = [...this.options(), ...this.createOptions()];
+        return all
+            .filter((option) => option.rovingVisible() && !option.disabled())
+            .sort((left, right) => left.nativeElement().compareDocumentPosition(right.nativeElement()) &
+            Node.DOCUMENT_POSITION_FOLLOWING
+            ? -1
+            : 1);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rovingOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * A listbox carries exactly one tab stop, not one per option. The option that
+     * last held focus keeps it, falling back to the first reachable option -- so
+     * Tab enters the list once, and the arrows do the rest.
+     */
+    optionTabIndex(option) {
+        const roving = this.rovingOptions();
+        if (roving.length === 0) {
+            return -1;
+        }
+        const active = this.activeOption();
+        const owner = active && roving.includes(active) ? active : roving[0];
+        return owner === option ? 0 : -1;
+    }
+    activateOption(option) {
+        this.activeOption.set(option);
+    }
+    handleOptionKeydown(option, event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.close();
+            this.focus();
+            return;
+        }
+        const roving = this.rovingOptions();
+        if (roving.length === 0) {
+            return;
+        }
+        const current = roving.indexOf(option);
+        const next = this.rovingTarget(event.key, current, roving.length);
+        if (next === null) {
+            return;
+        }
+        event.preventDefault();
+        const target = roving[next];
+        if (!target) {
+            return;
+        }
+        this.activateOption(target);
+        target.focus();
+    }
+    /** Where one navigation key lands, or `null` when the key is not ours. */
+    rovingTarget(key, current, length) {
+        switch (key) {
+            case 'ArrowDown':
+                return current < 0 ? 0 : (current + 1) % length;
+            case 'ArrowUp':
+                return current < 0 ? length - 1 : (current - 1 + length) % length;
+            case 'Home':
+                return 0;
+            case 'End':
+                return length - 1;
+            default:
+                return null;
+        }
+    }
+    optionVisible(option) {
+        if (!this.filter() || !option.filterable()) {
+            return true;
+        }
+        const query = this.query().trim().toLowerCase();
+        if (!query) {
+            return true;
+        }
+        return option.textLabel().toLowerCase().includes(query);
+    }
+    optionSelected(option) {
+        return this.hasValue(option.value());
+    }
+    chooseOption(option, event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.disabledState() || option.disabled()) {
+            return;
+        }
+        if (this.multiple()) {
+            const value = option.value();
+            this.selectedValues.update((values) => values.some((entry) => this.sameValue(entry, value))
+                ? values.filter((entry) => !this.sameValue(entry, value))
+                : [...values, value]);
+        }
+        else {
+            this.selectedValues.set([option.value()]);
+            this.close();
+        }
+        option.selectedChange.emit(option.value());
+        this.query.set('');
+        this.emitValue();
+    }
+    createVisible(option) {
+        const query = this.query().trim();
+        if (option.disabled() || query.length < option.minLength()) {
+            return false;
+        }
+        return !this.options().some((entry) => entry.textLabel().trim().toLowerCase() === query.toLowerCase());
+    }
+    chooseCreate(option, event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const query = this.query().trim();
+        if (this.disabledState() || option.disabled() || !this.createVisible(option)) {
+            return;
+        }
+        option.selected.emit(query);
+        this.create.emit(query);
+    }
+    emptyVisible() {
+        return this.options().length > 0 && !this.hasVisibleOptions() && !this.hasVisibleCreateOption();
+    }
+    emptyMessage() {
+        const customEmptyOption = this.emptyOptions()[0];
+        if (this.loading()) {
+            return customEmptyOption?.whenLoading() || this.loadingText();
+        }
+        return customEmptyOption ? '' : this.emptyText();
+    }
+    handleTriggerClick() {
+        this.open();
+    }
+    handleTriggerKeydown(event) {
+        if (this.disabledState()) {
+            return;
+        }
+        event.preventDefault();
+        this.open();
+    }
+    handleSearchInput(event) {
+        const inputElement = event.target;
+        this.query.set(inputElement.value);
+        this.searchChange.emit(inputElement.value);
+        this.open();
+    }
+    handleInlineBackspace(event) {
+        if (event.target.value.length > 0 || this.selectedValues().length === 0) {
+            return;
+        }
+        event.preventDefault();
+        this.selectedValues.update((values) => values.slice(0, -1));
+        this.emitValue();
+    }
+    clearSearch(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.query.set('');
+        this.searchChange.emit('');
+        this.focusSearchInput();
+    }
+    clear(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.selectedValues.set([]);
+        this.emitValue();
+    }
+    removeSelected(value, event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.selectedValues.update((values) => values.filter((entry) => !this.sameValue(entry, value)));
+        this.emitValue();
+    }
+    open() {
+        if (this.disabledState() || this.openState()) {
+            return;
+        }
+        this.openState.set(true);
+        this.openedChange.emit(true);
+        queueMicrotask(() => {
+            this.focusSearchInput();
+            this.bindOutsideListener();
+        });
+    }
+    close() {
+        if (!this.openState()) {
+            return;
+        }
+        this.openState.set(false);
+        this.openedChange.emit(false);
+        this.removeOutsideListener();
+        // Forget where the roving tab stop was. A panel that reopens starts at the
+        // top, and the remembered option may not even be rendered next time.
+        this.activeOption.set(null);
+        this.onTouched();
+    }
+    focus() {
+        const inlineSearch = this.inlineSearch()?.nativeElement;
+        if (inlineSearch) {
+            inlineSearch.focus();
+            return;
+        }
+        this.trigger().nativeElement.focus();
+    }
+    writeValue(value) {
+        if (this.multiple()) {
+            this.selectedValues.set(Array.isArray(value) ? value : []);
+            return;
+        }
+        this.selectedValues.set(value === null || value === undefined ? [] : [value]);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.disabledFromControl.set(disabled);
+    }
+    emitValue() {
+        const nextValue = this.multiple()
+            ? [...this.selectedValues()]
+            : (this.selectedValues()[0] ?? null);
+        this.onChange(nextValue);
+        this.valueChange.emit(nextValue);
+    }
+    hasValue(value) {
+        return this.selectedValues().some((entry) => this.sameValue(entry, value));
+    }
+    findOption(value) {
+        return this.options().find((option) => this.sameValue(option.value(), value));
+    }
+    hasVisibleOptions() {
+        return this.options().some((option) => this.optionVisible(option));
+    }
+    hasVisibleCreateOption() {
+        return this.createOptions().some((option) => this.createVisible(option));
+    }
+    sameValue(left, right) {
+        return this.compareWith()(left, right);
+    }
+    focusSearchInput() {
+        const searchInput = this.variant() === 'combobox'
+            ? this.inlineSearch()?.nativeElement
+            : this.panelSearch()?.nativeElement;
+        searchInput?.focus();
+    }
+    bindOutsideListener() {
+        this.removeOutsideListener();
+        const listener = (event) => {
+            if (!this.element.nativeElement.contains(event.target)) {
+                this.close();
+            }
+        };
+        this.document.addEventListener('pointerdown', listener, true);
+        this.removeDocumentListener = () => this.document.removeEventListener('pointerdown', listener, true);
+    }
+    removeOutsideListener() {
+        this.removeDocumentListener?.();
+        this.removeDocumentListener = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PillboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: PillboxComponent, isStandalone: true, selector: "Pillbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", searchChange: "searchChange", create: "create", openedChange: "openedChange" }, host: { properties: { "class": "classes()", "attr.data-slot": "\"pillbox\"", "attr.data-open": "openState() ? \"\" : null", "attr.data-size": "size()", "attr.data-variant": "variant()" } }, providers: [
+            { provide: PillboxContext, useExisting: forwardRef(() => PillboxComponent) },
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => PillboxComponent), multi: true },
+        ], queries: [{ propertyName: "options", predicate: PillboxOptionComponent, descendants: true, isSignal: true }, { propertyName: "createOptions", predicate: PillboxOptionCreateComponent, descendants: true, isSignal: true }, { propertyName: "emptyOptions", predicate: PillboxOptionEmptyComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "inlineSearch", first: true, predicate: ["inlineSearch"], descendants: true, isSignal: true }, { propertyName: "panelSearch", first: true, predicate: ["panelSearch"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <div
+      #trigger
+      [attr.id]="resolvedId()"
+      [attr.role]="hasInlineSearch() ? null : 'combobox'"
+      [attr.aria-haspopup]="hasInlineSearch() ? null : 'listbox'"
+      [attr.aria-expanded]="hasInlineSearch() ? null : openState()"
+      [attr.aria-controls]="!hasInlineSearch() && openState() ? panelId : null"
+      [attr.aria-label]="hasInlineSearch() ? null : ariaLabel()"
+      [attr.aria-labelledby]="hasInlineSearch() ? null : ariaLabelledby()"
+      [attr.aria-describedby]="hasInlineSearch() ? null : ariaDescribedby()"
+      [attr.aria-invalid]="!hasInlineSearch() && invalid() ? 'true' : null"
+      [attr.aria-disabled]="!hasInlineSearch() && disabledState() ? 'true' : null"
+      [attr.tabindex]="hasInlineSearch() ? null : disabledState() ? -1 : 0"
+      [class]="triggerClasses()"
+      (click)="handleTriggerClick()"
+      (keydown.enter)="handleTriggerKeydown($any($event))"
+      (keydown.space)="handleTriggerKeydown($any($event))"
+      (keydown.arrowDown)="handleTriggerKeydown($any($event))"
+      (keydown.escape)="close()"
+    >
+      <div class="flex min-w-0 flex-1 flex-wrap items-center gap-1.5">
+        @if (selectedItems().length > 0) {
+          @for (item of selectedItems(); track item.track) {
+            <span [class]="pillClasses()">
+              @if (item.template; as template) {
+                <span class="inline-flex min-w-0 max-w-40 items-center gap-1 truncate">
+                  <ng-container *ngTemplateOutlet="template" />
+                </span>
+              } @else {
+                <span class="max-w-40 truncate">{{ item.label }}</span>
+              }
+              <button
+                type="button"
+                class="-mr-1 inline-flex size-4 items-center justify-center rounded-full text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                [attr.aria-label]="'Remove ' + item.label"
+                [disabled]="disabledState() || null"
+                (click)="removeSelected(item.value, $event)"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="size-3"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path d="M18 6 6 18" />
+                  <path d="m6 6 12 12" />
+                </svg>
+              </button>
+            </span>
+          }
+        }
+
+        @if (variant() === 'combobox') {
+          <input
+            #inlineSearch
+            class="min-w-28 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed"
+            role="combobox"
+            aria-haspopup="listbox"
+            aria-autocomplete="list"
+            [attr.aria-expanded]="openState()"
+            [attr.aria-controls]="openState() ? panelId : null"
+            [attr.aria-describedby]="ariaDescribedby()"
+            [attr.aria-invalid]="invalid() ? 'true' : null"
+            [attr.aria-label]="ariaLabel() ?? placeholder()"
+            [attr.aria-labelledby]="ariaLabelledby()"
+            [placeholder]="selectedItems().length === 0 ? placeholder() : ''"
+            [value]="query()"
+            [disabled]="disabledState() || null"
+            (click)="$event.stopPropagation(); open()"
+            (input)="handleSearchInput($event)"
+            (keydown.backspace)="handleInlineBackspace($any($event))"
+            (keydown.escape)="close()"
+          />
+        } @else if (selectedItems().length === 0) {
+          <span class="truncate text-muted-foreground">{{ placeholder() }}</span>
+        }
+      </div>
+
+      @if (clearable() && selectedItems().length > 0 && !disabledState()) {
+        <button
+          type="button"
+          class="inline-flex size-5 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          aria-label="Clear selected options"
+          (click)="clear($event)"
+        >
+          <svg
+            aria-hidden="true"
+            class="size-3.5"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M18 6 6 18" />
+            <path d="m6 6 12 12" />
+          </svg>
+        </button>
+      }
+
+      <svg
+        aria-hidden="true"
+        class="size-4 shrink-0 text-muted-foreground transition-transform"
+        [class.rotate-180]="openState()"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="m6 9 6 6 6-6" />
+      </svg>
+    </div>
+
+    <div [class]="panelClasses()" [hidden]="!openState()">
+      @if (searchable() && variant() !== 'combobox') {
+        <div class="border-b border-border p-2">
+          <div class="flex items-center gap-2 rounded-md border border-input bg-background px-2">
+            <svg
+              aria-hidden="true"
+              class="size-4 shrink-0 text-muted-foreground"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.75"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <circle cx="11" cy="11" r="8" />
+              <path d="m21 21-4.35-4.35" />
+            </svg>
+            <input
+              #panelSearch
+              class="h-9 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+              [attr.aria-label]="searchPlaceholder()"
+              [placeholder]="searchPlaceholder()"
+              [value]="query()"
+              (input)="handleSearchInput($event)"
+              (keydown.escape)="close()"
+            />
+            @if (query().length > 0) {
+              <button
+                type="button"
+                class="inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground"
+                aria-label="Clear search"
+                (click)="clearSearch($event)"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="size-3.5"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path d="M18 6 6 18" />
+                  <path d="m6 6 12 12" />
+                </svg>
+              </button>
+            }
+          </div>
+        </div>
+      }
+
+      <div [attr.id]="panelId" class="max-h-72 overflow-y-auto p-1" role="listbox">
+        <ng-content />
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PillboxComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'Pillbox',
+                    imports: [NgTemplateOutlet],
+                    providers: [
+                        { provide: PillboxContext, useExisting: forwardRef(() => PillboxComponent) },
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => PillboxComponent), multi: true },
+                    ],
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"pillbox"',
+                        '[attr.data-open]': 'openState() ? "" : null',
+                        '[attr.data-size]': 'size()',
+                        '[attr.data-variant]': 'variant()',
+                    },
+                    template: `
+    <div
+      #trigger
+      [attr.id]="resolvedId()"
+      [attr.role]="hasInlineSearch() ? null : 'combobox'"
+      [attr.aria-haspopup]="hasInlineSearch() ? null : 'listbox'"
+      [attr.aria-expanded]="hasInlineSearch() ? null : openState()"
+      [attr.aria-controls]="!hasInlineSearch() && openState() ? panelId : null"
+      [attr.aria-label]="hasInlineSearch() ? null : ariaLabel()"
+      [attr.aria-labelledby]="hasInlineSearch() ? null : ariaLabelledby()"
+      [attr.aria-describedby]="hasInlineSearch() ? null : ariaDescribedby()"
+      [attr.aria-invalid]="!hasInlineSearch() && invalid() ? 'true' : null"
+      [attr.aria-disabled]="!hasInlineSearch() && disabledState() ? 'true' : null"
+      [attr.tabindex]="hasInlineSearch() ? null : disabledState() ? -1 : 0"
+      [class]="triggerClasses()"
+      (click)="handleTriggerClick()"
+      (keydown.enter)="handleTriggerKeydown($any($event))"
+      (keydown.space)="handleTriggerKeydown($any($event))"
+      (keydown.arrowDown)="handleTriggerKeydown($any($event))"
+      (keydown.escape)="close()"
+    >
+      <div class="flex min-w-0 flex-1 flex-wrap items-center gap-1.5">
+        @if (selectedItems().length > 0) {
+          @for (item of selectedItems(); track item.track) {
+            <span [class]="pillClasses()">
+              @if (item.template; as template) {
+                <span class="inline-flex min-w-0 max-w-40 items-center gap-1 truncate">
+                  <ng-container *ngTemplateOutlet="template" />
+                </span>
+              } @else {
+                <span class="max-w-40 truncate">{{ item.label }}</span>
+              }
+              <button
+                type="button"
+                class="-mr-1 inline-flex size-4 items-center justify-center rounded-full text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                [attr.aria-label]="'Remove ' + item.label"
+                [disabled]="disabledState() || null"
+                (click)="removeSelected(item.value, $event)"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="size-3"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path d="M18 6 6 18" />
+                  <path d="m6 6 12 12" />
+                </svg>
+              </button>
+            </span>
+          }
+        }
+
+        @if (variant() === 'combobox') {
+          <input
+            #inlineSearch
+            class="min-w-28 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed"
+            role="combobox"
+            aria-haspopup="listbox"
+            aria-autocomplete="list"
+            [attr.aria-expanded]="openState()"
+            [attr.aria-controls]="openState() ? panelId : null"
+            [attr.aria-describedby]="ariaDescribedby()"
+            [attr.aria-invalid]="invalid() ? 'true' : null"
+            [attr.aria-label]="ariaLabel() ?? placeholder()"
+            [attr.aria-labelledby]="ariaLabelledby()"
+            [placeholder]="selectedItems().length === 0 ? placeholder() : ''"
+            [value]="query()"
+            [disabled]="disabledState() || null"
+            (click)="$event.stopPropagation(); open()"
+            (input)="handleSearchInput($event)"
+            (keydown.backspace)="handleInlineBackspace($any($event))"
+            (keydown.escape)="close()"
+          />
+        } @else if (selectedItems().length === 0) {
+          <span class="truncate text-muted-foreground">{{ placeholder() }}</span>
+        }
+      </div>
+
+      @if (clearable() && selectedItems().length > 0 && !disabledState()) {
+        <button
+          type="button"
+          class="inline-flex size-5 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          aria-label="Clear selected options"
+          (click)="clear($event)"
+        >
+          <svg
+            aria-hidden="true"
+            class="size-3.5"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M18 6 6 18" />
+            <path d="m6 6 12 12" />
+          </svg>
+        </button>
+      }
+
+      <svg
+        aria-hidden="true"
+        class="size-4 shrink-0 text-muted-foreground transition-transform"
+        [class.rotate-180]="openState()"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="m6 9 6 6 6-6" />
+      </svg>
+    </div>
+
+    <div [class]="panelClasses()" [hidden]="!openState()">
+      @if (searchable() && variant() !== 'combobox') {
+        <div class="border-b border-border p-2">
+          <div class="flex items-center gap-2 rounded-md border border-input bg-background px-2">
+            <svg
+              aria-hidden="true"
+              class="size-4 shrink-0 text-muted-foreground"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.75"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <circle cx="11" cy="11" r="8" />
+              <path d="m21 21-4.35-4.35" />
+            </svg>
+            <input
+              #panelSearch
+              class="h-9 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+              [attr.aria-label]="searchPlaceholder()"
+              [placeholder]="searchPlaceholder()"
+              [value]="query()"
+              (input)="handleSearchInput($event)"
+              (keydown.escape)="close()"
+            />
+            @if (query().length > 0) {
+              <button
+                type="button"
+                class="inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground"
+                aria-label="Clear search"
+                (click)="clearSearch($event)"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="size-3.5"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path d="M18 6 6 18" />
+                  <path d="m6 6 12 12" />
+                </svg>
+              </button>
+            }
+          </div>
+        </div>
+      }
+
+      <div [attr.id]="panelId" class="max-h-72 overflow-y-auto p-1" role="listbox">
+        <ng-content />
+      </div>
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], create: [{ type: i0.Output, args: ["create"] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], inlineSearch: [{ type: i0.ViewChild, args: ['inlineSearch', { isSignal: true }] }], panelSearch: [{ type: i0.ViewChild, args: ['panelSearch', { isSignal: true }] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PillboxOptionComponent), { ...{ descendants: true }, isSignal: true }] }], createOptions: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PillboxOptionCreateComponent), { ...{
+                            descendants: true,
+                        }, isSignal: true }] }], emptyOptions: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PillboxOptionEmptyComponent), { ...{
+                            descendants: true,
+                        }, isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { PillboxComponent, PillboxOptionComponent, PillboxOptionCreateComponent, PillboxOptionEmptyComponent, PillboxSelectedDirective };