@koobiq/components 19.8.3 → 20.1.0

package/fesm2022/koobiq-components-autocomplete.mjs

@@ -1,230 +1,37 @@
 import * as i0 from '@angular/core';
-import { Directive, InjectionToken, inject, DestroyRef, EventEmitter, TemplateRef, numberAttribute, Input, Output, ContentChildren, ViewChild, Inject, Host, Optional, ChangeDetectionStrategy, ViewEncapsulation, Component, forwardRef, afterNextRender, NgModule } from '@angular/core';
-import * as i2 from '@angular/cdk/bidi';
+import { inject, ElementRef, Directive, InjectionToken, forwardRef, ViewContainerRef, ChangeDetectorRef, NgZone, input, afterNextRender, Input, DestroyRef, viewChild, TemplateRef, contentChildren, output, numberAttribute, ContentChildren, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { Directionality } from '@angular/cdk/bidi';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import * as i1$1 from '@angular/cdk/overlay';
 import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import { _getFocusedElementPierceShadowDom, _getEventTarget } from '@angular/cdk/platform';
 import { TemplatePortal } from '@angular/cdk/portal';
-import * as i4 from '@angular/cdk/scrolling';
-import { NgClass, DOCUMENT } from '@angular/common';
+import { ViewportRuler } from '@angular/cdk/scrolling';
+import { DOCUMENT } from '@angular/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { ESCAPE, ENTER, TAB, DOWN_ARROW, UP_ARROW } from '@koobiq/cdk/keycodes';
-import { KbqOption, KbqOptgroup, KBQ_OPTION_PARENT_COMPONENT, KBQ_WINDOW, KbqOptionSelectionChange, defaultOffsetY, KbqOptionModule } from '@koobiq/components/core';
-import * as i1 from '@koobiq/components/form-field';
+import { KBQ_WINDOW, KbqOptionSelectionChange, ESCAPE, ENTER, TAB, DOWN_ARROW, UP_ARROW, defaultOffsetY, KbqOptgroup, ActiveDescendantKeyManager, KbqOption, KBQ_OPTION_PARENT_COMPONENT, KbqOptionModule } from '@koobiq/components/core';
+import { KbqFormField } from '@koobiq/components/form-field';
 import { defer, merge, Subscription, Subject, of, fromEvent } from 'rxjs';
-import { delay, filter, take, switchMap, map, tap } from 'rxjs/operators';
+import { take, switchMap, filter, map, tap, delay } from 'rxjs/operators';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { ActiveDescendantKeyManager } from '@koobiq/cdk/a11y';
 
 /**
  * Directive applied to an element to make it usable
  * as a connection point for an autocomplete panel.
  */
 class KbqAutocompleteOrigin {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
+    constructor() {
+        this.elementRef = inject(ElementRef);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqAutocompleteOrigin, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqAutocompleteOrigin, isStandalone: true, selector: "[kbqAutocompleteOrigin]", exportAs: ["kbqAutocompleteOrigin"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAutocompleteOrigin, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqAutocompleteOrigin, isStandalone: true, selector: "[kbqAutocompleteOrigin]", exportAs: ["kbqAutocompleteOrigin"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqAutocompleteOrigin, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAutocompleteOrigin, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqAutocompleteOrigin]',
                     exportAs: 'kbqAutocompleteOrigin'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }] });
-
-/**
- * Autocomplete IDs need to be unique across components, so this counter exists outside of
- * the component definition.
- */
-let uniqueAutocompleteIdCounter = 0;
-/** Footer that is rendered below the autocomplete options panel. */
-class KbqAutocompleteFooter {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqAutocompleteFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqAutocompleteFooter, isStandalone: true, selector: "[kbqAutocompleteFooter], kbq-autocomplete-footer", host: { classAttribute: "kbq-autocomplete-footer" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqAutocompleteFooter, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kbqAutocompleteFooter], kbq-autocomplete-footer',
-                    host: { class: 'kbq-autocomplete-footer' }
-                }]
         }] });
-class KbqAutocompleteSelectedEvent {
-    constructor(source, option) {
-        this.source = source;
-        this.option = option;
-    }
-}
-/** Injection token to be used to override the default options for `kbq-autocomplete`. */
-const KBQ_AUTOCOMPLETE_DEFAULT_OPTIONS = new InjectionToken('kbq-autocomplete-default-options', {
-    providedIn: 'root',
-    factory: KBQ_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY
-});
-function KBQ_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY() {
-    return { autoActiveFirstOption: true };
-}
-class KbqAutocomplete {
-    /**
-     * Takes classes set on the host kbq-autocomplete element and applies them to the panel
-     * inside the overlay container to allow for easy styling.
-     */
-    get classList() {
-        return this._classList;
-    }
-    set classList(value) {
-        if (value && value.length) {
-            value.split(' ').forEach((className) => (this._classList[className.trim()] = true));
-            this.elementRef.nativeElement.className = '';
-        }
-    }
-    /**
-     * Whether the first option should be highlighted when the autocomplete panel is opened.
-     * Can be configured globally through the `KBQ_AUTOCOMPLETE_DEFAULT_OPTIONS` token.
-     */
-    get autoActiveFirstOption() {
-        return this._autoActiveFirstOption;
-    }
-    set autoActiveFirstOption(value) {
-        this._autoActiveFirstOption = coerceBooleanProperty(value);
-    }
-    get isOpen() {
-        return this._isOpen && this.showPanel;
-    }
-    set isOpen(value) {
-        this._isOpen = value;
-    }
-    get openOnFocus() {
-        return this._openOnFocus;
-    }
-    set openOnFocus(value) {
-        this._openOnFocus = value;
-    }
-    constructor(changeDetectorRef, elementRef, defaults, parentFormField) {
-        this.changeDetectorRef = changeDetectorRef;
-        this.elementRef = elementRef;
-        this.parentFormField = parentFormField;
-        this.destroyRef = inject(DestroyRef);
-        /** Unique ID to be used by autocomplete trigger's "aria-owns" property. */
-        this.id = `kbq-autocomplete-${uniqueAutocompleteIdCounter++}`;
-        /** Whether the autocomplete panel should be visible, depending on option length. */
-        this.showPanel = false;
-        /** Function that maps an option's control value to its display value in the trigger. */
-        this.displayWith = null;
-        /**
-         * Minimum width of the panel in pixels.
-         * When panelWidth is not set, the panel will be at least as wide as its host and no less than panelMinWidth.
-         */
-        this.panelMinWidth = 200;
-        /** Event that is emitted whenever an option from the list is selected. */
-        this.optionSelected = new EventEmitter();
-        /** Event that is emitted when the autocomplete panel is opened. */
-        this.opened = new EventEmitter();
-        /** Event that is emitted when the autocomplete panel is closed. */
-        this.closed = new EventEmitter();
-        this._classList = {};
-        this._isOpen = false;
-        this._openOnFocus = true;
-        this._autoActiveFirstOption = !!defaults.autoActiveFirstOption;
-    }
-    ngAfterContentInit() {
-        this.keyManager = new ActiveDescendantKeyManager(this.options);
-        this.setVisibility();
-        this.parentFormField?.control.ngControl?.valueChanges
-            ?.pipe(delay(0), filter((value) => value === null || value === undefined || value === ''), takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => {
-            this.options.filter(({ selected }) => selected).forEach((option) => option.deselect(false));
-        });
-    }
-    setScrollTop(scrollTop) {
-        if (this.panel) {
-            this.panel.nativeElement.scrollTop = scrollTop;
-        }
-    }
-    getScrollTop() {
-        return this.panel ? this.panel.nativeElement.scrollTop : 0;
-    }
-    setVisibility() {
-        this.showPanel = !!this.options.length;
-        this._classList['kbq-autocomplete_visible'] = this.showPanel;
-        this._classList['kbq-autocomplete_hidden'] = !this.showPanel;
-        this.updateFocusClass();
-        this.changeDetectorRef.markForCheck();
-    }
-    emitSelectEvent(option) {
-        const event = new KbqAutocompleteSelectedEvent(this, option);
-        this.optionSelected.emit(event);
-    }
-    onKeydown(event) {
-        this.keyManager.onKeydown(event);
-        this.updateFocusClass();
-    }
-    updateFocusClass() {
-        this._classList['cdk-keyboard-focused'] = this.parentFormField?.focusOrigin === 'keyboard';
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqAutocomplete, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: KBQ_AUTOCOMPLETE_DEFAULT_OPTIONS }, { token: i1.KbqFormField, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.21", type: KbqAutocomplete, isStandalone: true, selector: "kbq-autocomplete", inputs: { displayWith: "displayWith", panelWidth: "panelWidth", panelMinWidth: ["panelMinWidth", "panelMinWidth", numberAttribute], classList: ["class", "classList"], autoActiveFirstOption: "autoActiveFirstOption", openOnFocus: "openOnFocus" }, outputs: { optionSelected: "optionSelected", opened: "opened", closed: "closed" }, host: { classAttribute: "kbq-autocomplete" }, providers: [
-            {
-                provide: KBQ_OPTION_PARENT_COMPONENT,
-                useExisting: KbqAutocomplete
-            }
-        ], queries: [{ propertyName: "options", predicate: KbqOption, descendants: true }, { propertyName: "optionGroups", predicate: KbqOptgroup }], viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], exportAs: ["kbqAutocomplete"], ngImport: i0, template: "<ng-template>\n    <div class=\"kbq-autocomplete-panel\" [id]=\"id\" [ngClass]=\"classList\">\n        <div #panel role=\"listbox\" class=\"kbq-autocomplete-panel__content kbq-scrollbar\">\n            <ng-content />\n        </div>\n        <ng-content select=\"[kbqAutocompleteFooter], kbq-autocomplete-footer\" />\n    </div>\n</ng-template>\n", styles: [".kbq-autocomplete-panel .kbq-autocomplete-footer{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;box-sizing:border-box;min-height:40px;border-top-width:1px;border-top-style:solid;padding:var(--kbq-size-xxs) var(--kbq-size-l)}.kbq-autocomplete-panel{visibility:hidden;position:relative;display:flex;flex-direction:column;box-sizing:border-box;min-width:100%;width:100%;max-width:none;border-radius:var(--kbq-autocomplete-size-panel-border-radius, var(--kbq-size-border-radius));max-height:var(--kbq-autocomplete-size-panel-max-height)}.kbq-autocomplete-panel .kbq-autocomplete-panel__content{flex:1;padding:var(--kbq-size-xxs);overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.kbq-autocomplete-panel .kbq-autocomplete-footer{border-color:var(--kbq-line-contrast-less)}.kbq-autocomplete-panel.kbq-autocomplete_visible{visibility:visible}.kbq-autocomplete-panel.kbq-autocomplete_hidden{visibility:hidden}.kbq-autocomplete-panel .kbq-option{position:relative}.kbq-autocomplete-panel .kbq-option:before,.kbq-autocomplete-panel .kbq-option:after{position:absolute;content:\"\";width:var(--kbq-size-xxs);height:calc(100% + var(--kbq-size-3xs) * 2)}.kbq-autocomplete-panel .kbq-option:before{right:calc(100% + var(--kbq-size-3xs))}.kbq-autocomplete-panel .kbq-option:after{left:calc(100% + var(--kbq-size-3xs))}.kbq-autocomplete-panel .kbq-divider-horizontal{margin-top:-1px}.kbq-autocomplete-panel{box-shadow:var(--kbq-select-panel-dropdown-shadow);background:var(--kbq-select-panel-dropdown-background)}\n", ".kbq-autocomplete-panel{--kbq-autocomplete-size-panel-padding: var(--kbq-size-xxs) 0;--kbq-autocomplete-size-panel-max-height: 256px;--kbq-autocomplete-size-panel-border-radius: var(--kbq-size-border-radius);--kbq-select-panel-dropdown-background: var(--kbq-background-card);--kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqAutocomplete, decorators: [{
-            type: Component,
-            args: [{ selector: 'kbq-autocomplete', imports: [
-                        NgClass
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'kbqAutocomplete', host: {
-                        class: 'kbq-autocomplete'
-                    }, providers: [
-                        {
-                            provide: KBQ_OPTION_PARENT_COMPONENT,
-                            useExisting: KbqAutocomplete
-                        }
-                    ], template: "<ng-template>\n    <div class=\"kbq-autocomplete-panel\" [id]=\"id\" [ngClass]=\"classList\">\n        <div #panel role=\"listbox\" class=\"kbq-autocomplete-panel__content kbq-scrollbar\">\n            <ng-content />\n        </div>\n        <ng-content select=\"[kbqAutocompleteFooter], kbq-autocomplete-footer\" />\n    </div>\n</ng-template>\n", styles: [".kbq-autocomplete-panel .kbq-autocomplete-footer{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;box-sizing:border-box;min-height:40px;border-top-width:1px;border-top-style:solid;padding:var(--kbq-size-xxs) var(--kbq-size-l)}.kbq-autocomplete-panel{visibility:hidden;position:relative;display:flex;flex-direction:column;box-sizing:border-box;min-width:100%;width:100%;max-width:none;border-radius:var(--kbq-autocomplete-size-panel-border-radius, var(--kbq-size-border-radius));max-height:var(--kbq-autocomplete-size-panel-max-height)}.kbq-autocomplete-panel .kbq-autocomplete-panel__content{flex:1;padding:var(--kbq-size-xxs);overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.kbq-autocomplete-panel .kbq-autocomplete-footer{border-color:var(--kbq-line-contrast-less)}.kbq-autocomplete-panel.kbq-autocomplete_visible{visibility:visible}.kbq-autocomplete-panel.kbq-autocomplete_hidden{visibility:hidden}.kbq-autocomplete-panel .kbq-option{position:relative}.kbq-autocomplete-panel .kbq-option:before,.kbq-autocomplete-panel .kbq-option:after{position:absolute;content:\"\";width:var(--kbq-size-xxs);height:calc(100% + var(--kbq-size-3xs) * 2)}.kbq-autocomplete-panel .kbq-option:before{right:calc(100% + var(--kbq-size-3xs))}.kbq-autocomplete-panel .kbq-option:after{left:calc(100% + var(--kbq-size-3xs))}.kbq-autocomplete-panel .kbq-divider-horizontal{margin-top:-1px}.kbq-autocomplete-panel{box-shadow:var(--kbq-select-panel-dropdown-shadow);background:var(--kbq-select-panel-dropdown-background)}\n", ".kbq-autocomplete-panel{--kbq-autocomplete-size-panel-padding: var(--kbq-size-xxs) 0;--kbq-autocomplete-size-panel-max-height: 256px;--kbq-autocomplete-size-panel-border-radius: var(--kbq-size-border-radius);--kbq-select-panel-dropdown-background: var(--kbq-background-card);--kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [KBQ_AUTOCOMPLETE_DEFAULT_OPTIONS]
-                }] }, { type: i1.KbqFormField, decorators: [{
-                    type: Host
-                }, {
-                    type: Optional
-                }] }], propDecorators: { template: [{
-                type: ViewChild,
-                args: [TemplateRef, { static: true }]
-            }], panel: [{
-                type: ViewChild,
-                args: ['panel', { static: false }]
-            }], options: [{
-                type: ContentChildren,
-                args: [KbqOption, { descendants: true }]
-            }], optionGroups: [{
-                type: ContentChildren,
-                args: [KbqOptgroup]
-            }], displayWith: [{
-                type: Input
-            }], panelWidth: [{
-                type: Input
-            }], panelMinWidth: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], optionSelected: [{
-                type: Output
-            }], opened: [{
-                type: Output
-            }], closed: [{
-                type: Output
-            }], classList: [{
-                type: Input,
-                args: ['class']
-            }], autoActiveFirstOption: [{
-                type: Input
-            }], openOnFocus: [{
-                type: Input
-            }] } });
 
 /**
  * The following style constants are necessary to save here in order
@@ -264,55 +71,63 @@ function getKbqAutocompleteMissingPanelError() {
 class KbqAutocompleteTrigger {
     /** The currently active option, coerced to MatOption type. */
     get activeOption() {
-        return this.autocomplete?.keyManager?.activeItem;
+        return this.autocomplete()?.keyManager?.activeItem;
     }
     get panelOpen() {
-        return this.overlayAttached && this.autocomplete.showPanel;
+        return this.overlayAttached && this.autocomplete().showPanel;
     }
     /**
      * Whether the autocomplete is disabled. When disabled, the element will
      * act as a regular input and the user won't be able to open the panel.
      */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get autocompleteDisabled() {
         return this._autocompleteDisabled;
     }
     set autocompleteDisabled(value) {
         this._autocompleteDisabled = coerceBooleanProperty(value);
     }
-    constructor(elementRef, viewContainerRef, changeDetectorRef, overlay, zone, scrollStrategy, dir, formField, 
-    // @breaking-change 8.0.0 Make `_viewportRuler` required.
-    viewportRuler) {
-        this.elementRef = elementRef;
-        this.viewContainerRef = viewContainerRef;
-        this.changeDetectorRef = changeDetectorRef;
-        this.overlay = overlay;
-        this.zone = zone;
-        this.dir = dir;
-        this.formField = formField;
-        this.viewportRuler = viewportRuler;
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.overlay = inject(Overlay);
+        this.zone = inject(NgZone);
+        this.dir = inject(Directionality, { optional: true });
+        this.formField = inject(KbqFormField, { optional: true, host: true });
+        this.viewportRuler = inject(ViewportRuler);
         this.document = inject(DOCUMENT);
         this.optionSelections = defer(() => {
-            if (this.autocomplete && this.autocomplete.options) {
-                return merge(...this.autocomplete.options.map((option) => option.onSelectionChange));
+            const autocomplete = this.autocomplete();
+            if (autocomplete && autocomplete.options) {
+                return merge(...autocomplete.options.map((option) => option.onSelectionChange));
             }
             // If there are any subscribers before `ngAfterViewInit`, the `autocomplete` will be undefined.
             // Return a stream that we'll replace with the real one once everything is in place.
             return this.zone.onStable.asObservable().pipe(take(1), switchMap(() => this.optionSelections));
         });
+        /** The autocomplete panel to be attached to this trigger. */
+        this.autocomplete = input(undefined, ...(ngDevMode ? [{ debugName: "autocomplete", alias: 'kbqAutocomplete' }] : [{ alias: 'kbqAutocomplete' }]));
+        /**
+         * Reference relative to which to position the autocomplete panel.
+         * Defaults to the autocomplete trigger element.
+         */
+        this.connectedTo = input(undefined, ...(ngDevMode ? [{ debugName: "connectedTo", alias: 'kbqAutocompleteConnectedTo' }] : [{ alias: 'kbqAutocompleteConnectedTo' }]));
         /**
          * `autocomplete` attribute to be set on the input element.
          * @docs-private
          */
-        this.autocompleteAttribute = 'off';
+        this.autocompleteAttribute = input('off', ...(ngDevMode ? [{ debugName: "autocompleteAttribute", alias: 'autocomplete' }] : [{ alias: 'autocomplete' }]));
         /**
          * Event handler for input blur events.
          * Determines whether the blur event is triggered outside the specific target
          * @returns A boolean indicating if the blur event happened outside the target element
          */
-        this.onInputBlur = (event) => {
+        this.onInputBlur = input((event) => {
             const target = event.relatedTarget;
             return !target || target.tagName !== 'KBQ-OPTION';
-        };
+        }, ...(ngDevMode ? [{ debugName: "onInputBlur", alias: 'kbqAutocompleteOnBlur' }] : [{ alias: 'kbqAutocompleteOnBlur' }]));
         this._autocompleteDisabled = false;
         this.overlayAttached = false;
         this.componentDestroyed = false;
@@ -341,20 +156,24 @@ class KbqAutocompleteTrigger {
             // pane was closed, in order to avoid reopening it unintentionally.
             this.canOpenOnNextFocus = this.document.activeElement !== this.elementRef.nativeElement || this.panelOpen;
         };
+        const zone = this.zone;
+        const scrollStrategy = inject(KBQ_AUTOCOMPLETE_SCROLL_STRATEGY);
         afterNextRender(() => {
             zone.runOutsideAngular(() => this.window.addEventListener('blur', this.windowBlurHandler));
         });
         this.scrollStrategy = scrollStrategy;
     }
     ngAfterViewInit() {
-        if (this.autocomplete) {
-            this.autocomplete.keyManager?.change.subscribe(() => {
+        const autocomplete = this.autocomplete();
+        if (autocomplete) {
+            autocomplete.keyManager?.change.subscribe(() => {
+                const autocompleteValue = this.autocomplete();
                 if (this.panelOpen) {
                     this.scrollActiveOptionIntoView();
                     this.elementRef.nativeElement.focus();
                 }
-                else if (!this.panelOpen && this.autocomplete.keyManager.activeItem) {
-                    this.autocomplete.keyManager.activeItem?.selectViaInteraction();
+                else if (!this.panelOpen && autocompleteValue.keyManager.activeItem) {
+                    autocompleteValue.keyManager.activeItem?.selectViaInteraction();
                 }
             });
         }
@@ -370,21 +189,15 @@ class KbqAutocompleteTrigger {
     open() {
         this.attachOverlay();
     }
-    /**
-     * @deprecated Will be removed in next major release. Use `open` instead.
-     * @docs-private
-     */
-    openPanel() {
-        this.open();
-    }
     closePanel() {
         if (!this.overlayAttached) {
             return;
         }
         if (this.panelOpen) {
-            this.autocomplete.closed.emit();
+            // TODO: The 'emit' function requires a mandatory void argument
+            this.autocomplete().closed.emit();
         }
-        this.autocomplete.isOpen = this.overlayAttached = false;
+        this.autocomplete().isOpen = this.overlayAttached = false;
         if (this.overlayRef && this.overlayRef.hasAttached()) {
             this.overlayRef.detach();
             this.closingActionsSubscription.unsubscribe();
@@ -413,7 +226,7 @@ class KbqAutocompleteTrigger {
      * when an option is selected, on blur, and when TAB is pressed.
      */
     get panelClosingActions() {
-        return merge(this.optionSelections, this.autocomplete.keyManager.tabOut.pipe(filter(() => this.overlayAttached)), this.closeKeyEventStream, this.getOutsideClickStream(), this.overlayRef ? this.overlayRef.detachments().pipe(filter(() => this.overlayAttached)) : of()).pipe(
+        return merge(this.optionSelections, this.autocomplete().keyManager.tabOut.pipe(filter(() => this.overlayAttached)), this.closeKeyEventStream, this.getOutsideClickStream(), this.overlayRef ? this.overlayRef.detachments().pipe(filter(() => this.overlayAttached)) : of()).pipe(
         // Normalize the output so we return a consistent type.
         map((event) => (event instanceof KbqOptionSelectionChange ? event : null)));
     }
@@ -422,12 +235,12 @@ class KbqAutocompleteTrigger {
         Promise.resolve(null).then(() => this.setTriggerValue(value));
     }
     // Implemented as part of ControlValueAccessor.
-    // eslint-disable-next-line @typescript-eslint/ban-types
+    // eslint-disable-next-line @typescript-eslint/no-empty-object-type
     registerOnChange(fn) {
         this.onChange = fn;
     }
     // Implemented as part of ControlValueAccessor.
-    // eslint-disable-next-line @typescript-eslint/ban-types
+    // eslint-disable-next-line @typescript-eslint/no-empty-object-type
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
@@ -444,22 +257,23 @@ class KbqAutocompleteTrigger {
         if (keyCode === ESCAPE) {
             event.preventDefault();
         }
+        const autocomplete = this.autocomplete();
         if (this.activeOption && keyCode === ENTER && this.panelOpen) {
             this.activeOption.selectViaInteraction();
             this.resetActiveItem();
             event.preventDefault();
         }
-        else if (this.autocomplete) {
-            const prevActiveItem = this.autocomplete.keyManager.activeItem;
+        else if (autocomplete) {
+            const prevActiveItem = autocomplete.keyManager.activeItem;
             if (this.panelOpen || keyCode === TAB) {
-                this.autocomplete.onKeydown(event);
+                autocomplete.onKeydown(event);
             }
             else if (!this.panelOpen && keyCode === DOWN_ARROW && this.canOpen()) {
-                this.openPanel();
+                this.open();
             }
             const isArrowKey = keyCode === UP_ARROW || keyCode === DOWN_ARROW;
-            if (isArrowKey && event.shiftKey && this.autocomplete.keyManager.activeItem !== prevActiveItem) {
-                this.autocomplete.keyManager.activeItem?.selectViaInteraction();
+            if (isArrowKey && event.shiftKey && autocomplete.keyManager.activeItem !== prevActiveItem) {
+                autocomplete.keyManager.activeItem?.selectViaInteraction();
             }
         }
     }
@@ -479,7 +293,7 @@ class KbqAutocompleteTrigger {
             this.previousValue = value;
             this.onChange(value);
             if (this.canOpen() && _getFocusedElementPierceShadowDom() === target) {
-                this.openPanel();
+                this.open();
             }
         }
     }
@@ -487,25 +301,26 @@ class KbqAutocompleteTrigger {
         if (!this.canOpenOnNextFocus) {
             this.canOpenOnNextFocus = true;
         }
-        else if (!this.panelOpen && this.canOpen() && this.autocomplete.openOnFocus) {
+        else if (!this.panelOpen && this.canOpen() && this.autocomplete().openOnFocus) {
             this.previousValue = this.elementRef.nativeElement.value;
             this.attachOverlay();
         }
     }
     handleClick($event) {
         if (!this.panelOpen && this.canOpen() && _getFocusedElementPierceShadowDom() === $event.target) {
-            this.openPanel();
+            this.open();
         }
     }
     scrollActiveOptionIntoView() {
-        this.autocomplete.keyManager.activeItem?.focus();
+        this.autocomplete().keyManager.activeItem?.focus();
     }
     /** Stream of clicks outside of the autocomplete panel. */
     getOutsideClickStream() {
         return merge(fromEvent(this.document, 'click'), fromEvent(this.document, 'auxclick'), fromEvent(this.document, 'touchend')).pipe(filter((event) => {
             const clickTarget = _getEventTarget(event);
             const formField = this.formField ? this.formField.elementRef.nativeElement : null;
-            const customOrigin = this.connectedTo ? this.connectedTo.elementRef.nativeElement : null;
+            const connectedTo = this.connectedTo();
+            const customOrigin = connectedTo ? connectedTo.elementRef.nativeElement : null;
             return (this.overlayAttached &&
                 clickTarget !== this.elementRef.nativeElement &&
                 (!formField || !formField.contains(clickTarget)) &&
@@ -520,7 +335,7 @@ class KbqAutocompleteTrigger {
      */
     subscribeToClosingActions() {
         const firstStable = this.zone.onStable.asObservable().pipe(take(1));
-        const optionChanges = this.autocomplete.options.changes.pipe(tap(() => this.positionStrategy.reapplyLastPosition()), 
+        const optionChanges = this.autocomplete().options.changes.pipe(tap(() => this.positionStrategy.reapplyLastPosition()), 
         // Defer emitting to the stream until the next tick, because changing
         // bindings in here will cause "changed after checked" errors.
         delay(0));
@@ -532,7 +347,7 @@ class KbqAutocompleteTrigger {
         switchMap(() => {
             const wasOpen = this.panelOpen;
             this.resetActiveItem();
-            this.autocomplete.setVisibility();
+            this.autocomplete().setVisibility();
             if (this.panelOpen) {
                 this.overlayRef.updatePosition();
                 // If the `panelOpen` state changed, we need to make sure to emit the `opened`
@@ -540,7 +355,8 @@ class KbqAutocompleteTrigger {
                 // can happen if the users opens the panel and there are no options, but the
                 // options come in slightly later or as a result of the value changing.
                 if (wasOpen !== this.panelOpen) {
-                    this.autocomplete.opened.emit();
+                    // TODO: The 'emit' function requires a mandatory void argument
+                    this.autocomplete().opened.emit();
                 }
             }
             return this.panelClosingActions;
@@ -559,14 +375,15 @@ class KbqAutocompleteTrigger {
         }
     }
     setTriggerValue(value) {
-        const toDisplay = this.autocomplete && this.autocomplete.displayWith ? this.autocomplete.displayWith(value) : value;
+        const autocomplete = this.autocomplete();
+        const toDisplay = autocomplete && autocomplete.displayWith ? autocomplete.displayWith(value) : value;
         // Simply falling back to an empty string if the display value is falsy does not work properly.
         // The display value can also be the number zero and shouldn't fall back to an empty string.
         const inputValue = toDisplay != null ? toDisplay : '';
         // If it's used within a `MatFormField`, we should set it through the property so it can go
         // through change detection.
         if (this.formField) {
-            this.formField.control.value = inputValue;
+            this.formField.control().value = inputValue;
         }
         else {
             this.elementRef.nativeElement.value = inputValue;
@@ -583,25 +400,26 @@ class KbqAutocompleteTrigger {
             this.setTriggerValue(event.source.value);
             this.onChange(event.source.value);
             this.elementRef.nativeElement.focus();
-            this.autocomplete.emitSelectEvent(event.source);
+            this.autocomplete().emitSelectEvent(event.source);
         }
         this.closePanel();
     }
     /** Clear any previous selected option and emit a selection change event for this option */
     clearPreviousSelectedOption(skip) {
-        this.autocomplete.options.forEach((option) => {
+        this.autocomplete().options.forEach((option) => {
             if (option !== skip && option.selected) {
                 option.deselect();
             }
         });
     }
     attachOverlay() {
-        if (!this.autocomplete) {
+        const autocomplete = this.autocomplete();
+        if (!autocomplete) {
             throw getKbqAutocompleteMissingPanelError();
         }
         let overlayRef = this.overlayRef;
         if (!overlayRef) {
-            this.portal = new TemplatePortal(this.autocomplete.template, this.viewContainerRef);
+            this.portal = new TemplatePortal(autocomplete.template(), this.viewContainerRef);
             overlayRef = this.overlay.create(this.getOverlayConfig());
             this.overlayRef = overlayRef;
             // Use the `keydownEvents` in order to take advantage of
@@ -633,12 +451,13 @@ class KbqAutocompleteTrigger {
             this.closingActionsSubscription = this.subscribeToClosingActions();
         }
         const wasOpen = this.panelOpen;
-        this.autocomplete.setVisibility();
-        this.autocomplete.isOpen = this.overlayAttached = true;
+        autocomplete.setVisibility();
+        autocomplete.isOpen = this.overlayAttached = true;
         // We need to do an extra `panelOpen` check in here, because the
         // autocomplete won't be shown if there are no options.
         if (this.panelOpen && wasOpen !== this.panelOpen) {
-            this.autocomplete.opened.emit();
+            // TODO: The 'emit' function requires a mandatory void argument
+            autocomplete.opened.emit();
         }
         this.zone.onStable
             .asObservable()
@@ -678,16 +497,17 @@ class KbqAutocompleteTrigger {
         return this.positionStrategy;
     }
     getConnectedElement() {
-        if (this.connectedTo) {
-            return this.connectedTo.elementRef;
+        const connectedTo = this.connectedTo();
+        if (connectedTo) {
+            return connectedTo.elementRef;
         }
         return this.formField ? this.formField.getConnectedOverlayOrigin() : this.elementRef;
     }
     getPanelMinWidth() {
-        return Math.max(this.autocomplete.panelMinWidth, this.getHostWidth());
+        return Math.max(this.autocomplete().panelMinWidth, this.getHostWidth());
     }
     getOverlaySize() {
-        const panelWidth = this.autocomplete.panelWidth;
+        const panelWidth = this.autocomplete().panelWidth;
         return panelWidth ? { width: panelWidth } : { minWidth: this.getPanelMinWidth() };
     }
     getHostWidth() {
@@ -698,27 +518,29 @@ class KbqAutocompleteTrigger {
      * correct options, or to 0 if the consumer opted into it.
      */
     resetActiveItem() {
-        if (this.autocomplete.autoActiveFirstOption) {
-            this.autocomplete.keyManager.setFirstItemActive();
+        const autocomplete = this.autocomplete();
+        if (autocomplete.autoActiveFirstOption) {
+            autocomplete.keyManager.setFirstItemActive();
         }
         else {
-            this.autocomplete.keyManager.setActiveItem(-1);
+            autocomplete.keyManager.setActiveItem(-1);
         }
     }
     canOpen() {
         const element = this.elementRef.nativeElement;
         return !element.readOnly && !element.disabled && !this._autocompleteDisabled;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqAutocompleteTrigger, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: i1$1.Overlay }, { token: i0.NgZone }, { token: KBQ_AUTOCOMPLETE_SCROLL_STRATEGY }, { token: i2.Directionality, optional: true }, { token: i1.KbqFormField, host: true, optional: true }, { token: i4.ViewportRuler }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqAutocompleteTrigger, isStandalone: true, selector: "input[kbqAutocomplete], textarea[kbqAutocomplete]", inputs: { autocomplete: ["kbqAutocomplete", "autocomplete"], connectedTo: ["kbqAutocompleteConnectedTo", "connectedTo"], autocompleteAttribute: ["autocomplete", "autocompleteAttribute"], autocompleteDisabled: ["kbqAutocompleteDisabled", "autocompleteDisabled"], onInputBlur: ["kbqAutocompleteOnBlur", "onInputBlur"] }, host: { listeners: { "focusin": "handleFocus()", "blur": "onTouched()", "input": "handleInput($event)", "keydown": "handleKeydown($event)", "click": "handleClick($event)" }, properties: { "attr.autocomplete": "autocompleteAttribute" }, classAttribute: "kbq-autocomplete-trigger" }, providers: [KBQ_AUTOCOMPLETE_VALUE_ACCESSOR], exportAs: ["kbqAutocompleteTrigger"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAutocompleteTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.25", type: KbqAutocompleteTrigger, isStandalone: true, selector: "input[kbqAutocomplete], textarea[kbqAutocomplete]", inputs: { autocomplete: { classPropertyName: "autocomplete", publicName: "kbqAutocomplete", isSignal: true, isRequired: false, transformFunction: null }, connectedTo: { classPropertyName: "connectedTo", publicName: "kbqAutocompleteConnectedTo", isSignal: true, isRequired: false, transformFunction: null }, autocompleteAttribute: { classPropertyName: "autocompleteAttribute", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, autocompleteDisabled: { classPropertyName: "autocompleteDisabled", publicName: "kbqAutocompleteDisabled", isSignal: false, isRequired: false, transformFunction: null }, onInputBlur: { classPropertyName: "onInputBlur", publicName: "kbqAutocompleteOnBlur", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusin": "handleFocus()", "blur": "onTouched()", "input": "handleInput($event)", "keydown": "handleKeydown($event)", "click": "handleClick($event)" }, properties: { "attr.autocomplete": "autocompleteAttribute()" }, classAttribute: "kbq-autocomplete-trigger" }, providers: [KBQ_AUTOCOMPLETE_VALUE_ACCESSOR], exportAs: ["kbqAutocompleteTrigger"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqAutocompleteTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAutocompleteTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: `input[kbqAutocomplete], textarea[kbqAutocomplete]`,
+                    providers: [KBQ_AUTOCOMPLETE_VALUE_ACCESSOR],
                     host: {
                         class: 'kbq-autocomplete-trigger',
-                        '[attr.autocomplete]': 'autocompleteAttribute',
+                        '[attr.autocomplete]': 'autocompleteAttribute()',
                         // Note: we use `focusin`, as opposed to `focus`, in order to open the panel
                         // a little earlier. This avoids issues where IE delays the focusing of the input.
                         '(focusin)': 'handleFocus()',
@@ -727,40 +549,209 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         '(keydown)': 'handleKeydown($event)',
                         '(click)': 'handleClick($event)'
                     },
-                    exportAs: 'kbqAutocompleteTrigger',
-                    providers: [KBQ_AUTOCOMPLETE_VALUE_ACCESSOR]
+                    exportAs: 'kbqAutocompleteTrigger'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.Overlay }, { type: i0.NgZone }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [KBQ_AUTOCOMPLETE_SCROLL_STRATEGY]
-                }] }, { type: i2.Directionality, decorators: [{
-                    type: Optional
-                }] }, { type: i1.KbqFormField, decorators: [{
-                    type: Optional
-                }, {
-                    type: Host
-                }] }, { type: i4.ViewportRuler }], propDecorators: { autocomplete: [{
-                type: Input,
-                args: ['kbqAutocomplete']
-            }], connectedTo: [{
-                type: Input,
-                args: ['kbqAutocompleteConnectedTo']
-            }], autocompleteAttribute: [{
-                type: Input,
-                args: ['autocomplete']
-            }], autocompleteDisabled: [{
+        }], ctorParameters: () => [], propDecorators: { autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqAutocomplete", required: false }] }], connectedTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqAutocompleteConnectedTo", required: false }] }], autocompleteAttribute: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], autocompleteDisabled: [{
                 type: Input,
                 args: ['kbqAutocompleteDisabled']
-            }], onInputBlur: [{
+            }], onInputBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqAutocompleteOnBlur", required: false }] }] } });
+
+/**
+ * Autocomplete IDs need to be unique across components, so this counter exists outside of
+ * the component definition.
+ */
+let uniqueAutocompleteIdCounter = 0;
+/** Footer that is rendered below the autocomplete options panel. */
+class KbqAutocompleteFooter {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAutocompleteFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqAutocompleteFooter, isStandalone: true, selector: "[kbqAutocompleteFooter], kbq-autocomplete-footer", host: { classAttribute: "kbq-autocomplete-footer" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAutocompleteFooter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kbqAutocompleteFooter], kbq-autocomplete-footer',
+                    host: { class: 'kbq-autocomplete-footer' }
+                }]
+        }] });
+class KbqAutocompleteSelectedEvent {
+    constructor(source, option) {
+        this.source = source;
+        this.option = option;
+    }
+}
+/** Injection token to be used to override the default options for `kbq-autocomplete`. */
+const KBQ_AUTOCOMPLETE_DEFAULT_OPTIONS = new InjectionToken('kbq-autocomplete-default-options', {
+    providedIn: 'root',
+    factory: KBQ_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY
+});
+function KBQ_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY() {
+    return { autoActiveFirstOption: true };
+}
+class KbqAutocomplete {
+    /**
+     * Takes classes set on the host kbq-autocomplete element and applies them to the panel
+     * inside the overlay container to allow for easy styling.
+     */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
+    get classList() {
+        return this._classList;
+    }
+    set classList(value) {
+        if (value && value.length) {
+            const classList = { ...this._classList };
+            value.split(' ').forEach((className) => (classList[className.trim()] = true));
+            // Reassign a new object reference so the native `[class]` binding picks up the change.
+            this._classList = classList;
+            this.elementRef.nativeElement.className = '';
+        }
+    }
+    /**
+     * Whether the first option should be highlighted when the autocomplete panel is opened.
+     * Can be configured globally through the `KBQ_AUTOCOMPLETE_DEFAULT_OPTIONS` token.
+     */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
+    get autoActiveFirstOption() {
+        return this._autoActiveFirstOption;
+    }
+    set autoActiveFirstOption(value) {
+        this._autoActiveFirstOption = coerceBooleanProperty(value);
+    }
+    get isOpen() {
+        return this._isOpen && this.showPanel;
+    }
+    set isOpen(value) {
+        this._isOpen = value;
+    }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
+    get openOnFocus() {
+        return this._openOnFocus;
+    }
+    set openOnFocus(value) {
+        this._openOnFocus = value;
+    }
+    constructor() {
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.elementRef = inject(ElementRef);
+        this.parentFormField = inject(KbqFormField, { host: true, optional: true });
+        this.destroyRef = inject(DestroyRef);
+        /** Unique ID to be used by autocomplete trigger's "aria-owns" property. */
+        this.id = `kbq-autocomplete-${uniqueAutocompleteIdCounter++}`;
+        /** Whether the autocomplete panel should be visible, depending on option length. */
+        this.showPanel = false;
+        this.template = viewChild.required(TemplateRef);
+        this.panel = viewChild.required('panel');
+        this.optionGroups = contentChildren(KbqOptgroup, ...(ngDevMode ? [{ debugName: "optionGroups" }] : []));
+        /** Function that maps an option's control value to its display value in the trigger. */
+        // TODO: Skipped for migration because:
+        //  Your application code writes to the input. This prevents migration.
+        this.displayWith = null;
+        /**
+         * Minimum width of the panel in pixels.
+         * When panelWidth is not set, the panel will be at least as wide as its host and no less than panelMinWidth.
+         */
+        // TODO: Skipped for migration because:
+        //  Your application code writes to the input. This prevents migration.
+        this.panelMinWidth = 200;
+        /** Event that is emitted whenever an option from the list is selected. */
+        this.optionSelected = output();
+        /** Event that is emitted when the autocomplete panel is opened. */
+        this.opened = output();
+        /** Event that is emitted when the autocomplete panel is closed. */
+        this.closed = output();
+        this._classList = {};
+        this._isOpen = false;
+        this._openOnFocus = true;
+        const defaults = inject(KBQ_AUTOCOMPLETE_DEFAULT_OPTIONS);
+        this._autoActiveFirstOption = !!defaults.autoActiveFirstOption;
+    }
+    ngAfterContentInit() {
+        this.keyManager = new ActiveDescendantKeyManager(this.options);
+        this.setVisibility();
+        this.parentFormField
+            ?.control()
+            .ngControl?.valueChanges?.pipe(delay(0), filter((value) => value === null || value === undefined || value === ''), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.options.filter(({ selected }) => selected).forEach((option) => option.deselect(false));
+        });
+    }
+    setScrollTop(scrollTop) {
+        const panel = this.panel();
+        if (panel) {
+            panel.nativeElement.scrollTop = scrollTop;
+        }
+    }
+    getScrollTop() {
+        const panel = this.panel();
+        return panel ? panel.nativeElement.scrollTop : 0;
+    }
+    setVisibility() {
+        this.showPanel = !!this.options.length;
+        this._classList = {
+            ...this._classList,
+            'kbq-autocomplete_visible': this.showPanel,
+            'kbq-autocomplete_hidden': !this.showPanel
+        };
+        this.updateFocusClass();
+        this.changeDetectorRef.markForCheck();
+    }
+    emitSelectEvent(option) {
+        const event = new KbqAutocompleteSelectedEvent(this, option);
+        this.optionSelected.emit(event);
+    }
+    onKeydown(event) {
+        this.keyManager.onKeydown(event);
+        this.updateFocusClass();
+    }
+    updateFocusClass() {
+        this._classList = {
+            ...this._classList,
+            'cdk-keyboard-focused': this.parentFormField?.focusOrigin === 'keyboard'
+        };
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.25", type: KbqAutocomplete, isStandalone: true, selector: "kbq-autocomplete", inputs: { displayWith: "displayWith", panelWidth: "panelWidth", panelMinWidth: ["panelMinWidth", "panelMinWidth", numberAttribute], classList: ["class", "classList"], autoActiveFirstOption: "autoActiveFirstOption", openOnFocus: "openOnFocus" }, outputs: { optionSelected: "optionSelected", opened: "opened", closed: "closed" }, host: { classAttribute: "kbq-autocomplete" }, providers: [
+            {
+                provide: KBQ_OPTION_PARENT_COMPONENT,
+                useExisting: KbqAutocomplete
+            }
+        ], queries: [{ propertyName: "optionGroups", predicate: KbqOptgroup, isSignal: true }, { propertyName: "options", predicate: KbqOption, descendants: true }], viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], exportAs: ["kbqAutocomplete"], ngImport: i0, template: "<ng-template>\n    <div class=\"kbq-autocomplete-panel\" [id]=\"id\" [class]=\"classList\">\n        <div #panel role=\"listbox\" class=\"kbq-autocomplete-panel__content kbq-scrollbar\">\n            <ng-content />\n        </div>\n        <ng-content select=\"[kbqAutocompleteFooter], kbq-autocomplete-footer\" />\n    </div>\n</ng-template>\n", styles: [".kbq-autocomplete-panel .kbq-autocomplete-footer{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;box-sizing:border-box;min-height:40px;border-top-width:1px;border-top-style:solid;padding:var(--kbq-size-xxs) var(--kbq-size-l)}.kbq-autocomplete-panel{visibility:hidden;position:relative;display:flex;flex-direction:column;box-sizing:border-box;min-width:100%;width:100%;max-width:none;border-radius:var(--kbq-autocomplete-size-panel-border-radius, var(--kbq-size-border-radius));max-height:var(--kbq-autocomplete-size-panel-max-height)}.kbq-autocomplete-panel .kbq-autocomplete-panel__content{flex:1;padding:var(--kbq-size-xxs);overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.kbq-autocomplete-panel .kbq-autocomplete-footer{border-color:var(--kbq-line-contrast-less)}.kbq-autocomplete-panel.kbq-autocomplete_visible{visibility:visible}.kbq-autocomplete-panel.kbq-autocomplete_hidden{visibility:hidden}.kbq-autocomplete-panel .kbq-option{position:relative}.kbq-autocomplete-panel .kbq-option:before,.kbq-autocomplete-panel .kbq-option:after{position:absolute;content:\"\";width:var(--kbq-size-xxs);height:calc(100% + var(--kbq-size-3xs) * 2)}.kbq-autocomplete-panel .kbq-option:before{right:calc(100% + var(--kbq-size-3xs))}.kbq-autocomplete-panel .kbq-option:after{left:calc(100% + var(--kbq-size-3xs))}.kbq-autocomplete-panel .kbq-divider-horizontal{margin-top:-1px}.kbq-autocomplete-panel{box-shadow:var(--kbq-select-panel-dropdown-shadow);background:var(--kbq-select-panel-dropdown-background)}\n", ".kbq-autocomplete-panel{--kbq-autocomplete-size-panel-padding: var(--kbq-size-xxs) 0;--kbq-autocomplete-size-panel-max-height: 256px;--kbq-autocomplete-size-panel-border-radius: var(--kbq-size-border-radius);--kbq-select-panel-dropdown-background: var(--kbq-background-card);--kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAutocomplete, decorators: [{
+            type: Component,
+            args: [{ selector: 'kbq-autocomplete', imports: [], providers: [
+                        {
+                            provide: KBQ_OPTION_PARENT_COMPONENT,
+                            useExisting: KbqAutocomplete
+                        }
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'kbq-autocomplete'
+                    }, exportAs: 'kbqAutocomplete', template: "<ng-template>\n    <div class=\"kbq-autocomplete-panel\" [id]=\"id\" [class]=\"classList\">\n        <div #panel role=\"listbox\" class=\"kbq-autocomplete-panel__content kbq-scrollbar\">\n            <ng-content />\n        </div>\n        <ng-content select=\"[kbqAutocompleteFooter], kbq-autocomplete-footer\" />\n    </div>\n</ng-template>\n", styles: [".kbq-autocomplete-panel .kbq-autocomplete-footer{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;box-sizing:border-box;min-height:40px;border-top-width:1px;border-top-style:solid;padding:var(--kbq-size-xxs) var(--kbq-size-l)}.kbq-autocomplete-panel{visibility:hidden;position:relative;display:flex;flex-direction:column;box-sizing:border-box;min-width:100%;width:100%;max-width:none;border-radius:var(--kbq-autocomplete-size-panel-border-radius, var(--kbq-size-border-radius));max-height:var(--kbq-autocomplete-size-panel-max-height)}.kbq-autocomplete-panel .kbq-autocomplete-panel__content{flex:1;padding:var(--kbq-size-xxs);overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.kbq-autocomplete-panel .kbq-autocomplete-footer{border-color:var(--kbq-line-contrast-less)}.kbq-autocomplete-panel.kbq-autocomplete_visible{visibility:visible}.kbq-autocomplete-panel.kbq-autocomplete_hidden{visibility:hidden}.kbq-autocomplete-panel .kbq-option{position:relative}.kbq-autocomplete-panel .kbq-option:before,.kbq-autocomplete-panel .kbq-option:after{position:absolute;content:\"\";width:var(--kbq-size-xxs);height:calc(100% + var(--kbq-size-3xs) * 2)}.kbq-autocomplete-panel .kbq-option:before{right:calc(100% + var(--kbq-size-3xs))}.kbq-autocomplete-panel .kbq-option:after{left:calc(100% + var(--kbq-size-3xs))}.kbq-autocomplete-panel .kbq-divider-horizontal{margin-top:-1px}.kbq-autocomplete-panel{box-shadow:var(--kbq-select-panel-dropdown-shadow);background:var(--kbq-select-panel-dropdown-background)}\n", ".kbq-autocomplete-panel{--kbq-autocomplete-size-panel-padding: var(--kbq-size-xxs) 0;--kbq-autocomplete-size-panel-max-height: 256px;--kbq-autocomplete-size-panel-border-radius: var(--kbq-size-border-radius);--kbq-select-panel-dropdown-background: var(--kbq-background-card);--kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { template: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], options: [{
+                type: ContentChildren,
+                args: [KbqOption, { descendants: true }]
+            }], optionGroups: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KbqOptgroup), { isSignal: true }] }], displayWith: [{
+                type: Input
+            }], panelWidth: [{
+                type: Input
+            }], panelMinWidth: [{
                 type: Input,
-                args: ['kbqAutocompleteOnBlur']
+                args: [{ transform: numberAttribute }]
+            }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], classList: [{
+                type: Input,
+                args: ['class']
+            }], autoActiveFirstOption: [{
+                type: Input
+            }], openOnFocus: [{
+                type: Input
             }] } });
 
 class KbqAutocompleteModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: KbqAutocompleteModule, imports: [KbqOptionModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqAutocompleteModule, imports: [KbqOptionModule,
             OverlayModule,
-            NgClass,
             KbqAutocomplete,
             KbqAutocompleteTrigger,
             KbqAutocompleteOrigin,
@@ -769,29 +760,28 @@ class KbqAutocompleteModule {
             KbqAutocompleteTrigger,
             KbqAutocompleteOrigin,
             KbqAutocompleteFooter] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqAutocompleteModule, providers: [KBQ_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER], imports: [KbqOptionModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAutocompleteModule, providers: [KBQ_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER], imports: [KbqOptionModule,
             OverlayModule, KbqOptionModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqAutocompleteModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAutocompleteModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         KbqOptionModule,
                         OverlayModule,
-                        NgClass,
                         KbqAutocomplete,
                         KbqAutocompleteTrigger,
                         KbqAutocompleteOrigin,
                         KbqAutocompleteFooter
                     ],
+                    providers: [KBQ_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER],
                     exports: [
                         KbqAutocomplete,
                         KbqOptionModule,
                         KbqAutocompleteTrigger,
                         KbqAutocompleteOrigin,
                         KbqAutocompleteFooter
-                    ],
-                    providers: [KBQ_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER]
+                    ]
                 }]
         }] });