@one-paragon/angular-utilities 2.2.6 → 2.2.7

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

@@ -1,109 +0,0 @@
-@let filter = $filter();
-@let currentFilterType = $currentFilterType();
-
-@if (filter)
-{
-  <mat-card appearance="outlined" class="filter-card">
-    <mat-card-content>
-      <form #form="ngForm"  (keydown.enter)="onEnter(form.value,$event)" (keydown.escape)="close.emit()">
-        <input type="hidden" name="filterId" [ngModel]="filter.filterId" />
-        <input type="hidden" name="key" [ngModel]="filter.key" />
-        <input type="hidden" name="fieldType" [ngModel]="filter.fieldType" />
-        <div class="head-row" >
-          <h4 class="filter-name">{{(filter.key | spaceCase)}} Filter</h4>
-          <button class="cancel-button small-button" color="primary" mat-icon-button type="button" [matTooltip]="'Close'"
-              (click)="close.emit();">
-            <mat-icon class="cancel-button" color="primary">close</mat-icon>
-          </button>
-        </div>
-        <div class="filter-row">
-            <div class="inline">
-              <mat-form-field class="my-filter" >
-                  <mat-select  placeholder="Select Filter Type" name="filterType"  [ngModel]="$currentFilterType()" [panelWidth]="null" (ngModelChange)="$enteredFilterType.set($event)">
-                    @for (kvp of filterTypes[filter.fieldType]; track kvp)
-                    {
-                      <mat-option [value]="kvp">
-                        {{ kvp }}
-                      </mat-option>
-                    }
-                  </mat-select>
-              </mat-form-field>
-            </div>
-            @if(
-              filter.fieldType === FieldType.String
-              || filter.fieldType === FieldType.Array
-              || filter.fieldType === FieldType.Link
-              || filter.fieldType === FieldType.Unknown
-              || filter.fieldType === FieldType.PhoneNumber)
-            {
-              <ng-container *ngTemplateOutlet="String" />
-            }
-            @else if(filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency)
-            {
-              <tb-number-filter [info]="filter" [CurrentFilterType]="currentFilterType!" />
-            }
-            @else if(filter.fieldType === FieldType.Boolean)
-            {
-              <ng-container *ngTemplateOutlet="Boolean" />
-            }
-            @else if(filter.fieldType === FieldType.Date)
-            {
-              <tb-date-filter [info]="filter" [CurrentFilterType]="currentFilterType!" />
-            }
-            @else if(filter.fieldType === FieldType.DateTime)
-            {
-              <tb-date-time-filter [info]="filter" [CurrentFilterType]="currentFilterType!" />
-            }
-            @else if(filter.fieldType === FieldType.Enum)
-            {
-              <ng-container *ngTemplateOutlet="Enum" />
-            }
-
-            @if(currentFilterType === FilterType.IsNull)
-            {
-              <mat-radio-group name="filterValue" [ngModel]="filter.filterValue">
-                <mat-radio-button [value]="true">True</mat-radio-button>
-                <mat-radio-button [value]="false">False</mat-radio-button>
-              </mat-radio-group>
-            }
-        </div>
-        <button mat-button disableRipple [disabled]="form.value.filterValue==undefined || !form.value.filterType" (click)="addFilter(form.value)">
-          Apply
-        </button>
-      
-      
-      <ng-template #String>
-        @if(currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In)
-        {
-          <mat-form-field class="my-filter">
-            <input matInput name="filterValue" [ngModel]="filter.filterValue" />
-          </mat-form-field>
-        }
-        @else if(currentFilterType === FilterType.In)
-        {
-          <lib-in-filter name='filterValue' [type]="FieldType.String" [(ngModel)]="filter.filterValue" />
-        }
-      </ng-template>
-      
-      <ng-template #Boolean >
-        @if(currentFilterType === FilterType.BooleanEquals)
-        {
-          <div class="switch">
-            <mat-radio-group name="filterValue" [ngModel]="filter.filterValue" >
-              <mat-radio-button preventEnter [value]="true">True</mat-radio-button>
-              <mat-radio-button preventEnter [value]="false">False</mat-radio-button>
-            </mat-radio-group>
-          </div>
-        }
-      </ng-template>
-      <ng-template #Enum>
-        @if(currentFilterType === FilterType.In)
-        {
-          <tb-in-list-filter name='filterValue' [key]='filter.key' [(ngModel)]='filter.filterValue' />
-
-        }
-      </ng-template>
-      </form>
-    </mat-card-content>
-  </mat-card>
-}

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

@@ -1,60 +0,0 @@
-.filter-name {
-  color: var(tb-filter-name);
-  margin: 10px 0;
-  font-weight: 600;
-  display: inline-block;
-}
-
-.switch {
-  display: inline-block;
-}
-
-.head-row {
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: space-between;
-}
-.filter-row{
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-mat-card.filter-card{
-  &::ng-deep mat-form-field{
-    width: 150px;
-  }
-  &::ng-deep.mat-mdc-form-field-subscript-wrapper{
-    line-height: 0;
-    &::before{
-      height: 0;
-    }
-  }
-}
-.inline{
-  display: inline-block;
-}
-.small-button {
-  height: 18px;
-  width: 18px;
-  font-size: 18px;
-  padding: 0;
-  margin: 0;
-  ::ng-deep * {
-    line-height: initial;
-    font-size: initial;
-    height: 18px;
-    width: 18px;
-    font-size: 18px;
-    bottom: initial;
-
-  }
-}
-.cancel-button{
-  font-weight: 700;
-}
-.date-toggle ::ng-deep svg{
-  position: absolute;
-  left: 0;
-  top: 0;
-}

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

@@ -1,86 +0,0 @@
-import { TestBed, ComponentFixture } from '@angular/core/testing';
-import { FilterComponent } from '../filter/filter.component';
-import { CommonModule, DatePipe } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { FieldType } from '../../interfaces/report-def';
-import { By } from '@angular/platform-browser';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { SpaceCasePipe } from '../../../utilities/pipes/space-case.pipes';
-import { DateFilterComponent } from '../date-filter/date-filter.component';
-import { FilterType } from '../../enums/filterTypes';
-import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import { MatButtonHarness } from '@angular/material/button/testing';
-import { MatSelectHarness } from '@angular/material/select/testing';
-import { HarnessLoader } from '@angular/cdk/testing';
-import { OptionHarnessFilters } from '@angular/material/core/testing';
-import { TableBuilderConfigToken } from '../../classes/TableBuilderConfig';
-import { provideMockStore } from '@ngrx/store/testing';
-import { isObservable } from 'rxjs';
-
-function fillInput<T>(fixture: ComponentFixture<T>, name: string, value: string) {
-  const input = fixture.debugElement.query(By.css('input[name=' + name + ']')).nativeElement as HTMLInputElement;
-  input.value = value;
-  input.dispatchEvent(new Event('input'));
-  fixture.detectChanges();
-}
-
-async function setSelect(loader: HarnessLoader, filter: Pick<OptionHarnessFilters, 'isSelected' | 'selector' | 'text'>) {
-  const select = await loader.getHarness<MatSelectHarness>(MatSelectHarness);
-  await select.open();
-  await select.clickOptions(filter);
-}
-
-describe('filter component', () => {
-
-  beforeEach(() => {
-
-    TestBed.configureTestingModule({
-      declarations: [FilterComponent, DatePipe, SpaceCasePipe, DateFilterComponent],
-      providers: [
-        DatePipe,
-        { provide: TableBuilderConfigToken, useValue: { defaultTableState: { } } },
-        provideMockStore({ initialState: {} }),
-      ],
-      imports: [
-        NoopAnimationsModule,
-        CommonModule,
-        FormsModule,
-      ]
-    })
-      .compileComponents();
-  });
-
-  it('filter info object should be populated', async () => {
-    const fixture = TestBed.createComponent(FilterComponent);
-    const component = fixture.componentInstance;
-
-    const originFunc = component.state.addFilter;
-
-    const spy = spyOn(component.state, 'addFilter');
-
-
-    spy.and.callFake( a => {
-      if(isObservable(a)) {
-        throw new Error('Observable not supported');
-      } else {
-        expect(a.filterType).toBe(FilterType.StringContains);
-        expect(a.filterValue).toBe('a');
-      }
-      return originFunc(a);
-    });
-
-    component.filter = {
-      key: 'name',
-      fieldType: FieldType.String
-    };
-
-    const loader = TestbedHarnessEnvironment.loader(fixture);
-    const button = await loader.getHarness<MatButtonHarness>(MatButtonHarness.with( { text: 'Apply' }));
-
-    await setSelect(loader, { text: 'Contains' });
-    fillInput(fixture, 'filterValue', 'a');
-    await button.click();
-
-    expect(spy).toHaveBeenCalled();
-  });
-});

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

@@ -1,64 +0,0 @@
-import { Component, ChangeDetectionStrategy, inject, input, computed, output, signal } 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 { NgTemplateOutlet } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { 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,
-  imports: [
-    MatCardModule, FormsModule, SpaceCasePipe, MatButtonModule, MatTooltipModule, MatIconModule,
-    MatInputModule, MatSelectModule, NumberFilterComponent,
-    DateFilterComponent, DateTimeFilterComponent, MatRadioModule, InFilterComponent, InListFilterComponent,
-    NgTemplateOutlet
-  ]
-})
-export class FilterComponent {
-  protected state = inject(TableStore);
-
-  filterTypes = filterTypeMap;
-  FilterType = FilterType;
-  FieldType = FieldType;
-
-  $filter = input.required<PartialFilter, PartialFilter>({
-    alias: 'filter',
-    transform: (f) => ({ ...f })
-  });
-
-  close = output();
-
-  $enteredFilterType = signal<FilterType | undefined>(undefined);
-  $currentFilterType = computed(() => this.$enteredFilterType() || this.$filter()?.filterType);
-  $availableFilterTypes = computed(() => this.filterTypes[this.$filter()?.fieldType]);
-  $filterBy = computed(() => this.$filter().filterBy)
-
-  onEnter(filter: FilterInfo, event: any) {
-    event.preventDefault();
-    if(filter.filterValue != null && filter.filterType) {
-      this.addFilter(filter);
-      this.close.emit();
-    }
-  }
-
-  addFilter(filter: FilterInfo){
-    this.state.addFilter({ ...filter, filterBy: this.$filterBy() });
-  }
-}

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

@@ -1,102 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, computed, inject, input, signal } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { TableStore } from '../../../classes/table-store';
-import { FieldType } from '../../../interfaces/report-def';
-import { CurrencyPipe, DatePipe, KeyValue } from '@angular/common';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { FunctionPipe, SpaceCasePipe, StopPropagationDirective } from '../../../../utilities';
-
-@Component({
-  selector: 'tb-in-list-filter , [tb-in-list-filter]',
-  template: `
-  @for (item of $keyValues(); track item.key) {
-    <div>
-      <mat-checkbox [checked]="'includes' | func : $selectedKeys() : item.key" stop-propagation (change)='selectFilterChanged($event, item.value)' >
-        @switch ($metaData().fieldType)
-        {
-          @case (FieldType.Enum)
-          {
-            {{(item.key | spaceCase)}}
-          }
-          @case (FieldType.Date)
-          {
-            {{item.value | date: 'shortDate'}}
-          }
-          @case (FieldType.DateTime)
-          {
-            {{item.value | date: 'short'}}
-          }
-          @case (FieldType.Currency)
-          {
-            {{item.value | currency }}
-          }
-          @default
-          {
-            {{item.key}}
-          }
-        }
-      </mat-checkbox>
-    </div>
-  }
-
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [{
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: InListFilterComponent,
-    multi: true
-  }],
-  imports: [
-    MatCheckboxModule, StopPropagationDirective, SpaceCasePipe, FunctionPipe, DatePipe, CurrencyPipe
-  ]
-})
-export class InListFilterComponent implements ControlValueAccessor {
-  private ref = inject(ChangeDetectorRef);
-  private tableState = inject(TableStore);
-
-  value: (string | number)[] = [];
-  FieldType = FieldType;
-  writeValue(obj: string[]): void {
-    this.value = obj;
-
-    if(this.value) {
-      this.$selectedKeys.set(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;
-  }
-
-  $key = input.required<string>({ alias: 'key' });
-  $selectedKeys = signal<(string | number)[]>([]);
-  $metaData = computed(() => this.tableState.$getMetaData(this.$key())());
-  $keyValues = computed(():
-    KeyValue<string, any>[] => {
-    const metaData = this.$metaData();
-    if(metaData?.additional?.filterOptions?.filterableValues ) {
-      return metaData.additional.filterOptions.filterableValues.map(value => ({ key: value, value }));
-    } else if(metaData?.fieldType === FieldType.Enum ) {
-      return Object.entries(metaData.additional!.enumMap!).map(([key, value]) => ({ key: value, value: +key }));
-    }
-    return [];
-  });
-
-  selectFilterChanged($event, val: any) {
-    if($event.checked) {
-      this.$selectedKeys.update(keys => [...keys, val]);
-    } else {
-      this.$selectedKeys.update(keys => keys.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,60 +0,0 @@
-@if($columns(); as displayCols)
-{
-  <span matTooltip="Show/hide columns">
-    <button color="primary" 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 color="primary" mat-icon-button (click)="reset(displayCols)">
-          <mat-icon color="primary">done_all</mat-icon>
-        </button>
-      </span>
-
-      <span matTooltip="Hide all columns">
-        <button color="primary" mat-icon-button (click)="unset(displayCols)">
-          <mat-icon color="primary">cancel</mat-icon>
-        </button>
-      </span>
-    </button>
-
-    <div cdkDropList stop-propagation [cdkDropListLockAxis]="'y'" (cdkDropListDropped)="drop($event)">
-      @for (col of displayCols; track col.key)
-      {
-        <button stop-propagation mat-menu-item cdkDrag [class.isHidden]="!col.isVisible" [cdkDragData]="col">
-        <div style="display: flex; align-items: center;" (click)="col.isVisible = !col.isVisible; emit(displayCols)">
-          @if(col.isVisible)
-          {
-            <button color="primary" 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: var(tb-col-display-name);
-    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, 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 { 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,
-  imports: [
-    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,97 +0,0 @@
-<mat-table
-  #table
-  cdkDropList
-  cdkDropListLockAxis='x'
-  cdkDropListOrientation="horizontal"
-  class="table-drag-list"
-  [dataSource]="$dataSource()"
-  [trackBy]="$trackByFunction()"
-  [style]="$tableWidth()"
-  (cdkDropListDropped)="drop($event)"
->
-
-  <!-- select column -->
-  <ng-container matColumnDef="select">
-    @let selection = $selection();
-    <mat-header-cell *matHeaderCellDef  class="select-column">
-      <mat-checkbox [checked]="!!($masterToggleChecked())"
-                    [indeterminate]="$masterToggleIndeterminate()"
-                    [matTooltip]="$selectAllMessage()"
-                    (change)="$event ? masterToggle() : null" />
-    </mat-header-cell>
-
-    <mat-cell *matCellDef="let row" class="select-column">
-      <mat-checkbox
-        [checked]="selection.isSelected(row)"
-        (click)="$event.stopPropagation()"
-        (change)="$event ? selection.toggle(row) : null"/>
-    </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; let t" class="index-column">
-      {{ 1 + i + $offsetIndex() }}
-    </mat-cell>
-    <mat-footer-cell *matFooterCellDef class="index-column" />
-  </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'">
-        @if($hasSelectColumn())
-        {
-          @let contains = (allOfGroupSelected | func : row.uniqueName)();
-          <mat-checkbox [checked]="!!contains.containsAll"
-            [indeterminate]="!!contains.containsSome && !contains.containsAll"
-            [matTooltip]="toggleGroupMessage | func : contains.length : contains.containsAll"
-            (change)="$event ? toggleGroup(row.uniqueName, contains.containsAll) : null" />
-        }
-        <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 }" />
-      </div>
-    </mat-cell>
-  </ng-container>
-
-  <mat-row
-    *matRowDef="let row; columns: $keys(); let i = index"
-    [style.height]="$rowHeight()"
-    [style.min-height]="$rowHeight()"
-    [styler]="$rowStyles()"
-    [element]="row"
-    [conditionalClasses]="$rowClasses()"
-    (click)="rowClicked(row, $event)"
-  />
-
-  <!-- group row -->
-  <mat-row *matRowDef="let row; columns: ['groupHeader']; when: isGroupHeader"
-           style="background-color: unset;"
-           [style.height]="state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()" [style.min-height]="state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()"/>
-</mat-table>
-
-<mat-header-row *matHeaderRowDef="$keys(); sticky: state.$props().isSticky" [style.height]="$headerHeight()"
-  [style.min-height]="$headerHeight()" [style.top.px]="($offset()! * -1)"/>
-<mat-footer-row *matFooterRowDef="$keys(); sticky: $stickyFooter() " [style.height]="$footerHeight()"
-  [style.min-height]="$footerHeight()"
-  [style.bottom.px]="$stickyFooter() ? ($offset()) : undefined"/>