@elderbyte/ngx-starter 13.5.2 → 13.7.1

package/lib/common/utils/collection-util.d.ts

@@ -31,4 +31,5 @@ export declare class CollectionUtil {
      * @param bSet
      */
     static equalSetDeep<T>(aSet: Set<T>, bSet: Set<T>): boolean;
+    static hasElements(list: any[]): boolean;
 }

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

@@ -0,0 +1,54 @@
+import { AfterViewInit } from '@angular/core';
+import { ElderSelectComponent } from './elder-select/elder-select.component';
+import * as i0 from "@angular/core";
+export declare class AutoSelectFirstDirective<TEntity = any, TId = any> implements AfterViewInit {
+    readonly elderSelect: ElderSelectComponent<TEntity, TId, any>;
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+    private readonly log;
+    private _enabled;
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(elderSelect: ElderSelectComponent<TEntity, TId, any>);
+    /***************************************************************************
+     *                                                                         *
+     * Life Cycle                                                              *
+     *                                                                         *
+     **************************************************************************/
+    ngAfterViewInit(): void;
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    /**
+     * After data is loaded into this select, ensure that
+     * a value is selected or select the first automatically.
+     */
+    set autoSelectFirstEnabled(val: boolean | string);
+    set enabled(val: boolean);
+    get enabled(): boolean;
+    /***************************************************************************
+     *                                                                         *
+     * Public methods                                                          *
+     *                                                                         *
+     **************************************************************************/
+    trySelectFirst(): void;
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    private handleAutoSelectFirst;
+    private firstItemInDataContextSoon;
+    private firstSuggestionItem;
+    private updateState;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AutoSelectFirstDirective<any, any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AutoSelectFirstDirective<any, any>, "[autoSelectFirst]", never, { "autoSelectFirstEnabled": "autoSelectFirst"; }, {}, never>;
+}

package/lib/components/select/elder-entity-value-accessor.d.ts

@@ -0,0 +1,27 @@
+import { Observable } from 'rxjs';
+export interface IElderEntityValueAccessor<TEntity, TId> {
+    /**
+     * Gets or sets the entity
+     */
+    entity: TEntity;
+    /**
+     * Gets or sets the entity id
+     */
+    entityId: TId;
+    /**
+     * Emits when the entity id has changed.
+     */
+    entityIdChange: Observable<TId>;
+    /**
+     * Emits when the entity has changed.
+     */
+    entityChange: Observable<TEntity>;
+    /**
+     * Update the control value by the given entity
+     * and emit a value-updated event which simulates
+     * a user action.
+     * @param entity
+     */
+    updateValueByEntity(entity: TEntity): void;
+}
+export declare function isElderEntityValueAccessor(object: any): object is IElderEntityValueAccessor<any, any>;

package/lib/components/select/elder-select/elder-select.component.d.ts

@@ -1,10 +1,11 @@
-import { AfterViewInit, Injector, NgZone, OnDestroy, OnInit } from '@angular/core';
+import { NgZone, OnDestroy, OnInit } from '@angular/core';
 import { IDataContext } from '../../../common/data/data-context/data-context';
 import { Observable } from 'rxjs';
 import { MatAutocompleteTrigger } from '@angular/material/autocomplete';
 import { ElderSelectBase, TextResolverFn } from '../elder-select-base';
+import { IElderEntityValueAccessor } from '../elder-entity-value-accessor';
 import * as i0 from "@angular/core";
-declare class ValueContext<T> {
+declare class EntityContext<T> {
     readonly value: T;
     readonly hintText: string;
     readonly displayText: string;
@@ -20,8 +21,7 @@ declare class ValueContext<T> {
  * - Support entity id handling, input / output is the entity id vs full value.
  *
  */
-export declare class ElderSelectComponent<T = any, TId = any> extends ElderSelectBase<TId, T, T> implements OnInit, OnDestroy, AfterViewInit {
-    private readonly injector;
+export declare class ElderSelectComponent<TEntity = any, TId = any, TValue = TEntity | TId> extends ElderSelectBase<TId, TEntity, TValue> implements IElderEntityValueAccessor<TEntity, TId>, OnInit, OnDestroy {
     /***************************************************************************
      *                                                                         *
      * Fields                                                                  *
@@ -34,29 +34,36 @@ export declare class ElderSelectComponent<T = any, TId = any> extends ElderSelec
      * String to display for the 'nothing' / null value.
      */
     nullDisplay: string;
-    private _autoSelectFirst;
-    readonly valueIdChange: Observable<TId>;
-    private _valueId;
+    readonly entityIdChange: Observable<TId>;
+    readonly entityChange: Observable<TEntity>;
+    /**
+     * Similar to entity-id change, but emits only when the user
+     * has updated the value.
+     */
+    readonly entityIdUpdated: Observable<TId>;
+    /**
+     * Similar to entity change, but emits only when the user
+     * has updated the value.
+     */
+    readonly entityUpdated: Observable<TEntity>;
+    private readonly entity$;
     private _autocomplete;
-    readonly valueWrapped$: Observable<ValueContext<T>>;
+    readonly entityWrapped$: Observable<EntityContext<TEntity>>;
     private readonly unsubscribe$;
     readonly inputText$: Observable<string>;
-    private ngControl;
-    private valueContext;
-    private ngModelInitialized;
+    private entityContext;
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(zone: NgZone, injector: Injector);
+    constructor(zone: NgZone);
     /***************************************************************************
      *                                                                         *
      * Life Cycle                                                              *
      *                                                                         *
      **************************************************************************/
     ngOnInit(): void;
-    ngAfterViewInit(): void;
     ngOnDestroy(): void;
     /***************************************************************************
      *                                                                         *
@@ -70,23 +77,15 @@ export declare class ElderSelectComponent<T = any, TId = any> extends ElderSelec
      */
     set allowNull(val: boolean);
     get allowNull(): boolean;
-    /**
-     * After data is loaded into this select, ensure that
-     * a value is selected or select the first automatically.
-     */
-    set autoSelectFirst(val: boolean);
-    get autoSelectFirst(): boolean;
     /***************************************************************************
      *                                                                         *
      * Properties                                                              *
      *                                                                         *
      **************************************************************************/
-    /**
-     * Select the value with the given id.
-     * @param id
-     */
-    set valueId(id: TId);
-    get valueId(): TId;
+    set entity(entity: TEntity);
+    get entity(): TEntity;
+    set entityId(id: TId);
+    get entityId(): TId;
     set hintProperty(property: string);
     set hintPropertyResolver(resolver: TextResolverFn);
     /***************************************************************************
@@ -95,23 +94,15 @@ export declare class ElderSelectComponent<T = any, TId = any> extends ElderSelec
      *                                                                         *
      **************************************************************************/
     onInputBlur(event: FocusEvent): void;
-    get isOptionDisabledInternalFn(): (option: T) => boolean;
-    get isOptionHiddenInternalFn(): (option: T) => boolean;
+    get isOptionDisabledInternalFn(): (option: TEntity) => boolean;
+    get isOptionHiddenInternalFn(): (option: TEntity) => boolean;
     togglePanel(autoTrigger: MatAutocompleteTrigger): void;
     onInputClicked(autoTrigger: MatAutocompleteTrigger): void;
-    onOptionSelected(selectedValue: T): void;
+    onOptionSelected(selectedValue: TEntity): void;
     openSelectionPopup(event: Event): void;
     clear(event: Event): void;
     forceReloadFirst(): void;
-    /***************************************************************************
-     *                                                                         *
-     * Private Methods (Auto Select First)                                     *
-     *                                                                         *
-     **************************************************************************/
-    private handleAutoSelectFirst;
-    private trySelectFirst;
-    private firstItemInDataContextSoon;
-    private firstSuggestionItem;
+    updateValueByEntity(entity: TEntity): void;
     /***************************************************************************
      *                                                                         *
      * Abstract Implementation                                                 *
@@ -120,20 +111,24 @@ export declare class ElderSelectComponent<T = any, TId = any> extends ElderSelec
     /**
      * Occurs when the suggestions data-context has changed
      */
-    protected onSuggestionsDcChanged(data: IDataContext<T>): void;
+    protected onSuggestionsDcChanged(data: IDataContext<TEntity>): void;
     /***************************************************************************
      *                                                                         *
      * Private Methods                                                         *
      *                                                                         *
      **************************************************************************/
-    protected valuesEquals(a: T, b: T): boolean;
-    private selectValueById;
+    protected valuesEquals(a: TValue, b: TValue): boolean;
+    private isEntitySelected;
+    private entityIdFromValue;
+    private selectEntityById;
     private loadEntityById;
-    private writeValueInternalDelayed;
     private findInDataContext;
-    protected writeToControl(value: T): void;
-    private ensureExistingValueNgControl;
-    private tryUpdateNgControl;
+    private entityToValue;
+    /**
+     * This method is invoked after a value has been written to this control.
+     *
+     */
+    protected writeToControl(value: TValue): void;
     /**
      * @description
      * Writes a new value to the element.
@@ -143,10 +138,9 @@ export declare class ElderSelectComponent<T = any, TId = any> extends ElderSelec
      *
      * @param value The new value for the element
      */
-    writeValue(value: T): void;
+    writeValue(value: TValue): void;
     private isNullOrEmpty;
-    private isNgModelInitializing;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ElderSelectComponent<any, any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ElderSelectComponent<any, any>, "elder-select", never, { "nullDisplay": "nullDisplay"; "autocomplete": "autocomplete"; "allowNull": "allowNull"; "autoSelectFirst": "autoSelectFirst"; "valueId": "valueId"; "hintProperty": "hintProperty"; "hintPropertyResolver": "hintPropertyResolver"; }, { "valueIdChange": "valueIdChange"; }, never, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderSelectComponent<any, any, any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderSelectComponent<any, any, any>, "elder-select", never, { "nullDisplay": "nullDisplay"; "autocomplete": "autocomplete"; "allowNull": "allowNull"; "entity": "entity"; "entityId": "entityId"; "hintProperty": "hintProperty"; "hintPropertyResolver": "hintPropertyResolver"; }, { "entityIdChange": "entityIdChange"; "entityChange": "entityChange"; "entityIdUpdated": "entityIdUpdated"; "entityUpdated": "entityUpdated"; }, never, never>;
 }
 export {};

package/lib/components/select/elder-select-base.d.ts

@@ -27,8 +27,11 @@ export declare const ELDER_SELECT_BASE: InjectionToken<ElderSelectBase<any, any,
  *
  * - Suggestion-Model: A DataSource and derived DataContext for the (auto-complete) suggestions.
  *
+ * @param TID Entity Id Type
+ * @param T Entity Type
+ * @param TValue Value backing the control. Can be the entity, the id or something else.
  */
-export declare abstract class ElderSelectBase<TId, T, TValue = T> extends FormFieldBaseComponent<TValue> {
+export declare abstract class ElderSelectBase<TId, TEntity, TValue> extends FormFieldBaseComponent<TValue> {
     private readonly zone;
     /***************************************************************************
      *                                                                         *
@@ -37,6 +40,7 @@ export declare abstract class ElderSelectBase<TId, T, TValue = T> extends FormFi
      **************************************************************************/
     private readonly _logger;
     private readonly _filterContext;
+    private _valueAsId;
     /**
      * Define if elder-select should clean up the
      * data-context resources for you.
@@ -47,7 +51,7 @@ export declare abstract class ElderSelectBase<TId, T, TValue = T> extends FormFi
     cleanUp: boolean;
     readonly displayPropertyResolver$: BehaviorSubject<TextResolverFn>;
     /** Underlying data context. */
-    readonly suggestionsDc$: BehaviorSubject<IDataContext<T>>;
+    readonly suggestionsDc$: BehaviorSubject<IDataContext<TEntity>>;
     /**
      * Page size. (Used for infinite scrolling chunks)
      */
@@ -60,8 +64,8 @@ export declare abstract class ElderSelectBase<TId, T, TValue = T> extends FormFi
     valueTemplateQuery: TemplateRef<any>;
     private _valueTemplate;
     selectionPopup: SelectionModelPopupDirective;
-    isOptionDisabledFn: (option: T) => boolean;
-    isOptionHiddenFn: (option: T) => boolean;
+    isOptionDisabledFn: (option: TEntity) => boolean;
+    isOptionHiddenFn: (option: TEntity) => boolean;
     readonly state$: BehaviorSubject<ElderSelectComponentState>;
     readonly mergedState$: Observable<ElderSelectComponentState>;
     /***************************************************************************
@@ -75,6 +79,8 @@ export declare abstract class ElderSelectBase<TId, T, TValue = T> extends FormFi
      * Properties                                                              *
      *                                                                         *
      **************************************************************************/
+    set valueAsId(valueAsId: boolean);
+    get valueAsId(): boolean;
     /**
      * The property used to display the values.
      */
@@ -82,10 +88,10 @@ export declare abstract class ElderSelectBase<TId, T, TValue = T> extends FormFi
     set displayPropertyResolver(resolver: TextResolverFn);
     set filters(filters: Filter[]);
     get filters(): Filter[];
-    set dataSource(source: IDataSource<T>);
-    set data(data: Array<T> | IDataContext<T>);
-    set suggestionsDc(data: IDataContext<T>);
-    get suggestionsDc(): IDataContext<T>;
+    set dataSource(source: IDataSource<TEntity>);
+    set data(data: Array<TEntity> | IDataContext<TEntity>);
+    set suggestionsDc(data: IDataContext<TEntity>);
+    get suggestionsDc(): IDataContext<TEntity>;
     set valueTemplate(template: TemplateRef<any>);
     get valueTemplate(): TemplateRef<any>;
     /***************************************************************************
@@ -97,6 +103,7 @@ export declare abstract class ElderSelectBase<TId, T, TValue = T> extends FormFi
     updateFilters(updatedFilters?: Filter[]): void;
     replaceFilters(newFilters?: Filter[]): void;
     clearFilters(): void;
+    updateState(state: ElderSelectComponentState): void;
     /***************************************************************************
      *                                                                         *
      * Abstract API                                                            *
@@ -105,21 +112,20 @@ export declare abstract class ElderSelectBase<TId, T, TValue = T> extends FormFi
     /**
      * Occurs when the suggestions data-context has changed
      */
-    protected abstract onSuggestionsDcChanged(data: IDataContext<T>): void;
+    protected abstract onSuggestionsDcChanged(data: IDataContext<TEntity>): void;
     /***************************************************************************
      *                                                                         *
      * Internal API                                                            *
      *                                                                         *
      **************************************************************************/
-    protected getValueId(value: T): TId;
-    protected isEqual(a: T, b: T): boolean;
-    protected isEmpty(a: T): boolean;
-    protected updateState(state: ElderSelectComponentState): void;
+    protected getEntityId(entity: TEntity): TId;
+    protected isEqual(a: TEntity, b: TEntity): boolean;
+    protected isEmpty(a: TEntity): boolean;
     /**
      * Performs clean up of the current data context if auto clean up is enabled.
      */
     protected autoCleanUp(): void;
-    protected propertyStringValue(value: T, property: string): string | null;
+    protected propertyStringValue(value: TEntity, property: string): string | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderSelectBase<any, any, any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderSelectBase<any, any, any>, never, never, { "cleanUp": "cleanUp"; "pageSize": "pageSize"; "queryFilter": "queryFilter"; "sorts": "sorts"; "isOptionDisabledFn": "isOptionDisabledFn"; "isOptionHiddenFn": "isOptionHiddenFn"; "displayProperty": "displayProperty"; "displayPropertyResolver": "displayPropertyResolver"; "filters": "filters"; "dataSource": "dataSource"; "data": "data"; "valueTemplate": "valueTemplate"; }, {}, ["valueTemplateQuery", "selectionPopup"]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderSelectBase<any, any, any>, never, never, { "cleanUp": "cleanUp"; "pageSize": "pageSize"; "queryFilter": "queryFilter"; "sorts": "sorts"; "isOptionDisabledFn": "isOptionDisabledFn"; "isOptionHiddenFn": "isOptionHiddenFn"; "valueAsId": "valueAsId"; "displayProperty": "displayProperty"; "displayPropertyResolver": "displayPropertyResolver"; "filters": "filters"; "dataSource": "dataSource"; "data": "data"; "valueTemplate": "valueTemplate"; }, {}, ["valueTemplateQuery", "selectionPopup"]>;
 }

package/lib/components/select/elder-select.module.d.ts

@@ -6,25 +6,26 @@ import * as i4 from "./popup/selection-model-popup.directive";
 import * as i5 from "./select-on-tab.directive";
 import * as i6 from "./multi/elder-multi-select-chips/elder-multi-select-chips.component";
 import * as i7 from "./elder-select-chip.directive";
-import * as i8 from "@angular/common";
-import * as i9 from "@angular/forms";
-import * as i10 from "@angular/material/form-field";
-import * as i11 from "@angular/material/icon";
-import * as i12 from "@angular/material/select";
-import * as i13 from "@angular/material/dialog";
-import * as i14 from "@angular/material/button";
-import * as i15 from "@angular/material/input";
-import * as i16 from "@angular/material/autocomplete";
-import * as i17 from "@angular/material/toolbar";
-import * as i18 from "@angular/material/progress-bar";
-import * as i19 from "@angular/material/progress-spinner";
-import * as i20 from "@angular/flex-layout";
-import * as i21 from "@ngx-translate/core";
-import * as i22 from "../forms/directives/elder-forms-directives.module";
-import * as i23 from "../data-view/table/elder-table.module";
-import * as i24 from "../infinitescroll/elder-infinite-scroll.module";
-import * as i25 from "../input/autocomplete/elder-autocomplete.module";
-import * as i26 from "@angular/material/chips";
+import * as i8 from "./auto-select-first.directive";
+import * as i9 from "@angular/common";
+import * as i10 from "@angular/forms";
+import * as i11 from "@angular/material/form-field";
+import * as i12 from "@angular/material/icon";
+import * as i13 from "@angular/material/select";
+import * as i14 from "@angular/material/dialog";
+import * as i15 from "@angular/material/button";
+import * as i16 from "@angular/material/input";
+import * as i17 from "@angular/material/autocomplete";
+import * as i18 from "@angular/material/toolbar";
+import * as i19 from "@angular/material/progress-bar";
+import * as i20 from "@angular/material/progress-spinner";
+import * as i21 from "@angular/flex-layout";
+import * as i22 from "@ngx-translate/core";
+import * as i23 from "../forms/directives/elder-forms-directives.module";
+import * as i24 from "../data-view/table/elder-table.module";
+import * as i25 from "../infinitescroll/elder-infinite-scroll.module";
+import * as i26 from "../input/autocomplete/elder-autocomplete.module";
+import * as i27 from "@angular/material/chips";
 export { ElderSelectValueDirective } from './elder-select-value.directive';
 export { ElderSelectChipDirective } from './elder-select-chip.directive';
 export { SelectOnTabDirective } from './select-on-tab.directive';
@@ -33,8 +34,9 @@ export { TemplatedSelectionDialogComponent, ISelectionModelDialogOptions } from
 export { SelectionModelPopupDirective, ElderDataViewSelectionMode } from './popup/selection-model-popup.directive';
 export { ElderMultiSelectBase } from './multi/elder-multi-select-base';
 export { ElderMultiSelectChipsComponent } from './multi/elder-multi-select-chips/elder-multi-select-chips.component';
+export { AutoSelectFirstDirective } from './auto-select-first.directive';
 export declare class ElderSelectModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderSelectModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ElderSelectModule, [typeof i1.ElderSelectComponent, typeof i2.ElderSelectValueDirective, typeof i3.TemplatedSelectionDialogComponent, typeof i4.SelectionModelPopupDirective, typeof i5.SelectOnTabDirective, typeof i6.ElderMultiSelectChipsComponent, typeof i7.ElderSelectChipDirective], [typeof i8.CommonModule, typeof i9.FormsModule, typeof i9.ReactiveFormsModule, typeof i10.MatFormFieldModule, typeof i11.MatIconModule, typeof i12.MatSelectModule, typeof i13.MatDialogModule, typeof i14.MatButtonModule, typeof i15.MatInputModule, typeof i16.MatAutocompleteModule, typeof i17.MatToolbarModule, typeof i18.MatProgressBarModule, typeof i19.MatProgressSpinnerModule, typeof i20.FlexModule, typeof i21.TranslateModule, typeof i22.ElderFormsDirectivesModule, typeof i23.ElderTableModule, typeof i24.ElderInfiniteScrollModule, typeof i25.ElderAutocompleteModule, typeof i26.MatChipsModule], [typeof i1.ElderSelectComponent, typeof i2.ElderSelectValueDirective, typeof i3.TemplatedSelectionDialogComponent, typeof i4.SelectionModelPopupDirective, typeof i6.ElderMultiSelectChipsComponent, typeof i7.ElderSelectChipDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ElderSelectModule, [typeof i1.ElderSelectComponent, typeof i2.ElderSelectValueDirective, typeof i3.TemplatedSelectionDialogComponent, typeof i4.SelectionModelPopupDirective, typeof i5.SelectOnTabDirective, typeof i6.ElderMultiSelectChipsComponent, typeof i7.ElderSelectChipDirective, typeof i8.AutoSelectFirstDirective], [typeof i9.CommonModule, typeof i10.FormsModule, typeof i10.ReactiveFormsModule, typeof i11.MatFormFieldModule, typeof i12.MatIconModule, typeof i13.MatSelectModule, typeof i14.MatDialogModule, typeof i15.MatButtonModule, typeof i16.MatInputModule, typeof i17.MatAutocompleteModule, typeof i18.MatToolbarModule, typeof i19.MatProgressBarModule, typeof i20.MatProgressSpinnerModule, typeof i21.FlexModule, typeof i22.TranslateModule, typeof i23.ElderFormsDirectivesModule, typeof i24.ElderTableModule, typeof i25.ElderInfiniteScrollModule, typeof i26.ElderAutocompleteModule, typeof i27.MatChipsModule], [typeof i1.ElderSelectComponent, typeof i2.ElderSelectValueDirective, typeof i3.TemplatedSelectionDialogComponent, typeof i4.SelectionModelPopupDirective, typeof i6.ElderMultiSelectChipsComponent, typeof i7.ElderSelectChipDirective, typeof i8.AutoSelectFirstDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ElderSelectModule>;
 }

package/lib/components/select/multi/elder-multi-select-base.d.ts

@@ -1,7 +1,7 @@
 import { NgZone } from '@angular/core';
 import { ElderSelectBase } from '../elder-select-base';
 import { IDataContext } from '../../../common/data/data-context/data-context';
-import { Observable } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
 import * as i0 from "@angular/core";
 /**
  * Base component implementation of elder-multi-select.
@@ -12,15 +12,15 @@ import * as i0 from "@angular/core";
  * - The backing Value is a list of the current selected entities. T[]
  *
  */
-export declare abstract class ElderMultiSelectBase<TId, T> extends ElderSelectBase<TId, T, T[]> {
+export declare abstract class ElderMultiSelectBase<TId, TEntity, TValue> extends ElderSelectBase<TId, TEntity, TValue[]> {
     /***************************************************************************
      *                                                                         *
      * Fields                                                                  *
      *                                                                         *
      **************************************************************************/
     private readonly logger;
-    private _valueIds;
-    readonly valueIdsChange: Observable<TId[]>;
+    protected readonly entities$: BehaviorSubject<TEntity[]>;
+    readonly entityIdsChange: Observable<TId[]>;
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
@@ -32,28 +32,42 @@ export declare abstract class ElderMultiSelectBase<TId, T> extends ElderSelectBa
      * Properties                                                              *
      *                                                                         *
      **************************************************************************/
-    /**
-     * Select the value with the given id.
-     * @param ids
-     */
-    set valueIds(ids: TId[]);
-    get valueIds(): TId[];
+    set entities(entities: TEntity[]);
+    get entities(): TEntity[];
+    set entityIds(ids: TId[]);
+    get entityIds(): TId[];
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    updateValueByEntities(entities: TEntity[]): void;
     /***************************************************************************
      *                                                                         *
      * Internal Methods                                                        *
      *                                                                         *
      **************************************************************************/
-    protected onSuggestionsDcChanged(data: IDataContext<T>): void;
+    protected onSuggestionsDcChanged(data: IDataContext<TEntity>): void;
+    /**
+     * This method is invoked after a value has been written to this control.
+     *
+     */
+    protected writeToControl(value: TValue[]): void;
     /***************************************************************************
      *                                                                         *
      * Private Methods                                                         *
      *                                                                         *
      **************************************************************************/
-    private getValueIds;
+    private entityIdsFromValues;
+    private entityIdFromValue;
+    private entitiesToValues;
+    private entityToValue;
+    private getEntityIds;
     private equalIds;
-    private selectValuesByIds;
+    private equalEntities;
+    private selectEntitiesByIds;
     private loadEntityByIds;
     private findInDataContext;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ElderMultiSelectBase<any, any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderMultiSelectBase<any, any>, never, never, { "valueIds": "valueIds"; }, { "valueIdsChange": "valueIdsChange"; }, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderMultiSelectBase<any, any, any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderMultiSelectBase<any, any, any>, never, never, { "entities": "entities"; "entityIds": "entityIds"; }, { "entityIdsChange": "entityIdsChange"; }, never>;
 }

package/lib/components/select/multi/elder-multi-select-chips/elder-multi-select-chips.component.d.ts

@@ -3,21 +3,21 @@ import { ElderMultiSelectBase } from '../elder-multi-select-base';
 import { Observable } from 'rxjs';
 import { ThemePalette } from '@angular/material/core/common-behaviors/color';
 import * as i0 from "@angular/core";
-declare class ValueChip<T> {
+declare class SelectChip<T> {
     readonly value: T;
     readonly displayText: string;
     readonly color: ThemePalette;
     readonly removeable: boolean;
     constructor(value: T, displayText: string, color: ThemePalette, removeable: boolean);
 }
-export declare class ElderMultiSelectChipsComponent<TId, T> extends ElderMultiSelectBase<TId, T> implements OnInit {
+export declare class ElderMultiSelectChipsComponent<TId = any, TEntity = any, TValue = any> extends ElderMultiSelectBase<TId, TEntity, TValue> implements OnInit {
     /***************************************************************************
      *                                                                         *
      * Fields                                                                  *
      *                                                                         *
      **************************************************************************/
     private readonly log;
-    readonly valuesWrapped$: Observable<ValueChip<T>[]>;
+    readonly selectChips$: Observable<SelectChip<TEntity>[]>;
     private readonly chipColorResolver$;
     selectable: boolean;
     allowRemove: boolean;
@@ -47,18 +47,18 @@ export declare class ElderMultiSelectChipsComponent<TId, T> extends ElderMultiSe
      * A function which returns the color of a given label object.
      */
     set chipColorResolver(fn: (o1: any) => ThemePalette);
-    get isOptionDisabledInternalFn(): (option: T) => boolean;
-    get isOptionHiddenInternalFn(): (option: T) => boolean;
+    get isOptionDisabledInternalFn(): (option: TEntity) => boolean;
+    get isOptionHiddenInternalFn(): (option: TEntity) => boolean;
     /***************************************************************************
      *                                                                         *
      * Public API                                                              *
      *                                                                         *
      **************************************************************************/
-    onOptionSelected(selectedValue: T): void;
-    addLabels(labels: T[]): void;
+    onOptionSelected(selectedValue: TEntity): void;
+    addLabels(labels: TEntity[]): void;
     addLabel(label: any): void;
-    removeLabel(toRemove: T): void;
-    replaceWith(labels: T[]): void;
+    removeLabel(toRemove: TEntity): void;
+    replaceWith(entities: TEntity[]): void;
     /***************************************************************************
      *                                                                         *
      * Private methods                                                         *
@@ -66,7 +66,7 @@ export declare class ElderMultiSelectChipsComponent<TId, T> extends ElderMultiSe
      **************************************************************************/
     private isAlreadyPresent;
     private resetInput;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ElderMultiSelectChipsComponent<any, any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ElderMultiSelectChipsComponent<any, any>, "elder-multi-select-chips", never, { "allowRemove": "allowRemove"; "chipTemplate": "chipTemplate"; "chipColorResolver": "chipColorResolver"; }, {}, ["chipTemplateQuery"], never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderMultiSelectChipsComponent<any, any, any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderMultiSelectChipsComponent<any, any, any>, "elder-multi-select-chips", never, { "allowRemove": "allowRemove"; "chipTemplate": "chipTemplate"; "chipColorResolver": "chipColorResolver"; }, {}, ["chipTemplateQuery"], never>;
 }
 export {};

package/lib/components/select/select-on-tab.directive.d.ts

@@ -2,7 +2,7 @@ import { AfterViewInit, OnDestroy } from '@angular/core';
 import { MatAutocompleteTrigger } from '@angular/material/autocomplete';
 import { ElderSelectBase } from './elder-select-base';
 import * as i0 from "@angular/core";
-export declare class SelectOnTabDirective implements AfterViewInit, OnDestroy {
+export declare class SelectOnTabDirective<TEntity = any, TId = any> implements AfterViewInit, OnDestroy {
     private readonly autoTrigger;
     /***************************************************************************
      *                                                                         *
@@ -13,11 +13,11 @@ export declare class SelectOnTabDirective implements AfterViewInit, OnDestroy {
     private readonly destroy$;
     private readonly controlValueAccessor;
     /**
-     * Whether or not the autocomplete panel was open before the event
+     * Whether the autocomplete panel was open before the event
      */
     private panelOpen;
     /**
-     * Whether or not the user selected an option.
+     * Whether the user selected an option.
      * (We want to ignore selections if there is already a selection present and the user tabs away)
      */
     private userInput;
@@ -26,13 +26,14 @@ export declare class SelectOnTabDirective implements AfterViewInit, OnDestroy {
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(autoTrigger: MatAutocompleteTrigger, elderSelectBase: ElderSelectBase<any, any>);
+    constructor(autoTrigger: MatAutocompleteTrigger, elderSelectBase: ElderSelectBase<any, any, any>);
     /***************************************************************************
      *                                                                         *
      * Event Listener                                                          *
      *                                                                         *
      **************************************************************************/
     onBlur(): void;
+    private updateValueByEntity;
     /***************************************************************************
      *                                                                         *
      * Life Cycle                                                              *
@@ -40,6 +41,6 @@ export declare class SelectOnTabDirective implements AfterViewInit, OnDestroy {
      **************************************************************************/
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SelectOnTabDirective, [null, { skipSelf: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<SelectOnTabDirective, "[elderSelectOnTab]", never, {}, {}, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SelectOnTabDirective<any, any>, [null, { skipSelf: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SelectOnTabDirective<any, any>, "[elderSelectOnTab]", never, {}, {}, never>;
 }