@one-paragon/angular-utilities 2.2.4 → 2.2.6

package/src/table-builder/services/export-to-csv.service.ts

@@ -0,0 +1,113 @@
+import { DatePipe } from '@angular/common';
+import { Injectable, computed, inject } from '@angular/core';
+import { TableStore } from '../classes/table-store';
+import { TableBuilderConfigToken, TableBuilderExport } from '../classes/TableBuilderConfig';
+import { downloadData } from '../functions/download-data';
+import { ArrayAdditional, ArrayStyle, FieldType, MetaData } from '../interfaces/report-def';
+import { isPipe } from './transform-creator';
+import { getFactory } from '../functions/sort-data-function';
+import { TableContainerComponent } from '../components';
+import { spaceCase } from '../../utilities';
+import { merge } from 'lodash';
+
+@Injectable()
+export class ExportToCsvService<T> {
+  state = inject(TableStore);
+  private config = inject(TableBuilderConfigToken);
+  private datePipe = inject(DatePipe);
+
+  $exportSettings = computed<FlatExport>(() => {
+    const globalSettings = this.config?.defaultTableSettings?.tableSettings?.exportSettings
+      || this.config?.export
+      || {};
+    const globalLinkOptions = globalSettings.mapLinkOptions || {};
+    const flattenedGlobal = { ...globalSettings, ...globalLinkOptions };
+    const tableSettings = (this.state.$notPersistedTableSettings()?.exportSettings || {}) ;
+    const tableLinkOptions = tableSettings.mapLinkOptions || {};
+    const flattenedTable = { ...tableSettings, ...tableLinkOptions };
+    return merge(flattenedGlobal, flattenedTable);
+  });
+
+  exportToCsv = (data: T[]) => {
+    const hiddenKeys = this.state.selectSignal(s => s.hiddenKeys)();
+    const meta = this.state.$metaDataArray().filter(md => !md.noExport && !hiddenKeys.includes(md.key));
+    const csv = this.csvData(data, meta);
+    downloadData(csv, 'export.csv', 'text/csv') ;
+  }
+
+  csvData = (data:Array<T>, metaData: MetaData<T>[]) => {
+    const res = data.map(row => metaData.map(meta => this.metaToField(meta, row)).join(','));
+    res.unshift(metaData.map(meta => meta.displayName || meta.key).join(','));
+    return res.join('\n');
+  }
+
+  metaToField = (meta: MetaData<T>, row: T) => {
+    const metaExport = meta.additional?.export;
+    if(metaExport?.mapForExport) return metaExport.mapForExport(row);
+    const exportForCol = merge({}, this.$exportSettings(), metaExport);
+    let val: any = getFactory(meta.key)(row);
+    if(val == null && !meta.transform) return val
+    if(meta.transform && meta.fieldType !== FieldType.Expression){
+      const transform = meta.transform as any;
+      return isPipe(transform) ? transform.transform(val) : transform(val);
+    }
+    if(meta.additional?.link && exportForCol.mapLinkToString){
+      let mapper = this.state.$getLinkInfo(meta)()?.link;
+      if(mapper){
+        let mapped = mapper(row);
+        if(exportForCol!.domainPrefix){
+          mapped = `${exportForCol!.domainPrefix}/${mapped}`;
+        }
+        if(exportForCol!.excellStyle){
+          mapped = this.cleanValForCsv(`=hyperlink("${mapped}", "${this.stringByType(meta, row, val, exportForCol)}")`);
+        }
+        return mapped;
+      }
+    }
+    val = this.cleanValForCsv(this.stringByType(meta, row, val, exportForCol));
+    return val;
+  }
+
+  private stringByType(meta: MetaData<T>, row: T, val: any, exportForCol: FlatExport ){
+    if(meta.map){
+      return meta.map(row);
+    }
+    switch (meta.fieldType) {
+      case FieldType.Date:
+        const dateFormat = meta.additional?.export?.dateFormat || exportForCol?.dateFormat || meta.additional?.dateFormat;
+        return this.transformDate(val, dateFormat);
+      case FieldType.DateTime:
+        const dateTimeFormat = meta.additional?.export?.dateTimeFormat || exportForCol?.dateTimeFormat || meta.additional?.dateTimeOptions?.format;
+        return this.transformDate(val, dateTimeFormat);
+      case FieldType.String:
+        const prepend: string = meta.additional?.export?.prepend || exportForCol?.prepend || '';
+        return prepend + val;
+      case FieldType.Array:
+        const style = (meta.additional as ArrayAdditional).arrayStyle ?? this.config.arrayDefaults?.arrayStyle;
+        const limit = (meta.additional as ArrayAdditional).limit ?? this.config.arrayDefaults?.limit;
+        return (val as Array<string>).slice(0, limit).join(style === ArrayStyle.NewLine ? '\n' : ', ');
+      case FieldType.Expression:
+        return (meta.transform as any)(row);
+      case FieldType.Enum:
+        return exportForCol?.mapEnumToString ? spaceCase(meta.additional!.enumMap![val]) : val;
+    }
+    return val;
+  }
+
+  cleanValForCsv(val: any) {
+    if(typeof val === 'string' && (val.includes(', ') || val.includes('"') || val.includes('\n'))) {
+      val = val.replaceAll('"', '""');
+      val = '"' + val + '"';
+    }
+    return val;
+  }
+
+  private transformDate(val: any, dateFormat: any) {
+    if(this.config.transformers && this.config.transformers[FieldType.Date]) {
+      return this.config.transformers[FieldType.Date]!(val);
+    }
+    return this.datePipe.transform(val, dateFormat);
+  }
+}
+
+type FlatExport = TableBuilderExport & TableBuilderExport['mapLinkOptions'];

package/src/table-builder/services/link-creator.service.ts

@@ -0,0 +1,98 @@
+import { FieldType, MetaData } from "../interfaces/report-def";
+import { Dictionary } from "@ngrx/entity";
+import { QueryParamsHandling } from "@angular/router";
+import { getFactory } from "../functions/sort-data-function";
+
+export function createLinkCreatorDict<T>(metaDatas: MetaData<T>[]){
+  return metaDatas.reduce((acc, md) => {
+    if(md.additional?.link || md.fieldType === FieldType.Link){ acc[md.key] = createLinkCreator(md)}
+    return acc;
+  }, {} as Dictionary<LinkInfo>)
+}
+
+export function createLinkCreator<T>(metaData: MetaData<T>): LinkInfo{
+  const target = metaData.additional?.link?.target || '_blank';
+  const useRouterLink = metaData.additional?.link?.useRouterLink || false;
+  const hasRoute = !!metaData.additional?.link?.interpolatedRoute;
+
+  const qp = useRouterLink ?
+    metaData.additional!.link!.routerLinkOptions?.queryParams?.reduce((map, [key, value]) => {
+      map[key] = typeof value === 'function' ? value : parseInterpolated(value);
+      return map;
+    }, {})
+    : undefined;
+
+  const routerLinkOptions = useRouterLink ? {
+    queryParams: (element: T) => metaData.additional!.link!.routerLinkOptions?.queryParams?.reduce((map, [key, value]) => {
+      map[key] = qp![key](element);
+      return map;
+    }, {}) ?? null,
+    fragment: metaData.additional!.link?.routerLinkOptions?.fragment,
+    preserveFragment: metaData.additional!.link!.routerLinkOptions?.preserveFragment ?? false,
+    queryParamsHandling: metaData.additional!.link!.routerLinkOptions?.queryParamsHandling ?? '',
+  }
+    : undefined;
+
+  if(hasRoute) {
+    const value = metaData.additional!.link!.interpolatedRoute!;
+    return ({
+      link: typeof value === 'function' ? (element: T) => value(element) : parseInterpolated(value),
+      target,
+      useRouterLink,
+      routerLinkOptions,
+    });
+  } else {
+    const slashIfNeeded = !metaData.additional?.link?.base?.endsWith('/') ? '/' : '';
+    const base = metaData.additional!.link?.base;
+    const getKey = key(metaData);
+    return ({
+      link: (element: T) => `${base}${slashIfNeeded}${getKey(element)}`,
+      target,
+      useRouterLink,
+      routerLinkOptions,
+    });
+  }
+}
+
+const key = (metaData : MetaData) => metaData.additional!.link?.urlKey ?
+  getFactory(metaData.additional!.link!.urlKey as string)
+  :
+  getFactory(metaData.key);
+
+export interface LinkInfo {
+  link: (element: any) => string;
+  target: string;
+  useRouterLink: boolean;
+  routerLinkOptions?: {
+    queryParams: (element: any) => any;
+    fragment?: string;
+    preserveFragment?: boolean;
+    queryParamsHandling?: QueryParamsHandling;
+  }
+}
+
+function parseInterpolated(input: string) {
+  // Match either content inside curly braces or content between curly braces
+  const parts = input.split(/({[\w.]+})/);
+
+  const result = parts
+    .filter(part => part !== '') // Remove empty strings
+    .map(part => {
+      if(part.startsWith('{') && part.endsWith('}')) {
+        // For interpolated values, remove the curly braces
+        return {
+          type: 'interpolated',
+          val: getFactory(part.slice(1, -1))
+        };
+      } else {
+        return {
+          type: 'string',
+          val: part
+        };
+      }
+    }) as ({type: 'string', val:string} | {type:'interpolated', val: (t:any) => string})[];
+
+  return function(val: any){
+    return result.map(part => part.type === 'string' ? part.val : part.val(val)).join('');
+  }
+}

package/src/table-builder/services/table-template-service.ts

@@ -0,0 +1,47 @@
+import { EnvironmentInjector, createComponent, inject } from "@angular/core";
+import { Injectable, TemplateRef } from "@angular/core";
+import { ArrayAdditional, ArrayStyle, FieldType, MetaData } from "../interfaces/report-def";
+import { InitializationComponent } from "../components/initialization-component/initialization.component";
+import { TableBuilderConfigToken } from "../classes/TableBuilderConfig";
+
+@Injectable({ providedIn: 'root' })
+export class TableTemplateService {
+  environmentInjector = inject(EnvironmentInjector);
+  tableConfig = inject(TableBuilderConfigToken);
+  initConfig = createComponent(InitializationComponent, {
+    environmentInjector: this.environmentInjector,
+  });
+  initializationComponentInstance = this.initConfig.instance;
+  getTemplate(metaData: MetaData) : TemplateRef<any> {
+
+    if(metaData.fieldType === FieldType.Array){
+      const arrayStyle = (metaData.additional as ArrayAdditional)?.arrayStyle ?? this.tableConfig?.arrayDefaults?.arrayStyle;
+      return arrayStyle === ArrayStyle.NewLine
+        ? this.initializationComponentInstance.$arrayNewLineTemplate()
+        : this.initializationComponentInstance.$arrayCommaTemplate();
+    }
+
+    if(metaData.fieldType === FieldType.ImageUrl) {
+      return this.initializationComponentInstance.$imageUrlTemplate();
+    }
+
+    const useIcon = metaData.useIcon || metaData.fieldType === FieldType.Boolean;
+    if(metaData.fieldType === FieldType.Link || metaData.additional?.link){
+      const router = metaData.additional?.link?.useRouterLink;
+      if(router) {
+        return useIcon
+          ? this.initializationComponentInstance.$routerLinkWithIconTemplate()
+          : this.initializationComponentInstance.$routerLinkTemplate();
+      }
+      return useIcon
+        ? this.initializationComponentInstance.$linkWithIconTemplate()!
+        : this.initializationComponentInstance.$linkTemplate();
+    }
+
+    if(useIcon){
+      return this.initializationComponentInstance.$defaultWithIcon();
+    }
+
+    return this.initializationComponentInstance.$defaultTemplate();
+  }
+}

package/src/table-builder/services/transform-creator.ts

@@ -0,0 +1,96 @@
+import { PipeTransform } from '@angular/core';
+import { FieldType, MappedMetaData, MetaData } from '../interfaces/report-def';
+import { formatDate, formatCurrency } from '@angular/common';
+import { phoneFormatter } from '../../utilities/pipes/phone.pipe';
+import { TableBuilderConfig } from '../classes/TableBuilderConfig';
+import { spaceCase } from '../../utilities';
+import { getFactory } from '../functions/sort-data-function';
+
+export function isPipe(o : any ): o is PipeTransform {
+  return typeof ((o as PipeTransform).transform ) === 'function';
+}
+
+export function createTransformer(metaData: MetaData<any, any>, config: TableBuilderConfig, noIcons = false, forItem = false): ((value: any, ...args: any[]) => any) {
+  const defaultFunc = getFactory(metaData.key);
+  if(metaData.map && !forItem){
+    return (value: any) => {
+      return metaData.map!(value)};
+  }
+  if((metaData as MappedMetaData).mapItem){
+    return (value: any) => {
+      return (metaData as MappedMetaData).mapItem!(defaultFunc(value))};
+  }
+  if( metaData.transform) {
+    if(isPipe(metaData.transform)){
+      return (value: any) => (metaData!.transform as PipeTransform).transform(defaultFunc(value));
+    }
+    return metaData.fieldType === FieldType.Expression ? metaData.transform : (value: any) => (metaData.transform as (a:any, b:any)=>any)(defaultFunc(value), value);
+  }
+  if(config.transformers && config.transformers[metaData.fieldType]) {
+    var transformer = config.transformers![metaData.fieldType]!;
+    return (value: any) => transformer(defaultFunc(value));
+  }
+  const defaultDateFormat = config.dateFormats?.dateFormat ?? 'shortDate';
+  const defaultDateTimeFormat = config.dateFormats?.dateTimeFormat ?? 'short';
+  switch (metaData.fieldType) {
+    case FieldType.Date:
+      const dateFormat = metaData.additional?.dateFormat ?? defaultDateFormat;
+      return (value: any) => dateFormatter(defaultFunc(value), dateFormat);
+    case FieldType.DateTime:
+      const dateTimeFormat = metaData.additional?.dateTimeOptions?.format ?? defaultDateTimeFormat;
+      return (value: any) => dateFormatter(defaultFunc(value), dateTimeFormat);
+    case FieldType.Currency:
+      return (value: any) => currencyFormatter(defaultFunc(value));
+    case FieldType.PhoneNumber:
+      return (value: any) => phoneFormatter(defaultFunc(value));
+    case FieldType.Enum:
+      return (value: any) => spaceCase(metaData.additional?.enumMap![defaultFunc(value)] as string) ;
+    case FieldType.Boolean:
+      if(noIcons) {
+        return defaultFunc
+      }
+      let forTrue = 'check'
+      let forFalse = '';
+      if(metaData.additional?.boolean?.forTrue) {
+        forTrue = metaData?.additional.boolean.forTrue.icon;
+      }
+      if(metaData.additional?.boolean?.showForFalse === true) {
+        forFalse = 'clear';
+      } else if(metaData.additional?.boolean?.showForFalse?.icon) {
+        forFalse = metaData.additional?.boolean?.showForFalse?.icon;
+      }
+      return (value: any) => defaultFunc(value) ? forTrue : forFalse ;
+  }
+  return defaultFunc;
+}
+
+export function createItemTransformer<T = any, AdditionalFields extends string[] = []>(metaData: MetaData<T, AdditionalFields>, config: TableBuilderConfig, noIcons = false, mutate = false){
+  const transform = createTransformer(metaData, config, noIcons);
+  return (t: T) => {
+    if(!mutate){
+      t = { ...t }
+    }
+    t[metaData.key as string] = transform(t)
+  }
+}
+
+export function createItemTransformers<T = any, AdditionalFields extends string[] = []>(metaDatas: MetaData<T, AdditionalFields>[], config: TableBuilderConfig, noIcons = false, mutate = false){
+  const transformers = metaDatas.map(meta => createItemTransformer(meta, config, noIcons, true));
+  return (t: T) => {
+    if(!t) return t;
+    if(!mutate){
+      t = { ... t }
+    }
+    transformers.forEach(m => m(t));
+    return t;
+  }
+}
+
+export function dateFormatter(date: string | Date | number, format: string){
+  if(!date) return;
+  return formatDate(date, format, 'en-US');
+}
+
+export function currencyFormatter(amt: number) {
+  return formatCurrency(amt, 'en-US', '$');
+}

package/src/table-builder/specs/table-custom-filters.spec.ts

@@ -0,0 +1,262 @@
+// import { HarnessLoader } from "@angular/cdk/testing";
+// import { TestbedHarnessEnvironment } from "@angular/cdk/testing/testbed";
+// import { Component, DebugElement, Type } from "@angular/core";
+// import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
+// import { MatButtonToggleModule } from "@angular/material/button-toggle";
+// import { MatButtonToggleHarness } from "@angular/material/button-toggle/testing";
+// import { MatCheckbox, MatCheckboxModule } from "@angular/material/checkbox";
+// import { MatLegacyRadioModule as MatRadioModule } from "@angular/material/legacy-radio";
+// import { MatLegacySelectModule as MatSelectModule } from "@angular/material/legacy-select";
+// import { MatSlideToggleModule } from "@angular/material/slide-toggle";
+// import { MatSlideToggleHarness } from "@angular/material/slide-toggle/testing";
+// import { MatLegacyRadioButtonHarness as MatRadioButtonHarness } from '@angular/material/legacy-radio/testing';
+// import { MatCheckboxHarness } from '@angular/material/checkbox/testing';
+// import { MatLegacySelectHarness as MatSelectHarness,  } from "@angular/material/legacy-select/testing";
+// import { MatLegacyOptionHarness as MatOptionHarness } from "@angular/material/legacy-core/testing";
+// import { By } from "@angular/platform-browser";
+// import { firstValueFrom, lastValueFrom, Observable, skip, Subject, take, takeUntil } from "rxjs";
+// import { MatButtonToggleFilterDirective, MatCheckboxTbFilterDirective, MatOptionTbFilterDirective, MatRadioButtonTbFilterDirective, MatSlideToggleTbFilterDirective, TableCustomFilterDirective } from "../directives/tb-filter.directive";
+// import { NoopAnimationsModule } from "@angular/platform-browser/animations";
+
+// abstract class ToggleTestComponent {
+
+// }
+
+
+// const takeItem = <T>(src:Observable<T>, itemNumber: number, until: Observable<any>) : Promise<T | null> => {
+//   return firstValueFrom(src.pipe( skip(itemNumber - 1),takeUntil(until) ), {defaultValue: null});
+// }
+
+// @Component({
+//   template: `
+//     <mat-slide-toggle tbCustomFilter   > Slide me! </mat-slide-toggle>
+//     <mat-checkbox tbCustomFilter   > Check me! </mat-checkbox>
+//     <mat-radio-button tbCustomFilter   > Click me! </mat-radio-button>
+//     <mat-select>
+//       <mat-option tbCustomFilter   > Click me! </mat-option>
+//       <mat-option [value]='"other"'   >Other</mat-option>
+//     </mat-select>
+//     <mat-button-toggle tbCustomFilter   > Click me! </mat-button-toggle>
+//     <div class='optionGroup' tbCustomFilterGroup >
+//       <mat-checkbox tbCustomFilter class="child-1-checkbox"  >1</mat-checkbox>
+//     </div>
+//   `
+// }) export class SingleToggleTestComponent extends ToggleTestComponent {
+
+// }
+
+
+// let fixture: ComponentFixture<ToggleTestComponent>;
+// let loader: HarnessLoader;
+
+
+// const setupTest = (): void => {
+
+
+//   TestBed.configureTestingModule({
+//       imports: [
+//         NoopAnimationsModule,
+//         MatSlideToggleModule,
+//         MatCheckboxModule,
+//         MatRadioModule,
+//         MatButtonToggleModule,
+//         MatSelectModule
+//       ],
+//       declarations: [
+//         TableCustomFilterDirective,
+//         SingleToggleTestComponent,
+//         MatSlideToggleTbFilterDirective,
+//         MatButtonToggleFilterDirective,
+//         MatOptionTbFilterDirective,
+//         MatRadioButtonTbFilterDirective,
+//         MatCheckboxTbFilterDirective,
+//         TablebFilterGroupDirective,
+
+//     ],
+//     providers: [  ]
+//     });
+//     fixture = TestBed.createComponent(SingleToggleTestComponent);
+//     fixture.detectChanges();
+//     loader = TestbedHarnessEnvironment.documentRootLoader(fixture);
+// };
+
+
+// describe("Custom Table Filters", () => {
+
+//   describe("mat slide toggle filter",  () => {
+//     let toggleHarnesses: MatSlideToggleHarness[];
+//     let dElement: DebugElement;
+//     beforeEach(async () => {
+//       setupTest();
+//       dElement = fixture.debugElement.query(By.directive(MatSlideToggleTbFilterDirective) );
+//       toggleHarnesses = await loader.getAllHarnesses(MatSlideToggleHarness);
+//     } );
+
+//     it('should create', () : void => {
+//       expect(dElement).toBeTruthy();
+//     });
+
+//     it('should emit on toggle', async () => {
+//       var filterDirective = dElement.injector.get(TableCustomFilterDirective);
+//       const dunzo = new Subject();
+//       var val = takeItem(filterDirective.filter$, 2, dunzo);
+//       await toggleHarnesses[0].toggle();
+//       dunzo.next(null);
+//       var i = await val;
+//       expect(i).toBeTruthy();
+//       expect(i?.active).toBeTrue();
+//       expect(filterDirective.active).toBeTrue();
+//     })
+//   })
+
+//   describe("check box filter",  () => {
+//     let checkBoxHarnesses: MatCheckboxHarness;
+//     let dElement: DebugElement;
+//     beforeEach( async () => {
+//      setupTest();
+//       dElement = fixture.debugElement.query(By.directive(MatCheckboxTbFilterDirective) );
+//       checkBoxHarnesses = await loader.getHarness(MatCheckboxHarness);
+
+//     });
+
+//     it('should create', async () : Promise<void> => {
+//       expect(dElement).not.toBeNull();
+//     });
+
+//     it('should emit on check', async () => {
+//       var filterDirective = dElement.injector.get(TableCustomFilterDirective);
+//       var val = firstValueFrom(filterDirective.filter$);
+//       await checkBoxHarnesses.check();
+//       var i = await val;
+//       expect(i).toBeTruthy();
+//       expect(filterDirective.active).toBeTrue();
+//     });
+
+
+//   });
+
+
+//   describe("radio button filter",  () => {
+//     let radioHarnesses: MatRadioButtonHarness;
+//     let dElement: DebugElement;
+//     beforeEach( async () => {
+//      setupTest();
+//       dElement = fixture.debugElement.query(By.directive(MatRadioButtonTbFilterDirective) );
+//       radioHarnesses = await loader.getHarness(MatRadioButtonHarness);
+
+//     });
+
+//     it('should create', async () : Promise<void> => {
+//       expect(dElement).not.toBeNull();
+//     });
+
+//     it('should emit on check', async () => {
+//       var filterDirective = dElement.injector.get(TableCustomFilterDirective);
+//       var val = firstValueFrom(filterDirective.filter$);
+//       await radioHarnesses.check();
+//       var i = await val;
+//       expect(i).toBeTruthy();
+//       expect(filterDirective.active).toBeTrue();
+//     });
+//   });
+
+//   describe("button toggle  filter",  () => {
+//     let buttonToggleHarness: MatButtonToggleHarness;
+//     let dElement: DebugElement;
+//     beforeEach( async () => {
+//      setupTest();
+//       dElement = fixture.debugElement.query(By.directive(MatButtonToggleFilterDirective) );
+//       buttonToggleHarness = await loader.getHarness(MatButtonToggleHarness);
+
+//     });
+
+//     it('should create',  () : void => {
+//       expect(dElement).not.toBeNull();
+//     });
+
+//     it('should emit on toggle', async () => {
+//       var filterDirective = dElement.injector.get(TableCustomFilterDirective);
+//       var val = firstValueFrom(filterDirective.filter$);
+//       await buttonToggleHarness.check();
+//       var i = await val;
+//       expect(i).toBeTruthy();
+//       expect(filterDirective.active).toBeTrue();
+//     });
+//   });
+
+//   describe("option filter",  () => {
+//     let optionHarness: MatOptionHarness;
+//     let optionHarness2: MatOptionHarness;
+//     let selectHarness: MatSelectHarness;
+//     let dElement: DebugElement;
+//     beforeEach(async () => {
+//       setupTest();
+//       selectHarness = await loader.getHarness(MatSelectHarness);
+//       await selectHarness.open();
+//       var h = await loader.getAllHarnesses(MatOptionHarness);
+//       optionHarness = h[0];
+//       optionHarness2 = h[1];
+//       dElement = fixture.debugElement.query(By.directive(MatOptionTbFilterDirective) );
+//     });
+
+//     it('should create', async () : Promise<void> => {
+//       expect(dElement).toBeTruthy();
+//     });
+
+//     it('should emit on select', async () => {
+//       let doneSubject = new Subject<void>();
+
+//       var filterDirective = dElement.injector.get(TableCustomFilterDirective);
+
+//       let val = takeItem(filterDirective.filter$, 2, doneSubject);
+//       await optionHarness.click();
+//       doneSubject.next();
+//       let i = await val;
+
+//       expect(i).toBeTruthy();
+//       expect(i?.active).toBeTrue();
+//       expect(filterDirective.active).toBeTrue();
+
+
+//       val = takeItem(filterDirective.filter$, 2, doneSubject);
+//       await optionHarness2.click();
+
+//       i = await val;
+//       expect(i).toBeTruthy();
+//       expect(i?.active).toBeFalse();
+//       expect(filterDirective.active).toBeFalse();
+
+//     });
+//   });
+
+//   describe("group filter",  () => {
+//     let checkboxHarness: MatCheckboxHarness;
+//     let dElement: DebugElement;
+//     beforeEach(async () => {
+//       setupTest();
+
+//       dElement = fixture.debugElement.query(By.directive(TablebFilterGroupDirective) );
+//       const childLoader = await loader.getChildLoader('.optionGroup');
+//       checkboxHarness = await childLoader.getHarness(MatCheckboxHarness);
+//     });
+
+//     it('should create', () : void => {
+//       expect(dElement).toBeTruthy();
+//     });
+
+//     it('should emit on child select', async () => {
+
+//       var directive = dElement.injector.get(TablebFilterGroupDirective);
+//       var doneSubject = new Subject<void>();
+//       var resultPromise = takeItem(directive.filter$, 2, doneSubject);
+
+//       await checkboxHarness.check();
+//       doneSubject.next();
+
+//       var result = await resultPromise;
+//       expect(result).toBeTruthy();
+
+//     });
+//   });
+
+// });

package/src/table-builder/styles/collapser.styles.scss

@@ -0,0 +1,16 @@
+.collapse-icon{
+  font-size: 16px;
+  height: 16px;
+  color:#3f51b5;
+  align-self: flex-start;
+}
+.collapse-icon:hover{
+  cursor: pointer;
+}
+.hide{
+  display: none;
+}
+.paginator-row{
+  display: flex;
+  align-items: center;
+}

package/src/table-builder/table-builder.module.ts

@@ -0,0 +1,38 @@
+
+import { NgModule } from '@angular/core';
+import { MultiSortDirective } from './directives/multi-sort.directive';
+import { ModuleWithProviders } from '@angular/core';
+import { TableBuilderConfig, TableBuilderConfigToken } from './classes/TableBuilderConfig';
+import { TableContainerComponent } from './components';
+import { CustomCellDirective, TableFilterDirective, TableFilterStringContainsDirective, TableWrapperDirective } from './directives';
+import { UtilitiesModule } from '../utilities';
+
+@NgModule({
+  imports: [
+    TableContainerComponent,
+    CustomCellDirective,
+    TableFilterDirective,
+    TableFilterStringContainsDirective,
+    TableWrapperDirective,
+  ],
+  exports: [
+    TableContainerComponent,
+    CustomCellDirective,
+    TableFilterStringContainsDirective,
+    TableWrapperDirective,
+    UtilitiesModule,
+  ],
+  providers: [
+    MultiSortDirective,
+  ]
+})
+export class TableBuilderModule {
+  static forRoot(config: TableBuilderConfig): ModuleWithProviders<TableBuilderModule> {
+    return {
+      ngModule: TableBuilderModule,
+      providers: [
+        { provide: TableBuilderConfigToken, useValue: config }
+      ]
+    };
+  }
+}