@coolon/angular-ui-powerups 0.0.25 → 0.0.27

package/src/lib/interaction/interaction-context.ts

@@ -1,16 +0,0 @@
-import { InjectionToken } from '@angular/core';
-import { Constructable } from '@coolon/pectin';
-import { Activity } from './activity';
-import { Alert } from './alert';
-import { Confirm } from './confirm';
-
-export const INTERACTION_CONTEXT = new InjectionToken<any>('InteractionContext');
-
-export abstract class InteractionContext {
-
-  abstract startActivity<D, R, E>(activityType: Constructable<Activity<D, R, E>>, data?: D): Promise<R>;
-
-  abstract confirm(confirm: Confirm): Promise<boolean>;
-
-  abstract alert(alert: Alert): Promise<void>;
-}

package/src/lib/interaction/interaction.module.ts

@@ -1,35 +0,0 @@
-import { PortalModule } from '@angular/cdk/portal';
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { MatButtonModule, MatDialogModule, MatTabsModule } from '@angular/material';
-import { ActivityContainerComponent } from './components/activity-container/activity-container.component';
-import { AlertDialogComponent } from './components/alert-dialog/alert-dialog.component';
-import { ConfirmationDialogComponent } from './components/confirmation-dialog/confirmation-dialog.component';
-import { ActivityOutletComponent } from './components/activity-outlet/activity-outlet.component';
-import { DialogInteractionService } from './services/dialog-interaction.service';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    MatButtonModule,
-    MatDialogModule,
-    MatTabsModule,
-    PortalModule
-  ],
-  declarations: [
-    ActivityContainerComponent,
-    ConfirmationDialogComponent,
-    AlertDialogComponent,
-    ActivityOutletComponent
-  ],
-  entryComponents: [
-    ActivityContainerComponent,
-    ConfirmationDialogComponent,
-    AlertDialogComponent
-  ],
-  providers: [
-    DialogInteractionService
-  ]
-})
-export class InteractionModule {
-}

package/src/lib/interaction/result.ts

@@ -1,16 +0,0 @@
-export interface Result<R, E> {
-  // catch(callback: (error: E) => void): Result<R,E>;
-}
-
-export namespace Result {
-  export interface Callback<R,E> {
-    then: <T>(result:R)=>T;
-    catch: <T>(result:E)=>T;
-  }
-
-}
-
-// const r:Result<string, number> = null;
-
-// r.catch(e => {}).then();
-

package/src/lib/interaction/services/dialog-interaction.service.scss

@@ -1,11 +0,0 @@
-// this is currently imported by styles.scss in the project root.
-.dialog-interaction-service {
-  max-width: 95vw !important;
-  max-height: 95vh !important;
-
-  mat-dialog-container {
-    max-width: 95vw !important;
-    max-height: 95vh !important;
-    padding: 0;
-  }
-}

package/src/lib/interaction/services/dialog-interaction.service.spec.ts

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

package/src/lib/interaction/services/dialog-interaction.service.ts

@@ -1,63 +0,0 @@
-import { Injectable } from '@angular/core';
-import { MatDialog, MatDialogRef } from '@angular/material';
-import { Constructable } from '@coolon/pectin';
-import { Activity } from '../activity';
-import { Alert } from '../alert';
-import { ActivityContainerComponent } from '../components/activity-container/activity-container.component';
-import { AlertDialogComponent } from '../components/alert-dialog/alert-dialog.component';
-import { ConfirmationDialogComponent } from '../components/confirmation-dialog/confirmation-dialog.component';
-import { Confirm } from '../confirm';
-import { InteractionContext } from '../interaction-context';
-import { assert } from '@coolon/typescript-utilities';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class DialogInteractionService extends InteractionContext {
-
-  constructor(private readonly dialogService: MatDialog) {
-    super();
-    assert.notNil(dialogService);
-  }
-
-  startActivity<D, R, E>(activityType: Constructable<Activity<D, R, E>>, data?: D): Promise<R> {
-    return this._startActivity(activityType, data);
-  }
-
-  private _startActivity<D, R, E>(activityType: Constructable<Activity<D, R, E>>, data: D, disableClose: boolean = true) {
-    const config = {
-      data,
-      disableClose,
-      panelClass: 'dialog-interaction-service',
-      autoFocus: false
-    };
-    const matDialogRef = this.dialogService.open(ActivityContainerComponent, config) as MatDialogRef<ActivityContainerComponent>;
-    return new Promise<R>((resolve, reject) => {
-      const activityContainer = matDialogRef.componentInstance;
-      activityContainer.parentInteractionContext = this;
-      activityContainer.initialise({
-        activityClass: activityType,
-        activityData: data,
-        onDone(result) {
-          resolve(result);
-          matDialogRef.close(result);
-        },
-        onCancel(error) {
-          reject(error);
-          matDialogRef.close(error);
-        }
-      });
-
-      matDialogRef.updateSize();
-    });
-  }
-
-  alert(alert: Alert): Promise<void> {
-    return this._startActivity(AlertDialogComponent, alert, false);
-  }
-
-  confirm(confirm: Confirm): Promise<boolean> {
-    return this._startActivity(ConfirmationDialogComponent, confirm, true);
-  }
-
-}

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

@@ -1,33 +0,0 @@
-import { ActivatedRoute, Router } from '@angular/router';
-
-import { Constructable, DelegatingValueModel, MutableValueModel, UseDelegate } from '@coolon/pectin';
-import { Memoize } from '@typescript-plus/fast-memoize-decorator';
-import { DisposableComponent } from '../components/disposable-component';
-import { PlaceComponent } from './place-component';
-import { Place } from './place.decorator';
-import { RouteParameterBindings } from './route/route-parameter-bindings';
-
-export class AbstractPlaceComponent extends DisposableComponent implements PlaceComponent {
-
-  @UseDelegate()
-  readonly titleModel: MutableValueModel<string>;
-
-  private routeBindingMediator: RouteParameterBindings;
-
-  constructor(protected activatedRoute: ActivatedRoute, router: Router) {
-    super();
-    this.routeBindingMediator = this.registerDisposable(new RouteParameterBindings(this, router, activatedRoute));
-    // See https://coolon.atlassian.net/browse/PEC-59
-    (this.titleModel as unknown as DelegatingValueModel<string>).setDefault(this.placeConfig.title);
-  }
-
-  @Memoize()
-  get placeConfig(): Place.Descriptor {
-    return Place.getDescriptor(this.constructor as any as Constructable<PlaceComponent>);
-  }
-
-  canDeactivate(): boolean | Promise<boolean> {
-    return true;
-  }
-
-}

package/src/lib/place/components/busy-overlay/busy-overlay.component.html

@@ -1,4 +0,0 @@
-<ng-content></ng-content>
-<div class="busy-overlay-backdrop" *ngIf="busyModel.value">
-  <mat-progress-spinner mode="indeterminate" [diameter]="52"></mat-progress-spinner>
-</div>

package/src/lib/place/components/busy-overlay/busy-overlay.component.scss

@@ -1,27 +0,0 @@
-:host {
-  position: relative;
-  //display: grid;
-  //grid-template-columns: 1fr;
-  //grid-template-rows: 1fr;
-}
-
-.busy-overlay-content {
-  //display: grid;
-  //grid-template-columns: 1fr;
-  //grid-template-rows: 1fr;
-  //width: 100%;
-  //height: 100%;
-}
-
-div.busy-overlay-backdrop {
-  position: absolute;
-  background-color: rgba(0,0,0,0.2);
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  display: grid;
-  grid-template-columns: auto;
-  grid-template-rows: auto;
-  place-content: center;
-}

package/src/lib/place/components/busy-overlay/busy-overlay.component.spec.ts

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

package/src/lib/place/components/busy-overlay/busy-overlay.component.ts

@@ -1,23 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { StoreInValueModel, UseDelegate, ValueModel } from '@coolon/pectin';
-
-@Component({
-  selector: 'angular-ui-powerups-busy-overlay',
-  templateUrl: `./busy-overlay.component.html`,
-  styleUrls: ['./busy-overlay.component.scss']
-})
-export class BusyOverlayComponent implements OnInit {
-
-  @Input() @UseDelegate()
-  busyModel: ValueModel<boolean>;
-
-  @Input() @StoreInValueModel('busyModel')
-  busy: boolean;
-
-  constructor() {
-  }
-
-  ngOnInit() {
-  }
-
-}

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

@@ -1,15 +0,0 @@
-:host {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.container {
-  //display: inline-block;
-  padding: var(--angular-ui-powerups-default-padding);
-  border: 2px dashed rgba(0,0,0,0.2);
-  border-radius: 5px;
-  font-size: 14px;
-  font-weight: 300;
-}

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