@netgrif/components 6.0.3 → 6.0.4

package/esm2015/lib/admin/user-invite/user-invite.component.js

@@ -21,7 +21,7 @@ UserInviteComponent.ctorParameters = () => [
 UserInviteComponent.decorators = [
     { type: Component, args: [{
                 selector: 'nc-user-invite',
-                template: "<div fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"full-height full-width padding-default\">\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex=\"40\" class=\"full-height margin-right-16px\">\n\n        <mat-toolbar color=\"primary\" class=\"height-96 margin-bottom-16px\">\n            <span>{{'admin.user-invite.newUser' | translate}}</span>\n            <div fxFlex></div>\n            <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex=\"40\" class=\"padding-right-16px\">\n                <mat-icon fxFlex class=\"mail-icon\">email</mat-icon>\n                <mat-form-field fxFlex=\"100\" class=\"user-assign-search\" color=\"primary\">\n                    <input matInput placeholder=\"{{ 'admin.user-invite.mail' | translate }}\"\n                           [formControl]=\"invitedEmailControl\">\n                    <button mat-button *ngIf=\"invitedEmailControl.value\" matSuffix mat-icon-button\n                            (click)=\"invitedEmailControl.setValue('')\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </mat-form-field>\n            </div>\n        </mat-toolbar>\n\n\n        <div fxLayout=\"column\" class=\"invited-card margin-bottom-16px\" fxLayoutAlign=\"start stretch\">\n\n            <span class=\"invited-card-font padding-16px\">{{'admin.user-invite.selectedOrgs' | translate}}</span>\n\n            <mat-divider class=\"inherited-divider\"></mat-divider>\n\n            <div class=\"padding-16px\" fxLayout=\"column\" *ngIf=\"invitedGroups.length !== 0\">\n                <div *ngFor=\"let org of invitedGroups\" fxFlex fxLayout=\"row\" fxLayoutAlign=\"start center\">\n                    <span>{{org.name}}</span>\n\n                    <div fxFlex></div>\n\n                    <button mat-icon-button color=\"primary\" (click)=\"removeGroup(org)\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n\n            <span class=\"padding-16px\"\n                  *ngIf=\"invitedGroups.length === 0\">{{'admin.user-invite.noSelectedOrgs' | translate}}</span>\n        </div>\n\n\n        <div fxLayout=\"column\" class=\"invited-card margin-bottom-16px\" fxLayoutAlign=\"start stretch\">\n\n            <span class=\"invited-card-font padding-16px\">{{'admin.user-invite.selectedRoles' | translate}}</span>\n\n            <mat-divider class=\"inherited-divider\"></mat-divider>\n\n            <div class=\"padding-16px\" fxLayout=\"column\" *ngIf=\"invitedRoles.length !== 0\">\n                <div *ngFor=\"let role of invitedRoles\" fxFlex fxLayout=\"row\" fxLayoutAlign=\"start center\">\n                    <span>{{role.name}}</span>\n\n                    <div fxFlex></div>\n\n                    <button mat-icon-button color=\"primary\" (click)=\"removeRole(role)\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n\n            <span class=\"padding-16px\"\n                  *ngIf=\"invitedRoles.length === 0\">{{'admin.user-invite.noSelectedRoles' | translate}}</span>\n        </div>\n\n        <div fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n            <button mat-raised-button color=\"primary\" (click)=\"invite()\">\n                <span>{{'admin.user-invite.invite-user' | translate}}</span>\n            </button>\n        </div>\n    </div>\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex=\"30\" class=\"full-height margin-right-16px\">\n\n        <mat-toolbar color=\"primary\" class=\"height-96 margin-bottom-16px\">\n            <span>{{'admin.user-invite.orgs' | translate}}</span>\n        </mat-toolbar>\n\n        <div *ngIf=\"groups.length === 0\" fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex>\n            <mat-icon color=\"accent\" class=\"margin-bottom-default no-user-icon\">groups</mat-icon>\n            <span class=\"font-size-20\">{{'admin.user-invite.noGroups' | translate}}</span>\n        </div>\n\n        <div fxLayout=\"column\" class=\"invited-card \" *ngIf=\"groups.length !== 0\">\n            <div fxLayout=\"column\">\n                <div *ngFor=\"let group of groups\" class=\"padding-16px-0\" fxFlex fxLayout=\"row\"\n                     fxLayoutAlign=\"start center\">\n                    <span>{{group.name}}</span>\n\n                    <div fxFlex></div>\n\n                    <button mat-icon-button color=\"primary\" (click)=\"addGroup(group)\">\n                        <mat-icon>add</mat-icon>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex=\"30\" class=\"full-height\">\n\n        <mat-toolbar color=\"primary\" class=\"height-96 margin-bottom-16px\">\n            <span>{{'admin.process-list.listTitle' | translate}}</span>\n        </mat-toolbar>\n\n        <div *ngIf=\"nets.processes.length === 0\" fxLayout=\"column\"\n             fxLayoutAlign=\"center center\" fxFlex class=\"margin-top-x2\">\n            <mat-icon color=\"accent\" class=\"margin-bottom-default no-user-icon\">timeline</mat-icon>\n            <span class=\"font-size-20\">{{ 'admin.process-list.noProcessesWereFound' | translate}}</span>\n        </div>\n\n        <mat-accordion class=\"full-width margin-top-default process-list-accordion\" multi fxFlex>\n\n            <mat-expansion-panel *ngFor=\"let item of nets.processes\" (afterExpand)=\"nets.loadProcessItemRoles(item)\"\n                                 (afterCollapse)=\"nets.prepareToTryAgainToLoadRoles(item)\">\n\n                <mat-expansion-panel-header>\n                    <mat-panel-title>\n                        <mat-icon *ngIf=\"item.someRolesSelected\" color=\"accent\" class=\"margin-right-x2\">tour</mat-icon>\n                        <span>{{item.initials}} - {{item.title}}</span>\n                    </mat-panel-title>\n                    <mat-panel-description class=\"process-item-description\">\n                        <span\n                            class=\"process-item-description full-width\">{{'admin.process-list.newestVersion' | translate}}\n                            : {{item.newestVersion}}</span>\n                    </mat-panel-description>\n                </mat-expansion-panel-header>\n\n                <div *ngIf=\"item.loading\" fxFlex=\"100\" class=\"full-width\">\n                    <mat-progress-bar mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\n                </div>\n\n                <div *ngIf=\"!item.loading && item.emptyRoles\" fxLayout=\"column\"\n                     fxLayoutAlign=\"center center\" fxFlex class=\"full-width full-height net-panel-content\">\n                    <mat-icon color=\"accent\" class=\"margin-bottom-default\">account_circle</mat-icon>\n                    <span class=\"font-size-15\">{{ 'admin.process-list.noRoles' | translate}}</span>\n                </div>\n\n                <div *ngIf=\"!item.loading && !item.emptyRoles\" fxLayout=\"column\" fxLayoutAlign=\"start center\"\n                     class=\"full-height full-width net-panel-content padding-0-16px\">\n                    <h3>Roles</h3>\n                    <div *ngFor=\"let net of item.processes; let first = first\" fxLayout=\"column\"\n                         fxLayoutAlign=\"start center\" class=\"full-width\">\n                        <mat-divider *ngIf=\"!first\" style=\"position: relative\"></mat-divider>\n\n                        <span>{{'admin.user-invite.version' | translate }} - {{net.version}}</span>\n\n                        <div fxLayout=\"column\" class=\"full-width padding-16px\">\n                            <div *ngFor=\"let role of net.roles\" fxFlex fxLayout=\"row wrap\" fxLayoutAlign=\"start center\">\n                                <span>{{role.name}}</span>\n\n                                <div fxFlex></div>\n\n                                <button mat-icon-button color=\"primary\" (click)=\"addRole(role)\">\n                                    <mat-icon>add</mat-icon>\n                                </button>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n            </mat-expansion-panel>\n\n        </mat-accordion>\n\n        <div *ngIf=\"nets.loading$ | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex=\"100\">\n            <mat-spinner color=\"primary\" diameter=\"65\"></mat-spinner>\n        </div>\n    </div>\n</div>\n\n",
+                template: "<div fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"full-height full-width padding-default\">\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex=\"40\" class=\"full-height margin-right-16px\">\n\n        <mat-toolbar color=\"primary\" class=\"height-96 margin-bottom-16px\">\n            <span>{{'admin.user-invite.newUser' | translate}}</span>\n            <div fxFlex></div>\n            <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex=\"40\" class=\"padding-right-16px\">\n                <mat-icon fxFlex class=\"mail-icon\">email</mat-icon>\n                <mat-form-field fxFlex=\"100\" class=\"user-assign-search\" color=\"primary\">\n                    <input matInput placeholder=\"{{ 'admin.user-invite.mail' | translate }}\"\n                           [formControl]=\"invitedEmailControl\">\n                    <button mat-button *ngIf=\"invitedEmailControl.value\" matSuffix mat-icon-button\n                            (click)=\"invitedEmailControl.setValue('')\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </mat-form-field>\n            </div>\n        </mat-toolbar>\n\n\n        <div fxLayout=\"column\" class=\"invited-card margin-bottom-16px\" fxLayoutAlign=\"start stretch\">\n\n            <span class=\"invited-card-font padding-16px\">{{'admin.user-invite.selectedOrgs' | translate}}</span>\n\n            <mat-divider class=\"inherited-divider\"></mat-divider>\n\n            <div class=\"padding-16px\" fxLayout=\"column\" *ngIf=\"invitedGroups.length !== 0\">\n                <div *ngFor=\"let org of invitedGroups\" fxFlex fxLayout=\"row\" fxLayoutAlign=\"start center\">\n                    <span>{{org.name}}</span>\n\n                    <div fxFlex></div>\n\n                    <button mat-icon-button color=\"primary\" (click)=\"removeGroup(org)\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n\n            <span class=\"padding-16px\"\n                  *ngIf=\"invitedGroups.length === 0\">{{'admin.user-invite.noSelectedOrgs' | translate}}</span>\n        </div>\n\n\n        <div fxLayout=\"column\" class=\"invited-card margin-bottom-16px\" fxLayoutAlign=\"start stretch\">\n\n            <span class=\"invited-card-font padding-16px\">{{'admin.user-invite.selectedRoles' | translate}}</span>\n\n            <mat-divider class=\"inherited-divider\"></mat-divider>\n\n            <div class=\"padding-16px\" fxLayout=\"column\" *ngIf=\"invitedRoles.length !== 0\">\n                <div *ngFor=\"let role of invitedRoles\" fxFlex fxLayout=\"row\" fxLayoutAlign=\"start center\">\n                    <span>{{role.name}}</span>\n\n                    <div fxFlex></div>\n\n                    <button mat-icon-button color=\"primary\" (click)=\"removeRole(role)\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n\n            <span class=\"padding-16px\"\n                  *ngIf=\"invitedRoles.length === 0\">{{'admin.user-invite.noSelectedRoles' | translate}}</span>\n        </div>\n\n        <div fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n            <button mat-raised-button color=\"primary\" (click)=\"invite()\">\n                <span>{{'admin.user-invite.invite-user' | translate}}</span>\n            </button>\n        </div>\n    </div>\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex=\"30\" class=\"full-height margin-right-16px\">\n\n        <mat-toolbar color=\"primary\" class=\"height-96 margin-bottom-16px\">\n            <span>{{'admin.user-invite.orgs' | translate}}</span>\n        </mat-toolbar>\n\n        <div *ngIf=\"groups.length === 0\" fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex>\n            <mat-icon color=\"accent\" class=\"margin-bottom-default no-user-icon\">groups</mat-icon>\n            <span class=\"font-size-20\">{{'admin.user-invite.noGroups' | translate}}</span>\n        </div>\n\n        <div fxLayout=\"column\" class=\"invited-card \" *ngIf=\"groups.length !== 0\">\n            <div fxLayout=\"column\">\n                <div *ngFor=\"let group of groups\" class=\"padding-16px-0\" fxFlex fxLayout=\"row\"\n                     fxLayoutAlign=\"start center\">\n                    <span>{{group.name}}</span>\n\n                    <div fxFlex></div>\n\n                    <button mat-icon-button color=\"primary\" (click)=\"addGroup(group)\">\n                        <mat-icon>add</mat-icon>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex=\"30\" class=\"full-height\">\n\n        <mat-toolbar color=\"primary\" class=\"height-96 margin-bottom-16px\">\n            <span>{{'admin.process-list.listTitle' | translate}}</span>\n        </mat-toolbar>\n\n        <div *ngIf=\"nets.processes.length === 0\" fxLayout=\"column\"\n             fxLayoutAlign=\"center center\" fxFlex class=\"margin-top-x2\">\n            <mat-icon color=\"accent\" class=\"margin-bottom-default no-user-icon\">timeline</mat-icon>\n            <span class=\"font-size-20\">{{ 'admin.process-list.noProcessesWereFound' | translate}}</span>\n        </div>\n\n        <mat-accordion class=\"full-width margin-top-default process-list-accordion\" multi fxFlex>\n\n            <mat-expansion-panel *ngFor=\"let item of nets.processes\" (afterExpand)=\"nets.loadProcessItemRoles(item)\"\n                                 (afterCollapse)=\"nets.prepareToTryAgainToLoadRoles(item)\">\n\n                <mat-expansion-panel-header>\n                    <mat-panel-title>\n                        <mat-icon *ngIf=\"item.someRolesSelected\" color=\"accent\" class=\"margin-right-x2\">tour</mat-icon>\n                        <span>{{item.initials}} - {{item.title}}</span>\n                    </mat-panel-title>\n                    <mat-panel-description class=\"process-item-description\">\n                        <span\n                            class=\"process-item-description full-width\">{{'admin.process-list.newestVersion' | translate}}\n                            : {{item.newestVersion}}</span>\n                    </mat-panel-description>\n                </mat-expansion-panel-header>\n\n                <div *ngIf=\"item.loading\" fxFlex=\"100\" class=\"full-width\">\n                    <mat-progress-bar mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\n                </div>\n\n                <div *ngIf=\"!item.loading && item.emptyRoles\" fxLayout=\"column\"\n                     fxLayoutAlign=\"center center\" fxFlex class=\"full-width full-height net-panel-content\">\n                    <mat-icon color=\"accent\" class=\"margin-bottom-default\">account_circle</mat-icon>\n                    <span class=\"font-size-15\">{{ 'admin.process-list.noRoles' | translate}}</span>\n                </div>\n\n                <div *ngIf=\"!item.loading && !item.emptyRoles\" fxLayout=\"column\" fxLayoutAlign=\"start center\"\n                     class=\"full-height full-width net-panel-content padding-0-16px\">\n                    <h3>Roles</h3>\n                    <div *ngFor=\"let net of item.processes; let first = first\" fxLayout=\"column\"\n                         fxLayoutAlign=\"start center\" class=\"full-width\">\n                        <mat-divider *ngIf=\"!first\" style=\"position: relative\"></mat-divider>\n\n                        <span>{{'admin.user-invite.version' | translate }} - {{net.version}}</span>\n\n                        <div fxLayout=\"column\" class=\"full-width padding-16px\">\n                            <div *ngFor=\"let role of net.roles\" fxFlex fxLayout=\"row wrap\" fxLayoutAlign=\"start center\">\n                                <span>{{role.name}}</span>\n\n                                <div fxFlex></div>\n\n                                <button mat-icon-button color=\"primary\" (click)=\"addRole(role)\">\n                                    <mat-icon>add</mat-icon>\n                                </button>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n            </mat-expansion-panel>\n\n        </mat-accordion>\n\n        <div *ngIf=\"nets.loading$ | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex=\"100\">\n            <mat-spinner color=\"primary\" diameter=\"65\"></mat-spinner>\n        </div>\n    </div>\n</div>\n",
                 styles: [".full-height{height:100%;min-height:100%}.full-width{width:100%;min-width:100%}.padding-default{padding:8px}.padding-half{padding:4px}.padding-x2{padding:16px}.margin-default{margin:8px}.margin-half{margin:4px}.margin-x2{margin:16px}.margin-top-default{margin-top:8px}.margin-top-half{margin-top:4px}.margin-top-x2{margin-top:16px}.margin-bottom-default{margin-bottom:8px}.margin-bottom-half{margin-bottom:4px}.margin-bottom-x2{margin-bottom:16px}.margin-left-default{margin-left:8px}.margin-left-half{margin-left:4px}.margin-left-x2{margin-left:16px}.margin-right-default{margin-right:8px}.margin-right-half{margin-right:4px}.margin-right-x2{margin-right:16px}.flex-class{flex:1 1 auto}.height-96{min-height:96px}.mail-icon{margin-right:10px}.invited-card{padding:0 16px;width:100%;white-space:nowrap;border:1px solid #eee}.invited-card-font,.invited-card-font h1,.invited-card-font h2,.invited-card-font h3,.invited-card-font h4,.invited-card-font h5,.invited-card-font h6{font:500 20px/32px Roboto,monospace;letter-spacing:normal;margin:0}.inherited-divider{position:inherit}.padding-16px{padding:16px}.padding-0-16px{padding:0 16px}.padding-16px-0{padding:16px 0}.padding-right-16px{padding-right:16px}.margin-right-16px{margin-right:16px}.margin-bottom-16px{margin-bottom:16px}.font-size-20{font-size:20px}"]
             },] }
 ];
@@ -32,4 +32,4 @@ UserInviteComponent.ctorParameters = () => [
     { type: SnackBarService },
     { type: TranslateService }
 ];
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlci1pbnZpdGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQG5ldGdyaWYvY29tcG9uZW50cy8iLCJzb3VyY2VzIjpbImxpYi9hZG1pbi91c2VyLWludml0ZS91c2VyLWludml0ZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN4QyxPQUFPLEVBQ0gsMkJBQTJCLEVBQzNCLHVCQUF1QixFQUN2QixhQUFhLEVBQ2IsZUFBZSxFQUNmLGlCQUFpQixFQUNwQixNQUFNLDBCQUEwQixDQUFDO0FBQ2xDLE9BQU8sRUFBQyxnQkFBZ0IsRUFBQyxNQUFNLHFCQUFxQixDQUFDO0FBT3JELE1BQU0sT0FBTyxtQkFBb0IsU0FBUSwyQkFBMkI7SUFFaEUsWUFBc0Isa0JBQXFDLEVBQ3JDLFFBQWlDLEVBQ2pDLGNBQTZCLEVBQzdCLFNBQTBCLEVBQzFCLFVBQTRCO1FBQzlDLEtBQUssQ0FBQyxrQkFBa0IsRUFBRSxRQUFRLEVBQUUsY0FBYyxFQUFFLFNBQVMsRUFBRSxVQUFVLENBQUMsQ0FBQztRQUx6RCx1QkFBa0IsR0FBbEIsa0JBQWtCLENBQW1CO1FBQ3JDLGFBQVEsR0FBUixRQUFRLENBQXlCO1FBQ2pDLG1CQUFjLEdBQWQsY0FBYyxDQUFlO1FBQzdCLGNBQVMsR0FBVCxTQUFTLENBQWlCO1FBQzFCLGVBQVUsR0FBVixVQUFVLENBQWtCO0lBRWxELENBQUM7OztZQU55QyxpQkFBaUI7WUFDM0IsdUJBQXVCO1lBQ2pCLGFBQWE7WUFDbEIsZUFBZTtZQUNkLGdCQUFnQjs7O1lBWHJELFNBQVMsU0FBQztnQkFDUCxRQUFRLEVBQUUsZ0JBQWdCO2dCQUMxQix5N1FBQTJDOzthQUU5Qzs7O1lBUkcsaUJBQWlCO1lBSGpCLHVCQUF1QjtZQUN2QixhQUFhO1lBQ2IsZUFBZTtZQUdYLGdCQUFnQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50fSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7XG4gICAgQWJzdHJhY3RVc2VySW52aXRlQ29tcG9uZW50LFxuICAgIE9yZ2FuaXphdGlvbkxpc3RTZXJ2aWNlLFxuICAgIFNpZ25VcFNlcnZpY2UsXG4gICAgU25hY2tCYXJTZXJ2aWNlLFxuICAgIFVzZXJJbnZpdGVTZXJ2aWNlXG59IGZyb20gJ0BuZXRncmlmL2NvbXBvbmVudHMtY29yZSc7XG5pbXBvcnQge1RyYW5zbGF0ZVNlcnZpY2V9IGZyb20gJ0BuZ3gtdHJhbnNsYXRlL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ25jLXVzZXItaW52aXRlJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vdXNlci1pbnZpdGUuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL3VzZXItaW52aXRlLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgVXNlckludml0ZUNvbXBvbmVudCBleHRlbmRzIEFic3RyYWN0VXNlckludml0ZUNvbXBvbmVudCB7XG5cbiAgICBjb25zdHJ1Y3Rvcihwcm90ZWN0ZWQgX3VzZXJJbnZpdGVTZXJ2aWNlOiBVc2VySW52aXRlU2VydmljZSxcbiAgICAgICAgICAgICAgICBwcm90ZWN0ZWQgX29yZ0xpc3Q6IE9yZ2FuaXphdGlvbkxpc3RTZXJ2aWNlLFxuICAgICAgICAgICAgICAgIHByb3RlY3RlZCBfc2lnblVwU2VydmljZTogU2lnblVwU2VydmljZSxcbiAgICAgICAgICAgICAgICBwcm90ZWN0ZWQgX3NuYWNrQmFyOiBTbmFja0JhclNlcnZpY2UsXG4gICAgICAgICAgICAgICAgcHJvdGVjdGVkIF90cmFuc2xhdGU6IFRyYW5zbGF0ZVNlcnZpY2UpIHtcbiAgICAgICAgc3VwZXIoX3VzZXJJbnZpdGVTZXJ2aWNlLCBfb3JnTGlzdCwgX3NpZ25VcFNlcnZpY2UsIF9zbmFja0JhciwgX3RyYW5zbGF0ZSk7XG4gICAgfVxufVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlci1pbnZpdGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQG5ldGdyaWYvY29tcG9uZW50cy8iLCJzb3VyY2VzIjpbImxpYi9hZG1pbi91c2VyLWludml0ZS91c2VyLWludml0ZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN4QyxPQUFPLEVBQ0gsMkJBQTJCLEVBQzNCLHVCQUF1QixFQUN2QixhQUFhLEVBQ2IsZUFBZSxFQUNmLGlCQUFpQixFQUNwQixNQUFNLDBCQUEwQixDQUFDO0FBQ2xDLE9BQU8sRUFBQyxnQkFBZ0IsRUFBQyxNQUFNLHFCQUFxQixDQUFDO0FBT3JELE1BQU0sT0FBTyxtQkFBb0IsU0FBUSwyQkFBMkI7SUFFaEUsWUFBc0Isa0JBQXFDLEVBQ3JDLFFBQWlDLEVBQ2pDLGNBQTZCLEVBQzdCLFNBQTBCLEVBQzFCLFVBQTRCO1FBQzlDLEtBQUssQ0FBQyxrQkFBa0IsRUFBRSxRQUFRLEVBQUUsY0FBYyxFQUFFLFNBQVMsRUFBRSxVQUFVLENBQUMsQ0FBQztRQUx6RCx1QkFBa0IsR0FBbEIsa0JBQWtCLENBQW1CO1FBQ3JDLGFBQVEsR0FBUixRQUFRLENBQXlCO1FBQ2pDLG1CQUFjLEdBQWQsY0FBYyxDQUFlO1FBQzdCLGNBQVMsR0FBVCxTQUFTLENBQWlCO1FBQzFCLGVBQVUsR0FBVixVQUFVLENBQWtCO0lBRWxELENBQUM7OztZQU55QyxpQkFBaUI7WUFDM0IsdUJBQXVCO1lBQ2pCLGFBQWE7WUFDbEIsZUFBZTtZQUNkLGdCQUFnQjs7O1lBWHJELFNBQVMsU0FBQztnQkFDUCxRQUFRLEVBQUUsZ0JBQWdCO2dCQUMxQix1N1FBQTJDOzthQUU5Qzs7O1lBUkcsaUJBQWlCO1lBSGpCLHVCQUF1QjtZQUN2QixhQUFhO1lBQ2IsZUFBZTtZQUdYLGdCQUFnQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50fSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7XG4gICAgQWJzdHJhY3RVc2VySW52aXRlQ29tcG9uZW50LFxuICAgIE9yZ2FuaXphdGlvbkxpc3RTZXJ2aWNlLFxuICAgIFNpZ25VcFNlcnZpY2UsXG4gICAgU25hY2tCYXJTZXJ2aWNlLFxuICAgIFVzZXJJbnZpdGVTZXJ2aWNlXG59IGZyb20gJ0BuZXRncmlmL2NvbXBvbmVudHMtY29yZSc7XG5pbXBvcnQge1RyYW5zbGF0ZVNlcnZpY2V9IGZyb20gJ0BuZ3gtdHJhbnNsYXRlL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ25jLXVzZXItaW52aXRlJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vdXNlci1pbnZpdGUuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL3VzZXItaW52aXRlLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgVXNlckludml0ZUNvbXBvbmVudCBleHRlbmRzIEFic3RyYWN0VXNlckludml0ZUNvbXBvbmVudCB7XG5cbiAgICBjb25zdHJ1Y3Rvcihwcm90ZWN0ZWQgX3VzZXJJbnZpdGVTZXJ2aWNlOiBVc2VySW52aXRlU2VydmljZSxcbiAgICAgICAgICAgICAgICBwcm90ZWN0ZWQgX29yZ0xpc3Q6IE9yZ2FuaXphdGlvbkxpc3RTZXJ2aWNlLFxuICAgICAgICAgICAgICAgIHByb3RlY3RlZCBfc2lnblVwU2VydmljZTogU2lnblVwU2VydmljZSxcbiAgICAgICAgICAgICAgICBwcm90ZWN0ZWQgX3NuYWNrQmFyOiBTbmFja0JhclNlcnZpY2UsXG4gICAgICAgICAgICAgICAgcHJvdGVjdGVkIF90cmFuc2xhdGU6IFRyYW5zbGF0ZVNlcnZpY2UpIHtcbiAgICAgICAgc3VwZXIoX3VzZXJJbnZpdGVTZXJ2aWNlLCBfb3JnTGlzdCwgX3NpZ25VcFNlcnZpY2UsIF9zbmFja0JhciwgX3RyYW5zbGF0ZSk7XG4gICAgfVxuXG59XG4iXX0=

package/esm2015/lib/panel/panel.component.js

@@ -13,7 +13,7 @@ PanelComponent.decorators = [
     { type: Component, args: [{
                 selector: 'nc-app-panel',
                 template: "<mat-expansion-panel [@.disabled]=\"expansionDisabled\" hideToggle (afterExpand)=\"emitExpand()\"\n                     (afterCollapse)=\"emitCollapse()\" #matExpansionPanel class=\"panel-margin\"\n                     [ngClass]=\"{'margin-top':first, 'margin-bottom':last}\">\n    <mat-expansion-panel-header (click)=\"expandPanel()\" class=\"panel-color header-padding header-min-height\"\n                                [ngStyle]=\"{'background': caseColor, 'color': getCaseFontColor()}\">\n        <mat-panel-description *ngTemplateOutlet=\"panelHeader\">\n        </mat-panel-description>\n    </mat-expansion-panel-header>\n    <ng-template matExpansionPanelContent>\n        <div *ngTemplateOutlet=\"panelContent\"></div>\n    </ng-template>\n</mat-expansion-panel>\n\n",
-                styles: [".mat-expansion-panel-header{border-bottom:1px solid rgba(0,0,0,.03);color:rgba(0,0,0,.87)}.header-padding{padding:0 16px}.header-min-height{min-height:48px!important;height:auto!important}.panel-margin{margin:0 2px}.margin-top{margin-top:2px}.margin-bottom{margin-bottom:2px}"]
+                styles: [".mat-expansion-panel-header{border-bottom:1px solid rgba(0,0,0,.03);color:rgba(0,0,0,.87)}.header-padding{padding:0 16px}.header-min-height{min-height:48px!important;height:auto!important}.panel-margin{margin:0 2px}.margin-top{margin-top:2px}.margin-bottom{margin-bottom:2px}.mat-expansion-panel{-webkit-user-select:text!important;-moz-user-select:text!important;-ms-user-select:text!important;user-select:text!important}"]
             },] }
 ];
 PanelComponent.ctorParameters = () => [

package/esm2015/lib/side-menu/content-components/new-case/new-case.component.js

@@ -28,7 +28,7 @@ NewCaseComponent.ctorParameters = () => [
 NewCaseComponent.decorators = [
     { type: Component, args: [{
                 selector: 'nc-new-case',
-                template: "<div #toolbar class=\"custom-mat-toolbar\" fxLayout=\"column\" fxLayoutAlign=\"center none\">\n    {{titleShortening()}}\n</div>\n<mat-vertical-stepper *ngIf=\"hasMultipleNets$ | async\" linear #stepper1>\n    <mat-step [stepControl]=\"processFormControl\" errorMessage=\"{{'side-menu.new-case.errFirst' | translate}}\">\n        <ng-template matStepLabel>{{'side-menu.new-case.choose' | translate}}</ng-template>\n        <mat-form-field>\n            <input type=\"text\" matInput [formControl]=\"processFormControl\" [matAutocomplete]=\"auto\" required\n                   (keyup.enter)=\"nextStep()\" (change)=\"checkVersion(processFormControl.value)\">\n            <span class=\"version-span\" *ngIf=\"isVersionVisible\" matSuffix>{{netVersion}}</span>\n            <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayFn\"\n                              (optionSelected)=\"showVersion($event.option)\">\n                <mat-option *ngFor=\"let option of filteredOptions$ | async\" [value]=\"option\">\n                    {{option.viewValue}}\n                    <span class=\"version-span\" *ngIf=\"isVersionVisible\">{{option.version}}</span>\n                </mat-option>\n            </mat-autocomplete>\n        </mat-form-field>\n        <div>\n            <button *ngIf=\"isCaseTitleEnabled()\" mat-button matStepperNext>{{'side-menu.new-case.next' | translate}}</button>\n            <button *ngIf=\"!isCaseTitleEnabled()\" mat-button (click)=\"createNewCase()\">{{'side-menu.new-case.create' | translate}}</button>\n        </div>\n    </mat-step>\n    <mat-step *ngIf=\"isCaseTitleEnabled()\" [stepControl]=\"titleFormControl\" errorMessage=\"{{'side-menu.new-case.errSecond' | translate}}\">\n        <ng-template matStepLabel>{{'side-menu.new-case.caseTitle' | translate}}</ng-template>\n        <mat-form-field>\n            <input matInput placeholder=\"Title\" autocomplete=\"off\" [formControl]=\"titleFormControl\" [required]=\"isCaseTitleRequired()\" (keyup.enter)=\"nextStep()\">\n        </mat-form-field>\n        <div>\n            <button mat-button (click)=\"stepper1.reset(); checkVersion(processFormControl.value)\">{{'side-menu.new-case.reset' | translate}}</button>\n            <button mat-button (click)=\"createNewCase()\">{{'side-menu.new-case.create' | translate}}</button>\n        </div>\n    </mat-step>\n</mat-vertical-stepper>\n<mat-vertical-stepper *ngIf=\"(hasMultipleNets$ | async) === false\" linear #stepper2>\n    <mat-step [stepControl]=\"titleFormControl\" errorMessage=\"{{'side-menu.new-case.errSecond' | translate}}\">\n        <ng-template matStepLabel>{{'side-menu.new-case.caseTitle' | translate}}</ng-template>\n        <mat-form-field>\n            <input matInput placeholder=\"Title\" autocomplete=\"off\" [formControl]=\"titleFormControl\" [required]=\"isCaseTitleRequired()\" (keyup.enter)=\"nextStep()\">\n        </mat-form-field>\n        <div>\n            <button mat-button (click)=\"stepper2.reset()\">{{'side-menu.new-case.reset' | translate}}</button>\n            <button mat-button (click)=\"createNewCase()\">{{'side-menu.new-case.create' | translate}}</button>\n        </div>\n    </mat-step>\n</mat-vertical-stepper>\n<div *ngIf=\"(notInitialized$ | async)\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n    <mat-spinner class=\"spinner-margin\"></mat-spinner>\n</div>\n",
+                template: "<div #toolbar class=\"custom-mat-toolbar\" fxLayout=\"column\" fxLayoutAlign=\"center none\">\n    {{titleShortening()}}\n</div>\n<mat-vertical-stepper *ngIf=\"hasMultipleNets$ | async\" linear #stepper1>\n    <mat-step [stepControl]=\"processFormControl\" errorMessage=\"{{'side-menu.new-case.errFirst' | translate}}\">\n        <ng-template matStepLabel>{{'side-menu.new-case.choose' | translate}}</ng-template>\n        <mat-form-field>\n            <input type=\"text\" matInput [formControl]=\"processFormControl\" [matAutocomplete]=\"auto\" required\n                   (keyup.enter)=\"nextStep()\" (change)=\"checkVersion(processFormControl.value)\">\n            <span class=\"version-span\" *ngIf=\"isVersionVisible\" matSuffix>{{netVersion}}</span>\n            <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayFn\"\n                              (optionSelected)=\"showVersion($event.option)\">\n                <mat-option *ngFor=\"let option of filteredOptions$ | async\" [value]=\"option\">\n                    {{option.viewValue}}\n                    <span class=\"version-span\" *ngIf=\"isVersionVisible\">{{option.version}}</span>\n                </mat-option>\n            </mat-autocomplete>\n        </mat-form-field>\n        <div>\n            <button *ngIf=\"isCaseTitleEnabled()\"  mat-button (click)=\"toNextStep(processFormControl.value)\">{{'side-menu.new-case.next' | translate}}</button>\n            <button *ngIf=\"!isCaseTitleEnabled()\" mat-button (click)=\"createNewCase()\">{{'side-menu.new-case.create' | translate}}</button>\n        </div>\n    </mat-step>\n    <mat-step *ngIf=\"isCaseTitleEnabled()\" [stepControl]=\"titleFormControl\" errorMessage=\"{{'side-menu.new-case.errSecond' | translate}}\">\n        <ng-template matStepLabel>{{'side-menu.new-case.caseTitle' | translate}}</ng-template>\n        <mat-form-field>\n            <input matInput placeholder=\"Title\" autocomplete=\"off\" [formControl]=\"titleFormControl\" [required]=\"isCaseTitleRequired()\" (keyup.enter)=\"nextStep()\">\n        </mat-form-field>\n        <div>\n            <button mat-button (click)=\"stepper1.reset(); checkVersion(processFormControl.value)\">{{'side-menu.new-case.reset' | translate}}</button>\n            <button mat-button (click)=\"createNewCase()\">{{'side-menu.new-case.create' | translate}}</button>\n        </div>\n    </mat-step>\n</mat-vertical-stepper>\n<mat-vertical-stepper *ngIf=\"(hasMultipleNets$ | async) === false\" linear #stepper2>\n    <mat-step [stepControl]=\"titleFormControl\" errorMessage=\"{{'side-menu.new-case.errSecond' | translate}}\">\n        <ng-template matStepLabel>{{'side-menu.new-case.caseTitle' | translate}}</ng-template>\n        <mat-form-field>\n            <input matInput placeholder=\"Title\" autocomplete=\"off\" [formControl]=\"titleFormControl\" [required]=\"isCaseTitleRequired()\" (keyup.enter)=\"nextStep()\">\n        </mat-form-field>\n        <div>\n            <button mat-button (click)=\"stepper2.reset()\">{{'side-menu.new-case.reset' | translate}}</button>\n            <button mat-button (click)=\"createNewCase()\">{{'side-menu.new-case.create' | translate}}</button>\n        </div>\n    </mat-step>\n</mat-vertical-stepper>\n<div *ngIf=\"(notInitialized$ | async)\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n    <mat-spinner class=\"spinner-margin\"></mat-spinner>\n</div>\n",
                 providers: [{
                         provide: STEPPER_GLOBAL_OPTIONS,
                         useValue: ɵ0
@@ -45,4 +45,4 @@ NewCaseComponent.ctorParameters = () => [
     { type: TranslateService }
 ];
 export { ɵ0 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmV3LWNhc2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQG5ldGdyaWYvY29tcG9uZW50cy8iLCJzb3VyY2VzIjpbImxpYi9zaWRlLW1lbnUvY29udGVudC1jb21wb25lbnRzL25ldy1jYXNlL25ldy1jYXNlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFFLE1BQU0sRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUNoRCxPQUFPLEVBQUMsV0FBVyxFQUFDLE1BQU0sZ0JBQWdCLENBQUM7QUFDM0MsT0FBTyxFQUFDLHNCQUFzQixFQUFDLE1BQU0sc0JBQXNCLENBQUM7QUFDNUQsT0FBTyxFQUFDLGdCQUFnQixFQUFDLE1BQU0scUJBQXFCLENBQUM7QUFDckQsT0FBTyxFQUFDLGNBQWMsRUFBQyxNQUFNLGtCQUFrQixDQUFDO0FBQ2hELE9BQU8sRUFDSCx3QkFBd0IsRUFDeEIsbUJBQW1CLEVBQ25CLHFCQUFxQixFQUNyQixlQUFlLEVBQ2YsZUFBZSxFQUNsQixNQUFNLDBCQUEwQixDQUFDO1dBT2lCLEVBQUMsU0FBUyxFQUFFLElBQUksRUFBQztBQUdwRSxNQUFNLE9BQU8sZ0JBQWlCLFNBQVEsd0JBQXdCO0lBSTFELFlBQXFELGdCQUFpQyxFQUNoRSxZQUF5QixFQUN6QixnQkFBaUMsRUFDakMsb0JBQXlDLEVBQ3pDLGVBQStCLEVBQy9CLFVBQTRCO1FBQzlDLEtBQUssQ0FBQyxnQkFBZ0IsRUFBRSxZQUFZLEVBQUUsZ0JBQWdCLEVBQUUsb0JBQW9CLEVBQUUsZUFBZSxFQUFFLFVBQVUsQ0FBQyxDQUFDO1FBTjFELHFCQUFnQixHQUFoQixnQkFBZ0IsQ0FBaUI7UUFDaEUsaUJBQVksR0FBWixZQUFZLENBQWE7UUFDekIscUJBQWdCLEdBQWhCLGdCQUFnQixDQUFpQjtRQUNqQyx5QkFBb0IsR0FBcEIsb0JBQW9CLENBQXFCO1FBQ3pDLG9CQUFlLEdBQWYsZUFBZSxDQUFnQjtRQUMvQixlQUFVLEdBQVYsVUFBVSxDQUFrQjtRQUU5QyxJQUFJLENBQUMsZ0JBQWdCLEdBQUcsZ0JBQWdCLENBQUMsZ0JBQWdCLENBQUM7SUFDOUQsQ0FBQzs7O1lBUnNFLGVBQWUsdUJBQXpFLE1BQU0sU0FBQyxxQkFBcUI7WUFDTCxXQUFXO1lBQ1AsZUFBZTtZQUNYLG1CQUFtQjtZQUN4QixjQUFjO1lBQ25CLGdCQUFnQjs7O1lBakJyRCxTQUFTLFNBQUM7Z0JBQ1AsUUFBUSxFQUFFLGFBQWE7Z0JBQ3ZCLHl6R0FBd0M7Z0JBRXhDLFNBQVMsRUFBRSxDQUFDO3dCQUNSLE9BQU8sRUFBRSxzQkFBc0I7d0JBQUUsUUFBUSxJQUFtQjtxQkFDL0QsQ0FBQzs7YUFDTDs7O1lBWEcsZUFBZSx1QkFnQkYsTUFBTSxTQUFDLHFCQUFxQjtZQXhCckMsV0FBVztZQVNmLGVBQWU7WUFIZixtQkFBbUI7WUFIZixjQUFjO1lBRGQsZ0JBQWdCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnQsIEluamVjdH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge0Zvcm1CdWlsZGVyfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQge1NURVBQRVJfR0xPQkFMX09QVElPTlN9IGZyb20gJ0Bhbmd1bGFyL2Nkay9zdGVwcGVyJztcbmltcG9ydCB7VHJhbnNsYXRlU2VydmljZX0gZnJvbSAnQG5neC10cmFuc2xhdGUvY29yZSc7XG5pbXBvcnQge0hvdGtleXNTZXJ2aWNlfSBmcm9tICdhbmd1bGFyMi1ob3RrZXlzJztcbmltcG9ydCB7XG4gICAgQWJzdHJhY3ROZXdDYXNlQ29tcG9uZW50LFxuICAgIENhc2VSZXNvdXJjZVNlcnZpY2UsXG4gICAgTkFFX1NJREVfTUVOVV9DT05UUk9MLFxuICAgIFNpZGVNZW51Q29udHJvbCxcbiAgICBTbmFja0JhclNlcnZpY2Vcbn0gZnJvbSAnQG5ldGdyaWYvY29tcG9uZW50cy1jb3JlJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICduYy1uZXctY2FzZScsXG4gICAgdGVtcGxhdGVVcmw6ICcuL25ldy1jYXNlLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9uZXctY2FzZS5jb21wb25lbnQuc2NzcyddLFxuICAgIHByb3ZpZGVyczogW3tcbiAgICAgICAgcHJvdmlkZTogU1RFUFBFUl9HTE9CQUxfT1BUSU9OUywgdXNlVmFsdWU6IHtzaG93RXJyb3I6IHRydWV9XG4gICAgfV1cbn0pXG5leHBvcnQgY2xhc3MgTmV3Q2FzZUNvbXBvbmVudCBleHRlbmRzIEFic3RyYWN0TmV3Q2FzZUNvbXBvbmVudCB7XG5cbiAgICBpc1ZlcnNpb25WaXNpYmxlOiBib29sZWFuO1xuXG4gICAgY29uc3RydWN0b3IoQEluamVjdChOQUVfU0lERV9NRU5VX0NPTlRST0wpIHByb3RlY3RlZCBfc2lkZU1lbnVDb250cm9sOiBTaWRlTWVudUNvbnRyb2wsXG4gICAgICAgICAgICAgICAgcHJvdGVjdGVkIF9mb3JtQnVpbGRlcjogRm9ybUJ1aWxkZXIsXG4gICAgICAgICAgICAgICAgcHJvdGVjdGVkIF9zbmFja0JhclNlcnZpY2U6IFNuYWNrQmFyU2VydmljZSxcbiAgICAgICAgICAgICAgICBwcm90ZWN0ZWQgX2Nhc2VSZXNvdXJjZVNlcnZpY2U6IENhc2VSZXNvdXJjZVNlcnZpY2UsXG4gICAgICAgICAgICAgICAgcHJvdGVjdGVkIF9ob3RrZXlzU2VydmljZTogSG90a2V5c1NlcnZpY2UsXG4gICAgICAgICAgICAgICAgcHJvdGVjdGVkIF90cmFuc2xhdGU6IFRyYW5zbGF0ZVNlcnZpY2UpIHtcbiAgICAgICAgc3VwZXIoX3NpZGVNZW51Q29udHJvbCwgX2Zvcm1CdWlsZGVyLCBfc25hY2tCYXJTZXJ2aWNlLCBfY2FzZVJlc291cmNlU2VydmljZSwgX2hvdGtleXNTZXJ2aWNlLCBfdHJhbnNsYXRlKTtcbiAgICAgICAgdGhpcy5pc1ZlcnNpb25WaXNpYmxlID0gX3NpZGVNZW51Q29udHJvbC5pc1ZlcnNpb25WaXNpYmxlO1xuICAgIH1cblxufVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmV3LWNhc2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQG5ldGdyaWYvY29tcG9uZW50cy8iLCJzb3VyY2VzIjpbImxpYi9zaWRlLW1lbnUvY29udGVudC1jb21wb25lbnRzL25ldy1jYXNlL25ldy1jYXNlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFFLE1BQU0sRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUNoRCxPQUFPLEVBQUMsV0FBVyxFQUFDLE1BQU0sZ0JBQWdCLENBQUM7QUFDM0MsT0FBTyxFQUFDLHNCQUFzQixFQUFDLE1BQU0sc0JBQXNCLENBQUM7QUFDNUQsT0FBTyxFQUFDLGdCQUFnQixFQUFDLE1BQU0scUJBQXFCLENBQUM7QUFDckQsT0FBTyxFQUFDLGNBQWMsRUFBQyxNQUFNLGtCQUFrQixDQUFDO0FBQ2hELE9BQU8sRUFDSCx3QkFBd0IsRUFDeEIsbUJBQW1CLEVBQ25CLHFCQUFxQixFQUNyQixlQUFlLEVBQ2YsZUFBZSxFQUNsQixNQUFNLDBCQUEwQixDQUFDO1dBT2lCLEVBQUMsU0FBUyxFQUFFLElBQUksRUFBQztBQUdwRSxNQUFNLE9BQU8sZ0JBQWlCLFNBQVEsd0JBQXdCO0lBSTFELFlBQXFELGdCQUFpQyxFQUNoRSxZQUF5QixFQUN6QixnQkFBaUMsRUFDakMsb0JBQXlDLEVBQ3pDLGVBQStCLEVBQy9CLFVBQTRCO1FBQzlDLEtBQUssQ0FBQyxnQkFBZ0IsRUFBRSxZQUFZLEVBQUUsZ0JBQWdCLEVBQUUsb0JBQW9CLEVBQUUsZUFBZSxFQUFFLFVBQVUsQ0FBQyxDQUFDO1FBTjFELHFCQUFnQixHQUFoQixnQkFBZ0IsQ0FBaUI7UUFDaEUsaUJBQVksR0FBWixZQUFZLENBQWE7UUFDekIscUJBQWdCLEdBQWhCLGdCQUFnQixDQUFpQjtRQUNqQyx5QkFBb0IsR0FBcEIsb0JBQW9CLENBQXFCO1FBQ3pDLG9CQUFlLEdBQWYsZUFBZSxDQUFnQjtRQUMvQixlQUFVLEdBQVYsVUFBVSxDQUFrQjtRQUU5QyxJQUFJLENBQUMsZ0JBQWdCLEdBQUcsZ0JBQWdCLENBQUMsZ0JBQWdCLENBQUM7SUFDOUQsQ0FBQzs7O1lBUnNFLGVBQWUsdUJBQXpFLE1BQU0sU0FBQyxxQkFBcUI7WUFDTCxXQUFXO1lBQ1AsZUFBZTtZQUNYLG1CQUFtQjtZQUN4QixjQUFjO1lBQ25CLGdCQUFnQjs7O1lBakJyRCxTQUFTLFNBQUM7Z0JBQ1AsUUFBUSxFQUFFLGFBQWE7Z0JBQ3ZCLDQxR0FBd0M7Z0JBRXhDLFNBQVMsRUFBRSxDQUFDO3dCQUNSLE9BQU8sRUFBRSxzQkFBc0I7d0JBQUUsUUFBUSxJQUFtQjtxQkFDL0QsQ0FBQzs7YUFDTDs7O1lBWEcsZUFBZSx1QkFnQkYsTUFBTSxTQUFDLHFCQUFxQjtZQXhCckMsV0FBVztZQVNmLGVBQWU7WUFIZixtQkFBbUI7WUFIZixjQUFjO1lBRGQsZ0JBQWdCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnQsIEluamVjdH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge0Zvcm1CdWlsZGVyfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQge1NURVBQRVJfR0xPQkFMX09QVElPTlN9IGZyb20gJ0Bhbmd1bGFyL2Nkay9zdGVwcGVyJztcbmltcG9ydCB7VHJhbnNsYXRlU2VydmljZX0gZnJvbSAnQG5neC10cmFuc2xhdGUvY29yZSc7XG5pbXBvcnQge0hvdGtleXNTZXJ2aWNlfSBmcm9tICdhbmd1bGFyMi1ob3RrZXlzJztcbmltcG9ydCB7XG4gICAgQWJzdHJhY3ROZXdDYXNlQ29tcG9uZW50LFxuICAgIENhc2VSZXNvdXJjZVNlcnZpY2UsXG4gICAgTkFFX1NJREVfTUVOVV9DT05UUk9MLFxuICAgIFNpZGVNZW51Q29udHJvbCxcbiAgICBTbmFja0JhclNlcnZpY2Vcbn0gZnJvbSAnQG5ldGdyaWYvY29tcG9uZW50cy1jb3JlJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICduYy1uZXctY2FzZScsXG4gICAgdGVtcGxhdGVVcmw6ICcuL25ldy1jYXNlLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9uZXctY2FzZS5jb21wb25lbnQuc2NzcyddLFxuICAgIHByb3ZpZGVyczogW3tcbiAgICAgICAgcHJvdmlkZTogU1RFUFBFUl9HTE9CQUxfT1BUSU9OUywgdXNlVmFsdWU6IHtzaG93RXJyb3I6IHRydWV9XG4gICAgfV1cbn0pXG5leHBvcnQgY2xhc3MgTmV3Q2FzZUNvbXBvbmVudCBleHRlbmRzIEFic3RyYWN0TmV3Q2FzZUNvbXBvbmVudCB7XG5cbiAgICBpc1ZlcnNpb25WaXNpYmxlOiBib29sZWFuO1xuXG4gICAgY29uc3RydWN0b3IoQEluamVjdChOQUVfU0lERV9NRU5VX0NPTlRST0wpIHByb3RlY3RlZCBfc2lkZU1lbnVDb250cm9sOiBTaWRlTWVudUNvbnRyb2wsXG4gICAgICAgICAgICAgICAgcHJvdGVjdGVkIF9mb3JtQnVpbGRlcjogRm9ybUJ1aWxkZXIsXG4gICAgICAgICAgICAgICAgcHJvdGVjdGVkIF9zbmFja0JhclNlcnZpY2U6IFNuYWNrQmFyU2VydmljZSxcbiAgICAgICAgICAgICAgICBwcm90ZWN0ZWQgX2Nhc2VSZXNvdXJjZVNlcnZpY2U6IENhc2VSZXNvdXJjZVNlcnZpY2UsXG4gICAgICAgICAgICAgICAgcHJvdGVjdGVkIF9ob3RrZXlzU2VydmljZTogSG90a2V5c1NlcnZpY2UsXG4gICAgICAgICAgICAgICAgcHJvdGVjdGVkIF90cmFuc2xhdGU6IFRyYW5zbGF0ZVNlcnZpY2UpIHtcbiAgICAgICAgc3VwZXIoX3NpZGVNZW51Q29udHJvbCwgX2Zvcm1CdWlsZGVyLCBfc25hY2tCYXJTZXJ2aWNlLCBfY2FzZVJlc291cmNlU2VydmljZSwgX2hvdGtleXNTZXJ2aWNlLCBfdHJhbnNsYXRlKTtcbiAgICAgICAgdGhpcy5pc1ZlcnNpb25WaXNpYmxlID0gX3NpZGVNZW51Q29udHJvbC5pc1ZlcnNpb25WaXNpYmxlO1xuICAgIH1cblxufVxuIl19

package/esm5/lib/admin/user-invite/user-invite.component.js

@@ -23,7 +23,7 @@ var UserInviteComponent = /** @class */ (function (_super) {
     UserInviteComponent.decorators = [
         { type: Component, args: [{
                     selector: 'nc-user-invite',
-                    template: "<div fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"full-height full-width padding-default\">\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex=\"40\" class=\"full-height margin-right-16px\">\n\n        <mat-toolbar color=\"primary\" class=\"height-96 margin-bottom-16px\">\n            <span>{{'admin.user-invite.newUser' | translate}}</span>\n            <div fxFlex></div>\n            <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex=\"40\" class=\"padding-right-16px\">\n                <mat-icon fxFlex class=\"mail-icon\">email</mat-icon>\n                <mat-form-field fxFlex=\"100\" class=\"user-assign-search\" color=\"primary\">\n                    <input matInput placeholder=\"{{ 'admin.user-invite.mail' | translate }}\"\n                           [formControl]=\"invitedEmailControl\">\n                    <button mat-button *ngIf=\"invitedEmailControl.value\" matSuffix mat-icon-button\n                            (click)=\"invitedEmailControl.setValue('')\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </mat-form-field>\n            </div>\n        </mat-toolbar>\n\n\n        <div fxLayout=\"column\" class=\"invited-card margin-bottom-16px\" fxLayoutAlign=\"start stretch\">\n\n            <span class=\"invited-card-font padding-16px\">{{'admin.user-invite.selectedOrgs' | translate}}</span>\n\n            <mat-divider class=\"inherited-divider\"></mat-divider>\n\n            <div class=\"padding-16px\" fxLayout=\"column\" *ngIf=\"invitedGroups.length !== 0\">\n                <div *ngFor=\"let org of invitedGroups\" fxFlex fxLayout=\"row\" fxLayoutAlign=\"start center\">\n                    <span>{{org.name}}</span>\n\n                    <div fxFlex></div>\n\n                    <button mat-icon-button color=\"primary\" (click)=\"removeGroup(org)\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n\n            <span class=\"padding-16px\"\n                  *ngIf=\"invitedGroups.length === 0\">{{'admin.user-invite.noSelectedOrgs' | translate}}</span>\n        </div>\n\n\n        <div fxLayout=\"column\" class=\"invited-card margin-bottom-16px\" fxLayoutAlign=\"start stretch\">\n\n            <span class=\"invited-card-font padding-16px\">{{'admin.user-invite.selectedRoles' | translate}}</span>\n\n            <mat-divider class=\"inherited-divider\"></mat-divider>\n\n            <div class=\"padding-16px\" fxLayout=\"column\" *ngIf=\"invitedRoles.length !== 0\">\n                <div *ngFor=\"let role of invitedRoles\" fxFlex fxLayout=\"row\" fxLayoutAlign=\"start center\">\n                    <span>{{role.name}}</span>\n\n                    <div fxFlex></div>\n\n                    <button mat-icon-button color=\"primary\" (click)=\"removeRole(role)\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n\n            <span class=\"padding-16px\"\n                  *ngIf=\"invitedRoles.length === 0\">{{'admin.user-invite.noSelectedRoles' | translate}}</span>\n        </div>\n\n        <div fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n            <button mat-raised-button color=\"primary\" (click)=\"invite()\">\n                <span>{{'admin.user-invite.invite-user' | translate}}</span>\n            </button>\n        </div>\n    </div>\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex=\"30\" class=\"full-height margin-right-16px\">\n\n        <mat-toolbar color=\"primary\" class=\"height-96 margin-bottom-16px\">\n            <span>{{'admin.user-invite.orgs' | translate}}</span>\n        </mat-toolbar>\n\n        <div *ngIf=\"groups.length === 0\" fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex>\n            <mat-icon color=\"accent\" class=\"margin-bottom-default no-user-icon\">groups</mat-icon>\n            <span class=\"font-size-20\">{{'admin.user-invite.noGroups' | translate}}</span>\n        </div>\n\n        <div fxLayout=\"column\" class=\"invited-card \" *ngIf=\"groups.length !== 0\">\n            <div fxLayout=\"column\">\n                <div *ngFor=\"let group of groups\" class=\"padding-16px-0\" fxFlex fxLayout=\"row\"\n                     fxLayoutAlign=\"start center\">\n                    <span>{{group.name}}</span>\n\n                    <div fxFlex></div>\n\n                    <button mat-icon-button color=\"primary\" (click)=\"addGroup(group)\">\n                        <mat-icon>add</mat-icon>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex=\"30\" class=\"full-height\">\n\n        <mat-toolbar color=\"primary\" class=\"height-96 margin-bottom-16px\">\n            <span>{{'admin.process-list.listTitle' | translate}}</span>\n        </mat-toolbar>\n\n        <div *ngIf=\"nets.processes.length === 0\" fxLayout=\"column\"\n             fxLayoutAlign=\"center center\" fxFlex class=\"margin-top-x2\">\n            <mat-icon color=\"accent\" class=\"margin-bottom-default no-user-icon\">timeline</mat-icon>\n            <span class=\"font-size-20\">{{ 'admin.process-list.noProcessesWereFound' | translate}}</span>\n        </div>\n\n        <mat-accordion class=\"full-width margin-top-default process-list-accordion\" multi fxFlex>\n\n            <mat-expansion-panel *ngFor=\"let item of nets.processes\" (afterExpand)=\"nets.loadProcessItemRoles(item)\"\n                                 (afterCollapse)=\"nets.prepareToTryAgainToLoadRoles(item)\">\n\n                <mat-expansion-panel-header>\n                    <mat-panel-title>\n                        <mat-icon *ngIf=\"item.someRolesSelected\" color=\"accent\" class=\"margin-right-x2\">tour</mat-icon>\n                        <span>{{item.initials}} - {{item.title}}</span>\n                    </mat-panel-title>\n                    <mat-panel-description class=\"process-item-description\">\n                        <span\n                            class=\"process-item-description full-width\">{{'admin.process-list.newestVersion' | translate}}\n                            : {{item.newestVersion}}</span>\n                    </mat-panel-description>\n                </mat-expansion-panel-header>\n\n                <div *ngIf=\"item.loading\" fxFlex=\"100\" class=\"full-width\">\n                    <mat-progress-bar mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\n                </div>\n\n                <div *ngIf=\"!item.loading && item.emptyRoles\" fxLayout=\"column\"\n                     fxLayoutAlign=\"center center\" fxFlex class=\"full-width full-height net-panel-content\">\n                    <mat-icon color=\"accent\" class=\"margin-bottom-default\">account_circle</mat-icon>\n                    <span class=\"font-size-15\">{{ 'admin.process-list.noRoles' | translate}}</span>\n                </div>\n\n                <div *ngIf=\"!item.loading && !item.emptyRoles\" fxLayout=\"column\" fxLayoutAlign=\"start center\"\n                     class=\"full-height full-width net-panel-content padding-0-16px\">\n                    <h3>Roles</h3>\n                    <div *ngFor=\"let net of item.processes; let first = first\" fxLayout=\"column\"\n                         fxLayoutAlign=\"start center\" class=\"full-width\">\n                        <mat-divider *ngIf=\"!first\" style=\"position: relative\"></mat-divider>\n\n                        <span>{{'admin.user-invite.version' | translate }} - {{net.version}}</span>\n\n                        <div fxLayout=\"column\" class=\"full-width padding-16px\">\n                            <div *ngFor=\"let role of net.roles\" fxFlex fxLayout=\"row wrap\" fxLayoutAlign=\"start center\">\n                                <span>{{role.name}}</span>\n\n                                <div fxFlex></div>\n\n                                <button mat-icon-button color=\"primary\" (click)=\"addRole(role)\">\n                                    <mat-icon>add</mat-icon>\n                                </button>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n            </mat-expansion-panel>\n\n        </mat-accordion>\n\n        <div *ngIf=\"nets.loading$ | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex=\"100\">\n            <mat-spinner color=\"primary\" diameter=\"65\"></mat-spinner>\n        </div>\n    </div>\n</div>\n\n",
+                    template: "<div fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"full-height full-width padding-default\">\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex=\"40\" class=\"full-height margin-right-16px\">\n\n        <mat-toolbar color=\"primary\" class=\"height-96 margin-bottom-16px\">\n            <span>{{'admin.user-invite.newUser' | translate}}</span>\n            <div fxFlex></div>\n            <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex=\"40\" class=\"padding-right-16px\">\n                <mat-icon fxFlex class=\"mail-icon\">email</mat-icon>\n                <mat-form-field fxFlex=\"100\" class=\"user-assign-search\" color=\"primary\">\n                    <input matInput placeholder=\"{{ 'admin.user-invite.mail' | translate }}\"\n                           [formControl]=\"invitedEmailControl\">\n                    <button mat-button *ngIf=\"invitedEmailControl.value\" matSuffix mat-icon-button\n                            (click)=\"invitedEmailControl.setValue('')\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </mat-form-field>\n            </div>\n        </mat-toolbar>\n\n\n        <div fxLayout=\"column\" class=\"invited-card margin-bottom-16px\" fxLayoutAlign=\"start stretch\">\n\n            <span class=\"invited-card-font padding-16px\">{{'admin.user-invite.selectedOrgs' | translate}}</span>\n\n            <mat-divider class=\"inherited-divider\"></mat-divider>\n\n            <div class=\"padding-16px\" fxLayout=\"column\" *ngIf=\"invitedGroups.length !== 0\">\n                <div *ngFor=\"let org of invitedGroups\" fxFlex fxLayout=\"row\" fxLayoutAlign=\"start center\">\n                    <span>{{org.name}}</span>\n\n                    <div fxFlex></div>\n\n                    <button mat-icon-button color=\"primary\" (click)=\"removeGroup(org)\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n\n            <span class=\"padding-16px\"\n                  *ngIf=\"invitedGroups.length === 0\">{{'admin.user-invite.noSelectedOrgs' | translate}}</span>\n        </div>\n\n\n        <div fxLayout=\"column\" class=\"invited-card margin-bottom-16px\" fxLayoutAlign=\"start stretch\">\n\n            <span class=\"invited-card-font padding-16px\">{{'admin.user-invite.selectedRoles' | translate}}</span>\n\n            <mat-divider class=\"inherited-divider\"></mat-divider>\n\n            <div class=\"padding-16px\" fxLayout=\"column\" *ngIf=\"invitedRoles.length !== 0\">\n                <div *ngFor=\"let role of invitedRoles\" fxFlex fxLayout=\"row\" fxLayoutAlign=\"start center\">\n                    <span>{{role.name}}</span>\n\n                    <div fxFlex></div>\n\n                    <button mat-icon-button color=\"primary\" (click)=\"removeRole(role)\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n\n            <span class=\"padding-16px\"\n                  *ngIf=\"invitedRoles.length === 0\">{{'admin.user-invite.noSelectedRoles' | translate}}</span>\n        </div>\n\n        <div fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n            <button mat-raised-button color=\"primary\" (click)=\"invite()\">\n                <span>{{'admin.user-invite.invite-user' | translate}}</span>\n            </button>\n        </div>\n    </div>\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex=\"30\" class=\"full-height margin-right-16px\">\n\n        <mat-toolbar color=\"primary\" class=\"height-96 margin-bottom-16px\">\n            <span>{{'admin.user-invite.orgs' | translate}}</span>\n        </mat-toolbar>\n\n        <div *ngIf=\"groups.length === 0\" fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex>\n            <mat-icon color=\"accent\" class=\"margin-bottom-default no-user-icon\">groups</mat-icon>\n            <span class=\"font-size-20\">{{'admin.user-invite.noGroups' | translate}}</span>\n        </div>\n\n        <div fxLayout=\"column\" class=\"invited-card \" *ngIf=\"groups.length !== 0\">\n            <div fxLayout=\"column\">\n                <div *ngFor=\"let group of groups\" class=\"padding-16px-0\" fxFlex fxLayout=\"row\"\n                     fxLayoutAlign=\"start center\">\n                    <span>{{group.name}}</span>\n\n                    <div fxFlex></div>\n\n                    <button mat-icon-button color=\"primary\" (click)=\"addGroup(group)\">\n                        <mat-icon>add</mat-icon>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex=\"30\" class=\"full-height\">\n\n        <mat-toolbar color=\"primary\" class=\"height-96 margin-bottom-16px\">\n            <span>{{'admin.process-list.listTitle' | translate}}</span>\n        </mat-toolbar>\n\n        <div *ngIf=\"nets.processes.length === 0\" fxLayout=\"column\"\n             fxLayoutAlign=\"center center\" fxFlex class=\"margin-top-x2\">\n            <mat-icon color=\"accent\" class=\"margin-bottom-default no-user-icon\">timeline</mat-icon>\n            <span class=\"font-size-20\">{{ 'admin.process-list.noProcessesWereFound' | translate}}</span>\n        </div>\n\n        <mat-accordion class=\"full-width margin-top-default process-list-accordion\" multi fxFlex>\n\n            <mat-expansion-panel *ngFor=\"let item of nets.processes\" (afterExpand)=\"nets.loadProcessItemRoles(item)\"\n                                 (afterCollapse)=\"nets.prepareToTryAgainToLoadRoles(item)\">\n\n                <mat-expansion-panel-header>\n                    <mat-panel-title>\n                        <mat-icon *ngIf=\"item.someRolesSelected\" color=\"accent\" class=\"margin-right-x2\">tour</mat-icon>\n                        <span>{{item.initials}} - {{item.title}}</span>\n                    </mat-panel-title>\n                    <mat-panel-description class=\"process-item-description\">\n                        <span\n                            class=\"process-item-description full-width\">{{'admin.process-list.newestVersion' | translate}}\n                            : {{item.newestVersion}}</span>\n                    </mat-panel-description>\n                </mat-expansion-panel-header>\n\n                <div *ngIf=\"item.loading\" fxFlex=\"100\" class=\"full-width\">\n                    <mat-progress-bar mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\n                </div>\n\n                <div *ngIf=\"!item.loading && item.emptyRoles\" fxLayout=\"column\"\n                     fxLayoutAlign=\"center center\" fxFlex class=\"full-width full-height net-panel-content\">\n                    <mat-icon color=\"accent\" class=\"margin-bottom-default\">account_circle</mat-icon>\n                    <span class=\"font-size-15\">{{ 'admin.process-list.noRoles' | translate}}</span>\n                </div>\n\n                <div *ngIf=\"!item.loading && !item.emptyRoles\" fxLayout=\"column\" fxLayoutAlign=\"start center\"\n                     class=\"full-height full-width net-panel-content padding-0-16px\">\n                    <h3>Roles</h3>\n                    <div *ngFor=\"let net of item.processes; let first = first\" fxLayout=\"column\"\n                         fxLayoutAlign=\"start center\" class=\"full-width\">\n                        <mat-divider *ngIf=\"!first\" style=\"position: relative\"></mat-divider>\n\n                        <span>{{'admin.user-invite.version' | translate }} - {{net.version}}</span>\n\n                        <div fxLayout=\"column\" class=\"full-width padding-16px\">\n                            <div *ngFor=\"let role of net.roles\" fxFlex fxLayout=\"row wrap\" fxLayoutAlign=\"start center\">\n                                <span>{{role.name}}</span>\n\n                                <div fxFlex></div>\n\n                                <button mat-icon-button color=\"primary\" (click)=\"addRole(role)\">\n                                    <mat-icon>add</mat-icon>\n                                </button>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n            </mat-expansion-panel>\n\n        </mat-accordion>\n\n        <div *ngIf=\"nets.loading$ | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex=\"100\">\n            <mat-spinner color=\"primary\" diameter=\"65\"></mat-spinner>\n        </div>\n    </div>\n</div>\n",
                     styles: [".full-height{height:100%;min-height:100%}.full-width{width:100%;min-width:100%}.padding-default{padding:8px}.padding-half{padding:4px}.padding-x2{padding:16px}.margin-default{margin:8px}.margin-half{margin:4px}.margin-x2{margin:16px}.margin-top-default{margin-top:8px}.margin-top-half{margin-top:4px}.margin-top-x2{margin-top:16px}.margin-bottom-default{margin-bottom:8px}.margin-bottom-half{margin-bottom:4px}.margin-bottom-x2{margin-bottom:16px}.margin-left-default{margin-left:8px}.margin-left-half{margin-left:4px}.margin-left-x2{margin-left:16px}.margin-right-default{margin-right:8px}.margin-right-half{margin-right:4px}.margin-right-x2{margin-right:16px}.flex-class{flex:1 1 auto}.height-96{min-height:96px}.mail-icon{margin-right:10px}.invited-card{padding:0 16px;width:100%;white-space:nowrap;border:1px solid #eee}.invited-card-font,.invited-card-font h1,.invited-card-font h2,.invited-card-font h3,.invited-card-font h4,.invited-card-font h5,.invited-card-font h6{font:500 20px/32px Roboto,monospace;letter-spacing:normal;margin:0}.inherited-divider{position:inherit}.padding-16px{padding:16px}.padding-0-16px{padding:0 16px}.padding-16px-0{padding:16px 0}.padding-right-16px{padding-right:16px}.margin-right-16px{margin-right:16px}.margin-bottom-16px{margin-bottom:16px}.font-size-20{font-size:20px}"]
                 },] }
     ];
@@ -37,4 +37,4 @@ var UserInviteComponent = /** @class */ (function (_super) {
     return UserInviteComponent;
 }(AbstractUserInviteComponent));
 export { UserInviteComponent };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlci1pbnZpdGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQG5ldGdyaWYvY29tcG9uZW50cy8iLCJzb3VyY2VzIjpbImxpYi9hZG1pbi91c2VyLWludml0ZS91c2VyLWludml0ZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDeEMsT0FBTyxFQUNILDJCQUEyQixFQUMzQix1QkFBdUIsRUFDdkIsYUFBYSxFQUNiLGVBQWUsRUFDZixpQkFBaUIsRUFDcEIsTUFBTSwwQkFBMEIsQ0FBQztBQUNsQyxPQUFPLEVBQUMsZ0JBQWdCLEVBQUMsTUFBTSxxQkFBcUIsQ0FBQztBQUVyRDtJQUt5Qyx1Q0FBMkI7SUFFaEUsNkJBQXNCLGtCQUFxQyxFQUNyQyxRQUFpQyxFQUNqQyxjQUE2QixFQUM3QixTQUEwQixFQUMxQixVQUE0QjtRQUpsRCxZQUtJLGtCQUFNLGtCQUFrQixFQUFFLFFBQVEsRUFBRSxjQUFjLEVBQUUsU0FBUyxFQUFFLFVBQVUsQ0FBQyxTQUM3RTtRQU5xQix3QkFBa0IsR0FBbEIsa0JBQWtCLENBQW1CO1FBQ3JDLGNBQVEsR0FBUixRQUFRLENBQXlCO1FBQ2pDLG9CQUFjLEdBQWQsY0FBYyxDQUFlO1FBQzdCLGVBQVMsR0FBVCxTQUFTLENBQWlCO1FBQzFCLGdCQUFVLEdBQVYsVUFBVSxDQUFrQjs7SUFFbEQsQ0FBQzs7Z0JBTnlDLGlCQUFpQjtnQkFDM0IsdUJBQXVCO2dCQUNqQixhQUFhO2dCQUNsQixlQUFlO2dCQUNkLGdCQUFnQjs7O2dCQVhyRCxTQUFTLFNBQUM7b0JBQ1AsUUFBUSxFQUFFLGdCQUFnQjtvQkFDMUIseTdRQUEyQzs7aUJBRTlDOzs7Z0JBUkcsaUJBQWlCO2dCQUhqQix1QkFBdUI7Z0JBQ3ZCLGFBQWE7Z0JBQ2IsZUFBZTtnQkFHWCxnQkFBZ0I7O0lBZ0J4QiwwQkFBQztDQUFBLEFBZEQsQ0FLeUMsMkJBQTJCLEdBU25FO1NBVFksbUJBQW1CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtcbiAgICBBYnN0cmFjdFVzZXJJbnZpdGVDb21wb25lbnQsXG4gICAgT3JnYW5pemF0aW9uTGlzdFNlcnZpY2UsXG4gICAgU2lnblVwU2VydmljZSxcbiAgICBTbmFja0JhclNlcnZpY2UsXG4gICAgVXNlckludml0ZVNlcnZpY2Vcbn0gZnJvbSAnQG5ldGdyaWYvY29tcG9uZW50cy1jb3JlJztcbmltcG9ydCB7VHJhbnNsYXRlU2VydmljZX0gZnJvbSAnQG5neC10cmFuc2xhdGUvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnbmMtdXNlci1pbnZpdGUnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi91c2VyLWludml0ZS5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vdXNlci1pbnZpdGUuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBVc2VySW52aXRlQ29tcG9uZW50IGV4dGVuZHMgQWJzdHJhY3RVc2VySW52aXRlQ29tcG9uZW50IHtcblxuICAgIGNvbnN0cnVjdG9yKHByb3RlY3RlZCBfdXNlckludml0ZVNlcnZpY2U6IFVzZXJJbnZpdGVTZXJ2aWNlLFxuICAgICAgICAgICAgICAgIHByb3RlY3RlZCBfb3JnTGlzdDogT3JnYW5pemF0aW9uTGlzdFNlcnZpY2UsXG4gICAgICAgICAgICAgICAgcHJvdGVjdGVkIF9zaWduVXBTZXJ2aWNlOiBTaWduVXBTZXJ2aWNlLFxuICAgICAgICAgICAgICAgIHByb3RlY3RlZCBfc25hY2tCYXI6IFNuYWNrQmFyU2VydmljZSxcbiAgICAgICAgICAgICAgICBwcm90ZWN0ZWQgX3RyYW5zbGF0ZTogVHJhbnNsYXRlU2VydmljZSkge1xuICAgICAgICBzdXBlcihfdXNlckludml0ZVNlcnZpY2UsIF9vcmdMaXN0LCBfc2lnblVwU2VydmljZSwgX3NuYWNrQmFyLCBfdHJhbnNsYXRlKTtcbiAgICB9XG59XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlci1pbnZpdGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQG5ldGdyaWYvY29tcG9uZW50cy8iLCJzb3VyY2VzIjpbImxpYi9hZG1pbi91c2VyLWludml0ZS91c2VyLWludml0ZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDeEMsT0FBTyxFQUNILDJCQUEyQixFQUMzQix1QkFBdUIsRUFDdkIsYUFBYSxFQUNiLGVBQWUsRUFDZixpQkFBaUIsRUFDcEIsTUFBTSwwQkFBMEIsQ0FBQztBQUNsQyxPQUFPLEVBQUMsZ0JBQWdCLEVBQUMsTUFBTSxxQkFBcUIsQ0FBQztBQUVyRDtJQUt5Qyx1Q0FBMkI7SUFFaEUsNkJBQXNCLGtCQUFxQyxFQUNyQyxRQUFpQyxFQUNqQyxjQUE2QixFQUM3QixTQUEwQixFQUMxQixVQUE0QjtRQUpsRCxZQUtJLGtCQUFNLGtCQUFrQixFQUFFLFFBQVEsRUFBRSxjQUFjLEVBQUUsU0FBUyxFQUFFLFVBQVUsQ0FBQyxTQUM3RTtRQU5xQix3QkFBa0IsR0FBbEIsa0JBQWtCLENBQW1CO1FBQ3JDLGNBQVEsR0FBUixRQUFRLENBQXlCO1FBQ2pDLG9CQUFjLEdBQWQsY0FBYyxDQUFlO1FBQzdCLGVBQVMsR0FBVCxTQUFTLENBQWlCO1FBQzFCLGdCQUFVLEdBQVYsVUFBVSxDQUFrQjs7SUFFbEQsQ0FBQzs7Z0JBTnlDLGlCQUFpQjtnQkFDM0IsdUJBQXVCO2dCQUNqQixhQUFhO2dCQUNsQixlQUFlO2dCQUNkLGdCQUFnQjs7O2dCQVhyRCxTQUFTLFNBQUM7b0JBQ1AsUUFBUSxFQUFFLGdCQUFnQjtvQkFDMUIsdTdRQUEyQzs7aUJBRTlDOzs7Z0JBUkcsaUJBQWlCO2dCQUhqQix1QkFBdUI7Z0JBQ3ZCLGFBQWE7Z0JBQ2IsZUFBZTtnQkFHWCxnQkFBZ0I7O0lBaUJ4QiwwQkFBQztDQUFBLEFBZkQsQ0FLeUMsMkJBQTJCLEdBVW5FO1NBVlksbUJBQW1CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtcbiAgICBBYnN0cmFjdFVzZXJJbnZpdGVDb21wb25lbnQsXG4gICAgT3JnYW5pemF0aW9uTGlzdFNlcnZpY2UsXG4gICAgU2lnblVwU2VydmljZSxcbiAgICBTbmFja0JhclNlcnZpY2UsXG4gICAgVXNlckludml0ZVNlcnZpY2Vcbn0gZnJvbSAnQG5ldGdyaWYvY29tcG9uZW50cy1jb3JlJztcbmltcG9ydCB7VHJhbnNsYXRlU2VydmljZX0gZnJvbSAnQG5neC10cmFuc2xhdGUvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnbmMtdXNlci1pbnZpdGUnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi91c2VyLWludml0ZS5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vdXNlci1pbnZpdGUuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBVc2VySW52aXRlQ29tcG9uZW50IGV4dGVuZHMgQWJzdHJhY3RVc2VySW52aXRlQ29tcG9uZW50IHtcblxuICAgIGNvbnN0cnVjdG9yKHByb3RlY3RlZCBfdXNlckludml0ZVNlcnZpY2U6IFVzZXJJbnZpdGVTZXJ2aWNlLFxuICAgICAgICAgICAgICAgIHByb3RlY3RlZCBfb3JnTGlzdDogT3JnYW5pemF0aW9uTGlzdFNlcnZpY2UsXG4gICAgICAgICAgICAgICAgcHJvdGVjdGVkIF9zaWduVXBTZXJ2aWNlOiBTaWduVXBTZXJ2aWNlLFxuICAgICAgICAgICAgICAgIHByb3RlY3RlZCBfc25hY2tCYXI6IFNuYWNrQmFyU2VydmljZSxcbiAgICAgICAgICAgICAgICBwcm90ZWN0ZWQgX3RyYW5zbGF0ZTogVHJhbnNsYXRlU2VydmljZSkge1xuICAgICAgICBzdXBlcihfdXNlckludml0ZVNlcnZpY2UsIF9vcmdMaXN0LCBfc2lnblVwU2VydmljZSwgX3NuYWNrQmFyLCBfdHJhbnNsYXRlKTtcbiAgICB9XG5cbn1cbiJdfQ==

package/esm5/lib/panel/panel.component.js

@@ -14,7 +14,7 @@ var PanelComponent = /** @class */ (function (_super) {
         { type: Component, args: [{
                     selector: 'nc-app-panel',
                     template: "<mat-expansion-panel [@.disabled]=\"expansionDisabled\" hideToggle (afterExpand)=\"emitExpand()\"\n                     (afterCollapse)=\"emitCollapse()\" #matExpansionPanel class=\"panel-margin\"\n                     [ngClass]=\"{'margin-top':first, 'margin-bottom':last}\">\n    <mat-expansion-panel-header (click)=\"expandPanel()\" class=\"panel-color header-padding header-min-height\"\n                                [ngStyle]=\"{'background': caseColor, 'color': getCaseFontColor()}\">\n        <mat-panel-description *ngTemplateOutlet=\"panelHeader\">\n        </mat-panel-description>\n    </mat-expansion-panel-header>\n    <ng-template matExpansionPanelContent>\n        <div *ngTemplateOutlet=\"panelContent\"></div>\n    </ng-template>\n</mat-expansion-panel>\n\n",
-                    styles: [".mat-expansion-panel-header{border-bottom:1px solid rgba(0,0,0,.03);color:rgba(0,0,0,.87)}.header-padding{padding:0 16px}.header-min-height{min-height:48px!important;height:auto!important}.panel-margin{margin:0 2px}.margin-top{margin-top:2px}.margin-bottom{margin-bottom:2px}"]
+                    styles: [".mat-expansion-panel-header{border-bottom:1px solid rgba(0,0,0,.03);color:rgba(0,0,0,.87)}.header-padding{padding:0 16px}.header-min-height{min-height:48px!important;height:auto!important}.panel-margin{margin:0 2px}.margin-top{margin-top:2px}.margin-bottom{margin-bottom:2px}.mat-expansion-panel{-webkit-user-select:text!important;-moz-user-select:text!important;-ms-user-select:text!important;user-select:text!important}"]
                 },] }
     ];
     PanelComponent.ctorParameters = function () { return [

package/esm5/lib/side-menu/content-components/new-case/new-case.component.js

@@ -30,7 +30,7 @@ var NewCaseComponent = /** @class */ (function (_super) {
     NewCaseComponent.decorators = [
         { type: Component, args: [{
                     selector: 'nc-new-case',
-                    template: "<div #toolbar class=\"custom-mat-toolbar\" fxLayout=\"column\" fxLayoutAlign=\"center none\">\n    {{titleShortening()}}\n</div>\n<mat-vertical-stepper *ngIf=\"hasMultipleNets$ | async\" linear #stepper1>\n    <mat-step [stepControl]=\"processFormControl\" errorMessage=\"{{'side-menu.new-case.errFirst' | translate}}\">\n        <ng-template matStepLabel>{{'side-menu.new-case.choose' | translate}}</ng-template>\n        <mat-form-field>\n            <input type=\"text\" matInput [formControl]=\"processFormControl\" [matAutocomplete]=\"auto\" required\n                   (keyup.enter)=\"nextStep()\" (change)=\"checkVersion(processFormControl.value)\">\n            <span class=\"version-span\" *ngIf=\"isVersionVisible\" matSuffix>{{netVersion}}</span>\n            <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayFn\"\n                              (optionSelected)=\"showVersion($event.option)\">\n                <mat-option *ngFor=\"let option of filteredOptions$ | async\" [value]=\"option\">\n                    {{option.viewValue}}\n                    <span class=\"version-span\" *ngIf=\"isVersionVisible\">{{option.version}}</span>\n                </mat-option>\n            </mat-autocomplete>\n        </mat-form-field>\n        <div>\n            <button *ngIf=\"isCaseTitleEnabled()\" mat-button matStepperNext>{{'side-menu.new-case.next' | translate}}</button>\n            <button *ngIf=\"!isCaseTitleEnabled()\" mat-button (click)=\"createNewCase()\">{{'side-menu.new-case.create' | translate}}</button>\n        </div>\n    </mat-step>\n    <mat-step *ngIf=\"isCaseTitleEnabled()\" [stepControl]=\"titleFormControl\" errorMessage=\"{{'side-menu.new-case.errSecond' | translate}}\">\n        <ng-template matStepLabel>{{'side-menu.new-case.caseTitle' | translate}}</ng-template>\n        <mat-form-field>\n            <input matInput placeholder=\"Title\" autocomplete=\"off\" [formControl]=\"titleFormControl\" [required]=\"isCaseTitleRequired()\" (keyup.enter)=\"nextStep()\">\n        </mat-form-field>\n        <div>\n            <button mat-button (click)=\"stepper1.reset(); checkVersion(processFormControl.value)\">{{'side-menu.new-case.reset' | translate}}</button>\n            <button mat-button (click)=\"createNewCase()\">{{'side-menu.new-case.create' | translate}}</button>\n        </div>\n    </mat-step>\n</mat-vertical-stepper>\n<mat-vertical-stepper *ngIf=\"(hasMultipleNets$ | async) === false\" linear #stepper2>\n    <mat-step [stepControl]=\"titleFormControl\" errorMessage=\"{{'side-menu.new-case.errSecond' | translate}}\">\n        <ng-template matStepLabel>{{'side-menu.new-case.caseTitle' | translate}}</ng-template>\n        <mat-form-field>\n            <input matInput placeholder=\"Title\" autocomplete=\"off\" [formControl]=\"titleFormControl\" [required]=\"isCaseTitleRequired()\" (keyup.enter)=\"nextStep()\">\n        </mat-form-field>\n        <div>\n            <button mat-button (click)=\"stepper2.reset()\">{{'side-menu.new-case.reset' | translate}}</button>\n            <button mat-button (click)=\"createNewCase()\">{{'side-menu.new-case.create' | translate}}</button>\n        </div>\n    </mat-step>\n</mat-vertical-stepper>\n<div *ngIf=\"(notInitialized$ | async)\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n    <mat-spinner class=\"spinner-margin\"></mat-spinner>\n</div>\n",
+                    template: "<div #toolbar class=\"custom-mat-toolbar\" fxLayout=\"column\" fxLayoutAlign=\"center none\">\n    {{titleShortening()}}\n</div>\n<mat-vertical-stepper *ngIf=\"hasMultipleNets$ | async\" linear #stepper1>\n    <mat-step [stepControl]=\"processFormControl\" errorMessage=\"{{'side-menu.new-case.errFirst' | translate}}\">\n        <ng-template matStepLabel>{{'side-menu.new-case.choose' | translate}}</ng-template>\n        <mat-form-field>\n            <input type=\"text\" matInput [formControl]=\"processFormControl\" [matAutocomplete]=\"auto\" required\n                   (keyup.enter)=\"nextStep()\" (change)=\"checkVersion(processFormControl.value)\">\n            <span class=\"version-span\" *ngIf=\"isVersionVisible\" matSuffix>{{netVersion}}</span>\n            <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayFn\"\n                              (optionSelected)=\"showVersion($event.option)\">\n                <mat-option *ngFor=\"let option of filteredOptions$ | async\" [value]=\"option\">\n                    {{option.viewValue}}\n                    <span class=\"version-span\" *ngIf=\"isVersionVisible\">{{option.version}}</span>\n                </mat-option>\n            </mat-autocomplete>\n        </mat-form-field>\n        <div>\n            <button *ngIf=\"isCaseTitleEnabled()\"  mat-button (click)=\"toNextStep(processFormControl.value)\">{{'side-menu.new-case.next' | translate}}</button>\n            <button *ngIf=\"!isCaseTitleEnabled()\" mat-button (click)=\"createNewCase()\">{{'side-menu.new-case.create' | translate}}</button>\n        </div>\n    </mat-step>\n    <mat-step *ngIf=\"isCaseTitleEnabled()\" [stepControl]=\"titleFormControl\" errorMessage=\"{{'side-menu.new-case.errSecond' | translate}}\">\n        <ng-template matStepLabel>{{'side-menu.new-case.caseTitle' | translate}}</ng-template>\n        <mat-form-field>\n            <input matInput placeholder=\"Title\" autocomplete=\"off\" [formControl]=\"titleFormControl\" [required]=\"isCaseTitleRequired()\" (keyup.enter)=\"nextStep()\">\n        </mat-form-field>\n        <div>\n            <button mat-button (click)=\"stepper1.reset(); checkVersion(processFormControl.value)\">{{'side-menu.new-case.reset' | translate}}</button>\n            <button mat-button (click)=\"createNewCase()\">{{'side-menu.new-case.create' | translate}}</button>\n        </div>\n    </mat-step>\n</mat-vertical-stepper>\n<mat-vertical-stepper *ngIf=\"(hasMultipleNets$ | async) === false\" linear #stepper2>\n    <mat-step [stepControl]=\"titleFormControl\" errorMessage=\"{{'side-menu.new-case.errSecond' | translate}}\">\n        <ng-template matStepLabel>{{'side-menu.new-case.caseTitle' | translate}}</ng-template>\n        <mat-form-field>\n            <input matInput placeholder=\"Title\" autocomplete=\"off\" [formControl]=\"titleFormControl\" [required]=\"isCaseTitleRequired()\" (keyup.enter)=\"nextStep()\">\n        </mat-form-field>\n        <div>\n            <button mat-button (click)=\"stepper2.reset()\">{{'side-menu.new-case.reset' | translate}}</button>\n            <button mat-button (click)=\"createNewCase()\">{{'side-menu.new-case.create' | translate}}</button>\n        </div>\n    </mat-step>\n</mat-vertical-stepper>\n<div *ngIf=\"(notInitialized$ | async)\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n    <mat-spinner class=\"spinner-margin\"></mat-spinner>\n</div>\n",
                     providers: [{
                             provide: STEPPER_GLOBAL_OPTIONS,
                             useValue: ɵ0
@@ -50,4 +50,4 @@ var NewCaseComponent = /** @class */ (function (_super) {
 }(AbstractNewCaseComponent));
 export { NewCaseComponent };
 export { ɵ0 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmV3LWNhc2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQG5ldGdyaWYvY29tcG9uZW50cy8iLCJzb3VyY2VzIjpbImxpYi9zaWRlLW1lbnUvY29udGVudC1jb21wb25lbnRzL25ldy1jYXNlL25ldy1jYXNlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFDLFNBQVMsRUFBRSxNQUFNLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDaEQsT0FBTyxFQUFDLFdBQVcsRUFBQyxNQUFNLGdCQUFnQixDQUFDO0FBQzNDLE9BQU8sRUFBQyxzQkFBc0IsRUFBQyxNQUFNLHNCQUFzQixDQUFDO0FBQzVELE9BQU8sRUFBQyxnQkFBZ0IsRUFBQyxNQUFNLHFCQUFxQixDQUFDO0FBQ3JELE9BQU8sRUFBQyxjQUFjLEVBQUMsTUFBTSxrQkFBa0IsQ0FBQztBQUNoRCxPQUFPLEVBQ0gsd0JBQXdCLEVBQ3hCLG1CQUFtQixFQUNuQixxQkFBcUIsRUFDckIsZUFBZSxFQUNmLGVBQWUsRUFDbEIsTUFBTSwwQkFBMEIsQ0FBQztTQU9pQixFQUFDLFNBQVMsRUFBRSxJQUFJLEVBQUM7QUFMcEU7SUFRc0Msb0NBQXdCO0lBSTFELDBCQUFxRCxnQkFBaUMsRUFDaEUsWUFBeUIsRUFDekIsZ0JBQWlDLEVBQ2pDLG9CQUF5QyxFQUN6QyxlQUErQixFQUMvQixVQUE0QjtRQUxsRCxZQU1JLGtCQUFNLGdCQUFnQixFQUFFLFlBQVksRUFBRSxnQkFBZ0IsRUFBRSxvQkFBb0IsRUFBRSxlQUFlLEVBQUUsVUFBVSxDQUFDLFNBRTdHO1FBUm9ELHNCQUFnQixHQUFoQixnQkFBZ0IsQ0FBaUI7UUFDaEUsa0JBQVksR0FBWixZQUFZLENBQWE7UUFDekIsc0JBQWdCLEdBQWhCLGdCQUFnQixDQUFpQjtRQUNqQywwQkFBb0IsR0FBcEIsb0JBQW9CLENBQXFCO1FBQ3pDLHFCQUFlLEdBQWYsZUFBZSxDQUFnQjtRQUMvQixnQkFBVSxHQUFWLFVBQVUsQ0FBa0I7UUFFOUMsS0FBSSxDQUFDLGdCQUFnQixHQUFHLGdCQUFnQixDQUFDLGdCQUFnQixDQUFDOztJQUM5RCxDQUFDOztnQkFSc0UsZUFBZSx1QkFBekUsTUFBTSxTQUFDLHFCQUFxQjtnQkFDTCxXQUFXO2dCQUNQLGVBQWU7Z0JBQ1gsbUJBQW1CO2dCQUN4QixjQUFjO2dCQUNuQixnQkFBZ0I7OztnQkFqQnJELFNBQVMsU0FBQztvQkFDUCxRQUFRLEVBQUUsYUFBYTtvQkFDdkIseXpHQUF3QztvQkFFeEMsU0FBUyxFQUFFLENBQUM7NEJBQ1IsT0FBTyxFQUFFLHNCQUFzQjs0QkFBRSxRQUFRLElBQW1CO3lCQUMvRCxDQUFDOztpQkFDTDs7O2dCQVhHLGVBQWUsdUJBZ0JGLE1BQU0sU0FBQyxxQkFBcUI7Z0JBeEJyQyxXQUFXO2dCQVNmLGVBQWU7Z0JBSGYsbUJBQW1CO2dCQUhmLGNBQWM7Z0JBRGQsZ0JBQWdCOztJQWdDeEIsdUJBQUM7Q0FBQSxBQXRCRCxDQVFzQyx3QkFBd0IsR0FjN0Q7U0FkWSxnQkFBZ0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudCwgSW5qZWN0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7Rm9ybUJ1aWxkZXJ9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7U1RFUFBFUl9HTE9CQUxfT1BUSU9OU30gZnJvbSAnQGFuZ3VsYXIvY2RrL3N0ZXBwZXInO1xuaW1wb3J0IHtUcmFuc2xhdGVTZXJ2aWNlfSBmcm9tICdAbmd4LXRyYW5zbGF0ZS9jb3JlJztcbmltcG9ydCB7SG90a2V5c1NlcnZpY2V9IGZyb20gJ2FuZ3VsYXIyLWhvdGtleXMnO1xuaW1wb3J0IHtcbiAgICBBYnN0cmFjdE5ld0Nhc2VDb21wb25lbnQsXG4gICAgQ2FzZVJlc291cmNlU2VydmljZSxcbiAgICBOQUVfU0lERV9NRU5VX0NPTlRST0wsXG4gICAgU2lkZU1lbnVDb250cm9sLFxuICAgIFNuYWNrQmFyU2VydmljZVxufSBmcm9tICdAbmV0Z3JpZi9jb21wb25lbnRzLWNvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ25jLW5ldy1jYXNlJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vbmV3LWNhc2UuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL25ldy1jYXNlLmNvbXBvbmVudC5zY3NzJ10sXG4gICAgcHJvdmlkZXJzOiBbe1xuICAgICAgICBwcm92aWRlOiBTVEVQUEVSX0dMT0JBTF9PUFRJT05TLCB1c2VWYWx1ZToge3Nob3dFcnJvcjogdHJ1ZX1cbiAgICB9XVxufSlcbmV4cG9ydCBjbGFzcyBOZXdDYXNlQ29tcG9uZW50IGV4dGVuZHMgQWJzdHJhY3ROZXdDYXNlQ29tcG9uZW50IHtcblxuICAgIGlzVmVyc2lvblZpc2libGU6IGJvb2xlYW47XG5cbiAgICBjb25zdHJ1Y3RvcihASW5qZWN0KE5BRV9TSURFX01FTlVfQ09OVFJPTCkgcHJvdGVjdGVkIF9zaWRlTWVudUNvbnRyb2w6IFNpZGVNZW51Q29udHJvbCxcbiAgICAgICAgICAgICAgICBwcm90ZWN0ZWQgX2Zvcm1CdWlsZGVyOiBGb3JtQnVpbGRlcixcbiAgICAgICAgICAgICAgICBwcm90ZWN0ZWQgX3NuYWNrQmFyU2VydmljZTogU25hY2tCYXJTZXJ2aWNlLFxuICAgICAgICAgICAgICAgIHByb3RlY3RlZCBfY2FzZVJlc291cmNlU2VydmljZTogQ2FzZVJlc291cmNlU2VydmljZSxcbiAgICAgICAgICAgICAgICBwcm90ZWN0ZWQgX2hvdGtleXNTZXJ2aWNlOiBIb3RrZXlzU2VydmljZSxcbiAgICAgICAgICAgICAgICBwcm90ZWN0ZWQgX3RyYW5zbGF0ZTogVHJhbnNsYXRlU2VydmljZSkge1xuICAgICAgICBzdXBlcihfc2lkZU1lbnVDb250cm9sLCBfZm9ybUJ1aWxkZXIsIF9zbmFja0JhclNlcnZpY2UsIF9jYXNlUmVzb3VyY2VTZXJ2aWNlLCBfaG90a2V5c1NlcnZpY2UsIF90cmFuc2xhdGUpO1xuICAgICAgICB0aGlzLmlzVmVyc2lvblZpc2libGUgPSBfc2lkZU1lbnVDb250cm9sLmlzVmVyc2lvblZpc2libGU7XG4gICAgfVxuXG59XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmV3LWNhc2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQG5ldGdyaWYvY29tcG9uZW50cy8iLCJzb3VyY2VzIjpbImxpYi9zaWRlLW1lbnUvY29udGVudC1jb21wb25lbnRzL25ldy1jYXNlL25ldy1jYXNlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFDLFNBQVMsRUFBRSxNQUFNLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDaEQsT0FBTyxFQUFDLFdBQVcsRUFBQyxNQUFNLGdCQUFnQixDQUFDO0FBQzNDLE9BQU8sRUFBQyxzQkFBc0IsRUFBQyxNQUFNLHNCQUFzQixDQUFDO0FBQzVELE9BQU8sRUFBQyxnQkFBZ0IsRUFBQyxNQUFNLHFCQUFxQixDQUFDO0FBQ3JELE9BQU8sRUFBQyxjQUFjLEVBQUMsTUFBTSxrQkFBa0IsQ0FBQztBQUNoRCxPQUFPLEVBQ0gsd0JBQXdCLEVBQ3hCLG1CQUFtQixFQUNuQixxQkFBcUIsRUFDckIsZUFBZSxFQUNmLGVBQWUsRUFDbEIsTUFBTSwwQkFBMEIsQ0FBQztTQU9pQixFQUFDLFNBQVMsRUFBRSxJQUFJLEVBQUM7QUFMcEU7SUFRc0Msb0NBQXdCO0lBSTFELDBCQUFxRCxnQkFBaUMsRUFDaEUsWUFBeUIsRUFDekIsZ0JBQWlDLEVBQ2pDLG9CQUF5QyxFQUN6QyxlQUErQixFQUMvQixVQUE0QjtRQUxsRCxZQU1JLGtCQUFNLGdCQUFnQixFQUFFLFlBQVksRUFBRSxnQkFBZ0IsRUFBRSxvQkFBb0IsRUFBRSxlQUFlLEVBQUUsVUFBVSxDQUFDLFNBRTdHO1FBUm9ELHNCQUFnQixHQUFoQixnQkFBZ0IsQ0FBaUI7UUFDaEUsa0JBQVksR0FBWixZQUFZLENBQWE7UUFDekIsc0JBQWdCLEdBQWhCLGdCQUFnQixDQUFpQjtRQUNqQywwQkFBb0IsR0FBcEIsb0JBQW9CLENBQXFCO1FBQ3pDLHFCQUFlLEdBQWYsZUFBZSxDQUFnQjtRQUMvQixnQkFBVSxHQUFWLFVBQVUsQ0FBa0I7UUFFOUMsS0FBSSxDQUFDLGdCQUFnQixHQUFHLGdCQUFnQixDQUFDLGdCQUFnQixDQUFDOztJQUM5RCxDQUFDOztnQkFSc0UsZUFBZSx1QkFBekUsTUFBTSxTQUFDLHFCQUFxQjtnQkFDTCxXQUFXO2dCQUNQLGVBQWU7Z0JBQ1gsbUJBQW1CO2dCQUN4QixjQUFjO2dCQUNuQixnQkFBZ0I7OztnQkFqQnJELFNBQVMsU0FBQztvQkFDUCxRQUFRLEVBQUUsYUFBYTtvQkFDdkIsNDFHQUF3QztvQkFFeEMsU0FBUyxFQUFFLENBQUM7NEJBQ1IsT0FBTyxFQUFFLHNCQUFzQjs0QkFBRSxRQUFRLElBQW1CO3lCQUMvRCxDQUFDOztpQkFDTDs7O2dCQVhHLGVBQWUsdUJBZ0JGLE1BQU0sU0FBQyxxQkFBcUI7Z0JBeEJyQyxXQUFXO2dCQVNmLGVBQWU7Z0JBSGYsbUJBQW1CO2dCQUhmLGNBQWM7Z0JBRGQsZ0JBQWdCOztJQWdDeEIsdUJBQUM7Q0FBQSxBQXRCRCxDQVFzQyx3QkFBd0IsR0FjN0Q7U0FkWSxnQkFBZ0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudCwgSW5qZWN0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7Rm9ybUJ1aWxkZXJ9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7U1RFUFBFUl9HTE9CQUxfT1BUSU9OU30gZnJvbSAnQGFuZ3VsYXIvY2RrL3N0ZXBwZXInO1xuaW1wb3J0IHtUcmFuc2xhdGVTZXJ2aWNlfSBmcm9tICdAbmd4LXRyYW5zbGF0ZS9jb3JlJztcbmltcG9ydCB7SG90a2V5c1NlcnZpY2V9IGZyb20gJ2FuZ3VsYXIyLWhvdGtleXMnO1xuaW1wb3J0IHtcbiAgICBBYnN0cmFjdE5ld0Nhc2VDb21wb25lbnQsXG4gICAgQ2FzZVJlc291cmNlU2VydmljZSxcbiAgICBOQUVfU0lERV9NRU5VX0NPTlRST0wsXG4gICAgU2lkZU1lbnVDb250cm9sLFxuICAgIFNuYWNrQmFyU2VydmljZVxufSBmcm9tICdAbmV0Z3JpZi9jb21wb25lbnRzLWNvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ25jLW5ldy1jYXNlJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vbmV3LWNhc2UuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL25ldy1jYXNlLmNvbXBvbmVudC5zY3NzJ10sXG4gICAgcHJvdmlkZXJzOiBbe1xuICAgICAgICBwcm92aWRlOiBTVEVQUEVSX0dMT0JBTF9PUFRJT05TLCB1c2VWYWx1ZToge3Nob3dFcnJvcjogdHJ1ZX1cbiAgICB9XVxufSlcbmV4cG9ydCBjbGFzcyBOZXdDYXNlQ29tcG9uZW50IGV4dGVuZHMgQWJzdHJhY3ROZXdDYXNlQ29tcG9uZW50IHtcblxuICAgIGlzVmVyc2lvblZpc2libGU6IGJvb2xlYW47XG5cbiAgICBjb25zdHJ1Y3RvcihASW5qZWN0KE5BRV9TSURFX01FTlVfQ09OVFJPTCkgcHJvdGVjdGVkIF9zaWRlTWVudUNvbnRyb2w6IFNpZGVNZW51Q29udHJvbCxcbiAgICAgICAgICAgICAgICBwcm90ZWN0ZWQgX2Zvcm1CdWlsZGVyOiBGb3JtQnVpbGRlcixcbiAgICAgICAgICAgICAgICBwcm90ZWN0ZWQgX3NuYWNrQmFyU2VydmljZTogU25hY2tCYXJTZXJ2aWNlLFxuICAgICAgICAgICAgICAgIHByb3RlY3RlZCBfY2FzZVJlc291cmNlU2VydmljZTogQ2FzZVJlc291cmNlU2VydmljZSxcbiAgICAgICAgICAgICAgICBwcm90ZWN0ZWQgX2hvdGtleXNTZXJ2aWNlOiBIb3RrZXlzU2VydmljZSxcbiAgICAgICAgICAgICAgICBwcm90ZWN0ZWQgX3RyYW5zbGF0ZTogVHJhbnNsYXRlU2VydmljZSkge1xuICAgICAgICBzdXBlcihfc2lkZU1lbnVDb250cm9sLCBfZm9ybUJ1aWxkZXIsIF9zbmFja0JhclNlcnZpY2UsIF9jYXNlUmVzb3VyY2VTZXJ2aWNlLCBfaG90a2V5c1NlcnZpY2UsIF90cmFuc2xhdGUpO1xuICAgICAgICB0aGlzLmlzVmVyc2lvblZpc2libGUgPSBfc2lkZU1lbnVDb250cm9sLmlzVmVyc2lvblZpc2libGU7XG4gICAgfVxuXG59XG4iXX0=

package/fesm2015/netgrif-components.js

@@ -71,7 +71,7 @@ UserInviteComponent.ctorParameters = () => [
 UserInviteComponent.decorators = [
     { type: Component, args: [{
                 selector: 'nc-user-invite',
-                template: "<div fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"full-height full-width padding-default\">\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex=\"40\" class=\"full-height margin-right-16px\">\n\n        <mat-toolbar color=\"primary\" class=\"height-96 margin-bottom-16px\">\n            <span>{{'admin.user-invite.newUser' | translate}}</span>\n            <div fxFlex></div>\n            <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex=\"40\" class=\"padding-right-16px\">\n                <mat-icon fxFlex class=\"mail-icon\">email</mat-icon>\n                <mat-form-field fxFlex=\"100\" class=\"user-assign-search\" color=\"primary\">\n                    <input matInput placeholder=\"{{ 'admin.user-invite.mail' | translate }}\"\n                           [formControl]=\"invitedEmailControl\">\n                    <button mat-button *ngIf=\"invitedEmailControl.value\" matSuffix mat-icon-button\n                            (click)=\"invitedEmailControl.setValue('')\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </mat-form-field>\n            </div>\n        </mat-toolbar>\n\n\n        <div fxLayout=\"column\" class=\"invited-card margin-bottom-16px\" fxLayoutAlign=\"start stretch\">\n\n            <span class=\"invited-card-font padding-16px\">{{'admin.user-invite.selectedOrgs' | translate}}</span>\n\n            <mat-divider class=\"inherited-divider\"></mat-divider>\n\n            <div class=\"padding-16px\" fxLayout=\"column\" *ngIf=\"invitedGroups.length !== 0\">\n                <div *ngFor=\"let org of invitedGroups\" fxFlex fxLayout=\"row\" fxLayoutAlign=\"start center\">\n                    <span>{{org.name}}</span>\n\n                    <div fxFlex></div>\n\n                    <button mat-icon-button color=\"primary\" (click)=\"removeGroup(org)\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n\n            <span class=\"padding-16px\"\n                  *ngIf=\"invitedGroups.length === 0\">{{'admin.user-invite.noSelectedOrgs' | translate}}</span>\n        </div>\n\n\n        <div fxLayout=\"column\" class=\"invited-card margin-bottom-16px\" fxLayoutAlign=\"start stretch\">\n\n            <span class=\"invited-card-font padding-16px\">{{'admin.user-invite.selectedRoles' | translate}}</span>\n\n            <mat-divider class=\"inherited-divider\"></mat-divider>\n\n            <div class=\"padding-16px\" fxLayout=\"column\" *ngIf=\"invitedRoles.length !== 0\">\n                <div *ngFor=\"let role of invitedRoles\" fxFlex fxLayout=\"row\" fxLayoutAlign=\"start center\">\n                    <span>{{role.name}}</span>\n\n                    <div fxFlex></div>\n\n                    <button mat-icon-button color=\"primary\" (click)=\"removeRole(role)\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n\n            <span class=\"padding-16px\"\n                  *ngIf=\"invitedRoles.length === 0\">{{'admin.user-invite.noSelectedRoles' | translate}}</span>\n        </div>\n\n        <div fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n            <button mat-raised-button color=\"primary\" (click)=\"invite()\">\n                <span>{{'admin.user-invite.invite-user' | translate}}</span>\n            </button>\n        </div>\n    </div>\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex=\"30\" class=\"full-height margin-right-16px\">\n\n        <mat-toolbar color=\"primary\" class=\"height-96 margin-bottom-16px\">\n            <span>{{'admin.user-invite.orgs' | translate}}</span>\n        </mat-toolbar>\n\n        <div *ngIf=\"groups.length === 0\" fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex>\n            <mat-icon color=\"accent\" class=\"margin-bottom-default no-user-icon\">groups</mat-icon>\n            <span class=\"font-size-20\">{{'admin.user-invite.noGroups' | translate}}</span>\n        </div>\n\n        <div fxLayout=\"column\" class=\"invited-card \" *ngIf=\"groups.length !== 0\">\n            <div fxLayout=\"column\">\n                <div *ngFor=\"let group of groups\" class=\"padding-16px-0\" fxFlex fxLayout=\"row\"\n                     fxLayoutAlign=\"start center\">\n                    <span>{{group.name}}</span>\n\n                    <div fxFlex></div>\n\n                    <button mat-icon-button color=\"primary\" (click)=\"addGroup(group)\">\n                        <mat-icon>add</mat-icon>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex=\"30\" class=\"full-height\">\n\n        <mat-toolbar color=\"primary\" class=\"height-96 margin-bottom-16px\">\n            <span>{{'admin.process-list.listTitle' | translate}}</span>\n        </mat-toolbar>\n\n        <div *ngIf=\"nets.processes.length === 0\" fxLayout=\"column\"\n             fxLayoutAlign=\"center center\" fxFlex class=\"margin-top-x2\">\n            <mat-icon color=\"accent\" class=\"margin-bottom-default no-user-icon\">timeline</mat-icon>\n            <span class=\"font-size-20\">{{ 'admin.process-list.noProcessesWereFound' | translate}}</span>\n        </div>\n\n        <mat-accordion class=\"full-width margin-top-default process-list-accordion\" multi fxFlex>\n\n            <mat-expansion-panel *ngFor=\"let item of nets.processes\" (afterExpand)=\"nets.loadProcessItemRoles(item)\"\n                                 (afterCollapse)=\"nets.prepareToTryAgainToLoadRoles(item)\">\n\n                <mat-expansion-panel-header>\n                    <mat-panel-title>\n                        <mat-icon *ngIf=\"item.someRolesSelected\" color=\"accent\" class=\"margin-right-x2\">tour</mat-icon>\n                        <span>{{item.initials}} - {{item.title}}</span>\n                    </mat-panel-title>\n                    <mat-panel-description class=\"process-item-description\">\n                        <span\n                            class=\"process-item-description full-width\">{{'admin.process-list.newestVersion' | translate}}\n                            : {{item.newestVersion}}</span>\n                    </mat-panel-description>\n                </mat-expansion-panel-header>\n\n                <div *ngIf=\"item.loading\" fxFlex=\"100\" class=\"full-width\">\n                    <mat-progress-bar mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\n                </div>\n\n                <div *ngIf=\"!item.loading && item.emptyRoles\" fxLayout=\"column\"\n                     fxLayoutAlign=\"center center\" fxFlex class=\"full-width full-height net-panel-content\">\n                    <mat-icon color=\"accent\" class=\"margin-bottom-default\">account_circle</mat-icon>\n                    <span class=\"font-size-15\">{{ 'admin.process-list.noRoles' | translate}}</span>\n                </div>\n\n                <div *ngIf=\"!item.loading && !item.emptyRoles\" fxLayout=\"column\" fxLayoutAlign=\"start center\"\n                     class=\"full-height full-width net-panel-content padding-0-16px\">\n                    <h3>Roles</h3>\n                    <div *ngFor=\"let net of item.processes; let first = first\" fxLayout=\"column\"\n                         fxLayoutAlign=\"start center\" class=\"full-width\">\n                        <mat-divider *ngIf=\"!first\" style=\"position: relative\"></mat-divider>\n\n                        <span>{{'admin.user-invite.version' | translate }} - {{net.version}}</span>\n\n                        <div fxLayout=\"column\" class=\"full-width padding-16px\">\n                            <div *ngFor=\"let role of net.roles\" fxFlex fxLayout=\"row wrap\" fxLayoutAlign=\"start center\">\n                                <span>{{role.name}}</span>\n\n                                <div fxFlex></div>\n\n                                <button mat-icon-button color=\"primary\" (click)=\"addRole(role)\">\n                                    <mat-icon>add</mat-icon>\n                                </button>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n            </mat-expansion-panel>\n\n        </mat-accordion>\n\n        <div *ngIf=\"nets.loading$ | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex=\"100\">\n            <mat-spinner color=\"primary\" diameter=\"65\"></mat-spinner>\n        </div>\n    </div>\n</div>\n\n",
+                template: "<div fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"full-height full-width padding-default\">\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex=\"40\" class=\"full-height margin-right-16px\">\n\n        <mat-toolbar color=\"primary\" class=\"height-96 margin-bottom-16px\">\n            <span>{{'admin.user-invite.newUser' | translate}}</span>\n            <div fxFlex></div>\n            <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex=\"40\" class=\"padding-right-16px\">\n                <mat-icon fxFlex class=\"mail-icon\">email</mat-icon>\n                <mat-form-field fxFlex=\"100\" class=\"user-assign-search\" color=\"primary\">\n                    <input matInput placeholder=\"{{ 'admin.user-invite.mail' | translate }}\"\n                           [formControl]=\"invitedEmailControl\">\n                    <button mat-button *ngIf=\"invitedEmailControl.value\" matSuffix mat-icon-button\n                            (click)=\"invitedEmailControl.setValue('')\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </mat-form-field>\n            </div>\n        </mat-toolbar>\n\n\n        <div fxLayout=\"column\" class=\"invited-card margin-bottom-16px\" fxLayoutAlign=\"start stretch\">\n\n            <span class=\"invited-card-font padding-16px\">{{'admin.user-invite.selectedOrgs' | translate}}</span>\n\n            <mat-divider class=\"inherited-divider\"></mat-divider>\n\n            <div class=\"padding-16px\" fxLayout=\"column\" *ngIf=\"invitedGroups.length !== 0\">\n                <div *ngFor=\"let org of invitedGroups\" fxFlex fxLayout=\"row\" fxLayoutAlign=\"start center\">\n                    <span>{{org.name}}</span>\n\n                    <div fxFlex></div>\n\n                    <button mat-icon-button color=\"primary\" (click)=\"removeGroup(org)\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n\n            <span class=\"padding-16px\"\n                  *ngIf=\"invitedGroups.length === 0\">{{'admin.user-invite.noSelectedOrgs' | translate}}</span>\n        </div>\n\n\n        <div fxLayout=\"column\" class=\"invited-card margin-bottom-16px\" fxLayoutAlign=\"start stretch\">\n\n            <span class=\"invited-card-font padding-16px\">{{'admin.user-invite.selectedRoles' | translate}}</span>\n\n            <mat-divider class=\"inherited-divider\"></mat-divider>\n\n            <div class=\"padding-16px\" fxLayout=\"column\" *ngIf=\"invitedRoles.length !== 0\">\n                <div *ngFor=\"let role of invitedRoles\" fxFlex fxLayout=\"row\" fxLayoutAlign=\"start center\">\n                    <span>{{role.name}}</span>\n\n                    <div fxFlex></div>\n\n                    <button mat-icon-button color=\"primary\" (click)=\"removeRole(role)\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n\n            <span class=\"padding-16px\"\n                  *ngIf=\"invitedRoles.length === 0\">{{'admin.user-invite.noSelectedRoles' | translate}}</span>\n        </div>\n\n        <div fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n            <button mat-raised-button color=\"primary\" (click)=\"invite()\">\n                <span>{{'admin.user-invite.invite-user' | translate}}</span>\n            </button>\n        </div>\n    </div>\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex=\"30\" class=\"full-height margin-right-16px\">\n\n        <mat-toolbar color=\"primary\" class=\"height-96 margin-bottom-16px\">\n            <span>{{'admin.user-invite.orgs' | translate}}</span>\n        </mat-toolbar>\n\n        <div *ngIf=\"groups.length === 0\" fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex>\n            <mat-icon color=\"accent\" class=\"margin-bottom-default no-user-icon\">groups</mat-icon>\n            <span class=\"font-size-20\">{{'admin.user-invite.noGroups' | translate}}</span>\n        </div>\n\n        <div fxLayout=\"column\" class=\"invited-card \" *ngIf=\"groups.length !== 0\">\n            <div fxLayout=\"column\">\n                <div *ngFor=\"let group of groups\" class=\"padding-16px-0\" fxFlex fxLayout=\"row\"\n                     fxLayoutAlign=\"start center\">\n                    <span>{{group.name}}</span>\n\n                    <div fxFlex></div>\n\n                    <button mat-icon-button color=\"primary\" (click)=\"addGroup(group)\">\n                        <mat-icon>add</mat-icon>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex=\"30\" class=\"full-height\">\n\n        <mat-toolbar color=\"primary\" class=\"height-96 margin-bottom-16px\">\n            <span>{{'admin.process-list.listTitle' | translate}}</span>\n        </mat-toolbar>\n\n        <div *ngIf=\"nets.processes.length === 0\" fxLayout=\"column\"\n             fxLayoutAlign=\"center center\" fxFlex class=\"margin-top-x2\">\n            <mat-icon color=\"accent\" class=\"margin-bottom-default no-user-icon\">timeline</mat-icon>\n            <span class=\"font-size-20\">{{ 'admin.process-list.noProcessesWereFound' | translate}}</span>\n        </div>\n\n        <mat-accordion class=\"full-width margin-top-default process-list-accordion\" multi fxFlex>\n\n            <mat-expansion-panel *ngFor=\"let item of nets.processes\" (afterExpand)=\"nets.loadProcessItemRoles(item)\"\n                                 (afterCollapse)=\"nets.prepareToTryAgainToLoadRoles(item)\">\n\n                <mat-expansion-panel-header>\n                    <mat-panel-title>\n                        <mat-icon *ngIf=\"item.someRolesSelected\" color=\"accent\" class=\"margin-right-x2\">tour</mat-icon>\n                        <span>{{item.initials}} - {{item.title}}</span>\n                    </mat-panel-title>\n                    <mat-panel-description class=\"process-item-description\">\n                        <span\n                            class=\"process-item-description full-width\">{{'admin.process-list.newestVersion' | translate}}\n                            : {{item.newestVersion}}</span>\n                    </mat-panel-description>\n                </mat-expansion-panel-header>\n\n                <div *ngIf=\"item.loading\" fxFlex=\"100\" class=\"full-width\">\n                    <mat-progress-bar mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\n                </div>\n\n                <div *ngIf=\"!item.loading && item.emptyRoles\" fxLayout=\"column\"\n                     fxLayoutAlign=\"center center\" fxFlex class=\"full-width full-height net-panel-content\">\n                    <mat-icon color=\"accent\" class=\"margin-bottom-default\">account_circle</mat-icon>\n                    <span class=\"font-size-15\">{{ 'admin.process-list.noRoles' | translate}}</span>\n                </div>\n\n                <div *ngIf=\"!item.loading && !item.emptyRoles\" fxLayout=\"column\" fxLayoutAlign=\"start center\"\n                     class=\"full-height full-width net-panel-content padding-0-16px\">\n                    <h3>Roles</h3>\n                    <div *ngFor=\"let net of item.processes; let first = first\" fxLayout=\"column\"\n                         fxLayoutAlign=\"start center\" class=\"full-width\">\n                        <mat-divider *ngIf=\"!first\" style=\"position: relative\"></mat-divider>\n\n                        <span>{{'admin.user-invite.version' | translate }} - {{net.version}}</span>\n\n                        <div fxLayout=\"column\" class=\"full-width padding-16px\">\n                            <div *ngFor=\"let role of net.roles\" fxFlex fxLayout=\"row wrap\" fxLayoutAlign=\"start center\">\n                                <span>{{role.name}}</span>\n\n                                <div fxFlex></div>\n\n                                <button mat-icon-button color=\"primary\" (click)=\"addRole(role)\">\n                                    <mat-icon>add</mat-icon>\n                                </button>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n            </mat-expansion-panel>\n\n        </mat-accordion>\n\n        <div *ngIf=\"nets.loading$ | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex=\"100\">\n            <mat-spinner color=\"primary\" diameter=\"65\"></mat-spinner>\n        </div>\n    </div>\n</div>\n",
                 styles: [".full-height{height:100%;min-height:100%}.full-width{width:100%;min-width:100%}.padding-default{padding:8px}.padding-half{padding:4px}.padding-x2{padding:16px}.margin-default{margin:8px}.margin-half{margin:4px}.margin-x2{margin:16px}.margin-top-default{margin-top:8px}.margin-top-half{margin-top:4px}.margin-top-x2{margin-top:16px}.margin-bottom-default{margin-bottom:8px}.margin-bottom-half{margin-bottom:4px}.margin-bottom-x2{margin-bottom:16px}.margin-left-default{margin-left:8px}.margin-left-half{margin-left:4px}.margin-left-x2{margin-left:16px}.margin-right-default{margin-right:8px}.margin-right-half{margin-right:4px}.margin-right-x2{margin-right:16px}.flex-class{flex:1 1 auto}.height-96{min-height:96px}.mail-icon{margin-right:10px}.invited-card{padding:0 16px;width:100%;white-space:nowrap;border:1px solid #eee}.invited-card-font,.invited-card-font h1,.invited-card-font h2,.invited-card-font h3,.invited-card-font h4,.invited-card-font h5,.invited-card-font h6{font:500 20px/32px Roboto,monospace;letter-spacing:normal;margin:0}.inherited-divider{position:inherit}.padding-16px{padding:16px}.padding-0-16px{padding:0 16px}.padding-16px-0{padding:16px 0}.padding-right-16px{padding-right:16px}.margin-right-16px{margin-right:16px}.margin-bottom-16px{margin-bottom:16px}.font-size-20{font-size:20px}"]
             },] }
 ];
@@ -2634,7 +2634,7 @@ PanelComponent.decorators = [
     { type: Component, args: [{
                 selector: 'nc-app-panel',
                 template: "<mat-expansion-panel [@.disabled]=\"expansionDisabled\" hideToggle (afterExpand)=\"emitExpand()\"\n                     (afterCollapse)=\"emitCollapse()\" #matExpansionPanel class=\"panel-margin\"\n                     [ngClass]=\"{'margin-top':first, 'margin-bottom':last}\">\n    <mat-expansion-panel-header (click)=\"expandPanel()\" class=\"panel-color header-padding header-min-height\"\n                                [ngStyle]=\"{'background': caseColor, 'color': getCaseFontColor()}\">\n        <mat-panel-description *ngTemplateOutlet=\"panelHeader\">\n        </mat-panel-description>\n    </mat-expansion-panel-header>\n    <ng-template matExpansionPanelContent>\n        <div *ngTemplateOutlet=\"panelContent\"></div>\n    </ng-template>\n</mat-expansion-panel>\n\n",
-                styles: [".mat-expansion-panel-header{border-bottom:1px solid rgba(0,0,0,.03);color:rgba(0,0,0,.87)}.header-padding{padding:0 16px}.header-min-height{min-height:48px!important;height:auto!important}.panel-margin{margin:0 2px}.margin-top{margin-top:2px}.margin-bottom{margin-bottom:2px}"]
+                styles: [".mat-expansion-panel-header{border-bottom:1px solid rgba(0,0,0,.03);color:rgba(0,0,0,.87)}.header-padding{padding:0 16px}.header-min-height{min-height:48px!important;height:auto!important}.panel-margin{margin:0 2px}.margin-top{margin-top:2px}.margin-bottom{margin-bottom:2px}.mat-expansion-panel{-webkit-user-select:text!important;-moz-user-select:text!important;-ms-user-select:text!important;user-select:text!important}"]
             },] }
 ];
 PanelComponent.ctorParameters = () => [
@@ -3252,7 +3252,7 @@ NewCaseComponent.ctorParameters = () => [
 NewCaseComponent.decorators = [
     { type: Component, args: [{
                 selector: 'nc-new-case',
-                template: "<div #toolbar class=\"custom-mat-toolbar\" fxLayout=\"column\" fxLayoutAlign=\"center none\">\n    {{titleShortening()}}\n</div>\n<mat-vertical-stepper *ngIf=\"hasMultipleNets$ | async\" linear #stepper1>\n    <mat-step [stepControl]=\"processFormControl\" errorMessage=\"{{'side-menu.new-case.errFirst' | translate}}\">\n        <ng-template matStepLabel>{{'side-menu.new-case.choose' | translate}}</ng-template>\n        <mat-form-field>\n            <input type=\"text\" matInput [formControl]=\"processFormControl\" [matAutocomplete]=\"auto\" required\n                   (keyup.enter)=\"nextStep()\" (change)=\"checkVersion(processFormControl.value)\">\n            <span class=\"version-span\" *ngIf=\"isVersionVisible\" matSuffix>{{netVersion}}</span>\n            <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayFn\"\n                              (optionSelected)=\"showVersion($event.option)\">\n                <mat-option *ngFor=\"let option of filteredOptions$ | async\" [value]=\"option\">\n                    {{option.viewValue}}\n                    <span class=\"version-span\" *ngIf=\"isVersionVisible\">{{option.version}}</span>\n                </mat-option>\n            </mat-autocomplete>\n        </mat-form-field>\n        <div>\n            <button *ngIf=\"isCaseTitleEnabled()\" mat-button matStepperNext>{{'side-menu.new-case.next' | translate}}</button>\n            <button *ngIf=\"!isCaseTitleEnabled()\" mat-button (click)=\"createNewCase()\">{{'side-menu.new-case.create' | translate}}</button>\n        </div>\n    </mat-step>\n    <mat-step *ngIf=\"isCaseTitleEnabled()\" [stepControl]=\"titleFormControl\" errorMessage=\"{{'side-menu.new-case.errSecond' | translate}}\">\n        <ng-template matStepLabel>{{'side-menu.new-case.caseTitle' | translate}}</ng-template>\n        <mat-form-field>\n            <input matInput placeholder=\"Title\" autocomplete=\"off\" [formControl]=\"titleFormControl\" [required]=\"isCaseTitleRequired()\" (keyup.enter)=\"nextStep()\">\n        </mat-form-field>\n        <div>\n            <button mat-button (click)=\"stepper1.reset(); checkVersion(processFormControl.value)\">{{'side-menu.new-case.reset' | translate}}</button>\n            <button mat-button (click)=\"createNewCase()\">{{'side-menu.new-case.create' | translate}}</button>\n        </div>\n    </mat-step>\n</mat-vertical-stepper>\n<mat-vertical-stepper *ngIf=\"(hasMultipleNets$ | async) === false\" linear #stepper2>\n    <mat-step [stepControl]=\"titleFormControl\" errorMessage=\"{{'side-menu.new-case.errSecond' | translate}}\">\n        <ng-template matStepLabel>{{'side-menu.new-case.caseTitle' | translate}}</ng-template>\n        <mat-form-field>\n            <input matInput placeholder=\"Title\" autocomplete=\"off\" [formControl]=\"titleFormControl\" [required]=\"isCaseTitleRequired()\" (keyup.enter)=\"nextStep()\">\n        </mat-form-field>\n        <div>\n            <button mat-button (click)=\"stepper2.reset()\">{{'side-menu.new-case.reset' | translate}}</button>\n            <button mat-button (click)=\"createNewCase()\">{{'side-menu.new-case.create' | translate}}</button>\n        </div>\n    </mat-step>\n</mat-vertical-stepper>\n<div *ngIf=\"(notInitialized$ | async)\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n    <mat-spinner class=\"spinner-margin\"></mat-spinner>\n</div>\n",
+                template: "<div #toolbar class=\"custom-mat-toolbar\" fxLayout=\"column\" fxLayoutAlign=\"center none\">\n    {{titleShortening()}}\n</div>\n<mat-vertical-stepper *ngIf=\"hasMultipleNets$ | async\" linear #stepper1>\n    <mat-step [stepControl]=\"processFormControl\" errorMessage=\"{{'side-menu.new-case.errFirst' | translate}}\">\n        <ng-template matStepLabel>{{'side-menu.new-case.choose' | translate}}</ng-template>\n        <mat-form-field>\n            <input type=\"text\" matInput [formControl]=\"processFormControl\" [matAutocomplete]=\"auto\" required\n                   (keyup.enter)=\"nextStep()\" (change)=\"checkVersion(processFormControl.value)\">\n            <span class=\"version-span\" *ngIf=\"isVersionVisible\" matSuffix>{{netVersion}}</span>\n            <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayFn\"\n                              (optionSelected)=\"showVersion($event.option)\">\n                <mat-option *ngFor=\"let option of filteredOptions$ | async\" [value]=\"option\">\n                    {{option.viewValue}}\n                    <span class=\"version-span\" *ngIf=\"isVersionVisible\">{{option.version}}</span>\n                </mat-option>\n            </mat-autocomplete>\n        </mat-form-field>\n        <div>\n            <button *ngIf=\"isCaseTitleEnabled()\"  mat-button (click)=\"toNextStep(processFormControl.value)\">{{'side-menu.new-case.next' | translate}}</button>\n            <button *ngIf=\"!isCaseTitleEnabled()\" mat-button (click)=\"createNewCase()\">{{'side-menu.new-case.create' | translate}}</button>\n        </div>\n    </mat-step>\n    <mat-step *ngIf=\"isCaseTitleEnabled()\" [stepControl]=\"titleFormControl\" errorMessage=\"{{'side-menu.new-case.errSecond' | translate}}\">\n        <ng-template matStepLabel>{{'side-menu.new-case.caseTitle' | translate}}</ng-template>\n        <mat-form-field>\n            <input matInput placeholder=\"Title\" autocomplete=\"off\" [formControl]=\"titleFormControl\" [required]=\"isCaseTitleRequired()\" (keyup.enter)=\"nextStep()\">\n        </mat-form-field>\n        <div>\n            <button mat-button (click)=\"stepper1.reset(); checkVersion(processFormControl.value)\">{{'side-menu.new-case.reset' | translate}}</button>\n            <button mat-button (click)=\"createNewCase()\">{{'side-menu.new-case.create' | translate}}</button>\n        </div>\n    </mat-step>\n</mat-vertical-stepper>\n<mat-vertical-stepper *ngIf=\"(hasMultipleNets$ | async) === false\" linear #stepper2>\n    <mat-step [stepControl]=\"titleFormControl\" errorMessage=\"{{'side-menu.new-case.errSecond' | translate}}\">\n        <ng-template matStepLabel>{{'side-menu.new-case.caseTitle' | translate}}</ng-template>\n        <mat-form-field>\n            <input matInput placeholder=\"Title\" autocomplete=\"off\" [formControl]=\"titleFormControl\" [required]=\"isCaseTitleRequired()\" (keyup.enter)=\"nextStep()\">\n        </mat-form-field>\n        <div>\n            <button mat-button (click)=\"stepper2.reset()\">{{'side-menu.new-case.reset' | translate}}</button>\n            <button mat-button (click)=\"createNewCase()\">{{'side-menu.new-case.create' | translate}}</button>\n        </div>\n    </mat-step>\n</mat-vertical-stepper>\n<div *ngIf=\"(notInitialized$ | async)\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n    <mat-spinner class=\"spinner-margin\"></mat-spinner>\n</div>\n",
                 providers: [{
                         provide: STEPPER_GLOBAL_OPTIONS,
                         useValue: ɵ0$d