@netgrif/components 6.2.4 → 6.2.6

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

@@ -37,9 +37,9 @@ export class FileFieldComponent extends AbstractFileFieldComponent {
         });
     }
 }
-FileFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileFieldComponent, deps: [{ token: i1.TaskResourceService }, { token: i1.LoggerService }, { token: i1.SnackBarService }, { token: i2.TranslateService }, { token: i1.EventService }, { token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }, { token: i3.DomSanitizer }, { token: i4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-FileFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FileFieldComponent, selector: "nc-file-field", usesInheritance: true, ngImport: i0, template: "<nc-data-field-template *ngIf=\"!dataField.behavior.hidden\"\n                        [dataField]=\"dataField\"\n                        [dataFieldTemplate]=\"dataFieldTemplate\"\n                        [offset]=\"taskOffset\">\n</nc-data-field-template>\n\n<ng-template #dataFieldTemplate let-showLargeLayout=\"showLargeLayout\">\n    <div fxLayoutAlign=\"center center\" fxLayout=\"row\">\n        <div fxFlex=\"{{!filePreview ? '100' : '75'}}\">\n            <mat-label *ngIf=\"!showLargeLayout.value\" class=\"netgrif-label\">\n                {{dataField.title}}\n                <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!dataField.disabled\"></nc-required-label>\n                <br>\n            </mat-label>\n            <div class=\"form-input button-icon-input full-width input-margin\" fxLayout=\"row\" fxLayoutAlign=\"start center\" [ngClass]=\"{'form-input-disabled': formControl.disabled, 'form-input-error': dataField.isInvalid(formControl)}\">\n                <button mat-icon-button color=\"accent\" (click)=\"chooseFile()\"\n                        [matTooltip]=\"'dataField.file.clickToUpload' | translate\" *ngIf=\"!formControl.disabled\"\n                        [class.do-not-click]=\"state.uploading\">\n                    <mat-icon>file_upload</mat-icon>\n                </button>\n                <span (click)=\"isEmpty() ? chooseFile() : download()\" fxFlex\n                      [matTooltip]=\"isEmpty() ? '' : ('dataField.file.clickToDownload' | translate : {fileName: constructDisplayName()})\"\n                      class=\"input-name-ellipsis\"\n                      [ngClass]=\"{'input-placeholder': isEmpty(), 'no-cursor': isEmpty() && formControl.disabled}\">{{constructDisplayName()}}</span>\n                <button (click)=\"deleteFile()\" [matTooltip]=\"'dataField.file.clickToDelete' | translate\" mat-icon-button\n                        *ngIf=\"!isEmpty() && !formControl.disabled\">\n                    <mat-icon color=\"warn\">close</mat-icon>\n                </button>\n            </div>\n            <mat-progress-bar *ngIf=\"state.uploading || state.downloading\" color=\"primary\" [value]=\"state.progress\"\n                              [mode]=\"state.uploading ? 'determinate' : 'indeterminate'\"\n                              class=\"margin-bottom-default\"></mat-progress-bar>\n            <input type=\"file\" #fileUploadInput name=\"fileUpload\" [multiple]=\"false\"\n                   accept=\"{{dataField.allowTypes}}\" class=\"invisible-input\">\n            <input type=\"text\" [formControl]=\"formControl\" class=\"invisible-input\">\n            <mat-hint class=\"file-hint-error\"\n                      *ngIf=\"!dataField.isInvalid(formControl)\">{{dataField.description}}</mat-hint>\n            <mat-error class=\"file-hint-error\"\n                       *ngIf=\"dataField.isInvalid(formControl)\">{{'dataField.validations.required' | translate}}</mat-error>\n        </div>\n        <div *ngIf=\"filePreview\" fxFlex=\"5\"></div>\n        <div *ngIf=\"filePreview\" fxFlex=\"20\" fxLayout=\"row\" fxLayoutAlign=\"center center\" #imageDiv\n             (resized)=\"changeMaxWidth($event)\">\n            <img *ngIf=\"previewSource !== undefined && !state.downloading && isDisplayable\" class=\"image-preview\" #imageEl\n                 [ngStyle]=\"!isBorderLGBTQ() && !isBorderDefault() && {\n                    'border-width': getPreviewBorderWidth(),\n                    'border-style': getPreviewBorderStyle(),\n                    'border-color': getPreviewBorderColor()\n                 }\"\n                 [ngClass]=\"{'border-LGBTQ': isBorderLGBTQ(), 'border-default': isBorderDefault()}\"\n                 [src]=\"previewSource\" alt=\"Image preview\" (click)=\"showPreviewDialog()\"/>\n            <mat-spinner *ngIf=\"previewSource === undefined && !!state.downloading && isDisplayable\"\n                         [diameter]=\"26\"></mat-spinner>\n        </div>\n    </div>\n</ng-template>\n", styles: [".invisible-input{display:none}.margin-bottom-default{margin-bottom:8px}.file-field-image{width:120px}.file-field-image-wrapper{border-radius:3px}.progress-bar-size{height:8px}.margin-bottom-half{margin-bottom:4px}.do-not-click:hover{cursor:not-allowed}.file-button{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.input-name-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.input-placeholder{color:#0000006b}.button-icon-input{padding:2px!important}.full-width{width:100%;min-width:100%}.input-margin{margin-top:2px!important}.form-input{background:transparent;color:#333;outline:none;border:1px solid rgba(0,0,0,.12);text-align:left;font-size:14px;line-height:20px;border-radius:6px;min-width:5px;padding:10px 15px;box-sizing:border-box;height:48px}.form-input:hover{border-color:#000;border-width:2px}.form-input-disabled:hover{border-color:#0000001f!important;border-width:1px;padding:2px!important}.placeholder{color:#0000006b!important}.file-hint-error{padding:0 1em;font-size:75%}.image-preview{width:auto;height:auto;cursor:pointer}.no-cursor{cursor:default!important}.border-LGBTQ{border:5px solid transparent;border-image:linear-gradient(to bottom right,#B827FC 0%,#2C90FC 25%,#B8FD33 50%,#FEC837 75%,#FD1892 100%);border-image-slice:1;animation:rainbow 10s infinite}@keyframes rainbow{0%{border-image:linear-gradient(to bottom right,#B827FC 0%,#2C90FC 25%,#B8FD33 50%,#FEC837 75%,#FD1892 100%);border-image-slice:1}20%{border-image:linear-gradient(to bottom right,#2C90FC 0%,#B8FD33 25%,#FEC837 50%,#FD1892 75%,#B827FC 100%);border-image-slice:1}40%{border-image:linear-gradient(to bottom right,#B8FD33 0%,#FEC837 25%,#FD1892 50%,#B827FC 75%,#2C90FC 100%);border-image-slice:1}60%{border-image:linear-gradient(to bottom right,#FEC837 0%,#FD1892 25%,#B827FC 50%,#2C90FC 75%,#B8FD33 100%);border-image-slice:1}80%{border-image:linear-gradient(to bottom right,#FD1892 0%,#B827FC 25%,#2C90FC 50%,#B8FD33 75%,#FEC837 100%);border-image-slice:1}to{border-image:linear-gradient(to bottom right,#B827FC 0%,#2C90FC 25%,#B8FD33 50%,#FEC837 75%,#FD1892 100%);border-image-slice:1}}.border-default{border-width:1px;border-style:solid;border-color:#000}\n"], components: [{ type: i5.DataFieldTemplateComponent, selector: "nc-data-field-template" }, { type: i6.RequiredLabelComponent, selector: "nc-required-label", inputs: ["isIn"] }, { type: i7.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: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i10.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.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: i12.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: i12.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: i13.MatLabel, selector: "mat-label" }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i14.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: i15.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i16.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: i16.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i16.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i13.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i13.MatError, selector: "mat-error", inputs: ["id"] }, { type: i17.ResizedDirective, selector: "[resized]", outputs: ["resized"] }, { type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i14.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"] }], pipes: { "translate": i2.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileFieldComponent, decorators: [{
+FileFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FileFieldComponent, deps: [{ token: i1.TaskResourceService }, { token: i1.LoggerService }, { token: i1.SnackBarService }, { token: i2.TranslateService }, { token: i1.EventService }, { token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }, { token: i3.DomSanitizer }, { token: i4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+FileFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FileFieldComponent, selector: "nc-file-field", usesInheritance: true, ngImport: i0, template: "<nc-data-field-template *ngIf=\"!dataField.behavior.hidden\"\n                        [dataField]=\"dataField\"\n                        [dataFieldTemplate]=\"dataFieldTemplate\"\n                        [offset]=\"taskOffset\">\n</nc-data-field-template>\n\n<ng-template #dataFieldTemplate let-showLargeLayout=\"showLargeLayout\">\n    <div fxLayoutAlign=\"center center\" fxLayout=\"row\">\n        <div fxFlex=\"{{!filePreview ? '100' : '75'}}\">\n            <mat-label *ngIf=\"!showLargeLayout.value\" class=\"netgrif-label\">\n                {{dataField.title}}\n                <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!dataField.disabled\"></nc-required-label>\n                <br>\n            </mat-label>\n            <div class=\"form-input button-icon-input full-width input-margin\" fxLayout=\"row\" fxLayoutAlign=\"start center\" [ngClass]=\"{'form-input-disabled': formControl.disabled, 'form-input-error': dataField.isInvalid(formControl)}\">\n                <button mat-icon-button color=\"accent\" (click)=\"chooseFile()\"\n                        [matTooltip]=\"'dataField.file.clickToUpload' | translate\" *ngIf=\"!formControl.disabled\"\n                        [class.do-not-click]=\"state.uploading\">\n                    <mat-icon>file_upload</mat-icon>\n                </button>\n                <span (click)=\"isEmpty() ? chooseFile() : download()\" fxFlex\n                      [matTooltip]=\"isEmpty() ? '' : ('dataField.file.clickToDownload' | translate : {fileName: constructDisplayName()})\"\n                      class=\"input-name-ellipsis\"\n                      [ngClass]=\"{'input-placeholder': isEmpty(), 'no-cursor': isEmpty() && formControl.disabled}\">{{constructDisplayName()}}</span>\n                <button (click)=\"deleteFile()\" [matTooltip]=\"'dataField.file.clickToDelete' | translate\" mat-icon-button\n                        *ngIf=\"!isEmpty() && !formControl.disabled\">\n                    <mat-icon color=\"warn\">close</mat-icon>\n                </button>\n            </div>\n            <mat-progress-bar *ngIf=\"state.uploading || state.downloading\" color=\"primary\" [value]=\"state.progress\"\n                              [mode]=\"state.uploading ? 'determinate' : 'indeterminate'\"\n                              class=\"margin-bottom-default\"></mat-progress-bar>\n            <input type=\"file\" #fileUploadInput name=\"fileUpload\" [multiple]=\"false\"\n                   accept=\"{{dataField.allowTypes}}\" class=\"invisible-input\">\n            <input type=\"text\" [formControl]=\"formControl\" class=\"invisible-input\">\n            <mat-hint class=\"file-hint-error\"\n                      *ngIf=\"!dataField.isInvalid(formControl)\">{{dataField.description}}</mat-hint>\n            <mat-error class=\"file-hint-error\"\n                       *ngIf=\"dataField.isInvalid(formControl)\">{{'dataField.validations.required' | translate}}</mat-error>\n        </div>\n        <div *ngIf=\"filePreview\" fxFlex=\"5\"></div>\n        <div *ngIf=\"filePreview\" fxFlex=\"20\" fxLayout=\"row\" fxLayoutAlign=\"center center\" #imageDiv\n             (resized)=\"changeMaxWidth($event)\">\n            <img *ngIf=\"previewSource !== undefined && !state.downloading && isDisplayable\" class=\"image-preview\" #imageEl\n                 [ngStyle]=\"!isBorderLGBTQ() && !isBorderDefault() && {\n                    'border-width': getPreviewBorderWidth(),\n                    'border-style': getPreviewBorderStyle(),\n                    'border-color': getPreviewBorderColor()\n                 }\"\n                 [ngClass]=\"{'border-LGBTQ': isBorderLGBTQ(), 'border-default': isBorderDefault()}\"\n                 [src]=\"previewSource\" alt=\"Image preview\" (click)=\"showPreviewDialog()\"/>\n            <mat-spinner *ngIf=\"previewSource === undefined && !!state.downloading && isDisplayable\"\n                         [diameter]=\"26\"></mat-spinner>\n        </div>\n    </div>\n</ng-template>\n", styles: [".invisible-input{display:none}.margin-bottom-default{margin-bottom:8px}.file-field-image{width:120px}.file-field-image-wrapper{border-radius:3px}.progress-bar-size{height:8px}.margin-bottom-half{margin-bottom:4px}.do-not-click:hover{cursor:not-allowed}.file-button{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.input-name-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.input-placeholder{color:#0000006b}.button-icon-input{padding:2px!important}.full-width{width:100%;min-width:100%}.input-margin{margin-top:2px!important}.form-input{background:transparent;color:#333;outline:none;border:1px solid rgba(0,0,0,.12);text-align:left;font-size:14px;line-height:20px;border-radius:6px;min-width:5px;padding:10px 15px;box-sizing:border-box;height:48px}.form-input:hover{border-color:#000;border-width:2px}.form-input-disabled:hover{border-color:#0000001f!important;border-width:1px;padding:2px!important}.placeholder{color:#0000006b!important}.file-hint-error{padding:0 1em;font-size:75%}.image-preview{width:auto;height:auto;cursor:pointer}.no-cursor{cursor:default!important}.border-LGBTQ{border:5px solid transparent;border-image:linear-gradient(to bottom right,#B827FC 0%,#2C90FC 25%,#B8FD33 50%,#FEC837 75%,#FD1892 100%);border-image-slice:1;animation:rainbow 10s infinite}@keyframes rainbow{0%{border-image:linear-gradient(to bottom right,#B827FC 0%,#2C90FC 25%,#B8FD33 50%,#FEC837 75%,#FD1892 100%);border-image-slice:1}20%{border-image:linear-gradient(to bottom right,#2C90FC 0%,#B8FD33 25%,#FEC837 50%,#FD1892 75%,#B827FC 100%);border-image-slice:1}40%{border-image:linear-gradient(to bottom right,#B8FD33 0%,#FEC837 25%,#FD1892 50%,#B827FC 75%,#2C90FC 100%);border-image-slice:1}60%{border-image:linear-gradient(to bottom right,#FEC837 0%,#FD1892 25%,#B827FC 50%,#2C90FC 75%,#B8FD33 100%);border-image-slice:1}80%{border-image:linear-gradient(to bottom right,#FD1892 0%,#B827FC 25%,#2C90FC 50%,#B8FD33 75%,#FEC837 100%);border-image-slice:1}to{border-image:linear-gradient(to bottom right,#B827FC 0%,#2C90FC 25%,#B8FD33 50%,#FEC837 75%,#FD1892 100%);border-image-slice:1}}.border-default{border-width:1px;border-style:solid;border-color:#000}\n"], components: [{ type: i5.DataFieldTemplateComponent, selector: "nc-data-field-template" }, { type: i6.RequiredLabelComponent, selector: "nc-required-label", inputs: ["isIn"] }, { type: i7.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: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i10.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.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: i12.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: i12.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: i13.MatLabel, selector: "mat-label" }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i14.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: i15.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i16.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: i16.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i16.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i13.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i13.MatError, selector: "mat-error", inputs: ["id"] }, { type: i17.ResizedDirective, selector: "[resized]", outputs: ["resized"] }, { type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i14.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"] }], pipes: { "translate": i2.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FileFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-file-field', template: "<nc-data-field-template *ngIf=\"!dataField.behavior.hidden\"\n                        [dataField]=\"dataField\"\n                        [dataFieldTemplate]=\"dataFieldTemplate\"\n                        [offset]=\"taskOffset\">\n</nc-data-field-template>\n\n<ng-template #dataFieldTemplate let-showLargeLayout=\"showLargeLayout\">\n    <div fxLayoutAlign=\"center center\" fxLayout=\"row\">\n        <div fxFlex=\"{{!filePreview ? '100' : '75'}}\">\n            <mat-label *ngIf=\"!showLargeLayout.value\" class=\"netgrif-label\">\n                {{dataField.title}}\n                <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!dataField.disabled\"></nc-required-label>\n                <br>\n            </mat-label>\n            <div class=\"form-input button-icon-input full-width input-margin\" fxLayout=\"row\" fxLayoutAlign=\"start center\" [ngClass]=\"{'form-input-disabled': formControl.disabled, 'form-input-error': dataField.isInvalid(formControl)}\">\n                <button mat-icon-button color=\"accent\" (click)=\"chooseFile()\"\n                        [matTooltip]=\"'dataField.file.clickToUpload' | translate\" *ngIf=\"!formControl.disabled\"\n                        [class.do-not-click]=\"state.uploading\">\n                    <mat-icon>file_upload</mat-icon>\n                </button>\n                <span (click)=\"isEmpty() ? chooseFile() : download()\" fxFlex\n                      [matTooltip]=\"isEmpty() ? '' : ('dataField.file.clickToDownload' | translate : {fileName: constructDisplayName()})\"\n                      class=\"input-name-ellipsis\"\n                      [ngClass]=\"{'input-placeholder': isEmpty(), 'no-cursor': isEmpty() && formControl.disabled}\">{{constructDisplayName()}}</span>\n                <button (click)=\"deleteFile()\" [matTooltip]=\"'dataField.file.clickToDelete' | translate\" mat-icon-button\n                        *ngIf=\"!isEmpty() && !formControl.disabled\">\n                    <mat-icon color=\"warn\">close</mat-icon>\n                </button>\n            </div>\n            <mat-progress-bar *ngIf=\"state.uploading || state.downloading\" color=\"primary\" [value]=\"state.progress\"\n                              [mode]=\"state.uploading ? 'determinate' : 'indeterminate'\"\n                              class=\"margin-bottom-default\"></mat-progress-bar>\n            <input type=\"file\" #fileUploadInput name=\"fileUpload\" [multiple]=\"false\"\n                   accept=\"{{dataField.allowTypes}}\" class=\"invisible-input\">\n            <input type=\"text\" [formControl]=\"formControl\" class=\"invisible-input\">\n            <mat-hint class=\"file-hint-error\"\n                      *ngIf=\"!dataField.isInvalid(formControl)\">{{dataField.description}}</mat-hint>\n            <mat-error class=\"file-hint-error\"\n                       *ngIf=\"dataField.isInvalid(formControl)\">{{'dataField.validations.required' | translate}}</mat-error>\n        </div>\n        <div *ngIf=\"filePreview\" fxFlex=\"5\"></div>\n        <div *ngIf=\"filePreview\" fxFlex=\"20\" fxLayout=\"row\" fxLayoutAlign=\"center center\" #imageDiv\n             (resized)=\"changeMaxWidth($event)\">\n            <img *ngIf=\"previewSource !== undefined && !state.downloading && isDisplayable\" class=\"image-preview\" #imageEl\n                 [ngStyle]=\"!isBorderLGBTQ() && !isBorderDefault() && {\n                    'border-width': getPreviewBorderWidth(),\n                    'border-style': getPreviewBorderStyle(),\n                    'border-color': getPreviewBorderColor()\n                 }\"\n                 [ngClass]=\"{'border-LGBTQ': isBorderLGBTQ(), 'border-default': isBorderDefault()}\"\n                 [src]=\"previewSource\" alt=\"Image preview\" (click)=\"showPreviewDialog()\"/>\n            <mat-spinner *ngIf=\"previewSource === undefined && !!state.downloading && isDisplayable\"\n                         [diameter]=\"26\"></mat-spinner>\n        </div>\n    </div>\n</ng-template>\n", styles: [".invisible-input{display:none}.margin-bottom-default{margin-bottom:8px}.file-field-image{width:120px}.file-field-image-wrapper{border-radius:3px}.progress-bar-size{height:8px}.margin-bottom-half{margin-bottom:4px}.do-not-click:hover{cursor:not-allowed}.file-button{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.input-name-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.input-placeholder{color:#0000006b}.button-icon-input{padding:2px!important}.full-width{width:100%;min-width:100%}.input-margin{margin-top:2px!important}.form-input{background:transparent;color:#333;outline:none;border:1px solid rgba(0,0,0,.12);text-align:left;font-size:14px;line-height:20px;border-radius:6px;min-width:5px;padding:10px 15px;box-sizing:border-box;height:48px}.form-input:hover{border-color:#000;border-width:2px}.form-input-disabled:hover{border-color:#0000001f!important;border-width:1px;padding:2px!important}.placeholder{color:#0000006b!important}.file-hint-error{padding:0 1em;font-size:75%}.image-preview{width:auto;height:auto;cursor:pointer}.no-cursor{cursor:default!important}.border-LGBTQ{border:5px solid transparent;border-image:linear-gradient(to bottom right,#B827FC 0%,#2C90FC 25%,#B8FD33 50%,#FEC837 75%,#FD1892 100%);border-image-slice:1;animation:rainbow 10s infinite}@keyframes rainbow{0%{border-image:linear-gradient(to bottom right,#B827FC 0%,#2C90FC 25%,#B8FD33 50%,#FEC837 75%,#FD1892 100%);border-image-slice:1}20%{border-image:linear-gradient(to bottom right,#2C90FC 0%,#B8FD33 25%,#FEC837 50%,#FD1892 75%,#B827FC 100%);border-image-slice:1}40%{border-image:linear-gradient(to bottom right,#B8FD33 0%,#FEC837 25%,#FD1892 50%,#B827FC 75%,#2C90FC 100%);border-image-slice:1}60%{border-image:linear-gradient(to bottom right,#FEC837 0%,#FD1892 25%,#B827FC 50%,#2C90FC 75%,#B8FD33 100%);border-image-slice:1}80%{border-image:linear-gradient(to bottom right,#FD1892 0%,#B827FC 25%,#2C90FC 50%,#B8FD33 75%,#FEC837 100%);border-image-slice:1}to{border-image:linear-gradient(to bottom right,#B827FC 0%,#2C90FC 25%,#B8FD33 50%,#FEC837 75%,#FD1892 100%);border-image-slice:1}}.border-default{border-width:1px;border-style:solid;border-color:#000}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.TaskResourceService }, { type: i1.LoggerService }, { type: i1.SnackBarService }, { type: i2.TranslateService }, { type: i1.EventService }, { type: undefined, decorators: [{

package/esm2020/lib/data-fields/file-field/preview-dialog/preview-dialog.component.mjs

@@ -21,9 +21,9 @@ export class PreviewDialogComponent {
         return this.data.extension === FilePreviewType.pdf;
     }
 }
-PreviewDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PreviewDialogComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-PreviewDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PreviewDialogComponent, selector: "nc-preview-dialog", ngImport: i0, template: "<button class=\"close\" mat-icon-button [mat-dialog-close]=\"true\">\n    <mat-icon>close</mat-icon>\n</button>\n<h1 mat-dialog-title *ngIf=\"!isPdf()\">Image: {{data.dataField.value.name}}</h1>\n<h1 mat-dialog-title *ngIf=\"isPdf()\">PDF: {{data.dataField.value.name}}</h1>\n<div mat-dialog-content fxLayout=\"row\" fxLayoutAlign=\"center center\">\n    <img class=\"image-size\" *ngIf=\"!fullImageExists()\" [src]=\"data.imagePreview\" alt=\"Image preview\"/>\n    <img class=\"image-size\" *ngIf=\"fullImageExists() && !isPdf()\" [src]=\"image\" alt=\"Image\"/>\n    <embed class=\"pdf-view\" *ngIf=\"fullImageExists() && isPdf()\" [src]=\"image\" [type]=\"'application/pdf'\" />\n</div>\n", styles: [".image-size{height:64vh}.close{float:right;top:-24px;right:-24px}.pdf-view{width:50vw;height:64vh}\n"], components: [{ type: i1.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: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i5.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: i5.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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PreviewDialogComponent, decorators: [{
+PreviewDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PreviewDialogComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+PreviewDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PreviewDialogComponent, selector: "nc-preview-dialog", ngImport: i0, template: "<button class=\"close\" mat-icon-button [mat-dialog-close]=\"true\">\n    <mat-icon>close</mat-icon>\n</button>\n<h1 mat-dialog-title *ngIf=\"!isPdf()\">Image: {{data.dataField.value.name}}</h1>\n<h1 mat-dialog-title *ngIf=\"isPdf()\">PDF: {{data.dataField.value.name}}</h1>\n<div mat-dialog-content fxLayout=\"row\" fxLayoutAlign=\"center center\">\n    <img class=\"image-size\" *ngIf=\"!fullImageExists()\" [src]=\"data.imagePreview\" alt=\"Image preview\"/>\n    <img class=\"image-size\" *ngIf=\"fullImageExists() && !isPdf()\" [src]=\"image\" alt=\"Image\"/>\n    <embed class=\"pdf-view\" *ngIf=\"fullImageExists() && isPdf()\" [src]=\"image\" [type]=\"'application/pdf'\" />\n</div>\n", styles: [".image-size{height:64vh}.close{float:right;top:-24px;right:-24px}.pdf-view{width:50vw;height:64vh}\n"], components: [{ type: i1.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: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i5.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: i5.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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PreviewDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-preview-dialog', template: "<button class=\"close\" mat-icon-button [mat-dialog-close]=\"true\">\n    <mat-icon>close</mat-icon>\n</button>\n<h1 mat-dialog-title *ngIf=\"!isPdf()\">Image: {{data.dataField.value.name}}</h1>\n<h1 mat-dialog-title *ngIf=\"isPdf()\">PDF: {{data.dataField.value.name}}</h1>\n<div mat-dialog-content fxLayout=\"row\" fxLayoutAlign=\"center center\">\n    <img class=\"image-size\" *ngIf=\"!fullImageExists()\" [src]=\"data.imagePreview\" alt=\"Image preview\"/>\n    <img class=\"image-size\" *ngIf=\"fullImageExists() && !isPdf()\" [src]=\"image\" alt=\"Image\"/>\n    <embed class=\"pdf-view\" *ngIf=\"fullImageExists() && isPdf()\" [src]=\"image\" [type]=\"'application/pdf'\" />\n</div>\n", styles: [".image-size{height:64vh}.close{float:right;top:-24px;right:-24px}.pdf-view{width:50vw;height:64vh}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{

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

@@ -19,9 +19,9 @@ export class FileListFieldComponent extends AbstractFileListFieldComponent {
         super(taskResourceService, log, snackbar, translate, eventService, informAboutInvalidData);
     }
 }
-FileListFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileListFieldComponent, deps: [{ token: i1.TaskResourceService }, { token: i1.LoggerService }, { token: i1.SnackBarService }, { token: i2.TranslateService }, { token: i1.EventService }, { token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-FileListFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FileListFieldComponent, selector: "nc-file-list-field", usesInheritance: true, ngImport: i0, template: "<nc-data-field-template *ngIf=\"!dataField.behavior.hidden\"\n                        [dataField]=\"dataField\"\n                        [dataFieldTemplate]=\"dataFieldTemplate\"\n                        [offset]=\"taskOffset\">\n</nc-data-field-template>\n\n<ng-template #dataFieldTemplate let-showLargeLayout=\"showLargeLayout\">\n    <div>\n        <mat-label *ngIf=\"!showLargeLayout.value\" class=\"netgrif-label\">\n            {{dataField.title}}\n            <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!dataField.disabled\"></nc-required-label>\n            <br>\n        </mat-label>\n        <div class=\"form-input button-icon-input full-width input-margin\" fxLayout=\"row\" fxLayoutAlign=\"start center\" [ngClass]=\"{'form-input-disabled': formControl.disabled, 'form-input-error': dataField.isInvalid(formControl)}\">\n            <button mat-icon-button color=\"accent\" (click)=\"chooseFile()\"\n                    [matTooltip]=\"'dataField.file.clickToUpload' | translate\" *ngIf=\"!formControl.disabled\"\n                    [class.do-not-click]=\"state.uploading\">\n                <mat-icon>file_upload</mat-icon>\n            </button>\n            <span *ngIf=\"uploadedFiles.length === 0\" (click)=\"chooseFile()\" fxFlex\n                  [ngClass]=\"{'no-cursor': formControl.disabled}\" class=\"input-placeholder input-name-ellipsis\">{{constructDisplayName()}}</span>\n            <div *ngIf=\"uploadedFiles.length !== 0\" class=\"input-name-ellipsis\" fxFlex>\n                <div *ngFor=\"let name of uploadedFiles\" fxLayoutAlign=\"start center\">\n                    <span (click)=\"download(name)\" fxFlex [matTooltip]=\"'dataField.file.clickToDownload' | translate : {fileName: name}\"\n                          class=\"input-name-ellipsis file-list-item\">{{name}}</span>\n                    <button (click)=\"deleteFile(name)\" [matTooltip]=\"'dataField.file.clickToDelete' | translate\" mat-icon-button\n                            *ngIf=\"!formControl.disabled\">\n                        <mat-icon color=\"warn\">close</mat-icon>\n                    </button>\n                </div>\n            </div>\n        </div>\n        <mat-progress-bar *ngIf=\"state.uploading || state.downloading\" color=\"primary\" [value]=\"state.progress\"\n                          [mode]=\"state.uploading ? 'determinate' : 'indeterminate'\"\n                          class=\"margin-bottom-default\"></mat-progress-bar>\n        <input type=\"file\" #fileUploadInput name=\"fileUpload\" [multiple]=\"true\"\n               accept=\"{{dataField.allowTypes}}\" class=\"invisible-input\"/>\n        <input type=\"text\" [formControl]=\"formControl\" class=\"invisible-input\">\n        <mat-hint class=\"file-hint-error\" *ngIf=\"!dataField.isInvalid(formControl)\">{{dataField.description}}</mat-hint>\n        <mat-error class=\"file-hint-error\" *ngIf=\"dataField.isInvalid(formControl)\">{{'dataField.validations.required' | translate}}</mat-error>\n    </div>\n</ng-template>\n", styles: ["@import\"quill/dist/quill.snow.css\";@import\"quill/dist/quill.bubble.css\";@import\"quill/dist/quill.core.css\";.mat-calendar-arrow{border:none!important;width:10px!important;height:5px!important}ngx-mat-calendar-header .mat-calendar-arrow{border-left:5px solid transparent!important;border-right:5px solid transparent!important;border-top-width:5px!important;border-top-style:solid!important;width:0!important;height:0!important}ngx-mat-calendar .mat-calendar-body-cell{position:relative!important}mat-calendar .mat-calendar-arrow{width:0;height:0}mat-calendar .mat-calendar-body-cell{position:absolute!important;height:100%}ngx-mat-datetime-content .mat-calendar-arrow{width:0}.invisible-input{display:none}.margin-bottom-default{margin-bottom:8px}.progress-bar-size{height:8px}.margin-bottom-half{margin-bottom:4px}.do-not-click:hover{cursor:not-allowed}.file-button{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.input-name-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.input-placeholder{color:#0000006b}.button-icon-input{padding:2px!important}.full-width{width:100%;min-width:100%}.input-margin{margin-top:2px!important}.form-input{background:transparent;color:#333;outline:none;border:1px solid rgba(0,0,0,.12);text-align:left;font-size:14px;line-height:20px;border-radius:6px;min-width:5px;padding:10px 15px;box-sizing:border-box;min-height:48px}.form-input:hover{border-color:#000;border-width:2px}.file-hint-error{padding:0 1em;font-size:75%}.no-cursor{cursor:default!important}.form-input-disabled:hover{border-color:#0000001f!important;border-width:1px;padding:2px!important}\n"], components: [{ type: i3.DataFieldTemplateComponent, selector: "nc-data-field-template" }, { type: i4.RequiredLabelComponent, selector: "nc-required-label", inputs: ["isIn"] }, { type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], directives: [{ type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.MatLabel, selector: "mat-label" }, { type: i10.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: i10.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: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i11.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: i12.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i10.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i13.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: i13.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i13.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i9.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i9.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i2.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileListFieldComponent, decorators: [{
+FileListFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FileListFieldComponent, deps: [{ token: i1.TaskResourceService }, { token: i1.LoggerService }, { token: i1.SnackBarService }, { token: i2.TranslateService }, { token: i1.EventService }, { token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+FileListFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FileListFieldComponent, selector: "nc-file-list-field", usesInheritance: true, ngImport: i0, template: "<nc-data-field-template *ngIf=\"!dataField.behavior.hidden\"\n                        [dataField]=\"dataField\"\n                        [dataFieldTemplate]=\"dataFieldTemplate\"\n                        [offset]=\"taskOffset\">\n</nc-data-field-template>\n\n<ng-template #dataFieldTemplate let-showLargeLayout=\"showLargeLayout\">\n    <div>\n        <mat-label *ngIf=\"!showLargeLayout.value\" class=\"netgrif-label\">\n            {{dataField.title}}\n            <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!dataField.disabled\"></nc-required-label>\n            <br>\n        </mat-label>\n        <div class=\"form-input button-icon-input full-width input-margin\" fxLayout=\"row\" fxLayoutAlign=\"start center\" [ngClass]=\"{'form-input-disabled': formControl.disabled, 'form-input-error': dataField.isInvalid(formControl)}\">\n            <button mat-icon-button color=\"accent\" (click)=\"chooseFile()\"\n                    [matTooltip]=\"'dataField.file.clickToUpload' | translate\" *ngIf=\"!formControl.disabled\"\n                    [class.do-not-click]=\"state.uploading\">\n                <mat-icon>file_upload</mat-icon>\n            </button>\n            <span *ngIf=\"uploadedFiles.length === 0\" (click)=\"chooseFile()\" fxFlex\n                  [ngClass]=\"{'no-cursor': formControl.disabled}\" class=\"input-placeholder input-name-ellipsis\">{{constructDisplayName()}}</span>\n            <div *ngIf=\"uploadedFiles.length !== 0\" class=\"input-name-ellipsis\" fxFlex>\n                <div *ngFor=\"let name of uploadedFiles\" fxLayoutAlign=\"start center\">\n                    <span (click)=\"download(name)\" fxFlex [matTooltip]=\"'dataField.file.clickToDownload' | translate : {fileName: name}\"\n                          class=\"input-name-ellipsis file-list-item\">{{name}}</span>\n                    <button (click)=\"deleteFile(name)\" [matTooltip]=\"'dataField.file.clickToDelete' | translate\" mat-icon-button\n                            *ngIf=\"!formControl.disabled\">\n                        <mat-icon color=\"warn\">close</mat-icon>\n                    </button>\n                </div>\n            </div>\n        </div>\n        <mat-progress-bar *ngIf=\"state.uploading || state.downloading\" color=\"primary\" [value]=\"state.progress\"\n                          [mode]=\"state.uploading ? 'determinate' : 'indeterminate'\"\n                          class=\"margin-bottom-default\"></mat-progress-bar>\n        <input type=\"file\" #fileUploadInput name=\"fileUpload\" [multiple]=\"true\"\n               accept=\"{{dataField.allowTypes}}\" class=\"invisible-input\"/>\n        <input type=\"text\" [formControl]=\"formControl\" class=\"invisible-input\">\n        <mat-hint class=\"file-hint-error\" *ngIf=\"!dataField.isInvalid(formControl)\">{{dataField.description}}</mat-hint>\n        <mat-error class=\"file-hint-error\" *ngIf=\"dataField.isInvalid(formControl)\">{{'dataField.validations.required' | translate}}</mat-error>\n    </div>\n</ng-template>\n", styles: ["@import\"quill/dist/quill.snow.css\";@import\"quill/dist/quill.bubble.css\";@import\"quill/dist/quill.core.css\";.mat-calendar-arrow{border:none!important;width:10px!important;height:5px!important}ngx-mat-calendar-header .mat-calendar-arrow{border-left:5px solid transparent!important;border-right:5px solid transparent!important;border-top-width:5px!important;border-top-style:solid!important;width:0!important;height:0!important}ngx-mat-calendar .mat-calendar-body-cell{position:relative!important}mat-calendar .mat-calendar-arrow{width:0;height:0}mat-calendar .mat-calendar-body-cell{position:absolute!important;height:100%}ngx-mat-datetime-content .mat-calendar-arrow{width:0}.invisible-input{display:none}.margin-bottom-default{margin-bottom:8px}.progress-bar-size{height:8px}.margin-bottom-half{margin-bottom:4px}.do-not-click:hover{cursor:not-allowed}.file-button{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.input-name-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.input-placeholder{color:#0000006b}.button-icon-input{padding:2px!important}.full-width{width:100%;min-width:100%}.input-margin{margin-top:2px!important}.form-input{background:transparent;color:#333;outline:none;border:1px solid rgba(0,0,0,.12);text-align:left;font-size:14px;line-height:20px;border-radius:6px;min-width:5px;padding:10px 15px;box-sizing:border-box;min-height:48px}.form-input:hover{border-color:#000;border-width:2px}.file-hint-error{padding:0 1em;font-size:75%}.no-cursor{cursor:default!important}.form-input-disabled:hover{border-color:#0000001f!important;border-width:1px;padding:2px!important}\n"], components: [{ type: i3.DataFieldTemplateComponent, selector: "nc-data-field-template" }, { type: i4.RequiredLabelComponent, selector: "nc-required-label", inputs: ["isIn"] }, { type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], directives: [{ type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.MatLabel, selector: "mat-label" }, { type: i10.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: i10.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: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i11.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: i12.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i10.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i13.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: i13.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i13.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i9.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i9.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i2.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FileListFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-file-list-field', template: "<nc-data-field-template *ngIf=\"!dataField.behavior.hidden\"\n                        [dataField]=\"dataField\"\n                        [dataFieldTemplate]=\"dataFieldTemplate\"\n                        [offset]=\"taskOffset\">\n</nc-data-field-template>\n\n<ng-template #dataFieldTemplate let-showLargeLayout=\"showLargeLayout\">\n    <div>\n        <mat-label *ngIf=\"!showLargeLayout.value\" class=\"netgrif-label\">\n            {{dataField.title}}\n            <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!dataField.disabled\"></nc-required-label>\n            <br>\n        </mat-label>\n        <div class=\"form-input button-icon-input full-width input-margin\" fxLayout=\"row\" fxLayoutAlign=\"start center\" [ngClass]=\"{'form-input-disabled': formControl.disabled, 'form-input-error': dataField.isInvalid(formControl)}\">\n            <button mat-icon-button color=\"accent\" (click)=\"chooseFile()\"\n                    [matTooltip]=\"'dataField.file.clickToUpload' | translate\" *ngIf=\"!formControl.disabled\"\n                    [class.do-not-click]=\"state.uploading\">\n                <mat-icon>file_upload</mat-icon>\n            </button>\n            <span *ngIf=\"uploadedFiles.length === 0\" (click)=\"chooseFile()\" fxFlex\n                  [ngClass]=\"{'no-cursor': formControl.disabled}\" class=\"input-placeholder input-name-ellipsis\">{{constructDisplayName()}}</span>\n            <div *ngIf=\"uploadedFiles.length !== 0\" class=\"input-name-ellipsis\" fxFlex>\n                <div *ngFor=\"let name of uploadedFiles\" fxLayoutAlign=\"start center\">\n                    <span (click)=\"download(name)\" fxFlex [matTooltip]=\"'dataField.file.clickToDownload' | translate : {fileName: name}\"\n                          class=\"input-name-ellipsis file-list-item\">{{name}}</span>\n                    <button (click)=\"deleteFile(name)\" [matTooltip]=\"'dataField.file.clickToDelete' | translate\" mat-icon-button\n                            *ngIf=\"!formControl.disabled\">\n                        <mat-icon color=\"warn\">close</mat-icon>\n                    </button>\n                </div>\n            </div>\n        </div>\n        <mat-progress-bar *ngIf=\"state.uploading || state.downloading\" color=\"primary\" [value]=\"state.progress\"\n                          [mode]=\"state.uploading ? 'determinate' : 'indeterminate'\"\n                          class=\"margin-bottom-default\"></mat-progress-bar>\n        <input type=\"file\" #fileUploadInput name=\"fileUpload\" [multiple]=\"true\"\n               accept=\"{{dataField.allowTypes}}\" class=\"invisible-input\"/>\n        <input type=\"text\" [formControl]=\"formControl\" class=\"invisible-input\">\n        <mat-hint class=\"file-hint-error\" *ngIf=\"!dataField.isInvalid(formControl)\">{{dataField.description}}</mat-hint>\n        <mat-error class=\"file-hint-error\" *ngIf=\"dataField.isInvalid(formControl)\">{{'dataField.validations.required' | translate}}</mat-error>\n    </div>\n</ng-template>\n", styles: ["@import\"quill/dist/quill.snow.css\";@import\"quill/dist/quill.bubble.css\";@import\"quill/dist/quill.core.css\";.mat-calendar-arrow{border:none!important;width:10px!important;height:5px!important}ngx-mat-calendar-header .mat-calendar-arrow{border-left:5px solid transparent!important;border-right:5px solid transparent!important;border-top-width:5px!important;border-top-style:solid!important;width:0!important;height:0!important}ngx-mat-calendar .mat-calendar-body-cell{position:relative!important}mat-calendar .mat-calendar-arrow{width:0;height:0}mat-calendar .mat-calendar-body-cell{position:absolute!important;height:100%}ngx-mat-datetime-content .mat-calendar-arrow{width:0}.invisible-input{display:none}.margin-bottom-default{margin-bottom:8px}.progress-bar-size{height:8px}.margin-bottom-half{margin-bottom:4px}.do-not-click:hover{cursor:not-allowed}.file-button{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.input-name-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.input-placeholder{color:#0000006b}.button-icon-input{padding:2px!important}.full-width{width:100%;min-width:100%}.input-margin{margin-top:2px!important}.form-input{background:transparent;color:#333;outline:none;border:1px solid rgba(0,0,0,.12);text-align:left;font-size:14px;line-height:20px;border-radius:6px;min-width:5px;padding:10px 15px;box-sizing:border-box;min-height:48px}.form-input:hover{border-color:#000;border-width:2px}.file-hint-error{padding:0 1em;font-size:75%}.no-cursor{cursor:default!important}.form-input-disabled:hover{border-color:#0000001f!important;border-width:1px;padding:2px!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.TaskResourceService }, { type: i1.LoggerService }, { type: i1.SnackBarService }, { type: i2.TranslateService }, { type: i1.EventService }, { type: undefined, decorators: [{

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

@@ -21,15 +21,15 @@ export class FilterFieldContentComponent extends AbstractFilterFieldContentCompo
         super(filterField, fieldSearchService);
     }
 }
-FilterFieldContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterFieldContentComponent, deps: [{ token: NAE_FILTER_FIELD }, { token: i1.SearchService }], target: i0.ɵɵFactoryTarget.Component });
-FilterFieldContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FilterFieldContentComponent, selector: "nc-filter-field-content", providers: [
+FilterFieldContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterFieldContentComponent, deps: [{ token: NAE_FILTER_FIELD }, { token: i1.SearchService }], target: i0.ɵɵFactoryTarget.Component });
+FilterFieldContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FilterFieldContentComponent, selector: "nc-filter-field-content", providers: [
         { provide: NAE_BASE_FILTER, useFactory: filterFieldBaseFilterFactory, deps: [NAE_FILTER_FIELD] },
         { provide: AllowedNetsService, useFactory: filterFieldAllowedNetsFactory, deps: [AllowedNetsServiceFactory, NAE_FILTER_FIELD] },
         CategoryFactory,
         { provide: NAE_SEARCH_CATEGORIES, useFactory: filterFieldCategoriesFactory, deps: [CategoryResolverService, NAE_FILTER_FIELD] },
         SearchService
     ], usesInheritance: true, ngImport: i0, template: "<nc-advanced-search *ngIf=\"filterLoaded\" [editable]=\"editable\"></nc-advanced-search>\n", styles: [""], components: [{ type: i2.AdvancedSearchComponent, selector: "nc-advanced-search" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterFieldContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterFieldContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-filter-field-content', providers: [
                         { provide: NAE_BASE_FILTER, useFactory: filterFieldBaseFilterFactory, deps: [NAE_FILTER_FIELD] },

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

@@ -13,9 +13,9 @@ export class FilterFieldComponent extends AbstractFilterFieldComponent {
         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: [{

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