@coolon/angular-ui-powerups 0.0.26 → 0.0.27

package/src/lib/directives/command.directive.ts

@@ -1,81 +0,0 @@
-import { AfterViewInit, Directive, ElementRef, HostListener, Inject, Input, OnDestroy, OnInit } from '@angular/core';
-import { assert, Command, Dsl, GarbageCollector, lang, UnaryCommand } from '@coolon/pectin';
-
-@Directive({
-  // tslint:disable-next-line:directive-selector
-  selector: '[pectinCommand]'
-})
-export class CommandDirective<P = any> extends GarbageCollector implements OnInit, OnDestroy, AfterViewInit {
-
-  @Input()
-  pectinCommand: Command<any> | UnaryCommand<P>;
-
-  private _commandParameter:P;
-  private _commandParameterProvided = false;
-
-  @Input()
-  set commandParameter(value: P) {
-    this._commandParameterProvided = true;
-    this._commandParameter = value;
-  }
-
-  get commandParameter(): P {
-    return this._commandParameter;
-  }
-
-  constructor(@Inject(ElementRef) private elementRef: ElementRef) {
-    super();
-  }
-
-  ngOnInit(): void {
-    assert.notNil(this.pectinCommand);
-    if (this.pectinCommand instanceof UnaryCommand) {
-      if (!this._commandParameterProvided) {
-        lang.illegalState('UnaryCommands required the command parameter to be specified.');
-      }
-    } else {
-      if (this._commandParameterProvided) {
-        lang.illegalState('command parameters are only supported by UnaryCommands');
-      }
-    }
-  }
-
-  ngAfterViewInit(): void {
-    // for some reason mat-buttons kills the disabled host binding.  It works on a regular button but for now
-    // we need to do this.
-    const { chain } = Dsl.disposeWith(this);
-    chain(this.pectinCommand.enabled).subscribe(enabled => {
-      if (enabled) {
-        this.elementRef.nativeElement.removeAttribute('disabled');
-        if (this.elementRef.nativeElement.tagName === 'A') {
-          this.elementRef.nativeElement.setAttribute('href', 'javascript:void');
-        }
-      } else {
-        this.elementRef.nativeElement.setAttribute('disabled', 'disabled');
-        if (this.elementRef.nativeElement.tagName === 'A') {
-          this.elementRef.nativeElement.removeAttribute('href');
-        }
-      }
-    });
-  }
-
-  ngOnDestroy(): void {
-    this.dispose();
-  }
-
-
-  @HostListener('click', ['$event'])
-  notifyClick($event: Event) {
-    $event.preventDefault();
-    $event.stopPropagation();
-    if (this.pectinCommand.enabled.value) {
-      if (this.pectinCommand instanceof UnaryCommand) {
-        this.pectinCommand.withContext({ event: $event }).execute(this.commandParameter);
-      } else {
-        this.pectinCommand.withContext({ event: $event }).execute();
-      }
-    } else {
-      console.warn('disabled command clicked, ignoring.');
-    }
-  }
-}

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

@@ -1,8 +0,0 @@
-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

@@ -1,108 +0,0 @@
-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/src/lib/interaction/abstract-activity.ts

@@ -1,57 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

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

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

@@ -1,8 +0,0 @@
-<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

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

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

@@ -1,25 +0,0 @@
-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

@@ -1,93 +0,0 @@
-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/src/lib/interaction/components/activity-outlet/activity-outlet.component.scss

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

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

@@ -1,25 +0,0 @@
-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

@@ -1,96 +0,0 @@
-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

@@ -1,7 +0,0 @@
-<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

@@ -1,7 +0,0 @@
-: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

@@ -1,25 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,9 +0,0 @@
-<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

@@ -1,8 +0,0 @@
-: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

@@ -1,25 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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();
-  }
-}