refactor(theme): theme refactor, buttons, toaster, preloader

src/app/pages/components/components-routing.module.ts

@@ -3,14 +3,20 @@ import { Routes, RouterModule } from '@angular/router';
 
 import { ComponentsComponent } from './components.component';
 import { TreeComponent } from './tree/tree.component';
+import { ToasterComponent } from './toaster/toaster.component';
 
 const routes: Routes = [{
   path: '',
   component: ComponentsComponent,
-  children: [{
+  children: [
+  {
     path: 'tree',
     component: TreeComponent,
-  }],
+  }, {
+    path: 'toaster',
+    component: ToasterComponent,
+  },
+  ],
 }];
 
 @NgModule({
@@ -22,4 +28,5 @@ export class ComponentsRoutingModule { }
 export const routedComponents = [
   ComponentsComponent,
   TreeComponent,
+  ToasterComponent,
 ];

src/app/pages/components/toaster/toaster.component.html

@@ -0,0 +1,56 @@
+<nga-card>
+  <nga-card-header>
+    Toaster configuration
+  </nga-card-header>
+  <nga-card-body>
+    <toaster-container [toasterconfig]="config"></toaster-container>
+    <div class="form-group">
+      <label class="form-control-label">Place to show toast:</label>
+      <select class="form-control" [(ngModel)]="position" name="position">
+        <option *ngFor="let position of positions" [ngValue]="position">{{position}}</option>
+      </select>
+    </div>
+    <div class="form-group">
+      <label class="form-control-label">Animation type:</label>
+      <select class="form-control" [(ngModel)]="animationType"name="animation">
+        <option *ngFor="let type of animations" [ngValue]="type">{{type}}</option>
+      </select>
+    </div>
+    <div class="form-group">
+      <label class="form-control-label">Title:</label>
+      <input class="form-control" [(ngModel)]="title" name="title">
+    </div>
+    <form>
+      <div class="form-group">
+        <label class="form-control-label">Content:</label>
+        <input class="form-control" [(ngModel)]="content" name="content">
+      </div>
+    </form>
+    <div class="form-group">
+      <label class="form-control-label">Time to hide toast, ms. 0 to persistent toast:</label><input class="form-control" type="number" [(ngModel)]="timeout"name="timeout">
+    </div>
+    <div class="form-group">
+      <label class="form-control-label">Limit number of toasts:</label><input class="form-control" type="number" [(ngModel)]="toastsLimit" name="limit">
+    </div>
+    <div class="form-group">
+      <label class="form-control-label">Toast type:</label>
+                <select class="form-control" [(ngModel)]="type" name="type">
+                  <option *ngFor="let type of types" [ngValue]="type">{{type}}</option>
+                </select>
+    </div>
+    <div class="form-group">
+      <label class="form-control-label"><input type="checkbox" [(ngModel)]="isNewestOnTop" name="onTop">Newest on top</label>
+    </div>
+    <div class="form-group">
+      <label class="form-control-label"><input type="checkbox" [(ngModel)]="isHideOnClick"name="hideOnClick">Hide on click</label>
+    </div>
+    <div class="form-group">
+      <label class="form-control-label"><input type="checkbox" [(ngModel)]="isDuplicatesPrevented" name="noDupl">Prevent arising of duplicate toast</label>
+    </div>
+    <div class="form-group">
+      <label class="form-control-label"><input type="checkbox" [(ngModel)]="isCloseButton" name="closeBtn">Close button</label>
+    </div>
+    <button class="btn btn-default" (click)="makeToast()">Show toast</button>
+    <button class="btn btn-default" (click)="clearToasts()">Clear all toasts</button>
+  </nga-card-body>
+</nga-card>

src/app/pages/components/toaster/toaster.component.scss

@@ -0,0 +1,3 @@
+input[type='checkbox'] {
+  margin-right: 0.5rem;
+}

src/app/pages/components/toaster/toaster.component.ts

@@ -0,0 +1,52 @@
+import { Component } from '@angular/core';
+import { ToasterService, ToasterConfig, Toast } from 'angular2-toaster';
+
+@Component({
+  selector: 'ngx-toasters',
+  styleUrls: ['toaster.component.scss'],
+  templateUrl: 'toaster.component.html',
+})
+export class ToasterComponent {
+  constructor(private toasterService: ToasterService) {}
+
+  title: string = 'HI there!';
+  content: string = `I'm cool toaster!`;
+  type: string = 'default';
+  isCloseButton: boolean = true;
+  config: ToasterConfig;
+
+  isHideOnClick: boolean = true;
+  isNewestOnTop: boolean = true;
+  toastsLimit: number = 5;
+  position: string = 'toast-bottom-right';
+  timeout: number = 5000;
+  isDuplicatesPrevented: boolean = false;
+  animationType: string = 'fade';
+  types: string[] = ['default', 'info', 'wait', 'success', 'warning', 'error'];
+  animations: string[] = ['fade', 'flyLeft', 'flyRight', 'slideDown', 'slideUp'];
+  positions: string[] = ['toast-top-full-width', 'toast-bottom-full-width', 'toast-top-left', 'toast-top-center',
+    'toast-top-right', 'toast-bottom-right', 'toast-bottom-center', 'toast-bottom-left', 'toast-center'];
+
+  makeToast() {
+    this.config = new ToasterConfig({
+      positionClass: this.position,
+      timeout: this.timeout,
+      newestOnTop: this.isNewestOnTop,
+      preventDuplicates: this.isDuplicatesPrevented,
+      animation: this.animationType,
+      limit: this.toastsLimit,
+    });
+    const toast: Toast = {
+      type: this.type,
+      title: this.title,
+      body: this.content,
+      timeout: this.timeout,
+      showCloseButton: this.isCloseButton,
+    };
+    this.toasterService.popAsync(toast);
+  }
+
+  clearToasts() {
+    this.toasterService.clear();
+  }
+}