@one-paragon/angular-utilities 2.8.2 → 2.8.4

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

@@ -0,0 +1,47 @@
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
+import { TableStore } from '../../../classes/table-store';
+import { CustomFilter, FilterInfo, isCustomFilter, isFilterInfo } from '../../../classes/filter-info';
+import { WrapperFilterStore } from '../table-wrapper-filter-store';
+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,
+  imports: [
+    MatButtonModule, MatTooltipModule, MatIconModule, FilterComponent,
+    MatChipsModule, KeyDisplayPipe, FormatFilterTypePipe, FormatFilterValuePipe
+  ]
+})
+export class FilterChipsComponent {
+
+  tableState = inject(TableStore);
+  filterStore = inject(WrapperFilterStore);
+
+  $filters = computed(() =>
+    this.tableState.$filtersArray().filter(f => isFilterInfo(f) && !f._isExternallyManaged) as FilterInfo[]);
+  $certainCustomFilters = computed(() =>
+    this.tableState.$filtersArray().filter(f => isCustomFilter(f) && f.chipLabel) as CustomFilter[]);
+
+  deleteByIndex(index: number) {
+    this.filterStore.deleteByIndex(index);
+  }
+
+  addFilter(filter:FilterInfo<any>){
+    this.filterStore.addFilter(filter);
+  }
+
+  clearAll() {
+    this.filterStore.clearAll();
+  }
+
+  $currentFilters = this.filterStore.$filters;
+}

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

@@ -0,0 +1,40 @@
+.filter {
+    margin: 15px;
+    display: inline-block;
+}
+.filter-button {
+    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 {
+    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,11 @@
+<button color="primary" 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 mat-menu-item (click)="addFilter(md)">
+      <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/meta-data';
+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,35 @@
+import { Component, ChangeDetectionStrategy, inject, computed } from '@angular/core';
+import { MetaData, FieldType } from '../../../interfaces/meta-data';
+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,
+  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.filterLogic?.filterBy) && !m.noFilter);
+  });
+
+  addFilter(metaData: MetaData) {
+    this.filterStore.addFilter({
+      key: metaData.key,
+      fieldType: metaData.filterLogic?.filterType || metaData.fieldType,
+    });
+  }
+}

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

@@ -0,0 +1,13 @@
+import { Injectable, signal } from "@angular/core";
+import { PartialFilter } from "../../classes/filter-info";
+@Injectable()
+export class WrapperFilterStore {
+  $filters = signal<PartialFilter[]>([]);
+
+  clearAll = () => this.$filters.set([]);
+  deleteByIndex = (index: number) => this.$filters.update(filters => filters.toSpliced(index, 1))
+
+  addFilter = (filter: PartialFilter) => {
+    this.$filters.update(filters => [...filters, filter]);
+  }
+}

package/src/table-builder/components/table-header-menu/table-header-menu.component.css

@@ -0,0 +1,21 @@
+.input {
+  appearance: none;
+  outline: none;
+  background: none;
+  box-shadow: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  border: 1px solid black;
+  border-radius: 4px;
+  width: 50px;
+  padding-left: 4px;
+  &::placeholder{
+    font-size: 12px;
+  }
+}
+.height-input-wrapper{
+  display: flex;
+  gap: 4px;
+}

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

@@ -0,0 +1,48 @@
+<span [matTooltip]="!r.$set().length ? 'Nothing To Reset' : ''">
+  <button #d="matMenuItem" mat-menu-item [matMenuTriggerFor]="r.menu()" [disabled]="!r.$set().length">
+    <mat-icon color="primary">autorenew</mat-icon>
+    <span>Reset</span>
+  </button>
+</span>
+@if (!tableContainer.state.$tableSettings().hideExport)
+{
+  <button mat-menu-item (click)="exportToCsv()">
+    <mat-icon color="primary">file_download</mat-icon>
+    <span>Export Table</span>
+  </button>
+}
+@if (tableContainer.$tableId(); as tableId)
+{
+  <button stop-propagation mat-menu-item [matMenuTriggerFor]="pm.menu()">
+    <mat-icon color="primary">people</mat-icon>
+    <span>Profiles</span>
+  </button>
+  <tb-profiles-menu #pm class="profiles-menu" [tableId]="tableId" [isMatMenuChild]="true" />
+}
+
+
+<div mat-menu-item>
+  <div class="height-input-wrapper">
+    <span>Row Height</span>
+    <input #i class="input" stop-propagation type="number" 
+      placeholder="Set Size"
+      [value]="$rowHeightNum()"
+      [min]="10"
+      [max]="100" (change)="updateHeight('row', i)" />
+  </div>
+</div>
+@if(!state.$tableSettings().hideHeader)
+{
+  <div mat-menu-item>
+    <div class="height-input-wrapper">
+      <span>Header Height</span>
+      <input #i2 class="input" stop-propagation type="number"
+      placeholder="Set Size"
+      [value]="$headerHeightNum()"
+      [min]="10"
+      [max]="100" (change)="updateHeight('header', i2)"/>
+    </div>
+  </div>
+}
+<lib-reset-menu #r/>
+

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

@@ -0,0 +1,36 @@
+import { Component, computed, inject, viewChild, ChangeDetectionStrategy } from '@angular/core';
+import { MatIcon } from '@angular/material/icon';
+import { MatMenu, MatMenuModule } from '@angular/material/menu';
+import { TableContainerComponent } from '../table-container/table-container.component';
+import { ExportToCsvService } from '../../services/export-to-csv.service';
+import { ProfilesMenuComponent } from "../profiles-menu/profiles-menu.component";
+import { ResetMenuComponent } from "../reset-menu/reset-menu.component";
+import { MatTooltip } from '@angular/material/tooltip';
+import { StopPropagationDirective } from '../../../utilities';
+
+@Component({
+  selector: 'lib-table-header-menu',
+  imports: [MatMenuModule, MatIcon, ProfilesMenuComponent, ResetMenuComponent, MatTooltip, StopPropagationDirective],
+  templateUrl: './table-header-menu.component.html',
+  styleUrl: './table-header-menu.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TableHeaderMenuComponent {
+  menu = viewChild.required(MatMenu);
+  private exportToCsvService = inject(ExportToCsvService);
+  protected tableContainer = inject(TableContainerComponent);
+  state = this.tableContainer.state;
+  $rowHeightNum = computed(() => +(this.tableContainer.$genericTable()?.$rowHeight()?.replace('px', '') || 0) || undefined);
+  $headerHeightNum = computed(() => +(this.tableContainer.$genericTable()?.$headerHeight()?.replace('px', '') || 0) || undefined);
+  protected exportToCsv(): void {
+    this.exportToCsvService.exportToCsv(this.tableContainer.$data());
+  }
+
+  updateHeight(v: 'row' | 'header', element: HTMLInputElement){
+    if(+element.value < 10) element.value = '10';
+    if(+element.value > 100) element.value = '100';
+    if(v === 'row') this.state.setUserDefinedRowHeight(+element.value);
+    if(v === 'header') this.state.setUserDefinedHeaderHeight(+element.value);
+  }
+
+}

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

@@ -0,0 +1,63 @@
+import { Directive, TemplateRef, inject, input, computed, signal, OnInit } from '@angular/core';
+import { CdkColumnDef } from '@angular/cdk/table';
+import { CustomCellMeta, FieldType, SortDef } from '../interfaces/meta-data';
+import { TableBuilder } from '../classes/table-builder';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { StylerStyle } from '../../utilities/directives/styler';
+
+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]' })
+export class CustomCellDirective<T = any> implements OnInit {
+  private templateRef = inject<TemplateRef<any>>(TemplateRef, { optional: true });
+  public columnDef = inject(CdkColumnDef, { optional: true });
+  $customCell = input.required<string>({ alias: 'customCell' });
+  $displayName = input<string | undefined>(undefined, { alias: 'customCellDisplayName' });
+  $preSort = input<SortDef | undefined>(undefined, { alias: 'preSort' });
+  $templateRef = input<TemplateRef<any> | undefined>(this.templateRef || undefined, { alias: 'templateRef' });
+  $customCellOrder = input<number | undefined>(undefined, { alias: 'customCellOrder' });
+  $customCellWidth = input<string | undefined>(undefined, { alias: 'customCellWidth' });
+  /**
+     * for type safety, this is a reference to the table builder instance.
+     */
+  $customCellTableRef = input<TableBuilder<T> | undefined>(undefined, { alias: 'customCellTableRef' });
+  /**
+     * true if column not mapped to a property in the data source. Default is false.
+     */
+  $customCellNotMapped = input(false, { alias: 'customCellNotMapped', transform: coerceBooleanProperty });
+  /**
+   * Styles to apply to the cell element
+   */
+  $customCellCellStyles = input<StylerStyle<T>>(undefined, { alias: 'customCellCellStyles' });
+  $metaData = computed((): CustomCellMeta | undefined => {
+    const c = this.$customCell();
+    if(!c) return;
+    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,
+      noExport: true,
+      additional: { styles: this.$customCellCellStyles() },
+    })
+  });
+  $inited = signal(false);
+
+  ngOnInit(){
+    this.$inited.set(true);
+  }
+
+  static ngTemplateContextGuard<T>(dir: CustomCellDirective<T>, ctx: any): ctx is CustomCellContext<T> {
+    return true;
+  }
+}

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

@@ -0,0 +1,16 @@
+import { Directive, TemplateRef, inject, input, signal, OnInit } from '@angular/core';
+
+@Directive({ selector: '[customHeader]' })
+export class CustomHeaderDirective<T = any> implements OnInit {
+  private templateRef = inject<TemplateRef<any>>(TemplateRef);
+
+  $customHeader = input.required<string>({ alias: 'customHeader' });
+
+  $inited = signal(false);
+
+  template = () => this.templateRef;
+
+  ngOnInit() {
+    this.$inited.set(true);
+  }
+}

package/src/table-builder/directives/group-row-directive.ts

@@ -0,0 +1,91 @@
+import { Directive, TemplateRef, inject, input, computed, signal, OnInit } from '@angular/core';
+import { TableBuilder } from '../classes/table-builder';
+import { Group } from '../types/group-types';
+import { Path } from '../interfaces/meta-data';
+
+interface CustomGroupRowContext<T> {
+  $implicit: Group<T>;
+  element: T;
+  expanded: boolean;
+  level: number;
+  key: string;
+  uniqueName: string;
+  groupHeaderDisplay: string;
+  length: number;
+  padding: number;
+}
+
+// Usage examples:
+// <!-- Custom group row for all groupings -->
+// <div *customGroupRow="let group">
+//   Custom template for: {{group.groupHeaderDisplay}} ({{group.length}} items)
+// </div>
+//
+// <!-- Custom group row only for specific grouping key -->
+// <div *customGroupRow="'category'; let group">
+//   Category: {{group.groupHeaderDisplay}} - {{group.length}} products
+// </div>
+//
+// <!-- Custom group row for multiple grouping keys -->
+// <div *customGroupRow="['category', 'status']; let group">
+//   Multi-key template: {{group.groupHeaderDisplay}} ({{group.length}} items)
+// </div>
+@Directive({ selector: '[customGroupRow]' })
+export class CustomGroupRowDirective<T = any> implements OnInit {
+  private templateRef = inject<TemplateRef<any>>(TemplateRef);
+
+  /**
+   * Optional grouping key(s). If provided, this custom row will only apply when data is grouped by this key or keys.
+   * If not provided (or null), this custom row will apply to all groupings.
+   * Can be a single Path<T> or an array of Path<T> values.
+   */
+  $customGroupRow = input(null, { alias: 'customGroupRow', transform: (val: Path<T> | Path<T>[] | null | '') => val === '' ? null : val });
+
+  /**
+   * For type safety, this is a reference to the table builder instance.
+   */
+  $customGroupRowTableRef = input<TableBuilder<T> | undefined>(undefined, { alias: 'customGroupRowTableRef' });
+
+  /**
+   * Priority order for this custom group row. Higher numbers have higher priority.
+   * Useful when multiple custom group rows could apply to the same grouping.
+   */
+  $priority = input<number>(0, { alias: 'customGroupRowPriority' });
+
+  $inited = signal(false);
+
+  /**
+   * Gets the grouping key(s) this directive applies to, or null for all groupings
+   */
+  $groupingKey = computed(() => this.$customGroupRow());
+
+  /**
+   * Gets the template reference to use
+   */
+  template = () => this.templateRef;
+
+  ngOnInit() {
+    this.$inited.set(true);
+  }
+
+  /**
+   * Type guard for template context
+   */
+  static ngTemplateContextGuard<T>(dir: CustomGroupRowDirective<T>, ctx: any): ctx is CustomGroupRowContext<T> {
+    return true;
+  }
+
+  /**
+   * Checks if this directive applies to the given grouping key
+   */
+  appliesTo(groupingKey: string): boolean {
+    const targetKey = this.$groupingKey();
+    if(targetKey === null) {
+      return true; // Apply to all groupings
+    }
+    if(Array.isArray(targetKey)) {
+      return targetKey.includes(groupingKey as Path<T>);
+    }
+    return targetKey === groupingKey;
+  }
+}

package/src/table-builder/directives/index.ts

@@ -0,0 +1,8 @@
+export * from './custom-cell-directive';
+export * from './custom-header-directive';
+export * from './group-row-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/meta-data';
+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');
+    });
+  });
+});