@one-paragon/angular-utilities 0.1.21 → 0.1.23

package/src/table-builder/table-builder.module.ts

@@ -1,138 +0,0 @@
-
-import { NgModule } from '@angular/core';
-import { GenericTableComponent } from './components/generic-table/generic-table.component';
-import { CustomCellDirective } from './directives/custom-cell-directive';
-import { GenColDisplayerComponent } from './components/gen-col-displayer/gen-col-displayer.component';
-import { GenFilterDisplayerComponent } from './components/table-container-filter/gen-filter-displayer/gen-filter-displayer.component';
-import { FilterComponent } from './components/filter/filter.component';
-import { CommonModule, DatePipe, CurrencyPipe } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { SpaceCasePipe } from '../utilities/pipes/space-case.pipes';
-import { MaterialModule } from './material.module';
-import { DateFilterComponent } from './components/date-filter/date-filter.component';
-import { TableContainerComponent } from './components/table-container/table-container';
-import { ColumnTotalPipe } from './pipes/column-total.pipe';
-import { MultiSortDirective } from './directives/multi-sort.directive';
-import { ColumnBuilderComponent } from './components/column-builder/column-builder.component';
-import { ModuleWithProviders } from '@angular/core';
-import { TableBuilderConfig, TableBuilderConfigToken } from './classes/TableBuilderConfig';
-import { NumberFilterComponent } from './components/number-filter/number-filter.component';
-import { StoreModule } from '@ngrx/store';
-import { storageStateReducer } from './ngrx/reducer';
-import { HeaderMenuComponent } from './components/header-menu/header-menu.component';
-import { EffectsModule } from '@ngrx/effects';
-import { SaveTableEffects } from './ngrx/effects';
-import { KeyDisplayPipe } from './pipes/key-display';
-import { PhoneNumberPipe } from '../utilities/pipes/phone.pipe';
-import { RouterModule } from '@angular/router';
-import { ArrayColumnComponent } from './components/array-column.component';
-import { LinkColumnComponent } from './components/link-column.component';
-import { InFilterComponent } from './components/in-filter/in-filter.component';
-import { FormatFilterValuePipe } from './pipes/format-filter-value.pipe';
-import { FormatFilterTypePipe } from './pipes/format-filter-type.pipe';
-import { ResizeColumnDirective } from './directives/resize-column.directive';
-import {LetModule} from '@ngrx/component'
-import { DragDropModule } from '@angular/cdk/drag-drop';
-import { InitializationComponent } from './components/initialization-component/initialization-component';
-import { InListFilterComponent } from './components/filter/in-list/in-list-filter.component';
-import { SortMenuComponent } from './components/sort-menu/sort-menu.component';
-import { FilterChipsComponent } from './components/table-container-filter/filter-list/filter-list.component';
-import { PaginatorComponent } from './components/generic-table/paginator.component';
-import { UtilitiesModule } from '../utilities';
-import {
-  MatButtonToggleFilterDirective,
-  MatCheckboxTbFilterDirective,
-  MatOptionTbFilterDirective,
-  MatRadioButtonTbFilterDirective,
-  MatSlideToggleTbFilterDirective,
-  TableFilterDirective,
-  TableFilterStringContainsDirective,
-} from './directives';
-import { TableWrapperDirective } from './directives/table-wrapper.directive';
-import { GroupByListComponent } from './components/group-by-list/group-by-list.component';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    MaterialModule,
-    StoreModule.forFeature('globalStorageState', storageStateReducer),
-    EffectsModule.forFeature([SaveTableEffects]),
-    FormsModule,
-    RouterModule,
-    LetModule,
-    DragDropModule,
-    UtilitiesModule,
-  ],
-    exports: [
-        GenericTableComponent,
-        PaginatorComponent,
-        TableContainerComponent,
-        CustomCellDirective,
-        GenColDisplayerComponent,
-        GenFilterDisplayerComponent,
-        FilterComponent,
-        MultiSortDirective,
-        ResizeColumnDirective,
-        MatSlideToggleTbFilterDirective,
-        MatRadioButtonTbFilterDirective,
-        MatOptionTbFilterDirective,
-        MatCheckboxTbFilterDirective,
-        MatButtonToggleFilterDirective,
-        TableFilterDirective,
-        TableFilterStringContainsDirective,
-        TableWrapperDirective,
-        GroupByListComponent,
-    ],
-    declarations: [
-        ColumnTotalPipe,
-        TableContainerComponent,
-        GenericTableComponent,
-        PaginatorComponent,
-        CustomCellDirective,
-        GenColDisplayerComponent,
-        GenFilterDisplayerComponent,
-        DateFilterComponent,
-        FilterComponent,
-        MultiSortDirective,
-        NumberFilterComponent,
-        ColumnBuilderComponent,
-        ArrayColumnComponent,
-        LinkColumnComponent,
-        HeaderMenuComponent,
-        KeyDisplayPipe,
-        FormatFilterValuePipe,
-        FormatFilterTypePipe,
-        ResizeColumnDirective,
-        InFilterComponent,
-        InitializationComponent,
-        InListFilterComponent,
-        SortMenuComponent,
-        FilterChipsComponent,
-        MatSlideToggleTbFilterDirective,
-        MatRadioButtonTbFilterDirective,
-        MatOptionTbFilterDirective,
-        MatCheckboxTbFilterDirective,
-        MatButtonToggleFilterDirective,
-        TableFilterDirective,
-        TableFilterStringContainsDirective,
-        TableWrapperDirective,
-        GroupByListComponent,
-    ],
-    providers : [
-      SpaceCasePipe,
-      DatePipe,
-      CurrencyPipe,
-      PhoneNumberPipe
-    ]
-})
-export class TableBuilderModule {
-  static forRoot(config: TableBuilderConfig): ModuleWithProviders<TableBuilderModule> {
-    return {
-      ngModule: TableBuilderModule,
-      providers: [
-        MultiSortDirective,
-        { provide : TableBuilderConfigToken , useValue: config}
-      ]
-    };
-  }
-}

package/src/test.ts

@@ -1,17 +0,0 @@
-// 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/directives/auto-focus.directive.ts

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

package/src/utilities/directives/clickEmitterDirective.ts

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

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

@@ -1,35 +0,0 @@
-import { Directive, ElementRef, Input, Renderer2, SimpleChanges } from '@angular/core';
-import { Dictionary, Predicate } from '@ngrx/entity';
-
-@Directive({
-  selector: '[conditionalClasses]'
-})
-export class ConditionalClassesDirective {
-
-  constructor(private el: ElementRef, private renderer: Renderer2) {
-  }
-
- @Input() element?: any;
- @Input('conditionalClasses') classes?: Dictionary<Predicate<any>>;
-
- classesApplied: string[] = [];
-
- ngOnChanges(changes: SimpleChanges) {
-  let toApply: string [] = [];
-  if(this.classes) {
-    toApply = Object.keys(this.classes)
-    .filter( key => this.classes![key]!(this.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

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

@@ -1,142 +0,0 @@
-import { Directive, TemplateRef, Input, OnDestroy, Component, Output, EventEmitter, ViewContainerRef, Injector, ComponentFactoryResolver } 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: 'app-dialog-content',
-  template: ``
-})
-export class DialogWrapper<T = any> {
-  viewEmbeded = false;
-  viewContext = {
-    close: () => {},
-  } as DialogViewContext<T>;
-  set template(tmpl: TemplateRef<DialogViewContext<T>>) {
-    if (this.viewEmbeded) {
-      this.vcr.clear();
-    }
-    this.viewEmbeded = 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]' }
-) export class DialogDirective<T> implements OnDestroy {
-  @Output() opDialogClosed: EventEmitter<boolean> = new EventEmitter();
-  _dialogConfig: MatDialogConfig<T> = defaultDialogConfig;
-  @Input() add_opDialog_Class = 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.add_opDialog_Class) {
-      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,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', ['$event'])
-  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,16 +0,0 @@
-import { Directive,  Input, ElementRef } from '@angular/core';
-
-
-@Directive({
-    selector: '[styler]',
-}) export class StylerDirective {
-  @Input() set styler(styles){
-    if(styles){
-      Object.keys(styles).forEach( style => {
-        this.el.nativeElement.style[style] = styles[style];
-      });
-    }
-  };
-  constructor(private el: ElementRef) {
- }
-}

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

@@ -1,20 +0,0 @@
-import { Directive, ElementRef, HostListener } from '@angular/core';
-
-@Directive({
-  selector: 'input[trimWhitespace]',
-})
-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,58 +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({
-  imports: [
-
-  ],
-    exports: [
-        StopPropagationDirective,
-        PreventEnterDirective,
-        SpaceCasePipe,
-        PhoneNumberPipe,
-        FunctionPipe,
-        StopPropagationDirective,
-        TrimWhitespaceDirective,
-        StylerDirective,
-        PreventEnterDirective,
-        AutoFocusDirective,
-        ClickSubjectDirective,
-        ClickEmitterDirective,
-        DialogDirective,
-        MatSlideToggleGroupDirective,
-        ConditionalClassesDirective,
-    ],
-    declarations: [
-        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,15 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({
-  name: 'func'
-})
-export class FunctionPipe implements PipeTransform {
-  transform(func: ( (...args: any[])=> any ) | string, ...args: any[]): any {
-    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'})
-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('');
-  });
- 
-});