ngx-virtual-select-field-filterable 1.4.8 → 1.4.10

package/index.d.ts

@@ -1 +1,318 @@
-export * from './lib/virtual-select-field';
+import * as i0 from '@angular/core';
+import { TemplateRef, EventEmitter, ElementRef, OnInit, OnDestroy, AfterContentInit, QueryList, Signal, TrackByFunction, InjectionToken } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { ListKeyManagerOption, Highlightable } from '@angular/cdk/a11y';
+import * as _angular_cdk_overlay_module_d from '@angular/cdk/overlay-module.d';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
+import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
+import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
+import { MatFormFieldControl, MatFormField } from '@angular/material/form-field';
+
+interface NgxVirtualSelectFieldOptionModel<TValue> extends ListKeyManagerOption {
+    /**
+     * The visible text of the option.
+     */
+    label: string;
+    /**
+     * The value of the option.
+     */
+    value: TValue;
+}
+interface NgxVirtualSelectFieldOptionTemplateContextModel<TValue> {
+    $implicit: NgxVirtualSelectFieldOptionModel<TValue>;
+}
+
+declare class NgxVirtualSelectFieldOptionForDirective<TValue> {
+    template: TemplateRef<NgxVirtualSelectFieldOptionTemplateContextModel<TValue>>;
+    /**
+     * The options collection to render.
+     * @required
+     */
+    set options(options: NgxVirtualSelectFieldOptionModel<TValue>[]);
+    options$: BehaviorSubject<NgxVirtualSelectFieldOptionModel<TValue>[]>;
+    constructor(template: TemplateRef<NgxVirtualSelectFieldOptionTemplateContextModel<TValue>>);
+    static ngTemplateContextGuard<TValue>(_dir: NgxVirtualSelectFieldOptionForDirective<TValue>, ctx: unknown): ctx is NgxVirtualSelectFieldOptionTemplateContextModel<TValue>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxVirtualSelectFieldOptionForDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxVirtualSelectFieldOptionForDirective<any>, "[ngxVirtualSelectFieldOptionFor]", never, { "options": { "alias": "ngxVirtualSelectFieldOptionForOf"; "required": true; }; }, {}, never, never, true, never>;
+}
+
+declare class NgxVirtualSelectFieldTriggerDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxVirtualSelectFieldTriggerDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxVirtualSelectFieldTriggerDirective, "ngx-virtual-select-field-trigger", never, {}, {}, never, never, true, never>;
+}
+
+interface NgxVirtualSelectFieldOptionParent {
+    multiple?: boolean;
+}
+
+declare class NgxVirtualSelectFieldOptionComponent<TValue> implements Highlightable {
+    private _optionParent;
+    private _elementRef;
+    /**
+     * The value of the option.
+     * @required
+     */
+    value: TValue;
+    /**
+     * Whether the option is disabled.
+     */
+    disabled: boolean;
+    selectedChange: EventEmitter<NgxVirtualSelectFieldOptionSelectionChangeEvent<TValue>>;
+    protected readonly multiple: boolean;
+    protected readonly active: i0.WritableSignal<boolean>;
+    protected readonly selected: i0.WritableSignal<boolean>;
+    protected readonly hostNativeElement: HTMLElement;
+    constructor(_optionParent: NgxVirtualSelectFieldOptionParent, _elementRef: ElementRef<HTMLElement>);
+    setActiveStyles(): void;
+    setInactiveStyles(): void;
+    deselect(): void;
+    select(): void;
+    protected onClick(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxVirtualSelectFieldOptionComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgxVirtualSelectFieldOptionComponent<any>, "ngx-virtual-select-field-option", never, { "value": { "alias": "value"; "required": true; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "selectedChange": "selectedChange"; }, never, ["*"], true, never>;
+    static ngAcceptInputType_disabled: unknown;
+}
+interface NgxVirtualSelectFieldOptionSelectionChangeEvent<TValue> {
+    source: NgxVirtualSelectFieldOptionComponent<TValue>;
+    value: TValue;
+    selected: boolean;
+}
+
+interface NgxVirtualSelectFieldConfig {
+    /**
+     * CSS class to add to the overlay element
+     */
+    overlayPanelClass?: string | string[];
+    /**
+     * Width for overlay panel
+     */
+    panelWidth?: string | number;
+    /**
+     * Height for an option element
+     */
+    optionHeight?: number;
+    /**
+     * Amount of visible items in list
+     */
+    panelViewportPageSize?: number;
+    /**
+     * Show select all checkbox when multiple selection is enabled and filterable is true
+     * @default true
+     */
+    showSelectAll?: boolean;
+}
+
+declare class NgxVirtualSelectFieldComponent<TValue> implements OnInit, OnDestroy, AfterContentInit, MatFormFieldControl<TValue[] | TValue>, ControlValueAccessor, NgxVirtualSelectFieldOptionParent {
+    private _parentFormField;
+    private _defaultOptions?;
+    userAriaDescribedBy: string;
+    /**
+     * Width for overlay panel
+     * @default 'auto'
+     */
+    panelWidth: string | number | null;
+    /**
+     * Height for an option element
+     * @default 48
+     */
+    optionHeight: number;
+    /**
+     * Amount of visible items in list
+     * @default 8
+     */
+    panelViewportPageSize: number;
+    /**
+     * Enable multiple selection
+     * @default false
+     */
+    multiple: boolean;
+    /**
+     * Tab index for keyboard navigation
+     * @default 0
+     */
+    tabIndex: number;
+    /**
+     * Milliseconds to wait before navigating to active element after keyboard search
+     * @default 300
+     */
+    typeaheadDebounceInterval: number;
+    /**
+     * CSS class to be added to the panel element
+     * @default none
+     */
+    panelClass: string | string[] | null;
+    /**
+     * Enable filtering of options
+     * @default false
+     */
+    filterable: boolean;
+    /**
+     * Placeholder text for the filter input
+     * @default 'Search...'
+     */
+    filterPlaceholder: string;
+    /**
+     * Show clear button in filter input
+     * @default true
+     */
+    filterClearable: boolean;
+    /**
+     * Show clear button in select trigger
+     * @default false
+     */
+    clearable: boolean;
+    /**
+     * Show loading spinner
+     * @default false
+     */
+    loading: boolean;
+    /**
+     * Show select all checkbox when multiple selection is enabled and filterable is true
+     * @default true
+     */
+    showSelectAll: boolean;
+    /**
+     * Value of the select field
+     * @default null
+     */
+    set value(value: TValue[] | TValue | null);
+    private _value;
+    /**
+     * Placeholder for the select field
+     * @default none
+     */
+    set placeholder(placeholder: string);
+    get placeholder(): string;
+    private _placeholder;
+    /**
+     * Define if fields is required
+     * @default false
+     */
+    set required(req: boolean);
+    get required(): boolean;
+    private _required;
+    /**
+     * Define if field is disabled
+     * @default false
+     */
+    set disabled(value: boolean);
+    get disabled(): boolean;
+    private _disabled;
+    /**
+     * Value change event
+     */
+    valueChange: i0.OutputEmitterRef<any>;
+    /**
+     * Selection change event
+     * Emits after value change and form control update
+     */
+    selectionChange: i0.OutputEmitterRef<NgxVirtualSelectFieldChange<TValue>>;
+    cdkVirtualScrollViewport: CdkVirtualScrollViewport;
+    cdkConnectedOverlay: CdkConnectedOverlay;
+    filterInput: ElementRef<HTMLInputElement> | undefined;
+    optionFor: NgxVirtualSelectFieldOptionForDirective<TValue>;
+    customTrigger: NgxVirtualSelectFieldTriggerDirective | null;
+    optionsQuery: QueryList<NgxVirtualSelectFieldOptionComponent<TValue>> | null;
+    readonly id: string;
+    readonly controlType = "ngx-virtual-select-field";
+    readonly ngControl: NgControl | null;
+    autofilled: boolean;
+    protected readonly POSITIONS: _angular_cdk_overlay_module_d.ConnectedPosition[];
+    protected readonly overlayPanelClass: string | string[];
+    protected readonly inheritedColorTheme: string;
+    protected readonly overlayWidth: Signal<string | number>;
+    protected readonly isPanelOpened: i0.WritableSignal<boolean>;
+    protected readonly filterText: i0.WritableSignal<string>;
+    protected readonly options: i0.WritableSignal<NgxVirtualSelectFieldOptionModel<TValue>[]>;
+    protected readonly filteredOptions: Signal<NgxVirtualSelectFieldOptionModel<TValue>[]>;
+    protected readonly hasOptionsToFilter: Signal<boolean>;
+    protected readonly hasNoFilteredResults: Signal<boolean>;
+    protected triggerValue$: Observable<string> | null;
+    protected preferredOverlayOrigin: CdkOverlayOrigin | ElementRef | undefined;
+    private readonly _changeDetectorRef;
+    private readonly _destroyRef;
+    private readonly _elRef;
+    private readonly _stateChanges;
+    private readonly _scrolledIndexChange;
+    private _onChange;
+    private _onTouched;
+    private _selectionModel;
+    private _keyManager;
+    constructor(_parentFormField: MatFormField, _defaultOptions?: NgxVirtualSelectFieldConfig | undefined);
+    private createOverlayWidthSignal;
+    private resolveOverlayWidth;
+    get shouldLabelFloat(): boolean;
+    get empty(): boolean;
+    get stateChanges(): Observable<void>;
+    get errorState(): boolean;
+    get focused(): boolean;
+    private _focused;
+    protected get maxPageSize(): number;
+    ngOnInit(): void;
+    ngAfterContentInit(): void;
+    private updateOptionSelection;
+    ngOnDestroy(): void;
+    writeValue(value: TValue[]): void;
+    registerOnChange(fn: (value: TValue[] | TValue) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    setDescribedByIds(ids: string[]): void;
+    onContainerClick(): void;
+    onOverlayAttached(): void;
+    private navigateToFirstSelectedOption;
+    protected onFocusIn(): void;
+    protected onFocusOut(): void;
+    protected optionTrackBy: TrackByFunction<NgxVirtualSelectFieldOptionModel<TValue>>;
+    protected onScrolledIndexChange(): void;
+    protected onFilterInput(event: Event): void;
+    protected onFilterClear(): void;
+    protected onClear(event: Event): void;
+    protected isAllSelected(): boolean;
+    protected isIndeterminate(): boolean;
+    protected onSelectAllChange(): void;
+    protected onFilterKeyDown(event: KeyboardEvent): void;
+    protected open(): void;
+    protected close(): void;
+    protected onKeyDown(event: KeyboardEvent): void;
+    private doPanelOpenedKeydown;
+    private toggleAllOptions;
+    private doPanelClosedKeydown;
+    private initListKeyManager;
+    private normalizeKeyManagerOptions;
+    private updateActiveOptionComponent;
+    private shouldScrollToActiveItem;
+    private setActiveOptionComponentByValue;
+    private focus;
+    private selectOptionByValue;
+    private updateRenderedOptionsState;
+    private findOptionByValue;
+    private emitValue;
+    private assertIsDefined;
+    private static nextId;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxVirtualSelectFieldComponent<any>, [{ optional: true; }, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgxVirtualSelectFieldComponent<any>, "ngx-virtual-select-field", ["ngxVirtualSelectField"], { "userAriaDescribedBy": { "alias": "aria-describedby"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "optionHeight": { "alias": "optionHeight"; "required": false; }; "panelViewportPageSize": { "alias": "panelViewportPageSize"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "typeaheadDebounceInterval": { "alias": "typeaheadDebounceInterval"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "filterable": { "alias": "filterable"; "required": false; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; }; "filterClearable": { "alias": "filterClearable"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "showSelectAll": { "alias": "showSelectAll"; "required": false; }; "value": { "alias": "value"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "valueChange": "valueChange"; "selectionChange": "selectionChange"; }, ["optionFor", "customTrigger", "optionsQuery"], ["ngx-virtual-select-field-trigger"], true, never>;
+    static ngAcceptInputType_optionHeight: unknown;
+    static ngAcceptInputType_panelViewportPageSize: unknown;
+    static ngAcceptInputType_multiple: unknown;
+    static ngAcceptInputType_tabIndex: unknown;
+    static ngAcceptInputType_typeaheadDebounceInterval: unknown;
+    static ngAcceptInputType_filterable: unknown;
+    static ngAcceptInputType_filterClearable: unknown;
+    static ngAcceptInputType_clearable: unknown;
+    static ngAcceptInputType_loading: unknown;
+    static ngAcceptInputType_showSelectAll: unknown;
+    static ngAcceptInputType_required: unknown;
+    static ngAcceptInputType_disabled: unknown;
+}
+declare class NgxVirtualSelectFieldChange<TValue> {
+    source: NgxVirtualSelectFieldComponent<TValue>;
+    value: any;
+    constructor(source: NgxVirtualSelectFieldComponent<TValue>, value: any);
+}
+
+declare const NGX_VIRTUAL_SELECT_FIELD_CONFIG: InjectionToken<NgxVirtualSelectFieldConfig>;
+
+declare const NgxVirtualSelectFieldBundle: readonly [typeof NgxVirtualSelectFieldComponent, typeof NgxVirtualSelectFieldOptionForDirective, typeof NgxVirtualSelectFieldTriggerDirective, typeof NgxVirtualSelectFieldOptionComponent];
+
+export { NGX_VIRTUAL_SELECT_FIELD_CONFIG, NgxVirtualSelectFieldBundle, NgxVirtualSelectFieldChange, NgxVirtualSelectFieldComponent, NgxVirtualSelectFieldOptionComponent, NgxVirtualSelectFieldOptionForDirective, NgxVirtualSelectFieldTriggerDirective };
+export type { NgxVirtualSelectFieldOptionModel };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-virtual-select-field-filterable",
-  "version": "1.4.8",
+  "version": "1.4.10",
   "description": "Virtual Select Field for Angular Material",
   "keywords": [
     "angular",
@@ -18,11 +18,11 @@
     "node": "^18.13.0 || >=20.9.0"
   },
   "peerDependencies": {
-    "@angular/common": "^19.0.0",
-    "@angular/core": "^19.0.0",
-    "@angular/forms": "^19.0.0",
-    "@angular/cdk": "^19.0.0",
-    "@angular/material": "^19.0.0",
+    "@angular/common": "^20.0.0",
+    "@angular/core": "^20.0.0",
+    "@angular/forms": "^20.0.0",
+    "@angular/cdk": "^20.0.0",
+    "@angular/material": "^20.0.0",
     "rxjs": "^7.4.0"
   },
   "dependencies": {

package/lib/virtual-select-field/index.d.ts

@@ -1,10 +0,0 @@
-import { NgxVirtualSelectFieldOptionForDirective } from './virtual-select-field-option-for';
-import { NgxVirtualSelectFieldComponent } from './virtual-select-field.component';
-import { NgxVirtualSelectFieldTriggerDirective } from './virtual-select-field-trigger';
-import { NgxVirtualSelectFieldOptionComponent } from './virtual-select-field-option';
-export { NgxVirtualSelectFieldOptionForDirective, NgxVirtualSelectFieldOptionModel, } from './virtual-select-field-option-for';
-export { NgxVirtualSelectFieldComponent, NgxVirtualSelectFieldChange, } from './virtual-select-field.component';
-export { NgxVirtualSelectFieldTriggerDirective } from './virtual-select-field-trigger';
-export { NgxVirtualSelectFieldOptionComponent } from './virtual-select-field-option';
-export { NGX_VIRTUAL_SELECT_FIELD_CONFIG } from './virtual-select-field.constants';
-export declare const NgxVirtualSelectFieldBundle: readonly [typeof NgxVirtualSelectFieldComponent, typeof NgxVirtualSelectFieldOptionForDirective, typeof NgxVirtualSelectFieldTriggerDirective, typeof NgxVirtualSelectFieldOptionComponent];

package/lib/virtual-select-field/keycodes.d.ts

@@ -1,7 +0,0 @@
-export declare const ARROW_DOWN_KEY = "ArrowDown";
-export declare const ARROW_UP_KEY = "ArrowUp";
-export declare const ARROW_RIGHT_KEY = "ArrowRight";
-export declare const ARROW_LEFT_KEY = "ArrowLeft";
-export declare const ENTER_CODE = "Enter";
-export declare const SPACE_CODE = "Space";
-export declare const KEY_A_CODE = "KeyA";

package/lib/virtual-select-field/virtual-select-field-option/index.d.ts

@@ -1,3 +0,0 @@
-export { NgxVirtualSelectFieldOptionComponent } from './virtual-select-field-option.component';
-export { NgxVirtualSelectFieldOptionParent, NGX_VIRTUAL_SELECT_FIELD_OPTION_PARENT, } from './virtual-select-field-option.models';
-export { NgxVirtualSelectFieldOptionSelectionChangeEvent } from './virtual-select-field-option.component';

package/lib/virtual-select-field/virtual-select-field-option/virtual-select-field-option.component.d.ts

@@ -1,36 +0,0 @@
-import { EventEmitter, ElementRef } from '@angular/core';
-import { NgxVirtualSelectFieldOptionParent } from './virtual-select-field-option.models';
-import { Highlightable } from '@angular/cdk/a11y';
-import * as i0 from "@angular/core";
-export declare class NgxVirtualSelectFieldOptionComponent<TValue> implements Highlightable {
-    private _optionParent;
-    private _elementRef;
-    /**
-     * The value of the option.
-     * @required
-     */
-    value: TValue;
-    /**
-     * Whether the option is disabled.
-     */
-    disabled: boolean;
-    selectedChange: EventEmitter<NgxVirtualSelectFieldOptionSelectionChangeEvent<TValue>>;
-    protected readonly multiple: boolean;
-    protected readonly active: import("@angular/core").WritableSignal<boolean>;
-    protected readonly selected: import("@angular/core").WritableSignal<boolean>;
-    protected readonly hostNativeElement: HTMLElement;
-    constructor(_optionParent: NgxVirtualSelectFieldOptionParent, _elementRef: ElementRef<HTMLElement>);
-    setActiveStyles(): void;
-    setInactiveStyles(): void;
-    deselect(): void;
-    select(): void;
-    protected onClick(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgxVirtualSelectFieldOptionComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgxVirtualSelectFieldOptionComponent<any>, "ngx-virtual-select-field-option", never, { "value": { "alias": "value"; "required": true; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "selectedChange": "selectedChange"; }, never, ["*"], true, never>;
-    static ngAcceptInputType_disabled: unknown;
-}
-export interface NgxVirtualSelectFieldOptionSelectionChangeEvent<TValue> {
-    source: NgxVirtualSelectFieldOptionComponent<TValue>;
-    value: TValue;
-    selected: boolean;
-}

package/lib/virtual-select-field/virtual-select-field-option/virtual-select-field-option.models.d.ts

@@ -1,5 +0,0 @@
-import { InjectionToken } from '@angular/core';
-export interface NgxVirtualSelectFieldOptionParent {
-    multiple?: boolean;
-}
-export declare const NGX_VIRTUAL_SELECT_FIELD_OPTION_PARENT: InjectionToken<NgxVirtualSelectFieldOptionParent>;

package/lib/virtual-select-field/virtual-select-field-option-for/index.d.ts

@@ -1,2 +0,0 @@
-export { NgxVirtualSelectFieldOptionForDirective } from './virtual-select-field-option-for.directive';
-export { NgxVirtualSelectFieldOptionModel } from './virtual-select-field-option-for.models';

package/lib/virtual-select-field/virtual-select-field-option-for/virtual-select-field-option-for.directive.d.ts

@@ -1,17 +0,0 @@
-import { TemplateRef } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
-import { NgxVirtualSelectFieldOptionModel, NgxVirtualSelectFieldOptionTemplateContextModel } from './virtual-select-field-option-for.models';
-import * as i0 from "@angular/core";
-export declare class NgxVirtualSelectFieldOptionForDirective<TValue> {
-    template: TemplateRef<NgxVirtualSelectFieldOptionTemplateContextModel<TValue>>;
-    /**
-     * The options collection to render.
-     * @required
-     */
-    set options(options: NgxVirtualSelectFieldOptionModel<TValue>[]);
-    options$: BehaviorSubject<NgxVirtualSelectFieldOptionModel<TValue>[]>;
-    constructor(template: TemplateRef<NgxVirtualSelectFieldOptionTemplateContextModel<TValue>>);
-    static ngTemplateContextGuard<TValue>(_dir: NgxVirtualSelectFieldOptionForDirective<TValue>, ctx: unknown): ctx is NgxVirtualSelectFieldOptionTemplateContextModel<TValue>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgxVirtualSelectFieldOptionForDirective<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxVirtualSelectFieldOptionForDirective<any>, "[ngxVirtualSelectFieldOptionFor]", never, { "options": { "alias": "ngxVirtualSelectFieldOptionForOf"; "required": true; }; }, {}, never, never, true, never>;
-}

package/lib/virtual-select-field/virtual-select-field-option-for/virtual-select-field-option-for.models.d.ts

@@ -1,14 +0,0 @@
-import { ListKeyManagerOption } from '@angular/cdk/a11y';
-export interface NgxVirtualSelectFieldOptionModel<TValue> extends ListKeyManagerOption {
-    /**
-     * The visible text of the option.
-     */
-    label: string;
-    /**
-     * The value of the option.
-     */
-    value: TValue;
-}
-export interface NgxVirtualSelectFieldOptionTemplateContextModel<TValue> {
-    $implicit: NgxVirtualSelectFieldOptionModel<TValue>;
-}

package/lib/virtual-select-field/virtual-select-field-trigger/index.d.ts

@@ -1 +0,0 @@
-export { NgxVirtualSelectFieldTriggerDirective, NGX_VIRTUAL_SELECT_FIELD_TRIGGER, } from './virtual-select-field-trigger.directive';

package/lib/virtual-select-field/virtual-select-field-trigger/virtual-select-field-trigger.directive.d.ts

@@ -1,7 +0,0 @@
-import { InjectionToken } from '@angular/core';
-import * as i0 from "@angular/core";
-export declare const NGX_VIRTUAL_SELECT_FIELD_TRIGGER: InjectionToken<NgxVirtualSelectFieldTriggerDirective>;
-export declare class NgxVirtualSelectFieldTriggerDirective {
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgxVirtualSelectFieldTriggerDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxVirtualSelectFieldTriggerDirective, "ngx-virtual-select-field-trigger", never, {}, {}, never, never, true, never>;
-}