@elderbyte/ngx-starter 17.11.0-beta6 → 18.0.0-beta1

package/lib/common/data/filters/filter-commons.d.ts

@@ -1,12 +1,6 @@
 import { FilterValue } from './filter-value';
-/***************************************************************************
- *                                                                         *
- * Common functions                                                        *
- *                                                                         *
- **************************************************************************/
 export default class FilterCommons {
     static isArrayAndNotEmpty(value: FilterValue): boolean;
     static isArray(value: FilterValue): boolean;
     static isNotEmptyArray(value: FilterValue): boolean;
-    static getValuesIfArrayElseEmpty(value: FilterValue): string[];
 }

package/lib/components/forms/directives/elder-initial-value.directive.d.ts

@@ -1,11 +1,9 @@
-import { OnDestroy } from '@angular/core';
 import { NgModel } from '@angular/forms';
-import { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
 /**
  * Search name adapter for input controls.
  */
-export declare class ElderInitialValueDirective implements OnDestroy {
+export declare class ElderInitialValueDirective {
     private ngModel;
     /***************************************************************************
      *                                                                         *
@@ -14,28 +12,20 @@ export declare class ElderInitialValueDirective implements OnDestroy {
      **************************************************************************/
     private readonly log;
     private initialValue$;
-    private readonly destroy$;
-    private readonly _initialDone$;
+    private readonly initialDone$;
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
     constructor(ngModel: NgModel);
-    /***************************************************************************
-     *                                                                         *
-     * Life Cycle                                                              *
-     *                                                                         *
-     **************************************************************************/
     /***************************************************************************
      *                                                                         *
      * Properties                                                              *
      *                                                                         *
      **************************************************************************/
-    get initialDone$(): Observable<void>;
-    get valueChanges$(): Observable<any>;
+    get valueChanges$(): import("rxjs").Observable<any>;
     setValue(value: any): void;
-    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderInitialValueDirective, [{ host: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<ElderInitialValueDirective, "[elderInitialValue]", ["elderInitialValue"], {}, {}, never, never, true, never>;
 }

package/lib/components/forms/search/elder-search-input.directive.d.ts

@@ -66,7 +66,6 @@ export declare class ElderSearchInputDirective implements SearchInput, OnInit, A
     get queryKey(): string;
     get queryKey$(): Observable<string>;
     set inputConverter(inputConverter: InputFilterConverter);
-    get initialDone$(): Observable<void>;
     get state$(): Observable<SearchInputState>;
     get value(): any;
     get readonly(): boolean;

package/lib/components/navigation/toolbar/elder-toolbar-column.directive.d.ts

@@ -1,9 +1,8 @@
-import { OnDestroy, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
+import { OnDestroy, OnInit, TemplateRef } from '@angular/core';
 import { ElderToolbarService } from './elder-toolbar.service';
 import { ToolbarColumnPosition } from './toolbar-column-position';
 import * as i0 from "@angular/core";
 export declare class ElderToolbarColumnDirective implements OnInit, OnDestroy {
-    private viewContainer;
     private toolbarService;
     templateRef: TemplateRef<any>;
     /***************************************************************************
@@ -21,7 +20,7 @@ export declare class ElderToolbarColumnDirective implements OnInit, OnDestroy {
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(viewContainer: ViewContainerRef, toolbarService: ElderToolbarService, templateRef: TemplateRef<any>);
+    constructor(toolbarService: ElderToolbarService, templateRef: TemplateRef<any>);
     /***************************************************************************
      *                                                                         *
      * Life Cycle                                                              *

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

@@ -9,7 +9,7 @@ import { IDataContext } from '../../../../common/data/data-context/data-context'
 import { SelectOptionChipSpec } from './select-option-chip-spec';
 import { MatChipListbox, MatChipSelectionChange } from '@angular/material/chips';
 import { BooleanInput } from '@angular/cdk/coercion';
-import ChipOptionsProvider, { ChipOptionModel } from './chip-options-provider';
+import { ChipOptionModel } from './chip-options-provider';
 import * as i0 from "@angular/core";
 interface TemplateWrapper {
     chip: TemplateRef<any>;
@@ -27,15 +27,10 @@ export declare class ElderMultiSelectChipOptionsComponent<TId = any, TEntity = a
     private readonly context$;
     private readonly chipTemplate$;
     private readonly chipAvatarTemplate$;
-    readonly optionsProvider$: Observable<ChipOptionsProvider<TId, TEntity>>;
     readonly selectChips$: Observable<ChipOptionModel<TEntity>[]>;
     defaultChipSpec: SelectOptionChipSpec;
     _chipSpecFn$: BehaviorSubject<(e: TEntity) => SelectOptionChipSpec>;
     stacked: boolean;
-    /**
-     * Page size. (Used for infinite scrolling chunks)
-     */
-    pageSize: number;
     private _multiple;
     _listBox: MatChipListbox;
     /***************************************************************************
@@ -96,6 +91,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; }; "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>;
+    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>;
 }
 export {};

package/package.json

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

package/src/lib/components/button-group/elder-button-group/elder-button-group.component.scss

@@ -10,7 +10,7 @@
   .elder-button-group {
     button {
       padding: 0 8px 0 8px;
-      border: 1px solid mat.get-color-from-palette($foreground, divider);
+      border: 1px solid mat.m2-get-color-from-palette($foreground, divider);
     }
 
     button:not(:first-child):not(:last-child) {

package/src/lib/components/card-organizer/card-stack/elder-card-stack.component.scss

@@ -9,13 +9,13 @@
   $foreground: map-get($theme, foreground);
 
   .card-stack {
-    background-color: mat.get-color-from-palette($background, background);
+    background-color: mat.m2-get-color-from-palette($background, background);
     border-radius: 4px;
-    border: 1px solid mat.get-color-from-palette($foreground, divider);
+    border: 1px solid mat.m2-get-color-from-palette($foreground, divider);
   }
 
   .card-list.cdk-drop-list-dragging {
-    border: 2px dashed mat.get-color-from-palette($primary, default, 0.5);
+    border: 2px dashed mat.m2-get-color-from-palette($primary, default, 0.5);
   }
 }
 

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

@@ -9,12 +9,12 @@
   $foreground: map-get($theme, foreground);
 
   .elder-card-title {
-    color: mat.get-color-from-palette($accent, default, 1);
+    color: mat.m2-get-color-from-palette($accent, default, 1);
     font-weight: 500!important;
   }
 
   .elder-card-subtitle {
-    color: mat.get-color-from-palette($primary, default, 1);
+    color: mat.m2-get-color-from-palette($primary, default, 1);
   }
 }
 

package/src/lib/components/chips/_elder-chip-theme.scss

@@ -29,20 +29,20 @@ $level-critical: rgb(255, 0, 0);
 
 @mixin _theme_color_chip($colorPalette){
   &.legacy {
-    background-color: mat.get-color-from-palette($colorPalette, default);
+    background-color: mat.m2-get-color-from-palette($colorPalette, default);
     .mat-mdc-chip-action-label,
     .mat-mdc-chip-avatar,
     .mdc-evolution-chip__checkmark {
-      color: mat.get-color-from-palette($colorPalette, default-contrast);
+      color: mat.m2-get-color-from-palette($colorPalette, default-contrast);
     }
   }
   &.md3 { // label chip
-    background-color: mat.get-color-from-palette($colorPalette, default, 0.2);
-    border-color: mat.get-color-from-palette($colorPalette);
+    background-color: mat.m2-get-color-from-palette($colorPalette, default, 0.2);
+    border-color: mat.m2-get-color-from-palette($colorPalette);
     .mat-mdc-chip-action-label,
     .mat-mdc-chip-avatar,
     .mdc-evolution-chip__checkmark {
-      color: mat.get-color-from-palette($colorPalette);
+      color: mat.m2-get-color-from-palette($colorPalette);
     }
   }
 }
@@ -53,7 +53,7 @@ $level-critical: rgb(255, 0, 0);
   $accent: map-get($config-or-theme, accent);
   $warn: map-get($config-or-theme, warn);
 
-  $color-config: mat.get-color-config($config-or-theme);
+  $color-config: mat.m2-get-color-config($config-or-theme);
   $is-dark-theme: map.get($color-config, is-dark);
 
   .mat-mdc-chip.elder-chip-label {

package/src/lib/components/data-view/grid/elder-grid/elder-grid.component.scss

@@ -11,13 +11,13 @@ $elder-tile-padding: 8px;
 
   .elder-grid-container {
     border-radius: 4px;
-    background-color: mat.get-color-from-palette($background, card);
+    background-color: mat.m2-get-color-from-palette($background, card);
   }
 
   .elder-grid-browser { }
 
   .elder-grid-flat {
-    border: 1px solid mat.get-color-from-palette($foreground, divider);
+    border: 1px solid mat.m2-get-color-from-palette($foreground, divider);
   }
 
   .elder-grid-toolbar {
@@ -36,7 +36,7 @@ $elder-tile-padding: 8px;
     width: 100%;
     height: 100%;
     cursor: pointer;
-    background-color: rgba(mat.get-color-from-palette($background, unselected-chip), 0.34); // default background
+    background-color: rgba(mat.m2-get-color-from-palette($background, unselected-chip), 0.34); // default background
     text-align: left;
     transition:
       box-shadow 200ms cubic-bezier(0, 0, 0.2, 1),
@@ -44,7 +44,7 @@ $elder-tile-padding: 8px;
   }
 
   .elder-grid-tile:hover {
-    border-color: rgba(mat.get-color-from-palette($primary), 0.75);
+    border-color: rgba(mat.m2-get-color-from-palette($primary), 0.75);
   }
 
   .elder-grid-tile-content:hover .elder-grid-tile-overlay{
@@ -63,19 +63,19 @@ $elder-tile-padding: 8px;
   .elder-grid-tile-check {
     pointer-events: auto;
     mat-icon {
-      color: mat.get-color-from-palette($foreground, divider);
-      background-color: mat.get-color-from-palette($background, card);
+      color: mat.m2-get-color-from-palette($foreground, divider);
+      background-color: mat.m2-get-color-from-palette($background, card);
       border-radius: 12px;
     }
 
     mat-icon.elder-selected {
-      color: mat.get-color-from-palette($accent);
+      color: mat.m2-get-color-from-palette($accent);
     }
   }
 
   .elder-grid-tile-check:hover {
     mat-icon {
-      color: mat.get-color-from-palette($primary);
+      color: mat.m2-get-color-from-palette($primary);
     }
   }
 

package/src/lib/components/data-view/table/elder-table/elder-table.component.scss

@@ -8,7 +8,7 @@
   $foreground: map-get($theme, foreground);
 
   .elder-table-row:hover {
-    background-color: mat.get-color-from-palette($background, hover);
+    background-color: mat.m2-get-color-from-palette($background, hover);
     cursor: pointer;
   }
 
@@ -18,22 +18,22 @@
     outline-style: none;
     td {
       // border-top: 1px solid mat.get-color-from-palette($accent, default);
-      background-color: mat.get-color-from-palette($accent, default, 0.30);
-      border-bottom: 1px solid mat.get-color-from-palette($accent, default);
+      background-color: mat.m2-get-color-from-palette($accent, default, 0.30);
+      border-bottom: 1px solid mat.m2-get-color-from-palette($accent, default);
     }
 
   }
 
   .elder-table-row-activated {
-    background-color: mat.get-color-from-palette($accent, default, 0.20);
+    background-color: mat.m2-get-color-from-palette($accent, default, 0.20);
   }
 
   .elder-table-row-selected {
-    background-color: mat.get-color-from-palette($primary, default, 0.10);
+    background-color: mat.m2-get-color-from-palette($primary, default, 0.10);
   }
 
   .elder-mat-table-flat {
-    border: 1px solid mat.get-color-from-palette($foreground, divider);
+    border: 1px solid mat.m2-get-color-from-palette($foreground, divider);
   }
 
 

package/src/lib/components/errors/exception-detail/elder-exception-detail.component.scss

@@ -14,7 +14,7 @@
         overflow-x: scroll;
 
         @if(map-get($theme, is-dark)) {
-          background-color: mat.get-color-from-palette($elder-gold, 700);
+          background-color: mat.m2-get-color-from-palette($elder-gold, 700);
           color: $dark-primary-text;
       }
         @else {

package/src/lib/components/expand-toggle-button/elder-expand-toggle-button.component.scss

@@ -8,7 +8,7 @@
   $foreground: map-get($theme, foreground);
 
   .toggle-button:hover {
-    background-color: mat.get-color-from-palette($accent, default, 0.1);
+    background-color: mat.m2-get-color-from-palette($accent, default, 0.1);
     cursor: pointer;
   }
 

package/src/lib/components/files/drag-n-drop/elder-drop-zone/elder-drop-zone.component.scss

@@ -20,28 +20,28 @@ $colorStateNone: rgb(0, 0, 0);
     cursor: pointer;
 
     .elder-drop-zone-icon {
-      color: mat.get-color-from-palette($primary, default, 0.75);
+      color: mat.m2-get-color-from-palette($primary, default, 0.75);
       font-size: 28px;
       width: 28px;
       height: 28px;
     }
 
     .elder-drop-zone-prompt {
-      color: mat.get-color-from-palette($primary, default, 0.75);
+      color: mat.m2-get-color-from-palette($primary, default, 0.75);
     }
 
   }
 
   .elder-drop-zone.is-dragover {
-    border: 4px solid mat.get-color-from-palette($accent, default, 0.40);
-    background-color: mat.get-color-from-palette($accent, default, 0.25);
+    border: 4px solid mat.m2-get-color-from-palette($accent, default, 0.40);
+    background-color: mat.m2-get-color-from-palette($accent, default, 0.25);
 
     .elder-drop-zone-icon {
-      color: mat.get-color-from-palette($accent, default, 0.75);
+      color: mat.m2-get-color-from-palette($accent, default, 0.75);
     }
 
     .elder-drop-zone-prompt {
-      color: mat.get-color-from-palette($accent, default, 0.75);
+      color: mat.m2-get-color-from-palette($accent, default, 0.75);
     }
 
   }

package/src/lib/components/navigation/nav/_elder-nav-theme.scss

@@ -13,24 +13,24 @@
   $foreground: map-get($theme, foreground);
 
   .nav-group-button:hover {
-    background-color: mat.get-color-from-palette($primary, default, 0.10);
+    background-color: mat.m2-get-color-from-palette($primary, default, 0.10);
     transition: background 0.5s;
   }
 
     .nav-group-button:not(.nav-group-button-open) {
     .mat-icon {
-      color: mat.get-color-from-palette($foreground, secondary-text);
+      color: mat.m2-get-color-from-palette($foreground, secondary-text);
     }
   }
 
   .nav-group-button-active {
-    background-color: mat.get-color-from-palette($primary, default, 0.15);
+    background-color: mat.m2-get-color-from-palette($primary, default, 0.15);
   }
 
   .nav-group-button-open {
     padding-left: 11px!important; // -5 to counter border-left
     .mat-icon {
-      color: mat.get-color-from-palette($primary);
+      color: mat.m2-get-color-from-palette($primary);
     }
   }
 }
@@ -45,7 +45,7 @@
   .nav-link.nav-link-clickable {
     cursor: pointer;
     &:hover {
-      background-color: mat.get-color-from-palette($primary, default, 0.10);
+      background-color: mat.m2-get-color-from-palette($primary, default, 0.10);
     }
   }
 
@@ -54,21 +54,21 @@
   }
 
   .nav-link:hover {
-    background-color: mat.get-color-from-palette($primary, default, 0.05);
+    background-color: mat.m2-get-color-from-palette($primary, default, 0.05);
   }
 
   .nav-link.nav-link-active {
-    background-color: mat.get-color-from-palette($primary, default, 0.15);
-    color: mat.get-color-from-palette($primary);
+    background-color: mat.m2-get-color-from-palette($primary, default, 0.15);
+    color: mat.m2-get-color-from-palette($primary);
     .mat-icon {
-      color: mat.get-color-from-palette($primary);
+      color: mat.m2-get-color-from-palette($primary);
     }
   }
 
   .nav-link.nav-link-inactive {
-    color: mat.get-color-from-palette($foreground, text);
+    color: mat.m2-get-color-from-palette($foreground, text);
     .mat-icon {
-      color: mat.get-color-from-palette($foreground, secondary-text);
+      color: mat.m2-get-color-from-palette($foreground, secondary-text);
     }
   }
 

package/src/lib/components/panels/card-panel/elder-card-panel.component.scss

@@ -8,8 +8,8 @@
   $foreground: map-get($theme, foreground);
 
   .elder-card-panel {
-    color: mat.get-color-from-palette($foreground, text);
-    background-color: mat.get-color-from-palette($background, 'card');
+    color: mat.m2-get-color-from-palette($foreground, text);
+    background-color: mat.m2-get-color-from-palette($background, 'card');
 
     padding: 10px;
     border-radius: 4px;

package/src/lib/components/panels/elder-dialog-panel/elder-dialog-panel.component.scss

@@ -8,8 +8,8 @@
   $foreground: map-get($theme, foreground);
 
   .elder-dialog-panel {
-    color: mat.get-color-from-palette($foreground, text);
-    background-color: mat.get-color-from-palette($background, dialog);
+    color: mat.m2-get-color-from-palette($foreground, text);
+    background-color: mat.m2-get-color-from-palette($background, dialog);
 
     padding: 10px;
     border-radius: 4px;

package/src/lib/components/panels/flat/_elder-panel-theme.scss

@@ -3,8 +3,8 @@
 
 
 @mixin _elder-panel-color($palette) {
-  background: mat.get-color-from-palette($palette);
-  color: mat.get-color-from-palette($palette, default-contrast);
+  background: mat.m2-get-color-from-palette($palette);
+  color: mat.m2-get-color-from-palette($palette, default-contrast);
 }
 
 @mixin _elder-panel-form-field-overrides {
@@ -36,8 +36,8 @@
   $foreground: map-get($theme, foreground);
 
   .mat-panel {
-    background: mat.get-color-from-palette($background, app-bar);
-    color: mat.get-color-from-palette($foreground, text);
+    background: mat.m2-get-color-from-palette($background, app-bar);
+    color: mat.m2-get-color-from-palette($foreground, text);
     transition: background 0.5s;
 
     &.mat-primary {
@@ -64,7 +64,7 @@
   .mat-panel h4,
   .mat-panel h5,
   .mat-panel h6 {
-    @include mat.typography-level($config, title);
+    @include mat.m2-typography-level($config, title);
     margin: 0;
   }
 }

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

@@ -6,8 +6,8 @@
 @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: mat.m2-line-height($config, body-1);
+  $font-size: mat.m2-font-size($config, body-1);
   $line-height-em: elder-typography.coerce-unitless-to-em($line-height);
 
   $icon-size: 16px;

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

@@ -6,14 +6,14 @@
 @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: mat.m2-line-height($config, body-1);
+  $font-size: mat.m2-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);
+    font-family: mat.m2-font-family($config);
 
     .elder-select-input {
       height: $line-height-em
@@ -40,12 +40,12 @@
 }
 
 @mixin theme($config-or-theme) {
-  $color: mat.get-color-config($config-or-theme);
+  $color: mat.m2-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();
+    $typography: mat.m2-define-typography-config();
   }
 
   @if $color != null {

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

@@ -6,14 +6,14 @@
 @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: mat.m2-line-height($config, body-1);
+  $font-size: mat.m2-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);
+    font-family: mat.m2-font-family($config);
 
     .elder-select-input {
       height: $line-height-em
@@ -40,12 +40,12 @@
 }
 
 @mixin theme($config-or-theme) {
-  $color: mat.get-color-config($config-or-theme);
+  $color: mat.m2-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();
+    $typography: mat.m2-define-typography-config();
   }
 
   @if $color != null {

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

@@ -6,14 +6,14 @@
 @mixin typography($typography-config) {
   $config: $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: mat.m2-line-height($config, body-1);
+  $font-size: mat.m2-font-size($config, body-1);
   $line-height-em: elder-typography.coerce-unitless-to-em($line-height);
 
   @include elder-select-base.typography($typography-config);
 
   .elder-select {
-    font-family: mat.font-family($config);
+    font-family: mat.m2-font-family($config);
 
     .elder-input-prefix-icon-container {
       padding-right: 3px;
@@ -31,12 +31,12 @@
 }
 
 @mixin theme($config-or-theme) {
-  $color: mat.get-color-config($config-or-theme);
+  $color: mat.m2-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();
+    $typography: mat.m2-define-typography-config();
   }
 
   @if $color != null {

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

@@ -8,8 +8,8 @@
   $foreground: map-get($theme, foreground);
 
   .select-item-active {
-    background-color: mat.get-color-from-palette($primary, default, 0.10);
-    border-left: 5px solid mat.get-color-from-palette($primary)!important;
+    background-color: mat.m2-get-color-from-palette($primary, default, 0.10);
+    border-left: 5px solid mat.m2-get-color-from-palette($primary)!important;
   }
 }
 

package/src/lib/components/time/_elder-time-input.theme.scss

@@ -3,8 +3,8 @@
 @use '../../../../theming/elder-typography-utils' as elder-typography;
 
 @mixin theme($config-or-theme) {
-  $color: mat.get-color-config($config-or-theme);
-  $typography: mat.get-typography-config($config-or-theme);
+  $color: mat.m2-get-color-config($config-or-theme);
+  $typography: mat.m2-get-typography-config($config-or-theme);
 
   @include _interval-form-field-sizing();
   @include _interval-form-field-color();