feat(window): window may return result (#2869)

src/app/playground-components.ts

@@ -1521,6 +1521,12 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [
  component: 'WindowTemplateTitleComponent',
  name: 'Window Template Title',
  },
+ {
+ path: 'window-result.component',
+ link: '/window/window-result.component',
+ component: 'WindowResultComponent',
+ name: 'Window Result',
+ },
  ],
  },
  {

src/framework/theme/components/window/window-ref.ts

@@ -9,7 +9,7 @@ import { NbWindowConfig, NbWindowState, NbWindowStateChange } from './window.opt
  * You can access rendered component as `componentRef` property of the windowRef.
  * Property `contentInstance` contains the instance of the component opened in the window.
  */
-export class NbWindowRef<T = any> {
+export class NbWindowRef<T = any, R = any> {
  componentRef: ComponentRef<NbWindowComponent>;
  componentInstance: T;
 
@@ -38,7 +38,7 @@ export class NbWindowRef<T = any> {
  }
 
  protected _closed = false;
- protected closed$ = new Subject<void>();
+ protected closed$ = new Subject<R>();
  /**
  * Emits when window was closed.
  */
@@ -78,7 +78,7 @@ export class NbWindowRef<T = any> {
  /**
  * Closes window.
  * */
- close() {
+ close(res?: R) {
  if (this._closed) {
  return;
  }
@@ -87,7 +87,7 @@ export class NbWindowRef<T = any> {
  this.componentRef.destroy();
  this.componentInstance = null;
  this.stateChange$.complete();
- this.closed$.next();
+ this.closed$.next(res);
  this.closed$.complete();
  }
 }

src/framework/theme/components/window/window.service.ts

@@ -86,6 +86,11 @@ import { NB_DOCUMENT } from '../../theme.options';
  *
  * @stacked-example(Window content from TemplateRef, window/template-window.component)
  *
+ * You could pass the optional window return value to the `NbWindowRef.close` method.
+ * The passed value would be emitted to the `NbWindowRef.onClose` listeners.
+ *
+ * @stacked-example(Result, window/window-result.component)
+ *
  * ### Configuration
  *
  * As mentioned above, `open` method of the `NbWindowService` may receive optional configuration options.

src/playground/with-layout/window/components/visitors-form.component.ts

@@ -0,0 +1,37 @@
+/*
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { NbWindowRef } from '@nebular/theme';
+
+@Component({
+ template: `
+ <form [formGroup]="form" (ngSubmit)="onSubmit()" class="form">
+ <label for="name">Enter your name:</label>
+ <input nbInput id="name" type="text" formControlName="name" />
+
+ <button nbButton type="submit" status="success">Submit</button>
+ </form>
+ `,
+})
+export class VisitorsFormComponent {
+ form: FormGroup;
+
+ constructor(private fb: FormBuilder, public windowRef: NbWindowRef) {
+ this.form = fb.group({
+ name: null,
+ });
+ }
+
+ onSubmit() {
+ this.windowRef.close(this.form.value.name);
+ }
+
+ close() {
+ this.windowRef.close();
+ }
+}

src/playground/with-layout/window/window-result.component.ts

@@ -0,0 +1,32 @@
+/*
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component } from '@angular/core';
+import { NbWindowService } from '@nebular/theme';
+import { VisitorsFormComponent } from './components/visitors-form.component';
+
+@Component({
+ template: `
+ <button nbButton status="primary" (click)="openWindow()">Open window</button>
+ <br />
+ <h3 class="h5">Window visitors:</h3>
+ <ul>
+ <li *ngFor="let visitor of visitors">{{ visitor }}</li>
+ </ul>
+ `,
+ styleUrls: ['./window.scss'],
+})
+export class WindowResultComponent {
+ visitors: string[] = [];
+
+ constructor(private windowService: NbWindowService) {}
+
+ openWindow() {
+ const windowRef = this.windowService.open(VisitorsFormComponent, { title: `Window` });
+
+ windowRef.onClose.subscribe((visitor) => this.visitors.push(visitor));
+ }
+}

src/playground/with-layout/window/window-routing.module.ts

@@ -11,6 +11,7 @@ import { WindowShowcaseComponent } from './window-showcase.component';
 import { WindowsBackdropComponent } from './windows-backdrop.component';
 import { WindowControlsComponent } from './window-controls.component';
 import { WindowTemplateTitleComponent } from './window-template-title.component';
+import { WindowResultComponent } from './window-result.component';
 
 const routes: Route[] = [
  {
@@ -33,6 +34,10 @@ const routes: Route[] = [
  path: 'window-template-title.component',
  component: WindowTemplateTitleComponent,
  },
+ {
+ path: 'window-result.component',
+ component: WindowResultComponent,
+ },
 ];
 
 @NgModule({

src/playground/with-layout/window/window.module.ts

@@ -5,6 +5,8 @@
  */
 
 import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NbButtonModule, NbCardModule, NbCheckboxModule, NbInputModule, NbWindowModule } from '@nebular/theme';
 
 import { WindowRoutingModule } from './window-routing.module';
@@ -14,6 +16,8 @@ import { WindowsBackdropComponent } from './windows-backdrop.component';
 import { FormComponent } from './components/form.component';
 import { WindowControlsComponent } from './window-controls.component';
 import { WindowTemplateTitleComponent } from './window-template-title.component';
+import { WindowResultComponent } from './window-result.component';
+import { VisitorsFormComponent } from './components/visitors-form.component';
 
 @NgModule({
  declarations: [
@@ -23,8 +27,13 @@ import { WindowTemplateTitleComponent } from './window-template-title.component'
  FormComponent,
  WindowControlsComponent,
  WindowTemplateTitleComponent,
+ WindowResultComponent,
+ VisitorsFormComponent,
  ],
  imports: [
+ CommonModule,
+ FormsModule,
+ ReactiveFormsModule,
  NbWindowModule.forRoot(),
  NbButtonModule,
  NbInputModule,

src/playground/with-layout/window/window.scss

@@ -9,6 +9,10 @@
  .text-label {
  margin-top: 1.5rem;
  }
+
+ button {
+ margin-top: 1.5rem;
+ }
 }
 
 button + button {