@elderbyte/ngx-starter 14.3.2 → 14.4.0-beta.3

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

@@ -1,7 +1,10 @@
-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 * as i0 from "@angular/core";
 /**
  * Base component implementation of elder-multi-select.
@@ -12,15 +15,17 @@ 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> {
     /***************************************************************************
      *                                                                         *
      * Fields                                                                  *
      *                                                                         *
      **************************************************************************/
     private readonly logger;
-    protected readonly entities$: BehaviorSubject<TEntity[]>;
+    private readonly _entityIds$;
+    private readonly _entities$;
     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 +41,38 @@ export declare abstract class ElderMultiSelectBase<TId, TEntity, TValue> extends
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    protected constructor(zone: NgZone);
+    protected constructor(zone: NgZone, hostRef: ElementRef, controlType: string, focusMonitor: FocusMonitor, 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;
     removeEntity(toRemove: TEntity): void;
     openSelectionPopup(event: Event): void;
+    entityToValue(entity: TEntity): TValue;
     /***************************************************************************
      *                                                                         *
      * Internal Methods                                                        *
      *                                                                         *
      **************************************************************************/
-    protected onSuggestionsDcChanged(data: IDataContext<TEntity>): void;
+    protected onDataContextChanged(data: IDataContext<TEntity>): void;
     /**
      * This method is invoked after a value has been written to this control.
      *
@@ -78,10 +83,10 @@ 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;
@@ -89,5 +94,5 @@ export declare abstract class ElderMultiSelectBase<TId, TEntity, TValue> extends
     private loadEntityByIds;
     private findInDataContext;
     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, { "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,9 @@
-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 * as i0 from "@angular/core";
 declare class ChipModel<T> {
     readonly value: T;
@@ -11,6 +13,7 @@ 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                                                                  *
@@ -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, ngControl: NgControl);
+    /***************************************************************************
+     *                                                                         *
+     * Host Bindings                                                           *
+     *                                                                         *
+     **************************************************************************/
+    get hostClass(): string;
+    get disabledClass(): boolean;
+    get errorStateClass(): boolean;
+    get requiredClass(): boolean;
+    get emptyClass(): boolean;
     /***************************************************************************
      *                                                                         *
      * Properties                                                              *
@@ -42,20 +56,20 @@ 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;
     focus(options?: FocusOptions): void;
     blur(): void;
     /***************************************************************************
@@ -63,9 +77,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, { 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,33 @@
+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 } 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;
+    /***************************************************************************
+     *                                                                         *
+     * 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.2",
+  "version": "14.4.0-beta.3",
   "peerDependencies": {
     "@angular/common": "^14.0.1",
     "@angular/core": "^14.0.1",

package/src/lib/components/select/multi/elder-multi-select-chips/elder-multi-select-chips.component.scss

@@ -1,17 +1,54 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
 
-.prefix-padding {
-  padding-right: 4px;
-}
+@mixin theme($config-or-theme) {
+  $config: mat.get-color-config($config-or-theme);
+  $foreground: map.get($config, foreground);
+  $background: map.get($config, background);
+  $primary: map.get($config, primary);
+  $accent: map.get($config, accent);
+  $warn: map.get($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);
+  }
 
-.leading-icon {
-  font-size: 16px;
-  width: 16px;
-  height: 16px;
-}
 
-.elder-chip-input {
-  width: 120px!important;
-  max-width: 120px!important;
+  .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-multi-select {
+      .elder-select-icon {
+        color: mat.get-color-from-palette($warn, text);
+      }
+    }
+
+    &.mat-form-field-disabled .elder-multi-select {
+      .elder-select-icon {
+        color: mat.get-color-from-palette($foreground, disabled-text);
+      }
+    }
+  }
 }
 
 .small-icon-button {
@@ -32,3 +69,9 @@
 .clickable-chip {
   cursor: pointer;
 }
+
+.elder-chip-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/src/lib/components/select/single/elder-select/elder-select.component.scss

@@ -0,0 +1,114 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($config-or-theme) {
+  $config: mat.get-color-config($config-or-theme);
+  $foreground: map.get($config, foreground);
+  $background: map.get($config, background);
+  $primary: map.get($config, primary);
+  $accent: map.get($config, accent);
+  $warn: map.get($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-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 {
+      .elder-select-icon {
+        color: mat.get-color-from-palette($warn, text);
+      }
+    }
+
+    &.mat-form-field-disabled .elder-select {
+      .elder-select-icon {
+        color: mat.get-color-from-palette($foreground, disabled-text);
+      }
+    }
+  }
+}
+
+
+.prefix-container {
+  width: 24px;
+  height: 16px;
+}
+
+@keyframes shrink {
+  0% {
+    transform: scale(1.0);
+  }
+  100% {
+    transform: scale(0.75);
+  }
+}
+
+.loading {
+  animation: shrink 0.3s ease-in-out infinite alternate;
+  -webkit-animation: shrink 0.3s ease-in-out infinite alternate;
+}
+
+.prefix-padding {
+  padding-right: 4px;
+}
+
+.leading-icon {
+  font-size: 16px;
+  width: 16px;
+  height: 16px;
+}
+
+.suffix-icon {
+  font-size: 16px;
+  width: 16px;
+  height: 16px;
+  // padding-left: 4px;
+  .mat-icon {
+    font-size: 16px;
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.clickable-icon {
+  cursor: pointer;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.elder-select-dropdown-input {
+  cursor: pointer;
+  // width: 162px;
+}
+
+.elder-select-arrow {
+  font-size: 18px;
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+}