@bi8/am-data-table/fesm2015/bi8-am-data-table.js

ng update @angular/cli --migrate-only --from=1.7.4 ng update @angular/core yarn add ng-packagr yarn add @angular/material yarn add core-js yarn add @angular/flex-layout yarn add lodash yarn add material-design-icons yarn add roboto-fontface yarn

import { __decorate, __metadata, __param } from 'tslib';
import { InjectionToken, ViewContainerRef, Directive, TemplateRef, ComponentFactoryResolver, ElementRef, Renderer2, ViewChild, Component, ViewEncapsulation, EventEmitter, ChangeDetectorRef, Output, ViewChildren, QueryList, IterableDiffers, Input, Optional, Inject, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Subject } from 'rxjs/Subject';
import { DataSource } from '@angular/cdk/collections';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { kebabCase, isNil, find, without, remove, startCase, get, defaultsDeep, chunk } from 'lodash';
import { takeUntil } from 'rxjs/operator/takeUntil';
import { MatIconModule, MatPaginatorModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import 'rxjs/Rx';

const AM_GRID_DATE_FORMAT = new InjectionToken('am.grid.date.format');
const AM_GRID_DATE_DEFAULT = {
    format: 'fullDate'
};
//=====[ UTILS ]======================================================================================================================================
function toCssFriendly(value) {
    // the string value is typically generated from the column key that may contain '.'
    return value ? value.split('.').map(item => kebabCase(item)).join('-') : value;
}
//=====[ OUTLETS ]====================================================================================================================================
let HeaderRowOutlet = class HeaderRowOutlet {
    constructor(viewContainer) {
        this.viewContainer = viewContainer;
    }
};
HeaderRowOutlet.ctorParameters = () => [
    { type: ViewContainerRef }
];
HeaderRowOutlet = __decorate([
    Directive({ selector: '[headerRowOutlet]' }),
    __metadata("design:paramtypes", [ViewContainerRef])
], HeaderRowOutlet);
let DataRowOutlet = class DataRowOutlet {
    constructor(viewContainer) {
        this.viewContainer = viewContainer;
    }
};
DataRowOutlet.ctorParameters = () => [
    { type: ViewContainerRef }
];
DataRowOutlet = __decorate([
    Directive({ selector: '[dataRowOutlet]' }),
    __metadata("design:paramtypes", [ViewContainerRef])
], DataRowOutlet);
let RowOutlet = class RowOutlet {
    constructor(viewContainer) {
        this.viewContainer = viewContainer;
    }
};
RowOutlet.ctorParameters = () => [
    { type: ViewContainerRef }
];
RowOutlet = __decorate([
    Directive({ selector: '[rowOutlet]' }),
    __metadata("design:paramtypes", [ViewContainerRef])
], RowOutlet);
let ExpanderOutlet = class ExpanderOutlet {
    constructor(viewContainer) {
        this.viewContainer = viewContainer;
    }
};
ExpanderOutlet.ctorParameters = () => [
    { type: ViewContainerRef }
];
ExpanderOutlet = __decorate([
    Directive({ selector: '[expanderOutlet]' }),
    __metadata("design:paramtypes", [ViewContainerRef])
], ExpanderOutlet);
let CellOutlet = class CellOutlet {
    constructor(viewContainer) {
        this.viewContainer = viewContainer;
    }
};
CellOutlet.ctorParameters = () => [
    { type: ViewContainerRef }
];
CellOutlet = __decorate([
    Directive({ selector: '[cellOutlet]' }),
    __metadata("design:paramtypes", [ViewContainerRef])
], CellOutlet);
//=====[ HEADER ROW ]=================================================================================================================================
let HeaderRowDef = class HeaderRowDef {
    constructor(templateRef, viewContainer) {
        this.templateRef = templateRef;
        this.viewContainer = viewContainer;
    }
};
HeaderRowDef.ctorParameters = () => [
    { type: TemplateRef },
    { type: ViewContainerRef }
];
HeaderRowDef = __decorate([
    Directive({
        selector: '[headerRowDef]',
        inputs: ['model: headerRowDef']
    }),
    __metadata("design:paramtypes", [TemplateRef, ViewContainerRef])
], HeaderRowDef);
let HeaderCellDef = class HeaderCellDef {
    constructor(templateRef, viewContainer) {
        this.templateRef = templateRef;
        this.viewContainer = viewContainer;
    }
};
HeaderCellDef.ctorParameters = () => [
    { type: TemplateRef },
    { type: ViewContainerRef }
];
HeaderCellDef = __decorate([
    Directive({
        selector: '[headerCellDef]',
        inputs: ['column: column']
    }),
    __metadata("design:paramtypes", [TemplateRef,
        ViewContainerRef])
], HeaderCellDef);
let HeaderCell = class HeaderCell {
    constructor(componentFactoryResolver, elementRef, renderer) {
        this.componentFactoryResolver = componentFactoryResolver;
        this.elementRef = elementRef;
        this.renderer = renderer;
    }
    ngOnInit() {
        this.renderer.addClass(this.elementRef.nativeElement, `am-header-cell-${toCssFriendly(this.column.config.key)}`);
        this.renderer.setStyle(this.elementRef.nativeElement, 'flex', this.column.styles.flex || 1);
        if (this.column && this.column.styles.minWidth) {
            this.renderer.setStyle(this.elementRef.nativeElement, 'min-width', this.column.styles.minWidth);
        }
        else if (this.column && this.column.model) {
            if (this.column.model.styles.minColumnWidth) {
                this.renderer.setStyle(this.elementRef.nativeElement, 'min-width', this.column.model.styles.minColumnWidth);
            }
        }
        if (this.column.styles.headerCellStyleClasses) {
            this.column.styles.headerCellStyleClasses.forEach((cls, index) => {
                this.renderer.addClass(this.elementRef.nativeElement, cls);
            });
        }
    }
    ngOnChanges(changes) {
    }
    ngOnDestroy() {
    }
    ngAfterContentInit() {
        this.renderCell();
    }
    renderCell() {
        this._cellOutlet.viewContainer.clear();
        if (this.column.config.headingTemplate) {
            this._cellOutlet.viewContainer.createEmbeddedView(this.column.config.headingTemplate, { column: this.column });
        }
        else {
            let formatter = this.column.config.headingFormatter;
            if (formatter) {
                let componentFactory = this.componentFactoryResolver.resolveComponentFactory(formatter);
                let viewContainerRef = this._cellOutlet.viewContainer;
                viewContainerRef.clear();
                let componentRef = viewContainerRef.createComponent(componentFactory);
                componentRef.instance.column = this.column;
            }
            else {
                console.warn(`Could not find header formatter for column with key '${this.column.config.key}'.`);
            }
        }
    }
};
HeaderCell.ctorParameters = () => [
    { type: ComponentFactoryResolver },
    { type: ElementRef },
    { type: Renderer2 }
];
__decorate([
    ViewChild(CellOutlet, { static: true }),
    __metadata("design:type", CellOutlet)
], HeaderCell.prototype, "_cellOutlet", void 0);
HeaderCell = __decorate([
    Component({
        selector: 'header-cell',
        inputs: ['column: column'],
        template: `
    <ng-container cellOutlet></ng-container>
  `,
        host: {
            'class': 'am-header-cell',
            'role': 'row',
        },
        encapsulation: ViewEncapsulation.None
    }),
    __metadata("design:paramtypes", [ComponentFactoryResolver,
        ElementRef,
        Renderer2])
], HeaderCell);
let HeaderRow = class HeaderRow {
    constructor(_changeDetectorRef) {
        this._changeDetectorRef = _changeDetectorRef;
        this.events$ = new EventEmitter();
    }
    ngAfterContentInit() {
        // first we clear the row container
        this._rowOutlet.viewContainer.clear();
        // then render each column
        this.model.columns.forEach((column, index) => {
            this.renderHeaderCell(column);
        });
    }
    renderHeaderCell(column, index) {
        this._rowOutlet.viewContainer.createEmbeddedView(this._headerCellDef.templateRef, { $implicit: column }, index);
    }
    clearCells() {
        this._rowOutlet.viewContainer.clear();
    }
    /**
     * Iterate the changes and apply add/remove/insert operations to the collection of header cells (columns)
     * @todo - can still do the TODO one for moving a column (look at material2 data table sort for an example
     *
     */
    applyColumnChanges(changes) {
        if (!changes) {
            return;
        }
        // remove
        changes.forEachRemovedItem((record) => {
            //console.log("removing existing cell", record);
            this._rowOutlet.viewContainer.remove(record.previousIndex);
            this.events$.emit({
                type: GridEventType.ColumnRemoved,
                data: record
            });
        });
        // add, insert
        changes.forEachAddedItem((record) => {
            //console.log("adding/inserting new cell for new column", record);
            this.renderHeaderCell(record.item, record.currentIndex);
            this.events$.emit({
                type: GridEventType.ColumnAdded,
                data: record
            });
        });
        // then tell Angular to do it's checks
        this._changeDetectorRef.markForCheck();
    }
};
HeaderRow.ctorParameters = () => [
    { type: ChangeDetectorRef }
];
__decorate([
    Output('events'),
    __metadata("design:type", Object)
], HeaderRow.prototype, "events$", void 0);
__decorate([
    ViewChild(RowOutlet, { static: true }),
    __metadata("design:type", RowOutlet)
], HeaderRow.prototype, "_rowOutlet", void 0);
__decorate([
    ViewChild(HeaderCellDef, { static: true }),
    __metadata("design:type", HeaderCellDef)
], HeaderRow.prototype, "_headerCellDef", void 0);
__decorate([
    ViewChildren(HeaderCell),
    __metadata("design:type", QueryList)
], HeaderRow.prototype, "headerCells", void 0);
HeaderRow = __decorate([
    Component({
        selector: 'header-row',
        inputs: ['model: model'],
        template: `
    <div *ngIf="model.config.showExpander" class="am-header-expander-column"></div>
    <ng-container rowOutlet></ng-container>
    <ng-container>
      <header-cell *headerCellDef="let column;" [column]="column"></header-cell>
      <!--<header-cell *headerCellDef="let column as column;" [column]="column"></header-cell>-->
    </ng-container>
  `,
        host: {
            'class': 'am-header-row',
            'role': 'row',
        },
        encapsulation: ViewEncapsulation.None
    }),
    __metadata("design:paramtypes", [ChangeDetectorRef])
], HeaderRow);
let DataRowDef = class DataRowDef {
    constructor(templateRef, viewContainer) {
        this.templateRef = templateRef;
        this.viewContainer = viewContainer;
    }
};
DataRowDef.ctorParameters = () => [
    { type: TemplateRef },
    { type: ViewContainerRef }
];
DataRowDef = __decorate([
    Directive({ selector: '[dataRowDef]', }),
    __metadata("design:paramtypes", [TemplateRef,
        ViewContainerRef])
], DataRowDef);
let DataCellDef = class DataCellDef {
    constructor(templateRef, viewContainer) {
        this.templateRef = templateRef;
        this.viewContainer = viewContainer;
    }
};
DataCellDef.ctorParameters = () => [
    { type: TemplateRef },
    { type: ViewContainerRef }
];
DataCellDef = __decorate([
    Directive({ selector: '[dataCellDef]', }),
    __metadata("design:paramtypes", [TemplateRef,
        ViewContainerRef])
], DataCellDef);
let DataCell = class DataCell {
    constructor(componentFactoryResolver, elementRef, renderer) {
        this.componentFactoryResolver = componentFactoryResolver;
        this.elementRef = elementRef;
        this.renderer = renderer;
    }
    ngOnInit() {
        this.renderer.addClass(this.elementRef.nativeElement, `am-data-cell-${toCssFriendly(this.column.config.key)}`);
        this.renderer.setStyle(this.elementRef.nativeElement, 'flex', this.column.styles.flex || 1);
        if (this.column && this.column.styles.minWidth) {
            this.renderer.setStyle(this.elementRef.nativeElement, 'min-width', this.column.styles.minWidth);
        }
        else if (this.column && this.column.model) {
            if (this.column.model.styles.minColumnWidth) {
                this.renderer.setStyle(this.elementRef.nativeElement, 'min-width', this.column.model.styles.minColumnWidth);
            }
        }
        if (this.column.styles.dataCellStyleClasses) {
            this.column.styles.dataCellStyleClasses.forEach((cls, index) => {
                this.renderer.addClass(this.elementRef.nativeElement, cls);
            });
        }
    }
    ngAfterContentInit() {
        this.renderCell();
    }
    renderCell() {
        /////////////console.log('DataCell: row:', this.row);
        /////////////console.log('DataCell: column:', this.column);
        //console.log(`rendering: ${this.column.config.key}`);
        this._cellOutlet.viewContainer.clear();
        if (this.column.config.dataTemplate) {
            this._cellOutlet.viewContainer.createEmbeddedView(this.column.config.dataTemplate, { column: this.column, row: this.row });
        }
        else {
            let formatter = this.column.config.formatter;
            if (formatter) {
                let componentFactory = this.componentFactoryResolver.resolveComponentFactory(formatter);
                let viewContainerRef = this._cellOutlet.viewContainer;
                viewContainerRef.clear();
                let componentRef = viewContainerRef.createComponent(componentFactory);
                componentRef.instance.column = this.column;
                componentRef.instance.row = this.row;
            }
            else {
                console.warn(`Could not find data formatter for column with key '${this.column.config.key}'.`);
            }
        }
    }
};
DataCell.ctorParameters = () => [
    { type: ComponentFactoryResolver },
    { type: ElementRef },
    { type: Renderer2 }
];
__decorate([
    ViewChild(CellOutlet, { static: true }),
    __metadata("design:type", CellOutlet)
], DataCell.prototype, "_cellOutlet", void 0);
DataCell = __decorate([
    Component({
        selector: 'data-cell',
        inputs: ['column: column', 'row: row'],
        template: `
    <ng-container cellOutlet></ng-container>
  `,
        host: {
            'class': 'am-data-cell',
            'role': 'row',
        },
        encapsulation: ViewEncapsulation.None
    }),
    __metadata("design:paramtypes", [ComponentFactoryResolver,
        ElementRef,
        Renderer2])
], DataCell);
const EXPANDER_ICON_CLOSED = 'keyboard_arrow_right';
const EXPANDER_ICON_OPEN = 'keyboard_arrow_down';
let DataRow = class DataRow {
    constructor(_changeDetectorRef) {
        this._changeDetectorRef = _changeDetectorRef;
        this.events$ = new EventEmitter();
        this.selected = false;
        this.expanderIcon = EXPANDER_ICON_CLOSED;
    }
    rowClicked(event) {
        this.events$.emit({
            type: GridEventType.RowClicked,
            data: this
        });
    }
    selectRow() {
        this.row.selected = true;
    }
    deselectRow() {
        this.row.selected = false;
    }
    isSelected() {
        return this.row.selected;
    }
    rowClass() {
        if (this.row.model.styles.dataRowStyleResolver) {
            return this.row.model.styles.dataRowStyleResolver(this.row);
        }
        else {
            return this.row.selected ? ['default-selected-row'] : null;
        }
    }
    cellClass(column) {
        if (column.styles.dataCellStyleResolver) {
            return column.styles.dataCellStyleResolver(this.row, column);
        }
        else {
            return null;
        }
    }
    ngAfterContentInit() {
        /////////////console.log("DataRow: model:", this.row.model);
        /////////////console.log("DataRow: row:", this.row.data);
        // first we clear the row container
        this._rowOutlet.viewContainer.clear();
        // then render each column
        this.row.model.columns.forEach((column, index) => {
            this.renderDataCell(column);
        });
    }
    renderDataCell(column, index) {
        this._rowOutlet.viewContainer.createEmbeddedView(this._dataCellDef.templateRef, { $implicit: column, row: this.row }, index);
    }
    /**
     * Iterate the changes and apply add/remove/insert operations to the collection of header cells (columns)
     * @todo - can still do the TODO one for moving a column (look at material2 data table sort for an example
     *
     */
    applyColumnChanges(changes) {
        if (!changes) {
            return;
        }
        // add, insert
        changes.forEachAddedItem((record) => {
            /////////////console.log("adding/inserting new cell for new column", record);
            this.renderDataCell(record.item, record.currentIndex);
        });
        // remove
        changes.forEachRemovedItem((record) => {
            /////////////console.log("removing existing cell", record);
            this._rowOutlet.viewContainer.remove(record.previousIndex);
        });
        // then tell Angular to do it's checks
        this._changeDetectorRef.markForCheck();
    }
    toggleExpander() {
        this._expanderOutlet.viewContainer.clear();
        if (this.row.expanded) {
            this.row.expanded = false;
            this.expanderIcon = EXPANDER_ICON_CLOSED;
        }
        else {
            this.row.expanded = true;
            this.expanderIcon = EXPANDER_ICON_OPEN;
            if (this.row.model.config.expanderTemplate) {
                this._expanderOutlet.viewContainer.createEmbeddedView(this.row.model.config.expanderTemplate, { row: this.row });
            }
        }
        this.events$.emit({
            type: this.row.expanded ? GridEventType.RowExpanded : GridEventType.RowContracted,
            data: this.row
        });
    }
};
DataRow.ctorParameters = () => [
    { type: ChangeDetectorRef }
];
__decorate([
    Output('events'),
    __metadata("design:type", Object)
], DataRow.prototype, "events$", void 0);
__decorate([
    ViewChild(RowOutlet, { static: true }),
    __metadata("design:type", RowOutlet)
], DataRow.prototype, "_rowOutlet", void 0);
__decorate([
    ViewChild(DataCellDef, { static: true }),
    __metadata("design:type", DataCellDef)
], DataRow.prototype, "_dataCellDef", void 0);
__decorate([
    ViewChildren(DataCell),
    __metadata("design:type", QueryList)
], DataRow.prototype, "dataCells", void 0);
__decorate([
    ViewChild(ExpanderOutlet, { static: true }),
    __metadata("design:type", ExpanderOutlet)
], DataRow.prototype, "_expanderOutlet", void 0);
DataRow = __decorate([
    Component({
        selector: 'data-row',
        inputs: ['row: row'],
        template: `
    <!-- 
         
    Expander Status - show/hide/disable (also with a tooltip)
    Expander Type - Chevron (expand/contract), Slider (slide-in/slide-out)   
    
    rowDataFormatter {
      span: [
        ['firstName','lastName']        
      ]
      
      colSpan: ['firstName','lastName']
    }
    
    GridColumn
    StackedGridColumn
    
     
    
    emit({
      type: RowExpanded / RowContracted,
      data: record
    })
    
    emit({
      type: RowAdded, RowRemoved
      data: record
    })
            
    
    I would also like the ability 
 
    [ wildcard search ] - across all columns        
    ---------------------------------------------------------------------   
    |    | First Name            |  Mobile      |  Birth Date           |
    |    | Surname               |  Email       |  Age                  |
    ---------------------------------------------------------------------
    ===================================================================== 
    [F]: | [ First Name        ] | [ Mobile   ] | [DATE-FORM] [DATE-TO] |
           [ Last Name         ] | [ Email    ] |                       |
    =====================================================================
         | Manie                 |  Coetzee      |  77/05/05            |
      >  | Coetzee               |  mc@bla.com   |  40                  |
    ---------------------------------------------------------------------
         |           |                             13 Pioneer Road      |
         | [ADDRESS] |                             Durbanville          |
         |           |                             7550                 |
    ---------------------------------------------------------------------
    EXPANDER
    =====================================================================
    \                                                                   \
    \                                                                   \
    \                                                                   \
    \                                                                   \
    =====================================================================
    -->

    <div style="flex: 1 1 auto; cursor: pointer;" [ngClass]="rowClass()" (click)="rowClicked($event)">
      <div style="display: flex; flex: 1 1 auto;" [ngClass]="{'am-expanded-row': row.expanded && !rowClass()}">
        <div *ngIf="row.model.config.showExpander" class="am-header-expander-column">
          <mat-icon (click)="toggleExpander()">{{expanderIcon}}</mat-icon>
        </div>
        <ng-container rowOutlet></ng-container>
      </div>
      <div style="flex: 1 1 auto;" [ngClass]="{'am-expander-row': row.expanded}">
        <ng-container expanderOutlet></ng-container>
      </div>
    </div>
    <ng-container>
      <data-cell *dataCellDef="let column; " [column]="column" [row]="row" [ngClass]="cellClass(column)"></data-cell>
    </ng-container>
  `,
        host: {
            'class': 'am-data-row',
            'role': 'row',
        },
        encapsulation: ViewEncapsulation.None
    }),
    __metadata("design:paramtypes", [ChangeDetectorRef])
], DataRow);
//=====[ GRID COMPONENT ]=============================================================================================================================
let GridComponent = class GridComponent {
    constructor(_differs, _changeDetectorRef) {
        this._differs = _differs;
        this._changeDetectorRef = _changeDetectorRef;
        this.events$ = new EventEmitter();
        this.data = [];
        this.onDestroy = new Subject();
        this.viewChange = new BehaviorSubject({ start: 0, end: Number.MAX_VALUE });
        this.gridDefaults = new GridDefaults();
    }
    get dataSource() {
        return this._dataSource;
    }
    set dataSource(dataSource) {
        if (this._dataSource !== dataSource) {
            this.switchDataSource(dataSource);
        }
    }
    toggleRowExpander(index) {
        try {
            this.dataRows.toArray()[index].toggleExpander();
        }
        catch (error) {
            console.log(error);
        }
    }
    emit(event) {
        if (event.type == GridEventType.RowClicked) {
            this.events$.emit(event);
            let clickedDataRow = event.data;
            let isCurrentselected = false;
            this.dataRows.forEach((dataRow) => {
                if (dataRow.isSelected()) {
                    if (dataRow == clickedDataRow) {
                        isCurrentselected = true;
                    }
                    // first we deselect it
                    dataRow.deselectRow();
                    // then we notify
                    this.events$.emit({
                        type: GridEventType.RowDeselected,
                        data: dataRow
                    });
                }
            });
            if (!isCurrentselected) {
                clickedDataRow.selectRow();
                this.events$.emit({
                    type: GridEventType.RowSelected,
                    data: clickedDataRow
                });
            }
        }
        //console.log(`Grid Event ${GridEventType[event.type]}:`, event);
        this.events$.emit(event);
    }
    ngOnInit() {
        // create the columns differ to track changes to the column array
        this.columnsDiffer = this._differs.find(this.model.columns).create();
        this.dataDiffer = this._differs.find([]).create();
        this.model.grid = this;
    }
    ngAfterContentInit() {
        // make sure that all the column override/default templates/formatters are applied
        this.gridDefaults.applyDefaults(this.model.columns);
        // do the initial diff so that the next one will show any changes when doing the next diff
        this.columnsDiffer.diff(this.model.columns);
        // ok, lets setup/render the header row
        this.setupHeader();
        this.observeModel();
        this.observeDataSource();
    }
    ngAfterContentChecked() {
    }
    ngAfterViewInit() {
        //this.toggleRowExpander(this.model.config.expandRowIndex);
        //console.log("GridComponent: ngAfterViewInit");
        //this.model.grid = this;
        this.emit({
            type: GridEventType.Initialized,
            data: this.model
        });
    }
    ngAfterViewChecked() {
        //this.toggleRowExpander(this.model.config.expandRowIndex);
        this._changeDetectorRef.detectChanges();
    }
    ngOnChanges(changes) {
        //console.log("GridComponent: ngOnChanges", this.model);
    }
    ngOnDestroy() {
        this.onDestroy.next();
        this.onDestroy.complete();
        if (this.dataSource) {
            this.dataSource.disconnect(this);
        }
        // clean up the subscription to the grid model when we are destroyed
        if (this.modelSubscription) {
            this.modelSubscription.unsubscribe();
            this.modelSubscription = null;
        }
    }
    setupHeader() {
        // lets clear the row outlet container to make sure everything is squeeky clean
        this._headerRowOutlet.viewContainer.clear();
        // render the template that contains the header row component
        this._headerRowOutlet.viewContainer.createEmbeddedView(this._headerRowDef.templateRef, { $implicit: this.model });
    }
    gridModelChanged(event) {
        // always apply defaults (default data and header formatter if none specified)
        this.gridDefaults.applyDefaults(this.model.columns);
        // first we do the diff to get the changes (if any)
        let changes = this.columnsDiffer.diff(this.model.columns);
        //@todo - need a way to update columns - could basically just add
        /*if (event && event.type == GridModelEventType.UPDATE){
          // if this is an update
          this.columnsDiffer.diff([]);
          changes = this.columnsDiffer.diff(this.model.columns);
          this.headerRow.clearCells();
        }*/
        // tell header row to look at the changes to insert/update/remove where required
        this.headerRow.applyColumnChanges(changes);
        this.dataRows.forEach((dataRow, index) => {
            dataRow.applyColumnChanges(changes);
        });
        // make sure that our component is checked for any other changes
        this._changeDetectorRef.markForCheck();
    }
    dataSourceDataChanged() {
        const changes = this.dataDiffer.diff(this.data);
        if (!changes) {
            return;
        }
        // remove
        changes.forEachRemovedItem((record) => {
            //console.log("removing existing row", record);
            this._dataRowOutlet.viewContainer.remove(record.previousIndex);
            this.emit({
                type: GridEventType.RowRemoved,
                data: record
            });
        });
        // add, insert
        changes.forEachAddedItem((record) => {
            //console.log("adding/inserting new row", record);
            let rowContext = {
                data: record.item,
                model: this.model,
                expanded: false
            };
            this._dataRowOutlet.viewContainer.createEmbeddedView(this._dataRowDef.templateRef, { $implicit: rowContext }, record.currentIndex);
            this.emit({
                type: GridEventType.RowAdded,
                data: record
            });
        });
        //@Todo - not the right place - just a temporary work around
        this.emit({
            type: GridEventType.Reloaded,
            data: this.data
        });
        // we need to wait one tick for the rows to be rendered before trying to toggle them
        setTimeout(() => {
            // we just want to do this once.  We can always call the toggleExpander manually but you would have to do it after the data has been loaded
            if (this.model.config.expandRowIndex > -1) {
                this.toggleRowExpander(this.model.config.expandRowIndex);
                this.model.config.expandRowIndex = -1;
            }
        }, 0);
        // then tell Angular to do it's checks
        this._changeDetectorRef.markForCheck();
    }
    switchDataSource(dataSource) {
        this.data = [];
        if (this._dataSource) {
            this._dataSource.disconnect(this);
        }
        // Stop listening for data from the previous data source.
        if (this.dataSubscription) {
            this.dataSubscription.unsubscribe();
            this.dataSubscription = null;
        }
        this._dataSource = dataSource;
    }
    observeModel() {
        this.modelSubscription = this.model._changes.subscribe((event) => {
            this.gridModelChanged(event);
        });
    }
    observeDataSource() {
        if (this.dataSource && !this.dataSubscription) {
            this.dataSubscription = takeUntil.call(this.dataSource.connect(this), this.onDestroy).subscribe(data => {
                this.data = data;
                this.dataSourceDataChanged();
            });
        }
    }
};
GridComponent.ctorParameters = () => [
    { type: IterableDiffers },
    { type: ChangeDetectorRef }
];
__decorate([
    Output('events'),
    __metadata("design:type", Object)
], GridComponent.prototype, "events$", void 0);
__decorate([
    Input(),
    __metadata("design:type", GridModel)
], GridComponent.prototype, "model", void 0);
__decorate([
    Input(),
    __metadata("design:type", DataSource),
    __metadata("design:paramtypes", [DataSource])
], GridComponent.prototype, "dataSource", null);
__decorate([
    ViewChild(HeaderRowOutlet, { static: true }),
    __metadata("design:type", HeaderRowOutlet)
], GridComponent.prototype, "_headerRowOutlet", void 0);
__decorate([
    ViewChild(HeaderRowDef, { static: true }),
    __metadata("design:type", HeaderRowDef)
], GridComponent.prototype, "_headerRowDef", void 0);
__decorate([
    ViewChild('headerRow', { static: true }),
    __metadata("design:type", TemplateRef)
], GridComponent.prototype, "headerRowTemplate", void 0);
__decorate([
    ViewChild(HeaderRow, { static: false }),
    __metadata("design:type", HeaderRow)
], GridComponent.prototype, "headerRow", void 0);
__decorate([
    ViewChild(DataRowOutlet, { static: true }),
    __metadata("design:type", DataRowOutlet)
], GridComponent.prototype, "_dataRowOutlet", void 0);
__decorate([
    ViewChild(DataRowDef, { static: true }),
    __metadata("design:type", DataRowDef)
], GridComponent.prototype, "_dataRowDef", void 0);
__decorate([
    ViewChildren(DataRow),
    __metadata("design:type", QueryList)
], GridComponent.prototype, "dataRows", void 0);
GridComponent = __decorate([
    Component({
        selector: 'am-data-grid',
        template: `
    <div class="am-grid">
      <ng-container headerRowOutlet></ng-container>
      <ng-container dataRowOutlet></ng-container>
      <ng-container>
        <header-row *headerRowDef="let model" [model]="model" (events)="emit($event)"></header-row>
        <data-row *dataRowDef="let row" [row]="row" (events)="emit($event)"></data-row>
      </ng-container>
    </div>
  `,
        encapsulation: ViewEncapsulation.None
    }),
    __metadata("design:paramtypes", [IterableDiffers,
        ChangeDetectorRef])
], GridComponent);
var GridEventType;
(function (GridEventType) {
    GridEventType[GridEventType["RowExpanded"] = 0] = "RowExpanded";
    GridEventType[GridEventType["RowContracted"] = 1] = "RowContracted";
    GridEventType[GridEventType["RowRemoved"] = 2] = "RowRemoved";
    GridEventType[GridEventType["RowAdded"] = 3] = "RowAdded";
    GridEventType[GridEventType["Reloaded"] = 4] = "Reloaded";
    GridEventType[GridEventType["ColumnRemoved"] = 5] = "ColumnRemoved";
    GridEventType[GridEventType["ColumnAdded"] = 6] = "ColumnAdded";
    GridEventType[GridEventType["DataChange"] = 7] = "DataChange";
    GridEventType[GridEventType["Initialized"] = 8] = "Initialized";
    GridEventType[GridEventType["RowClicked"] = 9] = "RowClicked";
    GridEventType[GridEventType["RowSelected"] = 10] = "RowSelected";
    GridEventType[GridEventType["RowDeselected"] = 11] = "RowDeselected";
})(GridEventType || (GridEventType = {}));
var GridModelEventType;
(function (GridModelEventType) {
    GridModelEventType[GridModelEventType["ADD"] = 0] = "ADD";
    GridModelEventType[GridModelEventType["REMOVE"] = 1] = "REMOVE";
    GridModelEventType[GridModelEventType["UPDATE"] = 2] = "UPDATE";
})(GridModelEventType || (GridModelEventType = {}));
class GridModel {
    constructor(config, styles = {}) {
        this.columns = [];
        this._changes = new Subject();
        this.config = {
            selection: !isNil(config.selection) ? config.selection : false,
            showExpander: !isNil(config.showExpander) ? config.showExpander : false,
            expanderFormatter: !isNil(config.expanderFormatter) ? config.expanderFormatter : null,
            expanderTemplate: !isNil(config.expanderTemplate) ? config.expanderTemplate : null,
            expandRowIndex: config.expandRowIndex
        };
        this.styles = {
            containerClasses: !isNil(styles.containerClasses) ? styles.containerClasses : [],
            gridClasses: !isNil(styles.containerClasses) ? styles.containerClasses : [],
            scrollX: !isNil(styles.scrollX) ? styles.scrollX : false,
            minColumnWidth: !isNil(styles.minColumnWidth) ? styles.minColumnWidth : null,
            dataRowStyleResolver: styles.dataRowStyleResolver || null
        };
    }
    toggleExpander(index) {
        this.grid.toggleRowExpander(index);
    }
    addColumn(column) {
        column.model = this;
        this.columns.push(column);
        this.notifyChanges(GridModelEventType.ADD);
    }
    getColumnByKey(key) {
        return find(this.columns, { config: { key: key } });
    }
    insertColumn(column, index) {
        //column.model = this;
        this.columns.splice(index, 0, column);
        this.notifyChanges(GridModelEventType.ADD);
    }
    removeColumn(column) {
        this.columns = without(this.columns, column);
        this.notifyChanges(GridModelEventType.REMOVE);
    }
    removeColumnByIndex(index) {
        this.columns.splice(index, 1);
        this.notifyChanges(GridModelEventType.REMOVE);
    }
    removeColumnsByKey(key) {
        remove(this.columns, (column) => {
            return column.config.key == key;
        });
        this.notifyChanges(GridModelEventType.REMOVE);
    }
    updateStyles() {
        this.notifyChanges(GridModelEventType.UPDATE, null);
    }
    updateColumn(column) {
        let index = this.columns.indexOf(column);
        if (index > -1) {
            this.columns[index] = column;
        }
        this.notifyChanges(GridModelEventType.UPDATE, column);
    }
    removeAll() {
        this.columns = [];
        this.notifyChanges(GridModelEventType.REMOVE);
    }
    notifyChanges(type, column) {
        this._changes.next({
            type: type,
            column: column,
            columns: this.columns
        });
    }
}
class GridColumn {
    constructor(config, styles = {}, options = {}) {
        this.refresh = false;
        this.config = {
            key: config.key,
            type: config.type || 'text',
            heading: config.heading,
            sortable: !isNil(config.sortable) ? config.sortable : false,
            noHeading: config.noHeading,
            headingFormatter: config.headingFormatter || GridKeyHeaderFormatter,
            formatter: config.formatter,
            context: config.context || {},
            headingTemplate: config.headingTemplate,
            dataTemplate: config.dataTemplate
        };
        this.styles = {
            headerCellStyleClasses: !isNil(styles.headerCellStyleClasses) ? styles.headerCellStyleClasses : [],
            filterCellStyleClasses: !isNil(styles.filterCellStyleClasses) ? styles.filterCellStyleClasses : [],
            dataCellStyleClasses: !isNil(styles.dataCellStyleClasses) ? styles.dataCellStyleClasses : [],
            flex: !isNil(styles.flex) ? styles.flex : 1,
            minWidth: !isNil(styles.minWidth) ? styles.minWidth : null,
            maxWidth: !isNil(styles.maxWidth) ? styles.maxWidth : null,
            dataCellStyleResolver: styles.dataCellStyleResolver || null
        };
        if (!this.config.heading && !this.config.noHeading) {
            let tempHeading = this.config.key;
            this.config.heading = '';
            tempHeading.split('.').forEach((name, index) => {
                this.config.heading += startCase(name) + ' ';
            });
        }
        this.options = options;
    }
}
let GridPropertyFormatter = class GridPropertyFormatter {
    getValue() {
        return get(this.row.data, this.column.config.key);
        /*
        try {
          return eval(`this.row.data.${this.column.config.key}`);
        } catch (error){
          return null;
        }
        */
    }
};
__decorate([
    Input(),
    __metadata("design:type", GridColumn)
], GridPropertyFormatter.prototype, "column", void 0);
__decorate([
    Input(),
    __metadata("design:type", Object)
], GridPropertyFormatter.prototype, "row", void 0);
GridPropertyFormatter = __decorate([
    Component({
        template: `{{getValue()}}`
    })
], GridPropertyFormatter);
let GridDateFormatter = class GridDateFormatter extends GridPropertyFormatter {
    constructor(gridDateFormat) {
        super();
        this.gridDateFormat = gridDateFormat;
        //console.log("=======================***> ", this.gridDateFormat);
        if (!gridDateFormat) {
            //console.log("DHO!!@ ", this.gridDateFormat);
            this.gridDateFormat = {
                format: 'fullDate'
            };
        }
    }
    getFormat() {
        return this.column.options.dateFormat || this.gridDateFormat.format;
    }
};
GridDateFormatter.ctorParameters = () => [
    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [AM_GRID_DATE_FORMAT,] }] }
];
__decorate([
    Input(),
    __metadata("design:type", GridColumn)
], GridDateFormatter.prototype, "column", void 0);
__decorate([
    Input(),
    __metadata("design:type", Object)
], GridDateFormatter.prototype, "row", void 0);
GridDateFormatter = __decorate([
    Component({
        template: `{{getValue() || '' | date : getFormat()}}`
    }),
    __param(0, Optional()), __param(0, Inject(AM_GRID_DATE_FORMAT)),
    __metadata("design:paramtypes", [Object])
], GridDateFormatter);
let GridKeyHeaderFormatter = class GridKeyHeaderFormatter {
};
__decorate([
    Input(),
    __metadata("design:type", GridColumn)
], GridKeyHeaderFormatter.prototype, "column", void 0);
GridKeyHeaderFormatter = __decorate([
    Component({
        template: `{{column.config.heading}}`
    })
], GridKeyHeaderFormatter);
//=====[ GRID DEFAULTS ]==============================================================================================================================
class GridDefaults {
    constructor() {
        this.columns = new Map();
        let dateCol = new GridColumn({
            type: 'date',
            key: 'date',
            formatter: GridDateFormatter
        }, {}, {
        //dateFormat: 'fullDate'
        });
        let textCol = new GridColumn({ type: 'text', key: 'text', formatter: GridPropertyFormatter });
        this.setDefaultColumn(dateCol.config.type, dateCol);
        this.setDefaultColumn(textCol.config.type, textCol);
    }
    setDefaultColumn(type, column) {
        this.columns.set(type, column);
    }
    getDefaultColumn(type) {
        return this.columns.get(type);
    }
    applyDefaults(columns) {
        if (!columns || columns.length == 0) {
            return;
        }
        columns.forEach((column, index) => {
            let defaultColumn = this.getDefaultColumn(column.config.type);
            if (defaultColumn) {
                defaultsDeep(column, defaultColumn);
                //console.log(column);
            }
        });
    }
}

const ɵ0 = AM_GRID_DATE_DEFAULT;
let AmDataTableModule = class AmDataTableModule {
};
AmDataTableModule = __decorate([
    NgModule({
        imports: [
            CommonModule,
            BrowserAnimationsModule,
            MatIconModule,
            MatPaginatorModule,
        ],
        exports: [
            GridComponent
        ],
        declarations: [
            GridComponent,
            HeaderRowDef,
            HeaderRow,
            HeaderCellDef,
            HeaderCell,
            DataRowDef,
            DataRow,
            DataCellDef,
            DataCell,
            HeaderRowOutlet,
            DataRowOutlet,
            RowOutlet,
            ExpanderOutlet,
            CellOutlet,
            GridKeyHeaderFormatter,
            GridPropertyFormatter,
            GridDateFormatter
        ],
        entryComponents: [
            GridKeyHeaderFormatter,
            GridPropertyFormatter,
            GridDateFormatter
        ],
        providers: [
            { provide: AM_GRID_DATE_FORMAT, useValue: ɵ0 }
        ]
    })
], AmDataTableModule);

class ArrayDS extends DataSource {
    constructor(paginator) {
        super();
        this.paginator = paginator;
        this.itemSource$ = new BehaviorSubject([]);
        this.items = [];
        this.pageSize = 5;
        this.pageIndex = 0;
        this.totalSize = 0;
        if (this.paginator) {
            this.paginator.page.subscribe((event) => {
                this.pageSize = event.pageSize;
                this.pageIndex = event.pageIndex;
                this.reload();
            });
        }
    }
    connect() {
        return this.itemSource$.asObservable();
    }
    disconnect() {
    }
    reload() {
        this.totalSize = this.items.length;
        let pages = chunk(this.items, this.pageSize);
        this.itemSource$.next(pages[this.pageIndex]);
    }
    addAll(items) {
        this.items = this.items.concat(items);
        this.reload();
    }
    addItem(item) {
        this.items.push(item);
        this.reload();
    }
    insertItem(item, index) {
        this.items.splice(index, 0, item);
        this.reload();
    }
    removeColumn(item) {
        this.items = without(this.items, item);
        this.reload();
    }
    removeItemByIndex(index) {
        this.items.splice(index, 1);
        this.reload();
    }
    removeAll() {
        this.items = [];
        this.reload();
    }
}

var Operation;
(function (Operation) {
    Operation[Operation["gt"] = 0] = "gt";
    Operation[Operation["lt"] = 1] = "lt";
    Operation[Operation["gte"] = 2] = "gte";
    Operation[Operation["lte"] = 3] = "lte";
    Operation[Operation["eq"] = 4] = "eq";
    Operation[Operation["ieq"] = 5] = "ieq";
    Operation[Operation["neq"] = 6] = "neq";
    Operation[Operation["ineq"] = 7] = "ineq";
    Operation[Operation["like"] = 8] = "like";
    Operation[Operation["ilike"] = 9] = "ilike"; // case insensitive like
})(Operation || (Operation = {}));
var SortOrder;
(function (SortOrder) {
    SortOrder[SortOrder["asc"] = 0] = "asc";
    SortOrder[SortOrder["desc"] = 1] = "desc"; // Descending
})(SortOrder || (SortOrder = {}));
function SelectionMapper(codeProperty, valueProperty, source$) {
    return source$.map((response) => {
        response.results.forEach((item, index) => {
            item.code = item[codeProperty];
            item.value = item[valueProperty];
        });
        return response.results;
    });
}
function StringSelectionMapper(source$) {
    return source$.map((response) => {
        let values = [];
        response.results.forEach((item, index) => {
            values.push({ code: item, value: item });
        });
        return values;
    });
}
class FilterCriteriaUtils {
    constructor(ctx) {
        this.ctx = ctx;
        if (!ctx) {
            this.ctx = {};
        }
    }
    getContext() {
        return this.ctx;
    }
    applyFilter(path, operation, value) {
        if (!value) {
            return;
        }
        let filter = {
            path: path,
            operation: operation,
            value: value
        };
        if (!this.ctx.criteria) {
            this.ctx.criteria = [];
        }
        this.ctx.criteria.push(filter);
        return this;
    }
    format() {
        let result = {};
        if (this.ctx.size) {
            result.size = this.ctx.size;
        }
        if (this.ctx.page) {
            result.page = this.ctx.page;
        }
        if (this.ctx.inclusive != undefined) {
            result.inclusive = this.ctx.inclusive;
        }
        if (this.ctx.sortField != undefined) {
            result.sortField = this.ctx.sortField;
        }
        switch (this.ctx.sortOrder) {
            case SortOrder.asc:
                result.sortOrder = 'asc';
                break;
            case SortOrder.desc:
                result.sortOrder = 'desc';
                break;
        }
        if (this.ctx.criteria && this.ctx.criteria.length > 0) {
            result.criteria = [];
            for (let filter of this.ctx.criteria) {
                let fc = {
                    value: filter.value,
                    path: filter.path
                };
                switch (filter.operation) {
                    case Operation.eq:
                        fc.operation = '=';
                        break;
                    case Operation.gt:
                        fc.operation = '>';
                        break;
                    case Operation.gte:
                        fc.operation = '>=';
                        break;
                    case Operation.ilike:
                        fc.operation = 'ilike';
                        break;
                    case Operation.like:
                        fc.operation = 'like';
                        break;
                    case Operation.lt:
                        fc.operation = '<';
                        break;
                    case Operation.lte:
                        fc.operation = '<=';
                        break;
                    case Operation.ieq:
                        fc.operation = ':';
                        break;
                    case Operation.neq:
                        fc.operation = '!=';
                        break;
                    case Operation.ineq:
                        fc.operation = '!:';
                        break;
                }
                result.criteria.push(fc);
            }
        }
        return result;
    }
}
class FunctionCriteriaLoader {
    constructor(loadFn) {
        this.loadFn = loadFn;
    }
    prepare(criteria) {
        return this.loadFn(criteria).map((response) => {
            return this.processResponse(response);
        });
    }
    processResponse(response) {
        return {
            total: response.total,
            items: response.results
        };
    }
}
class CriteriaTableDB {
    constructor(loader, paginator) {
        this.loader = loader;
        this.paginator = paginator;
        this.dataSubject = new BehaviorSubject([]);
        this.items = [];
        this.lastCtx = {};
        this.pageSize = 5;
        this.pageIndex = 0;
        this.totalSize = 0;
        this.dataSource = new CriteriaTableDS(this.dataSubject);
        this.paginator.page.subscribe((event) => {
            this.pageSize = event.pageSize;
            this.pageIndex = event.pageIndex;
            this.reload(this.lastCtx);
        });
    }
    reload(ctx) {
        let criteria = ctx || {};
        criteria.page = this.pageIndex;
        criteria.size = this.pageSize;
        this.lastCtx = criteria;
        this.loader.prepare(criteria).subscribe((result) => {
            this.items = result.items;
            this.totalSize = result.total;
            this.items = result.items;
            this.dataSubject.next(result.items);
        });
    }
}
class CriteriaTableDS extends DataSource {
    constructor(subject) {
        super();
        this.subject = subject;
    }
    connect() {
        return this.