refactor(toastr): use Nebular components

src/app/pages/modal-overlays/modal-overlays.module.ts

@@ -4,8 +4,10 @@ import {
   NbButtonModule,
   NbCardModule,
   NbCheckboxModule,
-  NbDialogModule, NbInputModule,
+  NbDialogModule,
+  NbInputModule,
   NbPopoverModule,
+  NbSelectModule,
   NbTabsetModule,
   NbWindowModule,
 } from '@nebular/theme';
@@ -66,6 +68,7 @@ const MODULES = [
   NbPopoverModule,
   NbButtonModule,
   NbInputModule,
+  NbSelectModule,
 ];
 
 const SERVICES = [

src/app/pages/modal-overlays/toastr/toastr.component.html

@@ -7,56 +7,53 @@
     <div class="row">
       <div class="col-md-6 col-sm-12">
         <div class="form-group">
-          <label class="form-control-label">Place to show toast:</label>
+          <label class="label">Position:</label>
-          <div class="dropdown" ngbDropdown>
+          <nb-select [(selected)]="position" class="position-select">
-            <button class="btn btn-primary" type="button" ngbDropdownToggle>
+            <nb-option *ngFor="let p of positions" [value]="p">{{ p }}</nb-option>
-              {{ position }}
+          </nb-select>
-            </button>
-            <ul ngbDropdownMenu class="dropdown-menu">
-              <li class="dropdown-item" *ngFor="let p of positions" (click)="position = p">
-                {{ p }}
-              </li>
-            </ul>
-          </div>
         </div>
+
         <div class="form-group">
-          <label class="form-control-label">Title:</label>
+          <label class="label">Title:</label>
-          <input class="form-control" [(ngModel)]="title" name="title">
+          <input nbInput [(ngModel)]="title" name="title">
         </div>
+
         <form>
           <div class="form-group">
-            <label class="form-control-label">Content:</label>
+            <label class="label">Content:</label>
-            <input class="form-control" [(ngModel)]="content" name="content">
+            <input nbInput [(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>
+          <label class="label">Time to hide toast, ms. 0 to persistent toast:</label>
-          <input class="form-control" type="number" [(ngModel)]="duration" name="timeout">
+          <input nbInput type="number" [(ngModel)]="duration" name="timeout">
         </div>
       </div>
 
       <div class="col-md-6 col-sm-12">
         <div class="form-group">
-          <label class="form-control-label">Toast type:</label>
+          <label class="label">Toast type:</label>
-          <div class="dropdown" ngbDropdown>
+          <nb-select [(selected)]="status">
-            <button class="btn btn-primary" type="button" ngbDropdownToggle>
+            <nb-option *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
-              {{ status }}
+          </nb-select>
-            </button>
-            <ul ngbDropdownMenu class="dropdown-menu">
-              <li class="dropdown-item" *ngFor="let t of types" (click)="status = t">{{ t }}</li>
-            </ul>
-          </div>
         </div>
 
-        <div><nb-checkbox [(ngModel)]="destroyByClick">Hide on click</nb-checkbox></div>
+        <div>
-        <div><nb-checkbox [(ngModel)]="preventDuplicates">Prevent arising of duplicate toast</nb-checkbox></div>
+          <nb-checkbox [(ngModel)]="destroyByClick">Hide on click</nb-checkbox>
-        <div><nb-checkbox [(ngModel)]="hasIcon">Show toast with icon</nb-checkbox></div>
+        </div>
+        <div>
+          <nb-checkbox [(ngModel)]="preventDuplicates">Prevent arising of duplicate toast</nb-checkbox>
+        </div>
+        <div>
+          <nb-checkbox [(ngModel)]="hasIcon">Show toast with icon</nb-checkbox>
+        </div>
       </div>
     </div>
   </nb-card-body>
 
   <nb-card-footer>
-    <button class="btn btn-primary" (click)="makeToast()">Show toast</button>
+    <button nbButton (click)="makeToast()">Show toast</button>
-    <button class="btn btn-success" (click)="openRandomToast()">Random toast</button>
+    <button nbButton status="success" (click)="openRandomToast()">Random toast</button>
   </nb-card-footer>
 </nb-card>

src/app/pages/modal-overlays/toastr/toastr.component.scss

@@ -3,27 +3,16 @@
 @import '~@nebular/theme/styles/global/breakpoints';
 
 @include nb-install-component() {
-
+  .position-select {
-  nb-card-footer {
+    min-width: 13rem;
-    padding-bottom: 0.25rem;
-
-    button {
-      @include nb-ltr(margin, 0 1rem 1rem 0);
-      @include nb-rtl(margin, 0 0 1rem 1rem);
-    }
   }
 
-  /* stylelint-disable */
+  .label {
-  toaster-container ::ng-deep {
+    display: block;
-    #toast-container .toast-close-button {
-      right: 0;
-    }
   }
-  /* stylelint-enable */
 
-  @include media-breakpoint-down(xs) {
+  nb-card-footer button:first-child {
-    .dropdown-toggle {
+    @include nb-ltr(margin-right, 1rem);
-      font-size: 0.75rem;
+    @include nb-rtl(margin-left, 1rem);
-    }
   }
 }

src/app/pages/modal-overlays/toastr/toastr.component.ts

@@ -26,17 +26,17 @@ export class ToastrComponent {
   hasIcon = true;
   position: NbGlobalPosition = NbGlobalPhysicalPosition.TOP_RIGHT;
   preventDuplicates = false;
-  status: NbComponentStatus = 'success';
+  status: NbComponentStatus = 'primary';
 
   title = 'HI there!';
   content = `I'm cool toaster!`;
 
   types: NbComponentStatus[] = [
+    'primary',
     'success',
     'info',
     'warning',
     'danger',
-    'primary',
   ];
   positions: string[] = [
     NbGlobalPhysicalPosition.TOP_RIGHT,