@messaia/cdk 18.2.3 → 19.0.0-rc01

package/lib/base/components/base.component.d.ts

@@ -430,5 +430,5 @@ export declare abstract class BaseComponent implements IBaseComponent, OnInit, A
      */
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<BaseComponent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseComponent, never, never, { "handleExpansionPanelChanges": { "alias": "handleExpansionPanelChanges"; "required": false; }; }, { "reload": "reload"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseComponent, never, never, { "handleExpansionPanelChanges": { "alias": "handleExpansionPanelChanges"; "required": false; }; }, { "reload": "reload"; }, never, never, true, never>;
 }

package/lib/base/components/generic-embedded-list.component.d.ts

@@ -98,5 +98,5 @@ export declare abstract class GenericEmbeddedListComponent<TEntity extends IEnti
      */
     protected addRowMenuItems(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<GenericEmbeddedListComponent<any, any, any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<GenericEmbeddedListComponent<any, any, any>, never, never, { "form": { "alias": "form"; "required": false; }; "parent": { "alias": "parent"; "required": false; }; "hashPrefix": { "alias": "hashPrefix"; "required": false; }; "paginable": { "alias": "paginable"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<GenericEmbeddedListComponent<any, any, any>, never, never, { "form": { "alias": "form"; "required": false; }; "parent": { "alias": "parent"; "required": false; }; "hashPrefix": { "alias": "hashPrefix"; "required": false; }; "paginable": { "alias": "paginable"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/base/components/generic-form-base.component.d.ts

@@ -419,5 +419,5 @@ export declare abstract class GenericFormBaseComponent<TEntity extends IEntity,
      */
     handleKeyboardEvent(event: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<GenericFormBaseComponent<any, any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<GenericFormBaseComponent<any, any>, never, never, { "id": { "alias": "id"; "required": false; }; "_item": { "alias": "_item"; "required": false; }; "item": { "alias": "item"; "required": false; }; "includes": { "alias": "includes"; "required": false; }; "updateIncludes": { "alias": "updateIncludes"; "required": false; }; "projection": { "alias": "projection"; "required": false; }; "query": { "alias": "query"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "form": { "alias": "form"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<GenericFormBaseComponent<any, any>, never, never, { "id": { "alias": "id"; "required": false; }; "_item": { "alias": "_item"; "required": false; }; "item": { "alias": "item"; "required": false; }; "includes": { "alias": "includes"; "required": false; }; "updateIncludes": { "alias": "updateIncludes"; "required": false; }; "projection": { "alias": "projection"; "required": false; }; "query": { "alias": "query"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "form": { "alias": "form"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/base/components/generic-form.component.d.ts

@@ -25,5 +25,5 @@ export declare abstract class GenericFormComponent<TEntity extends IEntity, TSer
      */
     constructor(entityCtor: Type<TEntity>, service: TService, route: ActivatedRoute, changeDetectorRef: ChangeDetectorRef);
     static ɵfac: i0.ɵɵFactoryDeclaration<GenericFormComponent<any, any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<GenericFormComponent<any, any>, never, never, { "form": { "alias": "form"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<GenericFormComponent<any, any>, never, never, { "form": { "alias": "form"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/base/components/generic-list.component.d.ts

@@ -20,7 +20,9 @@ export declare abstract class GenericListComponent<TEntity extends IEntity | any
     service: TService;
     protected route: ActivatedRoute;
     protected changeDetectorRef: ChangeDetectorRef;
-    classType?: (new () => TEntity) | undefined;
+    classType?: {
+        new (): TEntity;
+    } | undefined;
     /**
      * @property paginator
      * @description A reference to the MatPaginator element.
@@ -251,7 +253,9 @@ export declare abstract class GenericListComponent<TEntity extends IEntity | any
      * @param changeDetectorRef ChangeDetectorRef for managing view updates.
      * @param classType The class type of the table entity.
      */
-    constructor(service: TService, route: ActivatedRoute, changeDetectorRef: ChangeDetectorRef, classType?: (new () => TEntity) | undefined);
+    constructor(service: TService, route: ActivatedRoute, changeDetectorRef: ChangeDetectorRef, classType?: {
+        new (): TEntity;
+    } | undefined);
     /**
      * Lifecycle hook that is called after data-bound properties
      * of a directive are initialized.
@@ -478,5 +482,5 @@ export declare abstract class GenericListComponent<TEntity extends IEntity | any
      */
     get [Symbol.toStringTag](): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<GenericListComponent<any, any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<GenericListComponent<any, any>, never, never, { "backButton": { "alias": "backButton"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<GenericListComponent<any, any>, never, never, { "backButton": { "alias": "backButton"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/base/components/generic-reactive-form.component.d.ts

@@ -61,5 +61,5 @@ export declare abstract class GenericReactiveFormComponent<TEntity extends IEnti
      */
     protected debugForm(form?: FormGroup): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<GenericReactiveFormComponent<any, any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<GenericReactiveFormComponent<any, any>, never, never, { "form": { "alias": "form"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<GenericReactiveFormComponent<any, any>, never, never, { "form": { "alias": "form"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/base/helpers/auth-helper.d.ts

@@ -22,5 +22,5 @@ export declare class AuthHelper {
      * Checks if the specified variable is a string
      * @param str
      */
-    static isString(str: any): boolean;
+    static isString(str: any): str is string | String;
 }

package/lib/chips/components/chips.component.d.ts

@@ -1,8 +1,6 @@
-import { FocusMonitor } from '@angular/cdk/a11y';
-import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, Injector, OnDestroy, OnInit, Type } from '@angular/core';
-import { FormControl, FormGroupDirective, NgControl, NgForm } from '@angular/forms';
+import { AfterViewInit, ElementRef, EventEmitter, OnDestroy, OnInit, Type } from '@angular/core';
+import { FormControl } from '@angular/forms';
 import { MatAutocomplete, MatAutocompleteTrigger } from '@angular/material/autocomplete';
-import { ErrorStateMatcher } from '@angular/material/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort, SortDirection } from '@angular/material/sort';
 import { Subscription } from 'rxjs';
@@ -15,9 +13,7 @@ import { VdAutocompleteOptionDirective } from '../directives/autocomplete-option
 import { VdChipDirective } from '../directives/chip.directive';
 import * as i0 from "@angular/core";
 export declare class VdChipsComponent extends AbstractMatFormField<any> implements OnInit, AfterViewInit, OnDestroy {
-    protected injector: Injector;
     media: VdMediaService;
-    protected changeDetectorRef: ChangeDetectorRef;
     /**
      * Reference to the dynamic table component.
      */
@@ -244,17 +240,10 @@ export declare class VdChipsComponent extends AbstractMatFormField<any> implemen
     protected service: BaseService;
     /**
      * Constructor for initializing the component.
-     * @param injector - Injector for dependency injection.
+     *
      * @param media - Media service for handling media queries.
-     * @param changeDetectorRef - Reference for change detection.
-     * @param ngControl - Control for reactive forms.
-     * @param parentForm - Parent form reference.
-     * @param parentFormGroup - Parent form group reference.
-     * @param defaultErrorStateMatcher - Matcher for error state.
-     * @param focusMonitor - Monitor for focus events.
-     * @param elementRef - Reference to the element.
      */
-    constructor(injector: Injector, media: VdMediaService, changeDetectorRef: ChangeDetectorRef, ngControl: NgControl, parentForm: NgForm, parentFormGroup: FormGroupDirective, defaultErrorStateMatcher: ErrorStateMatcher, focusMonitor: FocusMonitor, elementRef: ElementRef);
+    constructor(media: VdMediaService);
     /**
      * Lifecycle hook that is called after data-bound properties of a
      * directive are initialized. It sets up subscriptions to the
@@ -350,6 +339,6 @@ export declare class VdChipsComponent extends AbstractMatFormField<any> implemen
      * is destroyed. It unsubscribes from the data source subscription.
      */
     ngOnDestroy(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<VdChipsComponent, [null, null, null, { optional: true; self: true; }, { optional: true; }, { optional: true; }, null, null, null]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<VdChipsComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<VdChipsComponent, "vd-chips", never, { "classType": { "alias": "classType"; "required": false; }; "chips": { "alias": "chips"; "required": false; }; "endpoint": { "alias": "endpoint"; "required": false; }; "params": { "alias": "params"; "required": false; }; "projection": { "alias": "projection"; "required": false; }; "paginated": { "alias": "paginated"; "required": false; }; "customValue": { "alias": "customValue"; "required": false; }; "context": { "alias": "context"; "required": false; }; "key": { "alias": "key"; "required": false; }; "searchField": { "alias": "searchField"; "required": false; }; "searchFields": { "alias": "searchFields"; "required": false; }; "filters": { "alias": "filters"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "selectFirst": { "alias": "selectFirst"; "required": false; }; "debounce": { "alias": "debounce"; "required": false; }; "autocompleteCssClass": { "alias": "autocompleteCssClass"; "required": false; }; "suffixButtons": { "alias": "suffixButtons"; "required": false; }; }, { "initSelect": "initSelect"; "selected": "selected"; "cleared": "cleared"; "onLaunch": "launch"; "chipFocus": "chipFocus"; }, ["chipTemplate", "autocompleteOptionTemplate"], never, false, never>;
 }

package/lib/common/functions/utils.d.ts

@@ -114,5 +114,5 @@ export declare class Utils {
      */
     static isClass(obj: any): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<Utils, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<Utils, never, never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<Utils, never, never, {}, {}, never, never, true, never>;
 }

package/lib/common/helpers/app-storage.d.ts

@@ -39,5 +39,5 @@ export declare abstract class AppStorage {
      */
     static getObjectEncoded: (key: string, defaultValue?: any) => any;
     static ɵfac: i0.ɵɵFactoryDeclaration<AppStorage, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<AppStorage, never, never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AppStorage, never, never, {}, {}, never, never, true, never>;
 }

package/lib/common/styles/_layout.scss

@@ -1,4 +1,4 @@
-// @use "sass:math";
+@use "sass:math";
 
 // Layout
 // ------------------------------

package/lib/common/styles/_variables.scss

@@ -1,4 +1,7 @@
-@import 'theme-functions';
+@function rem($multiplier) {
+    $font-size: 10px;
+    @return $multiplier * $font-size;
+}
 
 // Teradata UI Platform
 // ------------------------------
@@ -50,30 +53,6 @@ $icon-size: rem(2.4
 $toast-height: $baseline-grid * 3 !default;
 $toast-margin: $baseline-grid * 1 !default;
 
-// Whiteframes
-$whiteframe-shadow-z1: 0px 2px 5px 0 rgba(0, 0, 0, 0.26) !default;
-$whiteframe-zindex-z1: 1 !default;
-$whiteframe-shadow-z2: 0px 8px 17px rgba(0, 0, 0, 0.2) !default;
-$whiteframe-zindex-z2: 2 !default;
-$whiteframe-shadow-z3: 0px 17px 50px rgba(0, 0, 0, 0.19) !default;
-$whiteframe-zindex-z3: 3 !default;
-$whiteframe-shadow-z4: 0px 16px 28px 0 rgba(0, 0, 0, 0.22) !default;
-$whiteframe-zindex-z4: 4 !default;
-$whiteframe-shadow-z5: 0px 27px 24px 0 rgba(0, 0, 0, 0.2) !default;
-$whiteframe-zindex-z5: 5 !default;
-
-// Z-indexes
-$z-index-tooltip: 100 !default;
-$z-index-dialog: 80 !default;
-$z-index-toast: 90 !default;
-$z-index-bottom-sheet: 70 !default;
-$z-index-scroll-mask: 65 !default;
-$z-index-sidenav: 60 !default;
-$z-index-backdrop: 50 !default;
-$z-index-toolbar: 30 !default;
-$z-index-fab: 20 !default;
-$z-index-progress-circular: 2 !default; // Used to fix animation bug in Chrome
-
 // Easing Curves
 
 // The default animation curves used by material design.

package/lib/common/styles/colors/_colors-dark.scss

@@ -1,3 +1,5 @@
+@use "@angular/material" as mat;
+
 @mixin vd-colors-dark() {
   // Text color
 

package/lib/common/styles/colors/_colors.scss

@@ -1,7 +1,7 @@
-@import "colors-dark";
-@import "colors-light";
+@use "colors-dark";
+@use "colors-light";
 
 @mixin vd-colors() {
-  @include vd-colors-light();
-  @include vd-colors-dark();
+  @include colors-light.vd-colors-light();
+  @include colors-dark.vd-colors-dark();
 }

package/lib/common/styles/core/_button.scss

@@ -1,12 +1,9 @@
-@import '../theme-functions';
-@import '../rtl';
+@use "sass:math";
 
-// Standard button sizing.
-$mat-button-padding: 0 rem(0.600) !default;
-$mat-button-min-width: rem(8.800) !default;
-$mat-button-margin: rem(0.600) rem(0.800) !default;
-$mat-button-line-height: rem(3.60) !default;
-$mat-button-border-radius: 3px !default;
+@function rem($multiplier) {
+	$font-size: 10px;
+	@return $multiplier * $font-size;
+}
 
 // FAB sizing.
 $mat-fab-border-radius: 50%;
@@ -16,17 +13,6 @@ $mat-fab-padding: rem(1.60) !default;
 $mat-fab-mini-size: rem(4.00) !default;
 $mat-fab-mini-line-height: rem(4.00) !default;
 
-// Icon button sizing.
-$mat-icon-button-height: rem(4.000) !default;
-$mat-icon-button-width: rem(4.000) !default;
-$mat-icon-button-margin: rem(0.600) !default;
-$mat-icon-border-radius: $mat-fab-border-radius;
-
-@function rem($multiplier) {
-	$font-size: 10px;
-	@return $multiplier * $font-size;
-}
-
 /** Mixin to create distinct classes for fab positions, e.g. ".mat-fab-position-bottom-right". */
 @mixin mat-fab-position($spot, $top: auto, $right: auto, $bottom: auto, $left: auto) {
 
@@ -35,8 +21,8 @@ $mat-icon-border-radius: $mat-fab-border-radius;
 	[mat-fab].mat-fab-#{$spot},
 	.mat-fab.mat-fab-#{$spot} {
 		top: $top;
-		@include rtl(right, $right, $left);
-		@include rtl(left, $left, $right);
+		right: $right;
+		left: $left;
 		bottom: $bottom;
 		position: absolute;
 

package/lib/common/styles/core/_card.scss

@@ -1,17 +1,5 @@
-// @use "sass:math";
-@import '../variables';
-
-@function makelongshadow($color) {
-    $val: 0px 0px $color;
-    @for $i from 1 through 200 {
-        $val: #{$val}, #{$i}px #{$i}px #{$color};
-    }
-    @return $val;
-}
-
-@mixin longshadow($color) {
-    text-shadow: makelongshadow($color);
-}
+@use "sass:math";
+@use '../variables' as *;
 
 $color: rgba(0, 0, 0, 0.01);
 
@@ -21,10 +9,7 @@ $color: rgba(0, 0, 0, 0.01);
         .mat-mdc-card {
             padding: 0;
             margin: 8px;
-            /* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version.*/
-            mat-card-header {
-                height: auto;
-            }
+
             [matCardAvatar] {
                 font-size: $mat-card-header-size;
                 line-height: $mat-card-header-size;
@@ -33,9 +18,11 @@ $color: rgba(0, 0, 0, 0.01);
                 margin: 16px 0 0 15px;
                 border-radius: 50%;
             }
+
             .mat-mdc-card-image {
                 width: 100%;
             }
+
             .mat-mdc-card-image,
             .mat-mdc-card-lg-image,
             .mat-mdc-card-md-image,
@@ -43,34 +30,24 @@ $color: rgba(0, 0, 0, 0.01);
             .mat-mdc-card-title-group {
                 margin: 0;
             }
-            /* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version.*/
-            mat-card-title {
-                padding-top: $padding;
-                padding-left: $padding;
-                padding-right: $padding;
-            }
-            /* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version.*/
-            mat-card-subtitle {
-                padding-left: $padding;
-                padding-right: $padding;
-            }
-            /* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version.*/
-            mat-card-content {
-                padding: $padding;
-            }
-            &, & .mat-mdc-card {
+
+            &,
+            & .mat-mdc-card {
                 & .mat-mdc-card-actions {
                     padding: math.div($padding, 2);
                     margin: 0;
                 }
             }
+
             .mat-mdc-card-actions:last-child {
                 margin-bottom: 0px;
                 padding-bottom: 8px;
             }
         }
+
         &:not([dir='rtl']) {
             .mat-mdc-card-title-group {
+
                 .mat-mdc-card-image,
                 .mat-mdc-card-lg-image,
                 .mat-mdc-card-md-image,
@@ -81,6 +58,7 @@ $color: rgba(0, 0, 0, 0.01);
                     }
                 }
             }
+
             .mat-mdc-card {
                 .mat-mdc-card-image {
                     &:first-child {
@@ -88,6 +66,7 @@ $color: rgba(0, 0, 0, 0.01);
                         border-top-right-radius: $mat-card-radius;
                     }
                 }
+
                 .mat-mdc-card-lg-image,
                 .mat-mdc-card-md-image,
                 .mat-mdc-card-sm-image {
@@ -97,68 +76,5 @@ $color: rgba(0, 0, 0, 0.01);
                 }
             }
         }
-        &[dir='rtl'] {
-            .mat-mdc-card-title-group {
-                .mat-mdc-card-image,
-                .mat-mdc-card-lg-image,
-                .mat-mdc-card-md-image,
-                .mat-mdc-card-sm-image {
-                    &:last-child {
-                        border-top-left-radius: $mat-card-radius;
-                        border-bottom-left-radius: $mat-card-radius;
-                    }
-                }
-            }
-            .mat-mdc-card {
-                .mat-mdc-card-image {
-                    &:first-child {
-                        border-top-left-radius: $mat-card-radius;
-                        border-top-right-radius: $mat-card-radius;
-                    }
-                }
-                .mat-mdc-card-lg-image,
-                .mat-mdc-card-md-image,
-                .mat-mdc-card-sm-image {
-                    &:first-child {
-                        border-top-right-radius: $mat-card-radius;
-                    }
-                }
-            }
-        }
-    }
-    /* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version.*/
-    .mat-card-colored {
-        &[href],
-        &[ng-reflect-href] {
-            &:hover {
-            cursor: pointer;
-            box-shadow: 0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);
-            }
-            &:active{
-                box-shadow: 0 6px 6px -3px rgba(0,0,0,.2),0 10px 14px 1px rgba(0,0,0,.14),0 4px 18px 3px rgba(0,0,0,.12);
-                & mat-toolbar {
-                    background-color:rgba(255, 255, 255, 0.2);
-                    background-position: -100% 100%;
-                }
-            }
-            & mat-toolbar {
-                background-size: 200% 100%;	
-                background-image: linear-gradient(to right, transparent 50%, rgba(255, 255, 255, 0.2) 50%);
-                transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
-            }
-        }
-        & mat-toolbar {
-            height: 148px;
-            border-radius: 2px 2px 0 0;
-            overflow: hidden;
-            
-            mat-icon,
-            .mat-icon {
-                opacity: 0.65;
-                color: white;
-                font-size: 8rem;
-                @include longshadow(darken($color, 5% ));
-            }
-        }
     }
 }

package/lib/common/styles/core/_core.scss

@@ -1,24 +1,11 @@
-@import "button";
-@import "card";
-@import "content";
-@import "divider";
-@import "icons";
-@import "list";
-@import "select";
-@import "sidenav";
-@import "structure";
-@import "toolbar";
-@import "whiteframe";
+@use "button";
+@use "card";
+@use "sidenav";
+@use "structure";
 
 @mixin vd-core() {
-	@include vd-button-utilities();
-	@include vd-card-utilities();
-	@include vd-content-utilities();
-	@include vd-divider-utilities();
-	@include vd-icon-utilities();
-	@include vd-list-utilities();
-	@include vd-sidenav-utilities();
-	@include vd-structure-utilities();
-	@include vd-toolbar-utilities();
-	@include vd-whiteframe-utilities();
+	@include button.vd-button-utilities();
+	@include card.vd-card-utilities();
+	@include sidenav.vd-sidenav-utilities();
+	@include structure.vd-structure-utilities();
 }

package/lib/common/styles/core/_sidenav.scss

@@ -1,19 +1,21 @@
-@import '../variables';
+@use '../variables' as var;
 
 @mixin vd-sidenav-utilities() {
     mat-sidenav {
-        width: $navigation-drawer-width;
-        /* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version. */
+        width: var.$navigation-drawer-width;
+
         .mat-list-item-content {
-            mat-icon {            
-                @include rtl(margin-left, 0px,$margin);
-                @include rtl(margin-right, $margin, 0px);
+            mat-icon {
                 color: #737373;
                 fill: #737373;
             }
         }
+
         [mat-list-item] {
-            &,&:active,&:focus {
+
+            &,
+            &:active,
+            &:focus {
                 outline: none;
             }
         }

package/lib/common/styles/core/_structure.scss

@@ -1,4 +1,4 @@
-@import '../variables';
+@use '../variables' as var;
 
 @mixin vd-structure-utilities() {
 
@@ -23,15 +23,6 @@
     padding: 10px;
   }
 
-  button.md-no-style {
-    font-weight: normal;
-    background-color: inherit;
-    @include rtl(text-align, left, right);
-    border: none;
-    padding: 0;
-    margin: 0;
-  }
-
   select,
   button,
   textarea,
@@ -45,6 +36,7 @@
   html input[type="button"],
   button {
     cursor: pointer;
+    appearance: button;
     -webkit-appearance: button;
 
     &[disabled] {
@@ -59,6 +51,7 @@
 
   input {
     &[type="search"] {
+      appearance: textfield;
       -webkit-appearance: textfield;
       box-sizing: content-box;
       -webkit-box-sizing: content-box;
@@ -119,7 +112,7 @@
     margin: 8px;
   }
 
-  @media (min-width: $layout-breakpoint-sm) {
+  @media (min-width: var.$layout-breakpoint-sm) {
 
     .md-padding,
     .mat-padding {

package/lib/common/styles/font/_font.scss

@@ -1,4 +1,4 @@
-@import 'material-symbols';
+@use 'material-symbols';
 
 @mixin vd-material-icons() {
     .material-icons {
@@ -40,52 +40,44 @@
     }
 
     // Rules for sizing the icon.
-    .material-icons.md-18,
     .material-icons.mat-18 {
         font-size: 18px;
         height: 18px;
-        width: 18px
+        width: 18px;
     }
 
-    .material-icons.md-24,
     .material-icons.mat-24 {
         font-size: 24px;
         height: 24px;
-        width: 24px
+        width: 24px;
     }
 
-    .material-icons.md-36,
     .material-icons.mat-36 {
         font-size: 36px;
         height: 36px;
-        width: 36px
+        width: 36px;
     }
 
-    .material-icons.md-48,
     .material-icons.mat-48 {
         font-size: 48px;
         height: 48px;
-        width: 48px
+        width: 48px;
     }
 
     // Rules for using icons as black on a light background.
-    .material-icons.md-dark,
     .material-icons.mat-dark {
         color: rgba(0, 0, 0, 0.54);
     }
 
-    .material-icons.md-dark.md-inactive,
     .material-icons.mat-dark.mat-inactive {
         color: rgba(0, 0, 0, 0.26);
     }
 
     // Rules for using icons as white on a dark background.
-    .material-icons.md-light,
     .material-icons.mat-light {
         color: rgba(255, 255, 255, 1);
     }
 
-    .material-icons.md-light.md-inactive,
     .material-icons.mat-light.mat-inactive {
         color: rgba(255, 255, 255, 0.3);
     }

package/lib/common/styles/m2/_common-theme.scss

@@ -1,15 +1,15 @@
-// @use '~@angular/material' as mat;
-@import '../theme-functions';
+@use '@angular/material' as mat;
+@use 'sass:map';
 
 @mixin vd-common-theme($theme) {
-    $primary: map-get($theme, primary);
-    $accent: map-get($theme, accent);
-    $warn: map-get($theme, warn);
-    $foreground: map-get($theme, foreground);
-    $background: map-get($theme, background);
-    $primary-color: mat-color($primary);
-    $accent-color: mat-color($accent);
-    $warn-color: mat-color($warn);
+    $primary: map.get($theme, primary);
+    $accent: map.get($theme, accent);
+    $warn: map.get($theme, warn);
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+    $primary-color: mat.m2-get-color-from-palette($primary);
+    $accent-color: mat.m2-get-color-from-palette($accent);
+    $warn-color: mat.m2-get-color-from-palette($warn);
     $is-dark: map.get($theme, is-dark);
 
     .mdc-list-item,