@coolon/angular-ui-powerups 0.0.24 → 0.0.25

package/src/lib/directives/focus-binding.directive.spec.ts

@@ -0,0 +1,8 @@
+import { FocusBindingDirective } from './focus-binding.directive';
+
+describe('FocusBindingDirective', () => {
+  it('should create an instance', () => {
+    const directive = new FocusBindingDirective(null, null);
+    expect(directive).toBeTruthy();
+  });
+});

package/src/lib/directives/focus-binding.directive.ts

@@ -0,0 +1,108 @@
+import {DOCUMENT} from '@angular/common';
+import {AfterViewInit, Directive, ElementRef, HostListener, Inject, Input, NgZone, OnInit} from '@angular/core';
+import {Dsl, HasFocusTracking, Logger} from '@coolon/pectin';
+import {DisposableComponent} from '../components/disposable-component';
+
+
+@Directive({
+  // tslint:disable-next-line:directive-selector
+  selector: '[pectinFocusBinding]'
+})
+export class FocusBindingDirective extends DisposableComponent implements OnInit, AfterViewInit {
+
+  private readonly document: Document;
+
+  @Input() pectinFocusBinding: HasFocusTracking;
+  @Input() focusBindingTarget: HTMLElement;
+
+  @HostListener('focusin')
+  onFocusIn() {
+    if (this.hasBinding()) {
+      this.pectinFocusBinding.focusContext.notifyFocusIn();
+    }
+  }
+
+  @HostListener('focusout')
+  onFocusOut() {
+    if (this.hasBinding()) {
+      this.pectinFocusBinding.focusContext.notifyFocusOut();
+    }
+  }
+
+  constructor(@Inject(ElementRef) private readonly el: ElementRef,
+              @Inject(NgZone) private readonly ngZone: NgZone,
+              @Inject(DOCUMENT) document: any) {
+    super();
+    // @see https://stackoverflow.com/questions/49513359/could-not-resolve-type-document-in-angular5/53715642#53715642
+    this.document = document as Document;
+  }
+
+  ngOnInit(): void {
+  }
+
+  ngAfterViewInit(): void {
+    // TODO: Make this also track the current enabled/disabled state.
+    if (this.hasBinding()) {
+      const {chain} = Dsl.disposeWith(this);
+      chain(this.pectinFocusBinding.focusContext.focused).subscribe((focused) => {
+        if (focused && !this.alreadyHasFocus()) {
+          this.tryAndFocus();
+        }
+      });
+    } else {
+      Logger.get(this).warn("pectinFocusBinding was nil");
+    }
+  }
+
+  private hasBinding() {
+    return !!this.pectinFocusBinding && !!this.pectinFocusBinding.focusContext;
+  }
+
+// Hook method for debugging via tracing.
+  alreadyHasFocus() {
+    return this.isFocused(this.focusTarget);
+  }
+
+  // Hook method for debugging via tracing.
+  isFocused(element: Element): boolean {
+    return this.document.activeElement === element;
+  }
+
+  tryAndFocus(retries: number = 5) {
+    if (this.modelShouldStillHaveFocus() && this.canFocus()) {
+      if (!this.alreadyHasFocus()) {
+        this.focusTarget.focus();
+      }
+      // if we didn't get the focus we try again later.
+      if (!this.alreadyHasFocus()) {
+        Logger.get(this).log(`focus failed, trying ${retries} more times`);
+        if (retries > 0) {
+          // try again on the next paint
+          // TODO: is there an angular way of doing this without calling a window function.
+          requestAnimationFrame(() => {
+            this.tryAndFocus(retries - 1);
+          });
+        } else {
+          Logger.get(this).warn(`Tried to focus but gave up as the component wasn't enabled or visible.`);
+        }
+      }
+    }
+  }
+
+  get focusTarget(): HTMLElement {
+    return this.focusBindingTarget || this.el.nativeElement;
+  }
+
+  // Hook method for debugging via tracing.
+  modelShouldStillHaveFocus() {
+    return this.hasBinding() && this.pectinFocusBinding.focusContext.focused.value;
+  }
+
+  // Hook method for debugging via tracing.
+  canFocus(): boolean {
+    const dimension = this.focusTarget.getBoundingClientRect();
+    const hasSize = dimension.height >= 0 && dimension.height >= 0;
+    // tslint:disable-next-line:no-string-literal
+    return hasSize && !this.focusTarget['disabled'];
+  }
+}

package/{lib/directives/index.d.ts → src/lib/directives/index.ts}

@@ -1,5 +1,6 @@
 /**
  * @file Automatically generated by barrelsby.
  */
+
 export * from "./command.directive";
 export * from "./focus-binding.directive";

package/src/lib/interaction/abstract-activity.ts

@@ -0,0 +1,57 @@
+import { DelegatingValueModel, EventListenerList, ValueModel } from '@coolon/pectin';
+import { DisposableComponent } from '../components/disposable-component';
+import { Activity } from './activity';
+
+export class AbstractActivity<D, R, E = any> extends DisposableComponent implements Activity<D, R, E> {
+
+  private readonly _doneListeners = new EventListenerList<Activity.CallBack<R>>();
+  private readonly _cancelListeners = new EventListenerList<Activity.CallBack<E>>();
+  private readonly _finishListeners = new EventListenerList<() => void>();
+
+  private readonly _busyModel = new DelegatingValueModel<boolean>().withDefault(false);
+
+  onDone(callback: Activity.CallBack<R>) {
+    this._doneListeners.add(callback);
+  }
+
+  onCancel(callback: Activity.CallBack<E>) {
+    this._cancelListeners.add(callback);
+  }
+
+  done(result?: R): Promise<any> {
+    return this._doneListeners
+      .fireAndWait(l => l(result))
+      .finally(() => this.finalizeAndDispose());
+  }
+
+  cancel(error?: E): Promise<any> {
+    return this._cancelListeners
+      .fireAndWait(l => l(error))
+      .finally(() => this.finalizeAndDispose());
+  }
+
+  private finalizeAndDispose() {
+    // this._activeModel.value = false;
+    this._finishListeners.fire(l => l());
+    // this._interactionContext = null;
+    // this._initialized = false;
+    [
+      this._finishListeners,
+      this._doneListeners,
+      this._cancelListeners
+    ].forEach(l => l.dispose());
+  }
+
+
+  get busy(): ValueModel<boolean> {
+    return this._busyModel.readonly;
+  }
+
+  busyWhile(busyModel: ValueModel<boolean>) {
+    this._busyModel.setDelegate(busyModel);
+  }
+
+  isBusy() {
+    return this._busyModel.value;
+  }
+}

package/src/lib/interaction/activity.ts

@@ -0,0 +1,17 @@
+import { InjectionToken } from '@angular/core';
+import { ValueModel } from '@coolon/pectin';
+
+export const ACTIVITY_DATA = new InjectionToken<any>('InteractionActivityData');
+
+export interface Activity<D, R, E = any> {
+  readonly busy: ValueModel<boolean>;
+
+  onDone(callback: Activity.CallBack<R>);
+
+  onCancel(callback: Activity.CallBack<E>);
+
+}
+
+export namespace Activity {
+  export type CallBack<T> = (value: T) => void | Promise<any>;
+}

package/src/lib/interaction/alert.ts

@@ -0,0 +1,6 @@
+
+export interface Alert {
+    title?():string;
+    content():string[];
+    ok():string;
+}

package/src/lib/interaction/components/activity-container/activity-container.component.html

@@ -0,0 +1,8 @@
+<mat-tab-group #tabs no-tab-header [dynamicHeight]="true">
+  <mat-tab>
+    <angular-ui-powerups-activity-outlet [interactionContext]="this" [activityContext]="initialActivity"></angular-ui-powerups-activity-outlet>
+  </mat-tab>
+  <mat-tab *ngFor="let tab of activityTabs.value">
+    <angular-ui-powerups-activity-outlet [interactionContext]="this" [activityContext]="tab"></angular-ui-powerups-activity-outlet>
+  </mat-tab>
+</mat-tab-group>

package/src/lib/interaction/components/activity-container/activity-container.component.scss

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/src/lib/interaction/components/activity-container/activity-container.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ActivityContainerComponent } from './activity-container.component';
+
+describe('ActivityContainerComponent', () => {
+  let component: ActivityContainerComponent;
+  let fixture: ComponentFixture<ActivityContainerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ActivityContainerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ActivityContainerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/interaction/components/activity-container/activity-container.component.ts

@@ -0,0 +1,93 @@
+import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/core';
+import { MatTabGroup } from '@angular/material';
+import { Constructable, Dsl, MutableListModel } from '@coolon/pectin';
+import { Deferred } from '@coolon/pectin/lib/promise/deferred.class';
+import { DisposableComponent } from '../../../components/disposable-component';
+
+import { Activity } from '../../activity';
+import { Alert } from '../../alert';
+import { Confirm } from '../../confirm';
+import { InteractionContext } from '../../interaction-context';
+import { ActivityOutletContext } from '../activity-outlet/activity-outlet-context';
+import { AlertDialogComponent } from '../alert-dialog/alert-dialog.component';
+import { ConfirmationDialogComponent } from '../confirmation-dialog/confirmation-dialog.component';
+
+@Component({
+  selector: 'angular-ui-powerups-activity-container',
+  templateUrl: './activity-container.component.html',
+  styleUrls: ['./activity-container.component.scss']
+})
+export class ActivityContainerComponent extends DisposableComponent implements OnInit, AfterViewInit, InteractionContext {
+
+  @Input()
+  parentInteractionContext: InteractionContext;
+
+  @Input()
+  initialActivity: ActivityOutletContext<any, any, any>;
+
+  @ViewChild('tabs', { static: true })
+  tabs: MatTabGroup;
+
+  readonly activityTabs = new MutableListModel<ActivityOutletContext<any, any, any>>();
+  private obsoleteTabs: ActivityOutletContext<any, any, any>[] = [];
+
+  constructor() {
+    super();
+  }
+
+  ngOnInit() {
+  }
+
+  ngAfterViewInit(): void {
+    const { observe } = Dsl.disposeWith(this);
+    observe.valuesFrom(this.tabs.animationDone).subscribe(() => this.cleanUpTabs());
+  }
+
+  initialise<D, R, E>(options: ActivityContainerComponent.ActivityContext<D, R, E>) {
+    this.initialActivity = {
+      ...options,
+      interactionContext: this
+    };
+  }
+
+  startActivity<D, R, E>(activityType: Constructable<Activity<D, R, E>>, data?: D): Promise<R> {
+    const deferred = Deferred.defer<R>();
+    const context = {
+      interactionContext: this,
+      activityClass: activityType,
+      activityData: data,
+      onDone: deferred.resolve,
+      onCancel: deferred.reject
+    };
+    this.activityTabs.push(context);
+    this.tabs.selectedIndex = this.activityTabs.length;
+    return deferred.promise.finally(() => {
+      this.obsoleteTabs.push(context);
+      this.tabs.selectedIndex = this.activityTabs.length - 1;
+    });
+  }
+
+  alert(alert: Alert): Promise<void> {
+    return this.startActivity(AlertDialogComponent, alert);
+  }
+
+  confirm(confirm: Confirm): Promise<boolean> {
+    return this.startActivity(ConfirmationDialogComponent, confirm);
+  }
+
+  private cleanUpTabs() {
+    this.activityTabs.value = this.activityTabs.value.filter(tab => {
+      return !this.obsoleteTabs.includes(tab);
+    });
+  }
+}
+
+export namespace ActivityContainerComponent {
+
+  export interface ActivityContext<D, R, E> {
+    activityClass: Constructable<Activity<D, R, E>>,
+    activityData: D,
+    onDone: (result: R) => void,
+    onCancel: (error: E) => void,
+  }
+}

package/{lib/interaction/components/activity-outlet/activity-outlet-context.d.ts → src/lib/interaction/components/activity-outlet/activity-outlet-context.ts}

@@ -1,10 +1,12 @@
 import { Constructable } from '@coolon/pectin';
 import { Activity } from '../../activity';
 import { InteractionContext } from '../../interaction-context';
+
+
 export interface ActivityOutletContext<D, R, E> {
-    interactionContext: InteractionContext;
-    activityClass: Constructable<Activity<D, R, E>>;
-    activityData: D;
-    onDone: (result: R) => void;
-    onCancel: (error: E) => void;
+  interactionContext: InteractionContext,
+  activityClass: Constructable<Activity<D, R, E>>,
+  activityData: D,
+  onDone: (result: R) => void,
+  onCancel: (error: E) => void,
 }

package/src/lib/interaction/components/activity-outlet/activity-outlet.component.scss

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/src/lib/interaction/components/activity-outlet/activity-outlet.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ActivityOutletComponent } from './activity-outlet.component';
+
+describe('PortalOutletComponentComponent', () => {
+  let component: ActivityOutletComponent;
+  let fixture: ComponentFixture<ActivityOutletComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ActivityOutletComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ActivityOutletComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/interaction/components/activity-outlet/activity-outlet.component.ts

@@ -0,0 +1,96 @@
+import {
+  AfterViewInit,
+  Component,
+  ComponentFactoryResolver,
+  ComponentRef,
+  Injector,
+  Input,
+  OnInit,
+  ViewContainerRef
+} from '@angular/core';
+import { Constructable, lang } from '@coolon/pectin';
+import { Activity, ACTIVITY_DATA } from '../../activity';
+import { Alert } from '../../alert';
+import { Confirm } from '../../confirm';
+import { InteractionContext } from '../../interaction-context';
+import { ActivityOutletContext } from './activity-outlet-context';
+
+@Component({
+  selector: 'angular-ui-powerups-activity-outlet',
+  template: '',
+  styleUrls: ['./activity-outlet.component.scss']
+})
+export class ActivityOutletComponent<D, R, E> implements OnInit, InteractionContext {
+
+  @Input()
+  interactionContext: InteractionContext;
+
+  @Input()
+  set activityContext(activityContext: ActivityOutletContext<D, R, E>) {
+    this.loadActivity(activityContext);
+  };
+
+  private activityComponent: ComponentRef<Activity<D, R, E>>;
+
+  constructor(
+    private componentFactoryResolver: ComponentFactoryResolver,
+    private viewContainerRef: ViewContainerRef,
+    private injector: Injector
+  ) {
+  }
+
+  ngOnInit() {
+  }
+
+  loadActivity(activityContext: ActivityOutletContext<D, R, E>) {
+    const injector = Injector.create({
+      providers: [
+        {
+          provide: InteractionContext,
+          useValue: this
+        },
+        { provide: ACTIVITY_DATA, useValue: activityContext.activityData }
+      ],
+      parent: this.injector
+    });
+    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(activityContext.activityClass);
+    this.viewContainerRef.clear();
+    this.activityComponent = this.viewContainerRef.createComponent(componentFactory, 0, injector);
+    this.activityComponent.instance.onDone(activityContext.onDone);
+    this.activityComponent.instance.onCancel(activityContext.onCancel);
+  }
+
+  alert(alert: Alert): Promise<void> {
+    return this.interactionContext.alert(alert);
+  }
+
+  confirm(confirm: Confirm): Promise<boolean> {
+    return this.interactionContext.confirm(confirm);
+  }
+
+  startActivity<D1, R1, E1>(activityType: Constructable<Activity<D1, R1, E1>>, data?: D1): Promise<R1> {
+    return this.interactionContext.startActivity(activityType, data);
+  }
+}
+
+export namespace ActivityOutletComponent {
+
+  export class OutletInteractionContext<D, R, E> implements InteractionContext {
+
+    constructor(private readonly context: ActivityOutletContext<D, R, E>) {
+    }
+
+    alert(alert: Alert): Promise<void> {
+      return lang.notImplemented();
+    }
+
+    confirm(confirm: Confirm): Promise<boolean> {
+      return lang.notImplemented();
+    }
+
+    startActivity<D1, R1, E1>(activityType: Constructable<Activity<D1, R1, E1>>, data?: D1): Promise<R1> {
+      return lang.notImplemented();
+    }
+  }
+
+}

package/src/lib/interaction/components/alert-dialog/alert-dialog.component.html

@@ -0,0 +1,7 @@
+<h3 matDialogTitle *ngIf="alert.title">{{alert.title()}}</h3>
+<div matDialogContent>
+  <p *ngFor="let line of alert.content()">{{line}}</p>
+</div>
+<p matDialogActions>
+  <button mat-raised-button color="primary" (click)="done()">{{alert.ok()}}</button>
+</p>

package/src/lib/interaction/components/alert-dialog/alert-dialog.component.scss

@@ -0,0 +1,7 @@
+:host {
+  display: block;
+  padding: var(--angular-ui-powerups-default-padding);
+}
+.mat-dialog-actions {
+  justify-content: flex-end;
+}

package/src/lib/interaction/components/alert-dialog/alert-dialog.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AlertDialogComponent } from './alert-dialog.component';
+
+describe('ConfirmationDialogComponent', () => {
+  let component: AlertDialogComponent;
+  let fixture: ComponentFixture<AlertDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AlertDialogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AlertDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/interaction/components/alert-dialog/alert-dialog.component.ts

@@ -0,0 +1,20 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { AbstractActivity } from '../../abstract-activity';
+import { ACTIVITY_DATA } from '../../activity';
+import { Alert } from '../../alert';
+
+@Component({
+  selector: 'angular-ui-powerups-alert-dialog',
+  templateUrl: './alert-dialog.component.html',
+  styleUrls: ['./alert-dialog.component.scss']
+})
+export class AlertDialogComponent extends AbstractActivity<Alert, void> implements OnInit {
+
+  constructor(@Inject(ACTIVITY_DATA) readonly alert: Alert) {
+    super();
+  }
+
+  ngOnInit() {
+  }
+
+}

package/src/lib/interaction/components/confirmation-dialog/confirmation-dialog.component.html

@@ -0,0 +1,9 @@
+<h3 matDialogTitle *ngIf="confirm.title">{{confirm.title()}}</h3>
+<div matDialogContent>
+  <p *ngFor="let line of confirm.content()">{{line}}</p>
+</div>
+<p matDialogActions>
+  <button mat-button (click)="cancel()">{{confirm.cancel()}}</button>
+  <button mat-raised-button [color]="isDestructive() ? 'warn' : 'primary'" (click)="done(true)">{{confirm.ok()}}</button>
+</p>
+

package/src/lib/interaction/components/confirmation-dialog/confirmation-dialog.component.scss

@@ -0,0 +1,8 @@
+:host {
+  display: block;
+  padding: var(--angular-ui-powerups-default-padding);
+}
+
+.mat-dialog-actions {
+  justify-content: flex-end;
+}

package/src/lib/interaction/components/confirmation-dialog/confirmation-dialog.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConfirmationDialogComponent } from './confirmation-dialog.component';
+
+describe('ConfirmationDialogComponent', () => {
+  let component: ConfirmationDialogComponent;
+  let fixture: ComponentFixture<ConfirmationDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ConfirmationDialogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ConfirmationDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/interaction/components/confirmation-dialog/confirmation-dialog.component.ts

@@ -0,0 +1,26 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { assert } from '@coolon/pectin';
+import { AbstractActivity } from '../../abstract-activity';
+import { ACTIVITY_DATA } from '../../activity';
+import { Confirm } from '../../confirm';
+
+@Component({
+  selector: 'angular-ui-powerups-confirmation-dialog',
+  templateUrl: './confirmation-dialog.component.html',
+  styleUrls: ['./confirmation-dialog.component.scss']
+})
+export class ConfirmationDialogComponent extends AbstractActivity<Confirm, boolean> implements OnInit {
+
+  constructor(@Inject(ACTIVITY_DATA) readonly confirm: Confirm) {
+    super();
+    assert.notNil(confirm);
+    console.log(confirm);
+  }
+
+  ngOnInit() {
+  }
+
+  isDestructive(): boolean {
+    return this.confirm.destructive && this.confirm.destructive();
+  }
+}

package/{lib/interaction/confirm.d.ts → src/lib/interaction/confirm.ts}

@@ -1,5 +1,6 @@
 import { Alert } from './alert';
+
 export interface Confirm extends Alert {
-    destructive?: () => boolean;
-    cancel(): string;
+  destructive?: () => boolean;
+  cancel(): string;
 }

package/{lib/interaction/index.d.ts → src/lib/interaction/index.ts}

@@ -1,6 +1,7 @@
 /**
  * @file Automatically generated by barrelsby.
  */
+
 export * from "./abstract-activity";
 export * from "./activity";
 export * from "./alert";

package/src/lib/interaction/interaction-context.ts

@@ -0,0 +1,16 @@
+import { InjectionToken } from '@angular/core';
+import { Constructable } from '@coolon/pectin';
+import { Activity } from './activity';
+import { Alert } from './alert';
+import { Confirm } from './confirm';
+
+export const INTERACTION_CONTEXT = new InjectionToken<any>('InteractionContext');
+
+export abstract class InteractionContext {
+
+  abstract startActivity<D, R, E>(activityType: Constructable<Activity<D, R, E>>, data?: D): Promise<R>;
+
+  abstract confirm(confirm: Confirm): Promise<boolean>;
+
+  abstract alert(alert: Alert): Promise<void>;
+}