@edsis/ui 0.0.2

package/fesm2022/edsis-ui-pillbox.mjs

@@ -0,0 +1,777 @@
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, ElementRef, contentChild, input, booleanAttribute, output, computed, ChangeDetectionStrategy, Component, numberAttribute, DestroyRef, signal, viewChild, contentChildren, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { cn } from '@edsis/ui/utils';
+
+class PillboxContext {
+}
+let nextPillboxId = 0;
+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-[0.6875rem]',
+};
+class PillboxSelectedDirective {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PillboxSelectedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: PillboxSelectedDirective, isStandalone: true, selector: "ng-template[uiPillboxSelected]", exportAs: ["uiPillboxSelected"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PillboxSelectedDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[uiPillboxSelected]',
+                    exportAs: 'uiPillboxSelected',
+                }]
+        }] });
+class PillboxOptionComponent {
+    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 */ []));
+    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 */ []));
+    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);
+    }
+    handleKeydown(event) {
+        event.preventDefault();
+        this.context.chooseOption(this, event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PillboxOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PillboxOptionComponent, isStandalone: true, selector: "ui-pillbox-option, button[ui-pillbox-option]", 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)", "keydown.enter": "handleKeydown($any($event))", "keydown.space": "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": "disabled() ? -1 : 0", "hidden": "!visible()" } }, queries: [{ propertyName: "selectedTemplate", first: true, predicate: PillboxSelectedDirective, descendants: true, isSignal: 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, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PillboxOptionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-pillbox-option, button[ui-pillbox-option]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    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]': 'disabled() ? -1 : 0',
+                        '[hidden]': '!visible()',
+                        '(click)': 'handleClick($event)',
+                        '(keydown.enter)': 'handleKeydown($any($event))',
+                        '(keydown.space)': '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 {
+    context = inject(PillboxContext);
+    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 */ []));
+    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 */ []));
+    handleClick(event) {
+        this.context.chooseCreate(this, event);
+    }
+    handleKeydown(event) {
+        event.preventDefault();
+        this.context.chooseCreate(this, event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PillboxOptionCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: PillboxOptionCreateComponent, isStandalone: true, selector: "ui-pillbox-option-create, button[ui-pillbox-option-create]", 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)", "keydown.enter": "handleKeydown($any($event))", "keydown.space": "handleKeydown($any($event))" }, properties: { "class": "classes()", "attr.data-slot": "\"pillbox-option-create\"", "attr.role": "\"option\"", "attr.tabindex": "disabled() ? -1 : 0", "attr.aria-disabled": "disabled() ? \"true\" : null", "hidden": "!visible()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PillboxOptionCreateComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-pillbox-option-create, button[ui-pillbox-option-create]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        type: 'button',
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"pillbox-option-create"',
+                        '[attr.role]': '"option"',
+                        '[attr.tabindex]': 'disabled() ? -1 : 0',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '[hidden]': '!visible()',
+                        '(click)': 'handleClick($event)',
+                        '(keydown.enter)': 'handleKeydown($any($event))',
+                        '(keydown.space)': '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('', ...(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: "21.2.14", ngImport: i0, type: PillboxOptionEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PillboxOptionEmptyComponent, isStandalone: true, selector: "ui-pillbox-option-empty", 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, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PillboxOptionEmptyComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-pillbox-option-empty',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    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 }] }] } });
+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 });
+    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 */ []));
+    disabledFromControl = signal(false, ...(ngDevMode ? [{ debugName: "disabledFromControl" }] : /* istanbul ignore next */ []));
+    generatedId = `ui-pillbox-${++nextPillboxId}`;
+    trigger = viewChild.required('trigger');
+    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 */ []));
+    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, index) => {
+        const option = this.findOption(value);
+        return {
+            value,
+            label: option?.pillLabel() || String(value),
+            template: option?.pillTemplate() ?? null,
+            track: this.trackValue(value, index),
+        };
+    }), ...(ngDevMode ? [{ debugName: "selectedItems" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        this.destroyRef.onDestroy(() => this.removeOutsideListener());
+    }
+    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.onTouched();
+    }
+    focus() {
+        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 Object.is(left, right);
+    }
+    trackValue(value, index) {
+        return typeof value === 'object' && value !== null ? index : value;
+    }
+    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: "21.2.14", ngImport: i0, type: PillboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PillboxComponent, isStandalone: true, selector: "ui-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 }, 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()"
+      role="combobox"
+      aria-haspopup="listbox"
+      [attr.aria-expanded]="openState()"
+      [attr.aria-controls]="openState() ? panelId : null"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-labelledby]="ariaLabelledby()"
+      [attr.aria-describedby]="ariaDescribedby()"
+      [attr.aria-invalid]="invalid() ? 'true' : null"
+      [attr.aria-disabled]="disabledState() ? 'true' : null"
+      [attr.tabindex]="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"
+            [placeholder]="selectedItems().length === 0 ? placeholder() : ''"
+            [value]="query()"
+            [disabled]="disabledState() || null"
+            (click)="$event.stopPropagation(); open()"
+            (focus)="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 [attr.id]="panelId" [class]="panelClasses()" [hidden]="!openState()" role="listbox">
+      @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"
+              [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 class="max-h-72 overflow-y-auto p-1">
+        <ng-content />
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PillboxComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-pillbox',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    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()"
+      role="combobox"
+      aria-haspopup="listbox"
+      [attr.aria-expanded]="openState()"
+      [attr.aria-controls]="openState() ? panelId : null"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-labelledby]="ariaLabelledby()"
+      [attr.aria-describedby]="ariaDescribedby()"
+      [attr.aria-invalid]="invalid() ? 'true' : null"
+      [attr.aria-disabled]="disabledState() ? 'true' : null"
+      [attr.tabindex]="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"
+            [placeholder]="selectedItems().length === 0 ? placeholder() : ''"
+            [value]="query()"
+            [disabled]="disabledState() || null"
+            (click)="$event.stopPropagation(); open()"
+            (focus)="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 [attr.id]="panelId" [class]="panelClasses()" [hidden]="!openState()" role="listbox">
+      @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"
+              [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 class="max-h-72 overflow-y-auto p-1">
+        <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 }] }], 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 };
+//# sourceMappingURL=edsis-ui-pillbox.mjs.map