@coolon/angular-ui-powerups 0.0.26 → 0.0.28

package/src/lib/place/components/empty-state/empty-state.component.spec.ts

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

package/src/lib/place/components/empty-state/empty-state.component.ts

@@ -1,19 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'angular-ui-powerups-empty-state',
-  template: `
-      <div class="container">
-          <ng-content></ng-content>
-      </div>
-  `,
-  styleUrls: ['./empty-state.component.scss']
-})
-export class EmptyStateComponent implements OnInit {
-
-  constructor() {
-  }
-
-  ngOnInit() {
-  }
-}

package/src/lib/place/components/place-outlet/place-outlet.component.html

@@ -1,7 +0,0 @@
-<div container [@routeAnimations]="getPlaceOrder(routerOutlet)">
-  <router-outlet #routerOutlet="outlet"
-                 (activate)="onActivate($event)"
-                 (deactivate)="onDeactivate($event)">
-  </router-outlet>
-</div>
-

package/src/lib/place/components/place-outlet/place-outlet.component.scss

@@ -1,12 +0,0 @@
-:host {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
-[container] {
-  flex: 1;
-  display: grid;
-  grid-template-rows: 0 1fr; // the first row is the empty router outlet.
-  min-height: 0;
-}

package/src/lib/place/components/place-outlet/place-outlet.component.spec.ts

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

package/src/lib/place/components/place-outlet/place-outlet.component.ts

@@ -1,37 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
-import { PlaceComponent } from '../../place-component';
-import { PlaceService } from '../../place.service';
-import { LEFT_RIGHT_PLACE_ANIMATION } from './route-animations';
-import {Trace} from "@coolon/pectin";
-
-@Component({
-  selector: 'angular-ui-powerups-place-outlet',
-  templateUrl: './place-outlet.component.html',
-  styleUrls: ['./place-outlet.component.scss'],
-  animations: [LEFT_RIGHT_PLACE_ANIMATION]
-})
-export class PlaceOutletComponent implements OnInit {
-
-  @Input()
-  animate = true;
-
-  constructor(private readonly placeService: PlaceService) {
-  }
-
-  ngOnInit() {
-  }
-
-  onActivate($event: PlaceComponent) {
-    this.placeService.onActivate($event);
-  }
-
-  onDeactivate($event: PlaceComponent) {
-    this.placeService.onDeactivate($event);
-  }
-
-  getPlaceOrder(outlet: RouterOutlet) {
-    return this.animate && outlet && outlet.activatedRouteData && outlet.activatedRouteData['placeOrder'];
-  }
-
-}

package/src/lib/place/components/place-outlet/route-animations.ts

@@ -1,30 +0,0 @@
-import { animate, animateChild, group, query, style, transition, trigger } from '@angular/animations';
-
-const left = [
-  query(':enter, :leave', style({ position: 'fixed', width: '100%' }), { optional: true }),
-  group([
-    query(':enter', [style({ transform: 'translateX(-100%)' }), animate('.3s ease-out', style({ transform: 'translateX(0%)' }))], {
-      optional: true,
-    }),
-    query(':leave', [style({ transform: 'translateX(0%)' }), animate('.3s ease-out', style({ transform: 'translateX(100%)' }))], {
-      optional: true,
-    }),
-  ]),
-];
-
-const right = [
-  query(':enter, :leave', style({ position: 'fixed', width: '100%' }), { optional: true }),
-  group([
-    query(':enter', [style({ transform: 'translateX(100%)' }), animate('.3s ease-out', style({ transform: 'translateX(0%)' }))], {
-      optional: true,
-    }),
-    query(':leave', [style({ transform: 'translateX(0%)' }), animate('.3s ease-out', style({ transform: 'translateX(-100%)' }))], {
-      optional: true,
-    }),
-  ]),
-];
-
-export const LEFT_RIGHT_PLACE_ANIMATION = trigger('routeAnimations', [
-  transition(':increment', right),
-  transition(':decrement', left),
-]);

package/src/lib/place/components/tabbed-place-navigation/tabbed-place-navigation.component.html

@@ -1,7 +0,0 @@
-<nav mat-tab-nav-bar>
-  <a mat-tab-link *ngFor="let placeDescriptor of orderedPlaces.value" [routerLink]='placeDescriptor.path'
-     routerLinkActive #rla="routerLinkActive"
-     [active]="rla.isActive"
-     [matTooltip]="placeDescriptor.title">{{placeDescriptor.title}}</a>
-</nav>
-

package/src/lib/place/components/tabbed-place-navigation/tabbed-place-navigation.component.scss

@@ -1,100 +0,0 @@
-//:host {
-//  display: flex;
-//  flex-direction: column;
-//  --expanded-width: 235px;
-//  --nav-item-width: var(--nav-bar-height);
-//
-//  width: var(--nav-item-width);
-//  //max-width: var(--nav-item-width);
-//
-//  transition: width 125ms linear;
-//
-//  &.expanded {
-//    width: var(--expanded-width);
-//    max-width: var(--expanded-width);
-//  }
-//
-//  background-color: #555;
-//  color: rgba(255, 255, 255, 0.9);
-//}
-//
-//.expanded-only {
-//  max-width: 0;
-//  overflow: hidden;
-//}
-//
-//.collapsed-only {
-//  max-width: 100%;
-//  overflow: hidden;
-//}
-//
-//.header {
-//  display: flex;
-//  flex-direction: row;
-//  justify-content: flex-end;
-//  align-items: center;
-//  height: var(--nav-bar-height);
-//  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-//
-//  .menu {
-//    //padding-left: var(--default-padding);
-//    flex: 1;
-//  }
-//
-//  button {
-//    color: inherit;
-//    width: var(--nav-item-width);
-//    height: var(--nav-bar-height);
-//  }
-//
-//}
-//
-//mat-nav-list {
-//  flex: 1;
-//  display: flex;
-//  flex-direction: column;
-//}
-//
-//.mat-list-item {
-//  width: var(--nav-item-width);
-//  height: var(--nav-bar-height);
-//  color: inherit;
-//
-//  &.active {
-//    background-color: #444;
-//  }
-//}
-//
-//mat-icon {
-//  color: inherit;
-//  &.flip-horizontal {
-//    transform: scaleX(-1);
-//  }
-//}
-//
-//:host-context(.expanded) {
-//
-//  .expanded-only {
-//    max-width: 100%;
-//  }
-//  .collapsed-only {
-//    max-width: 0;
-//  }
-//
-//  .mat-list-item {
-//    mat-icon {
-//      margin-right: 12px;
-//    }
-//
-//    span {
-//      text-wrap: none;
-//      white-space: nowrap;
-//    }
-//  }
-//}
-//
-//.app-menu {
-//  padding-top: 0;
-//}
-//
-//

package/src/lib/place/components/tabbed-place-navigation/tabbed-place-navigation.component.spec.ts

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

package/src/lib/place/components/tabbed-place-navigation/tabbed-place-navigation.component.ts

@@ -1,30 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { Dsl, ListModel, ListModelChain, StoreInListModel, UseDelegate } from '@coolon/pectin';
-import { DisposableComponent } from '../../../components/disposable-component';
-import { Place } from '../../place.decorator';
-
-@Component({
-  selector: 'angular-ui-powerups-tabbed-place-navigation',
-  templateUrl: './tabbed-place-navigation.component.html',
-  styleUrls: ['./tabbed-place-navigation.component.scss']
-})
-export class TabbedPlaceNavigationComponent extends DisposableComponent implements OnInit {
-
-  @Input() @StoreInListModel('placesModel')
-  places: Place.Descriptor[];
-
-  @Input() @UseDelegate()
-  placesModel: ListModel<Place.Descriptor>;
-
-  readonly orderedPlaces: ListModelChain<Place.Descriptor>;
-
-  constructor() {
-    super();
-    const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
-    this.orderedPlaces = chain(this.placesModel).sortBy('order');
-  }
-
-  ngOnInit() {
-  }
-
-}

package/src/lib/place/guards/leave-place.guard.spec.ts

@@ -1,15 +0,0 @@
-import { TestBed, async, inject } from '@angular/core/testing';
-
-import { LeavePlaceGuard } from './leave-place.guard';
-
-describe('LeavePlaceGuard', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [LeavePlaceGuard]
-    });
-  });
-
-  it('should ...', inject([LeavePlaceGuard], (guard: LeavePlaceGuard) => {
-    expect(guard).toBeTruthy();
-  }));
-});

package/src/lib/place/guards/leave-place.guard.ts

@@ -1,18 +0,0 @@
-import { Injectable, Injector } from '@angular/core';
-import { ActivatedRouteSnapshot, CanDeactivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
-import { Observable } from 'rxjs';
-import { PlaceComponent } from '../place-component';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class LeavePlaceGuard implements CanDeactivate<PlaceComponent> {
-
-  constructor(private router: Router, private injector: Injector) {
-  }
-
-  canDeactivate(component: PlaceComponent, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState?: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
-    return component.canDeactivate();
-  }
-
-}

package/src/lib/place/guards/place-route.guard.ts

@@ -1,37 +0,0 @@
-import { Injectable, Injector } from '@angular/core';
-import {
-  ActivatedRouteSnapshot,
-  CanActivate,
-  CanDeactivate,
-  Router,
-  RouterStateSnapshot,
-  UrlTree
-} from '@angular/router';
-import { Trace } from '@coolon/pectin';
-import { Klass } from '@coolon/typescript-utilities';
-import { Observable } from 'rxjs';
-import { PlaceComponent } from '../place-component';
-import { RouteParameterBindings } from '../route/route-parameter-bindings';
-import { RouteParameterSanitiser } from '../route/route-parameter-sanitiser';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class PlaceRouteGuard implements CanActivate {
-
-  constructor(private router: Router, private injector: Injector) {
-  }
-
-  @Trace()
-  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
-    const routeParameters = Klass.get(route.component).getMetadataList(RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY);
-    const sanitiser = new RouteParameterSanitiser(routeParameters, route, this.injector);
-    return sanitiser.sanitise().then(proceed => {
-      if (!proceed) {
-        sanitiser.redirect(this.router);
-      }
-      return proceed;
-    });
-  }
-
-}

package/src/lib/place/place-component.ts

@@ -1,6 +0,0 @@
-import { ValueModel } from '@coolon/pectin';
-
-export interface PlaceComponent {
-  titleModel:ValueModel<string>;
-  canDeactivate(): boolean | Promise<boolean>;
-}

package/src/lib/place/place.decorator.ts

@@ -1,40 +0,0 @@
-import { assert, Constructable } from '@coolon/pectin';
-import * as _ from 'lodash';
-import 'reflect-metadata';
-import { PlaceComponent } from './place-component';
-
-export function Place(options: Place.Options) {
-  return (target: Function) => {
-    Reflect.defineMetadata('place.options', options, target);
-  };
-}
-
-export namespace Place {
-  export interface Options {
-    path: string,
-    title: string,
-    order: number;
-    authenticate?: boolean // defaults to true
-    // childOf?: Constructable<PlaceComponent>
-  }
-
-  export class Descriptor {
-    readonly path: string;
-    readonly authenticate: boolean;
-    readonly title: string;
-    readonly order: number;
-
-    constructor(placeClass: Constructable<PlaceComponent>, options: Options) {
-      assert.notNil(options);
-      this.path = options.path;
-      this.title = options.title;
-      this.order = options.order;
-      this.authenticate = _.isNil(options.authenticate) || options.authenticate;
-    }
-  }
-
-  export function getDescriptor(klass: Constructable<PlaceComponent>): Descriptor {
-    const placeOptions = Reflect.getMetadata('place.options', klass);
-    return new Descriptor(klass, placeOptions);
-  }
-}

package/src/lib/place/place.module.ts

@@ -1,44 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { MatProgressSpinnerModule } from '@angular/material';
-import { MatListModule } from '@angular/material/list';
-import { MatTabsModule } from '@angular/material/tabs';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { RouterModule } from '@angular/router';
-import { BusyOverlayComponent } from './components/busy-overlay/busy-overlay.component';
-import { EmptyStateComponent } from './components/empty-state/empty-state.component';
-import { PlaceOutletComponent } from './components/place-outlet/place-outlet.component';
-import { TabbedPlaceNavigationComponent } from './components/tabbed-place-navigation/tabbed-place-navigation.component';
-import { PlaceService } from './place.service';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    BrowserAnimationsModule,
-    MatProgressSpinnerModule,
-    RouterModule,
-    MatTabsModule,
-    MatListModule,
-    MatTooltipModule
-  ],
-  declarations: [
-    EmptyStateComponent,
-    BusyOverlayComponent,
-    PlaceOutletComponent,
-    TabbedPlaceNavigationComponent
-  ],
-  entryComponents: [BusyOverlayComponent],
-  exports: [
-    BusyOverlayComponent,
-    PlaceOutletComponent,
-    EmptyStateComponent,
-    TabbedPlaceNavigationComponent
-  ],
-  providers: [
-    PlaceService
-  ]
-})
-export class PlaceModule {
-
-}

package/src/lib/place/place.service.spec.ts

@@ -1,12 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { PlaceService } from './place.service';
-
-describe('PlaceService', () => {
-  beforeEach(() => TestBed.configureTestingModule({}));
-
-  it('should be created', () => {
-    const service: PlaceService = TestBed.get(PlaceService);
-    expect(service).toBeTruthy();
-  });
-});

package/src/lib/place/place.service.ts

@@ -1,29 +0,0 @@
-import { Injectable } from '@angular/core';
-import { MutableListModel, Trace } from '@coolon/pectin';
-import { PlaceComponent } from './place-component';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class PlaceService {
-
-  private _activePlaces = new MutableListModel<PlaceComponent>();
-
-  constructor() {
-  }
-
-  get activePlaces() {
-    return this._activePlaces.readonly;
-  }
-
-  @Trace()
-  onActivate(place: PlaceComponent) {
-    this._activePlaces.push(place);
-  }
-
-  @Trace()
-  onDeactivate(place: PlaceComponent) {
-    this._activePlaces.remove(place);
-  }
-
-}

package/src/lib/place/route/json-types.ts

@@ -1,5 +0,0 @@
-export type JsonPrimitive = boolean | number | string;
-export type AnyJson =  JsonPrimitive | null | JsonArray | JsonMap;
-export interface JsonArray extends Array<AnyJson> {}
-export interface JsonMap {  [key: string]: AnyJson; }
-

package/src/lib/place/route/parameter-decorators.ts

@@ -1,99 +0,0 @@
-import { assert, Constructable, UseDelegate } from '@coolon/pectin';
-import { Klass, Opts } from '@coolon/typescript-utilities';
-import { ParameterDefinition } from './parameter-definition.class';
-import { ParameterSanitiser } from './parameter-sanitiser';
-import { ParameterType } from './parameter-type';
-import { RouteParameterBindings } from './route-parameter-bindings';
-
-export interface ParameterOptions<T> {
-  as?: string;
-  sanitiser?: Constructable<ParameterSanitiser<T>>;
-}
-
-export interface ListParameterOptions<T> {
-  as?: string;
-  listSanitiser?: Constructable<ParameterSanitiser<T[]>>;
-}
-
-export function RouteId<T extends string | number>(type: ParameterType<T>, options?: ParameterOptions<T>): PropertyDecorator {
-  // assert.isTruthy(type.isValid());
-  return (prototype: Object, propertyKey: string | symbol) => {
-    const param = createDefinition(propertyKey, type, options, true);
-    Klass.get(prototype).addToOwnMetadataList(RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY, param);
-    UseDelegate()(prototype, propertyKey);
-  };
-}
-
-/**
- * @deprecated use RouteParameter instead.
- * @param type
- * @param options
- */
-export function QueryParameter<T>(type: ParameterType<T>, options?: ParameterOptions<T>): PropertyDecorator {
-  return (prototype: Object, propertyKey: string | symbol) => {
-    const param = createDefinition(propertyKey, type, options, false);
-    Klass.get(prototype).addToOwnMetadataList(RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY, param);
-    UseDelegate()(prototype, propertyKey);
-  };
-}
-
-export function RouteParameter<T>(type: ParameterType<T>, options?: ParameterOptions<T>): PropertyDecorator {
-  // assert.isTruthy(type.isValid());
-  return (prototype: Object, propertyKey: string | symbol) => {
-    const param = createDefinition(propertyKey, type, options, false);
-    Klass.get(prototype).addToOwnMetadataList(RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY, param);
-    UseDelegate()(prototype, propertyKey);
-  };
-}
-
-/**
- * @deprecated use RouteParameterList instead
- * @param elementType
- * @param options
- */
-export function QueryParameterList<E>(elementType: ParameterType<E>, options?: ListParameterOptions<E>): PropertyDecorator {
-  // assert.isTruthy(type.isValid());
-  return (prototype: Object, propertyKey: string | symbol) => {
-    const param = createArrayDefinition(propertyKey, elementType, options);
-    Klass.get(prototype).addToOwnMetadataList(RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY, param);
-    UseDelegate()(prototype, propertyKey);
-  };
-}
-
-export function RouteParameterList<E>(elementType: ParameterType<E>, options?: ListParameterOptions<E>): PropertyDecorator {
-  // assert.isTruthy(type.isValid());
-  return (prototype: Object, propertyKey: string | symbol) => {
-    const param = createArrayDefinition(propertyKey, elementType, options);
-    Klass.get(prototype).addToOwnMetadataList(RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY, param);
-    UseDelegate()(prototype, propertyKey);
-  };
-}
-
-function createDefinition<T>(propertyName: symbol | string, type: ParameterType<T>, options: ParameterOptions<T>, routeId: boolean) {
-  const opts = Opts.get(options);
-  const propertyNameAsString = assert.notNil(propertyName).toString();
-  const def: ParameterDefinition<T> = {
-    name: opts.getOptional('as', propertyNameAsString),
-    propertyName: propertyNameAsString,
-    type: assert.notNil(type),
-    sanitiser: opts.getOptional('sanitiser', null),
-    isRouteId: routeId,
-    isArray: false
-  };
-  return def;
-}
-
-function createArrayDefinition<T>(propertyName: symbol | string, type: ParameterType<T>, options: ListParameterOptions<T>) {
-  const opts = Opts.get(options);
-  const propertyNameAsString = assert.notNil(propertyName).toString();
-
-  const def: ParameterDefinition<T, T[]> = {
-    name: opts.getOptional('as', propertyNameAsString),
-    propertyName: propertyNameAsString,
-    type: assert.notNil(type),
-    sanitiser: opts.getOptional('listSanitiser', null),
-    isRouteId: false,
-    isArray: true
-  };
-  return def;
-}

package/src/lib/place/route/parameter-definition.class.ts

@@ -1,12 +0,0 @@
-import { Constructable } from '@coolon/pectin';
-import { ParameterSanitiser } from './parameter-sanitiser';
-import { ParameterType } from './parameter-type';
-
-export interface ParameterDefinition<E,S=E> {
-  readonly name: string;
-  readonly propertyName: string;
-  readonly type: ParameterType<E>;
-  readonly sanitiser: Constructable<ParameterSanitiser<S>>;
-  readonly isRouteId: boolean;
-  readonly isArray: boolean;
-}