@one-paragon/angular-utilities 2.0.0-beta.2 → 2.0.0-beta.4

package/{public-api.d.ts → src/public-api.ts}

@@ -1,16 +1,35 @@
-export * from './http-request-state/directives';
-export * from './http-request-state/rxjs';
-export * from './http-request-state';
-export * from './table-builder/table-builder.module';
-export * from './table-builder/classes/TableBuilderConfig';
-export * from './table-builder/interfaces/report-def';
-export * from './table-builder/classes/MatTableObservableDataSource';
-export * from './table-builder/classes/table-builder';
-export * from './table-builder/classes/table-builder-general-settings';
-export * from './table-builder/components';
-export * from './table-builder/directives';
-export * from './table-builder/enums/filterTypes';
-export * from './rxjs';
-export * from './utilities';
-export * from './action-state';
-export * from './ngrx';
+/*
+ * Public API Surface of http-request-state
+ */
+
+export * from './http-request-state/directives';
+export * from './http-request-state/rxjs';
+export * from './http-request-state';
+
+
+export * from './table-builder/table-builder.module';
+
+export * from './table-builder/classes/TableBuilderConfig';
+
+export * from './table-builder/interfaces/report-def';
+
+export * from './table-builder/classes/MatTableObservableDataSource';
+
+export * from './table-builder/classes/table-builder';
+
+export * from './table-builder/classes/table-builder-general-settings';
+
+export * from './table-builder/components';
+
+export * from './table-builder/directives';
+
+export * from './table-builder/enums/filterTypes';
+
+
+export * from './rxjs'
+
+export * from './utilities'
+
+export * from './action-state';
+
+export * from './ngrx';

package/src/rxjs/defaultShareReplay.ts

@@ -0,0 +1,8 @@
+import { Observable } from 'rxjs';
+import { shareReplay } from 'rxjs/operators';
+
+export function defaultShareReplay<T>() {
+  return function (src: Observable<T>): Observable<T> {
+    return src.pipe(shareReplay({ refCount: true, bufferSize: 1 }));
+  };
+}

package/{rxjs/index.d.ts → src/rxjs/index.ts}

@@ -1,5 +1,5 @@
-export * from './defaultShareReplay';
-export * from './mapError';
-export * from './rxjs-operators';
-export * from './subjectifier';
-export * from './subscriber.directive';
+export * from './defaultShareReplay'
+export * from './mapError';
+export * from './rxjs-operators';
+export * from './subjectifier';
+export * from './subscriber.directive';

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');
+  }));
+
+});
+
+