@one-paragon/angular-utilities 2.2.4 → 2.2.6

package/src/ngrx/actionable-selector.ts

@@ -0,0 +1,160 @@
+import { EnvironmentInjector, inject, Injector, makeEnvironmentProviders, provideAppInitializer, runInInjectionContext } from "@angular/core";
+import { Action, createSelector, MemoizedSelector, Store } from "@ngrx/store";
+
+let _store: Store<any>;
+let _cache: AppStoreCache;
+let _ei : EnvironmentInjector;
+
+/**
+ * Creates a selector that can dispatch an action if conditions are met.
+ * Note: The props of the selector factory must include the props of the action.
+ * @param selectorFactory A method that returns selector.
+ * @param action The action that will be dispatched when conditions are met.
+ * @param [dispatchIf = defaultFilter] Optional. A method that takes the result of the selector and returns a boolean. The actions gets dispatched
+ * if true is returned. If no method is passed in than the action will be dispatched if the selector returns undefined or null.
+ */
+export const createActionableSelector = <State, Result, Props extends any[]>(
+  selectorFactory: ((...props: Props) => MemoizedSelector<State, Result>),
+  action: ActionReturner<Props>,
+  dispatchIf: (data: Result) => boolean = defaultFilter,
+) => {
+  const options = {
+    selectorFactory,
+    action: (...props: Props) => () => _store.dispatch(action(...props)),
+    dispatchIf
+  }
+  const actionable = createActionResultSelector(options);
+  return (...props: Props) => createSelector(actionable(...props), b => b.result);
+}
+
+export const createActionSelector = <State, Result, Props extends any[] = any[]>(options: CreateActionResultsOptions<State, Result, Props>) => {
+  const actionable = createActionResultSelector(options);
+  return ((...props: Props) => createSelector(actionable(...props), b => b.result));
+}
+
+export const createActionableResultSelector = <State, Result, Props extends any[]>(
+  selectorFactory: ((...props: Props) => MemoizedSelector<State, Result>),
+  action: ActionReturner<Props>,
+  dispatchIf: (data: Result) => boolean = defaultFilter,
+) => {
+  const options: CreateActionResultsOptions<State, Result, Props> = {
+    selectorFactory,
+    action: (...props: Props) => () => _store.dispatch(action(...props)),
+    dispatchIf
+  };
+
+  return createActionResultSelector(options);
+}
+
+export const createActionResultSelector = <State, Result, Props extends any[] = any[]>(options: CreateActionResultsOptions<State, Result, Props>) => {
+  const id = crypto.randomUUID();
+  const slctr = (...props: Props) => createSelector(
+    options.selectorFactory(...props),
+    (selected: Result) => {
+      const needsDispatch = (options.dispatchIf || defaultFilter)(selected);
+      if(needsDispatch && !_cache.isInCache(id, ...props)){
+        queueMicrotask(() =>
+          runInInjectionContext(options.injector || _ei, () => {
+            options.action(...props)()
+          }));
+      }
+      return ({
+        loading: needsDispatch,
+        result: selected
+      });
+    }
+  ) as ActionableMemoizedSelector<State, LoadingState<Result>>;
+  return slctr;
+}
+
+class AppStoreCache {
+  cache: Cache = {};
+  isInCache = (actionableSelectorId: string, ...p: any[]): boolean => {
+    const props = p.reduce((a, b) => {
+      if(typeof b != 'object') b = { b };
+      return ({ ...a, ...b })
+    }, {});
+
+    let itemsInCache = this.cache[actionableSelectorId] = (this.cache[actionableSelectorId] || []);
+
+    if(itemsInCache.some(itemInCache => shallowEquals(itemInCache, props))){
+      return true;
+    }
+
+    itemsInCache.push(props);
+    return false;
+  }
+}
+
+export const clearActionableSelectorRequestCache = () => _cache.cache = {};
+
+const shallowEquals = (cachedItem: object, newItem: object): boolean => {
+  const cachedItemKeys = Object.keys(cachedItem);
+  const secondKeys = Object.keys(newItem);
+  if(cachedItemKeys.length !== secondKeys.length) {
+    return false;
+  }
+  for(let index = 0; index < cachedItemKeys.length; index++) {
+    const currentKey = cachedItemKeys[index];
+    if(cachedItem[currentKey] !== newItem[currentKey]){
+      return false;
+    }
+  }
+  return true;
+}
+
+export function defaultFilter(data: any) {
+  return data == null || data == undefined;
+}
+
+const setStore = (store: Store) => {
+  if(store instanceof Store) _store ??= store;
+};
+
+const setEnvironmentInjector = (ei: EnvironmentInjector) => {
+  if(ei instanceof EnvironmentInjector) _ei ??= ei;
+};
+
+export function provideActionableSelector(){
+  return makeEnvironmentProviders([
+    provideAppInitializer(setUpStoreFactory)
+  ])
+}
+
+export const setUpStoreFactory = () => {
+  const store = inject(Store);
+  const env = inject(EnvironmentInjector);
+  _cache ??= new AppStoreCache();
+  setStore(store);
+  setEnvironmentInjector(env)
+}
+
+export function setUpStoreFactoryOld(store: Store, env: EnvironmentInjector){
+  _cache ??= new AppStoreCache();
+  return () => new Promise((resolve, reject) => {
+    setStore(store);
+    setEnvironmentInjector(env)
+    resolve(null);
+  })
+}
+
+
+export interface CreateActionResultsOptions<State, Result, Props extends any[]>{
+  selectorFactory: (...props: Props) => MemoizedSelector<State, Result>,
+  action: (...props: Props) => () => void,
+  dispatchIf?: (data: Result) => boolean,
+  injector?: Injector
+}
+
+interface LoadingState<T> {
+  loading: boolean;
+  result?: T;
+}
+
+type ActionableMemoizedSelector<State, Result> = MemoizedSelector<State, Result>;
+
+export type ActionReturner<Props extends any[]> = (...props: Props) => Action;
+
+type Cache = {
+  [key: string]: { [key: string]: any }[];
+}

package/src/ngrx/index.ts

@@ -0,0 +1 @@
+export * from './actionable-selector';

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,130 @@
+import { Predicate } from '@angular/core';
+import {
+  filter,
+  first,
+  map,
+  pairwise,
+  startWith,
+  Observable,
+  combineLatest,
+  Subscription,
+  MonoTypeOperatorFunction,
+  OperatorFunction,
+  concatMap,
+  merge,
+  of,
+  delay,
+  pipe
+} 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>() {
+  return pipe(filter<T, NonNullable<T>>((o): o is NonNullable<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');
+  }));
+
+});
+
+