fix(dialog): playground

akveo · Sep 11, 2018 · 635cc78 · 635cc78
1 parent 7a4efa7
commit 635cc78
Show file tree

Hide file tree

Showing 9 changed files with 220 additions and 103 deletions.
diff --git a/src/playground/dialog/dialog-auto-focus.component.ts b/src/playground/dialog/dialog-auto-focus.component.ts
@@ -1,9 +1,38 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
-import { NbDialogComponent } from './dialog.component';
-import { NbDialogService } from '@nebular/theme';
+import { NbDialogRef, NbDialogService } from '@nebular/theme';
 
 
+@Component({
+  selector: 'nb-dialog',
+  template: `
+    <nb-card [style.width.px]="600" [style.height.px]="500">
+      <nb-card-header>{{ title }}</nb-card-header>
+      <nb-card-body>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis tincidunt tincidunt.
+        Vestibulum vulputate maximus massa vel tristique. Suspendisse potenti. Duis aliquet purus sed dictum dictum.
+        Donec fringilla, purus at fermentum imperdiet, velit enim malesuada turpis, quis luctus arcu arcu nec orci.
+        Duis eu mattis felis. Quisque sollicitudin elementum nunc vel tincidunt. Vestibulum egestas mi nec
+        iaculis varius. Morbi in risus sed sapien ultricies feugiat. Quisque pulvinar mattis purus,
+        in aliquet massa aliquet et.
+      </nb-card-body>
+      <nb-card-footer>
+        <button nbButton hero status="primary" (click)="dismiss()">Dismiss Dialog</button>
+      </nb-card-footer>
+    </nb-card>
+  `,
+})
+export class NbAutoFocusDialogComponent {
+  @Input() title: string;
+
+  constructor(protected ref: NbDialogRef<NbAutoFocusDialogComponent>) {
+  }
+
+  dismiss() {
+    this.ref.close();
+  }
+}
+
 @Component({
   selector: 'nb-dialog-auto-focus',
   template: `
@@ -22,7 +51,6 @@ import { NbDialogService } from '@nebular/theme';
     }
   `],
 })
-
 export class NbDialogAutoFocusComponent {
   constructor(private dialogService: NbDialogService) {
   }
@@ -36,6 +64,6 @@ export class NbDialogAutoFocusComponent {
   }
 
   protected open(autoFocus: boolean) {
-    this.dialogService.open(NbDialogComponent, { autoFocus });
+    this.dialogService.open(NbAutoFocusDialogComponent, { autoFocus });
   }
 }
diff --git a/src/playground/dialog/dialog-backdrop-click.component.ts b/src/playground/dialog/dialog-backdrop-click.component.ts
@@ -1,8 +1,36 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { NbDialogRef, NbDialogService } from '@nebular/theme';
 
-import { NbDialogComponent } from './dialog.component';
-import { NbDialogService } from '@nebular/theme';
 
+@Component({
+  selector: 'nb-dialog',
+  template: `
+    <nb-card [style.width.px]="600" [style.height.px]="500">
+      <nb-card-header>{{ title }}</nb-card-header>
+      <nb-card-body>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis tincidunt tincidunt.
+        Vestibulum vulputate maximus massa vel tristique. Suspendisse potenti. Duis aliquet purus sed dictum dictum.
+        Donec fringilla, purus at fermentum imperdiet, velit enim malesuada turpis, quis luctus arcu arcu nec orci.
+        Duis eu mattis felis. Quisque sollicitudin elementum nunc vel tincidunt. Vestibulum egestas mi nec
+        iaculis varius. Morbi in risus sed sapien ultricies feugiat. Quisque pulvinar mattis purus,
+        in aliquet massa aliquet et.
+      </nb-card-body>
+      <nb-card-footer>
+        <button nbButton hero status="primary" (click)="dismiss()">Dismiss Dialog</button>
+      </nb-card-footer>
+    </nb-card>
+  `,
+})
+export class NbBackdropClickDialogComponent {
+  @Input() title: string;
+
+  constructor(protected ref: NbDialogRef<NbBackdropClickDialogComponent>) {
+  }
+
+  dismiss() {
+    this.ref.close();
+  }
+}
 
 @Component({
   selector: 'nb-dialog-backdrop-click',
@@ -22,7 +50,6 @@ import { NbDialogService } from '@nebular/theme';
     }
   `],
 })
-
 export class NbDialogBackdropClickComponent {
   constructor(private dialogService: NbDialogService) {
   }
@@ -36,6 +63,6 @@ export class NbDialogBackdropClickComponent {
   }
 
   protected open(closeOnBackdropClick: boolean) {
-    this.dialogService.open(NbDialogComponent, { closeOnBackdropClick });
+    this.dialogService.open(NbBackdropClickDialogComponent, { closeOnBackdropClick });
   }
 }
diff --git a/src/playground/dialog/dialog-esc.component.ts b/src/playground/dialog/dialog-esc.component.ts
@@ -1,8 +1,36 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { NbDialogRef, NbDialogService } from '@nebular/theme';
 
-import { NbDialogComponent } from './dialog.component';
-import { NbDialogService } from '@nebular/theme';
 
+@Component({
+  selector: 'nb-dialog',
+  template: `
+    <nb-card [style.width.px]="600" [style.height.px]="500">
+      <nb-card-header>{{ title }}</nb-card-header>
+      <nb-card-body>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis tincidunt tincidunt.
+        Vestibulum vulputate maximus massa vel tristique. Suspendisse potenti. Duis aliquet purus sed dictum dictum.
+        Donec fringilla, purus at fermentum imperdiet, velit enim malesuada turpis, quis luctus arcu arcu nec orci.
+        Duis eu mattis felis. Quisque sollicitudin elementum nunc vel tincidunt. Vestibulum egestas mi nec
+        iaculis varius. Morbi in risus sed sapien ultricies feugiat. Quisque pulvinar mattis purus,
+        in aliquet massa aliquet et.
+      </nb-card-body>
+      <nb-card-footer>
+        <button nbButton hero status="primary" (click)="dismiss()">Dismiss Dialog</button>
+      </nb-card-footer>
+    </nb-card>
+  `,
+})
+export class NbEscDialogComponent {
+  @Input() title: string;
+
+  constructor(protected ref: NbDialogRef<NbEscDialogComponent>) {
+  }
+
+  dismiss() {
+    this.ref.close();
+  }
+}
 
 @Component({
   selector: 'nb-dialog-esc',
@@ -22,7 +50,6 @@ import { NbDialogService } from '@nebular/theme';
     }
   `],
 })
-
 export class NbDialogEscComponent {
   constructor(private dialogService: NbDialogService) {
   }
@@ -36,6 +63,6 @@ export class NbDialogEscComponent {
   }
 
   protected open(closeOnEsc: boolean) {
-    this.dialogService.open(NbDialogComponent, { closeOnEsc });
+    this.dialogService.open(NbEscDialogComponent, { closeOnEsc });
   }
 }
diff --git a/src/playground/dialog/dialog-has-backdrop.component.ts b/src/playground/dialog/dialog-has-backdrop.component.ts
@@ -1,8 +1,36 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { NbDialogRef, NbDialogService } from '@nebular/theme';
 
-import { NbDialogComponent } from './dialog.component';
-import { NbDialogService } from '@nebular/theme';
 
+@Component({
+  selector: 'nb-dialog',
+  template: `
+    <nb-card [style.width.px]="600" [style.height.px]="500">
+      <nb-card-header>{{ title }}</nb-card-header>
+      <nb-card-body>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis tincidunt tincidunt.
+        Vestibulum vulputate maximus massa vel tristique. Suspendisse potenti. Duis aliquet purus sed dictum dictum.
+        Donec fringilla, purus at fermentum imperdiet, velit enim malesuada turpis, quis luctus arcu arcu nec orci.
+        Duis eu mattis felis. Quisque sollicitudin elementum nunc vel tincidunt. Vestibulum egestas mi nec
+        iaculis varius. Morbi in risus sed sapien ultricies feugiat. Quisque pulvinar mattis purus,
+        in aliquet massa aliquet et.
+      </nb-card-body>
+      <nb-card-footer>
+        <button nbButton hero status="primary" (click)="dismiss()">Dismiss Dialog</button>
+      </nb-card-footer>
+    </nb-card>
+  `,
+})
+export class NbHasBackdropDialogComponent {
+  @Input() title: string;
+
+  constructor(protected ref: NbDialogRef<NbHasBackdropDialogComponent>) {
+  }
+
+  dismiss() {
+    this.ref.close();
+  }
+}
 
 @Component({
   selector: 'nb-dialog-has-backdrop',
@@ -22,7 +50,6 @@ import { NbDialogService } from '@nebular/theme';
     }
   `],
 })
-
 export class NbDialogHasBackdropComponent {
   constructor(private dialogService: NbDialogService) {
   }
@@ -36,6 +63,6 @@ export class NbDialogHasBackdropComponent {
   }
 
   protected open(hasBackdrop: boolean) {
-    this.dialogService.open(NbDialogComponent, { hasBackdrop });
+    this.dialogService.open(NbHasBackdropDialogComponent, { hasBackdrop });
   }
 }
diff --git a/src/playground/dialog/dialog-result.component.ts b/src/playground/dialog/dialog-result.component.ts
@@ -44,9 +44,11 @@ export class NbDialogNamePromptComponent {
       <li *ngFor="let name of names">{{ name }}</li>
     </ul>
   `,
-  styles: [` /deep/ nb-layout-column {
-    height: 80vw;
-  } `],
+  styles: [`
+    /deep/ nb-layout-column {
+      height: 80vw;
+    }
+  `],
 })
 export class NbDialogResultComponent {
   names: string[] = [];

diff --git a/src/playground/dialog/dialog-scroll.component.ts b/src/playground/dialog/dialog-scroll.component.ts
@@ -1,8 +1,36 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { NbDialogRef, NbDialogService } from '@nebular/theme';
 
-import { NbDialogComponent } from './dialog.component';
-import { NbDialogService } from '@nebular/theme';
 
+@Component({
+  selector: 'nb-dialog',
+  template: `
+    <nb-card [style.width.px]="600" [style.height.px]="500">
+      <nb-card-header>{{ title }}</nb-card-header>
+      <nb-card-body>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis tincidunt tincidunt.
+        Vestibulum vulputate maximus massa vel tristique. Suspendisse potenti. Duis aliquet purus sed dictum dictum.
+        Donec fringilla, purus at fermentum imperdiet, velit enim malesuada turpis, quis luctus arcu arcu nec orci.
+        Duis eu mattis felis. Quisque sollicitudin elementum nunc vel tincidunt. Vestibulum egestas mi nec
+        iaculis varius. Morbi in risus sed sapien ultricies feugiat. Quisque pulvinar mattis purus,
+        in aliquet massa aliquet et.
+      </nb-card-body>
+      <nb-card-footer>
+        <button nbButton hero status="primary" (click)="dismiss()">Dismiss Dialog</button>
+      </nb-card-footer>
+    </nb-card>
+  `,
+})
+export class NbScrollDialogComponent {
+  @Input() title: string;
+
+  constructor(protected ref: NbDialogRef<NbScrollDialogComponent>) {
+  }
+
+  dismiss() {
+    this.ref.close();
+  }
+}
 
 @Component({
   selector: 'nb-dialog-scroll',
@@ -22,7 +50,6 @@ import { NbDialogService } from '@nebular/theme';
     }
   `],
 })
-
 export class NbDialogScrollComponent {
   constructor(private dialogService: NbDialogService) {
   }
@@ -36,6 +63,6 @@ export class NbDialogScrollComponent {
   }
 
   protected open(hasScroll: boolean) {
-    this.dialogService.open(NbDialogComponent, { hasScroll });
+    this.dialogService.open(NbScrollDialogComponent, { hasScroll });
   }
 }
diff --git a/src/playground/dialog/dialog-showcase.component.ts b/src/playground/dialog/dialog-showcase.component.ts
@@ -1,8 +1,37 @@
-import { Component } from '@angular/core';
-import { NbDialogService } from '@nebular/theme';
-import { NbDialogComponent } from './dialog.component';
+import { Component, Input } from '@angular/core';
+import { NbDialogRef, NbDialogService } from '@nebular/theme';
 
 
+@Component({
+  selector: 'nb-dialog',
+  template: `
+    <nb-card [style.width.px]="600" [style.height.px]="500">
+      <nb-card-header>{{ title }}</nb-card-header>
+      <nb-card-body>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis tincidunt tincidunt.
+        Vestibulum vulputate maximus massa vel tristique. Suspendisse potenti. Duis aliquet purus sed dictum dictum.
+        Donec fringilla, purus at fermentum imperdiet, velit enim malesuada turpis, quis luctus arcu arcu nec orci.
+        Duis eu mattis felis. Quisque sollicitudin elementum nunc vel tincidunt. Vestibulum egestas mi nec
+        iaculis varius. Morbi in risus sed sapien ultricies feugiat. Quisque pulvinar mattis purus,
+        in aliquet massa aliquet et.
+      </nb-card-body>
+      <nb-card-footer>
+        <button nbButton hero status="primary" (click)="dismiss()">Dismiss Dialog</button>
+      </nb-card-footer>
+    </nb-card>
+  `,
+})
+export class NbShowcaseDialogComponent {
+  @Input() title: string;
+
+  constructor(protected ref: NbDialogRef<NbShowcaseDialogComponent>) {
+  }
+
+  dismiss() {
+    this.ref.close();
+  }
+}
+
 @Component({
   selector: 'nb-dialog-showcase',
   template: '<button class="btn btn-primary" (click)="open()">Open Dialog</button>',
@@ -15,7 +44,7 @@ export class NbDialogShowcaseComponent {
   }
 
   open() {
-    this.dialogService.open(NbDialogComponent, {
+    this.dialogService.open(NbShowcaseDialogComponent, {
       context: {
         title: 'This is a title passed to the dialog component',
       },