@one-paragon/angular-utilities 1.2.16 → 1.2.18

package/src/table-builder/components/table-container/virtual-scroll-container.ts

@@ -0,0 +1,156 @@
+import { ChangeDetectionStrategy, Component, ElementRef, OnDestroy, effect, forwardRef, untracked, viewChild, inject, computed, contentChild } from '@angular/core';
+import {
+  CdkVirtualScrollViewport,
+  ScrollingModule,
+  VIRTUAL_SCROLL_STRATEGY,
+} from '@angular/cdk/scrolling';
+import { switchMap } from 'rxjs';
+import { notNull, subscriber } from '../../../rxjs';
+import { TableStore } from '../../classes/table-store';
+import { TableVirtualScrollStrategy } from '../scroll-strategy';
+import { VirtualScrollOptions } from '../../classes/table-builder-general-settings';
+import { DataStore } from '../../classes/data-store';
+import { toObservable, toSignal } from '@angular/core/rxjs-interop';
+import { GenericTableComponent } from '../generic-table/generic-table.component';
+
+@Component({
+  selector: 'tb-virtual-scroll-container',
+  template: `
+    <cdk-virtual-scroll-viewport>
+      <ng-content/>
+    </cdk-virtual-scroll-viewport>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [ScrollingModule],
+  viewProviders: [
+    {
+      provide: VIRTUAL_SCROLL_STRATEGY,
+      useFactory: (c: VirtualScrollContainer) => c.scrollStrategy,
+      deps: [forwardRef(() => VirtualScrollContainer)],
+    },
+  ],
+})
+export class VirtualScrollContainer implements  OnDestroy {
+  private state = inject(TableStore);
+  private dataStore = inject(DataStore);
+
+  viewport = viewChild(CdkVirtualScrollViewport);
+  private genericTable = contentChild(GenericTableComponent);
+
+  defaultOptions = new VirtualScrollOptions();
+  scrollStrategy = new TableVirtualScrollStrategy(
+    this.computedRowHeight(),
+    this.computedHeaderHeight()
+    );
+
+  $usePaginator = this.state.selectSignal(s => s.notPersistedTableSettings.usePaginator);
+  $pageSize = this.state.$pageSize;
+  $currentPage = this.state.$currentPage;
+  $showAll = this.state.selectSignal(s => s.showAll);
+  $stateDataLength = this.dataStore.selectSignal(s => s.dataLen);
+  $dataLength  = computed(() => {
+    const paginated = this.$usePaginator() && !this.$showAll();
+    const pageSize = this.$pageSize();
+    const pageNumber = this.$currentPage();
+    const dataLen = this.$stateDataLength();
+    if(paginated) return Math.min(dataLen - (pageNumber * pageSize), pageSize);
+    return dataLen;
+  });
+  constructor() {
+    addEventListener('resize', this.resizeHandler);
+  }
+  setViewportEffect = effect(() => {
+    const viewport = this.viewport();
+    untracked(() => {
+      if(!!viewport){
+        this.setSize(this.viewport()!.elementRef);
+      };
+    })
+  })
+
+  subscriber = subscriber();
+
+  onRenderedRangeEffect = effect(() => {
+    const renderedRange = this.$renderedRange();
+    if(!renderedRange) return;
+    untracked(() => {
+      this.dataStore.patchState({
+        virtualEnds: {
+          start: renderedRange.start,
+          end: renderedRange.end + 25,
+        }});
+      this.setSize(this.viewport()!.elementRef);
+    })
+  })
+
+  onDataLengthEffect = effect(() => {
+    const dataLength = this.$dataLength();
+    untracked(() => {
+      this.scrollStrategy.setDataLength(dataLength);
+    })
+  })
+
+  onOffsetEffect = effect(() => {
+    const offset = this.$offset();
+    untracked(() => {
+      this.dataStore.patchState({ virtualScrollOffset: offset });
+    })
+  })
+  viewPort$ = toObservable(this.viewport).pipe(notNull());
+  $scrolledIndexChange = toSignal(this.viewPort$.pipe(switchMap(v => v.scrolledIndexChange)));
+  $renderedRange = toSignal(this.viewPort$.pipe(switchMap(v => v.renderedRangeStream)));
+
+  $offset = computed(() => {
+    const viewport = this.viewport();
+    const scrolledIndexChange = this.$scrolledIndexChange();
+    if(!scrolledIndexChange || !viewport) return 0;
+    return viewport.getOffsetToRenderedContentStart() ?? 0;
+  })
+
+  ngOnDestroy(): void {
+    removeEventListener('resize', this.resizeHandler);
+  }
+
+  setSize(el: ElementRef<HTMLElement>) {
+    const vsViewport = el.nativeElement;
+    const virtualScrollOptions = this.state.tableSettings().useVirtualScroll! as VirtualScrollOptions;
+    const rowHeight = this.computedRowHeight();
+    let amountOfVisibleItems = virtualScrollOptions?.amountOfVisibleItems || this.defaultOptions.amountOfVisibleItems;
+    virtualScrollOptions?.amountOfVisibleItems || this.defaultOptions.amountOfVisibleItems;
+    amountOfVisibleItems = Math.min(amountOfVisibleItems, this.$dataLength());
+    let height = (rowHeight * amountOfVisibleItems);
+
+    height += parseFloat(this.genericTable()?.$footerHeight()?.replace('px', '') || '0');
+    if(!this.state.tableSettings().hideHeader){
+      const headerHeight = this.computedHeaderHeight();
+      height += headerHeight;
+    }
+    if(virtualScrollOptions?.maxViewPortHeight && virtualScrollOptions.maxViewPortHeight < height) height = virtualScrollOptions.maxViewPortHeight;
+    vsViewport.setAttribute(
+      'style',
+      `height: ${height}px !important;`,
+    );
+    this.viewport()?.checkViewportSize();
+    const virtualScrollOffset = this.viewport()?.getOffsetToRenderedContentStart() ?? 0
+    this.dataStore.patchState({ virtualScrollOffset });
+  }
+
+  resizeHandler = () => {
+    if (this.viewport()) {
+      this.setSize(this.viewport()!.elementRef);
+    }
+  };
+
+  computedRowHeight(){
+    const virtualScrollOptions = this.state.tableSettings().useVirtualScroll! as VirtualScrollOptions;
+    const rowHeight = virtualScrollOptions?.rowHeight|| (typeof this.state.tableSettings().rowHeight === 'number' && this.state.tableSettings().rowHeight as number) || this.defaultOptions.rowHeight;
+    return rowHeight;
+  }
+
+  computedHeaderHeight(){
+    const virtualScrollOptions = this.state.tableSettings().useVirtualScroll! as VirtualScrollOptions;
+    const headerHeight = virtualScrollOptions?.headerHeight|| (typeof  this.state.tableSettings().headerHeight === 'number' && this.state.tableSettings().headerHeight as number) || this.defaultOptions.headerHeight;
+    return headerHeight;
+  }
+}

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

@@ -0,0 +1,31 @@
+<div class="d-w" *ngrxLet="currentFilters$ as currentFilters" >
+
+  @if (currentFilters.length) {
+    <button class="cancel-button" mat-icon-button (click)="clearAll()" matTooltip="Close all Filters Cards">
+      <mat-icon class="cancel-button" color="primary">close</mat-icon>
+    </button>
+    <div class="float">
+      @for (filter of currentFilters; track filter.key) {
+        <div class="filter">
+          <tb-filter [filter]="filter" (close)="deleteByIndex($index)" />
+        </div>
+      }
+    </div>
+  }
+
+  <mat-chip-set>
+    @for (filter of $filters(); track filter.key) {
+      <mat-chip (dblclick)="addFilter(filter)"  (removed)="tableState.removeFilter(filter.filterId!)">
+        {{ filter.key | keyDisplay | async  }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType  | async }}
+        <mat-icon matChipRemove>cancel</mat-icon>
+      </mat-chip>
+    }
+    @if ($filters().length > 1) {
+      <mat-chip  (removed)="tableState.clearFilters()">
+        Clear All
+        <mat-icon matChipRemove>cancel</mat-icon>
+      </mat-chip>
+    }
+  </mat-chip-set>
+
+</div>

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

@@ -0,0 +1,46 @@
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
+import { TableStore } from '../../../classes/table-store';
+import { FilterInfo, isFilterInfo } from '../../../classes/filter-info';
+import { WrapperFilterStore } from '../table-wrapper-filter-store';
+import { LetDirective } from '@ngrx/component';
+import { AsyncPipe } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatIconModule } from '@angular/material/icon';
+import { FilterComponent } from '../../filter/filter.component';
+import { MatChipsModule } from '@angular/material/chips';
+import { KeyDisplayPipe } from '../../../pipes/key-display';
+import { FormatFilterTypePipe } from '../../../pipes/format-filter-type.pipe';
+import { FormatFilterValuePipe } from '../../../pipes/format-filter-value.pipe';
+
+@Component({
+  selector: 'lib-filter-list',
+  templateUrl: './filter-list.component.html',
+  styleUrls: ['../gen-filter-displayer/gen-filter-displayer.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    LetDirective, MatButtonModule, MatTooltipModule, MatIconModule, FilterComponent,
+    MatChipsModule, AsyncPipe, KeyDisplayPipe, FormatFilterTypePipe, FormatFilterValuePipe
+  ]
+})
+export class FilterChipsComponent {
+
+  tableState = inject(TableStore);
+  filterStore = inject(WrapperFilterStore);
+
+  $filters = computed(() => Object.values(this.tableState.$filters()).filter(f => isFilterInfo(f) && !f._isExternallyManaged) as FilterInfo[])
+  deleteByIndex(index: number) {
+    this.filterStore.deleteByIndex(index);
+  }
+
+  addFilter(filter:FilterInfo<any>){
+    this.filterStore.addFilter(filter);
+  }
+
+  clearAll() {
+      this.filterStore.clearAll();
+  }
+
+  currentFilters$ = this.filterStore.currentFilters$;
+}

package/src/table-builder/components/table-container-filter/gen-filter-displayer/gen-filter-displayer.component.css

@@ -0,0 +1,42 @@
+.filter {
+    margin: 15px;
+    display: inline-block;
+}
+.filter-button {
+    color: cornflowerblue;
+    font-size: 22px;
+    font-weight: 700;
+}
+
+.cancel-button  {
+  margin-right: 30px;
+  font-weight: 700;
+}
+.filter-wrapper{
+  margin-top: 1em;
+  margin-bottom: 1em;
+  float: right;
+}
+.menu {
+    margin-bottom: 10px;
+    width: 109.1%;
+}
+
+.filter-labels {
+    color: cornflowerblue;
+    font-size: 17px;
+    font-weight: 600;
+}
+.float{
+  position: absolute;
+  width: fit-content;
+  z-index: 101;
+  top: 10px;
+  right: 180px;
+  max-width: 90vw;
+}
+.d-w{
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}

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

@@ -0,0 +1,10 @@
+<button stop-propagation class="filter-button" mat-icon-button [matMenuTriggerFor]="menu" [matTooltip]="'Add Filter'">
+  <mat-icon class="filter-icon" color="primary">filter_list</mat-icon>
+</button>
+<mat-menu #menu="matMenu">
+  @for (md of $filterCols(); track md.key) {
+    <button (click)="addFilter(md)" mat-menu-item>
+      <span class="filter-labels">{{md.displayName || (md.key | spaceCase)}}</span>
+    </button>
+  }
+</mat-menu>

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

@@ -0,0 +1,85 @@
+import { firstValueFrom, of } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { TestBed, ComponentFixture, ComponentFixtureAutoDetect, tick, fakeAsync, flush } from '@angular/core/testing';
+import { GenFilterDisplayerComponent } from './gen-filter-displayer.component';
+import { SpaceCasePipe } from '../../../../utilities/pipes/space-case.pipes';
+import { FilterComponent } from '../../filter/filter.component';
+import { CommonModule } 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 { DateFilterComponent } from '../../date-filter/date-filter.component';
+import { TableBuilderModule } from '../../../table-builder.module';
+import { StoreModule } from '@ngrx/store';
+import { EffectsModule } from '@ngrx/effects';
+import { TableStore } from '../../../classes/table-store';
+import { WrapperFilterStore } from '../table-wrapper-filter-store';
+
+
+function getMetaData() {
+  return of([
+    {
+      key: 'name',
+      displayName: 'first name',
+      fieldType: FieldType.String,
+      additional: {},
+      order: 1
+    },
+    {
+      key: 'last',
+      displayName: 'last name',
+      fieldType: FieldType.String,
+      additional: {},
+      order: 2
+    }
+  ]);
+}
+
+describe('generic filter displayer', () => {
+  let fixture: ComponentFixture<GenFilterDisplayerComponent>;
+  let component: GenFilterDisplayerComponent;
+
+  const clickFilter = (idx: number) => {
+    const btn = fixture.debugElement.query(By.css('.filter-button')).nativeElement;
+
+    btn.click();
+    const menu = fixture.debugElement.queryAll(By.css('.mat-menu-item'));
+    menu[idx].nativeElement.click();
+  };
+  beforeEach(() => {
+
+    TestBed.configureTestingModule({
+      declarations: [
+        GenFilterDisplayerComponent,
+        SpaceCasePipe,
+        FilterComponent,
+        DateFilterComponent,
+      ],
+      providers: [TableStore, WrapperFilterStore,
+      { provide: ComponentFixtureAutoDetect, useValue: true }
+      ],
+      imports: [
+        NoopAnimationsModule,
+        CommonModule,
+        FormsModule,
+        TableBuilderModule.forRoot({ defaultTableSettings: { } }),
+        StoreModule.forRoot({}),
+        EffectsModule.forRoot([])]
+    })
+      .compileComponents();
+    fixture = TestBed.createComponent(GenFilterDisplayerComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should get the generic filter displayer component', () => {
+    expect(component).toBeDefined();
+  });
+
+  it('should be able to create a filter',  async () => {
+    clickFilter(0);
+    const filter = await firstValueFrom(fixture.componentInstance.filterStore.state$.pipe(map(x => x.filterInfo)));
+    expect(filter.length).toBe(1);
+  });
+
+});

package/src/table-builder/components/table-container-filter/gen-filter-displayer/gen-filter-displayer.component.ts

@@ -0,0 +1,33 @@
+import { Component, ChangeDetectionStrategy, inject, computed } from '@angular/core';
+import { MetaData, FieldType } from '../../../interfaces/report-def';
+import { TableStore } from '../../../classes/table-store';
+import { WrapperFilterStore } from '../table-wrapper-filter-store';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { SpaceCasePipe, StopPropagationDirective } from '../../../../utilities';
+import { MatIconModule } from '@angular/material/icon';
+
+@Component({
+    selector: 'tb-filter-displayer',
+    templateUrl: './gen-filter-displayer.component.html',
+    styleUrls: ['./gen-filter-displayer.component.css'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+      MatButtonModule, MatMenuModule, MatTooltipModule, StopPropagationDirective, MatIconModule,
+      SpaceCasePipe
+    ]
+})
+export class GenFilterDisplayerComponent {
+  protected tableState = inject(TableStore);
+  protected filterStore = inject(WrapperFilterStore);
+  $filterCols = computed(() => {
+    const mds = this.tableState.$metaDataArray();
+    return mds.filter(m => m.fieldType !== FieldType.Hidden && m.fieldType !== FieldType.NotMapped && !m.noFilter)
+  });
+
+    addFilter(metaData: MetaData) {
+      this.filterStore.addFilter({key: metaData.key, fieldType: metaData.fieldType});
+    }
+}

package/src/table-builder/components/table-container-filter/table-wrapper-filter-store.ts

@@ -0,0 +1,23 @@
+import { Injectable } from "@angular/core";
+import { ComponentStore } from "@ngrx/component-store";
+import { map } from "rxjs/operators";
+import { PartialFilter } from "../../classes/filter-info";
+@Injectable()
+export class WrapperFilterStore  extends ComponentStore<{filterInfo:PartialFilter[]}>{
+  constructor(){
+    super({filterInfo:[]});
+  }
+
+  clearAll = this.updater(()=>({filterInfo:[]}));
+  deleteByIndex = this.updater((state,index:number)=>{
+    const arr = [...state.filterInfo];
+    arr.splice(index, 1);
+    return {filterInfo:arr};
+  });
+
+  currentFilters$ = this.state$.pipe(map(state => state.filterInfo));
+
+  addFilter = this.updater((state,filter:PartialFilter)=>{
+    return ({...state,filterInfo:[...state.filterInfo,filter]});
+  })
+}

package/src/table-builder/directives/custom-cell-directive.ts

@@ -0,0 +1,58 @@
+import { Directive, TemplateRef, Input, inject, OnInit } from '@angular/core';
+import { CdkColumnDef } from '@angular/cdk/table';
+import { SortDef, MetaData, FieldType } from '../interfaces/report-def';
+import { TableBuilder } from '../classes/table-builder';
+import { ReplaySubject } from 'rxjs';
+
+interface CustomCellContext<T> {
+  $implicit: T,
+  element: T,
+}
+// here is how to use it
+// <generic-table [report]="report">
+//     <p *customCell="'column1'; let element = element" [class.makeMeRed]="element?.port">If Port, i will be red</p>
+//     <p *customCell="'column2'">I am custom cell two </p>
+// </generic-table>
+@Directive({
+    selector: '[customCell]',
+    standalone: true
+})
+export class CustomCellDirective<T = any> implements OnInit {
+    private templateRef = inject<TemplateRef<any>>(TemplateRef, { optional: true });
+    public columnDef = inject(CdkColumnDef, { optional: true });
+    @Input() customCell!: string;
+    @Input() displayName?: string;
+    @Input() preSort?: SortDef;
+    @Input() TemplateRef!: TemplateRef<any>;
+    @Input() customCellOrder?: number;
+    @Input() customCellWidth?: string;
+    @Input() customCellTableRef?: TableBuilder<T>;
+    /**
+     * true if column not mapped to a property in the data source. Default is false.
+     */
+    @Input() customCellNotMapped = false;
+    constructor() {
+      if(this.templateRef !== null)
+        this.TemplateRef = this.templateRef;
+     }
+     ngOnInit() {
+      this.$metaData.next(this.getMetaData())
+    }
+    $metaData = new ReplaySubject<MetaData>();
+    getMetaData = (): MetaData => {
+      return {
+        key: this.customCell,
+        displayName: this.displayName,
+        preSort: this.preSort,
+        fieldType: this.customCellNotMapped ? FieldType.NotMapped : FieldType.Unknown,
+        order: this.customCellOrder,
+        width: this.customCellWidth,
+        customCell: true,
+      };
+    }
+    
+
+    static ngTemplateContextGuard<T>(dir: CustomCellDirective<T>, ctx: any): ctx is CustomCellContext<T> {
+      return true;
+    }
+}

package/{table-builder/directives/index.d.ts → src/table-builder/directives/index.ts}

@@ -1,5 +1,6 @@
-export * from './custom-cell-directive';
-export * from './multi-sort.directive';
-export * from './resize-column.directive';
-export * from './table-wrapper.directive';
-export * from './tb-filter.directive';
+export * from './custom-cell-directive';
+export * from './multi-sort.directive';
+export * from './resize-column.directive';
+export * from './table-wrapper.directive';
+export * from './tb-filter.directive';
+

package/src/table-builder/directives/multi-sort.directive.spec.ts

@@ -0,0 +1,124 @@
+import { MultiSortDirective } from './multi-sort.directive';
+import { Sort, MatSortable } from '@angular/material/sort';
+import { FieldType } from '../interfaces/report-def';
+import { TableBuilderConfigToken } from '../classes/TableBuilderConfig';
+import { DatePipe } from '@angular/common';
+import { TestBed } from '@angular/core/testing';
+import { StoreModule } from '@ngrx/store';
+import { storageStateReducer } from '../ngrx/reducer';
+import { TableStore } from '../classes/table-store';
+
+describe('MultiSortDirective', () => {
+
+    let directive: MultiSortDirective;
+    let rules: Sort[];
+
+    const data = [
+      {
+        name: 'Joe',
+        age: 10,
+        balance: 25
+      },
+      {
+        name: 'Jane',
+        age: 20,
+        balance: 35
+      }
+    ];
+    const metaData =  [
+      {
+        key: 'name',
+        fieldType: FieldType.String,
+        additional: {},
+        order : 1
+      },
+      {
+        key: 'age',
+        fieldType: FieldType.Number,
+        additional: {},
+        order : 2
+      },
+      {
+        key: 'balance',
+        fieldType: FieldType.Number,
+        additional: {},
+        order : 3
+      }
+    ];
+
+    const initialState = {fullTableState: {
+      'test-id': {
+        metaData,
+        hiddenKeys: [],
+        pageSize: 10,
+        initialized : true ,
+        filters: [],
+        sorted : [],
+      }
+    }};
+
+    beforeEach(() => {
+      TestBed.resetTestingModule ();
+      rules = [];
+      TestBed.configureTestingModule({
+        declarations: [],
+        providers: [
+         { provide : TableBuilderConfigToken , useValue: {defaultTableState: { }}},
+         DatePipe,
+         TableStore
+        ],
+        imports: [
+          StoreModule.forRoot({'fullTableState': storageStateReducer}),
+        ],
+        teardown: {destroyAfterEach: true}
+      })
+      .compileComponents();
+
+      const store = TestBed.inject(TableStore);
+     // stateManager.upda ..tableId = 'test-id';
+     // stateManager.initializeState();
+      directive = new MultiSortDirective(store);
+
+        rules = [
+            { active: 'a', direction: 'asc' },
+            { active: 'b', direction: 'asc' },
+            { active: 'c', direction: 'asc' },
+        ];
+
+        [...rules].reverse().forEach( rule =>  store.setSort( {key:rule.active, direction: rule.direction} ));
+        directive.ngOnInit();
+    });
+
+    describe('Initializing Rules',  () => {
+
+        it('should inititialize the rules', () => {
+            expect(directive.rules).toEqual(rules);
+        });
+    });
+
+    describe('Updating the rules', () => {
+        it('should add new rule to begining of rules array', () => {
+            const originalLength = directive.rules.length;
+            const sort: MatSortable = { id: 'd', start: 'asc', disableClear: false };
+            directive.sort(sort);
+            expect(directive.rules.length).toBe(originalLength + 1, 'updated rules length should be one larger than original');
+            expect(directive.rules[0].active).toBe(sort.id);
+        });
+
+        it('should remove old rule for the column of new rule and replace it with new rule', () => {
+            const originalLength = directive.rules.length;
+            const sort: MatSortable = { id: 'a', start: 'asc', disableClear: false };
+            directive.sort(sort);
+            expect(directive.rules.length).toBe(originalLength, 'updated rules length should be same as original');
+            expect(directive.rules[0].direction).toBe('desc');
+        });
+
+        it('should remove old rule without replacing it if new rule for that column has no direction', () => {
+            const originalLength = directive.rules.length;
+            const sort: MatSortable = { id: 'a', start: 'asc', disableClear: false };
+            directive.sort({...sort});
+            directive.sort({...sort});
+            expect(directive.rules.length).toBe(originalLength - 1, 'updated rules length should be one smaller than original');
+        });
+    });
+});

package/src/table-builder/directives/multi-sort.directive.ts

@@ -0,0 +1,51 @@
+import { Directive, OnInit, OnDestroy, inject } from '@angular/core';
+import { MatSort, Sort, SortDirection } from '@angular/material/sort';
+import { distinctUntilChanged, distinctUntilKeyChanged, map, tap } from 'rxjs/operators';
+import { TableStore } from '../classes/table-store';
+
+@Directive({
+  selector: '[multiSort]',
+  exportAs: 'multiSort',
+  inputs: ['disabled: matSortDisabled'],
+  providers: [
+    { provide: MatSort, useExisting: MultiSortDirective }
+  ],
+  standalone: true
+})
+export class MultiSortDirective extends MatSort implements OnInit, OnDestroy {
+  private state = inject(TableStore);
+
+
+  constructor() {
+    super();
+    this.state.setSort(this.sortChange.pipe(
+      distinctUntilChanged((f,s) => f.active === s.active && f.direction === s.direction),
+       map(sc => ({ key: sc.active, direction: sc.direction }))));
+    this.state.on(
+      this.state.sort$,
+      (rules) => {
+        const topRule = { active: rules[0]?.active || '', direction: rules[0]?.direction || '' as SortDirection};
+        const topActiveChanged = topRule.active !== this.active || '';
+        const topDirectionChanged = topRule.direction !== this.direction || '';
+        if(topActiveChanged || topDirectionChanged){
+          this.active = topRule.active;
+          this.direction = topRule.direction;
+          this.sortChange.emit(topRule);
+        }
+      }
+    );
+  }
+
+}
+
+export function isDifferent(a: Sort[], b: Sort[]) {
+  if (a.length !== b.length) {
+    return true;
+  }
+  for (let i = 0; i < a.length; i++) {
+    if (a[i].active !== b[i].active || a[i].direction !== b[i].direction) {
+      return true;
+    } 
+  }
+  return false;
+}