@one-paragon/angular-utilities 0.1.21 → 0.1.23

package/src/table-builder/components/header-menu/header-menu.component.html

@@ -1,117 +0,0 @@
-<button mat-icon-button class="open-menu-icon-button" disableRipple [matMenuTriggerFor]="menu" [matMenuTriggerRestoreFocus]="false">
-  <mat-icon class="menu-icon">more_vert</mat-icon>
-</button>
-<mat-menu #menu="matMenu" >
-  <button mat-menu-item (click)="tableState.addGroupByKey(metaData.key)">
-    <mat-icon color="primary">group</mat-icon>
-    <span>Group By</span>
-  </button>
-  <button mat-menu-item (click)=hideField(metaData.key)>
-    <mat-icon color="primary">visibility_off</mat-icon>
-    <span>Hide Column</span>
-  </button>
-  <ng-form #myForm="ngForm" [ngSwitch]="true" (keydown.enter)="onEnter(myForm.value)" class="tb-header-filter">
-      <input type="hidden" name="filterId"  [ngModel]="'header-column-' + metaData.key" />
-      <input type="hidden" name="filterType"  [ngModel]="myFilterType" />
-      <input type="hidden" name="key"  [ngModel]="metaData.key" />
-      <input type="hidden" name="fieldType"  [ngModel]="metaData.fieldType" />
-
-      <ng-container *ngIf="(myFilterType === FilterType.Or || myFilterType === FilterType.In); else defaultFilter">
-          <tb-in-list-filter name='filterValue' [key]='metaData.key' [(ngModel)]='myFilterValue' >
-          </tb-in-list-filter>
-      </ng-container>
-
-
-      <ng-template #defaultFilter>
-        <ng-container *ngSwitchCase="metaData.fieldType === FieldType.Link || metaData.fieldType === FieldType.String || metaData.fieldType === FieldType.Array || metaData.fieldType === FieldType.Unknown || metaData.fieldType === FieldType.PhoneNumber">
-          <mat-form-field stop-propagation class="font auto-width">
-            <mat-icon matPrefix class="search-icon">search</mat-icon>
-            <mat-label>{{myFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>
-            <input matInput name="filterValue" [ngModel]="filter.filterValue" />
-            <span matSuffix [matTooltip]="myFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'">
-              <button mat-icon-button color="primary" (click)="setStringFilterType()" class="header-filter-icon-button">
-                <mat-icon [ngClass]="{'chosen-icon': myFilterType === FilterType.StringDoesNotContain }">
-                  block
-                </mat-icon>
-              </button>
-            </span>
-          </mat-form-field>
-        </ng-container>
-
-        <ng-container *ngSwitchCase="metaData.fieldType === FieldType.Number || metaData.fieldType === FieldType.Currency">
-          <mat-form-field class="auto-width"  stop-propagation>
-           
-            <mat-label>{{myFilterType === FilterType.NumberEquals ? 'Equals...' : myFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>
-            <input matInput type='number'  name="filterValue" [ngModel]="filter.filterValue" />
-            <span matPrefix class="tb-header-prefix">
-              <button mat-icon-button disableRipple class="header-filter-icon-button" (click)="setFilterType(FilterType.NumberLessThan)"
-              [ngClass]="{'chosen-icon': myFilterType === FilterType.NumberLessThan }">
-                <mat-icon  class="suffix-icons"
-                  >
-                  arrow_back_ios</mat-icon>
-              </button>
-              <button mat-icon-button disableRipple class="header-filter-icon-button" (click)="setFilterType(FilterType.NumberGreaterThan)"
-              [ngClass]="{'chosen-icon': myFilterType === FilterType.NumberGreaterThan }" >
-                <mat-icon  class="suffix-icons"
-                >
-                  arrow_forward_ios</mat-icon>
-              </button>
-              <button mat-icon-button disableRipple class="header-filter-icon-button" (click)="setFilterType(FilterType.NumberEquals)"
-              [ngClass]="{'chosen-icon': myFilterType === FilterType.NumberEquals }">
-                <span class="suffix-icons"
-                >
-                  =</span>
-              </button>
-            </span>
-          </mat-form-field>
-        </ng-container>
-
-        <ng-container *ngSwitchCase="metaData.fieldType === FieldType.Boolean">
-          <div>
-            <label>
-              <mat-icon class="search-icon">filter_list</mat-icon>
-            </label>
-            <mat-radio-group stop-propagation #ctrl="matRadioGroup" #boolField='ngModel' class="font" name="filterValue" [ngModel]="myFilterValue" >
-              <mat-radio-button class="filter-radio-button" (click)="myFilterValue = true;" [value]="true">True</mat-radio-button><br/>
-              <mat-radio-button class="filter-radio-button" (click)="myFilterValue = false" [value]="false">False</mat-radio-button><br/>
-            </mat-radio-group>
-          </div>
-        </ng-container>
-
-        <ng-container *ngSwitchCase="metaData.fieldType === FieldType.Date">
-          <mat-form-field class="font auto-width" stop-propagation >
-            <span matPrefix class="tb-header-prefix">
-              <button mat-icon-button disableRipple class="header-filter-icon-button" (click)="setFilterType(FilterType.DateOnOrAfter)"
-              [ngClass]="{'chosen-icon': myFilterType === FilterType.DateOnOrAfter }">
-                <mat-icon  class="suffix-icons underline"
-                >
-                  arrow_forward_ios</mat-icon>
-              </button>
-              <button mat-icon-button disableRipple class="header-filter-icon-button" (click)="setFilterType(FilterType.DateOnOrBefore)"
-              [ngClass]="{'chosen-icon': myFilterType === FilterType.DateOnOrBefore  }">
-                <mat-icon  class="suffix-icons underline"
-                >
-                  arrow_back_ios</mat-icon>
-              </button>
-              <button mat-icon-button disableRipple class="header-filter-icon-button" (click)="setFilterType(FilterType.DateIsOn)"
-              [ngClass]="{'chosen-icon': myFilterType === FilterType.DateIsOn }">
-                <span  class="suffix-icons underline"
-                >
-                  =</span>
-              </button>
-            </span>
-            <mat-label>{{myFilterType === FilterType.DateIsOn ? 'On...' :
-              myFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>
-            <input matInput name="filterValue" [ngModel]="filter.filterValue" [matDatepicker]="calendar"
-              (click)="calendar.open()"/>
-            <mat-datepicker-toggle class="date-toggle header-filter-icon-button" matSuffix [for]="calendar" preventEnter></mat-datepicker-toggle>
-            <mat-datepicker #calendar></mat-datepicker>
-          </mat-form-field>
-        </ng-container>
-      </ng-template>
-
-    <button mat-button (click)="onEnter(myForm.value)" [disabled]="myForm.value.filterValue == undefined" disableRipple>
-      Apply
-    </button>
-  </ng-form>
-</mat-menu>

package/src/table-builder/components/header-menu/header-menu.component.scss

@@ -1,92 +0,0 @@
-
-input[type=number]::-webkit-inner-spin-button,
-input[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.menu-icon{
-  font-size: 16px;
-  line-height: 16px;
-  vertical-align: top;
-  height: 16px;
-  width: 16px;
-}
-.search-icon{
-  margin-right: 16px;
-  vertical-align: middle;
-  height: 24px;
-  color: rgba(0,0,0,.54);
-  font-size: 21px;
-  line-height: 1.125
-}
-.font{
-  font-size: 14px;
-}
-.filter-radio-button:first-of-type{
-  padding-left: 0;
-}
-.filter-radio-button{
-  padding: 10px 40px;
-  min-width: 110px;
-}
-.auto-width {
-  width: 260px;
-  margin: 5px;
-  display: block;
-  height: 55px;
-}
-
-
-.open-menu-icon-button{
-  height: 28px;
-  width: 28px;
-  padding: 6px;
-}
-.header-filter-icon-button {
-  height: 18px;
-  width: 18px;
-  font-size: 18px;
-  padding: 0;
-  margin: 0 2px;
-
-  ::ng-deep * {
-    line-height: initial;
-    font-size: initial;
-    height: 18px;
-    width: 18px;
-    font-size: 18px;
-    bottom: initial;
-
-  }
-
-  &.chosen-icon,
-  &.chosen-icon ::ng-deep * {
-    height: 22px;
-    width: 22px;
-    font-size: 22px;
-    color: green;
-  }
-}
-mat-icon.mat-icon.suffix-icons.underline{
-  height: 20px;
-  text-decoration: underline 0.1px solid;
-  .chosen-icon &{
-    height: 24px;
-  }
-}
-::ng-deep.mat-mdc-form-field-icon-prefix:has(.tb-header-prefix), .tb-header-prefix{
-  padding: 0;
-  flex-basis: 36%;
-}
-.tb-header-filter ::ng-deep.mat-mdc-form-field-subscript-wrapper{
-  line-height: 0;
-  &::before{
-    height: 0;
-  }
-}
-.date-toggle ::ng-deep svg{
-  position: absolute;
-  left: 0;
-  top: 0;
-}

package/src/table-builder/components/header-menu/header-menu.component.ts

@@ -1,81 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input, ViewChild } from '@angular/core';
-import { FieldType, MetaData } from '../../interfaces/report-def';
-import { FilterType } from '../../enums/filterTypes';
-import { FilterInfo } from '../../classes/filter-info';
-import { TableStore } from '../../classes/table-store';
-import { MatMenuTrigger } from '@angular/material/menu';
-
-@Component({
-  selector: 'tb-header-menu',
-  templateUrl: './header-menu.component.html',
-  styleUrls: ['./header-menu.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class HeaderMenuComponent {
-  FieldType = FieldType;
-  FilterType = FilterType;
-  myFilterType!: FilterType;
-  myFilterValue: any;
-
-  @Input() filter!: Partial<FilterInfo>;
-
-  @Input() metaData!: MetaData;
-  @ViewChild(MatMenuTrigger) trigger!: MatMenuTrigger;
-  constructor( public tableState: TableStore) {}
-
-  hideField(key: string) {
-    this.tableState.hideColumn(key);
-  }
-
-  ngOnInit() {
-    this.resetFilterType();
-  }
-
-  resetFilterType() {
-    if(this.metaData.additional?.filterOptions?.filterableValues) {
-      this.myFilterType = FilterType.In;
-      return;
-    }
-    switch (this.metaData.fieldType) {
-      case FieldType.String:
-      case FieldType.Link:
-      case FieldType.PhoneNumber:
-      case FieldType.Array:
-      case FieldType.Unknown:
-        this.myFilterType = FilterType.StringContains;
-        break;
-      case FieldType.Currency:
-      case FieldType.Number:
-        this.myFilterType = FilterType.NumberEquals;
-        break;
-      case FieldType.Boolean:
-          this.myFilterType = FilterType.BooleanEquals;
-          break;
-      case FieldType.Date:
-          this.myFilterType = FilterType.DateIsOn;
-          break;
-      case FieldType.Enum:
-        this.myFilterType = FilterType.In;
-        break;
-    }
-  }
-
-  setStringFilterType() {
-    this.myFilterType = this.myFilterType === FilterType.StringContains ? FilterType.StringDoesNotContain : FilterType.StringContains;
-  }
-
-  setFilterType(filterType: FilterType) {
-    if (filterType === this.myFilterType) {
-      this.resetFilterType();
-    } else {
-      this.myFilterType = filterType;
-    }
-  }
-
-  onEnter(filter: FilterInfo) {
-    if (filter.filterValue != undefined && filter.filterType) {
-      this.tableState.addFilter(filter);
-      this.trigger.closeMenu();
-    }
-  }
-}

package/src/table-builder/components/in-filter/in-filter.component.css

@@ -1,3 +0,0 @@
-.inline{
-  display: inline-block;
-}

package/src/table-builder/components/in-filter/in-filter.component.html

@@ -1,13 +0,0 @@
-<div class=inline>
-    <div *ngFor="let val of value; index as i">
-      <input *ngIf="type === FieldType.Number || type === FieldType.Currency"
-        [ngModel]="val" (ngModelChange)="onValueChange(i,$event)"
-        [readonly]="i+1 < value.length" type="number" [ngModelOptions]="{standalone:true}" [autoFocus]="i === value.length - 1"/>
-      <input *ngIf="type !== FieldType.Number && type !== FieldType.Currency"
-        [ngModel]="val" (ngModelChange)="onValueChange(i,$event)"
-        [readonly]="i+1 < value.length" type="string" [ngModelOptions]="{standalone:true}"
-        #input [autoFocus]="i === value.length - 1" />
-      <button [disabled]="value.length <= 1" (click)="removeInput(i)">-</button>
-      <button *ngIf="i === value.length - 1" [disabled]="val == undefined || val === ''" (click)="addInput()">+</button>
-    </div>
-</div>

package/src/table-builder/components/in-filter/in-filter.component.ts

@@ -1,60 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input, ChangeDetectorRef } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { FilterInfo } from '../../classes/filter-info';
-import { FieldType } from '../../interfaces/report-def';
-
-@Component({
-  selector: 'lib-in-filter',
-  templateUrl: './in-filter.component.html',
-  styleUrls: ['./in-filter.component.css'],
-  changeDetection:ChangeDetectionStrategy.OnPush,
-  providers: [{
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: InFilterComponent,
-    multi: true
-  }],
-})
-export class InFilterComponent implements ControlValueAccessor {
-  FieldType = FieldType;
-  @Input() type! : FieldType;
-  value: any[] = [undefined];
-
-  constructor(private ref: ChangeDetectorRef) {
-    this.value = [undefined];
-  }
-  writeValue(obj: any[]): void {
-    if(!obj?.length) obj  = [undefined];
-    this.value = obj;
-    this.ref.markForCheck();
-  }
-  onChange = (_: any) => { };
-
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-  onTouched = () => { };
-  registerOnTouched(fn: any): void {
-    this.onTouched = fn;
-  }
-
-  addInput(){
-    this.value = [...this.value, undefined];
-    this.ref.markForCheck();
-    this.onChange(this.value);
-  }
-
-  removeInput(index: number){
-    this.value = [...this.value];
-    this.value.splice(index,1);
-    this.ref.markForCheck();
-    this.onChange(this.value);
-  }
-
-  onValueChange(i:number,value: number | string){
-    this.value = [...this.value];
-    this.value[i] = value;
-    this.ref.markForCheck();
-    this.onChange(this.value);
-  }
-
-}

package/src/table-builder/components/initialization-component/initialization-component.html

@@ -1,21 +0,0 @@
-<ng-template #link  let-element='element' let-metaData='metaData' let-transform='transform'>
-  <tb-link-column [element]="element" [metaData]="metaData" [transform]="transform"></tb-link-column>
-</ng-template>
-
-<ng-template #imageUrl  let-element='element' let-metaData='metaData'>
-  <span>
-    <img src="{{element[metaData.key]}}" height="75px" width="75px" />
-  </span>
-</ng-template>
-
-<ng-template #array let-element='element' let-metaData='metaData'>
-  <tb-array-column [array]='element[metaData.key]' [metaData]='metaData'></tb-array-column>
-</ng-template>
-
-<ng-template #default let-element='element' let-metaData='metaData' let-transform='transform' >
-  <span>{{ transform | func : element }}</span>
-</ng-template>
-
-<ng-template #defaultWithIcon let-element='element' let-metaData='metaData' let-transform='transform' >
-  <mat-icon>{{ transform | func : element }}</mat-icon>
-</ng-template>

package/src/table-builder/components/initialization-component/initialization-component.ts

@@ -1,15 +0,0 @@
-import { Component, TemplateRef, ViewChild } from "@angular/core";
-import { TableStore } from "../../classes/table-store";
-import { MetaData } from "../../interfaces/report-def";
-
-@Component({
-  templateUrl: './initialization-component.html',
-})
-export class InitializationComponent {
-  @ViewChild('link', {static: true}) linkTemplate! : TemplateRef<any>;
-  @ViewChild('imageUrl', {static: true}) imageUrlTemplate! : TemplateRef<any>;
-  @ViewChild('currency', {static: true}) currencyTemplate! : TemplateRef<any>;
-  @ViewChild('array', {static: true}) arrayTemplate! : TemplateRef<any>;
-  @ViewChild('default', {static: true}) defaultTemplate! : TemplateRef<any>;
-  @ViewChild('defaultWithIcon', {static: true}) defaultWithIcon! : TemplateRef<any>;
-}

package/src/table-builder/components/link-column.component.ts

@@ -1,33 +0,0 @@
-import { Component, Input } from "@angular/core";
-import { TableStore } from "../classes/table-store";
-import { MetaData } from "../interfaces/report-def";
-
-@Component({
-  selector: "tb-link-column",
-  template: `
-  <ng-container *ngrxLet="(link | func : (metaData)) as linkInfo">
-    <a *ngIf="$any(linkInfo).useRouterLink; else hrefLink" target="{{$any(linkInfo).target}}"
-      [routerLink]=" [($any(linkInfo).link | func : element)]"
-      [queryParams]="$any(linkInfo).routerLinkOptions.queryParams | func : element"
-      [fragment]="$any(linkInfo).routerLinkOptions.fragment"
-      [preserveFragment]="$any(linkInfo).routerLinkOptions.preserveFragment"
-      [queryParamsHandling]="$any(linkInfo).routerLinkOptions.queryParamsHandling"
-    >
-      {{transform | func : element}}
-    </a>
-    <ng-template #hrefLink>
-      <a target="{{$any(linkInfo).target}}"
-        href="{{($any(linkInfo).link | func : element)}}">
-        {{transform | func : element}}
-      </a>
-    </ng-template>
-  </ng-container>
-  `
-})export class LinkColumnComponent {
-  @Input() metaData!: MetaData;
-  @Input() element!: any;
-  @Input() transform = (a:any)=>a;
-  constructor(protected store: TableStore) {  }
-  link =  (metaData : MetaData) => this.store.getLinkMap(metaData);
-
-}

package/src/table-builder/components/number-filter/number-filter.component.css

@@ -1,10 +0,0 @@
-.switch {
-    display: inline-block;
-}
-
-.my-filter {
-    margin-right: 15px;
-}
-.inline{
-  display: inline-block;
-}

package/src/table-builder/components/number-filter/number-filter.component.html

@@ -1,21 +0,0 @@
-<ng-container *ngIf="CurrentFilterType !== FilterType.NumberBetween && CurrentFilterType !== FilterType.IsNull && CurrentFilterType !== FilterType.In">
-  <mat-form-field class="my-filter">
-    <input matInput name="filterValue" [ngModel]="info.filterValue" type="number"/>
-  </mat-form-field>
-</ng-container>
-
-
-<ng-container *ngIf="CurrentFilterType === FilterType.NumberBetween">
-  <ng-container ngModelGroup="filterValue"  >
-    <mat-form-field class="my-filter">
-      <input matInput name="Start" [ngModel]="info.filterValue?.Start" placeholder="Start" type="number"/>
-    </mat-form-field>
-    <mat-form-field class="my-filter">
-      <input matInput name="End" [ngModel]="info.filterValue?.End" placeholder="End" type="number"/>
-    </mat-form-field>
-  </ng-container>
-</ng-container>
-
-<div class="inline" *ngIf="CurrentFilterType === FilterType.In">
-  <lib-in-filter name='filterValue' [type]="FieldType.Number" [(ngModel)]='info.filterValue'  ></lib-in-filter>
-</div>

package/src/table-builder/components/number-filter/number-filter.component.spec.ts

@@ -1,30 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { FieldType } from 'projects/angular-utilities/src/public-api';
-
-import { NumberFilterComponent } from './number-filter.component';
-
-describe('NumberFilterComponent', () => {
-  let component: NumberFilterComponent;
-  let fixture: ComponentFixture<NumberFilterComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ NumberFilterComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(NumberFilterComponent);
-    component = fixture.componentInstance;
-    component.info = {
-      key: '',
-      fieldType: FieldType.Unknown
-    };
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/table-builder/components/number-filter/number-filter.component.ts

@@ -1,19 +0,0 @@
-import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
-import { FilterType } from '../../enums/filterTypes';
-import { ControlContainer, NgForm } from '@angular/forms';
-import { PartialFilter } from '../../classes/filter-info';
-import { FieldType } from '../../interfaces/report-def';
-
-
-@Component({
-  selector: 'tb-number-filter',
-  templateUrl: './number-filter.component.html',
-  styleUrls: ['./number-filter.component.css'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  viewProviders: [{provide: ControlContainer, useExisting: NgForm}]
-})
-export class NumberFilterComponent {
-  FilterType = FilterType; FieldType = FieldType;
-  @Input() CurrentFilterType!: FilterType;
-  @Input() info!:PartialFilter;
-}

package/src/table-builder/components/sort-menu/sort-menu.component-store.ts

@@ -1,59 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Sort } from '@angular/material/sort';
-import { ComponentStore } from '@ngrx/component-store';
-import { combineLatest } from 'rxjs';
-import { distinctUntilChanged, map, mergeMap } from 'rxjs/operators';
-import { TableStore } from '../../classes/table-store';
-import { notNull } from '../../../rxjs/rxjs-operators';
-
-@Injectable()
-export class SortMenuComponentStore extends ComponentStore<ComponenStoreState> {
-  constructor(private tableState: TableStore){
-    super({notSorted:[],sorted:[]})
-  }
-  private set = this.updater((state,data:ComponenStoreState)=> ({...data}));
-
-  setSorted = this.updater((state,sorted:SortWithName[])=>({...state,sorted}));
-
-  setNotSorted = this.updater((state,notSorted:SortWithName[])=>({...state,notSorted}));
-  sorted$ = this.select(state=>state.sorted);
-  notSorted$ = this.select(state=>state.notSorted);
-  setDirection = this.updater((state,sort:SortWithName)=>{
-    const index = state.sorted.findIndex(s => s.active === sort.active);
-    const sorted = [...state.sorted];
-    sorted.splice(index,1,sort);
-    return ({...state,sorted});
-  })
-  reset = () => {
-    const sorted = this.tableState.sorted$.pipe(
-      mergeMap(sort => this.tableState.metaData$.pipe(
-        notNull(),
-        map(
-        meta => sort.map(s => {
-          return ({...s, displayName: meta[s.active]?.displayName} as SortWithName)})
-      )))
-    );
-    const notSorted = this.tableState.metaDataArray$.pipe(mergeMap(
-      metas => this.tableState.sorted$.pipe(
-        map(s => metas.filter(meta=> !s.some(s=>s.active=== meta.key))
-          .map(meta=>({active:meta.key,displayName : meta.displayName} as SortWithName)))
-      )
-    ));
-    this.set(combineLatest([
-      sorted.pipe(distinctSortArray),notSorted.pipe(distinctSortArray)
-    ]).pipe(map(([sorted,notSorted])=>({sorted,notSorted}))));
-  }
-}
-
-export interface ComponenStoreState {
-  sorted : SortWithName[];
-  notSorted: SortWithName[];
-}
-
-export interface SortWithName extends Sort{
-  displayName : string;
-}
-
-const equalSortArray = (arr1:SortWithName[],arr2:SortWithName[]) =>
-  arr1.length === arr2.length && arr2.every(s1 => arr1.some(s2 => s1.active === s2.active));
-const distinctSortArray = distinctUntilChanged<SortWithName[]>(equalSortArray);