@elderbyte/ngx-starter 14.4.0-beta.2 → 14.4.0-beta.20

package/lib/components/iframes/iframe-host/iframe-host.component.d.ts

@@ -1,10 +1,14 @@
-import { EventEmitter, OnInit } from '@angular/core';
+import { ElementRef, EventEmitter, OnInit } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
+import { TypedEventMessage } from '../typed-event-message';
 import * as i0 from "@angular/core";
+export declare type IFrameStateType = 'LOADING' | 'LOADED' | 'ERROR';
 export declare class IFrameState {
-    readonly state: 'loading' | 'success' | 'error';
-    readonly message: string;
-    constructor(state: 'loading' | 'success' | 'error', message?: string);
+    readonly type: IFrameStateType;
+    readonly message: string | null;
+    constructor(type: IFrameStateType, message?: string | null);
+    get isLoading(): boolean;
+    get hasLoaded(): boolean;
     get hasError(): boolean;
 }
 export interface IFrameParams {
@@ -32,10 +36,11 @@ export declare class IframeHostComponent implements OnInit {
      * Fields                                                                  *
      *                                                                         *
      **************************************************************************/
-    private readonly logger;
+    private readonly log;
     readonly iframeParams$: BehaviorSubject<IFrameParams>;
     readonly iframeState$: BehaviorSubject<IFrameState>;
-    post: EventEmitter<any>;
+    iframe: ElementRef;
+    message: EventEmitter<TypedEventMessage<any, any>>;
     close: EventEmitter<any>;
     /***************************************************************************
      *                                                                         *
@@ -43,13 +48,24 @@ export declare class IframeHostComponent implements OnInit {
      *                                                                         *
      **************************************************************************/
     constructor();
+    /***************************************************************************
+     *                                                                         *
+     * Listeners                                                               *
+     *                                                                         *
+     **************************************************************************/
+    /**
+     * Listens for messages from window.
+     * Makes it possible to react upon messages from iframe child window.
+     *
+     * @param event message from child window
+     */
+    onWindowMessage(event: MessageEvent): boolean;
     /***************************************************************************
      *                                                                         *
      * Lifecycle                                                               *
      *                                                                         *
      **************************************************************************/
     ngOnInit(): void;
-    onMessage(e: any): boolean;
     /***************************************************************************
      *                                                                         *
      * Properties                                                              *
@@ -61,14 +77,16 @@ export declare class IframeHostComponent implements OnInit {
      * Public API                                                              *
      *                                                                         *
      **************************************************************************/
-    onIframeLoadError(err: any): void;
+    onIframeLoadEvent(event: Event): void;
+    onIframeErrorEvent(err: any): void;
+    sendMessageToChild(msg: TypedEventMessage<any, any>): void;
     doClose(event?: Event): void;
     /***************************************************************************
      *                                                                         *
      * Private methods                                                         *
      *                                                                         *
      **************************************************************************/
-    private onChildMessage;
+    private handleMessageFromChild;
     static ɵfac: i0.ɵɵFactoryDeclaration<IframeHostComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<IframeHostComponent, "elder-i-frame-host", never, { "iframeParams": "iframeParams"; }, { "post": "post"; "close": "close"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IframeHostComponent, "elder-i-frame-host", never, { "iframeParams": "iframeParams"; }, { "message": "message"; "close": "close"; }, never, never, false>;
 }

package/lib/components/iframes/iframe.service.d.ts

@@ -1,11 +1,11 @@
 import { Observable } from 'rxjs';
 import { MatDialog } from '@angular/material/dialog';
 import { IFrameParams } from './iframe-host/iframe-host.component';
-import { IframeMessage } from './iframe-message';
+import { TypedEventMessage } from './typed-event-message';
 import * as i0 from "@angular/core";
 export declare class IframeService {
     dialog: MatDialog;
-    static postToParent<T>(message: IframeMessage<T>): void;
+    static postToParent<T, D>(message: TypedEventMessage<T, D>): void;
     /***************************************************************************
      *                                                                         *
      * Fields                                                                  *
@@ -19,7 +19,7 @@ export declare class IframeService {
      **************************************************************************/
     openIframeDialog<R>(params: IFrameParams): Observable<R>;
     postCloseMessage<T>(data?: T): void;
-    postDataMessage<T>(message: IframeMessage<T>): void;
+    postDataMessage<T, D>(message: TypedEventMessage<T, D>): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<IframeService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<IframeService>;
 }

package/lib/components/iframes/typed-event-message.d.ts

@@ -0,0 +1,26 @@
+import { ElderDataViewOptions } from '../data-view/base/elder-data-view-options';
+export declare class TypedEventMessage<T, D> {
+    type: T;
+    data?: D;
+    static isOfType(obj: any): obj is TypedEventMessage<any, any>;
+    constructor(type: T, data?: D);
+}
+export declare class DataViewSelectionInit<T> {
+    options: ElderDataViewOptions;
+    initialSelection: T[];
+    idField: string;
+    constructor(options: ElderDataViewOptions, initialSelection?: T[], idField?: string);
+}
+export declare class DataViewSelection<T> {
+    selection: T[];
+    constructor(selection: T[]);
+}
+export declare type DataViewMessageType = 'SELECTION_INIT' | 'SELECTION_SELECTED';
+export declare class DataViewMessage<T, D = DataViewSelectionInit<T> | DataViewSelection<T>> extends TypedEventMessage<DataViewMessageType, D> {
+    type: DataViewMessageType;
+    data: D;
+    static initialSelection<D>(init: DataViewSelectionInit<D>): DataViewMessage<D>;
+    static selection<D>(selection: DataViewSelection<D>): DataViewMessage<D>;
+    static isOfType(obj: any): obj is DataViewMessage<any, any>;
+    constructor(type: DataViewMessageType, data: D);
+}

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

@@ -10,6 +10,7 @@ import { BooleanInput } from '@angular/cdk/coercion';
 import { ElderFormFieldControlBase } from '../../common/forms/elder-form-field-control-base.directive';
 import { NgControl } from '@angular/forms';
 import { FocusMonitor } from '@angular/cdk/a11y';
+import { TranslateService } from '@ngx-translate/core';
 import * as i0 from "@angular/core";
 export declare type TextResolverFn = (value: any) => string;
 export declare class ElderSelectComponentState {
@@ -87,7 +88,7 @@ export declare abstract class ElderSelectBase<TId, TEntity, TValue> extends Elde
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    protected constructor(zone: NgZone, hostRef: ElementRef, controlType: string, focusMonitor: FocusMonitor, ngControl?: NgControl);
+    protected constructor(zone: NgZone, hostRef: ElementRef, controlType: string, focusMonitor: FocusMonitor, translateService: TranslateService, ngControl?: NgControl);
     /***************************************************************************
      *                                                                         *
      * Properties                                                              *

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

@@ -29,18 +29,19 @@ import * as i27 from "../input/autocomplete/elder-autocomplete.module";
 import * as i28 from "@angular/material/chips";
 import * as i29 from "../../pipes/elder-pipes.module";
 import * as i30 from "@angular/material/tooltip";
+import * as i31 from "../theme/elder-theme.module";
 export { ElderSelectValueDirective } from './elder-select-value.directive';
 export * from './elder-select-chip.directive';
 export { ElderSelectOnTabDirective } from './elder-select-on-tab.directive';
 export { ElderSelectComponent } from './single/elder-select/elder-select.component';
 export { TemplatedSelectionDialogComponent, ISelectionModelDialogOptions } from './popup/templated-selection-dialog/templated-selection-dialog.component';
-export { SelectionModelPopupDirective, ElderDataViewSelectionMode } from './popup/selection-model-popup.directive';
+export { SelectionModelPopupDirective } 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 { ElderAutoSelectFirstDirective } from './auto/elder-auto-select-first.directive';
 export { ElderClearSelectDirective } from './single/elder-clear-select.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.ElderSelectOnTabDirective, typeof i6.ElderMultiSelectChipsComponent, typeof i7.ElderSelectChipDirective, typeof i7.ElderSelectChipAvatarDirective, typeof i8.ElderAutoSelectFirstDirective, typeof i9.ElderClearSelectDirective, typeof i7.ElderSelectCustomInputDirective], [typeof i10.CommonModule, typeof i11.FormsModule, typeof i11.ReactiveFormsModule, typeof i12.MatFormFieldModule, typeof i13.MatIconModule, typeof i14.MatSelectModule, typeof i15.MatDialogModule, typeof i16.MatButtonModule, typeof i17.MatInputModule, typeof i18.MatAutocompleteModule, typeof i19.MatToolbarModule, typeof i20.MatProgressBarModule, typeof i21.MatProgressSpinnerModule, typeof i22.FlexModule, typeof i23.TranslateModule, typeof i24.ElderFormsDirectivesModule, typeof i25.ElderTableModule, typeof i26.ElderInfiniteScrollModule, typeof i27.ElderAutocompleteModule, typeof i28.MatChipsModule, typeof i29.ElderPipesModule, typeof i30.MatTooltipModule], [typeof i1.ElderSelectComponent, typeof i2.ElderSelectValueDirective, typeof i3.TemplatedSelectionDialogComponent, typeof i4.SelectionModelPopupDirective, typeof i6.ElderMultiSelectChipsComponent, typeof i7.ElderSelectChipDirective, typeof i7.ElderSelectChipAvatarDirective, typeof i8.ElderAutoSelectFirstDirective, typeof i9.ElderClearSelectDirective, typeof i7.ElderSelectCustomInputDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ElderSelectModule, [typeof i1.ElderSelectComponent, typeof i2.ElderSelectValueDirective, typeof i3.TemplatedSelectionDialogComponent, typeof i4.SelectionModelPopupDirective, typeof i5.ElderSelectOnTabDirective, typeof i6.ElderMultiSelectChipsComponent, typeof i7.ElderSelectChipDirective, typeof i7.ElderSelectChipAvatarDirective, typeof i8.ElderAutoSelectFirstDirective, typeof i9.ElderClearSelectDirective, typeof i7.ElderSelectCustomInputDirective], [typeof i10.CommonModule, typeof i11.FormsModule, typeof i11.ReactiveFormsModule, typeof i12.MatFormFieldModule, typeof i13.MatIconModule, typeof i14.MatSelectModule, typeof i15.MatDialogModule, typeof i16.MatButtonModule, typeof i17.MatInputModule, typeof i18.MatAutocompleteModule, typeof i19.MatToolbarModule, typeof i20.MatProgressBarModule, typeof i21.MatProgressSpinnerModule, typeof i22.FlexModule, typeof i23.TranslateModule, typeof i24.ElderFormsDirectivesModule, typeof i25.ElderTableModule, typeof i26.ElderInfiniteScrollModule, typeof i27.ElderAutocompleteModule, typeof i28.MatChipsModule, typeof i29.ElderPipesModule, typeof i30.MatTooltipModule, typeof i31.ElderThemeModule], [typeof i1.ElderSelectComponent, typeof i2.ElderSelectValueDirective, typeof i3.TemplatedSelectionDialogComponent, typeof i4.SelectionModelPopupDirective, typeof i6.ElderMultiSelectChipsComponent, typeof i7.ElderSelectChipDirective, typeof i7.ElderSelectChipAvatarDirective, typeof i8.ElderAutoSelectFirstDirective, typeof i9.ElderClearSelectDirective, typeof i7.ElderSelectCustomInputDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ElderSelectModule>;
 }

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

@@ -5,6 +5,9 @@ import { Observable } from 'rxjs';
 import { NgControl } from '@angular/forms';
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { IElderMultiEntityValueAccessor } from '../../../common/forms/elder-multi-entity-value-accessor';
+import { Sort } from '../../../common/data/sort';
+import { ElderDialogService } from '../../dialogs/elder-dialog.service';
+import { TranslateService } from '@ngx-translate/core';
 import * as i0 from "@angular/core";
 /**
  * Base component implementation of elder-multi-select.
@@ -16,6 +19,7 @@ import * as i0 from "@angular/core";
  *
  */
 export declare abstract class ElderMultiSelectBase<TId, TEntity, TValue> extends ElderSelectBase<TId, TEntity, TValue[]> implements IElderMultiEntityValueAccessor<TEntity, TId, TValue> {
+    private readonly dialogService;
     /***************************************************************************
      *                                                                         *
      * Fields                                                                  *
@@ -24,6 +28,17 @@ export declare abstract class ElderMultiSelectBase<TId, TEntity, TValue> extends
     private readonly logger;
     private readonly _entityIds$;
     private readonly _entities$;
+    /**
+     * Defines how the entities should be sorted locally.
+     * This affects how entities are displayed when more than
+     * one is selected, such as in a chip list.
+     */
+    entitiesSorts: Sort[];
+    /**
+     * If enabled, before removing selected entities
+     * the user will be prompted to confirm.
+     */
+    confirmRemoval: boolean;
     readonly entityIdsChange: Observable<TId[]>;
     readonly entitiesChange: Observable<TEntity[]>;
     /**
@@ -41,7 +56,7 @@ export declare abstract class ElderMultiSelectBase<TId, TEntity, TValue> extends
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    protected constructor(zone: NgZone, hostRef: ElementRef, controlType: string, focusMonitor: FocusMonitor, ngControl?: NgControl);
+    protected constructor(zone: NgZone, hostRef: ElementRef, controlType: string, focusMonitor: FocusMonitor, translateService: TranslateService, dialogService: ElderDialogService, ngControl?: NgControl);
     private awaitEntitiesWithId;
     /***************************************************************************
      *                                                                         *
@@ -64,6 +79,9 @@ export declare abstract class ElderMultiSelectBase<TId, TEntity, TValue> extends
     updateValueByEntities(entities: TEntity[]): void;
     appendEntities(newEntities: TEntity[]): void;
     appendEntity(newEntity: any): void;
+    requestRemoveEntity(toRemove: TEntity, skipConfirm?: boolean): void;
+    requestRemoveEntities(toRemove: TEntity[], skipConfirm?: boolean): void;
+    removeEntities(toRemove: TEntity[]): void;
     removeEntity(toRemove: TEntity): void;
     openSelectionPopup(event: Event): void;
     entityToValue(entity: TEntity): TValue;
@@ -72,6 +90,7 @@ export declare abstract class ElderMultiSelectBase<TId, TEntity, TValue> extends
      * Internal Methods                                                        *
      *                                                                         *
      **************************************************************************/
+    protected valuesEquals(a: TValue[], b: TValue[]): boolean;
     protected onDataContextChanged(data: IDataContext<TEntity>): void;
     /**
      * This method is invoked after a value has been written to this control.
@@ -91,8 +110,11 @@ export declare abstract class ElderMultiSelectBase<TId, TEntity, TValue> extends
     private equalIds;
     private equalEntities;
     private selectEntitiesByIds;
-    private loadEntityByIds;
+    private findOrLoadEntitiesByIds;
+    private loadEntitiesByIds;
     private findInDataContext;
+    private writeEntitiesSorted;
+    private sortEntities;
     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"; "entitiesChange": "entitiesChange"; "entityIdsUpdated": "entityIdsUpdated"; "entitiesUpdated": "entitiesUpdated"; }, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderMultiSelectBase<any, any, any>, never, never, { "entitiesSorts": "entitiesSorts"; "confirmRemoval": "confirmRemoval"; "entities": "entities"; "entityIds": "entityIds"; }, { "entityIdsChange": "entityIdsChange"; "entitiesChange": "entitiesChange"; "entityIdsUpdated": "entityIdsUpdated"; "entitiesUpdated": "entitiesUpdated"; }, never, never, false>;
 }

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

@@ -4,6 +4,8 @@ import { Observable } from 'rxjs';
 import { ThemePalette } from '@angular/material/core';
 import { NgControl } from '@angular/forms';
 import { FocusMonitor } from '@angular/cdk/a11y';
+import { ElderDialogService } from '../../../dialogs/elder-dialog.service';
+import { TranslateService } from '@ngx-translate/core';
 import * as i0 from "@angular/core";
 declare class ChipModel<T> {
     readonly value: T;
@@ -13,7 +15,6 @@ declare class ChipModel<T> {
     constructor(value: T, displayText: string, color: ThemePalette, removeable: boolean);
 }
 export declare class ElderMultiSelectChipsComponent<TId = any, TEntity = any, TValue = any> extends ElderMultiSelectBase<TId, TEntity, TValue> {
-    ngControl: NgControl;
     /***************************************************************************
      *                                                                         *
      * Fields                                                                  *
@@ -36,7 +37,7 @@ export declare class ElderMultiSelectChipsComponent<TId = any, TEntity = any, TV
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(hostRef: ElementRef, zone: NgZone, focusMonitor: FocusMonitor, ngControl: NgControl);
+    constructor(hostRef: ElementRef, zone: NgZone, focusMonitor: FocusMonitor, translateService: TranslateService, dialogService: ElderDialogService, ngControl: NgControl);
     /***************************************************************************
      *                                                                         *
      * Host Bindings                                                           *
@@ -70,6 +71,8 @@ export declare class ElderMultiSelectChipsComponent<TId = any, TEntity = any, TV
      *                                                                         *
      **************************************************************************/
     resolveChipValue(e1: TEntity): any;
+    onChipKeyDown(event: KeyboardEvent, toRemove: TEntity): void;
+    onClickRemoveChip(event: MouseEvent, toRemove: TEntity): void;
     focus(options?: FocusOptions): void;
     blur(): void;
     /***************************************************************************
@@ -80,7 +83,7 @@ export declare class ElderMultiSelectChipsComponent<TId = any, TEntity = any, TV
     private buildChipModelsOrFallback;
     private buildChipFallbackModels;
     private buildChipModels;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ElderMultiSelectChipsComponent<any, any, any>, [null, null, null, { optional: true; self: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderMultiSelectChipsComponent<any, any, any>, [null, null, null, null, null, { optional: true; self: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ElderMultiSelectChipsComponent<any, any, any>, "elder-multi-select-chips", never, { "allowRemove": "allowRemove"; "chipTemplate": "chipTemplate"; "chipAvatarTemplate": "chipAvatarTemplate"; "customInputTemplate": "customInputTemplate"; "chipColorEnabled": "chipColorEnabled"; "chipColorResolver": "chipColorResolver"; }, {}, ["chipTemplateQuery", "chipAvatarTemplateQuery", "customInputTemplateQuery"], never, false>;
 }
 export {};

package/lib/components/select/multi/elder-multi-select-form-field.d.ts

@@ -3,7 +3,7 @@ import { ElderSelectValueDirective } from '../elder-select-value.directive';
 import { ElderApplyControlFn } from '../../../common/forms/elder-from-field-base';
 import { ElderMultiSelectBase } from './elder-multi-select-base';
 import { ElderFromFieldMultiEntityBase } from '../../../common/forms/elder-from-field-multi-entity-base';
-import { ElderSelectChipAvatarDirective, ElderSelectChipDirective } from '../elder-select-chip.directive';
+import { ElderSelectChipAvatarDirective, ElderSelectChipDirective, ElderSelectCustomInputDirective } from '../elder-select-chip.directive';
 import { SelectionModelPopupDirective } from '../popup/selection-model-popup.directive';
 import * as i0 from "@angular/core";
 export declare abstract class ElderMultiSelectFormField<TEntity, TId, TValue = TEntity | TId> extends ElderFromFieldMultiEntityBase<TEntity, TId, TValue, ElderMultiSelectBase<TId, TEntity, TValue>> implements AfterViewInit {
@@ -16,6 +16,7 @@ export declare abstract class ElderMultiSelectFormField<TEntity, TId, TValue = T
     selectionModelPopupDirective: SelectionModelPopupDirective;
     selectChipDirective: ElderSelectChipDirective;
     selectChipAvatarDirective: ElderSelectChipAvatarDirective;
+    selectCustomInputDirective: ElderSelectCustomInputDirective;
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *

package/lib/components/select/popup/selection-model-popup.directive.d.ts

@@ -1,26 +1,18 @@
-import { ChangeDetectorRef, OnDestroy, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
+import { ChangeDetectorRef, TemplateRef, ViewContainerRef } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { Observable } from 'rxjs';
 import { KeyGetterFn, SelectionModel } from '../../../common/selection/selection-model';
 import { Sort } from '../../../common/data/sort';
 import { Filter } from '../../../common/data/filter';
+import { ElderDataViewOptionsProvider } from '../../data-view/base/elder-data-view-options-provider';
 import * as i0 from "@angular/core";
-/**
- * Configures the selection mode on supporting components.
- */
-export declare class ElderDataViewSelectionMode {
-    sorts: Sort[];
-    filters: Filter[];
-    multi: boolean;
-    constructor();
-}
 export declare function createSelectionModel(): SelectionModel<any>;
-export declare function createDataViewSelection(): ElderDataViewSelectionMode;
-export declare class SelectionModelPopupDirective implements OnInit, OnDestroy {
+export declare function createDataViewOptionsProvider(): ElderDataViewOptionsProvider;
+export declare class SelectionModelPopupDirective {
     private readonly templateRef;
     private readonly viewContainer;
     private readonly dialog;
-    private readonly dataViewSelectionMode;
+    private readonly dataViewOptionsProvider;
     private readonly selectionModel;
     private readonly changeDetectorRef;
     /***************************************************************************
@@ -36,19 +28,7 @@ export declare class SelectionModelPopupDirective implements OnInit, OnDestroy {
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(templateRef: TemplateRef<any>, viewContainer: ViewContainerRef, dialog: MatDialog, dataViewSelectionMode: ElderDataViewSelectionMode, selectionModel: SelectionModel<any>, changeDetectorRef: ChangeDetectorRef);
-    /***************************************************************************
-     *                                                                         *
-     * Host Listeners                                                          *
-     *                                                                         *
-     **************************************************************************/
-    /***************************************************************************
-     *                                                                         *
-     * Life Cycle                                                              *
-     *                                                                         *
-     **************************************************************************/
-    ngOnInit(): void;
-    ngOnDestroy(): void;
+    constructor(templateRef: TemplateRef<any>, viewContainer: ViewContainerRef, dialog: MatDialog, dataViewOptionsProvider: ElderDataViewOptionsProvider, selectionModel: SelectionModel<any>, changeDetectorRef: ChangeDetectorRef);
     /***************************************************************************
      *                                                                         *
      * Public API                                                              *
@@ -65,5 +45,5 @@ export declare class SelectionModelPopupDirective implements OnInit, OnDestroy {
      **************************************************************************/
     private openSelectDialog;
     static ɵfac: i0.ɵɵFactoryDeclaration<SelectionModelPopupDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<SelectionModelPopupDirective, "[elderSelectionModelPopup]", never, { "elderSelectionModelPopupTransform": "elderSelectionModelPopupTransform"; }, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SelectionModelPopupDirective, "[elderSelectionModelPopup]", ["elderSelectionModelPopup"], { "elderSelectionModelPopupTransform": "elderSelectionModelPopupTransform"; }, {}, never, never, false>;
 }

package/lib/components/select/public_api.d.ts

@@ -1,4 +1,5 @@
 export * from './elder-select.module';
+export * from './elder-select-base';
 export * from './single/elder-select-form-field';
 export * from './multi/elder-multi-select-base';
 export * from './multi/elder-multi-select-form-field';

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

@@ -3,16 +3,16 @@ import { IDataContext } from '../../../../common/data/data-context/data-context'
 import { Observable } from 'rxjs';
 import { BooleanInput } from '@angular/cdk/coercion';
 import { MatAutocompleteTrigger } from '@angular/material/autocomplete';
-import { ElderSelectBase, TextResolverFn } from '../../elder-select-base';
+import { ElderSelectBase } from '../../elder-select-base';
 import { IElderEntityValueAccessor } from '../../../../common/forms/elder-entity-value-accessor';
 import { NgControl } from '@angular/forms';
 import { FocusMonitor } from '@angular/cdk/a11y';
+import { TranslateService } from '@ngx-translate/core';
 import * as i0 from "@angular/core";
 declare class EntityContext<T> {
     readonly value: T;
-    readonly hintText: string;
     readonly displayText: string;
-    constructor(value: T, hintText: string, displayText: string);
+    constructor(value: T, displayText: string);
 }
 /**
  * The elder-select control allows to select a single
@@ -32,7 +32,6 @@ export declare class ElderSelectComponent<TEntity = any, TId = any, TValue = TEn
      *                                                                         *
      **************************************************************************/
     private readonly logger;
-    private readonly hintPropertyResolver$;
     private _allowNull;
     inputRef: ElementRef<HTMLInputElement>;
     /**
@@ -61,7 +60,7 @@ export declare class ElderSelectComponent<TEntity = any, TId = any, TValue = TEn
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(hostRef: ElementRef, zone: NgZone, focusMonitor: FocusMonitor, ngControl: NgControl);
+    constructor(hostRef: ElementRef, zone: NgZone, focusMonitor: FocusMonitor, translateService: TranslateService, ngControl: NgControl);
     /***************************************************************************
      *                                                                         *
      * Life Cycle                                                              *
@@ -103,8 +102,6 @@ export declare class ElderSelectComponent<TEntity = any, TId = any, TValue = TEn
     get entity$(): Observable<TEntity>;
     set entityId(id: TId);
     get entityId(): TId;
-    set hintProperty(property: string);
-    set hintPropertyResolver(resolver: TextResolverFn);
     /***************************************************************************
      *                                                                         *
      * Public API                                                              *
@@ -151,7 +148,7 @@ export declare class ElderSelectComponent<TEntity = any, TId = any, TValue = TEn
      *
      */
     protected writeToControl(value: TValue): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ElderSelectComponent<any, any, any>, [null, null, null, { optional: true; self: true; }]>;
-    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"; "entityIdUpdated": "entityIdUpdated"; "entityChange": "entityChange"; "entityUpdated": "entityUpdated"; }, never, never, false>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderSelectComponent<any, any, any>, [null, null, null, null, { optional: true; self: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderSelectComponent<any, any, any>, "elder-select", never, { "nullDisplay": "nullDisplay"; "autocomplete": "autocomplete"; "allowNull": "allowNull"; "entity": "entity"; "entityId": "entityId"; }, { "entityIdChange": "entityIdChange"; "entityIdUpdated": "entityIdUpdated"; "entityChange": "entityChange"; "entityUpdated": "entityUpdated"; }, never, never, false>;
 }
 export {};

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

@@ -54,6 +54,7 @@ export declare class ElderShellComponent implements OnInit, OnDestroy {
     private readonly destroy$;
     color: ThemePalette;
     readonly menuColor$: BehaviorSubject<ThemePalette>;
+    readonly menuIconColor$: BehaviorSubject<ThemePalette>;
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
@@ -74,6 +75,8 @@ export declare class ElderShellComponent implements OnInit, OnDestroy {
      **************************************************************************/
     set menuColor(c: ThemePalette);
     get menuColor(): ThemePalette;
+    set menuIconColor(c: ThemePalette);
+    get menuIconColor(): ThemePalette;
     /***************************************************************************
      *                                                                         *
      * Public API                                                              *
@@ -92,5 +95,5 @@ export declare class ElderShellComponent implements OnInit, OnDestroy {
     private isContained;
     private checkSoon;
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderShellComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ElderShellComponent, "elder-shell, ebs-shell", never, { "sideNavToggleEnabled": "sideNavToggleEnabled"; "leftSideAutoFocus": "leftSideAutoFocus"; "rightSideAutoFocus": "rightSideAutoFocus"; "color": "color"; "menuColor": "menuColor"; }, {}, ["sideContentLeft", "sideContentRight", "centerContent"], never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderShellComponent, "elder-shell, ebs-shell", never, { "sideNavToggleEnabled": "sideNavToggleEnabled"; "leftSideAutoFocus": "leftSideAutoFocus"; "rightSideAutoFocus": "rightSideAutoFocus"; "color": "color"; "menuColor": "menuColor"; "menuIconColor": "menuIconColor"; }, {}, ["sideContentLeft", "sideContentRight", "centerContent"], never, false>;
 }

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@elderbyte/ngx-starter",
-  "version": "14.4.0-beta.2",
+  "version": "14.4.0-beta.20",
   "peerDependencies": {
-    "@angular/common": "^14.0.1",
-    "@angular/core": "^14.0.1",
-    "@angular/material": "^14.0.1",
+    "@angular/common": "^14.0.0",
+    "@angular/core": "^14.0.0",
+    "@angular/material": "^14.0.0",
     "@angular/flex-layout": "^14.0.0-beta.40",
     "@ngx-translate/core": "^14.0.0",
     "rxjs": "^7.5.5",

package/src/lib/components/cards/elder-card/elder-card.component.scss

@@ -9,15 +9,11 @@
   $foreground: map-get($theme, foreground);
 
   .elder-card-title {
-
     color: mat.get-color-from-palette($accent, default, 1);
-
   }
 
   .elder-card-subtitle {
-
     color: mat.get-color-from-palette($primary, default, 1);
-
   }
 
   .elder-card {
@@ -26,9 +22,8 @@
   }
 
   .elder-card-flat {
-    border: 1px solid #e7e7e7;
+    border: 1px solid mat.get-color-from-palette($foreground, divider);
   }
-
 }
 
 

package/src/lib/components/select/_elder-select-base.scss

@@ -0,0 +1,131 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../../../../theming/elder-typography-utils' as elder-typography;
+
+@mixin typography($typography-config) {
+  $config: mat.private-typography-to-2014-config($typography-config);
+  // The unit-less line-height from the font config.
+  $line-height: mat.line-height($config, input);
+  $font-size: mat.font-size($config, input);
+  $line-height-em: elder-typography.coerce-unitless-to-em($line-height);
+
+  .elder-icon-button-small {
+    width: $line-height-em !important;
+    height: $line-height-em !important;
+    line-height: $line-height-em !important;
+
+    .mat-icon {
+      width: $line-height-em !important;
+      height: $line-height-em !important;
+      line-height: $line-height-em !important;
+    }
+    .material-icons {
+      font-size: $line-height-em !important;
+    }
+  }
+
+  .elder-input-prefix-icon-container {
+    height: $line-height-em !important;
+    min-width: $line-height-em !important;
+  }
+
+  .elder-icon-small {
+    width: $line-height-em !important;
+    height: $line-height-em !important;
+    line-height: $line-height-em !important;
+    font-size: $font-size !important;
+  }
+}
+
+
+@mixin _palette-styles($palette) {
+  background: mat.get-color-from-palette($palette);
+  color: mat.get-color-from-palette($palette, default-contrast);
+}
+
+@mixin _form-field-overrides {
+  .mat-form-field-underline,
+  .mat-form-field-ripple,
+  .mat-focused .mat-form-field-ripple {
+    background-color: currentColor;
+  }
+
+  .mat-form-field-label,
+  .mat-focused .mat-form-field-label,
+  .elder-select-value,
+  .elder-select-icon,
+  .mat-form-field.mat-focused .elder-select-icon {
+    color: inherit!important;
+  }
+
+  .mat-input-element {
+    caret-color: currentColor;
+  }
+}
+
+@mixin color($color-config) {
+  $foreground: map.get($color-config, foreground);
+  $background: map.get($color-config, background);
+  $primary: map.get($color-config, primary);
+  $accent: map.get($color-config, accent);
+  $warn: map.get($color-config, warn);
+
+  .elder-select-value {
+    color: mat.get-color-from-palette($foreground, text);
+  }
+
+  .elder-select-disabled .elder-select-value {
+    color: mat.get-color-from-palette($foreground, disabled-text);
+  }
+
+  .elder-select-icon {
+    color: mat.get-color-from-palette($foreground, secondary-text);
+  }
+
+  .mat-toolbar {
+    background: mat.get-color-from-palette($background, app-bar);
+    color: mat.get-color-from-palette($foreground, text);
+
+    &.mat-primary {
+      @include _palette-styles($primary);
+    }
+
+    &.mat-accent {
+      @include _palette-styles($accent);
+    }
+
+    &.mat-warn {
+      @include _palette-styles($warn);
+    }
+
+    @include _form-field-overrides;
+  }
+
+  .mat-form-field {
+    &.mat-focused {
+      &.mat-primary .elder-select-icon {
+        color: mat.get-color-from-palette($primary, text);
+      }
+
+      &.mat-accent .elder-select-icon {
+        color: mat.get-color-from-palette($accent, text);
+      }
+
+      &.mat-warn .elder-select-icon {
+        color: mat.get-color-from-palette($warn, text);
+      }
+    }
+
+    &.mat-form-field-invalid .elder-select-base {
+      .elder-select-icon {
+        color: mat.get-color-from-palette($warn, text);
+      }
+    }
+
+    &.mat-form-field-disabled .elder-select-base {
+      .elder-select-icon {
+        color: mat.get-color-from-palette($foreground, disabled-text);
+      }
+    }
+  }
+}