@theseam/ui-common 0.2.8 → 0.2.12

package/bundles/theseam-ui-common-data-exporter.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"theseam-ui-common-data-exporter.umd.js","sources":["../../../projects/ui-common/data-exporter/data-exporter.ts","../../../projects/ui-common/data-exporter/exporters/csv-exporter.ts","../../../projects/ui-common/data-exporter/exporters/xlsx-exporter.ts","../../../projects/ui-common/data-exporter/data-exporter.module.ts","../../../projects/ui-common/data-exporter/theseam-ui-common-data-exporter.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core'\nimport { Observable } from 'rxjs'\nimport { switchMap } from 'rxjs/operators'\n\nimport { IconProp } from '@fortawesome/fontawesome-svg-core'\n\nexport type IDataExporterFunction = <T>(data: T[]) => Observable<T[]>\n\nexport interface IDataExporter {\n  /**\n   * Name to identify the exporter.\n   */\n  readonly name: string\n\n  /**\n   * Label to use for exporter in user visible text.\n   *\n   * default: `name`\n   */\n  label?: string\n\n  /**\n   * Icon to represent exporter.\n   */\n  icon?: string | IconProp\n\n  /**\n   * Export the data based on the data to some format.\n   */\n  export<T>(data: T[]): Observable<boolean>\n}\n\nexport const THESEAM_DATA_EXPORTER = new InjectionToken<IDataExporter>('TheSeamDataExporter')\n\nexport function exportOperator<T>(exportFn: IDataExporterFunction) {\n  return (source$: Observable<T[]>) =>\n    source$.pipe(switchMap(exportFn))\n}\n","import { Injectable } from '@angular/core'\nimport { from, Observable } from 'rxjs'\nimport { mapTo, switchMap, tap } from 'rxjs/operators'\n\nimport { faFileCsv } from '@fortawesome/free-solid-svg-icons'\nimport FileSaver from 'file-saver'\n\nimport { fileDataFromBuffer, wrapIntoObservable } from '@theseam/ui-common/utils'\n\nimport { IDataExporter } from '../data-exporter'\n\n@Injectable()\nexport class CSVDataExporter implements IDataExporter {\n\n  public readonly name = 'exporter:csv'\n\n  public label = 'CSV'\n\n  public icon = faFileCsv\n\n  public export<T>(data: T[]): Observable<boolean> {\n    // TODO: Fix typing for the dynamic imports\n    return wrapIntoObservable(import('xlsx')).pipe(\n      switchMap((XLSX: any) => {\n        const ws = XLSX.utils.json_to_sheet(data)\n\n        const out = XLSX.utils.sheet_to_csv(ws)\n\n        // NOTE: `out` should not be passed as a string, but the fileDataFromBuffer\n        // function happens to works with a string. When the build issue about the\n        // function argument is figured out then this should be fixed.\n        return from(fileDataFromBuffer(out as any))\n        // return from(fileDataFromBuffer(Buffer.from(out)))\n          .pipe(\n            tap(fileData => {\n              FileSaver.saveAs(fileData.blob, `Export.csv`)\n            }),\n            mapTo(true)\n          )\n      })\n    )\n  }\n\n}\n","import { Injectable } from '@angular/core'\nimport { from, Observable } from 'rxjs'\nimport { mapTo, switchMap, tap } from 'rxjs/operators'\n\nimport { faFileExcel } from '@fortawesome/free-solid-svg-icons'\nimport { Buffer } from 'buffer/'\nimport FileSaver from 'file-saver'\n\nimport { fileDataFromBuffer, wrapIntoObservable } from '@theseam/ui-common/utils'\n\nimport { IDataExporter } from '../data-exporter'\n\n@Injectable()\nexport class XLSXDataExporter implements IDataExporter {\n\n  public readonly name = 'exporter:xlsx'\n\n  public label = 'XLSX'\n\n  public icon = faFileExcel\n\n  public export<T>(data: T[]): Observable<boolean> {\n    // TODO: Fix typing for the dynamic imports\n    return wrapIntoObservable(import('xlsx')).pipe(\n      switchMap((XLSX: any) => {\n        const ws = XLSX.utils.json_to_sheet(data)\n        const wb = { Sheets: { 'data': ws }, SheetNames: ['data'] }\n        const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })\n\n        return from(fileDataFromBuffer(Buffer.from(excelBuffer)))\n          .pipe(\n            tap(fileData => {\n              FileSaver.saveAs(fileData.blob, `Export.xlsx`)\n            }),\n            mapTo(true)\n          )\n      })\n    )\n  }\n\n}\n","import { NgModule } from '@angular/core'\n\nimport { CSVDataExporter } from './exporters/csv-exporter'\nimport { XLSXDataExporter } from './exporters/xlsx-exporter'\n\nimport { THESEAM_DATA_EXPORTER } from './data-exporter'\n\n@NgModule({\n  declarations: [],\n  imports: [],\n  providers: [\n    { provide: THESEAM_DATA_EXPORTER, useClass: CSVDataExporter, multi: true },\n    { provide: THESEAM_DATA_EXPORTER, useClass: XLSXDataExporter, multi: true }\n  ]\n})\nexport class TheSeamDataExporterModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["InjectionToken","switchMap","faFileCsv","wrapIntoObservable","from","fileDataFromBuffer","tap","FileSaver","mapTo","Injectable","faFileExcel","Buffer","NgModule"],"mappings":";;;;;;;;;;QAgCa,qBAAqB,GAAG,IAAIA,mBAAc,CAAgB,qBAAqB,EAAC;aAE7E,cAAc,CAAI,QAA+B;QAC/D,OAAO,UAAC,OAAwB,IAC9B,OAAA,OAAO,CAAC,IAAI,CAACC,mBAAS,CAAC,QAAQ,CAAC,CAAC,GAAA,CAAA;IACrC;;;QC1BA;YAGkB,SAAI,GAAG,cAAc,CAAA;YAE9B,UAAK,GAAG,KAAK,CAAA;YAEb,SAAI,GAAGC,2BAAS,CAAA;SAyBxB;QAvBQ,gCAAM,GAAN,UAAU,IAAS;;YAExB,OAAOC,wBAAkB,CAAC,OAAO,MAAM,CAAC,CAAC,CAAC,IAAI,CAC5CF,mBAAS,CAAC,UAAC,IAAS;gBAClB,IAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAA;gBAEzC,IAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,EAAE,CAAC,CAAA;;;;gBAKvC,OAAOG,SAAI,CAACC,wBAAkB,CAAC,GAAU,CAAC,CAAC;;qBAExC,IAAI,CACHC,aAAG,CAAC,UAAA,QAAQ;oBACVC,6BAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAC,CAAA;iBAC9C,CAAC,EACFC,eAAK,CAAC,IAAI,CAAC,CACZ,CAAA;aACJ,CAAC,CACH,CAAA;SACF;;;;gBA9BFC,eAAU;;;;QCCX;YAGkB,SAAI,GAAG,eAAe,CAAA;YAE/B,UAAK,GAAG,MAAM,CAAA;YAEd,SAAI,GAAGC,6BAAW,CAAA;SAqB1B;QAnBQ,iCAAM,GAAN,UAAU,IAAS;;YAExB,OAAOP,wBAAkB,CAAC,OAAO,MAAM,CAAC,CAAC,CAAC,IAAI,CAC5CF,mBAAS,CAAC,UAAC,IAAS;gBAClB,IAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAA;gBACzC,IAAM,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,CAAC,MAAM,CAAC,EAAE,CAAA;gBAC3D,IAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAA;gBAEvE,OAAOG,SAAI,CAACC,wBAAkB,CAACM,QAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;qBACtD,IAAI,CACHL,aAAG,CAAC,UAAA,QAAQ;oBACVC,6BAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC,CAAA;iBAC/C,CAAC,EACFC,eAAK,CAAC,IAAI,CAAC,CACZ,CAAA;aACJ,CAAC,CACH,CAAA;SACF;;;;gBA1BFC,eAAU;;;;QCGX;;;;;gBARCG,aAAQ,SAAC;oBACR,YAAY,EAAE,EAAE;oBAChB,OAAO,EAAE,EAAE;oBACX,SAAS,EAAE;wBACT,EAAE,OAAO,EAAE,qBAAqB,EAAE,QAAQ,EAAE,eAAe,EAAE,KAAK,EAAE,IAAI,EAAE;wBAC1E,EAAE,OAAO,EAAE,qBAAqB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,KAAK,EAAE,IAAI,EAAE;qBAC5E;iBACF;;;ICdD;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"theseam-ui-common-data-exporter.umd.js","sources":["../../../projects/ui-common/data-exporter/data-exporter.ts","../../../projects/ui-common/data-exporter/exporters/csv-exporter.ts","../../../projects/ui-common/data-exporter/exporters/xlsx-exporter.ts","../../../projects/ui-common/data-exporter/data-exporter.module.ts","../../../projects/ui-common/data-exporter/theseam-ui-common-data-exporter.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core'\nimport { Observable } from 'rxjs'\nimport { switchMap } from 'rxjs/operators'\n\nimport { IconProp } from '@fortawesome/fontawesome-svg-core'\n\nexport type IDataExporterFunction = <T>(data: T[]) => Observable<T[]>\n\nexport interface IDataExporter {\n  /**\n   * Name to identify the exporter.\n   */\n  readonly name: string\n\n  /**\n   * Label to use for exporter in user visible text.\n   *\n   * default: `name`\n   */\n  label?: string\n\n  /**\n   * Icon to represent exporter.\n   */\n  icon?: string | IconProp\n\n  /**\n   * Pass the rows directly to the export function without any mapping.\n   */\n  skipDataMapping?: boolean\n\n  /**\n   * Export the data based on the data to some format.\n   */\n  export<T>(data: T[]): Observable<boolean>\n}\n\nexport const THESEAM_DATA_EXPORTER = new InjectionToken<IDataExporter>('TheSeamDataExporter')\n\nexport function exportOperator<T>(exportFn: IDataExporterFunction) {\n  return (source$: Observable<T[]>) =>\n    source$.pipe(switchMap(exportFn))\n}\n","import { Injectable } from '@angular/core'\nimport { from, Observable } from 'rxjs'\nimport { mapTo, switchMap, tap } from 'rxjs/operators'\n\nimport { faFileCsv } from '@fortawesome/free-solid-svg-icons'\nimport FileSaver from 'file-saver'\n\nimport { fileDataFromBuffer, wrapIntoObservable } from '@theseam/ui-common/utils'\n\nimport { IDataExporter } from '../data-exporter'\n\n@Injectable()\nexport class CSVDataExporter implements IDataExporter {\n\n  public readonly name = 'exporter:csv'\n\n  public label = 'CSV'\n\n  public icon = faFileCsv\n\n  public export<T>(data: T[]): Observable<boolean> {\n    // TODO: Fix typing for the dynamic imports\n    return wrapIntoObservable(import('xlsx')).pipe(\n      switchMap((XLSX: any) => {\n        const ws = XLSX.utils.json_to_sheet(data)\n\n        const out = XLSX.utils.sheet_to_csv(ws)\n\n        // NOTE: `out` should not be passed as a string, but the fileDataFromBuffer\n        // function happens to works with a string. When the build issue about the\n        // function argument is figured out then this should be fixed.\n        return from(fileDataFromBuffer(out as any))\n        // return from(fileDataFromBuffer(Buffer.from(out)))\n          .pipe(\n            tap(fileData => {\n              FileSaver.saveAs(fileData.blob, `Export.csv`)\n            }),\n            mapTo(true)\n          )\n      })\n    )\n  }\n\n}\n","import { Injectable } from '@angular/core'\nimport { from, Observable } from 'rxjs'\nimport { mapTo, switchMap, tap } from 'rxjs/operators'\n\nimport { faFileExcel } from '@fortawesome/free-solid-svg-icons'\nimport { Buffer } from 'buffer/'\nimport FileSaver from 'file-saver'\n\nimport { fileDataFromBuffer, wrapIntoObservable } from '@theseam/ui-common/utils'\n\nimport { IDataExporter } from '../data-exporter'\n\n@Injectable()\nexport class XLSXDataExporter implements IDataExporter {\n\n  public readonly name = 'exporter:xlsx'\n\n  public label = 'XLSX'\n\n  public icon = faFileExcel\n\n  public export<T>(data: T[]): Observable<boolean> {\n    // TODO: Fix typing for the dynamic imports\n    return wrapIntoObservable(import('xlsx')).pipe(\n      switchMap((XLSX: any) => {\n        const ws = XLSX.utils.json_to_sheet(data)\n        const wb = { Sheets: { 'data': ws }, SheetNames: ['data'] }\n        const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })\n\n        return from(fileDataFromBuffer(Buffer.from(excelBuffer)))\n          .pipe(\n            tap(fileData => {\n              FileSaver.saveAs(fileData.blob, `Export.xlsx`)\n            }),\n            mapTo(true)\n          )\n      })\n    )\n  }\n\n}\n","import { NgModule } from '@angular/core'\n\nimport { CSVDataExporter } from './exporters/csv-exporter'\nimport { XLSXDataExporter } from './exporters/xlsx-exporter'\n\nimport { THESEAM_DATA_EXPORTER } from './data-exporter'\n\n@NgModule({\n  declarations: [],\n  imports: [],\n  providers: [\n    { provide: THESEAM_DATA_EXPORTER, useClass: CSVDataExporter, multi: true },\n    { provide: THESEAM_DATA_EXPORTER, useClass: XLSXDataExporter, multi: true }\n  ]\n})\nexport class TheSeamDataExporterModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["InjectionToken","switchMap","faFileCsv","wrapIntoObservable","from","fileDataFromBuffer","tap","FileSaver","mapTo","Injectable","faFileExcel","Buffer","NgModule"],"mappings":";;;;;;;;;;QAqCa,qBAAqB,GAAG,IAAIA,mBAAc,CAAgB,qBAAqB,EAAC;aAE7E,cAAc,CAAI,QAA+B;QAC/D,OAAO,UAAC,OAAwB,IAC9B,OAAA,OAAO,CAAC,IAAI,CAACC,mBAAS,CAAC,QAAQ,CAAC,CAAC,GAAA,CAAA;IACrC;;;QC/BA;YAGkB,SAAI,GAAG,cAAc,CAAA;YAE9B,UAAK,GAAG,KAAK,CAAA;YAEb,SAAI,GAAGC,2BAAS,CAAA;SAyBxB;QAvBQ,gCAAM,GAAN,UAAU,IAAS;;YAExB,OAAOC,wBAAkB,CAAC,OAAO,MAAM,CAAC,CAAC,CAAC,IAAI,CAC5CF,mBAAS,CAAC,UAAC,IAAS;gBAClB,IAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAA;gBAEzC,IAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,EAAE,CAAC,CAAA;;;;gBAKvC,OAAOG,SAAI,CAACC,wBAAkB,CAAC,GAAU,CAAC,CAAC;;qBAExC,IAAI,CACHC,aAAG,CAAC,UAAA,QAAQ;oBACVC,6BAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAC,CAAA;iBAC9C,CAAC,EACFC,eAAK,CAAC,IAAI,CAAC,CACZ,CAAA;aACJ,CAAC,CACH,CAAA;SACF;;;;gBA9BFC,eAAU;;;;QCCX;YAGkB,SAAI,GAAG,eAAe,CAAA;YAE/B,UAAK,GAAG,MAAM,CAAA;YAEd,SAAI,GAAGC,6BAAW,CAAA;SAqB1B;QAnBQ,iCAAM,GAAN,UAAU,IAAS;;YAExB,OAAOP,wBAAkB,CAAC,OAAO,MAAM,CAAC,CAAC,CAAC,IAAI,CAC5CF,mBAAS,CAAC,UAAC,IAAS;gBAClB,IAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAA;gBACzC,IAAM,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,CAAC,MAAM,CAAC,EAAE,CAAA;gBAC3D,IAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAA;gBAEvE,OAAOG,SAAI,CAACC,wBAAkB,CAACM,QAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;qBACtD,IAAI,CACHL,aAAG,CAAC,UAAA,QAAQ;oBACVC,6BAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC,CAAA;iBAC/C,CAAC,EACFC,eAAK,CAAC,IAAI,CAAC,CACZ,CAAA;aACJ,CAAC,CACH,CAAA;SACF;;;;gBA1BFC,eAAU;;;;QCGX;;;;;gBARCG,aAAQ,SAAC;oBACR,YAAY,EAAE,EAAE;oBAChB,OAAO,EAAE,EAAE;oBACX,SAAS,EAAE;wBACT,EAAE,OAAO,EAAE,qBAAqB,EAAE,QAAQ,EAAE,eAAe,EAAE,KAAK,EAAE,IAAI,EAAE;wBAC1E,EAAE,OAAO,EAAE,qBAAqB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,KAAK,EAAE,IAAI,EAAE;qBAC5E;iBACF;;;ICdD;;;;;;;;;;;;;;;;"}

package/bundles/theseam-ui-common-datatable.umd.js

@@ -634,6 +634,44 @@
         _cellTemplateQuery: [{ type: i0.ContentChild, args: [DatatableCellTplDirective, { read: i0.TemplateRef, static: true },] }]
     };
 
+    var DatatableFooterTplDirective = /** @class */ (function () {
+        function DatatableFooterTplDirective(template) {
+            this.template = template;
+        }
+        return DatatableFooterTplDirective;
+    }());
+    DatatableFooterTplDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[seamDatatableFooterTpl]'
+                },] }
+    ];
+    DatatableFooterTplDirective.ctorParameters = function () { return [
+        { type: i0.TemplateRef }
+    ]; };
+
+    var TheSeamDatatableFooterDirective = /** @class */ (function () {
+        function TheSeamDatatableFooterDirective() {
+        }
+        Object.defineProperty(TheSeamDatatableFooterDirective.prototype, "template", {
+            get: function () {
+                return this._templateInput || this._templateQuery;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return TheSeamDatatableFooterDirective;
+    }());
+    TheSeamDatatableFooterDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    // tslint:disable-next-line: directive-selector
+                    selector: 'seam-datatable-footer'
+                },] }
+    ];
+    TheSeamDatatableFooterDirective.propDecorators = {
+        _templateInput: [{ type: i0.Input, args: ['template',] }],
+        _templateQuery: [{ type: i0.ContentChild, args: [DatatableFooterTplDirective, { read: i0.TemplateRef, static: true },] }]
+    };
+
     var DatatableFilterDirective = /** @class */ (function () {
         function DatatableFilterDirective(dataFilters) {
             if (dataFilters && dataFilters.length > 0) {
@@ -1455,7 +1493,7 @@
     DatatableComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'seam-datatable',
-                    template: "<div class=\"datatable-wrapper\">\n  <ng-content select=\"seam-datatable-menu-bar\"></ng-content>\n  <div class=\"datatable-table-wrapper\">\n    <ng-container>\n      <ngx-datatable\n        class=\"bootstrap\"\n        [columnMode]=\"$any(columnMode)\"\n        [scrollbarV]=\"scrollbarV\"\n        [scrollbarH]=\"scrollbarH\"\n        [virtualization]=\"virtualization\"\n        [targetMarkerTemplate]=\"targetMarkerTemplate\"\n        [groupRowsBy]=\"$any(groupRowsBy)\"\n        [groupedRows]=\"$any(groupedRows)\"\n        [selected]=\"$any(selected)\"\n        [externalPaging]=\"externalPaging\"\n        [externalSorting]=\"externalSorting\"\n        [limit]=\"$any(limit)\"\n        [count]=\"$any(count)\"\n        [offset]=\"$any(offset)\"\n        [loadingIndicator]=\"loadingIndicator\"\n        [selectionType]=\"$any(selectionType)\"\n        [reorderable]=\"reorderable\"\n        [swapColumns]=\"swapColumns\"\n        [sortType]=\"$any(sortType)\"\n        [sorts]=\"$any(_sorts)\"\n        [cssClasses]=\"cssClasses\"\n        [messages]=\"messages\"\n        [rowIdentity]=\"$any(rowIdentity)\"\n        [rowClass]=\"rowClass\"\n        [selectCheck]=\"selectCheck\"\n        [displayCheck]=\"$any(displayCheck)\"\n        [groupExpansionDefault]=\"groupExpansionDefault\"\n        [trackByProp]=\"$any(trackByProp)\"\n        [selectAllRowsOnPage]=\"selectAllRowsOnPage\"\n        [treeFromRelation]=\"$any(treeFromRelation)\"\n        [treeToRelation]=\"$any(treeToRelation)\"\n        [summaryRow]=\"summaryRow\"\n        [summaryHeight]=\"$any(summaryHeight)\"\n        [summaryPosition]=\"$any(summaryPosition)\"\n        [rows]=\"rows$ | async\"\n        [columns]=\"$any(displayColumns$ | async)\"\n        [headerHeight]=\"$any(headerHeight)\"\n        [rowHeight]=\"$any(rowHeight)\"\n        [footerHeight]=\"$any(footerHeight)\"\n        (scroll)=\"scroll.emit($event)\"\n        (activate)=\"activate.emit($event)\"\n        (select)=\"select.emit($event)\"\n        (sort)=\"sort.emit($event)\"\n        (page)=\"page.emit($event)\"\n        (reorder)=\"reorder.emit($event)\"\n        (resize)=\"_onResize($event)\"\n        (tableContextmenu)=\"tableContextmenu.emit($event)\"\n        (treeAction)=\"treeAction.emit($event)\"\n        (seamElemResized)=\"onDatatableResize($event)\"\n        (treeAction)=\"_onTreeAction($event)\">\n\n        <ngx-datatable-group-header [rowHeight]=\"50\" #myGroupHeader *ngIf=\"groupRowsBy\">\n          <ng-template let-group=\"group\" let-expanded=\"expanded\" ngx-datatable-group-header-template>\n            <div\n              class=\"w-100 bg-light p-1\"\n              [class.border-bottom]=\"!expanded\"\n              [class.datatable-icon-right]=\"!expanded\"\n              [class.datatable-icon-down]=\"expanded\"\n              title=\"Expand/Collapse Group\"\n              (click)=\"ngxDatatable?.groupHeader?.toggleExpandGroup(group)\">\n              <b>Age: {{ group.age }}</b>\n            </div>\n          </ng-template>\n        </ngx-datatable-group-header>\n\n        <ngx-datatable-row-detail *ngIf=\"rowDetail && rowDetail.template\"\n          [rowHeight]=\"rowDetail.rowHeight || 0\"\n          [template]=\"$any(rowDetail.template)\"\n          (toggle)=\"rowDetail.toggle.emit($event)\">\n        </ngx-datatable-row-detail>\n\n      </ngx-datatable>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #blankHeaderTpl ngx-datatable-header-template></ng-template>\n\n<ng-template #headerTpl ngx-datatable-header-template\n  let-column=\"column\" let-sortFn=\"sortFn\">\n  <strong *ngIf=\"!column.sortable\" class=\"draggable\">{{column.name}}</strong>\n  <strong *ngIf=\"column.sortable\" class=\"datatable-sort-target draggable\" (click)=\"sortFn()\">{{column.name}}</strong>\n  <div class=\"datatable-column-header-separator\"></div>\n</ng-template>\n\n<ng-template #cellTypeSelectorTpl ngx-datatable-cell-template\n  let-value=\"value\" let-rowIndex=\"rowIndex\" let-row=\"row\" let-column=\"column\">\n  <seam-table-cell-type-selector *ngIf=\"row\"\n    [type]=\"column.cellType\"\n    [value]=\"value\"\n    [rowIndex]=\"rowIndex\"\n    [row]=\"row\"\n    [colData]=\"column\">\n  </seam-table-cell-type-selector>\n</ng-template>\n\n<ng-template #actionMenuCellTpl ngx-datatable-cell-template\n  let-value=\"value\" let-rowIndex=\"rowIndex\" let-row=\"row\">\n\n  <ng-container *ngIf=\"row && rowActionItem?.template\">\n    <ng-template\n      [ngTemplateOutlet]=\"$any(rowActionItem?.template)\"\n      [ngTemplateOutletContext]=\"{ $implicit: row, row: row, rowIndex: rowIndex }\">\n    </ng-template>\n  </ng-container>\n\n</ng-template>\n\n<ng-template #treeToggleTpl ngx-datatable-tree-toggle let-tree=\"cellContext\">\n  <button\n    class=\"p-0 bg-transparent border-0 btn\"\n    [disabled]=\"tree.treeStatus==='disabled'\"\n    (click)=\"tree.onTreeAction()\">\n    <span *ngIf=\"tree.treeStatus==='loading'\">\n      <fa-icon [icon]=\"faSpinner\"></fa-icon>\n    </span>\n    <span *ngIf=\"tree.treeStatus==='collapsed'\">\n      <fa-icon [icon]=\"faChevronRight\"></fa-icon>\n    </span>\n    <span *ngIf=\"tree.treeStatus==='expanded'\">\n      <fa-icon [icon]=\"faChevronDown\"></fa-icon>\n    </span>\n    <span *ngIf=\"tree.treeStatus==='disabled'\">\n      <fa-icon [icon]=\"faChevronRight\"></fa-icon>\n    </span>\n  </button>\n</ng-template>\n",
+                    template: "<div class=\"datatable-wrapper\">\n  <ng-content select=\"seam-datatable-menu-bar\"></ng-content>\n  <div class=\"datatable-table-wrapper\">\n    <ng-container>\n      <ngx-datatable\n        [columnMode]=\"$any(columnMode)\"\n        [scrollbarV]=\"scrollbarV\"\n        [scrollbarH]=\"scrollbarH\"\n        [virtualization]=\"virtualization\"\n        [targetMarkerTemplate]=\"targetMarkerTemplate\"\n        [groupRowsBy]=\"$any(groupRowsBy)\"\n        [groupedRows]=\"$any(groupedRows)\"\n        [selected]=\"$any(selected)\"\n        [externalPaging]=\"externalPaging\"\n        [externalSorting]=\"externalSorting\"\n        [limit]=\"$any(limit)\"\n        [count]=\"$any(count)\"\n        [offset]=\"$any(offset)\"\n        [loadingIndicator]=\"loadingIndicator\"\n        [selectionType]=\"$any(selectionType)\"\n        [reorderable]=\"reorderable\"\n        [swapColumns]=\"swapColumns\"\n        [sortType]=\"$any(sortType)\"\n        [sorts]=\"$any(_sorts)\"\n        [cssClasses]=\"cssClasses\"\n        [messages]=\"messages\"\n        [rowIdentity]=\"$any(rowIdentity)\"\n        [rowClass]=\"rowClass\"\n        [selectCheck]=\"selectCheck\"\n        [displayCheck]=\"$any(displayCheck)\"\n        [groupExpansionDefault]=\"groupExpansionDefault\"\n        [trackByProp]=\"$any(trackByProp)\"\n        [selectAllRowsOnPage]=\"selectAllRowsOnPage\"\n        [treeFromRelation]=\"$any(treeFromRelation)\"\n        [treeToRelation]=\"$any(treeToRelation)\"\n        [summaryRow]=\"summaryRow\"\n        [summaryHeight]=\"$any(summaryHeight)\"\n        [summaryPosition]=\"$any(summaryPosition)\"\n        [rows]=\"rows$ | async\"\n        [columns]=\"$any(displayColumns$ | async)\"\n        [headerHeight]=\"$any(headerHeight)\"\n        [rowHeight]=\"$any(rowHeight)\"\n        [footerHeight]=\"$any(footerHeight)\"\n        (scroll)=\"scroll.emit($event)\"\n        (activate)=\"activate.emit($event)\"\n        (select)=\"select.emit($event)\"\n        (sort)=\"sort.emit($event)\"\n        (page)=\"page.emit($event)\"\n        (reorder)=\"reorder.emit($event)\"\n        (resize)=\"_onResize($event)\"\n        (tableContextmenu)=\"tableContextmenu.emit($event)\"\n        (treeAction)=\"treeAction.emit($event)\"\n        (seamElemResized)=\"onDatatableResize($event)\"\n        (treeAction)=\"_onTreeAction($event)\">\n\n        <ngx-datatable-group-header [rowHeight]=\"50\" #myGroupHeader *ngIf=\"groupRowsBy\">\n          <ng-template let-group=\"group\" let-expanded=\"expanded\" ngx-datatable-group-header-template>\n            <div\n              class=\"w-100 bg-light p-1\"\n              [class.border-bottom]=\"!expanded\"\n              [class.datatable-icon-right]=\"!expanded\"\n              [class.datatable-icon-down]=\"expanded\"\n              title=\"Expand/Collapse Group\"\n              (click)=\"ngxDatatable?.groupHeader?.toggleExpandGroup(group)\">\n              <b>Age: {{ group.age }}</b>\n            </div>\n          </ng-template>\n        </ngx-datatable-group-header>\n\n        <ngx-datatable-row-detail *ngIf=\"rowDetail && rowDetail.template\"\n          [rowHeight]=\"rowDetail.rowHeight || 0\"\n          [template]=\"$any(rowDetail.template)\"\n          (toggle)=\"rowDetail.toggle.emit($event)\">\n        </ngx-datatable-row-detail>\n\n        <ngx-datatable-footer *ngIf=\"footer && footer.template\"\n          [template]=\"$any(footer.template)\">\n        </ngx-datatable-footer>\n      </ngx-datatable>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #blankHeaderTpl ngx-datatable-header-template></ng-template>\n\n<ng-template #headerTpl ngx-datatable-header-template\n  let-column=\"column\" let-sortFn=\"sortFn\">\n  <strong *ngIf=\"!column.sortable\" class=\"draggable\">{{column.name}}</strong>\n  <strong *ngIf=\"column.sortable\" class=\"datatable-sort-target draggable\" (click)=\"sortFn()\">{{column.name}}</strong>\n  <div class=\"datatable-column-header-separator\"></div>\n</ng-template>\n\n<ng-template #cellTypeSelectorTpl ngx-datatable-cell-template\n  let-value=\"value\" let-rowIndex=\"rowIndex\" let-row=\"row\" let-column=\"column\">\n  <seam-table-cell-type-selector *ngIf=\"row\"\n    [type]=\"column.cellType\"\n    [value]=\"value\"\n    [rowIndex]=\"rowIndex\"\n    [row]=\"row\"\n    [colData]=\"column\">\n  </seam-table-cell-type-selector>\n</ng-template>\n\n<ng-template #actionMenuCellTpl ngx-datatable-cell-template\n  let-value=\"value\" let-rowIndex=\"rowIndex\" let-row=\"row\">\n\n  <ng-container *ngIf=\"row && rowActionItem?.template\">\n    <ng-template\n      [ngTemplateOutlet]=\"$any(rowActionItem?.template)\"\n      [ngTemplateOutletContext]=\"{ $implicit: row, row: row, rowIndex: rowIndex }\">\n    </ng-template>\n  </ng-container>\n\n</ng-template>\n\n<ng-template #treeToggleTpl ngx-datatable-tree-toggle let-tree=\"cellContext\">\n  <button\n    class=\"p-0 bg-transparent border-0 btn\"\n    [disabled]=\"tree.treeStatus==='disabled'\"\n    (click)=\"tree.onTreeAction()\">\n    <span *ngIf=\"tree.treeStatus==='loading'\">\n      <fa-icon [icon]=\"faSpinner\"></fa-icon>\n    </span>\n    <span *ngIf=\"tree.treeStatus==='collapsed'\">\n      <fa-icon [icon]=\"faChevronRight\"></fa-icon>\n    </span>\n    <span *ngIf=\"tree.treeStatus==='expanded'\">\n      <fa-icon [icon]=\"faChevronDown\"></fa-icon>\n    </span>\n    <span *ngIf=\"tree.treeStatus==='disabled'\">\n      <fa-icon [icon]=\"faChevronRight\"></fa-icon>\n    </span>\n  </button>\n</ng-template>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     animations: [
                         animations.trigger('slideDown', [
@@ -1470,7 +1508,7 @@
                         ])
                     ],
                     providers: [_THESEAM_DATATABLE, DatatableColumnChangesService, _THESEAM_DATATABLE_ACCESSOR],
-                    styles: [":host{display:flex;flex-grow:1;flex-direction:column}::ng-deep .seam-datatable-action-menu{min-width:auto!important}ngx-datatable{position:absolute;top:0;left:0;right:0;bottom:0}.datatable-wrapper{display:flex;flex-direction:column;flex-grow:1}.datatable-wrapper .datatable-table-wrapper{position:relative;flex:1 1 100%}.datatable-column-header-separator{position:absolute;top:12px;bottom:12px;right:0;width:2px;background-color:#e1e3e6}.datatable-sort-target{cursor:pointer}"]
+                    styles: [":host{display:flex;flex-grow:1;flex-direction:column}::ng-deep .seam-datatable-action-menu{min-width:auto!important}ngx-datatable{position:absolute!important;top:0;left:0;right:0;bottom:0}.datatable-wrapper{display:flex;flex-direction:column;flex-grow:1}.datatable-wrapper .datatable-table-wrapper{position:relative;flex:1 1 100%}.datatable-column-header-separator{position:absolute}.datatable-sort-target{cursor:pointer}"]
                 },] }
     ];
     DatatableComponent.ctorParameters = function () { return [
@@ -1535,6 +1573,7 @@
         actionMenu: [{ type: i0.ContentChild, args: [DatatableActionMenuComponent, { static: true },] }],
         rowActionItem: [{ type: i0.ContentChild, args: [DatatableRowActionItemDirective, { static: true },] }],
         rowDetail: [{ type: i0.ContentChild, args: [TheSeamDatatableRowDetailDirective, { static: true },] }],
+        footer: [{ type: i0.ContentChild, args: [TheSeamDatatableFooterDirective, { static: true },] }],
         menuBarComponent: [{ type: i0.ContentChild, args: [DatatableMenuBarComponent,] }],
         ngxDatatable: [{ type: i0.ViewChild, args: [ngxDatatable.DatatableComponent,] }],
         ngxDatatableElement: [{ type: i0.ViewChild, args: [ngxDatatable.DatatableComponent, { read: i0.ElementRef },] }],
@@ -1691,7 +1730,12 @@
                 this._toastr.error(msg, 'Data Export');
             }
             var export$ = this._datatable.rows$
-                .pipe(operators.take(1), operators.map(function (rows) { return _this._mapExportData(_this._datatable.columns || [], rows); }), operators.concatMap(function (data) { return exporter.export(data); }), operators.catchError(function (err) {
+                .pipe(operators.take(1), operators.map(function (rows) {
+                if (exporter.skipDataMapping) {
+                    return rows;
+                }
+                return _this._mapExportData(_this._datatable.columns || [], rows);
+            }), operators.concatMap(function (data) { return exporter.export(data); }), operators.catchError(function (err) {
                 console.error(err);
                 return rxjs.of(false);
             }), operators.tap(function (success) {
@@ -1699,7 +1743,7 @@
                     _this._toastr.success(exporter.label + " export complete.", 'Data Export');
                 }
                 else {
-                    _this._toastr.success(exporter.label + " export failed.", 'Data Export');
+                    _this._toastr.error(exporter.label + " export failed.", 'Data Export');
                 }
             }));
             this._loading.while(export$).subscribe();
@@ -2134,6 +2178,8 @@
                         DatatableExportButtonComponent,
                         TheSeamDatatableRowDetailDirective,
                         DatatableRowDetailTplDirective,
+                        TheSeamDatatableFooterDirective,
+                        DatatableFooterTplDirective,
                         DatatableColumnPreferencesComponent,
                         DatatableColumnPreferencesButtonComponent,
                         DatatableActionMenuItemDirective,
@@ -2176,6 +2222,8 @@
                         DatatableExportButtonComponent,
                         TheSeamDatatableRowDetailDirective,
                         DatatableRowDetailTplDirective,
+                        TheSeamDatatableFooterDirective,
+                        DatatableFooterTplDirective,
                         DatatableColumnPreferencesComponent,
                         DatatableColumnPreferencesButtonComponent,
                         DatatableActionMenuItemDirective,
@@ -2213,6 +2261,7 @@
     exports.DatatableDataSource = DatatableDataSource;
     exports.DatatableExportButtonComponent = DatatableExportButtonComponent;
     exports.DatatableFilterDirective = DatatableFilterDirective;
+    exports.DatatableFooterTplDirective = DatatableFooterTplDirective;
     exports.DatatableGqlDataSource = DatatableGqlDataSource;
     exports.DatatableMenuBarColumnCenterComponent = DatatableMenuBarColumnCenterComponent;
     exports.DatatableMenuBarColumnLeftComponent = DatatableMenuBarColumnLeftComponent;
@@ -2226,6 +2275,7 @@
     exports.THESEAM_DATATABLE = THESEAM_DATATABLE;
     exports.THESEAM_DATATABLE_PREFERENCES_ACCESSOR = THESEAM_DATATABLE_PREFERENCES_ACCESSOR;
     exports.THESEAM_MENUBAR_ITEM_DATA = THESEAM_MENUBAR_ITEM_DATA;
+    exports.TheSeamDatatableFooterDirective = TheSeamDatatableFooterDirective;
     exports.TheSeamDatatableModule = TheSeamDatatableModule;
     exports.TheSeamDatatableRowDetailDirective = TheSeamDatatableRowDetailDirective;
     exports.TheSeamDatatableScrollbarHelperService = TheSeamDatatableScrollbarHelperService;