@one-paragon/angular-utilities 1.2.18 → 1.3.0

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

@@ -1,55 +0,0 @@
-@if($columns(); 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,46 +0,0 @@
-import { Component, ChangeDetectionStrategy, inject, computed } from '@angular/core';
-import { DisplayCol } from '../../classes/display-col';
-import { 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';
-
-@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 {
-  private tableState = inject(TableStore);
-  $columns = computed(() => this.tableState.$orderedCodeVisibleMetaDatas().map( md => ({
-    key: md.key,
-    displayName: md.displayName,
-    isVisible: !this.tableState.$hiddenKeys().includes(md.key)
-  })));
-
-  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,77 +0,0 @@
-<mat-table
-  cdkDropList
-  cdkDropListLockAxis='x'
-  cdkDropListOrientation="horizontal"
-  (cdkDropListDropped)="drop($event)"
-  class="table-drag-list"
-  #table
-  [dataSource]="state.props().dataSource!"
-  [trackBy]="trackByFunction"
-  [style]="tableWidth | async "
->
-
-  <!-- select column -->
-  <ng-container matColumnDef="select">
-
-    <mat-header-cell *matHeaderCellDef  class="select-column">
-      <mat-checkbox (change)="$event ? masterToggle() : null"
-                    [checked]="!!(masterToggleChecked$ | async)"
-                    [indeterminate]="masterToggleIndeterminate$ | async">
-      </mat-checkbox>
-    </mat-header-cell>
-
-    <mat-cell *matCellDef="let row" class="select-column">
-      <mat-checkbox
-        (click)="$event.stopPropagation()"
-        (change)="$event ? selection.toggle(row) : null"
-        [checked]="selection.isSelected(row)"/>
-    </mat-cell>
-
-    <mat-footer-cell *matFooterCellDef class="select-column">
-      {{ selection.selected.length }}
-    </mat-footer-cell>
-  </ng-container>
-
-
-  <!-- index column -->
-  <ng-container matColumnDef="index">
-    <mat-header-cell *matHeaderCellDef class="f-mat-header-cell" class="index-column">#
-    </mat-header-cell>
-    <mat-cell *matCellDef="let i = index;" class="index-column">
-      {{ 1 + i + $offsetIndex() }}
-    </mat-cell>
-    <mat-footer-cell *matFooterCellDef class="index-column"></mat-footer-cell>
-  </ng-container>
-
-  <!-- Grouping -->
-  <ng-container matColumnDef="groupHeader">
-    <mat-cell *matCellDef="let row">
-      @let expanded = (state.getIsExpanded | func : row.key : row.groupName );
-      <div [style.paddingLeft]="row.padding + 'px !important'">
-        <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>
-
-  <mat-row [style.height]="$rowHeight()" [style.min-height]="$rowHeight()"
-           *matRowDef="let row; columns: $keys(); let i = index"/>
-  <mat-row [style.height]="state.props().groupHeaderHeight ? state.props().groupHeaderHeight + 'px' : $groupHeaderHeight()"
-           [style.min-height]="state.props().groupHeaderHeight ? state.props().groupHeaderHeight + 'px' : $groupHeaderHeight()"
-           *matRowDef="let row; columns: ['groupHeader']; when: isGroupHeader" style="background-color: white;"/>
-</mat-table>
-
-<mat-header-row [style.height]="$headerHeight()" [style.min-height]="$headerHeight()"
-  *matHeaderRowDef="$keys(); sticky: state.props().isSticky" [style.top.px]="((offset$ | async)! * -1)"/>
-<mat-footer-row [style.height]="$footerHeight()" [style.min-height]="$footerHeight()"
-  *matFooterRowDef="$keys(); sticky: $stickyFooter() "
-  [style.bottom.px]="$stickyFooter() ? (offset$ | async) : undefined"/>

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

@@ -1,38 +0,0 @@
-:host{
-  --mat-paginator-container-size: initial;
-}
-.select-column {
-  min-width: var(--tb-min-select-column-width, 42px)
-}
-.index-column {
-  min-width: var(--tb-min-index-column-width, 42px)
-}
-.mat-mdc-row:nth-child(odd) {
-  background-color: var(--tb-odd-row-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 .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: var(--tb-cell-padding, 0 0 0 .2rem);
-    line-height: var(--tb-cell-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;
-
-}

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

@@ -1,325 +0,0 @@
-import { Component, ViewChild, Input, ChangeDetectionStrategy, Output, SimpleChanges, OnInit, QueryList, ViewContainerRef, Injector, EventEmitter, computed, inject, input, viewChild, effect, untracked, signal } from '@angular/core';
-import { MatFooterRowDef, MatHeaderRowDef, MatRowDef, MatTable, MatTableModule } from '@angular/material/table';
-import { Observable, combineLatest } from 'rxjs';
-import { SelectionChange, SelectionModel } from '@angular/cdk/collections';
-import { TableStore } from '../../classes/table-store';
-import { map } from 'rxjs/operators';
-import { ColumnBuilderComponent } from '../column-builder/column-builder.component';
-import { Dictionary } from '../../interfaces/dictionary';
-import { FieldType } from '../../interfaces/report-def';
-import { previousAndCurrent } from '../../../rxjs/rxjs-operators';
-import { ColumnInfo } from '../../interfaces/ColumnInfo';
-import { CdkDragDrop, CdkDropList, DragDropModule } from '@angular/cdk/drag-drop';
-import { FunctionPipe } from '../../../utilities';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { TransformCreator } from '../../services/transform-creator';
-import { initIndexSymbol } from '../table-container/table-container.helpers/sort-state.helpers';
-import { VirtualScrollOptions } from '../../classes/table-builder-general-settings';
-import { toObservable } from '@angular/core/rxjs-interop';
-import { DataStore } from '../../classes/data-store';
-
-@Component({
-  selector: 'tb-generic-table',
-  templateUrl: './generic-table.component.html',
-  styleUrls: ['./generic-table.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  imports: [
-    MatTableModule, DragDropModule, MatCheckboxModule, MatButtonModule, MatIconModule, NgTemplateOutlet,
-    MatTooltipModule, AsyncPipe, FunctionPipe,
-  ],
-})
-export class GenericTableComponent implements OnInit {
-  protected state = inject(TableStore);
-  private dataStore = inject(DataStore);
-  private viewContainer = inject(ViewContainerRef);
-  private transformCreator = inject(TransformCreator);
-  smallFooter = 10
-
-  $headerRow = viewChild(MatHeaderRowDef);
-  $footerRow = viewChild(MatFooterRowDef);
-  $table = viewChild(MatTable);
-
-  drop(event: CdkDragDrop<string[]>) {
-    this.state.setUserDefinedOrder({ newOrder:event.currentIndex, oldOrder:event.previousIndex })
-  }
-  _trackBy?: string;
-  @Input() set trackBy(trackBy: string){
-    if(trackBy){
-      this._trackBy = trackBy;
-      this.trackByFunction = (index:number, item: any) => item[trackBy];
-    }
-    this.setUpSelections(trackBy);
-  }
-  get trackBy(): string | undefined { return this._trackBy }
-  $displayData = input.required<any[]>({ alias: 'displayData' });
-  $displayDataLength = computed(() => this.$displayData()?.length || 0);
-  $hasFooterMeta = computed(() => this.state.$metaDataArray().some(md => !!md.additional?.footer))
-  $data = input.required<any[]>({ alias: 'data' })
-  data$ = toObservable(this.$data);
-  $rows = input<MatRowDef<any>[]>([], { alias: 'rows' });
-  $columnInfos = input.required<ColumnInfo[]>({ alias: 'columnInfos' });
-  $hasCustomFooter = computed(() => this.$columnInfos()?.some(ci => !!ci.customCell?.columnDef?.footerCell))
-  @ViewChild(CdkDropList, { static: true }) dropList!: CdkDropList;
-  $footerRowStyle = computed(() => {
-    const hasData = !!this.$displayDataLength();
-    const metaFooter = this.$hasFooterMeta();
-    const customFooter = this.$hasCustomFooter();
-    const hasSelectionColumn = this.state.props().selectionColumn;
-    return customFooter || (hasData && (metaFooter || hasSelectionColumn)) ? 'regular-footer' : hasData ? 'no-footer' : 'small-footer';
-  });
-  $showFooterRow = computed(() => this.$footerRowStyle() !== 'no-footer');
-  _injector = inject(Injector);
-  injector = Injector.create({
-    providers: [
-      {provide: MatTable, useFactory: ()=> this.$table() },
-      {provide: CdkDropList, useFactory: ()=> this.dropList },
-    ],
-    parent: this._injector
-  });
-
-  $hasSelectColumn = computed(() => this.state.selectSignal(state => state.props.selectionColumn)());
-  $hasIndexColumn = computed(() => this.state.selectSignal(state => state.props.indexColumn)());
-  $columns = signal<Dictionary<ColumnBuilderComponent>>({});
-  $showHeader = computed(() => !this.state.tableSettings().hideColumnHeader)
-  offset$ = this.dataStore.select( s => s.virtualScrollOffset );
-
-  constructor() {
-    this.setUpSelections();
-
-    effect(() => {
-      const columnInfos = this.$columnInfos() || [];
-      const table = this.$table();
-      if(!table) return;
-
-      untracked(() => {
-
-        Object.entries(this.$columns()).forEach(([key, value]) => {
-          const columnInfo = columnInfos.find(ci => ci.metaData.key === key);
-          if(!columnInfo || columnInfo.customCell !== value.customCell) {
-            delete this.$columns()[key];
-            table?.removeColumnDef(value.columnDef);
-          }
-        });
-
-        columnInfos.forEach(ci => this.buildColumn(ci))
-      })
-    });
-
-    effect(() => {
-      const table = this.$table();
-      const rows = this.$rows();
-      const keys = this.$keys();
-      if(!table) return;
-
-      untracked(() => {
-        rows.forEach(row => {
-          table.removeRowDef(row);
-          row.columns = keys;
-          table.addRowDef(row);
-        });
-      })
-    })
-
-    effect(() => {
-      const headerRow = this.$headerRow();
-      const showHeader = this.$showHeader();
-      const table = this.$table();
-      untracked(() => {
-        if(headerRow && showHeader && table) table.addHeaderRowDef(headerRow);
-        else if(headerRow && table) table.removeHeaderRowDef(headerRow);
-      })
-    });
-
-    effect(() => {
-      const footerRow = this.$footerRow();
-      const showFooter = this.$showFooterRow();
-      const table = this.$table();
-      
-      untracked(() => {
-        if(footerRow && showFooter && table) table.addFooterRowDef(footerRow);
-        else if(footerRow && table) table.removeFooterRowDef(footerRow);
-      })
-    });
-  }
-
-  defaultTrackBy = (index:number, item: any) => item[initIndexSymbol];
-  trackByFunction = this.defaultTrackBy;
-
-  $keys = computed(() => {
-    const displayed = this.state.$orderedVisibleColumns();
-    const built = this.$columns();
-    const keys = displayed.filter(d => !!built[d]);
-    if(this.$hasSelectColumn()){
-      keys.unshift('select');
-    }
-    if(this.$hasIndexColumn()) {
-      keys.unshift('index');
-    }
-    return keys;
-  })
-  keys$ = toObservable(this.$keys);
-  ngOnInit() {
-
-    this.state.on(this.selectableData$, (data) => {
-      if(this.selection.selected.length){
-        const trackByFunction = this.trackBy ? (s) => data.every(d =>  d[this.trackBy!] !== s[this.trackBy!]) : s => !data.includes(s);
-        const removed = this.selection.selected.filter(trackByFunction);
-        this.selection.deselect(...removed);
-      }
-    });
-
-  }
-
-  $usePaginator = computed(() => this.state.tableSettings().usePaginator);
-  $useVirtualScroll = computed(() => this.state.$viewType().includes('virtual'));
-  $offsetIndex = computed(() => {
-    const virtualStart = this.dataStore.selectSignal(d => d.virtualEnds.start)();
-    const pageSize = this.state.$pageSize();
-    const currentPage = this.state.$currentPage();
-    if(this.$useVirtualScroll()){
-      return virtualStart;
-    }
-    if(this.$usePaginator()){
-      return pageSize * currentPage;
-    }
-    return 0;
-  });
-
-
-  isGroupHeader(_: number, row: { isGroupHeader: boolean }) {
-    return row.isGroupHeader;
-  }
-
-  setExpanded(key: string, groupKey: string, isExpanded: boolean): void {
-    this.state.updateExpandedGroups({ key , isExpanded, groupKey });
-  }
-
-  buildColumn(column: ColumnInfo) {
-    const alreadyBuiltColumn = this.$columns()[column.metaData.key];
-    if(alreadyBuiltColumn) {
-      alreadyBuiltColumn.metaData = column.metaData;
-    } else {
-      const component = this.viewContainer.createComponent(ColumnBuilderComponent, {
-        index: 0,
-        injector: this.injector
-      });
-      component.instance.customCell = column.customCell;
-      component.instance.metaData = column.metaData;
-      component.instance.data$ = this.data$;
-      component.instance.whenViewInited(() => {
-        this.$columns.update(columnsDict => ({
-          ...columnsDict,
-          [column.metaData.key]: component.instance
-        }));
-      });
-    }
-  }
-
-  selection! : SelectionModel<any>;
-  @Output() selection$ = new EventEmitter<SelectionChange<any>>();
-  masterToggleChecked$ = this.selection$.pipe(map(()=>this.selection.hasValue() && this.isAllSelected()));
-  masterToggleIndeterminate$ = this.selection$.pipe(map(()=>this.selection.hasValue() && !this.isAllSelected()));
-  setUpSelections(trackBy?: string){
-    this.selection = trackBy ? new SelectionModel<any>(true, [], true, (a, b) => a[trackBy] === b[trackBy]) : new SelectionModel<any>(true, []);
-    this.state.on(this.selection.changed, c => this.selection$.emit(c));
-  }
-  $selectableData = computed(() => {
-    if(this.state.$viewType() === 'virtual paginator' || this.state.$viewType() === 'paginator'){
-      const previousPageRecords = this.state.$currentPage() * this.state.$pageSize();
-      return this.$data().slice(previousPageRecords, previousPageRecords + this.state.$pageSize());
-    }else if(this.state.$viewType() === 'all' || this.state.$viewType() === 'virtual all'){
-      return this.$data();
-    }
-    return [];
-  });
-  selectableData$ = toObservable(this.$selectableData);
-  isAllSelected() {
-    const numSelected = this.selection.selected.length;
-    const numRows = this.$selectableData()?.length || 0;
-    return numSelected === numRows;
-  }
-
-  /** Selects all rows if they are not all selected; otherwise clear selection. */
-  masterToggle() {
-    if(this.isAllSelected()){
-      this.selection.clear()
-    } else {
-      this.selection.select(...this.$selectableData());
-    }
-  }
-
-  tableWidth = this.state.getUserDefinedTableSize$.pipe(
-    previousAndCurrent<number | undefined>(0),
-    map(([previousUserDefinedWidth, currentUserDefinedWidth]) => {
-      if( currentUserDefinedWidth){
-        return ({width:`${currentUserDefinedWidth}px`, minWidth: 'fit-content'});
-      } if( wasReset() ){
-        return ({width:'initial'});
-      }
-      return ({});
-
-      function wasReset(){
-        return (previousUserDefinedWidth ?? 0) >=0 && currentUserDefinedWidth == null;
-      }
-    })
-  );
-
-  getTransform = (key: string, val: string) => {
-    if(val == undefined || val === 'null') return '';
-    try {
-      return this.transformCreator.createTransformer(this.$columns[key].metaData, true)({ [key]: val});
-    } catch (error) {
-      return val;
-    }
-  }
-
-  $rowHeight = this.state.selectSignal(s => {
-      if(this.state.$isVirtual() && (s.notPersistedTableSettings.useVirtualScroll as VirtualScrollOptions)?.enforceRowHeight){
-        const height = (s.notPersistedTableSettings.useVirtualScroll as VirtualScrollOptions)!.rowHeight;
-        return height + 'px' ;
-      }
-      if(typeof s.notPersistedTableSettings.rowHeight === 'number'){
-        return s.notPersistedTableSettings.rowHeight + 'px';
-      }
-      return s.notPersistedTableSettings.rowHeight;
-
-    });
-
-  $headerHeight = this.state.selectSignal(s => {
-    if(this.state.$isVirtual() && (s.notPersistedTableSettings.useVirtualScroll as VirtualScrollOptions)?.enforceHeaderHeight){
-      const height = (s.notPersistedTableSettings.useVirtualScroll as VirtualScrollOptions)!.headerHeight;
-      return height + 'px';
-    }
-    if(typeof s.notPersistedTableSettings.headerHeight === 'number'){
-      return s.notPersistedTableSettings.headerHeight + 'px';
-    }
-    return s.notPersistedTableSettings.headerHeight;
-  });
-
-  $groupHeaderHeight = this.state.selectSignal(s => {
-    if(s.notPersistedTableSettings.groupHeaderHeight){
-      return s.notPersistedTableSettings.groupHeaderHeight + 'px';
-    }
-    return this.$rowHeight();
-  });
-
-  $footerHeight = this.state.selectSignal(s => {
-    const footerStyle = this.$footerRowStyle();
-    switch (footerStyle) {
-      case 'regular-footer':
-        return this.$rowHeight();
-      case 'small-footer':
-        return `${this.smallFooter}px`;
-      default:
-        return '0px';
-    }
-  });
-
-
-  $stickyFooter = computed(() => this.state.props().stickyFooter || this.state.$isVirtual());
-}