@one-paragon/angular-utilities 0.3.11-beta.1 → 0.4.0

package/src/utilities/directives/dialog.ts

@@ -1,142 +0,0 @@
-import { Directive, TemplateRef, Input, OnDestroy, Component, Output, EventEmitter, ViewContainerRef, Injector, ComponentFactoryResolver, ChangeDetectionStrategy } from '@angular/core';
-import { MatDialog, MatDialogRef, MatDialogConfig } from '@angular/material/dialog';
-import { Observable, Subscription, Subject } from 'rxjs';
-import { switchAll } from 'rxjs/operators';
-import { DialogService } from './dialog-service';
-
-interface DialogViewContext<T> {
-  $implicit: T,
-  opDialog: T,
-  close: () => void,
-}
-
-@Component({
-  selector: 'dialog-wrapper',
-  template: ``,
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class DialogWrapper<T = any> {
-  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;
-  }
-  constructor(private vcr: ViewContainerRef ) {
-  }
-
-}
-
-
-const defaultDialogConfig: MatDialogConfig = {
-  maxHeight: '95vh',
-}
-
-
-@Directive(
-  { selector: '[opDialog]', standalone: true }
-) export class DialogDirective<T> implements OnDestroy {
-  @Output() opDialogClosed: EventEmitter<boolean> = new EventEmitter();
-  _dialogConfig: MatDialogConfig<T> = defaultDialogConfig;
-  @Input() opDialogAddDialogClass = true;
-  @Input() set opDialogConfig(config: MatDialogConfig<T>) {
-    
-    this._dialogConfig = { ...defaultDialogConfig, ...config };
-  }
-
-  get opDialogConfig() : MatDialogConfig<T> {
-    return this._dialogConfig;
-  }
-  @Input('opDialog') set state(open_close: Observable<T>) {
-    this._data.next(open_close);
-  }
-  @Input('opDialogOrigin') nativeElement? : HTMLElement;
-  dialogRef?: MatDialogRef<any, boolean>;
-  subscription: Subscription;
-  componentWrapper?: DialogWrapper<T>;
-
-  constructor(
-    private templateRef: TemplateRef<DialogViewContext<T>>,
-    private dialog: MatDialog,
-    private service: DialogService) {
-    this.subscription = this._data.pipe(
-      switchAll()
-    ).subscribe(d => {
-      if (d) {
-        this.opDialogConfig.data = d;
-        this.setDialogState(true);
-      } else {
-        this.setDialogState(false);
-      }
-    });
-  }
-
-  _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();
-    });
-  }
-
-  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();
-    }
-  }
-
-  ngOnDestroy() {
-    if (this.subscription) {
-      this.subscription.unsubscribe();
-    }
-  }
-
-  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,61 +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]',
-  standalone: true
-}
-) 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,13 +0,0 @@
-import { Directive, HostListener } from '@angular/core';
-
-@Directive({
-  selector: 'preventEnter',
-  standalone: true
-})
-export class PreventEnterDirective {
-
-  @HostListener('keydown.enter', ['$event'])
-  onKeyDown() {
-      return false
-  }
-}

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

@@ -1,20 +0,0 @@
-import {Directive, HostListener} from "@angular/core";
-
-@Directive({
-    selector: "[stop-propagation]",
-    standalone: true
-})
-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,39 +0,0 @@
-import { Directive,  Input, ElementRef, Renderer2 } from '@angular/core';
-import { Dictionary } from '@ngrx/entity';
-
-
-@Directive({
-    selector: '[styler]',
-    standalone: true
-}) export class StylerDirective {
-  stylesApplied : Dictionary<string> = {};
-  @Input() element?: any;
-  @Input() set styler(styles: StylerStyle){
-    const toApply = Object.entries(styles ?? {}).reduce((acc, [key, val]) => {
-      if(typeof(val) === 'string'){
-        acc[key] = val;
-        this.el.nativeElement.style[key] = val;
-      } else if(val?.condition === true || val?.condition(this.element)){
-        const value =  typeof(val.value) === 'string' ? val.value : val?.value(this.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 = toApply;
-  };
-  constructor(private el: ElementRef, private renderer: Renderer2) {
- }
-}
-
-export type StylerStyle = Dictionary<
-  string
-  |
-  { 
-    condition: ((t:any) => boolean) | true,
-    value: ((t:any) => string) | string
-  }>

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

@@ -1,21 +0,0 @@
-import { Directive, ElementRef, HostListener } from '@angular/core';
-
-@Directive({
-  selector: 'input[trimWhitespace]',
-  standalone: true
-})
-export class TrimWhitespaceDirective {
-
-  constructor(private elem: 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/module.ts

@@ -1,55 +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,
-    StopPropagationDirective,
-    TrimWhitespaceDirective,
-    StylerDirective,
-    PreventEnterDirective,
-    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,16 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({
-  name: 'func',
-  standalone: true
-})
-export class FunctionPipe implements PipeTransform {
-  transform<T>(func: ( (...args: any[])=> T ) | string, ...args: any[]): T {
-    if(typeof func === 'string') {
-      const [instance, ...tail] = args;
-      const method = instance[func].bind(instance);
-      return method(...tail);
-    }
-      return func(...args);
-  }
-}

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

@@ -1,15 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({name: 'phone', standalone: true})
-export class PhoneNumberPipe implements PipeTransform {
-
-  transform(phoneNum: string): any {
-    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);
-    }
-  }
-}

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,23 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({name: 'spaceCase', standalone: true})
-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(/([a-z0-9])([A-Z])|([a-zA-Z0-9])([A-Z])(?=[a-z])|_/g, '$1$3 $2$4')
-  // uppercase the first character of every word
-  return phrase?.replace(/(^| )(\w)/g, x => x.toUpperCase());
-}

package/tsconfig.lib.json

@@ -1,19 +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",
-      "es2021"
-    ]
-  },
-  "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"
-  ]
-}