@ptsecurity/mosaic 13.10.0 → 14.1.0

package/fesm2020/ptsecurity-mosaic-form-field.mjs

@@ -1,23 +1,25 @@
-import * as i2 from '@angular/common';
+import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, Directive, Input, forwardRef, ChangeDetectionStrategy, Inject, EventEmitter, Output, ViewEncapsulation, ContentChild, ContentChildren, ViewChild, NgModule } from '@angular/core';
+import { Component, Directive, Input, ChangeDetectionStrategy, Inject, EventEmitter, Output, InjectionToken, ViewEncapsulation, ContentChild, ContentChildren, ViewChild, forwardRef, Optional, Self, NgModule } from '@angular/core';
 import * as i1 from '@ptsecurity/mosaic/icon';
 import { McIconModule } from '@ptsecurity/mosaic/icon';
-import { ThemePalette, mixinColor } from '@ptsecurity/mosaic/core';
-import * as i1$1 from '@angular/cdk/a11y';
+import { ThemePalette, mixinColor, MC_VALIDATION } from '@ptsecurity/mosaic/core';
+import * as i1$2 from '@angular/cdk/a11y';
 import { F8, ESCAPE } from '@ptsecurity/cdk/keycodes';
 import { Subject, EMPTY, merge } from 'rxjs';
 import { startWith, takeUntil } from 'rxjs/operators';
+import * as i1$3 from '@angular/forms';
+import { NgModel, FormControlName, RequiredValidator, NG_VALIDATORS } from '@angular/forms';
 
 class McCleaner {
     constructor() {
         this.themePalette = ThemePalette;
     }
 }
-/** @nocollapse */ /** @nocollapse */ McCleaner.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McCleaner, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ McCleaner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: McCleaner, selector: "mc-cleaner", host: { classAttribute: "mc-cleaner" }, exportAs: ["mcCleaner"], ngImport: i0, template: `<i class="mc-icon_light" mc-icon="mc-close-circle_16" [color]="themePalette.Second"></i>`, isInline: true, components: [{ type: i1.McIcon, selector: "[mc-icon]", inputs: ["color"] }], directives: [{ type: i1.McIconCSSStyler, selector: "[mc-icon]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McCleaner, decorators: [{
+/** @nocollapse */ McCleaner.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: McCleaner, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ McCleaner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: McCleaner, selector: "mc-cleaner", host: { classAttribute: "mc-cleaner" }, exportAs: ["mcCleaner"], ngImport: i0, template: `<i class="mc-icon_light" mc-icon="mc-close-circle_16" [color]="themePalette.Second"></i>`, isInline: true, dependencies: [{ kind: "component", type: i1.McIcon, selector: "[mc-icon]", inputs: ["color"] }, { kind: "directive", type: i1.McIconCSSStyler, selector: "[mc-icon]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: McCleaner, decorators: [{
             type: Component,
             args: [{
                     selector: 'mc-cleaner',
@@ -43,9 +45,8 @@ function getMcFormFieldYouCanNotUseCleanerInNumberInputError() {
 
 let nextHintUniqueId = 0;
 class McHintBase {
-    // tslint:disable-next-line:naming-convention
-    constructor(_elementRef) {
-        this._elementRef = _elementRef;
+    constructor(elementRef) {
+        this.elementRef = elementRef;
     }
 }
 // tslint:disable-next-line:naming-convention
@@ -56,9 +57,9 @@ class McHint extends McHintMixinBase {
         this.id = `mc-hint-${nextHintUniqueId++}`;
     }
 }
-/** @nocollapse */ /** @nocollapse */ McHint.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McHint, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ McHint.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: McHint, selector: "mc-hint", inputs: { color: "color", id: "id" }, host: { properties: { "attr.id": "id" }, classAttribute: "mc-hint" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McHint, decorators: [{
+/** @nocollapse */ McHint.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: McHint, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ McHint.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.2", type: McHint, selector: "mc-hint", inputs: { color: "color", id: "id" }, host: { properties: { "attr.id": "id" }, classAttribute: "mc-hint" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: McHint, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mc-hint',
@@ -161,16 +162,16 @@ class McPasswordHint {
         return this.lastControlValue !== this.formField.control.value;
     }
 }
-/** @nocollapse */ /** @nocollapse */ McPasswordHint.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McPasswordHint, deps: [{ token: i0.ChangeDetectorRef }, { token: forwardRef(() => McFormField) }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ McPasswordHint.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: McPasswordHint, selector: "mc-password-hint", inputs: { id: "id", rule: "rule", min: "min", max: "max", regex: "regex" }, host: { properties: { "class.mc-password-hint_valid": "checked", "class.mc-password-hint_invalid": "hasError", "attr.id": "id" }, classAttribute: "mc-password-hint" }, ngImport: i0, template: `
+/** @nocollapse */ McPasswordHint.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: McPasswordHint, deps: [{ token: i0.ChangeDetectorRef }, { token: MC_FORM_FIELD }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ McPasswordHint.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: McPasswordHint, selector: "mc-password-hint", inputs: { id: "id", rule: "rule", min: "min", max: "max", regex: "regex" }, host: { properties: { "class.mc-password-hint_valid": "checked", "class.mc-password-hint_invalid": "hasError", "attr.id": "id" }, classAttribute: "mc-password-hint" }, ngImport: i0, template: `
         <i *ngIf="!checked" class="mc-password-hint__icon" mc-icon="mc-close-M_16"></i>
         <i *ngIf="checked" class="mc-password-hint__icon" mc-icon="mc-check_16"></i>
 
         <span class="mc-password-hint__text">
             <ng-content></ng-content>
         </span>
-    `, isInline: true, components: [{ type: i1.McIcon, selector: "[mc-icon]", inputs: ["color"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.McIconCSSStyler, selector: "[mc-icon]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McPasswordHint, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.McIcon, selector: "[mc-icon]", inputs: ["color"] }, { kind: "directive", type: i1.McIconCSSStyler, selector: "[mc-icon]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: McPasswordHint, decorators: [{
             type: Component,
             args: [{
                     selector: 'mc-password-hint',
@@ -190,9 +191,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     },
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: McFormField, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Inject,
-                    args: [forwardRef(() => McFormField)]
+                    args: [MC_FORM_FIELD]
                 }] }]; }, propDecorators: { id: [{
                 type: Input
             }], rule: [{
@@ -207,9 +208,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 
 class McPrefix {
 }
-/** @nocollapse */ /** @nocollapse */ McPrefix.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McPrefix, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ McPrefix.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: McPrefix, selector: "[mcPrefix]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McPrefix, decorators: [{
+/** @nocollapse */ McPrefix.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: McPrefix, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ McPrefix.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.2", type: McPrefix, selector: "[mcPrefix]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: McPrefix, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mcPrefix]'
@@ -241,8 +242,8 @@ class McStepper {
         $event.preventDefault();
     }
 }
-/** @nocollapse */ /** @nocollapse */ McStepper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ McStepper.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: McStepper, selector: "mc-stepper", outputs: { stepUp: "stepUp", stepDown: "stepDown" }, ngImport: i0, template: `
+/** @nocollapse */ McStepper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: McStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ McStepper.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: McStepper, selector: "mc-stepper", outputs: { stepUp: "stepUp", stepDown: "stepDown" }, ngImport: i0, template: `
         <i class="mc mc-icon mc-icon_light mc-second mc-stepper-step-up mc-angle-down-L_16"
            (mousedown)="onStepUp($event)">
         </i>
@@ -250,7 +251,7 @@ class McStepper {
            (mousedown)="onStepDown($event)">
         </i>
     `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McStepper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: McStepper, decorators: [{
             type: Component,
             args: [{
                     selector: 'mc-stepper',
@@ -271,9 +272,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 
 class McSuffix {
 }
-/** @nocollapse */ /** @nocollapse */ McSuffix.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McSuffix, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ McSuffix.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: McSuffix, selector: "[mcSuffix]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McSuffix, decorators: [{
+/** @nocollapse */ McSuffix.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: McSuffix, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ McSuffix.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.2", type: McSuffix, selector: "[mcSuffix]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: McSuffix, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mcSuffix]'
@@ -281,20 +282,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         }] });
 
 let nextUniqueId = 0;
+/**
+ * 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.
+ */
+const MC_FORM_FIELD = new InjectionToken('McFormField');
 class McFormFieldBase {
-    // tslint:disable-next-line:naming-convention
-    constructor(_elementRef) {
-        this._elementRef = _elementRef;
+    constructor(elementRef) {
+        this.elementRef = elementRef;
     }
 }
 // tslint:disable-next-line:naming-convention
 const McFormFieldMixinBase = mixinColor(McFormFieldBase);
 class McFormField extends McFormFieldMixinBase {
-    constructor(
-    // tslint:disable-next-line:naming-convention
-    _elementRef, _changeDetectorRef, focusMonitor) {
-        super(_elementRef);
-        this._elementRef = _elementRef;
+    constructor(elementRef, _changeDetectorRef, focusMonitor) {
+        super(elementRef);
+        this.elementRef = elementRef;
         this._changeDetectorRef = _changeDetectorRef;
         this.focusMonitor = focusMonitor;
         // Unique id for the internal form field label.
@@ -343,7 +347,7 @@ class McFormField extends McFormFieldMixinBase {
         }
         this.validateControlChild();
         if (this.control.controlType) {
-            this._elementRef.nativeElement.classList.add(`mc-form-field-type-${this.control.controlType}`);
+            this.elementRef.nativeElement.classList.add(`mc-form-field-type-${this.control.controlType}`);
         }
         // Subscribe to changes in the child control state in order to update the form field UI.
         this.control.stateChanges
@@ -402,7 +406,7 @@ class McFormField extends McFormFieldMixinBase {
      * positioned relative to.
      */
     getConnectedOverlayOrigin() {
-        return this.connectionContainerRef || this._elementRef;
+        return this.connectionContainerRef || this.elementRef;
     }
     /** Determines whether a class from the NgControl should be forwarded to the host element. */
     shouldForward(prop) {
@@ -415,10 +419,10 @@ class McFormField extends McFormFieldMixinBase {
         this.stopFocusMonitor();
     }
     runFocusMonitor() {
-        this.focusMonitor.monitor(this._elementRef.nativeElement, true);
+        this.focusMonitor.monitor(this.elementRef.nativeElement, true);
     }
     stopFocusMonitor() {
-        this.focusMonitor.stopMonitoring(this._elementRef.nativeElement);
+        this.focusMonitor.stopMonitoring(this.elementRef.nativeElement);
     }
     /** Throws an error if the form field's control is missing. */
     validateControlChild() {
@@ -427,9 +431,9 @@ class McFormField extends McFormFieldMixinBase {
         }
     }
 }
-/** @nocollapse */ /** @nocollapse */ McFormField.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McFormField, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ McFormField.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: McFormField, selector: "mc-form-field", inputs: { color: "color" }, host: { listeners: { "keydown": "onKeyDown($event)", "mouseenter": "onHoverChanged(true)", "mouseleave": "onHoverChanged(false)" }, properties: { "class.mc-form-field_invalid": "control.errorState", "class.mc-form-field_has-prefix": "hasPrefix", "class.mc-form-field_has-suffix": "hasSuffix", "class.mc-form-field_has-cleaner": "canShowCleaner", "class.mc-form-field_has-stepper": "canShowStepper", "class.mc-disabled": "control.disabled", "class.ng-untouched": "shouldForward(\"untouched\")", "class.ng-touched": "shouldForward(\"touched\")", "class.ng-pristine": "shouldForward(\"pristine\")", "class.ng-dirty": "shouldForward(\"dirty\")", "class.ng-valid": "shouldForward(\"valid\")", "class.ng-invalid": "shouldForward(\"invalid\")", "class.ng-pending": "shouldForward(\"pending\")" }, classAttribute: "mc-form-field" }, queries: [{ propertyName: "control", first: true, predicate: McFormFieldControl, descendants: true }, { propertyName: "stepper", first: true, predicate: McStepper, descendants: true }, { propertyName: "cleaner", first: true, predicate: McCleaner, descendants: true }, { propertyName: "hint", predicate: McHint }, { propertyName: "passwordHints", predicate: McPasswordHint }, { propertyName: "suffix", predicate: McSuffix }, { propertyName: "prefix", predicate: McPrefix }], viewQueries: [{ propertyName: "connectionContainerRef", first: true, predicate: ["connectionContainer"], descendants: true, static: true }], exportAs: ["mcFormField"], usesInheritance: true, ngImport: i0, template: "<div class=\"mc-form-field__container\" (click)=\"onContainerClick($event)\">\n\n    <div class=\"mc-form-field__prefix\" *ngIf=\"hasPrefix\">\n        <ng-content select=\"[mcPrefix]\"></ng-content>\n    </div>\n\n    <div class=\"mc-form-field__infix\">\n        <ng-content></ng-content>\n    </div>\n\n    <div class=\"mc-form-field__suffix\" *ngIf=\"hasSuffix\">\n        <ng-content select=\"[mcSuffix]\"></ng-content>\n    </div>\n\n    <div class=\"mc-form-field__cleaner\"\n         *ngIf=\"canShowCleaner && !hasSuffix\"\n         (click)=\"clearValue($event)\">\n        <ng-content select=\"mc-cleaner\"></ng-content>\n    </div>\n\n    <ng-content select=\"mc-password-toggle\"></ng-content>\n\n    <ng-content *ngIf=\"canShowStepper\" select=\"mc-stepper\"></ng-content>\n</div>\n\n<div class=\"mc-form-field__hint\">\n    <ng-content select=\"mc-hint, mc-password-hint\"></ng-content>\n</div>\n", styles: [".mc-form-field{position:relative;display:inline-block;width:100%;border-radius:4px;border-radius:var(--mc-form-field-size-border-radius, 4px)}.mc-form-field:hover{z-index:1}.mc-form-field.mc-focused{z-index:2}.mc-form-field-type-input-password .mc-input{padding-right:32px;padding-right:var(--mc-form-field-size-button-width, 32px)}.mc-hint{display:block}.mc-password-hint{display:block;padding-left:20px;padding-left:calc(16px + var(--mc-form-field-password-hint-size-icon-margin, 4px))}.mc-password-hint .mc-icon{position:absolute;left:0}.mc-form-field__hint>.mc-password-hint{margin-top:8px;margin-top:var(--mc-form-field-password-hint-size-margin-top, 8px)}.mc-form-field__hint>.mc-hint{margin-top:4px;margin-top:var(--mc-form-field-hint-size-margin-top, 4px)}.mc-form-field__container{position:relative;border-width:1px;border-width:var(--mc-form-field-size-border-width, 1px);border-style:solid;border-color:transparent;border-radius:4px;border-radius:var(--mc-form-field-size-border-radius, 4px)}.mc-form-field_without-borders .mc-form-field__container{border-color:transparent}.mc-form-field__prefix,.mc-form-field__suffix{position:absolute;top:0;bottom:0;width:32px;display:flex;flex-direction:row;justify-content:center;align-items:center}.mc-form-field__prefix{left:0}.mc-form-field__suffix{right:0}.mc-form-field_has-suffix .mc-input,.mc-form-field_has-cleaner .mc-input,.mc-form-field_has-stepper .mc-input{padding-right:32px;padding-right:var(--mc-form-field-size-button-width, 32px)}.mc-form-field_has-prefix .mc-input{padding-left:32px;padding-left:var(--mc-form-field-size-button-width, 32px)}.mc-cleaner{display:flex;width:32px;width:var(--mc-form-field-size-button-width, 32px);height:100%;cursor:pointer}.mc-cleaner .mc-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.mc-form-field__cleaner .mc-cleaner{position:absolute;top:0;bottom:0;right:0}mc-stepper{position:absolute;display:flex;flex-direction:column;justify-content:center;align-items:center;top:0;bottom:0;right:0;width:32px;width:var(--mc-form-field-size-button-width, 32px)}mc-stepper .mc-stepper-step-up,mc-stepper .mc-stepper-step-down{cursor:pointer;width:32px;width:var(--mc-form-field-size-button-width, 32px);text-align:center}mc-stepper .mc-stepper-step-up{transform:scaleY(-1)}\n", ".mc-input{background:transparent;margin:0;border:none;outline:none;width:100%;width:var(--mc-input-size-width, 100%);min-height:30px;min-height:calc(var(--mc-form-field-size-height, 32px) - var(--mc-form-field-size-border-width, 1px) * 2);padding:0 12px;padding:var(--mc-input-size-padding, 0 12px)}.mc-input::-ms-clear{display:none;width:0;height:0}.mc-input::-ms-reveal{display:none;width:0;height:0}.mc-input::-webkit-search-decoration,.mc-input::-webkit-search-cancel-button,.mc-input::-webkit-search-results-button,.mc-input::-webkit-search-results-decoration{display:none}.mc-input{display:inline-block}input.mc-input[type=number]{-moz-appearance:textfield}input.mc-input[type=number]::-webkit-inner-spin-button,input.mc-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}input.mc-input:invalid{box-shadow:none;box-shadow:initial}.mc-password-toggle{display:flex;position:absolute;top:-1px;right:-1px;border:1px solid transparent;width:32px;height:32px;align-items:center;justify-content:center;cursor:pointer;border-top-right-radius:4px;border-top-right-radius:var(--mc-form-field-size-border-radius, 4px);border-bottom-right-radius:4px;border-bottom-right-radius:var(--mc-form-field-size-border-radius, 4px)}.mc-password-toggle::-moz-focus-inner{border:0}.mc-password-toggle:focus{outline:none}\n", ".mc-timepicker{padding-right:15px;padding-right:calc(var(--mc-timepicker-size-padding-right, 16px) - var(--mc-form-field-size-border-width, 1px))}.mc-form-field-type-timepicker{width:auto}\n", ".mc-form-field-type-datepicker{width:auto}.mc-datepicker{width:130px;width:var(--mc-datepicker-input-size-width, 130px)}\n", ".mc-textarea{background:transparent;margin:0;border:none;outline:none;resize:none;overflow:auto;width:100%;box-sizing:border-box;padding:5px 12px;padding:var(--mc-textarea-size-padding, 5px 12px)}.mc-textarea{display:inline-block;-webkit-appearance:none;vertical-align:bottom}.mc-textarea:not(.mc-textarea-resizable){box-sizing:border-box;overflow-y:hidden}.mc-textarea.mc-textarea-resizable{resize:vertical;min-height:50px;min-height:var(--mc-textarea-size-min-height, 50px)}.mc-textarea:invalid{box-shadow:none;box-shadow:initial}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McFormField, decorators: [{
+/** @nocollapse */ McFormField.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: McFormField, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$2.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ McFormField.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: McFormField, selector: "mc-form-field", inputs: { color: "color" }, host: { listeners: { "keydown": "onKeyDown($event)", "mouseenter": "onHoverChanged(true)", "mouseleave": "onHoverChanged(false)" }, properties: { "class.mc-form-field_invalid": "control.errorState", "class.mc-form-field_has-prefix": "hasPrefix", "class.mc-form-field_has-suffix": "hasSuffix", "class.mc-form-field_has-cleaner": "canShowCleaner", "class.mc-form-field_has-stepper": "canShowStepper", "class.mc-disabled": "control.disabled", "class.ng-untouched": "shouldForward(\"untouched\")", "class.ng-touched": "shouldForward(\"touched\")", "class.ng-pristine": "shouldForward(\"pristine\")", "class.ng-dirty": "shouldForward(\"dirty\")", "class.ng-valid": "shouldForward(\"valid\")", "class.ng-invalid": "shouldForward(\"invalid\")", "class.ng-pending": "shouldForward(\"pending\")" }, classAttribute: "mc-form-field" }, providers: [{ provide: MC_FORM_FIELD, useExisting: McFormField }], queries: [{ propertyName: "control", first: true, predicate: McFormFieldControl, descendants: true }, { propertyName: "stepper", first: true, predicate: McStepper, descendants: true }, { propertyName: "cleaner", first: true, predicate: McCleaner, descendants: true }, { propertyName: "hint", predicate: McHint }, { propertyName: "passwordHints", predicate: McPasswordHint }, { propertyName: "suffix", predicate: McSuffix }, { propertyName: "prefix", predicate: McPrefix }], viewQueries: [{ propertyName: "connectionContainerRef", first: true, predicate: ["connectionContainer"], descendants: true, static: true }], exportAs: ["mcFormField"], usesInheritance: true, ngImport: i0, template: "<div class=\"mc-form-field__container\" (click)=\"onContainerClick($event)\">\n\n    <div class=\"mc-form-field__prefix\" *ngIf=\"hasPrefix\">\n        <ng-content select=\"[mcPrefix]\"></ng-content>\n    </div>\n\n    <div class=\"mc-form-field__infix\">\n        <ng-content></ng-content>\n    </div>\n\n    <div class=\"mc-form-field__suffix\" *ngIf=\"hasSuffix\">\n        <ng-content select=\"[mcSuffix]\"></ng-content>\n    </div>\n\n    <div class=\"mc-form-field__cleaner\"\n         *ngIf=\"canShowCleaner && !hasSuffix\"\n         (click)=\"clearValue($event)\">\n        <ng-content select=\"mc-cleaner\"></ng-content>\n    </div>\n\n    <ng-content select=\"mc-password-toggle\"></ng-content>\n\n    <ng-content *ngIf=\"canShowStepper\" select=\"mc-stepper\"></ng-content>\n</div>\n\n<div class=\"mc-form-field__hint\">\n    <ng-content select=\"mc-hint, mc-password-hint\"></ng-content>\n</div>\n", styles: [".mc-form{display:flex;flex-direction:column}.mc-form__row{display:flex;flex-direction:row}.mc-form-horizontal .mc-form-row_margin{margin-bottom:20px;margin-bottom:var(--mc-forms-size-horizontal-row-margin-bottom, 20px)}.mc-form-horizontal .mc-form__label{padding-top:6px;padding-top:var(--mc-forms-size-horizontal-label-padding-top, 6px);text-align:end}.mc-form-horizontal .mc-form__control{padding-left:16px;padding-left:var(--mc-forms-size-horizontal-control-padding-left, 16px)}.mc-form-horizontal .mc-form__legend{margin-top:32px;margin-top:var(--mc-forms-size-horizontal-legend-margin-top, 32px);margin-bottom:16px;margin-bottom:var(--mc-forms-size-horizontal-legend-margin-bottom, 16px)}.mc-form-vertical .mc-form__row{flex-direction:column}.mc-form-vertical .mc-form-row_margin{margin-bottom:16px;margin-bottom:var(--mc-forms-size-vertical-row-margin-bottom, 16px)}.mc-form-vertical .mc-form__label{padding-top:0;padding-top:var(--mc-forms-size-vertical-label-padding-top, 0);padding-bottom:4px;padding-bottom:var(--mc-forms-size-vertical-label-padding-bottom, 4px);text-align:start}.mc-form-vertical .mc-form__control{padding-left:0}.mc-form-vertical .mc-form__legend{margin-top:32px;margin-top:var(--mc-forms-size-vertical-legend-margin-top, 32px);margin-bottom:12px;margin-bottom:var(--mc-forms-size-vertical-legend-margin-bottom, 12px)}.mc-form__fieldset{display:flex;flex-direction:column}.mc-form__fieldset.mc-horizontal{flex-direction:row}.mc-form__fieldset.mc-horizontal .mc-form__row:not(:first-child){padding-left:24px;padding-left:var(--mc-forms-size-vertical-control-padding-left, 24px)}.mc-form-field{position:relative;display:inline-block;width:100%;border-radius:4px;border-radius:var(--mc-form-field-size-border-radius, 4px)}.mc-form-field:hover{z-index:1}.mc-form-field.mc-focused{z-index:2}.mc-form-field-type-input-password .mc-input{padding-right:32px;padding-right:var(--mc-form-field-size-button-width, 32px)}.mc-hint{display:block}.mc-password-hint{display:block;padding-left:20px;padding-left:calc(16px + var(--mc-form-field-password-hint-size-icon-margin, 4px))}.mc-password-hint .mc-icon{position:absolute;left:0}.mc-form-field__hint>.mc-password-hint{margin-top:8px;margin-top:var(--mc-form-field-password-hint-size-margin-top, 8px)}.mc-form-field__hint>.mc-hint{margin-top:4px;margin-top:var(--mc-form-field-hint-size-margin-top, 4px)}.mc-form-field__container{position:relative;border-width:1px;border-width:var(--mc-form-field-size-border-width, 1px);border-style:solid;border-color:transparent;border-radius:4px;border-radius:var(--mc-form-field-size-border-radius, 4px)}.mc-form-field_without-borders .mc-form-field__container{border-color:transparent}.mc-form-field__prefix,.mc-form-field__suffix{position:absolute;top:0;bottom:0;width:32px;display:flex;flex-direction:row;justify-content:center;align-items:center}.mc-form-field__prefix{left:0}.mc-form-field__suffix{right:0}.mc-form-field_has-suffix .mc-input,.mc-form-field_has-cleaner .mc-input,.mc-form-field_has-stepper .mc-input{padding-right:32px;padding-right:var(--mc-form-field-size-button-width, 32px)}.mc-form-field_has-prefix .mc-input{padding-left:32px;padding-left:var(--mc-form-field-size-button-width, 32px)}.mc-cleaner{display:flex;width:32px;width:var(--mc-form-field-size-button-width, 32px);height:100%;cursor:pointer}.mc-cleaner .mc-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.mc-form-field__cleaner .mc-cleaner{position:absolute;top:0;bottom:0;right:0}mc-stepper{position:absolute;display:flex;flex-direction:column;justify-content:center;align-items:center;top:0;bottom:0;right:0;width:32px;width:var(--mc-form-field-size-button-width, 32px)}mc-stepper .mc-stepper-step-up,mc-stepper .mc-stepper-step-down{cursor:pointer;width:32px;width:var(--mc-form-field-size-button-width, 32px);text-align:center}mc-stepper .mc-stepper-step-up{transform:scaleY(-1)}\n", ".mc-input{background:transparent;margin:0;border:none;outline:none;width:100%;width:var(--mc-input-size-width, 100%);min-height:30px;min-height:calc(var(--mc-form-field-size-height, 32px) - var(--mc-form-field-size-border-width, 1px) * 2);padding:0 12px;padding:var(--mc-input-size-padding, 0 12px)}.mc-input::-ms-clear{display:none;width:0;height:0}.mc-input::-ms-reveal{display:none;width:0;height:0}.mc-input::-webkit-search-decoration,.mc-input::-webkit-search-cancel-button,.mc-input::-webkit-search-results-button,.mc-input::-webkit-search-results-decoration{display:none}.mc-input{display:inline-block}input.mc-input[type=number]{-moz-appearance:textfield}input.mc-input[type=number]::-webkit-inner-spin-button,input.mc-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}input.mc-input:invalid{box-shadow:none;box-shadow:initial}.mc-password-toggle{display:flex;position:absolute;top:-1px;right:-1px;border:1px solid transparent;width:32px;height:32px;align-items:center;justify-content:center;cursor:pointer;border-top-right-radius:4px;border-top-right-radius:var(--mc-form-field-size-border-radius, 4px);border-bottom-right-radius:4px;border-bottom-right-radius:var(--mc-form-field-size-border-radius, 4px)}.mc-password-toggle::-moz-focus-inner{border:0}.mc-password-toggle:focus{outline:none}\n", ".mc-timepicker{padding-right:15px;padding-right:calc(var(--mc-timepicker-size-padding-right, 16px) - var(--mc-form-field-size-border-width, 1px))}.mc-form-field-type-timepicker{width:auto}\n", ".mc-form-field-type-datepicker{width:auto}.mc-datepicker{width:130px;width:var(--mc-datepicker-input-size-width, 130px)}\n", ".mc-textarea{background:transparent;margin:0;border:none;outline:none;resize:none;overflow:auto;width:100%;box-sizing:border-box;padding:5px 12px;padding:var(--mc-textarea-size-padding, 5px 12px)}.mc-textarea{display:inline-block;-webkit-appearance:none;vertical-align:bottom}.mc-textarea:not(.mc-textarea-resizable){box-sizing:border-box;overflow-y:hidden}.mc-textarea.mc-textarea-resizable{resize:vertical;min-height:50px;min-height:var(--mc-textarea-size-min-height, 50px)}.mc-textarea:invalid{box-shadow:none;box-shadow:initial}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: McFormField, decorators: [{
             type: Component,
             args: [{ selector: 'mc-form-field', exportAs: 'mcFormField', host: {
                         class: 'mc-form-field',
@@ -449,8 +453,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         '(keydown)': 'onKeyDown($event)',
                         '(mouseenter)': 'onHoverChanged(true)',
                         '(mouseleave)': 'onHoverChanged(false)'
-                    }, inputs: ['color'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mc-form-field__container\" (click)=\"onContainerClick($event)\">\n\n    <div class=\"mc-form-field__prefix\" *ngIf=\"hasPrefix\">\n        <ng-content select=\"[mcPrefix]\"></ng-content>\n    </div>\n\n    <div class=\"mc-form-field__infix\">\n        <ng-content></ng-content>\n    </div>\n\n    <div class=\"mc-form-field__suffix\" *ngIf=\"hasSuffix\">\n        <ng-content select=\"[mcSuffix]\"></ng-content>\n    </div>\n\n    <div class=\"mc-form-field__cleaner\"\n         *ngIf=\"canShowCleaner && !hasSuffix\"\n         (click)=\"clearValue($event)\">\n        <ng-content select=\"mc-cleaner\"></ng-content>\n    </div>\n\n    <ng-content select=\"mc-password-toggle\"></ng-content>\n\n    <ng-content *ngIf=\"canShowStepper\" select=\"mc-stepper\"></ng-content>\n</div>\n\n<div class=\"mc-form-field__hint\">\n    <ng-content select=\"mc-hint, mc-password-hint\"></ng-content>\n</div>\n", styles: [".mc-form-field{position:relative;display:inline-block;width:100%;border-radius:4px;border-radius:var(--mc-form-field-size-border-radius, 4px)}.mc-form-field:hover{z-index:1}.mc-form-field.mc-focused{z-index:2}.mc-form-field-type-input-password .mc-input{padding-right:32px;padding-right:var(--mc-form-field-size-button-width, 32px)}.mc-hint{display:block}.mc-password-hint{display:block;padding-left:20px;padding-left:calc(16px + var(--mc-form-field-password-hint-size-icon-margin, 4px))}.mc-password-hint .mc-icon{position:absolute;left:0}.mc-form-field__hint>.mc-password-hint{margin-top:8px;margin-top:var(--mc-form-field-password-hint-size-margin-top, 8px)}.mc-form-field__hint>.mc-hint{margin-top:4px;margin-top:var(--mc-form-field-hint-size-margin-top, 4px)}.mc-form-field__container{position:relative;border-width:1px;border-width:var(--mc-form-field-size-border-width, 1px);border-style:solid;border-color:transparent;border-radius:4px;border-radius:var(--mc-form-field-size-border-radius, 4px)}.mc-form-field_without-borders .mc-form-field__container{border-color:transparent}.mc-form-field__prefix,.mc-form-field__suffix{position:absolute;top:0;bottom:0;width:32px;display:flex;flex-direction:row;justify-content:center;align-items:center}.mc-form-field__prefix{left:0}.mc-form-field__suffix{right:0}.mc-form-field_has-suffix .mc-input,.mc-form-field_has-cleaner .mc-input,.mc-form-field_has-stepper .mc-input{padding-right:32px;padding-right:var(--mc-form-field-size-button-width, 32px)}.mc-form-field_has-prefix .mc-input{padding-left:32px;padding-left:var(--mc-form-field-size-button-width, 32px)}.mc-cleaner{display:flex;width:32px;width:var(--mc-form-field-size-button-width, 32px);height:100%;cursor:pointer}.mc-cleaner .mc-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.mc-form-field__cleaner .mc-cleaner{position:absolute;top:0;bottom:0;right:0}mc-stepper{position:absolute;display:flex;flex-direction:column;justify-content:center;align-items:center;top:0;bottom:0;right:0;width:32px;width:var(--mc-form-field-size-button-width, 32px)}mc-stepper .mc-stepper-step-up,mc-stepper .mc-stepper-step-down{cursor:pointer;width:32px;width:var(--mc-form-field-size-button-width, 32px);text-align:center}mc-stepper .mc-stepper-step-up{transform:scaleY(-1)}\n", ".mc-input{background:transparent;margin:0;border:none;outline:none;width:100%;width:var(--mc-input-size-width, 100%);min-height:30px;min-height:calc(var(--mc-form-field-size-height, 32px) - var(--mc-form-field-size-border-width, 1px) * 2);padding:0 12px;padding:var(--mc-input-size-padding, 0 12px)}.mc-input::-ms-clear{display:none;width:0;height:0}.mc-input::-ms-reveal{display:none;width:0;height:0}.mc-input::-webkit-search-decoration,.mc-input::-webkit-search-cancel-button,.mc-input::-webkit-search-results-button,.mc-input::-webkit-search-results-decoration{display:none}.mc-input{display:inline-block}input.mc-input[type=number]{-moz-appearance:textfield}input.mc-input[type=number]::-webkit-inner-spin-button,input.mc-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}input.mc-input:invalid{box-shadow:none;box-shadow:initial}.mc-password-toggle{display:flex;position:absolute;top:-1px;right:-1px;border:1px solid transparent;width:32px;height:32px;align-items:center;justify-content:center;cursor:pointer;border-top-right-radius:4px;border-top-right-radius:var(--mc-form-field-size-border-radius, 4px);border-bottom-right-radius:4px;border-bottom-right-radius:var(--mc-form-field-size-border-radius, 4px)}.mc-password-toggle::-moz-focus-inner{border:0}.mc-password-toggle:focus{outline:none}\n", ".mc-timepicker{padding-right:15px;padding-right:calc(var(--mc-timepicker-size-padding-right, 16px) - var(--mc-form-field-size-border-width, 1px))}.mc-form-field-type-timepicker{width:auto}\n", ".mc-form-field-type-datepicker{width:auto}.mc-datepicker{width:130px;width:var(--mc-datepicker-input-size-width, 130px)}\n", ".mc-textarea{background:transparent;margin:0;border:none;outline:none;resize:none;overflow:auto;width:100%;box-sizing:border-box;padding:5px 12px;padding:var(--mc-textarea-size-padding, 5px 12px)}.mc-textarea{display:inline-block;-webkit-appearance:none;vertical-align:bottom}.mc-textarea:not(.mc-textarea-resizable){box-sizing:border-box;overflow-y:hidden}.mc-textarea.mc-textarea-resizable{resize:vertical;min-height:50px;min-height:var(--mc-textarea-size-min-height, 50px)}.mc-textarea:invalid{box-shadow:none;box-shadow:initial}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.FocusMonitor }]; }, propDecorators: { control: [{
+                    }, inputs: ['color'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: MC_FORM_FIELD, useExisting: McFormField }], template: "<div class=\"mc-form-field__container\" (click)=\"onContainerClick($event)\">\n\n    <div class=\"mc-form-field__prefix\" *ngIf=\"hasPrefix\">\n        <ng-content select=\"[mcPrefix]\"></ng-content>\n    </div>\n\n    <div class=\"mc-form-field__infix\">\n        <ng-content></ng-content>\n    </div>\n\n    <div class=\"mc-form-field__suffix\" *ngIf=\"hasSuffix\">\n        <ng-content select=\"[mcSuffix]\"></ng-content>\n    </div>\n\n    <div class=\"mc-form-field__cleaner\"\n         *ngIf=\"canShowCleaner && !hasSuffix\"\n         (click)=\"clearValue($event)\">\n        <ng-content select=\"mc-cleaner\"></ng-content>\n    </div>\n\n    <ng-content select=\"mc-password-toggle\"></ng-content>\n\n    <ng-content *ngIf=\"canShowStepper\" select=\"mc-stepper\"></ng-content>\n</div>\n\n<div class=\"mc-form-field__hint\">\n    <ng-content select=\"mc-hint, mc-password-hint\"></ng-content>\n</div>\n", styles: [".mc-form{display:flex;flex-direction:column}.mc-form__row{display:flex;flex-direction:row}.mc-form-horizontal .mc-form-row_margin{margin-bottom:20px;margin-bottom:var(--mc-forms-size-horizontal-row-margin-bottom, 20px)}.mc-form-horizontal .mc-form__label{padding-top:6px;padding-top:var(--mc-forms-size-horizontal-label-padding-top, 6px);text-align:end}.mc-form-horizontal .mc-form__control{padding-left:16px;padding-left:var(--mc-forms-size-horizontal-control-padding-left, 16px)}.mc-form-horizontal .mc-form__legend{margin-top:32px;margin-top:var(--mc-forms-size-horizontal-legend-margin-top, 32px);margin-bottom:16px;margin-bottom:var(--mc-forms-size-horizontal-legend-margin-bottom, 16px)}.mc-form-vertical .mc-form__row{flex-direction:column}.mc-form-vertical .mc-form-row_margin{margin-bottom:16px;margin-bottom:var(--mc-forms-size-vertical-row-margin-bottom, 16px)}.mc-form-vertical .mc-form__label{padding-top:0;padding-top:var(--mc-forms-size-vertical-label-padding-top, 0);padding-bottom:4px;padding-bottom:var(--mc-forms-size-vertical-label-padding-bottom, 4px);text-align:start}.mc-form-vertical .mc-form__control{padding-left:0}.mc-form-vertical .mc-form__legend{margin-top:32px;margin-top:var(--mc-forms-size-vertical-legend-margin-top, 32px);margin-bottom:12px;margin-bottom:var(--mc-forms-size-vertical-legend-margin-bottom, 12px)}.mc-form__fieldset{display:flex;flex-direction:column}.mc-form__fieldset.mc-horizontal{flex-direction:row}.mc-form__fieldset.mc-horizontal .mc-form__row:not(:first-child){padding-left:24px;padding-left:var(--mc-forms-size-vertical-control-padding-left, 24px)}.mc-form-field{position:relative;display:inline-block;width:100%;border-radius:4px;border-radius:var(--mc-form-field-size-border-radius, 4px)}.mc-form-field:hover{z-index:1}.mc-form-field.mc-focused{z-index:2}.mc-form-field-type-input-password .mc-input{padding-right:32px;padding-right:var(--mc-form-field-size-button-width, 32px)}.mc-hint{display:block}.mc-password-hint{display:block;padding-left:20px;padding-left:calc(16px + var(--mc-form-field-password-hint-size-icon-margin, 4px))}.mc-password-hint .mc-icon{position:absolute;left:0}.mc-form-field__hint>.mc-password-hint{margin-top:8px;margin-top:var(--mc-form-field-password-hint-size-margin-top, 8px)}.mc-form-field__hint>.mc-hint{margin-top:4px;margin-top:var(--mc-form-field-hint-size-margin-top, 4px)}.mc-form-field__container{position:relative;border-width:1px;border-width:var(--mc-form-field-size-border-width, 1px);border-style:solid;border-color:transparent;border-radius:4px;border-radius:var(--mc-form-field-size-border-radius, 4px)}.mc-form-field_without-borders .mc-form-field__container{border-color:transparent}.mc-form-field__prefix,.mc-form-field__suffix{position:absolute;top:0;bottom:0;width:32px;display:flex;flex-direction:row;justify-content:center;align-items:center}.mc-form-field__prefix{left:0}.mc-form-field__suffix{right:0}.mc-form-field_has-suffix .mc-input,.mc-form-field_has-cleaner .mc-input,.mc-form-field_has-stepper .mc-input{padding-right:32px;padding-right:var(--mc-form-field-size-button-width, 32px)}.mc-form-field_has-prefix .mc-input{padding-left:32px;padding-left:var(--mc-form-field-size-button-width, 32px)}.mc-cleaner{display:flex;width:32px;width:var(--mc-form-field-size-button-width, 32px);height:100%;cursor:pointer}.mc-cleaner .mc-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.mc-form-field__cleaner .mc-cleaner{position:absolute;top:0;bottom:0;right:0}mc-stepper{position:absolute;display:flex;flex-direction:column;justify-content:center;align-items:center;top:0;bottom:0;right:0;width:32px;width:var(--mc-form-field-size-button-width, 32px)}mc-stepper .mc-stepper-step-up,mc-stepper .mc-stepper-step-down{cursor:pointer;width:32px;width:var(--mc-form-field-size-button-width, 32px);text-align:center}mc-stepper .mc-stepper-step-up{transform:scaleY(-1)}\n", ".mc-input{background:transparent;margin:0;border:none;outline:none;width:100%;width:var(--mc-input-size-width, 100%);min-height:30px;min-height:calc(var(--mc-form-field-size-height, 32px) - var(--mc-form-field-size-border-width, 1px) * 2);padding:0 12px;padding:var(--mc-input-size-padding, 0 12px)}.mc-input::-ms-clear{display:none;width:0;height:0}.mc-input::-ms-reveal{display:none;width:0;height:0}.mc-input::-webkit-search-decoration,.mc-input::-webkit-search-cancel-button,.mc-input::-webkit-search-results-button,.mc-input::-webkit-search-results-decoration{display:none}.mc-input{display:inline-block}input.mc-input[type=number]{-moz-appearance:textfield}input.mc-input[type=number]::-webkit-inner-spin-button,input.mc-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}input.mc-input:invalid{box-shadow:none;box-shadow:initial}.mc-password-toggle{display:flex;position:absolute;top:-1px;right:-1px;border:1px solid transparent;width:32px;height:32px;align-items:center;justify-content:center;cursor:pointer;border-top-right-radius:4px;border-top-right-radius:var(--mc-form-field-size-border-radius, 4px);border-bottom-right-radius:4px;border-bottom-right-radius:var(--mc-form-field-size-border-radius, 4px)}.mc-password-toggle::-moz-focus-inner{border:0}.mc-password-toggle:focus{outline:none}\n", ".mc-timepicker{padding-right:15px;padding-right:calc(var(--mc-timepicker-size-padding-right, 16px) - var(--mc-form-field-size-border-width, 1px))}.mc-form-field-type-timepicker{width:auto}\n", ".mc-form-field-type-datepicker{width:auto}.mc-datepicker{width:130px;width:var(--mc-datepicker-input-size-width, 130px)}\n", ".mc-textarea{background:transparent;margin:0;border:none;outline:none;resize:none;overflow:auto;width:100%;box-sizing:border-box;padding:5px 12px;padding:var(--mc-textarea-size-padding, 5px 12px)}.mc-textarea{display:inline-block;-webkit-appearance:none;vertical-align:bottom}.mc-textarea:not(.mc-textarea-resizable){box-sizing:border-box;overflow-y:hidden}.mc-textarea.mc-textarea-resizable{resize:vertical;min-height:50px;min-height:var(--mc-textarea-size-min-height, 50px)}.mc-textarea:invalid{box-shadow:none;box-shadow:initial}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$2.FocusMonitor }]; }, propDecorators: { control: [{
                 type: ContentChild,
                 args: [McFormFieldControl, { static: false }]
             }], stepper: [{
@@ -477,9 +481,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }] } });
 class McFormFieldWithoutBorders {
 }
-/** @nocollapse */ /** @nocollapse */ McFormFieldWithoutBorders.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McFormFieldWithoutBorders, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ McFormFieldWithoutBorders.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: McFormFieldWithoutBorders, selector: "mc-form-field[mcFormFieldWithoutBorders]", host: { classAttribute: "mc-form-field_without-borders" }, exportAs: ["mcFormFieldWithoutBorders"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McFormFieldWithoutBorders, decorators: [{
+/** @nocollapse */ McFormFieldWithoutBorders.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: McFormFieldWithoutBorders, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ McFormFieldWithoutBorders.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.2", type: McFormFieldWithoutBorders, selector: "mc-form-field[mcFormFieldWithoutBorders]", host: { classAttribute: "mc-form-field_without-borders" }, exportAs: ["mcFormFieldWithoutBorders"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: McFormFieldWithoutBorders, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mc-form-field[mcFormFieldWithoutBorders]',
@@ -488,26 +492,177 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 }]
         }] });
 
+class McValidateDirective {
+    constructor(formFieldControl, rawValidators, ngControl, parentForm, parentFormGroup, mcValidation, cdr) {
+        this.formFieldControl = formFieldControl;
+        this.rawValidators = rawValidators;
+        this.ngControl = ngControl;
+        this.parentForm = parentForm;
+        this.parentFormGroup = parentFormGroup;
+        this.mcValidation = mcValidation;
+        this.cdr = cdr;
+    }
+    get isNgModel() {
+        return this.ngControl instanceof NgModel;
+    }
+    get isFormControl() {
+        return this.ngControl instanceof FormControlName;
+    }
+    get validationControl() {
+        const ngControl = (this.formFieldControl.ngControl || this.formFieldControl);
+        return ngControl.control || ngControl;
+    }
+    get parent() {
+        return this.parentForm || this.parentFormGroup;
+    }
+    get hasNotSubmittedParent() {
+        return this.parent && !this.parent.submitted;
+    }
+    ngAfterContentInit() {
+        if (this.mcValidation.useValidation) {
+            this.setMosaicValidation();
+        }
+    }
+    setValidState(control, validator) {
+        if (!control) {
+            return;
+        }
+        control.clearValidators();
+        control.updateValueAndValidity({ emitEvent: false });
+        control.setValidators(validator);
+    }
+    /** This function do next:
+     * - run validation on submitting parent form
+     * - prevent validation in required validator if form doesn't submitted
+     * - if control has focus validation will be prevented
+     */
+    setMosaicValidation() {
+        if (!this.validationControl) {
+            return;
+        }
+        this.parent?.ngSubmit
+            .subscribe(() => this.validationControl.updateValueAndValidity({ emitEvent: false }));
+        if (this.isNgModel) {
+            this.setMosaicValidationForModelControl();
+        }
+        else if (this.isFormControl) {
+            this.setMosaicValidationForFormControl();
+        }
+    }
+    setMosaicValidationForModelControl() {
+        if (!this.rawValidators) {
+            return;
+        }
+        this.rawValidators.forEach((validator) => {
+            // tslint:disable-next-line: no-unbound-method
+            const originalValidate = validator.validate;
+            if (validator instanceof RequiredValidator) {
+                // changed required validation logic
+                validator.validate = (control) => {
+                    if (this.hasNotSubmittedParent) {
+                        return null;
+                    }
+                    return originalValidate.call(validator, control);
+                };
+            }
+            else {
+                // changed all other validation logic
+                validator.validate = (control) => {
+                    if (this.formFieldControl.focused) {
+                        return null;
+                    }
+                    return originalValidate.call(validator, control);
+                };
+            }
+        });
+    }
+    setMosaicValidationForFormControl() {
+        const originalValidator = this.validationControl.validator;
+        // changed required validation logic after initialization
+        if (this.validationControl.invalid && this.validationControl.errors.required) {
+            Promise.resolve().then(() => {
+                this.setValidState(this.validationControl, originalValidator);
+                this.cdr.markForCheck();
+            });
+        }
+        // check dynamic updates
+        this.validationControl.statusChanges
+            .subscribe(() => {
+            // changed required validation logic
+            if (this.validationControl.invalid && (this.hasNotSubmittedParent) && this.validationControl.errors.required) {
+                this.setValidState(this.validationControl, originalValidator);
+            }
+            // changed all other validation logic
+            if (this.validationControl.invalid && this.formFieldControl.focused) {
+                this.setValidState(this.validationControl, originalValidator);
+            }
+        });
+    }
+}
+/** @nocollapse */ McValidateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: McValidateDirective, deps: [{ token: forwardRef(() => McFormFieldControl) }, { token: NG_VALIDATORS, optional: true, self: true }, { token: i1$3.NgControl, optional: true, self: true }, { token: i1$3.NgForm, optional: true }, { token: i1$3.FormGroupDirective, optional: true }, { token: MC_VALIDATION, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ McValidateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.2", type: McValidateDirective, selector: "\n        input[mcInput],\n        input[mcInputPassword],\n        input[mcTimepicker],\n        input[mcDatepicker],\n        mc-select,\n        mc-tag-list,\n        textarea[mcTextarea],\n        mc-tree-select\n    ", exportAs: ["McValidate"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: McValidateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `
+        input[mcInput],
+        input[mcInputPassword],
+        input[mcTimepicker],
+        input[mcDatepicker],
+        mc-select,
+        mc-tag-list,
+        textarea[mcTextarea],
+        mc-tree-select
+    `,
+                    exportAs: 'McValidate'
+                }]
+        }], ctorParameters: function () { return [{ type: McFormFieldControl, decorators: [{
+                    type: Inject,
+                    args: [forwardRef(() => McFormFieldControl)]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }, {
+                    type: Inject,
+                    args: [NG_VALIDATORS]
+                }] }, { type: i1$3.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: i1$3.NgForm, decorators: [{
+                    type: Optional
+                }] }, { type: i1$3.FormGroupDirective, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MC_VALIDATION]
+                }] }, { type: i0.ChangeDetectorRef }]; } });
+
 class McFormFieldModule {
 }
-/** @nocollapse */ /** @nocollapse */ McFormFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ /** @nocollapse */ McFormFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McFormFieldModule, declarations: [McFormField,
+/** @nocollapse */ McFormFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: McFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ McFormFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.2", ngImport: i0, type: McFormFieldModule, declarations: [McFormField,
         McFormFieldWithoutBorders,
         McHint,
         McPasswordHint,
         McPrefix,
         McSuffix,
         McCleaner,
-        McStepper], imports: [CommonModule, McIconModule], exports: [McFormField,
+        McStepper,
+        McValidateDirective], imports: [CommonModule, McIconModule], exports: [McFormField,
         McFormFieldWithoutBorders,
         McHint,
         McPasswordHint,
         McPrefix,
         McSuffix,
         McCleaner,
-        McStepper] });
-/** @nocollapse */ /** @nocollapse */ McFormFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McFormFieldModule, imports: [[CommonModule, McIconModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McFormFieldModule, decorators: [{
+        McStepper,
+        McValidateDirective] });
+/** @nocollapse */ McFormFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: McFormFieldModule, imports: [CommonModule, McIconModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: McFormFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -518,7 +673,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         McPrefix,
                         McSuffix,
                         McCleaner,
-                        McStepper
+                        McStepper,
+                        McValidateDirective
                     ],
                     imports: [CommonModule, McIconModule],
                     exports: [
@@ -529,7 +685,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         McPrefix,
                         McSuffix,
                         McCleaner,
-                        McStepper
+                        McStepper,
+                        McValidateDirective
                     ]
                 }]
         }] });
@@ -538,5 +695,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { McCleaner, McFormField, McFormFieldBase, McFormFieldControl, McFormFieldMixinBase, McFormFieldModule, McFormFieldWithoutBorders, McHint, McHintBase, McHintMixinBase, McPasswordHint, McPrefix, McStepper, McSuffix, PasswordRules, getMcFormFieldMissingControlError, getMcFormFieldYouCanNotUseCleanerInNumberInputError, regExpPasswordValidator };
+export { MC_FORM_FIELD, McCleaner, McFormField, McFormFieldBase, McFormFieldControl, McFormFieldMixinBase, McFormFieldModule, McFormFieldWithoutBorders, McHint, McHintBase, McHintMixinBase, McPasswordHint, McPrefix, McStepper, McSuffix, McValidateDirective, PasswordRules, getMcFormFieldMissingControlError, getMcFormFieldYouCanNotUseCleanerInNumberInputError, regExpPasswordValidator };
 //# sourceMappingURL=ptsecurity-mosaic-form-field.mjs.map