@ojiepermana/angular 22.1.14 → 22.2.1

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

@@ -1,92 +1,184 @@
-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';
-
-/**
- * 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.6", ngImport: i0, type: PillboxSelectedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: PillboxSelectedDirective, isStandalone: true, selector: "ng-template[PillboxSelected]", exportAs: ["PillboxSelected"], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", 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.6", ngImport: i0, type: PillboxOptionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", 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: `
+import { DOCUMENT, NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { Component, DestroyRef, Directive, ElementRef, TemplateRef, booleanAttribute, computed, contentChild, contentChildren, forwardRef, inject, input, numberAttribute, output, signal, viewChild } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { cn, injectUniqueId } from "@ojiepermana/angular/component/utils/core";
+var PillboxRovingOption = class {};
+var PillboxContext = class {};
+var PillboxSelectedDirective = class PillboxSelectedDirective {
+	template = inject(TemplateRef);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: PillboxSelectedDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: PillboxSelectedDirective,
+		isStandalone: true,
+		selector: "ng-template[PillboxSelected]",
+		exportAs: ["PillboxSelected"],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: PillboxSelectedDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "ng-template[PillboxSelected]",
+			exportAs: "PillboxSelected"
+		}]
+	}]
+});
+var PillboxOptionComponent = class PillboxOptionComponent extends PillboxRovingOption {
+	context = inject(PillboxContext);
+	element = inject(ElementRef);
+	selectedTemplate = contentChild(PillboxSelectedDirective, ...ngDevMode ? [{ debugName: "selectedTemplate" }] : /* istanbul ignore next */ []);
+	value = input.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	selectedLabel = input("", ...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("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	selectedChange = output();
+	selected = computed(() => this.context.optionSelected(this), ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
+	visible = computed(() => this.context.optionVisible(this), ...ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []);
+	tabIndex = computed(() => this.context.optionTabIndex(this), ...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()), ...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.2.2",
+		ngImport: i0,
+		type: PillboxOptionComponent,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		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
@@ -102,28 +194,35 @@ class PillboxOptionComponent extends PillboxRovingOption {
         <path d="M20 6 9 17l-5-5" />
       </svg>
     }
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", 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: `
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	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
@@ -139,484 +238,844 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         <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.6", ngImport: i0, type: PillboxOptionCreateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", 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.6", 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.6", ngImport: i0, type: PillboxOptionEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", 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: `
+  `
+		}]
+	}],
+	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"]
+		}]
+	}
+});
+var PillboxOptionCreateComponent = 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("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	selected = output();
+	visible = computed(() => this.context.createVisible(this), ...ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []);
+	tabIndex = computed(() => this.context.optionTabIndex(this), ...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()), ...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.2.2",
+		ngImport: i0,
+		type: PillboxOptionCreateComponent,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		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.2.2",
+	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"]
+		}]
+	}
+});
+var PillboxOptionEmptyComponent = class PillboxOptionEmptyComponent {
+	context = inject(PillboxContext);
+	whenLoading = input("", ...ngDevMode ? [{ debugName: "whenLoading" }] : /* istanbul ignore next */ []);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("px-2 py-6 text-center text-sm text-muted-foreground", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: PillboxOptionEmptyComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		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.6", 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: `
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	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 }] }] } });
-
+  `
+		}]
+	}],
+	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',
+	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',
+	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.6", ngImport: i0, type: PillboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", 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: `
+var PillboxComponent = class PillboxComponent extends PillboxContext {
+	element = inject(ElementRef);
+	document = inject(DOCUMENT);
+	destroyRef = inject(DestroyRef);
+	id = input(null, ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+	placeholder = input("Choose options...", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	searchPlaceholder = input("Search...", ...ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []);
+	size = input("default", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	variant = input("default", ...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
+	});
+	compareWith = input(Object.is, ...ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []);
+	emptyText = input("No options found.", ...ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []);
+	loadingText = input("Loading...", ...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("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	valueChange = output();
+	searchChange = output();
+	create = output();
+	openedChange = output();
+	query = signal("", ...ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []);
+	openState = signal(false, ...ngDevMode ? [{ debugName: "openState" }] : /* istanbul ignore next */ []);
+	selectedValues = signal([], ...ngDevMode ? [{ debugName: "selectedValues" }] : /* istanbul ignore next */ []);
+	activeOption = signal(null, ...ngDevMode ? [{ debugName: "activeOption" }] : /* istanbul ignore next */ []);
+	disabledFromControl = signal(false, ...ngDevMode ? [{ debugName: "disabledFromControl" }] : /* istanbul ignore next */ []);
+	generatedId = injectUniqueId("Pillbox");
+	trigger = viewChild.required("trigger", ...ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []);
+	inlineSearch = viewChild("inlineSearch", ...ngDevMode ? [{ debugName: "inlineSearch" }] : /* istanbul ignore next */ []);
+	panelSearch = viewChild("panelSearch", ...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, ...ngDevMode ? [{ debugName: "resolvedId" }] : /* istanbul ignore next */ []);
+	hasInlineSearch = computed(() => this.variant() === "combobox", ...ngDevMode ? [{ debugName: "hasInlineSearch" }] : /* istanbul ignore next */ []);
+	disabledState = computed(() => this.disabled() || this.disabledFromControl(), ...ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("relative block w-full min-w-0 text-sm text-foreground", this.class()), ...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" : ""), ...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()]), ...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"), ...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: value
+		};
+	}), ...ngDevMode ? [{ debugName: "selectedItems" }] : /* istanbul ignore next */ []);
+	constructor() {
+		super();
+		this.destroyRef.onDestroy(() => this.removeOutsideListener());
+	}
+	rovingOptions = computed(() => {
+		return [...this.options(), ...this.createOptions()].filter((option) => option.rovingVisible() && !option.disabled()).sort((left, right) => left.nativeElement().compareDocumentPosition(right.nativeElement()) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1);
+	}, ...ngDevMode ? [{ debugName: "rovingOptions" }] : /* istanbul ignore next */ []);
+	optionTabIndex(option) {
+		const roving = this.rovingOptions();
+		if (roving.length === 0) return -1;
+		const active = this.activeOption();
+		return (active && roving.includes(active) ? active : roving[0]) === 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();
+	}
+	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();
+		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 === void 0 ? [] : [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() {
+		(this.variant() === "combobox" ? this.inlineSearch()?.nativeElement : this.panelSearch()?.nativeElement)?.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.2.2",
+		ngImport: i0,
+		type: PillboxComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		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()"
@@ -793,25 +1252,46 @@ class PillboxComponent extends PillboxContext {
         <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.6", 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: `
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	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()"
@@ -988,16 +1468,212 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         <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 };
+  `
+		}]
+	}],
+	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
+			}]
+		}]
+	}
+});
+export { PillboxComponent, PillboxOptionComponent, PillboxOptionCreateComponent, PillboxOptionEmptyComponent, PillboxSelectedDirective };