@netgrif/components 6.2.3 → 6.2.5

package/esm2020/lib/data-fields/number-field/number-default-field/number-default-field.component.mjs

@@ -11,9 +11,9 @@ export class NumberDefaultFieldComponent extends AbstractDefaultNumberFieldCompo
         super(translate);
     }
 }
-NumberDefaultFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NumberDefaultFieldComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-NumberDefaultFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NumberDefaultFieldComponent, selector: "nc-number-default-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"numberField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{numberField.title}}</mat-label>\n    <input matInput\n           type=\"number\"\n           [formControl]=\"formControlRef\"\n           [placeholder]=\"numberField.placeholder\"\n           [required]=\"numberField.behavior.required\">\n    <mat-hint>{{numberField.description}}</mat-hint>\n    <mat-error *ngIf=\"numberField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i2.MatError, selector: "mat-error", inputs: ["id"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NumberDefaultFieldComponent, decorators: [{
+NumberDefaultFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumberDefaultFieldComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+NumberDefaultFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: NumberDefaultFieldComponent, selector: "nc-number-default-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"numberField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{numberField.title}}</mat-label>\n    <input matInput\n           type=\"number\"\n           [formControl]=\"formControlRef\"\n           [placeholder]=\"numberField.placeholder\"\n           [required]=\"numberField.behavior.required\">\n    <mat-hint>{{numberField.description}}</mat-hint>\n    <mat-error *ngIf=\"numberField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i2.MatError, selector: "mat-error", inputs: ["id"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumberDefaultFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-number-default-field', template: "<mat-form-field [appearance]=\"numberField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{numberField.title}}</mat-label>\n    <input matInput\n           type=\"number\"\n           [formControl]=\"formControlRef\"\n           [placeholder]=\"numberField.placeholder\"\n           [required]=\"numberField.behavior.required\">\n    <mat-hint>{{numberField.description}}</mat-hint>\n    <mat-error *ngIf=\"numberField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.TranslateService }]; } });

package/esm2020/lib/data-fields/number-field/number-field.component.mjs

@@ -11,9 +11,9 @@ export class NumberFieldComponent extends AbstractNumberFieldComponent {
         super(translate, informAboutInvalidData);
     }
 }
-NumberFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NumberFieldComponent, deps: [{ token: i1.TranslateService }, { token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-NumberFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NumberFieldComponent, selector: "nc-number-field", usesInheritance: true, ngImport: i0, template: "<nc-data-field-template *ngIf=\"!dataField.behavior.hidden\"\n                        [dataField]=\"dataField\"\n                        [dataFieldTemplate]=\"dataFieldTemplate\"\n                        [offset]=\"taskOffset\">\n\n</nc-data-field-template>\n\n<ng-template #dataFieldTemplate let-showLargeLayout=\"showLargeLayout\">\n    <div [ngSwitch]=\"dataField.getComponentType()\">\n        <nc-number-currency-field *ngSwitchCase=\"'currency'\"\n                                 [numberField]=\"dataField\"\n                                 [formControlRef]=\"formControl\"\n                                 [showLargeLayout] = showLargeLayout>\n        </nc-number-currency-field>\n        <nc-number-default-field *ngSwitchDefault\n                                 [numberField]=\"dataField\"\n                                 [formControlRef]=\"formControl\"\n                                 [showLargeLayout] = showLargeLayout>\n        </nc-number-default-field>\n    </div>\n\n</ng-template>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2.DataFieldTemplateComponent, selector: "nc-data-field-template" }, { type: i3.NumberCurrencyFieldComponent, selector: "nc-number-currency-field" }, { type: i4.NumberDefaultFieldComponent, selector: "nc-number-default-field" }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NumberFieldComponent, decorators: [{
+NumberFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumberFieldComponent, deps: [{ token: i1.TranslateService }, { token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+NumberFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: NumberFieldComponent, selector: "nc-number-field", usesInheritance: true, ngImport: i0, template: "<nc-data-field-template *ngIf=\"!dataField.behavior.hidden\"\n                        [dataField]=\"dataField\"\n                        [dataFieldTemplate]=\"dataFieldTemplate\"\n                        [offset]=\"taskOffset\">\n\n</nc-data-field-template>\n\n<ng-template #dataFieldTemplate let-showLargeLayout=\"showLargeLayout\">\n    <div [ngSwitch]=\"dataField.getComponentType()\">\n        <nc-number-currency-field *ngSwitchCase=\"'currency'\"\n                                 [numberField]=\"dataField\"\n                                 [formControlRef]=\"formControl\"\n                                 [showLargeLayout] = showLargeLayout>\n        </nc-number-currency-field>\n        <nc-number-default-field *ngSwitchDefault\n                                 [numberField]=\"dataField\"\n                                 [formControlRef]=\"formControl\"\n                                 [showLargeLayout] = showLargeLayout>\n        </nc-number-default-field>\n    </div>\n\n</ng-template>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2.DataFieldTemplateComponent, selector: "nc-data-field-template" }, { type: i3.NumberCurrencyFieldComponent, selector: "nc-number-currency-field" }, { type: i4.NumberDefaultFieldComponent, selector: "nc-number-default-field" }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumberFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-number-field', template: "<nc-data-field-template *ngIf=\"!dataField.behavior.hidden\"\n                        [dataField]=\"dataField\"\n                        [dataFieldTemplate]=\"dataFieldTemplate\"\n                        [offset]=\"taskOffset\">\n\n</nc-data-field-template>\n\n<ng-template #dataFieldTemplate let-showLargeLayout=\"showLargeLayout\">\n    <div [ngSwitch]=\"dataField.getComponentType()\">\n        <nc-number-currency-field *ngSwitchCase=\"'currency'\"\n                                 [numberField]=\"dataField\"\n                                 [formControlRef]=\"formControl\"\n                                 [showLargeLayout] = showLargeLayout>\n        </nc-number-currency-field>\n        <nc-number-default-field *ngSwitchDefault\n                                 [numberField]=\"dataField\"\n                                 [formControlRef]=\"formControl\"\n                                 [showLargeLayout] = showLargeLayout>\n        </nc-number-default-field>\n    </div>\n\n</ng-template>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.TranslateService }, { type: undefined, decorators: [{

package/esm2020/lib/data-fields/required-label/required-label.component.mjs

@@ -7,9 +7,9 @@ export class RequiredLabelComponent {
         this.isIn = false;
     }
 }
-RequiredLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RequiredLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-RequiredLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: RequiredLabelComponent, selector: "nc-required-label", inputs: { isIn: "isIn" }, ngImport: i0, template: "<span class=\"required-label-color\" [ngClass]=\"{ 'disabled-opacity-45': !isIn }\"> * </span>\n", styles: [".required-label-color{color:red}.disabled-opacity-45{opacity:.45}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RequiredLabelComponent, decorators: [{
+RequiredLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RequiredLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RequiredLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: RequiredLabelComponent, selector: "nc-required-label", inputs: { isIn: "isIn" }, ngImport: i0, template: "<span class=\"required-label-color\" [ngClass]=\"{ 'disabled-opacity-45': !isIn }\"> * </span>\n", styles: [".required-label-color{color:red}.disabled-opacity-45{opacity:.45}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RequiredLabelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-required-label', template: "<span class=\"required-label-color\" [ngClass]=\"{ 'disabled-opacity-45': !isIn }\"> * </span>\n", styles: [".required-label-color{color:red}.disabled-opacity-45{opacity:.45}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { isIn: [{

package/esm2020/lib/data-fields/text-field/html-textarea-field/html-textarea-field.component.mjs

@@ -22,9 +22,9 @@ export class HtmlTextareaFieldComponent extends AbstractHtmlTextareaFieldCompone
         });
     }
 }
-HtmlTextareaFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HtmlTextareaFieldComponent, deps: [{ token: i1.TranslateService }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-HtmlTextareaFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: HtmlTextareaFieldComponent, selector: "nc-html-textarea-field", usesInheritance: true, ngImport: i0, template: "<div class=\"height-100\" #quillContainer>\n    <quill-editor theme=\"snow\" *ngIf=\"!formControlRef.disabled\" [(ngModel)]=\"textAreaField.value\"\n                  [modules]=\"quillModules\" [bounds]=\"quillContainer\" placeholder=\"{{ textAreaField.placeholder |translate}}\"></quill-editor>\n    <mat-error *ngIf=\"textAreaField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n    <input type=\"hidden\" [formControl]=\"formControlRef\">\n    <div *ngIf=\"formControlRef.disabled\" class=\"ql-snow user-select-auto\" [ngClass]=\"{'border' : textAreaField.materialAppearance === 'outline'}\">\n        <div [ngClass]=\"{'ql-editor' : textAreaField.materialAppearance === 'outline'}\" [innerHTML]=\"disabledDisplay\"></div>\n    </div>\n</div>\n", styles: [".height-100{height:100%}.border{border:1px solid #ddd;border-radius:4px;padding:10px;z-index:1;word-wrap:break-word}.user-select-auto{-webkit-user-select:auto;user-select:auto}\n"], components: [{ type: i3.QuillEditorComponent, selector: "quill-editor" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6.MatError, selector: "mat-error", inputs: ["id"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], pipes: { "translate": i1.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HtmlTextareaFieldComponent, decorators: [{
+HtmlTextareaFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HtmlTextareaFieldComponent, deps: [{ token: i1.TranslateService }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+HtmlTextareaFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: HtmlTextareaFieldComponent, selector: "nc-html-textarea-field", usesInheritance: true, ngImport: i0, template: "<div class=\"height-100\" #quillContainer>\n    <quill-editor theme=\"snow\" *ngIf=\"!formControlRef.disabled\" [(ngModel)]=\"textAreaField.value\"\n                  [modules]=\"quillModules\" [bounds]=\"quillContainer\" placeholder=\"{{ textAreaField.placeholder |translate}}\"></quill-editor>\n    <mat-error *ngIf=\"textAreaField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n    <input type=\"hidden\" [formControl]=\"formControlRef\">\n    <div *ngIf=\"formControlRef.disabled\" class=\"ql-snow user-select-auto\" [ngClass]=\"{'border' : textAreaField.materialAppearance === 'outline'}\">\n        <div [ngClass]=\"{'ql-editor' : textAreaField.materialAppearance === 'outline'}\" [innerHTML]=\"disabledDisplay\"></div>\n    </div>\n</div>\n", styles: [".height-100{height:100%}.border{border:1px solid #ddd;border-radius:4px;padding:10px;z-index:1;word-wrap:break-word}.user-select-auto{-webkit-user-select:auto;user-select:auto}\n"], components: [{ type: i3.QuillEditorComponent, selector: "quill-editor" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6.MatError, selector: "mat-error", inputs: ["id"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], pipes: { "translate": i1.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HtmlTextareaFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-html-textarea-field', template: "<div class=\"height-100\" #quillContainer>\n    <quill-editor theme=\"snow\" *ngIf=\"!formControlRef.disabled\" [(ngModel)]=\"textAreaField.value\"\n                  [modules]=\"quillModules\" [bounds]=\"quillContainer\" placeholder=\"{{ textAreaField.placeholder |translate}}\"></quill-editor>\n    <mat-error *ngIf=\"textAreaField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n    <input type=\"hidden\" [formControl]=\"formControlRef\">\n    <div *ngIf=\"formControlRef.disabled\" class=\"ql-snow user-select-auto\" [ngClass]=\"{'border' : textAreaField.materialAppearance === 'outline'}\">\n        <div [ngClass]=\"{'ql-editor' : textAreaField.materialAppearance === 'outline'}\" [innerHTML]=\"disabledDisplay\"></div>\n    </div>\n</div>\n", styles: [".height-100{height:100%}.border{border:1px solid #ddd;border-radius:4px;padding:10px;z-index:1;word-wrap:break-word}.user-select-auto{-webkit-user-select:auto;user-select:auto}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.TranslateService }, { type: i2.DomSanitizer }]; } });

package/esm2020/lib/data-fields/text-field/password-text-field/password-text-field.component.mjs

@@ -15,9 +15,9 @@ export class PasswordTextFieldComponent extends AbstractPasswordTextFieldCompone
         this.hide = true;
     }
 }
-PasswordTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PasswordTextFieldComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-PasswordTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PasswordTextFieldComponent, selector: "nc-password-text-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"passwordTextField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{passwordTextField.title}}</mat-label>\n    <input matInput\n           [placeholder]=\"passwordTextField.placeholder\"\n           [required]=\"passwordTextField.behavior.required\"\n           [formControl]=\"formControlRef\"\n           [type]=\"hide ? 'password' : 'text'\">\n    <button mat-icon-button matSuffix type=\"button\"\n            (click)=\"hide = !hide\"\n            (keypress)=\"false\"\n            [attr.aria-label]=\"'Hide password'\"\n            [attr.aria-pressed]=\"hide\">\n        <mat-icon\n            [color]=\"hide ? undefined : 'accent'\">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\n    </button>\n    <mat-hint>{{passwordTextField.description}}</mat-hint>\n    <mat-error *ngIf=\"passwordTextField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2.MatSuffix, selector: "[matSuffix]" }, { type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i2.MatError, selector: "mat-error", inputs: ["id"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PasswordTextFieldComponent, decorators: [{
+PasswordTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PasswordTextFieldComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+PasswordTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PasswordTextFieldComponent, selector: "nc-password-text-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"passwordTextField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{passwordTextField.title}}</mat-label>\n    <input matInput\n           [placeholder]=\"passwordTextField.placeholder\"\n           [required]=\"passwordTextField.behavior.required\"\n           [formControl]=\"formControlRef\"\n           [type]=\"hide ? 'password' : 'text'\">\n    <button mat-icon-button matSuffix type=\"button\"\n            (click)=\"hide = !hide\"\n            (keypress)=\"false\"\n            [attr.aria-label]=\"'Hide password'\"\n            [attr.aria-pressed]=\"hide\">\n        <mat-icon\n            [color]=\"hide ? undefined : 'accent'\">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\n    </button>\n    <mat-hint>{{passwordTextField.description}}</mat-hint>\n    <mat-error *ngIf=\"passwordTextField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2.MatSuffix, selector: "[matSuffix]" }, { type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i2.MatError, selector: "mat-error", inputs: ["id"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PasswordTextFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-password-text-field', template: "<mat-form-field [appearance]=\"passwordTextField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{passwordTextField.title}}</mat-label>\n    <input matInput\n           [placeholder]=\"passwordTextField.placeholder\"\n           [required]=\"passwordTextField.behavior.required\"\n           [formControl]=\"formControlRef\"\n           [type]=\"hide ? 'password' : 'text'\">\n    <button mat-icon-button matSuffix type=\"button\"\n            (click)=\"hide = !hide\"\n            (keypress)=\"false\"\n            [attr.aria-label]=\"'Hide password'\"\n            [attr.aria-pressed]=\"hide\">\n        <mat-icon\n            [color]=\"hide ? undefined : 'accent'\">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\n    </button>\n    <mat-hint>{{passwordTextField.description}}</mat-hint>\n    <mat-error *ngIf=\"passwordTextField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.TranslateService }]; } });

package/esm2020/lib/data-fields/text-field/rich-textarea-field/easymde-wrapper/easymde-wrapper.component.mjs

@@ -57,15 +57,15 @@ export class EasymdeWrapperComponent {
         this._easyMDE?.codemirror.off('change', this._onChange);
     }
 }
-EasymdeWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EasymdeWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-EasymdeWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: EasymdeWrapperComponent, selector: "nc-easymde-wrapper", inputs: { formControlRef: "formControlRef", textAreaField: "textAreaField" }, providers: [
+EasymdeWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EasymdeWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+EasymdeWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: EasymdeWrapperComponent, selector: "nc-easymde-wrapper", inputs: { formControlRef: "formControlRef", textAreaField: "textAreaField" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => EasymdeWrapperComponent),
             multi: true,
         },
     ], viewQueries: [{ propertyName: "textarea", first: true, predicate: ["easymde"], descendants: true, static: true }], ngImport: i0, template: '<textarea #easymde></textarea>', isInline: true, styles: ["@charset \"UTF-8\";:host ::ng-deep .CodeMirror{font-family:monospace;height:300px;color:#000;direction:ltr}:host ::ng-deep .CodeMirror-lines{padding:4px 0}:host ::ng-deep .CodeMirror pre.CodeMirror-line,:host ::ng-deep .CodeMirror pre.CodeMirror-line-like{padding:0 4px}:host ::ng-deep .CodeMirror-gutter-filler,:host ::ng-deep .CodeMirror-scrollbar-filler{background-color:#fff}:host ::ng-deep .CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}:host ::ng-deep .CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}:host ::ng-deep .CodeMirror-guttermarker{color:#000}:host ::ng-deep .CodeMirror-guttermarker-subtle{color:#999}:host ::ng-deep .CodeMirror-cursor{border-left:1px solid #000;border-right:none;width:0}:host ::ng-deep .CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}:host ::ng-deep .cm-fat-cursor .CodeMirror-cursor{width:auto;border:0!important;background:#7e7}:host ::ng-deep .cm-fat-cursor div.CodeMirror-cursors{z-index:1}:host ::ng-deep .cm-fat-cursor .CodeMirror-line::selection,:host ::ng-deep .cm-fat-cursor .CodeMirror-line>span::selection,:host ::ng-deep .cm-fat-cursor .CodeMirror-line>span>span::selection{background:0 0}:host ::ng-deep .cm-fat-cursor .CodeMirror-line::-moz-selection,:host ::ng-deep .cm-fat-cursor .CodeMirror-line>span::-moz-selection,:host ::ng-deep .cm-fat-cursor .CodeMirror-line>span>span::-moz-selection{background:0 0}:host ::ng-deep .cm-fat-cursor{caret-color:transparent}@keyframes blink{50%{background-color:transparent}}:host ::ng-deep .cm-tab{display:inline-block;text-decoration:inherit}:host ::ng-deep .CodeMirror-rulers{position:absolute;inset:-50px 0 0;overflow:hidden}:host ::ng-deep .CodeMirror-ruler{border-left:1px solid #ccc;top:0;bottom:0;position:absolute}:host ::ng-deep .cm-s-default .cm-header{color:#00f}:host ::ng-deep .cm-s-default .cm-quote{color:#090}:host ::ng-deep .cm-negative{color:#d44}:host ::ng-deep .cm-positive{color:#292}:host ::ng-deep .cm-header,:host ::ng-deep .cm-strong{font-weight:700}:host ::ng-deep .cm-em{font-style:italic}:host ::ng-deep .cm-link{text-decoration:underline}:host ::ng-deep .cm-strikethrough{text-decoration:line-through}:host ::ng-deep .cm-s-default .cm-keyword{color:#708}:host ::ng-deep .cm-s-default .cm-atom{color:#219}:host ::ng-deep .cm-s-default .cm-number{color:#164}:host ::ng-deep .cm-s-default .cm-def{color:#00f}:host ::ng-deep .cm-s-default .cm-variable-2{color:#05a}:host ::ng-deep .cm-s-default .cm-type,:host ::ng-deep .cm-s-default .cm-variable-3{color:#085}:host ::ng-deep .cm-s-default .cm-comment{color:#a50}:host ::ng-deep .cm-s-default .cm-string{color:#a11}:host ::ng-deep .cm-s-default .cm-string-2{color:#f50}:host ::ng-deep .cm-s-default .cm-meta{color:#555}:host ::ng-deep .cm-s-default .cm-qualifier{color:#555}:host ::ng-deep .cm-s-default .cm-builtin{color:#30a}:host ::ng-deep .cm-s-default .cm-bracket{color:#997}:host ::ng-deep .cm-s-default .cm-tag{color:#170}:host ::ng-deep .cm-s-default .cm-attribute{color:#00c}:host ::ng-deep .cm-s-default .cm-hr{color:#999}:host ::ng-deep .cm-s-default .cm-link{color:#00c}:host ::ng-deep .cm-s-default .cm-error{color:red}:host ::ng-deep .cm-invalidchar{color:red}:host ::ng-deep .CodeMirror-composing{border-bottom:2px solid}:host ::ng-deep div.CodeMirror span.CodeMirror-matchingbracket{color:#0b0}:host ::ng-deep div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#a22}:host ::ng-deep .CodeMirror-matchingtag{background:rgba(255,150,0,.3)}:host ::ng-deep .CodeMirror-activeline-background{background:#e8f2ff}:host ::ng-deep .CodeMirror{position:relative;overflow:hidden;background:#fff}:host ::ng-deep .CodeMirror-scroll{overflow:scroll!important;margin-bottom:-50px;margin-right:-50px;padding-bottom:50px;height:100%;outline:0;position:relative}:host ::ng-deep .CodeMirror-sizer{position:relative;border-right:50px solid transparent}:host ::ng-deep .CodeMirror-gutter-filler,:host ::ng-deep .CodeMirror-hscrollbar,:host ::ng-deep .CodeMirror-scrollbar-filler,:host ::ng-deep .CodeMirror-vscrollbar{position:absolute;z-index:6;display:none;outline:0}:host ::ng-deep .CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}:host ::ng-deep .CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}:host ::ng-deep .CodeMirror-scrollbar-filler{right:0;bottom:0}:host ::ng-deep .CodeMirror-gutter-filler{left:0;bottom:0}:host ::ng-deep .CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}:host ::ng-deep .CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-50px}:host ::ng-deep .CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:0 0!important;border:none!important}:host ::ng-deep .CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}:host ::ng-deep .CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}:host ::ng-deep .CodeMirror-gutter-wrapper ::selection{background-color:transparent}:host ::ng-deep .CodeMirror-gutter-wrapper ::-moz-selection{background-color:transparent}:host ::ng-deep .CodeMirror-lines{cursor:text;min-height:1px}:host ::ng-deep .CodeMirror pre.CodeMirror-line,:host ::ng-deep .CodeMirror pre.CodeMirror-line-like{border-radius:0;border-width:0;background:0 0;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-font-variant-ligatures:contextual;font-feature-settings:\"calt\";font-variant-ligatures:contextual}:host ::ng-deep .CodeMirror-wrap pre.CodeMirror-line,:host ::ng-deep .CodeMirror-wrap pre.CodeMirror-line-like{word-wrap:break-word;white-space:pre-wrap;word-break:normal}:host ::ng-deep .CodeMirror-linebackground{position:absolute;inset:0;z-index:0}:host ::ng-deep .CodeMirror-linewidget{position:relative;z-index:2;padding:.1px}:host ::ng-deep .CodeMirror-code{outline:0}:host ::ng-deep .CodeMirror-gutter,:host ::ng-deep .CodeMirror-gutters,:host ::ng-deep .CodeMirror-linenumber,:host ::ng-deep .CodeMirror-scroll,:host ::ng-deep .CodeMirror-sizer{box-sizing:content-box}:host ::ng-deep .CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}:host ::ng-deep .CodeMirror-cursor{position:absolute;pointer-events:none}:host ::ng-deep .CodeMirror-measure pre{position:static}:host ::ng-deep div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}:host ::ng-deep div.CodeMirror-dragcursors{visibility:visible}:host ::ng-deep .CodeMirror-focused div.CodeMirror-cursors{visibility:visible}:host ::ng-deep .CodeMirror-selected{background:#d9d9d9}:host ::ng-deep .CodeMirror-focused .CodeMirror-selected{background:#d7d4f0}:host ::ng-deep .CodeMirror-crosshair{cursor:crosshair}:host ::ng-deep .CodeMirror-line::selection,:host ::ng-deep .CodeMirror-line>span::selection,:host ::ng-deep .CodeMirror-line>span>span::selection{background:#d7d4f0}:host ::ng-deep .CodeMirror-line::-moz-selection,:host ::ng-deep .CodeMirror-line>span::-moz-selection,:host ::ng-deep .CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}:host ::ng-deep .cm-searching{background-color:#ffa;background-color:#ff06}:host ::ng-deep .cm-force-border{padding-right:.1px}@media print{:host ::ng-deep .CodeMirror div.CodeMirror-cursors{visibility:hidden}}:host ::ng-deep .cm-tab-wrap-hack:after{content:\"\"}:host ::ng-deep span.CodeMirror-selectedtext{background:0 0}:host ::ng-deep .EasyMDEContainer{display:block}:host ::ng-deep .CodeMirror-rtl pre{direction:rtl}:host ::ng-deep .EasyMDEContainer.sided--no-fullscreen{display:flex;flex-direction:row;flex-wrap:wrap}:host ::ng-deep .EasyMDEContainer .CodeMirror{box-sizing:border-box;height:auto;border:1px solid #ddd;border-bottom-left-radius:4px;border-bottom-right-radius:4px;padding:10px;font:inherit;z-index:0;word-wrap:break-word}:host ::ng-deep .EasyMDEContainer .CodeMirror-scroll{cursor:text}:host ::ng-deep .EasyMDEContainer .CodeMirror-fullscreen{background:#fff;position:fixed!important;inset:50px 0 0;height:auto;z-index:8;border-right:none!important;border-bottom-right-radius:0!important}:host ::ng-deep .EasyMDEContainer .CodeMirror-sided{width:50%!important}:host ::ng-deep .EasyMDEContainer.sided--no-fullscreen .CodeMirror-sided{border-right:none!important;border-bottom-right-radius:0;position:relative;flex:1 1 auto}:host ::ng-deep .EasyMDEContainer .CodeMirror-placeholder{opacity:.5}:host ::ng-deep .EasyMDEContainer .CodeMirror-focused .CodeMirror-selected{background:#d9d9d9}:host ::ng-deep .editor-toolbar{position:relative;-webkit-user-select:none;-o-user-select:none;user-select:none;padding:9px 10px;border-top:1px solid #bbb;border-left:1px solid #bbb;border-right:1px solid #bbb;border-top-left-radius:4px;border-top-right-radius:4px}:host ::ng-deep .editor-toolbar.fullscreen{width:100%;height:50px;padding-top:10px;padding-bottom:10px;box-sizing:border-box;background:#fff;border:0;position:fixed;top:0;left:0;opacity:1;z-index:9}:host ::ng-deep .editor-toolbar.fullscreen:before{width:20px;height:50px;background:linear-gradient(to right,#fff 0,rgba(255,255,255,0) 100%);position:fixed;top:0;left:0;margin:0;padding:0}:host ::ng-deep .editor-toolbar.fullscreen:after{width:20px;height:50px;background:linear-gradient(to right,rgba(255,255,255,0) 0,#fff 100%);position:fixed;top:0;right:0;margin:0;padding:0}:host ::ng-deep .EasyMDEContainer.sided--no-fullscreen .editor-toolbar{width:100%}:host ::ng-deep .editor-toolbar .easymde-dropdown,:host ::ng-deep .editor-toolbar button{background:0 0;display:inline-block;text-align:center;text-decoration:none!important;height:30px;margin:0;padding:0;border:1px solid transparent;border-radius:3px;cursor:pointer}:host ::ng-deep .editor-toolbar button{width:30px}:host ::ng-deep .editor-toolbar button.active,:host ::ng-deep .editor-toolbar button:hover{background:#fcfcfc;border-color:#95a5a6}:host ::ng-deep .editor-toolbar i.separator{display:inline-block;width:0;border-left:1px solid #d9d9d9;border-right:1px solid #fff;color:transparent;text-indent:-10px;margin:0 6px}:host ::ng-deep .editor-toolbar button:after{font-family:Arial,Helvetica Neue,Helvetica,sans-serif;font-size:65%;vertical-align:text-bottom;position:relative;top:2px}:host ::ng-deep .editor-toolbar button.heading-1:after{content:\"1\"}:host ::ng-deep .editor-toolbar button.heading-2:after{content:\"2\"}:host ::ng-deep .editor-toolbar button.heading-3:after{content:\"3\"}:host ::ng-deep .editor-toolbar button.heading-bigger:after{content:\"\\25b2\"}:host ::ng-deep .editor-toolbar button.heading-smaller:after{content:\"\\25bc\"}:host ::ng-deep .editor-toolbar.disabled-for-preview button:not(.no-disable){opacity:.6;pointer-events:none}@media only screen and (max-width: 700px){:host ::ng-deep .editor-toolbar i.no-mobile{display:none}}:host ::ng-deep .editor-statusbar{padding:8px 10px;font-size:12px;color:#959694;text-align:right}:host ::ng-deep .EasyMDEContainer.sided--no-fullscreen .editor-statusbar{width:100%}:host ::ng-deep .editor-statusbar span{display:inline-block;min-width:4em;margin-left:1em}:host ::ng-deep .editor-statusbar .lines:before{content:\"lines: \"}:host ::ng-deep .editor-statusbar .words:before{content:\"words: \"}:host ::ng-deep .editor-statusbar .characters:before{content:\"characters: \"}:host ::ng-deep .editor-preview-full{position:absolute;width:100%;height:100%;top:0;left:0;z-index:7;overflow:auto;display:none;box-sizing:border-box}:host ::ng-deep .editor-preview-side{position:fixed;bottom:0;width:50%;top:50px;right:0;z-index:9;overflow:auto;display:none;box-sizing:border-box;border:1px solid #ddd;word-wrap:break-word}:host ::ng-deep .editor-preview-active-side{display:block}:host ::ng-deep .EasyMDEContainer.sided--no-fullscreen .editor-preview-active-side{flex:1 1 auto;height:auto;position:static}:host ::ng-deep .editor-preview-active{display:block}:host ::ng-deep .editor-preview{padding:10px;background:#fafafa}:host ::ng-deep .editor-preview>p{margin-top:0}:host ::ng-deep .editor-preview pre{background:#eee;margin-bottom:10px}:host ::ng-deep .editor-preview table td,:host ::ng-deep .editor-preview table th{border:1px solid #ddd;padding:5px}:host ::ng-deep .cm-s-easymde .cm-tag{color:#63a35c}:host ::ng-deep .cm-s-easymde .cm-attribute{color:#795da3}:host ::ng-deep .cm-s-easymde .cm-string{color:#183691}:host ::ng-deep .cm-s-easymde .cm-header-1{font-size:200%;line-height:200%}:host ::ng-deep .cm-s-easymde .cm-header-2{font-size:160%;line-height:160%}:host ::ng-deep .cm-s-easymde .cm-header-3{font-size:125%;line-height:125%}:host ::ng-deep .cm-s-easymde .cm-header-4{font-size:110%;line-height:110%}:host ::ng-deep .cm-s-easymde .cm-comment{background:rgba(0,0,0,.05);border-radius:2px}:host ::ng-deep .cm-s-easymde .cm-link{color:#7f8c8d}:host ::ng-deep .cm-s-easymde .cm-url{color:#aab2b3}:host ::ng-deep .cm-s-easymde .cm-quote{color:#7f8c8d;font-style:italic}:host ::ng-deep .editor-toolbar .easymde-dropdown{position:relative;background:linear-gradient(to bottom right,#fff 0,#fff 84%,#333 50%,#333 100%);border-radius:0;border:1px solid #fff}:host ::ng-deep .editor-toolbar .easymde-dropdown:hover{background:linear-gradient(to bottom right,#fff 0,#fff 84%,#333 50%,#333 100%)}:host ::ng-deep .easymde-dropdown-content{display:block;visibility:hidden;position:absolute;background-color:#f9f9f9;box-shadow:0 8px 16px #0003;padding:8px;z-index:2;top:30px}:host ::ng-deep .easymde-dropdown:active .easymde-dropdown-content,:host ::ng-deep .easymde-dropdown:focus .easymde-dropdown-content,:host ::ng-deep .easymde-dropdown:focus-within .easymde-dropdown-content{visibility:visible}:host ::ng-deep span[data-img-src]:after{content:\"\";background-image:var(--bg-image);display:block;max-height:100%;max-width:100%;background-size:contain;height:0;padding-top:var(--height);width:var(--width);background-repeat:no-repeat}:host ::ng-deep .CodeMirror .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word){background:rgba(255,0,0,.15)}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EasymdeWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EasymdeWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-easymde-wrapper', template: '<textarea #easymde></textarea>', providers: [
                         {

package/esm2020/lib/data-fields/text-field/rich-textarea-field/rich-textarea-field.component.mjs

@@ -14,9 +14,9 @@ export class RichTextareaFieldComponent extends AbstractRichTextareaFieldCompone
         this._translate = _translate;
     }
 }
-RichTextareaFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RichTextareaFieldComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-RichTextareaFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: RichTextareaFieldComponent, selector: "nc-rich-textarea-field", usesInheritance: true, ngImport: i0, template: "<div class=\"height-100\">\n    <nc-easymde-wrapper *ngIf=\"!formControlRef.disabled\" [formControlRef]=\"formControlRef\" [textAreaField]=\"textAreaField\"></nc-easymde-wrapper>\n    <mat-error *ngIf=\"textAreaField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n\n    <input type=\"hidden\" [formControl]=\"formControlRef\">\n\n    <div [ngClass]=\"{'border': textAreaField.materialAppearance === 'outline'}\" *ngIf=\"formControlRef.disabled\">\n        <td-markdown>{{textAreaField.value}}</td-markdown>\n    </div>\n</div>\n", styles: [".height-100{height:100%}.border{border:1px solid #ddd;border-radius:4px;padding:10px;z-index:1;word-wrap:break-word}\n"], components: [{ type: i2.EasymdeWrapperComponent, selector: "nc-easymde-wrapper", inputs: ["formControlRef", "textAreaField"] }, { type: i3.TdMarkdownComponent, selector: "td-markdown", inputs: ["content", "simpleLineBreaks", "hostedUrl", "anchor"], outputs: ["contentReady"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.MatError, selector: "mat-error", inputs: ["id"] }, { type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RichTextareaFieldComponent, decorators: [{
+RichTextareaFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RichTextareaFieldComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+RichTextareaFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: RichTextareaFieldComponent, selector: "nc-rich-textarea-field", usesInheritance: true, ngImport: i0, template: "<div class=\"height-100\">\n    <nc-easymde-wrapper *ngIf=\"!formControlRef.disabled\" [formControlRef]=\"formControlRef\" [textAreaField]=\"textAreaField\"></nc-easymde-wrapper>\n    <mat-error *ngIf=\"textAreaField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n\n    <input type=\"hidden\" [formControl]=\"formControlRef\">\n\n    <div [ngClass]=\"{'border': textAreaField.materialAppearance === 'outline'}\" *ngIf=\"formControlRef.disabled\">\n        <td-markdown>{{textAreaField.value}}</td-markdown>\n    </div>\n</div>\n", styles: [".height-100{height:100%}.border{border:1px solid #ddd;border-radius:4px;padding:10px;z-index:1;word-wrap:break-word}\n"], components: [{ type: i2.EasymdeWrapperComponent, selector: "nc-easymde-wrapper", inputs: ["formControlRef", "textAreaField"] }, { type: i3.TdMarkdownComponent, selector: "td-markdown", inputs: ["content", "simpleLineBreaks", "hostedUrl", "anchor"], outputs: ["contentReady"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.MatError, selector: "mat-error", inputs: ["id"] }, { type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RichTextareaFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-rich-textarea-field', template: "<div class=\"height-100\">\n    <nc-easymde-wrapper *ngIf=\"!formControlRef.disabled\" [formControlRef]=\"formControlRef\" [textAreaField]=\"textAreaField\"></nc-easymde-wrapper>\n    <mat-error *ngIf=\"textAreaField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n\n    <input type=\"hidden\" [formControl]=\"formControlRef\">\n\n    <div [ngClass]=\"{'border': textAreaField.materialAppearance === 'outline'}\" *ngIf=\"formControlRef.disabled\">\n        <td-markdown>{{textAreaField.value}}</td-markdown>\n    </div>\n</div>\n", styles: [".height-100{height:100%}.border{border:1px solid #ddd;border-radius:4px;padding:10px;z-index:1;word-wrap:break-word}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.TranslateService }]; } });

package/esm2020/lib/data-fields/text-field/simple-text-field/simple-text-field.component.mjs

@@ -12,9 +12,9 @@ export class SimpleTextFieldComponent extends AbstractSimpleTextFieldComponent {
         this._translate = _translate;
     }
 }
-SimpleTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SimpleTextFieldComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-SimpleTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SimpleTextFieldComponent, selector: "nc-simple-text-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"textField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{textField.title}}</mat-label>\n    <input matInput\n           [placeholder]=\"textField.placeholder\"\n           [required]=\"textField.behavior.required\"\n           [formControl]=\"formControlRef\">\n    <mat-hint>{{textField.description}}</mat-hint>\n    <mat-error *ngIf=\"textField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i2.MatError, selector: "mat-error", inputs: ["id"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SimpleTextFieldComponent, decorators: [{
+SimpleTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SimpleTextFieldComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+SimpleTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SimpleTextFieldComponent, selector: "nc-simple-text-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"textField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{textField.title}}</mat-label>\n    <input matInput\n           [placeholder]=\"textField.placeholder\"\n           [required]=\"textField.behavior.required\"\n           [formControl]=\"formControlRef\">\n    <mat-hint>{{textField.description}}</mat-hint>\n    <mat-error *ngIf=\"textField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i2.MatError, selector: "mat-error", inputs: ["id"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SimpleTextFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-simple-text-field', template: "<mat-form-field [appearance]=\"textField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{textField.title}}</mat-label>\n    <input matInput\n           [placeholder]=\"textField.placeholder\"\n           [required]=\"textField.behavior.required\"\n           [formControl]=\"formControlRef\">\n    <mat-hint>{{textField.description}}</mat-hint>\n    <mat-error *ngIf=\"textField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.TranslateService }]; } });

package/esm2020/lib/data-fields/text-field/text-field.component.mjs

@@ -13,9 +13,9 @@ export class TextFieldComponent extends AbstractTextFieldComponent {
         super(informAboutInvalidData);
     }
 }
-TextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextFieldComponent, deps: [{ token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TextFieldComponent, selector: "nc-text-field", usesInheritance: true, ngImport: i0, template: "<nc-data-field-template *ngIf=\"!dataField.behavior.hidden\"\n                        [dataField]=\"dataField\"\n                        [dataFieldTemplate]=\"textFieldTemplate\"\n                        [offset]=\"taskOffset\">\n</nc-data-field-template>\n\n<ng-template #textFieldTemplate let-showLargeLayout=\"showLargeLayout\">\n    <div [ngSwitch]=\"dataField.getComponentType()\">\n        <nc-password-text-field *ngSwitchCase=\"'password'\" [passwordTextField]=\"dataField\" [formControlRef]=\"formControl\"\n                                [showLargeLayout]=\"showLargeLayout\"></nc-password-text-field>\n        <nc-textarea-field *ngSwitchCase=\"'textarea'\" [textAreaField]=\"dataField\" [formControlRef]=\"formControl\"\n                           [showLargeLayout]=\"showLargeLayout\"></nc-textarea-field>\n        <nc-textarea-field *ngSwitchCase=\"'area'\" [textAreaField]=\"dataField\" [formControlRef]=\"formControl\"\n                           [showLargeLayout]=\"showLargeLayout\"></nc-textarea-field>\n        <nc-rich-textarea-field *ngSwitchCase=\"'richtextarea'\" [textAreaField]=\"dataField\"\n                                [formControlRef]=\"formControl\"\n                                [showLargeLayout]=\"showLargeLayout\"></nc-rich-textarea-field>\n        <nc-rich-textarea-field *ngSwitchCase=\"'editor'\" [textAreaField]=\"dataField\"\n                                [formControlRef]=\"formControl\"\n                                [showLargeLayout]=\"showLargeLayout\"></nc-rich-textarea-field>\n        <nc-html-textarea-field *ngSwitchCase=\"'htmltextarea'\" [textAreaField]=\"dataField\"\n                                [formControlRef]=\"formControl\"\n                                [showLargeLayout]=\"showLargeLayout\"></nc-html-textarea-field>\n        <nc-html-textarea-field *ngSwitchCase=\"'htmlEditor'\" [textAreaField]=\"dataField\"\n                                [formControlRef]=\"formControl\"\n                                [showLargeLayout]=\"showLargeLayout\"></nc-html-textarea-field>\n        <nc-simple-text-field *ngSwitchDefault [textField]=\"dataField\" [formControlRef]=\"formControl\"\n                              [showLargeLayout]=\"showLargeLayout\"></nc-simple-text-field>\n    </div>\n</ng-template>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i1.DataFieldTemplateComponent, selector: "nc-data-field-template" }, { type: i2.PasswordTextFieldComponent, selector: "nc-password-text-field" }, { type: i3.TextareaFieldComponent, selector: "nc-textarea-field" }, { type: i4.RichTextareaFieldComponent, selector: "nc-rich-textarea-field" }, { type: i5.HtmlTextareaFieldComponent, selector: "nc-html-textarea-field" }, { type: i6.SimpleTextFieldComponent, selector: "nc-simple-text-field" }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i7.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i7.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextFieldComponent, decorators: [{
+TextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextFieldComponent, deps: [{ token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+TextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TextFieldComponent, selector: "nc-text-field", usesInheritance: true, ngImport: i0, template: "<nc-data-field-template *ngIf=\"!dataField.behavior.hidden\"\n                        [dataField]=\"dataField\"\n                        [dataFieldTemplate]=\"textFieldTemplate\"\n                        [offset]=\"taskOffset\">\n</nc-data-field-template>\n\n<ng-template #textFieldTemplate let-showLargeLayout=\"showLargeLayout\">\n    <div [ngSwitch]=\"dataField.getComponentType()\">\n        <nc-password-text-field *ngSwitchCase=\"'password'\" [passwordTextField]=\"dataField\" [formControlRef]=\"formControl\"\n                                [showLargeLayout]=\"showLargeLayout\"></nc-password-text-field>\n        <nc-textarea-field *ngSwitchCase=\"'textarea'\" [textAreaField]=\"dataField\" [formControlRef]=\"formControl\"\n                           [showLargeLayout]=\"showLargeLayout\"></nc-textarea-field>\n        <nc-textarea-field *ngSwitchCase=\"'area'\" [textAreaField]=\"dataField\" [formControlRef]=\"formControl\"\n                           [showLargeLayout]=\"showLargeLayout\"></nc-textarea-field>\n        <nc-rich-textarea-field *ngSwitchCase=\"'richtextarea'\" [textAreaField]=\"dataField\"\n                                [formControlRef]=\"formControl\"\n                                [showLargeLayout]=\"showLargeLayout\"></nc-rich-textarea-field>\n        <nc-rich-textarea-field *ngSwitchCase=\"'editor'\" [textAreaField]=\"dataField\"\n                                [formControlRef]=\"formControl\"\n                                [showLargeLayout]=\"showLargeLayout\"></nc-rich-textarea-field>\n        <nc-html-textarea-field *ngSwitchCase=\"'htmltextarea'\" [textAreaField]=\"dataField\"\n                                [formControlRef]=\"formControl\"\n                                [showLargeLayout]=\"showLargeLayout\"></nc-html-textarea-field>\n        <nc-html-textarea-field *ngSwitchCase=\"'htmlEditor'\" [textAreaField]=\"dataField\"\n                                [formControlRef]=\"formControl\"\n                                [showLargeLayout]=\"showLargeLayout\"></nc-html-textarea-field>\n        <nc-simple-text-field *ngSwitchDefault [textField]=\"dataField\" [formControlRef]=\"formControl\"\n                              [showLargeLayout]=\"showLargeLayout\"></nc-simple-text-field>\n    </div>\n</ng-template>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i1.DataFieldTemplateComponent, selector: "nc-data-field-template" }, { type: i2.PasswordTextFieldComponent, selector: "nc-password-text-field" }, { type: i3.TextareaFieldComponent, selector: "nc-textarea-field" }, { type: i4.RichTextareaFieldComponent, selector: "nc-rich-textarea-field" }, { type: i5.HtmlTextareaFieldComponent, selector: "nc-html-textarea-field" }, { type: i6.SimpleTextFieldComponent, selector: "nc-simple-text-field" }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i7.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i7.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-text-field', template: "<nc-data-field-template *ngIf=\"!dataField.behavior.hidden\"\n                        [dataField]=\"dataField\"\n                        [dataFieldTemplate]=\"textFieldTemplate\"\n                        [offset]=\"taskOffset\">\n</nc-data-field-template>\n\n<ng-template #textFieldTemplate let-showLargeLayout=\"showLargeLayout\">\n    <div [ngSwitch]=\"dataField.getComponentType()\">\n        <nc-password-text-field *ngSwitchCase=\"'password'\" [passwordTextField]=\"dataField\" [formControlRef]=\"formControl\"\n                                [showLargeLayout]=\"showLargeLayout\"></nc-password-text-field>\n        <nc-textarea-field *ngSwitchCase=\"'textarea'\" [textAreaField]=\"dataField\" [formControlRef]=\"formControl\"\n                           [showLargeLayout]=\"showLargeLayout\"></nc-textarea-field>\n        <nc-textarea-field *ngSwitchCase=\"'area'\" [textAreaField]=\"dataField\" [formControlRef]=\"formControl\"\n                           [showLargeLayout]=\"showLargeLayout\"></nc-textarea-field>\n        <nc-rich-textarea-field *ngSwitchCase=\"'richtextarea'\" [textAreaField]=\"dataField\"\n                                [formControlRef]=\"formControl\"\n                                [showLargeLayout]=\"showLargeLayout\"></nc-rich-textarea-field>\n        <nc-rich-textarea-field *ngSwitchCase=\"'editor'\" [textAreaField]=\"dataField\"\n                                [formControlRef]=\"formControl\"\n                                [showLargeLayout]=\"showLargeLayout\"></nc-rich-textarea-field>\n        <nc-html-textarea-field *ngSwitchCase=\"'htmltextarea'\" [textAreaField]=\"dataField\"\n                                [formControlRef]=\"formControl\"\n                                [showLargeLayout]=\"showLargeLayout\"></nc-html-textarea-field>\n        <nc-html-textarea-field *ngSwitchCase=\"'htmlEditor'\" [textAreaField]=\"dataField\"\n                                [formControlRef]=\"formControl\"\n                                [showLargeLayout]=\"showLargeLayout\"></nc-html-textarea-field>\n        <nc-simple-text-field *ngSwitchDefault [textField]=\"dataField\" [formControlRef]=\"formControl\"\n                              [showLargeLayout]=\"showLargeLayout\"></nc-simple-text-field>\n    </div>\n</ng-template>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{

package/esm2020/lib/data-fields/text-field/textarea-field/textarea-field.component.mjs

@@ -15,9 +15,9 @@ export class TextareaFieldComponent extends AbstractTextareaFieldComponent {
         this._ngZone = _ngZone;
     }
 }
-TextareaFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextareaFieldComponent, deps: [{ token: i1.TranslateService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-TextareaFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TextareaFieldComponent, selector: "nc-textarea-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"textAreaField.materialAppearance\"\n                floatLabel=\"always\"\n                class=\"full-width\"\n                color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{textAreaField.title}}</mat-label>\n    <textarea matInput\n              #textArea\n              [placeholder]=\"textAreaField.placeholder\"\n              [required]=\"textAreaField.behavior.required\"\n              [formControl]=\"formControlRef\"\n              [ngStyle]=\"{'min-height': getHeight()+'px', 'height': getHeight()+'px'}\"\n              #dynamicTextArea=\"cdkTextareaAutosize\"\n              cdkTextareaAutosize\n              cdkAutosizeMinRows=\"1\"></textarea>\n    <mat-hint>{{textAreaField.description}}</mat-hint>\n    <mat-error *ngIf=\"textAreaField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n</mat-form-field>\n\n\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i5.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i2.MatError, selector: "mat-error", inputs: ["id"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextareaFieldComponent, decorators: [{
+TextareaFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextareaFieldComponent, deps: [{ token: i1.TranslateService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+TextareaFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TextareaFieldComponent, selector: "nc-textarea-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"textAreaField.materialAppearance\"\n                floatLabel=\"always\"\n                class=\"full-width\"\n                color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{textAreaField.title}}</mat-label>\n    <textarea matInput\n              #textArea\n              [placeholder]=\"textAreaField.placeholder\"\n              [required]=\"textAreaField.behavior.required\"\n              [formControl]=\"formControlRef\"\n              [ngStyle]=\"{'min-height': getHeight()+'px', 'height': getHeight()+'px'}\"\n              #dynamicTextArea=\"cdkTextareaAutosize\"\n              cdkTextareaAutosize\n              cdkAutosizeMinRows=\"1\"></textarea>\n    <mat-hint>{{textAreaField.description}}</mat-hint>\n    <mat-error *ngIf=\"textAreaField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n</mat-form-field>\n\n\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i5.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i2.MatError, selector: "mat-error", inputs: ["id"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextareaFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-textarea-field', template: "<mat-form-field [appearance]=\"textAreaField.materialAppearance\"\n                floatLabel=\"always\"\n                class=\"full-width\"\n                color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{textAreaField.title}}</mat-label>\n    <textarea matInput\n              #textArea\n              [placeholder]=\"textAreaField.placeholder\"\n              [required]=\"textAreaField.behavior.required\"\n              [formControl]=\"formControlRef\"\n              [ngStyle]=\"{'min-height': getHeight()+'px', 'height': getHeight()+'px'}\"\n              #dynamicTextArea=\"cdkTextareaAutosize\"\n              cdkTextareaAutosize\n              cdkAutosizeMinRows=\"1\"></textarea>\n    <mat-hint>{{textAreaField.description}}</mat-hint>\n    <mat-error *ngIf=\"textAreaField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n</mat-form-field>\n\n\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.TranslateService }, { type: i0.NgZone }]; } });

package/esm2020/lib/data-fields/user-field/user-field.component.mjs

@@ -18,9 +18,9 @@ export class UserFieldComponent extends AbstractUserFieldComponent {
         this.selectAbstractUser(UserAssignComponent);
     }
 }
-UserFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UserFieldComponent, deps: [{ token: i1.SideMenuService }, { token: i1.SnackBarService }, { token: i2.TranslateService }, { token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-UserFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: UserFieldComponent, selector: "nc-user-field", usesInheritance: true, ngImport: i0, template: "<nc-data-field-template *ngIf=\"!dataField.behavior.hidden\"\n                        [dataField]=\"dataField\"\n                        [dataFieldTemplate]=\"dataFieldTemplate\"\n                        [offset]=\"taskOffset\">\n</nc-data-field-template>\n\n<ng-template #dataFieldTemplate let-showLargeLayout=\"showLargeLayout\">\n\n    <div>\n        <mat-label class=\"netgrif-label\" *ngIf=\"!showLargeLayout.value\">{{dataField.title}}\n            <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!dataField.disabled\"></nc-required-label>\n            <br>\n        </mat-label>\n        <button mat-stroked-button\n                *ngIf=\"!!dataField.value\"\n                [disabled]=\"formControl.disabled\"\n                color=\"primary\"\n                (click)=\"selectUser()\">\n            <mat-icon>how_to_reg</mat-icon>\n            {{dataField.value.fullName}}\n        </button>\n        <button mat-stroked-button\n                *ngIf=\"!dataField.value\"\n                [disabled]=\"formControl.disabled\"\n                color=\"primary\"\n                (click)=\"selectUser()\">\n            <mat-icon>person_add</mat-icon>\n            {{'dataField.user.selectUser' | translate}}\n        </button>\n        <mat-error *ngIf=\"dataField.isInvalid(formControl)\">{{'dataField.validations.required' | translate}}</mat-error>\n    </div>\n\n</ng-template>\n", styles: [""], components: [{ type: i3.DataFieldTemplateComponent, selector: "nc-data-field-template" }, { type: i4.RequiredLabelComponent, selector: "nc-required-label", inputs: ["isIn"] }, { type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.MatLabel, selector: "mat-label" }, { type: i8.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i2.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UserFieldComponent, decorators: [{
+UserFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UserFieldComponent, deps: [{ token: i1.SideMenuService }, { token: i1.SnackBarService }, { token: i2.TranslateService }, { token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+UserFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: UserFieldComponent, selector: "nc-user-field", usesInheritance: true, ngImport: i0, template: "<nc-data-field-template *ngIf=\"!dataField.behavior.hidden\"\n                        [dataField]=\"dataField\"\n                        [dataFieldTemplate]=\"dataFieldTemplate\"\n                        [offset]=\"taskOffset\">\n</nc-data-field-template>\n\n<ng-template #dataFieldTemplate let-showLargeLayout=\"showLargeLayout\">\n\n    <div>\n        <mat-label class=\"netgrif-label\" *ngIf=\"!showLargeLayout.value\">{{dataField.title}}\n            <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!dataField.disabled\"></nc-required-label>\n            <br>\n        </mat-label>\n        <button mat-stroked-button\n                *ngIf=\"!!dataField.value\"\n                [disabled]=\"formControl.disabled\"\n                color=\"primary\"\n                (click)=\"selectUser()\">\n            <mat-icon>how_to_reg</mat-icon>\n            {{dataField.value.fullName}}\n        </button>\n        <button mat-stroked-button\n                *ngIf=\"!dataField.value\"\n                [disabled]=\"formControl.disabled\"\n                color=\"primary\"\n                (click)=\"selectUser()\">\n            <mat-icon>person_add</mat-icon>\n            {{'dataField.user.selectUser' | translate}}\n        </button>\n        <mat-error *ngIf=\"dataField.isInvalid(formControl)\">{{'dataField.validations.required' | translate}}</mat-error>\n    </div>\n\n</ng-template>\n", styles: [""], components: [{ type: i3.DataFieldTemplateComponent, selector: "nc-data-field-template" }, { type: i4.RequiredLabelComponent, selector: "nc-required-label", inputs: ["isIn"] }, { type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.MatLabel, selector: "mat-label" }, { type: i8.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i2.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UserFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-user-field', template: "<nc-data-field-template *ngIf=\"!dataField.behavior.hidden\"\n                        [dataField]=\"dataField\"\n                        [dataFieldTemplate]=\"dataFieldTemplate\"\n                        [offset]=\"taskOffset\">\n</nc-data-field-template>\n\n<ng-template #dataFieldTemplate let-showLargeLayout=\"showLargeLayout\">\n\n    <div>\n        <mat-label class=\"netgrif-label\" *ngIf=\"!showLargeLayout.value\">{{dataField.title}}\n            <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!dataField.disabled\"></nc-required-label>\n            <br>\n        </mat-label>\n        <button mat-stroked-button\n                *ngIf=\"!!dataField.value\"\n                [disabled]=\"formControl.disabled\"\n                color=\"primary\"\n                (click)=\"selectUser()\">\n            <mat-icon>how_to_reg</mat-icon>\n            {{dataField.value.fullName}}\n        </button>\n        <button mat-stroked-button\n                *ngIf=\"!dataField.value\"\n                [disabled]=\"formControl.disabled\"\n                color=\"primary\"\n                (click)=\"selectUser()\">\n            <mat-icon>person_add</mat-icon>\n            {{'dataField.user.selectUser' | translate}}\n        </button>\n        <mat-error *ngIf=\"dataField.isInvalid(formControl)\">{{'dataField.validations.required' | translate}}</mat-error>\n    </div>\n\n</ng-template>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i1.SideMenuService }, { type: i1.SnackBarService }, { type: i2.TranslateService }, { type: undefined, decorators: [{

package/esm2020/lib/data-fields/user-list-field/user-list-field.component.mjs

@@ -21,9 +21,9 @@ export class UserListFieldComponent extends AbstractUserListFieldComponent {
         this.removeAbstractUser(user);
     }
 }
-UserListFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UserListFieldComponent, deps: [{ token: i1.SideMenuService }, { token: i1.SnackBarService }, { token: i2.TranslateService }, { token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-UserListFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: UserListFieldComponent, selector: "nc-user-list-field", usesInheritance: true, ngImport: i0, template: "<nc-data-field-template *ngIf='!dataField.behavior.hidden'\n                        [dataField]='dataField'\n                        [dataFieldTemplate]='dataFieldTemplate'\n                        [offset]='taskOffset'>\n</nc-data-field-template>\n\n<ng-template #dataFieldTemplate let-showLargeLayout='showLargeLayout'>\n    <mat-label class='netgrif-label' *ngIf='!showLargeLayout.value'>{{dataField.title}}\n        <nc-required-label *ngIf='dataField.behavior.required' [isIn]='!dataField.disabled'></nc-required-label>\n        <br>\n    </mat-label>\n    <button *ngIf='!formControl.disabled' mat-stroked-button class='user-list-item-margin'\n            [disabled]='formControl.disabled'\n            color='primary'\n            (click)='selectUser()'>\n        <mat-icon>person_add</mat-icon>\n        {{'dataField.user.selectUser' | translate}}\n    </button>\n    <span *ngIf='dataField?.value?.userValues?.length > 0'>\n        <span *ngFor='let user of dataField.value.userValues' class='user-list-item-margin'>\n            <button mat-stroked-button\n                    [disabled]='formControl.disabled'\n                    color='primary'>\n                <mat-icon>how_to_reg</mat-icon>\n                {{user.fullName}}\n                <mat-icon (click)='deleteUser(user)' color='warn' *ngIf='!formControl.disabled'>close</mat-icon>\n            </button>\n            <mat-error *ngIf='dataField.isInvalid(formControl)'>{{'dataField.validations.required' | translate}}</mat-error>\n        </span>\n    </span>\n\n</ng-template>\n", styles: [".user-list-item-margin{margin:0 4px 4px}\n"], components: [{ type: i3.DataFieldTemplateComponent, selector: "nc-data-field-template" }, { type: i4.RequiredLabelComponent, selector: "nc-required-label", inputs: ["isIn"] }, { type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.MatLabel, selector: "mat-label" }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i2.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UserListFieldComponent, decorators: [{
+UserListFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UserListFieldComponent, deps: [{ token: i1.SideMenuService }, { token: i1.SnackBarService }, { token: i2.TranslateService }, { token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+UserListFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: UserListFieldComponent, selector: "nc-user-list-field", usesInheritance: true, ngImport: i0, template: "<nc-data-field-template *ngIf='!dataField.behavior.hidden'\n                        [dataField]='dataField'\n                        [dataFieldTemplate]='dataFieldTemplate'\n                        [offset]='taskOffset'>\n</nc-data-field-template>\n\n<ng-template #dataFieldTemplate let-showLargeLayout='showLargeLayout'>\n    <mat-label class='netgrif-label' *ngIf='!showLargeLayout.value'>{{dataField.title}}\n        <nc-required-label *ngIf='dataField.behavior.required' [isIn]='!dataField.disabled'></nc-required-label>\n        <br>\n    </mat-label>\n    <button *ngIf='!formControl.disabled' mat-stroked-button class='user-list-item-margin'\n            [disabled]='formControl.disabled'\n            color='primary'\n            (click)='selectUser()'>\n        <mat-icon>person_add</mat-icon>\n        {{'dataField.user.selectUser' | translate}}\n    </button>\n    <span *ngIf='dataField?.value?.userValues?.length > 0'>\n        <span *ngFor='let user of dataField.value.userValues' class='user-list-item-margin'>\n            <button mat-stroked-button\n                    [disabled]='formControl.disabled'\n                    color='primary'>\n                <mat-icon>how_to_reg</mat-icon>\n                {{user.fullName}}\n                <mat-icon (click)='deleteUser(user)' color='warn' *ngIf='!formControl.disabled'>close</mat-icon>\n            </button>\n            <mat-error *ngIf='dataField.isInvalid(formControl)'>{{'dataField.validations.required' | translate}}</mat-error>\n        </span>\n    </span>\n\n</ng-template>\n", styles: [".user-list-item-margin{margin:0 4px 4px}\n"], components: [{ type: i3.DataFieldTemplateComponent, selector: "nc-data-field-template" }, { type: i4.RequiredLabelComponent, selector: "nc-required-label", inputs: ["isIn"] }, { type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.MatLabel, selector: "mat-label" }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i2.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UserListFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-user-list-field', template: "<nc-data-field-template *ngIf='!dataField.behavior.hidden'\n                        [dataField]='dataField'\n                        [dataFieldTemplate]='dataFieldTemplate'\n                        [offset]='taskOffset'>\n</nc-data-field-template>\n\n<ng-template #dataFieldTemplate let-showLargeLayout='showLargeLayout'>\n    <mat-label class='netgrif-label' *ngIf='!showLargeLayout.value'>{{dataField.title}}\n        <nc-required-label *ngIf='dataField.behavior.required' [isIn]='!dataField.disabled'></nc-required-label>\n        <br>\n    </mat-label>\n    <button *ngIf='!formControl.disabled' mat-stroked-button class='user-list-item-margin'\n            [disabled]='formControl.disabled'\n            color='primary'\n            (click)='selectUser()'>\n        <mat-icon>person_add</mat-icon>\n        {{'dataField.user.selectUser' | translate}}\n    </button>\n    <span *ngIf='dataField?.value?.userValues?.length > 0'>\n        <span *ngFor='let user of dataField.value.userValues' class='user-list-item-margin'>\n            <button mat-stroked-button\n                    [disabled]='formControl.disabled'\n                    color='primary'>\n                <mat-icon>how_to_reg</mat-icon>\n                {{user.fullName}}\n                <mat-icon (click)='deleteUser(user)' color='warn' *ngIf='!formControl.disabled'>close</mat-icon>\n            </button>\n            <mat-error *ngIf='dataField.isInvalid(formControl)'>{{'dataField.validations.required' | translate}}</mat-error>\n        </span>\n    </span>\n\n</ng-template>\n", styles: [".user-list-item-margin{margin:0 4px 4px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.SideMenuService }, { type: i1.SnackBarService }, { type: i2.TranslateService }, { type: undefined, decorators: [{

package/esm2020/lib/forms/email-submission/email-submission-form.component.mjs

@@ -16,9 +16,9 @@ export class EmailSubmissionFormComponent extends AbstractEmailSubmissionFormCom
         super(formBuilder);
     }
 }
-EmailSubmissionFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EmailSubmissionFormComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-EmailSubmissionFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: EmailSubmissionFormComponent, selector: "nc-email-submission-form", usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxLayoutGap=\"24px\">\n    <form [formGroup]=\"rootFormGroup\" (ngSubmit)=\"onSubmit()\" class=\"full-width netgrif-input\">\n        <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n            <mat-icon color=\"primary\" class=\"netgrif-icon-fix\">email</mat-icon>\n            <mat-form-field fxFlex=\"100\" appearance=\"outline\">\n                <input matInput placeholder=\"{{ 'forms.email.enterEmail' | translate}}\" formControlName=\"email\" required\n                       autocomplete=\"email\">\n                <mat-error *ngIf=\"rootFormGroup.controls['email'].hasError('email')\">\n                    {{ 'dataField.validations.email' | translate}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n        <nc-legal-notice *ngIf=\"displayLegalNotice\" [buttonName]=\"'dialog.submit'\"></nc-legal-notice>\n        <div fxLayout=\"row\" class=\"margin-top-4\">\n            <button mat-icon-button fxLayoutAlign=\"start\" (click)=\"emitGoBack()\">\n                <mat-icon>arrow_back</mat-icon>\n            </button>\n            <div fxFlex></div>\n            <button fxLayoutAlign=\"end\" mat-raised-button color=\"primary\" fxFlexOffset=\"8px\">\n                <mat-spinner *ngIf=\"loading | async\"\n                             mode=\"indeterminate\"\n                             diameter=\"36\"\n                             color=\"accent\"\n                             fxFlex></mat-spinner>\n                <span *ngIf=\"(loading | async) === false\" fxFlex>{{ 'dialog.submit' | translate}}</span>\n            </button>\n        </div>\n    </form>\n</div>\n", styles: [".margin-top-4{margin-top:4px}.full-width{width:100%}\n"], components: [{ type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4.LegalNoticeComponent, selector: "nc-legal-notice" }, { type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i7.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i7.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i7.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { type: i7.DefaultFlexOffsetDirective, selector: "  [fxFlexOffset], [fxFlexOffset.xs], [fxFlexOffset.sm], [fxFlexOffset.md],  [fxFlexOffset.lg], [fxFlexOffset.xl], [fxFlexOffset.lt-sm], [fxFlexOffset.lt-md],  [fxFlexOffset.lt-lg], [fxFlexOffset.lt-xl], [fxFlexOffset.gt-xs], [fxFlexOffset.gt-sm],  [fxFlexOffset.gt-md], [fxFlexOffset.gt-lg]", inputs: ["fxFlexOffset", "fxFlexOffset.xs", "fxFlexOffset.sm", "fxFlexOffset.md", "fxFlexOffset.lg", "fxFlexOffset.xl", "fxFlexOffset.lt-sm", "fxFlexOffset.lt-md", "fxFlexOffset.lt-lg", "fxFlexOffset.lt-xl", "fxFlexOffset.gt-xs", "fxFlexOffset.gt-sm", "fxFlexOffset.gt-md", "fxFlexOffset.gt-lg"] }], pipes: { "translate": i10.TranslatePipe, "async": i9.AsyncPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EmailSubmissionFormComponent, decorators: [{
+EmailSubmissionFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EmailSubmissionFormComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+EmailSubmissionFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: EmailSubmissionFormComponent, selector: "nc-email-submission-form", usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxLayoutGap=\"24px\">\n    <form [formGroup]=\"rootFormGroup\" (ngSubmit)=\"onSubmit()\" class=\"full-width netgrif-input\">\n        <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n            <mat-icon color=\"primary\" class=\"netgrif-icon-fix\">email</mat-icon>\n            <mat-form-field fxFlex=\"100\" appearance=\"outline\">\n                <input matInput placeholder=\"{{ 'forms.email.enterEmail' | translate}}\" formControlName=\"email\" required\n                       autocomplete=\"email\">\n                <mat-error *ngIf=\"rootFormGroup.controls['email'].hasError('email')\">\n                    {{ 'dataField.validations.email' | translate}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n        <nc-legal-notice *ngIf=\"displayLegalNotice\" [buttonName]=\"'dialog.submit'\"></nc-legal-notice>\n        <div fxLayout=\"row\" class=\"margin-top-4\">\n            <button mat-icon-button fxLayoutAlign=\"start\" (click)=\"emitGoBack()\">\n                <mat-icon>arrow_back</mat-icon>\n            </button>\n            <div fxFlex></div>\n            <button fxLayoutAlign=\"end\" mat-raised-button color=\"primary\" fxFlexOffset=\"8px\">\n                <mat-spinner *ngIf=\"loading | async\"\n                             mode=\"indeterminate\"\n                             diameter=\"36\"\n                             color=\"accent\"\n                             fxFlex></mat-spinner>\n                <span *ngIf=\"(loading | async) === false\" fxFlex>{{ 'dialog.submit' | translate}}</span>\n            </button>\n        </div>\n    </form>\n</div>\n", styles: [".margin-top-4{margin-top:4px}.full-width{width:100%}\n"], components: [{ type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4.LegalNoticeComponent, selector: "nc-legal-notice" }, { type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i7.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i7.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i7.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { type: i7.DefaultFlexOffsetDirective, selector: "  [fxFlexOffset], [fxFlexOffset.xs], [fxFlexOffset.sm], [fxFlexOffset.md],  [fxFlexOffset.lg], [fxFlexOffset.xl], [fxFlexOffset.lt-sm], [fxFlexOffset.lt-md],  [fxFlexOffset.lt-lg], [fxFlexOffset.lt-xl], [fxFlexOffset.gt-xs], [fxFlexOffset.gt-sm],  [fxFlexOffset.gt-md], [fxFlexOffset.gt-lg]", inputs: ["fxFlexOffset", "fxFlexOffset.xs", "fxFlexOffset.sm", "fxFlexOffset.md", "fxFlexOffset.lg", "fxFlexOffset.xl", "fxFlexOffset.lt-sm", "fxFlexOffset.lt-md", "fxFlexOffset.lt-lg", "fxFlexOffset.lt-xl", "fxFlexOffset.gt-xs", "fxFlexOffset.gt-sm", "fxFlexOffset.gt-md", "fxFlexOffset.gt-lg"] }], pipes: { "translate": i10.TranslatePipe, "async": i9.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EmailSubmissionFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-email-submission-form', template: "<div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxLayoutGap=\"24px\">\n    <form [formGroup]=\"rootFormGroup\" (ngSubmit)=\"onSubmit()\" class=\"full-width netgrif-input\">\n        <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n            <mat-icon color=\"primary\" class=\"netgrif-icon-fix\">email</mat-icon>\n            <mat-form-field fxFlex=\"100\" appearance=\"outline\">\n                <input matInput placeholder=\"{{ 'forms.email.enterEmail' | translate}}\" formControlName=\"email\" required\n                       autocomplete=\"email\">\n                <mat-error *ngIf=\"rootFormGroup.controls['email'].hasError('email')\">\n                    {{ 'dataField.validations.email' | translate}}\n                </mat-error>\n            </mat-form-field>\n        </div>\n        <nc-legal-notice *ngIf=\"displayLegalNotice\" [buttonName]=\"'dialog.submit'\"></nc-legal-notice>\n        <div fxLayout=\"row\" class=\"margin-top-4\">\n            <button mat-icon-button fxLayoutAlign=\"start\" (click)=\"emitGoBack()\">\n                <mat-icon>arrow_back</mat-icon>\n            </button>\n            <div fxFlex></div>\n            <button fxLayoutAlign=\"end\" mat-raised-button color=\"primary\" fxFlexOffset=\"8px\">\n                <mat-spinner *ngIf=\"loading | async\"\n                             mode=\"indeterminate\"\n                             diameter=\"36\"\n                             color=\"accent\"\n                             fxFlex></mat-spinner>\n                <span *ngIf=\"(loading | async) === false\" fxFlex>{{ 'dialog.submit' | translate}}</span>\n            </button>\n        </div>\n    </form>\n</div>\n", styles: [".margin-top-4{margin-top:4px}.full-width{width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }]; } });

package/esm2020/lib/forms/email-submission/email-submission-form.module.mjs

@@ -8,14 +8,14 @@ import { LegalNoticeModule } from '../../legal/legal-notice/legal-notice.module'
 import * as i0 from "@angular/core";
 export class EmailSubmissionFormComponentModule {
 }
-EmailSubmissionFormComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EmailSubmissionFormComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-EmailSubmissionFormComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EmailSubmissionFormComponentModule, declarations: [EmailSubmissionFormComponent], imports: [CommonModule,
+EmailSubmissionFormComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EmailSubmissionFormComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+EmailSubmissionFormComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EmailSubmissionFormComponentModule, declarations: [EmailSubmissionFormComponent], imports: [CommonModule,
         MaterialModule,
         FlexLayoutModule,
         ReactiveFormsModule,
         TranslateLibModule,
         LegalNoticeModule], exports: [EmailSubmissionFormComponent] });
-EmailSubmissionFormComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EmailSubmissionFormComponentModule, imports: [[
+EmailSubmissionFormComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EmailSubmissionFormComponentModule, imports: [[
             CommonModule,
             MaterialModule,
             FlexLayoutModule,
@@ -23,7 +23,7 @@ EmailSubmissionFormComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion
             TranslateLibModule,
             LegalNoticeModule
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EmailSubmissionFormComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EmailSubmissionFormComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [EmailSubmissionFormComponent],

package/esm2020/lib/forms/forgotten-password/forgotten-password-form-component.module.mjs

@@ -7,20 +7,20 @@ import { ReactiveFormsModule } from '@angular/forms';
 import * as i0 from "@angular/core";
 export class ForgottenPasswordFormComponentModule {
 }
-ForgottenPasswordFormComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ForgottenPasswordFormComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ForgottenPasswordFormComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ForgottenPasswordFormComponentModule, declarations: [ForgottenPasswordFormComponent], imports: [CommonModule,
+ForgottenPasswordFormComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ForgottenPasswordFormComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ForgottenPasswordFormComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ForgottenPasswordFormComponentModule, declarations: [ForgottenPasswordFormComponent], imports: [CommonModule,
         MaterialModule,
         FlexLayoutModule,
         ReactiveFormsModule,
         TranslateLibModule], exports: [ForgottenPasswordFormComponent] });
-ForgottenPasswordFormComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ForgottenPasswordFormComponentModule, imports: [[
+ForgottenPasswordFormComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ForgottenPasswordFormComponentModule, imports: [[
             CommonModule,
             MaterialModule,
             FlexLayoutModule,
             ReactiveFormsModule,
             TranslateLibModule
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ForgottenPasswordFormComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ForgottenPasswordFormComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ForgottenPasswordFormComponent],