@one-paragon/angular-utilities 1.1.7 → 1.1.8

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

@@ -0,0 +1,319 @@
+import {
+  Component,
+  Input,
+  EventEmitter,
+  Output,
+  ContentChildren,
+  QueryList,
+  ChangeDetectionStrategy,
+  Predicate,
+  ViewChild,
+  inject,
+  TemplateRef,
+  ContentChild,
+  ElementRef,
+  OnInit,
+  OnDestroy,
+  Injector,
+} from '@angular/core';
+import { BehaviorSubject, Observable, from, ReplaySubject, combineLatest, of } from 'rxjs';
+import { ArrayAdditional, FieldType, MetaData } from '../../interfaces/report-def';
+import { map, tap, withLatestFrom, mergeAll, scan, switchAll, startWith, timestamp } from 'rxjs/operators';
+import { TableBuilder } from '../../classes/table-builder';
+import { MatRowDef } from '@angular/material/table';
+import { CustomCellDirective, TableCustomFilterDirective, TableFilterDirective } from '../../directives';
+import { stateIs, TableStore } from '../../classes/table-store';
+import { mapArray, notNull } from '../../../rxjs/rxjs-operators';
+import { ExportToCsvService } from '../../services/export-to-csv.service';
+import { ArrayDefaults } from '../../classes/DefaultSettings';
+import { TableBuilderConfigToken } from '../../classes/TableBuilderConfig';
+import { InitializationState, TableState } from '../../classes/TableState';
+import { sortData } from '../../functions/sort-data-function';
+import { WrapperFilterStore } from '../table-container-filter/table-wrapper-filter-store';
+import { cloneDeep } from 'lodash';
+import { ColumnInfo } from '../../interfaces/ColumnInfo';
+import { defaultShareReplay } from '../../../rxjs';
+import { createFilterFunc, isCustomFilter, isFilterInfo } from '../../classes/filter-info';
+import { Dictionary } from '../../interfaces/dictionary';
+import { TableWrapperDirective } from '../../directives/table-wrapper.directive';
+import { createLinkCreatorDict } from '../../services/link-creator.service';
+import { TableBuilderStateStore } from '../../ngrx/tableBuilderStateStore';
+import { containerImports } from './table-container-imports';
+import { updateFilterInfoState, updateFilterPredicateState, updateFilterState } from './table-container.helpers/filter-state.helpers';
+import { initialSortState, updateSortState } from './table-container.helpers/sort-state.helpers';
+import { getAllGroupHeaderNames, initialGroupByState, updateGroupByState } from './table-container.helpers/groupBy.helpers';
+import { sortAndFilterData } from './table-container.helpers/data-state.helpers';
+import { TableProps, defaultProps } from './tableProps';
+import { PaginatorComponent } from '../generic-table/paginator.component';
+import { TableBuilderDataSource } from '../../classes/TableBuilderDataSource';
+import { GenericTableComponent } from '../generic-table/generic-table.component';
+import { toObservable, toSignal } from '@angular/core/rxjs-interop';
+
+
+@Component({
+    selector: 'tb-table-container',
+    templateUrl: './table-container.html',
+    styleUrls: ['./table-container.css', '../../styles/collapser.styles.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [TableStore, ExportToCsvService, WrapperFilterStore],
+    standalone: true,
+    imports: containerImports
+}) export class TableContainerComponent<T = any> implements OnInit, OnDestroy {
+  @ViewChild(PaginatorComponent)  paginatorComponent?: PaginatorComponent;
+  @ViewChild(GenericTableComponent)  genericTable?: GenericTableComponent;
+  props: TableProps = { ...defaultProps };
+
+  @Input() set indexColumn(val: boolean) {
+    this.props.indexColumn = val;
+  }
+  @Input() set selectionColumn(val: boolean) {
+    this.props.selectionColumn = val;
+  }
+  clearSelections(){
+    this.genericTable?.selection.clear(true);
+  }
+  @Input() set isSticky(val: boolean) {
+    this.props.isSticky = val;
+  }
+  @Input() set stickyFooter(val: boolean) {
+    this.props.stickyFooter = val;
+  }
+  @Input() set pageSize(value: number) {
+    this.state.setPageSize(value);
+  }
+  @Input() set groupHeaderTemplate( template: TemplateRef<any>) {
+    this.props.groupHeaderTemplate = template;
+  }
+
+
+  @ContentChildren(TableCustomFilterDirective, {descendants: true}) customFilterDirectives!: QueryList<TableCustomFilterDirective>;
+  @ContentChildren(TableFilterDirective, {descendants: true}) filterDirectives!: QueryList<TableFilterDirective>;
+  @ContentChildren(MatRowDef) customRows!: QueryList<MatRowDef<any>>;
+  @ContentChildren(CustomCellDirective) customCells!: QueryList<CustomCellDirective>;
+  @ContentChild('table', {read: ElementRef}) tableElRef!: ElementRef;
+  @Input() tableId!: string;
+  @Input() tableBuilder!: TableBuilder;
+  @Input() trackBy!: string;
+  @Input() inputFilters?: Observable<Array<Predicate<T>>>;
+
+  @Output() selection$ = new EventEmitter();
+  displayDataSubject = new ReplaySubject<Observable<T[]>>(1);
+  displayData = this.displayDataSubject.pipe(
+    switchAll(),
+    defaultShareReplay(),
+  );
+  $displayData = toSignal(this.displayData, { initialValue: [] });
+
+  dataSubject = new ReplaySubject<Observable<T[]>>(1);
+  @Output() data = this.dataSubject.pipe(
+    switchAll(),
+    defaultShareReplay(),
+  );
+  @Output() onStateReset = new EventEmitter();
+  @Output() onSaveState = new EventEmitter();
+  state = inject(TableStore);
+  @Output() state$ = this.state.getSavableState().pipe(
+    map(state => cloneDeep(state)),
+    defaultShareReplay(),
+  );
+
+  collapseFooter$ = this.state.state$.pipe(map(state => state.persistedTableSettings.collapseFooter));
+
+  myColumns$!: Observable<ColumnInfo[]>;
+
+  config = inject(TableBuilderConfigToken);
+  exportToCsvService = inject(ExportToCsvService<T>);
+  wrapper = inject(TableWrapperDirective, { optional: true });
+  stateService = inject(TableBuilderStateStore);
+  injector = inject(Injector);
+  ngOnDestroy(){
+    if(this.tableId) {
+      this.stateService.saveTableStateToLocal({ tableId:this.tableId, tableState: this.state.getSavableStateSignal() });
+    }
+  }
+
+  firstPage(): void {
+   this.paginatorComponent?.paginator?.firstPage();
+  }
+
+  lastPage(): void {
+   this.paginatorComponent?.paginator?.lastPage();
+  }
+
+  resetState() {
+    this.customFilterDirectives.forEach( cf => cf.reset());
+    this.filterDirectives.forEach( cf => cf.reset() );
+    this.state.resetState();
+    this.onStateReset.next(null)
+  }
+
+  initializeState() {
+    this.state.setTableSettings(this.tableBuilder.settings);
+    this.state.runOnceWhen(
+      stateIs(InitializationState.MetaDataLoaded),
+      () => {
+        if(this.tableId) {
+          const persistedState$ = toObservable(this.stateService.$selectLocalTableStateForView(this.tableId), {injector: this.injector}).pipe(
+            tap( persistedState => {
+              if(!persistedState) {
+                this.state.setInitializationState(InitializationState.LoadedFromStore);
+              }
+            }),
+            notNull(),
+          );
+          this.state.updateStateFromPersistedState(persistedState$.pipe(notNull()));
+        } else {
+          this.state.setInitializationState(InitializationState.LoadedFromStore);
+        }
+    });
+  }
+  customFilters$ = new BehaviorSubject<Predicate<T>[]>([]);
+  initializeData() {
+
+    const predicateFilters$ = combineLatest([this.inputFilters?.pipe(startWith([])) ?? of([] as Predicate<T>[]), this.customFilters$])
+      .pipe(map(([a, b]) => [...a, ...b]));
+    
+    const filters$ = combineLatest([
+      this.state.filters$.pipe(scan(updateFilterInfoState, { allFilters: {} }), timestamp()),
+      predicateFilters$.pipe(scan(updateFilterPredicateState, {allFilters: [] as Predicate<T>[]}), timestamp())
+    ])
+    .pipe(
+      map(([filterInfo, pred]) => updateFilterState(filterInfo, pred))
+    );
+
+    const sortsState$ = this.state.sort$.pipe(scan(updateSortState, initialSortState));
+    
+    const sortedAndFilteredData$ = sortAndFilterData(this.tableBuilder.getData$(), sortsState$, filters$);
+    
+    const flatGrouped$ = combineLatest([sortedAndFilteredData$.pipe(timestamp()), this.state.groupByKeys$.pipe(timestamp()), this.state.expandedGroups$.pipe(timestamp())]).pipe(
+      scan(updateGroupByState, initialGroupByState),
+      map(({displayData}) => displayData),
+      defaultShareReplay(),
+    );
+
+    this.displayDataSubject.next(flatGrouped$);
+    this.dataSubject.next(sortedAndFilteredData$);
+
+    this.state.on(this.displayData, (data) => {
+      this.state.updateState({dataLen: data.length})
+    });
+  }
+  ngOnInit() {
+    const ds = new TableBuilderDataSource<T>(
+      this.displayData,
+      this.state,
+    );
+    this.state.updateState({props: {
+      dataSource: ds,
+      ...this.props
+    }})
+    this.initializeState();
+    this.initializeData();
+  }
+
+  exportToCsv(): void {
+    const sorted = this.data.pipe(
+      withLatestFrom(this.state.sort$),
+      map(([data, sorted]) => sortData(data, sorted))
+    );
+    this.exportToCsvService.exportToCsv(sorted);
+  }
+
+  expandAllGroups = () => {
+    const groupHeaders = getAllGroupHeaderNames(this.$displayData());
+    this.state.expandAllOfGroup({ groupHeadersByKey: groupHeaders });
+  }
+
+  collapseAllGroups = () => this.state.collapseAll();
+
+  ngAfterContentInit() {
+    this.initializeColumns();
+    this.state.runOnceWhen(
+      stateIs(InitializationState.LoadedFromStore),
+      state => {
+        this.addFilterDirectives(state);
+        this.state.updateState({ initializationState: InitializationState.Ready });
+      });
+  }
+
+  initializeColumns() {
+    const customCellMap = new Map(this.customCells.map(cc => [cc.customCell,cc]));
+    this.state.setMetaData(this.tableBuilder.metaData$!.pipe(
+      map((mds) => {
+        mds = mds.map(this.mapMetaDatas);
+        return [
+          ...mds,
+          ...this.customCells.map( cc => cc.getMetaData(mds.find( item => item.key === cc.customCell )) )
+        ]
+      })
+    ));
+    this.state.setLinkMaps(this.tableBuilder.metaData$!.pipe(
+      map(createLinkCreatorDict)
+    ))
+
+    this.myColumns$ = this.state.metaDataArray$.pipe(
+      mapArray( metaData => ({metaData, customCell: customCellMap.get(metaData.key)!})),
+      defaultShareReplay()
+    );
+  }
+
+  mapMetaDatas = (meta : MetaData<T>) => {
+    if(meta.fieldType === FieldType.Array){
+      const additional = {...meta.additional} as ArrayAdditional;
+      additional.arrayStyle = additional?.arrayStyle ?? ArrayDefaults.arrayStyle;
+      additional.limit = additional.limit ?? this.config.arrayInfo?.limit ?? ArrayDefaults.limit;
+      return {...meta,additional}
+    }
+    return meta;
+  }
+
+  collapseHeader$ = this.state.state$.pipe(map(state => state.persistedTableSettings.collapseHeader));
+
+  addFilterDirectives = (state: TableState) => {
+    let allFilterDirectives = [...this.filterDirectives, ...this.customFilterDirectives];
+    if(this.wrapper) {
+      allFilterDirectives = [...allFilterDirectives, ...this.wrapper.registrations];
+    }
+
+    const customFilters: (TableCustomFilterDirective | TableFilterDirective )[] = [];
+
+    allFilterDirectives.filter( f => !f.used).forEach( f => {
+      f.used = true;
+      if(f.savable) {
+        var filter = state.filters[f.filterId];
+        if(isFilterInfo(filter)) {
+          const filterDirective: TableFilterDirective = f as TableFilterDirective;
+          filterDirective.fieldType = filter.fieldType;
+          filterDirective.filterType = filter.filterType;
+          filterDirective.setFilterValue(filter.filterValue);
+          filterDirective.key = filter.key;
+          filterDirective.update();
+        }
+        if(isCustomFilter(filter)) {
+          f.active = filter.active ?? false;
+        }
+        this.state.addFilter((f.filter$ as any));
+      } else {
+        customFilters.push(f);
+      }
+    });
+
+    const customFilters$ =  from( customFilters.map( cf => cf.filter$  )).pipe(
+      mergeAll(),
+      scan( (a,b)=> {
+          if(b.active) {
+            a[b.filterId] = isCustomFilter(b) ? b.predicate : createFilterFunc(b);
+          } else {
+            delete a[b.filterId] ;
+          }
+      return a;
+      }, {} as Dictionary<Predicate<any>>),
+      map( f => Object.values(f))
+    );
+    this.state.on(customFilters$, (f) => {
+      this.customFilters$.next(f);
+    });
+  }
+
+  $useVirtual = this.state.$isVirtual;
+}

package/src/table-builder/components/table-container/tableProps.ts

@@ -0,0 +1,18 @@
+import { TemplateRef } from '@angular/core';
+import { TableBuilderDataSource } from '../../classes/TableBuilderDataSource';
+
+export interface TableProps {
+  indexColumn: boolean;
+  selectionColumn: boolean;
+  isSticky: boolean;
+  stickyFooter:boolean;
+  groupHeaderTemplate?: TemplateRef<any>;
+  dataSource?: TableBuilderDataSource<any>;
+}
+
+export const defaultProps: TableProps = {
+  indexColumn: false,
+  selectionColumn: false,
+  isSticky: true,
+  stickyFooter: false,
+}

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

@@ -0,0 +1,141 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  OnDestroy,
+  effect,
+  forwardRef,
+  untracked,
+  viewChild,
+} from '@angular/core';
+import {
+  CdkVirtualScrollViewport,
+  ScrollingModule,
+  VIRTUAL_SCROLL_STRATEGY,
+} from '@angular/cdk/scrolling';
+import { distinctUntilChanged, map } from 'rxjs';
+import { defaultShareReplay, subscriber } from '../../../rxjs';
+import { TableStore } from '../../classes/table-store';
+import { TableVirtualScrollStrategy } from '../scroll-strategy';
+import { VirtualScrollOptions } from '../../classes/table-builder-general-settings';
+
+@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 {
+  viewport = viewChild(CdkVirtualScrollViewport);
+
+  constructor(
+    private state: TableStore
+  ) {}
+
+  defaultOptions = new VirtualScrollOptions();
+  scrollStrategy = new TableVirtualScrollStrategy(
+    this.computedRowHeight(),
+    this.computedHeaderHeight()
+    );
+
+  dataLength$ = this.state.state$.pipe(
+    map(s => {
+      const paginated = s.notPersistedTableSettings.usePaginator && !s.showAll;
+      return paginated ? (s.userDefined.pageSize || s.pageSize) : s.dataLen;
+    }),
+    distinctUntilChanged()
+  );
+
+  subscriber = subscriber(this.dataLength$, (dataLength) => {
+    this.scrollStrategy.setDataLength(dataLength);
+
+    if(this.viewport()){
+      this.setSize(this.viewport()!.elementRef);
+    }
+  });
+
+
+  _ = effect(() => {
+    const viewport = this.viewport();
+    untracked(() => {
+      if(!!viewport){
+        addEventListener('resize', this.resizeHandler);
+        this.setSize(viewport.elementRef);
+        this.subscriber.on(viewport.renderedRangeStream, (range) => {
+          this.state.updateState({
+            virtualEnds: {
+              start: range.start,
+              end: range.end,
+            }
+          });
+        });
+        var offset$ = viewport.scrolledIndexChange.pipe(
+          map(() => viewport.getOffsetToRenderedContentStart() ?? 0),
+          distinctUntilChanged(),
+          defaultShareReplay()
+        );
+    
+        this.subscriber.on(offset$, (offset) => {
+          this.state.updateState({ virtualScrollOffset: offset });
+        });
+      };
+    })
+
+  })
+
+
+  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 = (this.state.tableSettings().usePaginator && !this.state.state().showAll) ? (this.state.state().userDefined?.pageSize || this.state.state().pageSize) :
+      virtualScrollOptions?.amountOfVisibleItems|| this.defaultOptions.amountOfVisibleItems;
+    let height = (rowHeight * amountOfVisibleItems);
+    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.state.updateState({ 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 *ngrxLet="filters$ as filters">
+    @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,52 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { TableStore } from '../../../classes/table-store';
+import { FilterInfo, isFilterInfo } from '../../../classes/filter-info';
+import { map } from 'rxjs/operators';
+import { WrapperFilterStore } from '../table-wrapper-filter-store';
+import { Observable } from 'rxjs';
+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$: Observable<FilterInfo<any>[]> = this.tableState.filters$.pipe(
+    map(filters =>
+      Object.values(filters).filter(f => isFilterInfo(f) && !f._isExternallyManaged) as FilterInfo<any>[]
+    ));
+
+  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$ | async; track md.key) {
+    <button (click)="addFilter(md)" mat-menu-item>
+      <span class="filter-labels">{{md.displayName || (md.key | spaceCase)}}</span>
+    </button>
+  }
+</mat-menu>