feat(theme): add new Window component (#713)

Closes #669

docs/structure.ts

@@ -351,6 +351,16 @@ export const structure = [
  'NbTooltipComponent',
  ],
  },
+ {
+ type: 'tabs',
+ name: 'Window',
+ icon: 'collapsable.svg',
+ source: [
+ 'NbWindowService',
+ 'NbWindowRef',
+ 'NbWindowConfig',
+ ],
+ },
  {
  type: 'group',
  name: 'Extra',

src/framework/theme/components/cdk/adapter/adapter.module.ts

@@ -4,12 +4,14 @@ import { OverlayContainer, ScrollDispatcher } from '@angular/cdk/overlay';
 import { NbOverlayContainerAdapter } from './overlay-container-adapter';
 import { NbScrollDispatcherAdapter } from './scroll-dispatcher-adapter';
 import { NbViewportRulerAdapter } from './viewport-ruler-adapter';
+import { NbBlockScrollStrategyAdapter } from './block-scroll-strategy-adapter';
 
 
 @NgModule({
  providers: [
  NbViewportRulerAdapter,
  NbOverlayContainerAdapter,
+ NbBlockScrollStrategyAdapter,
  { provide: OverlayContainer, useExisting: NbOverlayContainerAdapter },
  { provide: ScrollDispatcher, useClass: NbScrollDispatcherAdapter },
  ],

src/framework/theme/components/cdk/adapter/block-scroll-strategy-adapter.ts

@@ -0,0 +1,11 @@
+import { Injectable, Inject } from '@angular/core';
+import { BlockScrollStrategy } from '@angular/cdk/overlay';
+import { NB_DOCUMENT } from '../../../theme.options';
+import { NbViewportRulerAdapter } from './viewport-ruler-adapter';
+
+@Injectable()
+export class NbBlockScrollStrategyAdapter extends BlockScrollStrategy {
+ constructor(ruler: NbViewportRulerAdapter, @Inject(NB_DOCUMENT) document) {
+ super(ruler, document);
+ }
+}

src/framework/theme/components/window/_window-icon.component.theme.scss

@@ -0,0 +1,10 @@
+@mixin nb-window-theme() {
+ nb-window-collapse-icon,
+ nb-window-expand-icon,
+ nb-window-close-icon,
+ nb-window-minimize-icon {
+ svg path {
+ fill: nb-theme(btn-outline-fg);
+ }
+ }
+}

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

@@ -0,0 +1,4 @@
+export * from './window.module';
+export * from './window.service';
+export * from './window-ref';
+export { NbWindowConfig, NbWindowState, NB_WINDOW_CONFIG, NbWindowStateChange } from './window.options';

src/framework/theme/components/window/window-icon.component.scss

@@ -0,0 +1,7 @@
+:host {
+ display: block;
+
+ svg {
+ vertical-align: bottom;
+ }
+}

src/framework/theme/components/window/window-icon.component.ts

@@ -0,0 +1,82 @@
+import { Component, HostBinding } from '@angular/core';
+
+@Component({
+ selector: 'nb-window-collapse-icon',
+ template: `
+ <svg aria-hidden="true" xmlns="http:https://www.w3.org/2000/svg" viewBox="0 0 24 24">
+ <g fill="#2A2A2A" fill-rule="evenodd">
+ <path d="M7 17H2v-1h6v6H7v-5z"/>
+ <path d="M9 15H4v-1h6v6H9v-5zM15 9h5v1h-6V4h1v5z"/>
+ <path d="M17 7h5v1h-6V2h1v5z"/>
+ </g>
+ </svg>
+ `,
+ styleUrls: ['./window-icon.component.scss'],
+})
+export class NbWindowCollapseIconComponent {
+ @HostBinding('attr.aria-label') label = 'collapse';
+}
+
+@Component({
+ selector: 'nb-window-expand-icon',
+ template: `
+ <svg aria-hidden="true" xmlns="http:https://www.w3.org/2000/svg" viewBox="0 0 24 24">
+ <g fill="#2A2A2A" fill-rule="evenodd">
+ <path d="M4 20h5v1H3v-6h1v5z"/>
+ <path d="M6 18h5v1H5v-6h1v5zM18 6h-5V5h6v6h-1V6z"/>
+ <path d="M20 4h-5V3h6v6h-1V4z"/>
+ </g>
+ </svg>
+ `,
+ styleUrls: ['./window-icon.component.scss'],
+})
+export class NbWindowExpandIconComponent {
+ @HostBinding('attr.aria-label') label = 'expand';
+}
+
+@Component({
+ selector: 'nb-window-close-icon',
+ template: `
+ <svg
+ aria-hidden="true"
+ xmlns="http:https://www.w3.org/2000/svg"
+ xmlns:xlink="http:https://www.w3.org/1999/xlink"
+ viewBox="0 0 24 24">
+ <defs>
+ <path id="a" d="M4.1 11.4h15.8v1.2H4.1z" transform="rotate(-45.001 12 12)"/>
+ </defs>
+ <clipPath id="b">
+ <use overflow="visible" xlink:href="#a"/>
+ </clipPath>
+ <path fill="#2a2a2a" d="M1 1h22v22H1z" clip-path="url(#b)"/>
+ <g>
+ <defs>
+ <path id="c" d="M11.4 4.1h1.2v15.8h-1.2z" transform="rotate(-45.001 12 12)"/>
+ </defs>
+ <clipPath id="d">
+ <use overflow="visible" xlink:href="#c"/>
+ </clipPath>
+ <path fill="#2a2a2a" d="M1 1h22v22H1z" clip-path="url(#d)"/>
+ </g>
+ </svg>
+ `,
+ styleUrls: ['./window-icon.component.scss'],
+})
+export class NbWindowCloseIconComponent {
+ @HostBinding('attr.aria-label') label = 'close';
+}
+
+@Component({
+ selector: 'nb-window-minimize-icon',
+ template: `
+ <svg aria-hidden="true" xmlns="http:https://www.w3.org/2000/svg" viewBox="0 0 24 24">
+ <g fill="#2A2A2A" fill-rule="evenodd">
+ <path d="M4 22v-1h15v1z"/>
+ </g>
+ </svg>
+ `,
+ styleUrls: ['./window-icon.component.scss'],
+})
+export class NbWindowMinimizeIconComponent {
+ @HostBinding('attr.aria-label') label = 'minimize';
+}

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

@@ -0,0 +1,90 @@
+import { ComponentRef } from '@angular/core';
+import { Observable, ReplaySubject, Subject } from 'rxjs';
+import { NbWindowComponent } from './window.component';
+import { NbWindowConfig, NbWindowState, NbWindowStateChange } from './window.options';
+
+/**
+ * The `NbWindowRef` helps to manipulate window after it was created.
+ * The window can be dismissed by using `close` method of the windowRef.
+ * You can access rendered component as `componentRef` property of the windowRef.
+ */
+export class NbWindowRef {
+ componentRef: ComponentRef<NbWindowComponent>;
+
+ protected prevStateValue: NbWindowState;
+ protected stateValue: NbWindowState;
+ /**
+ * Current window state.
+ */
+ get state() {
+ return this.stateValue;
+ }
+ set state(newState: NbWindowState) {
+ if (newState && this.stateValue !== newState) {
+ this.prevStateValue = this.state;
+ this.stateValue = newState;
+ this.stateChange$.next({ oldState: this.prevStateValue, newState });
+ }
+ }
+
+ protected stateChange$ = new ReplaySubject<NbWindowStateChange>(1);
+ /**
+ * Emits when window state change.
+ */
+ get stateChange(): Observable<NbWindowStateChange> {
+ return this.stateChange$.asObservable();
+ }
+
+ protected _closed = false;
+ protected closed$ = new Subject();
+ /**
+ * Emits when window was closed.
+ */
+ get onClose() {
+ return this.closed$.asObservable();
+ }
+
+ constructor(public config: NbWindowConfig) {
+ this.state = config.initialState;
+ }
+
+ /**
+ * Minimize window.
+ */
+ minimize() {
+ this.state = NbWindowState.MINIMIZED;
+ }
+
+ /**
+ * Maximize window.
+ */
+ maximize() {
+ this.state = NbWindowState.MAXIMIZED;
+ }
+
+ /**
+ * Set window on top.
+ */
+ fullScreen() {
+ this.state = NbWindowState.FULL_SCREEN;
+ }
+
+ toPreviousState() {
+ this.state = this.prevStateValue;
+ }
+
+ /**
+ * Closes window.
+ * */
+ close() {
+ if (this._closed) {
+ return;
+ }
+
+ this._closed = true;
+ this.componentRef.destroy();
+ this.stateChange$.complete();
+ this.closed$.next();
+ this.closed$.complete();
+ }
+}

src/framework/theme/components/window/window.component.scss

@@ -0,0 +1,56 @@
+:host {
+ flex: 1 0 auto;
+ min-width: 20rem;
+
+ nb-card {
+ margin: 0;
+ }
+ nb-card-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding-right: 0;
+ overflow: hidden;
+ }
+ .title {
+ flex: 1 0 auto;
+ margin-right: 3rem;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ .buttons {
+ width: 9.5rem;
+ display: flex;
+ justify-content: space-evenly;
+
+ .button {
+ background: none;
+ border: none;
+ flex: 0 0 3rem;
+ padding: 0 0.8rem;
+ }
+ }
+}
+
+:host(.full-screen) {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+:host(.maximized) nb-card {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+}
+
+:host(.minimized) nb-card {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ height: auto;
+
+ nb-card-header {
+ border-bottom: none;
+ }
+}