@messaia/cdk 18.2.3 → 19.0.0-rc01

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

@@ -1,26 +1,31 @@
-// @use '~@angular/material' as mat;
-@import '../theme-functions';
+@use '@angular/material' as mat;
+@use 'sass:map';
 
 @mixin vd-common-theme($theme) {
-    $warn: map-get($theme, warn);
-    $foreground: map-get($theme, foreground);
-    $background: map-get($theme, background);
+    $primary: map.get($theme, primary);
+    $accent: map.get($theme, secondary);
+    $warn: map.get($theme, error);
+    $neutral: map.get($theme, neutral);
+    $background: map.get($theme, background);
+    $primary-color: mat.get-theme-color($theme, primary);
+    $accent-color: mat.get-theme-color($theme, secondary);
+    $warn-color: mat.get-theme-color($theme, error);
     $is-dark: map.get($theme, is-dark);
 
     .mdc-list-item,
     .mat-list-item-content {
         mat-icon {
-            // color: mat.get-color-from-palette($foreground, icon);
+            // color: mat.get-theme-color($theme, neutral, icon);
 
             &[matListAvatar] {
-                // background-color: mat.m2-get-color-from-palette($background, hover);
+                // background-color: mat.get-theme-color($theme, neutral, hover);
             }
         }
     }
 
     .mat-list-text {
         p {
-            // color: mat.m2-get-color-from-palette($foreground, disabled);
+            // color: mat.get-theme-color($theme, neutral, disabled);
         }
     }
 
@@ -28,7 +33,7 @@
         opacity: if($is-dark, 0.8, 1);
 
         .mat-mdc-list-item-icon {
-            // color: mat.m2-get-color-from-palette($foreground, icon);
+            // color: mat.get-theme-color($theme, neutral, icon);
         }
 
         .mdc-list-item__content {
@@ -41,7 +46,19 @@
 
     .mat-autocomplete-panel {
         .mat-mdc-paginator {
-            // background-color: mat.m2-get-color-from-palette($background, app-bar);
+            // background-color: mat.get-theme-color($theme, background, app-bar);
         }
     }
+
+    .bgc-primary {
+        background-color: $primary-color;
+    }
+
+    .bgc-accent {
+        background-color: $accent-color;
+    }
+
+    .bgc-warn {
+        background-color: $warn-color;
+    }
 }

package/lib/common/styles/platform.scss

@@ -1,11 +1,13 @@
 @use '@angular/material' as mat;
-@use "sass:math";
 
-@import 'styles';
+@use "colors/colors" as colors;
+@use "font/font" as font;
+@use "core/core" as core;
+@use "layout" as layout;
+@use "utilities/utilities" as utilities;
 
-@include vd-core();
-@include vd-material-icons();
-@include vd-utilities();
-@include vd-layout();
-@include vd-typography();
-@include vd-colors();
+@include core.vd-core();
+@include font.vd-material-icons();
+@include layout.vd-layout();
+@include colors.vd-colors();
+@include utilities.vd-utilities();

package/lib/common/styles/utilities/_general.scss

@@ -1,3 +1,5 @@
+@use '@angular/material' as mat;
+
 @mixin vd-general-utilities() {
 
     // Angular 4 added tabindex to everything, this style removes the outline:
@@ -193,6 +195,59 @@
             display: table-cell;
         }
     }
+
+    /* #region MatFormField  */
+
+    mat-form-field {
+        @include mat.form-field-density(-2);
+
+        &[dense-1] {
+            @include mat.form-field-density(-3);
+            @include mat.icon-button-density(-3);
+        }
+
+        &[dense-2] {
+            @include mat.form-field-density(-4);
+            @include mat.icon-button-density(-4);
+        }
+
+        &[dense-3] {
+            @include mat.form-field-density(-5);
+            @include mat.icon-button-density(-5);
+        }
+
+        .mat-mdc-form-field-infix {
+            width: auto;
+            display: flex;
+        }
+
+        .mat-mdc-text-field-wrapper {
+            .mat-mdc-floating-label:not(.mdc-floating-label--float-above) {
+                top: 23px !important;
+            }
+        }
+
+        .mat-mdc-select-arrow-wrapper {
+            height: 20px;
+        }
+
+        vd-select {
+            width: 100%;
+        }
+
+        &.form-field-type-calendar {
+            .mat-mdc-text-field-wrapper {
+                padding: 0;
+            }
+
+            .mat-mdc-form-field-infix {
+                padding-top: 0px !important;
+                padding-bottom: 0px !important;
+            }
+        }
+    }
+
+    /* #endregion */
 }
 
 /* #region Layout & Commons */
@@ -357,57 +412,6 @@ vd-layout-footer-inner {
 
 /* #region MatFormField  */
 
-mat-form-field {
-    @include mat.form-field-density(-2);
-
-    &[dense-1] {
-        @include mat.form-field-density(-3);
-        @include mat.icon-button-density(-3);
-    }
-
-    &[dense-2] {
-        @include mat.form-field-density(-4);
-        @include mat.icon-button-density(-4);
-    }
-
-    &[dense-3] {
-        @include mat.form-field-density(-5);
-        @include mat.icon-button-density(-5);
-    }
-
-    min-width: auto !important;
-
-    .mat-mdc-form-field-infix {
-        width: auto;
-        display: flex;
-    }
-
-    .mat-mdc-text-field-wrapper {
-        .mat-mdc-floating-label:not(.mdc-floating-label--float-above) {
-            top: 23px !important;
-        }
-    }
-
-    .mat-mdc-select-arrow-wrapper {
-        height: 20px;
-    }
-
-    vd-select {
-        width: 100%;
-    }
-
-    &.form-field-type-calendar {
-        .mat-mdc-text-field-wrapper {
-            padding: 0;
-        }
-
-        .mat-mdc-form-field-infix {
-            padding-top: 0px !important;
-            padding-bottom: 0px !important;
-        }
-    }
-}
-
 /* #endregion */
 
 /* #region  MatToolbar */

package/lib/common/styles/utilities/_pull.scss

@@ -1,36 +1,29 @@
 @mixin pull($direction: "") {
-	.pull#{$direction}-xxl {
-		margin#{$direction}: -56px !important;
-	}
-
-	.pull#{$direction}-xl {
-		margin#{$direction}: -48px !important;
-	}
-
-	.pull#{$direction}-lg {
-		margin#{$direction}: -32px !important;
-	}
-
-	.pull#{$direction}-md {
-		margin#{$direction}: -24px !important;
-	}
-
-	.pull#{$direction} {
-		margin#{$direction}: -16px !important;
-	}
-
-	.pull#{$direction}-sm {
-		margin#{$direction}: -8px !important;
-	}
-
-	.pull#{$direction}-xs {
-		margin#{$direction}: -4px !important;
-	}
-
-	.pull#{$direction}-none {
-		margin#{$direction}: -0px !important;
+	$sizes: (
+		xxl: -56px,
+		xl: -48px,
+		lg: -32px,
+		md: -24px,
+		default: -16px,
+		sm: -8px,
+		xs: -4px,
+		none: 0px
+	);
+
+@each $size, $value in $sizes {
+	@if $size ==default {
+		.pull#{$direction} {
+			margin#{$direction}: #{$value} !important;
+		}
+	}
+
+	@else {
+		.pull#{$direction}-#{$size} {
+			margin#{$direction}: #{$value} !important;
+		}
 	}
 }
+}
 
 @mixin vd-pulling-utilities() {
 	body {

package/lib/common/styles/utilities/_push.scss

@@ -1,36 +1,29 @@
 @mixin push($direction: "") {
-	.push#{$direction} {
-		margin#{$direction}: 16px !important;
-	}
-
-	.push#{$direction}-xxl {
-		margin#{$direction}: 56px !important;
-	}
-
-	.push#{$direction}-xl {
-		margin#{$direction}: 48px !important;
-	}
-
-	.push#{$direction}-lg {
-		margin#{$direction}: 32px !important;
-	}
-
-	.push#{$direction}-md {
-		margin#{$direction}: 24px !important;
-	}
-
-	.push#{$direction}-sm {
-		margin#{$direction}: 8px !important;
-	}
-
-	.push#{$direction}-xs {
-		margin#{$direction}: 4px !important;
-	}
-
-	.push#{$direction}-none {
-		margin#{$direction}: 0px !important;
+	$sizes: (
+		xxl: 56px,
+		xl: 48px,
+		lg: 32px,
+		md: 24px,
+		default: 16px,
+		sm: 8px,
+		xs: 4px,
+		none: 0px
+	);
+
+@each $size, $value in $sizes {
+	@if $size ==default {
+		.push#{$direction} {
+			margin#{$direction}: #{$value} !important;
+		}
+	}
+
+	@else {
+		.push#{$direction}-#{$size} {
+			margin#{$direction}: #{$value} !important;
+		}
 	}
 }
+}
 
 @mixin vd-pushing-utilities() {
 	body {

package/lib/common/styles/utilities/_size.scss

@@ -1,21 +1,21 @@
 @mixin vd-size-utilities() {
     $size-list: 12 16 24 32 50 64 72 100 128 256;
+
     @each $current-size in $size-list {
-        $i: index($size-list, $current-size);
         .size-#{$current-size} {
             height: #{$current-size}px;
             width: #{$current-size}px;
         }
     }
+
     @each $current-size in $size-list {
-        $i: index($size-list, $current-size);
         .size-height-#{$current-size} {
             height: #{$current-size}px;
             width: auto;
         }
     }
+
     @each $current-size in $size-list {
-        $i: index($size-list, $current-size);
         .size-width-#{$current-size} {
             width: #{$current-size}px;
             height: auto;

package/lib/common/styles/utilities/_utilities.scss

@@ -1,17 +1,17 @@
-@import "general";
-@import "pad";
-@import "pull";
-@import "push";
-@import "size";
-@import "text";
-@import "gap";
+@use "general";
+@use "pad";
+@use "pull";
+@use "push";
+@use "size";
+@use "text";
+@use "gap";
 
 @mixin vd-utilities() {
-	@include vd-general-utilities();
-	@include vd-padding-utilities();
-	@include vd-pulling-utilities();
-	@include vd-pushing-utilities();
-	@include vd-size-utilities();
-	@include vd-text-utilities();
-	@include vd-gap-utilities();
+	@include general.vd-general-utilities();
+	@include pad.vd-padding-utilities();
+	@include pull.vd-pulling-utilities();
+	@include push.vd-pushing-utilities();
+	@include size.vd-size-utilities();
+	@include text.vd-text-utilities();
+	@include gap.vd-gap-utilities();
 }

package/lib/common/theming/_m2-all-theme.scss

@@ -1,12 +1,6 @@
-@use '@angular/material' as mat;
-@use "sass:math";
-@use 'sass:color';
 @use 'sass:map';
-
-@import '../styles/m2/common-theme';
-@import '../../layout/m2-layout-theme';
-@import '../styles/styles';
-@import '../typography/all-typography';
+@use '../styles/m2/common-theme' as common-theme;
+@use '../../layout/m2-layout-theme' as layout-theme;
 
 /* Overrides the background colors */
 @function vd-custom-background($theme, $config) {
@@ -19,7 +13,6 @@
 
 /* Creates a theme */
 @mixin vd-theme($theme, $config: null) {
-	@include vd-typography($config);
-	@include vd-common-theme($theme);
-	@include vd-layout-theme($theme);
+	@include common-theme.vd-common-theme($theme);
+	@include layout-theme.vd-layout-theme($theme);
 }

package/lib/common/theming/_m3-all-theme.scss

@@ -0,0 +1,18 @@
+@use 'sass:map';
+@use '../styles/m3/common-theme' as common-theme;
+@use '../../layout/m3-layout-theme' as layout-theme;
+
+/* Overrides the background colors */
+@function vd-custom-background($theme, $config) {
+	$palette-color : map.get($theme, color);
+	$background: map.get($palette-color, background);
+	$background: map.merge($background, $config);
+	$palette-color: map.merge($palette-color, (background: $background));
+	@return map.merge($theme, (color: $palette-color));
+}
+
+/* Creates a theme */
+@mixin vd-theme($theme, $config: null) {
+	@include common-theme.vd-common-theme($theme);
+	@include layout-theme.vd-layout-theme($theme);
+}

package/lib/form-validators/directives/base-directive.d.ts

@@ -21,5 +21,5 @@ export declare abstract class BaseDirective {
      */
     private setValidatorConfig;
     static ɵfac: i0.ɵɵFactoryDeclaration<BaseDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseDirective, never, never, { "model": { "alias": "model"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseDirective, never, never, { "model": { "alias": "model"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/form-validators/directives/template-validations/base-validator.directive.d.ts

@@ -41,5 +41,5 @@ export declare class BaseValidator extends ControlExpressionProcess {
      */
     protected setEventName(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<BaseValidator, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseValidator, never, never, { "formControl": { "alias": "formControl"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseValidator, never, never, { "formControl": { "alias": "formControl"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/form-validators/directives/template-validations/control-expression-process.d.ts

@@ -40,5 +40,5 @@ export declare abstract class ControlExpressionProcess {
      */
     setModelConfig(control: AbstractControl): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ControlExpressionProcess, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ControlExpressionProcess, never, never, { "name": { "alias": "name"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ControlExpressionProcess, never, never, { "name": { "alias": "name"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/form-validators/services/rx-form-array.d.ts

@@ -7,8 +7,8 @@ export declare class RxFormArray extends FormArray {
     private _isModified;
     private _modified;
     constructor(arrayObject: any[], controls: any, validatorOrOpts?: any, asyncValidator?: any, arrayConfig?: {
-        allowMaxIndex?: number | undefined;
-        messageKey?: string | undefined;
+        allowMaxIndex?: number;
+        messageKey?: string;
     } | undefined);
     get isModified(): boolean;
     push(control: any, options?: {

package/lib/form-validators/util/reset-form.d.ts

@@ -13,9 +13,9 @@ export declare function getNestedOptions(controlName: string, options?: {
         [key: string]: any;
     };
 }): {
-    resetType?: ResetFormType | undefined;
-    with?: string[] | undefined;
+    resetType?: ResetFormType;
+    with?: string[];
     value?: {
         [key: string]: any;
-    } | undefined;
+    };
 } | undefined;

package/lib/forms/directives/mat-form-field-editor.directive.d.ts

@@ -1,43 +1,43 @@
 import { Platform } from '@angular/cdk/platform';
 import { AutofillMonitor } from '@angular/cdk/text-field';
-import { DoCheck, ElementRef, EventEmitter, NgZone } from '@angular/core';
+import { DoCheck, EventEmitter, NgZone } from '@angular/core';
 import { FormGroupDirective, NgControl, NgForm } from '@angular/forms';
-import { CanUpdateErrorState, ErrorStateMatcher } from '@angular/material/core';
+import { _ErrorStateTracker, ErrorStateMatcher } from '@angular/material/core';
 import { MatFormFieldControl } from '@angular/material/form-field';
 import { EditorComponent } from '@tinymce/tinymce-angular';
 import { Subject } from 'rxjs';
 import { Editor } from 'tinymce';
 import * as i0 from "@angular/core";
-declare const _AbstractMatFormFieldBase: import("@angular/material/core")._Constructor<CanUpdateErrorState> & import("@angular/material/core")._AbstractConstructor<CanUpdateErrorState> & {
-    new (_defaultErrorStateMatcher: ErrorStateMatcher, _parentForm: NgForm, _parentFormGroup: FormGroupDirective, ngControl: NgControl): {
-        /**
-         * Emits whenever the component state changes and should cause the parent
-         * form-field to update. Implemented as part of `MatFormFieldControl`.
-         * @docs-private
-         */
-        readonly stateChanges: Subject<void>;
-        _defaultErrorStateMatcher: ErrorStateMatcher;
-        _parentForm: NgForm;
-        _parentFormGroup: FormGroupDirective;
-        /**
-         * Form control bound to the component.
-         * Implemented as part of `MatFormFieldControl`.
-         * @docs-private
-         */
-        ngControl: NgControl;
-    };
-};
 export interface EditorChange {
     textContent: string;
     displayContent: string;
 }
-export declare class MatFormFieldEditorDirective extends _AbstractMatFormFieldBase implements MatFormFieldControl<any>, CanUpdateErrorState, DoCheck {
-    private elementRef;
+export declare class MatFormFieldEditorDirective implements MatFormFieldControl<any>, DoCheck {
     ngControl: NgControl;
     private valueAccessor;
     private platform;
     private autofillMonitor;
     private ngZone;
+    /**
+      * Tracks the error state of the select.
+      */
+    protected errorStateTracker: _ErrorStateTracker;
+    /**
+     * Object used to control when error messages are shown.
+     */
+    get errorStateMatcher(): ErrorStateMatcher;
+    set errorStateMatcher(value: ErrorStateMatcher);
+    /**
+     * Whether the control is in an error state.
+     */
+    get errorState(): boolean;
+    set errorState(value: boolean);
+    /**
+     * Emits whenever the component state changes and should cause the parent
+     * form-field to update. Implemented as part of `MatFormFieldControl`.
+     * @docs-private
+     */
+    readonly stateChanges: Subject<void>;
     /**
      * _disabled: boolean
      */
@@ -71,15 +71,18 @@ export declare class MatFormFieldEditorDirective extends _AbstractMatFormFieldBa
     private uid;
     private editor?;
     private editorElement?;
-    errorStateMatcher: ErrorStateMatcher;
-    constructor(elementRef: ElementRef<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>, ngControl: NgControl, parentForm: NgForm, parentFormGroup: FormGroupDirective, errorStateMatcher: ErrorStateMatcher, valueAccessor: EditorComponent, platform: Platform, autofillMonitor: AutofillMonitor, ngZone: NgZone);
+    constructor(ngControl: NgControl, parentForm: NgForm, parentFormGroup: FormGroupDirective, defaultErrorStateMatcher: ErrorStateMatcher, valueAccessor: EditorComponent, platform: Platform, autofillMonitor: AutofillMonitor, ngZone: NgZone);
     ngDoCheck(): void;
+    /**
+     * Updates the error state of the control. This should be called whenever the
+     * inputs bound to the component change.
+     */
+    updateErrorState(): void;
     onEditorInit({ editor }: {
         editor: Editor;
     }): void;
     setDescribedByIds(ids: string[]): void;
     onContainerClick(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatFormFieldEditorDirective, [null, { optional: true; self: true; }, { optional: true; }, { optional: true; }, null, { self: true; }, null, null, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatFormFieldEditorDirective, "[tinyMatFormControl]", never, { "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "value": { "alias": "value"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; }, { "editorChange": "editorChange"; }, never, never, false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatFormFieldEditorDirective, [{ optional: true; self: true; }, { optional: true; }, { optional: true; }, null, { self: true; }, null, null, null]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatFormFieldEditorDirective, "[tinyMatFormControl]", never, { "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "editorChange": "editorChange"; }, never, never, false, never>;
 }
-export {};