@egose/shadcn-theme-ng 0.0.26 → 0.0.28

package/autocomplete/fesm2022/autocomplete.mjs

@@ -1,533 +1,399 @@
 import * as i0 from '@angular/core';
-import { input, computed, Directive, ChangeDetectionStrategy, Component, inject, ElementRef, booleanAttribute, InjectionToken, forwardRef, viewChild, linkedSignal, output, NgModule } from '@angular/core';
-import { NgTemplateOutlet } from '@angular/common';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { NgIcon, provideIcons } from '@ng-icons/core';
-import { lucideChevronDown, lucideSearch } from '@ng-icons/lucide';
+import { Directive, input, booleanAttribute, ChangeDetectionStrategy, Component, inject, NgModule } from '@angular/core';
 import * as i1 from '@spartan-ng/brain/autocomplete';
-import { BrnAutocompleteGroup, BrnAutocompleteItem, BrnAutocompleteList, BrnAutocompleteSearchInput, BrnAutocomplete, BrnAutocompleteEmpty } from '@spartan-ng/brain/autocomplete';
-import { BrnPopover, BrnPopoverContent } from '@spartan-ng/brain/popover';
-import { provideHlmIconConfig, HlmIcon } from '@egose/shadcn-theme-ng/icon';
-import { HlmPopoverContent } from '@egose/shadcn-theme-ng/popover';
-import { hlm } from '@egose/shadcn-theme-ng/utils';
-import { BrnDialog } from '@spartan-ng/brain/dialog';
+import { BrnAutocomplete, BrnAutocompleteContent, BrnAutocompleteEmpty, BrnAutocompleteGroup, BrnAutocompleteClear, BrnAutocompleteInput, BrnAutocompleteAnchor, BrnAutocompleteItem, BrnAutocompleteLabel, BrnAutocompleteList, BrnAutocompleteSearch, BrnAutocompleteSeparator, BrnAutocompleteStatus } from '@spartan-ng/brain/autocomplete';
+import * as i2 from '@spartan-ng/brain/popover';
+import { provideBrnPopoverConfig, provideBrnPopoverDefaultOptions, BrnPopover, BrnPopoverContent } from '@spartan-ng/brain/popover';
+import { classes } from '@egose/shadcn-theme-ng/utils';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideX, lucideSearch, lucideCheck } from '@ng-icons/lucide';
+import * as i2$1 from '@egose/shadcn-theme-ng/input-group';
+import { HlmInputGroup, HlmInputGroupImports } from '@egose/shadcn-theme-ng/input-group';
 
-class HlmAutocompleteEmpty {
-    userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('py-2 text-center text-sm', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmAutocompleteEmpty, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmAutocompleteEmpty, isStandalone: true, selector: "[hlmAutocompleteEmpty]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0 });
+class HlmAutocomplete {
+    constructor() {
+        classes(() => 'block');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmAutocomplete, isStandalone: true, selector: "[hlmAutocomplete],hlm-autocomplete", host: { attributes: { "data-slot": "autocomplete" } }, providers: [
+            provideBrnPopoverConfig({
+                align: 'start',
+                sideOffset: 6,
+            }),
+            provideBrnPopoverDefaultOptions({ role: null }),
+        ], hostDirectives: [{ directive: i1.BrnAutocomplete, inputs: ["autoHighlight", "autoHighlight", "disabled", "disabled", "value", "value", "search", "search", "itemToString", "itemToString", "isItemEqualToValue", "isItemEqualToValue"], outputs: ["valueChange", "valueChange", "searchChange", "searchChange"] }, { directive: i2.BrnPopover, inputs: ["align", "align", "closeOnOutsidePointerEvents", "closeOnOutsidePointerEvents", "sideOffset", "sideOffset", "state", "state", "offsetX", "offsetX"], outputs: ["stateChanged", "stateChanged", "closed", "closed"] }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmAutocompleteEmpty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAutocomplete, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[hlmAutocompleteEmpty]',
-                    host: {
-                        '[class]': '_computedClass()',
-                    },
-                }]
-        }] });
-
-class HlmAutocompleteGroup {
-    /** The user defined class  */
-    userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    /** The styles to apply  */
-    _computedClass = computed(() => hlm('text-foreground block overflow-hidden p-1', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmAutocompleteGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: HlmAutocompleteGroup, isStandalone: true, selector: "hlm-autocomplete-group", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnAutocompleteGroup, inputs: ["id", "id"] }], ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmAutocompleteGroup, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'hlm-autocomplete-group',
-                    template: '<ng-content />',
-                    hostDirectives: [
-                        {
-                            directive: BrnAutocompleteGroup,
-                            inputs: ['id'],
-                        },
+                    selector: '[hlmAutocomplete],hlm-autocomplete',
+                    providers: [
+                        provideBrnPopoverConfig({
+                            align: 'start',
+                            sideOffset: 6,
+                        }),
+                        provideBrnPopoverDefaultOptions({ role: null }),
                     ],
-                    host: {
-                        '[class]': '_computedClass()',
-                    },
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }] });
-
-class HlmAutocompleteItem {
-    /** The user defined class  */
-    userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    /** The styles to apply  */
-    _computedClass = computed(() => hlm('data-[selected]:bg-accent data-[selected]:text-accent-foreground [&>ng-icon]:text-muted-foreground outline-hidden relative flex w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[hidden]:hidden data-[disabled]:opacity-50 [&>ng-icon]:pointer-events-none [&>ng-icon]:shrink-0 [&>ng-icon]:text-base', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmAutocompleteItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: HlmAutocompleteItem, isStandalone: true, selector: "button[hlm-autocomplete-item]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnAutocompleteItem, inputs: ["value", "value", "disabled", "disabled", "id", "id"], outputs: ["selected", "selected"] }], ngImport: i0, template: ` <ng-content /> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmAutocompleteItem, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'button[hlm-autocomplete-item]',
-                    template: ` <ng-content /> `,
                     hostDirectives: [
                         {
-                            directive: BrnAutocompleteItem,
-                            inputs: ['value', 'disabled', 'id'],
-                            outputs: ['selected'],
+                            directive: BrnAutocomplete,
+                            inputs: ['autoHighlight', 'disabled', 'value', 'search', 'itemToString', 'isItemEqualToValue'],
+                            outputs: ['valueChange', 'searchChange'],
                         },
-                    ],
-                    host: {
-                        '[class]': '_computedClass()',
-                    },
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }] });
-
-class HlmAutocompleteList {
-    /** The user defined class  */
-    userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    /** The styles to apply  */
-    _computedClass = computed(() => hlm('block max-h-60 overflow-y-auto overflow-x-hidden', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmAutocompleteList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: HlmAutocompleteList, isStandalone: true, selector: "hlm-autocomplete-list", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnAutocompleteList, inputs: ["id", "id"] }], ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmAutocompleteList, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'hlm-autocomplete-list',
-                    template: '<ng-content />',
-                    host: {
-                        '[class]': '_computedClass()',
-                    },
-                    hostDirectives: [
                         {
-                            directive: BrnAutocompleteList,
-                            inputs: ['id'],
+                            directive: BrnPopover,
+                            inputs: ['align', 'closeOnOutsidePointerEvents', 'sideOffset', 'state', 'offsetX'],
+                            outputs: ['stateChanged', 'closed'],
                         },
                     ],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { 'data-slot': 'autocomplete' },
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
-class HlmAutocompleteSearch {
-    /** The user defined class  */
-    userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    /** The styles to apply  */
-    _computedClass = computed(() => hlm('border-input focus-within:border-ring bg-background focus-within:ring-ring/50 shadow-xs dark:bg-input/10 flex h-9 min-w-0 items-center gap-2 rounded-md border px-3 focus-within:ring-[3px] [&>_ng-icon]:flex-none [&>_ng-icon]:opacity-50', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmAutocompleteSearch, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: HlmAutocompleteSearch, isStandalone: true, selector: "hlm-autocomplete-search", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, providers: [provideHlmIconConfig({ size: 'sm' })], ngImport: i0, template: ` <ng-content /> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+class HlmAutocompleteContent {
+    constructor() {
+        classes(() => 'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 max-h-72 min-w-36 overflow-hidden rounded-md shadow-md ring-1 duration-100 group/autocomplete-content flex w-(--brn-autocomplete-width) flex-col p-0');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAutocompleteContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmAutocompleteContent, isStandalone: true, selector: "[hlmAutocompleteContent],hlm-autocomplete-content", hostDirectives: [{ directive: i1.BrnAutocompleteContent }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmAutocompleteSearch, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAutocompleteContent, decorators: [{
+            type: Directive,
             args: [{
-                    selector: 'hlm-autocomplete-search',
-                    template: ` <ng-content /> `,
-                    host: {
-                        '[class]': '_computedClass()',
-                    },
-                    providers: [provideHlmIconConfig({ size: 'sm' })],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: '[hlmAutocompleteContent],hlm-autocomplete-content',
+                    hostDirectives: [BrnAutocompleteContent],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
-class HlmAutocompleteSearchInput {
-    /** The user defined class  */
-    userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    /** The styles to apply  */
-    _computedClass = computed(() => hlm('placeholder:text-muted-foreground flex h-9 w-full bg-transparent py-1 text-base outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmAutocompleteSearchInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: HlmAutocompleteSearchInput, isStandalone: true, selector: "input[hlm-autocomplete-search-input]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnAutocompleteSearchInput, inputs: ["value", "value"] }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+class HlmAutocompleteEmpty {
+    constructor() {
+        classes(() => 'text-muted-foreground hidden w-full items-center justify-center gap-2 py-2 text-center text-sm group-data-empty/autocomplete-content:flex');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAutocompleteEmpty, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmAutocompleteEmpty, isStandalone: true, selector: "[hlmAutocompleteEmpty],hlm-autocomplete-empty", host: { attributes: { "data-slot": "autocomplete-empty" } }, hostDirectives: [{ directive: i1.BrnAutocompleteEmpty }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmAutocompleteSearchInput, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAutocompleteEmpty, decorators: [{
+            type: Directive,
             args: [{
-                    selector: 'input[hlm-autocomplete-search-input]',
-                    template: '',
-                    hostDirectives: [{ directive: BrnAutocompleteSearchInput, inputs: ['value'] }],
-                    host: {
-                        '[class]': '_computedClass()',
-                    },
-                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: '[hlmAutocompleteEmpty],hlm-autocomplete-empty',
+                    hostDirectives: [BrnAutocompleteEmpty],
+                    host: { 'data-slot': 'autocomplete-empty' },
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
-class HlmAutocompleteTrigger {
-    _host = inject(ElementRef, { host: true });
-    _brnDialog = inject(BrnDialog, { optional: true });
-    /** Whether the trigger is disabled. */
-    disabledTrigger = input(false, ...(ngDevMode ? [{ debugName: "disabledTrigger", transform: booleanAttribute }] : [{
-            transform: booleanAttribute,
-        }]));
+class HlmAutocompleteGroup {
     constructor() {
-        if (!this._brnDialog)
-            return;
-        this._brnDialog.mutableAttachTo.set(this._host.nativeElement);
+        classes(() => 'data-hidden:hidden');
     }
-    open() {
-        if (this.disabledTrigger())
-            return;
-        this._brnDialog?.open();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmAutocompleteTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmAutocompleteTrigger, isStandalone: true, selector: "[hlmAutocompleteTrigger]", inputs: { disabledTrigger: { classPropertyName: "disabledTrigger", publicName: "disabledTrigger", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "open()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAutocompleteGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmAutocompleteGroup, isStandalone: true, selector: "[hlmAutocompleteGroup]", host: { attributes: { "data-slot": "autocomplete-group" } }, hostDirectives: [{ directive: i1.BrnAutocompleteGroup }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmAutocompleteTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAutocompleteGroup, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[hlmAutocompleteTrigger]',
-                    host: {
-                        '(click)': 'open()',
-                    },
+                    selector: '[hlmAutocompleteGroup]',
+                    hostDirectives: [BrnAutocompleteGroup],
+                    host: { 'data-slot': 'autocomplete-group' },
                 }]
         }], ctorParameters: () => [] });
 
-function getDefaultConfig() {
-    return {
-        transformValueToSearch: (value) => (typeof value === 'string' ? value : String(value)),
-    };
-}
-const HlmAutocompleteConfigToken = new InjectionToken('HlmAutocompleteConfig');
-function provideHlmAutocompleteConfig(config) {
-    return { provide: HlmAutocompleteConfigToken, useValue: { ...getDefaultConfig(), ...config } };
-}
-function injectHlmAutocompleteConfig() {
-    return inject(HlmAutocompleteConfigToken, { optional: true }) ?? getDefaultConfig();
-}
-
-const HLM_AUTOCOMPLETE_VALUE_ACCESSOR = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => HlmAutocomplete),
-    multi: true,
-};
-class HlmAutocomplete {
+class HlmAutocompleteInput {
     static _id = 0;
-    _config = injectHlmAutocompleteConfig();
-    _brnPopover = viewChild.required(BrnPopover);
-    _inputRef = viewChild.required('input', { read: ElementRef });
-    _elementRef = inject((ElementRef));
-    onSelect = input(...(ngDevMode ? [undefined, { debugName: "onSelect" }] : []));
-    /** The user defined class  */
-    userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('block w-full', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
-    /** Custom class for the autocomplete list. */
-    autocompleteListClass = input('', ...(ngDevMode ? [{ debugName: "autocompleteListClass" }] : []));
-    _computedAutocompleteListClass = computed(() => hlm('', this.autocompleteListClass()), ...(ngDevMode ? [{ debugName: "_computedAutocompleteListClass" }] : []));
-    /** Custom class for the empty and loading state container. */
-    autocompleteEmptyClass = input('', ...(ngDevMode ? [{ debugName: "autocompleteEmptyClass" }] : []));
-    _computedAutocompleteEmptyClass = computed(() => hlm('', this.autocompleteEmptyClass()), ...(ngDevMode ? [{ debugName: "_computedAutocompleteEmptyClass" }] : []));
-    /** The list of filtered options to display in the autocomplete. */
-    filteredOptions = input([], ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
-    /** The selected value. */
-    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
-    _value = linkedSignal(() => this.value(), ...(ngDevMode ? [{ debugName: "_value" }] : []));
-    /** The search query. */
-    search = input(...(ngDevMode ? [undefined, { debugName: "search" }] : []));
-    _search = linkedSignal(() => this.search() || '', ...(ngDevMode ? [{ debugName: "_search" }] : []));
-    /** Function to transform an option value to a search string. Defaults to identity function for strings. */
-    transformValueToSearch = input(this._config.transformValueToSearch, ...(ngDevMode ? [{ debugName: "transformValueToSearch" }] : []));
-    /** Optional template for rendering each option. */
-    optionTemplate = input(...(ngDevMode ? [undefined, { debugName: "optionTemplate" }] : []));
-    /** Whether the autocomplete is in a loading state. */
-    loading = input(false, ...(ngDevMode ? [{ debugName: "loading", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    /** Placeholder text for the input field. */
-    searchPlaceholderText = input('Select an option', ...(ngDevMode ? [{ debugName: "searchPlaceholderText" }] : []));
-    /** Text to display when loading options. */
-    loadingText = input('Loading options...', ...(ngDevMode ? [{ debugName: "loadingText" }] : []));
-    /** Text to display when no options are found. */
-    emptyText = input('No options found', ...(ngDevMode ? [{ debugName: "emptyText" }] : []));
-    /** Aria label for the toggle button. */
-    ariaLabelToggleButton = input('Toggle options', ...(ngDevMode ? [{ debugName: "ariaLabelToggleButton" }] : []));
-    /** The id of the input field. */
-    inputId = input(`hlm-autocomplete-input-${++HlmAutocomplete._id}`, ...(ngDevMode ? [{ debugName: "inputId" }] : []));
-    /** Whether the autocomplete is disabled. */
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    _disabled = linkedSignal(() => this.disabled(), ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
-    /** Emitted when the selected value changes. */
-    valueChange = output();
-    /** Emitted when the search query changes. */
-    searchChange = output();
-    _onChange;
-    _onTouched;
-    _setPopoverState(state) {
-        if (state === 'open') {
-            this._brnPopover().open();
-        }
-        else {
-            this._brnPopover().close();
-        }
-    }
-    _click() {
-        this._toggleOptions();
-    }
-    _openPopover() {
-        if (this._search() || this.filteredOptions().length > 0) {
-            // only open if there's a search term or options to show
-            this._brnPopover().open();
-        }
-    }
-    _toggleOptions() {
-        if (this._search() || this.filteredOptions().length > 0) {
-            // only toggle if there's a search term or options to show
-            const state = this._brnPopover().stateComputed();
-            this._setPopoverState(state === 'open' ? 'closed' : 'open');
-        }
-        this._inputRef().nativeElement.focus();
-    }
-    _onSearchChanged(event) {
-        const input = event.target;
-        this._search.set(input.value);
-        this.searchChange.emit(input.value);
-        this._clearOption();
-        if (this._brnPopover().stateComputed() !== 'open' && input.value.length > 0) {
-            this._setPopoverState('open');
-        }
+    inputId = input(`hlm-autocomplete-input-${HlmAutocompleteInput._id++}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+    placeholder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    showSearch = input(true, { ...(ngDevMode ? { debugName: "showSearch" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    showClear = input(false, { ...(ngDevMode ? { debugName: "showClear" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Forces the invalid state visually, regardless of form control state. */
+    forceInvalid = input(false, { ...(ngDevMode ? { debugName: "forceInvalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Manual override for aria-invalid. When not set, auto-detects from the parent autocomplete error state. */
+    ariaInvalidOverride = input(undefined, { ...(ngDevMode ? { debugName: "ariaInvalidOverride" } : /* istanbul ignore next */ {}), transform: (v) => (v === '' || v === undefined ? undefined : booleanAttribute(v)),
+        alias: 'aria-invalid' });
+    constructor() {
+        classes(() => 'w-auto');
     }
-    _clearOption() {
-        this._value.set(undefined);
-        this._onChange?.(null);
-        this.valueChange.emit(null);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAutocompleteInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: HlmAutocompleteInput, isStandalone: true, selector: "hlm-autocomplete-input", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, forceInvalid: { classPropertyName: "forceInvalid", publicName: "forceInvalid", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalidOverride: { classPropertyName: "ariaInvalidOverride", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ lucideSearch, lucideX })], hostDirectives: [{ directive: i1.BrnAutocompleteAnchor }, { directive: i2$1.HlmInputGroup }], ngImport: i0, template: `
+    <input
+      brnAutocompleteInput
+      #autocompleteInput="brnAutocompleteInput"
+      hlmInputGroupInput
+      [id]="inputId()"
+      [placeholder]="placeholder()"
+      [aria-invalid]="ariaInvalidOverride()"
+      [forceInvalid]="forceInvalid()"
+    />
+
+    @if (showSearch()) {
+      <hlm-input-group-addon>
+        <ng-icon name="lucideSearch" [class.opacity-50]="autocompleteInput.disabled()" />
+      </hlm-input-group-addon>
     }
-    _optionSelected(option) {
-        this._value.set(option);
-        this._onChange?.(option);
-        this.valueChange.emit(option);
-        const searchValue = this.transformValueToSearch()(option, this.inputId());
-        if (this.onSelect()) {
-            this.onSelect()?.(searchValue);
-        }
-        else {
-            this._search.set(searchValue);
-            this.searchChange.emit(searchValue);
-            this._setPopoverState('closed');
-        }
+
+    @if (showClear()) {
+      <hlm-input-group-addon align="inline-end">
+        <button
+          *brnAutocompleteClear
+          hlmInputGroupButton
+          data-slot="autocomplete-clear"
+          [disabled]="autocompleteInput.disabled()"
+          size="icon-xs"
+          variant="ghost"
+        >
+          <ng-icon name="lucideX" />
+        </button>
+      </hlm-input-group-addon>
     }
-    clearText() {
-        this._inputRef().nativeElement.value = '';
-        this._search.set('');
-        this.searchChange.emit('');
+    <ng-content />
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2$1.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i2$1.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type"] }, { kind: "directive", type: i2$1.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: BrnAutocompleteClear, selector: "[brnAutocompleteClear]" }, { kind: "directive", type: BrnAutocompleteInput, selector: "input[brnAutocompleteInput]", inputs: ["id", "aria-invalid", "forceInvalid"], exportAs: ["brnAutocompleteInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAutocompleteInput, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hlm-autocomplete-input',
+                    imports: [HlmInputGroupImports, NgIcon, BrnAutocompleteClear, BrnAutocompleteInput],
+                    providers: [provideIcons({ lucideSearch, lucideX })],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    hostDirectives: [BrnAutocompleteAnchor, HlmInputGroup],
+                    template: `
+    <input
+      brnAutocompleteInput
+      #autocompleteInput="brnAutocompleteInput"
+      hlmInputGroupInput
+      [id]="inputId()"
+      [placeholder]="placeholder()"
+      [aria-invalid]="ariaInvalidOverride()"
+      [forceInvalid]="forceInvalid()"
+    />
+
+    @if (showSearch()) {
+      <hlm-input-group-addon>
+        <ng-icon name="lucideSearch" [class.opacity-50]="autocompleteInput.disabled()" />
+      </hlm-input-group-addon>
     }
-    setPopoverState(state) {
-        this._setPopoverState(state);
+
+    @if (showClear()) {
+      <hlm-input-group-addon align="inline-end">
+        <button
+          *brnAutocompleteClear
+          hlmInputGroupButton
+          data-slot="autocomplete-clear"
+          [disabled]="autocompleteInput.disabled()"
+          size="icon-xs"
+          variant="ghost"
+        >
+          <ng-icon name="lucideX" />
+        </button>
+      </hlm-input-group-addon>
     }
-    /** CONTROL VALUE ACCESSOR */
-    writeValue(value) {
-        this._value.set(value ? value : undefined);
+    <ng-content />
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], forceInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceInvalid", required: false }] }], ariaInvalidOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-invalid", required: false }] }] } });
+
+class HlmAutocompleteItem {
+    _brnAutocompleteItem = inject(BrnAutocompleteItem);
+    _active = this._brnAutocompleteItem.active;
+    constructor() {
+        classes(() => 'data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-sm py-1.5 ps-2 pe-8 text-sm relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-hidden:hidden [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0');
     }
-    registerOnChange(fn) {
-        this._onChange = fn;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAutocompleteItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: HlmAutocompleteItem, isStandalone: true, selector: "hlm-autocomplete-item", host: { attributes: { "data-slot": "autocomplete-item" } }, providers: [provideIcons({ lucideCheck })], hostDirectives: [{ directive: i1.BrnAutocompleteItem, inputs: ["id", "id", "disabled", "disabled", "value", "value"] }], ngImport: i0, template: `
+    <ng-content />
+    @if (_active()) {
+      <ng-icon
+        name="lucideCheck"
+        class="absolute end-2 flex items-center justify-center text-[length:--spacing(4)]"
+        aria-hidden="true"
+      />
     }
-    registerOnTouched(fn) {
-        this._onTouched = fn;
+  `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAutocompleteItem, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hlm-autocomplete-item',
+                    imports: [NgIcon],
+                    providers: [provideIcons({ lucideCheck })],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    hostDirectives: [{ directive: BrnAutocompleteItem, inputs: ['id', 'disabled', 'value'] }],
+                    host: { 'data-slot': 'autocomplete-item' },
+                    template: `
+    <ng-content />
+    @if (_active()) {
+      <ng-icon
+        name="lucideCheck"
+        class="absolute end-2 flex items-center justify-center text-[length:--spacing(4)]"
+        aria-hidden="true"
+      />
     }
-    setDisabledState(isDisabled) {
-        this._disabled.set(isDisabled);
+  `,
+                }]
+        }], ctorParameters: () => [] });
+
+class HlmAutocompleteLabel {
+    constructor() {
+        classes(() => 'text-muted-foreground px-2 py-1.5 text-xs');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: HlmAutocomplete, isStandalone: true, selector: "hlm-autocomplete", inputs: { onSelect: { classPropertyName: "onSelect", publicName: "onSelect", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, autocompleteListClass: { classPropertyName: "autocompleteListClass", publicName: "autocompleteListClass", isSignal: true, isRequired: false, transformFunction: null }, autocompleteEmptyClass: { classPropertyName: "autocompleteEmptyClass", publicName: "autocompleteEmptyClass", isSignal: true, isRequired: false, transformFunction: null }, filteredOptions: { classPropertyName: "filteredOptions", publicName: "filteredOptions", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, transformValueToSearch: { classPropertyName: "transformValueToSearch", publicName: "transformValueToSearch", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholderText: { classPropertyName: "searchPlaceholderText", publicName: "searchPlaceholderText", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelToggleButton: { classPropertyName: "ariaLabelToggleButton", publicName: "ariaLabelToggleButton", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", searchChange: "searchChange" }, host: { properties: { "class": "_computedClass()" } }, providers: [HLM_AUTOCOMPLETE_VALUE_ACCESSOR, provideIcons({ lucideSearch, lucideChevronDown })], viewQueries: [{ propertyName: "_brnPopover", first: true, predicate: BrnPopover, descendants: true, isSignal: true }, { propertyName: "_inputRef", first: true, predicate: ["input"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
-    <brn-popover
-      #popover
-      align="start"
-      autoFocus="first-heading"
-      sideOffset="5"
-      closeDelay="100"
-      [closeOnOutsidePointerEvents]="true"
-    >
-      <div brnAutocomplete>
-        <hlm-autocomplete-search hlmAutocompleteTrigger [disabledTrigger]="!_search()">
-          <ng-icon name="lucideSearch" hlm />
-          <input
-            #input
-            type="text"
-            autocomplete="off"
-            hlm-autocomplete-search-input
-            [id]="inputId()"
-            [placeholder]="searchPlaceholderText()"
-            [disabled]="_disabled()"
-            [value]="_search()"
-            (input)="_onSearchChanged($event)"
-            (keydown.arrowDown)="_openPopover()"
-            (click)="_click()"
-          />
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAutocompleteLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmAutocompleteLabel, isStandalone: true, selector: "[hlmAutocompleteLabel]", host: { attributes: { "data-slot": "autocomplete-label" } }, hostDirectives: [{ directive: i1.BrnAutocompleteLabel, inputs: ["id", "id"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAutocompleteLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmAutocompleteLabel]',
+                    hostDirectives: [{ directive: BrnAutocompleteLabel, inputs: ['id'] }],
+                    host: { 'data-slot': 'autocomplete-label' },
+                }]
+        }], ctorParameters: () => [] });
 
-          <button
-            class="flex items-center justify-center outline-none disabled:cursor-not-allowed [&>_ng-icon]:opacity-50"
-            tabindex="-1"
-            type="button"
-            [attr.aria-label]="ariaLabelToggleButton()"
-            [disabled]="_disabled()"
-            (click)="_toggleOptions()"
-          >
-            <ng-icon name="lucideChevronDown" hlm />
-          </button>
-        </hlm-autocomplete-search>
+class HlmAutocompleteList {
+    constructor() {
+        classes(() => 'no-scrollbar max-h-[calc(--spacing(72)---spacing(9))] scroll-py-1 p-1 data-empty:p-0 overflow-y-auto overscroll-contain');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAutocompleteList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmAutocompleteList, isStandalone: true, selector: "[hlmAutocompleteList]", host: { attributes: { "data-slot": "autocomplete-list" } }, hostDirectives: [{ directive: i1.BrnAutocompleteList, inputs: ["id", "id"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAutocompleteList, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmAutocompleteList]',
+                    hostDirectives: [{ directive: BrnAutocompleteList, inputs: ['id'] }],
+                    host: { 'data-slot': 'autocomplete-list' },
+                }]
+        }], ctorParameters: () => [] });
 
-        <div
-          *brnPopoverContent="let ctx"
-          hlmPopoverContent
-          class="p-0"
-          [style.width.px]="_elementRef.nativeElement.offsetWidth"
-        >
-          <hlm-autocomplete-list
-            [class]="_computedAutocompleteListClass()"
-            [class.hidden]="filteredOptions().length === 0"
-          >
-            <hlm-autocomplete-group>
-              @for (option of filteredOptions(); track option) {
-                <button hlm-autocomplete-item [value]="option" (selected)="_optionSelected(option)">
-                  @if (optionTemplate(); as optionTemplate) {
-                    <ng-container *ngTemplateOutlet="optionTemplate; context: { $implicit: option }" />
-                  } @else {
-                    {{ option }}
-                  }
-                </button>
-              }
-            </hlm-autocomplete-group>
-          </hlm-autocomplete-list>
+class HlmAutocompletePortal {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAutocompletePortal, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmAutocompletePortal, isStandalone: true, selector: "[hlmAutocompletePortal]", hostDirectives: [{ directive: i2.BrnPopoverContent, inputs: ["context", "context", "class", "class"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAutocompletePortal, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmAutocompletePortal]',
+                    hostDirectives: [{ directive: BrnPopoverContent, inputs: ['context', 'class'] }],
+                }]
+        }] });
 
-          <div *brnAutocompleteEmpty hlmAutocompleteEmpty [class]="_computedAutocompleteEmptyClass()">
-            @if (loading()) {
-              <ng-content select="[loading]">{{ loadingText() }}</ng-content>
-            } @else {
-              <ng-content select="[empty]">{{ emptyText() }}</ng-content>
-            }
-          </div>
-        </div>
-      </div>
-    </brn-popover>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BrnPopover, selector: "brn-popover", inputs: ["align", "sideOffset"], exportAs: ["brnPopover"] }, { kind: "directive", type: BrnPopoverContent, selector: "[brnPopoverContent]" }, { kind: "directive", type: HlmPopoverContent, selector: "[hlmPopoverContent],[brnPopoverContent][hlm]", inputs: ["class"] }, { kind: "directive", type: BrnAutocomplete, selector: "[brnAutocomplete]", inputs: ["id"], outputs: ["valueChange"] }, { kind: "directive", type: BrnAutocompleteEmpty, selector: "[brnAutocompleteEmpty]" }, { kind: "directive", type: HlmAutocompleteEmpty, selector: "[hlmAutocompleteEmpty]", inputs: ["class"] }, { kind: "component", type: HlmAutocompleteGroup, selector: "hlm-autocomplete-group", inputs: ["class"] }, { kind: "component", type: HlmAutocompleteItem, selector: "button[hlm-autocomplete-item]", inputs: ["class"] }, { kind: "component", type: HlmAutocompleteList, selector: "hlm-autocomplete-list", inputs: ["class"] }, { kind: "component", type: HlmAutocompleteSearch, selector: "hlm-autocomplete-search", inputs: ["class"] }, { kind: "component", type: HlmAutocompleteSearchInput, selector: "input[hlm-autocomplete-search-input]", inputs: ["class"] }, { kind: "directive", type: HlmAutocompleteTrigger, selector: "[hlmAutocompleteTrigger]", inputs: ["disabledTrigger"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+class HlmAutocompleteSearch {
+    constructor() {
+        classes(() => 'block');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAutocompleteSearch, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmAutocompleteSearch, isStandalone: true, selector: "[hlmAutocompleteSearch],hlm-autocomplete-search", host: { attributes: { "data-slot": "autocomplete" } }, providers: [
+            provideBrnPopoverConfig({
+                align: 'start',
+                sideOffset: 6,
+            }),
+            provideBrnPopoverDefaultOptions({ role: null }),
+        ], hostDirectives: [{ directive: i1.BrnAutocompleteSearch, inputs: ["autoHighlight", "autoHighlight", "disabled", "disabled", "value", "value", "search", "search", "itemToString", "itemToString"], outputs: ["valueChange", "valueChange", "searchChange", "searchChange"] }, { directive: i2.BrnPopover, inputs: ["align", "align", "closeOnOutsidePointerEvents", "closeOnOutsidePointerEvents", "sideOffset", "sideOffset", "state", "state", "offsetX", "offsetX"], outputs: ["stateChanged", "stateChanged", "closed", "closed"] }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmAutocomplete, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAutocompleteSearch, decorators: [{
+            type: Directive,
             args: [{
-                    selector: 'hlm-autocomplete',
-                    imports: [
-                        NgTemplateOutlet,
-                        BrnPopover,
-                        BrnPopoverContent,
-                        HlmPopoverContent,
-                        BrnAutocomplete,
-                        BrnAutocompleteEmpty,
-                        HlmAutocompleteEmpty,
-                        HlmAutocompleteGroup,
-                        HlmAutocompleteItem,
-                        HlmAutocompleteList,
-                        HlmAutocompleteSearch,
-                        HlmAutocompleteSearchInput,
-                        HlmAutocompleteTrigger,
-                        NgIcon,
-                        HlmIcon,
+                    selector: '[hlmAutocompleteSearch],hlm-autocomplete-search',
+                    providers: [
+                        provideBrnPopoverConfig({
+                            align: 'start',
+                            sideOffset: 6,
+                        }),
+                        provideBrnPopoverDefaultOptions({ role: null }),
                     ],
-                    providers: [HLM_AUTOCOMPLETE_VALUE_ACCESSOR, provideIcons({ lucideSearch, lucideChevronDown })],
-                    template: `
-    <brn-popover
-      #popover
-      align="start"
-      autoFocus="first-heading"
-      sideOffset="5"
-      closeDelay="100"
-      [closeOnOutsidePointerEvents]="true"
-    >
-      <div brnAutocomplete>
-        <hlm-autocomplete-search hlmAutocompleteTrigger [disabledTrigger]="!_search()">
-          <ng-icon name="lucideSearch" hlm />
-          <input
-            #input
-            type="text"
-            autocomplete="off"
-            hlm-autocomplete-search-input
-            [id]="inputId()"
-            [placeholder]="searchPlaceholderText()"
-            [disabled]="_disabled()"
-            [value]="_search()"
-            (input)="_onSearchChanged($event)"
-            (keydown.arrowDown)="_openPopover()"
-            (click)="_click()"
-          />
-
-          <button
-            class="flex items-center justify-center outline-none disabled:cursor-not-allowed [&>_ng-icon]:opacity-50"
-            tabindex="-1"
-            type="button"
-            [attr.aria-label]="ariaLabelToggleButton()"
-            [disabled]="_disabled()"
-            (click)="_toggleOptions()"
-          >
-            <ng-icon name="lucideChevronDown" hlm />
-          </button>
-        </hlm-autocomplete-search>
+                    hostDirectives: [
+                        {
+                            directive: BrnAutocompleteSearch,
+                            inputs: ['autoHighlight', 'disabled', 'value', 'search', 'itemToString'],
+                            outputs: ['valueChange', 'searchChange'],
+                        },
+                        {
+                            directive: BrnPopover,
+                            inputs: ['align', 'closeOnOutsidePointerEvents', 'sideOffset', 'state', 'offsetX'],
+                            outputs: ['stateChanged', 'closed'],
+                        },
+                    ],
+                    host: { 'data-slot': 'autocomplete' },
+                }]
+        }], ctorParameters: () => [] });
 
-        <div
-          *brnPopoverContent="let ctx"
-          hlmPopoverContent
-          class="p-0"
-          [style.width.px]="_elementRef.nativeElement.offsetWidth"
-        >
-          <hlm-autocomplete-list
-            [class]="_computedAutocompleteListClass()"
-            [class.hidden]="filteredOptions().length === 0"
-          >
-            <hlm-autocomplete-group>
-              @for (option of filteredOptions(); track option) {
-                <button hlm-autocomplete-item [value]="option" (selected)="_optionSelected(option)">
-                  @if (optionTemplate(); as optionTemplate) {
-                    <ng-container *ngTemplateOutlet="optionTemplate; context: { $implicit: option }" />
-                  } @else {
-                    {{ option }}
-                  }
-                </button>
-              }
-            </hlm-autocomplete-group>
-          </hlm-autocomplete-list>
+class HlmAutocompleteSeparator {
+    constructor() {
+        classes(() => 'bg-border -mx-1 my-1 h-px');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAutocompleteSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmAutocompleteSeparator, isStandalone: true, selector: "[hlmAutocompleteSeparator]", host: { attributes: { "data-slot": "autocomplete-separator" } }, hostDirectives: [{ directive: i1.BrnAutocompleteSeparator, inputs: ["orientation", "orientation"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAutocompleteSeparator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmAutocompleteSeparator]',
+                    hostDirectives: [{ directive: BrnAutocompleteSeparator, inputs: ['orientation'] }],
+                    host: { 'data-slot': 'autocomplete-separator' },
+                }]
+        }], ctorParameters: () => [] });
 
-          <div *brnAutocompleteEmpty hlmAutocompleteEmpty [class]="_computedAutocompleteEmptyClass()">
-            @if (loading()) {
-              <ng-content select="[loading]">{{ loadingText() }}</ng-content>
-            } @else {
-              <ng-content select="[empty]">{{ emptyText() }}</ng-content>
-            }
-          </div>
-        </div>
-      </div>
-    </brn-popover>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        '[class]': '_computedClass()',
-                    },
+class HlmAutocompleteStatus {
+    constructor() {
+        classes(() => 'text-muted-foreground gap-2 px-3 py-2 text-sm flex w-full items-center justify-center text-center');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAutocompleteStatus, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmAutocompleteStatus, isStandalone: true, selector: "[hlmAutocompleteStatus],hlm-autocomplete-status", host: { attributes: { "data-slot": "autocomplete-status" } }, hostDirectives: [{ directive: i1.BrnAutocompleteStatus }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAutocompleteStatus, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmAutocompleteStatus],hlm-autocomplete-status',
+                    hostDirectives: [BrnAutocompleteStatus],
+                    host: { 'data-slot': 'autocomplete-status' },
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 /*
  * Public API Surface of autocomplete
  */
 const HlmAutocompleteImports = [
     HlmAutocomplete,
+    HlmAutocompleteContent,
     HlmAutocompleteEmpty,
     HlmAutocompleteGroup,
+    HlmAutocompleteInput,
     HlmAutocompleteItem,
+    HlmAutocompleteLabel,
     HlmAutocompleteList,
+    HlmAutocompletePortal,
     HlmAutocompleteSearch,
-    HlmAutocompleteSearchInput,
-    HlmAutocompleteTrigger,
+    HlmAutocompleteSeparator,
+    HlmAutocompleteStatus,
 ];
 class HlmAutocompleteModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.1", ngImport: i0, type: HlmAutocompleteModule, imports: [HlmAutocomplete,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: HlmAutocompleteModule, imports: [HlmAutocomplete,
+            HlmAutocompleteContent,
             HlmAutocompleteEmpty,
             HlmAutocompleteGroup,
+            HlmAutocompleteInput,
             HlmAutocompleteItem,
+            HlmAutocompleteLabel,
             HlmAutocompleteList,
+            HlmAutocompletePortal,
             HlmAutocompleteSearch,
-            HlmAutocompleteSearchInput,
-            HlmAutocompleteTrigger], exports: [HlmAutocomplete,
+            HlmAutocompleteSeparator,
+            HlmAutocompleteStatus], exports: [HlmAutocomplete,
+            HlmAutocompleteContent,
             HlmAutocompleteEmpty,
             HlmAutocompleteGroup,
+            HlmAutocompleteInput,
             HlmAutocompleteItem,
+            HlmAutocompleteLabel,
             HlmAutocompleteList,
+            HlmAutocompletePortal,
             HlmAutocompleteSearch,
-            HlmAutocompleteSearchInput,
-            HlmAutocompleteTrigger] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmAutocompleteModule, imports: [HlmAutocomplete] });
+            HlmAutocompleteSeparator,
+            HlmAutocompleteStatus] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAutocompleteModule, imports: [HlmAutocompleteInput,
+            HlmAutocompleteItem] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmAutocompleteModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAutocompleteModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...HlmAutocompleteImports],
@@ -539,5 +405,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { HLM_AUTOCOMPLETE_VALUE_ACCESSOR, HlmAutocomplete, HlmAutocompleteEmpty, HlmAutocompleteGroup, HlmAutocompleteImports, HlmAutocompleteItem, HlmAutocompleteList, HlmAutocompleteModule, HlmAutocompleteSearch, HlmAutocompleteSearchInput, HlmAutocompleteTrigger, injectHlmAutocompleteConfig, provideHlmAutocompleteConfig };
+export { HlmAutocomplete, HlmAutocompleteContent, HlmAutocompleteEmpty, HlmAutocompleteGroup, HlmAutocompleteImports, HlmAutocompleteInput, HlmAutocompleteItem, HlmAutocompleteLabel, HlmAutocompleteList, HlmAutocompleteModule, HlmAutocompletePortal, HlmAutocompleteSearch, HlmAutocompleteSeparator, HlmAutocompleteStatus };
 //# sourceMappingURL=autocomplete.mjs.map