@netgrif/components 6.4.0-rc.8 → 6.4.0

package/fesm2015/netgrif-components.mjs

@@ -2259,10 +2259,10 @@ class UserDefaultFieldComponent extends AbstractUserDefaultFieldComponent {
     }
 }
 UserDefaultFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UserDefaultFieldComponent, deps: [{ token: i1$3.MatDialog }, { token: i1.SnackBarService }, { token: i1$2.TranslateService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-UserDefaultFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: UserDefaultFieldComponent, selector: "nc-user-default-field", usesInheritance: true, ngImport: i0, template: "<div fxLayoutAlign=\"center center\" fxLayout=\"row\">\n    <div fxFlex=\"100\" class=\"netgrif-user-padding\">\n        <div #userLabel class=\"user-field-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\">\n            {{dataField.title}}\n            <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!dataField.disabled\"></nc-required-label>\n        </div>\n        <div class=\"form-input button-icon-input full-width\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\n             [ngClass]=\"{'form-input-disabled': formControlRef.disabled, 'form-input-error': dataField.isInvalid(formControlRef)}\"\n             [ngStyle]=\"{\n                    '-webkit-clip-path': getCutProperty(userLabel),\n                    'clip-path': getCutProperty(userLabel)\n            }\">\n            <button mat-icon-button\n                    *ngIf=\"!!dataField.value\"\n                    [disabled]=\"formControlRef.disabled\"\n                    color=\"primary\"\n                    (click)=\"selectUser()\"\n                    [matTooltip]=\"'dataField.file.clickToUpload' | translate\"\n                    [class.do-not-click]=\"formControlRef.disabled\">\n                <mat-icon (click)='deleteUser()' color='warn' *ngIf='!formControlRef.disabled'>close</mat-icon>\n            </button>\n            <button mat-icon-button\n                    *ngIf=\"!dataField.value\"\n                    [disabled]=\"formControlRef.disabled\"\n                    color=\"primary\"\n                    (click)=\"selectUser()\"\n                    [matTooltip]=\"'dataField.file.clickToUpload' | translate\"\n                    [class.do-not-click]=\"formControlRef.disabled\">\n                <mat-icon>person_add</mat-icon>\n            </button>\n            <span fxFlex class=\"input-name-ellipsis\" [ngClass]=\"{'input-placeholder': !!dataField.value, 'no-cursor': !!dataField.value && formControlRef.disabled}\">\n                    {{!!dataField.value ? dataField.value.fullName : 'dataField.user.selectUser' | translate}}</span>\n        </div>\n        <mat-hint class=\"user-hint-error\" [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\"\n                  *ngIf=\"!dataField.isInvalid(formControlRef) && hasHint()\">{{dataField.description}}</mat-hint>\n        <mat-error class=\"user-hint-error\"\n                   *ngIf=\"dataField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n    </div>\n</div>\n", styles: [".do-not-click:hover{cursor:not-allowed}.input-name-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.input-placeholder{color:#64748b}.button-icon-input{padding:2px!important}.full-width{width:100%;min-width:100%}.form-input{background:#FFFFFF;color:#64748b;outline:none;border:1px solid #64748B;text-align:left;font-size:14px;line-height:20px;border-radius:6px;min-width:5px;padding:8px 15px;box-sizing:border-box;height:44px}.form-input:hover{border-width:2px;padding-left:1px!important}.form-input-disabled{background:transparent!important;border-color:#cbd5e1!important}.form-input-disabled:hover{border-width:1px;padding:2px!important}.user-hint-error{font-size:75%;padding:0 1em;width:unset;position:absolute;margin-top:.5em;top:calc(100% - 2em)}.image-preview{width:auto;height:auto;cursor:pointer}.no-cursor{cursor:default!important;color:#64748b}.border-default{border-width:1px;border-style:solid;border-color:#000}@media only screen and (max-width: 959.99px){.input-name-ellipsis{word-break:break-word;white-space:normal;overflow-y:auto;max-height:40px}}.user-field-label{transform:translate(.4em,-.45em) scale(.75);transform-origin:left;color:#64748b;background:transparent;width:fit-content;padding:0 .5em;z-index:5;height:0;position:relative}.netgrif-user-padding{padding-bottom:13px;position:relative}\n"], components: [{ type: RequiredLabelComponent, selector: "nc-required-label", inputs: ["isIn"] }, { 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: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i6$1.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$1.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$1.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: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.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: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6$2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1$2.TranslatePipe } });
+UserDefaultFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: UserDefaultFieldComponent, selector: "nc-user-default-field", usesInheritance: true, ngImport: i0, template: "<div fxLayoutAlign=\"center center\" fxLayout=\"row\">\n    <div fxFlex=\"100\" class=\"netgrif-user-padding\">\n        <div #userLabel class=\"user-field-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\">\n            {{dataField.title}}\n            <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!dataField.disabled\"></nc-required-label>\n        </div>\n        <div class=\"form-input button-icon-input full-width\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\n             [ngClass]=\"{'form-input-disabled': formControlRef.disabled, 'form-input-error': dataField.isInvalid(formControlRef)}\"\n             [ngStyle]=\"{\n                    '-webkit-clip-path': getCutProperty(userLabel),\n                    'clip-path': getCutProperty(userLabel)\n            }\">\n            <button mat-icon-button\n                    *ngIf=\"!!dataField.value && !formControlRef.disabled\"\n                    [disabled]=\"formControlRef.disabled\"\n                    color=\"primary\"\n                    (click)=\"selectUser()\"\n                    [matTooltip]=\"'dataField.user.deleteUser' | translate\"\n                    [class.do-not-click]=\"formControlRef.disabled\">\n                <mat-icon (click)='deleteUser()' color='warn' *ngIf='!formControlRef.disabled'>close</mat-icon>\n            </button>\n            <button mat-icon-button\n                    *ngIf=\"!dataField.value && !formControlRef.disabled\"\n                    [disabled]=\"formControlRef.disabled\"\n                    color=\"primary\"\n                    (click)=\"selectUser()\"\n                    [matTooltip]=\"'dataField.user.selectUser' | translate\"\n                    [class.do-not-click]=\"formControlRef.disabled\">\n                <mat-icon>person_add</mat-icon>\n            </button>\n            <span fxFlex class=\"input-name-ellipsis padding-left\" [ngClass]=\"{'input-placeholder': !!dataField.value, 'no-cursor': !!dataField.value && formControlRef.disabled}\">\n                    {{!!dataField.value ? dataField.value.fullName : 'dataField.user.selectUser' | translate}}</span>\n        </div>\n        <mat-hint class=\"user-hint-error\" [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\"\n                  *ngIf=\"!dataField.isInvalid(formControlRef) && hasHint()\">{{dataField.description}}</mat-hint>\n        <mat-error class=\"user-hint-error\"\n                   *ngIf=\"dataField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n    </div>\n</div>\n", styles: [".do-not-click:hover{cursor:not-allowed}.input-name-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.input-placeholder{color:#64748b}.button-icon-input{padding:2px!important}.full-width{width:100%;min-width:100%}.padding-left{padding-left:8px}.form-input{background:#FFFFFF;color:#64748b;outline:none;border:1px solid #64748B;text-align:left;font-size:14px;line-height:20px;border-radius:6px;min-width:5px;padding:8px 15px;box-sizing:border-box;height:44px}.form-input:hover{border-width:2px;padding-left:1px!important}.form-input-disabled{background:transparent!important;border-color:#cbd5e1!important}.form-input-disabled:hover{border-width:1px;padding:2px!important}.user-hint-error{font-size:75%;padding:0 1em;width:unset;position:absolute;margin-top:.5em;top:calc(100% - 2em)}.image-preview{width:auto;height:auto;cursor:pointer}.no-cursor{cursor:default!important;color:#64748b}.border-default{border-width:1px;border-style:solid;border-color:#000}@media only screen and (max-width: 959.99px){.input-name-ellipsis{word-break:break-word;white-space:normal;overflow-y:auto;max-height:40px}}.user-field-label{transform:translate(.4em,-.45em) scale(.75);transform-origin:left;color:#64748b;background:transparent;width:fit-content;padding:0 .5em;z-index:5;height:0;position:relative}.netgrif-user-padding{padding-bottom:13px;position:relative}\n"], components: [{ type: RequiredLabelComponent, selector: "nc-required-label", inputs: ["isIn"] }, { 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: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i6$1.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$1.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$1.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: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.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: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6$2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UserDefaultFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nc-user-default-field', template: "<div fxLayoutAlign=\"center center\" fxLayout=\"row\">\n    <div fxFlex=\"100\" class=\"netgrif-user-padding\">\n        <div #userLabel class=\"user-field-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\">\n            {{dataField.title}}\n            <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!dataField.disabled\"></nc-required-label>\n        </div>\n        <div class=\"form-input button-icon-input full-width\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\n             [ngClass]=\"{'form-input-disabled': formControlRef.disabled, 'form-input-error': dataField.isInvalid(formControlRef)}\"\n             [ngStyle]=\"{\n                    '-webkit-clip-path': getCutProperty(userLabel),\n                    'clip-path': getCutProperty(userLabel)\n            }\">\n            <button mat-icon-button\n                    *ngIf=\"!!dataField.value\"\n                    [disabled]=\"formControlRef.disabled\"\n                    color=\"primary\"\n                    (click)=\"selectUser()\"\n                    [matTooltip]=\"'dataField.file.clickToUpload' | translate\"\n                    [class.do-not-click]=\"formControlRef.disabled\">\n                <mat-icon (click)='deleteUser()' color='warn' *ngIf='!formControlRef.disabled'>close</mat-icon>\n            </button>\n            <button mat-icon-button\n                    *ngIf=\"!dataField.value\"\n                    [disabled]=\"formControlRef.disabled\"\n                    color=\"primary\"\n                    (click)=\"selectUser()\"\n                    [matTooltip]=\"'dataField.file.clickToUpload' | translate\"\n                    [class.do-not-click]=\"formControlRef.disabled\">\n                <mat-icon>person_add</mat-icon>\n            </button>\n            <span fxFlex class=\"input-name-ellipsis\" [ngClass]=\"{'input-placeholder': !!dataField.value, 'no-cursor': !!dataField.value && formControlRef.disabled}\">\n                    {{!!dataField.value ? dataField.value.fullName : 'dataField.user.selectUser' | translate}}</span>\n        </div>\n        <mat-hint class=\"user-hint-error\" [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\"\n                  *ngIf=\"!dataField.isInvalid(formControlRef) && hasHint()\">{{dataField.description}}</mat-hint>\n        <mat-error class=\"user-hint-error\"\n                   *ngIf=\"dataField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n    </div>\n</div>\n", styles: [".do-not-click:hover{cursor:not-allowed}.input-name-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.input-placeholder{color:#64748b}.button-icon-input{padding:2px!important}.full-width{width:100%;min-width:100%}.form-input{background:#FFFFFF;color:#64748b;outline:none;border:1px solid #64748B;text-align:left;font-size:14px;line-height:20px;border-radius:6px;min-width:5px;padding:8px 15px;box-sizing:border-box;height:44px}.form-input:hover{border-width:2px;padding-left:1px!important}.form-input-disabled{background:transparent!important;border-color:#cbd5e1!important}.form-input-disabled:hover{border-width:1px;padding:2px!important}.user-hint-error{font-size:75%;padding:0 1em;width:unset;position:absolute;margin-top:.5em;top:calc(100% - 2em)}.image-preview{width:auto;height:auto;cursor:pointer}.no-cursor{cursor:default!important;color:#64748b}.border-default{border-width:1px;border-style:solid;border-color:#000}@media only screen and (max-width: 959.99px){.input-name-ellipsis{word-break:break-word;white-space:normal;overflow-y:auto;max-height:40px}}.user-field-label{transform:translate(.4em,-.45em) scale(.75);transform-origin:left;color:#64748b;background:transparent;width:fit-content;padding:0 .5em;z-index:5;height:0;position:relative}.netgrif-user-padding{padding-bottom:13px;position:relative}\n"] }]
+            args: [{ selector: 'nc-user-default-field', template: "<div fxLayoutAlign=\"center center\" fxLayout=\"row\">\n    <div fxFlex=\"100\" class=\"netgrif-user-padding\">\n        <div #userLabel class=\"user-field-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\">\n            {{dataField.title}}\n            <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!dataField.disabled\"></nc-required-label>\n        </div>\n        <div class=\"form-input button-icon-input full-width\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\n             [ngClass]=\"{'form-input-disabled': formControlRef.disabled, 'form-input-error': dataField.isInvalid(formControlRef)}\"\n             [ngStyle]=\"{\n                    '-webkit-clip-path': getCutProperty(userLabel),\n                    'clip-path': getCutProperty(userLabel)\n            }\">\n            <button mat-icon-button\n                    *ngIf=\"!!dataField.value && !formControlRef.disabled\"\n                    [disabled]=\"formControlRef.disabled\"\n                    color=\"primary\"\n                    (click)=\"selectUser()\"\n                    [matTooltip]=\"'dataField.user.deleteUser' | translate\"\n                    [class.do-not-click]=\"formControlRef.disabled\">\n                <mat-icon (click)='deleteUser()' color='warn' *ngIf='!formControlRef.disabled'>close</mat-icon>\n            </button>\n            <button mat-icon-button\n                    *ngIf=\"!dataField.value && !formControlRef.disabled\"\n                    [disabled]=\"formControlRef.disabled\"\n                    color=\"primary\"\n                    (click)=\"selectUser()\"\n                    [matTooltip]=\"'dataField.user.selectUser' | translate\"\n                    [class.do-not-click]=\"formControlRef.disabled\">\n                <mat-icon>person_add</mat-icon>\n            </button>\n            <span fxFlex class=\"input-name-ellipsis padding-left\" [ngClass]=\"{'input-placeholder': !!dataField.value, 'no-cursor': !!dataField.value && formControlRef.disabled}\">\n                    {{!!dataField.value ? dataField.value.fullName : 'dataField.user.selectUser' | translate}}</span>\n        </div>\n        <mat-hint class=\"user-hint-error\" [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\"\n                  *ngIf=\"!dataField.isInvalid(formControlRef) && hasHint()\">{{dataField.description}}</mat-hint>\n        <mat-error class=\"user-hint-error\"\n                   *ngIf=\"dataField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n    </div>\n</div>\n", styles: [".do-not-click:hover{cursor:not-allowed}.input-name-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.input-placeholder{color:#64748b}.button-icon-input{padding:2px!important}.full-width{width:100%;min-width:100%}.padding-left{padding-left:8px}.form-input{background:#FFFFFF;color:#64748b;outline:none;border:1px solid #64748B;text-align:left;font-size:14px;line-height:20px;border-radius:6px;min-width:5px;padding:8px 15px;box-sizing:border-box;height:44px}.form-input:hover{border-width:2px;padding-left:1px!important}.form-input-disabled{background:transparent!important;border-color:#cbd5e1!important}.form-input-disabled:hover{border-width:1px;padding:2px!important}.user-hint-error{font-size:75%;padding:0 1em;width:unset;position:absolute;margin-top:.5em;top:calc(100% - 2em)}.image-preview{width:auto;height:auto;cursor:pointer}.no-cursor{cursor:default!important;color:#64748b}.border-default{border-width:1px;border-style:solid;border-color:#000}@media only screen and (max-width: 959.99px){.input-name-ellipsis{word-break:break-word;white-space:normal;overflow-y:auto;max-height:40px}}.user-field-label{transform:translate(.4em,-.45em) scale(.75);transform-origin:left;color:#64748b;background:transparent;width:fit-content;padding:0 .5em;z-index:5;height:0;position:relative}.netgrif-user-padding{padding-bottom:13px;position:relative}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i1$3.MatDialog }, { type: i1.SnackBarService }, { type: i1$2.TranslateService }, { type: undefined, decorators: [{
                         type: Optional
@@ -2344,10 +2344,10 @@ class UserListDefaultFieldComponent extends AbstractUserListDefaultFieldComponen
     }
 }
 UserListDefaultFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UserListDefaultFieldComponent, deps: [{ token: i1$3.MatDialog }, { token: i1.SnackBarService }, { token: i1$2.TranslateService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-UserListDefaultFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: UserListDefaultFieldComponent, selector: "nc-user-list-default-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" [ngClass]=\"{'netgrif-chip-fix' : dataField.value?.userValues?.size > 0}\" color=\"primary\">\n    <mat-label class=\"netgrif-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\" *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <button mat-icon-button matPrefix\n            [disabled]=\"formControlRef.disabled\"\n            color=\"primary\"\n            (click)=\"selectUser()\"\n            [matTooltip]=\"'dataField.user.selectUser' | translate\"\n            [class.do-not-click]=\"formControlRef.disabled\">\n        <mat-icon>how_to_reg</mat-icon>\n    </button>\n    <button mat-icon-button matPrefix\n            [disabled]='formControlRef.disabled || !dataField.value || dataField?.value?.userValues?.size === 0'\n            color='warn'\n            (click)='removeAll()'\n            [matTooltip]=\"'dataField.user.deleteAll' | translate\">\n        <mat-icon>delete_outline</mat-icon>\n    </button>\n    <mat-chip-list #chipList aria-label=\"Autocomplete\" [formControl]=\"formControlRef\">\n        <mat-chip\n            *ngFor='let user of dataField.value?.userValues | keyvalue' (removed)=\"deleteUser(user.key)\">\n            {{user.value.fullName}}\n            <button *ngIf=\"!formControlRef.disabled\" matChipRemove>\n                <mat-icon>cancel</mat-icon>\n            </button>\n        </mat-chip>\n        <input\n            aria-label=\"Autocomplete\"\n            matInput\n            #input\n            [placeholder]=\"dataField.placeholder\"\n            [required]=\"dataField.behavior.required\"\n            [matChipInputFor]=\"chipList\">\n    </mat-chip-list>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf='dataField.isInvalid(formControlRef)'>{{'dataField.validations.required' | translate}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { 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: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$7.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.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: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i2$1.MatPrefix, selector: "[matPrefix]" }, { type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$7.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i2$7.MatChipRemove, selector: "[matChipRemove]" }, { type: i7.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: i2$7.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1$2.TranslatePipe, "keyvalue": i4$1.KeyValuePipe } });
+UserListDefaultFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: UserListDefaultFieldComponent, selector: "nc-user-list-default-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\"\n                [ngClass]=\"{'netgrif-chip-fix' : dataField.value?.userValues?.size > 0}\" color=\"primary\">\n    <mat-label class=\"netgrif-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\"\n               *ngIf=\"!showLargeLayout.value\">{{ dataField.title }}\n    </mat-label>\n    <button *ngIf=\"!formControlRef.disabled\" mat-icon-button matPrefix\n            [disabled]=\"formControlRef.disabled\"\n            color=\"primary\"\n            (click)=\"selectUser()\"\n            [matTooltip]=\"'dataField.user.selectUser' | translate\"\n            [class.do-not-click]=\"formControlRef.disabled\">\n        <mat-icon>how_to_reg</mat-icon>\n    </button>\n    <button *ngIf=\"!formControlRef.disabled\" mat-icon-button matPrefix\n            [disabled]='formControlRef.disabled || !dataField.value || dataField?.value?.userValues?.size === 0'\n            color='warn'\n            (click)='removeAll()'\n            [matTooltip]=\"'dataField.user.deleteAll' | translate\">\n        <mat-icon>delete_outline</mat-icon>\n    </button>\n    <mat-chip-list #chipList aria-label=\"Autocomplete\" [formControl]=\"formControlRef\">\n        <mat-chip\n            *ngFor='let user of dataField.value?.userValues | keyvalue' (removed)=\"deleteUser(user.key)\">\n            {{ user.value.fullName }}\n            <button *ngIf=\"!formControlRef.disabled\" matChipRemove>\n                <mat-icon>cancel</mat-icon>\n            </button>\n        </mat-chip>\n        <input\n            aria-label=\"Autocomplete\"\n            matInput\n            #input\n            [placeholder]=\"dataField.placeholder\"\n            [required]=\"dataField.behavior.required\"\n            [matChipInputFor]=\"chipList\">\n    </mat-chip-list>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{ dataField.description }}</mat-hint>\n    <mat-error *ngIf='dataField.isInvalid(formControlRef)'>{{ 'dataField.validations.required' | translate }}\n    </mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { 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: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$7.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.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: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i2$1.MatPrefix, selector: "[matPrefix]" }, { type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$7.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i2$7.MatChipRemove, selector: "[matChipRemove]" }, { type: i7.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: i2$7.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1$2.TranslatePipe, "keyvalue": i4$1.KeyValuePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UserListDefaultFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nc-user-list-default-field', template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" [ngClass]=\"{'netgrif-chip-fix' : dataField.value?.userValues?.size > 0}\" color=\"primary\">\n    <mat-label class=\"netgrif-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\" *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <button mat-icon-button matPrefix\n            [disabled]=\"formControlRef.disabled\"\n            color=\"primary\"\n            (click)=\"selectUser()\"\n            [matTooltip]=\"'dataField.user.selectUser' | translate\"\n            [class.do-not-click]=\"formControlRef.disabled\">\n        <mat-icon>how_to_reg</mat-icon>\n    </button>\n    <button mat-icon-button matPrefix\n            [disabled]='formControlRef.disabled || !dataField.value || dataField?.value?.userValues?.size === 0'\n            color='warn'\n            (click)='removeAll()'\n            [matTooltip]=\"'dataField.user.deleteAll' | translate\">\n        <mat-icon>delete_outline</mat-icon>\n    </button>\n    <mat-chip-list #chipList aria-label=\"Autocomplete\" [formControl]=\"formControlRef\">\n        <mat-chip\n            *ngFor='let user of dataField.value?.userValues | keyvalue' (removed)=\"deleteUser(user.key)\">\n            {{user.value.fullName}}\n            <button *ngIf=\"!formControlRef.disabled\" matChipRemove>\n                <mat-icon>cancel</mat-icon>\n            </button>\n        </mat-chip>\n        <input\n            aria-label=\"Autocomplete\"\n            matInput\n            #input\n            [placeholder]=\"dataField.placeholder\"\n            [required]=\"dataField.behavior.required\"\n            [matChipInputFor]=\"chipList\">\n    </mat-chip-list>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf='dataField.isInvalid(formControlRef)'>{{'dataField.validations.required' | translate}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"] }]
+            args: [{ selector: 'nc-user-list-default-field', template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\"\n                [ngClass]=\"{'netgrif-chip-fix' : dataField.value?.userValues?.size > 0}\" color=\"primary\">\n    <mat-label class=\"netgrif-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\"\n               *ngIf=\"!showLargeLayout.value\">{{ dataField.title }}\n    </mat-label>\n    <button *ngIf=\"!formControlRef.disabled\" mat-icon-button matPrefix\n            [disabled]=\"formControlRef.disabled\"\n            color=\"primary\"\n            (click)=\"selectUser()\"\n            [matTooltip]=\"'dataField.user.selectUser' | translate\"\n            [class.do-not-click]=\"formControlRef.disabled\">\n        <mat-icon>how_to_reg</mat-icon>\n    </button>\n    <button *ngIf=\"!formControlRef.disabled\" mat-icon-button matPrefix\n            [disabled]='formControlRef.disabled || !dataField.value || dataField?.value?.userValues?.size === 0'\n            color='warn'\n            (click)='removeAll()'\n            [matTooltip]=\"'dataField.user.deleteAll' | translate\">\n        <mat-icon>delete_outline</mat-icon>\n    </button>\n    <mat-chip-list #chipList aria-label=\"Autocomplete\" [formControl]=\"formControlRef\">\n        <mat-chip\n            *ngFor='let user of dataField.value?.userValues | keyvalue' (removed)=\"deleteUser(user.key)\">\n            {{ user.value.fullName }}\n            <button *ngIf=\"!formControlRef.disabled\" matChipRemove>\n                <mat-icon>cancel</mat-icon>\n            </button>\n        </mat-chip>\n        <input\n            aria-label=\"Autocomplete\"\n            matInput\n            #input\n            [placeholder]=\"dataField.placeholder\"\n            [required]=\"dataField.behavior.required\"\n            [matChipInputFor]=\"chipList\">\n    </mat-chip-list>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{ dataField.description }}</mat-hint>\n    <mat-error *ngIf='dataField.isInvalid(formControlRef)'>{{ 'dataField.validations.required' | translate }}\n    </mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i1$3.MatDialog }, { type: i1.SnackBarService }, { type: i1$2.TranslateService }, { type: undefined, decorators: [{
                         type: Optional
@@ -5325,7 +5325,7 @@ class NavigationDoubleDrawerComponent extends AbstractNavigationDoubleDrawerComp
     }
 }
 NavigationDoubleDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavigationDoubleDrawerComponent, deps: [{ token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: i1$6.BreakpointObserver }, { token: i1.LanguageService }, { token: i1$2.TranslateService }, { token: i1.UserService }, { token: i1.AccessService }, { token: i1.LoggerService }, { token: i1.ConfigurationService }, { token: i1.UriService }, { token: i1.CaseResourceService }, { token: i1.ImpersonationUserSelectService }, { token: i1.ImpersonationService }, { token: i1.DynamicNavigationRouteProviderService }], target: i0.ɵɵFactoryTarget.Component });
-NavigationDoubleDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: NavigationDoubleDrawerComponent, selector: "nc-navigation-double-drawer", usesInheritance: true, ngImport: i0, template: "<div class=\"drawer-control rail-color height-60\" [ngClass]=\"{'index-menu': !configLeftMenu.opened}\" fxLayoutAlign=\"center center\" fxHide.lt-md>\n    <button mat-icon-button (click)=\"toggleMenu()\" class=\"menu-button mat-typography menu-font-color\">\n        <mat-icon>menu</mat-icon>\n    </button>\n</div>\n<mat-toolbar fxHide.gt-sm class=\"toolbar\">\n    <mat-toolbar-row fxLayout=\"row\" fxLayoutAlign=\"space-between stretch\">\n        <div fxFlex fxLayoutAlign=\"start center\">\n            <button mat-icon-button (click)=\"toggleMenu()\">\n                <mat-icon>menu</mat-icon>\n            </button>\n        </div>\n        <div fxLayoutAlign=\"center center\" fxFlex>\n            <img #logo [alt]=\"imageAlt\" [src]=\"image\" class=\"logoimg-tool\"\n                 [routerLink]=\"imageRouterLink !== undefined ? imageRouterLink : []\">\n        </div>\n        <div fxFlex></div>\n    </mat-toolbar-row>\n</mat-toolbar>\n<mat-spinner *ngIf=\"!logo\"></mat-spinner>\n<mat-sidenav-container class=\"rail-container deny-select\">\n    <mat-sidenav mode=\"side\" [(opened)]=\"configLeftMenu.opened\" position=\"start\"\n                 [disableClose]=\"configLeftMenu.disableClose\"\n                 class=\"rail-content\">\n\n        <div fxLayout=\"column\" class=\"rail-color\" fxFlex>\n\n            <div *ngTemplateOutlet=\"portalLeftMenu || defaultLeftSide\"></div>\n\n            <div fxFlex></div>\n\n            <mat-menu #userRailMenu=\"matMenu\">\n                <div mat-menu-item role=\"menuitem\" class=\"large-menu-item\" fxLayout=\"row\" fxFlexAlign=\"center center\"\n                     [routerLink]=\"profileRouterLink\" routerLinkActive=\"active-tree-node\">\n                    <mat-icon class=\"margin-auto\" fxFlex>face</mat-icon>\n                    <div class=\"large-menu-item\" fxLayout=\"column\" fxFlexAlign=\"start center\" fxFlex>\n                        <span *ngIf=\"!user.isImpersonating()\"  class=\"large-menu-item-text\" fxFlex=\"50\">{{user.fullName}}</span>\n                        <span *ngIf=\"user.isImpersonating()\" class=\"large-menu-item-text\" fxFlex=\"50\">{{user.fullName}} ({{user.getSelfOrImpersonated().fullName}})</span>\n                        <span class=\"large-menu-item-text\" style=\"font-size: 12px;\" fxFlex=\"50\">{{user.email}}</span>\n                    </div>\n                </div>\n                <button *ngIf=\"includeImpersonation && !user.isImpersonating()\" mat-menu-item (click)=\"impersonate()\">\n                    <mat-icon>supervisor_account</mat-icon>\n                    <span>{{'side-menu.impersonation.submit' | translate}}</span>\n                </button>\n                <button *ngIf=\"includeImpersonation && user.isImpersonating()\" mat-menu-item (click)=\"stopImpersonating()\">\n                    <mat-icon>clear</mat-icon>\n                    <span>{{'side-menu.impersonation.cease' | translate }}</span>\n                </button>\n                <button mat-menu-item (click)=\"logout()\">\n                    <mat-icon>exit_to_app</mat-icon>\n                    <span>{{ 'toolbar.menu.logout' | translate }}</span>\n                </button>\n            </mat-menu>\n            <button *ngIf=\"includeUser\" mat-icon-button [matMenuTriggerFor]=\"userRailMenu\" class=\"menu-button mat-typography menu-font-color\"\n                    [matTooltip]=\"user.fullName\"\n                    [matTooltipPosition]=\"'right'\">\n                <mat-icon>account_circle</mat-icon>\n            </button>\n\n            <div *ngIf=\"includeLanguage\" fxLayout=\"row\" class=\"icon-container\" fxLayoutAlign=\"center center\">\n                <nc-language-selector fxLayout=\"row\" ></nc-language-selector>\n            </div>\n\n            <mat-menu #railMenu=\"matMenu\">\n                <button *ngFor='let item of hiddenCustomItems; trackBy: itemsTrackBy' mat-menu-item\n                        [routerLink]='item.routing.path' routerLinkActive=\"active-tree-node\">\n                    <mat-icon>{{item.navigation.icon}}</mat-icon>\n                    <span>{{item.navigation.title}}</span>\n                </button>\n            </mat-menu>\n            <!--            <div fxLayout=\"row\" class=\"margin-bottom-x2 icon-container\" matTooltip=\"Otvori\u0165 menu\"-->\n            <!--                 matTooltipPosition=\"right\"-->\n            <!--                 fxLayoutAlign=\"center center\">-->\n            <!--                <button mat-icon-button [matMenuTriggerFor]=\"railMenu\">-->\n            <!--                    <mat-icon class=\"icon-large sidemenu-icon\">more_vert</mat-icon>-->\n            <!--                </button>-->\n            <!--            </div>-->\n            <button mat-icon-button [matMenuTriggerFor]=\"railMenu\"\n                    class=\"menu-button mat-typography menu-font-color margin-bottom-x2\"\n                    [matTooltip]=\"'toolbar.menu.open' | translate\"\n                    matTooltipPosition=\"right\">\n                <mat-icon>more_vert</mat-icon>\n            </button>\n\n        </div>\n    </mat-sidenav>\n\n    <mat-sidenav-content class=\"first-content index-menu\" >\n        <mat-sidenav-container class=\"drawer-container\" (backdropClick)=\"toggleLeftMenu()\">\n            <mat-sidenav [mode]=\"configRightMenu.mode\" [(opened)]=\"configRightMenu.opened\" position=\"start\"\n                         [disableClose]=\"configRightMenu.disableClose\"\n                         class=\"drawer-content\"\n                         mwlResizable\n                         [style.width.px]=\"configRightMenu.width\"\n                         [resizeCursorPrecision]=\"20\"\n                         [resizeEdges]=\"{right: true}\"\n                         (resizing)=\"onResizeEvent($event)\">\n\n                <div *ngTemplateOutlet=\"portalRightMenu || defaultRightSide\"></div>\n\n            </mat-sidenav>\n\n            <mat-sidenav-content class=\"content-color\">\n                <ng-content></ng-content>\n            </mat-sidenav-content>\n        </mat-sidenav-container>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n\n<ng-template #defaultLeftSide>\n\n    <div class=\"height-60 border-bottom\" fxLayoutAlign=\"center center\" fxHide.lt-md>\n        <button mat-icon-button (click)=\"toggleRightMenu()\" class=\"menu-button mat-typography menu-font-color\">\n            <mat-icon>menu</mat-icon>\n        </button>\n    </div>\n\n    <button mat-icon-button (click)=\"onHomeClick()\" class=\"menu-button mat-typography menu-font-color margin-top-default\"\n            [matTooltip]=\"'toolbar.menu.home' | translate\"\n            matTooltipPosition=\"right\">\n        <mat-icon>home</mat-icon>\n    </button>\n\n    <button *ngIf='!isOnZeroLevel() && (canGoBackLoading$ | async) === false' mat-icon-button (click)=\"onBackClick()\"\n            class=\"menu-button mat-typography menu-font-color\" [matTooltip]=\"'toolbar.menu.back' | translate\"\n            matTooltipPosition=\"right\">\n        <mat-icon>arrow_back</mat-icon>\n    </button>\n    <div *ngIf=\"(canGoBackLoading$ | async)\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"margin-top-default\">\n        <mat-spinner color=\"primary\" diameter=\"30\" mode=\"indeterminate\"></mat-spinner>\n    </div>\n\n    <div class=\"margin-top-x2\"></div>\n\n    <button *ngFor='let folder of leftItems; trackBy: itemsTrackBy' mat-icon-button (click)=\"onItemClick(folder)\"\n            class=\"menu-button mat-typography menu-font-color\" [matTooltip]=\"folder.navigation.title\" [matTooltipPosition]=\"'right'\"\n            [ngClass]=\"isItemAndNodeEqual(folder, currentNode) ? 'rail-selected-color' : 'menu-font-color'\" [routerLink]='folder.routing.path'\n            routerLinkActive=\"active\">\n        <mat-icon>{{folder.navigation.icon}}</mat-icon>\n    </button>\n\n    <div *ngIf=\"(leftLoading$ | async)\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"margin-top-default\">\n        <mat-spinner color=\"primary\" diameter=\"30\" mode=\"indeterminate\"></mat-spinner>\n    </div>\n</ng-template>\n\n<ng-template #defaultRightSide>\n    <div class=\"logo border-bottom\" fxLayoutAlign=\"center center\" fxHide.lt-md>\n        <img *ngIf=\"image !== undefined\" [alt]=\"imageAlt\" [src]=\"image\" class=\"logoimg\"\n             [routerLink]=\"imageRouterLink !== undefined ? imageRouterLink : []\">\n    </div>\n    <div *ngIf=\"(rightLoading$ | async) === false\">\n        <div fxLayout=\"column\" fxLayoutAlign=\"end end\" class=\"order-icon-wrapper\">\n            <button mat-icon-button fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"mat-button mat-typography menu-font-color order-icon\" (click)=\"switchOrder()\"\n                    [matTooltip]=\"isAscending() ? ('dynamicNavigation.ascending' | translate) : ('dynamicNavigation.descending' | translate)\">\n                <mat-icon>{{isAscending() ? \"expand_more\" : \"expand_less\"}}</mat-icon>\n            </button>\n        </div>\n        <div *ngFor='let item of rightItems; trackBy: itemsTrackBy' (click)=\"onItemClick(item)\"\n             class=\"tree-node mat-typography mat-body-2\" fxLayoutAlign=\"start center\" [routerLink]='item.routing.path'\n             routerLinkActive=\"active-tree-node\">\n            <mat-icon class=\"tree-node-icon\">{{item.navigation.icon}}</mat-icon>\n            <span>{{item.navigation.title}}</span>\n            <span class=\"menu-item-focus-overlay\"></span>\n        </div>\n        <div *ngIf=\"moreItems.length > 0\">\n            <button mat-button color=\"primary\" (click)=\"loadMoreItems()\">{{'dynamicNavigation.loadMoreItems' | translate}}</button>\n        </div>\n    </div>\n    <div *ngIf=\"(rightLoading$ | async)\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"margin-top-default\">\n        <mat-spinner color=\"primary\" diameter=\"40\" mode=\"indeterminate\"></mat-spinner>\n    </div>\n</ng-template>\n", styles: [".rail-container{height:100%}.rail-content{width:52px;min-width:52px;border-right:none!important}.drawer-container{height:100%}.menu-button{margin-left:6px;margin-right:6px;border-radius:8px}.drawer-content{width:300px;min-width:300px;box-shadow:0 2px 4px #0d2d3c29,0 4px 8px #546e7a29}.height-60{height:60px}.drawer-control{position:absolute;box-shadow:0 2px 4px #0d2d3c29,0 4px 8px #546e7a29}.index-menu{z-index:2}.first-content{box-shadow:0 2px 4px #0d2d3c29,0 4px 8px #546e7a29}.border-bottom{border-bottom:1px solid #E2E8F0}.logo{height:60px}.logo-closed{width:60px!important}.logoimg{margin-left:auto;margin-right:auto;height:35px;outline:none!important;cursor:pointer}.icon-large{height:40px;width:40px;font-size:40px;color:#000000b3}.icon-container{outline:none!important;height:40px}.icon-large:hover{cursor:pointer}.menu-font-color{color:#000000b3!important}.margin-top-65{margin-top:49px}.margin-auto{margin:auto}.padding-top-65{padding-top:49px}.padding-top-8{padding-top:8px}.margin-bottom-x2{margin-bottom:16px}.tree-node{outline:none!important;cursor:pointer;padding:10px 8px;margin:0 8px;color:#000000b3;position:relative;border-radius:8px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:.1px}.tree-node mat-icon.tree-node-icon{height:24px;width:24px;font-size:24px;margin-right:4px}.tree-node .tree-node-label{height:24px;font-size:16px}.tree-node .margin-component{width:8px;margin-right:4px}.tree-node .menu-item-focus-overlay{opacity:0;position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:black;transition:opacity .2s cubic-bezier(.35,0,.25,1),background-color .2s cubic-bezier(.35,0,.25,1)}.tree-node:hover .menu-item-focus-overlay{opacity:.04}.margin-top-default{margin-top:8px}.margin-top-x2{margin-top:16px}.logoimg-tool{height:33px;outline:none!important;cursor:pointer;background:#fafafa}.toolbar{min-height:50px!important;height:50px;border-bottom:1px solid #E2E8F0}@media screen and (max-width: 959.99px){.rail-container{height:calc(100% - 50px)}.rail-content{width:52px;min-width:52px;top:0;border-right:none!important}.margin-top-65{margin-top:16px}.padding-top-65{padding-top:16px}}.profile-tooltip{font-size:20px}.sidemenu-icon{line-height:unset!important}.line{width:calc(100% - 16px);padding-left:8px;padding-right:8px;flex:1}.headline-text{font-weight:400;font-size:12px;line-height:16px;letter-spacing:.4px;padding-top:4px}.headline-padding{padding:0 8px}.large-menu-item{height:64px;line-height:64px}.large-menu-item-text{line-height:32px}.cursor-pointer{cursor:pointer}.box-container{box-sizing:content-box;display:block;overflow:hidden}.content-color{background-color:#f8fafc}.expansion-indicator{color:#00000080;margin-right:10px}.expansion-indicator:after{border-style:solid;border-width:0 2px 2px 0;content:\"\";display:inline-block;padding:3px;vertical-align:middle;transform:rotate(45deg)}.order-icon{transform:scale(.7)}.order-text{color:#000000b3}.order-icon-wrapper{margin-bottom:0}.deny-select{-webkit-user-select:none;user-select:none}\n"], components: [{ 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: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i3$b.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { type: i3$b.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { type: i10$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i10$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: LanguageSelectorComponent, selector: "nc-language-selector" }, { type: i3$b.MatSidenavContent, selector: "mat-sidenav-content" }], directives: [{ type: i6$1.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$2.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: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { type: i6$1.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$1.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: i2$2.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6$1.DefaultFlexAlignDirective, selector: "  [fxFlexAlign], [fxFlexAlign.xs], [fxFlexAlign.sm], [fxFlexAlign.md],  [fxFlexAlign.lg], [fxFlexAlign.xl], [fxFlexAlign.lt-sm], [fxFlexAlign.lt-md],  [fxFlexAlign.lt-lg], [fxFlexAlign.lt-xl], [fxFlexAlign.gt-xs], [fxFlexAlign.gt-sm],  [fxFlexAlign.gt-md], [fxFlexAlign.gt-lg]", inputs: ["fxFlexAlign", "fxFlexAlign.xs", "fxFlexAlign.sm", "fxFlexAlign.md", "fxFlexAlign.lg", "fxFlexAlign.xl", "fxFlexAlign.lt-sm", "fxFlexAlign.lt-md", "fxFlexAlign.lt-lg", "fxFlexAlign.lt-xl", "fxFlexAlign.gt-xs", "fxFlexAlign.gt-sm", "fxFlexAlign.gt-md", "fxFlexAlign.gt-lg"] }, { type: i2$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { type: i10$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10$3.ResizableDirective, selector: "[mwlResizable]", inputs: ["resizeEdges", "enableGhostResize", "resizeSnapGrid", "resizeCursors", "resizeCursorPrecision", "ghostElementPositioning", "allowNegativeResizes", "mouseMoveThrottleMS", "validateResize"], outputs: ["resizeStart", "resizing", "resizeEnd"] }], pipes: { "translate": i1$2.TranslatePipe, "async": i4$1.AsyncPipe }, animations: [
+NavigationDoubleDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: NavigationDoubleDrawerComponent, selector: "nc-navigation-double-drawer", usesInheritance: true, ngImport: i0, template: "<div class=\"drawer-control rail-color height-60\" [ngClass]=\"{'index-menu': !configLeftMenu.opened}\"\n     fxLayoutAlign=\"center center\" fxHide.lt-md>\n    <button mat-icon-button (click)=\"toggleMenu()\" class=\"menu-button mat-typography menu-font-color\">\n        <mat-icon>menu</mat-icon>\n    </button>\n</div>\n\n<mat-toolbar fxHide.gt-sm class=\"toolbar\">\n    <mat-toolbar-row fxLayout=\"row\" fxLayoutAlign=\"space-between stretch\">\n        <div fxFlex fxLayoutAlign=\"start center\">\n            <button mat-icon-button (click)=\"toggleMenu()\">\n                <mat-icon>menu</mat-icon>\n            </button>\n        </div>\n        <div fxLayoutAlign=\"center center\" fxFlex>\n            <img #logo [alt]=\"imageAlt\" [src]=\"image\" class=\"logoimg-tool\"\n                 [routerLink]=\"imageRouterLink !== undefined ? imageRouterLink : []\">\n        </div>\n        <div fxFlex></div>\n    </mat-toolbar-row>\n</mat-toolbar>\n<mat-spinner *ngIf=\"!logo\"></mat-spinner>\n<mat-sidenav-container class=\"rail-container deny-select\">\n    <mat-sidenav mode=\"side\" [(opened)]=\"configLeftMenu.opened\" position=\"start\"\n                 [disableClose]=\"configLeftMenu.disableClose\"\n                 class=\"rail-content\">\n\n        <div fxLayout=\"column\" class=\"rail-color\" fxFlex>\n\n            <div *ngTemplateOutlet=\"portalLeftMenu || defaultLeftSide\"></div>\n\n            <div class=\"margin-top-x2\"></div>\n\n            <div fxFlex></div>\n\n            <mat-menu #userRailMenu=\"matMenu\">\n                <div mat-menu-item role=\"menuitem\" class=\"large-menu-item\" fxLayout=\"row\" fxFlexAlign=\"center center\"\n                     [routerLink]=\"profileRouterLink\" routerLinkActive=\"active-tree-node\">\n                    <mat-icon class=\"margin-auto\" fxFlex>face</mat-icon>\n                    <div class=\"large-menu-item\" fxLayout=\"column\" fxFlexAlign=\"start center\" fxFlex>\n                        <span *ngIf=\"!user.isImpersonating()\" class=\"large-menu-item-text\"\n                              fxFlex=\"50\">{{ user.fullName }}</span>\n                        <span *ngIf=\"user.isImpersonating()\" class=\"large-menu-item-text\"\n                              fxFlex=\"50\">{{ user.fullName }} ({{ user.getSelfOrImpersonated().fullName }})</span>\n                        <span class=\"large-menu-item-text\" style=\"font-size: 12px;\" fxFlex=\"50\">{{ user.email }}</span>\n                    </div>\n                </div>\n                <button *ngIf=\"includeImpersonation && !user.isImpersonating()\" mat-menu-item (click)=\"impersonate()\">\n                    <mat-icon>supervisor_account</mat-icon>\n                    <span>{{ 'side-menu.impersonation.submit' | translate }}</span>\n                </button>\n                <button *ngIf=\"includeImpersonation && user.isImpersonating()\" mat-menu-item\n                        (click)=\"stopImpersonating()\">\n                    <mat-icon>clear</mat-icon>\n                    <span>{{ 'side-menu.impersonation.cease' | translate }}</span>\n                </button>\n                <button mat-menu-item (click)=\"logout()\">\n                    <mat-icon>exit_to_app</mat-icon>\n                    <span>{{ 'toolbar.menu.logout' | translate }}</span>\n                </button>\n            </mat-menu>\n            <button *ngIf=\"includeUser\" mat-icon-button [matMenuTriggerFor]=\"userRailMenu\"\n                    class=\"menu-button mat-typography menu-font-color\"\n                    [matTooltip]=\"user.fullName\"\n                    [matTooltipPosition]=\"'right'\">\n                <mat-icon>account_circle</mat-icon>\n            </button>\n\n            <div *ngIf=\"includeLanguage\" fxLayout=\"row\" class=\"icon-container\">\n                <button mat-icon-button class=\"menu-button mat-typography menu-font-color\">\n                    <nc-language-selector fxLayout=\"row\"></nc-language-selector>\n                </button>\n            </div>\n\n            <mat-menu #railMenu=\"matMenu\">\n                <button *ngFor='let item of hiddenCustomItems; trackBy: itemsTrackBy' mat-menu-item\n                        [routerLink]='item.routing.path' routerLinkActive=\"active-tree-node\">\n                    <mat-icon>{{ item.navigation.icon }}</mat-icon>\n                    <span>{{ item.navigation.title }}</span>\n                </button>\n            </mat-menu>\n            <!--            <div fxLayout=\"row\" class=\"margin-bottom-x2 icon-container\" matTooltip=\"Otvori\u0165 menu\"-->\n            <!--                 matTooltipPosition=\"right\"-->\n            <!--                 fxLayoutAlign=\"center center\">-->\n            <!--                <button mat-icon-button [matMenuTriggerFor]=\"railMenu\">-->\n            <!--                    <mat-icon class=\"icon-large sidemenu-icon\">more_vert</mat-icon>-->\n            <!--                </button>-->\n            <!--            </div>-->\n            <button mat-icon-button *ngIf=\"hiddenCustomItems && hiddenCustomItems.length > 0\"\n                    [matMenuTriggerFor]=\"railMenu\"\n                    class=\"menu-button mat-typography menu-font-color\"\n                    [matTooltip]=\"'toolbar.menu.open' | translate\"\n                    matTooltipPosition=\"right\">\n                <mat-icon>more_vert</mat-icon>\n            </button>\n\n            <div class=\"margin-top-x2\"></div>\n        </div>\n    </mat-sidenav>\n\n    <mat-sidenav-content class=\"first-content index-menu\">\n        <mat-sidenav-container class=\"drawer-container\" (backdropClick)=\"toggleLeftMenu()\">\n            <mat-sidenav [mode]=\"configRightMenu.mode\" [(opened)]=\"configRightMenu.opened\" position=\"start\"\n                         [disableClose]=\"configRightMenu.disableClose\"\n                         class=\"drawer-content\"\n                         mwlResizable\n                         [style.width.px]=\"configRightMenu.width\"\n                         [resizeCursorPrecision]=\"20\"\n                         [resizeEdges]=\"{right: true}\"\n                         (resizing)=\"onResizeEvent($event)\">\n\n                <div *ngTemplateOutlet=\"portalRightMenu || defaultRightSide\"></div>\n\n            </mat-sidenav>\n\n            <mat-sidenav-content class=\"content-color\">\n                <ng-content></ng-content>\n            </mat-sidenav-content>\n        </mat-sidenav-container>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n\n<ng-template #defaultLeftSide>\n\n    <div class=\"height-60 border-bottom\" fxLayoutAlign=\"center center\" fxHide.lt-md>\n        <button mat-icon-button (click)=\"toggleRightMenu()\" class=\"menu-button mat-typography menu-font-color\">\n            <mat-icon>menu</mat-icon>\n        </button>\n    </div>\n\n    <button mat-icon-button (click)=\"onHomeClick()\"\n            class=\"menu-button mat-typography menu-font-color margin-top-default\"\n            [matTooltip]=\"'toolbar.menu.home' | translate\"\n            matTooltipPosition=\"right\">\n        <mat-icon>home</mat-icon>\n    </button>\n\n    <button *ngIf='!isOnZeroLevel() && (canGoBackLoading$ | async) === false' mat-icon-button (click)=\"onBackClick()\"\n            class=\"menu-button mat-typography menu-font-color\" [matTooltip]=\"'toolbar.menu.back' | translate\"\n            matTooltipPosition=\"right\">\n        <mat-icon>arrow_back</mat-icon>\n    </button>\n    <div *ngIf=\"(canGoBackLoading$ | async)\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"margin-top-default\">\n        <mat-spinner color=\"primary\" diameter=\"30\" mode=\"indeterminate\"></mat-spinner>\n    </div>\n\n    <div class=\"margin-top-x2\"></div>\n\n    <button *ngFor='let folder of leftItems; trackBy: itemsTrackBy' mat-icon-button (click)=\"onItemClick(folder)\"\n            class=\"menu-button mat-typography menu-font-color\" [matTooltip]=\"folder.navigation.title\"\n            [matTooltipPosition]=\"'right'\"\n            [ngClass]=\"isItemAndNodeEqual(folder, currentNode) ? 'rail-selected-color' : 'menu-font-color'\"\n            [routerLink]='folder.routing.path'\n            routerLinkActive=\"active\">\n        <mat-icon>{{ folder.navigation.icon }}</mat-icon>\n    </button>\n\n    <div *ngIf=\"(leftLoading$ | async)\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"margin-top-default\">\n        <mat-spinner color=\"primary\" diameter=\"30\" mode=\"indeterminate\"></mat-spinner>\n    </div>\n</ng-template>\n\n<ng-template #defaultRightSide>\n    <div class=\"logo border-bottom\" fxLayoutAlign=\"center center\" fxHide.lt-md>\n        <img *ngIf=\"image !== undefined\" [alt]=\"imageAlt\" [src]=\"image\" class=\"logoimg\"\n             [routerLink]=\"imageRouterLink !== undefined ? imageRouterLink : []\">\n    </div>\n    <div *ngIf=\"(rightLoading$ | async) === false\">\n        <div fxLayout=\"column\" fxLayoutAlign=\"end end\" class=\"order-icon-wrapper\">\n            <button mat-icon-button fxLayout=\"column\" fxLayoutAlign=\"center center\"\n                    class=\"mat-button mat-typography menu-font-color order-icon\" (click)=\"switchOrder()\"\n                    [matTooltip]=\"isAscending() ? ('dynamicNavigation.ascending' | translate) : ('dynamicNavigation.descending' | translate)\">\n                <mat-icon>{{ isAscending() ? \"expand_more\" : \"expand_less\" }}</mat-icon>\n            </button>\n        </div>\n        <div *ngFor='let item of rightItems; trackBy: itemsTrackBy' (click)=\"onItemClick(item)\"\n             class=\"tree-node mat-typography mat-body-2\" fxLayoutAlign=\"start center\" [routerLink]='item.routing.path'\n             routerLinkActive=\"active-tree-node\">\n            <mat-icon class=\"tree-node-icon\">{{ item.navigation.icon }}</mat-icon>\n            <span>{{ item.navigation.title }}</span>\n            <span class=\"menu-item-focus-overlay\"></span>\n        </div>\n        <div *ngIf=\"moreItems.length > 0\">\n            <button mat-button color=\"primary\"\n                    (click)=\"loadMoreItems()\">{{ 'dynamicNavigation.loadMoreItems' | translate }}\n            </button>\n        </div>\n    </div>\n    <div *ngIf=\"(rightLoading$ | async)\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"margin-top-default\">\n        <mat-spinner color=\"primary\" diameter=\"40\" mode=\"indeterminate\"></mat-spinner>\n    </div>\n</ng-template>\n", styles: [".rail-container{height:100%}.rail-content{width:52px;min-width:52px;border-right:none!important}.drawer-container{height:100%}.menu-button{margin:0 auto;border-radius:8px}.drawer-content{width:300px;min-width:300px;box-shadow:0 2px 4px #0d2d3c29,0 4px 8px #546e7a29}.height-60{height:60px}.drawer-control{position:absolute;box-shadow:0 2px 4px #0d2d3c29,0 4px 8px #546e7a29}.index-menu{z-index:2}.first-content{box-shadow:0 2px 4px #0d2d3c29,0 4px 8px #546e7a29}.border-bottom{border-bottom:1px solid #E2E8F0}.logo{height:60px}.logo-closed{width:60px!important}.logoimg{margin-left:auto;margin-right:auto;height:35px;outline:none!important;cursor:pointer}.icon-large{height:40px;width:40px;font-size:40px;color:#000000b3}.icon-container{outline:none!important;height:40px}.icon-large:hover{cursor:pointer}.menu-font-color{color:#000000b3!important}.margin-top-65{margin-top:49px}.margin-auto{margin:auto}.padding-top-65{padding-top:49px}.padding-top-8{padding-top:8px}.margin-bottom-x2{margin-bottom:16px}.tree-node{outline:none!important;cursor:pointer;padding:10px 8px;margin:0 8px;color:#000000b3;position:relative;border-radius:8px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:.1px}.tree-node mat-icon.tree-node-icon{height:24px;width:24px;font-size:24px;margin-right:4px}.tree-node .tree-node-label{height:24px;font-size:16px}.tree-node .margin-component{width:8px;margin-right:4px}.tree-node .menu-item-focus-overlay{opacity:0;position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:black;transition:opacity .2s cubic-bezier(.35,0,.25,1),background-color .2s cubic-bezier(.35,0,.25,1)}.tree-node:hover .menu-item-focus-overlay{opacity:.04}.margin-top-default{margin-top:8px}.margin-top-x2{margin-top:16px}.logoimg-tool{height:33px;outline:none!important;cursor:pointer;background:#fafafa}.toolbar{min-height:50px!important;height:50px;border-bottom:1px solid #E2E8F0}@media screen and (max-width: 959.99px){.rail-container{height:calc(100% - 50px)}.rail-content{width:52px;min-width:52px;top:0;border-right:none!important}.margin-top-65{margin-top:16px}.padding-top-65{padding-top:16px}}.profile-tooltip{font-size:20px}.sidemenu-icon{line-height:unset!important}.line{width:calc(100% - 16px);padding-left:8px;padding-right:8px;flex:1}.headline-text{font-weight:400;font-size:12px;line-height:16px;letter-spacing:.4px;padding-top:4px}.headline-padding{padding:0 8px}.large-menu-item{height:64px;line-height:64px}.large-menu-item-text{line-height:32px}.cursor-pointer{cursor:pointer}.box-container{box-sizing:content-box;display:block;overflow:hidden}.content-color{background-color:#f8fafc}.expansion-indicator{color:#00000080;margin-right:10px}.expansion-indicator:after{border-style:solid;border-width:0 2px 2px 0;content:\"\";display:inline-block;padding:3px;vertical-align:middle;transform:rotate(45deg)}.order-icon{transform:scale(.7)}.order-text{color:#000000b3}.order-icon-wrapper{margin-bottom:0}.deny-select{-webkit-user-select:none;user-select:none}\n"], components: [{ 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: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i3$b.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { type: i3$b.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { type: i10$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i10$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: LanguageSelectorComponent, selector: "nc-language-selector" }, { type: i3$b.MatSidenavContent, selector: "mat-sidenav-content" }], directives: [{ type: i6$1.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$2.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: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { type: i6$1.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$1.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: i2$2.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6$1.DefaultFlexAlignDirective, selector: "  [fxFlexAlign], [fxFlexAlign.xs], [fxFlexAlign.sm], [fxFlexAlign.md],  [fxFlexAlign.lg], [fxFlexAlign.xl], [fxFlexAlign.lt-sm], [fxFlexAlign.lt-md],  [fxFlexAlign.lt-lg], [fxFlexAlign.lt-xl], [fxFlexAlign.gt-xs], [fxFlexAlign.gt-sm],  [fxFlexAlign.gt-md], [fxFlexAlign.gt-lg]", inputs: ["fxFlexAlign", "fxFlexAlign.xs", "fxFlexAlign.sm", "fxFlexAlign.md", "fxFlexAlign.lg", "fxFlexAlign.xl", "fxFlexAlign.lt-sm", "fxFlexAlign.lt-md", "fxFlexAlign.lt-lg", "fxFlexAlign.lt-xl", "fxFlexAlign.gt-xs", "fxFlexAlign.gt-sm", "fxFlexAlign.gt-md", "fxFlexAlign.gt-lg"] }, { type: i2$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { type: i10$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10$3.ResizableDirective, selector: "[mwlResizable]", inputs: ["resizeEdges", "enableGhostResize", "resizeSnapGrid", "resizeCursors", "resizeCursorPrecision", "ghostElementPositioning", "allowNegativeResizes", "mouseMoveThrottleMS", "validateResize"], outputs: ["resizeStart", "resizing", "resizeEnd"] }], pipes: { "translate": i1$2.TranslatePipe, "async": i4$1.AsyncPipe }, animations: [
         trigger('sectionExpansion', [
             state('expanded, void', style({
                 height: '*',
@@ -5378,7 +5378,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                                 animate('225ms cubic-bezier(0.4,0.0,0.2,1)')
                             ])
                         ])
-                    ], template: "<div class=\"drawer-control rail-color height-60\" [ngClass]=\"{'index-menu': !configLeftMenu.opened}\" fxLayoutAlign=\"center center\" fxHide.lt-md>\n    <button mat-icon-button (click)=\"toggleMenu()\" class=\"menu-button mat-typography menu-font-color\">\n        <mat-icon>menu</mat-icon>\n    </button>\n</div>\n<mat-toolbar fxHide.gt-sm class=\"toolbar\">\n    <mat-toolbar-row fxLayout=\"row\" fxLayoutAlign=\"space-between stretch\">\n        <div fxFlex fxLayoutAlign=\"start center\">\n            <button mat-icon-button (click)=\"toggleMenu()\">\n                <mat-icon>menu</mat-icon>\n            </button>\n        </div>\n        <div fxLayoutAlign=\"center center\" fxFlex>\n            <img #logo [alt]=\"imageAlt\" [src]=\"image\" class=\"logoimg-tool\"\n                 [routerLink]=\"imageRouterLink !== undefined ? imageRouterLink : []\">\n        </div>\n        <div fxFlex></div>\n    </mat-toolbar-row>\n</mat-toolbar>\n<mat-spinner *ngIf=\"!logo\"></mat-spinner>\n<mat-sidenav-container class=\"rail-container deny-select\">\n    <mat-sidenav mode=\"side\" [(opened)]=\"configLeftMenu.opened\" position=\"start\"\n                 [disableClose]=\"configLeftMenu.disableClose\"\n                 class=\"rail-content\">\n\n        <div fxLayout=\"column\" class=\"rail-color\" fxFlex>\n\n            <div *ngTemplateOutlet=\"portalLeftMenu || defaultLeftSide\"></div>\n\n            <div fxFlex></div>\n\n            <mat-menu #userRailMenu=\"matMenu\">\n                <div mat-menu-item role=\"menuitem\" class=\"large-menu-item\" fxLayout=\"row\" fxFlexAlign=\"center center\"\n                     [routerLink]=\"profileRouterLink\" routerLinkActive=\"active-tree-node\">\n                    <mat-icon class=\"margin-auto\" fxFlex>face</mat-icon>\n                    <div class=\"large-menu-item\" fxLayout=\"column\" fxFlexAlign=\"start center\" fxFlex>\n                        <span *ngIf=\"!user.isImpersonating()\"  class=\"large-menu-item-text\" fxFlex=\"50\">{{user.fullName}}</span>\n                        <span *ngIf=\"user.isImpersonating()\" class=\"large-menu-item-text\" fxFlex=\"50\">{{user.fullName}} ({{user.getSelfOrImpersonated().fullName}})</span>\n                        <span class=\"large-menu-item-text\" style=\"font-size: 12px;\" fxFlex=\"50\">{{user.email}}</span>\n                    </div>\n                </div>\n                <button *ngIf=\"includeImpersonation && !user.isImpersonating()\" mat-menu-item (click)=\"impersonate()\">\n                    <mat-icon>supervisor_account</mat-icon>\n                    <span>{{'side-menu.impersonation.submit' | translate}}</span>\n                </button>\n                <button *ngIf=\"includeImpersonation && user.isImpersonating()\" mat-menu-item (click)=\"stopImpersonating()\">\n                    <mat-icon>clear</mat-icon>\n                    <span>{{'side-menu.impersonation.cease' | translate }}</span>\n                </button>\n                <button mat-menu-item (click)=\"logout()\">\n                    <mat-icon>exit_to_app</mat-icon>\n                    <span>{{ 'toolbar.menu.logout' | translate }}</span>\n                </button>\n            </mat-menu>\n            <button *ngIf=\"includeUser\" mat-icon-button [matMenuTriggerFor]=\"userRailMenu\" class=\"menu-button mat-typography menu-font-color\"\n                    [matTooltip]=\"user.fullName\"\n                    [matTooltipPosition]=\"'right'\">\n                <mat-icon>account_circle</mat-icon>\n            </button>\n\n            <div *ngIf=\"includeLanguage\" fxLayout=\"row\" class=\"icon-container\" fxLayoutAlign=\"center center\">\n                <nc-language-selector fxLayout=\"row\" ></nc-language-selector>\n            </div>\n\n            <mat-menu #railMenu=\"matMenu\">\n                <button *ngFor='let item of hiddenCustomItems; trackBy: itemsTrackBy' mat-menu-item\n                        [routerLink]='item.routing.path' routerLinkActive=\"active-tree-node\">\n                    <mat-icon>{{item.navigation.icon}}</mat-icon>\n                    <span>{{item.navigation.title}}</span>\n                </button>\n            </mat-menu>\n            <!--            <div fxLayout=\"row\" class=\"margin-bottom-x2 icon-container\" matTooltip=\"Otvori\u0165 menu\"-->\n            <!--                 matTooltipPosition=\"right\"-->\n            <!--                 fxLayoutAlign=\"center center\">-->\n            <!--                <button mat-icon-button [matMenuTriggerFor]=\"railMenu\">-->\n            <!--                    <mat-icon class=\"icon-large sidemenu-icon\">more_vert</mat-icon>-->\n            <!--                </button>-->\n            <!--            </div>-->\n            <button mat-icon-button [matMenuTriggerFor]=\"railMenu\"\n                    class=\"menu-button mat-typography menu-font-color margin-bottom-x2\"\n                    [matTooltip]=\"'toolbar.menu.open' | translate\"\n                    matTooltipPosition=\"right\">\n                <mat-icon>more_vert</mat-icon>\n            </button>\n\n        </div>\n    </mat-sidenav>\n\n    <mat-sidenav-content class=\"first-content index-menu\" >\n        <mat-sidenav-container class=\"drawer-container\" (backdropClick)=\"toggleLeftMenu()\">\n            <mat-sidenav [mode]=\"configRightMenu.mode\" [(opened)]=\"configRightMenu.opened\" position=\"start\"\n                         [disableClose]=\"configRightMenu.disableClose\"\n                         class=\"drawer-content\"\n                         mwlResizable\n                         [style.width.px]=\"configRightMenu.width\"\n                         [resizeCursorPrecision]=\"20\"\n                         [resizeEdges]=\"{right: true}\"\n                         (resizing)=\"onResizeEvent($event)\">\n\n                <div *ngTemplateOutlet=\"portalRightMenu || defaultRightSide\"></div>\n\n            </mat-sidenav>\n\n            <mat-sidenav-content class=\"content-color\">\n                <ng-content></ng-content>\n            </mat-sidenav-content>\n        </mat-sidenav-container>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n\n<ng-template #defaultLeftSide>\n\n    <div class=\"height-60 border-bottom\" fxLayoutAlign=\"center center\" fxHide.lt-md>\n        <button mat-icon-button (click)=\"toggleRightMenu()\" class=\"menu-button mat-typography menu-font-color\">\n            <mat-icon>menu</mat-icon>\n        </button>\n    </div>\n\n    <button mat-icon-button (click)=\"onHomeClick()\" class=\"menu-button mat-typography menu-font-color margin-top-default\"\n            [matTooltip]=\"'toolbar.menu.home' | translate\"\n            matTooltipPosition=\"right\">\n        <mat-icon>home</mat-icon>\n    </button>\n\n    <button *ngIf='!isOnZeroLevel() && (canGoBackLoading$ | async) === false' mat-icon-button (click)=\"onBackClick()\"\n            class=\"menu-button mat-typography menu-font-color\" [matTooltip]=\"'toolbar.menu.back' | translate\"\n            matTooltipPosition=\"right\">\n        <mat-icon>arrow_back</mat-icon>\n    </button>\n    <div *ngIf=\"(canGoBackLoading$ | async)\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"margin-top-default\">\n        <mat-spinner color=\"primary\" diameter=\"30\" mode=\"indeterminate\"></mat-spinner>\n    </div>\n\n    <div class=\"margin-top-x2\"></div>\n\n    <button *ngFor='let folder of leftItems; trackBy: itemsTrackBy' mat-icon-button (click)=\"onItemClick(folder)\"\n            class=\"menu-button mat-typography menu-font-color\" [matTooltip]=\"folder.navigation.title\" [matTooltipPosition]=\"'right'\"\n            [ngClass]=\"isItemAndNodeEqual(folder, currentNode) ? 'rail-selected-color' : 'menu-font-color'\" [routerLink]='folder.routing.path'\n            routerLinkActive=\"active\">\n        <mat-icon>{{folder.navigation.icon}}</mat-icon>\n    </button>\n\n    <div *ngIf=\"(leftLoading$ | async)\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"margin-top-default\">\n        <mat-spinner color=\"primary\" diameter=\"30\" mode=\"indeterminate\"></mat-spinner>\n    </div>\n</ng-template>\n\n<ng-template #defaultRightSide>\n    <div class=\"logo border-bottom\" fxLayoutAlign=\"center center\" fxHide.lt-md>\n        <img *ngIf=\"image !== undefined\" [alt]=\"imageAlt\" [src]=\"image\" class=\"logoimg\"\n             [routerLink]=\"imageRouterLink !== undefined ? imageRouterLink : []\">\n    </div>\n    <div *ngIf=\"(rightLoading$ | async) === false\">\n        <div fxLayout=\"column\" fxLayoutAlign=\"end end\" class=\"order-icon-wrapper\">\n            <button mat-icon-button fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"mat-button mat-typography menu-font-color order-icon\" (click)=\"switchOrder()\"\n                    [matTooltip]=\"isAscending() ? ('dynamicNavigation.ascending' | translate) : ('dynamicNavigation.descending' | translate)\">\n                <mat-icon>{{isAscending() ? \"expand_more\" : \"expand_less\"}}</mat-icon>\n            </button>\n        </div>\n        <div *ngFor='let item of rightItems; trackBy: itemsTrackBy' (click)=\"onItemClick(item)\"\n             class=\"tree-node mat-typography mat-body-2\" fxLayoutAlign=\"start center\" [routerLink]='item.routing.path'\n             routerLinkActive=\"active-tree-node\">\n            <mat-icon class=\"tree-node-icon\">{{item.navigation.icon}}</mat-icon>\n            <span>{{item.navigation.title}}</span>\n            <span class=\"menu-item-focus-overlay\"></span>\n        </div>\n        <div *ngIf=\"moreItems.length > 0\">\n            <button mat-button color=\"primary\" (click)=\"loadMoreItems()\">{{'dynamicNavigation.loadMoreItems' | translate}}</button>\n        </div>\n    </div>\n    <div *ngIf=\"(rightLoading$ | async)\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"margin-top-default\">\n        <mat-spinner color=\"primary\" diameter=\"40\" mode=\"indeterminate\"></mat-spinner>\n    </div>\n</ng-template>\n", styles: [".rail-container{height:100%}.rail-content{width:52px;min-width:52px;border-right:none!important}.drawer-container{height:100%}.menu-button{margin-left:6px;margin-right:6px;border-radius:8px}.drawer-content{width:300px;min-width:300px;box-shadow:0 2px 4px #0d2d3c29,0 4px 8px #546e7a29}.height-60{height:60px}.drawer-control{position:absolute;box-shadow:0 2px 4px #0d2d3c29,0 4px 8px #546e7a29}.index-menu{z-index:2}.first-content{box-shadow:0 2px 4px #0d2d3c29,0 4px 8px #546e7a29}.border-bottom{border-bottom:1px solid #E2E8F0}.logo{height:60px}.logo-closed{width:60px!important}.logoimg{margin-left:auto;margin-right:auto;height:35px;outline:none!important;cursor:pointer}.icon-large{height:40px;width:40px;font-size:40px;color:#000000b3}.icon-container{outline:none!important;height:40px}.icon-large:hover{cursor:pointer}.menu-font-color{color:#000000b3!important}.margin-top-65{margin-top:49px}.margin-auto{margin:auto}.padding-top-65{padding-top:49px}.padding-top-8{padding-top:8px}.margin-bottom-x2{margin-bottom:16px}.tree-node{outline:none!important;cursor:pointer;padding:10px 8px;margin:0 8px;color:#000000b3;position:relative;border-radius:8px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:.1px}.tree-node mat-icon.tree-node-icon{height:24px;width:24px;font-size:24px;margin-right:4px}.tree-node .tree-node-label{height:24px;font-size:16px}.tree-node .margin-component{width:8px;margin-right:4px}.tree-node .menu-item-focus-overlay{opacity:0;position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:black;transition:opacity .2s cubic-bezier(.35,0,.25,1),background-color .2s cubic-bezier(.35,0,.25,1)}.tree-node:hover .menu-item-focus-overlay{opacity:.04}.margin-top-default{margin-top:8px}.margin-top-x2{margin-top:16px}.logoimg-tool{height:33px;outline:none!important;cursor:pointer;background:#fafafa}.toolbar{min-height:50px!important;height:50px;border-bottom:1px solid #E2E8F0}@media screen and (max-width: 959.99px){.rail-container{height:calc(100% - 50px)}.rail-content{width:52px;min-width:52px;top:0;border-right:none!important}.margin-top-65{margin-top:16px}.padding-top-65{padding-top:16px}}.profile-tooltip{font-size:20px}.sidemenu-icon{line-height:unset!important}.line{width:calc(100% - 16px);padding-left:8px;padding-right:8px;flex:1}.headline-text{font-weight:400;font-size:12px;line-height:16px;letter-spacing:.4px;padding-top:4px}.headline-padding{padding:0 8px}.large-menu-item{height:64px;line-height:64px}.large-menu-item-text{line-height:32px}.cursor-pointer{cursor:pointer}.box-container{box-sizing:content-box;display:block;overflow:hidden}.content-color{background-color:#f8fafc}.expansion-indicator{color:#00000080;margin-right:10px}.expansion-indicator:after{border-style:solid;border-width:0 2px 2px 0;content:\"\";display:inline-block;padding:3px;vertical-align:middle;transform:rotate(45deg)}.order-icon{transform:scale(.7)}.order-text{color:#000000b3}.order-icon-wrapper{margin-bottom:0}.deny-select{-webkit-user-select:none;user-select:none}\n"] }]
+                    ], template: "<div class=\"drawer-control rail-color height-60\" [ngClass]=\"{'index-menu': !configLeftMenu.opened}\"\n     fxLayoutAlign=\"center center\" fxHide.lt-md>\n    <button mat-icon-button (click)=\"toggleMenu()\" class=\"menu-button mat-typography menu-font-color\">\n        <mat-icon>menu</mat-icon>\n    </button>\n</div>\n\n<mat-toolbar fxHide.gt-sm class=\"toolbar\">\n    <mat-toolbar-row fxLayout=\"row\" fxLayoutAlign=\"space-between stretch\">\n        <div fxFlex fxLayoutAlign=\"start center\">\n            <button mat-icon-button (click)=\"toggleMenu()\">\n                <mat-icon>menu</mat-icon>\n            </button>\n        </div>\n        <div fxLayoutAlign=\"center center\" fxFlex>\n            <img #logo [alt]=\"imageAlt\" [src]=\"image\" class=\"logoimg-tool\"\n                 [routerLink]=\"imageRouterLink !== undefined ? imageRouterLink : []\">\n        </div>\n        <div fxFlex></div>\n    </mat-toolbar-row>\n</mat-toolbar>\n<mat-spinner *ngIf=\"!logo\"></mat-spinner>\n<mat-sidenav-container class=\"rail-container deny-select\">\n    <mat-sidenav mode=\"side\" [(opened)]=\"configLeftMenu.opened\" position=\"start\"\n                 [disableClose]=\"configLeftMenu.disableClose\"\n                 class=\"rail-content\">\n\n        <div fxLayout=\"column\" class=\"rail-color\" fxFlex>\n\n            <div *ngTemplateOutlet=\"portalLeftMenu || defaultLeftSide\"></div>\n\n            <div class=\"margin-top-x2\"></div>\n\n            <div fxFlex></div>\n\n            <mat-menu #userRailMenu=\"matMenu\">\n                <div mat-menu-item role=\"menuitem\" class=\"large-menu-item\" fxLayout=\"row\" fxFlexAlign=\"center center\"\n                     [routerLink]=\"profileRouterLink\" routerLinkActive=\"active-tree-node\">\n                    <mat-icon class=\"margin-auto\" fxFlex>face</mat-icon>\n                    <div class=\"large-menu-item\" fxLayout=\"column\" fxFlexAlign=\"start center\" fxFlex>\n                        <span *ngIf=\"!user.isImpersonating()\" class=\"large-menu-item-text\"\n                              fxFlex=\"50\">{{ user.fullName }}</span>\n                        <span *ngIf=\"user.isImpersonating()\" class=\"large-menu-item-text\"\n                              fxFlex=\"50\">{{ user.fullName }} ({{ user.getSelfOrImpersonated().fullName }})</span>\n                        <span class=\"large-menu-item-text\" style=\"font-size: 12px;\" fxFlex=\"50\">{{ user.email }}</span>\n                    </div>\n                </div>\n                <button *ngIf=\"includeImpersonation && !user.isImpersonating()\" mat-menu-item (click)=\"impersonate()\">\n                    <mat-icon>supervisor_account</mat-icon>\n                    <span>{{ 'side-menu.impersonation.submit' | translate }}</span>\n                </button>\n                <button *ngIf=\"includeImpersonation && user.isImpersonating()\" mat-menu-item\n                        (click)=\"stopImpersonating()\">\n                    <mat-icon>clear</mat-icon>\n                    <span>{{ 'side-menu.impersonation.cease' | translate }}</span>\n                </button>\n                <button mat-menu-item (click)=\"logout()\">\n                    <mat-icon>exit_to_app</mat-icon>\n                    <span>{{ 'toolbar.menu.logout' | translate }}</span>\n                </button>\n            </mat-menu>\n            <button *ngIf=\"includeUser\" mat-icon-button [matMenuTriggerFor]=\"userRailMenu\"\n                    class=\"menu-button mat-typography menu-font-color\"\n                    [matTooltip]=\"user.fullName\"\n                    [matTooltipPosition]=\"'right'\">\n                <mat-icon>account_circle</mat-icon>\n            </button>\n\n            <div *ngIf=\"includeLanguage\" fxLayout=\"row\" class=\"icon-container\">\n                <button mat-icon-button class=\"menu-button mat-typography menu-font-color\">\n                    <nc-language-selector fxLayout=\"row\"></nc-language-selector>\n                </button>\n            </div>\n\n            <mat-menu #railMenu=\"matMenu\">\n                <button *ngFor='let item of hiddenCustomItems; trackBy: itemsTrackBy' mat-menu-item\n                        [routerLink]='item.routing.path' routerLinkActive=\"active-tree-node\">\n                    <mat-icon>{{ item.navigation.icon }}</mat-icon>\n                    <span>{{ item.navigation.title }}</span>\n                </button>\n            </mat-menu>\n            <!--            <div fxLayout=\"row\" class=\"margin-bottom-x2 icon-container\" matTooltip=\"Otvori\u0165 menu\"-->\n            <!--                 matTooltipPosition=\"right\"-->\n            <!--                 fxLayoutAlign=\"center center\">-->\n            <!--                <button mat-icon-button [matMenuTriggerFor]=\"railMenu\">-->\n            <!--                    <mat-icon class=\"icon-large sidemenu-icon\">more_vert</mat-icon>-->\n            <!--                </button>-->\n            <!--            </div>-->\n            <button mat-icon-button *ngIf=\"hiddenCustomItems && hiddenCustomItems.length > 0\"\n                    [matMenuTriggerFor]=\"railMenu\"\n                    class=\"menu-button mat-typography menu-font-color\"\n                    [matTooltip]=\"'toolbar.menu.open' | translate\"\n                    matTooltipPosition=\"right\">\n                <mat-icon>more_vert</mat-icon>\n            </button>\n\n            <div class=\"margin-top-x2\"></div>\n        </div>\n    </mat-sidenav>\n\n    <mat-sidenav-content class=\"first-content index-menu\">\n        <mat-sidenav-container class=\"drawer-container\" (backdropClick)=\"toggleLeftMenu()\">\n            <mat-sidenav [mode]=\"configRightMenu.mode\" [(opened)]=\"configRightMenu.opened\" position=\"start\"\n                         [disableClose]=\"configRightMenu.disableClose\"\n                         class=\"drawer-content\"\n                         mwlResizable\n                         [style.width.px]=\"configRightMenu.width\"\n                         [resizeCursorPrecision]=\"20\"\n                         [resizeEdges]=\"{right: true}\"\n                         (resizing)=\"onResizeEvent($event)\">\n\n                <div *ngTemplateOutlet=\"portalRightMenu || defaultRightSide\"></div>\n\n            </mat-sidenav>\n\n            <mat-sidenav-content class=\"content-color\">\n                <ng-content></ng-content>\n            </mat-sidenav-content>\n        </mat-sidenav-container>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n\n<ng-template #defaultLeftSide>\n\n    <div class=\"height-60 border-bottom\" fxLayoutAlign=\"center center\" fxHide.lt-md>\n        <button mat-icon-button (click)=\"toggleRightMenu()\" class=\"menu-button mat-typography menu-font-color\">\n            <mat-icon>menu</mat-icon>\n        </button>\n    </div>\n\n    <button mat-icon-button (click)=\"onHomeClick()\"\n            class=\"menu-button mat-typography menu-font-color margin-top-default\"\n            [matTooltip]=\"'toolbar.menu.home' | translate\"\n            matTooltipPosition=\"right\">\n        <mat-icon>home</mat-icon>\n    </button>\n\n    <button *ngIf='!isOnZeroLevel() && (canGoBackLoading$ | async) === false' mat-icon-button (click)=\"onBackClick()\"\n            class=\"menu-button mat-typography menu-font-color\" [matTooltip]=\"'toolbar.menu.back' | translate\"\n            matTooltipPosition=\"right\">\n        <mat-icon>arrow_back</mat-icon>\n    </button>\n    <div *ngIf=\"(canGoBackLoading$ | async)\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"margin-top-default\">\n        <mat-spinner color=\"primary\" diameter=\"30\" mode=\"indeterminate\"></mat-spinner>\n    </div>\n\n    <div class=\"margin-top-x2\"></div>\n\n    <button *ngFor='let folder of leftItems; trackBy: itemsTrackBy' mat-icon-button (click)=\"onItemClick(folder)\"\n            class=\"menu-button mat-typography menu-font-color\" [matTooltip]=\"folder.navigation.title\"\n            [matTooltipPosition]=\"'right'\"\n            [ngClass]=\"isItemAndNodeEqual(folder, currentNode) ? 'rail-selected-color' : 'menu-font-color'\"\n            [routerLink]='folder.routing.path'\n            routerLinkActive=\"active\">\n        <mat-icon>{{ folder.navigation.icon }}</mat-icon>\n    </button>\n\n    <div *ngIf=\"(leftLoading$ | async)\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"margin-top-default\">\n        <mat-spinner color=\"primary\" diameter=\"30\" mode=\"indeterminate\"></mat-spinner>\n    </div>\n</ng-template>\n\n<ng-template #defaultRightSide>\n    <div class=\"logo border-bottom\" fxLayoutAlign=\"center center\" fxHide.lt-md>\n        <img *ngIf=\"image !== undefined\" [alt]=\"imageAlt\" [src]=\"image\" class=\"logoimg\"\n             [routerLink]=\"imageRouterLink !== undefined ? imageRouterLink : []\">\n    </div>\n    <div *ngIf=\"(rightLoading$ | async) === false\">\n        <div fxLayout=\"column\" fxLayoutAlign=\"end end\" class=\"order-icon-wrapper\">\n            <button mat-icon-button fxLayout=\"column\" fxLayoutAlign=\"center center\"\n                    class=\"mat-button mat-typography menu-font-color order-icon\" (click)=\"switchOrder()\"\n                    [matTooltip]=\"isAscending() ? ('dynamicNavigation.ascending' | translate) : ('dynamicNavigation.descending' | translate)\">\n                <mat-icon>{{ isAscending() ? \"expand_more\" : \"expand_less\" }}</mat-icon>\n            </button>\n        </div>\n        <div *ngFor='let item of rightItems; trackBy: itemsTrackBy' (click)=\"onItemClick(item)\"\n             class=\"tree-node mat-typography mat-body-2\" fxLayoutAlign=\"start center\" [routerLink]='item.routing.path'\n             routerLinkActive=\"active-tree-node\">\n            <mat-icon class=\"tree-node-icon\">{{ item.navigation.icon }}</mat-icon>\n            <span>{{ item.navigation.title }}</span>\n            <span class=\"menu-item-focus-overlay\"></span>\n        </div>\n        <div *ngIf=\"moreItems.length > 0\">\n            <button mat-button color=\"primary\"\n                    (click)=\"loadMoreItems()\">{{ 'dynamicNavigation.loadMoreItems' | translate }}\n            </button>\n        </div>\n    </div>\n    <div *ngIf=\"(rightLoading$ | async)\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"margin-top-default\">\n        <mat-spinner color=\"primary\" diameter=\"40\" mode=\"indeterminate\"></mat-spinner>\n    </div>\n</ng-template>\n", styles: [".rail-container{height:100%}.rail-content{width:52px;min-width:52px;border-right:none!important}.drawer-container{height:100%}.menu-button{margin:0 auto;border-radius:8px}.drawer-content{width:300px;min-width:300px;box-shadow:0 2px 4px #0d2d3c29,0 4px 8px #546e7a29}.height-60{height:60px}.drawer-control{position:absolute;box-shadow:0 2px 4px #0d2d3c29,0 4px 8px #546e7a29}.index-menu{z-index:2}.first-content{box-shadow:0 2px 4px #0d2d3c29,0 4px 8px #546e7a29}.border-bottom{border-bottom:1px solid #E2E8F0}.logo{height:60px}.logo-closed{width:60px!important}.logoimg{margin-left:auto;margin-right:auto;height:35px;outline:none!important;cursor:pointer}.icon-large{height:40px;width:40px;font-size:40px;color:#000000b3}.icon-container{outline:none!important;height:40px}.icon-large:hover{cursor:pointer}.menu-font-color{color:#000000b3!important}.margin-top-65{margin-top:49px}.margin-auto{margin:auto}.padding-top-65{padding-top:49px}.padding-top-8{padding-top:8px}.margin-bottom-x2{margin-bottom:16px}.tree-node{outline:none!important;cursor:pointer;padding:10px 8px;margin:0 8px;color:#000000b3;position:relative;border-radius:8px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:.1px}.tree-node mat-icon.tree-node-icon{height:24px;width:24px;font-size:24px;margin-right:4px}.tree-node .tree-node-label{height:24px;font-size:16px}.tree-node .margin-component{width:8px;margin-right:4px}.tree-node .menu-item-focus-overlay{opacity:0;position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:black;transition:opacity .2s cubic-bezier(.35,0,.25,1),background-color .2s cubic-bezier(.35,0,.25,1)}.tree-node:hover .menu-item-focus-overlay{opacity:.04}.margin-top-default{margin-top:8px}.margin-top-x2{margin-top:16px}.logoimg-tool{height:33px;outline:none!important;cursor:pointer;background:#fafafa}.toolbar{min-height:50px!important;height:50px;border-bottom:1px solid #E2E8F0}@media screen and (max-width: 959.99px){.rail-container{height:calc(100% - 50px)}.rail-content{width:52px;min-width:52px;top:0;border-right:none!important}.margin-top-65{margin-top:16px}.padding-top-65{padding-top:16px}}.profile-tooltip{font-size:20px}.sidemenu-icon{line-height:unset!important}.line{width:calc(100% - 16px);padding-left:8px;padding-right:8px;flex:1}.headline-text{font-weight:400;font-size:12px;line-height:16px;letter-spacing:.4px;padding-top:4px}.headline-padding{padding:0 8px}.large-menu-item{height:64px;line-height:64px}.large-menu-item-text{line-height:32px}.cursor-pointer{cursor:pointer}.box-container{box-sizing:content-box;display:block;overflow:hidden}.content-color{background-color:#f8fafc}.expansion-indicator{color:#00000080;margin-right:10px}.expansion-indicator:after{border-style:solid;border-width:0 2px 2px 0;content:\"\";display:inline-block;padding:3px;vertical-align:middle;transform:rotate(45deg)}.order-icon{transform:scale(.7)}.order-text{color:#000000b3}.order-icon-wrapper{margin-bottom:0}.deny-select{-webkit-user-select:none;user-select:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i1$6.BreakpointObserver }, { type: i1.LanguageService }, { type: i1$2.TranslateService }, { type: i1.UserService }, { type: i1.AccessService }, { type: i1.LoggerService }, { type: i1.ConfigurationService }, { type: i1.UriService }, { type: i1.CaseResourceService }, { type: i1.ImpersonationUserSelectService }, { type: i1.ImpersonationService }, { type: i1.DynamicNavigationRouteProviderService }]; } });
 
 class NavigationComponentModule {