@netgrif/components 6.3.0-beta.3 → 6.3.0-rc.3

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

@@ -1,7 +1,6 @@
 import { Component, Inject, Optional } from '@angular/core';
-import { AbstractFilterFieldComponent, Dashboard, NAE_INFORM_ABOUT_INVALID_DATA } from '@netgrif/components-core';
+import { AbstractFilterFieldComponent, NAE_INFORM_ABOUT_INVALID_DATA } from '@netgrif/components-core';
 import { FilterFieldContentComponent } from './filter-field-content/filter-field-content.component';
-import { FilterFieldTabViewContentComponent } from './tab-view-filter-field/filter-field-tab-view-content.component';
 import * as i0 from "@angular/core";
 import * as i1 from "../data-field-template/data-field-template.component";
 import * as i2 from "@angular/common";
@@ -11,15 +10,12 @@ export class FilterFieldComponent extends AbstractFilterFieldComponent {
         super(parentInjector, informAboutInvalidData);
     }
     getFilterContentComponent() {
-        if (this.dataField.component?.name === Dashboard.FILTER_TAB_VIEW_COMPONENT_ID) {
-            return FilterFieldTabViewContentComponent;
-        }
         return FilterFieldContentComponent;
     }
 }
-FilterFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterFieldComponent, deps: [{ token: i0.Injector }, { token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-FilterFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FilterFieldComponent, selector: "nc-filter-field", usesInheritance: true, ngImport: i0, template: "<nc-data-field-template *ngIf=\"!dataField.behavior.hidden\"\n                        [dataField]=\"dataField\"\n                        [dataFieldTemplate]=\"filterFieldTemplate\"\n                        [offset]=\"taskOffset\">\n</nc-data-field-template>\n\n<ng-template #filterFieldTemplate let-showLargeLayout=\"showLargeLayout\">\n    <!--  TODO: title based on large layout  -->\n    <ng-template [ngIf]=\"initialized\">\n        <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\n    </ng-template>\n    <!--  TODO: description?  -->\n</ng-template>\n", styles: [""], components: [{ type: i1.DataFieldTemplateComponent, selector: "nc-data-field-template" }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterFieldComponent, decorators: [{
+FilterFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterFieldComponent, deps: [{ token: i0.Injector }, { token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+FilterFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FilterFieldComponent, selector: "nc-filter-field", usesInheritance: true, ngImport: i0, template: "<nc-data-field-template *ngIf=\"!dataField.behavior.hidden\"\n                        [dataField]=\"dataField\"\n                        [dataFieldTemplate]=\"filterFieldTemplate\"\n                        [offset]=\"taskOffset\">\n</nc-data-field-template>\n\n<ng-template #filterFieldTemplate let-showLargeLayout=\"showLargeLayout\">\n    <!--  TODO: title based on large layout  -->\n    <ng-template [ngIf]=\"initialized\">\n        <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\n    </ng-template>\n    <!--  TODO: description?  -->\n</ng-template>\n", styles: [""], components: [{ type: i1.DataFieldTemplateComponent, selector: "nc-data-field-template" }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-filter-field', template: "<nc-data-field-template *ngIf=\"!dataField.behavior.hidden\"\n                        [dataField]=\"dataField\"\n                        [dataFieldTemplate]=\"filterFieldTemplate\"\n                        [offset]=\"taskOffset\">\n</nc-data-field-template>\n\n<ng-template #filterFieldTemplate let-showLargeLayout=\"showLargeLayout\">\n    <!--  TODO: title based on large layout  -->\n    <ng-template [ngIf]=\"initialized\">\n        <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\n    </ng-template>\n    <!--  TODO: description?  -->\n</ng-template>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: undefined, decorators: [{
@@ -28,4 +24,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     type: Inject,
                     args: [NAE_INFORM_ABOUT_INVALID_DATA]
                 }] }]; } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmlsdGVyLWZpZWxkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25ldGdyaWYtY29tcG9uZW50cy9zcmMvbGliL2RhdGEtZmllbGRzL2ZpbHRlci1maWVsZC9maWx0ZXItZmllbGQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmV0Z3JpZi1jb21wb25lbnRzL3NyYy9saWIvZGF0YS1maWVsZHMvZmlsdGVyLWZpZWxkL2ZpbHRlci1maWVsZC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFFLE1BQU0sRUFBWSxRQUFRLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDcEUsT0FBTyxFQUNILDRCQUE0QixFQUNTLFNBQVMsRUFDOUMsNkJBQTZCLEVBQ2hDLE1BQU0sMEJBQTBCLENBQUM7QUFFbEMsT0FBTyxFQUFDLDJCQUEyQixFQUFDLE1BQU0sdURBQXVELENBQUM7QUFDbEcsT0FBTyxFQUFFLGtDQUFrQyxFQUFFLE1BQU0saUVBQWlFLENBQUM7Ozs7O0FBT3JILE1BQU0sT0FBTyxvQkFBcUIsU0FBUSw0QkFBNEI7SUFFbEUsWUFBWSxjQUF3QixFQUMyQixzQkFBc0M7UUFDakcsS0FBSyxDQUFDLGNBQWMsRUFBRSxzQkFBc0IsQ0FBQyxDQUFDO0lBQ2xELENBQUM7SUFFUyx5QkFBeUI7UUFDL0IsSUFBSSxJQUFJLENBQUMsU0FBUyxDQUFDLFNBQVMsRUFBRSxJQUFJLEtBQUssU0FBUyxDQUFDLDRCQUE0QixFQUFFO1lBQzNFLE9BQU8sa0NBQWtDLENBQUM7U0FDN0M7UUFDRCxPQUFPLDJCQUEyQixDQUFDO0lBQ3ZDLENBQUM7O2tIQVpRLG9CQUFvQiwwQ0FHRyw2QkFBNkI7c0dBSHBELG9CQUFvQiw4RUNmakMsd2pCQWFBOzRGREVhLG9CQUFvQjtrQkFMaEMsU0FBUzsrQkFDSSxpQkFBaUI7OzBCQU9kLFFBQVE7OzBCQUFJLE1BQU07MkJBQUMsNkJBQTZCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnQsIEluamVjdCwgSW5qZWN0b3IsIE9wdGlvbmFsfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7XG4gICAgQWJzdHJhY3RGaWx0ZXJGaWVsZENvbXBvbmVudCxcbiAgICBBYnN0cmFjdEZpbHRlckZpZWxkQ29udGVudENvbXBvbmVudCwgRGFzaGJvYXJkLFxuICAgIE5BRV9JTkZPUk1fQUJPVVRfSU5WQUxJRF9EQVRBXG59IGZyb20gJ0BuZXRncmlmL2NvbXBvbmVudHMtY29yZSc7XG5pbXBvcnQge0NvbXBvbmVudFR5cGV9IGZyb20gJ0Bhbmd1bGFyL2Nkay9wb3J0YWwnO1xuaW1wb3J0IHtGaWx0ZXJGaWVsZENvbnRlbnRDb21wb25lbnR9IGZyb20gJy4vZmlsdGVyLWZpZWxkLWNvbnRlbnQvZmlsdGVyLWZpZWxkLWNvbnRlbnQuY29tcG9uZW50JztcbmltcG9ydCB7IEZpbHRlckZpZWxkVGFiVmlld0NvbnRlbnRDb21wb25lbnQgfSBmcm9tICcuL3RhYi12aWV3LWZpbHRlci1maWVsZC9maWx0ZXItZmllbGQtdGFiLXZpZXctY29udGVudC5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ25jLWZpbHRlci1maWVsZCcsXG4gICAgdGVtcGxhdGVVcmw6ICcuL2ZpbHRlci1maWVsZC5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vZmlsdGVyLWZpZWxkLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgRmlsdGVyRmllbGRDb21wb25lbnQgZXh0ZW5kcyBBYnN0cmFjdEZpbHRlckZpZWxkQ29tcG9uZW50IHtcblxuICAgIGNvbnN0cnVjdG9yKHBhcmVudEluamVjdG9yOiBJbmplY3RvcixcbiAgICAgICAgICAgICAgICBAT3B0aW9uYWwoKSBASW5qZWN0KE5BRV9JTkZPUk1fQUJPVVRfSU5WQUxJRF9EQVRBKSBpbmZvcm1BYm91dEludmFsaWREYXRhOiBib29sZWFuIHwgbnVsbCkge1xuICAgICAgICBzdXBlcihwYXJlbnRJbmplY3RvciwgaW5mb3JtQWJvdXRJbnZhbGlkRGF0YSk7XG4gICAgfVxuXG4gICAgcHJvdGVjdGVkIGdldEZpbHRlckNvbnRlbnRDb21wb25lbnQoKTogQ29tcG9uZW50VHlwZTxBYnN0cmFjdEZpbHRlckZpZWxkQ29udGVudENvbXBvbmVudD4ge1xuICAgICAgICBpZiAodGhpcy5kYXRhRmllbGQuY29tcG9uZW50Py5uYW1lID09PSBEYXNoYm9hcmQuRklMVEVSX1RBQl9WSUVXX0NPTVBPTkVOVF9JRCkge1xuICAgICAgICAgICAgcmV0dXJuIEZpbHRlckZpZWxkVGFiVmlld0NvbnRlbnRDb21wb25lbnQ7XG4gICAgICAgIH1cbiAgICAgICAgcmV0dXJuIEZpbHRlckZpZWxkQ29udGVudENvbXBvbmVudDtcbiAgICB9XG59XG4iLCI8bmMtZGF0YS1maWVsZC10ZW1wbGF0ZSAqbmdJZj1cIiFkYXRhRmllbGQuYmVoYXZpb3IuaGlkZGVuXCJcbiAgICAgICAgICAgICAgICAgICAgICAgIFtkYXRhRmllbGRdPVwiZGF0YUZpZWxkXCJcbiAgICAgICAgICAgICAgICAgICAgICAgIFtkYXRhRmllbGRUZW1wbGF0ZV09XCJmaWx0ZXJGaWVsZFRlbXBsYXRlXCJcbiAgICAgICAgICAgICAgICAgICAgICAgIFtvZmZzZXRdPVwidGFza09mZnNldFwiPlxuPC9uYy1kYXRhLWZpZWxkLXRlbXBsYXRlPlxuXG48bmctdGVtcGxhdGUgI2ZpbHRlckZpZWxkVGVtcGxhdGUgbGV0LXNob3dMYXJnZUxheW91dD1cInNob3dMYXJnZUxheW91dFwiPlxuICAgIDwhLS0gIFRPRE86IHRpdGxlIGJhc2VkIG9uIGxhcmdlIGxheW91dCAgLS0+XG4gICAgPG5nLXRlbXBsYXRlIFtuZ0lmXT1cImluaXRpYWxpemVkXCI+XG4gICAgICAgIDxuZy10ZW1wbGF0ZSBbY2RrUG9ydGFsT3V0bGV0XT1cInBvcnRhbFwiPjwvbmctdGVtcGxhdGU+XG4gICAgPC9uZy10ZW1wbGF0ZT5cbiAgICA8IS0tICBUT0RPOiBkZXNjcmlwdGlvbj8gIC0tPlxuPC9uZy10ZW1wbGF0ZT5cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmlsdGVyLWZpZWxkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25ldGdyaWYtY29tcG9uZW50cy9zcmMvbGliL2RhdGEtZmllbGRzL2ZpbHRlci1maWVsZC9maWx0ZXItZmllbGQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmV0Z3JpZi1jb21wb25lbnRzL3NyYy9saWIvZGF0YS1maWVsZHMvZmlsdGVyLWZpZWxkL2ZpbHRlci1maWVsZC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFFLE1BQU0sRUFBWSxRQUFRLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDcEUsT0FBTyxFQUNILDRCQUE0QixFQUU1Qiw2QkFBNkIsRUFDaEMsTUFBTSwwQkFBMEIsQ0FBQztBQUVsQyxPQUFPLEVBQUMsMkJBQTJCLEVBQUMsTUFBTSx1REFBdUQsQ0FBQzs7Ozs7QUFPbEcsTUFBTSxPQUFPLG9CQUFxQixTQUFRLDRCQUE0QjtJQUVsRSxZQUFZLGNBQXdCLEVBQzJCLHNCQUFzQztRQUNqRyxLQUFLLENBQUMsY0FBYyxFQUFFLHNCQUFzQixDQUFDLENBQUM7SUFDbEQsQ0FBQztJQUVTLHlCQUF5QjtRQUMvQixPQUFPLDJCQUEyQixDQUFDO0lBQ3ZDLENBQUM7O2tIQVRRLG9CQUFvQiwwQ0FHRyw2QkFBNkI7c0dBSHBELG9CQUFvQiw4RUNkakMsd2pCQWFBOzRGRENhLG9CQUFvQjtrQkFMaEMsU0FBUzsrQkFDSSxpQkFBaUI7OzBCQU9kLFFBQVE7OzBCQUFJLE1BQU07MkJBQUMsNkJBQTZCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnQsIEluamVjdCwgSW5qZWN0b3IsIE9wdGlvbmFsfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7XG4gICAgQWJzdHJhY3RGaWx0ZXJGaWVsZENvbXBvbmVudCxcbiAgICBBYnN0cmFjdEZpbHRlckZpZWxkQ29udGVudENvbXBvbmVudCxcbiAgICBOQUVfSU5GT1JNX0FCT1VUX0lOVkFMSURfREFUQVxufSBmcm9tICdAbmV0Z3JpZi9jb21wb25lbnRzLWNvcmUnO1xuaW1wb3J0IHtDb21wb25lbnRUeXBlfSBmcm9tICdAYW5ndWxhci9jZGsvcG9ydGFsJztcbmltcG9ydCB7RmlsdGVyRmllbGRDb250ZW50Q29tcG9uZW50fSBmcm9tICcuL2ZpbHRlci1maWVsZC1jb250ZW50L2ZpbHRlci1maWVsZC1jb250ZW50LmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnbmMtZmlsdGVyLWZpZWxkJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vZmlsdGVyLWZpZWxkLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9maWx0ZXItZmllbGQuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBGaWx0ZXJGaWVsZENvbXBvbmVudCBleHRlbmRzIEFic3RyYWN0RmlsdGVyRmllbGRDb21wb25lbnQge1xuXG4gICAgY29uc3RydWN0b3IocGFyZW50SW5qZWN0b3I6IEluamVjdG9yLFxuICAgICAgICAgICAgICAgIEBPcHRpb25hbCgpIEBJbmplY3QoTkFFX0lORk9STV9BQk9VVF9JTlZBTElEX0RBVEEpIGluZm9ybUFib3V0SW52YWxpZERhdGE6IGJvb2xlYW4gfCBudWxsKSB7XG4gICAgICAgIHN1cGVyKHBhcmVudEluamVjdG9yLCBpbmZvcm1BYm91dEludmFsaWREYXRhKTtcbiAgICB9XG5cbiAgICBwcm90ZWN0ZWQgZ2V0RmlsdGVyQ29udGVudENvbXBvbmVudCgpOiBDb21wb25lbnRUeXBlPEFic3RyYWN0RmlsdGVyRmllbGRDb250ZW50Q29tcG9uZW50PiB7XG4gICAgICAgIHJldHVybiBGaWx0ZXJGaWVsZENvbnRlbnRDb21wb25lbnQ7XG4gICAgfVxufVxuIiwiPG5jLWRhdGEtZmllbGQtdGVtcGxhdGUgKm5nSWY9XCIhZGF0YUZpZWxkLmJlaGF2aW9yLmhpZGRlblwiXG4gICAgICAgICAgICAgICAgICAgICAgICBbZGF0YUZpZWxkXT1cImRhdGFGaWVsZFwiXG4gICAgICAgICAgICAgICAgICAgICAgICBbZGF0YUZpZWxkVGVtcGxhdGVdPVwiZmlsdGVyRmllbGRUZW1wbGF0ZVwiXG4gICAgICAgICAgICAgICAgICAgICAgICBbb2Zmc2V0XT1cInRhc2tPZmZzZXRcIj5cbjwvbmMtZGF0YS1maWVsZC10ZW1wbGF0ZT5cblxuPG5nLXRlbXBsYXRlICNmaWx0ZXJGaWVsZFRlbXBsYXRlIGxldC1zaG93TGFyZ2VMYXlvdXQ9XCJzaG93TGFyZ2VMYXlvdXRcIj5cbiAgICA8IS0tICBUT0RPOiB0aXRsZSBiYXNlZCBvbiBsYXJnZSBsYXlvdXQgIC0tPlxuICAgIDxuZy10ZW1wbGF0ZSBbbmdJZl09XCJpbml0aWFsaXplZFwiPlxuICAgICAgICA8bmctdGVtcGxhdGUgW2Nka1BvcnRhbE91dGxldF09XCJwb3J0YWxcIj48L25nLXRlbXBsYXRlPlxuICAgIDwvbmctdGVtcGxhdGU+XG4gICAgPCEtLSAgVE9ETzogZGVzY3JpcHRpb24/ICAtLT5cbjwvbmctdGVtcGxhdGU+XG4iXX0=

package/esm2020/lib/data-fields/i18n-field/i18n-divider-field/i18n-divider-field.component.mjs

@@ -9,9 +9,9 @@ export class I18nDividerFieldComponent extends AbstractI18nDividerFieldComponent
         super();
     }
 }
-I18nDividerFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: I18nDividerFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-I18nDividerFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: I18nDividerFieldComponent, selector: "nc-i18n-divider-field", usesInheritance: true, ngImport: i0, template: "<div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\">\n    <div fxFlex=\"20\" class=\"divider-line\"\n         [ngClass]=\"{'divider-line-lgbt': isDividerLGBTQ(), 'primary-background-color': !dividerPropertyEnabled('dividerColor')}\"\n         [ngStyle]=\"dividerPropertyEnabled('dividerColor') && {'background': getDividerColor()}\"></div>\n    <span *ngIf='!!dividerI18nField.value' [ngClass]=\"{'margin-default': dividerI18nField.value?.defaultValue !== ''}\"\n          [ngStyle]=\"dividerPropertyEnabled('fontSize') && {'font-size': getDividerFontSize()}\">\n        {{dividerI18nField.value?.defaultValue ?? ''}}\n    </span>\n    <div fxFlex class=\"divider-line\"\n         [ngClass]=\"{'divider-line-lgbt': isDividerLGBTQ(), 'primary-background-color': !dividerPropertyEnabled('dividerColor')}\"\n         [ngStyle]=\"dividerPropertyEnabled('dividerColor') && {'background': getDividerColor()}\"></div>\n</div>\n\n", styles: [".divider-line{height:1px}.margin-default{margin-right:8px;margin-left:8px}.divider-line-lgbt{height:2px;background:linear-gradient(to right,#B827FC 0%,#2C90FC 20%,#B8FD33 40%,#FEC837 60%,#FD1892 80%,#B827FC 100%) 0% 0/150% 100%;animation:move-divider-line-lgbt 10s linear infinite;-webkit-animation:move-divider-line-lgbt 10s linear infinite}@keyframes move-divider-line-lgbt{to{background-position:-1500% 0%}}\n"], directives: [{ type: i1.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: i1.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: i1.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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.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"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: I18nDividerFieldComponent, decorators: [{
+I18nDividerFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: I18nDividerFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+I18nDividerFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: I18nDividerFieldComponent, selector: "nc-i18n-divider-field", usesInheritance: true, ngImport: i0, template: "<div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\">\n    <div fxFlex=\"20\" class=\"divider-line\"\n         [ngClass]=\"{'divider-line-lgbt': isDividerLGBTQ(), 'primary-background-color': !dividerPropertyEnabled('dividerColor')}\"\n         [ngStyle]=\"dividerPropertyEnabled('dividerColor') && {'background': getDividerColor()}\"></div>\n    <span *ngIf='!!dividerI18nField.value' [ngClass]=\"{'margin-default': dividerI18nField.value?.defaultValue !== ''}\"\n          [ngStyle]=\"dividerPropertyEnabled('fontSize') && {'font-size': getDividerFontSize()}\">\n        {{dividerI18nField.value?.defaultValue ?? ''}}\n    </span>\n    <div fxFlex class=\"divider-line\"\n         [ngClass]=\"{'divider-line-lgbt': isDividerLGBTQ(), 'primary-background-color': !dividerPropertyEnabled('dividerColor')}\"\n         [ngStyle]=\"dividerPropertyEnabled('dividerColor') && {'background': getDividerColor()}\"></div>\n</div>\n\n", styles: [".divider-line{height:1px}.margin-default{margin-right:8px;margin-left:8px}.divider-line-lgbt{height:2px;background:linear-gradient(to right,#B827FC 0%,#2C90FC 20%,#B8FD33 40%,#FEC837 60%,#FD1892 80%,#B827FC 100%) 0% 0/150% 100%;animation:move-divider-line-lgbt 10s linear infinite;-webkit-animation:move-divider-line-lgbt 10s linear infinite}@keyframes move-divider-line-lgbt{to{background-position:-1500% 0%}}\n"], directives: [{ type: i1.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: i1.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: i1.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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.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"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: I18nDividerFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-i18n-divider-field', template: "<div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\">\n    <div fxFlex=\"20\" class=\"divider-line\"\n         [ngClass]=\"{'divider-line-lgbt': isDividerLGBTQ(), 'primary-background-color': !dividerPropertyEnabled('dividerColor')}\"\n         [ngStyle]=\"dividerPropertyEnabled('dividerColor') && {'background': getDividerColor()}\"></div>\n    <span *ngIf='!!dividerI18nField.value' [ngClass]=\"{'margin-default': dividerI18nField.value?.defaultValue !== ''}\"\n          [ngStyle]=\"dividerPropertyEnabled('fontSize') && {'font-size': getDividerFontSize()}\">\n        {{dividerI18nField.value?.defaultValue ?? ''}}\n    </span>\n    <div fxFlex class=\"divider-line\"\n         [ngClass]=\"{'divider-line-lgbt': isDividerLGBTQ(), 'primary-background-color': !dividerPropertyEnabled('dividerColor')}\"\n         [ngStyle]=\"dividerPropertyEnabled('dividerColor') && {'background': getDividerColor()}\"></div>\n</div>\n\n", styles: [".divider-line{height:1px}.margin-default{margin-right:8px;margin-left:8px}.divider-line-lgbt{height:2px;background:linear-gradient(to right,#B827FC 0%,#2C90FC 20%,#B8FD33 40%,#FEC837 60%,#FD1892 80%,#B827FC 100%) 0% 0/150% 100%;animation:move-divider-line-lgbt 10s linear infinite;-webkit-animation:move-divider-line-lgbt 10s linear infinite}@keyframes move-divider-line-lgbt{to{background-position:-1500% 0%}}\n"] }]
         }], ctorParameters: function () { return []; } });

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

@@ -10,9 +10,9 @@ export class I18nFieldComponent extends AbstractI18nFieldComponent {
         super(informAboutInvalidData);
     }
 }
-I18nFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: I18nFieldComponent, deps: [{ token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-I18nFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: I18nFieldComponent, selector: "nc-i18n-field", usesInheritance: true, ngImport: i0, template: "<nc-data-field-template *ngIf=\"!dataField.behavior.hidden\"\n                        [dataField]=\"dataField\"\n                        [dataFieldTemplate]=\"i18nFieldTemplate\"\n                        [offset]=\"taskOffset\">\n</nc-data-field-template>\n\n<ng-template #i18nFieldTemplate let-showLargeLayout=\"showLargeLayout\">\n    <div [ngSwitch]=\"dataField.getComponentType()\">\n        <nc-i18n-divider-field *ngSwitchCase=\"'divider'\" [dividerI18nField]=\"dataField\" [formControlRef]=\"formControl\"\n                                [showLargeLayout]=\"showLargeLayout\"></nc-i18n-divider-field>\n        <nc-i18n-text-field *ngSwitchDefault [textI18nField]=\"dataField\" [formControlRef]=\"formControl\"\n                                [showLargeLayout]=\"showLargeLayout\"></nc-i18n-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.I18nDividerFieldComponent, selector: "nc-i18n-divider-field" }, { type: i3.I18nTextFieldComponent, selector: "nc-i18n-text-field" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: I18nFieldComponent, decorators: [{
+I18nFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: I18nFieldComponent, deps: [{ token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+I18nFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: I18nFieldComponent, selector: "nc-i18n-field", usesInheritance: true, ngImport: i0, template: "<nc-data-field-template *ngIf=\"!dataField.behavior.hidden\"\n                        [dataField]=\"dataField\"\n                        [dataFieldTemplate]=\"i18nFieldTemplate\"\n                        [offset]=\"taskOffset\">\n</nc-data-field-template>\n\n<ng-template #i18nFieldTemplate let-showLargeLayout=\"showLargeLayout\">\n    <div [ngSwitch]=\"dataField.getComponentType()\">\n        <nc-i18n-divider-field *ngSwitchCase=\"'divider'\" [dividerI18nField]=\"dataField\" [formControlRef]=\"formControl\"\n                                [showLargeLayout]=\"showLargeLayout\"></nc-i18n-divider-field>\n        <nc-i18n-text-field *ngSwitchDefault [textI18nField]=\"dataField\" [formControlRef]=\"formControl\"\n                                [showLargeLayout]=\"showLargeLayout\"></nc-i18n-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.I18nDividerFieldComponent, selector: "nc-i18n-divider-field" }, { type: i3.I18nTextFieldComponent, selector: "nc-i18n-text-field" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: I18nFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-i18n-field', template: "<nc-data-field-template *ngIf=\"!dataField.behavior.hidden\"\n                        [dataField]=\"dataField\"\n                        [dataFieldTemplate]=\"i18nFieldTemplate\"\n                        [offset]=\"taskOffset\">\n</nc-data-field-template>\n\n<ng-template #i18nFieldTemplate let-showLargeLayout=\"showLargeLayout\">\n    <div [ngSwitch]=\"dataField.getComponentType()\">\n        <nc-i18n-divider-field *ngSwitchCase=\"'divider'\" [dividerI18nField]=\"dataField\" [formControlRef]=\"formControl\"\n                                [showLargeLayout]=\"showLargeLayout\"></nc-i18n-divider-field>\n        <nc-i18n-text-field *ngSwitchDefault [textI18nField]=\"dataField\" [formControlRef]=\"formControl\"\n                                [showLargeLayout]=\"showLargeLayout\"></nc-i18n-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/i18n-field/i18n-text-field/i18n-text-field.component.mjs

@@ -22,8 +22,8 @@ export class I18nTextFieldComponent extends AbstractI18nTextFieldComponent {
         super(languageIconsService, translateService, domSanitizer);
     }
 }
-I18nTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: I18nTextFieldComponent, deps: [{ token: i1.LanguageIconsService }, { token: i2.TranslateService }, { token: i3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-I18nTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: I18nTextFieldComponent, selector: "nc-i18n-text-field", usesInheritance: true, ngImport: i0, template: "<ng-template [ngIf]=\"formControlRef.disabled\">\n    <ng-template [ngIf]=\"!isPlainText()\">\n        <mat-form-field [appearance]=\"textI18nField.materialAppearance\" class=\"full-width\" color=\"primary\">\n            <mat-label *ngIf=\"!showLargeLayout.value\">{{textI18nField.title}}</mat-label>\n            <input matInput\n                   [disabled]=\"true\"\n                   [ngModel]=\"currentValue[selectedLanguage]\"\n                   [placeholder]=\"textI18nField.placeholder ? textI18nField.placeholder : ''\"\n                   [required]=\"textI18nField.behavior.required\">\n            <mat-hint>{{textI18nField.description}}</mat-hint>\n        </mat-form-field>\n    </ng-template>\n    <ng-template [ngIf]=\"isPlainText()\">\n        <div class=\"full-width\"\n             [ngStyle]=\"textPropertyEnabled('fontSize') && {'font-size': getTextFontSize()}\">\n            <span [ngStyle]=\"textPropertyEnabled('textColor') && {'color': getTextColor()}\">\n                {{currentValue[selectedLanguage]}}\n            </span>\n        </div>\n    </ng-template>\n</ng-template>\n<ng-template [ngIf]=\"!formControlRef.disabled\">\n    <div class=\"full-width\">\n        <div #i18nLabel class=\"i18n-label\" [ngClass]=\"{'invalid-form-label': textI18nField.isInvalid(formControlRef)}\">\n            {{textI18nField.title}}\n            <nc-required-label *ngIf=\"textI18nField.behavior.required\" [isIn]=\"!textI18nField.disabled\"></nc-required-label>\n        </div>\n        <div class=\"form-input-interfield button-icon-input full-width\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\n             [ngClass]=\"{'invalid-form-input': textI18nField.isInvalid(formControlRef), 'form-input-disabled': formControlRef.disabled}\"\n             [ngStyle]=\"{\n                    '-webkit-clip-path': getCutProperty(i18nLabel),\n                    'clip-path': getCutProperty(i18nLabel)\n            }\">\n            <button mat-icon-button color=\"accent\" [matTooltip]=\"'dataField.i18n.languageSelect' | translate\"\n                    class=\"language-selector-button\" (click)=\"languageDropdown.open()\">\n                <div class=\"language-svg-wrapper\"\n                     [innerHTML]=\"getLanguageIcons()[this.selectedLanguage].svgIcon\"></div>\n            </button>\n            <mat-select #languageDropdown class=\"language-select\">\n                <mat-option *ngFor=\"let languageKey of languageKeys\"\n                            [value]=\"languageKey\" (click)=\"selectLanguage(languageKey)\">\n                    <div fxLayout=\"row\" fxLayoutAlign=\" center\">\n                        <div [innerHTML]=\"getLanguageIcons()[languageKey].svgIcon\" class=\"language-option-icon\"></div>\n                        <span class=\"language-option-value\">{{getLanguageIcons()[languageKey].languageName}}</span>\n                    </div>\n                </mat-option>\n            </mat-select>\n            <input class=\"selected-language-value\"\n                   type=\"text\"\n                   [placeholder]=\"textI18nField.placeholder ? textI18nField.placeholder : ''\"\n                   [required]=\"textI18nField.behavior.required\"\n                   [(ngModel)]=\"currentValue[selectedLanguage]\"\n                   (blur)=\"setSelectedValue()\">\n            <button mat-icon-button (click)=\"toggleFilled()\"\n                    [matTooltip]=\"(filledShown ? 'dataField.i18n.hideTranslations' : 'dataField.i18n.showTranslations') | translate\">\n                <mat-icon color=\"warn\">{{filledShown ? 'arrow_drop_up' : 'arrow_drop_down'}}</mat-icon>\n            </button>\n        </div>\n\n        <div fxLayout=\"column\" class=\"filled-languages-wrapper\"\n             [@languageWrapper]=\"filledShown\"\n             (@languageWrapper.start)=\"$event.element.style.display = 'block'\"\n             (@languageWrapper.done)=\"$event.element.style.display = ($event.toState ? 'block' : 'none')\">\n            <div *ngFor=\"let filledKey of filledKeys\" fxLayout=\"row\" fxLayoutAlign=\" center\"\n                 class=\"filled-language-row\">\n                <div class=\"filled-language-icon\" [innerHTML]=\"getLanguageIcons()[filledKey].svgIcon\"></div>\n                <span class=\"filled-language-value\">{{currentValue[filledKey]}}</span>\n                <button class=\"filled-language-button\" *ngIf=\"!isDefaultValue(filledKey)\" mat-icon-button\n                        (click)=\"removeTranslation(filledKey)\"\n                        [matTooltip]=\"'dataField.i18n.deleteTranslation' | translate\">\n                    <mat-icon color=\"warn\">close</mat-icon>\n                </button>\n            </div>\n        </div>\n        <mat-hint class=\"i18n-hint-error\"\n                  *ngIf=\"!textI18nField.isInvalid(formControlRef)\">{{textI18nField.description}}</mat-hint>\n        <mat-error class=\"i18n-hint-error\"\n                   *ngIf=\"textI18nField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n    </div>\n</ng-template>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}.selected-language-value{outline:none;padding:9px 0;width:calc(100% - 56px);font-size:14px;border:0;margin-left:8px;background:transparent}.form-input-interfield{background:transparent;color:#333;outline:none;border:1px solid rgba(0,0,0,.12);text-align:left;font-size:14px;line-height:15.75px;border-radius:6px;min-width:5px;box-sizing:border-box;height:48px}.form-input-interfield:hover{border:solid 2px black}.button-icon-input{padding:2px}.button-icon-input:hover{padding:1px!important}.i18n-hint-error{padding:0 1em;font-size:75%}.language-svg-wrapper{height:20px;line-height:normal}.language-selector-button{width:auto;margin-left:8px;margin-right:4px}.language-selector-wrapper{margin:0 8px}.language-svg-icon{border:solid 1px black}.filled-language-row{min-height:28px;padding:4px 0}.filled-language-row:not(:last-child){border-bottom:1px solid rgba(0,0,0,.1)}.filled-languages-wrapper{border-radius:0 0 6px 6px;border-left:1px solid rgba(0,0,0,.12);border-right:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12);margin-top:-5px;padding-top:5px;transform-origin:top}.filled-language-icon{margin:0 10px;height:20px}.filled-language-value{margin-left:20px}.filled-language-button{margin-left:auto;height:24px;width:24px;line-height:normal;margin-right:10px}.language-select{width:18px!important}.language-option-icon{margin-left:0}.language-option-value{margin-left:16px}.i18n-label{transform:translate(.4em,-.4em) scale(.75);transform-origin:left;color:#0009;background:transparent;width:-moz-fit-content;width:fit-content;padding:0 .5em;height:0}.form-input-disabled:hover{border-color:#0000001f!important;border-width:1px}\n"], components: [{ type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i5.RequiredLabelComponent, selector: "nc-required-label", inputs: ["isIn"] }, { type: i6.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: i7.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i8.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.MatLabel, selector: "mat-label" }, { type: i11.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: i12.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: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i12.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i12.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i13.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: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.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"] }, { type: i14.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: i14.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: i15.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i2.TranslatePipe }, animations: [
+I18nTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: I18nTextFieldComponent, deps: [{ token: i1.LanguageIconsService }, { token: i2.TranslateService }, { token: i3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+I18nTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: I18nTextFieldComponent, selector: "nc-i18n-text-field", usesInheritance: true, ngImport: i0, template: "<ng-template [ngIf]=\"formControlRef.disabled\">\n    <ng-template [ngIf]=\"!isPlainText()\">\n        <mat-form-field [appearance]=\"textI18nField.materialAppearance\" class=\"full-width\" color=\"primary\">\n            <mat-label *ngIf=\"!showLargeLayout.value\">{{textI18nField.title}}</mat-label>\n            <input matInput\n                   [disabled]=\"true\"\n                   [ngModel]=\"currentValue[selectedLanguage]\"\n                   [placeholder]=\"textI18nField.placeholder ? textI18nField.placeholder : ''\"\n                   [required]=\"textI18nField.behavior.required\">\n            <mat-hint>{{textI18nField.description}}</mat-hint>\n        </mat-form-field>\n    </ng-template>\n    <ng-template [ngIf]=\"isPlainText()\">\n        <div class=\"full-width\"\n             [ngStyle]=\"textPropertyEnabled('fontSize') && {'font-size': getTextFontSize()}\">\n            <span [ngStyle]=\"textPropertyEnabled('textColor') && {'color': getTextColor()}\">\n                {{currentValue[selectedLanguage]}}\n            </span>\n        </div>\n    </ng-template>\n</ng-template>\n<ng-template [ngIf]=\"!formControlRef.disabled\">\n    <div class=\"full-width\">\n        <div #i18nLabel class=\"i18n-label\" [ngClass]=\"{'invalid-form-label': textI18nField.isInvalid(formControlRef)}\">\n            {{textI18nField.title}}\n            <nc-required-label *ngIf=\"textI18nField.behavior.required\" [isIn]=\"!textI18nField.disabled\"></nc-required-label>\n        </div>\n        <div class=\"form-input-interfield button-icon-input full-width\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\n             [ngClass]=\"{'invalid-form-input': textI18nField.isInvalid(formControlRef), 'form-input-disabled': formControlRef.disabled}\"\n             [ngStyle]=\"{\n                    '-webkit-clip-path': getCutProperty(i18nLabel),\n                    'clip-path': getCutProperty(i18nLabel)\n            }\">\n            <button mat-icon-button color=\"accent\" [matTooltip]=\"'dataField.i18n.languageSelect' | translate\"\n                    class=\"language-selector-button\" (click)=\"languageDropdown.open()\">\n                <div class=\"language-svg-wrapper\"\n                     [innerHTML]=\"getLanguageIcons()[this.selectedLanguage].svgIcon\"></div>\n            </button>\n            <mat-select #languageDropdown class=\"language-select\">\n                <mat-option *ngFor=\"let languageKey of languageKeys\"\n                            [value]=\"languageKey\" (click)=\"selectLanguage(languageKey)\">\n                    <div fxLayout=\"row\" fxLayoutAlign=\" center\">\n                        <div [innerHTML]=\"getLanguageIcons()[languageKey].svgIcon\" class=\"language-option-icon\"></div>\n                        <span class=\"language-option-value\">{{getLanguageIcons()[languageKey].languageName}}</span>\n                    </div>\n                </mat-option>\n            </mat-select>\n            <input class=\"selected-language-value\"\n                   type=\"text\"\n                   [placeholder]=\"textI18nField.placeholder ? textI18nField.placeholder : ''\"\n                   [required]=\"textI18nField.behavior.required\"\n                   [(ngModel)]=\"currentValue[selectedLanguage]\"\n                   (blur)=\"setSelectedValue()\">\n            <button mat-icon-button (click)=\"toggleFilled()\"\n                    [matTooltip]=\"(filledShown ? 'dataField.i18n.hideTranslations' : 'dataField.i18n.showTranslations') | translate\">\n                <mat-icon color=\"warn\">{{filledShown ? 'arrow_drop_up' : 'arrow_drop_down'}}</mat-icon>\n            </button>\n        </div>\n\n        <div fxLayout=\"column\" class=\"filled-languages-wrapper\"\n             [@languageWrapper]=\"filledShown\"\n             (@languageWrapper.start)=\"$event.element.style.display = 'block'\"\n             (@languageWrapper.done)=\"$event.element.style.display = ($event.toState ? 'block' : 'none')\">\n            <div *ngFor=\"let filledKey of filledKeys\" fxLayout=\"row\" fxLayoutAlign=\" center\"\n                 class=\"filled-language-row\">\n                <div class=\"filled-language-icon\" [innerHTML]=\"getLanguageIcons()[filledKey].svgIcon\"></div>\n                <span class=\"filled-language-value\">{{currentValue[filledKey]}}</span>\n                <button class=\"filled-language-button\" *ngIf=\"!isDefaultValue(filledKey)\" mat-icon-button\n                        (click)=\"removeTranslation(filledKey)\"\n                        [matTooltip]=\"'dataField.i18n.deleteTranslation' | translate\">\n                    <mat-icon color=\"warn\">close</mat-icon>\n                </button>\n            </div>\n        </div>\n        <mat-hint class=\"i18n-hint-error\"\n                  *ngIf=\"!textI18nField.isInvalid(formControlRef)\">{{textI18nField.description}}</mat-hint>\n        <mat-error class=\"i18n-hint-error\"\n                   *ngIf=\"textI18nField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n    </div>\n</ng-template>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}.selected-language-value{outline:none;padding:9px 0;width:calc(100% - 56px);font-size:14px;border:0;margin-left:8px;background:transparent}.form-input-interfield{background:transparent;color:#333;outline:none;border:1px solid rgba(0,0,0,.12);text-align:left;font-size:14px;line-height:15.75px;border-radius:6px;min-width:5px;box-sizing:border-box;height:48px}.form-input-interfield:hover{border:solid 2px black}.button-icon-input{padding:2px}.button-icon-input:hover{padding:1px!important}.i18n-hint-error{padding:0 1em;font-size:75%}.language-svg-wrapper{height:20px;line-height:normal}.language-selector-button{width:auto;margin-left:8px;margin-right:4px}.language-selector-wrapper{margin:0 8px}.language-svg-icon{border:solid 1px black}.filled-language-row{min-height:28px;padding:4px 0}.filled-language-row:not(:last-child){border-bottom:1px solid rgba(0,0,0,.1)}.filled-languages-wrapper{border-radius:0 0 6px 6px;border-left:1px solid rgba(0,0,0,.12);border-right:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12);margin-top:-5px;padding-top:5px;transform-origin:top}.filled-language-icon{margin:0 10px;height:20px}.filled-language-value{margin-left:20px}.filled-language-button{margin-left:auto;height:24px;width:24px;line-height:normal;margin-right:10px}.language-select{width:18px!important}.language-option-icon{margin-left:0}.language-option-value{margin-left:16px}.i18n-label{transform:translate(.4em,-.4em) scale(.75);transform-origin:left;color:#0009;background:transparent;width:-moz-fit-content;width:fit-content;padding:0 .5em;height:0}.form-input-disabled:hover{border-color:#0000001f!important;border-width:1px}\n"], components: [{ type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i5.RequiredLabelComponent, selector: "nc-required-label", inputs: ["isIn"] }, { type: i6.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: i7.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i8.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.MatLabel, selector: "mat-label" }, { type: i11.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: i12.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: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i12.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i12.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i13.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: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.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"] }, { type: i14.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: i14.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: i15.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i2.TranslatePipe }, animations: [
         trigger('languageWrapper', [
             state('true', style({
                 transform: 'scaleY(1)'
@@ -39,7 +39,7 @@ I18nTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             ]),
         ])
     ], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: I18nTextFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: I18nTextFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-i18n-text-field', encapsulation: ViewEncapsulation.None, animations: [
                         trigger('languageWrapper', [

package/esm2020/lib/data-fields/multichoice-field/multichoice-autocomplete-field/multichoice-autocomplete-field.component.mjs

@@ -15,9 +15,9 @@ export class MultichoiceAutocompleteFieldComponent extends AbstractMultichoiceAu
         super();
     }
 }
-MultichoiceAutocompleteFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultichoiceAutocompleteFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MultichoiceAutocompleteFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MultichoiceAutocompleteFieldComponent, selector: "nc-multichoice-autocomplete-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"multichoiceField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{multichoiceField.title}}</mat-label>\n    <mat-chip-list #chipList aria-label=\"Autocomplete\" [formControl]=\"formControlRef\">\n        <mat-chip\n            *ngFor=\"let option of multichoiceField.value\" (removed)=\"remove(option)\">\n            {{getValueFromKey(option)}}\n            <button *ngIf=\"!formControlRef.disabled\" matChipRemove>\n                <mat-icon>cancel</mat-icon>\n            </button>\n        </mat-chip>\n        <input\n            aria-label=\"Autocomplete\"\n            matInput\n            #input\n            [placeholder]=\"multichoiceField.placeholder\"\n            [required]=\"multichoiceField.behavior.required\"\n            [matAutocomplete]=\"auto\"\n            [matChipInputFor]=\"chipList\"\n            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n            (keyup)=\"change()\">\n    </mat-chip-list>\n    <mat-autocomplete [displayWith]=\"renderSelection\" autoActiveFirstOption #auto=\"matAutocomplete\">\n        <mat-option [value]=\"null\">---</mat-option>\n        <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option.key\" (click)=\"add(option)\">\n            {{option.value}}\n        </mat-option>\n    </mat-autocomplete>\n    <mat-hint>{{multichoiceField.description}}</mat-hint>\n    <mat-error\n        *ngIf=\"multichoiceField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatLabel, selector: "mat-label" }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i2.MatChipRemove, selector: "[matChipRemove]" }, { 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: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i1.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "async": i6.AsyncPipe, "translate": i9.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultichoiceAutocompleteFieldComponent, decorators: [{
+MultichoiceAutocompleteFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultichoiceAutocompleteFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MultichoiceAutocompleteFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MultichoiceAutocompleteFieldComponent, selector: "nc-multichoice-autocomplete-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"multichoiceField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{multichoiceField.title}}</mat-label>\n    <mat-chip-list #chipList aria-label=\"Autocomplete\" [formControl]=\"formControlRef\">\n        <mat-chip\n            *ngFor=\"let option of multichoiceField.value\" (removed)=\"remove(option)\">\n            {{getValueFromKey(option)}}\n            <button *ngIf=\"!formControlRef.disabled\" matChipRemove>\n                <mat-icon>cancel</mat-icon>\n            </button>\n        </mat-chip>\n        <input\n            aria-label=\"Autocomplete\"\n            matInput\n            #input\n            [placeholder]=\"multichoiceField.placeholder\"\n            [required]=\"multichoiceField.behavior.required\"\n            [matAutocomplete]=\"auto\"\n            [matChipInputFor]=\"chipList\"\n            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n            (keyup)=\"change()\">\n    </mat-chip-list>\n    <mat-autocomplete [displayWith]=\"renderSelection\" autoActiveFirstOption #auto=\"matAutocomplete\">\n        <mat-option [value]=\"null\">---</mat-option>\n        <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option.key\" (click)=\"add(option)\">\n            {{option.value}}\n        </mat-option>\n    </mat-autocomplete>\n    <mat-hint>{{multichoiceField.description}}</mat-hint>\n    <mat-error\n        *ngIf=\"multichoiceField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatLabel, selector: "mat-label" }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i2.MatChipRemove, selector: "[matChipRemove]" }, { 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: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i1.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "async": i6.AsyncPipe, "translate": i9.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultichoiceAutocompleteFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-multichoice-autocomplete-field', template: "<mat-form-field [appearance]=\"multichoiceField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{multichoiceField.title}}</mat-label>\n    <mat-chip-list #chipList aria-label=\"Autocomplete\" [formControl]=\"formControlRef\">\n        <mat-chip\n            *ngFor=\"let option of multichoiceField.value\" (removed)=\"remove(option)\">\n            {{getValueFromKey(option)}}\n            <button *ngIf=\"!formControlRef.disabled\" matChipRemove>\n                <mat-icon>cancel</mat-icon>\n            </button>\n        </mat-chip>\n        <input\n            aria-label=\"Autocomplete\"\n            matInput\n            #input\n            [placeholder]=\"multichoiceField.placeholder\"\n            [required]=\"multichoiceField.behavior.required\"\n            [matAutocomplete]=\"auto\"\n            [matChipInputFor]=\"chipList\"\n            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n            (keyup)=\"change()\">\n    </mat-chip-list>\n    <mat-autocomplete [displayWith]=\"renderSelection\" autoActiveFirstOption #auto=\"matAutocomplete\">\n        <mat-option [value]=\"null\">---</mat-option>\n        <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option.key\" (click)=\"add(option)\">\n            {{option.value}}\n        </mat-option>\n    </mat-autocomplete>\n    <mat-hint>{{multichoiceField.description}}</mat-hint>\n    <mat-error\n        *ngIf=\"multichoiceField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"] }]
         }], ctorParameters: function () { return []; } });

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

@@ -11,9 +11,9 @@ export class MultichoiceFieldComponent extends AbstractMultichoiceFieldComponent
         super(informAboutInvalidData);
     }
 }
-MultichoiceFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultichoiceFieldComponent, deps: [{ token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MultichoiceFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MultichoiceFieldComponent, selector: "nc-multichoice-field", usesInheritance: true, ngImport: i0, template: "<nc-data-field-template *ngIf=\"!dataField.behavior.hidden\"\n                        [dataField]=\"dataField\"\n                        [dataFieldTemplate]=\"multiFieldTemplate\"\n                        [offset]=\"taskOffset\">\n</nc-data-field-template>\n\n<ng-template #multiFieldTemplate let-showLargeLayout=\"showLargeLayout\">\n    <div [ngSwitch]=\"dataField.getComponentType()\">\n        <nc-multichoice-autocomplete-field *ngSwitchCase=\"'autocomplete'\"\n                                           [showLargeLayout]=\"showLargeLayout\"\n                                           [multichoiceField]=\"dataField\"\n                                           [formControlRef]=\"formControl\">\n        </nc-multichoice-autocomplete-field>\n        <nc-multichoice-list-field *ngSwitchCase=\"'list'\"\n                                   [showLargeLayout]=\"showLargeLayout\"\n                                   [multichoiceField]=\"dataField\"\n                                   [formControlRef]=\"formControl\">\n        </nc-multichoice-list-field>\n        <nc-multichoice-select-field *ngSwitchDefault\n                                     [showLargeLayout]=\"showLargeLayout\"\n                                     [multichoiceField]=\"dataField\"\n                                     [formControlRef]=\"formControl\">\n        </nc-multichoice-select-field>\n    </div>\n</ng-template>\n", styles: [""], components: [{ type: i1.DataFieldTemplateComponent, selector: "nc-data-field-template" }, { type: i2.MultichoiceAutocompleteFieldComponent, selector: "nc-multichoice-autocomplete-field" }, { type: i3.MultichoiceListFieldComponent, selector: "nc-multichoice-list-field" }, { type: i4.MultichoiceSelectFieldComponent, selector: "nc-multichoice-select-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: MultichoiceFieldComponent, decorators: [{
+MultichoiceFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultichoiceFieldComponent, deps: [{ token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+MultichoiceFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MultichoiceFieldComponent, selector: "nc-multichoice-field", usesInheritance: true, ngImport: i0, template: "<nc-data-field-template *ngIf=\"!dataField.behavior.hidden\"\n                        [dataField]=\"dataField\"\n                        [dataFieldTemplate]=\"multiFieldTemplate\"\n                        [offset]=\"taskOffset\">\n</nc-data-field-template>\n\n<ng-template #multiFieldTemplate let-showLargeLayout=\"showLargeLayout\">\n    <div [ngSwitch]=\"dataField.getComponentType()\">\n        <nc-multichoice-autocomplete-field *ngSwitchCase=\"'autocomplete'\"\n                                           [showLargeLayout]=\"showLargeLayout\"\n                                           [multichoiceField]=\"dataField\"\n                                           [formControlRef]=\"formControl\">\n        </nc-multichoice-autocomplete-field>\n        <nc-multichoice-list-field *ngSwitchCase=\"'list'\"\n                                   [showLargeLayout]=\"showLargeLayout\"\n                                   [multichoiceField]=\"dataField\"\n                                   [formControlRef]=\"formControl\">\n        </nc-multichoice-list-field>\n        <nc-multichoice-select-field *ngSwitchDefault\n                                     [showLargeLayout]=\"showLargeLayout\"\n                                     [multichoiceField]=\"dataField\"\n                                     [formControlRef]=\"formControl\">\n        </nc-multichoice-select-field>\n    </div>\n</ng-template>\n", styles: [""], components: [{ type: i1.DataFieldTemplateComponent, selector: "nc-data-field-template" }, { type: i2.MultichoiceAutocompleteFieldComponent, selector: "nc-multichoice-autocomplete-field" }, { type: i3.MultichoiceListFieldComponent, selector: "nc-multichoice-list-field" }, { type: i4.MultichoiceSelectFieldComponent, selector: "nc-multichoice-select-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: MultichoiceFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-multichoice-field', template: "<nc-data-field-template *ngIf=\"!dataField.behavior.hidden\"\n                        [dataField]=\"dataField\"\n                        [dataFieldTemplate]=\"multiFieldTemplate\"\n                        [offset]=\"taskOffset\">\n</nc-data-field-template>\n\n<ng-template #multiFieldTemplate let-showLargeLayout=\"showLargeLayout\">\n    <div [ngSwitch]=\"dataField.getComponentType()\">\n        <nc-multichoice-autocomplete-field *ngSwitchCase=\"'autocomplete'\"\n                                           [showLargeLayout]=\"showLargeLayout\"\n                                           [multichoiceField]=\"dataField\"\n                                           [formControlRef]=\"formControl\">\n        </nc-multichoice-autocomplete-field>\n        <nc-multichoice-list-field *ngSwitchCase=\"'list'\"\n                                   [showLargeLayout]=\"showLargeLayout\"\n                                   [multichoiceField]=\"dataField\"\n                                   [formControlRef]=\"formControl\">\n        </nc-multichoice-list-field>\n        <nc-multichoice-select-field *ngSwitchDefault\n                                     [showLargeLayout]=\"showLargeLayout\"\n                                     [multichoiceField]=\"dataField\"\n                                     [formControlRef]=\"formControl\">\n        </nc-multichoice-select-field>\n    </div>\n</ng-template>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{

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

@@ -12,9 +12,9 @@ export class MultichoiceListFieldComponent extends AbstractMultichoiceListFieldC
         super();
     }
 }
-MultichoiceListFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultichoiceListFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MultichoiceListFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MultichoiceListFieldComponent, selector: "nc-multichoice-list-field", usesInheritance: true, ngImport: i0, template: "<mat-selection-list color=\"primary\"\n                    [formControl]=\"formControlRef\"\n                    [required]=\"multichoiceField.behavior.required\">\n    <mat-label class=\"netgrif-label\" *ngIf=\"!showLargeLayout.value\">{{multichoiceField.title}}\n        <nc-required-label *ngIf=\"multichoiceField.behavior.required\" [isIn]=\"true\"></nc-required-label>\n        <br></mat-label>\n    <mat-list-option checkboxPosition=\"before\" *ngFor=\"let option of multichoiceField.choices\" [value]=\"option.key\">\n        {{option.value}}\n    </mat-list-option>\n    <mat-hint *ngIf=\"multichoiceField.description !== undefined && multichoiceField.description !== '' && !multichoiceField.isInvalid(formControlRef)\">{{multichoiceField.description}}</mat-hint>\n    <mat-error *ngIf=\"multichoiceField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n</mat-selection-list>\n", styles: [""], components: [{ type: i1.MatSelectionList, selector: "mat-selection-list", inputs: ["disableRipple", "tabIndex", "color", "compareWith", "disabled", "multiple"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { type: i2.RequiredLabelComponent, selector: "nc-required-label", inputs: ["isIn"] }, { type: i1.MatListOption, selector: "mat-list-option", inputs: ["disableRipple", "checkboxPosition", "color", "value", "disabled", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }], directives: [{ type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.MatLabel, selector: "mat-label" }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i5.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i6.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultichoiceListFieldComponent, decorators: [{
+MultichoiceListFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultichoiceListFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MultichoiceListFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MultichoiceListFieldComponent, selector: "nc-multichoice-list-field", usesInheritance: true, ngImport: i0, template: "<mat-selection-list color=\"primary\"\n                    [formControl]=\"formControlRef\"\n                    [required]=\"multichoiceField.behavior.required\">\n    <mat-label class=\"netgrif-label\" *ngIf=\"!showLargeLayout.value\">{{multichoiceField.title}}\n        <nc-required-label *ngIf=\"multichoiceField.behavior.required\" [isIn]=\"true\"></nc-required-label>\n        <br></mat-label>\n    <mat-list-option checkboxPosition=\"before\" *ngFor=\"let option of multichoiceField.choices\" [value]=\"option.key\">\n        {{option.value}}\n    </mat-list-option>\n    <mat-hint *ngIf=\"multichoiceField.description !== undefined && multichoiceField.description !== '' && !multichoiceField.isInvalid(formControlRef)\">{{multichoiceField.description}}</mat-hint>\n    <mat-error *ngIf=\"multichoiceField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n</mat-selection-list>\n", styles: [""], components: [{ type: i1.MatSelectionList, selector: "mat-selection-list", inputs: ["disableRipple", "tabIndex", "color", "compareWith", "disabled", "multiple"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { type: i2.RequiredLabelComponent, selector: "nc-required-label", inputs: ["isIn"] }, { type: i1.MatListOption, selector: "mat-list-option", inputs: ["disableRipple", "checkboxPosition", "color", "value", "disabled", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }], directives: [{ type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.MatLabel, selector: "mat-label" }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i5.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i6.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultichoiceListFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-multichoice-list-field', template: "<mat-selection-list color=\"primary\"\n                    [formControl]=\"formControlRef\"\n                    [required]=\"multichoiceField.behavior.required\">\n    <mat-label class=\"netgrif-label\" *ngIf=\"!showLargeLayout.value\">{{multichoiceField.title}}\n        <nc-required-label *ngIf=\"multichoiceField.behavior.required\" [isIn]=\"true\"></nc-required-label>\n        <br></mat-label>\n    <mat-list-option checkboxPosition=\"before\" *ngFor=\"let option of multichoiceField.choices\" [value]=\"option.key\">\n        {{option.value}}\n    </mat-list-option>\n    <mat-hint *ngIf=\"multichoiceField.description !== undefined && multichoiceField.description !== '' && !multichoiceField.isInvalid(formControlRef)\">{{multichoiceField.description}}</mat-hint>\n    <mat-error *ngIf=\"multichoiceField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n</mat-selection-list>\n", styles: [""] }]
         }], ctorParameters: function () { return []; } });

package/esm2020/lib/data-fields/multichoice-field/multichoice-select-field/multichoice-select-field.component.mjs

@@ -9,9 +9,9 @@ import * as i5 from "@angular/forms";
 import * as i6 from "@ngx-translate/core";
 export class MultichoiceSelectFieldComponent extends AbstractMultichoiceSelectFieldComponent {
 }
-MultichoiceSelectFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultichoiceSelectFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MultichoiceSelectFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MultichoiceSelectFieldComponent, selector: "nc-multichoice-select-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"multichoiceField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{multichoiceField.title}}</mat-label>\n    <mat-select [placeholder]=\"multichoiceField.placeholder\"\n                [formControl]=\"formControlRef\"\n                [required]=\"multichoiceField.behavior.required\"\n                multiple>\n        <mat-option *ngFor=\"let option of multichoiceField.choices\" [value]=\"option.key\">\n            {{option.value}}\n        </mat-option>\n    </mat-select>\n    <mat-hint>{{multichoiceField.description}}</mat-hint>\n    <mat-error *ngIf=\"multichoiceField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatLabel, selector: "mat-label" }, { 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: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i1.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i6.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultichoiceSelectFieldComponent, decorators: [{
+MultichoiceSelectFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultichoiceSelectFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+MultichoiceSelectFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MultichoiceSelectFieldComponent, selector: "nc-multichoice-select-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"multichoiceField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{multichoiceField.title}}</mat-label>\n    <mat-select [placeholder]=\"multichoiceField.placeholder\"\n                [formControl]=\"formControlRef\"\n                [required]=\"multichoiceField.behavior.required\"\n                multiple>\n        <mat-option *ngFor=\"let option of multichoiceField.choices\" [value]=\"option.key\">\n            {{option.value}}\n        </mat-option>\n    </mat-select>\n    <mat-hint>{{multichoiceField.description}}</mat-hint>\n    <mat-error *ngIf=\"multichoiceField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatLabel, selector: "mat-label" }, { 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: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i1.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i6.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultichoiceSelectFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-multichoice-select-field', template: "<mat-form-field [appearance]=\"multichoiceField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{multichoiceField.title}}</mat-label>\n    <mat-select [placeholder]=\"multichoiceField.placeholder\"\n                [formControl]=\"formControlRef\"\n                [required]=\"multichoiceField.behavior.required\"\n                multiple>\n        <mat-option *ngFor=\"let option of multichoiceField.choices\" [value]=\"option.key\">\n            {{option.value}}\n        </mat-option>\n    </mat-select>\n    <mat-hint>{{multichoiceField.description}}</mat-hint>\n    <mat-error *ngIf=\"multichoiceField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"] }]
         }] });

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

@@ -20,9 +20,9 @@ export class NumberCurrencyFieldComponent extends AbstractCurrencyNumberFieldCom
         this.transformToNumber();
     }
 }
-NumberCurrencyFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NumberCurrencyFieldComponent, deps: [{ token: i1.CurrencyPipe }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-NumberCurrencyFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NumberCurrencyFieldComponent, selector: "nc-number-currency-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    <span matPrefix *ngIf=\"isNumberType()\">{{this.numberField.component.properties['code'] ?? ''}}</span>\n    <input matInput\n           [type]=\"fieldType\"\n           [value]=\"transformedValue\"\n           [formControl]=\"formControlRef\"\n           [placeholder]=\"numberField.placeholder\"\n           [required]=\"numberField.behavior.required\"\n           (focusout)=\"onFocusOut($event)\"\n           (focusin)=\"onFocusIn()\">\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: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.MatLabel, selector: "mat-label" }, { type: i3.MatPrefix, selector: "[matPrefix]" }, { 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.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: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i3.MatError, selector: "mat-error", inputs: ["id"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NumberCurrencyFieldComponent, decorators: [{
+NumberCurrencyFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumberCurrencyFieldComponent, deps: [{ token: i1.CurrencyPipe }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+NumberCurrencyFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: NumberCurrencyFieldComponent, selector: "nc-number-currency-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    <span matPrefix *ngIf=\"isNumberType()\">{{this.numberField.component.properties['code'] ?? ''}}</span>\n    <input matInput\n           [type]=\"fieldType\"\n           [value]=\"transformedValue\"\n           [formControl]=\"formControlRef\"\n           [placeholder]=\"numberField.placeholder\"\n           [required]=\"numberField.behavior.required\"\n           (focusout)=\"onFocusOut($event)\"\n           (focusin)=\"onFocusIn()\">\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: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.MatLabel, selector: "mat-label" }, { type: i3.MatPrefix, selector: "[matPrefix]" }, { 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.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: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i3.MatError, selector: "mat-error", inputs: ["id"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumberCurrencyFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-number-currency-field', template: "<mat-form-field [appearance]=\"numberField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{numberField.title}}</mat-label>\n    <span matPrefix *ngIf=\"isNumberType()\">{{this.numberField.component.properties['code'] ?? ''}}</span>\n    <input matInput\n           [type]=\"fieldType\"\n           [value]=\"transformedValue\"\n           [formControl]=\"formControlRef\"\n           [placeholder]=\"numberField.placeholder\"\n           [required]=\"numberField.behavior.required\"\n           (focusout)=\"onFocusOut($event)\"\n           (focusin)=\"onFocusIn()\">\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.CurrencyPipe }, { type: i2.TranslateService }]; } });

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/public-api.mjs

@@ -15,6 +15,5 @@ export * from './user-field/user-field.component';
 export * from './filter-field/filter-field.component';
 export * from './i18n-field/i18n-field.component';
 export * from './user-list-field/user-list-field.component';
-export * from './task-ref-field/task-ref-field.component';
 /* Class */
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25ldGdyaWYtY29tcG9uZW50cy9zcmMvbGliL2RhdGEtZmllbGRzL3B1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxzQkFBc0IsQ0FBQztBQUVyQyxnQkFBZ0I7QUFDaEIsY0FBYyx1Q0FBdUMsQ0FBQztBQUN0RCxjQUFjLHlDQUF5QyxDQUFDO0FBQ3hELGNBQWMscURBQXFELENBQUM7QUFDcEUsY0FBYyxtQ0FBbUMsQ0FBQztBQUNsRCxjQUFjLDZDQUE2QyxDQUFDO0FBQzVELGNBQWMsaURBQWlELENBQUM7QUFDaEUsY0FBYyxtQ0FBbUMsQ0FBQztBQUNsRCxjQUFjLDZDQUE2QyxDQUFDO0FBQzVELGNBQWMsaURBQWlELENBQUM7QUFDaEUsY0FBYyx1Q0FBdUMsQ0FBQztBQUN0RCxjQUFjLG1DQUFtQyxDQUFDO0FBQ2xELGNBQWMsbUNBQW1DLENBQUM7QUFDbEQsY0FBYyx1Q0FBdUMsQ0FBQztBQUN0RCxjQUFjLG1DQUFtQyxDQUFDO0FBQ2xELGNBQWMsNkNBQTZDLENBQUM7QUFDNUQsY0FBYywyQ0FBMkMsQ0FBQztBQUUxRCxXQUFXIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0ICogZnJvbSAnLi9kYXRhLWZpZWxkcy5tb2R1bGUnO1xuXG4vKiBDb21wb25lbnRzICovXG5leHBvcnQgKiBmcm9tICcuL2J1dHRvbi1maWVsZC9idXR0b24tZmllbGQuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vYm9vbGVhbi1maWVsZC9ib29sZWFuLWZpZWxkLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2RhdGEtZmllbGQtdGVtcGxhdGUvZGF0YS1maWVsZC10ZW1wbGF0ZS5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9kYXRlLWZpZWxkL2RhdGUtZmllbGQuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vZGF0ZS10aW1lLWZpZWxkL2RhdGUtdGltZS1maWVsZC5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9lbnVtZXJhdGlvbi1maWVsZC9lbnVtZXJhdGlvbi1maWVsZC5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9maWxlLWZpZWxkL2ZpbGUtZmllbGQuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vZmlsZS1maWVsZC1saXN0L2ZpbGUtbGlzdC1maWVsZC5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9tdWx0aWNob2ljZS1maWVsZC9tdWx0aWNob2ljZS1maWVsZC5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9udW1iZXItZmllbGQvbnVtYmVyLWZpZWxkLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL3RleHQtZmllbGQvdGV4dC1maWVsZC5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi91c2VyLWZpZWxkL3VzZXItZmllbGQuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vZmlsdGVyLWZpZWxkL2ZpbHRlci1maWVsZC5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9pMThuLWZpZWxkL2kxOG4tZmllbGQuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vdXNlci1saXN0LWZpZWxkL3VzZXItbGlzdC1maWVsZC5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi90YXNrLXJlZi1maWVsZC90YXNrLXJlZi1maWVsZC5jb21wb25lbnQnO1xuXG4vKiBDbGFzcyAqL1xuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25ldGdyaWYtY29tcG9uZW50cy9zcmMvbGliL2RhdGEtZmllbGRzL3B1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxzQkFBc0IsQ0FBQztBQUVyQyxnQkFBZ0I7QUFDaEIsY0FBYyx1Q0FBdUMsQ0FBQztBQUN0RCxjQUFjLHlDQUF5QyxDQUFDO0FBQ3hELGNBQWMscURBQXFELENBQUM7QUFDcEUsY0FBYyxtQ0FBbUMsQ0FBQztBQUNsRCxjQUFjLDZDQUE2QyxDQUFDO0FBQzVELGNBQWMsaURBQWlELENBQUM7QUFDaEUsY0FBYyxtQ0FBbUMsQ0FBQztBQUNsRCxjQUFjLDZDQUE2QyxDQUFDO0FBQzVELGNBQWMsaURBQWlELENBQUM7QUFDaEUsY0FBYyx1Q0FBdUMsQ0FBQztBQUN0RCxjQUFjLG1DQUFtQyxDQUFDO0FBQ2xELGNBQWMsbUNBQW1DLENBQUM7QUFDbEQsY0FBYyx1Q0FBdUMsQ0FBQztBQUN0RCxjQUFjLG1DQUFtQyxDQUFDO0FBQ2xELGNBQWMsNkNBQTZDLENBQUM7QUFFNUQsV0FBVyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vZGF0YS1maWVsZHMubW9kdWxlJztcblxuLyogQ29tcG9uZW50cyAqL1xuZXhwb3J0ICogZnJvbSAnLi9idXR0b24tZmllbGQvYnV0dG9uLWZpZWxkLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2Jvb2xlYW4tZmllbGQvYm9vbGVhbi1maWVsZC5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9kYXRhLWZpZWxkLXRlbXBsYXRlL2RhdGEtZmllbGQtdGVtcGxhdGUuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vZGF0ZS1maWVsZC9kYXRlLWZpZWxkLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2RhdGUtdGltZS1maWVsZC9kYXRlLXRpbWUtZmllbGQuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vZW51bWVyYXRpb24tZmllbGQvZW51bWVyYXRpb24tZmllbGQuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vZmlsZS1maWVsZC9maWxlLWZpZWxkLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2ZpbGUtZmllbGQtbGlzdC9maWxlLWxpc3QtZmllbGQuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbXVsdGljaG9pY2UtZmllbGQvbXVsdGljaG9pY2UtZmllbGQuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbnVtYmVyLWZpZWxkL251bWJlci1maWVsZC5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi90ZXh0LWZpZWxkL3RleHQtZmllbGQuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vdXNlci1maWVsZC91c2VyLWZpZWxkLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2ZpbHRlci1maWVsZC9maWx0ZXItZmllbGQuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vaTE4bi1maWVsZC9pMThuLWZpZWxkLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL3VzZXItbGlzdC1maWVsZC91c2VyLWxpc3QtZmllbGQuY29tcG9uZW50JztcblxuLyogQ2xhc3MgKi9cbiJdfQ==

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 }]; } });