@ptsecurity/mosaic 17.2.0 → 17.2.2

package/form-field/_form-field-theme.scss

@@ -61,11 +61,13 @@
             &.cdk-focused {
                 &:not(.ng-invalid) .mc-form-field__container {
                     border-color: mc-css-variable(states-focused-color, map-get($theme, states, focused-color));
-                    box-shadow: 0 0 0 1px mc-css-variable(states-focused-color, map-get($theme, states, focused-color));
+                    box-shadow: 0 0 0.1px 1px mc-css-variable(
+                        states-focused-color, map-get($theme, states, focused-color)
+                    );
                 }
 
                 &.ng-invalid .mc-form-field__container {
-                    box-shadow: 0 0 0 1px mc-color($error);
+                    box-shadow: 0 0 0.1px 1px mc-css-variable(error-default, mc-color($error));
                 }
             }
 
@@ -142,14 +144,14 @@
 
 @mixin mc-form-field-typography($config) {
     .mc-form-field {
-        @include mc-typography-css-variables(form-field, default);
+        @include mc-typography-css-variables($config, form-field, default);
     }
 
     .mc-form-field__hint, .mc-password-hint {
-        @include mc-typography-css-variables(form-field-hint, default);
+        @include mc-typography-css-variables($config, form-field-hint, default);
     }
 
     .mc-hint {
-        @include mc-typography-level-to-styles($config, caption);
+        @include mc-typography-level-to-styles_css-variables($config, typography, caption);
     }
 }

package/form-field/form-field.d.ts

@@ -1,5 +1,5 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { AfterContentChecked, AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, InjectionToken, OnDestroy, QueryList } from '@angular/core';
+import { AfterContentChecked, AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, OnDestroy, QueryList } from '@angular/core';
 import { NgControl } from '@angular/forms';
 import { CanColor, CanColorCtor } from '@ptsecurity/mosaic/core';
 import { McCleaner } from './cleaner';
@@ -10,12 +10,6 @@ import { McPrefix } from './prefix';
 import { McStepper } from './stepper';
 import { McSuffix } from './suffix';
 import * as i0 from "@angular/core";
-/**
- * Injection token that can be used to inject an instances of `MatFormField`. It serves
- * as alternative token to the actual `MatFormField` class which would cause unnecessary
- * retention of the `MatFormField` class and its component metadata.
- */
-export declare const MC_FORM_FIELD: InjectionToken<McFormField>;
 /** @docs-private */
 export declare class McFormFieldBase {
     elementRef: ElementRef;

package/form-field/form-field.scss

@@ -53,7 +53,7 @@ $tokens: meta.module-variables(tokens) !default;
     margin-top: mc-css-variable(form-field-password-hint-size-margin-top);
 
     &:first-child {
-        margin-top: map.get($tokens, size-m);
+        margin-top: mc-css-variable(size-m);
     }
 }
 

package/form-field/validate.directive.d.ts

@@ -1,9 +1,10 @@
-import { AfterContentInit, ChangeDetectorRef } from '@angular/core';
+import { AfterContentInit, ChangeDetectorRef, OnDestroy } from '@angular/core';
 import { AbstractControl, FormGroupDirective, NgControl, NgForm, Validator, ValidatorFn } from '@angular/forms';
 import { McValidationOptions } from '@ptsecurity/mosaic/core';
+import { Subscription } from 'rxjs';
 import { McFormFieldControl } from './form-field-control';
 import * as i0 from "@angular/core";
-export declare class McValidateDirective implements AfterContentInit {
+export declare class McValidateDirective implements AfterContentInit, OnDestroy {
     private formFieldControl;
     rawValidators: Validator[];
     private ngControl;
@@ -17,8 +18,10 @@ export declare class McValidateDirective implements AfterContentInit {
     get validationControl(): any;
     get parent(): NgForm;
     get hasNotSubmittedParent(): boolean;
+    protected validationStatusChangesSubscription: Subscription;
     constructor(formFieldControl: McFormFieldControl<any>, rawValidators: Validator[], ngControl: NgControl, parentForm: NgForm, parentFormGroup: FormGroupDirective, mcValidation: McValidationOptions, cdr: ChangeDetectorRef);
     ngAfterContentInit(): void;
+    ngOnDestroy(): void;
     setValidState(control: AbstractControl, validator: ValidatorFn): void;
     /** This function do next:
      * - run validation on submitting parent form

package/icon/_icon-theme.scss

@@ -7,7 +7,7 @@
 @mixin mc-icon-theme($theme) {
     $foreground: map.get($theme, foreground);
 
-    $icon: map.get(map.get($theme, components), icon);
+    $icon: map.get($theme, components, icon);
 
     $primary: map.get($icon, primary);
     $secondary: map.get($icon, secondary);

package/input/_input-theme.scss

@@ -39,22 +39,22 @@
 
         &.cdk-keyboard-focused {
             border-color: mc-css-variable(states-focused-color, map-get($theme, states, focused-color));
-            box-shadow: 0 0 0 1px mc-css-variable(states-focused-color, map-get($theme, states, focused-color));
+            box-shadow: 0 0 0.1px 1px mc-css-variable(states-focused-color, map-get($theme, states, focused-color));
         }
     }
 }
 
 @mixin mc-input-typography($config) {
     .mc-input {
-        @include mc-typography-css-variables(input, default);
+        @include mc-typography-css-variables($config, input, default);
     }
 
     .mc-input.mc-input_monospace,
     .mc-input.mc-input-password {
-        @include mc-typography-css-variables(input, monospace);
+        @include mc-typography-css-variables($config, input, monospace);
     }
 
     .mc-input.mc-input-password::placeholder {
-        @include mc-typography-css-variables(input, default);
+        @include mc-typography-css-variables($config, input, default);
     }
 }

package/link/_link-theme.scss

@@ -133,7 +133,7 @@
 @mixin mc-link-theme($theme) {
     $foreground: map.get($theme, foreground);
 
-    $link: map.get(map.get($theme, components), link);
+    $link: map.get($theme, components, link);
 
     .mc-link:not(.mc-link_use-visited) {
         &:visited {
@@ -182,10 +182,10 @@
 
 @mixin mc-link-typography($config) {
     .mc-link {
-        @include mc-typography-css-variables(link, default);
+        @include mc-typography-css-variables($config, link, default);
     }
 
     .mc-link.mc-link_caption {
-        @include mc-typography-css-variables(link, caption);
+        @include mc-typography-css-variables($config, link, caption);
     }
 }

package/list/_list-theme.scss

@@ -41,6 +41,6 @@
 @mixin mc-list-typography($config) {
     .mc-list-item,
     .mc-list-option {
-        @include mc-typography-css-variables(list, item);
+        @include mc-typography-css-variables($config, list, item);
     }
 }

package/loader-overlay/_loader-overlay-theme.scss

@@ -23,11 +23,11 @@
 
 @mixin mc-loader-overlay-typography($config) {
     .mc-loader-overlay-text {
-        @include mc-typography-css-variables(loader-overlay, text);
+        @include mc-typography-css-variables($config, loader-overlay, text);
     }
 
     .mc-loader-overlay-caption {
-        @include mc-typography-css-variables(loader-overlay, caption);
+        @include mc-typography-css-variables($config, loader-overlay, caption);
     }
 }
 

package/markdown/_markdown-theme.scss

@@ -9,7 +9,7 @@
     $foreground: map.get($theme, foreground);
     $background: map.get($theme, background);
 
-    $markdown: map.get(map.get($theme, components), markdown);
+    $markdown: map.get($theme, components, markdown);
 
     .mc-markdown {
         color: mc-css-variable(foreground-text, map-get($foreground, text));
@@ -98,60 +98,60 @@
 @mixin mc-markdown-typography($config) {
     .mc-markdown {
         .mc-markdown__h1 {
-            @include mc-typography-css-variables(markdown-h1, default);
+            @include mc-typography-css-variables($config, markdown-h1, default);
         }
 
         .mc-markdown__h2 {
-            @include mc-typography-css-variables(markdown-h2, default);
+            @include mc-typography-css-variables($config, markdown-h2, default);
         }
 
         .mc-markdown__h3 {
-            @include mc-typography-css-variables(markdown-h3, default);
+            @include mc-typography-css-variables($config, markdown-h3, default);
         }
 
         .mc-markdown__h4 {
-            @include mc-typography-css-variables(markdown-h4, default);
+            @include mc-typography-css-variables($config, markdown-h4, default);
         }
 
         .mc-markdown__h5 {
-            @include mc-typography-css-variables(markdown-h5, default);
+            @include mc-typography-css-variables($config, markdown-h5, default);
         }
 
         .mc-markdown__h6 {
-            @include mc-typography-css-variables(markdown-h6, default);
+            @include mc-typography-css-variables($config, markdown-h6, default);
         }
 
         .mc-markdown__p {
-            @include mc-typography-css-variables(markdown-p, default);
+            @include mc-typography-css-variables($config, markdown-p, default);
         }
 
         .mc-markdown__ul,
         .mc-markdown__ol {
-            @include mc-typography-css-variables(markdown-list, default);
+            @include mc-typography-css-variables($config, markdown-list, default);
         }
 
         .mc-markdown__blockquote > .mc-markdown__p {
-            @include mc-typography-css-variables(markdown-blockquote, default);
+            @include mc-typography-css-variables($config, markdown-blockquote, default);
         }
 
         .mc-markdown__code {
-            @include mc-typography-css-variables(markdown-code, default);
+            @include mc-typography-css-variables($config, markdown-code, default);
         }
 
         .mc-markdown__a {
-            @include mc-typography-css-variables(markdown-link, default);
+            @include mc-typography-css-variables($config, markdown-link, default);
         }
 
         .mc-markdown__img + em {
-            @include mc-typography-css-variables(markdown-image, caption);
+            @include mc-typography-css-variables($config, markdown-image, caption);
         }
 
         .mc-markdown__table > .mc-markdown__thead {
-            @include mc-typography-css-variables(markdown-table, header);
+            @include mc-typography-css-variables($config, markdown-table, header);
         }
 
         .mc-markdown__table > .mc-markdown__tbody {
-            @include mc-typography-css-variables(markdown-table, body);
+            @include mc-typography-css-variables($config, markdown-table, body);
         }
     }
 }

package/modal/_modal-theme.scss

@@ -9,8 +9,8 @@
     $foreground: map.get($theme, foreground);
     $background: map.get($theme, background);
 
-    $modal: map.get(map.get($theme, components), modal);
-    $popup: map.get(map.get($theme, components), popup);
+    $modal: map.get($theme, components, modal);
+    $popup: map.get($theme, components, popup);
 
     .mc-modal {
         .mc-modal-content {
@@ -78,10 +78,10 @@
 
 @mixin mc-modal-typography($config) {
     .mc-modal-title {
-        @include mc-typography-css-variables(modal-header, default);
+        @include mc-typography-css-variables($config, modal-header, default);
     }
 
     .mc-modal-body {
-        @include mc-typography-css-variables(modal-body, default);
+        @include mc-typography-css-variables($config, modal-body, default);
     }
 }

package/modal/modal.directive.d.ts

@@ -1,7 +1,7 @@
 import * as i0 from "@angular/core";
 export declare class McModalTitle {
     static ɵfac: i0.ɵɵFactoryDeclaration<McModalTitle, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McModalTitle, "[mc-modal-title], mc-modal-title, [mcModalTitle]", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McModalTitle, "[mc-modal-title], mc-modal-title, [mcModalTitle]", never, {}, {}, never, ["*"], false, never>;
 }
 export declare class McModalBody {
     static ɵfac: i0.ɵɵFactoryDeclaration<McModalBody, never>;

package/modal/modal.scss

@@ -73,8 +73,8 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .mc-modal-title {
-    margin-top: map.get($tokens, size-s);
-    margin-bottom: map.get($tokens, size-s);
+    margin-top: mc-css-variable(size-s);
+    margin-bottom: mc-css-variable(size-s);
 
     display: -webkit-box;
     -webkit-box-orient: vertical;

package/navbar/_navbar-theme.scss

@@ -8,8 +8,8 @@
     $background: map.get($theme, background);
     $primary: map.get($theme, primary);
 
-    $navbar: map.get(map.get($theme, components), navbar);
-    $navbar-item: map.get(map.get($theme, components), navbar-item);
+    $navbar: map.get($theme, components, navbar);
+    $navbar-item: map.get($theme, components, navbar-item);
 
     .mc-navbar,
     .mc-vertical-navbar .mc-vertical-navbar__container {
@@ -101,19 +101,19 @@ button {
 
 @mixin mc-navbar-typography($config) {
     .mc-navbar-title {
-        @include mc-typography-css-variables(navbar, title);
+        @include mc-typography-css-variables($config, navbar, title);
     }
 
     .mc-navbar-subtitle {
-        @include mc-typography-level-to-styles($config, extra-small-text);
+        @include mc-typography-level-to-styles_css-variables($config, typography, extra-small-text);
     }
 
     .mc-navbar-brand {
         .mc-navbar-title {
-            @include mc-typography-css-variables(navbar-brand, title);
+            @include mc-typography-css-variables($config, navbar-brand, title);
 
             &.mc-navbar-title_small {
-                @include mc-typography-level-to-styles($config, subheading);
+                @include mc-typography-level-to-styles_css-variables($config, typography, subheading);
 
                 white-space: unset;
             }

package/navbar/navbar-item.scss

@@ -82,8 +82,8 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     &.mc-navbar-item_has-nested {
-        padding-left: map.get($tokens, size-s);
-        padding-right: map.get($tokens, size-s);
+        padding-left: mc-css-variable(size-s);
+        padding-right: mc-css-variable(size-s);
     }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ptsecurity/mosaic",
-    "version": "17.2.0",
+    "version": "17.2.2",
     "description": "Mosaic",
     "repository": {
         "type": "git",
@@ -19,14 +19,14 @@
     "peerDependencies": {
         "@angular/cdk": "^17.2.0",
         "@angular/forms": "^17.2.0",
-        "@ptsecurity/cdk": "^17.2.0",
-        "@ptsecurity/mosaic-moment-adapter": "^17.2.0",
-        "@ptsecurity/mosaic-luxon-adapter": "^17.2.0",
-        "@mosaic-design/date-formatter": "^2.1.5",
+        "@ptsecurity/cdk": "^17.2.2",
+        "@ptsecurity/mosaic-moment-adapter": "^17.2.2",
+        "@ptsecurity/mosaic-luxon-adapter": "^17.2.2",
+        "@mosaic-design/date-formatter": "^2.1.6",
         "@ptsecurity/mosaic-icons": "^7.0.8",
-        "@mosaic-design/tokens-builder": "^3.0.0",
-        "@mosaic-design/tokens-fe-2022": "^3.0.0",
-        "@mosaic-design/tokens-legacy-2017": "^3.0.0",
+        "@mosaic-design/tokens-builder": "^3.1.0",
+        "@mosaic-design/tokens-fe-2022": "^3.1.0",
+        "@mosaic-design/tokens-legacy-2017": "^3.1.0",
         "marked": "^4.0.18"
     },
     "dependencies": {

package/popover/_popover-theme.scss

@@ -7,7 +7,7 @@
 @mixin mc-popover-theme($theme) {
     $foreground: map.get($theme, foreground);
 
-    $popover: map.get(map.get($theme, components), popover);
+    $popover: map.get($theme, components, popover);
 
     $header: map.get($popover, header);
     $footer: map.get($popover, footer);
@@ -96,14 +96,14 @@
 
 @mixin mc-popover-typography($config) {
     .mc-popover__header {
-        @include mc-typography-css-variables(popover-header, default);
+        @include mc-typography-css-variables($config, popover-header, default);
     }
 
     .mc-popover__content {
-        @include mc-typography-css-variables(popover, default);
+        @include mc-typography-css-variables($config, popover, default);
     }
 
     .mc-popover__footer {
-        @include mc-typography-css-variables(popover-footer, default);
+        @include mc-typography-css-variables($config, popover-footer, default);
     }
 }