ngx-virtual-select-field-filterable 1.4.0

package/fesm2022/ngx-virtual-select-field-filterable.mjs

@@ -0,0 +1,877 @@
+import * as i0 from '@angular/core';
+import { Input, Directive, InjectionToken, EventEmitter, signal, booleanAttribute, Output, Inject, ChangeDetectionStrategy, Component, output, inject, ChangeDetectorRef, DestroyRef, ElementRef, computed, numberAttribute, ContentChildren, ContentChild, ViewChild, Optional } from '@angular/core';
+import { BehaviorSubject, Subject, tap, startWith, map, merge, switchMap, debounceTime, take } from 'rxjs';
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NgControl } from '@angular/forms';
+import { SelectionModel } from '@angular/cdk/collections';
+import { ListKeyManager } from '@angular/cdk/a11y';
+import * as i2 from '@angular/cdk/overlay';
+import { ViewportRuler, CdkOverlayOrigin, OverlayModule, CdkConnectedOverlay } from '@angular/cdk/overlay';
+import * as i3 from '@angular/cdk/scrolling';
+import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
+import * as i4 from '@angular/material/form-field';
+import { MAT_FORM_FIELD, MatFormFieldModule, MatFormFieldControl } from '@angular/material/form-field';
+import * as i5 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import { hasModifierKey } from '@angular/cdk/keycodes';
+import * as i1 from '@angular/material/core';
+import { MatPseudoCheckboxModule, MatRippleModule } from '@angular/material/core';
+
+class NgxVirtualSelectFieldOptionForDirective {
+    /**
+     * The options collection to render.
+     * @required
+     */
+    set options(options) {
+        this.options$.next(options);
+    }
+    constructor(template) {
+        this.template = template;
+        this.options$ = new BehaviorSubject([]);
+    }
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: NgxVirtualSelectFieldOptionForDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.0", type: NgxVirtualSelectFieldOptionForDirective, isStandalone: true, selector: "[ngxVirtualSelectFieldOptionFor]", inputs: { options: ["ngxVirtualSelectFieldOptionForOf", "options"] }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: NgxVirtualSelectFieldOptionForDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngxVirtualSelectFieldOptionFor]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { options: [{
+                type: Input,
+                args: [{ required: true, alias: 'ngxVirtualSelectFieldOptionForOf' }]
+            }] } });
+
+const NGX_VIRTUAL_SELECT_FIELD_TRIGGER = new InjectionToken('NGX_VIRTUAL_SELECT_FIELD_TRIGGER');
+class NgxVirtualSelectFieldTriggerDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: NgxVirtualSelectFieldTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.0", type: NgxVirtualSelectFieldTriggerDirective, isStandalone: true, selector: "ngx-virtual-select-field-trigger", providers: [
+            {
+                provide: NGX_VIRTUAL_SELECT_FIELD_TRIGGER,
+                useExisting: NgxVirtualSelectFieldTriggerDirective,
+            },
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: NgxVirtualSelectFieldTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ngx-virtual-select-field-trigger',
+                    providers: [
+                        {
+                            provide: NGX_VIRTUAL_SELECT_FIELD_TRIGGER,
+                            useExisting: NgxVirtualSelectFieldTriggerDirective,
+                        },
+                    ],
+                    standalone: true,
+                }]
+        }] });
+
+const NGX_VIRTUAL_SELECT_FIELD_OPTION_PARENT = new InjectionToken('NGX_VIRTUAL_SELECT_FIELD_OPTION_PARENT');
+
+class NgxVirtualSelectFieldOptionComponent {
+    constructor(_optionParent, _elementRef) {
+        this._optionParent = _optionParent;
+        this._elementRef = _elementRef;
+        /**
+         * Whether the option is disabled.
+         */
+        this.disabled = false;
+        this.selectedChange = new EventEmitter();
+        this.multiple = this._optionParent?.multiple ?? false;
+        this.active = signal(false);
+        this.selected = signal(false);
+        this.hostNativeElement = this._elementRef.nativeElement;
+    }
+    // #region Highlightable
+    setActiveStyles() {
+        if (!this.active()) {
+            this.active.set(true);
+        }
+    }
+    setInactiveStyles() {
+        if (this.active()) {
+            this.active.set(false);
+        }
+    }
+    // #endregion Highlightable
+    deselect() {
+        this.selected.set(false);
+    }
+    select() {
+        this.selected.set(true);
+    }
+    onClick() {
+        if (this.disabled) {
+            return;
+        }
+        this.selected.set(this.multiple ? !this.selected() : true);
+        this.selectedChange.emit({
+            source: this,
+            value: this.value,
+            selected: this.selected(),
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: NgxVirtualSelectFieldOptionComponent, deps: [{ token: NGX_VIRTUAL_SELECT_FIELD_OPTION_PARENT }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: NgxVirtualSelectFieldOptionComponent, isStandalone: true, selector: "ngx-virtual-select-field-option", inputs: { value: "value", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { selectedChange: "selectedChange" }, host: { attributes: { "role": "option" }, listeners: { "click": "onClick()" }, properties: { "class.ngx-virtual-select-field-option--active": "active()", "class.ngx-virtual-select-field-option--selected": "selected()", "class.ngx-virtual-select-field-option--multiple": "multiple", "class.ngx-virtual-select-field-option--disabled": "disabled" }, classAttribute: "ngx-virtual-select-field-option" }, ngImport: i0, template: "@if(multiple){\n<mat-pseudo-checkbox\n  [state]=\"selected() ? 'checked' : 'unchecked'\"\n></mat-pseudo-checkbox>\n}\n\n<span class=\"ngx-virtual-select-field-option__label\"\n  ><ng-content></ng-content\n></span>\n\n@if (!multiple && selected() ) {\n<mat-pseudo-checkbox state=\"checked\" appearance=\"minimal\"></mat-pseudo-checkbox>\n}\n\n<div\n  class=\"ngx-virtual-select-field-option__ripple\"\n  matRipple\n  [matRippleTrigger]=\"hostNativeElement\"\n  [matRippleDisabled]=\"disabled\"\n></div>\n", styles: [":host{cursor:pointer;position:relative;display:inline-flex;flex-direction:row;gap:var(--ngx-virtual-select-field-option-gap);padding:var(--ngx-virtual-select-field-option-padding);line-height:var(--ngx-virtual-select-field-option-line-height);height:var(--ngx-virtual-select-field__viewport-option-height);color:var(--ngx-virtual-select-field-option-color);font-family:var(--ngx-virtual-select-field-option-font-family);font-size:var(--ngx-virtual-select-field-option-font-size);font-weight:var(--ngx-virtual-select-field-option-font-weight);letter-spacing:var(--ngx-virtual-select-field-option-letter-spacing)}:host.ngx-virtual-select-field-option{display:flex;align-items:center;box-sizing:border-box;width:100%}:host.ngx-virtual-select-field-option--active{background-color:var(--ngx-virtual-select-field-option-background-color--active)}:host.ngx-virtual-select-field-option--selected{color:var(--ngx-virtual-select-field-option-selected-state-label-text-color)}:host.ngx-virtual-select-field-option--selected:not(.ngx-virtual-select-field-option--multiple){background-color:var(--ngx-virtual-select-field-option-background-color--selected)}:host.ngx-virtual-select-field-option--disabled{pointer-events:none;opacity:var(--ngx-virtual-select-field-option-disabled-state-opacity)}:host.ngx-virtual-select-field-option:hover{background-color:var(--ngx-virtual-select-field-option-background-color--hover)}:host.ngx-virtual-select-field-option :host.ngx-virtual-select-field-option__label{flex:1;display:inline-flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host.ngx-virtual-select-field-option :host.ngx-virtual-select-field-option__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatPseudoCheckboxModule }, { kind: "component", type: i1.MatPseudoCheckbox, selector: "mat-pseudo-checkbox", inputs: ["state", "disabled", "appearance"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: NgxVirtualSelectFieldOptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-virtual-select-field-option', standalone: true, imports: [CommonModule, MatPseudoCheckboxModule, MatRippleModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        role: 'option',
+                        '(click)': 'onClick()',
+                        '[class.ngx-virtual-select-field-option--active]': 'active()',
+                        '[class.ngx-virtual-select-field-option--selected]': 'selected()',
+                        '[class.ngx-virtual-select-field-option--multiple]': 'multiple',
+                        '[class.ngx-virtual-select-field-option--disabled]': 'disabled',
+                        class: 'ngx-virtual-select-field-option',
+                    }, template: "@if(multiple){\n<mat-pseudo-checkbox\n  [state]=\"selected() ? 'checked' : 'unchecked'\"\n></mat-pseudo-checkbox>\n}\n\n<span class=\"ngx-virtual-select-field-option__label\"\n  ><ng-content></ng-content\n></span>\n\n@if (!multiple && selected() ) {\n<mat-pseudo-checkbox state=\"checked\" appearance=\"minimal\"></mat-pseudo-checkbox>\n}\n\n<div\n  class=\"ngx-virtual-select-field-option__ripple\"\n  matRipple\n  [matRippleTrigger]=\"hostNativeElement\"\n  [matRippleDisabled]=\"disabled\"\n></div>\n", styles: [":host{cursor:pointer;position:relative;display:inline-flex;flex-direction:row;gap:var(--ngx-virtual-select-field-option-gap);padding:var(--ngx-virtual-select-field-option-padding);line-height:var(--ngx-virtual-select-field-option-line-height);height:var(--ngx-virtual-select-field__viewport-option-height);color:var(--ngx-virtual-select-field-option-color);font-family:var(--ngx-virtual-select-field-option-font-family);font-size:var(--ngx-virtual-select-field-option-font-size);font-weight:var(--ngx-virtual-select-field-option-font-weight);letter-spacing:var(--ngx-virtual-select-field-option-letter-spacing)}:host.ngx-virtual-select-field-option{display:flex;align-items:center;box-sizing:border-box;width:100%}:host.ngx-virtual-select-field-option--active{background-color:var(--ngx-virtual-select-field-option-background-color--active)}:host.ngx-virtual-select-field-option--selected{color:var(--ngx-virtual-select-field-option-selected-state-label-text-color)}:host.ngx-virtual-select-field-option--selected:not(.ngx-virtual-select-field-option--multiple){background-color:var(--ngx-virtual-select-field-option-background-color--selected)}:host.ngx-virtual-select-field-option--disabled{pointer-events:none;opacity:var(--ngx-virtual-select-field-option-disabled-state-opacity)}:host.ngx-virtual-select-field-option:hover{background-color:var(--ngx-virtual-select-field-option-background-color--hover)}:host.ngx-virtual-select-field-option :host.ngx-virtual-select-field-option__label{flex:1;display:inline-flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host.ngx-virtual-select-field-option :host.ngx-virtual-select-field-option__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [NGX_VIRTUAL_SELECT_FIELD_OPTION_PARENT]
+                }] }, { type: i0.ElementRef }], propDecorators: { value: [{
+                type: Input,
+                args: [{ required: true }]
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], selectedChange: [{
+                type: Output
+            }] } });
+
+const POSITIONS = [
+    {
+        originX: 'start',
+        originY: 'bottom',
+        overlayX: 'start',
+        overlayY: 'top',
+    },
+    {
+        originX: 'end',
+        originY: 'bottom',
+        overlayX: 'end',
+        overlayY: 'top',
+    },
+    {
+        originX: 'start',
+        originY: 'top',
+        overlayX: 'start',
+        overlayY: 'bottom',
+        panelClass: 'ngx-virtual-select-field-overlay--above',
+    },
+    {
+        originX: 'end',
+        originY: 'top',
+        overlayX: 'end',
+        overlayY: 'bottom',
+        panelClass: 'ngx-virtual-select-field-overlay--above',
+    },
+];
+const NGX_VIRTUAL_SELECT_FIELD_CONFIG = new InjectionToken('NGX_VIRTUAL_SELECT_FIELD_CONFIG');
+const PANEL_WIDTH_AUTO = 'auto';
+const PANEL_VIEWPORT_PAGE_SIZE = 8;
+const OPTION_HEIGHT = 48;
+
+const ARROW_DOWN_KEY = 'ArrowDown';
+const ARROW_UP_KEY = 'ArrowUp';
+const ARROW_RIGHT_KEY = 'ArrowRight';
+const ARROW_LEFT_KEY = 'ArrowLeft';
+const ENTER_CODE = 'Enter';
+const SPACE_CODE = 'Space';
+const KEY_A_CODE = 'KeyA';
+
+//#region imports
+//#endregion imports
+class NgxVirtualSelectFieldComponent {
+    /**
+     * Value of the select field
+     * @default null
+     */
+    set value(value) {
+        if (this._value === value) {
+            return;
+        }
+        value = value || [];
+        if (!Array.isArray(value)) {
+            value = [value];
+        }
+        this._value = value;
+        this._selectionModel?.setSelection(...this._value.map((v) => this.optionFor.options$.value.find((o) => o.value === v)));
+        this._stateChanges.next();
+    }
+    /**
+     * Placeholder for the select field
+     * @default none
+     */
+    set placeholder(placeholder) {
+        this._placeholder = placeholder;
+        this._stateChanges.next();
+    }
+    get placeholder() {
+        return this._placeholder;
+    }
+    /**
+     * Define if fields is required
+     * @default false
+     */
+    set required(req) {
+        this._required = req;
+        this._stateChanges.next();
+    }
+    get required() {
+        return this._required;
+    }
+    /**
+     * Define if field is disabled
+     * @default false
+     */
+    set disabled(value) {
+        this._disabled = value;
+        this._stateChanges.next();
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    constructor(_parentFormField, _defaultOptions) {
+        this._parentFormField = _parentFormField;
+        this._defaultOptions = _defaultOptions;
+        //#region Inputs/Outputs
+        this.userAriaDescribedBy = '';
+        /**
+         * Width for overlay panel
+         * @default 'auto'
+         */
+        this.panelWidth = this._defaultOptions?.panelWidth ?? PANEL_WIDTH_AUTO;
+        /**
+         * Height for an option element
+         * @default 48
+         */
+        this.optionHeight = this._defaultOptions?.optionHeight ?? OPTION_HEIGHT;
+        /**
+         * Amount of visible items in list
+         * @default 8
+         */
+        this.panelViewportPageSize = this._defaultOptions?.panelViewportPageSize ?? PANEL_VIEWPORT_PAGE_SIZE;
+        /**
+         * Enable multiple selection
+         * @default false
+         */
+        this.multiple = false;
+        /**
+         * Tab index for keyboard navigation
+         * @default 0
+         */
+        this.tabIndex = 0;
+        /**
+         * Milliseconds to wait before navigating to active element after keyboard search
+         * @default 300
+         */
+        this.typeaheadDebounceInterval = 300;
+        /**
+         * CSS class to be added to the panel element
+         * @default none
+         */
+        this.panelClass = null;
+        /**
+         * Enable filtering of options
+         * @default false
+         */
+        this.filterable = false;
+        /**
+         * Placeholder text for the filter input
+         * @default 'Search...'
+         */
+        this.filterPlaceholder = 'Search...';
+        this._value = [];
+        this._placeholder = '';
+        this._required = false;
+        this._disabled = false;
+        /**
+         * Value change event
+         */
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.valueChange = output();
+        /**
+         * Selection change event
+         * Emits after value change and form control update
+         */
+        this.selectionChange = output();
+        this.customTrigger = null;
+        this.optionsQuery = null;
+        this.id = `ngx-virtual-select-field-${NgxVirtualSelectFieldComponent.nextId++}`;
+        this.controlType = 'ngx-virtual-select-field';
+        this.ngControl = inject(NgControl, {
+            optional: true,
+        });
+        this.autofilled = false;
+        this.POSITIONS = POSITIONS;
+        this.overlayPanelClass = this._defaultOptions?.overlayPanelClass || '';
+        this.isPanelOpened = signal(false);
+        this.filterText = signal('');
+        this.triggerValue$ = null;
+        this.filteredOptions$ = null;
+        this._changeDetectorRef = inject(ChangeDetectorRef);
+        this._destroyRef = inject(DestroyRef);
+        this._elRef = inject(ElementRef);
+        this._stateChanges = new Subject();
+        this._scrolledIndexChange = new Subject();
+        this._onChange = () => void 0;
+        this._onTouched = () => void 0;
+        this._keyManager = null;
+        this._filterTextSubject = null;
+        this._focused = false;
+        this.optionTrackBy = (_index, option) => {
+            return option.value;
+        };
+        if (this.ngControl != null) {
+            this.ngControl.valueAccessor = this;
+            this._disabled = this.ngControl.disabled ?? false;
+        }
+        this.overlayWidth = this.createOverlayWidthSignal();
+        this.inheritedColorTheme = this._parentFormField
+            ? `mat-${this._parentFormField.color}`
+            : '';
+    }
+    createOverlayWidthSignal() {
+        const changeDetectorRef = inject(ChangeDetectorRef);
+        // NOTE: View port ruler change stream runs outside the zone.
+        //       Need to run change detection manually to trigger computed signal below.
+        const viewPortRulerChange = toSignal(inject(ViewportRuler)
+            .change()
+            .pipe(takeUntilDestroyed(this._destroyRef), tap(() => changeDetectorRef.detectChanges())));
+        return computed(() => {
+            viewPortRulerChange();
+            return this.resolveOverlayWidth(this.preferredOverlayOrigin);
+        });
+    }
+    resolveOverlayWidth(preferredOrigin) {
+        if (!this.isPanelOpened()) {
+            return 0;
+        }
+        if (this.panelWidth !== PANEL_WIDTH_AUTO) {
+            return this.panelWidth ?? '';
+        }
+        const refToMeasure = preferredOrigin instanceof CdkOverlayOrigin
+            ? preferredOrigin.elementRef
+            : preferredOrigin || this._elRef;
+        return refToMeasure.nativeElement.getBoundingClientRect().width;
+    }
+    get shouldLabelFloat() {
+        return this.focused || !this.empty;
+    }
+    get empty() {
+        return !this._selectionModel || this._selectionModel.isEmpty();
+    }
+    get stateChanges() {
+        return this._stateChanges.asObservable();
+    }
+    get errorState() {
+        return !!this.ngControl?.invalid && !!this.ngControl?.touched;
+    }
+    get focused() {
+        // NOTE: panel open is needed to keep form field in focused state during interaction with options
+        return this._focused || this.isPanelOpened();
+    }
+    get maxPageSize() {
+        return Math.min(this.panelViewportPageSize, this.optionFor.options$.value.length);
+    }
+    ngOnInit() {
+        this._selectionModel = new SelectionModel(this.multiple, [], true);
+    }
+    ngAfterContentInit() {
+        this.assertIsDefined(this.optionsQuery, `optionsQuery is not defined`);
+        if (!this.customTrigger) {
+            this.triggerValue$ = this._selectionModel.changed.pipe(startWith(null), map((_selected) => this._selectionModel.selected
+                .map((option) => option?.label ?? '')
+                .join(', ')));
+        }
+        // Create filtered options observable that reacts to filter text changes
+        const filterText$ = new Subject();
+        this.filteredOptions$ = merge(this.optionFor.options$, filterText$.pipe(switchMap(() => this.optionFor.options$))).pipe(map((options) => {
+            const searchText = this.filterText().toLowerCase().trim();
+            if (!searchText || !this.filterable) {
+                return options;
+            }
+            return options.filter((option) => {
+                const label = option.getLabel?.() ?? option.label;
+                return label.toLowerCase().includes(searchText);
+            });
+        }));
+        // Trigger filter updates when filter text changes
+        this._filterTextSubject = filterText$;
+        this.optionFor.options$
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe((options) => {
+            this._selectionModel?.setSelection(...this._value.map((v) => options.find((o) => o.value === v)));
+            this.initListKeyManager(options);
+        });
+        this.optionsQuery.changes
+            .pipe(switchMap(() => merge(...this.optionsQuery.map((option) => option.selectedChange))), takeUntilDestroyed(this._destroyRef))
+            .subscribe((selectionEvent) => this.updateOptionSelection(selectionEvent, this.optionFor.options$.value));
+        merge(this._scrolledIndexChange, this._selectionModel.changed)
+            .pipe(takeUntilDestroyed(this._destroyRef), debounceTime(20))
+            .subscribe(() => this.updateRenderedOptionsState(this.optionFor.options$.value));
+    }
+    updateOptionSelection(selectionEvent, options) {
+        this.assertIsDefined(this.optionsQuery, `optionsQuery is not defined`);
+        const { option: changedOption, index: selectedIndex } = this.findOptionByValue(options, selectionEvent.value);
+        if (this.multiple) {
+            this._selectionModel.toggle(changedOption);
+        }
+        else if (changedOption.value === null) {
+            this._selectionModel.clear();
+            this.close();
+        }
+        else {
+            this._selectionModel.select(changedOption);
+            this.close();
+        }
+        if (this._selectionModel.isSelected(changedOption)) {
+            this._keyManager?.setActiveItem(selectedIndex);
+        }
+        // NOTE: this need to keep form field in focus state
+        this.focus();
+        this.emitValue();
+    }
+    ngOnDestroy() {
+        this._scrolledIndexChange.complete();
+        this._keyManager?.destroy();
+        this._stateChanges.complete();
+    }
+    // #region ControlValueAccessor
+    writeValue(value) {
+        this.value = value;
+        // after settting a value on empty fornControl local `empty` does not update
+        // as result the field continue to show placeholder.
+        // needed to trigger change detection for the empty state and trigger value updates
+        this._changeDetectorRef.markForCheck();
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    // #endregion ControlValueAccessor
+    setDescribedByIds(ids) {
+        const controlElement = this._elRef.nativeElement;
+        controlElement.setAttribute('aria-describedby', ids.join(' '));
+    }
+    onContainerClick() {
+        if (this.disabled) {
+            return;
+        }
+        this.focus();
+        this.open();
+    }
+    onOverlayAttached() {
+        this.cdkConnectedOverlay.positionChange
+            .pipe(take(1), switchMap(() => this._scrolledIndexChange.pipe(take(1))), takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => this.navigateToFirstSelectedOption());
+    }
+    navigateToFirstSelectedOption() {
+        if (this._selectionModel.isEmpty()) {
+            return;
+        }
+        let targetIndex = this.optionFor.options$.value.findIndex((option) => option === this._selectionModel.selected[0]);
+        targetIndex = targetIndex - this.maxPageSize / 2;
+        targetIndex = Math.max(0, targetIndex);
+        this.cdkVirtualScrollViewport.scrollToIndex(targetIndex);
+    }
+    onFocusIn() {
+        if (!this.focused) {
+            this._focused = true;
+            this._stateChanges.next();
+        }
+    }
+    onFocusOut() {
+        this._focused = false;
+        if (!this.isPanelOpened()) {
+            this._onTouched();
+            this._stateChanges.next();
+        }
+    }
+    onScrolledIndexChange() {
+        this._scrolledIndexChange.next();
+    }
+    onFilterInput(event) {
+        const input = event.target;
+        this.filterText.set(input.value);
+        this._filterTextSubject?.next(input.value);
+    }
+    onFilterKeyDown(event) {
+        const isArrowKey = event.key === ARROW_DOWN_KEY ||
+            event.key === ARROW_UP_KEY ||
+            event.key === ARROW_LEFT_KEY ||
+            event.key === ARROW_RIGHT_KEY;
+        // Prevent arrow keys from propagating when there's text in the input
+        if (isArrowKey && this.filterText()) {
+            if (event.key === ARROW_DOWN_KEY || event.key === ARROW_UP_KEY) {
+                // Arrow down/up should move to the options list
+                event.preventDefault();
+                this.cdkVirtualScrollViewport.elementRef.nativeElement.focus();
+                this._keyManager?.onKeydown(event);
+            }
+            // Left/Right arrows should work normally in the input for cursor movement
+            return;
+        }
+        // Allow other keys like Escape, Enter to work
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.close();
+        }
+        else if (event.key === 'Tab') {
+            // Tab should close the panel
+            this.close();
+        }
+    }
+    open() {
+        if (this.isPanelOpened()) {
+            return;
+        }
+        if (this._parentFormField) {
+            this.preferredOverlayOrigin =
+                this._parentFormField.getConnectedOverlayOrigin();
+        }
+        this.isPanelOpened.set(true);
+        // Focus the filter input when panel opens if filterable is enabled
+        if (this.filterable) {
+            setTimeout(() => {
+                this.filterInput?.nativeElement.focus();
+            }, 0);
+        }
+    }
+    close() {
+        this.isPanelOpened.set(false);
+        this.filterText.set(''); // Clear filter when closing
+        this._onTouched();
+        this._stateChanges.next();
+    }
+    //#region Keyboard navigation
+    onKeyDown(event) {
+        if (this.disabled) {
+            return;
+        }
+        if (this.isPanelOpened()) {
+            this.doPanelOpenedKeydown(event);
+        }
+        else {
+            this.doPanelClosedKeydown(event);
+        }
+    }
+    doPanelOpenedKeydown(event) {
+        this.assertIsDefined(this.optionsQuery, `optionsQuery is not defined`);
+        const keyManager = this._keyManager;
+        const activeItem = keyManager.activeItem;
+        const isTyping = keyManager.isTyping();
+        const options = this.optionFor.options$.value;
+        const isArrowKey = event.key === ARROW_DOWN_KEY || event.key === ARROW_UP_KEY;
+        if (isArrowKey && event.altKey) {
+            event.preventDefault();
+            this.close();
+        }
+        else if (!isTyping &&
+            (event.code === ENTER_CODE || event.code === SPACE_CODE) &&
+            activeItem &&
+            !hasModifierKey(event)) {
+            event.preventDefault();
+            const { option } = this.findOptionByValue(options, activeItem.value);
+            this._selectionModel.toggle(option);
+            this.emitValue();
+        }
+        else if (!isTyping &&
+            this.multiple &&
+            event.code === KEY_A_CODE &&
+            event.ctrlKey) {
+            event.preventDefault();
+            this.toggleAllOptions(options);
+            this.emitValue();
+        }
+        else {
+            const previouslyFocusedIndex = keyManager.activeItemIndex;
+            keyManager.onKeydown(event);
+            if (this.multiple &&
+                isArrowKey &&
+                event.shiftKey &&
+                keyManager.activeItem &&
+                keyManager.activeItemIndex !== previouslyFocusedIndex) {
+                this.selectOptionByValue(options, keyManager.activeItem.value);
+            }
+        }
+    }
+    toggleAllOptions(options) {
+        const enabledOptionValues = options.filter((option) => !option.disabled);
+        const hasDeselectedOptions = enabledOptionValues.length > this._selectionModel.selected.length;
+        if (hasDeselectedOptions) {
+            this._selectionModel.select(...enabledOptionValues);
+        }
+        else {
+            this._selectionModel.clear();
+        }
+    }
+    doPanelClosedKeydown(event) {
+        const keyManager = this._keyManager;
+        const isTyping = keyManager.isTyping();
+        const isArrowKey = event.key === ARROW_DOWN_KEY ||
+            event.key === ARROW_UP_KEY ||
+            event.key === ARROW_RIGHT_KEY ||
+            event.key === ARROW_LEFT_KEY;
+        if ((!isTyping &&
+            (event.code === SPACE_CODE || event.code === ENTER_CODE) &&
+            !hasModifierKey(event)) ||
+            ((this.multiple || event.altKey) && isArrowKey)) {
+            event.preventDefault(); // prevents the page from scrolling down when pressing space
+            this.open();
+        }
+        else if (!this.multiple) {
+            const previouslySelectedOptionIndex = keyManager.activeItemIndex;
+            keyManager.onKeydown(event);
+            const selectedOptionIndex = keyManager.activeItemIndex;
+            if (selectedOptionIndex &&
+                previouslySelectedOptionIndex !== selectedOptionIndex) {
+                //TODO: arrow navigation should start from selected options. Currently it starts from the first option
+                this.selectOptionByValue(this.optionFor.options$.value, keyManager.activeItem.value);
+                // TODO: Add live announcer
+                // We set a duration on the live announcement, because we want the live element to be
+                // cleared after a while so that users can't navigate to it using the arrow keys.
+                // this._liveAnnouncer.announce((selectedOption as MatOption).viewValue, 10000);
+            }
+        }
+    }
+    //#endregion Keyboard navigation
+    //#region Key manager
+    initListKeyManager(options) {
+        this._keyManager?.destroy();
+        this._keyManager = new ListKeyManager(this.normalizeKeyManagerOptions(options))
+            .withTypeAhead(this.typeaheadDebounceInterval)
+            .withVerticalOrientation()
+            .withHomeAndEnd()
+            .withPageUpDown()
+            .withAllowedModifierKeys(['shiftKey']);
+        this._keyManager.tabOut.subscribe(() => {
+            if (!this.isPanelOpened()) {
+                return;
+            }
+            if (this._keyManager?.activeItem) {
+                this.selectOptionByValue(options, this._keyManager.activeItem.value);
+            }
+            this.focus();
+            this.close();
+        });
+        this._keyManager.change.subscribe((index) => {
+            this.assertIsDefined(this.optionsQuery, `optionsQuery is not defined`);
+            this.updateActiveOptionComponent(this.optionsQuery.toArray(), options[index], index);
+        });
+    }
+    normalizeKeyManagerOptions(options) {
+        return options.map((option) => ({
+            value: option.value,
+            label: option.label,
+            disabled: option.disabled ?? false,
+            getLabel: () => option.getLabel?.() ?? option.label,
+        }));
+    }
+    updateActiveOptionComponent(optionComponents, activeOption, index) {
+        optionComponents.forEach((option) => option.setInactiveStyles());
+        const shouldScrollToActiveItem = this.shouldScrollToActiveItem(index);
+        if (shouldScrollToActiveItem) {
+            this.cdkVirtualScrollViewport.scrolledIndexChange
+                .pipe(take(1))
+                .subscribe(() => {
+                this.assertIsDefined(this.optionsQuery, `optionsQuery is not defined`);
+                this.setActiveOptionComponentByValue(this.optionsQuery.toArray(), activeOption.value);
+            });
+            this.cdkVirtualScrollViewport.scrollToIndex(index);
+        }
+        else {
+            this.setActiveOptionComponentByValue(optionComponents, activeOption.value);
+        }
+    }
+    shouldScrollToActiveItem(targetIndex) {
+        if (!this.isPanelOpened()) {
+            return false;
+        }
+        const scrollTop = this.cdkVirtualScrollViewport.elementRef.nativeElement.scrollTop;
+        // NOTE: -1 is needed to prevent scrolling to next item out of the viewport
+        const bottomScroll = scrollTop + this.optionHeight * this.maxPageSize - 1;
+        const targetScroll = this.optionHeight * targetIndex;
+        return scrollTop > targetScroll || bottomScroll < targetScroll;
+    }
+    setActiveOptionComponentByValue(optionComponents, value) {
+        const optionComponent = optionComponents.find((option) => option.value === value);
+        this.assertIsDefined(optionComponent, `Option component with value ${value} not found`);
+        optionComponent.setActiveStyles();
+    }
+    // #endregion Key manager
+    focus() {
+        this._elRef.nativeElement.focus();
+    }
+    selectOptionByValue(options, value) {
+        const { option } = this.findOptionByValue(options, value);
+        this._selectionModel.select(option);
+        this.emitValue();
+    }
+    updateRenderedOptionsState(options) {
+        this.assertIsDefined(this.optionsQuery, `optionsQuery is not defined`);
+        this.optionsQuery.forEach((optionComponent) => {
+            const { option } = this.findOptionByValue(options, optionComponent.value);
+            if (this._selectionModel.isSelected(option)) {
+                optionComponent.select();
+            }
+            else {
+                // NOTE: deselect for all is needed because of virtual scroll and reusing options
+                optionComponent.deselect();
+            }
+        });
+    }
+    findOptionByValue(options, value) {
+        const index = options.findIndex((option) => option.value === value);
+        const option = options[index];
+        this.assertIsDefined(option, `Option with value ${value} not found`);
+        return { option, index };
+    }
+    emitValue() {
+        this._value = this._selectionModel.selected.map((option) => option.value);
+        const outputValue = this.multiple ? this._value : this._value[0];
+        this.valueChange.emit(outputValue);
+        this._onChange(outputValue);
+        this.selectionChange.emit(new NgxVirtualSelectFieldChange(this, outputValue));
+    }
+    assertIsDefined(value, message) {
+        if (value === undefined || value === null) {
+            throw new Error(message);
+        }
+    }
+    static { this.nextId = 0; }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: NgxVirtualSelectFieldComponent, deps: [{ token: MAT_FORM_FIELD, optional: true }, { token: NGX_VIRTUAL_SELECT_FIELD_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: NgxVirtualSelectFieldComponent, isStandalone: true, selector: "ngx-virtual-select-field", inputs: { userAriaDescribedBy: ["aria-describedby", "userAriaDescribedBy"], panelWidth: "panelWidth", optionHeight: ["optionHeight", "optionHeight", (value) => numberAttribute(value, OPTION_HEIGHT)], panelViewportPageSize: ["panelViewportPageSize", "panelViewportPageSize", (value) => numberAttribute(value, PANEL_VIEWPORT_PAGE_SIZE)], multiple: ["multiple", "multiple", booleanAttribute], tabIndex: ["tabIndex", "tabIndex", (value) => numberAttribute(value, 0)], typeaheadDebounceInterval: ["typeaheadDebounceInterval", "typeaheadDebounceInterval", numberAttribute], panelClass: "panelClass", filterable: ["filterable", "filterable", booleanAttribute], filterPlaceholder: "filterPlaceholder", value: "value", placeholder: "placeholder", required: ["required", "required", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange" }, host: { listeners: { "focus": "onFocusIn()", "blur": "onFocusOut()", "keydown": "onKeyDown($event)" }, properties: { "attr.tabindex": "this.disabled ? -1 : tabIndex", "class.ngx-virtual-select-field-disabled": "disabled", "class.ngx-virtual-select-field-invalid": "errorState" }, classAttribute: "ngx-virtual-select-field" }, providers: [
+            {
+                provide: MatFormFieldControl,
+                useExisting: NgxVirtualSelectFieldComponent,
+            },
+            {
+                provide: NGX_VIRTUAL_SELECT_FIELD_OPTION_PARENT,
+                useExisting: NgxVirtualSelectFieldComponent,
+            },
+        ], queries: [{ propertyName: "optionFor", first: true, predicate: NgxVirtualSelectFieldOptionForDirective, descendants: true }, { propertyName: "customTrigger", first: true, predicate: NGX_VIRTUAL_SELECT_FIELD_TRIGGER, descendants: true }, { propertyName: "optionsQuery", predicate: NgxVirtualSelectFieldOptionComponent }], viewQueries: [{ propertyName: "cdkVirtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "cdkConnectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], exportAs: ["ngxVirtualSelectField"], ngImport: i0, template: "<div\n  class=\"ngx-virtual-select-field-trigger\"\n  cdk-overlay-origin\n  (click)=\"open()\"\n  #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\n  #trigger\n>\n  <div class=\"ngx-virtual-select-field-value\">\n    @if (empty) {\n      <span class=\"ngx-virtual-select-field-placeholder\">{{\n        placeholder\n      }}</span>\n    } @else {\n      <span>\n        @if (customTrigger) {\n          <ng-content select=\"ngx-virtual-select-field-trigger\"></ng-content>\n        } @else {\n          <span>{{ triggerValue$ | async }}</span>\n        }\n      </span>\n    }\n  </div>\n\n  <div class=\"ngx-virtual-select-field-arrow-wrapper\">\n    <div class=\"ngx-virtual-select-field-arrow\">\n      <!-- Use an inline SVG, because it works better than a CSS triangle in high contrast mode. -->\n      <svg\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        height=\"24px\"\n        focusable=\"false\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M7 10l5 5 5-5z\" />\n      </svg>\n    </div>\n  </div>\n</div>\n\n<ng-template\n  cdk-connected-overlay\n  cdkConnectedOverlayLockPosition\n  cdkConnectedOverlayHasBackdrop\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayOpen]=\"isPanelOpened()\"\n  [cdkConnectedOverlayOrigin]=\"preferredOverlayOrigin || fallbackOverlayOrigin\"\n  [cdkConnectedOverlayPositions]=\"POSITIONS\"\n  [cdkConnectedOverlayPanelClass]=\"overlayPanelClass\"\n  [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n  (attach)=\"onOverlayAttached()\"\n>\n  <!--\n    [attr.aria-multiselectable]=\"multiple\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"_getPanelAriaLabelledby()\"\n    [@transformPanel]=\"'showing'\"\n    (@transformPanel.done)=\"_panelDoneAnimatingStream.next($event.toState)\"\n    -->\n  <div class=\"ngx-virtual-select-field-panel {{ inheritedColorTheme }}\" [ngClass]=\"panelClass\">\n    @if (filterable) {\n      <div class=\"ngx-virtual-select-field-filter-wrapper\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"ngx-virtual-select-field-filter-field\">\n          <input\n            matInput\n            #filterInput\n            type=\"text\"\n            [placeholder]=\"filterPlaceholder\"\n            [value]=\"filterText()\"\n            (input)=\"onFilterInput($event)\"\n            (keydown)=\"onFilterKeyDown($event)\"\n          />\n        </mat-form-field>\n      </div>\n    }\n    <cdk-virtual-scroll-viewport\n      role=\"listbox\"\n      tabindex=\"-1\"\n      class=\"ngx-virtual-select-field-viewport\"\n      [style.--ngx-virtual-select-field__viewport-page-size]=\"maxPageSize\"\n      [style.--ngx-virtual-select-field__viewport-option-height.px]=\"optionHeight\"\n      [itemSize]=\"optionHeight\"\n      (scrolledIndexChange)=\"onScrolledIndexChange()\"\n      (keydown)=\"onKeyDown($event)\"\n    >\n      <div class=\"ngx-virtual-select-field-list-wrapper\">\n        <ng-container\n          *cdkVirtualFor=\"\n            let option of filteredOptions$ | async;\n            trackBy: optionTrackBy\n          \"\n        >\n          <ng-container\n            [ngTemplateOutlet]=\"optionFor.template\"\n            [ngTemplateOutletContext]=\"{ $implicit: option }\"\n          >\n          </ng-container>\n        </ng-container>\n      </div>\n    </cdk-virtual-scroll-viewport>\n  </div>\n</ng-template>\n", styles: [":host{color:var(--ngx-virtual-select-field-trigger-text-color);font-family:var(--ngx-virtual-select-field-trigger-font-family);line-height:var(--ngx-virtual-select-field-trigger-line-height);font-size:var(--ngx-virtual-select-field-trigger-font-size);font-weight:var(--ngx-virtual-select-field-trigger-font-weight);letter-spacing:var(--ngx-virtual-select-field-trigger-letter-spacing);outline:none}.ngx-virtual-select-field-trigger{display:inline-flex;align-items:center;cursor:pointer;position:relative;box-sizing:border-box;width:100%}:host-context(.ngx-virtual-select-field-disabled) .ngx-virtual-select-field-trigger{cursor:default;color:var(--ngx-virtual-select-field-trigger-text-color--disabled)}.ngx-virtual-select-field-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.ngx-virtual-select-field-placeholder{transition:var(--ngx-virtual-select-field-placeholder-transition);color:var(--ngx-virtual-select-field-placeholder-text-color)}._mat-animation-noopable .ngx-virtual-select-field-placeholder{transition:none}:host-context(.mat-form-field-hide-placeholder) .ngx-virtual-select-field-placeholder{color:transparent;-webkit-text-fill-color:transparent;transition:none;display:block}.ngx-virtual-select-field-placeholder:empty:before{content:\" \";white-space:pre;width:1px;display:inline-block}.ngx-virtual-select-field-arrow{width:calc(var(--ngx-virtual-select-field-arrow-size) * 2);height:var(--ngx-virtual-select-field-arrow-size);position:relative;color:var(--ngx-virtual-select-field-arrow-color--enabled)}:host-context(.ngx-virtual-select-field-invalid) .ngx-virtual-select-field-arrow{color:var(--ngx-virtual-select-field-arrow-color--invalid)}:host-context(.mat-focused):not(.ngx-virtual-select-field-invalid) .ngx-virtual-select-field-arrow{color:var(--ngx-virtual-select-field-arrow-color--focused)}:host-context(.ngx-virtual-select-field-disabled) .ngx-virtual-select-field-arrow{color:var(--ngx-virtual-select-field-arrow-color--disabled)}.ngx-virtual-select-field-arrow svg{fill:currentColor;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media(forced-colors:active){.ngx-virtual-select-field-arrow svg{fill:CanvasText}:host-context(.ngx-virtual-select-field-disabled) .ngx-virtual-select-field-arrow svg{fill:GrayText}}.ngx-virtual-select-field-arrow-wrapper{height:24px;flex-shrink:0;display:inline-flex;align-items:center}:host-context(.mat-form-field-appearance-fill) .ngx-virtual-select-field-arrow-wrapper{transform:translateY(-8px)}:host-context(.mat-form-field-appearance-fill .mdc-text-field--no-label) .ngx-virtual-select-field-arrow-wrapper{transform:none}.ngx-virtual-select-field-panel{width:100%;background:var(--ngx-virtual-select-field-panel-background);box-shadow:var(--ngx-virtual-select-field-panel-box-shadow);display:flex;flex-direction:column}@media(forced-colors:active){.ngx-virtual-select-field-panel{outline:solid 1px}}.ngx-virtual-select-field-filter-wrapper{padding:8px;border-bottom:1px solid var(--ngx-virtual-select-field-divider-color, rgba(0, 0, 0, .12));background:var(--ngx-virtual-select-field-panel-background)}.ngx-virtual-select-field-filter-field{width:100%;display:block}.ngx-virtual-select-field-viewport{width:100%;height:calc(var(--ngx-virtual-select-field__viewport-option-height) * var(--ngx-virtual-select-field__viewport-page-size) + var(--ngx-virtual-select-field-panel-list-wrapper-padding) * 2)}.ngx-virtual-select-field-list-wrapper{display:flex;flex-direction:column;padding-top:var(--ngx-virtual-select-field-panel-list-wrapper-padding);padding-bottom:var(--ngx-virtual-select-field-panel-list-wrapper-padding)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: NgxVirtualSelectFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-virtual-select-field', exportAs: 'ngxVirtualSelectField', standalone: true, imports: [CommonModule, OverlayModule, ScrollingModule, MatFormFieldModule, MatInputModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: MatFormFieldControl,
+                            useExisting: NgxVirtualSelectFieldComponent,
+                        },
+                        {
+                            provide: NGX_VIRTUAL_SELECT_FIELD_OPTION_PARENT,
+                            useExisting: NgxVirtualSelectFieldComponent,
+                        },
+                    ], host: {
+                        '[attr.tabindex]': 'this.disabled ? -1 : tabIndex',
+                        '(focus)': 'onFocusIn()',
+                        '(blur)': 'onFocusOut()',
+                        '(keydown)': 'onKeyDown($event)',
+                        class: 'ngx-virtual-select-field',
+                        '[class.ngx-virtual-select-field-disabled]': 'disabled',
+                        '[class.ngx-virtual-select-field-invalid]': 'errorState',
+                    }, template: "<div\n  class=\"ngx-virtual-select-field-trigger\"\n  cdk-overlay-origin\n  (click)=\"open()\"\n  #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\n  #trigger\n>\n  <div class=\"ngx-virtual-select-field-value\">\n    @if (empty) {\n      <span class=\"ngx-virtual-select-field-placeholder\">{{\n        placeholder\n      }}</span>\n    } @else {\n      <span>\n        @if (customTrigger) {\n          <ng-content select=\"ngx-virtual-select-field-trigger\"></ng-content>\n        } @else {\n          <span>{{ triggerValue$ | async }}</span>\n        }\n      </span>\n    }\n  </div>\n\n  <div class=\"ngx-virtual-select-field-arrow-wrapper\">\n    <div class=\"ngx-virtual-select-field-arrow\">\n      <!-- Use an inline SVG, because it works better than a CSS triangle in high contrast mode. -->\n      <svg\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        height=\"24px\"\n        focusable=\"false\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M7 10l5 5 5-5z\" />\n      </svg>\n    </div>\n  </div>\n</div>\n\n<ng-template\n  cdk-connected-overlay\n  cdkConnectedOverlayLockPosition\n  cdkConnectedOverlayHasBackdrop\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayOpen]=\"isPanelOpened()\"\n  [cdkConnectedOverlayOrigin]=\"preferredOverlayOrigin || fallbackOverlayOrigin\"\n  [cdkConnectedOverlayPositions]=\"POSITIONS\"\n  [cdkConnectedOverlayPanelClass]=\"overlayPanelClass\"\n  [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n  (attach)=\"onOverlayAttached()\"\n>\n  <!--\n    [attr.aria-multiselectable]=\"multiple\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"_getPanelAriaLabelledby()\"\n    [@transformPanel]=\"'showing'\"\n    (@transformPanel.done)=\"_panelDoneAnimatingStream.next($event.toState)\"\n    -->\n  <div class=\"ngx-virtual-select-field-panel {{ inheritedColorTheme }}\" [ngClass]=\"panelClass\">\n    @if (filterable) {\n      <div class=\"ngx-virtual-select-field-filter-wrapper\">\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"ngx-virtual-select-field-filter-field\">\n          <input\n            matInput\n            #filterInput\n            type=\"text\"\n            [placeholder]=\"filterPlaceholder\"\n            [value]=\"filterText()\"\n            (input)=\"onFilterInput($event)\"\n            (keydown)=\"onFilterKeyDown($event)\"\n          />\n        </mat-form-field>\n      </div>\n    }\n    <cdk-virtual-scroll-viewport\n      role=\"listbox\"\n      tabindex=\"-1\"\n      class=\"ngx-virtual-select-field-viewport\"\n      [style.--ngx-virtual-select-field__viewport-page-size]=\"maxPageSize\"\n      [style.--ngx-virtual-select-field__viewport-option-height.px]=\"optionHeight\"\n      [itemSize]=\"optionHeight\"\n      (scrolledIndexChange)=\"onScrolledIndexChange()\"\n      (keydown)=\"onKeyDown($event)\"\n    >\n      <div class=\"ngx-virtual-select-field-list-wrapper\">\n        <ng-container\n          *cdkVirtualFor=\"\n            let option of filteredOptions$ | async;\n            trackBy: optionTrackBy\n          \"\n        >\n          <ng-container\n            [ngTemplateOutlet]=\"optionFor.template\"\n            [ngTemplateOutletContext]=\"{ $implicit: option }\"\n          >\n          </ng-container>\n        </ng-container>\n      </div>\n    </cdk-virtual-scroll-viewport>\n  </div>\n</ng-template>\n", styles: [":host{color:var(--ngx-virtual-select-field-trigger-text-color);font-family:var(--ngx-virtual-select-field-trigger-font-family);line-height:var(--ngx-virtual-select-field-trigger-line-height);font-size:var(--ngx-virtual-select-field-trigger-font-size);font-weight:var(--ngx-virtual-select-field-trigger-font-weight);letter-spacing:var(--ngx-virtual-select-field-trigger-letter-spacing);outline:none}.ngx-virtual-select-field-trigger{display:inline-flex;align-items:center;cursor:pointer;position:relative;box-sizing:border-box;width:100%}:host-context(.ngx-virtual-select-field-disabled) .ngx-virtual-select-field-trigger{cursor:default;color:var(--ngx-virtual-select-field-trigger-text-color--disabled)}.ngx-virtual-select-field-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.ngx-virtual-select-field-placeholder{transition:var(--ngx-virtual-select-field-placeholder-transition);color:var(--ngx-virtual-select-field-placeholder-text-color)}._mat-animation-noopable .ngx-virtual-select-field-placeholder{transition:none}:host-context(.mat-form-field-hide-placeholder) .ngx-virtual-select-field-placeholder{color:transparent;-webkit-text-fill-color:transparent;transition:none;display:block}.ngx-virtual-select-field-placeholder:empty:before{content:\" \";white-space:pre;width:1px;display:inline-block}.ngx-virtual-select-field-arrow{width:calc(var(--ngx-virtual-select-field-arrow-size) * 2);height:var(--ngx-virtual-select-field-arrow-size);position:relative;color:var(--ngx-virtual-select-field-arrow-color--enabled)}:host-context(.ngx-virtual-select-field-invalid) .ngx-virtual-select-field-arrow{color:var(--ngx-virtual-select-field-arrow-color--invalid)}:host-context(.mat-focused):not(.ngx-virtual-select-field-invalid) .ngx-virtual-select-field-arrow{color:var(--ngx-virtual-select-field-arrow-color--focused)}:host-context(.ngx-virtual-select-field-disabled) .ngx-virtual-select-field-arrow{color:var(--ngx-virtual-select-field-arrow-color--disabled)}.ngx-virtual-select-field-arrow svg{fill:currentColor;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media(forced-colors:active){.ngx-virtual-select-field-arrow svg{fill:CanvasText}:host-context(.ngx-virtual-select-field-disabled) .ngx-virtual-select-field-arrow svg{fill:GrayText}}.ngx-virtual-select-field-arrow-wrapper{height:24px;flex-shrink:0;display:inline-flex;align-items:center}:host-context(.mat-form-field-appearance-fill) .ngx-virtual-select-field-arrow-wrapper{transform:translateY(-8px)}:host-context(.mat-form-field-appearance-fill .mdc-text-field--no-label) .ngx-virtual-select-field-arrow-wrapper{transform:none}.ngx-virtual-select-field-panel{width:100%;background:var(--ngx-virtual-select-field-panel-background);box-shadow:var(--ngx-virtual-select-field-panel-box-shadow);display:flex;flex-direction:column}@media(forced-colors:active){.ngx-virtual-select-field-panel{outline:solid 1px}}.ngx-virtual-select-field-filter-wrapper{padding:8px;border-bottom:1px solid var(--ngx-virtual-select-field-divider-color, rgba(0, 0, 0, .12));background:var(--ngx-virtual-select-field-panel-background)}.ngx-virtual-select-field-filter-field{width:100%;display:block}.ngx-virtual-select-field-viewport{width:100%;height:calc(var(--ngx-virtual-select-field__viewport-option-height) * var(--ngx-virtual-select-field__viewport-page-size) + var(--ngx-virtual-select-field-panel-list-wrapper-padding) * 2)}.ngx-virtual-select-field-list-wrapper{display:flex;flex-direction:column;padding-top:var(--ngx-virtual-select-field-panel-list-wrapper-padding);padding-bottom:var(--ngx-virtual-select-field-panel-list-wrapper-padding)}\n"] }]
+        }], ctorParameters: () => [{ type: i4.MatFormField, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MAT_FORM_FIELD]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [NGX_VIRTUAL_SELECT_FIELD_CONFIG]
+                }] }], propDecorators: { userAriaDescribedBy: [{
+                type: Input,
+                args: ['aria-describedby']
+            }], panelWidth: [{
+                type: Input
+            }], optionHeight: [{
+                type: Input,
+                args: [{
+                        transform: (value) => numberAttribute(value, OPTION_HEIGHT),
+                    }]
+            }], panelViewportPageSize: [{
+                type: Input,
+                args: [{
+                        transform: (value) => numberAttribute(value, PANEL_VIEWPORT_PAGE_SIZE),
+                    }]
+            }], multiple: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], tabIndex: [{
+                type: Input,
+                args: [{
+                        transform: (value) => numberAttribute(value, 0),
+                    }]
+            }], typeaheadDebounceInterval: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], panelClass: [{
+                type: Input
+            }], filterable: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], filterPlaceholder: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], required: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], cdkVirtualScrollViewport: [{
+                type: ViewChild,
+                args: [CdkVirtualScrollViewport, { static: false }]
+            }], cdkConnectedOverlay: [{
+                type: ViewChild,
+                args: [CdkConnectedOverlay, { static: false }]
+            }], filterInput: [{
+                type: ViewChild,
+                args: ['filterInput', { static: false }]
+            }], optionFor: [{
+                type: ContentChild,
+                args: [NgxVirtualSelectFieldOptionForDirective]
+            }], customTrigger: [{
+                type: ContentChild,
+                args: [NGX_VIRTUAL_SELECT_FIELD_TRIGGER]
+            }], optionsQuery: [{
+                type: ContentChildren,
+                args: [NgxVirtualSelectFieldOptionComponent]
+            }] } });
+class NgxVirtualSelectFieldChange {
+    constructor(source, value) {
+        this.source = source;
+        this.value = value;
+    }
+}
+
+const NgxVirtualSelectFieldBundle = [
+    NgxVirtualSelectFieldComponent,
+    NgxVirtualSelectFieldOptionForDirective,
+    NgxVirtualSelectFieldTriggerDirective,
+    NgxVirtualSelectFieldOptionComponent,
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NGX_VIRTUAL_SELECT_FIELD_CONFIG, NgxVirtualSelectFieldBundle, NgxVirtualSelectFieldChange, NgxVirtualSelectFieldComponent, NgxVirtualSelectFieldOptionComponent, NgxVirtualSelectFieldOptionForDirective, NgxVirtualSelectFieldTriggerDirective };
+//# sourceMappingURL=ngx-virtual-select-field-filterable.mjs.map