@coolon/angular-ui-powerups 0.0.24 → 0.0.25

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,100 @@
+//: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

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

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

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

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