@ng-matero/ng-select 0.3.0 → 0.4.1

package/index.d.ts

@@ -13,9 +13,9 @@ interface NgOptionItem {
     label?: string;
     value?: string | any;
     parent?: NgOptionItem | null;
-    children?: NgOptionItem[];
+    children?: NgOptionItem[] | null;
 }
-type DropdownPosition = 'top' | 'right' | 'bottom' | 'left' | 'auto';
+type DropdownPanelPosition = 'top' | 'right' | 'bottom' | 'left' | 'auto';
 type AddTagFn = (term: string) => any | Promise<any>;
 type CompareWithFn = (a: any, b: any) => boolean;
 type GroupValueFn = (key: string | any, children: any[]) => string | any;
@@ -31,23 +31,23 @@ interface ScrollEvent {
 }
 
 declare class NgDropdownPanel implements OnInit, OnChanges, OnDestroy {
+    listboxId: string;
     items: NgOptionItem[];
     markedItem?: NgOptionItem;
-    position: DropdownPosition;
+    position: DropdownPanelPosition;
     appendTo?: string;
     bufferAmount: number;
     virtualScroll: boolean;
     headerTemplate?: TemplateRef<any>;
     footerTemplate?: TemplateRef<any>;
     filterValue: string | null;
-    ariaLabelDropdown: string | null;
     update: EventEmitter<NgOptionItem[]>;
     scroll: EventEmitter<ScrollEvent>;
     scrollToEnd: EventEmitter<void>;
     outsideClick: EventEmitter<void>;
-    contentElementRef: ElementRef<HTMLElement>;
-    scrollElementRef: ElementRef<HTMLElement>;
-    paddingElementRef: ElementRef<HTMLElement>;
+    scrollHostElRef: ElementRef<HTMLElement>;
+    scrollContentElRef: ElementRef<HTMLElement>;
+    scrollSpacerElRef: ElementRef<HTMLElement>;
     private _document;
     private _renderer;
     private _zone;
@@ -55,15 +55,15 @@ declare class NgDropdownPanel implements OnInit, OnChanges, OnDestroy {
     private _panelUtils;
     private readonly _destroy$;
     private readonly _dropdown;
-    private _virtualPadding;
-    private _scrollablePanel;
-    private _contentPanel;
     private _select;
     private _parent;
+    private _scrollHost;
+    private _scrollContent;
+    private _scrollSpacer;
     private _scrollToEndFired;
     private _updateScrollHeight;
     private _lastScrollPosition;
-    get currentPosition(): DropdownPosition;
+    get currentPosition(): DropdownPanelPosition;
     private _currentPosition;
     private get itemsLength();
     private set itemsLength(value);
@@ -96,7 +96,7 @@ declare class NgDropdownPanel implements OnInit, OnChanges, OnDestroy {
     private _updateYPosition;
     private _setupMousedownListener;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDropdownPanel, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDropdownPanel, "ng-dropdown-panel", never, { "items": { "alias": "items"; "required": false; }; "markedItem": { "alias": "markedItem"; "required": false; }; "position": { "alias": "position"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; }; "bufferAmount": { "alias": "bufferAmount"; "required": false; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; }; "footerTemplate": { "alias": "footerTemplate"; "required": false; }; "filterValue": { "alias": "filterValue"; "required": false; }; "ariaLabelDropdown": { "alias": "ariaLabelDropdown"; "required": false; }; }, { "update": "update"; "scroll": "scroll"; "scrollToEnd": "scrollToEnd"; "outsideClick": "outsideClick"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgDropdownPanel, "ng-dropdown-panel", never, { "listboxId": { "alias": "listboxId"; "required": false; }; "items": { "alias": "items"; "required": false; }; "markedItem": { "alias": "markedItem"; "required": false; }; "position": { "alias": "position"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; }; "bufferAmount": { "alias": "bufferAmount"; "required": false; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; }; "footerTemplate": { "alias": "footerTemplate"; "required": false; }; "filterValue": { "alias": "filterValue"; "required": false; }; }, { "update": "update"; "scroll": "scroll"; "scrollToEnd": "scrollToEnd"; "outsideClick": "outsideClick"; }, never, ["*"], true, never>;
     static ngAcceptInputType_virtualScroll: unknown;
 }
 
@@ -228,26 +228,26 @@ declare class NgSelect implements OnDestroy, OnChanges, OnInit, AfterViewInit, C
     readonly autoFocus: string | null;
     readonly classes: string | null;
     _classList: Record<string, boolean>;
-    bindLabel?: string;
-    bindValue?: string;
-    placeholder?: string;
+    _uid: string;
+    bindLabel: string | undefined;
+    bindValue: string | undefined;
+    placeholder: string | undefined;
     fixedPlaceholder: boolean;
-    appendTo?: string;
-    dropdownPosition: DropdownPosition;
+    appendTo: string | undefined;
+    panelPosition: DropdownPanelPosition;
     readonly: boolean;
     multiple: boolean;
     searchable: boolean;
     clearable: boolean;
-    clearAllText?: string;
-    tabFocusOnClearButton?: boolean;
+    clearOnBackspace: boolean;
+    clearAllText: string;
     loading: boolean;
-    loadingText?: string;
+    loadingText: string;
     closeOnSelect: boolean;
-    clearOnBackspace: boolean;
     hideSelected: boolean;
     selectOnTab: boolean;
-    openOnEnter?: boolean;
-    virtualScroll?: boolean;
+    openOnEnter: boolean;
+    virtualScroll: boolean;
     bufferAmount: number;
     selectableGroup: boolean;
     selectableGroupAsModel: boolean;
@@ -258,25 +258,26 @@ declare class NgSelect implements OnDestroy, OnChanges, OnInit, AfterViewInit, C
     markFirst: boolean;
     preventToggleOnRightClick: boolean;
     addTag: boolean | AddTagFn;
-    addTagText?: string;
-    notFoundText?: string;
+    addTagText: string;
+    notFoundText: string;
     typeahead?: Subject<string>;
-    typeToSearchText?: string;
+    typeToSearchText: string;
     groupBy?: string | ((value: any) => any);
     groupValue?: GroupValueFn;
     searchFn: SearchFn | null;
     keyDownFn: (_: KeyboardEvent) => boolean;
     trackByFn: TrackByFn | null;
-    appearance?: string;
+    appearance: string;
     tabIndex?: number;
-    labelForId: string | null;
-    ariaLabel?: string;
-    ariaLabelledby?: string;
-    ariaDescribedby?: string;
-    ariaLabelDropdown: string;
+    ariaLabel?: string | null;
+    ariaLabelledby?: string | null;
+    ariaDescribedby?: string | null;
     inputAttrs: Record<string, string>;
     isOpen?: boolean;
     set panelClass(value: string | string[] | Record<string, any> | undefined);
+    get inputId(): string | null | undefined;
+    set inputId(value: string | null | undefined);
+    private _inputId?;
     get items(): readonly any[] | null | undefined;
     set items(value: readonly any[] | null | undefined);
     private _items;
@@ -287,10 +288,10 @@ declare class NgSelect implements OnDestroy, OnChanges, OnInit, AfterViewInit, C
     private _compareWith;
     get clearSearchOnAdd(): boolean | undefined;
     set clearSearchOnAdd(value: boolean | undefined);
-    private _clearSearchOnAdd?;
+    private _clearSearchOnAdd;
     get deselectOnClick(): boolean | undefined;
     set deselectOnClick(value: boolean | undefined);
-    private _deselectOnClick?;
+    private _deselectOnClick;
     blurEvent: EventEmitter<FocusEvent>;
     focusEvent: EventEmitter<FocusEvent>;
     changeEvent: EventEmitter<any>;
@@ -319,14 +320,12 @@ declare class NgSelect implements OnDestroy, OnChanges, OnInit, AfterViewInit, C
     tagTemplate?: TemplateRef<any>;
     loadingSpinnerTemplate?: TemplateRef<any>;
     clearButtonTemplate?: TemplateRef<any>;
-    dropdownId: string;
-    element: HTMLElement;
     itemsList: ItemsList;
+    element: HTMLElement;
     viewPortItems: NgOptionItem[];
     searchTerm: string | null;
     focused?: boolean;
     escapeHTML: boolean;
-    tabFocusOnClear: boolean;
     private _itemsAreUsed?;
     private _primitive;
     private _manualOpen?;
@@ -338,12 +337,16 @@ declare class NgSelect implements OnDestroy, OnChanges, OnInit, AfterViewInit, C
     get selectedItems(): NgOptionItem[];
     get selectedValues(): any[];
     get hasValue(): boolean;
-    get currentPanelPosition(): DropdownPosition | undefined;
+    get currentPanelPosition(): DropdownPanelPosition | undefined;
     get showAddTag(): boolean;
     get filtered(): boolean;
     private get _editableSearchTerm();
     private get _isTypeahead();
     private get _validTerm();
+    get showClearButton(): boolean | "" | null;
+    get showNoItemsFound(): boolean | "" | undefined;
+    get showTypeToSearch(): boolean | undefined;
+    get listboxId(): string;
     private _onChange;
     private _onTouched;
     trackByOption: (_: number, item: NgOptionItem) => any;
@@ -356,7 +359,7 @@ declare class NgSelect implements OnDestroy, OnChanges, OnInit, AfterViewInit, C
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
     setDisabledState(isDisabled: boolean): void;
-    clearItem: (item: any) => void;
+    clearItem: (item?: NgOptionItem | null) => void;
     handleKeyDown(e: KeyboardEvent): void;
     handleKeyCode(e: KeyboardEvent): void;
     handleKeyCodeInput(e: KeyboardEvent): void;
@@ -372,12 +375,8 @@ declare class NgSelect implements OnDestroy, OnChanges, OnInit, AfterViewInit, C
     select(item: NgOptionItem): void;
     focus(): void;
     blur(): void;
-    unselect(item: NgOptionItem): void;
+    unselect(item?: NgOptionItem | null): void;
     selectTag(): void;
-    showClear(): boolean | "" | null;
-    focusOnClear(): void;
-    showNoItemsFound(): boolean | "" | undefined;
-    showTypeToSearch(): boolean | undefined;
     onCompositionStart(): void;
     onCompositionEnd(term: string): void;
     filter(term: string): void;
@@ -392,7 +391,6 @@ declare class NgSelect implements OnDestroy, OnChanges, OnInit, AfterViewInit, C
     private _handleWriteValue;
     private _handleKeyPresses;
     private _setInputAttributes;
-    private _setTabFocusOnClear;
     private _updateNgModel;
     private _clearSearch;
     private _changeSearch;
@@ -406,32 +404,15 @@ declare class NgSelect implements OnDestroy, OnChanges, OnInit, AfterViewInit, C
     private _handleArrowUp;
     private _nextItemIsTag;
     private _handleBackspace;
-    private _mergeGlobalConfig;
-    /**
-     * Gets virtual scroll value from input or from config
-     *
-     *  @param config NgSelectConfig object
-     *
-     *  @returns `true` if virtual scroll is enabled, `false` otherwise
-     */
-    private getVirtualScroll;
-    /**
-     * Gets disableVirtualScroll value from input or from config
-     *
-     *  @param config NgSelectConfig object
-     *
-     *  @returns `true` if disableVirtualScroll is enabled, `false` otherwise
-     */
-    private isVirtualScrollDisabled;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgSelect, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgSelect, "ng-select", never, { "bindLabel": { "alias": "bindLabel"; "required": false; }; "bindValue": { "alias": "bindValue"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "fixedPlaceholder": { "alias": "fixedPlaceholder"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; }; "dropdownPosition": { "alias": "dropdownPosition"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "searchable": { "alias": "searchable"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "clearAllText": { "alias": "clearAllText"; "required": false; }; "tabFocusOnClearButton": { "alias": "tabFocusOnClearButton"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "loadingText": { "alias": "loadingText"; "required": false; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; }; "clearOnBackspace": { "alias": "clearOnBackspace"; "required": false; }; "hideSelected": { "alias": "hideSelected"; "required": false; }; "selectOnTab": { "alias": "selectOnTab"; "required": false; }; "openOnEnter": { "alias": "openOnEnter"; "required": false; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; }; "bufferAmount": { "alias": "bufferAmount"; "required": false; }; "selectableGroup": { "alias": "selectableGroup"; "required": false; }; "selectableGroupAsModel": { "alias": "selectableGroupAsModel"; "required": false; }; "searchWhileComposing": { "alias": "searchWhileComposing"; "required": false; }; "editableSearchTerm": { "alias": "editableSearchTerm"; "required": false; }; "maxSelectedItems": { "alias": "maxSelectedItems"; "required": false; }; "minTermLength": { "alias": "minTermLength"; "required": false; }; "markFirst": { "alias": "markFirst"; "required": false; }; "preventToggleOnRightClick": { "alias": "preventToggleOnRightClick"; "required": false; }; "addTag": { "alias": "addTag"; "required": false; }; "addTagText": { "alias": "addTagText"; "required": false; }; "notFoundText": { "alias": "notFoundText"; "required": false; }; "typeahead": { "alias": "typeahead"; "required": false; }; "typeToSearchText": { "alias": "typeToSearchText"; "required": false; }; "groupBy": { "alias": "groupBy"; "required": false; }; "groupValue": { "alias": "groupValue"; "required": false; }; "searchFn": { "alias": "searchFn"; "required": false; }; "keyDownFn": { "alias": "keyDownFn"; "required": false; }; "trackByFn": { "alias": "trackByFn"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "labelForId": { "alias": "labelForId"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; }; "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; }; "ariaLabelDropdown": { "alias": "ariaLabelDropdown"; "required": false; }; "inputAttrs": { "alias": "inputAttrs"; "required": false; }; "isOpen": { "alias": "isOpen"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "items": { "alias": "items"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "clearSearchOnAdd": { "alias": "clearSearchOnAdd"; "required": false; }; "deselectOnClick": { "alias": "deselectOnClick"; "required": false; }; }, { "blurEvent": "blur"; "focusEvent": "focus"; "changeEvent": "change"; "openEvent": "open"; "closeEvent": "close"; "searchEvent": "search"; "clearEvent": "clear"; "addEvent": "add"; "removeEvent": "remove"; "scroll": "scroll"; "scrollToEnd": "scrollToEnd"; }, ["optionTemplate", "optgroupTemplate", "labelTemplate", "multiLabelTemplate", "headerTemplate", "footerTemplate", "notFoundTemplate", "placeholderTemplate", "typeToSearchTemplate", "loadingTextTemplate", "tagTemplate", "loadingSpinnerTemplate", "clearButtonTemplate", "ngOptions"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgSelect, "ng-select", never, { "bindLabel": { "alias": "bindLabel"; "required": false; }; "bindValue": { "alias": "bindValue"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "fixedPlaceholder": { "alias": "fixedPlaceholder"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; }; "panelPosition": { "alias": "panelPosition"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "searchable": { "alias": "searchable"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "clearOnBackspace": { "alias": "clearOnBackspace"; "required": false; }; "clearAllText": { "alias": "clearAllText"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "loadingText": { "alias": "loadingText"; "required": false; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; }; "hideSelected": { "alias": "hideSelected"; "required": false; }; "selectOnTab": { "alias": "selectOnTab"; "required": false; }; "openOnEnter": { "alias": "openOnEnter"; "required": false; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; }; "bufferAmount": { "alias": "bufferAmount"; "required": false; }; "selectableGroup": { "alias": "selectableGroup"; "required": false; }; "selectableGroupAsModel": { "alias": "selectableGroupAsModel"; "required": false; }; "searchWhileComposing": { "alias": "searchWhileComposing"; "required": false; }; "editableSearchTerm": { "alias": "editableSearchTerm"; "required": false; }; "maxSelectedItems": { "alias": "maxSelectedItems"; "required": false; }; "minTermLength": { "alias": "minTermLength"; "required": false; }; "markFirst": { "alias": "markFirst"; "required": false; }; "preventToggleOnRightClick": { "alias": "preventToggleOnRightClick"; "required": false; }; "addTag": { "alias": "addTag"; "required": false; }; "addTagText": { "alias": "addTagText"; "required": false; }; "notFoundText": { "alias": "notFoundText"; "required": false; }; "typeahead": { "alias": "typeahead"; "required": false; }; "typeToSearchText": { "alias": "typeToSearchText"; "required": false; }; "groupBy": { "alias": "groupBy"; "required": false; }; "groupValue": { "alias": "groupValue"; "required": false; }; "searchFn": { "alias": "searchFn"; "required": false; }; "keyDownFn": { "alias": "keyDownFn"; "required": false; }; "trackByFn": { "alias": "trackByFn"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; }; "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; }; "inputAttrs": { "alias": "inputAttrs"; "required": false; }; "isOpen": { "alias": "isOpen"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "items": { "alias": "items"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "clearSearchOnAdd": { "alias": "clearSearchOnAdd"; "required": false; }; "deselectOnClick": { "alias": "deselectOnClick"; "required": false; }; }, { "blurEvent": "blur"; "focusEvent": "focus"; "changeEvent": "change"; "openEvent": "open"; "closeEvent": "close"; "searchEvent": "search"; "clearEvent": "clear"; "addEvent": "add"; "removeEvent": "remove"; "scroll": "scroll"; "scrollToEnd": "scrollToEnd"; }, ["optionTemplate", "optgroupTemplate", "labelTemplate", "multiLabelTemplate", "headerTemplate", "footerTemplate", "notFoundTemplate", "placeholderTemplate", "typeToSearchTemplate", "loadingTextTemplate", "tagTemplate", "loadingSpinnerTemplate", "clearButtonTemplate", "ngOptions"], never, true, never>;
     static ngAcceptInputType_readonly: unknown;
     static ngAcceptInputType_multiple: unknown;
     static ngAcceptInputType_searchable: unknown;
     static ngAcceptInputType_clearable: unknown;
+    static ngAcceptInputType_clearOnBackspace: unknown;
     static ngAcceptInputType_loading: unknown;
     static ngAcceptInputType_closeOnSelect: unknown;
-    static ngAcceptInputType_clearOnBackspace: unknown;
     static ngAcceptInputType_hideSelected: unknown;
     static ngAcceptInputType_selectOnTab: unknown;
     static ngAcceptInputType_openOnEnter: unknown;
@@ -456,16 +437,14 @@ declare class NgSelectConfig {
     addTagText: string;
     loadingText: string;
     clearAllText: string;
-    ariaLabelDropdown: string;
-    disableVirtualScroll: boolean;
+    virtualScroll: boolean;
     openOnEnter: boolean;
     appendTo?: string;
     bindValue?: string;
     bindLabel?: string;
-    appearance: string;
     clearSearchOnAdd?: boolean;
     deselectOnClick?: boolean;
-    tabFocusOnClear: boolean;
+    appearance: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgSelectConfig, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<NgSelectConfig>;
 }
@@ -474,7 +453,7 @@ declare class NgItemLabel implements OnChanges {
     ngItemLabel: string;
     escape: boolean;
     private element;
-    ngOnChanges(changes: SimpleChanges): void;
+    ngOnChanges(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgItemLabel, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<NgItemLabel, "[ngItemLabel]", never, { "ngItemLabel": { "alias": "ngItemLabel"; "required": false; }; "escape": { "alias": "escape"; "required": false; }; }, {}, never, never, true, never>;
 }
@@ -551,4 +530,4 @@ declare class NgSelectModule {
 }
 
 export { DefaultSelectionModel, DefaultSelectionModelFactory, NgClearButtonTemplate, NgDropdownPanel, NgDropdownPanelUtils, NgFooterTemplate, NgHeaderTemplate, NgItemLabel, NgLabelTemplate, NgLoadingSpinnerTemplate, NgLoadingTextTemplate, NgMultiLabelTemplate, NgNotFoundTemplate, NgOptgroupTemplate, NgOption, NgOptionHighlight, NgOptionTemplate, NgPlaceholderTemplate, NgSelect, NgSelectConfig, NgSelectModule, NgTagTemplate, NgTypeToSearchTemplate, SELECTION_MODEL_FACTORY };
-export type { AddTagFn, CompareWithFn, DropdownPosition, GroupValueFn, ItemsRangeResult, NgOptionItem, PanelDimensions, ScrollEvent, SearchEvent, SearchFn, SelectionModel, SelectionModelFactory, TrackByFn };
+export type { AddTagFn, CompareWithFn, DropdownPanelPosition, GroupValueFn, ItemsRangeResult, NgOptionItem, PanelDimensions, ScrollEvent, SearchEvent, SearchFn, SelectionModel, SelectionModelFactory, TrackByFn };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-matero/ng-select",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Angular Select - All in One UI Select, Multiselect and Autocomplete",
   "publishConfig": {
     "access": "public"