@elderbyte/ngx-starter 17.11.0 → 18.0.0-beta1

package/lib/common/data/filters/filter-commons.d.ts

@@ -0,0 +1,6 @@
+import { FilterValue } from './filter-value';
+export default class FilterCommons {
+    static isArrayAndNotEmpty(value: FilterValue): boolean;
+    static isArray(value: FilterValue): boolean;
+    static isNotEmptyArray(value: FilterValue): boolean;
+}

package/lib/common/data/filters/filter-value.d.ts

@@ -0,0 +1 @@
+export type FilterValue = string | string[] | null;

package/lib/components/forms/directives/elder-initial-value.directive.d.ts

@@ -1,10 +1,9 @@
-import { OnDestroy } from '@angular/core';
 import { NgModel } from '@angular/forms';
 import * as i0 from "@angular/core";
 /**
  * Search name adapter for input controls.
  */
-export declare class ElderInitialValueDirective implements OnDestroy {
+export declare class ElderInitialValueDirective {
     private ngModel;
     /***************************************************************************
      *                                                                         *
@@ -13,7 +12,6 @@ export declare class ElderInitialValueDirective implements OnDestroy {
      **************************************************************************/
     private readonly log;
     private initialValue$;
-    private readonly destroy$;
     private readonly initialDone$;
     /***************************************************************************
      *                                                                         *
@@ -21,11 +19,6 @@ export declare class ElderInitialValueDirective implements OnDestroy {
      *                                                                         *
      **************************************************************************/
     constructor(ngModel: NgModel);
-    /***************************************************************************
-     *                                                                         *
-     * Life Cycle                                                              *
-     *                                                                         *
-     **************************************************************************/
     /***************************************************************************
      *                                                                         *
      * Properties                                                              *
@@ -33,7 +26,6 @@ export declare class ElderInitialValueDirective implements OnDestroy {
      **************************************************************************/
     get valueChanges$(): import("rxjs").Observable<any>;
     setValue(value: any): void;
-    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderInitialValueDirective, [{ host: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<ElderInitialValueDirective, "[elderInitialValue]", ["elderInitialValue"], {}, {}, never, never, true, never>;
 }

package/lib/components/forms/search/domain/input/input-value.d.ts

@@ -0,0 +1 @@
+export type InputValue = string[] | string | null;

package/lib/components/forms/search/domain/input/search-input-state.d.ts

@@ -1,19 +1,16 @@
+import { Filter } from '../../../../../common/data/filters/filter';
 /**
  * Immutable representation of the state of an search input
  */
 export declare class SearchInputState {
     /**
-     * attribute The name name
+     * attribute The name
      */
-    readonly attribute: string;
-    /**
-     * queryValue The query value as string. Supports multi string value.
-     */
-    readonly queryValue: string | string[] | null;
+    readonly queryKey: string;
     /**
-     * queryKey The query key
+     * value of the input
      */
-    readonly queryKey: string;
+    readonly filters: Filter[];
     /**
      * pristine Has the user touched this?
      */
@@ -22,6 +19,7 @@ export declare class SearchInputState {
      * Was the input changed by a user interaction
      */
     readonly userEvent: boolean;
+    static of(queryKey: string, filters: Filter[], pristine: boolean, userEvent: boolean): SearchInputState;
     static unknown(): SearchInputState;
     /***************************************************************************
      *                                                                         *
@@ -30,17 +28,13 @@ export declare class SearchInputState {
      **************************************************************************/
     constructor(
     /**
-     * attribute The name name
+     * attribute The name
      */
-    attribute: string, 
-    /**
-     * queryValue The query value as string. Supports multi string value.
-     */
-    queryValue: string | string[] | null, 
+    queryKey: string, 
     /**
-     * queryKey The query key
+     * value of the input
      */
-    queryKey: string, 
+    filters: Filter[], 
     /**
      * pristine Has the user touched this?
      */
@@ -73,5 +67,5 @@ export declare class SearchInputState {
      * Public Api                                                              *
      *                                                                         *
      **************************************************************************/
-    withQueryValue(value: string | string[] | null, pristine?: boolean): SearchInputState;
+    withFilter(filter: Filter, pristine?: boolean): SearchInputState;
 }

package/lib/components/forms/search/domain/input/search-input.d.ts

@@ -1,13 +1,14 @@
 import { Observable } from 'rxjs/internal/Observable';
 import { SearchInputState } from './search-input-state';
+import { Filter } from '../../../../../common/data/filters/filter';
 /**
  * Represents a single search control.
  */
 export interface SearchInput {
     /**
-     * The search input name
+     * The search input queryKey
      */
-    readonly name: string;
+    readonly queryKey: string;
     readonly state$: Observable<SearchInputState>;
     /**
      * States if the search name is cannot be changed.
@@ -17,5 +18,5 @@ export interface SearchInput {
      * Reset the name value
      */
     reset(): void;
-    setValue(value: string | string[] | null): void;
+    applyFilters(filters: Filter[]): void;
 }

package/lib/components/forms/search/elder-search-context.directive.d.ts

@@ -22,12 +22,13 @@ export declare class ElderSearchContextDirective implements OnInit, AfterViewIni
      *                                                                         *
      **************************************************************************/
     private readonly log;
-    private readonly filtersToApplyAtRegistration;
+    private readonly initialFilters;
+    private initialFiltersRegistered;
     private readonly _searchInputs$;
     private readonly _searchStates$;
     private readonly _filterContext$;
     private readonly _searchContext$;
-    private readonly searchContextId$;
+    private readonly _searchContextId$;
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
@@ -48,6 +49,7 @@ export declare class ElderSearchContextDirective implements OnInit, AfterViewIni
      **************************************************************************/
     set searchContextId(contextId: string);
     get searchContextId(): string;
+    get searchContextId$(): Observable<string>;
     get searchContext$(): Observable<SearchContext>;
     get searchContext(): SearchContext;
     set filterContext(value: FilterContext | '');
@@ -67,7 +69,7 @@ export declare class ElderSearchContextDirective implements OnInit, AfterViewIni
     /**
      * Returns the current user touched attributes. (ignoring fallbacks)
      */
-    get userDefinedAttributes$(): Observable<SearchInputState[]>;
+    get touchedSearchInputs$(): Observable<SearchInputState[]>;
     /***************************************************************************
      *                                                                         *
      * Public API                                                              *
@@ -83,6 +85,7 @@ export declare class ElderSearchContextDirective implements OnInit, AfterViewIni
      * Private                                                                 *
      *                                                                         *
      **************************************************************************/
+    searchInputs(): SearchInput[];
     private applyDefaultFiltersToSearchContext;
     private applyAsDefaultsUntilUserAction;
     private syncSearchInputsToSearchContext;
@@ -90,7 +93,9 @@ export declare class ElderSearchContextDirective implements OnInit, AfterViewIni
     private applyToBoundFilterContext;
     private applySearchContextToInputs;
     private applyFiltersToInputs;
-    private searchInputsByName;
+    private saveInitialFilters;
+    private buildFilterValueMap;
+    private searchInputsByQueryKey;
     private convertToFilters;
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderSearchContextDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<ElderSearchContextDirective, "[elderSearchContext]", ["elderSearchContext"], { "searchContextId": { "alias": "searchContextId"; "required": false; }; "filterContext": { "alias": "elderSearchContext"; "required": false; }; "forcedFilters": { "alias": "forcedFilters"; "required": false; }; }, {}, never, never, true, never>;

package/lib/components/forms/search/elder-search-input.directive.d.ts

@@ -1,28 +1,30 @@
-import { AfterViewInit, OnDestroy, OnInit } from '@angular/core';
+import { AfterViewInit, DestroyRef, OnInit } from '@angular/core';
 import { ElderSearchContextDirective } from './elder-search-context.directive';
 import { Observable } from 'rxjs/internal/Observable';
 import { NgModel } from '@angular/forms';
 import { SearchInput } from './domain/input/search-input';
 import { SearchInputState } from './domain/input/search-input-state';
-import { LocalPagedDataSource } from '../../../common/data/datasource/local/local-paged-data-source';
 import { BooleanInput } from '@angular/cdk/coercion';
+import { InputFilterConverter } from './filter/input-filter-converter';
+import { Filter } from '../../../common/data/filters/filter';
 import * as i0 from "@angular/core";
 /**
- * Search name adapter for input controls.
+ * Binds the control value (ngModel) to a SearchContexts Filter.
  */
-export declare class ElderSearchInputDirective implements SearchInput, OnInit, AfterViewInit, OnDestroy {
+export declare class ElderSearchInputDirective implements SearchInput, OnInit, AfterViewInit {
     private searchContext;
     private ngModel;
-    private readonly initialValueDirective;
+    private destroyRef;
     /***************************************************************************
      *                                                                         *
      * Fields                                                                  *
      *                                                                         *
      **************************************************************************/
-    /**
-     * (Optional) Usually the control name is used, this allows a custom query key
-     */
-    queryKey: string;
+    private readonly log;
+    private readonly _initialValueDirective;
+    private readonly _queryKey$;
+    private _extractedName;
+    private _userQueryKey;
     /**
      * (Optional) Function which transforms the value object to a query param value
      */
@@ -32,22 +34,19 @@ export declare class ElderSearchInputDirective implements SearchInput, OnInit, A
      *  value = "type.id"
      */
     resolvePath: string;
-    dataSource: LocalPagedDataSource<any>;
     /**
      * (Optional) Use this value for the query if none is provided.
      */
     fallbackValue: string | string[];
     valueAsId: BooleanInput;
+    private _inputConverter;
     private readonly _state$;
-    private _extractedName;
-    private readonly destroy$;
-    private readonly log;
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(searchContext: ElderSearchContextDirective, ngModel: NgModel);
+    constructor(searchContext: ElderSearchContextDirective, ngModel: NgModel, destroyRef: DestroyRef);
     /***************************************************************************
      *                                                                         *
      * Life Cycle                                                              *
@@ -55,14 +54,19 @@ export declare class ElderSearchInputDirective implements SearchInput, OnInit, A
      **************************************************************************/
     ngOnInit(): void;
     ngAfterViewInit(): void;
-    ngOnDestroy(): void;
     /***************************************************************************
      *                                                                         *
      * Properties                                                              *
      *                                                                         *
      **************************************************************************/
+    /**
+     * (Optional) Usually the control name is used, this allows a custom query key
+     */
+    set queryKey(value: string);
+    get queryKey(): string;
+    get queryKey$(): Observable<string>;
+    set inputConverter(inputConverter: InputFilterConverter);
     get state$(): Observable<SearchInputState>;
-    get name(): string;
     get value(): any;
     get readonly(): boolean;
     private get hasFallback();
@@ -71,16 +75,21 @@ export declare class ElderSearchInputDirective implements SearchInput, OnInit, A
      * Public API                                                              *
      *                                                                         *
      **************************************************************************/
-    setValue(queryString: string | string[] | null): void;
+    applyFilters(filters: Filter[]): void;
     reset(): void;
     /***************************************************************************
      *                                                                         *
      * Private methods                                                         *
      *                                                                         *
      **************************************************************************/
+    private updateQueryKey;
+    private setInputValue;
     private get valueChanges$();
     private buildInputStateObservable;
     private buildInputState;
+    private isFallbackValue;
+    private areAllPristine;
+    private isPristine;
     private convertQueryStringToRawModelValue;
     private convertRawModelValueToQueryString;
     private checkAndConvertFaultyValuesToNull;
@@ -91,6 +100,6 @@ export declare class ElderSearchInputDirective implements SearchInput, OnInit, A
     private resolveSingleValue;
     private extractName;
     private concatIfNecessary;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ElderSearchInputDirective, [null, { host: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderSearchInputDirective, "[elderSearchInput]", ["elderSearchInput"], { "queryKey": { "alias": "elderSearchInputKey"; "required": false; }; "valueTransform": { "alias": "elderSearchInputTransform"; "required": false; }; "resolvePath": { "alias": "elderSearchInput"; "required": false; }; "dataSource": { "alias": "dataSource"; "required": false; }; "fallbackValue": { "alias": "elderSearchInputFallback"; "required": false; }; "valueAsId": { "alias": "valueAsId"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderSearchInputDirective, [null, { host: true; }, null]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderSearchInputDirective, "[elderSearchInput]", ["elderSearchInput"], { "valueTransform": { "alias": "elderSearchInputTransform"; "required": false; }; "resolvePath": { "alias": "elderSearchInput"; "required": false; }; "fallbackValue": { "alias": "elderSearchInputFallback"; "required": false; }; "valueAsId": { "alias": "valueAsId"; "required": false; }; "queryKey": { "alias": "elderSearchInputKey"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/components/forms/search/filter/default-input-filter-converter.d.ts

@@ -0,0 +1,31 @@
+import { InputFilterConverter } from './input-filter-converter';
+import { InputValue } from '../domain/input/input-value';
+import { Filter } from '../../../../common/data/filters/filter';
+export default class DefaultInputFilterConverter implements InputFilterConverter {
+    private readonly queryKeyProviderFn;
+    /***************************************************************************
+     *                                                                         *
+     * Static Builders                                                         *
+     *                                                                         *
+     **************************************************************************/
+    static of(queryKeyProviderFn: () => string): DefaultInputFilterConverter;
+    /***************************************************************************
+     *                                                                         *
+     * Constructors                                                            *
+     *                                                                         *
+     **************************************************************************/
+    private constructor();
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    convertToFilters(inputValue: InputValue): Filter[];
+    convertToValue(filters: Filter[]): InputValue;
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    private queryKey;
+}

package/lib/components/forms/search/filter/input-filter-converter.d.ts

@@ -0,0 +1,16 @@
+import { Filter } from '../../../../common/data/filters/filter';
+import { InputValue } from '../domain/input/input-value';
+export interface InputFilterConverter {
+    /**
+     * Convert the Input Value to one or more Filters.
+     * Multiple Filters are returned in special cases such as include/exclude.
+     * @param inputValue
+     */
+    convertToFilters(inputValue: InputValue): Filter[];
+    /**
+     * Pick the relevant filters and convert to the InputValue.
+     * Usually an Input consumes one filter, but advanced cases can consume more.
+     * @param filter
+     */
+    convertToValue(filter: Filter[]): InputValue;
+}

package/lib/components/forms/search/search-box/elder-search-box.component.d.ts

@@ -4,6 +4,7 @@ import { ElderSearchPanelComponent } from './elder-search-panel.component';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { BooleanInput } from '@angular/cdk/coercion';
 import { MatFormFieldAppearance } from '@angular/material/form-field';
+import { SearchInputState } from '../domain/input/search-input-state';
 import * as i0 from "@angular/core";
 export declare class OverlayState {
     hasOverlay: boolean;
@@ -38,7 +39,7 @@ export declare class ElderSearchBoxComponent implements OnDestroy, AfterContentI
     private _dense;
     autocomplete: string;
     appearance: MatFormFieldAppearance;
-    readonly userFilters$: Observable<any[]>;
+    readonly touchedSearchInputs$: Observable<SearchInputState[]>;
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *

package/lib/components/input/autocomplete/elder-autocomplete/elder-autocomplete-option-selected.d.ts

@@ -1,8 +1,8 @@
-import { ElderAutocompleteComponent } from './elder-autocomplete.component';
+import { ElderSuggestionPanelComponent } from './elder-suggestion-panel.component';
 export declare class ElderAutocompleteOptionSelected<T = any, TId = any> {
-    readonly source: ElderAutocompleteComponent<T, TId>;
+    readonly source: ElderSuggestionPanelComponent<T, TId>;
     readonly entityId: TId;
     readonly entity: T;
     readonly optionValue: any;
-    constructor(source: ElderAutocompleteComponent<T, TId>, entityId: TId, entity: T, optionValue: any);
+    constructor(source: ElderSuggestionPanelComponent<T, TId>, entityId: TId, entity: T, optionValue: any);
 }

package/lib/components/input/autocomplete/elder-autocomplete/{elder-autocomplete.component.d.ts → elder-suggestion-panel.component.d.ts}

@@ -1,19 +1,23 @@
-import { NgZone, TemplateRef } from '@angular/core';
+import { DestroyRef, NgZone, TemplateRef } from '@angular/core';
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
 import { IDataContext } from '../../../../common/data/data-context/data-context';
+import { BooleanInput } from '@angular/cdk/coercion';
 import { DataContextStatus } from '../../../../common/data/data-context/data-context-status';
 import { MatAutocomplete, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { ElderAutocompleteOptionSelected } from './elder-autocomplete-option-selected';
+import { IDataSource } from '../../../../common/data/datasource/data-source';
 import * as i0 from "@angular/core";
 type TextResolverFn = (value: any) => string;
-export declare class ElderAutocompleteComponent<T = any, TId = any> {
+export declare class ElderSuggestionPanelComponent<T = any, TId = any> {
     private readonly zone;
+    private destroyRef;
     /***************************************************************************
      *                                                                         *
      * Fields                                                                  *
      *                                                                         *
      **************************************************************************/
     private readonly logger;
+    private readonly PAGE_SIZE;
     /**
      * Is this auto-complete enabled?
      */
@@ -35,28 +39,32 @@ export declare class ElderAutocompleteComponent<T = any, TId = any> {
      * The DataContext which holds the autocomplete suggestions.
      */
     readonly dataContext$: BehaviorSubject<IDataContext<T>>;
+    readonly dataSource$: BehaviorSubject<IDataSource<T>>;
     readonly triggerReload$: Subject<any>;
     readonly displayPropertyResolver$: BehaviorSubject<TextResolverFn>;
     readonly dataState$: Observable<DataContextStatus>;
     readonly availableSuggestions$: Observable<T[]>;
     readonly optionSelected: Subject<ElderAutocompleteOptionSelected<any, any>>;
+    private readonly hiddenOptionsCount$;
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(zone: NgZone);
+    constructor(zone: NgZone, destroyRef: DestroyRef);
     /***************************************************************************
      *                                                                         *
      * Properties                                                              *
      *                                                                         *
      **************************************************************************/
-    set enabled(value: boolean);
+    set enabled(value: BooleanInput);
     get enabled(): boolean;
     set valueTemplate(template: TemplateRef<any>);
     get valueTemplate(): TemplateRef<any>;
     set dataContext(data: IDataContext<T>);
     get dataContext(): IDataContext<T>;
+    set dataSource(dataSource: IDataSource<T>);
+    get dataSource(): IDataSource<T>;
     set displayPropertyResolver(resolver: TextResolverFn);
     /***************************************************************************
      *                                                                         *
@@ -71,6 +79,7 @@ export declare class ElderAutocompleteComponent<T = any, TId = any> {
     getId(value: T): TId;
     isOptionAvailable(option: T): boolean;
     isOptionVisible(option: T): boolean;
+    isOptionHidden(option: T): boolean;
     toOptionValue(option: T): any;
     /***************************************************************************
      *                                                                         *
@@ -81,7 +90,9 @@ export declare class ElderAutocompleteComponent<T = any, TId = any> {
      * TODO Duplicate in elder-select
      */
     private propertyStringValue;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ElderAutocompleteComponent<any, any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ElderAutocompleteComponent<any, any>, "elder-autocomplete", ["elderAutocomplete"], { "isOptionDisabledFn": { "alias": "isOptionDisabledFn"; "required": false; }; "isOptionHiddenFn": { "alias": "isOptionHiddenFn"; "required": false; }; "optionValueConverterFn": { "alias": "optionValueConverterFn"; "required": false; }; "enabled": { "alias": "enabled"; "required": false; }; "valueTemplate": { "alias": "valueTemplate"; "required": false; }; "dataContext": { "alias": "dataContext"; "required": false; }; "displayPropertyResolver": { "alias": "displayPropertyResolver"; "required": false; }; }, { "optionSelected": "optionSelected"; }, ["valueTemplateQuery"], never, true, never>;
+    private buildDataContextWithPageSize;
+    private calculatePageSize;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderSuggestionPanelComponent<any, any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderSuggestionPanelComponent<any, any>, "elder-suggestion-panel", ["elderSuggestionPanel"], { "isOptionDisabledFn": { "alias": "isOptionDisabledFn"; "required": false; }; "isOptionHiddenFn": { "alias": "isOptionHiddenFn"; "required": false; }; "optionValueConverterFn": { "alias": "optionValueConverterFn"; "required": false; }; "enabled": { "alias": "enabled"; "required": false; }; "valueTemplate": { "alias": "valueTemplate"; "required": false; }; "dataContext": { "alias": "dataContext"; "required": false; }; "dataSource": { "alias": "dataSource"; "required": false; }; "displayPropertyResolver": { "alias": "displayPropertyResolver"; "required": false; }; }, { "optionSelected": "optionSelected"; }, ["valueTemplateQuery"], never, true, never>;
 }
 export {};

package/lib/components/input/autocomplete/elder-autocomplete-many.directive.d.ts

@@ -1,6 +1,6 @@
 import { ElementRef, OnDestroy, OnInit } from '@angular/core';
 import { Subject } from 'rxjs';
-import { ElderAutocompleteComponent } from './elder-autocomplete/elder-autocomplete.component';
+import { ElderSuggestionPanelComponent } from './elder-autocomplete/elder-suggestion-panel.component';
 import { MatAutocompleteTrigger } from '@angular/material/autocomplete';
 import { Filter } from '../../../common/data/filters/filter';
 import { Sort } from '../../../common/data/sort';
@@ -41,8 +41,8 @@ export declare class ElderAutocompleteManyDirective<T> implements OnInit, OnDest
      * Properties                                                              *
      *                                                                         *
      **************************************************************************/
-    set autocomplete(auto: ElderAutocompleteComponent);
-    get autocomplete(): ElderAutocompleteComponent;
+    set autocomplete(auto: ElderSuggestionPanelComponent);
+    get autocomplete(): ElderSuggestionPanelComponent;
     private get cursorPosition();
     private set cursorPosition(value);
     private get dataContext();

package/lib/components/input/autocomplete/elder-autocomplete.directive.d.ts

@@ -1,6 +1,6 @@
 import { OnDestroy, OnInit } from '@angular/core';
 import { MatAutocompleteTrigger } from '@angular/material/autocomplete';
-import { ElderAutocompleteComponent } from './elder-autocomplete/elder-autocomplete.component';
+import { ElderSuggestionPanelComponent } from './elder-autocomplete/elder-suggestion-panel.component';
 import { Subject } from 'rxjs';
 import { Filter } from '../../../common/data/filters/filter';
 import { IDataContext } from '../../../common/data/data-context/data-context';
@@ -46,8 +46,8 @@ export declare class ElderAutocompleteDirective implements OnInit, OnDestroy {
      * Properties                                                              *
      *                                                                         *
      **************************************************************************/
-    set autocomplete(auto: ElderAutocompleteComponent);
-    get autocomplete(): ElderAutocompleteComponent;
+    set autocomplete(auto: ElderSuggestionPanelComponent);
+    get autocomplete(): ElderSuggestionPanelComponent;
     get dataContext(): IDataContext<any>;
     /***************************************************************************
      *                                                                         *

package/lib/components/input/autocomplete/elder-autocomplete.module.d.ts

@@ -6,14 +6,14 @@ import * as i4 from "@angular/material/autocomplete";
 import * as i5 from "../../infinitescroll/elder-infinite-scroll.module";
 import * as i6 from "@angular/material/icon";
 import * as i7 from "@angular/material/progress-bar";
-import * as i8 from "./elder-autocomplete/elder-autocomplete.component";
+import * as i8 from "./elder-autocomplete/elder-suggestion-panel.component";
 import * as i9 from "./elder-autocomplete.directive";
 import * as i10 from "./elder-autocomplete-many.directive";
-export { ElderAutocompleteComponent } from './elder-autocomplete/elder-autocomplete.component';
+export { ElderSuggestionPanelComponent } from './elder-autocomplete/elder-suggestion-panel.component';
 export { ElderAutocompleteManyDirective } from './elder-autocomplete-many.directive';
 export { ElderAutocompleteDirective } from './elder-autocomplete.directive';
 export declare class ElderAutocompleteModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderAutocompleteModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ElderAutocompleteModule, never, [typeof i1.CommonModule, typeof i2.ReactiveFormsModule, typeof i3.MatInputModule, typeof i4.MatAutocompleteModule, typeof i5.ElderInfiniteScrollModule, typeof i6.MatIconModule, typeof i7.MatProgressBarModule, typeof i8.ElderAutocompleteComponent, typeof i9.ElderAutocompleteDirective, typeof i10.ElderAutocompleteManyDirective], [typeof i8.ElderAutocompleteComponent, typeof i9.ElderAutocompleteDirective, typeof i10.ElderAutocompleteManyDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ElderAutocompleteModule, never, [typeof i1.CommonModule, typeof i2.ReactiveFormsModule, typeof i3.MatInputModule, typeof i4.MatAutocompleteModule, typeof i5.ElderInfiniteScrollModule, typeof i6.MatIconModule, typeof i7.MatProgressBarModule, typeof i8.ElderSuggestionPanelComponent, typeof i9.ElderAutocompleteDirective, typeof i10.ElderAutocompleteManyDirective], [typeof i8.ElderSuggestionPanelComponent, typeof i9.ElderAutocompleteDirective, typeof i10.ElderAutocompleteManyDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ElderAutocompleteModule>;
 }

package/lib/components/navigation/toolbar/elder-toolbar-column.directive.d.ts

@@ -1,9 +1,8 @@
-import { OnDestroy, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
+import { OnDestroy, OnInit, TemplateRef } from '@angular/core';
 import { ElderToolbarService } from './elder-toolbar.service';
 import { ToolbarColumnPosition } from './toolbar-column-position';
 import * as i0 from "@angular/core";
 export declare class ElderToolbarColumnDirective implements OnInit, OnDestroy {
-    private viewContainer;
     private toolbarService;
     templateRef: TemplateRef<any>;
     /***************************************************************************
@@ -21,7 +20,7 @@ export declare class ElderToolbarColumnDirective implements OnInit, OnDestroy {
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(viewContainer: ViewContainerRef, toolbarService: ElderToolbarService, templateRef: TemplateRef<any>);
+    constructor(toolbarService: ElderToolbarService, templateRef: TemplateRef<any>);
     /***************************************************************************
      *                                                                         *
      * Life Cycle                                                              *

package/lib/components/select/auto/elder-auto-select-first.directive.d.ts

@@ -1,8 +1,10 @@
 import { AfterViewInit } from '@angular/core';
 import { ElderSelectComponent } from '../single/elder-select/elder-select.component';
+import { ElderAutoSelectFirstService } from './elder-auto-select-first.service';
 import * as i0 from "@angular/core";
 export declare class ElderAutoSelectFirstDirective<TEntity = any, TId = any> implements AfterViewInit {
     readonly elderSelect: ElderSelectComponent<TEntity, TId, any>;
+    private readonly autoSelectFirstService;
     /***************************************************************************
      *                                                                         *
      * Fields                                                                  *
@@ -15,7 +17,7 @@ export declare class ElderAutoSelectFirstDirective<TEntity = any, TId = any> imp
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(elderSelect: ElderSelectComponent<TEntity, TId, any>);
+    constructor(elderSelect: ElderSelectComponent<TEntity, TId, any>, autoSelectFirstService: ElderAutoSelectFirstService<TEntity>);
     /***************************************************************************
      *                                                                         *
      * Life Cycle                                                              *
@@ -34,6 +36,12 @@ export declare class ElderAutoSelectFirstDirective<TEntity = any, TId = any> imp
     set autoSelectFirstEnabled(val: boolean | string);
     set enabled(val: boolean);
     get enabled(): boolean;
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    forceReloadFirst(): void;
     /***************************************************************************
      *                                                                         *
      * Private methods                                                         *

package/lib/components/select/auto/elder-auto-select-first.service.d.ts

@@ -0,0 +1,23 @@
+import { BehaviorSubject } from 'rxjs';
+import * as i0 from "@angular/core";
+export declare class ElderAutoSelectFirstService<TEntity> {
+    private readonly _firstItem$;
+    private readonly _enabled$;
+    constructor();
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    suggestFirstItem(entity: TEntity): void;
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    set enabled(enabled: boolean);
+    get enabled$(): import("rxjs").Observable<boolean>;
+    get firstItem$(): BehaviorSubject<TEntity>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderAutoSelectFirstService<any>, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ElderAutoSelectFirstService<any>>;
+}