@netgrif/components 6.2.4 → 6.2.6

package/esm2020/lib/tabs/tab-creation-detector/tab-creation-detector.component.mjs

@@ -12,9 +12,9 @@ export class TabCreationDetectorComponent extends AbstractTabCreationDetectorCom
         super();
     }
 }
-TabCreationDetectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TabCreationDetectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TabCreationDetectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TabCreationDetectorComponent, selector: "nc-tab-creation-detector", usesInheritance: true, ngImport: i0, template: "", styles: [""] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TabCreationDetectorComponent, decorators: [{
+TabCreationDetectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabCreationDetectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TabCreationDetectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TabCreationDetectorComponent, selector: "nc-tab-creation-detector", usesInheritance: true, ngImport: i0, template: "", styles: [""] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabCreationDetectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-tab-creation-detector', template: "", styles: [""] }]
         }], ctorParameters: function () { return []; } });

package/esm2020/lib/tabs/tab-view/tab-view.component.mjs

@@ -23,9 +23,9 @@ export class TabViewComponent extends AbstractTabViewComponent {
         this._logger = _logger;
     }
 }
-TabViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TabViewComponent, deps: [{ token: i1.ViewService }, { token: i1.LoggerService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-TabViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TabViewComponent, selector: "nc-tab-view", usesInheritance: true, ngImport: i0, template: "<mat-tab-group [selectedIndex]=\"tabView.selectedIndex.value\"\n               [class.center-tabs]=\"align === 'center'\"\n               [class.end-tabs]=\"align === 'end'\"\n               (selectedTabChange)=\"tabView.tabChange($event)\" class=\"tab-group\"\n               [class.nae-tab-fill-height]=\"stretch\" fxFlex>\n    <mat-tab *ngFor=\"let tab of tabView.openedTabs; let i=index\">\n        <ng-template mat-tab-label>\n            <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n                <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start center\">\n                    <mat-icon class=\"icon-margin-right\"\n                              *ngIf=\"tab.getIcon() !== undefined\">{{tab.getIcon$()|async}}</mat-icon>\n                    <span class=\"custom-badge\" [matBadge]=\"(badgeCount(tab) | async)\"\n                          [matBadgeHidden]=\"(badgeHidden(tab) | async)\">{{((tab.getText$() | async) | translate) + ((badgeHidden(tab) | async) ? '' : offset)}}</span>\n                </div>\n                <button mat-icon-button *ngIf=\"tab.canBeClosed\" (click)=\"tabView.closeTabIndex(i)\">\n                    <mat-icon>clear</mat-icon>\n                </button>\n            </div>\n        </ng-template>\n        <!--        TODO 16.4.2020 - lazy loading of tab contents is disabled for now -->\n        <!--        <ng-template matTabContent>-->\n        <nc-tab-creation-detector [initializeTabFunction]=\"initializeTabLambda\"\n                                  [tabIndex]=\"i\"></nc-tab-creation-detector>\n        <ng-template [ngIf]=\"tab.isTabInitialized\" class=\"full-height\">\n            <ng-template [cdkPortalOutlet]=\"tab.portal\" class=\"full-height\"></ng-template>\n        </ng-template>\n    </mat-tab>\n</mat-tab-group>\n", styles: [".icon-margin-right{margin-right:5px}.full-height{height:100%}.full-width{width:100%}.tab-group{height:100%}.mat-badge-content{top:-3px!important;right:-24px!important}.custom-badge .mat-badge-content{width:-moz-fit-content;width:fit-content;min-width:16px;text-align:center;border-radius:8px;padding-left:3px;padding-right:3px}\n"], components: [{ type: i2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.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: i5.TabCreationDetectorComponent, selector: "nc-tab-creation-detector" }], directives: [{ type: i6.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: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { type: i6.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: i6.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { type: i9.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], pipes: { "async": i7.AsyncPipe, "translate": i10.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TabViewComponent, decorators: [{
+TabViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabViewComponent, deps: [{ token: i1.ViewService }, { token: i1.LoggerService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+TabViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TabViewComponent, selector: "nc-tab-view", usesInheritance: true, ngImport: i0, template: "<mat-tab-group [selectedIndex]=\"tabView.selectedIndex.value\"\n               [class.center-tabs]=\"align === 'center'\"\n               [class.end-tabs]=\"align === 'end'\"\n               (selectedTabChange)=\"tabView.tabChange($event)\" class=\"tab-group\"\n               [class.nae-tab-fill-height]=\"stretch\" fxFlex>\n    <mat-tab *ngFor=\"let tab of tabView.openedTabs; let i=index\">\n        <ng-template mat-tab-label>\n            <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n                <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start center\">\n                    <mat-icon class=\"icon-margin-right\"\n                              *ngIf=\"tab.getIcon() !== undefined\">{{tab.getIcon$()|async}}</mat-icon>\n                    <span class=\"custom-badge\" [matBadge]=\"(badgeCount(tab) | async)\"\n                          [matBadgeHidden]=\"(badgeHidden(tab) | async)\">{{((tab.getText$() | async) | translate) + ((badgeHidden(tab) | async) ? '' : offset)}}</span>\n                </div>\n                <button mat-icon-button *ngIf=\"tab.canBeClosed\" (click)=\"tabView.closeTabIndex(i)\">\n                    <mat-icon>clear</mat-icon>\n                </button>\n            </div>\n        </ng-template>\n        <!--        TODO 16.4.2020 - lazy loading of tab contents is disabled for now -->\n        <!--        <ng-template matTabContent>-->\n        <nc-tab-creation-detector [initializeTabFunction]=\"initializeTabLambda\"\n                                  [tabIndex]=\"i\"></nc-tab-creation-detector>\n        <ng-template [ngIf]=\"tab.isTabInitialized\" class=\"full-height\">\n            <ng-template [cdkPortalOutlet]=\"tab.portal\" class=\"full-height\"></ng-template>\n        </ng-template>\n    </mat-tab>\n</mat-tab-group>\n", styles: [".icon-margin-right{margin-right:5px}.full-height{height:100%}.full-width{width:100%}.tab-group{height:100%}.mat-badge-content{top:-3px!important;right:-24px!important}.custom-badge .mat-badge-content{width:-moz-fit-content;width:fit-content;min-width:16px;text-align:center;border-radius:8px;padding-left:3px;padding-right:3px}\n"], components: [{ type: i2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.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: i5.TabCreationDetectorComponent, selector: "nc-tab-creation-detector" }], directives: [{ type: i6.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: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { type: i6.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: i6.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { type: i9.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], pipes: { "async": i7.AsyncPipe, "translate": i10.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-tab-view', template: "<mat-tab-group [selectedIndex]=\"tabView.selectedIndex.value\"\n               [class.center-tabs]=\"align === 'center'\"\n               [class.end-tabs]=\"align === 'end'\"\n               (selectedTabChange)=\"tabView.tabChange($event)\" class=\"tab-group\"\n               [class.nae-tab-fill-height]=\"stretch\" fxFlex>\n    <mat-tab *ngFor=\"let tab of tabView.openedTabs; let i=index\">\n        <ng-template mat-tab-label>\n            <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n                <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start center\">\n                    <mat-icon class=\"icon-margin-right\"\n                              *ngIf=\"tab.getIcon() !== undefined\">{{tab.getIcon$()|async}}</mat-icon>\n                    <span class=\"custom-badge\" [matBadge]=\"(badgeCount(tab) | async)\"\n                          [matBadgeHidden]=\"(badgeHidden(tab) | async)\">{{((tab.getText$() | async) | translate) + ((badgeHidden(tab) | async) ? '' : offset)}}</span>\n                </div>\n                <button mat-icon-button *ngIf=\"tab.canBeClosed\" (click)=\"tabView.closeTabIndex(i)\">\n                    <mat-icon>clear</mat-icon>\n                </button>\n            </div>\n        </ng-template>\n        <!--        TODO 16.4.2020 - lazy loading of tab contents is disabled for now -->\n        <!--        <ng-template matTabContent>-->\n        <nc-tab-creation-detector [initializeTabFunction]=\"initializeTabLambda\"\n                                  [tabIndex]=\"i\"></nc-tab-creation-detector>\n        <ng-template [ngIf]=\"tab.isTabInitialized\" class=\"full-height\">\n            <ng-template [cdkPortalOutlet]=\"tab.portal\" class=\"full-height\"></ng-template>\n        </ng-template>\n    </mat-tab>\n</mat-tab-group>\n", styles: [".icon-margin-right{margin-right:5px}.full-height{height:100%}.full-width{width:100%}.tab-group{height:100%}.mat-badge-content{top:-3px!important;right:-24px!important}.custom-badge .mat-badge-content{width:-moz-fit-content;width:fit-content;min-width:16px;text-align:center;border-radius:8px;padding-left:3px;padding-right:3px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.ViewService }, { type: i1.LoggerService }, { type: i0.Injector }]; } });

package/esm2020/lib/tabs/tabs.module.mjs

@@ -8,22 +8,22 @@ import { MaterialModule, TranslateLibModule } from '@netgrif/components-core';
 import * as i0 from "@angular/core";
 export class TabsComponentModule {
 }
-TabsComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TabsComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TabsComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TabsComponentModule, declarations: [TabViewComponent,
+TabsComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabsComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TabsComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabsComponentModule, declarations: [TabViewComponent,
         TabCreationDetectorComponent], imports: [CommonModule,
         MatTabsModule,
         MaterialModule,
         FlexLayoutModule,
         TranslateLibModule], exports: [TabViewComponent,
         TabCreationDetectorComponent] });
-TabsComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TabsComponentModule, imports: [[
+TabsComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabsComponentModule, imports: [[
             CommonModule,
             MatTabsModule,
             MaterialModule,
             FlexLayoutModule,
             TranslateLibModule,
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TabsComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabsComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

package/esm2020/lib/task-content/field-component-resolver/field-component-resolver.component.mjs

@@ -24,9 +24,9 @@ export class FieldComponentResolverComponent extends AbstractFieldComponentResol
         super(taskContentService);
     }
 }
-FieldComponentResolverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FieldComponentResolverComponent, deps: [{ token: i1.TaskContentService }], target: i0.ɵɵFactoryTarget.Component });
-FieldComponentResolverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FieldComponentResolverComponent, selector: "nc-field-component-resolver", usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"netgrif-input\" [ngClass]=\"{'min-row-height': isField() && !isCustomHeight()}\" [ngSwitch]=\"getElementType()\">\n    <nc-boolean-field *ngSwitchCase=\"fieldTypeEnum.BOOLEAN\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-boolean-field>\n\n    <nc-text-field *ngSwitchCase=\"fieldTypeEnum.TEXT\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-text-field>\n\n    <nc-number-field *ngSwitchCase=\"fieldTypeEnum.NUMBER\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-number-field>\n\n    <nc-enumeration-field *ngSwitchCase=\"fieldTypeEnum.ENUMERATION\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-enumeration-field>\n\n    <nc-enumeration-field *ngSwitchCase=\"fieldTypeEnum.ENUMERATION_MAP\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-enumeration-field>\n\n    <nc-multichoice-field *ngSwitchCase=\"fieldTypeEnum.MULTICHOICE\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-multichoice-field>\n\n    <nc-multichoice-field *ngSwitchCase=\"fieldTypeEnum.MULTICHOICE_MAP\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-multichoice-field>\n\n    <nc-date-field *ngSwitchCase=\"fieldTypeEnum.DATE\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex class=\"date-field-fix\">\n    </nc-date-field>\n\n    <nc-date-time-field *ngSwitchCase=\"fieldTypeEnum.DATE_TIME\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex class=\"date-field-fix\">\n    </nc-date-time-field>\n\n    <nc-file-field *ngSwitchCase=\"fieldTypeEnum.FILE\" [dataField]=\"getDataField()\" [taskId]=\"getTaskId()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-file-field>\n\n    <nc-file-list-field *ngSwitchCase=\"fieldTypeEnum.FILE_LIST\" [dataField]=\"getDataField()\" [taskId]=\"getTaskId()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-file-list-field>\n\n    <nc-user-field *ngSwitchCase=\"fieldTypeEnum.USER\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-user-field>\n\n    <nc-user-list-field *ngSwitchCase=\"fieldTypeEnum.USER_LIST\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-user-list-field>\n\n    <nc-button-field *ngSwitchCase=\"fieldTypeEnum.BUTTON\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-button-field>\n\n    <nc-filter-field *ngSwitchCase=\"fieldTypeEnum.FILTER\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex=\"\">\n    </nc-filter-field>\n\n    <nc-i18n-field *ngSwitchCase=\"fieldTypeEnum.I18N\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-i18n-field>\n\n    <div *ngSwitchCase=\"taskElementEnum.DATA_GROUP_TITLE\" fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\">\n        <div fxFlex=\"20\" class=\"line-datagroup\"></div>\n        <span [ngClass]=\"{'margin-default': getDataGroupTitle() !== ''}\">{{getDataGroupTitle()}}</span>\n        <div fxFlex class=\"line-datagroup\"></div>\n    </div>\n\n    <div *ngSwitchCase=\"taskElementEnum.LOADER\" class=\"min-row-height\" fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\">\n        <div class=\"phl-item\">\n            <div class=\"phl-row\" fxLayoutAlign=\"center center\">\n                <div class=\"phl-col\">\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <div *ngSwitchCase=\"taskElementEnum.BLANK\"></div>\n</div>\n", styles: [".line-datagroup{height:1px;background:rgba(0,0,0,.12)}.margin-default{margin-right:8px;margin-left:8px}.min-row-height{min-height:75px}.phl-row{width:100%;flex-wrap:wrap}.phl-col{height:70px;flex:0 0 90%;background-color:#ced4da;border-radius:8px}.phl-item{width:100%;position:relative;display:flex;flex-wrap:wrap;overflow:hidden;background-color:#fff}.phl-item:after{position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 20%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0));animation:shimmer 1s infinite;content:\"\"}@keyframes shimmer{to{transform:translate(100%)}}.phl-item,.phl-item *,.phl-item:after,.phl-item:before{box-sizing:border-box}\n"], components: [{ type: i2.BooleanFieldComponent, selector: "nc-boolean-field" }, { type: i3.TextFieldComponent, selector: "nc-text-field" }, { type: i4.NumberFieldComponent, selector: "nc-number-field" }, { type: i5.EnumerationFieldComponent, selector: "nc-enumeration-field" }, { type: i6.MultichoiceFieldComponent, selector: "nc-multichoice-field" }, { type: i7.DateFieldComponent, selector: "nc-date-field" }, { type: i8.DateTimeFieldComponent, selector: "nc-date-time-field" }, { type: i9.FileFieldComponent, selector: "nc-file-field" }, { type: i10.FileListFieldComponent, selector: "nc-file-list-field" }, { type: i11.UserFieldComponent, selector: "nc-user-field" }, { type: i12.UserListFieldComponent, selector: "nc-user-list-field" }, { type: i13.ButtonFieldComponent, selector: "nc-button-field" }, { type: i14.FilterFieldComponent, selector: "nc-filter-field" }, { type: i15.I18nFieldComponent, selector: "nc-i18n-field" }], directives: [{ type: i16.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: i16.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: i17.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i18.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: i17.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i17.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i16.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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FieldComponentResolverComponent, decorators: [{
+FieldComponentResolverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FieldComponentResolverComponent, deps: [{ token: i1.TaskContentService }], target: i0.ɵɵFactoryTarget.Component });
+FieldComponentResolverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FieldComponentResolverComponent, selector: "nc-field-component-resolver", usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"netgrif-input\" [ngClass]=\"{'min-row-height': isField() && !isCustomHeight()}\" [ngSwitch]=\"getElementType()\">\n    <nc-boolean-field *ngSwitchCase=\"fieldTypeEnum.BOOLEAN\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-boolean-field>\n\n    <nc-text-field *ngSwitchCase=\"fieldTypeEnum.TEXT\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-text-field>\n\n    <nc-number-field *ngSwitchCase=\"fieldTypeEnum.NUMBER\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-number-field>\n\n    <nc-enumeration-field *ngSwitchCase=\"fieldTypeEnum.ENUMERATION\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-enumeration-field>\n\n    <nc-enumeration-field *ngSwitchCase=\"fieldTypeEnum.ENUMERATION_MAP\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-enumeration-field>\n\n    <nc-multichoice-field *ngSwitchCase=\"fieldTypeEnum.MULTICHOICE\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-multichoice-field>\n\n    <nc-multichoice-field *ngSwitchCase=\"fieldTypeEnum.MULTICHOICE_MAP\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-multichoice-field>\n\n    <nc-date-field *ngSwitchCase=\"fieldTypeEnum.DATE\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex class=\"date-field-fix\">\n    </nc-date-field>\n\n    <nc-date-time-field *ngSwitchCase=\"fieldTypeEnum.DATE_TIME\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex class=\"date-field-fix\">\n    </nc-date-time-field>\n\n    <nc-file-field *ngSwitchCase=\"fieldTypeEnum.FILE\" [dataField]=\"getDataField()\" [taskId]=\"getTaskId()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-file-field>\n\n    <nc-file-list-field *ngSwitchCase=\"fieldTypeEnum.FILE_LIST\" [dataField]=\"getDataField()\" [taskId]=\"getTaskId()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-file-list-field>\n\n    <nc-user-field *ngSwitchCase=\"fieldTypeEnum.USER\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-user-field>\n\n    <nc-user-list-field *ngSwitchCase=\"fieldTypeEnum.USER_LIST\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-user-list-field>\n\n    <nc-button-field *ngSwitchCase=\"fieldTypeEnum.BUTTON\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-button-field>\n\n    <nc-filter-field *ngSwitchCase=\"fieldTypeEnum.FILTER\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex=\"\">\n    </nc-filter-field>\n\n    <nc-i18n-field *ngSwitchCase=\"fieldTypeEnum.I18N\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-i18n-field>\n\n    <div *ngSwitchCase=\"taskElementEnum.DATA_GROUP_TITLE\" fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\">\n        <div fxFlex=\"20\" class=\"line-datagroup\"></div>\n        <span [ngClass]=\"{'margin-default': getDataGroupTitle() !== ''}\">{{getDataGroupTitle()}}</span>\n        <div fxFlex class=\"line-datagroup\"></div>\n    </div>\n\n    <div *ngSwitchCase=\"taskElementEnum.LOADER\" class=\"min-row-height\" fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\">\n        <div class=\"phl-item\">\n            <div class=\"phl-row\" fxLayoutAlign=\"center center\">\n                <div class=\"phl-col\">\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <div *ngSwitchCase=\"taskElementEnum.BLANK\"></div>\n</div>\n", styles: [".line-datagroup{height:1px;background:rgba(0,0,0,.12)}.margin-default{margin-right:8px;margin-left:8px}.min-row-height{min-height:75px}.phl-row{width:100%;flex-wrap:wrap}.phl-col{height:70px;flex:0 0 90%;background-color:#ced4da;border-radius:8px}.phl-item{width:100%;position:relative;display:flex;flex-wrap:wrap;overflow:hidden;background-color:#fff}.phl-item:after{position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 20%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0));animation:shimmer 1s infinite;content:\"\"}@keyframes shimmer{to{transform:translate(100%)}}.phl-item,.phl-item *,.phl-item:after,.phl-item:before{box-sizing:border-box}\n"], components: [{ type: i2.BooleanFieldComponent, selector: "nc-boolean-field" }, { type: i3.TextFieldComponent, selector: "nc-text-field" }, { type: i4.NumberFieldComponent, selector: "nc-number-field" }, { type: i5.EnumerationFieldComponent, selector: "nc-enumeration-field" }, { type: i6.MultichoiceFieldComponent, selector: "nc-multichoice-field" }, { type: i7.DateFieldComponent, selector: "nc-date-field" }, { type: i8.DateTimeFieldComponent, selector: "nc-date-time-field" }, { type: i9.FileFieldComponent, selector: "nc-file-field" }, { type: i10.FileListFieldComponent, selector: "nc-file-list-field" }, { type: i11.UserFieldComponent, selector: "nc-user-field" }, { type: i12.UserListFieldComponent, selector: "nc-user-list-field" }, { type: i13.ButtonFieldComponent, selector: "nc-button-field" }, { type: i14.FilterFieldComponent, selector: "nc-filter-field" }, { type: i15.I18nFieldComponent, selector: "nc-i18n-field" }], directives: [{ type: i16.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: i16.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: i17.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i18.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: i17.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i17.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i16.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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FieldComponentResolverComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-field-component-resolver', template: "<div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"netgrif-input\" [ngClass]=\"{'min-row-height': isField() && !isCustomHeight()}\" [ngSwitch]=\"getElementType()\">\n    <nc-boolean-field *ngSwitchCase=\"fieldTypeEnum.BOOLEAN\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-boolean-field>\n\n    <nc-text-field *ngSwitchCase=\"fieldTypeEnum.TEXT\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-text-field>\n\n    <nc-number-field *ngSwitchCase=\"fieldTypeEnum.NUMBER\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-number-field>\n\n    <nc-enumeration-field *ngSwitchCase=\"fieldTypeEnum.ENUMERATION\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-enumeration-field>\n\n    <nc-enumeration-field *ngSwitchCase=\"fieldTypeEnum.ENUMERATION_MAP\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-enumeration-field>\n\n    <nc-multichoice-field *ngSwitchCase=\"fieldTypeEnum.MULTICHOICE\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-multichoice-field>\n\n    <nc-multichoice-field *ngSwitchCase=\"fieldTypeEnum.MULTICHOICE_MAP\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-multichoice-field>\n\n    <nc-date-field *ngSwitchCase=\"fieldTypeEnum.DATE\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex class=\"date-field-fix\">\n    </nc-date-field>\n\n    <nc-date-time-field *ngSwitchCase=\"fieldTypeEnum.DATE_TIME\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex class=\"date-field-fix\">\n    </nc-date-time-field>\n\n    <nc-file-field *ngSwitchCase=\"fieldTypeEnum.FILE\" [dataField]=\"getDataField()\" [taskId]=\"getTaskId()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-file-field>\n\n    <nc-file-list-field *ngSwitchCase=\"fieldTypeEnum.FILE_LIST\" [dataField]=\"getDataField()\" [taskId]=\"getTaskId()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-file-list-field>\n\n    <nc-user-field *ngSwitchCase=\"fieldTypeEnum.USER\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-user-field>\n\n    <nc-user-list-field *ngSwitchCase=\"fieldTypeEnum.USER_LIST\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-user-list-field>\n\n    <nc-button-field *ngSwitchCase=\"fieldTypeEnum.BUTTON\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-button-field>\n\n    <nc-filter-field *ngSwitchCase=\"fieldTypeEnum.FILTER\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex=\"\">\n    </nc-filter-field>\n\n    <nc-i18n-field *ngSwitchCase=\"fieldTypeEnum.I18N\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-i18n-field>\n\n    <div *ngSwitchCase=\"taskElementEnum.DATA_GROUP_TITLE\" fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\">\n        <div fxFlex=\"20\" class=\"line-datagroup\"></div>\n        <span [ngClass]=\"{'margin-default': getDataGroupTitle() !== ''}\">{{getDataGroupTitle()}}</span>\n        <div fxFlex class=\"line-datagroup\"></div>\n    </div>\n\n    <div *ngSwitchCase=\"taskElementEnum.LOADER\" class=\"min-row-height\" fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\">\n        <div class=\"phl-item\">\n            <div class=\"phl-row\" fxLayoutAlign=\"center center\">\n                <div class=\"phl-col\">\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <div *ngSwitchCase=\"taskElementEnum.BLANK\"></div>\n</div>\n", styles: [".line-datagroup{height:1px;background:rgba(0,0,0,.12)}.margin-default{margin-right:8px;margin-left:8px}.min-row-height{min-height:75px}.phl-row{width:100%;flex-wrap:wrap}.phl-col{height:70px;flex:0 0 90%;background-color:#ced4da;border-radius:8px}.phl-item{width:100%;position:relative;display:flex;flex-wrap:wrap;overflow:hidden;background-color:#fff}.phl-item:after{position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 20%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0));animation:shimmer 1s infinite;content:\"\"}@keyframes shimmer{to{transform:translate(100%)}}.phl-item,.phl-item *,.phl-item:after,.phl-item:before{box-sizing:border-box}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.TaskContentService }]; } });

package/esm2020/lib/task-content/task-content/task-content.component.mjs

@@ -20,9 +20,9 @@ export class TaskContentComponent extends AbstractTaskContentComponent {
         this._taskEventService = _taskEventService;
     }
 }
-TaskContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TaskContentComponent, deps: [{ token: i1.FieldConverterService }, { token: i1.TaskContentService }, { token: i1.PaperViewService }, { token: i1.LoggerService }, { token: i1.TaskEventService, optional: true }, { token: NAE_ASYNC_RENDERING_CONFIGURATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TaskContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TaskContentComponent, selector: "nc-task-content", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"loading$ | async; else notLoading\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n    <mat-spinner color=\"primary\"></mat-spinner>\n</div>\n\n<ng-template #notLoading>\n    <div *ngIf=\"hasDataToDisplay$ | async; else noContentToDisplay\"\n         [ngClass]=\"{'paper-view-content mat-elevation-z10': isPaperView(), 'scrolling_data': this.scrollingNeeded()}\"\n         [ngStyle]=\"{'max-height': this.resolveContentHeightCss()}\">\n        <div fxLayout=\"column\" fxLayoutAlign=\"start stretch\"\n             *ngFor=\"let subgrid of dataSource; trackBy: trackBySubgridFn\">\n            <div [gdAreas]=\"subgrid.gridAreas\" [gdColumns]=\"subgrid.getGridColumns()\" class=\"grid-rows-auto\" [ngClass.lt-sm]=\"{'responsive-grid': true}\">\n                <div *ngFor=\"let item of subgrid.content; trackBy: trackByFn\"\n                     [gdArea]=\"item.gridAreaId\"\n                     class=\"border\" fxLayout=\"row\" [fxLayoutAlign]=\"getItemAlignment(item)\">\n                    <nc-field-component-resolver [id]=\"item?.item?.stringId\" [gridElement]=\"item\" fxFlex></nc-field-component-resolver>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #noContentToDisplay>\n    <div fxLayout=\"column\" fxLayoutAlign=\"center center\">\n        <mat-icon *ngIf=\"displayNoDataIcon\">{{noDataIcon ? noDataIcon : 'block'}}</mat-icon>\n        <span>{{(noDataText ? noDataText : 'tasks.view.noData') | translate}}</span>\n    </div>\n</ng-template>\n", styles: [".border{overflow-y:auto}.paper-view-content{padding:20px;width:22cm;border:1px solid #dddddd}.scrolling_data{overflow-y:auto!important}.grid-rows-auto{grid-template-rows:auto}.responsive-grid{display:block!important}\n"], components: [{ type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i3.FieldComponentResolverComponent, selector: "nc-field-component-resolver" }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.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: i6.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: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.DefaultGridAreasDirective, selector: "  [gdAreas],  [gdAreas.xs], [gdAreas.sm], [gdAreas.md], [gdAreas.lg], [gdAreas.xl],  [gdAreas.lt-sm], [gdAreas.lt-md], [gdAreas.lt-lg], [gdAreas.lt-xl],  [gdAreas.gt-xs], [gdAreas.gt-sm], [gdAreas.gt-md], [gdAreas.gt-lg]", inputs: ["gdAreas", "gdAreas.xs", "gdAreas.sm", "gdAreas.md", "gdAreas.lg", "gdAreas.xl", "gdAreas.lt-sm", "gdAreas.lt-md", "gdAreas.lt-lg", "gdAreas.lt-xl", "gdAreas.gt-xs", "gdAreas.gt-sm", "gdAreas.gt-md", "gdAreas.gt-lg"] }, { type: i8.DefaultGridColumnsDirective, selector: "  [gdColumns],  [gdColumns.xs], [gdColumns.sm], [gdColumns.md], [gdColumns.lg], [gdColumns.xl],  [gdColumns.lt-sm], [gdColumns.lt-md], [gdColumns.lt-lg], [gdColumns.lt-xl],  [gdColumns.gt-xs], [gdColumns.gt-sm], [gdColumns.gt-md], [gdColumns.gt-lg]", inputs: ["gdColumns", "gdColumns.xs", "gdColumns.sm", "gdColumns.md", "gdColumns.lg", "gdColumns.xl", "gdColumns.lt-sm", "gdColumns.lt-md", "gdColumns.lt-lg", "gdColumns.lt-xl", "gdColumns.gt-xs", "gdColumns.gt-sm", "gdColumns.gt-md", "gdColumns.gt-lg"] }, { type: i8.DefaultGridAreaDirective, selector: "  [gdArea],  [gdArea.xs], [gdArea.sm], [gdArea.md], [gdArea.lg], [gdArea.xl],  [gdArea.lt-sm], [gdArea.lt-md], [gdArea.lt-lg], [gdArea.lt-xl],  [gdArea.gt-xs], [gdArea.gt-sm], [gdArea.gt-md], [gdArea.gt-lg]", inputs: ["gdArea", "gdArea.xs", "gdArea.sm", "gdArea.md", "gdArea.lg", "gdArea.xl", "gdArea.lt-sm", "gdArea.lt-md", "gdArea.lt-lg", "gdArea.lt-xl", "gdArea.gt-xs", "gdArea.gt-sm", "gdArea.gt-md", "gdArea.gt-lg"] }, { type: i6.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"] }], pipes: { "async": i5.AsyncPipe, "translate": i9.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TaskContentComponent, decorators: [{
+TaskContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TaskContentComponent, deps: [{ token: i1.FieldConverterService }, { token: i1.TaskContentService }, { token: i1.PaperViewService }, { token: i1.LoggerService }, { token: i1.TaskEventService, optional: true }, { token: NAE_ASYNC_RENDERING_CONFIGURATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+TaskContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TaskContentComponent, selector: "nc-task-content", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"loading$ | async; else notLoading\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n    <mat-spinner color=\"primary\"></mat-spinner>\n</div>\n\n<ng-template #notLoading>\n    <div *ngIf=\"hasDataToDisplay$ | async; else noContentToDisplay\"\n         [ngClass]=\"{'paper-view-content mat-elevation-z10': isPaperView(), 'scrolling_data': this.scrollingNeeded()}\"\n         [ngStyle]=\"{'max-height': this.resolveContentHeightCss()}\">\n        <div fxLayout=\"column\" fxLayoutAlign=\"start stretch\"\n             *ngFor=\"let subgrid of dataSource; trackBy: trackBySubgridFn\">\n            <div [gdAreas]=\"subgrid.gridAreas\" [gdColumns]=\"subgrid.getGridColumns()\" class=\"grid-rows-auto\" [ngClass.lt-sm]=\"{'responsive-grid': true}\">\n                <div *ngFor=\"let item of subgrid.content; trackBy: trackByFn\"\n                     [gdArea]=\"item.gridAreaId\"\n                     class=\"border\" fxLayout=\"row\" [fxLayoutAlign]=\"getItemAlignment(item)\">\n                    <nc-field-component-resolver [id]=\"item?.item?.stringId\" [gridElement]=\"item\" fxFlex></nc-field-component-resolver>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #noContentToDisplay>\n    <div fxLayout=\"column\" fxLayoutAlign=\"center center\">\n        <mat-icon *ngIf=\"displayNoDataIcon\">{{noDataIcon ? noDataIcon : 'block'}}</mat-icon>\n        <span>{{(noDataText ? noDataText : 'tasks.view.noData') | translate}}</span>\n    </div>\n</ng-template>\n", styles: [".border{overflow-y:auto}.paper-view-content{padding:20px;width:22cm;border:1px solid #dddddd}.scrolling_data{overflow-y:auto!important}.grid-rows-auto{grid-template-rows:auto}.responsive-grid{display:block!important}\n"], components: [{ type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i3.FieldComponentResolverComponent, selector: "nc-field-component-resolver" }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.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: i6.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: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.DefaultGridAreasDirective, selector: "  [gdAreas],  [gdAreas.xs], [gdAreas.sm], [gdAreas.md], [gdAreas.lg], [gdAreas.xl],  [gdAreas.lt-sm], [gdAreas.lt-md], [gdAreas.lt-lg], [gdAreas.lt-xl],  [gdAreas.gt-xs], [gdAreas.gt-sm], [gdAreas.gt-md], [gdAreas.gt-lg]", inputs: ["gdAreas", "gdAreas.xs", "gdAreas.sm", "gdAreas.md", "gdAreas.lg", "gdAreas.xl", "gdAreas.lt-sm", "gdAreas.lt-md", "gdAreas.lt-lg", "gdAreas.lt-xl", "gdAreas.gt-xs", "gdAreas.gt-sm", "gdAreas.gt-md", "gdAreas.gt-lg"] }, { type: i8.DefaultGridColumnsDirective, selector: "  [gdColumns],  [gdColumns.xs], [gdColumns.sm], [gdColumns.md], [gdColumns.lg], [gdColumns.xl],  [gdColumns.lt-sm], [gdColumns.lt-md], [gdColumns.lt-lg], [gdColumns.lt-xl],  [gdColumns.gt-xs], [gdColumns.gt-sm], [gdColumns.gt-md], [gdColumns.gt-lg]", inputs: ["gdColumns", "gdColumns.xs", "gdColumns.sm", "gdColumns.md", "gdColumns.lg", "gdColumns.xl", "gdColumns.lt-sm", "gdColumns.lt-md", "gdColumns.lt-lg", "gdColumns.lt-xl", "gdColumns.gt-xs", "gdColumns.gt-sm", "gdColumns.gt-md", "gdColumns.gt-lg"] }, { type: i8.DefaultGridAreaDirective, selector: "  [gdArea],  [gdArea.xs], [gdArea.sm], [gdArea.md], [gdArea.lg], [gdArea.xl],  [gdArea.lt-sm], [gdArea.lt-md], [gdArea.lt-lg], [gdArea.lt-xl],  [gdArea.gt-xs], [gdArea.gt-sm], [gdArea.gt-md], [gdArea.gt-lg]", inputs: ["gdArea", "gdArea.xs", "gdArea.sm", "gdArea.md", "gdArea.lg", "gdArea.xl", "gdArea.lt-sm", "gdArea.lt-md", "gdArea.lt-lg", "gdArea.lt-xl", "gdArea.gt-xs", "gdArea.gt-sm", "gdArea.gt-md", "gdArea.gt-lg"] }, { type: i6.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"] }], pipes: { "async": i5.AsyncPipe, "translate": i9.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TaskContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-task-content', template: "<div *ngIf=\"loading$ | async; else notLoading\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n    <mat-spinner color=\"primary\"></mat-spinner>\n</div>\n\n<ng-template #notLoading>\n    <div *ngIf=\"hasDataToDisplay$ | async; else noContentToDisplay\"\n         [ngClass]=\"{'paper-view-content mat-elevation-z10': isPaperView(), 'scrolling_data': this.scrollingNeeded()}\"\n         [ngStyle]=\"{'max-height': this.resolveContentHeightCss()}\">\n        <div fxLayout=\"column\" fxLayoutAlign=\"start stretch\"\n             *ngFor=\"let subgrid of dataSource; trackBy: trackBySubgridFn\">\n            <div [gdAreas]=\"subgrid.gridAreas\" [gdColumns]=\"subgrid.getGridColumns()\" class=\"grid-rows-auto\" [ngClass.lt-sm]=\"{'responsive-grid': true}\">\n                <div *ngFor=\"let item of subgrid.content; trackBy: trackByFn\"\n                     [gdArea]=\"item.gridAreaId\"\n                     class=\"border\" fxLayout=\"row\" [fxLayoutAlign]=\"getItemAlignment(item)\">\n                    <nc-field-component-resolver [id]=\"item?.item?.stringId\" [gridElement]=\"item\" fxFlex></nc-field-component-resolver>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #noContentToDisplay>\n    <div fxLayout=\"column\" fxLayoutAlign=\"center center\">\n        <mat-icon *ngIf=\"displayNoDataIcon\">{{noDataIcon ? noDataIcon : 'block'}}</mat-icon>\n        <span>{{(noDataText ? noDataText : 'tasks.view.noData') | translate}}</span>\n    </div>\n</ng-template>\n", styles: [".border{overflow-y:auto}.paper-view-content{padding:20px;width:22cm;border:1px solid #dddddd}.scrolling_data{overflow-y:auto!important}.grid-rows-auto{grid-template-rows:auto}.responsive-grid{display:block!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.FieldConverterService }, { type: i1.TaskContentService }, { type: i1.PaperViewService }, { type: i1.LoggerService }, { type: i1.TaskEventService, decorators: [{

package/esm2020/lib/task-content/task-content.module.mjs

@@ -8,15 +8,15 @@ import { FieldComponentResolverComponent } from './field-component-resolver/fiel
 import * as i0 from "@angular/core";
 export class TaskContentComponentModule {
 }
-TaskContentComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TaskContentComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TaskContentComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TaskContentComponentModule, declarations: [TaskContentComponent,
+TaskContentComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TaskContentComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TaskContentComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TaskContentComponentModule, declarations: [TaskContentComponent,
         FieldComponentResolverComponent], imports: [CommonModule,
         MaterialModule,
         FlexModule,
         TranslateLibModule,
         SnackBarModule,
         DataFieldsComponentModule], exports: [TaskContentComponent] });
-TaskContentComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TaskContentComponentModule, imports: [[
+TaskContentComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TaskContentComponentModule, imports: [[
             CommonModule,
             MaterialModule,
             FlexModule,
@@ -24,7 +24,7 @@ TaskContentComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.
             SnackBarModule,
             DataFieldsComponentModule
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TaskContentComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TaskContentComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

package/esm2020/lib/toolbar/toolbar.component.mjs

@@ -17,9 +17,9 @@ export class ToolbarComponent extends AbstractToolbarComponent {
         this.selectLangService = selectLangService;
     }
 }
-ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1.TranslateService }, { token: i2.LanguageService }], target: i0.ɵɵFactoryTarget.Component });
-ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolbarComponent, selector: "nc-toolbar", usesInheritance: true, ngImport: i0, template: "<mat-toolbar color=\"primary\">\n    <mat-toolbar-row fxLayout=\"row\">\n        <div class=\"main-toolbar-logo\" fxFlex fxLayout=\"row\">\n            <a href=\"/\">\n                <img [src]=\"logoSrc\" [alt]=\"logoAlt\">\n            </a>\n        </div>\n        <div fxFlex fxHide.gt-xs=\"false\" fxHide.lt-md=\"true\" fxLayout=\"row\" fxLayoutAlign=\"center\">\n            {{appName}}\n        </div>\n        <div class=\"main-toolbar-menu\" fxFlex fxLayout=\"row\" fxLayoutAlign=\"end\">\n            <button mat-button [matMenuTriggerFor]=\"mainMenu\" class=\"main-toolbar-menu-button\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n                <span class=\"main-toolbar-logged-user\" fxHide.xs=\"true\">{{loggedUser}}</span>\n                <mat-icon class=\"main-toolbar-icon\" aria-hidden=\"false\" aria-label=\"Example home icon\">account_circle\n                </mat-icon>\n                <mat-menu #mainMenu=\"matMenu\" class=\"main-toolbar-opened-menu\">\n                    <button mat-menu-item [matMenuTriggerFor]=\"languages\">\n                        <mat-icon class=\"main-toolbar-menu-icon\" aria-hidden=\"false\" aria-label=\"Example home icon\">\n                            language\n                        </mat-icon>\n                        {{ 'toolbar.menu.lang' | translate }}\n                    </button>\n                    <button mat-menu-item>\n                        <mat-icon class=\"main-toolbar-menu-icon\" aria-hidden=\"false\" aria-label=\"Example home icon\">\n                            account_circle\n                        </mat-icon>\n                        {{ 'toolbar.menu.profile' | translate }}\n                    </button>\n                    <button mat-menu-item>\n                        <mat-icon class=\"main-toolbar-menu-icon\" aria-hidden=\"false\" aria-label=\"Example home icon\">\n                            exit_to_app\n                        </mat-icon>\n                        {{ 'toolbar.menu.logout' | translate }}\n                    </button>\n                </mat-menu>\n                <mat-menu #languages=\"matMenu\">\n                    <button mat-menu-item (click)=\"setLang('en-UK')\">{{ 'toolbar.menu.en' | translate }}\n                        <mat-icon *ngIf=\"activeLang('en-UK')\" class=\"main-toolbar-menu-icon\"\n                                  aria-hidden=\"false\" aria-label=\"Example home icon\">keyboard_arrow_left\n                        </mat-icon>\n                    </button>\n                    <button mat-menu-item (click)=\"setLang('sk-SK')\">{{ 'toolbar.menu.sk' | translate }}\n                        <mat-icon *ngIf=\"activeLang('sk-SK')\" class=\"main-toolbar-menu-icon\"\n                                  aria-hidden=\"false\" aria-label=\"Example home icon\">keyboard_arrow_left\n                        </mat-icon>\n                    </button>\n                    <button mat-menu-item (click)=\"setLang('de-DE')\">{{ 'toolbar.menu.de' | translate }}\n                        <mat-icon *ngIf=\"activeLang('de-DE')\" class=\"main-toolbar-menu-icon\"\n                                  aria-hidden=\"false\" aria-label=\"Example home icon\">keyboard_arrow_left\n                        </mat-icon>\n                    </button>\n                </mat-menu>\n            </button>\n        </div>\n    </mat-toolbar-row>\n</mat-toolbar>\n", styles: [".main-toolbar-logo{max-height:60%}.main-toolbar-logo img{width:120px}mat-icon.main-toolbar-icon{font-size:48px;height:100%;margin-right:15px}.main-toolbar-logged-user{margin-right:15px}.main-toolbar-menu,.main-toolbar-menu-button{font-size:20px;height:100%}.main-toolbar-menu-icon{font-size:23px}\n"], components: [{ type: i3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i4.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: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i3.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { type: i7.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i7.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.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { type: i7.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolbarComponent, decorators: [{
+ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1.TranslateService }, { token: i2.LanguageService }], target: i0.ɵɵFactoryTarget.Component });
+ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ToolbarComponent, selector: "nc-toolbar", usesInheritance: true, ngImport: i0, template: "<mat-toolbar color=\"primary\">\n    <mat-toolbar-row fxLayout=\"row\">\n        <div class=\"main-toolbar-logo\" fxFlex fxLayout=\"row\">\n            <a href=\"/\">\n                <img [src]=\"logoSrc\" [alt]=\"logoAlt\">\n            </a>\n        </div>\n        <div fxFlex fxHide.gt-xs=\"false\" fxHide.lt-md=\"true\" fxLayout=\"row\" fxLayoutAlign=\"center\">\n            {{appName}}\n        </div>\n        <div class=\"main-toolbar-menu\" fxFlex fxLayout=\"row\" fxLayoutAlign=\"end\">\n            <button mat-button [matMenuTriggerFor]=\"mainMenu\" class=\"main-toolbar-menu-button\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n                <span class=\"main-toolbar-logged-user\" fxHide.xs=\"true\">{{loggedUser}}</span>\n                <mat-icon class=\"main-toolbar-icon\" aria-hidden=\"false\" aria-label=\"Example home icon\">account_circle\n                </mat-icon>\n                <mat-menu #mainMenu=\"matMenu\" class=\"main-toolbar-opened-menu\">\n                    <button mat-menu-item [matMenuTriggerFor]=\"languages\">\n                        <mat-icon class=\"main-toolbar-menu-icon\" aria-hidden=\"false\" aria-label=\"Example home icon\">\n                            language\n                        </mat-icon>\n                        {{ 'toolbar.menu.lang' | translate }}\n                    </button>\n                    <button mat-menu-item>\n                        <mat-icon class=\"main-toolbar-menu-icon\" aria-hidden=\"false\" aria-label=\"Example home icon\">\n                            account_circle\n                        </mat-icon>\n                        {{ 'toolbar.menu.profile' | translate }}\n                    </button>\n                    <button mat-menu-item>\n                        <mat-icon class=\"main-toolbar-menu-icon\" aria-hidden=\"false\" aria-label=\"Example home icon\">\n                            exit_to_app\n                        </mat-icon>\n                        {{ 'toolbar.menu.logout' | translate }}\n                    </button>\n                </mat-menu>\n                <mat-menu #languages=\"matMenu\">\n                    <button mat-menu-item (click)=\"setLang('en-UK')\">{{ 'toolbar.menu.en' | translate }}\n                        <mat-icon *ngIf=\"activeLang('en-UK')\" class=\"main-toolbar-menu-icon\"\n                                  aria-hidden=\"false\" aria-label=\"Example home icon\">keyboard_arrow_left\n                        </mat-icon>\n                    </button>\n                    <button mat-menu-item (click)=\"setLang('sk-SK')\">{{ 'toolbar.menu.sk' | translate }}\n                        <mat-icon *ngIf=\"activeLang('sk-SK')\" class=\"main-toolbar-menu-icon\"\n                                  aria-hidden=\"false\" aria-label=\"Example home icon\">keyboard_arrow_left\n                        </mat-icon>\n                    </button>\n                    <button mat-menu-item (click)=\"setLang('de-DE')\">{{ 'toolbar.menu.de' | translate }}\n                        <mat-icon *ngIf=\"activeLang('de-DE')\" class=\"main-toolbar-menu-icon\"\n                                  aria-hidden=\"false\" aria-label=\"Example home icon\">keyboard_arrow_left\n                        </mat-icon>\n                    </button>\n                </mat-menu>\n            </button>\n        </div>\n    </mat-toolbar-row>\n</mat-toolbar>\n", styles: [".main-toolbar-logo{max-height:60%}.main-toolbar-logo img{width:120px}mat-icon.main-toolbar-icon{font-size:48px;height:100%;margin-right:15px}.main-toolbar-logged-user{margin-right:15px}.main-toolbar-menu,.main-toolbar-menu-button{font-size:20px;height:100%}.main-toolbar-menu-icon{font-size:23px}\n"], components: [{ type: i3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i4.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: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i3.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { type: i7.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i7.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.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { type: i7.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-toolbar', template: "<mat-toolbar color=\"primary\">\n    <mat-toolbar-row fxLayout=\"row\">\n        <div class=\"main-toolbar-logo\" fxFlex fxLayout=\"row\">\n            <a href=\"/\">\n                <img [src]=\"logoSrc\" [alt]=\"logoAlt\">\n            </a>\n        </div>\n        <div fxFlex fxHide.gt-xs=\"false\" fxHide.lt-md=\"true\" fxLayout=\"row\" fxLayoutAlign=\"center\">\n            {{appName}}\n        </div>\n        <div class=\"main-toolbar-menu\" fxFlex fxLayout=\"row\" fxLayoutAlign=\"end\">\n            <button mat-button [matMenuTriggerFor]=\"mainMenu\" class=\"main-toolbar-menu-button\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n                <span class=\"main-toolbar-logged-user\" fxHide.xs=\"true\">{{loggedUser}}</span>\n                <mat-icon class=\"main-toolbar-icon\" aria-hidden=\"false\" aria-label=\"Example home icon\">account_circle\n                </mat-icon>\n                <mat-menu #mainMenu=\"matMenu\" class=\"main-toolbar-opened-menu\">\n                    <button mat-menu-item [matMenuTriggerFor]=\"languages\">\n                        <mat-icon class=\"main-toolbar-menu-icon\" aria-hidden=\"false\" aria-label=\"Example home icon\">\n                            language\n                        </mat-icon>\n                        {{ 'toolbar.menu.lang' | translate }}\n                    </button>\n                    <button mat-menu-item>\n                        <mat-icon class=\"main-toolbar-menu-icon\" aria-hidden=\"false\" aria-label=\"Example home icon\">\n                            account_circle\n                        </mat-icon>\n                        {{ 'toolbar.menu.profile' | translate }}\n                    </button>\n                    <button mat-menu-item>\n                        <mat-icon class=\"main-toolbar-menu-icon\" aria-hidden=\"false\" aria-label=\"Example home icon\">\n                            exit_to_app\n                        </mat-icon>\n                        {{ 'toolbar.menu.logout' | translate }}\n                    </button>\n                </mat-menu>\n                <mat-menu #languages=\"matMenu\">\n                    <button mat-menu-item (click)=\"setLang('en-UK')\">{{ 'toolbar.menu.en' | translate }}\n                        <mat-icon *ngIf=\"activeLang('en-UK')\" class=\"main-toolbar-menu-icon\"\n                                  aria-hidden=\"false\" aria-label=\"Example home icon\">keyboard_arrow_left\n                        </mat-icon>\n                    </button>\n                    <button mat-menu-item (click)=\"setLang('sk-SK')\">{{ 'toolbar.menu.sk' | translate }}\n                        <mat-icon *ngIf=\"activeLang('sk-SK')\" class=\"main-toolbar-menu-icon\"\n                                  aria-hidden=\"false\" aria-label=\"Example home icon\">keyboard_arrow_left\n                        </mat-icon>\n                    </button>\n                    <button mat-menu-item (click)=\"setLang('de-DE')\">{{ 'toolbar.menu.de' | translate }}\n                        <mat-icon *ngIf=\"activeLang('de-DE')\" class=\"main-toolbar-menu-icon\"\n                                  aria-hidden=\"false\" aria-label=\"Example home icon\">keyboard_arrow_left\n                        </mat-icon>\n                    </button>\n                </mat-menu>\n            </button>\n        </div>\n    </mat-toolbar-row>\n</mat-toolbar>\n", styles: [".main-toolbar-logo{max-height:60%}.main-toolbar-logo img{width:120px}mat-icon.main-toolbar-icon{font-size:48px;height:100%;margin-right:15px}.main-toolbar-logged-user{margin-right:15px}.main-toolbar-menu,.main-toolbar-menu-button{font-size:20px;height:100%}.main-toolbar-menu-icon{font-size:23px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.TranslateService }, { type: i2.LanguageService }]; } });

package/esm2020/lib/toolbar/toolbar.module.mjs

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

package/esm2020/lib/user/profile/profile.component.mjs

@@ -16,9 +16,9 @@ export class ProfileComponent extends AbstractProfileComponent {
         this._userService = _userService;
     }
 }
-ProfileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ProfileComponent, deps: [{ token: i1.UserService }], target: i0.ɵɵFactoryTarget.Component });
-ProfileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ProfileComponent, selector: "nc-user-profile", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!user\">\n    <div fxLayout=\"row\" fxFlex=\"50\" fxLayoutAlign=\"center center\">\n        <mat-card fxLayoutAlign=\"center center\">\n            <h1>{{ 'profile.notLogged' | translate}}</h1>\n        </mat-card>\n    </div>\n</div>\n<div *ngIf=\"user\" fxLayout=\"column\" fxLayoutAlign=\"center start\">\n    <div [style.backgroundImage]=\"'url('+userBanner+')'\" fxLayout=\"row\" class=\"full-width banner mat-elevation-z6\"\n         matRipple fxLayoutAlign=\"start center\">\n        <div class=\"user-avatar-large mat-elevation-z6 margin-banner\" matRipple>\n            <img [src]=\"userAvatar\" alt=\"user avatar\" class=\"full-width full-height\">\n        </div>\n        <h1 class=\"white-name\">{{user.fullName}}</h1>\n    </div>\n    <div fxLayout=\"row\" fxFlex fxLayoutAlign=\"center end\" class=\"full-width div-background netgrif-input\">\n        <div fxFlex=\"80\" class=\"tab-group margin-bottom-x2 mat-elevation-z4\">\n            <div fxLayout=\"row\">\n                <div fxFlex=\"50\" class=\"padding-x2\" fxLayout=\"column\">\n                    <div fxLayout=\"column\" class=\"full-height border\">\n                        <div fxLayoutAlign=\"center start\" class=\"card-title\" matRipple>\n                            <h2>{{ 'profile.personal' | translate}}</h2>\n                        </div>\n                        <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"padding-default\">\n                            <mat-form-field appearance=\"outline\" class=\"full-width\">\n                                <mat-label>{{ 'profile.name' | translate}}</mat-label>\n                                <input matInput disabled [value]=user.firstName>\n                            </mat-form-field>\n                            <mat-form-field appearance=\"outline\" class=\"full-width\">\n                                <mat-label>{{ 'profile.surname' | translate}}</mat-label>\n                                <input matInput disabled [value]=user.lastName>\n                            </mat-form-field>\n                            <mat-form-field appearance=\"outline\" class=\"full-width\">\n                                <mat-label>Email</mat-label>\n                                <input disabled matInput [value]=\"user.email\">\n                            </mat-form-field>\n                        </div>\n                    </div>\n                </div>\n                <div fxFlex=\"50\" class=\"padding-x2\" fxLayout=\"column\">\n                    <div fxLayout=\"column\" class=\"full-height border\">\n                        <div fxLayoutAlign=\"center start\" class=\"card-title\" matRipple>\n                            <h2>{{ 'profile.authority' | translate}}</h2>\n                        </div>\n                        <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"padding-default\">\n                            <mat-form-field appearance=\"outline\" class=\"user-chip-list\">\n                                <mat-chip-list disabled>\n                                    <mat-chip color=\"primary\"\n                                              *ngFor=\"let authority of user.authorities\">{{authority}}</mat-chip>\n                                </mat-chip-list>\n                            </mat-form-field>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div fxLayout=\"row\">\n                <div fxFlex=\"50\" class=\"padding-x2\" fxLayout=\"column\">\n                    <div fxLayout=\"column\" class=\"full-height border\">\n                        <div fxLayoutAlign=\"center start\" class=\"card-title\" matRipple>\n                            <h2>{{ 'profile.roles' | translate}}</h2>\n                        </div>\n                        <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"padding-default\">\n                            <mat-form-field appearance=\"outline\" class=\"user-chip-list\">\n                                <mat-chip-list disabled>\n                                    <mat-chip color=\"primary\" *ngFor=\"let role of user.roles\">{{role.name}}</mat-chip>\n                                </mat-chip-list>\n                            </mat-form-field>\n                        </div>\n                    </div>\n                </div>\n                <div fxFlex=\"50\" class=\"padding-x2\" fxLayout=\"column\">\n                    <div fxLayout=\"column\" class=\"full-height border\">\n                        <div fxLayoutAlign=\"center start\" class=\"card-title\" matRipple>\n                            <h2>{{ 'profile.groups' | translate}}</h2>\n                        </div>\n                        <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"padding-default\">\n                            <mat-form-field appearance=\"outline\" class=\"user-chip-list\">\n                                <mat-chip-list disabled>\n                                    <mat-chip color=\"primary\" *ngFor=\"let group of user.groups\">{{group}}</mat-chip>\n                                </mat-chip-list>\n                            </mat-form-field>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".full-height{height:100%;min-height:100%}.full-width{width:100%;min-width:100%}.padding-default{padding:8px}.padding-half{padding:4px}.padding-x2{padding:16px}.margin-default{margin:8px}.margin-half{margin:4px}.margin-x2{margin:16px}.margin-top-default{margin-top:8px}.margin-top-half{margin-top:4px}.margin-top-x2{margin-top:16px}.margin-bottom-default{margin-bottom:8px}.margin-bottom-half{margin-bottom:4px}.margin-bottom-x2{margin-bottom:16px}.margin-left-default{margin-left:8px}.margin-left-half{margin-left:4px}.margin-left-x2{margin-left:16px}.margin-right-default{margin-right:8px}.margin-right-half{margin-right:4px}.margin-right-x2{margin-right:16px}.user-avatar-large{width:100px;height:100px;border-radius:100px}.banner{height:250px;background-repeat:no-repeat;background-size:cover}.margin-banner{margin-left:10%;margin-right:32px}.white-name{color:#fff}.tab-group{margin-top:-48px;z-index:100;background:#f0f0f0}.div-background{background:#ddd}.user-chip-list{width:100%}.border{border:1px solid #dddddd;border-radius:5px;background:white}\n"], components: [{ type: i2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.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: i6.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: i6.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i7.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: i3.MatLabel, selector: "mat-label" }, { 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: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.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"] }], pipes: { "translate": i9.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ProfileComponent, decorators: [{
+ProfileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ProfileComponent, deps: [{ token: i1.UserService }], target: i0.ɵɵFactoryTarget.Component });
+ProfileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ProfileComponent, selector: "nc-user-profile", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!user\">\n    <div fxLayout=\"row\" fxFlex=\"50\" fxLayoutAlign=\"center center\">\n        <mat-card fxLayoutAlign=\"center center\">\n            <h1>{{ 'profile.notLogged' | translate}}</h1>\n        </mat-card>\n    </div>\n</div>\n<div *ngIf=\"user\" fxLayout=\"column\" fxLayoutAlign=\"center start\">\n    <div [style.backgroundImage]=\"'url('+userBanner+')'\" fxLayout=\"row\" class=\"full-width banner mat-elevation-z6\"\n         matRipple fxLayoutAlign=\"start center\">\n        <div class=\"user-avatar-large mat-elevation-z6 margin-banner\" matRipple>\n            <img [src]=\"userAvatar\" alt=\"user avatar\" class=\"full-width full-height\">\n        </div>\n        <h1 class=\"white-name\">{{user.fullName}}</h1>\n    </div>\n    <div fxLayout=\"row\" fxFlex fxLayoutAlign=\"center end\" class=\"full-width div-background netgrif-input\">\n        <div fxFlex=\"80\" class=\"tab-group margin-bottom-x2 mat-elevation-z4\">\n            <div fxLayout=\"row\">\n                <div fxFlex=\"50\" class=\"padding-x2\" fxLayout=\"column\">\n                    <div fxLayout=\"column\" class=\"full-height border\">\n                        <div fxLayoutAlign=\"center start\" class=\"card-title\" matRipple>\n                            <h2>{{ 'profile.personal' | translate}}</h2>\n                        </div>\n                        <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"padding-default\">\n                            <mat-form-field appearance=\"outline\" class=\"full-width\">\n                                <mat-label>{{ 'profile.name' | translate}}</mat-label>\n                                <input matInput disabled [value]=user.firstName>\n                            </mat-form-field>\n                            <mat-form-field appearance=\"outline\" class=\"full-width\">\n                                <mat-label>{{ 'profile.surname' | translate}}</mat-label>\n                                <input matInput disabled [value]=user.lastName>\n                            </mat-form-field>\n                            <mat-form-field appearance=\"outline\" class=\"full-width\">\n                                <mat-label>Email</mat-label>\n                                <input disabled matInput [value]=\"user.email\">\n                            </mat-form-field>\n                        </div>\n                    </div>\n                </div>\n                <div fxFlex=\"50\" class=\"padding-x2\" fxLayout=\"column\">\n                    <div fxLayout=\"column\" class=\"full-height border\">\n                        <div fxLayoutAlign=\"center start\" class=\"card-title\" matRipple>\n                            <h2>{{ 'profile.authority' | translate}}</h2>\n                        </div>\n                        <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"padding-default\">\n                            <mat-form-field appearance=\"outline\" class=\"user-chip-list\">\n                                <mat-chip-list disabled>\n                                    <mat-chip color=\"primary\"\n                                              *ngFor=\"let authority of user.authorities\">{{authority}}</mat-chip>\n                                </mat-chip-list>\n                            </mat-form-field>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div fxLayout=\"row\">\n                <div fxFlex=\"50\" class=\"padding-x2\" fxLayout=\"column\">\n                    <div fxLayout=\"column\" class=\"full-height border\">\n                        <div fxLayoutAlign=\"center start\" class=\"card-title\" matRipple>\n                            <h2>{{ 'profile.roles' | translate}}</h2>\n                        </div>\n                        <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"padding-default\">\n                            <mat-form-field appearance=\"outline\" class=\"user-chip-list\">\n                                <mat-chip-list disabled>\n                                    <mat-chip color=\"primary\" *ngFor=\"let role of user.roles\">{{role.name}}</mat-chip>\n                                </mat-chip-list>\n                            </mat-form-field>\n                        </div>\n                    </div>\n                </div>\n                <div fxFlex=\"50\" class=\"padding-x2\" fxLayout=\"column\">\n                    <div fxLayout=\"column\" class=\"full-height border\">\n                        <div fxLayoutAlign=\"center start\" class=\"card-title\" matRipple>\n                            <h2>{{ 'profile.groups' | translate}}</h2>\n                        </div>\n                        <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"padding-default\">\n                            <mat-form-field appearance=\"outline\" class=\"user-chip-list\">\n                                <mat-chip-list disabled>\n                                    <mat-chip color=\"primary\" *ngFor=\"let group of user.groups\">{{group}}</mat-chip>\n                                </mat-chip-list>\n                            </mat-form-field>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".full-height{height:100%;min-height:100%}.full-width{width:100%;min-width:100%}.padding-default{padding:8px}.padding-half{padding:4px}.padding-x2{padding:16px}.margin-default{margin:8px}.margin-half{margin:4px}.margin-x2{margin:16px}.margin-top-default{margin-top:8px}.margin-top-half{margin-top:4px}.margin-top-x2{margin-top:16px}.margin-bottom-default{margin-bottom:8px}.margin-bottom-half{margin-bottom:4px}.margin-bottom-x2{margin-bottom:16px}.margin-left-default{margin-left:8px}.margin-left-half{margin-left:4px}.margin-left-x2{margin-left:16px}.margin-right-default{margin-right:8px}.margin-right-half{margin-right:4px}.margin-right-x2{margin-right:16px}.user-avatar-large{width:100px;height:100px;border-radius:100px}.banner{height:250px;background-repeat:no-repeat;background-size:cover}.margin-banner{margin-left:10%;margin-right:32px}.white-name{color:#fff}.tab-group{margin-top:-48px;z-index:100;background:#f0f0f0}.div-background{background:#ddd}.user-chip-list{width:100%}.border{border:1px solid #dddddd;border-radius:5px;background:white}\n"], components: [{ type: i2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.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: i6.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: i6.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i7.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: i3.MatLabel, selector: "mat-label" }, { 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: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.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"] }], pipes: { "translate": i9.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ProfileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-user-profile', template: "<div *ngIf=\"!user\">\n    <div fxLayout=\"row\" fxFlex=\"50\" fxLayoutAlign=\"center center\">\n        <mat-card fxLayoutAlign=\"center center\">\n            <h1>{{ 'profile.notLogged' | translate}}</h1>\n        </mat-card>\n    </div>\n</div>\n<div *ngIf=\"user\" fxLayout=\"column\" fxLayoutAlign=\"center start\">\n    <div [style.backgroundImage]=\"'url('+userBanner+')'\" fxLayout=\"row\" class=\"full-width banner mat-elevation-z6\"\n         matRipple fxLayoutAlign=\"start center\">\n        <div class=\"user-avatar-large mat-elevation-z6 margin-banner\" matRipple>\n            <img [src]=\"userAvatar\" alt=\"user avatar\" class=\"full-width full-height\">\n        </div>\n        <h1 class=\"white-name\">{{user.fullName}}</h1>\n    </div>\n    <div fxLayout=\"row\" fxFlex fxLayoutAlign=\"center end\" class=\"full-width div-background netgrif-input\">\n        <div fxFlex=\"80\" class=\"tab-group margin-bottom-x2 mat-elevation-z4\">\n            <div fxLayout=\"row\">\n                <div fxFlex=\"50\" class=\"padding-x2\" fxLayout=\"column\">\n                    <div fxLayout=\"column\" class=\"full-height border\">\n                        <div fxLayoutAlign=\"center start\" class=\"card-title\" matRipple>\n                            <h2>{{ 'profile.personal' | translate}}</h2>\n                        </div>\n                        <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"padding-default\">\n                            <mat-form-field appearance=\"outline\" class=\"full-width\">\n                                <mat-label>{{ 'profile.name' | translate}}</mat-label>\n                                <input matInput disabled [value]=user.firstName>\n                            </mat-form-field>\n                            <mat-form-field appearance=\"outline\" class=\"full-width\">\n                                <mat-label>{{ 'profile.surname' | translate}}</mat-label>\n                                <input matInput disabled [value]=user.lastName>\n                            </mat-form-field>\n                            <mat-form-field appearance=\"outline\" class=\"full-width\">\n                                <mat-label>Email</mat-label>\n                                <input disabled matInput [value]=\"user.email\">\n                            </mat-form-field>\n                        </div>\n                    </div>\n                </div>\n                <div fxFlex=\"50\" class=\"padding-x2\" fxLayout=\"column\">\n                    <div fxLayout=\"column\" class=\"full-height border\">\n                        <div fxLayoutAlign=\"center start\" class=\"card-title\" matRipple>\n                            <h2>{{ 'profile.authority' | translate}}</h2>\n                        </div>\n                        <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"padding-default\">\n                            <mat-form-field appearance=\"outline\" class=\"user-chip-list\">\n                                <mat-chip-list disabled>\n                                    <mat-chip color=\"primary\"\n                                              *ngFor=\"let authority of user.authorities\">{{authority}}</mat-chip>\n                                </mat-chip-list>\n                            </mat-form-field>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div fxLayout=\"row\">\n                <div fxFlex=\"50\" class=\"padding-x2\" fxLayout=\"column\">\n                    <div fxLayout=\"column\" class=\"full-height border\">\n                        <div fxLayoutAlign=\"center start\" class=\"card-title\" matRipple>\n                            <h2>{{ 'profile.roles' | translate}}</h2>\n                        </div>\n                        <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"padding-default\">\n                            <mat-form-field appearance=\"outline\" class=\"user-chip-list\">\n                                <mat-chip-list disabled>\n                                    <mat-chip color=\"primary\" *ngFor=\"let role of user.roles\">{{role.name}}</mat-chip>\n                                </mat-chip-list>\n                            </mat-form-field>\n                        </div>\n                    </div>\n                </div>\n                <div fxFlex=\"50\" class=\"padding-x2\" fxLayout=\"column\">\n                    <div fxLayout=\"column\" class=\"full-height border\">\n                        <div fxLayoutAlign=\"center start\" class=\"card-title\" matRipple>\n                            <h2>{{ 'profile.groups' | translate}}</h2>\n                        </div>\n                        <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"padding-default\">\n                            <mat-form-field appearance=\"outline\" class=\"user-chip-list\">\n                                <mat-chip-list disabled>\n                                    <mat-chip color=\"primary\" *ngFor=\"let group of user.groups\">{{group}}</mat-chip>\n                                </mat-chip-list>\n                            </mat-form-field>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".full-height{height:100%;min-height:100%}.full-width{width:100%;min-width:100%}.padding-default{padding:8px}.padding-half{padding:4px}.padding-x2{padding:16px}.margin-default{margin:8px}.margin-half{margin:4px}.margin-x2{margin:16px}.margin-top-default{margin-top:8px}.margin-top-half{margin-top:4px}.margin-top-x2{margin-top:16px}.margin-bottom-default{margin-bottom:8px}.margin-bottom-half{margin-bottom:4px}.margin-bottom-x2{margin-bottom:16px}.margin-left-default{margin-left:8px}.margin-left-half{margin-left:4px}.margin-left-x2{margin-left:16px}.margin-right-default{margin-right:8px}.margin-right-half{margin-right:4px}.margin-right-x2{margin-right:16px}.user-avatar-large{width:100px;height:100px;border-radius:100px}.banner{height:250px;background-repeat:no-repeat;background-size:cover}.margin-banner{margin-left:10%;margin-right:32px}.white-name{color:#fff}.tab-group{margin-top:-48px;z-index:100;background:#f0f0f0}.div-background{background:#ddd}.user-chip-list{width:100%}.border{border:1px solid #dddddd;border-radius:5px;background:white}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.UserService }]; } });

package/esm2020/lib/user/profile/profile.module.mjs

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

package/esm2020/lib/user/user-card/user-card.component.mjs

@@ -14,9 +14,9 @@ export class UserCardComponent extends AbstractUserCardComponent {
         this._injector = _injector;
     }
 }
-UserCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UserCardComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-UserCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: UserCardComponent, selector: "nc-user-card", usesInheritance: true, ngImport: i0, template: "<div [ngSwitch]=\"mode\" class=\"no-outline\">\n    <div *ngSwitchCase=\"'full'\" #fullShowcase fxLayout=\"column\" fxLayoutAlign=\"start center\"\n         class=\"full-showcase-container no-outline margin-bottom-x2\" [style.width.px]=\"width\"\n         [routerLink]=\"link\">\n        <ng-template [ngIf]=\"!userBannerExists()\">\n            <div class=\"banner-wrapper mat-elevation-z6\" matRipple [matRippleTrigger]=\"fullShowcase\">\n                <div [style.backgroundImage]=\"'url(assets/netgrif-cubes-upper-left.png)'\" class=\"cube-upper-left\">\n                    <div [style.backgroundImage]=\"'url(assets/netgrif-cubes-down-right.png)'\" class=\"cube-down-right\"></div>\n                </div>\n            </div>\n        </ng-template>\n        <ng-template [ngIf]=\"userBannerExists()\">\n            <div [style.backgroundImage]=\"'url('+userBanner+')'\" class=\"full-width user-banner mat-elevation-z6\" matRipple\n                 [matRippleTrigger]=\"fullShowcase\"></div>\n        </ng-template>\n        <div class=\"user-avatar-large margin-bottom-default mat-elevation-z6\" matRipple\n             [matRippleTrigger]=\"fullShowcase\">\n            <img [src]=\"userAvatar\" alt=\"user avatar\" class=\"full-width full-height\">\n        </div>\n        <div fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"full-width full-showcase-text padding-default\">\n            <span>{{user.fullName}}</span>\n            <span>{{user.email}}</span>\n        </div>\n    </div>\n    <div *ngSwitchCase=\"'horizontal'\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\n         class=\"horizontal-showcase-container no-outline padding-default\" [routerLink]=\"link\" matRipple>\n        <div class=\"user-avatar-large mat-elevation-z6\">\n            <img [src]=\"userAvatar\" alt=\"user avatar\" class=\"full-width full-height\">\n        </div>\n        <div fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"full-width full-showcase-text\">\n            <span>{{user.fullName}}</span>\n            <span>{{user.email}}</span>\n        </div>\n    </div>\n    <div *ngSwitchCase=\"'vertical'\" fxLayout=\"column\" fxLayoutAlign=\"start center\"\n         class=\"vertical-showcase-container no-outline padding-default\"\n         [routerLink]=\"link\" matRipple>\n        <div class=\"user-avatar-large mat-elevation-z6\">\n            <img [src]=\"userAvatar\" alt=\"user avatar\" class=\"full-width full-height\">\n        </div>\n        <div fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"full-width full-showcase-text\">\n            <span>{{user.fullName}}</span>\n            <span>{{user.email}}</span>\n        </div>\n    </div>\n    <div *ngSwitchCase=\"'icon'\" [routerLink]=\"link\">\n        <div class=\"mat-elevation-z6 no-outline\"\n             [ngClass]=\"{'user-avatar-large':iconStyle === 'large', 'user-avatar-small':iconStyle==='small'}\"\n             [matTooltip]=\"user.fullName+'\\n'+user.email\"\n             matTooltipHideDelay=\"1000\"\n             [matTooltipPosition]=\"tooltipPosition\"\n             matRipple>\n            <img [src]=\"userAvatar\" alt=\"user avatar\" class=\"full-width full-height\">\n        </div>\n    </div>\n    <div *ngSwitchDefault>\n        <span>{{ 'side-menu.user.showcase' | translate}}</span>\n    </div>\n</div>\n\n\n", styles: [".full-height{height:100%;min-height:100%}.full-width{width:100%;min-width:100%}.padding-default{padding:8px}.padding-half{padding:4px}.padding-x2{padding:16px}.margin-default{margin:8px}.margin-half{margin:4px}.margin-x2{margin:16px}.margin-top-default{margin-top:8px}.margin-top-half{margin-top:4px}.margin-top-x2{margin-top:16px}.margin-bottom-default{margin-bottom:8px}.margin-bottom-half{margin-bottom:4px}.margin-bottom-x2{margin-bottom:16px}.margin-left-default{margin-left:8px}.margin-left-half{margin-left:4px}.margin-left-x2{margin-left:16px}.margin-right-default{margin-right:8px}.margin-right-half{margin-right:4px}.margin-right-x2{margin-right:16px}.full-showcase-container .user-banner{height:100px;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.full-showcase-container .user-avatar-large{margin-top:-32px}.banner-wrapper{height:100px;width:100%}.cube-upper-left{width:100%;height:100%;background-repeat:no-repeat;background-size:auto 80px}.cube-down-right{background-repeat:no-repeat;background-position-x:right;background-position-y:bottom;background-size:auto 30px;min-width:100%;min-height:100%;padding:0;margin:0}.user-avatar-large{width:64px;height:64px;border-radius:64px}.user-avatar-small{width:46px;height:46px;border-radius:46px}.full-showcase-text{text-align:center}.full-showcase-text span{font-size:12px;color:#616161}.full-showcase-text span:first-child{font-size:20px;color:#424242;margin-bottom:4px}.horizontal-showcase-container{height:80px;border:1px solid #fd971f;border-radius:6px}.horizontal-showcase-container .user-avatar-large{margin-right:8px}.vertical-showcase-container{width:160px;border:1px solid #f0ad4e;border-radius:6px;white-space:pre-line}.vertical-showcase-container .user-avatar-large{margin-bottom:8px}::ng-deep .mat-tooltip{white-space:pre-line!important;text-align:center}.no-outline{outline:none!important}\n"], directives: [{ type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.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: i2.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: i3.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.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: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "translate": i7.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UserCardComponent, decorators: [{
+UserCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UserCardComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+UserCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: UserCardComponent, selector: "nc-user-card", usesInheritance: true, ngImport: i0, template: "<div [ngSwitch]=\"mode\" class=\"no-outline\">\n    <div *ngSwitchCase=\"'full'\" #fullShowcase fxLayout=\"column\" fxLayoutAlign=\"start center\"\n         class=\"full-showcase-container no-outline margin-bottom-x2\" [style.width.px]=\"width\"\n         [routerLink]=\"link\">\n        <ng-template [ngIf]=\"!userBannerExists()\">\n            <div class=\"banner-wrapper mat-elevation-z6\" matRipple [matRippleTrigger]=\"fullShowcase\">\n                <div [style.backgroundImage]=\"'url(assets/netgrif-cubes-upper-left.png)'\" class=\"cube-upper-left\">\n                    <div [style.backgroundImage]=\"'url(assets/netgrif-cubes-down-right.png)'\" class=\"cube-down-right\"></div>\n                </div>\n            </div>\n        </ng-template>\n        <ng-template [ngIf]=\"userBannerExists()\">\n            <div [style.backgroundImage]=\"'url('+userBanner+')'\" class=\"full-width user-banner mat-elevation-z6\" matRipple\n                 [matRippleTrigger]=\"fullShowcase\"></div>\n        </ng-template>\n        <div class=\"user-avatar-large margin-bottom-default mat-elevation-z6\" matRipple\n             [matRippleTrigger]=\"fullShowcase\">\n            <img [src]=\"userAvatar\" alt=\"user avatar\" class=\"full-width full-height\">\n        </div>\n        <div fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"full-width full-showcase-text padding-default\">\n            <span>{{user.fullName}}</span>\n            <span>{{user.email}}</span>\n        </div>\n    </div>\n    <div *ngSwitchCase=\"'horizontal'\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\n         class=\"horizontal-showcase-container no-outline padding-default\" [routerLink]=\"link\" matRipple>\n        <div class=\"user-avatar-large mat-elevation-z6\">\n            <img [src]=\"userAvatar\" alt=\"user avatar\" class=\"full-width full-height\">\n        </div>\n        <div fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"full-width full-showcase-text\">\n            <span>{{user.fullName}}</span>\n            <span>{{user.email}}</span>\n        </div>\n    </div>\n    <div *ngSwitchCase=\"'vertical'\" fxLayout=\"column\" fxLayoutAlign=\"start center\"\n         class=\"vertical-showcase-container no-outline padding-default\"\n         [routerLink]=\"link\" matRipple>\n        <div class=\"user-avatar-large mat-elevation-z6\">\n            <img [src]=\"userAvatar\" alt=\"user avatar\" class=\"full-width full-height\">\n        </div>\n        <div fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"full-width full-showcase-text\">\n            <span>{{user.fullName}}</span>\n            <span>{{user.email}}</span>\n        </div>\n    </div>\n    <div *ngSwitchCase=\"'icon'\" [routerLink]=\"link\">\n        <div class=\"mat-elevation-z6 no-outline\"\n             [ngClass]=\"{'user-avatar-large':iconStyle === 'large', 'user-avatar-small':iconStyle==='small'}\"\n             [matTooltip]=\"user.fullName+'\\n'+user.email\"\n             matTooltipHideDelay=\"1000\"\n             [matTooltipPosition]=\"tooltipPosition\"\n             matRipple>\n            <img [src]=\"userAvatar\" alt=\"user avatar\" class=\"full-width full-height\">\n        </div>\n    </div>\n    <div *ngSwitchDefault>\n        <span>{{ 'side-menu.user.showcase' | translate}}</span>\n    </div>\n</div>\n\n\n", styles: [".full-height{height:100%;min-height:100%}.full-width{width:100%;min-width:100%}.padding-default{padding:8px}.padding-half{padding:4px}.padding-x2{padding:16px}.margin-default{margin:8px}.margin-half{margin:4px}.margin-x2{margin:16px}.margin-top-default{margin-top:8px}.margin-top-half{margin-top:4px}.margin-top-x2{margin-top:16px}.margin-bottom-default{margin-bottom:8px}.margin-bottom-half{margin-bottom:4px}.margin-bottom-x2{margin-bottom:16px}.margin-left-default{margin-left:8px}.margin-left-half{margin-left:4px}.margin-left-x2{margin-left:16px}.margin-right-default{margin-right:8px}.margin-right-half{margin-right:4px}.margin-right-x2{margin-right:16px}.full-showcase-container .user-banner{height:100px;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.full-showcase-container .user-avatar-large{margin-top:-32px}.banner-wrapper{height:100px;width:100%}.cube-upper-left{width:100%;height:100%;background-repeat:no-repeat;background-size:auto 80px}.cube-down-right{background-repeat:no-repeat;background-position-x:right;background-position-y:bottom;background-size:auto 30px;min-width:100%;min-height:100%;padding:0;margin:0}.user-avatar-large{width:64px;height:64px;border-radius:64px}.user-avatar-small{width:46px;height:46px;border-radius:46px}.full-showcase-text{text-align:center}.full-showcase-text span{font-size:12px;color:#616161}.full-showcase-text span:first-child{font-size:20px;color:#424242;margin-bottom:4px}.horizontal-showcase-container{height:80px;border:1px solid #fd971f;border-radius:6px}.horizontal-showcase-container .user-avatar-large{margin-right:8px}.vertical-showcase-container{width:160px;border:1px solid #f0ad4e;border-radius:6px;white-space:pre-line}.vertical-showcase-container .user-avatar-large{margin-bottom:8px}::ng-deep .mat-tooltip{white-space:pre-line!important;text-align:center}.no-outline{outline:none!important}\n"], directives: [{ type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.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: i2.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: i3.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.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: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "translate": i7.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UserCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-user-card', template: "<div [ngSwitch]=\"mode\" class=\"no-outline\">\n    <div *ngSwitchCase=\"'full'\" #fullShowcase fxLayout=\"column\" fxLayoutAlign=\"start center\"\n         class=\"full-showcase-container no-outline margin-bottom-x2\" [style.width.px]=\"width\"\n         [routerLink]=\"link\">\n        <ng-template [ngIf]=\"!userBannerExists()\">\n            <div class=\"banner-wrapper mat-elevation-z6\" matRipple [matRippleTrigger]=\"fullShowcase\">\n                <div [style.backgroundImage]=\"'url(assets/netgrif-cubes-upper-left.png)'\" class=\"cube-upper-left\">\n                    <div [style.backgroundImage]=\"'url(assets/netgrif-cubes-down-right.png)'\" class=\"cube-down-right\"></div>\n                </div>\n            </div>\n        </ng-template>\n        <ng-template [ngIf]=\"userBannerExists()\">\n            <div [style.backgroundImage]=\"'url('+userBanner+')'\" class=\"full-width user-banner mat-elevation-z6\" matRipple\n                 [matRippleTrigger]=\"fullShowcase\"></div>\n        </ng-template>\n        <div class=\"user-avatar-large margin-bottom-default mat-elevation-z6\" matRipple\n             [matRippleTrigger]=\"fullShowcase\">\n            <img [src]=\"userAvatar\" alt=\"user avatar\" class=\"full-width full-height\">\n        </div>\n        <div fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"full-width full-showcase-text padding-default\">\n            <span>{{user.fullName}}</span>\n            <span>{{user.email}}</span>\n        </div>\n    </div>\n    <div *ngSwitchCase=\"'horizontal'\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\n         class=\"horizontal-showcase-container no-outline padding-default\" [routerLink]=\"link\" matRipple>\n        <div class=\"user-avatar-large mat-elevation-z6\">\n            <img [src]=\"userAvatar\" alt=\"user avatar\" class=\"full-width full-height\">\n        </div>\n        <div fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"full-width full-showcase-text\">\n            <span>{{user.fullName}}</span>\n            <span>{{user.email}}</span>\n        </div>\n    </div>\n    <div *ngSwitchCase=\"'vertical'\" fxLayout=\"column\" fxLayoutAlign=\"start center\"\n         class=\"vertical-showcase-container no-outline padding-default\"\n         [routerLink]=\"link\" matRipple>\n        <div class=\"user-avatar-large mat-elevation-z6\">\n            <img [src]=\"userAvatar\" alt=\"user avatar\" class=\"full-width full-height\">\n        </div>\n        <div fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"full-width full-showcase-text\">\n            <span>{{user.fullName}}</span>\n            <span>{{user.email}}</span>\n        </div>\n    </div>\n    <div *ngSwitchCase=\"'icon'\" [routerLink]=\"link\">\n        <div class=\"mat-elevation-z6 no-outline\"\n             [ngClass]=\"{'user-avatar-large':iconStyle === 'large', 'user-avatar-small':iconStyle==='small'}\"\n             [matTooltip]=\"user.fullName+'\\n'+user.email\"\n             matTooltipHideDelay=\"1000\"\n             [matTooltipPosition]=\"tooltipPosition\"\n             matRipple>\n            <img [src]=\"userAvatar\" alt=\"user avatar\" class=\"full-width full-height\">\n        </div>\n    </div>\n    <div *ngSwitchDefault>\n        <span>{{ 'side-menu.user.showcase' | translate}}</span>\n    </div>\n</div>\n\n\n", styles: [".full-height{height:100%;min-height:100%}.full-width{width:100%;min-width:100%}.padding-default{padding:8px}.padding-half{padding:4px}.padding-x2{padding:16px}.margin-default{margin:8px}.margin-half{margin:4px}.margin-x2{margin:16px}.margin-top-default{margin-top:8px}.margin-top-half{margin-top:4px}.margin-top-x2{margin-top:16px}.margin-bottom-default{margin-bottom:8px}.margin-bottom-half{margin-bottom:4px}.margin-bottom-x2{margin-bottom:16px}.margin-left-default{margin-left:8px}.margin-left-half{margin-left:4px}.margin-left-x2{margin-left:16px}.margin-right-default{margin-right:8px}.margin-right-half{margin-right:4px}.margin-right-x2{margin-right:16px}.full-showcase-container .user-banner{height:100px;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.full-showcase-container .user-avatar-large{margin-top:-32px}.banner-wrapper{height:100px;width:100%}.cube-upper-left{width:100%;height:100%;background-repeat:no-repeat;background-size:auto 80px}.cube-down-right{background-repeat:no-repeat;background-position-x:right;background-position-y:bottom;background-size:auto 30px;min-width:100%;min-height:100%;padding:0;margin:0}.user-avatar-large{width:64px;height:64px;border-radius:64px}.user-avatar-small{width:46px;height:46px;border-radius:46px}.full-showcase-text{text-align:center}.full-showcase-text span{font-size:12px;color:#616161}.full-showcase-text span:first-child{font-size:20px;color:#424242;margin-bottom:4px}.horizontal-showcase-container{height:80px;border:1px solid #fd971f;border-radius:6px}.horizontal-showcase-container .user-avatar-large{margin-right:8px}.vertical-showcase-container{width:160px;border:1px solid #f0ad4e;border-radius:6px;white-space:pre-line}.vertical-showcase-container .user-avatar-large{margin-bottom:8px}::ng-deep .mat-tooltip{white-space:pre-line!important;text-align:center}.no-outline{outline:none!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; } });

package/esm2020/lib/user/user.module.mjs

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