Add precommit hooks

docs/compodoc/components/AccountSearchComponent.html

@@ -983,33 +983,61 @@ export class AccountSearchComponent implements OnInit {
         </ol>
       </nav>
       <div class="card">
-        <mat-card-title class="card-header">
-          Accounts
-        </mat-card-title>
+        <mat-card-title class="card-header"> Accounts </mat-card-title>
         <div class="card-body">
           <mat-tab-group>
             <mat-tab label="Phone Number">
               <form [formGroup]="phoneSearchForm" (ngSubmit)="onPhoneSearch()">
                 <mat-form-field appearance="outline">
                   <mat-label> Search </mat-label>
-                  <input matInput type="text" placeholder="Search by phone number" formControlName="phoneNumber" [errorStateMatcher]="matcher">
-                  <mat-error *ngIf="phoneSearchSubmitted && phoneSearchFormStub.phoneNumber.errors">Phone Number is required.</mat-error>
+                  <input
+                    matInput
+                    type="text"
+                    placeholder="Search by phone number"
+                    formControlName="phoneNumber"
+                    [errorStateMatcher]="matcher"
+                  />
+                  <mat-error *ngIf="phoneSearchSubmitted && phoneSearchFormStub.phoneNumber.errors"
+                    >Phone Number is required.</mat-error
+                  >
                   <mat-icon matSuffix>phone</mat-icon>
                   <mat-hint>Phone Number</mat-hint>
                 </mat-form-field>
-                <button mat-raised-button color="primary" type="submit" class="btn btn-outline-primary ml-3"> SEARCH </button>
+                <button
+                  mat-raised-button
+                  color="primary"
+                  type="submit"
+                  class="btn btn-outline-primary ml-3"
+                >
+                  SEARCH
+                </button>
               </form>
             </mat-tab>
             <mat-tab label="Account Address">
               <form [formGroup]="addressSearchForm" (ngSubmit)="onAddressSearch()">
                 <mat-form-field appearance="outline">
                   <mat-label> Search </mat-label>
-                  <input matInput type="text" placeholder="Search by account address" formControlName="address" [errorStateMatcher]="matcher">
-                  <mat-error *ngIf="addressSearchSubmitted && addressSearchFormStub.address.errors">Account Address is required.</mat-error>
+                  <input
+                    matInput
+                    type="text"
+                    placeholder="Search by account address"
+                    formControlName="address"
+                    [errorStateMatcher]="matcher"
+                  />
+                  <mat-error *ngIf="addressSearchSubmitted && addressSearchFormStub.address.errors"
+                    >Account Address is required.</mat-error
+                  >
                   <mat-icon matSuffix>view_in_ar</mat-icon>
                   <mat-hint>Account Address</mat-hint>
                 </mat-form-field>
-                <button mat-raised-button color="primary" type="submit" class="btn btn-outline-primary ml-3"> SEARCH </button>
+                <button
+                  mat-raised-button
+                  color="primary"
+                  type="submit"
+                  class="btn btn-outline-primary ml-3"
+                >
+                  SEARCH
+                </button>
               </form>
             </mat-tab>
           </mat-tab-group>
@@ -1057,7 +1085,7 @@ export class AccountSearchComponent implements OnInit {
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><!-- Begin page --><div class="wrapper">  <app-sidebar></app-sidebar>  <!-- ============================================================== -->  <!-- Start Page Content here -->  <!-- ============================================================== -->  <div id="content">    <app-topbar></app-topbar>    <!-- Start Content-->    <div class="container-fluid" appMenuSelection>      <nav aria-label="breadcrumb">        <ol class="breadcrumb">          <li class="breadcrumb-item"><a routerLink="/home">Home</a></li>          <li class="breadcrumb-item"><a routerLink="/accounts">Accounts</a></li>          <li class="breadcrumb-item active" aria-current="page">Search</li>        </ol>      </nav>      <div class="card">        <mat-card-title class="card-header">          Accounts        </mat-card-title>        <div class="card-body">          <mat-tab-group>            <mat-tab label="Phone Number">              <form [formGroup]="phoneSearchForm" (ngSubmit)="onPhoneSearch()">                <mat-form-field appearance="outline">                  <mat-label> Search </mat-label>                  <input matInput type="text" placeholder="Search by phone number" formControlName="phoneNumber" [errorStateMatcher]="matcher">                  <mat-error *ngIf="phoneSearchSubmitted && phoneSearchFormStub.phoneNumber.errors">Phone Number is required.</mat-error>                  <mat-icon matSuffix>phone</mat-icon>                  <mat-hint>Phone Number</mat-hint>                </mat-form-field>                <button mat-raised-button color="primary" type="submit" class="btn btn-outline-primary ml-3"> SEARCH </button>              </form>            </mat-tab>            <mat-tab label="Account Address">              <form [formGroup]="addressSearchForm" (ngSubmit)="onAddressSearch()">                <mat-form-field appearance="outline">                  <mat-label> Search </mat-label>                  <input matInput type="text" placeholder="Search by account address" formControlName="address" [errorStateMatcher]="matcher">                  <mat-error *ngIf="addressSearchSubmitted && addressSearchFormStub.address.errors">Account Address is required.</mat-error>                  <mat-icon matSuffix>view_in_ar</mat-icon>                  <mat-hint>Account Address</mat-hint>                </mat-form-field>                <button mat-raised-button color="primary" type="submit" class="btn btn-outline-primary ml-3"> SEARCH </button>              </form>            </mat-tab>          </mat-tab-group>        </div>      </div>    </div>    <app-footer appMenuSelection></app-footer>  </div>  <!-- ============================================================== -->  <!-- End Page content -->  <!-- ============================================================== --></div></div>'
+        var COMPONENT_TEMPLATE = '<div><!-- Begin page --><div class="wrapper">  <app-sidebar></app-sidebar>  <!-- ============================================================== -->  <!-- Start Page Content here -->  <!-- ============================================================== -->  <div id="content">    <app-topbar></app-topbar>    <!-- Start Content-->    <div class="container-fluid" appMenuSelection>      <nav aria-label="breadcrumb">        <ol class="breadcrumb">          <li class="breadcrumb-item"><a routerLink="/home">Home</a></li>          <li class="breadcrumb-item"><a routerLink="/accounts">Accounts</a></li>          <li class="breadcrumb-item active" aria-current="page">Search</li>        </ol>      </nav>      <div class="card">        <mat-card-title class="card-header"> Accounts </mat-card-title>        <div class="card-body">          <mat-tab-group>            <mat-tab label="Phone Number">              <form [formGroup]="phoneSearchForm" (ngSubmit)="onPhoneSearch()">                <mat-form-field appearance="outline">                  <mat-label> Search </mat-label>                  <input                    matInput                    type="text"                    placeholder="Search by phone number"                    formControlName="phoneNumber"                    [errorStateMatcher]="matcher"                  />                  <mat-error *ngIf="phoneSearchSubmitted && phoneSearchFormStub.phoneNumber.errors"                    >Phone Number is required.</mat-error                  >                  <mat-icon matSuffix>phone</mat-icon>                  <mat-hint>Phone Number</mat-hint>                </mat-form-field>                <button                  mat-raised-button                  color="primary"                  type="submit"                  class="btn btn-outline-primary ml-3"                >                  SEARCH                </button>              </form>            </mat-tab>            <mat-tab label="Account Address">              <form [formGroup]="addressSearchForm" (ngSubmit)="onAddressSearch()">                <mat-form-field appearance="outline">                  <mat-label> Search </mat-label>                  <input                    matInput                    type="text"                    placeholder="Search by account address"                    formControlName="address"                    [errorStateMatcher]="matcher"                  />                  <mat-error *ngIf="addressSearchSubmitted && addressSearchFormStub.address.errors"                    >Account Address is required.</mat-error                  >                  <mat-icon matSuffix>view_in_ar</mat-icon>                  <mat-hint>Account Address</mat-hint>                </mat-form-field>                <button                  mat-raised-button                  color="primary"                  type="submit"                  class="btn btn-outline-primary ml-3"                >                  SEARCH                </button>              </form>            </mat-tab>          </mat-tab-group>        </div>      </div>    </div>    <app-footer appMenuSelection></app-footer>  </div>  <!-- ============================================================== -->  <!-- End Page content -->  <!-- ============================================================== --></div></div>'
     var COMPONENTS = [{'name': 'AccountDetailsComponent', 'selector': 'app-account-details'},{'name': 'AccountsComponent', 'selector': 'app-accounts'},{'name': 'AccountSearchComponent', 'selector': 'app-account-search'},{'name': 'AdminComponent', 'selector': 'app-admin'},{'name': 'AppComponent', 'selector': 'app-root'},{'name': 'AuthComponent', 'selector': 'app-auth'},{'name': 'CreateAccountComponent', 'selector': 'app-create-account'},{'name': 'ErrorDialogComponent', 'selector': 'app-error-dialog'},{'name': 'FooterComponent', 'selector': 'app-footer'},{'name': 'FooterStubComponent', 'selector': 'app-footer'},{'name': 'NetworkStatusComponent', 'selector': 'app-network-status'},{'name': 'OrganizationComponent', 'selector': 'app-organization'},{'name': 'PagesComponent', 'selector': 'app-pages'},{'name': 'SettingsComponent', 'selector': 'app-settings'},{'name': 'SidebarComponent', 'selector': 'app-sidebar'},{'name': 'SidebarStubComponent', 'selector': 'app-sidebar'},{'name': 'TokenDetailsComponent', 'selector': 'app-token-details'},{'name': 'TokensComponent', 'selector': 'app-tokens'},{'name': 'TopbarComponent', 'selector': 'app-topbar'},{'name': 'TopbarStubComponent', 'selector': 'app-topbar'},{'name': 'TransactionDetailsComponent', 'selector': 'app-transaction-details'},{'name': 'TransactionsComponent', 'selector': 'app-transactions'}];
     var DIRECTIVES = [{'name': 'MenuSelectionDirective', 'selector': '[appMenuSelection]'},{'name': 'MenuToggleDirective', 'selector': '[appMenuToggle]'},{'name': 'PasswordToggleDirective', 'selector': '[appPasswordToggle]'},{'name': 'RouterLinkDirectiveStub', 'selector': '[appRouterLink]'}];
     var ACTUAL_COMPONENT = {'name': 'AccountSearchComponent'};

docs/compodoc/components/AccountsComponent.html

@@ -992,63 +992,99 @@ export class AccountsComponent implements OnInit {
         </ol>
       </nav>
       <div class="card">
-        <mat-card-title class="card-header">
-          Accounts
-        </mat-card-title>
+        <mat-card-title class="card-header"> Accounts </mat-card-title>
         <div class="card-body">
           <div class="row card-header">
             <mat-form-field appearance="outline">
               <mat-label> ACCOUNT TYPE </mat-label>
-              <mat-select id="typeSelect" [(value)]="accountsType" (selectionChange)="filterAccounts()">
+              <mat-select
+                id="typeSelect"
+                [(value)]="accountsType"
+                (selectionChange)="filterAccounts()"
+              >
                 <mat-option value="all">ALL</mat-option>
                 <mat-option *ngFor="let accountType of accountTypes" [value]="accountType">
-                  {{accountType | uppercase}}
+                  {{ accountType | uppercase }}
                 </mat-option>
               </mat-select>
             </mat-form-field>
-            <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary ml-auto mr-2" routerLink="/accounts/search"> SEARCH </button>
-            <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary mr-2" (click)="downloadCsv()"> EXPORT </button>
+            <button
+              mat-raised-button
+              color="primary"
+              type="button"
+              class="btn btn-outline-primary ml-auto mr-2"
+              routerLink="/accounts/search"
+            >
+              SEARCH
+            </button>
+            <button
+              mat-raised-button
+              color="primary"
+              type="button"
+              class="btn btn-outline-primary mr-2"
+              (click)="downloadCsv()"
+            >
+              EXPORT
+            </button>
           </div>
 
           <mat-form-field appearance="outline">
             <mat-label> Filter </mat-label>
-            <input matInput type="text" (keyup)="doFilter($event.target.value)" placeholder="Filter">
+            <input
+              matInput
+              type="text"
+              (keyup)="doFilter($event.target.value)"
+              placeholder="Filter"
+            />
             <mat-icon matSuffix>search</mat-icon>
           </mat-form-field>
 
-          <mat-table class="mat-elevation-z10" [dataSource]="dataSource" matSort matSortActive="created"
-                     matSortDirection="desc" matSortDisableClear>
-
+          <mat-table
+            class="mat-elevation-z10"
+            [dataSource]="dataSource"
+            matSort
+            matSortActive="created"
+            matSortDirection="desc"
+            matSortDisableClear
+          >
             <ng-container matColumnDef="name">
               <mat-header-cell *matHeaderCellDef mat-sort-header> NAME </mat-header-cell>
-              <mat-cell *matCellDef="let user"> {{user?.vcard.fn[0].value}} </mat-cell>
+              <mat-cell *matCellDef="let user"> {{ user?.vcard.fn[0].value }} </mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="phone">
               <mat-header-cell *matHeaderCellDef mat-sort-header> PHONE NUMBER </mat-header-cell>
-              <mat-cell *matCellDef="let user"> {{user?.vcard.tel[0].value}} </mat-cell>
+              <mat-cell *matCellDef="let user"> {{ user?.vcard.tel[0].value }} </mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="created">
               <mat-header-cell *matHeaderCellDef mat-sort-header> CREATED </mat-header-cell>
-              <mat-cell *matCellDef="let user"> {{user?.date_registered | unixDate}} </mat-cell>
+              <mat-cell *matCellDef="let user"> {{ user?.date_registered | unixDate }} </mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="balance">
               <mat-header-cell *matHeaderCellDef mat-sort-header> BALANCE </mat-header-cell>
-              <mat-cell *matCellDef="let user"> {{user?.balance | tokenRatio}} </mat-cell>
+              <mat-cell *matCellDef="let user"> {{ user?.balance | tokenRatio }} </mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="location">
               <mat-header-cell *matHeaderCellDef mat-sort-header> LOCATION </mat-header-cell>
-              <mat-cell *matCellDef="let user"> {{user?.location.area_name}} </mat-cell>
+              <mat-cell *matCellDef="let user"> {{ user?.location.area_name }} </mat-cell>
             </ng-container>
 
             <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-            <mat-row *matRowDef="let account; columns: displayedColumns" (click)="viewAccount(account)" matRipple></mat-row>
+            <mat-row
+              *matRowDef="let account; columns: displayedColumns"
+              (click)="viewAccount(account)"
+              matRipple
+            ></mat-row>
           </mat-table>
 
-          <mat-paginator [pageSize]="defaultPageSize" [pageSizeOptions]="pageSizeOptions" showFirstLastButtons></mat-paginator>
+          <mat-paginator
+            [pageSize]="defaultPageSize"
+            [pageSizeOptions]="pageSizeOptions"
+            showFirstLastButtons
+          ></mat-paginator>
         </div>
       </div>
     </div>
@@ -1093,7 +1129,7 @@ export class AccountsComponent implements OnInit {
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><!-- Begin page --><div class="wrapper">  <app-sidebar></app-sidebar>  <!-- ============================================================== -->  <!-- Start Page Content here -->  <!-- ============================================================== -->  <div id="content">    <app-topbar></app-topbar>    <!-- Start Content-->    <div class="container-fluid" appMenuSelection>      <nav aria-label="breadcrumb">        <ol class="breadcrumb">          <li class="breadcrumb-item"><a routerLink="/home">Home</a></li>          <li class="breadcrumb-item active" aria-current="page">Accounts</li>        </ol>      </nav>      <div class="card">        <mat-card-title class="card-header">          Accounts        </mat-card-title>        <div class="card-body">          <div class="row card-header">            <mat-form-field appearance="outline">              <mat-label> ACCOUNT TYPE </mat-label>              <mat-select id="typeSelect" [(value)]="accountsType" (selectionChange)="filterAccounts()">                <mat-option value="all">ALL</mat-option>                <mat-option *ngFor="let accountType of accountTypes" [value]="accountType">                  {{accountType | uppercase}}                </mat-option>              </mat-select>            </mat-form-field>            <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary ml-auto mr-2" routerLink="/accounts/search"> SEARCH </button>            <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary mr-2" (click)="downloadCsv()"> EXPORT </button>          </div>          <mat-form-field appearance="outline">            <mat-label> Filter </mat-label>            <input matInput type="text" (keyup)="doFilter($event.target.value)" placeholder="Filter">            <mat-icon matSuffix>search</mat-icon>          </mat-form-field>          <mat-table class="mat-elevation-z10" [dataSource]="dataSource" matSort matSortActive="created"                     matSortDirection="desc" matSortDisableClear>            <ng-container matColumnDef="name">              <mat-header-cell *matHeaderCellDef mat-sort-header> NAME </mat-header-cell>              <mat-cell *matCellDef="let user"> {{user?.vcard.fn[0].value}} </mat-cell>            </ng-container>            <ng-container matColumnDef="phone">              <mat-header-cell *matHeaderCellDef mat-sort-header> PHONE NUMBER </mat-header-cell>              <mat-cell *matCellDef="let user"> {{user?.vcard.tel[0].value}} </mat-cell>            </ng-container>            <ng-container matColumnDef="created">              <mat-header-cell *matHeaderCellDef mat-sort-header> CREATED </mat-header-cell>              <mat-cell *matCellDef="let user"> {{user?.date_registered | unixDate}} </mat-cell>            </ng-container>            <ng-container matColumnDef="balance">              <mat-header-cell *matHeaderCellDef mat-sort-header> BALANCE </mat-header-cell>              <mat-cell *matCellDef="let user"> {{user?.balance | tokenRatio}} </mat-cell>            </ng-container>            <ng-container matColumnDef="location">              <mat-header-cell *matHeaderCellDef mat-sort-header> LOCATION </mat-header-cell>              <mat-cell *matCellDef="let user"> {{user?.location.area_name}} </mat-cell>            </ng-container>            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>            <mat-row *matRowDef="let account; columns: displayedColumns" (click)="viewAccount(account)" matRipple></mat-row>          </mat-table>          <mat-paginator [pageSize]="defaultPageSize" [pageSizeOptions]="pageSizeOptions" showFirstLastButtons></mat-paginator>        </div>      </div>    </div>    <app-footer appMenuSelection></app-footer>  </div>  <!-- ============================================================== -->  <!-- End Page content -->  <!-- ============================================================== --></div></div>'
+        var COMPONENT_TEMPLATE = '<div><!-- Begin page --><div class="wrapper">  <app-sidebar></app-sidebar>  <!-- ============================================================== -->  <!-- Start Page Content here -->  <!-- ============================================================== -->  <div id="content">    <app-topbar></app-topbar>    <!-- Start Content-->    <div class="container-fluid" appMenuSelection>      <nav aria-label="breadcrumb">        <ol class="breadcrumb">          <li class="breadcrumb-item"><a routerLink="/home">Home</a></li>          <li class="breadcrumb-item active" aria-current="page">Accounts</li>        </ol>      </nav>      <div class="card">        <mat-card-title class="card-header"> Accounts </mat-card-title>        <div class="card-body">          <div class="row card-header">            <mat-form-field appearance="outline">              <mat-label> ACCOUNT TYPE </mat-label>              <mat-select                id="typeSelect"                [(value)]="accountsType"                (selectionChange)="filterAccounts()"              >                <mat-option value="all">ALL</mat-option>                <mat-option *ngFor="let accountType of accountTypes" [value]="accountType">                  {{ accountType | uppercase }}                </mat-option>              </mat-select>            </mat-form-field>            <button              mat-raised-button              color="primary"              type="button"              class="btn btn-outline-primary ml-auto mr-2"              routerLink="/accounts/search"            >              SEARCH            </button>            <button              mat-raised-button              color="primary"              type="button"              class="btn btn-outline-primary mr-2"              (click)="downloadCsv()"            >              EXPORT            </button>          </div>          <mat-form-field appearance="outline">            <mat-label> Filter </mat-label>            <input              matInput              type="text"              (keyup)="doFilter($event.target.value)"              placeholder="Filter"            />            <mat-icon matSuffix>search</mat-icon>          </mat-form-field>          <mat-table            class="mat-elevation-z10"            [dataSource]="dataSource"            matSort            matSortActive="created"            matSortDirection="desc"            matSortDisableClear          >            <ng-container matColumnDef="name">              <mat-header-cell *matHeaderCellDef mat-sort-header> NAME </mat-header-cell>              <mat-cell *matCellDef="let user"> {{ user?.vcard.fn[0].value }} </mat-cell>            </ng-container>            <ng-container matColumnDef="phone">              <mat-header-cell *matHeaderCellDef mat-sort-header> PHONE NUMBER </mat-header-cell>              <mat-cell *matCellDef="let user"> {{ user?.vcard.tel[0].value }} </mat-cell>            </ng-container>            <ng-container matColumnDef="created">              <mat-header-cell *matHeaderCellDef mat-sort-header> CREATED </mat-header-cell>              <mat-cell *matCellDef="let user"> {{ user?.date_registered | unixDate }} </mat-cell>            </ng-container>            <ng-container matColumnDef="balance">              <mat-header-cell *matHeaderCellDef mat-sort-header> BALANCE </mat-header-cell>              <mat-cell *matCellDef="let user"> {{ user?.balance | tokenRatio }} </mat-cell>            </ng-container>            <ng-container matColumnDef="location">              <mat-header-cell *matHeaderCellDef mat-sort-header> LOCATION </mat-header-cell>              <mat-cell *matCellDef="let user"> {{ user?.location.area_name }} </mat-cell>            </ng-container>            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>            <mat-row              *matRowDef="let account; columns: displayedColumns"              (click)="viewAccount(account)"              matRipple            ></mat-row>          </mat-table>          <mat-paginator            [pageSize]="defaultPageSize"            [pageSizeOptions]="pageSizeOptions"            showFirstLastButtons          ></mat-paginator>        </div>      </div>    </div>    <app-footer appMenuSelection></app-footer>  </div>  <!-- ============================================================== -->  <!-- End Page content -->  <!-- ============================================================== --></div></div>'
     var COMPONENTS = [{'name': 'AccountDetailsComponent', 'selector': 'app-account-details'},{'name': 'AccountsComponent', 'selector': 'app-accounts'},{'name': 'AccountSearchComponent', 'selector': 'app-account-search'},{'name': 'AdminComponent', 'selector': 'app-admin'},{'name': 'AppComponent', 'selector': 'app-root'},{'name': 'AuthComponent', 'selector': 'app-auth'},{'name': 'CreateAccountComponent', 'selector': 'app-create-account'},{'name': 'ErrorDialogComponent', 'selector': 'app-error-dialog'},{'name': 'FooterComponent', 'selector': 'app-footer'},{'name': 'FooterStubComponent', 'selector': 'app-footer'},{'name': 'NetworkStatusComponent', 'selector': 'app-network-status'},{'name': 'OrganizationComponent', 'selector': 'app-organization'},{'name': 'PagesComponent', 'selector': 'app-pages'},{'name': 'SettingsComponent', 'selector': 'app-settings'},{'name': 'SidebarComponent', 'selector': 'app-sidebar'},{'name': 'SidebarStubComponent', 'selector': 'app-sidebar'},{'name': 'TokenDetailsComponent', 'selector': 'app-token-details'},{'name': 'TokensComponent', 'selector': 'app-tokens'},{'name': 'TopbarComponent', 'selector': 'app-topbar'},{'name': 'TopbarStubComponent', 'selector': 'app-topbar'},{'name': 'TransactionDetailsComponent', 'selector': 'app-transaction-details'},{'name': 'TransactionsComponent', 'selector': 'app-transactions'}];
     var DIRECTIVES = [{'name': 'MenuSelectionDirective', 'selector': '[appMenuSelection]'},{'name': 'MenuToggleDirective', 'selector': '[appMenuToggle]'},{'name': 'PasswordToggleDirective', 'selector': '[appPasswordToggle]'},{'name': 'RouterLinkDirectiveStub', 'selector': '[appRouterLink]'}];
     var ACTUAL_COMPONENT = {'name': 'AccountsComponent'};

docs/compodoc/components/AuthComponent.html

@@ -784,20 +784,25 @@ export class AuthComponent implements OnInit {
             <h1 class="text-white">CICADA</h1>
           </a>
         </mat-card-title>
-        <div  id="one" style="display: block" class="card-body p-4">
-
+        <div id="one" style="display: block" class="card-body p-4">
           <div class="text-center w-75 m-auto">
             <h4 class="text-dark-50 text-center font-weight-bold">Add Private Key</h4>
           </div>
 
           <form [formGroup]="keyForm" (ngSubmit)="onSubmit()">
-
             <mat-form-field appearance="outline" class="full-width">
               <mat-label>Private Key</mat-label>
-              <textarea matInput style="height: 30rem" formControlName="key" placeholder="Enter your private key..."
-                        [errorStateMatcher]="matcher"></textarea>
+              <textarea
+                matInput
+                style="height: 30rem"
+                formControlName="key"
+                placeholder="Enter your private key..."
+                [errorStateMatcher]="matcher"
+              ></textarea>
               <div *ngIf="submitted && keyFormStub.key.errors" class="invalid-feedback">
-                <mat-error *ngIf="keyFormStub.key.errors.required">Private Key is required.</mat-error>
+                <mat-error *ngIf="keyFormStub.key.errors.required"
+                  >Private Key is required.</mat-error
+                >
               </div>
             </mat-form-field>
 
@@ -805,20 +810,24 @@ export class AuthComponent implements OnInit {
               <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
               Add Key
             </button>
-
           </form>
         </div>
-        <div  id="two" style="display: none" class="card-body p-4 align-items-center">
-
+        <div id="two" style="display: none" class="card-body p-4 align-items-center">
           <div class="text-center w-75 m-auto">
             <h4 id="state" class="text-dark-50 text-center font-weight-bold"></h4>
-            <button mat-raised-button matRipple color="primary" type="submit" (click)="login()"> Login </button>
+            <button mat-raised-button matRipple color="primary" type="submit" (click)="login()">
+              Login
+            </button>
           </div>
 
           <div class="row mt-3">
             <div class="col-12 text-center">
-              <p class="text-muted">Change private key? <a (click)="switchWindows()" class="text-muted ml-1"><b>Enter private key</b></a></p>
-            </div> <!-- end col-->
+              <p class="text-muted">
+                Change private key?
+                <a (click)="switchWindows()" class="text-muted ml-1"><b>Enter private key</b></a>
+              </p>
+            </div>
+            <!-- end col-->
           </div>
           <!-- end row -->
         </div>
@@ -861,7 +870,7 @@ export class AuthComponent implements OnInit {
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><app-network-status></app-network-status><div class="container">  <div class="row justify-content-center mt-5 mb-5">    <div class="col-lg-6 col-md-8 col-sm-10">      <div class="card">        <mat-card-title class="card-header pt-4 pb-4 text-center background-dark">          <a routerLink="/">            <h1 class="text-white">CICADA</h1>          </a>        </mat-card-title>        <div  id="one" style="display: block" class="card-body p-4">          <div class="text-center w-75 m-auto">            <h4 class="text-dark-50 text-center font-weight-bold">Add Private Key</h4>          </div>          <form [formGroup]="keyForm" (ngSubmit)="onSubmit()">            <mat-form-field appearance="outline" class="full-width">              <mat-label>Private Key</mat-label>              <textarea matInput style="height: 30rem" formControlName="key" placeholder="Enter your private key..."                        [errorStateMatcher]="matcher"></textarea>              <div *ngIf="submitted && keyFormStub.key.errors" class="invalid-feedback">                <mat-error *ngIf="keyFormStub.key.errors.required">Private Key is required.</mat-error>              </div>            </mat-form-field>            <button mat-raised-button matRipple color="primary" type="submit" [disabled]="loading">              <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>              Add Key            </button>          </form>        </div>        <div  id="two" style="display: none" class="card-body p-4 align-items-center">          <div class="text-center w-75 m-auto">            <h4 id="state" class="text-dark-50 text-center font-weight-bold"></h4>            <button mat-raised-button matRipple color="primary" type="submit" (click)="login()"> Login </button>          </div>          <div class="row mt-3">            <div class="col-12 text-center">              <p class="text-muted">Change private key? <a (click)="switchWindows()" class="text-muted ml-1"><b>Enter private key</b></a></p>            </div> <!-- end col-->          </div>          <!-- end row -->        </div>      </div>    </div>  </div></div></div>'
+        var COMPONENT_TEMPLATE = '<div><app-network-status></app-network-status><div class="container">  <div class="row justify-content-center mt-5 mb-5">    <div class="col-lg-6 col-md-8 col-sm-10">      <div class="card">        <mat-card-title class="card-header pt-4 pb-4 text-center background-dark">          <a routerLink="/">            <h1 class="text-white">CICADA</h1>          </a>        </mat-card-title>        <div id="one" style="display: block" class="card-body p-4">          <div class="text-center w-75 m-auto">            <h4 class="text-dark-50 text-center font-weight-bold">Add Private Key</h4>          </div>          <form [formGroup]="keyForm" (ngSubmit)="onSubmit()">            <mat-form-field appearance="outline" class="full-width">              <mat-label>Private Key</mat-label>              <textarea                matInput                style="height: 30rem"                formControlName="key"                placeholder="Enter your private key..."                [errorStateMatcher]="matcher"              ></textarea>              <div *ngIf="submitted && keyFormStub.key.errors" class="invalid-feedback">                <mat-error *ngIf="keyFormStub.key.errors.required"                  >Private Key is required.</mat-error                >              </div>            </mat-form-field>            <button mat-raised-button matRipple color="primary" type="submit" [disabled]="loading">              <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>              Add Key            </button>          </form>        </div>        <div id="two" style="display: none" class="card-body p-4 align-items-center">          <div class="text-center w-75 m-auto">            <h4 id="state" class="text-dark-50 text-center font-weight-bold"></h4>            <button mat-raised-button matRipple color="primary" type="submit" (click)="login()">              Login            </button>          </div>          <div class="row mt-3">            <div class="col-12 text-center">              <p class="text-muted">                Change private key?                <a (click)="switchWindows()" class="text-muted ml-1"><b>Enter private key</b></a>              </p>            </div>            <!-- end col-->          </div>          <!-- end row -->        </div>      </div>    </div>  </div></div></div>'
     var COMPONENTS = [{'name': 'AccountDetailsComponent', 'selector': 'app-account-details'},{'name': 'AccountsComponent', 'selector': 'app-accounts'},{'name': 'AccountSearchComponent', 'selector': 'app-account-search'},{'name': 'AdminComponent', 'selector': 'app-admin'},{'name': 'AppComponent', 'selector': 'app-root'},{'name': 'AuthComponent', 'selector': 'app-auth'},{'name': 'CreateAccountComponent', 'selector': 'app-create-account'},{'name': 'ErrorDialogComponent', 'selector': 'app-error-dialog'},{'name': 'FooterComponent', 'selector': 'app-footer'},{'name': 'FooterStubComponent', 'selector': 'app-footer'},{'name': 'NetworkStatusComponent', 'selector': 'app-network-status'},{'name': 'OrganizationComponent', 'selector': 'app-organization'},{'name': 'PagesComponent', 'selector': 'app-pages'},{'name': 'SettingsComponent', 'selector': 'app-settings'},{'name': 'SidebarComponent', 'selector': 'app-sidebar'},{'name': 'SidebarStubComponent', 'selector': 'app-sidebar'},{'name': 'TokenDetailsComponent', 'selector': 'app-token-details'},{'name': 'TokensComponent', 'selector': 'app-tokens'},{'name': 'TopbarComponent', 'selector': 'app-topbar'},{'name': 'TopbarStubComponent', 'selector': 'app-topbar'},{'name': 'TransactionDetailsComponent', 'selector': 'app-transaction-details'},{'name': 'TransactionsComponent', 'selector': 'app-transactions'}];
     var DIRECTIVES = [{'name': 'MenuSelectionDirective', 'selector': '[appMenuSelection]'},{'name': 'MenuToggleDirective', 'selector': '[appMenuToggle]'},{'name': 'PasswordToggleDirective', 'selector': '[appPasswordToggle]'},{'name': 'RouterLinkDirectiveStub', 'selector': '[appRouterLink]'}];
     var ACTUAL_COMPONENT = {'name': 'AuthComponent'};

docs/compodoc/components/ErrorDialogComponent.html

@@ -264,12 +264,8 @@ export class ErrorDialogComponent {
     <div class="tab-pane fade " id="c-templateData">
         <pre class="line-numbers"><code class="language-html">&lt;div&gt;
   &lt;div&gt;
-    &lt;p&gt;
-      Message: {{ data.message }}
-    &lt;/p&gt;
-    &lt;p *ngIf&#x3D;&quot;data.status&quot;&gt;
-      Status: {{ data?.status }}
-    &lt;/p&gt;
+    &lt;p&gt;Message: {{ data.message }}&lt;/p&gt;
+    &lt;p *ngIf&#x3D;&quot;data.status&quot;&gt;Status: {{ data?.status }}&lt;/p&gt;
   &lt;/div&gt;
 &lt;/div&gt;
 </code></pre>
@@ -307,7 +303,7 @@ export class ErrorDialogComponent {
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><div>  <div>    <p>      Message: {{ data.message }}    </p>    <p *ngIf="data.status">      Status: {{ data?.status }}    </p>  </div></div></div>'
+        var COMPONENT_TEMPLATE = '<div><div>  <div>    <p>Message: {{ data.message }}</p>    <p *ngIf="data.status">Status: {{ data?.status }}</p>  </div></div></div>'
     var COMPONENTS = [{'name': 'AccountDetailsComponent', 'selector': 'app-account-details'},{'name': 'AccountsComponent', 'selector': 'app-accounts'},{'name': 'AccountSearchComponent', 'selector': 'app-account-search'},{'name': 'AdminComponent', 'selector': 'app-admin'},{'name': 'AppComponent', 'selector': 'app-root'},{'name': 'AuthComponent', 'selector': 'app-auth'},{'name': 'CreateAccountComponent', 'selector': 'app-create-account'},{'name': 'ErrorDialogComponent', 'selector': 'app-error-dialog'},{'name': 'FooterComponent', 'selector': 'app-footer'},{'name': 'FooterStubComponent', 'selector': 'app-footer'},{'name': 'NetworkStatusComponent', 'selector': 'app-network-status'},{'name': 'OrganizationComponent', 'selector': 'app-organization'},{'name': 'PagesComponent', 'selector': 'app-pages'},{'name': 'SettingsComponent', 'selector': 'app-settings'},{'name': 'SidebarComponent', 'selector': 'app-sidebar'},{'name': 'SidebarStubComponent', 'selector': 'app-sidebar'},{'name': 'TokenDetailsComponent', 'selector': 'app-token-details'},{'name': 'TokensComponent', 'selector': 'app-tokens'},{'name': 'TopbarComponent', 'selector': 'app-topbar'},{'name': 'TopbarStubComponent', 'selector': 'app-topbar'},{'name': 'TransactionDetailsComponent', 'selector': 'app-transaction-details'},{'name': 'TransactionsComponent', 'selector': 'app-transactions'}];
     var DIRECTIVES = [{'name': 'MenuSelectionDirective', 'selector': '[appMenuSelection]'},{'name': 'MenuToggleDirective', 'selector': '[appMenuToggle]'},{'name': 'PasswordToggleDirective', 'selector': '[appPasswordToggle]'},{'name': 'RouterLinkDirectiveStub', 'selector': '[appRouterLink]'}];
     var ACTUAL_COMPONENT = {'name': 'ErrorDialogComponent'};

docs/compodoc/components/FooterComponent.html

@@ -288,10 +288,12 @@ export class FooterComponent implements OnInit {
     <div class="tab-pane fade " id="c-templateData">
         <pre class="line-numbers"><code class="language-html">&lt;!-- Footer Start --&gt;
 &lt;footer class&#x3D;&quot;footer&quot;&gt;
-  &lt;a target&#x3D;&quot;blank&quot; title&#x3D;&quot;GPL-3&quot; href&#x3D;&quot;https://www.gnu.org/licenses/gpl-3.0.en.html&quot;&gt; Copyleft &lt;/a&gt; 🄯.
+  &lt;a target&#x3D;&quot;blank&quot; title&#x3D;&quot;GPL-3&quot; href&#x3D;&quot;https://www.gnu.org/licenses/gpl-3.0.en.html&quot;&gt; Copyleft &lt;/a&gt;
+  🄯.
   {{ currentYear }}
-  &lt;a target&#x3D;&quot;blank&quot; title&#x3D;&quot;Gitlab@GrassrootsEconomics&quot; href&#x3D;&quot;https://gitlab.com/grassrootseconomics&quot;&gt;&lt;u&gt; Grassroots Economics &lt;/u&gt;&lt;/a&gt;
-
+  &lt;a target&#x3D;&quot;blank&quot; title&#x3D;&quot;Gitlab@GrassrootsEconomics&quot; href&#x3D;&quot;https://gitlab.com/grassrootseconomics&quot;
+    &gt;&lt;u&gt; Grassroots Economics &lt;/u&gt;&lt;/a
+  &gt;
 &lt;/footer&gt;
 &lt;!-- end Footer --&gt;
 </code></pre>
@@ -329,7 +331,7 @@ export class FooterComponent implements OnInit {
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><!-- Footer Start --><footer class="footer">  <a target="blank" title="GPL-3" href="https://www.gnu.org/licenses/gpl-3.0.en.html"> Copyleft </a> 🄯.  {{ currentYear }}  <a target="blank" title="Gitlab@GrassrootsEconomics" href="https://gitlab.com/grassrootseconomics"><u> Grassroots Economics </u></a></footer><!-- end Footer --></div>'
+        var COMPONENT_TEMPLATE = '<div><!-- Footer Start --><footer class="footer">  <a target="blank" title="GPL-3" href="https://www.gnu.org/licenses/gpl-3.0.en.html"> Copyleft </a>  🄯.  {{ currentYear }}  <a target="blank" title="Gitlab@GrassrootsEconomics" href="https://gitlab.com/grassrootseconomics"    ><u> Grassroots Economics </u></a  ></footer><!-- end Footer --></div>'
     var COMPONENTS = [{'name': 'AccountDetailsComponent', 'selector': 'app-account-details'},{'name': 'AccountsComponent', 'selector': 'app-accounts'},{'name': 'AccountSearchComponent', 'selector': 'app-account-search'},{'name': 'AdminComponent', 'selector': 'app-admin'},{'name': 'AppComponent', 'selector': 'app-root'},{'name': 'AuthComponent', 'selector': 'app-auth'},{'name': 'CreateAccountComponent', 'selector': 'app-create-account'},{'name': 'ErrorDialogComponent', 'selector': 'app-error-dialog'},{'name': 'FooterComponent', 'selector': 'app-footer'},{'name': 'FooterStubComponent', 'selector': 'app-footer'},{'name': 'NetworkStatusComponent', 'selector': 'app-network-status'},{'name': 'OrganizationComponent', 'selector': 'app-organization'},{'name': 'PagesComponent', 'selector': 'app-pages'},{'name': 'SettingsComponent', 'selector': 'app-settings'},{'name': 'SidebarComponent', 'selector': 'app-sidebar'},{'name': 'SidebarStubComponent', 'selector': 'app-sidebar'},{'name': 'TokenDetailsComponent', 'selector': 'app-token-details'},{'name': 'TokensComponent', 'selector': 'app-tokens'},{'name': 'TopbarComponent', 'selector': 'app-topbar'},{'name': 'TopbarStubComponent', 'selector': 'app-topbar'},{'name': 'TransactionDetailsComponent', 'selector': 'app-transaction-details'},{'name': 'TransactionsComponent', 'selector': 'app-transactions'}];
     var DIRECTIVES = [{'name': 'MenuSelectionDirective', 'selector': '[appMenuSelection]'},{'name': 'MenuToggleDirective', 'selector': '[appMenuToggle]'},{'name': 'PasswordToggleDirective', 'selector': '[appPasswordToggle]'},{'name': 'RouterLinkDirectiveStub', 'selector': '[appRouterLink]'}];
     var ACTUAL_COMPONENT = {'name': 'FooterComponent'};

docs/compodoc/components/FooterStubComponent.html

@@ -109,15 +109,15 @@
 
 
     <div class="tab-pane fade  tab-source-code" id="c-source">
-        <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import {Component} from &#x27;@angular/core&#x27;;
+        <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import { Component } from &#x27;@angular/core&#x27;;
 
-@Component({selector: &#x27;app-sidebar&#x27;, template: &#x27;&#x27;})
+@Component({ selector: &#x27;app-sidebar&#x27;, template: &#x27;&#x27; })
 export class SidebarStubComponent {}
 
-@Component({selector: &#x27;app-topbar&#x27;, template: &#x27;&#x27;})
+@Component({ selector: &#x27;app-topbar&#x27;, template: &#x27;&#x27; })
 export class TopbarStubComponent {}
 
-@Component({selector: &#x27;app-footer&#x27;, template: &#x27;&#x27;})
+@Component({ selector: &#x27;app-footer&#x27;, template: &#x27;&#x27; })
 export class FooterStubComponent {}
 </code></pre>
     </div>

docs/compodoc/components/NetworkStatusComponent.html

@@ -379,14 +379,14 @@ export class NetworkStatusComponent implements OnInit {
     <div class="tab-pane fade " id="c-templateData">
         <pre class="line-numbers"><code class="language-html">&lt;nav class&#x3D;&quot;navbar navbar-dark background-dark&quot;&gt;
   &lt;h1 class&#x3D;&quot;navbar-brand&quot;&gt;
-    &lt;div *ngIf&#x3D;&quot;noInternetConnection; then offlineBlock else onlineBlock&quot;&gt;&lt;/div&gt;
+    &lt;div *ngIf&#x3D;&quot;noInternetConnection; then offlineBlock; else onlineBlock&quot;&gt;&lt;/div&gt;
     &lt;ng-template #offlineBlock&gt;
-      &lt;strong style&#x3D;&quot;color: red;&quot;&gt;OFFLINE &lt;/strong&gt;
-      &lt;img width&#x3D;&quot;20rem&quot; src&#x3D;&quot;assets/images/no-wifi.svg&quot; alt&#x3D;&quot;Internet Disconnected&quot;&gt;
+      &lt;strong style&#x3D;&quot;color: red&quot;&gt;OFFLINE &lt;/strong&gt;
+      &lt;img width&#x3D;&quot;20rem&quot; src&#x3D;&quot;assets/images/no-wifi.svg&quot; alt&#x3D;&quot;Internet Disconnected&quot; /&gt;
     &lt;/ng-template&gt;
     &lt;ng-template #onlineBlock&gt;
-      &lt;strong style&#x3D;&quot;color: lawngreen;&quot;&gt;ONLINE &lt;/strong&gt;
-      &lt;img width&#x3D;&quot;20rem&quot; src&#x3D;&quot;assets/images/wifi.svg&quot; alt&#x3D;&quot;Internet Connected&quot;&gt;
+      &lt;strong style&#x3D;&quot;color: lawngreen&quot;&gt;ONLINE &lt;/strong&gt;
+      &lt;img width&#x3D;&quot;20rem&quot; src&#x3D;&quot;assets/images/wifi.svg&quot; alt&#x3D;&quot;Internet Connected&quot; /&gt;
     &lt;/ng-template&gt;
   &lt;/h1&gt;
 &lt;/nav&gt;
@@ -425,7 +425,7 @@ export class NetworkStatusComponent implements OnInit {
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><nav class="navbar navbar-dark background-dark">  <h1 class="navbar-brand">    <div *ngIf="noInternetConnection; then offlineBlock else onlineBlock"></div>    <ng-template #offlineBlock>      <strong style="color: red;">OFFLINE </strong>      <img width="20rem" src="assets/images/no-wifi.svg" alt="Internet Disconnected">    </ng-template>    <ng-template #onlineBlock>      <strong style="color: lawngreen;">ONLINE </strong>      <img width="20rem" src="assets/images/wifi.svg" alt="Internet Connected">    </ng-template>  </h1></nav></div>'
+        var COMPONENT_TEMPLATE = '<div><nav class="navbar navbar-dark background-dark">  <h1 class="navbar-brand">    <div *ngIf="noInternetConnection; then offlineBlock; else onlineBlock"></div>    <ng-template #offlineBlock>      <strong style="color: red">OFFLINE </strong>      <img width="20rem" src="assets/images/no-wifi.svg" alt="Internet Disconnected" />    </ng-template>    <ng-template #onlineBlock>      <strong style="color: lawngreen">ONLINE </strong>      <img width="20rem" src="assets/images/wifi.svg" alt="Internet Connected" />    </ng-template>  </h1></nav></div>'
     var COMPONENTS = [{'name': 'AccountDetailsComponent', 'selector': 'app-account-details'},{'name': 'AccountsComponent', 'selector': 'app-accounts'},{'name': 'AccountSearchComponent', 'selector': 'app-account-search'},{'name': 'AdminComponent', 'selector': 'app-admin'},{'name': 'AppComponent', 'selector': 'app-root'},{'name': 'AuthComponent', 'selector': 'app-auth'},{'name': 'CreateAccountComponent', 'selector': 'app-create-account'},{'name': 'ErrorDialogComponent', 'selector': 'app-error-dialog'},{'name': 'FooterComponent', 'selector': 'app-footer'},{'name': 'FooterStubComponent', 'selector': 'app-footer'},{'name': 'NetworkStatusComponent', 'selector': 'app-network-status'},{'name': 'OrganizationComponent', 'selector': 'app-organization'},{'name': 'PagesComponent', 'selector': 'app-pages'},{'name': 'SettingsComponent', 'selector': 'app-settings'},{'name': 'SidebarComponent', 'selector': 'app-sidebar'},{'name': 'SidebarStubComponent', 'selector': 'app-sidebar'},{'name': 'TokenDetailsComponent', 'selector': 'app-token-details'},{'name': 'TokensComponent', 'selector': 'app-tokens'},{'name': 'TopbarComponent', 'selector': 'app-topbar'},{'name': 'TopbarStubComponent', 'selector': 'app-topbar'},{'name': 'TransactionDetailsComponent', 'selector': 'app-transaction-details'},{'name': 'TransactionsComponent', 'selector': 'app-transactions'}];
     var DIRECTIVES = [{'name': 'MenuSelectionDirective', 'selector': '[appMenuSelection]'},{'name': 'MenuToggleDirective', 'selector': '[appMenuToggle]'},{'name': 'PasswordToggleDirective', 'selector': '[appPasswordToggle]'},{'name': 'RouterLinkDirectiveStub', 'selector': '[appRouterLink]'}];
     var ACTUAL_COMPONENT = {'name': 'NetworkStatusComponent'};

docs/compodoc/components/OrganizationComponent.html

@@ -521,19 +521,31 @@ export class OrganizationComponent implements OnInit {
             <form [formGroup]="organizationForm" (ngSubmit)="onSubmit()">
               <mat-form-field appearance="outline">
                 <mat-label>Default Disbursement *</mat-label>
-                <input matInput type="text" id="amount" placeholder="Amount" formControlName="disbursement"
-                       [errorStateMatcher]="matcher">
+                <input
+                  matInput
+                  type="text"
+                  id="amount"
+                  placeholder="Amount"
+                  formControlName="disbursement"
+                  [errorStateMatcher]="matcher"
+                />
                 <span matSuffix>RCU</span>
                 <mat-error *ngIf="submitted && organizationFormStub.disbursement.errors">
                   Default Disbursement is required.
                 </mat-error>
               </mat-form-field>
               <div class="form-group form-check">
-                <mat-checkbox id="transferCard" formControlName="transfer">Require Transfer Card *</mat-checkbox>
+                <mat-checkbox id="transferCard" formControlName="transfer"
+                  >Require Transfer Card *</mat-checkbox
+                >
               </div>
               <mat-form-field appearance="outline">
                 <mat-label>Default Country Code *</mat-label>
-                <mat-select id="countryCode" formControlName="countryCode" [errorStateMatcher]="matcher">
+                <mat-select
+                  id="countryCode"
+                  formControlName="countryCode"
+                  [errorStateMatcher]="matcher"
+                >
                   <mat-option value="KE">KE Kenya</mat-option>
                   <mat-option value="US">US United States</mat-option>
                   <mat-option value="ETH">ETH Ethiopia</mat-option>
@@ -542,9 +554,11 @@ export class OrganizationComponent implements OnInit {
                 </mat-select>
                 <mat-error *ngIf="submitted && organizationFormStub.countryCode.errors">
                   Country Code is required.
-                </mat-error>
-              </mat-form-field><br>
-              <button mat-raised-button color="primary" type="submit" class="btn btn-primary">Submit</button>
+                </mat-error> </mat-form-field
+              ><br />
+              <button mat-raised-button color="primary" type="submit" class="btn btn-primary">
+                Submit
+              </button>
             </form>
           </div>
         </div>
@@ -591,7 +605,7 @@ export class OrganizationComponent implements OnInit {
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><!-- Begin page --><div class="wrapper">  <app-sidebar></app-sidebar>  <!-- ============================================================== -->  <!-- Start Page Content here -->  <!-- ============================================================== -->  <div id="content">    <app-topbar></app-topbar>    <!-- Start Content-->    <div class="container-fluid" appMenuSelection>      <nav aria-label="breadcrumb">        <ol class="breadcrumb">          <li class="breadcrumb-item"><a routerLink="/home">Home</a></li>          <li class="breadcrumb-item"><a routerLink="/settings">Settings</a></li>          <li class="breadcrumb-item active" aria-current="page">Organization Settings</li>        </ol>      </nav>      <div class="col-md-6 center-body">        <div class="card">          <mat-card-title class="card-header text-center">            DEFAULT ORGANISATION SETTINGS          </mat-card-title>          <div class="card-body">            <form [formGroup]="organizationForm" (ngSubmit)="onSubmit()">              <mat-form-field appearance="outline">                <mat-label>Default Disbursement *</mat-label>                <input matInput type="text" id="amount" placeholder="Amount" formControlName="disbursement"                       [errorStateMatcher]="matcher">                <span matSuffix>RCU</span>                <mat-error *ngIf="submitted && organizationFormStub.disbursement.errors">                  Default Disbursement is required.                </mat-error>              </mat-form-field>              <div class="form-group form-check">                <mat-checkbox id="transferCard" formControlName="transfer">Require Transfer Card *</mat-checkbox>              </div>              <mat-form-field appearance="outline">                <mat-label>Default Country Code *</mat-label>                <mat-select id="countryCode" formControlName="countryCode" [errorStateMatcher]="matcher">                  <mat-option value="KE">KE Kenya</mat-option>                  <mat-option value="US">US United States</mat-option>                  <mat-option value="ETH">ETH Ethiopia</mat-option>                  <mat-option value="GER">GER Germany</mat-option>                  <mat-option value="UG">UG Uganda</mat-option>                </mat-select>                <mat-error *ngIf="submitted && organizationFormStub.countryCode.errors">                  Country Code is required.                </mat-error>              </mat-form-field><br>              <button mat-raised-button color="primary" type="submit" class="btn btn-primary">Submit</button>            </form>          </div>        </div>      </div>    </div>    <app-footer appMenuSelection></app-footer>  </div>  <!-- ============================================================== -->  <!-- End Page content -->  <!-- ============================================================== --></div></div>'
+        var COMPONENT_TEMPLATE = '<div><!-- Begin page --><div class="wrapper">  <app-sidebar></app-sidebar>  <!-- ============================================================== -->  <!-- Start Page Content here -->  <!-- ============================================================== -->  <div id="content">    <app-topbar></app-topbar>    <!-- Start Content-->    <div class="container-fluid" appMenuSelection>      <nav aria-label="breadcrumb">        <ol class="breadcrumb">          <li class="breadcrumb-item"><a routerLink="/home">Home</a></li>          <li class="breadcrumb-item"><a routerLink="/settings">Settings</a></li>          <li class="breadcrumb-item active" aria-current="page">Organization Settings</li>        </ol>      </nav>      <div class="col-md-6 center-body">        <div class="card">          <mat-card-title class="card-header text-center">            DEFAULT ORGANISATION SETTINGS          </mat-card-title>          <div class="card-body">            <form [formGroup]="organizationForm" (ngSubmit)="onSubmit()">              <mat-form-field appearance="outline">                <mat-label>Default Disbursement *</mat-label>                <input                  matInput                  type="text"                  id="amount"                  placeholder="Amount"                  formControlName="disbursement"                  [errorStateMatcher]="matcher"                />                <span matSuffix>RCU</span>                <mat-error *ngIf="submitted && organizationFormStub.disbursement.errors">                  Default Disbursement is required.                </mat-error>              </mat-form-field>              <div class="form-group form-check">                <mat-checkbox id="transferCard" formControlName="transfer"                  >Require Transfer Card *</mat-checkbox                >              </div>              <mat-form-field appearance="outline">                <mat-label>Default Country Code *</mat-label>                <mat-select                  id="countryCode"                  formControlName="countryCode"                  [errorStateMatcher]="matcher"                >                  <mat-option value="KE">KE Kenya</mat-option>                  <mat-option value="US">US United States</mat-option>                  <mat-option value="ETH">ETH Ethiopia</mat-option>                  <mat-option value="GER">GER Germany</mat-option>                  <mat-option value="UG">UG Uganda</mat-option>                </mat-select>                <mat-error *ngIf="submitted && organizationFormStub.countryCode.errors">                  Country Code is required.                </mat-error> </mat-form-field              ><br />              <button mat-raised-button color="primary" type="submit" class="btn btn-primary">                Submit              </button>            </form>          </div>        </div>      </div>    </div>    <app-footer appMenuSelection></app-footer>  </div>  <!-- ============================================================== -->  <!-- End Page content -->  <!-- ============================================================== --></div></div>'
     var COMPONENTS = [{'name': 'AccountDetailsComponent', 'selector': 'app-account-details'},{'name': 'AccountsComponent', 'selector': 'app-accounts'},{'name': 'AccountSearchComponent', 'selector': 'app-account-search'},{'name': 'AdminComponent', 'selector': 'app-admin'},{'name': 'AppComponent', 'selector': 'app-root'},{'name': 'AuthComponent', 'selector': 'app-auth'},{'name': 'CreateAccountComponent', 'selector': 'app-create-account'},{'name': 'ErrorDialogComponent', 'selector': 'app-error-dialog'},{'name': 'FooterComponent', 'selector': 'app-footer'},{'name': 'FooterStubComponent', 'selector': 'app-footer'},{'name': 'NetworkStatusComponent', 'selector': 'app-network-status'},{'name': 'OrganizationComponent', 'selector': 'app-organization'},{'name': 'PagesComponent', 'selector': 'app-pages'},{'name': 'SettingsComponent', 'selector': 'app-settings'},{'name': 'SidebarComponent', 'selector': 'app-sidebar'},{'name': 'SidebarStubComponent', 'selector': 'app-sidebar'},{'name': 'TokenDetailsComponent', 'selector': 'app-token-details'},{'name': 'TokensComponent', 'selector': 'app-tokens'},{'name': 'TopbarComponent', 'selector': 'app-topbar'},{'name': 'TopbarStubComponent', 'selector': 'app-topbar'},{'name': 'TransactionDetailsComponent', 'selector': 'app-transaction-details'},{'name': 'TransactionsComponent', 'selector': 'app-transactions'}];
     var DIRECTIVES = [{'name': 'MenuSelectionDirective', 'selector': '[appMenuSelection]'},{'name': 'MenuToggleDirective', 'selector': '[appMenuToggle]'},{'name': 'PasswordToggleDirective', 'selector': '[appPasswordToggle]'},{'name': 'RouterLinkDirectiveStub', 'selector': '[appRouterLink]'}];
     var ACTUAL_COMPONENT = {'name': 'OrganizationComponent'};

docs/compodoc/components/PagesComponent.html

@@ -245,10 +245,16 @@ export class PagesComponent {
         </ol>
       </nav>
       <div class="embed-responsive embed-responsive-16by9">
-        <iframe class="embed-responsive-item" [src]="url | safe" allow="fullscreen" loading="lazy"
-                title="Community inclusion currencies dashboard" referrerpolicy="no-referrer">
+        <iframe
+          class="embed-responsive-item"
+          [src]="url | safe"
+          allow="fullscreen"
+          loading="lazy"
+          title="Community inclusion currencies dashboard"
+          referrerpolicy="no-referrer"
+        >
           <p>
-            <a href="{{url}}"> Your browser does not support iframes. </a>
+            <a href="{{ url }}"> Your browser does not support iframes. </a>
           </p>
         </iframe>
       </div>
@@ -294,7 +300,7 @@ export class PagesComponent {
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><!-- Begin page --><div class="wrapper">  <app-sidebar></app-sidebar>  <!-- ============================================================== -->  <!-- Start Page Content here -->  <!-- ============================================================== -->  <div id="content">    <app-topbar></app-topbar>    <!-- Start Content-->    <div class="container-fluid" appMenuSelection>      <nav aria-label="breadcrumb">        <ol class="breadcrumb">          <li class="breadcrumb-item active" aria-current="page">Home</li>        </ol>      </nav>      <div class="embed-responsive embed-responsive-16by9">        <iframe class="embed-responsive-item" [src]="url | safe" allow="fullscreen" loading="lazy"                title="Community inclusion currencies dashboard" referrerpolicy="no-referrer">          <p>            <a href="{{url}}"> Your browser does not support iframes. </a>          </p>        </iframe>      </div>    </div>    <app-footer appMenuSelection></app-footer>  </div>  <!-- ============================================================== -->  <!-- End Page content -->  <!-- ============================================================== --></div></div>'
+        var COMPONENT_TEMPLATE = '<div><!-- Begin page --><div class="wrapper">  <app-sidebar></app-sidebar>  <!-- ============================================================== -->  <!-- Start Page Content here -->  <!-- ============================================================== -->  <div id="content">    <app-topbar></app-topbar>    <!-- Start Content-->    <div class="container-fluid" appMenuSelection>      <nav aria-label="breadcrumb">        <ol class="breadcrumb">          <li class="breadcrumb-item active" aria-current="page">Home</li>        </ol>      </nav>      <div class="embed-responsive embed-responsive-16by9">        <iframe          class="embed-responsive-item"          [src]="url | safe"          allow="fullscreen"          loading="lazy"          title="Community inclusion currencies dashboard"          referrerpolicy="no-referrer"        >          <p>            <a href="{{ url }}"> Your browser does not support iframes. </a>          </p>        </iframe>      </div>    </div>    <app-footer appMenuSelection></app-footer>  </div>  <!-- ============================================================== -->  <!-- End Page content -->  <!-- ============================================================== --></div></div>'
     var COMPONENTS = [{'name': 'AccountDetailsComponent', 'selector': 'app-account-details'},{'name': 'AccountsComponent', 'selector': 'app-accounts'},{'name': 'AccountSearchComponent', 'selector': 'app-account-search'},{'name': 'AdminComponent', 'selector': 'app-admin'},{'name': 'AppComponent', 'selector': 'app-root'},{'name': 'AuthComponent', 'selector': 'app-auth'},{'name': 'CreateAccountComponent', 'selector': 'app-create-account'},{'name': 'ErrorDialogComponent', 'selector': 'app-error-dialog'},{'name': 'FooterComponent', 'selector': 'app-footer'},{'name': 'FooterStubComponent', 'selector': 'app-footer'},{'name': 'NetworkStatusComponent', 'selector': 'app-network-status'},{'name': 'OrganizationComponent', 'selector': 'app-organization'},{'name': 'PagesComponent', 'selector': 'app-pages'},{'name': 'SettingsComponent', 'selector': 'app-settings'},{'name': 'SidebarComponent', 'selector': 'app-sidebar'},{'name': 'SidebarStubComponent', 'selector': 'app-sidebar'},{'name': 'TokenDetailsComponent', 'selector': 'app-token-details'},{'name': 'TokensComponent', 'selector': 'app-tokens'},{'name': 'TopbarComponent', 'selector': 'app-topbar'},{'name': 'TopbarStubComponent', 'selector': 'app-topbar'},{'name': 'TransactionDetailsComponent', 'selector': 'app-transaction-details'},{'name': 'TransactionsComponent', 'selector': 'app-transactions'}];
     var DIRECTIVES = [{'name': 'MenuSelectionDirective', 'selector': '[appMenuSelection]'},{'name': 'MenuToggleDirective', 'selector': '[appMenuToggle]'},{'name': 'PasswordToggleDirective', 'selector': '[appPasswordToggle]'},{'name': 'RouterLinkDirectiveStub', 'selector': '[appRouterLink]'}];
     var ACTUAL_COMPONENT = {'name': 'PagesComponent'};

docs/compodoc/components/SettingsComponent.html

@@ -736,16 +736,14 @@ export class SettingsComponent implements OnInit {
       <div class="row">
         <div class="col-md-6 mb-2">
           <div class="card">
-            <mat-card-title class="card-header text-center">
-              SETTINGS
-            </mat-card-title>
+            <mat-card-title class="card-header text-center"> SETTINGS </mat-card-title>
             <div class="card-body">
               <h4>CICADA Admin Credentials</h4>
-              <span><strong>UserId: </strong> {{ userInfo?.userid }} </span><br>
-              <span><strong>Username: </strong> {{ userInfo?.name }} </span><br>
+              <span><strong>UserId: </strong> {{ userInfo?.userid }} </span><br />
+              <span><strong>Username: </strong> {{ userInfo?.name }} </span><br />
               <span><strong>Email: </strong> {{ userInfo?.email }} </span>
             </div>
-            <hr>
+            <hr />
             <div class="card-body">
               <h4>Organization Settings</h4>
               <a routerLink="/settings/organization"><i>Update your organization settings</i></a>
@@ -754,21 +752,27 @@ export class SettingsComponent implements OnInit {
         </div>
         <div class="col-md-6 mb-2">
           <div class="card">
-            <mat-card-title class="card-header text-center">
-              ACCOUNT MANAGEMENT
-            </mat-card-title>
+            <mat-card-title class="card-header text-center"> ACCOUNT MANAGEMENT </mat-card-title>
             <div class="card-body">
               <h4>Change Password</h4>
               <a routerLink="/settings"><i>Change your account password</i></a>
             </div>
-            <hr>
+            <hr />
             <div class="card-body">
               <h4>Two-step authentication</h4>
               <a routerLink="/settings"><i>Secure your account with two step verification</i></a>
             </div>
-            <hr>
+            <hr />
             <div class="card-body">
-              <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary" (click)="logout()"> LOGOUT ADMIN </button>
+              <button
+                mat-raised-button
+                color="primary"
+                type="button"
+                class="btn btn-outline-primary"
+                (click)="logout()"
+              >
+                LOGOUT ADMIN
+              </button>
             </div>
           </div>
         </div>
@@ -777,39 +781,60 @@ export class SettingsComponent implements OnInit {
             <mat-card-title class="card-header">
               <div class="row">
                 TRUSTED USERS
-                <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary ml-auto mr-2" (click)="downloadCsv()"> EXPORT </button>
+                <button
+                  mat-raised-button
+                  color="primary"
+                  type="button"
+                  class="btn btn-outline-primary ml-auto mr-2"
+                  (click)="downloadCsv()"
+                >
+                  EXPORT
+                </button>
               </div>
             </mat-card-title>
             <div class="card-body">
               <mat-form-field appearance="outline">
                 <mat-label> Filter </mat-label>
-                <input matInput type="text" (keyup)="doFilter($event.target.value)" placeholder="Filter">
+                <input
+                  matInput
+                  type="text"
+                  (keyup)="doFilter($event.target.value)"
+                  placeholder="Filter"
+                />
                 <mat-icon matSuffix>search</mat-icon>
               </mat-form-field>
-              <mat-table class="mat-elevation-z10" [dataSource]="dataSource" matSort matSortActive="name"
-                         matSortDirection="asc" matSortDisableClear>
-
+              <mat-table
+                class="mat-elevation-z10"
+                [dataSource]="dataSource"
+                matSort
+                matSortActive="name"
+                matSortDirection="asc"
+                matSortDisableClear
+              >
                 <ng-container matColumnDef="name">
                   <mat-header-cell *matHeaderCellDef mat-sort-header> NAME </mat-header-cell>
-                  <mat-cell *matCellDef="let user"> {{user.name}} </mat-cell>
+                  <mat-cell *matCellDef="let user"> {{ user.name }} </mat-cell>
                 </ng-container>
 
                 <ng-container matColumnDef="email">
                   <mat-header-cell *matHeaderCellDef mat-sort-header> EMAIL </mat-header-cell>
-                  <mat-cell *matCellDef="let user"> {{user.email}} </mat-cell>
+                  <mat-cell *matCellDef="let user"> {{ user.email }} </mat-cell>
                 </ng-container>
 
                 <ng-container matColumnDef="userId">
                   <mat-header-cell *matHeaderCellDef mat-sort-header> USER ID </mat-header-cell>
-                  <mat-cell *matCellDef="let user"> {{user.userid}} </mat-cell>
+                  <mat-cell *matCellDef="let user"> {{ user.userid }} </mat-cell>
                 </ng-container>
 
                 <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
                 <mat-row *matRowDef="let user; columns: displayedColumns"></mat-row>
               </mat-table>
 
-              <mat-paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20, 50, 100]" showFirstLastButtons></mat-paginator>
-
+              <mat-paginator
+                [pageSize]="5"
+                [pageSizeOptions]="[5, 10, 20, 50, 100]"
+                showFirstLastButtons
+              ></mat-paginator>
             </div>
           </div>
         </div>
@@ -856,7 +881,7 @@ export class SettingsComponent implements OnInit {
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><!-- Begin page --><div class="wrapper">  <app-sidebar></app-sidebar>  <!-- ============================================================== -->  <!-- Start Page Content here -->  <!-- ============================================================== -->  <div id="content">    <app-topbar></app-topbar>    <!-- Start Content-->    <div class="container-fluid" appMenuSelection>      <nav aria-label="breadcrumb">        <ol class="breadcrumb">          <li class="breadcrumb-item"><a routerLink="/home">Home</a></li>          <li class="breadcrumb-item active" aria-current="page">Settings</li>        </ol>      </nav>      <div class="row">        <div class="col-md-6 mb-2">          <div class="card">            <mat-card-title class="card-header text-center">              SETTINGS            </mat-card-title>            <div class="card-body">              <h4>CICADA Admin Credentials</h4>              <span><strong>UserId: </strong> {{ userInfo?.userid }} </span><br>              <span><strong>Username: </strong> {{ userInfo?.name }} </span><br>              <span><strong>Email: </strong> {{ userInfo?.email }} </span>            </div>            <hr>            <div class="card-body">              <h4>Organization Settings</h4>              <a routerLink="/settings/organization"><i>Update your organization settings</i></a>            </div>          </div>        </div>        <div class="col-md-6 mb-2">          <div class="card">            <mat-card-title class="card-header text-center">              ACCOUNT MANAGEMENT            </mat-card-title>            <div class="card-body">              <h4>Change Password</h4>              <a routerLink="/settings"><i>Change your account password</i></a>            </div>            <hr>            <div class="card-body">              <h4>Two-step authentication</h4>              <a routerLink="/settings"><i>Secure your account with two step verification</i></a>            </div>            <hr>            <div class="card-body">              <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary" (click)="logout()"> LOGOUT ADMIN </button>            </div>          </div>        </div>        <div class="col-12">          <div class="card mb-3">            <mat-card-title class="card-header">              <div class="row">                TRUSTED USERS                <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary ml-auto mr-2" (click)="downloadCsv()"> EXPORT </button>              </div>            </mat-card-title>            <div class="card-body">              <mat-form-field appearance="outline">                <mat-label> Filter </mat-label>                <input matInput type="text" (keyup)="doFilter($event.target.value)" placeholder="Filter">                <mat-icon matSuffix>search</mat-icon>              </mat-form-field>              <mat-table class="mat-elevation-z10" [dataSource]="dataSource" matSort matSortActive="name"                         matSortDirection="asc" matSortDisableClear>                <ng-container matColumnDef="name">                  <mat-header-cell *matHeaderCellDef mat-sort-header> NAME </mat-header-cell>                  <mat-cell *matCellDef="let user"> {{user.name}} </mat-cell>                </ng-container>                <ng-container matColumnDef="email">                  <mat-header-cell *matHeaderCellDef mat-sort-header> EMAIL </mat-header-cell>                  <mat-cell *matCellDef="let user"> {{user.email}} </mat-cell>                </ng-container>                <ng-container matColumnDef="userId">                  <mat-header-cell *matHeaderCellDef mat-sort-header> USER ID </mat-header-cell>                  <mat-cell *matCellDef="let user"> {{user.userid}} </mat-cell>                </ng-container>                <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>                <mat-row *matRowDef="let user; columns: displayedColumns"></mat-row>              </mat-table>              <mat-paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20, 50, 100]" showFirstLastButtons></mat-paginator>            </div>          </div>        </div>      </div>    </div>    <app-footer appMenuSelection></app-footer>  </div>  <!-- ============================================================== -->  <!-- End Page content -->  <!-- ============================================================== --></div></div>'
+        var COMPONENT_TEMPLATE = '<div><!-- Begin page --><div class="wrapper">  <app-sidebar></app-sidebar>  <!-- ============================================================== -->  <!-- Start Page Content here -->  <!-- ============================================================== -->  <div id="content">    <app-topbar></app-topbar>    <!-- Start Content-->    <div class="container-fluid" appMenuSelection>      <nav aria-label="breadcrumb">        <ol class="breadcrumb">          <li class="breadcrumb-item"><a routerLink="/home">Home</a></li>          <li class="breadcrumb-item active" aria-current="page">Settings</li>        </ol>      </nav>      <div class="row">        <div class="col-md-6 mb-2">          <div class="card">            <mat-card-title class="card-header text-center"> SETTINGS </mat-card-title>            <div class="card-body">              <h4>CICADA Admin Credentials</h4>              <span><strong>UserId: </strong> {{ userInfo?.userid }} </span><br />              <span><strong>Username: </strong> {{ userInfo?.name }} </span><br />              <span><strong>Email: </strong> {{ userInfo?.email }} </span>            </div>            <hr />            <div class="card-body">              <h4>Organization Settings</h4>              <a routerLink="/settings/organization"><i>Update your organization settings</i></a>            </div>          </div>        </div>        <div class="col-md-6 mb-2">          <div class="card">            <mat-card-title class="card-header text-center"> ACCOUNT MANAGEMENT </mat-card-title>            <div class="card-body">              <h4>Change Password</h4>              <a routerLink="/settings"><i>Change your account password</i></a>            </div>            <hr />            <div class="card-body">              <h4>Two-step authentication</h4>              <a routerLink="/settings"><i>Secure your account with two step verification</i></a>            </div>            <hr />            <div class="card-body">              <button                mat-raised-button                color="primary"                type="button"                class="btn btn-outline-primary"                (click)="logout()"              >                LOGOUT ADMIN              </button>            </div>          </div>        </div>        <div class="col-12">          <div class="card mb-3">            <mat-card-title class="card-header">              <div class="row">                TRUSTED USERS                <button                  mat-raised-button                  color="primary"                  type="button"                  class="btn btn-outline-primary ml-auto mr-2"                  (click)="downloadCsv()"                >                  EXPORT                </button>              </div>            </mat-card-title>            <div class="card-body">              <mat-form-field appearance="outline">                <mat-label> Filter </mat-label>                <input                  matInput                  type="text"                  (keyup)="doFilter($event.target.value)"                  placeholder="Filter"                />                <mat-icon matSuffix>search</mat-icon>              </mat-form-field>              <mat-table                class="mat-elevation-z10"                [dataSource]="dataSource"                matSort                matSortActive="name"                matSortDirection="asc"                matSortDisableClear              >                <ng-container matColumnDef="name">                  <mat-header-cell *matHeaderCellDef mat-sort-header> NAME </mat-header-cell>                  <mat-cell *matCellDef="let user"> {{ user.name }} </mat-cell>                </ng-container>                <ng-container matColumnDef="email">                  <mat-header-cell *matHeaderCellDef mat-sort-header> EMAIL </mat-header-cell>                  <mat-cell *matCellDef="let user"> {{ user.email }} </mat-cell>                </ng-container>                <ng-container matColumnDef="userId">                  <mat-header-cell *matHeaderCellDef mat-sort-header> USER ID </mat-header-cell>                  <mat-cell *matCellDef="let user"> {{ user.userid }} </mat-cell>                </ng-container>                <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>                <mat-row *matRowDef="let user; columns: displayedColumns"></mat-row>              </mat-table>              <mat-paginator                [pageSize]="5"                [pageSizeOptions]="[5, 10, 20, 50, 100]"                showFirstLastButtons              ></mat-paginator>            </div>          </div>        </div>      </div>    </div>    <app-footer appMenuSelection></app-footer>  </div>  <!-- ============================================================== -->  <!-- End Page content -->  <!-- ============================================================== --></div></div>'
     var COMPONENTS = [{'name': 'AccountDetailsComponent', 'selector': 'app-account-details'},{'name': 'AccountsComponent', 'selector': 'app-accounts'},{'name': 'AccountSearchComponent', 'selector': 'app-account-search'},{'name': 'AdminComponent', 'selector': 'app-admin'},{'name': 'AppComponent', 'selector': 'app-root'},{'name': 'AuthComponent', 'selector': 'app-auth'},{'name': 'CreateAccountComponent', 'selector': 'app-create-account'},{'name': 'ErrorDialogComponent', 'selector': 'app-error-dialog'},{'name': 'FooterComponent', 'selector': 'app-footer'},{'name': 'FooterStubComponent', 'selector': 'app-footer'},{'name': 'NetworkStatusComponent', 'selector': 'app-network-status'},{'name': 'OrganizationComponent', 'selector': 'app-organization'},{'name': 'PagesComponent', 'selector': 'app-pages'},{'name': 'SettingsComponent', 'selector': 'app-settings'},{'name': 'SidebarComponent', 'selector': 'app-sidebar'},{'name': 'SidebarStubComponent', 'selector': 'app-sidebar'},{'name': 'TokenDetailsComponent', 'selector': 'app-token-details'},{'name': 'TokensComponent', 'selector': 'app-tokens'},{'name': 'TopbarComponent', 'selector': 'app-topbar'},{'name': 'TopbarStubComponent', 'selector': 'app-topbar'},{'name': 'TransactionDetailsComponent', 'selector': 'app-transaction-details'},{'name': 'TransactionsComponent', 'selector': 'app-transactions'}];
     var DIRECTIVES = [{'name': 'MenuSelectionDirective', 'selector': '[appMenuSelection]'},{'name': 'MenuToggleDirective', 'selector': '[appMenuToggle]'},{'name': 'PasswordToggleDirective', 'selector': '[appPasswordToggle]'},{'name': 'RouterLinkDirectiveStub', 'selector': '[appRouterLink]'}];
     var ACTUAL_COMPONENT = {'name': 'SettingsComponent'};

docs/compodoc/components/SidebarComponent.html

@@ -243,10 +243,9 @@ export class SidebarComponent implements OnInit {
 <div id="sidebar">
   <app-network-status></app-network-status>
   <nav>
-
     <div class="sidebar-header">
       <h3>
-        <img class="full-width" src="assets/images/CIC-Logo-white.png" alt="CIC Admin Dashboard">
+        <img class="full-width" src="assets/images/CIC-Logo-white.png" alt="CIC Admin Dashboard" />
       </h3>
       <strong>CICADA</strong>
     </div>
@@ -327,7 +326,7 @@ export class SidebarComponent implements OnInit {
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><!-- ========== Left Sidebar Start ========== --><div id="sidebar">  <app-network-status></app-network-status>  <nav>    <div class="sidebar-header">      <h3>        <img class="full-width" src="assets/images/CIC-Logo-white.png" alt="CIC Admin Dashboard">      </h3>      <strong>CICADA</strong>    </div>    <ul class="list-unstyled components">      <li>        <a routerLink="/home" routerLinkActive="active" appMenuSelection>          <i class="fa fa-home"></i>          <span> Dashboard </span>        </a>      </li>      <li>        <a routerLink="/accounts" routerLinkActive="active" appMenuSelection>          <i class="fa fa-users"></i>          <span> Accounts </span>        </a>      </li>      <li>        <a routerLink="/tx" routerLinkActive="active" appMenuSelection>          <i class="fa fa-exchange"></i>          <span> Transactions </span>        </a>      </li>      <li>        <a routerLink="/tokens" routerLinkActive="active" appMenuSelection>          <i class="fa fa-money"></i>          <span> Tokens </span>        </a>      </li>      <li>        <a routerLink="/settings" routerLinkActive="active" appMenuSelection>          <i class="fa fa-cog"></i>          <span> Settings </span>        </a>      </li>      <li>        <a routerLink="/admin" routerLinkActive="active" appMenuSelection>          <i class="fa fa-user-secret"></i>          <span> Admin </span>        </a>      </li>    </ul>  </nav></div><!-- Left Sidebar End --></div>'
+        var COMPONENT_TEMPLATE = '<div><!-- ========== Left Sidebar Start ========== --><div id="sidebar">  <app-network-status></app-network-status>  <nav>    <div class="sidebar-header">      <h3>        <img class="full-width" src="assets/images/CIC-Logo-white.png" alt="CIC Admin Dashboard" />      </h3>      <strong>CICADA</strong>    </div>    <ul class="list-unstyled components">      <li>        <a routerLink="/home" routerLinkActive="active" appMenuSelection>          <i class="fa fa-home"></i>          <span> Dashboard </span>        </a>      </li>      <li>        <a routerLink="/accounts" routerLinkActive="active" appMenuSelection>          <i class="fa fa-users"></i>          <span> Accounts </span>        </a>      </li>      <li>        <a routerLink="/tx" routerLinkActive="active" appMenuSelection>          <i class="fa fa-exchange"></i>          <span> Transactions </span>        </a>      </li>      <li>        <a routerLink="/tokens" routerLinkActive="active" appMenuSelection>          <i class="fa fa-money"></i>          <span> Tokens </span>        </a>      </li>      <li>        <a routerLink="/settings" routerLinkActive="active" appMenuSelection>          <i class="fa fa-cog"></i>          <span> Settings </span>        </a>      </li>      <li>        <a routerLink="/admin" routerLinkActive="active" appMenuSelection>          <i class="fa fa-user-secret"></i>          <span> Admin </span>        </a>      </li>    </ul>  </nav></div><!-- Left Sidebar End --></div>'
     var COMPONENTS = [{'name': 'AccountDetailsComponent', 'selector': 'app-account-details'},{'name': 'AccountsComponent', 'selector': 'app-accounts'},{'name': 'AccountSearchComponent', 'selector': 'app-account-search'},{'name': 'AdminComponent', 'selector': 'app-admin'},{'name': 'AppComponent', 'selector': 'app-root'},{'name': 'AuthComponent', 'selector': 'app-auth'},{'name': 'CreateAccountComponent', 'selector': 'app-create-account'},{'name': 'ErrorDialogComponent', 'selector': 'app-error-dialog'},{'name': 'FooterComponent', 'selector': 'app-footer'},{'name': 'FooterStubComponent', 'selector': 'app-footer'},{'name': 'NetworkStatusComponent', 'selector': 'app-network-status'},{'name': 'OrganizationComponent', 'selector': 'app-organization'},{'name': 'PagesComponent', 'selector': 'app-pages'},{'name': 'SettingsComponent', 'selector': 'app-settings'},{'name': 'SidebarComponent', 'selector': 'app-sidebar'},{'name': 'SidebarStubComponent', 'selector': 'app-sidebar'},{'name': 'TokenDetailsComponent', 'selector': 'app-token-details'},{'name': 'TokensComponent', 'selector': 'app-tokens'},{'name': 'TopbarComponent', 'selector': 'app-topbar'},{'name': 'TopbarStubComponent', 'selector': 'app-topbar'},{'name': 'TransactionDetailsComponent', 'selector': 'app-transaction-details'},{'name': 'TransactionsComponent', 'selector': 'app-transactions'}];
     var DIRECTIVES = [{'name': 'MenuSelectionDirective', 'selector': '[appMenuSelection]'},{'name': 'MenuToggleDirective', 'selector': '[appMenuToggle]'},{'name': 'PasswordToggleDirective', 'selector': '[appPasswordToggle]'},{'name': 'RouterLinkDirectiveStub', 'selector': '[appRouterLink]'}];
     var ACTUAL_COMPONENT = {'name': 'SidebarComponent'};

docs/compodoc/components/SidebarStubComponent.html

@@ -109,15 +109,15 @@
 
 
     <div class="tab-pane fade  tab-source-code" id="c-source">
-        <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import {Component} from &#x27;@angular/core&#x27;;
+        <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import { Component } from &#x27;@angular/core&#x27;;
 
-@Component({selector: &#x27;app-sidebar&#x27;, template: &#x27;&#x27;})
+@Component({ selector: &#x27;app-sidebar&#x27;, template: &#x27;&#x27; })
 export class SidebarStubComponent {}
 
-@Component({selector: &#x27;app-topbar&#x27;, template: &#x27;&#x27;})
+@Component({ selector: &#x27;app-topbar&#x27;, template: &#x27;&#x27; })
 export class TopbarStubComponent {}
 
-@Component({selector: &#x27;app-footer&#x27;, template: &#x27;&#x27;})
+@Component({ selector: &#x27;app-footer&#x27;, template: &#x27;&#x27; })
 export class FooterStubComponent {}
 </code></pre>
     </div>

docs/compodoc/components/TokenDetailsComponent.html

@@ -377,32 +377,43 @@ export class TokenDetailsComponent implements OnInit {
     <mat-card-title class="card-header">
       <div class="row">
         TOKEN DETAILS
-        <button mat-raised-button type="button" class="btn btn-outline-secondary ml-auto mr-2" (click)="close()"> CLOSE </button>
+        <button
+          mat-raised-button
+          type="button"
+          class="btn btn-outline-secondary ml-auto mr-2"
+          (click)="close()"
+        >
+          CLOSE
+        </button>
       </div>
     </mat-card-title>
     <div class="card-body">
       <div>
-        <span><strong>Name:</strong> {{token?.name}}</span>
+        <span><strong>Name:</strong> {{ token?.name }}</span>
       </div>
       <div>
-        <span><strong>Symbol:</strong> {{token?.symbol}}</span>
+        <span><strong>Symbol:</strong> {{ token?.symbol }}</span>
       </div>
       <div>
-        <span><strong>Address:</strong> {{token?.address}}</span>
+        <span><strong>Address:</strong> {{ token?.address }}</span>
       </div>
       <div>
-        <span><strong>Details:</strong> A community inclusive currency for trading among lower to middle income societies.</span>
+        <span
+          ><strong>Details:</strong> A community inclusive currency for trading among lower to
+          middle income societies.</span
+        >
       </div>
       <div>
-        <span><strong>Supply:</strong> {{token?.supply | tokenRatio}}</span>
-      </div><br>
+        <span><strong>Supply:</strong> {{ token?.supply | tokenRatio }}</span>
+      </div>
+      <br />
       <div>
         <h2>Reserve</h2>
         <div>
-          <span><strong>Weight:</strong> {{token?.reserveRatio}}</span>
+          <span><strong>Weight:</strong> {{ token?.reserveRatio }}</span>
         </div>
         <div>
-          <span><strong>Owner:</strong> {{token?.owner}}</span>
+          <span><strong>Owner:</strong> {{ token?.owner }}</span>
         </div>
       </div>
     </div>
@@ -443,7 +454,7 @@ export class TokenDetailsComponent implements OnInit {
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><div *ngIf="token" class="mb-3 mt-1">  <div class="card text-center">    <mat-card-title class="card-header">      <div class="row">        TOKEN DETAILS        <button mat-raised-button type="button" class="btn btn-outline-secondary ml-auto mr-2" (click)="close()"> CLOSE </button>      </div>    </mat-card-title>    <div class="card-body">      <div>        <span><strong>Name:</strong> {{token?.name}}</span>      </div>      <div>        <span><strong>Symbol:</strong> {{token?.symbol}}</span>      </div>      <div>        <span><strong>Address:</strong> {{token?.address}}</span>      </div>      <div>        <span><strong>Details:</strong> A community inclusive currency for trading among lower to middle income societies.</span>      </div>      <div>        <span><strong>Supply:</strong> {{token?.supply | tokenRatio}}</span>      </div><br>      <div>        <h2>Reserve</h2>        <div>          <span><strong>Weight:</strong> {{token?.reserveRatio}}</span>        </div>        <div>          <span><strong>Owner:</strong> {{token?.owner}}</span>        </div>      </div>    </div>  </div></div></div>'
+        var COMPONENT_TEMPLATE = '<div><div *ngIf="token" class="mb-3 mt-1">  <div class="card text-center">    <mat-card-title class="card-header">      <div class="row">        TOKEN DETAILS        <button          mat-raised-button          type="button"          class="btn btn-outline-secondary ml-auto mr-2"          (click)="close()"        >          CLOSE        </button>      </div>    </mat-card-title>    <div class="card-body">      <div>        <span><strong>Name:</strong> {{ token?.name }}</span>      </div>      <div>        <span><strong>Symbol:</strong> {{ token?.symbol }}</span>      </div>      <div>        <span><strong>Address:</strong> {{ token?.address }}</span>      </div>      <div>        <span          ><strong>Details:</strong> A community inclusive currency for trading among lower to          middle income societies.</span        >      </div>      <div>        <span><strong>Supply:</strong> {{ token?.supply | tokenRatio }}</span>      </div>      <br />      <div>        <h2>Reserve</h2>        <div>          <span><strong>Weight:</strong> {{ token?.reserveRatio }}</span>        </div>        <div>          <span><strong>Owner:</strong> {{ token?.owner }}</span>        </div>      </div>    </div>  </div></div></div>'
     var COMPONENTS = [{'name': 'AccountDetailsComponent', 'selector': 'app-account-details'},{'name': 'AccountsComponent', 'selector': 'app-accounts'},{'name': 'AccountSearchComponent', 'selector': 'app-account-search'},{'name': 'AdminComponent', 'selector': 'app-admin'},{'name': 'AppComponent', 'selector': 'app-root'},{'name': 'AuthComponent', 'selector': 'app-auth'},{'name': 'CreateAccountComponent', 'selector': 'app-create-account'},{'name': 'ErrorDialogComponent', 'selector': 'app-error-dialog'},{'name': 'FooterComponent', 'selector': 'app-footer'},{'name': 'FooterStubComponent', 'selector': 'app-footer'},{'name': 'NetworkStatusComponent', 'selector': 'app-network-status'},{'name': 'OrganizationComponent', 'selector': 'app-organization'},{'name': 'PagesComponent', 'selector': 'app-pages'},{'name': 'SettingsComponent', 'selector': 'app-settings'},{'name': 'SidebarComponent', 'selector': 'app-sidebar'},{'name': 'SidebarStubComponent', 'selector': 'app-sidebar'},{'name': 'TokenDetailsComponent', 'selector': 'app-token-details'},{'name': 'TokensComponent', 'selector': 'app-tokens'},{'name': 'TopbarComponent', 'selector': 'app-topbar'},{'name': 'TopbarStubComponent', 'selector': 'app-topbar'},{'name': 'TransactionDetailsComponent', 'selector': 'app-transaction-details'},{'name': 'TransactionsComponent', 'selector': 'app-transactions'}];
     var DIRECTIVES = [{'name': 'MenuSelectionDirective', 'selector': '[appMenuSelection]'},{'name': 'MenuToggleDirective', 'selector': '[appMenuToggle]'},{'name': 'PasswordToggleDirective', 'selector': '[appPasswordToggle]'},{'name': 'RouterLinkDirectiveStub', 'selector': '[appRouterLink]'}];
     var ACTUAL_COMPONENT = {'name': 'TokenDetailsComponent'};

docs/compodoc/components/TokensComponent.html

@@ -766,45 +766,71 @@ export class TokensComponent implements OnInit {
         <mat-card-title class="card-header">
           <div class="row">
             Tokens
-            <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary ml-auto mr-2" (click)="downloadCsv()"> EXPORT </button>
+            <button
+              mat-raised-button
+              color="primary"
+              type="button"
+              class="btn btn-outline-primary ml-auto mr-2"
+              (click)="downloadCsv()"
+            >
+              EXPORT
+            </button>
           </div>
         </mat-card-title>
         <div class="card-body">
-
           <app-token-details [token]="token" (closeWindow)="token = $event"></app-token-details>
 
           <mat-form-field appearance="outline">
             <mat-label> Filter </mat-label>
-            <input matInput type="text" (keyup)="doFilter($event.target.value)" placeholder="Filter">
+            <input
+              matInput
+              type="text"
+              (keyup)="doFilter($event.target.value)"
+              placeholder="Filter"
+            />
             <mat-icon matSuffix>search</mat-icon>
           </mat-form-field>
 
-          <mat-table class="mat-elevation-z10 table-responsive" [dataSource]="dataSource" matSort matSortDirection="asc" matSortDisableClear>
+          <mat-table
+            class="mat-elevation-z10 table-responsive"
+            [dataSource]="dataSource"
+            matSort
+            matSortDirection="asc"
+            matSortDisableClear
+          >
             <ng-container matColumnDef="name">
               <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
-              <mat-cell *matCellDef="let token"> {{token.name}} </mat-cell>
+              <mat-cell *matCellDef="let token"> {{ token.name }} </mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="symbol">
               <mat-header-cell *matHeaderCellDef mat-sort-header> Symbol </mat-header-cell>
-              <mat-cell *matCellDef="let token"> {{token.symbol}} </mat-cell>
+              <mat-cell *matCellDef="let token"> {{ token.symbol }} </mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="address">
               <mat-header-cell *matHeaderCellDef mat-sort-header> Address </mat-header-cell>
-              <mat-cell *matCellDef="let token"> {{token.address}} </mat-cell>
+              <mat-cell *matCellDef="let token"> {{ token.address }} </mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="supply">
               <mat-header-cell *matHeaderCellDef mat-sort-header> Supply </mat-header-cell>
-              <mat-cell *matCellDef="let token"> {{token.supply | tokenRatio}} </mat-cell>
+              <mat-cell *matCellDef="let token"> {{ token.supply | tokenRatio }} </mat-cell>
             </ng-container>
 
             <mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
-            <mat-row *matRowDef="let token; columns: columnsToDisplay" (click)="viewToken(token)" matRipple></mat-row>
+            <mat-row
+              *matRowDef="let token; columns: columnsToDisplay"
+              (click)="viewToken(token)"
+              matRipple
+            ></mat-row>
           </mat-table>
 
-          <mat-paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 25, 100]" showFirstLastButtons></mat-paginator>
+          <mat-paginator
+            [pageSize]="5"
+            [pageSizeOptions]="[5, 10, 25, 100]"
+            showFirstLastButtons
+          ></mat-paginator>
         </div>
       </div>
     </div>
@@ -814,7 +840,6 @@ export class TokensComponent implements OnInit {
   <!-- End Page content -->
   <!-- ============================================================== -->
 </div>
-
 </code></pre>
     </div>
 
@@ -850,7 +875,7 @@ export class TokensComponent implements OnInit {
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><!-- Begin page --><div class="wrapper">  <app-sidebar></app-sidebar>  <!-- ============================================================== -->  <!-- Start Page Content here -->  <!-- ============================================================== -->  <div id="content">    <app-topbar></app-topbar>    <!-- Start Content-->    <div class="container-fluid" appMenuSelection>      <nav aria-label="breadcrumb">        <ol class="breadcrumb">          <li class="breadcrumb-item"><a routerLink="/home">Home</a></li>          <li class="breadcrumb-item active" aria-current="page">Tokens</li>        </ol>      </nav>      <div class="card">        <mat-card-title class="card-header">          <div class="row">            Tokens            <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary ml-auto mr-2" (click)="downloadCsv()"> EXPORT </button>          </div>        </mat-card-title>        <div class="card-body">          <app-token-details [token]="token" (closeWindow)="token = $event"></app-token-details>          <mat-form-field appearance="outline">            <mat-label> Filter </mat-label>            <input matInput type="text" (keyup)="doFilter($event.target.value)" placeholder="Filter">            <mat-icon matSuffix>search</mat-icon>          </mat-form-field>          <mat-table class="mat-elevation-z10 table-responsive" [dataSource]="dataSource" matSort matSortDirection="asc" matSortDisableClear>            <ng-container matColumnDef="name">              <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>              <mat-cell *matCellDef="let token"> {{token.name}} </mat-cell>            </ng-container>            <ng-container matColumnDef="symbol">              <mat-header-cell *matHeaderCellDef mat-sort-header> Symbol </mat-header-cell>              <mat-cell *matCellDef="let token"> {{token.symbol}} </mat-cell>            </ng-container>            <ng-container matColumnDef="address">              <mat-header-cell *matHeaderCellDef mat-sort-header> Address </mat-header-cell>              <mat-cell *matCellDef="let token"> {{token.address}} </mat-cell>            </ng-container>            <ng-container matColumnDef="supply">              <mat-header-cell *matHeaderCellDef mat-sort-header> Supply </mat-header-cell>              <mat-cell *matCellDef="let token"> {{token.supply | tokenRatio}} </mat-cell>            </ng-container>            <mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>            <mat-row *matRowDef="let token; columns: columnsToDisplay" (click)="viewToken(token)" matRipple></mat-row>          </mat-table>          <mat-paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 25, 100]" showFirstLastButtons></mat-paginator>        </div>      </div>    </div>    <app-footer appMenuSelection></app-footer>  </div>  <!-- ============================================================== -->  <!-- End Page content -->  <!-- ============================================================== --></div></div>'
+        var COMPONENT_TEMPLATE = '<div><!-- Begin page --><div class="wrapper">  <app-sidebar></app-sidebar>  <!-- ============================================================== -->  <!-- Start Page Content here -->  <!-- ============================================================== -->  <div id="content">    <app-topbar></app-topbar>    <!-- Start Content-->    <div class="container-fluid" appMenuSelection>      <nav aria-label="breadcrumb">        <ol class="breadcrumb">          <li class="breadcrumb-item"><a routerLink="/home">Home</a></li>          <li class="breadcrumb-item active" aria-current="page">Tokens</li>        </ol>      </nav>      <div class="card">        <mat-card-title class="card-header">          <div class="row">            Tokens            <button              mat-raised-button              color="primary"              type="button"              class="btn btn-outline-primary ml-auto mr-2"              (click)="downloadCsv()"            >              EXPORT            </button>          </div>        </mat-card-title>        <div class="card-body">          <app-token-details [token]="token" (closeWindow)="token = $event"></app-token-details>          <mat-form-field appearance="outline">            <mat-label> Filter </mat-label>            <input              matInput              type="text"              (keyup)="doFilter($event.target.value)"              placeholder="Filter"            />            <mat-icon matSuffix>search</mat-icon>          </mat-form-field>          <mat-table            class="mat-elevation-z10 table-responsive"            [dataSource]="dataSource"            matSort            matSortDirection="asc"            matSortDisableClear          >            <ng-container matColumnDef="name">              <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>              <mat-cell *matCellDef="let token"> {{ token.name }} </mat-cell>            </ng-container>            <ng-container matColumnDef="symbol">              <mat-header-cell *matHeaderCellDef mat-sort-header> Symbol </mat-header-cell>              <mat-cell *matCellDef="let token"> {{ token.symbol }} </mat-cell>            </ng-container>            <ng-container matColumnDef="address">              <mat-header-cell *matHeaderCellDef mat-sort-header> Address </mat-header-cell>              <mat-cell *matCellDef="let token"> {{ token.address }} </mat-cell>            </ng-container>            <ng-container matColumnDef="supply">              <mat-header-cell *matHeaderCellDef mat-sort-header> Supply </mat-header-cell>              <mat-cell *matCellDef="let token"> {{ token.supply | tokenRatio }} </mat-cell>            </ng-container>            <mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>            <mat-row              *matRowDef="let token; columns: columnsToDisplay"              (click)="viewToken(token)"              matRipple            ></mat-row>          </mat-table>          <mat-paginator            [pageSize]="5"            [pageSizeOptions]="[5, 10, 25, 100]"            showFirstLastButtons          ></mat-paginator>        </div>      </div>    </div>    <app-footer appMenuSelection></app-footer>  </div>  <!-- ============================================================== -->  <!-- End Page content -->  <!-- ============================================================== --></div></div>'
     var COMPONENTS = [{'name': 'AccountDetailsComponent', 'selector': 'app-account-details'},{'name': 'AccountsComponent', 'selector': 'app-accounts'},{'name': 'AccountSearchComponent', 'selector': 'app-account-search'},{'name': 'AdminComponent', 'selector': 'app-admin'},{'name': 'AppComponent', 'selector': 'app-root'},{'name': 'AuthComponent', 'selector': 'app-auth'},{'name': 'CreateAccountComponent', 'selector': 'app-create-account'},{'name': 'ErrorDialogComponent', 'selector': 'app-error-dialog'},{'name': 'FooterComponent', 'selector': 'app-footer'},{'name': 'FooterStubComponent', 'selector': 'app-footer'},{'name': 'NetworkStatusComponent', 'selector': 'app-network-status'},{'name': 'OrganizationComponent', 'selector': 'app-organization'},{'name': 'PagesComponent', 'selector': 'app-pages'},{'name': 'SettingsComponent', 'selector': 'app-settings'},{'name': 'SidebarComponent', 'selector': 'app-sidebar'},{'name': 'SidebarStubComponent', 'selector': 'app-sidebar'},{'name': 'TokenDetailsComponent', 'selector': 'app-token-details'},{'name': 'TokensComponent', 'selector': 'app-tokens'},{'name': 'TopbarComponent', 'selector': 'app-topbar'},{'name': 'TopbarStubComponent', 'selector': 'app-topbar'},{'name': 'TransactionDetailsComponent', 'selector': 'app-transaction-details'},{'name': 'TransactionsComponent', 'selector': 'app-transactions'}];
     var DIRECTIVES = [{'name': 'MenuSelectionDirective', 'selector': '[appMenuSelection]'},{'name': 'MenuToggleDirective', 'selector': '[appMenuToggle]'},{'name': 'PasswordToggleDirective', 'selector': '[appPasswordToggle]'},{'name': 'RouterLinkDirectiveStub', 'selector': '[appRouterLink]'}];
     var ACTUAL_COMPONENT = {'name': 'TokensComponent'};

docs/compodoc/components/TopbarComponent.html

@@ -242,7 +242,13 @@ export class TopbarComponent implements OnInit {
         <pre class="line-numbers"><code class="language-html">&lt;!-- Topbar Start --&gt;
 &lt;nav class&#x3D;&quot;navbar navbar-expand-lg navbar-light bg-light sticky-top&quot;&gt;
   &lt;div class&#x3D;&quot;container-fluid&quot;&gt;
-    &lt;button type&#x3D;&quot;button&quot; id&#x3D;&quot;sidebarCollapse&quot; class&#x3D;&quot;navbar-btn menutoggle&quot; aria-label&#x3D;&quot;Sidebar toggle&quot; appMenuToggle&gt;
+    &lt;button
+      type&#x3D;&quot;button&quot;
+      id&#x3D;&quot;sidebarCollapse&quot;
+      class&#x3D;&quot;navbar-btn menutoggle&quot;
+      aria-label&#x3D;&quot;Sidebar toggle&quot;
+      appMenuToggle
+    &gt;
       &lt;span&gt;&lt;/span&gt;
       &lt;span&gt;&lt;/span&gt;
       &lt;span&gt;&lt;/span&gt;
@@ -285,7 +291,7 @@ export class TopbarComponent implements OnInit {
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><!-- Topbar Start --><nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">  <div class="container-fluid">    <button type="button" id="sidebarCollapse" class="navbar-btn menutoggle" aria-label="Sidebar toggle" appMenuToggle>      <span></span>      <span></span>      <span></span>    </button>  </div></nav><!-- end Topbar --></div>'
+        var COMPONENT_TEMPLATE = '<div><!-- Topbar Start --><nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">  <div class="container-fluid">    <button      type="button"      id="sidebarCollapse"      class="navbar-btn menutoggle"      aria-label="Sidebar toggle"      appMenuToggle    >      <span></span>      <span></span>      <span></span>    </button>  </div></nav><!-- end Topbar --></div>'
     var COMPONENTS = [{'name': 'AccountDetailsComponent', 'selector': 'app-account-details'},{'name': 'AccountsComponent', 'selector': 'app-accounts'},{'name': 'AccountSearchComponent', 'selector': 'app-account-search'},{'name': 'AdminComponent', 'selector': 'app-admin'},{'name': 'AppComponent', 'selector': 'app-root'},{'name': 'AuthComponent', 'selector': 'app-auth'},{'name': 'CreateAccountComponent', 'selector': 'app-create-account'},{'name': 'ErrorDialogComponent', 'selector': 'app-error-dialog'},{'name': 'FooterComponent', 'selector': 'app-footer'},{'name': 'FooterStubComponent', 'selector': 'app-footer'},{'name': 'NetworkStatusComponent', 'selector': 'app-network-status'},{'name': 'OrganizationComponent', 'selector': 'app-organization'},{'name': 'PagesComponent', 'selector': 'app-pages'},{'name': 'SettingsComponent', 'selector': 'app-settings'},{'name': 'SidebarComponent', 'selector': 'app-sidebar'},{'name': 'SidebarStubComponent', 'selector': 'app-sidebar'},{'name': 'TokenDetailsComponent', 'selector': 'app-token-details'},{'name': 'TokensComponent', 'selector': 'app-tokens'},{'name': 'TopbarComponent', 'selector': 'app-topbar'},{'name': 'TopbarStubComponent', 'selector': 'app-topbar'},{'name': 'TransactionDetailsComponent', 'selector': 'app-transaction-details'},{'name': 'TransactionsComponent', 'selector': 'app-transactions'}];
     var DIRECTIVES = [{'name': 'MenuSelectionDirective', 'selector': '[appMenuSelection]'},{'name': 'MenuToggleDirective', 'selector': '[appMenuToggle]'},{'name': 'PasswordToggleDirective', 'selector': '[appPasswordToggle]'},{'name': 'RouterLinkDirectiveStub', 'selector': '[appRouterLink]'}];
     var ACTUAL_COMPONENT = {'name': 'TopbarComponent'};

docs/compodoc/components/TopbarStubComponent.html

@@ -109,15 +109,15 @@
 
 
     <div class="tab-pane fade  tab-source-code" id="c-source">
-        <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import {Component} from &#x27;@angular/core&#x27;;
+        <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import { Component } from &#x27;@angular/core&#x27;;
 
-@Component({selector: &#x27;app-sidebar&#x27;, template: &#x27;&#x27;})
+@Component({ selector: &#x27;app-sidebar&#x27;, template: &#x27;&#x27; })
 export class SidebarStubComponent {}
 
-@Component({selector: &#x27;app-topbar&#x27;, template: &#x27;&#x27;})
+@Component({ selector: &#x27;app-topbar&#x27;, template: &#x27;&#x27; })
 export class TopbarStubComponent {}
 
-@Component({selector: &#x27;app-footer&#x27;, template: &#x27;&#x27;})
+@Component({ selector: &#x27;app-footer&#x27;, template: &#x27;&#x27; })
 export class FooterStubComponent {}
 </code></pre>
     </div>