Examples UI

src/app/app-routing.module.ts

@@ -1,7 +1,33 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { HomeComponent } from './examples/home/home.component';
+import { ButtonsComponent } from './examples/buttons/buttons.component';
+import { CurrencyInputComponent } from './examples/currency-input/currency-input.component';
+import { StepperComponent } from './examples/stepper/stepper.component';
+import { DataFilterComponent } from './examples/data-filter/data-filter.component';
+import { MoreMenuComponent } from './examples/more-menu/more-menu.component';
+import { DatePickerComponent } from './examples/date-picker/date-picker.component';
+import { SelectComponent } from './examples/select/select.component';
+import { TableOfContentsComponent } from './examples/table-of-contents/table-of-contents.component';
+import { TextEditorComponent } from './examples/text-editor/text-editor.component';
+import { PageHeaderComponent } from './examples/page-header/page-header.component';
+import { DataTableComponent } from './examples/data-table/data-table.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  {path: '', redirectTo: 'home', pathMatch: 'full'},
+  {path: 'buttons',component: ButtonsComponent},
+  {path: 'currency-input',component: CurrencyInputComponent},
+  {path: 'stepper',component: StepperComponent},
+  //{path: 'data-filter',component: DataFilterComponent},
+  {path: 'more-menu',component: MoreMenuComponent},
+  {path: 'date-picker',component: DatePickerComponent},
+  {path: 'select',component: SelectComponent},
+  {path: 'home',component: HomeComponent},
+  {path: 'toc',component: TableOfContentsComponent},
+  {path: 'text-editor',component: TextEditorComponent},
+  {path: 'page-header', component: PageHeaderComponent},
+  {path: 'data-table',component: DataTableComponent}
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

src/app/app.component.html

@@ -1,187 +1,21 @@
-<sa-base-page>
-  <div class="page-header">
-    <sa-header
-      [header]="headerConfig"
-      (primaryClick)="onPrimaryClick($event)"
-      (secondaryClick)="onSecondaryClick($event)"
-    ></sa-header>
-  </div>
-</sa-base-page>
-<ng-template #myTemplate let-item>
-  <button mat-icon-button [matMenuTriggerFor]="menu">
-    <mat-icon>more_vert</mat-icon>
-  </button>
-  <mat-menu #menu="matMenu">
-    <button mat-menu-item (click)="deleteByIndex()">Delete By Index</button>
-    <button mat-menu-item (click)="deleteByPredicate(item)">Delete By Predicate</button>
-    <button mat-menu-item (click)="deleteByObject(item)">Delete By Object Matching</button>
-  </mat-menu>
-</ng-template>
-<h3 style="float: right"> Navigation Menu Component </h3>
-<sa-navigable-page [secondaryMenu]="secondaryNavMenu">
-  <h3> Header Component </h3>
-  <sa-base-page>
-    <div class="page-header">
-      <sa-header
-        [header]="headerConfig"
-        (primaryClick)="onPrimaryClick($event)"
-        (secondaryClick)="onSecondaryClick($event)"
-      ></sa-header>
-    </div>
-  </sa-base-page>
-
-  <h3> Short Number Pipe </h3>
-  <ul>
-    <li>10 => {{ 10 | abbreviateNumber: true }}</li>
-    <li>143 => {{ 143 | abbreviateNumber: true }}</li>
-    <li>-14.34 => {{ -14.34 | abbreviateNumber: true }}</li>
-    <li>-$1,000000.00 => {{ '-$1,000000.00' | abbreviateNumber: true }}</li>
-    <li>-$100000000000 => {{ '$-100000000000' | abbreviateNumber: true }}</li>
-    <li>100065783884000 => {{ '100065783884000$' | abbreviateNumber: true }}</li>
-    <li>fffff => {{ 'fffff' | abbreviateNumber }}</li>
-  </ul>
-
-  <p>{{ date | dateTime: dateFormats.timeZoneAbb }}</p>
-  <p>{{ date1 | dateTime: dateFormats.timeZoneAbb }}</p>
-  <p>{{ date2 | dateTime: dateFormats.timeZoneAbb }}</p>
-
-  <h3> Button Component </h3>
-  <sa-button [config]="saveButtonConfig" (onClick)="onClick()"></sa-button>
-
-  <br />
-  <h3> Currency Inpput Component </h3>
-  <mat-form-field>
-    <mat-label>Currency</mat-label>
-    <sa-currency-input></sa-currency-input>
-  </mat-form-field>
-
-  <h3> Filter Component </h3>
-  <sa-data-filter [filters]="dataFilterConfigArray"></sa-data-filter>
-
-  <h3> Date Time Component </h3>
-  <mat-form-field>
-    <mat-label>Enter Date</mat-label>
-    <sa-date-picker
-      [dateConfig]="dateConfig"
-      [formControl]="data"
-      (onSelection)="dateSelectionChange($event)"
-    ></sa-date-picker>
-  </mat-form-field>
-
-  <h3> More Menu Component </h3>
-  <sa-more-menu [items]="menuItems"></sa-more-menu>
-
-  <h3> Select Component </h3>
-  <mat-form-field>
-    <mat-label>Select</mat-label>
-    <sa-select [config]="selectOptions" [formControl]="select"></sa-select>
-  </mat-form-field>
-
-  <h3> Stepper Component </h3>
-  <sa-stepper [value]="2" label="Stepper"></sa-stepper>
-
-  <h3> Text Editor Component </h3>
-  <form [formGroup]="editorForm">
-    <mat-form-field style="width: 100%">
-      <mat-label>Text Editor</mat-label>
-      <sa-text-editor [required]="true" formControlName="description" name="Description"></sa-text-editor>
-    </mat-form-field>
-  </form>
-
-  <h3> Data Table Component </h3>
-  <sa-button [config]="saveButtonConfig" (onClick)="updateTable()"></sa-button>
-  <button mat-raised-button (click)="refreshTable()">Refresh Table</button>
-
-  <ng-template #selectOptionBody let-item>{{ item }}</ng-template>
-
-  <ng-template #myTemplate let-item>
-    <button mat-icon-button [matMenuTriggerFor]="menu">
-      <mat-icon>more_vert</mat-icon>
-    </button>
-    <mat-menu #menu="matMenu">
-      <button mat-menu-item (click)="deleteByIndex()">Delete By Index</button>
-      <button mat-menu-item (click)="deleteByPredicate(item)">Delete By Predicate</button>
-      <button mat-menu-item (click)="deleteByObject(item)">Delete By Object Matching</button>
-    </mat-menu>
-  </ng-template>
-
-  <ng-template #colTemplate let-column="column" let-row="row">
-    <div matTooltip="my tooltip "> Something very long that </div>
-  </ng-template>
-  <h3 id="reactiveForms">Reactive Forms and patch value</h3>
-
-  <button type="button" (click)="hide = !!!hide"> hide / show </button>
-
-  <button type="button" (click)="quillform.enabled ? quillform.disable() : quillform.enable()">
-    disable / enable
-  </button>
-
-  <button type="button" (click)="backgroundColor = backgroundColor ? '' : 'grey'">toggle backgroundColor </button>
-
-  <pre>{{ quillform.get('editor').value }}</pre>
-  <button type="button" (click)="patchValue()">patchValue</button>
-  <button type="button" (click)="setControl()">setControl</button>
-  <button (click)="toggleReadOnly()">Toggle ReadOnly</button>
-  <button (click)="toggleRequired()">Toggle Required</button>
-  <p>Readonly: {{ isReadOnly }} Required: {{ isRequired }}</p>
-
-  <form [formGroup]="quillform">
-    FormControl valid: {{ quillform.get('editor').valid }}<br />
-    <quill-editor
-      #editor
-      [style.display]="hide ? 'none' : 'block'"
-      [styles]="{ backgroundColor: backgroundColor }"
-      formControlName="editor"
-      [maxLength]="10"
-      [trimOnValidation]="isRequired"
-      [required]="isRequired"
-    >
-    </quill-editor>
-
-    <h4>Material Quill</h4>
-
-    <pre>{{ quillform.get('matEditor').value }}</pre>
-    FormControl valid: {{ quillform.get('matEditor').valid }}<br />
-    <mat-form-field appearance="fill" style="display: block !important">
-      <sa-text-editor
-        #matEditor
-        [style.display]="hide ? 'none' : 'block'"
-        formControlName="matEditor"
-        [maxLength]="10"
-        [required]="isRequired"
-        [readOnly]="isReadOnly"
-        [trimOnValidation]="isRequired"
-        (onContentChanged)="logChange($event)"
-        (onSelectionChanged)="logSelection($event)"
-      >
-      </sa-text-editor>
-    </mat-form-field>
-  </form>
-</sa-navigable-page>
-
-<sa-data-table [dataTable]="dataTable">
-  <ng-template #listItemTemplate let-row="row">
-    <mat-list-item>Area: {{ row.area }} Line: {{ row.line }} Machine: {{ row.machine }}</mat-list-item>
-    <mat-divider></mat-divider>
-  </ng-template>
-</sa-data-table>
-
-<ng-template #titleTemplate let-column="column" let-row="row">
-  <td class="text-truncate" matTooltip="{{ row['title'] }}">
-    {{ row['title'] }}
-  </td>
-</ng-template>
-
-<ng-template #issueTemplate let-column="column" let-row="row">
-  <td class="text-truncate" matTooltip="{{ row['issue'] }}">
-    {{ row['issue'] }}
-  </td>
-</ng-template>
-
-<ng-template #statusTemplate let-column="column" let-row="row">
-  <div *ngIf="row['status']">
-    <span [ngStyle]="{ width: 'max-content' }">
-      {{ row['status'] }}
-    </span>
-  </div>
-</ng-template>
+<div>
+  <mat-drawer-container style='height: 100vh' [hasBackdrop]="true">
+    <mat-drawer style='width: 200px' #drawer mode="over">
+      <mat-nav-list>
+        <a mat-list-item [href]='link' *ngFor="let link of links"> {{ link }} </a>
+      </mat-nav-list>
+    </mat-drawer>
+    <mat-drawer-content>
+      <div>
+        <mat-toolbar color='primary'>
+          <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon" (click)='drawer.toggle()'>
+            <mat-icon>menu</mat-icon>
+          </button>
+          <span>Simplified UI</span>
+          <span fxFlex></span>
+        </mat-toolbar>
+        <router-outlet style='margin: 40px'></router-outlet>
+      </div>
+    </mat-drawer-content>
+  </mat-drawer-container>
+</div>

src/app/app.component.scss

@@ -4,3 +4,4 @@
 .sa-invalid {
   background-color: blue;
 }
+