1415 import idcard prereqs

packages/composer-playground/package.json

@@ -87,6 +87,7 @@
     "opener": "^1.4.2",
     "socket.io": "^1.7.3",
     "typescript": "2.4.0",
+    "web-animations-js": "^2.2.5",
     "webpack": "^2.2.1"
   },
   "devDependencies": {

packages/composer-playground/src/app/app.module.ts

@@ -24,6 +24,7 @@ import { NoContentComponent } from './no-content';
 import { VersionCheckComponent } from './version-check';
 import { FooterComponent } from './footer';
 import { ServicesModule } from './services/services.module';
+import { DrawerModule } from './common/drawer';
 
 let actionBasedIcons = require.context('../assets/svg/action-based', false, /.*\.svg$/);
 actionBasedIcons.keys().forEach(actionBasedIcons);
@@ -74,6 +75,7 @@ type StoreType = {
             storageType: 'localStorage'
         }),
         NgbModule.forRoot(),
+        DrawerModule.forRoot()
     ],
     providers: [ // expose our Services and Providers into Angular's dependency injection
         ENV_PROVIDERS,

packages/composer-playground/src/app/common/drawer/active-drawer.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+
+/**
+ * A reference to the active drawer. Instances of this class
+ * can be injected into components passed as drawer content.
+ */
+@Injectable()
+export class ActiveDrawer {
+  /**
+   * Can be used to close the drawer, passing an optional result.
+   */
+  close(result?: any): void {} // tslint:disable-line:no-empty
+
+  /**
+   * Can be used to dismiss the drawer, passing an optional reason.
+   */
+  dismiss(reason?: any): void {} // tslint:disable-line:no-empty
+}

packages/composer-playground/src/app/common/drawer/content-ref.ts

@@ -0,0 +1,8 @@
+import {
+  ViewRef,
+  ComponentRef
+} from '@angular/core';
+
+export class ContentRef {
+  constructor(public nodes: any[], public viewRef?: ViewRef, public componentRef?: ComponentRef<any>) {}
+}

packages/composer-playground/src/app/common/drawer/drawer-backdrop.component.scss

@@ -0,0 +1,13 @@
+@import '../../../assets/styles/base/_colors.scss';
+@import '../../../assets/styles/base/_variables.scss';
+
+drawer-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  background-color: $black;
+  opacity: 0;
+}

packages/composer-playground/src/app/common/drawer/drawer-backdrop.component.spec.ts

@@ -0,0 +1,59 @@
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+import { DrawerBackdropComponent } from './drawer-backdrop.component';
+import { DrawerDismissReasons } from './drawer-dismiss-reasons';
+
+import * as sinon from 'sinon';
+import * as chai from 'chai';
+
+let should = chai.should();
+
+describe('DrawerBackdropComponent', () => {
+  let sandbox;
+  let fixture: ComponentFixture<DrawerBackdropComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [DrawerBackdropComponent],
+      imports: [NoopAnimationsModule]
+    });
+
+    fixture = TestBed.createComponent(DrawerBackdropComponent);
+  });
+
+  it('should render backdrop with required CSS classes', () => {
+    fixture.detectChanges();
+
+    fixture.nativeElement.classList.contains('drawer-backdrop').should.be.true;
+  });
+
+  it('should produce a dismiss event on backdrop click', (done) => {
+    fixture.detectChanges();
+
+    fixture.componentInstance.dismissEvent.subscribe(($event) => {
+      try {
+        $event.should.equal(DrawerDismissReasons.BACKDROP_CLICK);
+      } catch (e) {
+        done.fail(e);
+      }
+      done();
+    });
+
+    fixture.nativeElement.click();
+  });
+
+  it('should not produce a dismiss event when click is not on backdrop', (done) => {
+    fixture.detectChanges();
+
+    fixture.componentInstance.dismissEvent.subscribe(($event) => {
+      done.fail(new Error('Should not trigger dismiss event'));
+    });
+
+    let childEl = document.createElement('div');
+    fixture.nativeElement.appendChild(childEl);
+    childEl.click();
+
+    setTimeout(done, 200);
+  });
+});

packages/composer-playground/src/app/common/drawer/drawer-backdrop.component.ts

@@ -0,0 +1,61 @@
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostBinding,
+  HostListener,
+  Input,
+  Output
+} from '@angular/core';
+
+import {
+  trigger,
+  state,
+  style,
+  animate,
+  transition
+} from '@angular/animations';
+
+import { DrawerDismissReasons } from './drawer-dismiss-reasons';
+
+@Component({
+  selector: 'drawer-backdrop',
+  template: '',
+  styleUrls: ['./drawer-backdrop.component.scss'.toString()],
+  animations: [
+    trigger('slideOpenClosed', [
+      state('open', style({
+        opacity: 0.7
+      })),
+      state('closed', style({
+        opacity: 0
+      })),
+      transition('* => open', animate('.3s ease-out')),
+      transition('* => closed', animate('.2s ease-out'))
+    ])
+  ]
+})
+export class DrawerBackdropComponent {
+
+  @HostBinding('class.closing')
+  @Input()
+  closing: boolean | string = false;
+
+  @HostBinding('class') classes = 'open drawer-backdrop';
+
+  @Output('dismissEvent') dismissEvent = new EventEmitter();
+
+  @HostBinding('@slideOpenClosed')
+  get isClosing() {
+    return this.closing ? 'closed' : 'open';
+  }
+
+  constructor(private _elRef: ElementRef) {}
+
+  @HostListener('click', ['$event.target'])
+  backdropClick(target): void {
+    if (this._elRef.nativeElement === target) {
+      this.dismissEvent.emit(DrawerDismissReasons.BACKDROP_CLICK);
+    }
+  }
+}

packages/composer-playground/src/app/common/drawer/drawer-dismiss-reasons.ts

@@ -0,0 +1,4 @@
+export enum DrawerDismissReasons {
+  BACKDROP_CLICK,
+  ESC
+}

packages/composer-playground/src/app/common/drawer/drawer-options.ts

@@ -0,0 +1,25 @@
+/**
+ * Represent options available when opening new drawers.
+ */
+export interface DrawerOptions {
+  /**
+   * Whether a backdrop element should be created for a given drawer (true by default).
+   * Alternatively, specify 'static' for a backdrop which doesn't close the drawer on click.
+   */
+  backdrop?: boolean | 'static';
+
+  /**
+   * An element to which to attach newly opened drawer windows.
+   */
+  container?: string;
+
+  /**
+   * Whether to close the drawer when escape key is pressed (true by default).
+   */
+  keyboard?: boolean;
+
+  /**
+   * Custom class to append to the drawer window
+   */
+  drawerClass?: string;
+}

packages/composer-playground/src/app/common/drawer/drawer-ref.ts

@@ -0,0 +1,93 @@
+import { Injectable, ComponentRef } from '@angular/core';
+
+import { DrawerBackdropComponent } from './drawer-backdrop.component';
+import { DrawerComponent } from './drawer.component';
+import { ContentRef } from './content-ref';
+
+/**
+ * A reference to a newly opened drawer.
+ */
+@Injectable()
+export class DrawerRef {
+  /**
+   * A promise that is resolved when a drawer is closed and rejected when a drawer is dismissed.
+   */
+  result: Promise<any>;
+
+  private resolve: (result?: any) => void;
+  private reject: (reason?: any) => void;
+
+  /**
+   * The instance of component used as drawer's content.
+   * Undefined when a TemplateRef is used as drawer's content.
+   */
+  get componentInstance(): any {
+    if (this.contentRef.componentRef) {
+      return this.contentRef.componentRef.instance;
+    }
+  }
+
+  // only needed to keep TS1.8 compatibility
+  set componentInstance(instance: any) {} // tslint:disable-line:no-empty
+
+  constructor(private drawerCmptRef: ComponentRef<DrawerComponent>, private contentRef: ContentRef, private backdropCmptRef?: ComponentRef<DrawerBackdropComponent>) {
+    drawerCmptRef.instance.dismissEvent.subscribe((reason: any) => { this.dismiss(reason); });
+    drawerCmptRef.instance.closedEvent.subscribe(() => { this.removeDrawerElements(); });
+    if (backdropCmptRef) {
+      backdropCmptRef.instance.dismissEvent.subscribe((reason: any) => { this.dismiss(reason); });
+    }
+
+    this.result = new Promise((resolve, reject) => {
+      this.resolve = resolve;
+      this.reject = reject;
+    });
+    // tslint:disable-next-line:no-empty
+    this.result.then(null, () => {});
+  }
+
+  /**
+   * Can be used to close a drawer, passing an optional result.
+   */
+  close(result?: any): void {
+    if (this.drawerCmptRef) {
+      this.resolve(result);
+      this.closeDrawer();
+    }
+  }
+
+  /**
+   * Can be used to dismiss a drawer, passing an optional reason.
+   */
+  dismiss(reason?: any): void {
+    if (this.drawerCmptRef) {
+      this.reject(reason);
+      this.closeDrawer();
+    }
+  }
+
+  private closeDrawer() {
+    this.drawerCmptRef.instance.closing = true;
+    if (this.backdropCmptRef) {
+      this.backdropCmptRef.instance.closing = true;
+    }
+  }
+
+  private removeDrawerElements() {
+    const windowNativeEl = this.drawerCmptRef.location.nativeElement;
+    windowNativeEl.parentNode.removeChild(windowNativeEl);
+    this.drawerCmptRef.destroy();
+
+    if (this.backdropCmptRef) {
+      const backdropNativeEl = this.backdropCmptRef.location.nativeElement;
+      backdropNativeEl.parentNode.removeChild(backdropNativeEl);
+      this.backdropCmptRef.destroy();
+    }
+
+    if (this.contentRef && this.contentRef.viewRef) {
+      this.contentRef.viewRef.destroy();
+    }
+
+    this.drawerCmptRef = null;
+    this.contentRef = null;
+  }
+}