@one-paragon/angular-utilities 1.2.11 → 1.2.12

package/src/rxjs/mapError.ts

@@ -0,0 +1,8 @@
+import { Observable, of } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+
+export function mapError<T, TResult>(projection: (error: any) => TResult) {
+  return function (src: Observable<T>): Observable<T | TResult> {
+    return src.pipe(catchError(e => of(projection(e))),);
+  };
+}

package/src/rxjs/rxjs-operators.ts

@@ -0,0 +1,132 @@
+import { Predicate } from '@angular/core';
+import { flatten } from 'lodash';
+import {
+  filter,
+  first,
+  map,
+  pairwise,
+  startWith,
+  Observable,
+  combineLatest,
+  Subscription,
+  MonoTypeOperatorFunction,
+  OperatorFunction,
+  concatMap,
+  merge,
+  of,
+  delay
+} from 'rxjs';
+
+
+export const onceWhen = <T>(predicate: Predicate<T>) => (src: Observable<T>) : Observable<T> => {
+  return src.pipe(filter(predicate),first());
+}
+
+export const mapArray = <T, U>(mapFunc: (src: T, index?: number) => U ) => (source: Observable<T[]>) =>
+  source.pipe( map( src => src.map(mapFunc) ) );
+
+export  const filterArray = <T>(filterFunc: (src: T) => boolean ) => (source: Observable<T[]>) =>
+  source.pipe( map( src => src.filter(filterFunc) ) );
+
+export const onWait = startWithIfEmpty;
+export function startWithIfEmpty<T,V extends T>(val: V, wait = 0) : MonoTypeOperatorFunction<T> {
+  return (source: Observable<T>) => {
+    return new Observable<T>(subscriber => {
+      let emitted = false;
+      setTimeout(() => {
+        if(!emitted) {
+          subscriber.next(val);
+        }
+      }, wait);
+      const sub = source.subscribe({
+        next(x) { emitted = true; subscriber.next(x) },
+        error(err) { emitted = true; subscriber.error(err) },
+        complete() { emitted = true; subscriber.complete(); }
+      });
+      return () => sub.unsubscribe();
+    });
+  }
+
+}
+
+export const combineArrays = <T>(sources: Observable<T[]>[]): Observable<T[]> => {
+  return combineLatest(
+    sources.map( src => src.pipe(startWithIfEmpty([] as T [])))
+  ).pipe(
+    map( res => res.flat() )
+  );
+};
+
+export function switchOff( switchSource: Observable<boolean>, defaultState: boolean = true) {
+  return <T>(source: Observable<T>) : Observable<T> => {
+    return new Observable(subsciber => {
+      let isOn = defaultState;
+      const subscription = new Subscription();
+      subscription.add( switchSource.subscribe( on => isOn = on ));
+      subscription.add(source.subscribe({
+        next(value) {
+          if(isOn) {
+            subsciber.next(value);
+          }
+        },
+        error: error => subsciber.error(error),
+        complete: () => subsciber.complete()
+      }));
+      return subscription;
+    });
+  }
+}
+
+export function skipOneWhen( skipper: Observable<any> ) {
+  return <T>(source: Observable<T>) : Observable<T> => {
+    return new Observable(subsriber => {
+      const subscription = new Subscription();
+      let skipNext = false;
+      subscription.add(skipper.subscribe( _ => skipNext = true));
+      subscription.add(source.subscribe({
+        next(value) {
+          if(skipNext) {
+            skipNext = false;
+          } else {
+            subsriber.next(value);
+          }
+        },
+        error: error => subsriber.error(error),
+        complete: () => subsriber.complete()
+      }));
+      return subscription;
+    });
+  }
+}
+
+export function previousAndCurrent<T>(startingValue : T) : OperatorFunction<T, [T, T]> {
+  return (source: Observable<T>) => {
+    return source.pipe(startWith(startingValue), pairwise());
+  }
+}
+
+export function notNull<T>(): OperatorFunction<(T | null | undefined), T> {
+  return  (source: Observable<T | null | undefined>) => {
+    return  source.pipe(filter( (o: T | null | undefined): o is T => o != null) )
+  }
+}
+
+export function delayOn<T>(predicate: (t: T) => boolean, delayTime: number) {
+  return (src: Observable<T>) => {
+    return src.pipe(
+      concatMap(r => {
+        if (predicate(r)) {
+          return merge(
+            of({ r }),
+            of(null).pipe(delay(delayTime))
+          ).pipe(
+            notNull(),
+            map(d => d.r)
+          );
+        } else {
+          return of(r);
+        }
+      })
+    );
+  };
+}

package/src/rxjs/subjectifier.ts

@@ -0,0 +1,17 @@
+import { merge, Observable, Observer, Subject } from 'rxjs';
+type PipeLike<T> = Observable<T>['pipe'];
+export class Subjectifier<T> extends Observable<T>{
+  private _subj = new Subject<T>();
+  private merged: Observable<T>;
+  constructor(_source: Observable<T>){
+    super((obs: Observer<T>) => {
+      const s = merge( _source, this._subj ).subscribe(obs);
+      return s;
+    });
+
+    this.merged = merge(_source, this._subj);
+  }
+  next: Subject<T>['next'] = this._subj.next.bind(this._subj);
+  newSubj = (...operations: Parameters<PipeLike<T>>) =>
+    new Subjectifier(this.merged.pipe(...operations));
+}

package/src/rxjs/subscriber.directive.ts

@@ -0,0 +1,57 @@
+import { DestroyRef, Directive, Injector, OnDestroy, assertInInjectionContext, inject } from "@angular/core";
+import { Observable, Subscription } from "rxjs";
+
+@Directive()
+export class Subscriber implements OnDestroy{
+  subscriptions: Subscription[] = [];
+  handle = (subscription: Subscription) => {
+    this.subscriptions.push(subscription);
+  }
+  on = <T = any>(obs: Observable<T>, action: (t: T) => any) => {
+    this.handle(obs.subscribe(action));
+  }
+
+  ngOnDestroy() {
+    this.subscriptions.forEach(subscription => {
+      subscription.unsubscribe();
+    });
+  }
+}
+
+export function subscriber(injector: Injector): Subscriber
+export function subscriber(subscription?: Subscription, injector?: Injector): Subscriber
+export function subscriber<T = any>(obs: Observable<T>, action: (t: T) => any, injector?: Injector): Subscriber
+export function subscriber<T = any>(obsOrSubOrInjector?: Observable<T> | Subscription | Injector, actionOrInjector?: ((t: T) => any) | Injector, injector?: Injector): Subscriber {
+
+  const destroyRef = getDestroyRef(obsOrSubOrInjector, actionOrInjector, injector);
+
+  const subscriber = new Subscriber();
+
+  if(obsOrSubOrInjector instanceof Subscription){
+    subscriber.handle(obsOrSubOrInjector);
+  } else if(obsOrSubOrInjector instanceof Observable){
+    subscriber.handle(obsOrSubOrInjector.subscribe(actionOrInjector as (t: T) => any));
+  }
+
+  destroyRef.onDestroy(() => subscriber?.ngOnDestroy());
+
+  return subscriber;
+}
+
+function getDestroyRef(obsOrSubOrInjector: any, actionOrInjector?: any, injector?: Injector){
+  const providedInjector = obsOrSubOrInjector instanceof Injector ? obsOrSubOrInjector
+    : actionOrInjector instanceof Injector ? actionOrInjector
+    : injector;
+
+  if(!providedInjector){
+    try {
+      assertInInjectionContext(subscriber);
+    } catch (error) {
+      throw new Error('createRequestor() must be used in an Injection Context or you must provide an injector to createRequestor()');
+    }
+  }
+
+  const destroyRef = providedInjector?.get(DestroyRef) || inject(DestroyRef);
+
+  return destroyRef;
+}

package/src/specs/clickSubject.spec.ts

@@ -0,0 +1,95 @@
+import { Component } from "@angular/core";
+import { ComponentFixture, fakeAsync, TestBed, waitForAsync } from "@angular/core/testing";
+import { Subject } from "rxjs";
+import { ClickEmitterDirective, ClickSubjectDirective } from "../utilities";
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {HarnessLoader} from '@angular/cdk/testing';
+import { MatButtonModule } from "@angular/material/button";
+import { MatButtonHarness } from "@angular/material/button/testing";
+
+@Component({
+    template: `
+     <a mat-button clickEmitter  #subj='clickEmitter' >click me</a>
+     <div *ngIf='subj | async'>Hello World!</div>
+    `
+}) export class TestComponent {
+  subject = new Subject();
+}
+
+@Component({
+  template: `
+   <a mat-button [clickSubject]='{content: "Hello World!" }' #subj='clickSubject' >click me</a>
+   <div *ngIf='subj | async as o'>{{o.content}}</div>
+  `
+}) export class TestContentComponent {
+subject = new Subject();
+}
+
+
+let fixture: ComponentFixture<TestComponent>;
+let loader: HarnessLoader;
+
+const setupTest = (): void => {
+  TestBed.configureTestingModule({
+      imports: [MatButtonModule],
+      declarations: [
+        TestComponent,
+        ClickEmitterDirective,
+    ],
+    providers: [  ]
+    });
+    fixture = TestBed.createComponent(TestComponent);
+    fixture.detectChanges();
+    loader = TestbedHarnessEnvironment.documentRootLoader(fixture);
+};
+
+const setupContentTest = (): void => {
+  TestBed.configureTestingModule({
+      imports: [MatButtonModule],
+      declarations: [
+        TestContentComponent,
+        ClickSubjectDirective,
+    ],
+    providers: [  ]
+    });
+    fixture = TestBed.createComponent(TestContentComponent);
+    fixture.detectChanges();
+    loader = TestbedHarnessEnvironment.documentRootLoader(fixture);
+};
+
+
+describe("ClickSubjectDirective", () => {
+  describe("Default Subject", () => {
+    beforeEach(waitForAsync(setupTest));
+
+    it('before button is clicked the text should remain hidden',async () => {
+      expect(fixture.nativeElement.textContent).not.toContain('Hello World!');
+    });
+
+    it('when button is clicked the text should display', fakeAsync( async () => {
+      const buttonHarness = await loader.getHarness(MatButtonHarness);
+      await buttonHarness.click();
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent).toContain('Hello World!');
+    }));
+
+  });
+
+  describe("Subject with Content", () => {
+    beforeEach(waitForAsync(setupContentTest));
+
+    it('before button is clicked the text should remain hidden',async () => {
+      expect(fixture.nativeElement.textContent).not.toContain('Hello World!');
+    });
+
+    it('when button is clicked the text should display', fakeAsync( async () => {
+      const buttonHarness = await loader.getHarness(MatButtonHarness);
+      await buttonHarness.click();
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent).toContain('Hello World!');
+    }));
+  })
+
+});
+
+

package/src/specs/dialog.spec.ts

@@ -0,0 +1,101 @@
+import { Component } from "@angular/core";
+import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from "@angular/core/testing";
+import { MatDialogModule } from "@angular/material/dialog";
+import { Subject } from "rxjs";
+import { DialogDirective, DialogWrapper } from "../utilities";
+import { DialogService } from "../utilities/directives/dialog-service";
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatDialogHarness} from '@angular/material/dialog/testing';
+import { NoopAnimationsModule } from "@angular/platform-browser/animations";
+import {HarnessLoader} from '@angular/cdk/testing';
+import { MatButtonModule } from "@angular/material/button";
+import { MatButtonHarness } from "@angular/material/button/testing";
+
+@Component({
+    template: `
+    <ng-container *opDialog='subject; let text; let close = close'>
+      If you see this text, I'm open {{text}}
+      <button mat-button (click)='close()' >close</button>
+    </ng-container>
+    `
+}) export class TestComponent {
+  subject = new Subject();
+}
+
+
+describe("DialogDirective", () => {
+
+let fixture: ComponentFixture<TestComponent>;
+let loader: HarnessLoader;
+
+beforeEach(
+  waitForAsync(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MatDialogModule, NoopAnimationsModule, MatButtonModule],
+      declarations: [
+        TestComponent,
+        DialogDirective,
+        DialogWrapper,
+    ],
+    providers: [ DialogService ]
+    }).compileComponents();
+    fixture = TestBed.createComponent(TestComponent);
+    fixture.detectChanges();
+    loader = TestbedHarnessEnvironment.documentRootLoader(fixture);
+  }),
+);
+
+  it('before observable emits the dialog should remain closed',async () => {
+    expect(fixture.nativeElement.textContent).not.toContain('If you see this text, I\'m open');
+  });
+
+  it('when observable emits the dialog should be open', fakeAsync( async () => {
+    fixture.componentInstance.subject.next(true);
+    fixture.detectChanges();
+    const dialogHarness = await loader.getHarness(MatDialogHarness);
+    expect(await dialogHarness.getText()).toContain('If you see this text, I\'m open');
+  }));
+
+  it('when observable emits false the dialog should close', fakeAsync( async () => {
+    fixture.componentInstance.subject.next(true);
+    fixture.detectChanges();
+    let dialogHarness = await loader.getAllHarnesses(MatDialogHarness);
+    expect(dialogHarness.length).toBe(1);
+    fixture.componentInstance.subject.next(false);
+    fixture.detectChanges();
+    dialogHarness = await loader.getAllHarnesses(MatDialogHarness);
+    expect(dialogHarness.length).toBe(0);
+  }));
+
+  it('when close is clicked the dialog should close', fakeAsync( async () => {
+    fixture.componentInstance.subject.next(true);
+    fixture.detectChanges();
+    let dialogHarness = await loader.getAllHarnesses(MatDialogHarness);
+    expect(dialogHarness.length).toBe(1);
+    let buttonHarness = await dialogHarness[0].getHarness(MatButtonHarness);
+    await buttonHarness.click();
+    fixture.detectChanges();
+    dialogHarness = await loader.getAllHarnesses(MatDialogHarness);
+    expect(dialogHarness.length).toBe(0);
+  }));
+
+  it('when observable emits the template should have access to the emitted data', fakeAsync( async () => {
+    fixture.componentInstance.subject.next('Text #1');
+    fixture.detectChanges();
+    const dialogHarness = await loader.getHarness(MatDialogHarness);
+    expect(await dialogHarness.getText()).toContain('Text #1');
+  }));
+
+  it('when observable emits a 2nd time the template should have access to the new data', fakeAsync( async () => {
+    fixture.componentInstance.subject.next('Text #1');
+    fixture.detectChanges();
+    const dialogHarness = await loader.getHarness(MatDialogHarness);
+    expect(await dialogHarness.getText()).toContain('Text #1');
+    fixture.componentInstance.subject.next('Text #2');
+    fixture.detectChanges();
+    expect(await dialogHarness.getText()).toContain('Text #2');
+  }));
+
+});
+
+

package/src/specs/toggleGroupDirective.spec.ts

@@ -0,0 +1,229 @@
+import { Component, DebugElement } from "@angular/core";
+import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
+import { MatSlideToggle, MatSlideToggleModule } from "@angular/material/slide-toggle";
+import { MatSlideToggleGroupDirective } from "../utilities/directives/mat-toggle-group-directive";
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { MatSlideToggleHarness } from '@angular/material/slide-toggle/testing';
+import { By } from "@angular/platform-browser";
+import { count, firstValueFrom, lastValueFrom, skip, Subject, takeUntil } from "rxjs";
+
+abstract class ToggleTestComponent {
+
+}
+
+
+@Component({
+  template: `
+  <ng-container opMatSlideToggleGroup >
+    <mat-slide-toggle name='toggle1' > Slide me! </mat-slide-toggle>
+  </ng-container>
+  `
+}) export class SingleToggleTestComponent extends ToggleTestComponent {
+
+}
+
+@Component({
+  template: `
+  <ng-container opMatSlideToggleGroup [allowMultiple]='true' >
+    <mat-slide-toggle name='toggle1'  > Slide me! </mat-slide-toggle>
+    <mat-slide-toggle name='toggle2' > Slide me! </mat-slide-toggle>
+  </ng-container>
+  `
+}) export class MultiToggleWithMultipleTestComponent extends ToggleTestComponent {
+
+}
+
+@Component({
+  template: `
+  <ng-container opMatSlideToggleGroup  >
+    <mat-slide-toggle name='toggle1'  > Slide me! </mat-slide-toggle>
+    <mat-slide-toggle name='toggle2' > Slide me! </mat-slide-toggle>
+  </ng-container>
+  `
+}) export class MultiToggleTestComponent extends ToggleTestComponent {
+
+}
+
+
+let fixture: ComponentFixture<ToggleTestComponent>;
+let loader: HarnessLoader;
+let toggleHarnesses: MatSlideToggleHarness [];
+let toggleGroupDirective: MatSlideToggleGroupDirective;
+
+let toggles: DebugElement[];
+
+
+const setupTest = (type) => async (): Promise<void> => {
+
+  TestBed.configureTestingModule({
+      imports: [MatSlideToggleModule],
+      declarations: [
+        type,
+        MatSlideToggleGroupDirective,
+    ],
+    providers: [  ]
+    });
+    fixture = TestBed.createComponent(type);
+    fixture.detectChanges();
+
+    loader = TestbedHarnessEnvironment.documentRootLoader(fixture);
+    toggleHarnesses = await loader.getAllHarnesses(MatSlideToggleHarness);
+    toggles = fixture.debugElement.queryAll(By.directive(MatSlideToggle));
+    toggleGroupDirective =  toggles[0].injector.get(MatSlideToggleGroupDirective);
+
+
+};
+
+
+async function toggleAndReturnValues(index: number)   {
+  const firstVal = firstValueFrom(toggleGroupDirective.valueEmitter.pipe(skip(1)));
+  await toggleHarnesses[index].toggle();
+  return await firstVal;
+}
+
+describe("opMatSlideToggleGroup", () => {
+  describe("Single Toggle", () => {
+    beforeEach(waitForAsync(setupTest(SingleToggleTestComponent)));
+
+    it('should create', async () => {
+      expect(toggleGroupDirective).toBeDefined();
+    })
+
+    it('starts with an initial value', async  () => {
+      const firstVal = firstValueFrom(toggleGroupDirective.valueEmitter);
+      const val = await firstVal;
+      expect(val).toEqual({'toggle1': false});
+    });
+
+    it('when toggling on should emit the latest value as true', async  () => {
+      const val = await toggleAndReturnValues(0);
+      expect(val).toEqual({'toggle1': true});
+    });
+
+    it('can toggle on and then off', async  () => {
+
+      const val = await toggleAndReturnValues(0);
+      expect(val).toEqual({'toggle1': true});
+      const val2 =  await toggleAndReturnValues(0);
+      expect(val2).toEqual({'toggle1': false});
+    });
+  });
+
+  describe("Multi Toggle", () => {
+    beforeEach(waitForAsync(setupTest(MultiToggleWithMultipleTestComponent)));
+
+    it('starts with an initial value', async  () => {
+      const firstVal = firstValueFrom(toggleGroupDirective.valueEmitter);
+      const val = await firstVal;
+      expect(val).toEqual({'toggle1': false,'toggle2': false});
+    });
+
+    it('can toggle first toggle', async  () => {
+      const val = await toggleAndReturnValues(0);
+      expect(val).toEqual({'toggle1': true,'toggle2': false});
+    });
+
+    it('can toggle second toggle', async  () => {
+      const val = await toggleAndReturnValues(1);
+      expect(val).toEqual({'toggle1': false,'toggle2': true});
+    });
+
+    it('can toggle both toggles', async  () => {
+      const val = await toggleAndReturnValues(0);
+      expect(val).toEqual({'toggle1': true,'toggle2': false});
+
+      const val2 = await toggleAndReturnValues(1);
+      expect(val2).toEqual({'toggle1': true,'toggle2': true});
+    });
+
+    it('can toggle both toggles multiple times', async  () => {
+      let val = await toggleAndReturnValues(0);
+      expect(val).toEqual({'toggle1': true,'toggle2': false});
+
+      val = await toggleAndReturnValues(1);
+      expect(val).toEqual({'toggle1': true,'toggle2': true});
+
+      val = await toggleAndReturnValues(1);
+      expect(val).toEqual({'toggle1': true,'toggle2': false});
+
+      val = await toggleAndReturnValues(1);
+      expect(val).toEqual({'toggle1': true,'toggle2': true});
+
+      val = await toggleAndReturnValues(0);
+      expect(val).toEqual({'toggle1': false,'toggle2': true});
+      val = await toggleAndReturnValues(1);
+      expect(val).toEqual({'toggle1': false,'toggle2': false});
+    });
+
+  });
+
+  describe("Multi Toggle Only One Allowed", () => {
+    beforeEach(waitForAsync(setupTest(MultiToggleTestComponent)));
+
+    it('starts with an initial value', async  () => {
+      const firstVal = firstValueFrom(toggleGroupDirective.valueEmitter);
+      const val = await firstVal;
+      expect(val).toEqual({'toggle1': false,'toggle2': false});
+    });
+
+    it('can toggle first toggle', async  () => {
+      const val = await toggleAndReturnValues(0);
+      expect(val).toEqual({'toggle1': true,'toggle2': false});
+    });
+
+    it('can toggle second toggle', async  () => {
+      const val = await toggleAndReturnValues(1);
+      expect(val).toEqual({'toggle1': false,'toggle2': true});
+    });
+
+    it('when toggle both toggles only the last one remains set', async  () => {
+      const val = await toggleAndReturnValues(0);
+      expect(val).toEqual({'toggle1': true,'toggle2': false});
+
+      const val2 = await toggleAndReturnValues(1);
+      expect(val2).toEqual({'toggle1': false,'toggle2': true});
+
+      var toggle1Value = await toggleHarnesses[0].isChecked();
+
+      expect(toggle1Value).toBeFalse();
+    });
+
+    it('can toggle both toggles multiple times and only the last one will be set', async  () => {
+      let val = await toggleAndReturnValues(0);
+      expect(val).toEqual({'toggle1': true,'toggle2': false});
+
+      val = await toggleAndReturnValues(1);
+      expect(val).toEqual({'toggle1': false,'toggle2': true});
+
+      val = await toggleAndReturnValues(1);
+      expect(val).toEqual({'toggle1': false,'toggle2': false});
+
+      val = await toggleAndReturnValues(1);
+      expect(val).toEqual({'toggle1': false,'toggle2': true});
+
+      val = await toggleAndReturnValues(0);
+      expect(val).toEqual({'toggle1': true,'toggle2': false});
+      val = await toggleAndReturnValues(1);
+      expect(val).toEqual({'toggle1': false,'toggle2': true});
+    });
+
+    it('can toggle 2nd toggle doesnt emit an extra time', async  () => {
+      const end = new Subject();
+      const total = lastValueFrom( toggleGroupDirective.valueEmitter.pipe(
+        takeUntil(end),
+        count( (a,i) => true ),
+      ));
+
+      await toggleHarnesses[0].toggle();
+      await toggleHarnesses[1].toggle();
+
+      end.next(null);
+      const result = await total;
+
+      expect(result).toEqual(3);
+    });
+
+  });
+
+});

package/src/table-builder/classes/DefaultSettings.ts

@@ -0,0 +1,11 @@
+import { ArrayStyle } from '../interfaces/report-def';
+
+export interface DefaultSettings {
+  dateFormat?: string;
+  dateTimeFormat?: string;
+}
+
+export const ArrayDefaults = {
+  limit : 3,
+  arrayStyle : ArrayStyle.CommaDelimited
+}

package/src/table-builder/classes/MatTableObservableDataSource.ts

@@ -0,0 +1,23 @@
+import { MatTableDataSource } from '@angular/material/table';
+import { Observable, Subscription } from 'rxjs';
+
+export class MatTableObservableDataSource<T> extends  MatTableDataSource<T> {
+  subscription?: Subscription;
+  constructor(private dataSrc: Observable<T[]>) {
+    super([]);
+  }
+
+  connect() {
+    if (!this.subscription) {
+      this.subscription = this.dataSrc.subscribe( data => this.data = data );
+    }
+    return super.connect();
+  }
+  disconnect() {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+      this.subscription = undefined;
+    }
+    super.disconnect();
+  }
+}