@one-paragon/angular-utilities 2.8.2 → 2.8.4

package/src/utilities/directives/dialog.ts

@@ -0,0 +1,174 @@
+import { Directive, TemplateRef, Input, Component, Output, EventEmitter, ViewContainerRef, Injector, ChangeDetectionStrategy, inject, untracked, Signal, isSignal, input } from '@angular/core';
+import { MatDialog, MatDialogRef, MatDialogConfig, MAT_DIALOG_DEFAULT_OPTIONS, DialogPosition } 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';
+
+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;
+  /**
+   * For use with origin element to keep dialog on screen.
+   * If true, will position based on width and height provided IF it was provide as a number.
+   * If no width provided or/and height, provide a default in number (of pixels) of the not provided values.
+   * If no width/height provided at all, will default to 600x400.
+   */
+  $positionOnScreen = input<boolean | { height?: number, width?: number }>(false, { alias: 'opDialogPositionOnScreen' });
+  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 = { } as DialogPosition;
+      if(this.$positionOnScreen()) {
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const p = this.$positionOnScreen();
+        const width = typeof p === 'object' && p.width ? p.width : typeof this.dialogConfig.width === 'number' ? this.dialogConfig.width : 600;
+        const height = typeof p === 'object' && p.height ? p.height : typeof this.dialogConfig.height === 'number' ? this.dialogConfig.height : 400;
+
+        // Check horizontal positioning
+        if(rect.left + width > viewportWidth) {
+          position.right = `${viewportWidth - rect.right}px`;
+        } else {
+          position.left = `${rect.left}px`;
+        }
+
+        // Check vertical positioning
+        if(rect.bottom + height > viewportHeight) {
+          position.bottom = `${viewportHeight - rect.top}px`;
+        } else {
+          position.top = `${rect.bottom - 20}px`;
+        }
+      } else {
+        position.top = `${rect.bottom}px`;
+        position.left = `${rect.left}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', [])
+  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,45 @@
+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();
+    const element = this.$element();
+
+    untracked(() => {
+
+      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/src/utilities/index.ts

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

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,29 @@
+import { inject, InjectionToken, Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'spaceCase' })
+export class SpaceCasePipe implements PipeTransform {
+  spaceCase = inject(SpaceCaseMapping, { optional: true }) || spaceCase;
+  transform = (value: string): string => {
+    return this.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;
+
+export const SpaceCaseMapping = new InjectionToken<(arg: string) => string>('SpaceCaseMapping');

package/tsconfig.lib.json

@@ -0,0 +1,20 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "ES2023",
+      "ES2024.Object"
+    ]
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,17 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}