@elderbyte/ngx-starter 17.9.0 → 17.11.0-beta

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

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

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

@@ -0,0 +1,32 @@
+import { DestroyRef } from '@angular/core';
+import { ElderSuggestionPanelComponent } from '../../input/autocomplete/elder-autocomplete/elder-suggestion-panel.component';
+import { ElderAutoSelectFirstService } from './elder-auto-select-first.service';
+import * as i0 from "@angular/core";
+export declare class ElderAutoSelectSuggestFirstDirective<TEntity = any, TId = any> {
+    readonly elderAutoComplete: ElderSuggestionPanelComponent<TEntity, TId>;
+    private readonly autoSelectFirstService;
+    private readonly destroyRef;
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+    private readonly log;
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(elderAutoComplete: ElderSuggestionPanelComponent<TEntity, TId>, autoSelectFirstService: ElderAutoSelectFirstService<TEntity>, destroyRef: DestroyRef);
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    private subscribeToAutoSelectFirstService;
+    private suggestFirstItem;
+    private selectFirstItemInDataContext;
+    private firstItemInDataContextSoon;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderAutoSelectSuggestFirstDirective<any, any>, [null, { optional: true; }, null]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderAutoSelectSuggestFirstDirective<any, any>, "[elderAutoSelectSuggestFirst]", never, {}, {}, never, never, true, never>;
+}

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

@@ -1,3 +1,4 @@
+import { Observable } from 'rxjs';
 import { ElderSelectComponent } from '../single/elder-select/elder-select.component';
 export declare class ElderSelectFirstUtil {
     /***************************************************************************
@@ -11,12 +12,11 @@ export declare class ElderSelectFirstUtil {
      * Public methods                                                          *
      *                                                                         *
      **************************************************************************/
-    static trySelectFirst<TEntity, TId>(elderSelect: ElderSelectComponent<TEntity, TId, any>): void;
+    static trySelectFirst<TEntity, TId>(elderSelect: ElderSelectComponent<TEntity, TId, any>, oFirstItem: Observable<TEntity>): void;
     /***************************************************************************
      *                                                                         *
      * Private methods                                                         *
      *                                                                         *
      **************************************************************************/
-    private static firstItemInDataContextSoon;
     private static firstSuggestionItem;
 }

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

@@ -126,6 +126,7 @@ export declare abstract class ElderSelectBase<TId, TEntity, TValue> extends Elde
     get shouldLabelFloat(): boolean;
     set templateOptions$(comps: ElderSelectOptionComponent<TEntity>[]);
     get templateOptions$(): Observable<ElderSelectOptionComponent<TEntity>[]>;
+    getEntityId(entity: TEntity): TId;
     /***************************************************************************
      *                                                                         *
      * Abstract API                                                            *
@@ -140,7 +141,6 @@ export declare abstract class ElderSelectBase<TId, TEntity, TValue> extends Elde
      * Internal API                                                            *
      *                                                                         *
      **************************************************************************/
-    protected getEntityId(entity: TEntity): TId;
     protected dataSourceOrThrow(): IDataSource<TEntity>;
     protected isEqual(a: TEntity, b: TEntity): boolean;
     protected isEmpty(a: TEntity): boolean;

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

@@ -35,6 +35,10 @@ import * as i33 from "./single/elder-clear-select.directive";
 import * as i34 from "./multi/elder-multi-select-chip-options/elder-multi-select-chip-options.component";
 import * as i35 from "./multi/elder-chip-select-option/elder-select-option.component";
 import * as i36 from "./multi/elder-mutli-select-all-directive";
+import * as i37 from "./auto/elder-auto-select-suggest-first.directive";
+import * as i38 from "./filter/elder-chips-filter.directive";
+import * as i39 from "./filter/elder-filter-chip-template/elder-filter-chip-template.component";
+import * as i40 from "./multi/elder-search-include-exclude.directive";
 export { ElderSelectValueDirective } from './elder-select-value.directive';
 export * from './elder-select-chip.directive';
 export { ElderSelectOnTabDirective } from './elder-select-on-tab.directive';
@@ -49,8 +53,12 @@ export { ElderSelectOptionComponent } from './multi/elder-chip-select-option/eld
 export { ElderAutoSelectFirstDirective } from './auto/elder-auto-select-first.directive';
 export { ElderClearSelectDirective } from './single/elder-clear-select.directive';
 export { ElderMultiSelectAllInitialDirective } from './multi/elder-mutli-select-all-directive';
+export { ElderAutoSelectSuggestFirstDirective } from './auto/elder-auto-select-suggest-first.directive';
+export { ElderChipsFilterDirective } from './filter/elder-chips-filter.directive';
+export { ElderFilterChipTemplate } from './filter/elder-filter-chip-template/elder-filter-chip-template.component';
+export { ElderSearchIncludeExcludeDirective } from './multi/elder-search-include-exclude.directive';
 export declare class ElderSelectModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderSelectModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ElderSelectModule, never, [typeof i1.CommonModule, typeof i2.FormsModule, typeof i2.ReactiveFormsModule, typeof i3.MatFormFieldModule, typeof i4.MatIconModule, typeof i5.MatSelectModule, typeof i6.MatDialogModule, typeof i7.MatButtonModule, typeof i8.MatInputModule, typeof i9.MatAutocompleteModule, typeof i10.MatToolbarModule, typeof i11.MatProgressBarModule, typeof i12.MatProgressSpinnerModule, typeof i13.MatChipsModule, typeof i14.MatTooltipModule, typeof i15.CdkDropList, typeof i15.CdkDrag, typeof i16.TranslateModule, typeof i17.ElderFormsDirectivesModule, typeof i18.ElderTableModule, typeof i19.ElderInfiniteScrollModule, typeof i20.ElderAutocompleteModule, typeof i21.ElderPipesModule, typeof i22.ElderThemeModule, typeof i23.ElderChipsModule, typeof i1.AsyncPipe, typeof i1.AsyncPipe, typeof i24.ElderSelectComponent, typeof i25.ElderSelectValueDirective, typeof i26.TemplatedSelectionDialogComponent, typeof i27.SelectionModelPopupDirective, typeof i28.ElderSelectionPopupTriggerAdapterDirective, typeof i29.ElderSelectOnTabDirective, typeof i30.ElderMultiSelectChipsComponent, typeof i31.ElderSelectChipDirective, typeof i31.ElderSelectChipAvatarDirective, typeof i32.ElderAutoSelectFirstDirective, typeof i33.ElderClearSelectDirective, typeof i31.ElderSelectCustomInputDirective, typeof i34.ElderMultiSelectChipOptionsComponent, typeof i35.ElderSelectOptionComponent, typeof i36.ElderMultiSelectAllInitialDirective], [typeof i24.ElderSelectComponent, typeof i25.ElderSelectValueDirective, typeof i26.TemplatedSelectionDialogComponent, typeof i27.SelectionModelPopupDirective, typeof i28.ElderSelectionPopupTriggerAdapterDirective, typeof i30.ElderMultiSelectChipsComponent, typeof i31.ElderSelectChipDirective, typeof i31.ElderSelectChipAvatarDirective, typeof i32.ElderAutoSelectFirstDirective, typeof i33.ElderClearSelectDirective, typeof i31.ElderSelectCustomInputDirective, typeof i34.ElderMultiSelectChipOptionsComponent, typeof i35.ElderSelectOptionComponent, typeof i36.ElderMultiSelectAllInitialDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ElderSelectModule, never, [typeof i1.CommonModule, typeof i2.FormsModule, typeof i2.ReactiveFormsModule, typeof i3.MatFormFieldModule, typeof i4.MatIconModule, typeof i5.MatSelectModule, typeof i6.MatDialogModule, typeof i7.MatButtonModule, typeof i8.MatInputModule, typeof i9.MatAutocompleteModule, typeof i10.MatToolbarModule, typeof i11.MatProgressBarModule, typeof i12.MatProgressSpinnerModule, typeof i13.MatChipsModule, typeof i14.MatTooltipModule, typeof i15.CdkDropList, typeof i15.CdkDrag, typeof i16.TranslateModule, typeof i17.ElderFormsDirectivesModule, typeof i18.ElderTableModule, typeof i19.ElderInfiniteScrollModule, typeof i20.ElderAutocompleteModule, typeof i21.ElderPipesModule, typeof i22.ElderThemeModule, typeof i23.ElderChipsModule, typeof i1.AsyncPipe, typeof i1.AsyncPipe, typeof i24.ElderSelectComponent, typeof i25.ElderSelectValueDirective, typeof i26.TemplatedSelectionDialogComponent, typeof i27.SelectionModelPopupDirective, typeof i28.ElderSelectionPopupTriggerAdapterDirective, typeof i29.ElderSelectOnTabDirective, typeof i30.ElderMultiSelectChipsComponent, typeof i31.ElderSelectChipDirective, typeof i31.ElderSelectChipAvatarDirective, typeof i32.ElderAutoSelectFirstDirective, typeof i33.ElderClearSelectDirective, typeof i31.ElderSelectCustomInputDirective, typeof i34.ElderMultiSelectChipOptionsComponent, typeof i35.ElderSelectOptionComponent, typeof i36.ElderMultiSelectAllInitialDirective, typeof i37.ElderAutoSelectSuggestFirstDirective, typeof i38.ElderChipsFilterDirective, typeof i39.ElderFilterChipTemplate, typeof i40.ElderSearchIncludeExcludeDirective], [typeof i24.ElderSelectComponent, typeof i25.ElderSelectValueDirective, typeof i26.TemplatedSelectionDialogComponent, typeof i27.SelectionModelPopupDirective, typeof i28.ElderSelectionPopupTriggerAdapterDirective, typeof i30.ElderMultiSelectChipsComponent, typeof i31.ElderSelectChipDirective, typeof i31.ElderSelectChipAvatarDirective, typeof i32.ElderAutoSelectFirstDirective, typeof i33.ElderClearSelectDirective, typeof i31.ElderSelectCustomInputDirective, typeof i34.ElderMultiSelectChipOptionsComponent, typeof i35.ElderSelectOptionComponent, typeof i36.ElderMultiSelectAllInitialDirective, typeof i37.ElderAutoSelectSuggestFirstDirective, typeof i38.ElderChipsFilterDirective, typeof i39.ElderFilterChipTemplate, typeof i40.ElderSearchIncludeExcludeDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ElderSelectModule>;
 }

package/lib/components/select/filter/elder-chip-filter-style-resolver.d.ts

@@ -0,0 +1,19 @@
+import { SelectChipSpec } from '../multi/elder-multi-select-chips/select-chip-spec';
+import { ElderChipFilterEntity } from './elder-chips-filter.directive';
+export default class ElderChipFilterStyleResolver {
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+    private readonly neutralChipSpec;
+    private readonly includedChipSpec;
+    private readonly excludedChipSpec;
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    resolveChipSpec(filterEntity: ElderChipFilterEntity): SelectChipSpec;
+    resolveAvatar(filterEntity: ElderChipFilterEntity): string;
+}

package/lib/components/select/filter/elder-chips-filter.directive.d.ts

@@ -0,0 +1,68 @@
+import { DestroyRef, ViewContainerRef } from '@angular/core';
+import { ElderMultiSelectChipsComponent } from '../multi/elder-multi-select-chips/elder-multi-select-chips.component';
+import { Observable } from 'rxjs';
+import { ElderSearchInputDirective } from '../../forms/search/elder-search-input.directive';
+import * as i0 from "@angular/core";
+export interface ElderChipFilterEntity {
+    id: string;
+    selection: ElderChipFilterSelection;
+}
+export declare enum ElderChipFilterSelection {
+    NEUTRAL = "NEUTRAL",
+    INCLUDE = "INCLUDE",
+    EXCLUDE = "EXCLUDE"
+}
+export declare class ElderChipsFilterDirective<T = any> {
+    readonly elderMultiSelectChips: ElderMultiSelectChipsComponent;
+    readonly elderSearchInput: ElderSearchInputDirective;
+    readonly vcr: ViewContainerRef;
+    private readonly destroyRef;
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+    private readonly log;
+    private readonly _selection$;
+    private readonly chipStyleResolver;
+    private readonly initialDone$;
+    private readonly _includeSuffix$;
+    private readonly _excludeSuffix$;
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    set includeSuffix(suffix: string);
+    set excludeSuffix(suffix: string);
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(elderMultiSelectChips: ElderMultiSelectChipsComponent, elderSearchInput: ElderSearchInputDirective, vcr: ViewContainerRef, destroyRef: DestroyRef);
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    get selection(): ElderChipFilterEntity[];
+    get selection$(): Observable<ElderChipFilterEntity[]>;
+    set selection(listedEntityIds: ElderChipFilterEntity[]);
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    private setupFilterChips;
+    private setupElderMultiSelectChipsListeners;
+    private resolveChipSpec;
+    private resolveAvatar;
+    private handleChipClick;
+    private cycleFilterEntitySelection;
+    private findFilterEntityByEntity;
+    private findFilterEntityById;
+    private updateChipEntities;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderChipsFilterDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderChipsFilterDirective<any>, "[elderChipsFilter]", never, { "includeSuffix": { "alias": "includeSuffix"; "required": false; }; "excludeSuffix": { "alias": "excludeSuffix"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/components/select/filter/elder-filter-chip-template/elder-filter-chip-template.component.d.ts

@@ -0,0 +1,32 @@
+import { TemplateRef } from '@angular/core';
+import { Observable } from 'rxjs';
+import * as i0 from "@angular/core";
+export declare class ElderFilterChipTemplate {
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+    private _avatarRef$;
+    private _bodyRef$;
+    private _resolveAvatar$;
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor();
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    set avatarRef(avatarRef: TemplateRef<any>);
+    get avatarRef$(): Observable<TemplateRef<any>>;
+    set bodyRef(avatarRef: TemplateRef<any>);
+    get bodyRef$(): Observable<TemplateRef<any>>;
+    set resolveAvatar(fn: (id: string) => string);
+    get resolveAvatar$(): Observable<(id: string) => string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderFilterChipTemplate, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderFilterChipTemplate, "elder-filter-chip-template", never, {}, {}, never, never, true, never>;
+}

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

@@ -32,6 +32,10 @@ export declare class ElderMultiSelectChipOptionsComponent<TId = any, TEntity = a
     defaultChipSpec: SelectOptionChipSpec;
     _chipSpecFn$: BehaviorSubject<(e: TEntity) => SelectOptionChipSpec>;
     stacked: boolean;
+    /**
+     * Page size. (Used for infinite scrolling chunks)
+     */
+    pageSize: number;
     private _multiple;
     _listBox: MatChipListbox;
     /***************************************************************************
@@ -92,6 +96,6 @@ export declare class ElderMultiSelectChipOptionsComponent<TId = any, TEntity = a
     private extractEntitiesFromTemplateChips;
     private buildEntitiesLabelMap;
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderMultiSelectChipOptionsComponent<any, any, any>, [null, null, null, null, null, null, { optional: true; self: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ElderMultiSelectChipOptionsComponent<any, any, any>, "elder-multi-select-chip-options", never, { "defaultChipSpec": { "alias": "defaultChipSpec"; "required": false; }; "stacked": { "alias": "stacked"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "chipSpecFn": { "alias": "chipSpecFn"; "required": false; }; "chipTemplate": { "alias": "chipTemplate"; "required": false; }; "chipAvatarTemplate": { "alias": "chipAvatarTemplate"; "required": false; }; }, {}, ["chipTemplateQuery", "chipAvatarTemplateQuery"], ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderMultiSelectChipOptionsComponent<any, any, any>, "elder-multi-select-chip-options", never, { "defaultChipSpec": { "alias": "defaultChipSpec"; "required": false; }; "stacked": { "alias": "stacked"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "chipSpecFn": { "alias": "chipSpecFn"; "required": false; }; "chipTemplate": { "alias": "chipTemplate"; "required": false; }; "chipAvatarTemplate": { "alias": "chipAvatarTemplate"; "required": false; }; }, {}, ["chipTemplateQuery", "chipAvatarTemplateQuery"], ["*"], true, never>;
 }
 export {};

package/lib/components/select/multi/elder-search-include-exclude.directive.d.ts

@@ -0,0 +1,39 @@
+import { DestroyRef } from '@angular/core';
+import { ElderSearchInputDirective } from '../../forms/search/elder-search-input.directive';
+import { ElderChipsFilterDirective } from '../filter/elder-chips-filter.directive';
+import * as i0 from "@angular/core";
+export declare class ElderSearchIncludeExcludeDirective {
+    private readonly elderSearchInput;
+    private readonly elderChipsFilter;
+    private destroyRef;
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+    private readonly _includeSuffix$;
+    private readonly _excludeSuffix$;
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    set includeSuffix(suffix: string);
+    set excludeSuffix(suffix: string);
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(elderSearchInput: ElderSearchInputDirective, elderChipsFilter: ElderChipsFilterDirective, destroyRef: DestroyRef);
+    /***************************************************************************
+     *                                                                         *
+     * Private Methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    private setupSearchQueryTransforms;
+    private setupConverter;
+    private transformSelectionToMap;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderSearchIncludeExcludeDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderSearchIncludeExcludeDirective, "[elderSearchIncludeExclude]", never, { "includeSuffix": { "alias": "includeSuffix"; "required": false; }; "excludeSuffix": { "alias": "excludeSuffix"; "required": false; }; }, {}, never, never, true, never>;
+}

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

@@ -119,7 +119,6 @@ export declare class ElderSelectComponent<TEntity = any, TId = any, TValue = TEn
     onOptionSelected(optionSelected: ElderAutocompleteOptionSelected<TEntity, TId>): void;
     openSelectionPopup(event: Event): void;
     clear(event?: Event): void;
-    forceReloadFirst(): void;
     updateValueByEntity(entity: TEntity): void;
     focus(options?: FocusOptions): void;
     blur(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elderbyte/ngx-starter",
-  "version": "17.9.0",
+  "version": "17.11.0-beta",
   "peerDependencies": {
     "@angular/core": "^17.0.0 || ^18.0.0",
     "@angular/common": "^17.0.0 || ^18.0.0",

package/src/lib/components/select/filter/elder-filter-chip-template/elder-filter-chip-template.component.scss

@@ -0,0 +1,95 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../../../../../../theming/elder-typography-utils' as elder-typography;
+@use '../../elder-select-base' as elder-select-base;
+
+@mixin typography($typography-config) {
+  $config: $typography-config; // TODO $typography-config
+  // The unit-less line-height from the font config.
+  $line-height: mat.line-height($config, body-1);
+  $font-size: mat.font-size($config, body-1);
+  $line-height-em: elder-typography.coerce-unitless-to-em($line-height);
+
+  @include elder-select-base.typography($typography-config);
+
+  .elder-multi-select {
+    font-family: mat.font-family($config);
+
+    .elder-select-input {
+      height: $line-height-em
+    }
+
+    .elder-prefix-icon {
+      margin-left: 3px;
+    }
+
+    .elder-chip-input {
+      flex: 1 0 auto;
+      padding-left: 8px;
+    }
+
+    .elder-chip-input-select {
+      flex: 1 0 140px;
+      max-width: 100%;
+    }
+
+    .elder-browse-icon {
+      margin-right: 4px;
+    }
+  }
+}
+
+@mixin theme($config-or-theme) {
+  $color: mat.get-color-config($config-or-theme);
+  $typography: elder-typography.get-typography-config($config-or-theme);
+
+  // If no actual typography configuration has been specified, create a default one.
+  @if not $typography {
+    $typography: mat.define-typography-config();
+  }
+
+  @if $color != null {
+    @include elder-select-base.color($color);
+    @include _chip_color($config-or-theme)
+  }
+
+  @if $typography != null {
+    @include typography($typography);
+  }
+}
+
+@mixin _chip_color($theme){
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+}
+
+.elder-chip-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.elder-trailing-icon {
+  color: var(--mdc-chip-with-trailing-icon-trailing-icon-color);
+  opacity: 0.54;
+}
+
+.cdk-drag-preview {
+  box-sizing: border-box;
+  // border-radius: 4px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+  0 8px 10px 1px rgba(0, 0, 0, 0.14),
+  0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.cdk-drag-placeholder {
+  opacity: 0;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}