@tangential/admin-console/fesm2020/tangential-admin-console.mjs.map

A basic administration console

{"version":3,"file":"tangential-admin-console.mjs","sources":["../../../../projects/tangential/admin-console/src/lib/pages/_parent/admin-console-parent.page.ts","../../../../projects/tangential/admin-console/src/lib/pages/permission-manager/permission-manager.page.ts","../../../../projects/tangential/admin-console/src/lib/pages/permission-manager/permission-manager.page.html","../../../../projects/tangential/admin-console/src/lib/pages/roles/role-manager.page.ts","../../../../projects/tangential/admin-console/src/lib/pages/roles/role-manager.page.html","../../../../projects/tangential/admin-console/src/lib/pages/users/user-manager.page.ts","../../../../projects/tangential/admin-console/src/lib/pages/users/user-manager.page.html","../../../../projects/tangential/admin-console/src/lib/pages/plugins/plugins.page.ts","../../../../projects/tangential/admin-console/src/lib/pages/plugins/plugins.page.html","../../../../projects/tangential/admin-console/src/lib/admin-console.routing.module.ts","../../../../projects/tangential/admin-console/src/lib/components/permission/permission.component.ts","../../../../projects/tangential/admin-console/src/lib/components/permission/permission.component.html","../../../../projects/tangential/admin-console/src/lib/pages/roles/role.component.ts","../../../../projects/tangential/admin-console/src/lib/pages/roles/role.component.html","../../../../projects/tangential/admin-console/src/lib/pages/users/role-avatar.component.ts","../../../../projects/tangential/admin-console/src/lib/pages/users/user-permission-editor.component.ts","../../../../projects/tangential/admin-console/src/lib/pages/users/user.component.ts","../../../../projects/tangential/admin-console/src/lib/pages/users/user.component.html","../../../../projects/tangential/admin-console/src/lib/pages/users/user.demo.ts","../../../../projects/tangential/admin-console/src/lib/admin-console.module.ts","../../../../projects/tangential/admin-console/src/public-api.ts","../../../../projects/tangential/admin-console/src/tangential-admin-console.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ViewEncapsulation\n} from '@angular/core'\nimport {\n  AdminService,\n  Auth\n} from '@tangential/authorization-service'\nimport {MessageBus} from '@tangential/core'\nimport {Observable} from 'rxjs'\nimport {tap} from 'rxjs/operators'\n\n@Component({\n  selector:        'tanj-admin-console-parent-page',\n  template:        '<router-outlet></router-outlet>',\n  encapsulation:   ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.Default\n})\nexport class AdminConsoleParentPage {\n\n  auth: Auth | undefined\n  auth$: Observable<Auth>\n\n  constructor(private bus: MessageBus,\n              private adminService: AdminService,\n              private changeDetectorRef: ChangeDetectorRef) {\n    this.auth$ = this.adminService.auth$().pipe(tap((v) => {\n      this.auth = v\n      this.changeDetectorRef.markForCheck()\n    }))\n  }\n\n}\n\n","import {LiveAnnouncer} from '@angular/cdk/a11y'\nimport {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, ViewChild, ViewEncapsulation} from '@angular/core';\nimport {AdminService, AuthPermission} from '@tangential/authorization-service';\nimport {NameGenerator} from '@tangential/core';\nimport {MatSort, Sort} from '@angular/material/sort';\nimport {SelectionModel} from '@angular/cdk/collections';\nimport {MatTableDataSource} from '@angular/material/table';\nimport {AdminConsoleParentPage} from '../_parent/admin-console-parent.page'\n\n@Component({\n  selector:        'tanj-permission-manager',\n  templateUrl:     './permission-manager.page.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation:   ViewEncapsulation.None\n})\nexport class PermissionManagerPage implements OnInit {\n  displayedColumns: string[] = ['select', '$key', 'description', 'createdMils', 'editedMils'];\n  dataSource = new MatTableDataSource<AuthPermission>();\n  selection = new SelectionModel<AuthPermission>(true, []);\n\n  rows: AuthPermission[] = [];\n  selected: any[] = [];\n\n  constructor(private adminService: AdminService,\n              private parent: AdminConsoleParentPage,\n              private _liveAnnouncer: LiveAnnouncer,\n              private changeDetectorRef: ChangeDetectorRef) {\n  }\n\n  @ViewChild(MatSort) sort: MatSort;\n\n  ngOnInit() {\n    this.parent.auth$.subscribe({\n      next: (v) => {\n        this.rows = v.settings.permissions\n        this.dataSource = new MatTableDataSource<AuthPermission>(v.settings.permissions);\n        this.dataSource.sort = this.sort;\n        this.changeDetectorRef.markForCheck()\n      }\n    })\n  }\n\n  get nextItemIndex(): number {\n    let idx = 1\n    if (this.rows && this.rows.length) {\n      idx = (this.rows[this.rows.length - 1].orderIndex + 1)\n    }\n    return idx\n  }\n\n  onAddItemAction() {\n    const permission = AuthPermission.from({\n      $key:       NameGenerator.generate(),\n      orderIndex: this.nextItemIndex\n    })\n    this.adminService.addPermission(permission).catch((reason) => {\n      console.error('PermissionManagerPage', 'error adding permission', reason)\n      throw new Error(reason)\n    })\n  }\n\n  onRemove(key: string) {\n    this.adminService.removePermission(key).catch((reason) => {\n      console.error('PermissionManagerPage', 'error removing permission', reason)\n      throw new Error(reason)\n    })\n  }\n\n  onRemoveSelectedAction(keys: string[]) {\n    keys.forEach((key) => {\n      this.adminService.removePermission(key).catch((reason) => {\n        console.error('PermissionManagerPage', 'error removing permission', reason)\n        throw new Error(reason)\n      })\n    })\n  }\n\n\n  onItemChange(permission: AuthPermission) {\n    this.adminService.updatePermission(permission).catch((reason) => {\n      console.error('PermissionManagerPage', 'error updating permission', reason)\n      throw new Error(reason)\n    })\n\n  }\n\n  /**\n   * Borrowed directly from Angular Material examples: https://material.angular.io/components/table/overview\n   */\n  /** Whether the number of selected elements matches the total number of rows. */\n  isAllSelected() {\n    const numSelected = this.selection.selected.length;\n    const numRows = this.dataSource.data.length;\n    return numSelected === numRows;\n  }\n\n  /** Selects all rows if they are not all selected; otherwise clear selection. */\n  toggleAllRows() {\n    if (this.isAllSelected()) {\n      this.selection.clear();\n      return;\n    }\n    this.selection.select(...this.dataSource.data);\n  }\n\n  /** The label for the checkbox on the passed row */\n  checkboxLabel(row?: AuthPermission): string {\n    if (!row) {\n      return `${this.isAllSelected() ? 'deselect' : 'select'} all`;\n    }\n    return `${this.selection.isSelected(row) ? 'deselect' : 'select'} ${row.description}`;\n  }\n\n  /** Announce the change in sort state for assistive technology. */\n  announceSortChange(sortState: Sort) {\n    // This example uses English messages. If your application supports\n    // multiple language, you would internationalize these strings.\n    // Furthermore, you can customize the message to add additional\n    // details about the values being sorted.\n    if (sortState.direction) {\n      this._liveAnnouncer.announce(`Sorted ${sortState.direction}ending`);\n    } else {\n      this._liveAnnouncer.announce('Sorting cleared');\n    }\n  }\n\n}\n","<tanj-page-body>\n  <table mat-table matSort (matSortChange)=\"announceSortChange($event)\"  [dataSource]=\"dataSource\" class=\"mat-elevation-z8 tng-user-mgr-table\">\n\n    <!-- Checkbox Column -->\n    <ng-container matColumnDef=\"select\">\n      <th mat-header-cell *matHeaderCellDef>\n        <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\n                      [checked]=\"selection.hasValue() && isAllSelected()\"\n                      [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n                      [aria-label]=\"checkboxLabel()\">\n        </mat-checkbox>\n      </th>\n      <td mat-cell *matCellDef=\"let row\" >\n        <mat-checkbox (click)=\"$event.stopPropagation()\"\n                      (change)=\"$event ? selection.toggle(row) : null\"\n                      [checked]=\"selection.isSelected(row)\"\n                      [aria-label]=\"checkboxLabel(row)\">\n        </mat-checkbox>\n      </td>\n    </ng-container>\n\n    <!-- UID Column -->\n    <ng-container matColumnDef=\"$key\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription=\"Sort by Permission ID\"> Permission ID </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element.$key}} </td>\n    </ng-container>\n\n    <!-- User name Column -->\n    <ng-container matColumnDef=\"description\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription=\"Sort by Description\">  Description </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element.description}} </td>\n    </ng-container>\n\n    <!-- User Email Column -->\n    <ng-container matColumnDef=\"createdMils\" >\n      <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription=\"Sort by Created Date\"> Created </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element.createdMils  | date:'yyyy-MM~dd, HH:mm:ss'}} </td>\n    </ng-container>\n\n    <!-- Last Sign in Column -->\n    <ng-container matColumnDef=\"editedMils\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription=\"Sort by Last Modified\"> Last Modified </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element.editedMils | date:'yyyy-MM~dd, HH:mm:ss' }} </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" (click)=\"selection.toggle(row)\"></tr>\n  </table>\n\n</tanj-page-body>\n","import {LiveAnnouncer} from '@angular/cdk/a11y'\nimport {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, ViewChild, ViewEncapsulation} from '@angular/core'\nimport {AuthPermission, AuthRole, AdminService} from '@tangential/authorization-service'\nimport {NameGenerator} from '@tangential/core'\n\nimport {MatSort, Sort} from '@angular/material/sort';\nimport {SelectionModel} from '@angular/cdk/collections';\nimport {MatTableDataSource} from '@angular/material/table';\nimport {AdminConsoleParentPage} from '../_parent/admin-console-parent.page'\n\n\n@Component({\n  selector:        'tanj-role-manager-page',\n  templateUrl:     './role-manager.page.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation:   ViewEncapsulation.None\n})\nexport class RoleManagerPage implements OnInit {\n  displayedColumns: string[] = ['select', '$key', 'description', 'createdMils', 'editedMils'];\n  dataSource = new MatTableDataSource<AuthRole>();\n  selection = new SelectionModel<AuthRole>(true, []);\n\n  rows: AuthRole[] = [];\n  selected: any[] = [];\n\n\n  constructor(private parent: AdminConsoleParentPage,\n              private adminService:AdminService,\n              private _liveAnnouncer: LiveAnnouncer,\n              private changeDetectorRef: ChangeDetectorRef) {\n  }\n\n  @ViewChild(MatSort) sort: MatSort;\n\n  ngOnInit() {\n    this.parent.auth$.subscribe({\n      next: (v) => {\n        this.rows = v.settings.roles\n        this.dataSource = new MatTableDataSource<AuthRole>(v.settings.roles);\n        this.dataSource.sort = this.sort;\n        this.changeDetectorRef.markForCheck()\n      }\n    })\n  }\n\n  get nextItemIndex(): number {\n    let idx = 1\n    if (this.rows && this.rows.length) {\n      idx = (this.rows[this.rows.length - 1].orderIndex + 1)\n    }\n    return idx\n  }\n\n  grantPermission(role: AuthRole, permission: AuthPermission) {\n    this.adminService.grantPermissionOnRole(role.$key, permission.$key).catch((reason) => {\n      console.error('RoleManagerComponent', 'could not grant permission', reason)\n    })\n  }\n\n  revokePermission(role: AuthRole, permission: AuthPermission) {\n    this.adminService.revokePermissionOnRole(role.$key, permission.$key).catch((reason) => {\n      console.error('RoleManagerComponent', 'could not revoke permission', reason)\n    })\n  }\n\n  onAddItemAction() {\n    const role = AuthRole.from({\n      $key:       NameGenerator.generate(),\n      orderIndex: this.nextItemIndex\n    })\n    this.adminService.addRole(role).catch((reason) => {\n      console.error('RoleManagerComponent', 'error adding role', reason)\n      throw new Error(reason)\n    })\n  }\n\n  onRemove(key: string) {\n    this.adminService.removeRole(key).catch((reason) => {\n      console.error('RoleManagerComponent', 'error removing role', reason)\n      throw new Error(reason)\n    })\n  }\n\n  onRemoveSelectedAction(keys: string[]) {\n    keys.forEach((key) => {\n      this.adminService.removeRole(key).catch((reason) => {\n        console.error('RoleManagerComponent', 'error removing role', reason)\n        throw new Error(reason)\n      })\n    })\n  }\n\n  onItemChange(role: AuthRole) {\n    this.adminService.updateRole(role).catch((reason) => {\n      console.log('RoleManagerComponent', 'error updating role', reason)\n      throw new Error(reason)\n    })\n\n  }\n\n  /**\n   * Borrowed directly from Angular Material examples: https://material.angular.io/components/table/overview\n   */\n  /** Whether the number of selected elements matches the total number of rows. */\n  isAllSelected() {\n    const numSelected = this.selection.selected.length;\n    const numRows = this.dataSource.data.length;\n    return numSelected === numRows;\n  }\n\n  /** Selects all rows if they are not all selected; otherwise clear selection. */\n  toggleAllRows() {\n    if (this.isAllSelected()) {\n      this.selection.clear();\n      return;\n    }\n    this.selection.select(...this.dataSource.data);\n  }\n\n  /** The label for the checkbox on the passed row */\n  checkboxLabel(row?: AuthRole): string {\n    if (!row) {\n      return `${this.isAllSelected() ? 'deselect' : 'select'} all`;\n    }\n    return `${this.selection.isSelected(row) ? 'deselect' : 'select'} ${row.description}`;\n  }\n\n  /** Announce the change in sort state for assistive technology. */\n  announceSortChange(sortState: Sort) {\n    // This example uses English messages. If your application supports\n    // multiple language, you would internationalize these strings.\n    // Furthermore, you can customize the message to add additional\n    // details about the values being sorted.\n    if (sortState.direction) {\n      this._liveAnnouncer.announce(`Sorted ${sortState.direction}ending`);\n    } else {\n      this._liveAnnouncer.announce('Sorting cleared');\n    }\n  }\n\n}\n","<tanj-page-body>\n  <table mat-table matSort (matSortChange)=\"announceSortChange($event)\"  [dataSource]=\"dataSource\" class=\"mat-elevation-z8 tng-user-mgr-table\">\n\n    <!-- Checkbox Column -->\n    <ng-container matColumnDef=\"select\">\n      <th mat-header-cell *matHeaderCellDef>\n        <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\n                      [checked]=\"selection.hasValue() && isAllSelected()\"\n                      [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n                      [aria-label]=\"checkboxLabel()\">\n        </mat-checkbox>\n      </th>\n      <td mat-cell *matCellDef=\"let row\" >\n        <mat-checkbox (click)=\"$event.stopPropagation()\"\n                      (change)=\"$event ? selection.toggle(row) : null\"\n                      [checked]=\"selection.isSelected(row)\"\n                      [aria-label]=\"checkboxLabel(row)\">\n        </mat-checkbox>\n      </td>\n    </ng-container>\n\n    <!-- UID Column -->\n    <ng-container matColumnDef=\"$key\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription=\"Sort by Permission ID\"> Permission ID </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element.$key}} </td>\n    </ng-container>\n\n    <!-- User name Column -->\n    <ng-container matColumnDef=\"description\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription=\"Sort by Description\">  Description </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element.description}} </td>\n    </ng-container>\n\n    <!-- User Email Column -->\n    <ng-container matColumnDef=\"createdMils\" >\n      <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription=\"Sort by Created Date\"> Created </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element.createdMils  | date:'yyyy-MM~dd, HH:mm:ss'}} </td>\n    </ng-container>\n\n    <!-- Last Sign in Column -->\n    <ng-container matColumnDef=\"editedMils\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription=\"Sort by Last Modified\"> Last Modified </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element.editedMils | date:'yyyy-MM~dd, HH:mm:ss' }} </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" (click)=\"selection.toggle(row)\"></tr>\n  </table>\n\n</tanj-page-body>\n","import {LiveAnnouncer} from '@angular/cdk/a11y'\nimport {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, ViewChild, ViewEncapsulation} from '@angular/core'\nimport {AdminService, AuthPermission, AuthRole, AuthUser, UserService} from '@tangential/authorization-service'\nimport {generatePushID} from '@tangential/core'\nimport {MatSort, Sort} from '@angular/material/sort';\nimport {SelectionModel} from '@angular/cdk/collections';\nimport {MatTableDataSource} from '@angular/material/table';\nimport {AdminConsoleParentPage} from '../_parent/admin-console-parent.page'\n\n\n@Component({\n  selector:        'tanj-user-manager-page',\n  templateUrl:     './user-manager.page.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation:   ViewEncapsulation.None\n})\nexport class UserManagerPage implements OnInit {\n  displayedColumns: string[] = ['select', '$key', 'displayName', 'email', 'lastSignInMils'];\n  dataSource = new MatTableDataSource<AuthUser>();\n  selection = new SelectionModel<AuthUser>(true, []);\n\n  rows: AuthUser[] = []\n  selected = []\n  columns = [\n    {prop: '$key', name: 'Key', flexGrow: 1},\n    {prop: 'displayName', name: 'Display Name', flexGrow: 2},\n    {prop: 'email', name: 'Created', flexGrow: 2},\n    {prop: 'lastSignInMils', name: 'Last Sign In', flexGrow: 1}\n  ]\n\n\n  constructor(private adminService: AdminService,\n              private parent: AdminConsoleParentPage,\n              private _liveAnnouncer: LiveAnnouncer,\n              private changeDetectorRef: ChangeDetectorRef) {\n  }\n\n  @ViewChild(MatSort) sort: MatSort;\n\n  ngOnInit() {\n    this.parent.auth$.subscribe({\n      next: (v) => {\n        this.rows = v.users\n        this.dataSource = new MatTableDataSource<AuthUser>(v.users);\n        this.dataSource.sort = this.sort;\n        this.changeDetectorRef.markForCheck()\n      }\n    })\n  }\n\n\n  grantPermission(user: AuthUser, permission: AuthPermission) {\n    this.adminService.grantPermissionOnUser(user, permission).catch((reason) => {\n      console.error('UserManagerComponent', 'could not grant permission', reason)\n    })\n  }\n\n  revokePermission(user: AuthUser, permission: AuthPermission) {\n    console.log('UserManagerComponent', 'revokePermission')\n    this.adminService.revokePermissionOnUser(user, permission).catch((reason) => {\n      console.error('UserManagerComponent', 'could not revoke permission', reason)\n    })\n  }\n\n  grantRole(user: AuthUser, role: AuthRole) {\n    this.adminService.grantRoleOnUser(user, role).catch((reason) => {\n      console.error('UserManagerComponent', 'could not grant role', reason)\n    })\n  }\n\n  revokeRole(user: AuthUser, role: AuthRole) {\n    this.adminService.revokeRoleOnUser(user.$key, role.$key).catch((reason) => {\n      console.error('UserManagerComponent', 'could not revoke role', reason)\n    })\n  }\n\n\n  onAddItemAction() {\n    const user = new AuthUser(generatePushID())\n    user.displayName = 'New User '\n    this.adminService.addUser(user).catch((reason) => {\n      console.error('UserManagerComponent', 'error adding user', reason)\n      throw new Error(reason)\n    })\n  }\n\n  onRemove(key: string) {\n    this.adminService.removeUser(key).catch((reason) => {\n      console.error('UserManagerComponent', 'error removing user', reason)\n      throw new Error(reason)\n    })\n  }\n\n  onRemoveSelectedAction(keys: string[]) {\n    keys.forEach((key) => {\n      this.adminService.removeUser(key).catch((reason) => {\n        console.error('UserManagerComponent', 'error removing user', reason)\n        throw new Error(reason)\n      })\n    })\n  }\n\n\n  onItemChange(user: AuthUser) {\n    this.adminService.updateUser(user).catch((reason) => {\n      console.error('UserManagerComponent', 'error updating user', reason)\n      throw new Error(reason)\n    })\n\n  }\n\n  /**\n   * Borrowed directly from Angular Material examples: https://material.angular.io/components/table/overview\n   */\n  /** Whether the number of selected elements matches the total number of rows. */\n  isAllSelected() {\n    const numSelected = this.selection.selected.length;\n    const numRows = this.dataSource.data.length;\n    return numSelected === numRows;\n  }\n\n  /** Selects all rows if they are not all selected; otherwise clear selection. */\n  toggleAllRows() {\n    if (this.isAllSelected()) {\n      this.selection.clear();\n      return;\n    }\n    this.selection.select(...this.dataSource.data);\n  }\n\n  /** The label for the checkbox on the passed row */\n  checkboxLabel(row?: AuthUser): string {\n    if (!row) {\n      return `${this.isAllSelected() ? 'deselect' : 'select'} all`;\n    }\n    return `${this.selection.isSelected(row) ? 'deselect' : 'select'} ${row.displayName}`;\n  }\n\n  /** Announce the change in sort state for assistive technology. */\n  announceSortChange(sortState: Sort) {\n    // This example uses English messages. If your application supports\n    // multiple language, you would internationalize these strings.\n    // Furthermore, you can customize the message to add additional\n    // details about the values being sorted.\n    if (sortState.direction) {\n      this._liveAnnouncer.announce(`Sorted ${sortState.direction}ending`);\n    } else {\n      this._liveAnnouncer.announce('Sorting cleared');\n    }\n  }\n\n}\n","<tanj-page-body>\n  <table mat-table matSort (matSortChange)=\"announceSortChange($event)\"  [dataSource]=\"dataSource\" class=\"mat-elevation-z8 tng-user-mgr-table\">\n\n    <!-- Checkbox Column -->\n    <ng-container matColumnDef=\"select\">\n      <th mat-header-cell *matHeaderCellDef>\n        <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\n                      [checked]=\"selection.hasValue() && isAllSelected()\"\n                      [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n                      [aria-label]=\"checkboxLabel()\">\n        </mat-checkbox>\n      </th>\n      <td mat-cell *matCellDef=\"let row\" >\n        <mat-checkbox (click)=\"$event.stopPropagation()\"\n                      (change)=\"$event ? selection.toggle(row) : null\"\n                      [checked]=\"selection.isSelected(row)\"\n                      [aria-label]=\"checkboxLabel(row)\">\n        </mat-checkbox>\n      </td>\n    </ng-container>\n\n    <!-- UID Column -->\n    <ng-container matColumnDef=\"$key\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription=\"Sort by UID\"> User ID </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element.$key}} </td>\n    </ng-container>\n\n    <!-- User name Column -->\n    <ng-container matColumnDef=\"displayName\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription=\"Sort by name\">  User Name </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element.displayName}} </td>\n    </ng-container>\n\n    <!-- User Email Column -->\n    <ng-container matColumnDef=\"email\" >\n      <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription=\"Sort by email\"> Email </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element.email}} </td>\n    </ng-container>\n\n    <!-- Last Sign in Column -->\n    <ng-container matColumnDef=\"lastSignInMils\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription=\"Sort by Last Sign In\"> Last Sign In </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element.lastSignInMils | date:'yyyy-MM~dd, HH:mm:ss' }} </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" (click)=\"selection.toggle(row)\"></tr>\n  </table>\n</tanj-page-body>\n","import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  OnDestroy,\n  OnInit,\n  ViewEncapsulation\n} from '@angular/core'\nimport {Visitor} from '@tangential/authorization-service'\nimport {\n  DefaultPageAnalytics,\n  MessageBus,\n  NgUtil,\n  Page,\n  RouteInfo\n} from '@tangential/core'\nimport {\n  ActivatedRoute,\n  Router\n} from '@angular/router'\nimport {PluginManager} from '@tangential/plugin'\nimport {AdminConsoleParentPage} from '../_parent/admin-console-parent.page'\n\n@Component({\n  selector       : 'tanj-plugins-page',\n  templateUrl    : './plugins.page.html',\n  encapsulation  : ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.Default\n})\nexport class PluginsPage extends Page implements OnInit {\n\n  override routeInfo: RouteInfo = {\n    page     : {\n      title: 'Admin Console'\n    },\n    analytics: DefaultPageAnalytics(),\n    showAds  : false\n  }\n  visitor: Visitor = null\n\n  constructor(bus: MessageBus,\n              private router: Router,\n              private route: ActivatedRoute,\n              private parent: AdminConsoleParentPage,\n              public pluginManager:PluginManager,\n              private changeDetectorRef: ChangeDetectorRef) {\n    super(bus)\n\n  }\n\n  ngOnInit() {\n    this.pluginManager.scan()\n  }\n\n\n}\n\n\n\n","<div class=\"tanj-header-shim\"></div>\n<div flex layout=\"column\" layout-align=\"start\">\n  <div *ngFor=\"let entry of pluginManager.pluginPaths\" flex layout=\"row\" layout-align=\"start\" class=\"tanj-plugin-entry\">\n    <div class=\"tanj-entry-name\">{{entry.name}}</div>\n    <a class=\"tanj-entry-path\" [routerLink]=\"['/', entry.path, 'plugin']\">{{entry.path}}</a>\n  </div>\n</div>\n","import {NgModule} from '@angular/core'\nimport {\n  Route,\n  RouterModule\n} from '@angular/router'\nimport {HasRoleGuard} from '@tangential/authorization-service'\nimport {VisitorResolver} from '@tangential/authorization-service'\nimport {AdminConsoleParentPage} from './pages/_parent/admin-console-parent.page'\n//noinspection ES6PreferShortImport\nimport {PermissionManagerPage} from './pages/permission-manager/permission-manager.page'\nimport {RoleManagerPage} from './pages/roles/role-manager.page'\nimport {UserManagerPage} from './pages/users/user-manager.page'\nimport {PluginsPage} from './pages/plugins/plugins.page'\n\n\nexport const AdminRoutes = {\n  parent:   {\n    path:        '',\n    component:   AdminConsoleParentPage,\n    resolve:     {visitor: VisitorResolver},\n    canActivate: [HasRoleGuard],\n    data:        {roles: ['Administrator']},\n    navTargets:  {\n      absSelf: ['/', 'admin'],\n      up() {\n        return ['/']\n      },\n    }\n  },\n  children: {\n    plugins: {\n      path:       'plugins',\n      component:  PluginsPage,\n      navTargets: {\n        absSelf: ['/', 'admin', 'plugins']\n      },\n    },\n    permissions: {\n      path:       'permissions',\n      component:  PermissionManagerPage,\n      navTargets: {\n        absSelf: ['/', 'admin', 'permissions']\n      },\n    },\n    roles:       {\n      path:       'roles',\n      component:  RoleManagerPage,\n      navTargets: {\n        absSelf: ['/', 'admin', 'roles']\n      },\n    },\n    users:       {\n      path:       'users',\n      component:  UserManagerPage,\n      navTargets: {\n        absSelf: ['/', 'admin', 'users']\n      },\n    }\n  }\n}\n\nconst routes: Route[] = [\n  {\n    path:        AdminRoutes.parent.path,\n    component:   AdminRoutes.parent.component,\n    canActivate: AdminRoutes.parent.canActivate,\n    data:        AdminRoutes.parent.data,\n    resolve:     AdminRoutes.parent.resolve,\n    children:    [\n      {\n        path:     '',\n        children: [\n          AdminRoutes.children.plugins,\n          AdminRoutes.children.permissions,\n          AdminRoutes.children.roles,\n          AdminRoutes.children.users,\n        ]\n      },\n\n    ]\n  }\n];\n\n@NgModule({\n  imports:      [\n    RouterModule.forChild(routes)\n  ],\n  exports:      [\n    RouterModule\n  ], providers: [\n    VisitorResolver,\n  ]\n})\nexport class AdminConsoleRoutingModule {\n}\n\n\n\n","import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChange, ViewEncapsulation} from '@angular/core';\nimport {AuthPermission} from '@tangential/authorization-service';\nimport {Observable} from 'rxjs';\nimport {debounceTime, distinctUntilChanged, filter, map} from 'rxjs/operators'\n\n\n@Component({\n  selector:        'tanj-permission',\n  templateUrl:     './permission.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation:   ViewEncapsulation.None\n})\nexport class PermissionComponent implements OnChanges {\n\n  @Input() permission: AuthPermission | undefined\n\n  @Output() change: Observable<{ current: AuthPermission, previous: AuthPermission }>\n  @Output() remove: EventEmitter<AuthPermission> = new EventEmitter<AuthPermission>(false)\n\n  private _focusDebouncer: EventEmitter<boolean> = new EventEmitter<boolean>(false);\n\n  @Output() focus: Observable<Event>\n  @Output() blur: Observable<Event>\n\n\n  submitted = false;\n  private _changed: boolean = false\n  private _previous: AuthPermission | undefined\n\n\n  constructor() {\n    let distinct: Observable<boolean> = this._focusDebouncer.asObservable()\n    distinct = distinct.pipe( debounceTime(10),  distinctUntilChanged())\n\n    this.focus = distinct.pipe(\n      filter((v) => v === true),\n      map(() => new Event('focus')))\n\n    this.change = distinct.pipe(\n      filter((focused) => focused === false && this._changed),\n      map(() => {\n        const change = {\n          previous: this._previous,\n          current: this.permission\n        }\n        if(!this.permission){\n          throw \"Missing Permission\"\n        }\n        this._previous = AuthPermission.from(this.permission)\n        this._changed = false\n        return change\n      }))\n\n    this.blur = distinct.pipe(\n      filter((v) => v === false),\n      map(() => new Event('blur')))\n  }\n\n  ngOnChanges(changes: { permission: SimpleChange }) {\n    if (changes.permission) {\n      this._previous = AuthPermission.from(this.permission)\n      this._changed = false\n    }\n  }\n\n  fireRemove() {\n    this.remove.emit(this.permission)\n  }\n\n  onChange(event: Event) {\n    event.stopPropagation()\n    this._changed = true\n  }\n\n  onBlur(event: Event) {\n    event.stopPropagation()\n    this._focusDebouncer.emit(false)\n  }\n\n  onFocus(event: Event) {\n    event.stopPropagation()\n    this._focusDebouncer.emit(true)\n\n  }\n\n  onSubmit() {\n    this.submitted = true;\n  }\n\n}\n","<div flex layout=\"column\" layout-align=\"start\">\n\n  <div class=\"tanj-permission-form-wrapper\" flex layout=\"column\" layout-align=\"start\">\n\n\n    <form *ngIf=\"permission != null\"\n          (ngSubmit)=\"onSubmit($event)\"\n          #permissionForm=\"ngForm\"\n          flex\n          layout=\"row\"\n          layout-align=\"space-between\">\n\n      <div class=\"tanj-permission-inputs-wrapper\" layout=\"row\" flex=\"80\" layout-align=\"space-between start\">\n        <mat-form-field flex=\"40\">\n          <input matInput [(ngModel)]=\"permission.$key\" name=\"name\" #fName=\"ngModel\"\n                 class=\"tanj-input\"\n                 dividerColor=\"accent\"\n                 [type]=\"'text'\"\n                 required minlength=\"2\"\n                 value=\"{{permission.$key}}\"\n                 placeholder=\"Name\"\n                 (change)=\"onChange($event)\"\n                 (focus)=\"onFocus($event)\"\n                 (blur)=\"onBlur($event)\"\n          />\n        </mat-form-field>\n        <mat-form-field flex=\"60\">\n          <input matInput [(ngModel)]=\"permission.description\" name=\"description\" #fDescription=\"ngModel\"\n                 class=\"tanj-description tanj-input\"\n                 dividerColor=\"accent\"\n\n                 [type]=\"'text'\"\n                 value=\"{{permission.description}}\"\n                 (change)=\"onChange($event)\"\n                 (focus)=\"onFocus($event)\"\n                 (blur)=\"onBlur($event)\"\n                 placeholder=\"Description\"/>\n        </mat-form-field>\n      </div>\n      <div class=\"tanj-delete-button\" flex layout=\"row\" layout-align=\"end center\">\n        <button mat-mini-fab\n                type=\"button\"\n                aria-label=\"Delete Permission\"\n                (focus)=\"onFocus($event)\"\n                (blur)=\"onBlur($event)\"\n                (click)=\"fireRemove()\"\n                [disabled]=\"false\">\n          <mat-icon class=\"mat-24\">delete</mat-icon>\n        </button>\n      </div>\n    </form>\n  </div>\n\n\n</div>\n","import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChange, ViewEncapsulation} from '@angular/core'\nimport {AuthPermission, AuthRole} from '@tangential/authorization-service'\nimport {Observable} from 'rxjs'\nimport {debounceTime, distinctUntilChanged, filter, map} from 'rxjs/operators'\n\n\n@Component({\n  selector:        'tanj-role',\n  templateUrl:     './role.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation:   ViewEncapsulation.None\n})\nexport class RoleComponent implements OnChanges {\n\n\n  @Input() role: AuthRole\n  @Input() allPermissions: AuthPermission[]\n  @Input() rolePermissions: AuthPermission[]\n  @Input() collapsed: boolean = true\n\n  @Output() change: Observable<{ current: AuthRole, previous: AuthRole }>\n  @Output() remove: EventEmitter<AuthRole> = new EventEmitter<AuthRole>(false)\n\n  private _focusDebouncer: EventEmitter<boolean> = new EventEmitter<boolean>(false);\n\n  @Output() addRolePermission: EventEmitter<{ role: AuthRole, permission: AuthPermission }>\n    = new EventEmitter<{ role: AuthRole, permission: AuthPermission }>(false)\n  @Output() removeRolePermission: EventEmitter<{ role: AuthRole, permission: AuthPermission }>\n    = new EventEmitter<{ role: AuthRole, permission: AuthPermission }>(false)\n  @Output() focus: Observable<Event>\n  @Output() blur: Observable<Event>\n\n\n  submitted: boolean = false;\n  private _changed: boolean\n  private _previous: AuthRole\n\n\n  constructor() {\n    let distinct: Observable<boolean> = this._focusDebouncer.asObservable()\n    distinct = distinct.pipe(debounceTime(10), distinctUntilChanged())\n\n    this.focus = distinct.pipe(\n      filter((focused) => focused === true),\n      map(() => {\n        return new Event('focus')\n      }))\n\n    this.blur = distinct.pipe(\n      filter((focused) => focused === false),\n      map(() => {\n        return new Event('blur')\n      }))\n\n    this.change = distinct.pipe(\n      filter((focused) => focused === false && this._changed),\n      map(() => {\n        this.collapsed = false\n\n        const change = {\n          previous: this._previous,\n          current:  this.role\n        }\n        this._previous = AuthRole.from(this.role)\n        this._changed = false\n        return change\n      }))\n  }\n\n  ngOnChanges(changes: { role: SimpleChange, permissions: SimpleChange }) {\n    if (changes.role) {\n      this._previous = AuthRole.from(this.role)\n      this._changed = false\n    }\n  }\n\n  fireRemove() {\n    this.remove.emit(this.role)\n  }\n\n  onChange() {\n    this._changed = true\n  }\n\n  onBlur() {\n    this._focusDebouncer.emit(false)\n  }\n\n  onFocus() {\n    this._focusDebouncer.emit(true)\n\n  }\n\n  onSubmit() {\n    this.submitted = true;\n  }\n\n  hasPermission(perm: AuthPermission) {\n    return this.rolePermissions.some(rolePerm => rolePerm.$key === perm.$key)\n  }\n\n  doTogglePermission(permission: AuthPermission) {\n    const rolePermission: { role: AuthRole, permission: AuthPermission } = {\n      permission: permission,\n      role:       this.role\n    }\n    if (this.rolePermissions.some(entry => entry.$key === permission.$key)) {\n      this.removeRolePermission.emit(rolePermission)\n    } else {\n      this.addRolePermission.emit(rolePermission)\n    }\n  }\n}\n","<div class=\"tanj-role-form-wrapper\" flex layout=\"column\" layout-align=\"start\">\n  <form *ngIf=\"role != null\" (ngSubmit)=\"onSubmit($event)\" #theForm=\"ngForm\" flex layout=\"row\"\n        layout-align=\"space-between\">\n\n    <div class=\"tanj-role-inputs-wrapper\" layout=\"row\" flex=\"80\" layout-align=\"space-between start\">\n      <mat-form-field flex=\"40\">\n        <input matInput [(ngModel)]=\"role.$key\" name=\"name\" #fName=\"ngModel\"\n               class=\"tanj-input\"\n               dividerColor=\"accent\"\n               [type]=\"'text'\"\n               required minlength=\"2\"\n               value=\"{{role.$key}}\"\n               placeholder=\"Name\"\n               (change)=\"$event.stopPropagation(); onChange()\"\n               (focus)=\"$event.stopPropagation(); onFocus()\"\n               (blur)=\"$event.stopPropagation(); onBlur()\"\n        /></mat-form-field>\n      <mat-form-field flex=\"60\">\n        <input matInput [(ngModel)]=\"role.description\" name=\"description\" #fDescription=\"ngModel\"\n               class=\"tanj-description tanj-input\"\n               dividerColor=\"accent\"\n               [type]=\"'text'\"\n               value=\"{{role.description}}\"\n               (change)=\"$event.stopPropagation(); onChange()\"\n               (focus)=\"$event.stopPropagation(); onFocus()\"\n               (blur)=\"$event.stopPropagation(); onBlur()\"\n               placeholder=\"Description\"/>\n      </mat-form-field>\n    </div>\n    <div class=\"tanj-delete-button\" flex layout=\"row\" layout-align=\"end center\">\n      <button mat-mini-fab\n              type=\"button\"\n              aria-label=\"Delete Role\"\n              (focus)=\"$event.stopPropagation(); onFocus()\"\n              (blur)=\"$event.stopPropagation(); onBlur()\"\n              (click)=\"fireRemove()\"\n              [disabled]=\"false\">\n        <mat-icon class=\"mat-24\">delete</mat-icon>\n      </button>\n    </div>\n  </form>\n</div>\n\n\n\n","import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChange} from '@angular/core'\nimport {MatButtonToggleChange} from '@angular/material/button-toggle'\nimport {AuthRole} from '@tangential/authorization-service'\n\n\n@Component({\n  selector:        'tanj-role-avatar',\n  template:        `\n                     <div>\n                       <mat-button-toggle [checked]=\"active\" (change)=\"doChange($event)\">{{role.$key}}</mat-button-toggle>\n                     </div>\n                   `,\n  styleUrls:       ['./_user.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class RoleAvatarComponent implements OnChanges {\n\n  @Input() role: AuthRole\n  @Input() active: boolean = false\n\n  @Output() change: EventEmitter<boolean> = new EventEmitter<boolean>(false);\n\n  constructor() {\n  }\n\n  ngOnChanges(changes: { role: SimpleChange, active: SimpleChange }) {\n    console.log('RoleAvatarComponent', 'ngChanges', JSON.stringify(changes))\n  }\n\n  doChange(event: MatButtonToggleChange) {\n    this.active = event.source.checked\n    this.change.emit(this.active)\n  }\n\n\n}\n","import {ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewEncapsulation} from '@angular/core'\nimport {AuthPermission, AuthUser} from '@tangential/authorization-service'\nimport {ObjMap} from '@tangential/core'\n\n\n@Component({\n  selector:        'tanj-user-permission-editor',\n  template:        `\n                     <button mat-raised-button\n                             *ngIf=\"permission\"\n                             color=\"{{getColor()}}\"\n                             (click)=\"doChange($event)\"\n                             [class.tanj-explicitly-granted]=\"isExplicitlyGranted()\"\n                     >{{permission.$key}}\n                     </button>\n                   `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation:   ViewEncapsulation.None\n})\nexport class UserPermissionEditorComponent {\n\n  @Input() user: AuthUser\n  @Input() permission: AuthPermission\n  @Input() userGrantedPermissions: ObjMap<boolean> = {}\n  @Input() userEffectivePermissions: ObjMap<boolean> = {}\n\n  @Output() change: EventEmitter<Event> = new EventEmitter<Event>(false);\n\n  constructor() {\n  }\n\n  doChange(event: Event) {\n    console.log('UserPermissionEditorComponent', 'doChange')\n    this.change.emit(event)\n  }\n\n  getColor(): string {\n    let color = this.isGranted() ? 'primary' : null\n    if (this.isExplicitlyGranted()) {\n      color = 'accent'\n    }\n    return color\n  }\n\n  isGranted(): boolean {\n    return this.userEffectivePermissions[this.permission.$key]\n  }\n\n  isExplicitlyGranted() {\n    return this.userGrantedPermissions[this.permission.$key]\n  }\n}\n","import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, ViewEncapsulation} from '@angular/core'\nimport {AuthPermission, AuthRole, AuthUser} from '@tangential/authorization-service'\nimport {Observable} from 'rxjs'\nimport {debounceTime, distinctUntilChanged, filter, map} from 'rxjs/operators'\n\n@Component({\n  selector:        'tanj-user',\n  templateUrl:     './user.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation:   ViewEncapsulation.None\n})\nexport class UserComponent implements OnChanges {\n\n  @Input() user: AuthUser\n  @Input() userRoles: AuthRole[] = []\n  @Input() userGrantedPermissions: AuthPermission[] = []\n  @Input() userRolePermissions: AuthPermission[] = []\n\n  @Input() showSelector: boolean = true\n  @Input() selected: boolean = false\n  @Input() expanded: boolean = false\n\n  @Output() change: Observable<AuthUser>;\n  @Output() selectionChange: EventEmitter<boolean> = new EventEmitter<boolean>(false)\n  @Output() removeUser: EventEmitter<AuthUser> = new EventEmitter<AuthUser>(false)\n  @Output() addUserRole: EventEmitter<{ user: AuthUser, role: AuthRole }> = new EventEmitter<{ user: AuthUser, role: AuthRole }>(false)\n  @Output() removeUserRole: EventEmitter<{ user: AuthUser, role: AuthRole }> = new EventEmitter<{ user: AuthUser, role: AuthRole }>(false)\n  @Output() addUserPermission: EventEmitter<{ user: AuthUser, permission: AuthPermission }> =\n    new EventEmitter<{ user: AuthUser, permission: AuthPermission }>(false)\n  @Output() removeUserPermission: EventEmitter<{ user: AuthUser, permission: AuthPermission }> =\n    new EventEmitter<{ user: AuthUser, permission: AuthPermission }>(false)\n\n\n  private _focusDebouncer: EventEmitter<boolean> = new EventEmitter<boolean>(false);\n\n  @Output() focus: Observable<Event>\n  @Output() blur: Observable<Event>\n\n  submitted = false;\n  private _changed: boolean\n\n  constructor() {\n    let distinct: Observable<boolean> = this._focusDebouncer.asObservable()\n    distinct = distinct.pipe(debounceTime(10),distinctUntilChanged())\n\n    this.focus = distinct.pipe(\n      filter((focused) => focused === true),\n      map(() => {\n        this.expanded = true\n        return new Event('focus')\n      }))\n\n    this.change = distinct.pipe(\n      filter((focused) => focused === false && this._changed),\n      map(() => this.user))\n\n    this.blur = distinct.pipe(\n      filter((focused) => focused === false),\n      map(() => new Event('blur')))\n  }\n\n  ngOnChanges(change: any) {\n    if (change.user_roles) {\n      // console.log('UserListItemComponent', 'ngOnChanges', this.roles)\n      // debugger\n    }\n  }\n\n  fireRemoveUser() {\n    this.removeUser.emit(this.user)\n  }\n\n  doToggleRole(role: AuthRole, enabled: boolean) {\n    if (enabled) {\n      this.addUserRole.emit({user: this.user, role: role})\n    } else {\n      this.removeUserRole.emit({user: this.user, role: role})\n    }\n  }\n\n  doTogglePermission(permission: AuthPermission) {\n    const event = {user: this.user, permission: permission};\n    if (this.userGrantedPermissions.some((item) => item.$key === permission.$key)) {\n      this.removeUserPermission.emit(event)\n    } else {\n      this.addUserPermission.emit(event)\n    }\n  }\n\n  doToggleSelected() {\n    this.selected = !this.selected\n    this.selectionChange.emit(this.selected)\n  }\n\n\n  onChange() {\n    this._changed = true\n  }\n\n  onBlur() {\n    this._focusDebouncer.emit(false)\n  }\n\n  onFocus() {\n    this._focusDebouncer.emit(true)\n\n  }\n\n  onSubmit() {\n    console.log('UserComponent', 'onSubmit')\n    this.submitted = true;\n  }\n}\n","<div class=\"tanj-user-form-wrapper\" flex layout=\"column\" layout-align=\"start\">\n  <form *ngIf=\"user != null\" (ngSubmit)=\"onSubmit($event)\" #theForm=\"ngForm\" flex layout=\"row\"\n        layout-align=\"space-between\">\n\n    <div class=\"tanj-user-inputs-wrapper\" layout=\"row\" flex=\"80\" layout-align=\"space-between start\">\n      <mat-form-field flex=\"40\">\n        <input matInput [(ngModel)]=\"user.email\" name=\"email\" #fName=\"ngModel\"\n               class=\"tanj-input\"\n               dividerColor=\"accent\"\n               [type]=\"'email'\"\n               required minlength=\"2\"\n               value=\"{{user.email}}\"\n               (change)=\"$event.stopPropagation(); onChange()\"\n               (focus)=\"$event.stopPropagation(); onFocus()\"\n               (blur)=\"$event.stopPropagation(); onBlur()\"\n               placeholder=\"email\"\n        /></mat-form-field>\n      <mat-form-field flex=\"60\">\n        <input matInput [(ngModel)]=\"user.displayName\" name=\"displayName\" #fDescription=\"ngModel\"\n               class=\"tanj-description tanj-input\"\n               dividerColor=\"accent\"\n               [type]=\"'text'\"\n               value=\"{{user.displayName}}\"\n               (change)=\"$event.stopPropagation(); onChange()\"\n               (focus)=\"$event.stopPropagation(); onFocus()\"\n               (blur)=\"$event.stopPropagation(); onBlur()\"\n               placeholder=\"Display Name\"/>\n      </mat-form-field>\n    </div>\n    <div class=\"tanj-delete-button\" flex layout=\"row\" layout-align=\"end center\">\n      <button mat-mini-fab\n              type=\"button\"\n              aria-label=\"Delete User\"\n              (focus)=\"$event.stopPropagation(); onFocus()\"\n              (blur)=\"$event.stopPropagation(); onBlur()\"\n              (click)=\"fireRemoveUser()\"\n              [disabled]=\"false\">\n        <mat-icon class=\"mat-24\">delete</mat-icon>\n      </button>\n    </div>\n  </form>\n</div>\n\n\n\n","import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';\nimport {AuthPermission, AuthRole, AuthUser} from '@tangential/authorization-service';\n\n@Component({\n  selector: 'tanj-user-item-demo',\n  template: `<h1>User Item Demo</h1>\n  <div class='demo-content' layout=\"row\" layout-align=\"center\">\n    <tanj-user\n      flex\n      [user]=\"user\"\n      [userRoles]=\"roles\"\n      [userGrantedPermissions]=\"permissions\"\n      [showSelector]=\"true\"\n      (selectionChange)=\"onSelectionChange($event)\"\n      (removeUser)=\"onRemoveUser($event)\"\n      (addUserRole)=\"onAddUserRole($event)\"\n      (removeUserRole)=\"onRemoveUserRole($event)\"\n      (addUserPermission)=\"onAddUserPermission($event)\"\n      (removeUserPermission)=\"onRemoveUserPermission($event)\"\n    >\n\n    </tanj-user>\n  </div>           `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None\n})\nexport class UserListItemDemo {\n\n\n  user: AuthUser\n\n  roles: AuthRole[] = [\n    AuthRole.from({\n      '$key': 'DemoAdmin',\n      'description': 'Administrator',\n      'orderIndex': 1,\n    }),\n    AuthRole.from({\n      '$key': 'DemoUser',\n      'description': 'DemoUser',\n      'orderIndex': 10\n    }), AuthRole.from({\n      '$key': 'DemoGuest',\n      'description': 'DemoGuest',\n      'orderIndex': 15\n    })]\n\n  permissions: AuthPermission[] = [\n    AuthPermission.from({\n      '$key': 'Add user',\n      'description': 'Create new users manually',\n      'orderIndex': 1\n    }), AuthPermission.from({\n      '$key': 'Remove user',\n      'description': 'Remove a user account',\n      'orderIndex': 10\n    }), AuthPermission.from({\n      '$key': 'Create permission',\n      'description': 'Create a new Permission',\n      'orderIndex': 20\n    }), AuthPermission.from({\n      '$key': 'Leave comment',\n      'description': 'Leave a comment.',\n      'orderIndex': 30\n    }), AuthPermission.from({\n      '$key': 'Remove comment',\n      'description': 'Remove any comment',\n      'orderIndex': 40\n    }), AuthPermission.from({\n      '$key': 'View comments',\n      'description': 'View public comments',\n      'orderIndex': 50\n    }), Au