diff --git a/src/playground/dialog/dialog-auto-focus.component.ts b/src/playground/dialog/dialog-auto-focus.component.ts index e229de29ce..7bdf32e3a1 100644 --- 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: ` + + {{ title }} + + 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. + + + + + + `, +}) +export class NbAutoFocusDialogComponent { + @Input() title: string; + + constructor(protected ref: NbDialogRef) { + } + + 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 index 191c41010e..a19a161543 100644 --- 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: ` + + {{ title }} + + 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. + + + + + + `, +}) +export class NbBackdropClickDialogComponent { + @Input() title: string; + + constructor(protected ref: NbDialogRef) { + } + + 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 index 750482a3f0..00891adf06 100644 --- 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: ` + + {{ title }} + + 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. + + + + + + `, +}) +export class NbEscDialogComponent { + @Input() title: string; + + constructor(protected ref: NbDialogRef) { + } + + 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 index 443c23c3e5..6297649f8a 100644 --- 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: ` + + {{ title }} + + 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. + + + + + + `, +}) +export class NbHasBackdropDialogComponent { + @Input() title: string; + + constructor(protected ref: NbDialogRef) { + } + + 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 index 12ded189ca..111209642a 100644 --- a/src/playground/dialog/dialog-result.component.ts +++ b/src/playground/dialog/dialog-result.component.ts @@ -44,9 +44,11 @@ export class NbDialogNamePromptComponent {
  • {{ name }}
    • `, - 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 index 146215571a..c4176cbd5f 100644 --- 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: ` + + {{ title }} + + 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. + + + + + + `, +}) +export class NbScrollDialogComponent { + @Input() title: string; + + constructor(protected ref: NbDialogRef) { + } + + 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 index b5d07e91e9..4ea34b9500 100644 --- 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: ` + + {{ title }} + + 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. + + + + + + `, +}) +export class NbShowcaseDialogComponent { + @Input() title: string; + + constructor(protected ref: NbDialogRef) { + } + + dismiss() { + this.ref.close(); + } +} + @Component({ selector: 'nb-dialog-showcase', template: '', @@ -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', }, diff --git a/src/playground/dialog/dialog.component.ts b/src/playground/dialog/dialog.component.ts deleted file mode 100644 index 001025121a..0000000000 --- a/src/playground/dialog/dialog.component.ts +++ /dev/null @@ -1,62 +0,0 @@ -import { Component, Input } from '@angular/core'; -import { NbDialogRef } from '@nebular/theme'; - -@Component({ - selector: 'nb-dialog', - template: ` - - {{ title }} - - 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. - Phasellus pretium eu velit vel posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, - per inceptos himenaeos. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos - himenaeos. Fusce sodales urna sed sapien mollis ultrices. Fusce pellentesque dui id neque feugiat lobortis. - Aenean vel erat eu dolor lacinia commodo. Curabitur lectus neque, condimentum eget augue ac, vestibulum - placerat turpis. Donec vel sem et dolor blandit luctus ut ac nisl. Donec tortor erat, luctus a libero quis, - convallis vehicula felis. Mauris arcu nunc, condimentum vitae pretium a, sagittis ut nibh. Donec convallis - facilisis ligula, in congue augue porta sit amet. Fusce neque urna, tincidunt id arcu eget, luctus hendrerit - augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. - Morbi euismod turpis non facilisis pellentesque. Phasellus tristique lobortis venenatis. Praesent - ut fermentum massa, - at ultricies augue. Praesent libero eros, lobortis quis pretium efficitur, lobortis ac sapien. Donec auctor - congue ipsum in ultrices. In at leo ipsum. Fusce nec elementum sem, semper molestie sem. Ut porttitor nulla - ligula, ornare lobortis justo finibus vel. Curabitur egestas eleifend dignissim. Integer eleifend euismod - dolor ac maximus. - Maecenas luctus aliquet turpis. Maecenas dolor ex, mattis in euismod ut, gravida vitae nisl. - Maecenas tincidunt nec - nisi ut rhoncus. Nullam tincidunt dolor neque, et egestas ante bibendum eu. Mauris sagittis risus vel odio - aliquet sollicitudin. Morbi pulvinar, lectus at tristique porttitor, mauris erat pretium justo, vitae sodales - purus augue eget purus. Ut fringilla nisi ante, nec eleifend nisi viverra id. Donec dapibus tincidunt massa - eu ornare. - Quisque at nisi mattis, viverra purus vel, tincidunt turpis. Nulla ac ipsum ac diam pulvinar pretium. - Proin vitae neque - consequat, fringilla quam nec, imperdiet neque. Cras eleifend viverra lacus. Aenean sit amet tortor ultrices, - rhoncus risus in, mollis risus. Quisque in faucibus arcu. Donec blandit id diam sit amet ultrices. Curabitur - ac eros at mi tempus dapibus sed sit amet metus. Integer viverra, leo nec semper laoreet, nibh metus viverra - turpis, at tempor nisl mauris in enim. Vestibulum eu hendrerit diam. Praesent gravida erat eu neque ornare, - id porta nulla commodo. Ut quis nisi nisl. Nulla metus turpis, porta et mi mollis, iaculis venenatis est. - Donec congue, lectus et interdum hendrerit, ipsum mauris imperdiet turpis, ut lacinia lacus eros pharetra - est. Vivamus interdum, sapien id maximus porta, leo nibh pretium erat, vitae condimentum dolor magna eget - nunc. - - - - - - `, -}) -export class NbDialogComponent { - @Input() title: string; - - constructor(protected ref: NbDialogRef) { - } - - dismiss() { - this.ref.close(); - } -} diff --git a/src/playground/playground.module.ts b/src/playground/playground.module.ts index 09f2578ad4..ae8ea24b80 100644 --- a/src/playground/playground.module.ts +++ b/src/playground/playground.module.ts @@ -201,13 +201,15 @@ import { NbCalendarKitMonthCellComponent, } from './calendar-kit/calendar-kit-full-calendar.component'; import { NbOverlayShowcaseComponent } from './overlay/overlay-showcase.component'; -import { NbDialogShowcaseComponent } from './dialog/dialog-showcase.component'; -import { NbDialogComponent } from './dialog/dialog.component'; -import { NbDialogHasBackdropComponent } from './dialog/dialog-has-backdrop.component'; -import { NbDialogBackdropClickComponent } from './dialog/dialog-backdrop-click.component'; -import { NbDialogEscComponent } from './dialog/dialog-esc.component'; -import { NbDialogScrollComponent } from './dialog/dialog-scroll.component'; -import { NbDialogAutoFocusComponent } from './dialog/dialog-auto-focus.component'; +import { NbDialogShowcaseComponent, NbShowcaseDialogComponent } from './dialog/dialog-showcase.component'; +import { NbDialogHasBackdropComponent, NbHasBackdropDialogComponent } from './dialog/dialog-has-backdrop.component'; +import { + NbBackdropClickDialogComponent, + NbDialogBackdropClickComponent, +} from './dialog/dialog-backdrop-click.component'; +import { NbDialogEscComponent, NbEscDialogComponent } from './dialog/dialog-esc.component'; +import { NbDialogScrollComponent, NbScrollDialogComponent } from './dialog/dialog-scroll.component'; +import { NbAutoFocusDialogComponent, NbDialogAutoFocusComponent } from './dialog/dialog-auto-focus.component'; import { NbDialogNamePromptComponent, NbDialogResultComponent } from './dialog/dialog-result.component'; import { NbDialogTemplateComponent } from './dialog/dialog-template.component'; @@ -398,7 +400,12 @@ export const NB_EXAMPLE_COMPONENTS = [ NbCalendarKitFullCalendarShowcaseComponent, NbCalendarKitMonthCellComponent, NbOverlayShowcaseComponent, - NbDialogComponent, + NbAutoFocusDialogComponent, + NbBackdropClickDialogComponent, + NbEscDialogComponent, + NbHasBackdropDialogComponent, + NbScrollDialogComponent, + NbShowcaseDialogComponent, NbDialogShowcaseComponent, NbDialogHasBackdropComponent, NbDialogBackdropClickComponent, @@ -424,8 +431,13 @@ export const NB_EXAMPLE_COMPONENTS = [ ...NB_EXAMPLE_COMPONENTS, ], entryComponents: [ - NbDialogComponent, + NbAutoFocusDialogComponent, NbDialogNamePromptComponent, + NbEscDialogComponent, + NbHasBackdropDialogComponent, + NbScrollDialogComponent, + NbShowcaseDialogComponent, + NbBackdropClickDialogComponent, ], }) export class NbPlaygroundModule {