@one-paragon/angular-utilities 2.2.4 → 2.2.6

package/src/test.ts

@@ -0,0 +1,17 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false }
+  }
+);

package/src/utilities/array-helpers.ts

@@ -0,0 +1,13 @@
+export const replaceInArrayWithClone = <T = any>(arr: T[], findMeth: (t: T) => boolean, actionOnClone: (t: T) => any = ((t: T) => {})): T[] => {
+  const index = arr.findIndex(findMeth);
+  const clonedArray = [...arr];
+  const t = clonedArray[index];
+  clonedArray[index] =
+    t != null && typeof t === 'object' ?
+      Array.isArray(t) ?
+        [...t] as any
+        : { ...t }
+      : t;
+  actionOnClone(clonedArray[index]);
+  return clonedArray;
+}

package/src/utilities/directives/auto-focus.directive.ts

@@ -0,0 +1,20 @@
+import { Directive, ElementRef, AfterViewInit, Input, inject } from '@angular/core';
+
+@Directive({
+  selector: '[autoFocus]',
+})
+export class AutoFocusDirective implements AfterViewInit {
+  private elementRef = inject(ElementRef);
+
+
+  @Input() autoFocus = true;
+
+  ngAfterViewInit() {
+    if(this.autoFocus){
+      setTimeout(() => {
+        this.elementRef.nativeElement.focus();
+      });
+    }
+  }
+
+}

package/src/utilities/directives/clickEmitterDirective.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { Subject } from 'rxjs';
+
+
+@Directive({
+  selector: '[clickEmitter]',
+  exportAs: 'clickEmitter',
+  host: {
+    '(click)': 'next(true)'
+  },
+}) export class ClickEmitterDirective extends Subject<boolean> {
+  constructor() {
+    super();
+  }
+}

package/src/utilities/directives/clickSubject.ts

@@ -0,0 +1,19 @@
+import { Directive, Input } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Directive({
+  selector: '[clickSubject]',
+  exportAs: 'clickSubject',
+  host: {
+    '(click)': 'next(this._val)'
+  },
+}) export class ClickSubjectDirective<T = boolean> extends Subject<T> {
+  constructor( ) {
+    super();
+  }
+  _val!: T;
+
+  @Input('clickSubject') set clickSubject( val: T) {
+    this._val = val;
+  }
+}

package/src/utilities/directives/conditional-classes.directive.ts

@@ -0,0 +1,36 @@
+import { Directive, ElementRef, Renderer2, effect, inject, input, untracked } from '@angular/core';
+import { Dictionary, Predicate } from '@ngrx/entity';
+
+@Directive({
+  selector: '[conditionalClasses]',
+})
+export class ConditionalClassesDirective {
+  private el = inject(ElementRef);
+  private renderer = inject(Renderer2);
+
+  $element = input.required<any>({ alias: 'element' });
+  $classes = input<Dictionary<Predicate<any> | true>>(undefined, { alias: 'conditionalClasses' });
+
+  classesApplied: string[] = [];
+
+  #onClasses = effect(() => {
+    const classes = this.$classes();
+    untracked(() => {
+      const element = this.$element();
+      let toApply: string [] = [];
+      if(classes) {
+        toApply = Object.keys(classes)
+          .filter( key => (classes![key] === true) || classes![key]!(element) );
+      }
+
+      var classesNotYetApplied = toApply.filter( c => !this.classesApplied.includes(c) );
+      var classesToRemove = this.classesApplied.filter( c => !toApply.includes(c));
+
+      classesToRemove.forEach( c => this.renderer.removeClass( this.el.nativeElement, c ) );
+
+      classesNotYetApplied.forEach( c => this.renderer.addClass( this.el.nativeElement, c ) );
+
+      this.classesApplied = toApply;
+    })
+  });
+}

package/src/utilities/directives/dialog-service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+
+@Injectable({ providedIn: 'root' })
+export class DialogService {
+  allOpenOpDialogs: MatDialogRef<any>[] = [];
+
+  addDialogRef(ref: MatDialogRef<any>) {
+    this.allOpenOpDialogs.push(ref);
+  }
+
+  removeDialogRef(ref: MatDialogRef<any>) {
+    this.allOpenOpDialogs = this.allOpenOpDialogs.filter(rf => ref.id !== rf.id);
+  }
+
+  closeAllOpDialogs() {
+    this.allOpenOpDialogs.forEach(ref => ref.close());
+  }
+}

package/src/utilities/directives/dialog.ts

@@ -0,0 +1,144 @@
+import { Directive, TemplateRef, Input, Component, Output, EventEmitter, ViewContainerRef, Injector, ChangeDetectionStrategy, inject, untracked, Signal, isSignal } from '@angular/core';
+import { MatDialog, MatDialogRef, MatDialogConfig, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
+import { Observable, Subject } from 'rxjs';
+import { DialogService } from './dialog-service';
+import { subscriber } from '../../rxjs';
+import { toObservable } from '@angular/core/rxjs-interop';
+import { DialogConfig } from '@angular/cdk/dialog';
+
+interface DialogViewContext<T> {
+  $implicit: T,
+  opDialog: T,
+  close: () => void,
+}
+
+@Component({
+  selector: 'dialog-wrapper',
+  template: ``,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DialogWrapper<T = any> {
+  private vcr = inject(ViewContainerRef);
+
+  viewEmbedded = false;
+  viewContext = {
+    close: () => {},
+  } as DialogViewContext<T>;
+  set template(tmpl: TemplateRef<DialogViewContext<T>>) {
+    if(this.viewEmbedded) {
+      this.vcr.clear();
+    }
+    this.viewEmbedded = true;
+    this.vcr.createEmbeddedView(tmpl, this.viewContext);
+  }
+
+  set close(closeMethod: () => void ) {
+    this.viewContext.close = closeMethod;
+  }
+
+  set data(value: T) {
+    this.viewContext.$implicit = value;
+    this.viewContext.opDialog = value;
+  }
+
+}
+
+
+const defaultDialogConfig: MatDialogConfig = {
+  maxHeight: '95vh',
+}
+
+
+@Directive(
+  { selector: '[opDialog]', }
+) export class DialogDirective<T> {
+  private templateRef = inject<TemplateRef<DialogViewContext<T>>>(TemplateRef);
+  private dialog = inject(MatDialog);
+  private dialogConfig = inject(MAT_DIALOG_DEFAULT_OPTIONS, { optional: true }) || {};
+  private service = inject(DialogService);
+
+  @Output() opDialogClosed: EventEmitter<boolean> = new EventEmitter();
+  _dialogConfig: MatDialogConfig<T> = { ...this.dialogConfig, ...defaultDialogConfig };
+  @Input() opDialogAddDialogClass = true;
+  @Input() set opDialogConfig(config: MatDialogConfig<T>) {
+
+    this._dialogConfig = { ...this.dialogConfig, ...defaultDialogConfig, ...config };
+  }
+
+  get opDialogConfig() : MatDialogConfig<T> {
+    return this._dialogConfig;
+  }
+  injector = inject(Injector);
+  subscriber = subscriber(this.injector);
+  @Input('opDialog') set setControl(i: Observable<T> | Signal<T>){
+    let o: Observable<T>;
+    if(isSignal(i)){
+      o = toObservable<T>(i, { injector: this.injector })
+    } else {
+      o = i;
+    }
+    untracked(() => {
+      this.subscriber.on(o, this.setDataAndState);
+    });
+  }
+
+  @Input('opDialogOrigin') nativeElement? : HTMLElement;
+  dialogRef?: MatDialogRef<any, boolean>;
+  componentWrapper?: DialogWrapper<T>;
+
+  _data = new Subject<Observable<T>>();
+
+  close() {
+    this.dialogRef?.close();
+  }
+
+  initDialog() {
+    if(this.nativeElement){
+      const rect = this.nativeElement.getBoundingClientRect();
+      const position = { left: `${rect.left}px`, top: `${rect.bottom - 50}px` };
+      this.opDialogConfig = { ...this.opDialogConfig, position };
+    }
+    if(this.opDialogAddDialogClass) {
+      this.opDialogConfig.panelClass = [...(Array.isArray(this.opDialogConfig.panelClass) ? this.opDialogConfig.panelClass : this.opDialogConfig.panelClass ? [this.opDialogConfig.panelClass] : []), 'opDialog'];
+    }
+    this.dialogRef = this.dialog.open(DialogWrapper, this.opDialogConfig);
+    this.componentWrapper = this.dialogRef.componentInstance;
+    this.componentWrapper!.close = () => this.dialogRef?.close();
+    this.componentWrapper!.data = this.opDialogConfig.data as T;
+    this.componentWrapper!.template = this.templateRef;
+    if(!this.opDialogConfig.disableClose) {
+      this.service.addDialogRef(this.dialogRef);
+    }
+    const sub = this.dialogRef.afterClosed().subscribe(() => {
+      this.opDialogClosed.emit(true);
+      this.service.removeDialogRef(this.dialogRef!);
+      this.dialogRef = undefined;
+      sub.unsubscribe();
+    });
+  }
+  setDataAndState = (data: T) => {
+    if(data){
+      this.opDialogConfig.data = data;
+      this.setDialogState(true);
+    } else {
+      this.setDialogState(false);
+    }
+  }
+
+  setDialogState(open: boolean) {
+    if(open) {
+      if(!this.dialogRef) {
+        this.initDialog();
+      } else {
+        this.componentWrapper!.data = this.opDialogConfig.data as T;
+      }
+    } else if(!open && this.dialogRef) {
+      this.dialogRef.close();
+    }
+  }
+
+  static ngTemplateContextGuard<T>(dir: DialogDirective<T>, ctx: any): ctx is DialogViewContext<Exclude<T, false | 0 | '' | null | undefined>> {
+    return true;
+  }
+
+}

package/src/utilities/directives/mat-toggle-group-directive.ts

@@ -0,0 +1,60 @@
+import { ContentChildren, Directive, Input, Output, QueryList } from "@angular/core";
+import { MatSlideToggle } from "@angular/material/slide-toggle";
+import { merge, Observable, ReplaySubject, scan, startWith, switchMap } from "rxjs";
+
+
+@Directive(
+  { selector: '[opMatSlideToggleGroup]',
+  }
+) export class MatSlideToggleGroupDirective {
+  @Input() allowMultiple = false;
+
+  _toggles!: QueryList<MatSlideToggle>;
+  @ContentChildren(MatSlideToggle) set toggles(val: QueryList<MatSlideToggle>) {
+    this._toggles = val;
+    this._ready.next(true);
+  }
+
+  private _ready = new ReplaySubject<boolean>(1);
+
+  @Output() get valueEmitter() : Observable<{[key:string]: boolean}> {
+    return this._ready.pipe( switchMap( _ => this.getObs()));
+  }
+
+
+  getInitValue() {
+    const startValue = this._toggles.reduce( (prev, cur) => {
+      if(!cur.name) {
+        throw new Error('toggle must have the name attribute set');
+      }
+      prev[cur.name] = cur.checked
+      return prev;
+    }, {} as {[k:string]: boolean});
+    return startValue;
+  }
+
+  getObs() {
+    var toggleChanges = merge(...this._toggles.map( toggle => toggle.change ));
+
+    const startValue = this.getInitValue();
+
+    return toggleChanges.pipe(
+      scan( (prev, cur) => {
+        const toggleName = cur.source.name!;
+        const newVal = { ...prev, [toggleName]: cur.checked };
+        if(cur.checked && !this.allowMultiple) {
+          Object.keys(prev)
+            .filter( key => key !== toggleName && prev[key])
+            .forEach( key => {
+              newVal[key] = false;
+              this._toggles.find( toggle => toggle.name === key)!.toggle();
+            });
+        }
+        return newVal;
+      }, startValue),
+      startWith(startValue),
+    );
+
+  }
+
+}

package/src/utilities/directives/prevent-enter.directive.ts

@@ -0,0 +1,12 @@
+import { Directive, HostListener } from '@angular/core';
+
+@Directive({
+  selector: 'preventEnter',
+})
+export class PreventEnterDirective {
+
+  @HostListener('keydown.enter', ['$event'])
+  onKeyDown() {
+    return false
+  }
+}

package/src/utilities/directives/stop-propagation.directive.ts

@@ -0,0 +1,19 @@
+import { Directive, HostListener } from "@angular/core";
+
+@Directive({
+  selector: "[stop-propagation]",
+})
+export class StopPropagationDirective
+{
+    @HostListener("click", ["$event"])
+  public onClick(event: any): void
+  {
+    event.stopPropagation();
+  }
+
+    @HostListener("mousedown", ["$event"])
+    public onMousedown(event: any): void
+    {
+      event.stopPropagation();
+    }
+}

package/src/utilities/directives/styler.ts

@@ -0,0 +1,44 @@
+import { Directive, ElementRef, Renderer2, inject, input, effect, signal, untracked } from '@angular/core';
+import { Dictionary } from '@ngrx/entity';
+
+@Directive({ selector: '[styler]' })
+export class StylerDirective {
+  private el = inject(ElementRef);
+  private renderer = inject(Renderer2);
+
+  $stylesApplied = signal<Dictionary<string>>({});
+  $element = input.required<any>({ alias: 'element' });
+  $styler = input.required<StylerStyle>({ alias: 'styler' });
+  #stylerEffect = effect(() => {
+    const styles = this.$styler();
+    untracked(() => {
+      const element = this.$element();
+
+      const toApply = Object.entries(styles ?? {}).reduce((acc, [key, val]) => {
+        if(!val) return acc;
+        if(typeof (val) === 'string'){
+          acc[key] = val;
+          this.el.nativeElement.style[key] = val;
+        } else if(!val?.condition || val?.condition === true || val?.condition(element)){
+          const value = typeof (val.value) === 'string' ? val.value : val?.value(element);
+          acc[key] = value;
+          this.el.nativeElement.style[key] = value;
+        }
+        return acc;
+      }, {} as Dictionary<string>);
+
+      Object.keys(this.$stylesApplied()).filter(key => !Object.keys(toApply).includes(key)).forEach(key => {
+        this.renderer.removeStyle(this.el.nativeElement, key);
+      });
+
+      this.$stylesApplied.set(toApply);
+    })
+
+  });
+}
+
+export type StylerStyle<T = any> = Dictionary<
+  string | {
+              condition?: ((t: T) => boolean) | true,
+              value: ((t: T) => string) | string
+           }>

package/src/utilities/directives/trim-whitespace.directive.ts

@@ -0,0 +1,20 @@
+import { Directive, ElementRef, HostListener, inject } from '@angular/core';
+
+@Directive({
+  selector: 'input[trimWhitespace]',
+})
+export class TrimWhitespaceDirective {
+  private elem = inject(ElementRef);
+
+
+  @HostListener('blur') onBlur() {
+    const inputString = this.elem.nativeElement.value;
+    if(inputString) {
+      const newValue = inputString.trim().replace(/\t/g, '');
+      if(inputString !== newValue) {
+        this.elem.nativeElement.value = newValue;
+        this.elem.nativeElement.dispatchEvent(new Event('input', { bubbles: true }));
+      }
+    }
+  }
+}

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

@@ -1,15 +1,22 @@
-export * from './directives/prevent-enter.directive';
-export * from './directives/stop-propagation.directive';
-export * from './directives/auto-focus.directive';
-export * from './directives/clickSubject';
-export * from './directives/clickEmitterDirective';
-export * from './directives/dialog';
-export * from './directives/styler';
-export * from './directives/mat-toggle-group-directive';
-export * from './directives/trim-whitespace.directive';
-export * from './pipes/function.pipe';
-export * from './pipes/phone.pipe';
-export * from './pipes/space-case.pipes';
-export * from './directives/dialog-service';
-export * from './directives/conditional-classes.directive';
-export * from './module';
+export * from './directives/prevent-enter.directive';
+export * from './directives/stop-propagation.directive';
+export * from './directives/auto-focus.directive';
+export * from './directives/clickSubject';
+export * from './directives/clickEmitterDirective';
+export * from './directives/dialog';
+export * from './directives/styler';
+export * from './directives/mat-toggle-group-directive';
+export * from './directives/trim-whitespace.directive';
+
+export * from './pipes/function.pipe';
+export * from './pipes/phone.pipe';
+export * from './pipes/space-case.pipes';
+
+export * from './directives/dialog-service';
+
+export * from './directives/conditional-classes.directive'
+
+
+export * from './module';
+
+

package/src/utilities/module.ts

@@ -0,0 +1,53 @@
+import { NgModule } from "@angular/core";
+import { AutoFocusDirective } from "./directives/auto-focus.directive";
+import { ClickEmitterDirective } from "./directives/clickEmitterDirective";
+import { ClickSubjectDirective } from "./directives/clickSubject";
+import { ConditionalClassesDirective } from "./directives/conditional-classes.directive";
+import { DialogDirective } from "./directives/dialog";
+import { DialogService } from "./directives/dialog-service";
+import { MatSlideToggleGroupDirective } from "./directives/mat-toggle-group-directive";
+import { PreventEnterDirective } from "./directives/prevent-enter.directive";
+import { StopPropagationDirective } from "./directives/stop-propagation.directive";
+import { TrimWhitespaceDirective } from "./directives/trim-whitespace.directive";
+import { StylerDirective } from "./directives/styler";
+import { FunctionPipe } from "./pipes/function.pipe";
+import { PhoneNumberPipe } from "./pipes/phone.pipe";
+import { SpaceCasePipe } from "./pipes/space-case.pipes";
+
+@NgModule({
+  exports: [
+    StopPropagationDirective,
+    PreventEnterDirective,
+    SpaceCasePipe,
+    PhoneNumberPipe,
+    FunctionPipe,
+    TrimWhitespaceDirective,
+    StylerDirective,
+    AutoFocusDirective,
+    ClickSubjectDirective,
+    ClickEmitterDirective,
+    DialogDirective,
+    MatSlideToggleGroupDirective,
+    ConditionalClassesDirective,
+  ],
+  imports: [
+    SpaceCasePipe,
+    PhoneNumberPipe,
+    FunctionPipe,
+    StopPropagationDirective,
+    StylerDirective,
+    PreventEnterDirective,
+    AutoFocusDirective,
+    TrimWhitespaceDirective,
+    ClickSubjectDirective,
+    ClickEmitterDirective,
+    DialogDirective,
+    MatSlideToggleGroupDirective,
+    ConditionalClassesDirective,
+  ],
+  providers: [
+    DialogService
+  ]
+})
+export class UtilitiesModule {
+}

package/src/utilities/pipes/function.pipe.ts

@@ -0,0 +1,21 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+type Args<S extends object, O extends keyof S> = S[O] extends (...args: infer Params) => any ? Params : never;
+type Return<S extends object, O extends keyof S> = S[O] extends (...args: any[]) => infer R ? R : never;
+
+
+@Pipe({
+  name: 'func',
+})
+export class FunctionPipe implements PipeTransform {
+  transform<T, TParam extends any []>(func: (...args: TParam) => T, ...args: TParam): T;
+  transform<O extends object, S extends keyof O>(s: S, obj: O, ...args: Args<O, S>): Return<O, S>;
+  transform(func: any, ...args: any[]) {
+    if(typeof func === 'string') {
+      const [instance, ...tail] = args;
+      const method = (instance[func] as Function).bind(instance);
+      return method(...tail);
+    }
+    return func(...args);
+  }
+}

package/src/utilities/pipes/phone.pipe.ts

@@ -0,0 +1,20 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'phone' })
+export class PhoneNumberPipe implements PipeTransform {
+
+  transform(phoneNum: string): any {
+    return phoneFormatter(phoneNum);
+  }
+}
+
+export function phoneFormatter(phoneNum: string): string {
+  if(phoneNum) {
+    phoneNum = phoneNum.replace(/\D/g, '');
+    if(phoneNum[0] === '1') {
+      phoneNum = phoneNum.substring(1);
+    }
+    return '(' + phoneNum.slice(0, 3) + ') ' + phoneNum.slice(3, 6) + '-' + phoneNum.slice(6, 10) + ' ' + phoneNum.slice(10);
+  }
+  return '';
+}

package/src/utilities/pipes/space-case.pipes.spec.ts

@@ -0,0 +1,47 @@
+import { SpaceCasePipe } from './space-case.pipes';
+
+const pipe = new SpaceCasePipe();
+
+describe('Space Case Pipe', () => {
+
+  it('one word camel case', () => {
+    const result = pipe.transform('promissory');
+    expect(result).toEqual('Promissory');
+  });
+
+  it('one word pascal case', () => {
+    const result = pipe.transform('Promissory');
+    expect(result).toEqual('Promissory');
+  });
+
+  it('two words camel case', () => {
+    const result = pipe.transform('promissoryNote');
+    expect(result).toEqual('Promissory Note');
+  });
+
+  it('two words pascal case', () => {
+    const result = pipe.transform('PromissoryNote');
+    expect(result).toEqual('Promissory Note');
+  });
+
+  it('bunch of capital letters in a row', () => {
+    const result = pipe.transform('IRALLCSingleMember');
+    expect(result).toEqual('IRALLC Single Member');
+  });
+
+  it('underscores', () => {
+    const result = pipe.transform('Secured_promissory_Note_more');
+    expect(result).toEqual('Secured Promissory Note More');
+  });
+
+  it('underscores', () => {
+    const result = pipe.transform('IRA_LLCSingleMember');
+    expect(result).toEqual('IRA LLC Single Member');
+  });
+
+  it('blank', () => {
+    const result = pipe.transform('');
+    expect(result).toEqual('');
+  });
+
+});

package/src/utilities/pipes/space-case.pipes.ts

@@ -0,0 +1,26 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'spaceCase' })
+export class SpaceCasePipe implements PipeTransform {
+  transform(value: string): string {
+    return spaceCase(value);
+  }
+}
+
+/**
+ * Adds a space before uppercase letters that either
+ * 1. follows a lowercase letter or digit
+ * 2. or precedes a lowercase letter and follows an alpha-numeric character
+ *
+ * Uppercases the first digit
+ *
+ * Turns underscores into spaces
+ */
+export function spaceCase(value: string){
+  const phrase = value?.replace(regex1, '$1$3 $2$4')
+  // uppercase the first character of every word
+  return phrase?.replace(regex2, x => x.toUpperCase());
+}
+
+const regex1 = /([a-z0-9])([A-Z])|([a-zA-Z0-9])([A-Z])(?=[a-z])|_/g;
+const regex2 = /(^| )(\w)/g;