@koobiq/components 20.1.0 → 20.3.0

package/fesm2022/koobiq-components-autocomplete.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-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 { inject, ElementRef, Directive, InjectionToken, forwardRef, ViewContainerRef, ChangeDetectorRef, NgZone, input, afterNextRender, Input, DestroyRef, viewChild, TemplateRef, contentChildren, numberAttribute, output, ContentChildren, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { Directionality } from '@angular/cdk/bidi';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
@@ -7,12 +7,12 @@ import { _getFocusedElementPierceShadowDom, _getEventTarget } from '@angular/cdk
 import { TemplatePortal } from '@angular/cdk/portal';
 import { ViewportRuler } from '@angular/cdk/scrolling';
 import { DOCUMENT } from '@angular/common';
+import { toObservable, outputToObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-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 { KBQ_WINDOW, KbqOptionSelectionChange, ESCAPE, ENTER, TAB, DOWN_ARROW, UP_ARROW, defaultOffsetY, KBQ_CONNECTED_OVERLAY_BELOW_CLASS, KBQ_CONNECTED_OVERLAY_ABOVE_CLASS, kbqResolvePanelWidth, kbqGetPanelWidthOrigin, kbqSiblingPopupProvider, KbqOptgroup, KBQ_PANEL_DEFAULT_MIN_WIDTH, ActiveDescendantKeyManager, KbqOption, KBQ_OPTION_PARENT_COMPONENT, KbqOptionModule } from '@koobiq/components/core';
+import { KBQ_FORM_FIELD } from '@koobiq/components/form-field';
 import { defer, merge, Subscription, Subject, of, fromEvent } from 'rxjs';
 import { take, switchMap, filter, map, tap, delay } from 'rxjs/operators';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 /**
  * Directive applied to an element to make it usable
@@ -22,10 +22,10 @@ class KbqAutocompleteOrigin {
     constructor() {
         this.elementRef = inject(ElementRef);
     }
-    /** @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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAutocompleteOrigin, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqAutocompleteOrigin, isStandalone: true, selector: "[kbqAutocompleteOrigin]", exportAs: ["kbqAutocompleteOrigin"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAutocompleteOrigin, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAutocompleteOrigin, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqAutocompleteOrigin]',
@@ -34,14 +34,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }] });
 
 /**
- * The following style constants are necessary to save here in order
- * to properly calculate the scrollTop of the panel. Because we are not
- * actually focusing the active item, scroll must be handled manually.
+ * The total height of the autocomplete panel.
+ *
+ * @deprecated Unused — the panel is capped by `--kbq-autocomplete-size-panel-max-height` and reveals its
+ * active option through `KbqOption.focus`, so nothing computes a scroll offset from this. Will be removed
+ * in the next major release.
  */
-/** The total height of the autocomplete panel. */
 const AUTOCOMPLETE_PANEL_HEIGHT = 256;
-/** Injection token that determines the scroll handling while the autocomplete panel is open. */
-const KBQ_AUTOCOMPLETE_SCROLL_STRATEGY = new InjectionToken('kbq-autocomplete-scroll-strategy');
+/**
+ * Injection token that determines the scroll handling while the autocomplete panel is open. The root default
+ * keeps the trigger usable outside `KbqAutocompleteModule`'s injector; providing the token anywhere still wins
+ * over it.
+ */
+const KBQ_AUTOCOMPLETE_SCROLL_STRATEGY = new InjectionToken('kbq-autocomplete-scroll-strategy', {
+    providedIn: 'root',
+    factory: () => KBQ_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY(inject(Overlay))
+});
 function KBQ_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY(overlay) {
     return () => overlay.scrollStrategies.reposition();
 }
@@ -76,6 +84,10 @@ class KbqAutocompleteTrigger {
     get panelOpen() {
         return this.overlayAttached && this.autocomplete().showPanel;
     }
+    /** Whether the autocomplete panel is currently on screen. Part of the `KbqSiblingPopup` contract. */
+    get isAttached() {
+        return this.overlayAttached;
+    }
     /**
      * 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.
@@ -95,7 +107,7 @@ class KbqAutocompleteTrigger {
         this.overlay = inject(Overlay);
         this.zone = inject(NgZone);
         this.dir = inject(Directionality, { optional: true });
-        this.formField = inject(KbqFormField, { optional: true, host: true });
+        this.formField = inject(KBQ_FORM_FIELD, { optional: true, host: true });
         this.viewportRuler = inject(ViewportRuler);
         this.document = inject(DOCUMENT);
         this.optionSelections = defer(() => {
@@ -109,6 +121,14 @@ class KbqAutocompleteTrigger {
         });
         /** The autocomplete panel to be attached to this trigger. */
         this.autocomplete = input(undefined, ...(ngDevMode ? [{ debugName: "autocomplete", alias: 'kbqAutocomplete' }] : [{ alias: 'kbqAutocomplete' }]));
+        /**
+         * Emits `true` when the panel opens and `false` when it closes. Part of the `KbqSiblingPopup`
+         * contract.
+         *
+         * Built on top of the `autocomplete` signal rather than read once: the panel is bound after the consumers
+         * of this stream are created (a tooltip on the same element subscribes in its constructor).
+         */
+        this.openedChange = toObservable(this.autocomplete).pipe(filter(Boolean), switchMap((autocomplete) => merge(outputToObservable(autocomplete.opened).pipe(map(() => true)), outputToObservable(autocomplete.closed).pipe(map(() => false)))));
         /**
          * Reference relative to which to position the autocomplete panel.
          * Defaults to the autocomplete trigger element.
@@ -170,7 +190,8 @@ class KbqAutocompleteTrigger {
                 const autocompleteValue = this.autocomplete();
                 if (this.panelOpen) {
                     this.scrollActiveOptionIntoView();
-                    this.elementRef.nativeElement.focus();
+                    // Focus returns to the input on every arrow key; it must not drag the scroll with it.
+                    this.elementRef.nativeElement.focus({ preventScroll: true });
                 }
                 else if (!this.panelOpen && autocompleteValue.keyManager.activeItem) {
                     autocompleteValue.keyManager.activeItem?.selectViaInteraction();
@@ -462,7 +483,13 @@ class KbqAutocompleteTrigger {
         this.zone.onStable
             .asObservable()
             .pipe(take(1))
-            .subscribe(() => this.resetActiveItem());
+            .subscribe(() => {
+            this.resetActiveItem();
+            // Overlay width may not be final on first open, so re-measure when the layout is stable.
+            if (this.panelOpen && this.overlayRef) {
+                this.overlayRef.updateSize(this.getOverlaySize());
+            }
+        });
     }
     getOverlayConfig() {
         return new OverlayConfig({
@@ -478,20 +505,25 @@ class KbqAutocompleteTrigger {
             .flexibleConnectedTo(this.getConnectedElement())
             .withFlexibleDimensions(false)
             .withPush(false)
+            // CDK measures the pane before the trigger↔panel gap padding (kbq-connected-overlay-gap) is
+            // applied, so a position can be judged "fits" without accounting for that extra space. Giving
+            // it a margin at least as big as the gap (defaultOffsetY) keeps the fit check conservative
+            // enough to absorb the padding that lands afterwards.
+            .withViewportMargin(defaultOffsetY)
             .withPositions([
             {
                 originX: 'start',
                 originY: 'bottom',
                 overlayX: 'start',
                 overlayY: 'top',
-                offsetY: defaultOffsetY
+                panelClass: KBQ_CONNECTED_OVERLAY_BELOW_CLASS
             },
             {
                 originX: 'start',
                 originY: 'top',
                 overlayX: 'start',
                 overlayY: 'bottom',
-                offsetY: -defaultOffsetY
+                panelClass: KBQ_CONNECTED_OVERLAY_ABOVE_CLASS
             }
         ]);
         return this.positionStrategy;
@@ -503,15 +535,12 @@ class KbqAutocompleteTrigger {
         }
         return this.formField ? this.formField.getConnectedOverlayOrigin() : this.elementRef;
     }
-    getPanelMinWidth() {
-        return Math.max(this.autocomplete().panelMinWidth, this.getHostWidth());
-    }
     getOverlaySize() {
-        const panelWidth = this.autocomplete().panelWidth;
-        return panelWidth ? { width: panelWidth } : { minWidth: this.getPanelMinWidth() };
+        const autocomplete = this.autocomplete();
+        return kbqResolvePanelWidth(autocomplete.panelWidth(), autocomplete.panelMinWidth(), this.getHostWidth());
     }
     getHostWidth() {
-        return this.getConnectedElement().nativeElement.getBoundingClientRect().width;
+        return kbqGetPanelWidthOrigin(this.getConnectedElement());
     }
     /**
      * Resets the active item to -1 so arrow events will activate the
@@ -530,14 +559,14 @@ class KbqAutocompleteTrigger {
         const element = this.elementRef.nativeElement;
         return !element.readOnly && !element.disabled && !this._autocompleteDisabled;
     }
-    /** @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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAutocompleteTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.30", 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, kbqSiblingPopupProvider(KbqAutocompleteTrigger)], exportAs: ["kbqAutocompleteTrigger"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAutocompleteTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAutocompleteTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: `input[kbqAutocomplete], textarea[kbqAutocomplete]`,
-                    providers: [KBQ_AUTOCOMPLETE_VALUE_ACCESSOR],
+                    providers: [KBQ_AUTOCOMPLETE_VALUE_ACCESSOR, kbqSiblingPopupProvider(KbqAutocompleteTrigger)],
                     host: {
                         class: 'kbq-autocomplete-trigger',
                         '[attr.autocomplete]': 'autocompleteAttribute()',
@@ -563,10 +592,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAutocompleteFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAutocompleteFooter, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqAutocompleteFooter], kbq-autocomplete-footer',
@@ -635,7 +664,7 @@ class KbqAutocomplete {
     constructor() {
         this.changeDetectorRef = inject(ChangeDetectorRef);
         this.elementRef = inject(ElementRef);
-        this.parentFormField = inject(KbqFormField, { host: true, optional: true });
+        this.parentFormField = inject(KBQ_FORM_FIELD, { 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++}`;
@@ -648,13 +677,24 @@ class KbqAutocomplete {
         // TODO: Skipped for migration because:
         //  Your application code writes to the input. This prevents migration.
         this.displayWith = null;
+        /**
+         * Specify the width of the autocomplete panel. If set to `auto`, the panel will match the width of
+         * its host, but will never be narrower than `panelMinWidth`. Any other CSS sizing value is used as an
+         * exact width, and `panelMinWidth` is not applied. When not set, the panel sizes to its content and is
+         * at least as wide as its host.
+         */
+        this.panelWidth = input(undefined, ...(ngDevMode ? [{ debugName: "panelWidth" }] : []));
         /**
          * 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;
+        this.panelMinWidth = input(KBQ_PANEL_DEFAULT_MIN_WIDTH, ...(ngDevMode ? [{ debugName: "panelMinWidth", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        /**
+         * Maximum width of the panel in pixels. Caps how far the panel grows with its content — it never makes
+         * the panel narrower than its host, and never clamps an explicit `panelWidth`.
+         * When null, the `--kbq-panel-size-width-max` token applies.
+         */
+        this.panelMaxWidth = input(null, ...(ngDevMode ? [{ debugName: "panelMaxWidth", transform: numberAttribute }] : [{ transform: numberAttribute }]));
         /** 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. */
@@ -711,15 +751,15 @@ class KbqAutocomplete {
             '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: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.30", type: KbqAutocomplete, isStandalone: true, selector: "kbq-autocomplete", inputs: { displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: false, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, panelMinWidth: { classPropertyName: "panelMinWidth", publicName: "panelMinWidth", isSignal: true, isRequired: false, transformFunction: null }, panelMaxWidth: { classPropertyName: "panelMaxWidth", publicName: "panelMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, classList: { classPropertyName: "classList", publicName: "class", isSignal: false, isRequired: false, transformFunction: null }, autoActiveFirstOption: { classPropertyName: "autoActiveFirstOption", publicName: "autoActiveFirstOption", isSignal: false, isRequired: false, transformFunction: null }, openOnFocus: { classPropertyName: "openOnFocus", publicName: "openOnFocus", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", opened: "opened", closed: "closed" }, host: { styleAttribute: "display: none", 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 }); }
+        ], 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\" [style.max-width.px]=\"panelMaxWidth()\">\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:var(--kbq-panel-size-width-max, 640px);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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAutocomplete, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-autocomplete', imports: [], providers: [
                         {
@@ -727,19 +767,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                             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"] }]
+                        class: 'kbq-autocomplete',
+                        // Remove the empty TemplatePortal host from layout entirely — it would otherwise contribute an
+                        // inline box in normal flow, or a phantom item in a flex/grid container.
+                        style: 'display: none'
+                    }, exportAs: 'kbqAutocomplete', template: "<ng-template>\n    <div class=\"kbq-autocomplete-panel\" [id]=\"id\" [class]=\"classList\" [style.max-width.px]=\"panelMaxWidth()\">\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:var(--kbq-panel-size-width-max, 640px);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: [{ transform: numberAttribute }]
-            }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], classList: [{
+            }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], panelMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMinWidth", required: false }] }], panelMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxWidth", required: false }] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], classList: [{
                 type: Input,
                 args: ['class']
             }], autoActiveFirstOption: [{
@@ -749,8 +787,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }] } });
 
 class KbqAutocompleteModule {
-    /** @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,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqAutocompleteModule, imports: [KbqOptionModule,
             OverlayModule,
             KbqAutocomplete,
             KbqAutocompleteTrigger,
@@ -760,10 +798,10 @@ class KbqAutocompleteModule {
             KbqAutocompleteTrigger,
             KbqAutocompleteOrigin,
             KbqAutocompleteFooter] }); }
-    /** @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,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAutocompleteModule, imports: [KbqOptionModule,
             OverlayModule, KbqOptionModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAutocompleteModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqAutocompleteModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -774,7 +812,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         KbqAutocompleteOrigin,
                         KbqAutocompleteFooter
                     ],
-                    providers: [KBQ_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER],
                     exports: [
                         KbqAutocomplete,
                         KbqOptionModule,