@coolon/angular-ui-powerups 0.0.26 → 0.0.28

package/schematics/place-routes/place-def.ts

@@ -1,93 +0,0 @@
-import { SchematicContext } from '@angular-devkit/schematics';
-import { Memoize } from '@typescript-plus/fast-memoize-decorator/dist/src';
-import { ClassDeclaration } from 'ts-morph';
-import { Scanner } from './scanner';
-
-export class PlaceDef {
-
-
-  constructor(
-    readonly importPath: string,
-    readonly componentClass: string,
-    readonly properties: PlaceDef.Options,
-    readonly routeDef: PlaceDef.Parameter,
-    readonly queryParameters: PlaceDef.Parameter[]
-  ) {
-    // console.log({ properties, routeDef });
-  }
-
-  @Memoize()
-  get path() {
-    return this.stripEnclosingQuotes(this.properties.path);
-  }
-
-  @Memoize()
-  get routeIdentifier() {
-    return this.routeDef ? this.stripEnclosingQuotes(this.routeDef.parameterName) : null;
-  }
-
-  get fullPath() {
-    return !!this.routeIdentifier ?
-      `${this.path}/:${this.routeIdentifier}` :
-      this.path;
-  }
-
-  @Memoize()
-  get placeName() {
-    return this.componentClass.replace(/Component$/, "")
-  }
-
-  get order() {
-    return this.properties.order
-  }
-
-  @Memoize()
-  get activateGuardNames() {
-    const activateGuards = [];
-    if (this.authenticate) {
-      activateGuards.push('AuthGuard');
-    }
-    if (this.requiresRouteGuard()) {
-      activateGuards.push('PlaceRouteGuard');
-    }
-    return activateGuards;
-  }
-
-  private requiresRouteGuard() {
-    return this.routeIdentifier || this.queryParameters.length > 0;
-  }
-
-  @Memoize()
-  get routeModelName() {
-    return this.routeDef ? this.stripEnclosingQuotes(this.routeDef.modelName) : null;
-  }
-
-  get authenticate() {
-    return this.properties.authenticate === 'true';
-  }
-
-  stripEnclosingQuotes(value: string): string {
-    const cooked = value.replace(/(^["'])|(["']$)/g, '');
-    // console.log({ raw: value, cooked: cooked });
-    return cooked;
-  }
-}
-
-export namespace PlaceDef {
-
-  export interface Options {
-    title: string;
-    path: string;
-    order: number;
-    authenticate: string;
-  }
-
-  export interface Parameter {
-    parameterName: string;
-    modelName: string;
-  }
-
-  export function scan(classDecl: ClassDeclaration, context: SchematicContext): Scanner {
-    return new Scanner(classDecl, context);
-  }
-}

package/schematics/place-routes/scanner.ts

@@ -1,145 +0,0 @@
-import { SchematicContext } from '@angular-devkit/schematics';
-import {
-  ClassDeclaration,
-  Decorator,
-  Node,
-  ObjectLiteralExpression,
-  PropertyAssignmentStructure,
-  PropertyDeclaration,
-  SyntaxKind
-} from 'ts-morph';
-import { PlaceDef } from './place-def';
-
-function isDecoratorNode(node: Node, name: string): node is Decorator {
-  return node.getKind() === SyntaxKind.Decorator && node.getText().startsWith(`${name}(`); // NOTE: I'm only supporting the @Decorator(...) style of usage (i.e. decorator factories).
-}
-
-export class Scanner {
-
-  private placeAnnotation: Decorator;
-
-  constructor(private readonly classDecl: ClassDeclaration, readonly context: SchematicContext) {
-    classDecl.forEachChild((node) => {
-      if (isDecoratorNode(node, '@Place')) {
-        this.placeAnnotation = node as Decorator;
-        // stop iterating when the node is a class declaration
-        return true;
-      }
-    });
-  }
-
-  isPlace() {
-    return !!this.placeAnnotation;
-  }
-
-  onMatch(callback: (scan: Scanner) => void) {
-    if (this.isPlace()) {
-      callback(this);
-    }
-  }
-
-  createDefinition(moduleImportPath: string): PlaceDef {
-    this.getRouteIdParameter();
-    return new PlaceDef(moduleImportPath,
-      this.classDecl.getName(),
-      this.getPlaceOptions(),
-      this.getRouteIdParameter(),
-      this.getQueryParameters()
-    );
-  }
-
-  protected getPlaceOptions(): PlaceDef.Options {
-    // const args = this.placeAnnotation.getArguments();
-    // if (args.length !== 1) {
-    //   console.error('@Place() accepts a single Options argument. got', args);
-    // }
-    return Scanner.getOptionsArg(this.placeAnnotation, {
-      title: '',
-      path: '',
-      order: -1,
-      authenticate: 'true'
-    }, {
-      position: 0,
-      required: true
-    });
-  }
-
-  protected getRouteIdParameter(): PlaceDef.Parameter {
-    const routeProperties = this.getDecoratedProperties('@RouteId');
-    if (routeProperties.length === 1) {
-      const route = routeProperties[0];
-      const routeOptions = Scanner.getOptionsArg(route.decorator, { as: 'id' }, {
-        position: 1,
-        required: false
-      });
-      return {
-        modelName: route.property.getName(),
-        parameterName: routeOptions.as
-      };
-    } else if (routeProperties.length > 1) {
-      this.context.logger.error(`There an only be one @RouteId(), got ${routeProperties.length}`);
-    }
-    return null;
-  }
-
-  protected getQueryParameters(): PlaceDef.Parameter[] {
-    return this.getDecoratedProperties('@QueryParameter')
-      .map(p => {
-        const options = Scanner.getOptionsArg(p.decorator, { as: p.property.getName() }, {
-          position: 1,
-          required: false
-        });
-        return {
-          modelName: p.property.getName(),
-          parameterName: options.as
-        };
-      });
-  }
-
-  protected getDecoratedProperties(annotation: string): { decorator: Decorator, property: PropertyDeclaration }[] {
-    return this.classDecl.getProperties().map(p => {
-      let result: { decorator: Decorator, property: PropertyDeclaration } = null;
-      p.forEachChild((child) => {
-        if (isDecoratorNode(child, annotation)) {
-          result = {
-            decorator: child,
-            property: p
-          };
-          // stop traversal
-          return true;
-        }
-      });
-      return result;
-    }).filter(r => !!r);
-  }
-
-}
-
-export namespace Scanner {
-
-  export function getObjectLiteralArgument(annotation: Decorator, position: number): ObjectLiteralExpression {
-    const args = annotation.getArguments();
-    if (args.length > position && args[position] instanceof ObjectLiteralExpression) {
-      return args[position] as ObjectLiteralExpression;
-    }
-    return null;
-  }
-
-  export function getOptionsArg<T extends {}>(annotation: Decorator, defaults: T, options: { position: number, required: boolean } = {
-    position: 0,
-    required: true
-  }): T {
-    const objectLiteralArgument = getObjectLiteralArgument(annotation, options.position);
-    if (!objectLiteralArgument) {
-      if (options.required) {
-        console.error(`expected object literal arg at position ${options.position}`, { expectedType: defaults });
-      }
-      return defaults;
-    } else {
-      return objectLiteralArgument.getProperties().reduce((result, p) => {
-        const structure = p.getStructure() as PropertyAssignmentStructure;
-        return { ...result, [structure.name]: structure.initializer as string };
-      }, { ...defaults });
-    }
-  }
-}

package/schematics/place-routes/schema.ts

@@ -1,7 +0,0 @@
-export interface Schema {
-  project: string;
-  authGuard: {
-    className: string;
-    moduleImport: string;
-  }
-}

package/src/lib/angular-ui-powerups.module.spec.ts

@@ -1,14 +0,0 @@
-import { async, TestBed } from '@angular/core/testing';
-import { AngularUiPowerupsModule } from './angular-ui-powerups.module';
-
-describe('AngularUiPowerupsModule', () => {
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      imports: [AngularUiPowerupsModule]
-    }).compileComponents();
-  }));
-
-  it('should create', () => {
-    expect(AngularUiPowerupsModule).toBeDefined();
-  });
-});

package/src/lib/angular-ui-powerups.module.ts

@@ -1,49 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { MatFormFieldModule, MatInputModule, MatSelectModule } from '@angular/material';
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NumberInputComponent} from './components/forms/number-input/number-input.component';
-import { CommandDirective } from './directives/command.directive';
-import { FocusBindingDirective } from './directives/focus-binding.directive';
-import { StringInputComponent } from './components/forms/string-input/string-input.component';
-import { PasswordInputComponent } from './components/forms/password-input/password-input.component';
-import { SelectInputComponent } from './components/forms/select-input/select-input.component';
-import { InteractionModule } from './interaction/interaction.module';
-import { PlaceModule } from './place/place.module';
-
-@NgModule({
-  declarations: [
-    CommandDirective,
-    FocusBindingDirective,
-    NumberInputComponent,
-    StringInputComponent,
-    PasswordInputComponent,
-    SelectInputComponent,
-  ],
-  imports: [
-    CommonModule,
-    BrowserModule,
-    BrowserAnimationsModule,
-    FormsModule,
-    MatInputModule,
-    MatFormFieldModule,
-    MatSelectModule,
-    PlaceModule,
-    InteractionModule
-  ],
-  exports: [
-    CommandDirective,
-    FocusBindingDirective,
-    NumberInputComponent,
-    StringInputComponent,
-    PasswordInputComponent,
-    SelectInputComponent,
-    InteractionModule,
-    PlaceModule,
-  ]
-
-})
-export class AngularUiPowerupsModule {
-}

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();
-  });
-});