@elderbyte/ngx-starter 14.3.1 → 14.4.0-beta.10

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

@@ -1,7 +1,12 @@
-import { NgZone } from '@angular/core';
+import { ElementRef, NgZone } from '@angular/core';
 import { ElderSelectBase } from '../elder-select-base';
 import { IDataContext } from '../../../common/data/data-context/data-context';
-import { BehaviorSubject, Observable } from 'rxjs';
+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 * as i0 from "@angular/core";
 /**
  * Base component implementation of elder-multi-select.
@@ -12,15 +17,29 @@ import * as i0 from "@angular/core";
  * - The backing Value is a list of the current selected entities. T[]
  *
  */
-export declare abstract class ElderMultiSelectBase<TId, TEntity, TValue> extends ElderSelectBase<TId, TEntity, TValue[]> {
+export declare abstract class ElderMultiSelectBase<TId, TEntity, TValue> extends ElderSelectBase<TId, TEntity, TValue[]> implements IElderMultiEntityValueAccessor<TEntity, TId, TValue> {
+    private readonly dialogService;
     /***************************************************************************
      *                                                                         *
      * Fields                                                                  *
      *                                                                         *
      **************************************************************************/
     private readonly logger;
-    protected readonly entities$: BehaviorSubject<TEntity[]>;
+    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[]>;
     /**
      * Similar to entity-id change, but emits only when the user
      * has updated the value.
@@ -36,38 +55,42 @@ export declare abstract class ElderMultiSelectBase<TId, TEntity, TValue> extends
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    protected constructor(zone: NgZone);
+    protected constructor(zone: NgZone, hostRef: ElementRef, controlType: string, focusMonitor: FocusMonitor, dialogService: ElderDialogService, ngControl?: NgControl);
     private awaitEntitiesWithId;
     /***************************************************************************
      *                                                                         *
      * Properties                                                              *
      *                                                                         *
      **************************************************************************/
-    updateValueByEntities(entities: TEntity[]): void;
-    /***************************************************************************
-     *                                                                         *
-     * Properties                                                              *
-     *                                                                         *
-     **************************************************************************/
+    get entities$(): Observable<TEntity[]>;
+    get entityIds$(): Observable<TId[]>;
     set entities(entities: TEntity[]);
     get entities(): TEntity[];
     set entityIds(ids: TId[]);
     get entityIds(): TId[];
+    get isOptionDisabledInternalFn(): (option: TEntity) => boolean;
+    get isOptionHiddenInternalFn(): (option: TEntity) => boolean;
     /***************************************************************************
      *                                                                         *
      * Public API                                                              *
      *                                                                         *
      **************************************************************************/
+    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;
     /***************************************************************************
      *                                                                         *
      * Internal Methods                                                        *
      *                                                                         *
      **************************************************************************/
-    protected onSuggestionsDcChanged(data: IDataContext<TEntity>): void;
+    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.
      *
@@ -78,16 +101,19 @@ export declare abstract class ElderMultiSelectBase<TId, TEntity, TValue> extends
      * Private Methods                                                         *
      *                                                                         *
      **************************************************************************/
+    private isAlreadyPresent;
     private entityIdsFromValues;
     private entityIdFromValue;
     private entitiesToValues;
-    private entityToValue;
     private getEntityIds;
     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"; "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

@@ -1,7 +1,10 @@
-import { NgZone, TemplateRef } from '@angular/core';
+import { NgZone, ElementRef, TemplateRef } from '@angular/core';
 import { ElderMultiSelectBase } from '../elder-multi-select-base';
 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 * as i0 from "@angular/core";
 declare class ChipModel<T> {
     readonly value: T;
@@ -21,18 +24,29 @@ export declare class ElderMultiSelectChipsComponent<TId = any, TEntity = any, TV
     private readonly chipColorResolver$;
     selectable: boolean;
     allowRemove: boolean;
-    chipColorEnabled: boolean;
-    private inputControl;
     chipTemplateQuery: TemplateRef<any>;
     private _chipTemplate;
     chipAvatarTemplateQuery: TemplateRef<any>;
     private _chipAvatarTemplate;
+    customInputTemplateQuery: TemplateRef<any>;
+    private _customInputTemplate;
+    private _chipColorEnabled;
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(zone: NgZone);
+    constructor(hostRef: ElementRef, zone: NgZone, focusMonitor: FocusMonitor, dialogService: ElderDialogService, ngControl: NgControl);
+    /***************************************************************************
+     *                                                                         *
+     * Host Bindings                                                           *
+     *                                                                         *
+     **************************************************************************/
+    get hostClass(): string;
+    get disabledClass(): boolean;
+    get errorStateClass(): boolean;
+    get requiredClass(): boolean;
+    get emptyClass(): boolean;
     /***************************************************************************
      *                                                                         *
      * Properties                                                              *
@@ -42,20 +56,22 @@ export declare class ElderMultiSelectChipsComponent<TId = any, TEntity = any, TV
     get chipTemplate(): TemplateRef<any>;
     set chipAvatarTemplate(template: TemplateRef<any>);
     get chipAvatarTemplate(): TemplateRef<any>;
+    set customInputTemplate(template: TemplateRef<any>);
+    get customInputTemplate(): TemplateRef<any>;
+    set chipColorEnabled(enabled: boolean);
+    get chipColorEnabled(): boolean;
     /**
      * A function which returns the color of a given label object.
      */
     set chipColorResolver(fn: (o1: any) => ThemePalette);
-    get isOptionDisabledInternalFn(): (option: TEntity) => boolean;
-    get isOptionHiddenInternalFn(): (option: TEntity) => boolean;
     /***************************************************************************
      *                                                                         *
      * Public API                                                              *
      *                                                                         *
      **************************************************************************/
-    onOptionSelected(selectedValue: TEntity): void;
     resolveChipValue(e1: TEntity): any;
-    get compareWithFn(): (e1: TEntity, e2: TEntity) => boolean;
+    onChipKeyDown(event: KeyboardEvent, toRemove: TEntity): void;
+    onClickRemoveChip(event: MouseEvent, toRemove: TEntity): void;
     focus(options?: FocusOptions): void;
     blur(): void;
     /***************************************************************************
@@ -63,9 +79,10 @@ export declare class ElderMultiSelectChipsComponent<TId = any, TEntity = any, TV
      * Private methods                                                         *
      *                                                                         *
      **************************************************************************/
-    private isAlreadyPresent;
-    private resetInput;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ElderMultiSelectChipsComponent<any, any, any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ElderMultiSelectChipsComponent<any, any, any>, "elder-multi-select-chips", never, { "allowRemove": "allowRemove"; "chipColorEnabled": "chipColorEnabled"; "chipTemplate": "chipTemplate"; "chipColorResolver": "chipColorResolver"; }, {}, ["chipTemplateQuery", "chipAvatarTemplateQuery"], never, false>;
+    private buildChipModelsOrFallback;
+    private buildChipFallbackModels;
+    private buildChipModels;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderMultiSelectChipsComponent<any, any, any>, [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

@@ -0,0 +1,34 @@
+import { AfterViewInit } from '@angular/core';
+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, 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 {
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+    selectValueTemplate: ElderSelectValueDirective;
+    selectionModelPopupDirective: SelectionModelPopupDirective;
+    selectChipDirective: ElderSelectChipDirective;
+    selectChipAvatarDirective: ElderSelectChipAvatarDirective;
+    selectCustomInputDirective: ElderSelectCustomInputDirective;
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    protected constructor(initSelectFn: ElderApplyControlFn<ElderMultiSelectBase<TId, TEntity, TValue>>);
+    /***************************************************************************
+     *                                                                         *
+     * Life Cycle                                                              *
+     *                                                                         *
+     **************************************************************************/
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderMultiSelectFormField<any, any, any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderMultiSelectFormField<any, any, any>, never, never, {}, {}, never, never, false>;
+}

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

@@ -1,4 +1,4 @@
-import { OnDestroy, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
+import { ChangeDetectorRef, OnDestroy, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { Observable } from 'rxjs';
 import { KeyGetterFn, SelectionModel } from '../../../common/selection/selection-model';
@@ -22,6 +22,7 @@ export declare class SelectionModelPopupDirective implements OnInit, OnDestroy {
     private readonly dialog;
     private readonly dataViewSelectionMode;
     private readonly selectionModel;
+    private readonly changeDetectorRef;
     /***************************************************************************
      *                                                                         *
      * Fields                                                                  *
@@ -35,7 +36,7 @@ export declare class SelectionModelPopupDirective implements OnInit, OnDestroy {
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(templateRef: TemplateRef<any>, viewContainer: ViewContainerRef, dialog: MatDialog, dataViewSelectionMode: ElderDataViewSelectionMode, selectionModel: SelectionModel<any>);
+    constructor(templateRef: TemplateRef<any>, viewContainer: ViewContainerRef, dialog: MatDialog, dataViewSelectionMode: ElderDataViewSelectionMode, selectionModel: SelectionModel<any>, changeDetectorRef: ChangeDetectorRef);
     /***************************************************************************
      *                                                                         *
      * Host Listeners                                                          *

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

@@ -1 +1,4 @@
 export * from './elder-select.module';
+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-clear-select.directive.d.ts

@@ -0,0 +1,34 @@
+import { OnDestroy, OnInit } from '@angular/core';
+import { ElderSelectComponent } from './elder-select/elder-select.component';
+import * as i0 from "@angular/core";
+export declare class ElderClearSelectDirective implements OnInit, OnDestroy {
+    private readonly select;
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+    private readonly log;
+    private readonly destroy$;
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(select: ElderSelectComponent);
+    /***************************************************************************
+     *                                                                         *
+     * Life Cycle                                                              *
+     *                                                                         *
+     **************************************************************************/
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    private clearSelect;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderClearSelectDirective, [{ host: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderClearSelectDirective, "[elderClearSelect]", never, {}, {}, never, never, false>;
+}

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

@@ -1,9 +1,12 @@
-import { ElementRef, NgZone, OnDestroy, OnInit } from '@angular/core';
-import { IDataContext } from '../../../common/data/data-context/data-context';
+import { ElementRef, NgZone } from '@angular/core';
+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 { IElderEntityValueAccessor } from '../elder-entity-value-accessor';
+import { ElderSelectBase, TextResolverFn } 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 * as i0 from "@angular/core";
 declare class EntityContext<T> {
     readonly value: T;
@@ -21,7 +24,8 @@ declare class EntityContext<T> {
  * - Support entity id handling, input / output is the entity id vs full value.
  *
  */
-export declare class ElderSelectComponent<TEntity = any, TId = any, TValue = TEntity | TId> extends ElderSelectBase<TId, TEntity, TValue> implements IElderEntityValueAccessor<TEntity, TId, TValue>, OnInit, OnDestroy {
+export declare class ElderSelectComponent<TEntity = any, TId = any, TValue = TEntity | TId> extends ElderSelectBase<TId, TEntity, TValue> implements IElderEntityValueAccessor<TEntity, TId, TValue> {
+    ngControl: NgControl;
     /***************************************************************************
      *                                                                         *
      * Fields                                                                  *
@@ -50,7 +54,6 @@ export declare class ElderSelectComponent<TEntity = any, TId = any, TValue = TEn
     private readonly _entity$;
     private _autocomplete;
     readonly entityWrapped$: Observable<EntityContext<TEntity>>;
-    private readonly unsubscribe$;
     readonly inputText$: Observable<string>;
     private entityContext;
     /***************************************************************************
@@ -58,25 +61,34 @@ export declare class ElderSelectComponent<TEntity = any, TId = any, TValue = TEn
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(zone: NgZone);
+    constructor(hostRef: ElementRef, zone: NgZone, focusMonitor: FocusMonitor, ngControl: NgControl);
     /***************************************************************************
      *                                                                         *
      * Life Cycle                                                              *
      *                                                                         *
      **************************************************************************/
-    ngOnInit(): void;
     ngOnDestroy(): void;
+    /***************************************************************************
+     *                                                                         *
+     * Host Bindings                                                           *
+     *                                                                         *
+     **************************************************************************/
+    get hostClass(): string;
+    get disabledClass(): boolean;
+    get errorStateClass(): boolean;
+    get requiredClass(): boolean;
+    get emptyClass(): boolean;
     /***************************************************************************
      *                                                                         *
      * Behaviour Properties                                                    *
      *                                                                         *
      **************************************************************************/
-    set autocomplete(value: boolean);
+    set autocomplete(value: BooleanInput);
     get autocomplete(): boolean;
     /**
      * Allows the user to select 'nothing' / null.
      */
-    set allowNull(val: boolean);
+    set allowNull(val: BooleanInput);
     get allowNull(): boolean;
     /***************************************************************************
      *                                                                         *
@@ -120,7 +132,7 @@ export declare class ElderSelectComponent<TEntity = any, TId = any, TValue = TEn
     /**
      * Occurs when the suggestions data-context has changed
      */
-    protected onSuggestionsDcChanged(data: IDataContext<TEntity>): void;
+    protected onDataContextChanged(data: IDataContext<TEntity>): void;
     /***************************************************************************
      *                                                                         *
      * Private Methods                                                         *
@@ -139,7 +151,7 @@ export declare class ElderSelectComponent<TEntity = any, TId = any, TValue = TEn
      *
      */
     protected writeToControl(value: TValue): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ElderSelectComponent<any, any, any>, never>;
+    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>;
 }
 export {};

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

@@ -0,0 +1,30 @@
+import { ElderFromFieldEntityBase } from '../../../common/forms/elder-from-field-entity-base';
+import { AfterViewInit } from '@angular/core';
+import { ElderSelectComponent } from './elder-select/elder-select.component';
+import { ElderSelectValueDirective } from '../elder-select-value.directive';
+import { ElderApplyControlFn } from '../../../common/forms/elder-from-field-base';
+import { SelectionModelPopupDirective } from '../popup/selection-model-popup.directive';
+import * as i0 from "@angular/core";
+export declare abstract class ElderSelectFormField<TEntity, TId> extends ElderFromFieldEntityBase<TEntity, TId, ElderSelectComponent<TEntity, TId>> implements AfterViewInit {
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+    selectValueTemplate: ElderSelectValueDirective;
+    selectionModelPopupDirective: SelectionModelPopupDirective;
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    protected constructor(initSelectFn: ElderApplyControlFn<ElderSelectComponent<TEntity, TId>>);
+    /***************************************************************************
+     *                                                                         *
+     * Life Cycle                                                              *
+     *                                                                         *
+     **************************************************************************/
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderSelectFormField<any, any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderSelectFormField<any, any>, never, never, {}, {}, never, never, false>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elderbyte/ngx-starter",
-  "version": "14.3.1",
+  "version": "14.4.0-beta.10",
   "peerDependencies": {
     "@angular/common": "^14.0.1",
     "@angular/core": "^14.0.1",

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);
+      }
+    }
+  }
+}