@coolon/angular-ui-powerups 0.0.25 → 0.0.27

package/src/lib/animations/slideDownAndUpAnimation.ts

@@ -1,39 +0,0 @@
-import { animate, AnimationStyleMetadata, style, transition, trigger } from '@angular/animations';
-import { OptionsHelper } from '@coolon/pectin';
-
-const defaultHiddenStyleDef = style({
-  opacity: 0,
-  'height': '0',
-  paddingTop: '0',
-  paddingBottom: '0'
-});
-
-export function slideDownAndUpAnimation(triggerName: string, options?: {
-  duration?: string;
-  hiddenStyleDef?: AnimationStyleMetadata;
-}) {
-  // SEE to fix this: https://github.com/angular/angular/issues/15587#issuecomment-351510501
-  const duration = OptionsHelper.get(options).getOptional('duration', '100ms');
-  const hiddenStyleDef = OptionsHelper.get(options).getOptional('hiddenStyleDef', defaultHiddenStyleDef);
-  return trigger(triggerName, [
-    transition(':enter', [hiddenStyleDef, animate('100ms')]),
-    transition(':leave', [animate('100ms', hiddenStyleDef)])
-  ]);
-}
-
-// export function slideOutLeftAnimation(triggerName: string, duration:string = "100ms") {
-//   return trigger(triggerName, [
-//     state('true', style(
-//       {
-//         'width': '*',
-//         'overflow': 'hidden',
-//         'opacity': '1'
-//       })),
-//     state('false', style({
-//       'width': '0px',
-//       'overflow': 'hidden',
-//       'opacity': '0'
-//     })),
-//     transition('* => *', [animate(duration)])
-//   ]);
-// }

package/src/lib/components/disposable-component.ts

@@ -1,9 +0,0 @@
-import {OnDestroy} from '@angular/core';
-import {GarbageCollector} from '@coolon/pectin';
-
-export class DisposableComponent extends GarbageCollector implements OnDestroy {
-
-    ngOnDestroy(): void {
-        this.dispose();
-    }
-}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,18 +0,0 @@
-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/src/lib/components/resize-aware.component.ts

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

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

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

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

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

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