@coolon/angular-ui-powerups 0.0.24 → 0.0.26

package/src/lib/components/forms/abstract-input.component.ts

@@ -0,0 +1,108 @@
+/* tslint:disable:no-input-rename */
+import { EventEmitter, HostListener, Input, OnInit, Output } from '@angular/core';
+import { FormControl, FormGroupDirective, NgForm } from '@angular/forms';
+import { ErrorStateMatcher } from '@angular/material';
+import { Command, DelegatingFormValueModel, ListModel, UseDelegate, ValueModel } from '@coolon/pectin';
+import { DisposableComponent } from '../disposable-component';
+
+export abstract class AbstractInputComponent<T> extends DisposableComponent implements OnInit {
+
+  readonly valueModel = new DelegatingFormValueModel<T>();
+
+  @Input('valueModel') @UseDelegate()
+  set userValueModel(model: ValueModel<T>) {
+    this.valueModel.setDelegate(model);
+  }
+
+  @Input() label: string;
+  @Input() floatLabel: 'auto' | 'always' | 'never';
+  @Input() hint: string;
+  @Input() placeholder: string;
+
+  @Input('command.focus') focusCommand: Command<any>;
+  @Input('command.blur') blurCommand: Command<any>;
+  @Input('command.enter') enterCommand: Command<any>;
+  @Input('command.escape') escapeCommand: Command<any>;
+  @Input('command.click') clickCommand: Command<any>;
+
+  // TODO: fix this.
+  // tslint:disable-next-line:no-output-native
+  @Output() focus = new EventEmitter();
+  // tslint:disable-next-line:no-output-native
+  @Output() blur = new EventEmitter();
+  // tslint:disable-next-line:no-output-native
+  @Output() enterKey = new EventEmitter();
+  // tslint:disable-next-line:no-output-native
+  @Output() escapeKey = new EventEmitter();
+
+  readonly errorStateMatcher: ErrorStateMatcher;
+
+  @HostListener('click')
+  notifyClick() {
+    this.safelyInvoke(this.clickCommand);
+  }
+
+  @HostListener('focusin')
+  notifyFocusIn() {
+    this.safelyInvoke(this.focusCommand);
+    this.focus.emit();
+  }
+
+  @HostListener('focusout')
+  notifyFocusOut() {
+    this.safelyInvoke(this.blurCommand);
+    this.blur.emit();
+  }
+
+
+  notifyEnterKey() {
+    this.safelyInvoke(this.enterCommand);
+    this.enterKey.emit();
+  }
+
+  notifyEscapeKey() {
+    this.safelyInvoke(this.escapeCommand);
+    this.escapeKey.emit();
+  }
+
+  protected safelyInvoke(command: Command<any>) {
+    if (command && command.enabled.value) {
+      command.execute();
+    }
+  }
+
+  constructor() {
+    super();
+    const self = this;
+    this.errorStateMatcher = {
+      isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+        return self.hasErrors();
+      }
+    };
+  }
+
+  ngOnInit(): void {
+  }
+
+  isEnabled(): boolean {
+    return this.enabled.value;
+  }
+
+  get enabled(): ValueModel<boolean> {
+    return this.valueModel.enabled;
+  }
+
+  hasErrors(): boolean {
+    return !this.errorList.query().isEmpty();
+  }
+
+  get errorList(): ListModel<string> {
+    return this.valueModel.errorList;
+  }
+
+  get firstError() {
+    return this.hasErrors() ? this.errorList.value[0] : null;
+  }
+
+
+}

package/src/lib/components/forms/number-input/number-input.component.html

@@ -0,0 +1,15 @@
+<mat-form-field appearance="standard" [floatLabel]="floatLabel">
+  <mat-label *ngIf="label">{{label}}</mat-label>
+  <input type="number"
+         matInput
+         placeholder="{{placeholder}}"
+         [(ngModel)]="valueModel.value"
+         [disabled]="!enabled.value"
+         (keydown.enter)="notifyEnterKey()"
+         (keydown.escape)="notifyEscapeKey()"
+         [pectinFocusBinding]="valueModel"
+         [errorStateMatcher]="errorStateMatcher"
+  >
+  <mat-hint *ngIf="hint">{{hint}}</mat-hint>
+  <mat-error *ngIf="hasErrors">{{firstError}}</mat-error>
+</mat-form-field>

package/src/lib/components/forms/number-input/number-input.component.scss

@@ -0,0 +1,3 @@
+@import "../scss/mixins";
+
+@include mat-form-field-defaults;

package/src/lib/components/forms/number-input/number-input.component.spec.ts

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

package/src/lib/components/forms/number-input/number-input.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import {AbstractInputComponent} from '../abstract-input.component';
+
+
+@Component({
+    selector: 'angular-ui-powerups-number-input',
+    templateUrl: './number-input.component.html',
+    styleUrls: ['./number-input.component.scss']
+})
+export class NumberInputComponent extends AbstractInputComponent<string> implements OnInit {
+
+    constructor() {
+        super();
+    }
+
+    ngOnInit() {
+    }
+
+}

package/src/lib/components/forms/password-input/password-input.component.html

@@ -0,0 +1,16 @@
+<mat-form-field appearance="standard" [floatLabel]="floatLabel">
+  <mat-label *ngIf="label">{{label}}</mat-label>
+  <input type="password"
+         matInput
+         placeholder="{{placeholder}}"
+         [(ngModel)]="valueModel.value"
+         [disabled]="!enabled.value"
+         (keydown.enter)="notifyEnterKey()"
+         (keydown.escape)="notifyEscapeKey()"
+         [pectinFocusBinding]="valueModel"
+         [errorStateMatcher]="errorStateMatcher"
+  >
+  <mat-hint *ngIf="hint">{{hint}}</mat-hint>
+  <mat-error *ngIf="hasErrors">{{firstError}}</mat-error>
+</mat-form-field>
+

package/src/lib/components/forms/password-input/password-input.component.scss

@@ -0,0 +1,3 @@
+@import "../scss/mixins";
+
+@include mat-form-field-defaults;

package/src/lib/components/forms/password-input/password-input.component.spec.ts

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

package/src/lib/components/forms/password-input/password-input.component.ts

@@ -0,0 +1,18 @@
+import {Component, OnInit} from '@angular/core';
+import {AbstractInputComponent} from '../abstract-input.component';
+
+@Component({
+  selector: 'angular-ui-powerups-password-input',
+  templateUrl: './password-input.component.html',
+  styleUrls: ['./password-input.component.scss']
+})
+export class PasswordInputComponent extends AbstractInputComponent<string> implements OnInit {
+
+  constructor() {
+    super();
+  }
+
+  ngOnInit() {
+  }
+
+}

package/src/lib/components/forms/scss/mixins.scss

@@ -0,0 +1,16 @@
+@import '../../../../../../../node_modules/@angular/material/theming';
+
+@mixin mat-form-field-defaults {
+
+    :host {
+        display: block;
+    }
+
+    mat-form-field, input {
+        width: 100%;
+
+        mat-hint.faux-error {
+            color: mat-color(mat-palette($mat-red));
+        }
+    }
+}

package/src/lib/components/forms/select-input/select-input.component.html

@@ -0,0 +1,16 @@
+<mat-form-field appearance="standard" [floatLabel]="floatLabel">
+  <mat-label *ngIf="label">{{label}}</mat-label>
+  <mat-select placeholder="{{placeholder}}"
+              [(ngModel)]="valueModel.value"
+              [disabled]="!enabled.value"
+              (keydown.enter)="notifyEnterKey()"
+              (keydown.escape)="notifyEscapeKey()"
+              [pectinFocusBinding]="valueModel"
+              [errorStateMatcher]="errorStateMatcher"
+  >
+    <mat-option *ngFor="let option of optionsModel.value" [value]="option">{{optionLabelFormat(option)}}
+    </mat-option>
+  </mat-select>
+  <mat-hint *ngIf="hint">{{hint}}</mat-hint>
+  <mat-error *ngIf="hasErrors">{{firstError}}</mat-error>
+</mat-form-field>

package/src/lib/components/forms/select-input/select-input.component.scss

@@ -0,0 +1,7 @@
+:host {
+  display: inline-block;
+}
+
+mat-form-field {
+  width: 100%;
+}

package/src/lib/components/forms/select-input/select-input.component.spec.ts

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

package/src/lib/components/forms/select-input/select-input.component.ts

@@ -0,0 +1,31 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { ListModel, StoreInListModel, UseDelegate } from '@coolon/pectin';
+import { AbstractInputComponent } from '../abstract-input.component';
+
+@Component({
+  selector: 'angular-ui-powerups-select-input',
+  templateUrl: './select-input.component.html',
+  styleUrls: ['./select-input.component.scss']
+})
+export class SelectInputComponent<T = any> extends AbstractInputComponent<T> implements OnInit {
+
+  @Input() @UseDelegate()
+  optionsModel: ListModel<T>;
+
+  @Input() @StoreInListModel('optionsModel')
+  options: T[];
+
+  @Input()
+  optionLabel: keyof T;
+
+  @Input()
+  optionLabelFormat: (option: T) => any = (option) => (option && this.optionLabel) ? option[this.optionLabel] : option;
+
+  constructor() {
+    super();
+  }
+
+  ngOnInit() {
+  }
+
+}

package/src/lib/components/forms/string-input/string-input.component.html

@@ -0,0 +1,15 @@
+<mat-form-field appearance="standard" [floatLabel]="floatLabel">
+  <mat-label *ngIf="label">{{label}}</mat-label>
+  <input matInput
+         placeholder="{{placeholder}}"
+         [(ngModel)]="valueModel.value"
+         [disabled]="!enabled.value"
+         (keydown.enter)="notifyEnterKey()"
+         (keydown.escape)="notifyEscapeKey()"
+         [pectinFocusBinding]="valueModel"
+         [errorStateMatcher]="errorStateMatcher"
+  >
+  <mat-hint *ngIf="hint">{{hint}}</mat-hint>
+  <mat-error *ngIf="hasErrors">{{firstError}}</mat-error>
+</mat-form-field>
+

package/src/lib/components/forms/string-input/string-input.component.scss

@@ -0,0 +1,3 @@
+@import "../scss/mixins";
+
+@include mat-form-field-defaults;

package/src/lib/components/forms/string-input/string-input.component.spec.ts

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

package/src/lib/components/forms/string-input/string-input.component.ts

@@ -0,0 +1,18 @@
+import {Component, OnInit} from '@angular/core';
+import {AbstractInputComponent} from '../abstract-input.component';
+
+@Component({
+  selector: 'angular-ui-powerups-string-input',
+  templateUrl: './string-input.component.html',
+  styleUrls: ['./string-input.component.scss']
+})
+export class StringInputComponent extends AbstractInputComponent<string> implements OnInit {
+
+  constructor() {
+    super();
+  }
+
+  ngOnInit() {
+  }
+
+}

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

@@ -1,6 +1,7 @@
 /**
  * @file Automatically generated by barrelsby.
  */
+
 export * from "./disposable-component";
 export * from "./resize-aware.component";
 export * from "./forms/abstract-input.component";

package/src/lib/components/resize-aware.component.ts

@@ -0,0 +1,52 @@
+import {AfterViewInit, ElementRef, NgZone} from '@angular/core';
+import {ValueHolder, ValueModel} from '@coolon/pectin';
+import ResizeObserver from 'resize-observer-polyfill';
+import {DisposableComponent} from './disposable-component';
+import {Bounds} from './types/bounds.class';
+import {Point} from './types/point.class';
+
+export class ResizeAwareComponent extends DisposableComponent implements AfterViewInit {
+
+    private _boundsModel = new ValueHolder<Bounds>(new Bounds(0, 0, 0, 0));
+
+    constructor(protected readonly elementRef: ElementRef, protected readonly ngZone: NgZone) {
+        super();
+    }
+
+    ngAfterViewInit(): void {
+        this.updateBounds();
+        const element = this.elementRef.nativeElement;
+        const ro = new ResizeObserver((entries, observer) => {
+            this.ngZone.run(() => this.updateBounds());
+        });
+        ro.observe(element);
+        this.onDispose(() => ro.disconnect());
+    }
+
+    get boundsModel(): ValueModel<Bounds> {
+        return this._boundsModel.readonly;
+    }
+
+    get nativeElement() {
+        return this.elementRef.nativeElement;
+    }
+
+    // TODO: Make this handle body scroll
+    public relativePositionOf(point: { x: number, y: number } | MouseEvent): Point {
+        return this.bounds.relativePositionOf(point);
+    }
+
+    get bounds(): Bounds {
+        return this._boundsModel.value;
+    }
+
+    private updateBounds() {
+        this._boundsModel.value = Bounds.ofElement(this.nativeElement);
+    }
+
+
+}
+
+export namespace ResizeAwareComponent {
+
+}

package/src/lib/components/types/bounds.class.ts

@@ -0,0 +1,25 @@
+import { Dimension } from './dimension.class';
+import { Point } from './point.class';
+
+export class Bounds extends Dimension {
+
+    constructor(readonly top: number, readonly left: number, readonly width: number, readonly height: number) {
+        super(width, height);
+    }
+
+    relativePositionOf(point: { x: number, y: number } | MouseEvent) {
+        if (point instanceof MouseEvent) {
+            return new Point(point.clientX - this.left, point.clientY - this.top);
+        } else {
+            return new Point(point.x - this.left, point.y - this.top);
+        }
+    }
+}
+
+export namespace Bounds {
+    export function ofElement(element: HTMLElement): Bounds {
+        const rect = element.getBoundingClientRect();
+        return new Bounds(rect.top, rect.left, rect.width, rect.height);
+    }
+}
+

package/src/lib/components/types/dimension.class.ts

@@ -0,0 +1,3 @@
+export class Dimension {
+    constructor(readonly width: number, readonly height: number){}
+}

package/src/lib/components/types/point.class.ts

@@ -0,0 +1,13 @@
+export class Point {
+
+    static from(data: { x: number, y: number }) {
+        return new Point(data.x, data.y);
+    }
+
+    constructor(readonly x: number, readonly y: number) {
+    }
+
+    translate(x: number, y: number): Point {
+        return new Point(this.x + x, this.y + y);
+    }
+}

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

@@ -0,0 +1,73 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
+import { Command, UnaryCommand } from '@coolon/pectin';
+import { CommandDirective } from './command.directive';
+
+@Component({
+  template: `
+      <button [pectinCommand]="command" ]>Click</button>`
+})
+class UnaryCommandWithoutParameterErrorComponent {
+  command = UnaryCommand.create((value) => 'boo');
+}
+
+TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+
+describe('CommandDirective', () => {
+
+  describe('Command', () => {
+
+    describe('with command parameter', () => {
+      it('barfs', async () => {
+        @Component({
+          template: `
+              <button [pectinCommand]="command" [commandParameter]="'arg'">Click</button>`
+        })
+        class CommandWithParameterErrorComponent {
+          command = Command.create(() => 'boo');
+        }
+        await TestBed.configureTestingModule({
+          declarations: [
+            CommandDirective,
+            CommandWithParameterErrorComponent
+          ]
+        }).compileComponents();
+        expect(() => TestBed.createComponent(CommandWithParameterErrorComponent)).toThrow();
+      });
+    });
+
+    describe('with correct bindings', () => {
+      @Component({
+        template: `
+            <button [pectinCommand]="command">Click</button>`
+      })
+      class CommandTestComponent {
+        command = Command.create(() => 'boo');
+      }
+
+      let fixture: ComponentFixture<CommandTestComponent>;
+      let component: CommandTestComponent;
+
+      beforeEach(async () => {
+        await TestBed.configureTestingModule({
+          declarations: [
+            CommandDirective,
+            CommandTestComponent
+          ]
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(CommandTestComponent);
+        component = fixture.componentInstance;
+      });
+
+      it('creates the component', () => {
+        expect(component).toBeDefined();
+      });
+    });
+
+
+  });
+
+
+});

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

@@ -0,0 +1,81 @@
+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.');
+    }
+  }
+}