@messaia/cdk 18.2.3 → 19.0.0-rc02

package/lib/base/base.module.d.ts

@@ -6,7 +6,7 @@ import { GenericFormComponent } from './components/generic-form.component';
 import { GenericListComponent } from './components/generic-list.component';
 import { GenericReactiveFormComponent } from './components/generic-reactive-form.component';
 import { VdTaskDialogComponent } from './components/task-dialog/task-dialog.component';
-import { Common } from './constants/common';
+import { Common, EXPORT_DIALOG_COMPONENT } from './constants/common';
 import { GlobalRoles } from './constants/global-roles';
 import { MessageType } from './enums/message-type';
 import { AuthHelper } from './helpers/auth-helper';
@@ -27,23 +27,24 @@ import * as i1 from "@angular/material/button";
 import * as i2 from "@angular/material/icon";
 import * as i3 from "@angular/material/divider";
 import * as i4 from "@angular/material/progress-bar";
-import * as i5 from "@angular/cdk/drag-drop";
-import * as i6 from "./components/dynamic-table-config-dialog/dynamic-table-config-dialog.comnponent";
-import * as i7 from "./components/task-dialog/task-dialog.component";
-import * as i8 from "@angular/common";
-import * as i9 from "@angular/forms";
-import * as i10 from "@angular/material/dialog";
-import * as i11 from "../table/table.module";
-import * as i12 from "@angular/material/checkbox";
-import * as i13 from "@angular/material/form-field";
-export { AuthHelper, AuthUser, BaseComponent, BaseInterceptor, CachingInterceptor, Common, FileService, GenericEmbeddedListComponent, GenericFormBaseComponent, GenericFormComponent, GenericListComponent, GenericReactiveFormComponent, GlobalRoles, IBaseComponent, IGenericFormBaseComponent, IGenericListComponent, IGenericReactiveFormBaseComponent, LoadingScreenInterceptor, LoadingScreenService, MessageType, PrintService, TaskDialogData, VdDynamicTableConfigDialogComponent, VdTaskDialogComponent };
+import * as i5 from "@angular/material/paginator";
+import * as i6 from "@angular/cdk/drag-drop";
+import * as i7 from "./components/dynamic-table-config-dialog/dynamic-table-config-dialog.comnponent";
+import * as i8 from "./components/task-dialog/task-dialog.component";
+import * as i9 from "@angular/common";
+import * as i10 from "@angular/forms";
+import * as i11 from "@angular/material/dialog";
+import * as i12 from "../table/table.module";
+import * as i13 from "@angular/material/checkbox";
+import * as i14 from "@angular/material/form-field";
+export { AuthHelper, AuthUser, BaseComponent, BaseInterceptor, CachingInterceptor, Common, EXPORT_DIALOG_COMPONENT, FileService, GenericEmbeddedListComponent, GenericFormBaseComponent, GenericFormComponent, GenericListComponent, GenericReactiveFormComponent, GlobalRoles, IBaseComponent, IGenericFormBaseComponent, IGenericListComponent, IGenericReactiveFormBaseComponent, LoadingScreenInterceptor, LoadingScreenService, MessageType, PrintService, TaskDialogData, VdDynamicTableConfigDialogComponent, VdTaskDialogComponent };
 export declare class MaterialModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MaterialModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MaterialModule, never, never, [typeof i1.MatButtonModule, typeof i2.MatIconModule, typeof i3.MatDividerModule, typeof i4.MatProgressBarModule, typeof i5.DragDropModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MaterialModule, never, never, [typeof i1.MatButtonModule, typeof i2.MatIconModule, typeof i3.MatDividerModule, typeof i4.MatProgressBarModule, typeof i5.MatPaginatorModule, typeof i6.DragDropModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MaterialModule>;
 }
 export declare class VdBaseModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<VdBaseModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<VdBaseModule, [typeof i6.VdDynamicTableConfigDialogComponent, typeof i7.VdTaskDialogComponent], [typeof i8.CommonModule, typeof i9.FormsModule, typeof i9.ReactiveFormsModule, typeof i10.MatDialogModule, typeof i11.VdTableModule, typeof MaterialModule, typeof i12.MatCheckboxModule, typeof i13.MatFormFieldModule], [typeof i6.VdDynamicTableConfigDialogComponent, typeof i7.VdTaskDialogComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<VdBaseModule, [typeof i7.VdDynamicTableConfigDialogComponent, typeof i8.VdTaskDialogComponent], [typeof i9.CommonModule, typeof i10.FormsModule, typeof i10.ReactiveFormsModule, typeof i11.MatDialogModule, typeof i12.VdTableModule, typeof MaterialModule, typeof i13.MatCheckboxModule, typeof i14.MatFormFieldModule], [typeof i7.VdDynamicTableConfigDialogComponent, typeof i8.VdTaskDialogComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<VdBaseModule>;
 }

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

@@ -317,9 +317,10 @@ export declare abstract class GenericFormBaseComponent<TEntity extends IEntity,
      * This method sends a request to create a new entity on the server.
      * @param httpOptions Optional HTTP options for the request.
      * @param httpHeaders Optional HTTP headers for the request.
+     * @param path A relative path to the action
      * @returns An Observable of the created TEntity.
      */
-    protected create<TEntity>(httpOptions?: Object, httpHeaders?: HttpHeaders): Observable<TEntity>;
+    protected create<TEntity>(httpOptions?: Object, httpHeaders?: HttpHeaders, path?: string): Observable<TEntity>;
     /**
      * Updates the entity.
      * This method sends a request to update an existing entity on the server.
@@ -419,5 +420,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.
@@ -171,6 +173,18 @@ export declare abstract class GenericListComponent<TEntity extends IEntity | any
      * @type {boolean}
      */
     configurable: boolean;
+    /**
+     * @property exportable
+     * @description Determines if the table is exportable.
+     * @type {boolean}
+     */
+    exportable?: boolean;
+    /**
+     * @property exportFileName
+     * @description The name of the file to export.
+     * @type {string}
+     */
+    exportFileName?: string;
     /**
      * @property sticky
      * @description Flag to indicate whether the table headers or columns should stick
@@ -251,7 +265,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.
@@ -351,6 +367,10 @@ export declare abstract class GenericListComponent<TEntity extends IEntity | any
      * Opens the config dialog
      */
     openConfigDialog(): void;
+    /**
+     * Opens the export dialog
+     */
+    openExportDialog(): void;
     /**
      * Saves the table config
      * @param tableConfig
@@ -478,5 +498,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/constants/common.d.ts

@@ -1,3 +1,5 @@
+import { InjectionToken } from "@angular/core";
+export declare const EXPORT_DIALOG_COMPONENT: InjectionToken<string>;
 export declare const Common: {
     allowedExtensions: string[];
     editorPlugins: string;

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,37 @@
-@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();
+
+	.bgc-primary {
+		background-color: var(--mat-sys-primary);
+	}
+
+	.bgc-secondary,
+	.bgc-accent {
+		background-color: var(--mat-sys-secondary);
+	}
+
+	.bgc-tertiary {
+		background-color: var(--mat-sys-tertiary);
+	}
+
+	.bgc-gradient,
+	.bg-gradient {
+		background-image: linear-gradient(250deg, var(--mat-sys-tertiary), var(--mat-sys-primary));
+	}
+
+	.bgc-glossy,
+	.bg-glossy {
+		background-color: inherit !important;
+		background: linear-gradient(145deg, rgba(245, 245, 245, 0.9), rgba(245, 245, 245, 0.7));
+		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+	}
+
+	.bgc-surface,
+	.panel-wrap {
+		background-color: var(--mat-sys-surface);
+	}
 }

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,39 @@ $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 {
+
+            .mat-mdc-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 {
+
+            .mat-mdc-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 {
+
+            .mat-mdc-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 +73,7 @@ $color: rgba(0, 0, 0, 0.01);
                     }
                 }
             }
+
             .mat-mdc-card {
                 .mat-mdc-card-image {
                     &:first-child {
@@ -88,6 +81,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 +91,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,13 @@
-@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";
+@use "overrides";
 
 @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();
+	@include overrides.vd-overrides();
 }

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

@@ -0,0 +1,45 @@
+@use '@angular/material' as mat;
+
+@mixin vd-overrides() {
+    :root {
+
+        /* Override background color for Angular Material table */
+        .main-table-wrapper,
+        .mat-expansion-panel {
+            @include mat.table-overrides((background-color: var(--mat-sys-surface-container-low)));
+        }
+
+        /* Override text size for Angular Material form field */
+        @include mat.form-field-overrides((container-text-size: var(--mat-sys-body-medium-size), outlined-label-text-size: var(--mat-sys-body-medium-size)));
+
+        mat-expansion-panel {
+            /* Override background color for Angular Material expansion panel */
+            @include mat.expansion-overrides((container-background-color: var(--mat-sys-surface-container-low), header-text-size: 0.95rem));
+        }
+
+        /* Override container color for Angular Material stepper */
+        @include mat.stepper-overrides((container-color: var(--mat-sys-surface-container-low)));
+
+        /* Override properties for Angular Material slide toggle */
+        @include mat.slide-toggle-overrides((track-width: 46px, track-height: 22px,
+                selected-handle-size: 10px,
+                with-icon-handle-size: 18px,
+                unselected-handle-color: var(--mat-sys-on-surface-variant), ));
+
+        /* Override max width for Angular Material dialog */
+        @include mat.dialog-overrides((container-max-width: none));
+
+        mat-expansion-panel,
+        mat-vertical-stepper,
+        mat-card {
+            /* Override background color for Angular Material paginator */
+            @include mat.paginator-overrides((container-background-color: var(--mat-sys-surface-container-low)));
+        }
+
+        /* Define legacy typography configuration for Angular Material */
+        $typography: mat.m2-define-legacy-typography-config();
+
+        /* Apply typography hierarchy for Angular Material */
+        @include mat.typography-hierarchy($typography);
+    }
+}