@one-paragon/angular-utilities 1.1.8 → 1.2.1

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

@@ -1,55 +0,0 @@
-import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter } from '@angular/core';
-import { filterTypeMap, FilterInfo, PartialFilter } from '../../classes/filter-info';
-import { TableStore } from '../../classes/table-store';
-import { FilterType } from '../../enums/filterTypes';
-import { FieldType } from '../../interfaces/report-def';
-import { MatCardModule } from '@angular/material/card';
-import { KeyValuePipe, NgTemplateOutlet } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { PreventEnterDirective, SpaceCasePipe } from '../../../utilities';
-import { MatButtonModule } from '@angular/material/button';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatSelectModule } from '@angular/material/select';
-import { NumberFilterComponent } from '../number-filter/number-filter.component';
-import { DateFilterComponent } from '../date-filter/date-filter.component';
-import { DateTimeFilterComponent } from '../date-time-filter/date-time-filter.component';
-import { MatRadioModule } from '@angular/material/radio';
-import { InFilterComponent } from '../in-filter/in-filter.component';
-import { InListFilterComponent } from './in-list/in-list-filter.component';
-
-@Component({
-    selector: 'tb-filter',
-    templateUrl: './filter.component.html',
-    styleUrls: ['./filter.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: true,
-    imports: [
-      MatCardModule, FormsModule, SpaceCasePipe, MatButtonModule, MatTooltipModule, MatIconModule,
-      MatInputModule, MatSelectModule, KeyValuePipe, NumberFilterComponent,
-      DateFilterComponent, DateTimeFilterComponent, MatRadioModule, InFilterComponent, InListFilterComponent,
-      PreventEnterDirective, NgTemplateOutlet
-    ]
-})
-export class FilterComponent {
-  filterTypes = filterTypeMap;
-  FilterType = FilterType;
-  FieldType = FieldType;
-  @Input() filter!: PartialFilter;
-  @Output() close = new EventEmitter();
-  currentFilterType?: FilterType;
-  constructor( public state: TableStore) { }
-
-  ngOnInit() {
-    this.currentFilterType = this.filter.filterType;
-    this.filter = {...this.filter}
-  }
-  onEnter(filter: FilterInfo, event: any) {
-    event.preventDefault();
-    if (filter.filterValue != null && filter.filterType) {
-      this.state.addFilter(filter);
-      this.close.emit();
-    }
-  }
-}

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

@@ -1,92 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, ViewContainerRef } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
-import { Observable } from 'rxjs';
-import { map, tap } from 'rxjs/operators';
-import { TableStore } from '../../../classes/table-store';
-import { Dictionary } from '../../../interfaces/dictionary';
-import { FieldType, MetaData } from '../../../interfaces/report-def';
-import { AsyncPipe, KeyValuePipe } from '@angular/common';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { SpaceCasePipe, StopPropagationDirective } from '../../../../utilities';
-
-
-@Component({
-  selector: 'tb-in-list-filter , [tb-in-list-filter]',
-  template: `
-  @for (item of keyValues$ | async| keyvalue; track item.key) {
-    <div>
-      <mat-checkbox [checked]='selectedKeys.includes(item.key)' stop-propagation (change)='selectFilterChanged($event, item.key)' >
-        {{metaData.fieldType === FieldType.Enum ? (item.value | spaceCase) : item.value}}
-      </mat-checkbox>
-    </div>
-  }
-
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [{
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: InListFilterComponent,
-    multi: true
-  }],
-  standalone: true,
-  imports: [
-    AsyncPipe, KeyValuePipe, MatCheckboxModule, StopPropagationDirective, SpaceCasePipe
-  ]
-})
-export class InListFilterComponent implements ControlValueAccessor {
-
-  constructor(private ref: ChangeDetectorRef, private tableState: TableStore ) {}
-  value: string[] = [];
-  FieldType = FieldType;
-  writeValue(obj: string[]): void {
-    this.value = obj;
-
-    if(this.value) {
-      this.selectedKeys = this.value.map( f => f );
-    }
-    this.ref.markForCheck();
-  }
-
-  onChange = (_: any) => { };
-
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-  onTouched = () => { };
-  registerOnTouched(fn: any): void {
-    this.onTouched = fn;
-  }
-  @Input() key!: string;
-
-  keyValues$! : Observable<Dictionary<string>>;
-  selectedKeys : string[] = [];
-  metaData!: MetaData;
-
-  ngOnInit() {
-    this.keyValues$ = this.tableState.getMetaData$(this.key).pipe(
-      tap(metaData => this.metaData = metaData),
-      map( metaData => {
-        if(metaData.additional?.filterOptions?.filterableValues ) {
-          return  metaData.additional.filterOptions.filterableValues.reduce( (prev: any, cur)=> { prev[cur] = cur; return prev }, {});
-        } else {
-          if(metaData.fieldType === FieldType.Enum ) {
-            return metaData.additional!.enumMap;
-          }
-        }
-        return {};
-      })
-    );
-  }
-
-  selectFilterChanged($event, val) {
-    if($event.checked) {
-      this.selectedKeys = [...this.selectedKeys, val];
-    } else {
-      this.selectedKeys = this.selectedKeys.filter( item => item !== val);
-    }
-
-    this.value = this.selectedKeys;
-    this.onChange(this.value);
-  }
-
-}

package/src/table-builder/components/gen-col-displayer/gen-col-displayer.component.html

@@ -1,55 +0,0 @@
-@if(columns$ | async; as displayCols){
-  <span matTooltip="Show/hide columns">
-    <button mat-icon-button [matMenuTriggerFor]="menu">
-      <mat-icon color="primary">visibility_off</mat-icon>
-    </button>
-  </span>
-  <mat-menu #menu="matMenu" class="my-mat-menu">
-
-    <button mat-menu-item>
-      <span matTooltip="Close">
-        <button class="filter-button" mat-icon-button>
-          <mat-icon>close</mat-icon>
-        </button>
-      </span>
-    </button>
-
-    <button mat-menu-item stop-propagation>
-      <span matTooltip="Show all columns">
-        <button mat-icon-button (click)="reset(displayCols)">
-          <mat-icon color="primary">done_all</mat-icon>
-        </button>
-      </span>
-
-      <span matTooltip="Hide all columns">
-        <button mat-icon-button (click)="unset(displayCols)">
-          <mat-icon color="primary">cancel</mat-icon>
-        </button>
-      </span>
-    </button>
-
-    <div cdkDropList (cdkDropListDropped)="drop($event)" stop-propagation [cdkDropListLockAxis]="'y'">
-      @for (col of displayCols; track col.key) {
-        <button [class.isHidden]="!col.isVisible" stop-propagation mat-menu-item cdkDrag [cdkDragData]="col">
-        <div (click)="col.isVisible = !col.isVisible; emit(displayCols)" style="display: flex; align-items: center;">
-          @if(col.isVisible){
-            <button mat-icon-button matTooltip="Hide Column" class="show-hide">
-              <mat-icon color="primary">check_box</mat-icon>
-            </button>
-          } @else {
-            <button mat-icon-button matTooltip="Show Column" class="show-hide">
-              <mat-icon>indeterminate_check_box</mat-icon>
-            </button>
-          }
-          
-          <p class="label">
-            {{col.displayName || (col.key | spaceCase) }}
-          </p>
-
-        </div>
-      </button>
-      }
-
-    </div>
-  </mat-menu>
-}

package/src/table-builder/components/gen-col-displayer/gen-col-displayer.component.scss

@@ -1,57 +0,0 @@
-.show-hide {
-  margin-right: 15px;
-  height: 24px;
-  width: 24px;
-  padding: 4px;
-}
-
-.label {
-    color: cornflowerblue;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    text-align: left;
-    margin: 0;
-    font-size: 17px;
-    font-weight: 700;
-    display: inline-block;
-    width: 66%;
-}
-
-.row {
-    margin: 0;
-    padding: 0;
-}
-
-.isHidden {
-    background-color: lightgrey;
-    color: darkgray;
-    font-weight: 700;
-    font-size: 17px;
-    white-space: nowrap;
-}
-
-.filter-button {
-    margin-top: 10px;
-}
-
-.cdk-drag-preview {
-  box-sizing: border-box;
-  border-radius: 4px;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-              0 8px 10px 1px rgba(0, 0, 0, 0.14),
-              0 3px 14px 2px rgba(0, 0, 0, 0.12);
-}
-
-.cdk-drag-placeholder {
-  opacity: 0;
-}
-
-.cdk-drag-animating {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}
-.mdc-list-item__primary-text{
-  display: inline-block;
-  width: 100%;
-}
-

package/src/table-builder/components/gen-col-displayer/gen-col-displayer.component.ts

@@ -1,57 +0,0 @@
-import { Component, ChangeDetectionStrategy} from '@angular/core';
-import { DisplayCol } from '../../classes/display-col';
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
-import { orderedCodeVisibleMetaData, TableStore } from '../../classes/table-store';
-import {CdkDragDrop, DragDropModule} from '@angular/cdk/drag-drop';
-import { AsyncPipe } from '@angular/common';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatIconModule } from '@angular/material/icon';
-import { MatButtonModule } from '@angular/material/button';
-import { MatMenuModule } from '@angular/material/menu';
-import { SpaceCasePipe, StopPropagationDirective } from '../../../utilities';
-import { defaultShareReplay } from '../../../rxjs';
-
-@Component({
-  selector: 'tb-col-displayer',
-  templateUrl: './gen-col-displayer.component.html',
-  styleUrls: ['./gen-col-displayer.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush ,
-  standalone: true,
-  imports: [
-    AsyncPipe, MatTooltipModule, MatIconModule, MatButtonModule, MatMenuModule, StopPropagationDirective,
-    DragDropModule, SpaceCasePipe
-  ]
-})
-export class GenColDisplayerComponent {
-  columns$: Observable< DisplayCol[]>;
-  constructor( private tableState: TableStore ) {
-    this.columns$ = this.tableState.state$.pipe(
-      map( state =>
-        orderedCodeVisibleMetaData(state)
-          .map( md => ({
-            key: md.key,
-            displayName: md.displayName,
-            isVisible: !state.hiddenKeys.includes(md.key)
-          }))
-      ),
-      defaultShareReplay()
-    );
-  }
-
-  reset(displayCols: DisplayCol[]) {
-    displayCols.forEach(c => c.isVisible = true);
-    this.emit(displayCols);
-  }
-  drop(event: CdkDragDrop<string[]>) {
-    this.tableState.setUserDefinedOrder({ newOrder: event.currentIndex, oldOrder:event.previousIndex })
-  }
-  unset(displayCols: DisplayCol[]) {
-    displayCols.forEach(c => c.isVisible = false);
-    this.emit(displayCols);
-  }
-
-  emit(displayCols: DisplayCol[]) {
-    this.tableState.setHiddenColumns(displayCols.map( c => ({key: c.key, visible: c.isVisible})));
-  }
-}

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

@@ -1,71 +0,0 @@
-<mat-table
-  cdkDropList
-  cdkDropListLockAxis='x'
-  cdkDropListOrientation="horizontal"
-  (cdkDropListDropped)="drop($event)"
-  class="table-drag-list"
-  [class]="(showFooterRow$ | async)"
-  #table
-  [dataSource]="state.props().dataSource!"
-  [trackBy]="trackByFunction"
-  [style]="tableWidth | async"
->
-
-  <!-- select column -->
-  <ng-container matColumnDef="select">
-
-    <mat-header-cell *matHeaderCellDef class="f-mat-header-cell">
-      <mat-checkbox (change)="$event ? masterToggle() : null"
-                    [checked]="!!(masterToggleChecked$ | async)"
-                    [indeterminate]="masterToggleIndeterminate$ | async">
-      </mat-checkbox>
-    </mat-header-cell>
-
-    <mat-cell *matCellDef="let row">
-      <mat-checkbox
-      (click)="$event.stopPropagation()"
-      (change)="$event ? selection.toggle(row) : null"
-      [checked]="selection.isSelected(row)"/>
-    </mat-cell>
-
-    <mat-footer-cell *matFooterCellDef>
-      {{ selection.selected.length }}
-    </mat-footer-cell>
-  </ng-container>
-
-  <!-- index column -->
-  <ng-container matColumnDef="index">
-      <mat-header-cell *matHeaderCellDef class="f-mat-header-cell" >#</mat-header-cell>
-      <mat-cell *matCellDef="let i = index;">
-         {{ 1 + i + offsetIndex}}
-      </mat-cell>
-      <mat-footer-cell *matFooterCellDef></mat-footer-cell>
-  </ng-container>
-
-  <!-- Grouping -->
-  <ng-container matColumnDef="groupHeader">
-    <mat-cell *matCellDef="let row">
-      <div [style.paddingLeft]="row.padding + 'px !important'" *ngrxLet="(state.getIsExpanded | func : row.key : row.groupName ) as expanded">
-        <button mat-icon-button (click)="setExpanded(row.key, row.groupName, !expanded);">
-          @if(!expanded){
-            <mat-icon>chevron_right</mat-icon>
-          } @else {
-            <mat-icon>expand_more</mat-icon>
-          }
-        </button>
-        {{getTransform | func : row.key :  row.groupHeaderDisplay}} ({{row.length}})
-      </div>
-      <div style="flex-grow: 1">
-        <ng-container *ngTemplateOutlet="state.props().groupHeaderTemplate!; context: { element: row }"></ng-container>
-      </div>
-    </mat-cell>
-  </ng-container>
-
-  @if(showHeader$ | async){
-    <mat-header-row [style.height]="$headerHeight()" [style.min-height]="$headerHeight()" *matHeaderRowDef="keys; sticky: state.props().isSticky" [style.top.px]="((offset$ | async)! * -1)"  />
-  }
-  <mat-row [style.height]="$rowHeight()" [style.min-height]="$rowHeight()" *matRowDef="let row; columns: keys; let i = index" />
-  <mat-row [style.height]="$rowHeight()" [style.min-height]="$rowHeight()" *matRowDef="let row; columns: ['groupHeader']; when: isGroupHeader" style="background-color: white;" />
-  <mat-footer-row [style.height]="$rowHeight()" [style.min-height]="$rowHeight()" *matFooterRowDef="(showFooterRow$ | async) === 'regular-footer' ? keys : []; sticky: $stickyFooter() "  [style.bottom.px]="$stickyFooter() ? (offset$ | async) : undefined"  />
-
-</mat-table>

package/src/table-builder/components/generic-table/generic-table.component.scss

@@ -1,51 +0,0 @@
-
-.mat-mdc-row:nth-child(odd) {
-  background-color: #cdeefe
-}
-
-.page-amounts{
-  color: rgba(0, 0, 0, 0.54);
-  font-family: Roboto, "Helvetica Neue", sans-serif;
-  font-size: 12px;
-  margin-right: .2rem;
-}
-
-
-
-:host::ng-deep.mat-mdc-paginator-container {
-  min-height: initial !important;
-}
-
-.group-header {
-  display: flex;
-}
-
-:host::ng-deep .table-drag-list.cdk-drop-list-dragging  .drag-header:not(.cdk-drag-placeholder) {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}
-:host::ng-deep{
-  & .mdc-data-table__cell, .mdc-data-table__header-cell, .mdc-data-table__cell, .mdc-data-table__header-cell{
-    padding: 0 0 0 .2rem;
-    line-height: normal;
-  }
-}
-::ng-deep .op-date-time-input{
-  line-height: 3rem;
-  font-size: .9rem;
-  font-family: Roboto, "Helvetica Neue", sans-serif;
-  padding-left: 0.2rem;
-  width: 12rem;
-
-}
-
-.small-footer{
-  mat-footer-row{
-    min-height: 1rem;
-    height: 1rem;
-  }
-}
-.no-footer{
-  mat-footer-row{
-    display: none;
-  }
-}