@one-paragon/angular-utilities 2.2.6 → 2.2.7

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

@@ -1,87 +0,0 @@
-import { ChangeDetectionStrategy, Component, computed, inject, output, viewChild } from '@angular/core';
-import { MatMenu, MatMenuModule } from '@angular/material/menu';
-import { resetable } from '../../classes/table-store';
-import { TableContainerComponent } from '../table-container/table-container.component';
-import { sortsAreSame } from '../../directives';
-import { MatButtonModule } from '@angular/material/button';
-import { isCustomFilter } from '../../classes/filter-info';
-
-@Component({
-  selector: 'lib-reset-menu',
-  imports: [MatMenuModule, MatButtonModule],
-  templateUrl: './reset-menu.component.html',
-  styleUrl: './reset-menu.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ResetMenuComponent {
-  menu = viewChild.required(MatMenu);
-  protected tableContainer = inject(TableContainerComponent);
-  state = this.tableContainer.state;
-  onStateReset$ = output<null>({ alias: 'onStateReset' });
-  protected resetState() {
-    this.tableContainer.$customFilterDirectives().forEach( cf => cf.reset());
-    this.tableContainer.$filterDirectives().forEach( cf => cf.reset() );
-    this.state.resetState();
-    this.onStateReset$.emit(null)
-  }
-
-  $filtersSet = computed(() => {
-    return Object.values(this.state.$filters())
-      .filter(f => (isCustomFilter(f) && f.active) || f.filterValue != undefined)
-      .length;
-  });
-  $sortSet = computed(() => {
-    const sorts = this.state.$selectSorted();
-    if(!sorts.length) return false;
-    const preSorts = this.state.$preSort();
-    if(!preSorts.length) return true;
-    return !sortsAreSame(preSorts, sorts);
-  });
-  $groupBySet = computed(() => this.state.$groupByKeys().length);
-  $hiddenSet = computed(() => this.state.$hiddenKeys().length);
-  $orderSet = computed(() => Object.keys(this.state.$userDefinedOrder()).length);
-  $widthsSet = computed(() => Object.keys(this.state.$getUserDefinedWidths()).length);
-  $rowHeightSet = this.state.$userDefinedRowHeight;
-  headerHeightSet = this.state.$userDefinedHeaderHeight;
-  pageSizeSet = computed(() => this.state.$userDefinedPageSize() && this.state.$userDefinedPageSize() !== this.state.selectSignal(s => s.pageSize)());
-  showAllSet = this.state.selectSignal(s => s.userDefined.showAll);
-  $set = computed(() => {
-    const arr: (typeof resetable[number])[] = [] as (typeof resetable[number])[];
-    if(this.$filtersSet()){
-      arr.push('Filters')
-    }
-    if(this.$sortSet()){
-      arr.push('Sorting')
-    }
-    if(this.$groupBySet()){
-      arr.push('Group By')
-    }
-    if(this.$hiddenSet()){
-      arr.push('Hidden Columns')
-    }
-    if(this.$orderSet()){
-      arr.push('Column Order')
-    }
-    if(this.$widthsSet()){
-      arr.push('Column Widths')
-    }
-    if(this.$rowHeightSet()){
-      arr.push('Row Height')
-    }
-    if(this.headerHeightSet()){
-      arr.push('Header Height')
-    }
-    if(this.pageSizeSet()){
-      arr.push('Page Size')
-    }
-    if(this.showAllSet()){
-      arr.push('Show All')
-    }
-    return arr;
-  })
-
-  resetable = resetable;
-  reset(s: string){
-    this.state.resetPart(s as any);
-  }
-}

package/src/table-builder/components/scroll-strategy.ts

@@ -1,139 +0,0 @@
-import {
-  CdkVirtualScrollViewport,
-  VirtualScrollStrategy,
-} from '@angular/cdk/scrolling';
-import { Subject } from 'rxjs';
-import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
-import { subscriber } from '../../rxjs';
-import { VirtualScrollContainer } from './table-container/virtual-scroll-container';
-import { effect, linkedSignal, signal, Signal, untracked } from '@angular/core';
-import { DataStore } from '../classes/data-store';
-
-export class TableVirtualScrollStrategy implements VirtualScrollStrategy {
-  constructor(scrollContainer: VirtualScrollContainer, dataStore: DataStore) {
-    this.$rowHeight = scrollContainer.computedRowHeight;
-    this.$headerHeight = scrollContainer.computedHeaderHeight;
-    this.viewport = scrollContainer.viewport;
-    this.dataStore = dataStore;
-    this.$dataLength = scrollContainer.$dataLength;
-  }
-  private dataStore: DataStore;
-  private readonly indexChange = new Subject<number>();
-  scrolledIndexChange = this.indexChange.pipe(distinctUntilChanged());
-  private viewport: Signal<CdkVirtualScrollViewport>;
-
-  private $dataLength: Signal<number>;
-  $dataLengthChange = linkedSignal<number, {curr: number, previous: number }>({
-    source: () => this.$dataLength(),
-    computation: (curr, previous) => ({ curr, previous: previous == undefined ? curr : previous.source })
-  });
-  $rowHeight: Signal<number>;
-  $rowHeightChange = linkedSignal<number, {curr: number, previous: number }>({
-    source: () => this.$rowHeight(),
-    computation: (curr, previous) => {
-      return ({ curr, previous: previous == undefined ? curr : previous.source })}
-  });
-
-  $headerHeight: Signal<number>;
-  $headerHeightChange = linkedSignal<number, {curr: number, previous: number }>({
-    source: () => this.$headerHeight(),
-    computation: (curr, previous) => ({ curr, previous: previous == undefined ? curr : previous.source })
-  });
-
-  contentScrolled$ = new Subject<number>();
-  sub = subscriber(this.contentScrolled$.pipe(
-    debounceTime(20),
-    distinctUntilChanged()
-  ), offset => {
-    this.updateContent('scroll')
-  })
-  onContentScrolled(): void {
-    this.contentScrolled$.next(this.viewport().measureScrollOffset());
-  }
-
-  #onDataLengthChange = effect(() => {
-    const dataLengthChange = this.$dataLengthChange();
-    untracked(() => {
-      if(dataLengthChange.curr === dataLengthChange.previous) return;
-      this.updateContent('data length')
-    });
-  })
-
-  #onHeaderChange = effect(() => {
-    const headerHeightChange = this.$headerHeightChange();
-    untracked(() => {
-      if(headerHeightChange.curr === headerHeightChange.previous) return;
-      this.updateContent('header height')
-    });
-  })
-
-  #onRowChange = effect(() => {
-    const rowHeightChange = this.$rowHeightChange();
-    untracked(() => {
-      if(rowHeightChange.curr === rowHeightChange.previous) return;
-      this.updateContent('row height')
-    })
-  });
-
-  $currentRange = signal({ start: 0, end: 0 })
-
-  private updateContent(trigger: ScrollStrategyTrigger): void {
-    const viewport = this.viewport && this.viewport()
-    if(!viewport || !this.$rowHeight) {
-      return;
-    }
-    const currentContentHeight = +viewport._totalContentHeight.replace('px', '');
-    const newContentHeight = this.$dataLength() * this.$rowHeight();
-    if(currentContentHeight !== newContentHeight){
-      viewport.setTotalContentSize(newContentHeight);
-      this.update(trigger, viewport, true)
-      return;
-    }
-    this.update(trigger, viewport)
-  }
-  update(trigger: ScrollStrategyTrigger, viewport: CdkVirtualScrollViewport, needsScroll = false){
-    if(!viewport.getViewportSize()) return;
-
-    const rowHeightChangeEvent = this.$rowHeightChange();
-    const rowHeight = rowHeightChangeEvent.curr;
-    const rowHeightAdjustment = trigger === 'row height' ? rowHeightChangeEvent.curr / rowHeightChangeEvent.previous : 1;
-
-    const amountOfRows = Math.ceil((viewport.getViewportSize() - this.$headerHeight()) / rowHeight);
-    const f = viewport.measureScrollOffset();
-    const offset = viewport.measureScrollOffset() * rowHeightAdjustment;
-
-    const buffer = 35 + Math.round((40 - rowHeight) / 10);
-    const skip = Math.round(offset / rowHeight);
-    const index = skip % 2 === 0 ? skip : skip - 1;
-    const start = Math.max(0, index - buffer);
-    const end = Math.min(this.$dataLength(), index + amountOfRows + buffer);
-
-    if(start > this.$dataLength()){
-      this.viewport().scrollToOffset(0)
-    }
-    else if(f !== offset){
-      if(offset < f) viewport.scrollToOffset(offset);
-      else setTimeout(() => {
-        viewport.scrollToOffset(offset)
-      }, 0);
-    }
-    if(this.$currentRange().start === start && this.$currentRange().end === end){
-      return;
-    }
-    this.$currentRange.set({ start, end });
-    viewport.setRenderedContentOffset(rowHeight * start);
-    this.dataStore.patchState({ virtualScrollOffset: offset });
-    viewport.setRenderedRange({ start, end });
-
-    this.indexChange.next(index);
-  }
-
-  attach(viewport: CdkVirtualScrollViewport): void {}
-  onDataLengthChanged(): void {}
-  detach(): void {}
-  onContentRendered(): void {}
-  onRenderedOffsetChanged(): void {}
-  scrollToIndex(index: number, behavior: ScrollBehavior): void {}
-}
-
-type ScrollStrategyTrigger = 'scroll' | 'data length' | 'header height' | 'row height';

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

@@ -1,57 +0,0 @@
-import { Injectable, effect, inject, untracked } from '@angular/core';
-import { Sort } from '@angular/material/sort';
-import { ComponentStore } from '@ngrx/component-store';
-import { TableStore } from '../../classes/table-store';
-import { FieldType } from '../../interfaces/report-def';
-
-@Injectable()
-export class SortMenuComponentStore extends ComponentStore<ComponentStoreState> {
-  private tableState = inject(TableStore);
-  setStoreStateEffect = effect(() => {
-    const metaData = this.tableState.$metaData();
-    if(!metaData) return;
-    this.tableState.$selectSorted();
-    untracked(() => this.setStateFromTableStore());
-  });
-
-  setStateFromTableStore = () => {
-    const metaData = this.tableState.$metaData();
-    const sorted = [...this.tableState.$selectSorted()].map(s => ({
-      ...s,
-      displayName: metaData[s.active]?.displayName
-    } as SortWithName));
-    const notSorted = this.tableState.$metaDataArray()
-      .filter(md => (md.fieldType !== FieldType.NotMapped || md.sortLogic?.sortBy) && !md.noSort && !sorted.some(s => s.active === md.key))
-      .map(meta => ({ active: meta.key, displayName: meta.displayName } as SortWithName));
-    this.setState({ sorted, notSorted })
-  }
-  constructor(){
-    super({ notSorted: [], sorted: [] })
-  }
-
-  setSorted = this.updater((state, sorted: SortWithName[]) => ({ ...state, sorted }));
-  setNotSorted = this.updater((state, notSorted: SortWithName[]) => ({ ...state, notSorted }));
-
-  $sorted = this.selectSignal(state => state.sorted);
-  $notSorted = this.selectSignal(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 = () => {
-    this.setStateFromTableStore();
-  }
-}
-
-export interface ComponentStoreState {
-  sorted : SortWithName[];
-  notSorted: SortWithName[];
-}
-
-export interface SortWithName extends Sort{
-  displayName : string;
-}

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

@@ -1,115 +0,0 @@
-@let dirty = $dirty();
-@let sorted = $sorted();
-@let notSorted = $notSorted();
-
-<!-- Menu Trigger -->
-<span matTooltip="Sort">
-  <button color="primary" mat-icon-button [matMenuTriggerFor]="menu">
-    <mat-icon color="primary">swap_vert</mat-icon>
-  </button>
-</span>
-
-<!-- Menu -->
-<mat-menu #menu="matMenu"  class="my-mat-menu" (closed)="reset()">
-  <div mat-menu-item class="menu-button">
-    <div class="close-button-wrapper">
-      <span matTooltip="Close">
-        <mat-icon>close</mat-icon>
-      </span>
-      @if(dirty)
-      {
-        <span matTooltip="Undo" stop-propagation (click)="reset()">
-          <mat-icon>undo</mat-icon>
-        </span>
-      }
-        
-    </div>
-  </div>
-
-  <!-- Apply Button -->
-  <div class="apply-button-wrapper">
-    <button mat-button color="primary" stop-propagation
-      [class.apply-border]="dirty" [disabled]="!dirty"
-      (click)="apply()">
-        Apply @if (dirty) { Unsaved Changes }
-    </button>
-  </div>
-
-  <!-- Default Sorting Text -->
-  @if (!sorted.length)
-  {
-    <div class="tip" >
-      Sorting List
-    </div>
-  }
-
-  <!-- Sorted Menu List -->
-  <div #sortedGroup="cdkDropList"
-    class="list"
-    cdkDropList
-    [cdkDropListConnectedTo]="[notSortedGroup]"
-    [cdkDropListData]="sorted"
-    (cdkDropListDropped)="dropIntoSorted($event)">
-
-    <!-- Menu Item Wrapper -->
-    @for (sort of sorted; track sort.active)
-    {
-      <!-- Menu Item Headers -->
-      @if (sorted.length > 1)
-      {
-        <span class="description sort-header">{{$index === 0 ? 'First By' : 'Then By'}}</span>
-      }
-
-      <!-- Menu Item -->
-      <div mat-menu-item   cdkDrag class="menu-item">
-        <div class="sort-item">
-          <span class="sorted-name">
-            {{sort.displayName || (sort.active | spaceCase)}}
-            <span class="direction-text">{{sort.direction}}</span>
-          </span>
-
-          <!-- Sort Direction Buttons -->
-          <div class="up-down-buttons-wrapper">
-            <button  class="up-down-button up-button" stop-propagation
-            (click)="setDirection({active:sort.active,direction:SortDirection.asc,displayName:sort.displayName})">
-              <mat-icon class="up-down-icon" [class]="sort.direction !== SortDirection.asc ? 'light-arrow' : 'dark-arrow'">
-              arrow_upward
-              </mat-icon>
-            </button>
-
-            <button class="up-down-button" stop-propagation
-            (click)="setDirection({active:sort.active,direction:SortDirection.desc,displayName:sort.displayName})">
-              <mat-icon class="up-down-icon" [class]="sort.direction === SortDirection.asc ? 'light-arrow' : 'dark-arrow'">
-                arrow_downward
-              </mat-icon>
-            </button>
-          </div>
-        </div>
-      </div>
-    }
-
-  </div>
-
-  <!-- Default Not Sorted Text -->
-  @if(!notSorted.length)
-  {
-    <div class="tip" >
-      Not Sorted List
-    </div>
-  }
-
-  <!-- Not Sorted Menu List -->
-  <div #notSortedGroup="cdkDropList"
-    class="list"
-    cdkDropList
-    [cdkDropListConnectedTo]="[sortedGroup]"
-    [cdkDropListData]="notSorted"
-    (cdkDropListDropped)="dropIntoNotSorted($event)">
-    @for (sort of notSorted; track sort.active)
-    {
-      <div mat-menu-item class="menu-item" cdkDrag>
-        <span class="not-sorted-name">{{sort.displayName || (sort.active | spaceCase)}}</span>
-      </div>
-    }
-  </div>
-</mat-menu>

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

@@ -1,119 +0,0 @@
-.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);
-}
-
-.list{
-  padding: 5px 2px;
-  border-bottom: solid 1px #ccc;
-  color: rgba(0, 0, 0, 0.87);
-  background: white;
-}
-
-.light-arrow{
-  color: rgb(147 177 234 / 47%);
-}
-
-.dark-arrow{
-  color: #224e9c;
-}
-
-.up-down-button{
-  background-color: white;
-  border-radius: 30%;
-  border-color: aqua;
-  padding: 1px 1px 0;
-  border-width: .5px;
-  cursor: pointer;
-  height: 27px;
-}
-
-.mat-icon.up-down-icon{
-  margin-right: 0;
-  font-size: 20px;
-  font-weight: lighter;
-}
-
-.sort-item{
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.up-down-buttons-wrapper{
-  margin-left: 2rem;
-}
-
-.up-button{
-  margin-right: .3rem;
-}
-
-.mat-mdc-menu-item{
-  &.menu-item, &.menu-button{
-    min-height: initial;
-    padding: 0 3px;
-    line-height: 25px;
-    height: 30px;
-  }
-  &.menu-item{
-    cursor: move;
-  }
-}
-
-.sorted-name{
-  color: #224e9c;
-  font-size: 17px;
-  font-weight: 700;
-}
-
-.not-sorted-name{
-  color: rgb(147 177 234);
-  font-size: 17px;
-  font-weight: 700;
-  
-}
-
-.apply-border{
-  border: #224e9c solid .5px;
-}
-
-.apply-border:hover{
-  background-color: antiquewhite;
-}
-
-.apply-button-wrapper{
-  display: grid;
-  justify-content: center;
-
-}
-
-.sort-header{
-  font-size: 10px;
-  font-style: italic;
-}
-
-.tip{
-  padding: 0 3px;
-  color: lightgray;
-}
-
-.direction-text{
-  font-size: small;
-  font-weight: 400;
-}
-
-.close-button-wrapper{
-  display: flex;
-  flex-direction: row-reverse;
-}

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

@@ -1,88 +0,0 @@
-import { CdkDragDrop, DragDropModule, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
-import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
-import { TableStore } from '../../classes/table-store';
-import { SortDirection } from '../../interfaces/report-def';
-import { SortMenuComponentStore, SortWithName } from './sort-menu.component-store'
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MatMenuModule } from '@angular/material/menu';
-import { SpaceCasePipe, StopPropagationDirective } from '../../../utilities';
-
-@Component({
-  selector: 'tb-sort-menu',
-  templateUrl: './sort-menu.component.html',
-  styleUrls: ['./sort-menu.component.scss'],
-  providers: [SortMenuComponentStore],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    MatTooltipModule, MatButtonModule, MatIconModule, MatMenuModule, StopPropagationDirective, DragDropModule,
-    SpaceCasePipe
-  ]
-})
-export class SortMenuComponent {
-  SortDirection = SortDirection;
-  private tableState = inject(TableStore);
-  protected store = inject(SortMenuComponentStore);
-
-  $sorted = computed(() => [...this.store.$sorted()]);
-  $notSorted = computed(() => [...this.store.$notSorted()]);
-  $dirty = signal(false);
-
-  reset(){
-    this.$dirty.set(false);
-    this.store.reset();
-  }
-
-  dropIntoSorted(event: CdkDragDrop<SortWithName[]>) {
-    this.$dirty.set(true);
-    const sorted = [...event.container.data];
-    if(event.previousContainer === event.container) {
-      moveItemInArray(sorted, event.previousIndex, event.currentIndex);
-      this.store.setSorted(sorted);
-    } else {
-      const notSorted = [...event.previousContainer.data];
-      transferArrayItem(
-        notSorted,
-        sorted,
-        event.previousIndex,
-        event.currentIndex
-      );
-      sorted[event.currentIndex] = { ...sorted[event.currentIndex], direction: SortDirection.asc };
-      this.store.setSorted(sorted);
-      this.store.setNotSorted(notSorted);
-    }
-  }
-
-  dropIntoNotSorted(event: CdkDragDrop<SortWithName[]>){
-    if(event.previousContainer === event.container) {
-      return;
-    } else {
-      this.$dirty.set(true);
-      const sorted = [...event.previousContainer.data];
-      const notSorted = [...event.container.data];
-      transferArrayItem(
-        sorted,
-        notSorted,
-        event.previousIndex,
-        event.currentIndex
-      );
-      notSorted[event.currentIndex] = { ...notSorted[event.currentIndex] };
-
-      this.store.setNotSorted(notSorted);
-      this.store.setSorted(sorted);
-    }
-  }
-
-  apply = () => {
-    this.$dirty.set(false);
-    this.tableState.setAllSort(this.store.$sorted());
-  }
-
-  setDirection(sort:SortWithName){
-    this.$dirty.set(true);
-    this.store.setDirection(sort);
-  }
-}
-
-

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

@@ -1,81 +0,0 @@
-@let tableId = $tableId();
-@let tableSettings = state.$tableSettings();
-
-<ng-content select="[before]" />
-<ng-container multiSort>
-  <div class="tb-header-wrapper" [id]="headerId">
-    <div class="title">
-      @if ((!$collapsedHeader()) || tableSettings.showTitleWhenHeaderCollapsed)
-      {
-        <ng-content select=".tb-header-title"/>
-      }
-    </div>
-    @if(state.$groupByKeys().length)
-    {
-      <group-by-list />
-    }
-    <div class="flx-row-end">
-      <lib-filter-list />
-      @if (!tableSettings.hideHeader)
-      {
-        @if (!$collapsedHeader())
-        {
-          <ng-container *ngTemplateOutlet="headerMenu"/>
-          <button mat-icon-button color='primary' [matMenuTriggerFor]="l.menu()">
-            <mat-icon>more_vert</mat-icon>
-          </button>
-
-          <lib-table-header-menu #l/>
-
-        }
-        @else
-        {
-          <mat-icon color="primary" class="flat-menu-button pointer" [matMenuTriggerFor]="mainMenu">more_horiz</mat-icon>
-          <mat-menu #mainMenu='matMenu'>
-            <div class="flex-column">
-              <ng-container *ngTemplateOutlet="headerMenu; injector menuInjector"/>
-            </div>
-            <lib-table-header-menu />
-          </mat-menu>
-        }
-        <mat-icon class="collapse-icon header" [matTooltip]="$collapsedHeader() ? 'expand' : 'collapse'"
-          (click)="state.toggleCollapseHeader()">
-          {{$collapsedHeader() ? 'expand_less' : 'expand_more'}}
-        </mat-icon>
-      }
-
-    </div>
-  </div>
-
-  @if($useVirtual())
-  {
-    <tb-virtual-scroll-container class="scrollable">
-      <tb-generic-table [rows]="$customRows()" [data]="$data()!" [displayDataLength]="$displayDataLength()"
-        [columnInfos]='$myColumns()' [trackBy]="$trackBy()" [dataSource]="dataSource" (selection)='selection$.emit($event)' />
-    </tb-virtual-scroll-container>
-  }
-  @else
-  {
-    <tb-generic-table [rows]="$customRows()" [data]="$data()!" [displayDataLength]="$displayDataLength()"
-      [columnInfos]='$myColumns()' [trackBy]="$trackBy()" [dataSource]="dataSource"  (selection)='selection$.emit($event)' />
-  }
-  @if(tableSettings.usePaginator)
-  {
-    <div class="paginator">
-      <tb-paginator #tbPaginator />
-
-      <mat-icon class="collapse-icon footer" [matTooltip]="$collapsedFooter() ? 'expand' : 'collapse'"
-        (click)="state.toggleCollapseFooter()">
-        {{$collapsedFooter() ? 'expand_more' : 'expand_less'}}
-      </mat-icon>
-    </div>
-  }
-
-  <ng-template #headerMenu>
-    @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}
-    @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}
-    @if (!tableSettings.hideSort) {<tb-sort-menu/>}
-    @if (!!tableId) {<tb-profiles-menu [tableId]="tableId"/>}
-  </ng-template>
-
-</ng-container>