@one-paragon/angular-utilities 2.2.4 → 2.2.6

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

@@ -0,0 +1,87 @@
+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

@@ -0,0 +1,139 @@
+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

@@ -0,0 +1,57 @@
+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

@@ -0,0 +1,115 @@
+@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

@@ -0,0 +1,119 @@
+.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

@@ -0,0 +1,88 @@
+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

@@ -0,0 +1,81 @@
+@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>