@one-paragon/angular-utilities 2.8.4 → 2.8.6

package/src/utilities/directives/dialog.ts

@@ -1,174 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,20 +0,0 @@
-/* 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

@@ -1,10 +0,0 @@
-/* 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

@@ -1,17 +0,0 @@
-/* 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"
-  ]
-}