@one-paragon/angular-utilities 0.1.21 → 0.1.23

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

@@ -1,52 +0,0 @@
-<ng-container *ngIf="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'>
-      <button [class.isHidden]="!col.isVisible" stop-propagation mat-menu-item cdkDrag [cdkDragData]="col"
-        *ngFor="let col of displayCols">
-        <div (click)="col.isVisible = !col.isVisible; emit(displayCols)" style="display: flex; align-items: center;">
-          <button mat-icon-button matTooltip="Hide Column" class="show-hide" *ngIf="col.isVisible; else hidden">
-            <mat-icon color="primary">check_box</mat-icon>
-          </button>
-          <p class="label">
-            {{col.displayName || (col.key | spaceCase) }}
-          </p>
-
-          <ng-template #hidden>
-            <button mat-icon-button matTooltip="Show Column" class="show-hide">
-              <mat-icon>indeterminate_check_box</mat-icon>
-            </button>
-          </ng-template>
-
-        </div>
-      </button>
-    </div>
-  </mat-menu>
-</ng-container>

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,44 +0,0 @@
-import { Component, ChangeDetectionStrategy} from '@angular/core';
-import { DisplayCol } from '../../classes/display-col';
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
-import { orderViewableMetaData, TableStore } from '../../classes/table-store';
-import {CdkDragDrop} from '@angular/cdk/drag-drop';
-
-@Component({
-  selector: 'tb-col-displayer',
-  templateUrl: './gen-col-displayer.component.html',
-  styleUrls: ['./gen-col-displayer.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class GenColDisplayerComponent {
-  columns$: Observable< DisplayCol[]>;
-  constructor( private tableState: TableStore ) {
-    this.columns$ = this.tableState.state$.pipe(
-      map( state =>
-        orderViewableMetaData(state)
-          .map( md => ({
-            key: md.key,
-            displayName: md.displayName,
-            isVisible: !state.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]="dataSource"
-  [trackBy]='trackByFunction'
-  [styler]="tableWidth | async"
->
-
-    <ng-container matColumnDef="select">
-
-        <mat-header-cell *matHeaderCellDef class="f-mat-header-cell" style="flex: initial;  padding-left: .7rem!important;" >
-          <mat-checkbox (change)="$event ? masterToggle() : null"
-                        [checked]="!!(masterToggleChecked$ | async)"
-                        [indeterminate]="masterToggleIndeterminate$ | async">
-          </mat-checkbox>
-        </mat-header-cell>
-
-        <mat-cell *matCellDef="let row" style="flex: initial; padding-left: .7rem!important;">
-          <mat-checkbox *ngIf="!row.isGroupFooter"
-                        (click)="$event.stopPropagation()"
-                        (change)="$event ? selection.toggle(row) : null"
-                        [checked]="selection.isSelected(row)">
-          </mat-checkbox>
-        </mat-cell>
-
-        <mat-footer-cell *matFooterCellDef style="flex: initial;  padding-left: .7rem!important;">
-          {{ selection.selected.length }}
-        </mat-footer-cell>
-      </ng-container>
-
-      <ng-container matColumnDef="index">
-          <mat-header-cell *matHeaderCellDef class="f-mat-header-cell" >#</mat-header-cell>
-          <mat-cell *matCellDef="let i = index;"> {{ (tbPaginator.paginator.pageIndex * tbPaginator.paginator.pageSize) +  i + 1 }} </mat-cell>
-          <mat-footer-cell *matFooterCellDef></mat-footer-cell>
-
-      </ng-container>
-
-      <ng-container matColumnDef="groupHeader">
-        <mat-cell *matCellDef="let row">
-          <div [style.paddingLeft]="row.padding + 'px !important'" >
-            <button mat-icon-button (click)="updateGroup(row);">
-              <mat-icon *ngIf="!row.isExpanded">chevron_right</mat-icon>
-              <mat-icon *ngIf="row.isExpanded">expand_more</mat-icon>
-            </button>
-            {{row.groupHeaderName}}
-          </div>
-          <div style="flex-grow: 1">
-            <ng-container *ngTemplateOutlet="groupHeaderTemplate; context: { element: row }"></ng-container>
-          </div>
-        </mat-cell>
-      </ng-container>
-
-  <ng-container *ngIf="showHeader$ | async">
-    <mat-header-row *matHeaderRowDef="keys; sticky: isSticky"></mat-header-row>
-  </ng-container>
-  <mat-row *matRowDef="let row; columns: keys; let i = index"></mat-row>
-  <mat-row *matRowDef="let row; columns: ['groupHeader']; when: isGroupHeader" style="background-color: white;"></mat-row>
-  <mat-row *matRowDef="let row; columns: keys; when: isGroupFooter" style="background-color: whitesmoke;"></mat-row>
-  <mat-footer-row *matFooterRowDef="keys"></mat-footer-row>
-
-</mat-table>
-
-<div class="flx-row-end sticky">
-  <tb-paginator #tbPaginator
-    [dataSource]="dataSource"
-    [tableElRef]="tableElRef"
-    [data$]="data$">
-  </tb-paginator>
-
-  <mat-icon [matTooltip]="(collapseFooter$ | async) ? 'expand' : 'collapse'" class="collapse-icon footer" (click)="state.toggleCollapseFooter()">
-    {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}
-  </mat-icon>
-</div>

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

@@ -1,45 +0,0 @@
-
-.mat-mdc-row:nth-child(odd) {
-  background-color: #cdeefe
-}
-
-.sticky {
-  bottom: 0px;
-  position: sticky;
-  border-top: .5px solid rgba(0,0,0,.12);
-}
-
-.page-amounts{
-  color: rgba(0, 0, 0, 0.54);
-  font-family: Roboto, "Helvetica Neue", sans-serif;
-  font-size: 12px;
-  margin-right: .2rem;
-}
-
-.flx-row-end{
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  align-items: center;
-  background-color: white;
-}
-
-: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;
-  }
-}
-
-

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

@@ -1,221 +0,0 @@
-import {
-  Component,
-  ViewChild,
-  Input,
-  ChangeDetectionStrategy,
-  Output,
-  SimpleChanges,
-  OnInit,
-  QueryList,
-  ViewContainerRef,
-  ElementRef,
-  Injector,
-  TemplateRef,
-} from '@angular/core';
-import { MatSort } from '@angular/material/sort';
-import { MatRowDef, MatTable } from '@angular/material/table';
-import { Observable } from 'rxjs';
-import { SelectionModel } from '@angular/cdk/collections';
-import { TableStore } from '../../classes/table-store';
-import { tap, map } from 'rxjs/operators';
-import { ColumnBuilderComponent } from '../column-builder/column-builder.component';
-import { Dictionary } from '../../interfaces/dictionary';
-import { GenericTableDataSource } from '../../classes/GenericTableDataSource';
-import { FieldType } from '../../interfaces/report-def';
-import { previousAndCurrent } from '../../../rxjs/rxjs-operators';
-import { ColumnInfo } from '../../interfaces/ColumnInfo';
-import { CdkDragDrop, CdkDropList } from '@angular/cdk/drag-drop';
-import { Group } from '../../classes/TableState';
-
-@Component({
-  selector: 'tb-generic-table',
-  templateUrl: './generic-table.component.html',
-  styleUrls: ['./generic-table.component.scss','../../styles/collapser.styles.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class GenericTableComponent implements OnInit {
-
-
-  drop(event: CdkDragDrop<string[]>) {
-    this.state.setUserDefinedOrder({newOrder:event.currentIndex,oldOrder:event.previousIndex})
-  }
-
-  @Input() data$!: Observable<any[]>;
-  @Input() IndexColumn = false;
-  @Input() SelectionColumn = false;
-  @Input() trackBy!: string;
-  @Input() rows!: QueryList<MatRowDef<any>>;
-  @Input() isSticky = false;
-  @Input() columnBuilders!: ColumnBuilderComponent[];
-  @Input() columnInfos!: Observable<ColumnInfo[]>;
-  @Input() groupHeaderTemplate!: TemplateRef<any>;
-
-  private _disableSort!: boolean;
-  @Input() set disableSort(val: boolean) {
-    this._disableSort = val;
-    if (val) {
-      if (this.dataSource?.sort) {
-        this.dataSource.sort = null;
-      }
-    } else {
-      if (this.dataSource && !this.dataSource.sort) {
-        this.dataSource.sort = this.sort;
-      }
-    }
-  }
-  get disableSort() { return this._disableSort; }
-
-  @ViewChild(MatTable, { static: true }) table!: MatTable<any>;
-  @ViewChild(CdkDropList, { static: true }) dropList!: CdkDropList;
-  @ViewChild('table', {read: ElementRef}) tableElRef!: ElementRef;
-  currentColumns!: string[];
-  dataSource!: GenericTableDataSource<any>;
-  keys: string [] = [];
-  injector: Injector;
-  rowDefArr :MatRowDef<any>[]= [];
-  columns:string [] = [];
-  myColumns: Dictionary<ColumnBuilderComponent> = {};
-  showHeader$!: Observable<boolean>;
-
-  constructor(
-    private sort: MatSort,
-    public state: TableStore,
-    private viewContainer: ViewContainerRef,
-    injector: Injector,
-    ) {
-
-    this.injector = Injector.create({ providers: [
-      {provide: MatTable, useFactory: ()=> {return this.table} },
-      {provide: CdkDropList, useFactory: ()=> {return this.dropList} },
-    ], parent: injector});
-  }
-
-  trackByFunction = (index:number, item: any) => {
-    if (!item) {
-      return null;
-    }
-    if (this.trackBy) {
-      return item[this.trackBy];
-    }
-    return item;
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes.rows && this.rows && this.myColumns.length) {
-      this.initializeRowDefs([...this.rows]);
-    }
-  }
-
-  ngOnInit() {
-    if (this.SelectionColumn) {
-      this.columns.push('select');
-    }
-
-    if (this.IndexColumn) {
-     this.columns.push('index');
-    }
-
-    this.createDataSource();
-
-    this.state.on(this.columnInfos, columns => {
-      columns.forEach(ci => this.addMetaData(ci))
-    });
-
-    this.initializeRowDefs([...this.rows]);
-
-    this.state.on(this.state.displayedColumns$, keys => {
-      this.keys = [...this.columns, ...keys];
-      this.rowDefArr?.forEach(row => row.columns = this.keys)
-    });
-
-    this.showHeader$ = this.state.tableSettings$.pipe(map(settings => !(settings.hideColumnHeader)));
-  }
-
-  createDataSource() {
-    this.dataSource = new GenericTableDataSource(
-      this.data$.pipe(tap((d) => this.selection.clear() ))
-    );
-
-    if (!this.disableSort) {
-      this.dataSource.sort = this.sort;
-    }
-  }
-
-  isGroupHeader(_: number, row: { isGroupHeader: boolean }) {
-    return row.isGroupHeader;
-  }
-
-  isGroupFooter(_: number, row: { isGroupFooter: boolean }) {
-    return row.isGroupFooter;
-  }
-
-  updateGroup(group: Group): void {
-    this.state.updateGroup({
-      ...group,
-      isExpanded: !group.isExpanded
-    });
-  }
-
-  addMetaData(column: ColumnInfo) {
-    let columnBuilder = this.myColumns[column.metaData.key];
-    if(columnBuilder) {
-      columnBuilder.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$;
-      this.myColumns[column.metaData.key] = component.instance;
-    }
-  }
-
-  initializeRowDefs = (defs:MatRowDef<any>[])=>{
-    this.rowDefArr.forEach(r=>this.table.removeRowDef(r));
-    this.rowDefArr = defs;
-    defs.forEach(r => {
-      r.columns = this.columns.concat(Object.values(this.myColumns).filter(c => c.metaData.fieldType !== FieldType.Hidden).map(c => c.metaData.key));
-      if (this.table) {
-        this.table.addRowDef(r);
-      }
-    });
-  }
-
-  selection : SelectionModel<any> = new SelectionModel<any>(true, []);
-  @Output() selection$: Observable<any> = this.selection.changed;
-  masterToggleChecked$ = this.selection$.pipe(map(()=>this.selection.hasValue() && this.isAllSelected()));
-  masterToggleIndeterminate$ = this.selection$.pipe(map(()=>this.selection.hasValue() && !this.isAllSelected()));
-
-  isAllSelected() {
-    const numSelected = this.selection.selected.length;
-    const numRows = this.dataSource.data.length;
-    return numSelected === numRows;
-  }
-
-  /** Selects all rows if they are not all selected; otherwise clear selection. */
-  masterToggle() {
-    this.isAllSelected() ?
-      this.selection.clear() :
-      this.selection.select(...this.dataSource.data);
-  }
-
-  tableWidth = this.state.getUserDefinedTableSize$.pipe(
-    previousAndCurrent<number | undefined>(0),
-    map(([previousUserDefinedWidth, currentUserDefinedWidth]) => {
-      if( currentUserDefinedWidth){
-        return ({width:`${currentUserDefinedWidth}px`});
-      } if( wasReset() ){
-        return ({width:'initial'});
-      }
-      return ({});
-
-      function wasReset(){
-        return (previousUserDefinedWidth ?? 0) >=0 && currentUserDefinedWidth == null;
-      }
-    })
-  );
-
-  collapseFooter$ = this.state.state$.pipe(map(state => state.persistedTableSettings.collapseFooter));
-}

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

@@ -1,89 +0,0 @@
-import {
-  Component,
-  ChangeDetectionStrategy,
-  ViewChild,
-  Input,
-  ElementRef,
-  AfterViewInit,
-  OnInit,
-} from '@angular/core';
-import { MatPaginator, PageEvent } from '@angular/material/paginator';
-import { asyncScheduler, merge, Observable } from 'rxjs';
-import { delay, distinct, distinctUntilKeyChanged, map } from 'rxjs/operators';
-import { GenericTableDataSource } from '../../classes/GenericTableDataSource';
-import { TableStore } from '../../classes/table-store';
-@Component({
-  selector: 'tb-paginator',
-  template: `
-  <div [ngClass]="{'hide' : !(collapseFooter$ | async), 'page-amounts':true}" *ngIf="currentPageData$ | async as pageData">
-    {{pageData.currentStart}} - {{pageData.currentEnd}} of {{pageData.total}}
-  </div>
-  <mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 500]" showFirstLastButtons (page)="paginatorChange()"
-    [ngClass]="{'hide' : (collapseFooter$ | async)}">
-  </mat-paginator>
-  `,
-  styleUrls: ['./generic-table.component.scss','../../styles/collapser.styles.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class PaginatorComponent implements OnInit, AfterViewInit{
-  @Input() dataSource! : GenericTableDataSource<any>;
-  @Input() tableElRef! : ElementRef
-  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
-  currentPageData$!: Observable<CurrentPageDetails>;
-  collapseFooter$!:Observable<boolean>;
-  @Input() data$!: Observable<any[]>;
-
-  constructor(private state : TableStore){}
-  ngOnInit(){
-    this.dataSource.paginator = this.paginator;
-    this.ourPageEvent = true;
-    this.state.on(metaDataPageSizeChange(this.state), setPaginatorPageSize(this.paginator));
-    this.state.setPageSize(onPagiantorPageSizeChange(this.paginator));
-    this.collapseFooter$ = this.state.state$.pipe(map(state => state.persistedTableSettings.collapseFooter));
-
-  }
-  ngAfterViewInit(){
-    this.currentPageData$ = merge(
-      this.paginator.page.pipe(map(mapPaginationEventToCurrentPageDetails)),
-      this.data$.pipe(
-        distinctUntilKeyChanged("length"),
-        delayToAllowForProperUpdate,
-        map(updateCurrentPageDetailsOnDataLengthChange(this.paginator)))
-    );
-  }
-
-  paginatorChange() : void {
-    if(!this.ourPageEvent){
-      setTimeout(() => this.tableElRef?.nativeElement?.scrollIntoView(), 0);
-    } else {
-      this.ourPageEvent = false;
-    }
-  }
-  ourPageEvent = false;
-
-}
-
-const mapPaginationEventToCurrentPageDetails = (pageData: PageEvent):CurrentPageDetails => ({
-  currentStart : (pageData.pageIndex * pageData.pageSize) + 1,
-  currentEnd : Math.min(pageData.length , ((pageData.pageIndex + 1) * pageData.pageSize)),
-  total : pageData.length
-});
-
-const updateCurrentPageDetailsOnDataLengthChange = (paginator:MatPaginator) => () => ({currentStart:(paginator.pageIndex * paginator.pageSize) + 1,
-  currentEnd: Math.min(paginator.length , ((paginator.pageIndex + 1) * paginator.pageSize)),
-  total:paginator.length})
-
-const delayToAllowForProperUpdate = delay<any[]>(0,asyncScheduler);
-
-interface CurrentPageDetails {
-  currentStart:number,
-  currentEnd:number,
-  total:number
-}
-
-const metaDataPageSizeChange = (state:TableStore) => state.state$.pipe(map(state => state.pageSize),distinct());
-
-const setPaginatorPageSize = (paginator:MatPaginator) => (pageSize: number) =>
-  paginator._changePageSize(pageSize);
-
-const onPagiantorPageSizeChange = (paginator: MatPaginator) => paginator.page.pipe(map( e => e.pageSize ), distinct());

package/src/table-builder/components/group-by-list/group-by-list.component.css

@@ -1,8 +0,0 @@
-.tb-group-label {
-  padding-right: 5px;
-}
-
-.nested-arrow {
-  margin-right: -8px;
-  margin-left: -8px;
-}

package/src/table-builder/components/group-by-list/group-by-list.component.html

@@ -1,10 +0,0 @@
-<mat-chip-set *ngrxLet="tableStore.groupByKeys$ as groupByKeys">
-  <span *ngIf="groupByKeys?.length" class="tb-group-label">Group By:</span>
-  <ng-container *ngFor="let groupByKey of groupByKeys; let i = index;">
-    <mat-icon *ngIf="i > 0" class="nested-arrow">arrow_right</mat-icon>
-    <mat-chip (removed)="tableStore.removeGroupByKey(groupByKey)">
-      {{groupByKey | spaceCase}}
-      <mat-icon matChipRemove>cancel</mat-icon>
-    </mat-chip>
-  </ng-container>
-</mat-chip-set>

package/src/table-builder/components/group-by-list/group-by-list.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { GroupByListComponent } from './group-by-list.component';
-
-describe('GroupByListComponent', () => {
-  let component: GroupByListComponent;
-  let fixture: ComponentFixture<GroupByListComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ GroupByListComponent ]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(GroupByListComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/table-builder/components/group-by-list/group-by-list.component.ts

@@ -1,16 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { TableStore } from '../../classes/table-store';
-
-@Component({
-  selector: 'group-by-list',
-  templateUrl: './group-by-list.component.html',
-  styleUrls: ['./group-by-list.component.css']
-})
-export class GroupByListComponent implements OnInit {
-
-  constructor(public tableStore: TableStore) { }
-
-  ngOnInit(): void {
-  }
-
-}