\n `,\n host: {\n class: 'datatable-row-wrapper'\n }\n})\nexport class DataTableRowWrapperComponent {\n\n @Input() rowDetailTemplate: any;\n @Input() detailRowHeight: any;\n @Input() expanded: boolean = false;\n @Input() row: any;\n @Output() rowContextmenu = new EventEmitter<{event: MouseEvent, row: any}>(false);\n\n @HostListener('contextmenu', ['$event'])\n onContextmenu($event: MouseEvent): void {\n this.rowContextmenu.emit({ event: $event, row: this.row });\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/body/body-row-wrapper.component.ts","import {\n Component, Input, HostBinding, ElementRef, Output, EventEmitter, HostListener\n} from '@angular/core';\n\nimport {\n columnsByPin, columnGroupWidths, columnsByPinArr,\n translateXY, Keys, scrollbarWidth\n} from '../../utils';\n\n@Component({\n selector: 'datatable-body-row',\n template: `\n \n \n \n \n `,\n host: {\n class: 'datatable-body-row'\n }\n})\nexport class DataTableBodyRowComponent {\n\n @Input() set columns(val: any[]) {\n this._columns = val;\n this.recalculateColumns(val);\n }\n\n get columns(): any[] {\n return this._columns;\n }\n\n @Input() set innerWidth(val: number) {\n this._innerWidth = val;\n this.recalculateColumns();\n }\n\n get innerWidth(): number {\n return this._innerWidth;\n }\n\n @Input() row: any;\n @Input() offsetX: number;\n\n @HostBinding('style.height.px')\n @Input() rowHeight: number;\n\n @HostBinding('class.active')\n @Input() isSelected: boolean;\n\n @HostBinding('class.datatable-row-even')\n get isEvenRow(): boolean {\n return this.row.$$index % 2 === 0;\n }\n\n @HostBinding('class.datatable-row-odd')\n get isOddRow(): boolean {\n return this.row.$$index % 2 !== 0;\n }\n\n @Output() activate: EventEmitter = new EventEmitter();\n\n element: any;\n columnGroupWidths: any;\n columnsByPin: any;\n _columns: any[];\n _innerWidth: number;\n\n constructor(element: ElementRef) {\n this.element = element.nativeElement;\n }\n\n trackByGroups(index: number, colGroup: any): any {\n return colGroup.type;\n }\n\n stylesByGroup(group: string) {\n const widths = this.columnGroupWidths;\n const offsetX = this.offsetX;\n\n let styles = {\n width: `${widths[group]}px`\n };\n\n if(group === 'left') {\n translateXY(styles, offsetX, 0);\n } else if(group === 'right') {\n const bodyWidth = parseInt(this.innerWidth + '', 0);\n const totalDiff = widths.total - bodyWidth;\n const offsetDiff = totalDiff - offsetX;\n const offset = (offsetDiff + scrollbarWidth) * -1;\n translateXY(styles, offset, 0);\n }\n\n return styles;\n }\n\n onActivate(event: any, index: number) {\n event.cellIndex = index;\n event.rowElement = this.element;\n this.activate.emit(event);\n }\n\n @HostListener('keydown', ['$event'])\n onKeyDown(event: KeyboardEvent): void {\n const keyCode = event.keyCode;\n const isTargetRow = event.target === this.element;\n\n const isAction =\n keyCode === Keys.return ||\n keyCode === Keys.down ||\n keyCode === Keys.up ||\n keyCode === Keys.left ||\n keyCode === Keys.right;\n\n if(isAction && isTargetRow) {\n event.preventDefault();\n event.stopPropagation();\n\n this.activate.emit({\n type: 'keydown',\n event,\n row: this.row,\n rowElement: this.element\n });\n }\n }\n\n recalculateColumns(val: any[] = this.columns): void {\n const colsByPin = columnsByPin(val);\n this.columnsByPin = columnsByPinArr(val);\n this.columnGroupWidths = columnGroupWidths(colsByPin, val);\n }\n\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/body/body-row.component.ts","import {\n Component, Output, EventEmitter, Input, HostBinding, ViewChild\n} from '@angular/core';\nimport { translateXY, columnsByPin, columnGroupWidths, RowHeightCache } from '../../utils';\nimport { SelectionType } from '../../types';\nimport { ScrollerComponent } from './scroller.component';\n\n@Component({\n selector: 'datatable-body',\n template: `\n \n \n \n \n \n \n \n \n \n \n \n \n `,\n host: {\n class: 'datatable-body'\n }\n})\nexport class DataTableBodyComponent {\n\n @Input() scrollbarV: boolean;\n @Input() scrollbarH: boolean;\n @Input() loadingIndicator: boolean;\n @Input() rowHeight: number;\n @Input() offsetX: number;\n @Input() detailRowHeight: any;\n @Input() emptyMessage: string;\n @Input() selectionType: SelectionType;\n @Input() selected: any[] = [];\n @Input() rowIdentity: any;\n @Input() rowDetailTemplate: any;\n @Input() selectCheck: any;\n @Input() trackByProp: string;\n\n @Input() set pageSize(val: number) {\n this._pageSize = val;\n this.recalcLayout();\n }\n\n get pageSize(): number {\n return this._pageSize;\n }\n\n @Input() set rows(val: any[]) {\n this._rows = val;\n this.recalcLayout();\n }\n\n get rows(): any[] {\n return this._rows;\n }\n\n @Input() set columns(val: any[]) {\n this._columns = val;\n\n const colsByPin = columnsByPin(val);\n this.columnGroupWidths = columnGroupWidths(colsByPin, val);\n }\n\n get columns(): any[] {\n return this._columns;\n }\n\n @Input() set offset(val: number) {\n this._offset = val;\n this.recalcLayout();\n }\n\n get offset(): number {\n return this._offset;\n }\n\n @Input() set rowCount(val: number) {\n this._rowCount = val;\n this.recalcLayout();\n }\n\n get rowCount(): number {\n return this._rowCount;\n }\n\n @Input() innerWidth: number;\n\n @HostBinding('style.width')\n get bodyWidth(): string {\n if (this.scrollbarH) {\n return this.innerWidth + 'px';\n } else {\n return '100%';\n }\n }\n\n @Input()\n @HostBinding('style.height')\n set bodyHeight(val) {\n if (this.scrollbarV) {\n this._bodyHeight = val + 'px';\n } else {\n this._bodyHeight = 'auto';\n }\n\n this.recalcLayout();\n }\n\n get bodyHeight() {\n return this._bodyHeight;\n }\n\n @Output() scroll: EventEmitter = new EventEmitter();\n @Output() page: EventEmitter = new EventEmitter();\n @Output() activate: EventEmitter = new EventEmitter();\n @Output() select: EventEmitter = new EventEmitter();\n @Output() detailToggle: EventEmitter = new EventEmitter();\n @Output() rowContextmenu = new EventEmitter<{event: MouseEvent, row: any}>(false);\n\n @ViewChild(ScrollerComponent) scroller: ScrollerComponent;\n\n /**\n * Returns if selection is enabled.\n * \n * @readonly\n * @type {boolean}\n * @memberOf DataTableBodyComponent\n */\n get selectEnabled(): boolean {\n return !!this.selectionType;\n }\n\n /**\n * Property that would calculate the height of scroll bar\n * based on the row heights cache for virtual scroll. Other scenarios\n * calculate scroll height automatically (as height will be undefined).\n * \n * @readonly\n * @type {number}\n * @memberOf DataTableBodyComponent\n */\n get scrollHeight(): number {\n if(this.scrollbarV) {\n return this.rowHeightsCache.query(this.rowCount - 1);\n }\n }\n\n rowHeightsCache: RowHeightCache = new RowHeightCache();\n temp: any[] = [];\n offsetY: number = 0;\n indexes: any = {};\n columnGroupWidths: any;\n rowTrackingFn: any;\n\n _rows: any[];\n _bodyHeight: any;\n _columns: any[];\n _rowCount: number;\n _offset: number;\n _pageSize: number;\n\n constructor() {\n // declare fn here so we can get access to the `this` property\n this.rowTrackingFn = function(index: number, row: any): any {\n if(this.trackByProp) {\n return `${row.$$index}-${this.trackByProp}`;\n } else {\n return row.$$index;\n }\n }.bind(this);\n }\n\n /**\n * Updates the Y offset given a new offset.\n * \n * @param {number} [offset]\n * \n * @memberOf DataTableBodyComponent\n */\n updateOffsetY(offset?: number): void {\n if(this.scrollbarV && offset) {\n // First get the row Index that we need to move to.\n const rowIndex = this.pageSize * offset;\n offset = this.rowHeightsCache.query(rowIndex - 1);\n }\n\n this.scroller.setOffset(offset || 0);\n }\n\n /**\n * Body was scrolled, this is mainly useful for\n * when a user is server-side pagination via virtual scroll.\n * \n * @param {*} event\n * \n * @memberOf DataTableBodyComponent\n */\n onBodyScroll(event: any): void {\n const scrollYPos: number = event.scrollYPos;\n const scrollXPos: number = event.scrollXPos;\n\n // if scroll change, trigger update\n // this is mainly used for header cell positions\n if(this.offsetY !== scrollYPos || this.offsetX !== scrollXPos) {\n this.scroll.emit({\n offsetY: scrollYPos,\n offsetX: scrollXPos\n });\n }\n\n this.offsetY = scrollYPos;\n this.offsetX = scrollXPos;\n\n this.updateIndexes();\n this.updatePage(event.direction);\n this.updateRows();\n }\n\n /**\n * Updates the page given a direction.\n * \n * @param {string} direction\n * \n * @memberOf DataTableBodyComponent\n */\n updatePage(direction: string): void {\n let offset = this.indexes.first / this.pageSize;\n\n if(direction === 'up') {\n offset = Math.floor(offset);\n } else if(direction === 'down') {\n offset = Math.ceil(offset);\n }\n\n if(direction !== undefined && !isNaN(offset)) {\n this.page.emit({ offset });\n }\n }\n\n /**\n * Updates the rows in the view port\n * \n * @memberOf DataTableBodyComponent\n */\n updateRows(): void {\n const { first, last } = this.indexes;\n let rowIndex = first;\n let idx = 0;\n let temp: any[] = [];\n\n while (rowIndex < last && rowIndex < this.rowCount) {\n let row = this.rows[rowIndex];\n\n if(row) {\n row.$$index = rowIndex;\n temp[idx] = row;\n }\n\n idx++;\n rowIndex++;\n }\n\n this.temp = temp;\n }\n\n /**\n * Calculate row height based on the expanded state of the row.\n * \n * @param {*} row the row for which the height need to be calculated.\n * @returns {number} height of the row.\n * \n * @memberOf DataTableBodyComponent\n */\n getRowHeight(row: any): number {\n // Adding detail row height if its expanded.\n return this.rowHeight +\n (row.$$expanded === 1 ? this.detailRowHeight : 0);\n }\n\n /**\n * Calculates the styles for the row so that the rows can be moved in 2D space\n * during virtual scroll inside the DOM. In the below case the Y position is\n * manipulated. As an example, if the height of row 0 is 30 px and row 1 is\n * 100 px then following styles are generated:\n *\n * transform: translate3d(0px, 0px, 0px); -> row0\n * transform: translate3d(0px, 30px, 0px); -> row1\n * transform: translate3d(0px, 130px, 0px); -> row2\n *\n * Row heights have to be calculated based on the row heights cache as we wont\n * be able to determine which row is of what height before hand. In the above\n * case the positionY of the translate3d for row2 would be the sum of all the\n * heights of the rows before it (i.e. row0 and row1).\n * \n * @param {*} row The row that needs to be placed in the 2D space.\n * @returns {*} Returns the CSS3 style to be applied\n * \n * @memberOf DataTableBodyComponent\n */\n getRowsStyles(row: any): any {\n const rowHeight = this.getRowHeight(row);\n\n let styles = {\n height: rowHeight + 'px'\n };\n\n if(this.scrollbarV) {\n const idx = row ? row.$$index : 0;\n\n // const pos = idx * rowHeight;\n // The position of this row would be the sum of all row heights\n // until the previous row position.\n const pos = this.rowHeightsCache.query(idx - 1);\n\n translateXY(styles, 0, pos);\n }\n\n return styles;\n }\n\n /**\n * Hides the loading indicator\n * \n * \n * @memberOf DataTableBodyComponent\n */\n hideIndicator(): void {\n setTimeout(() => this.loadingIndicator = false, 500);\n }\n\n /**\n * Updates the index of the rows in the viewport\n * \n * @memberOf DataTableBodyComponent\n */\n updateIndexes(): void {\n let first = 0;\n let last = 0;\n\n if (this.scrollbarV) {\n // Calculation of the first and last indexes will be based on where the\n // scrollY position would be at. The last index would be the one\n // that shows up inside the view port the last.\n const height = parseInt(this.bodyHeight, 0);\n first = this.rowHeightsCache.getRowIndex(this.offsetY);\n last = this.rowHeightsCache.getRowIndex(height + this.offsetY) + 1;\n } else {\n first = Math.max(this.offset * this.pageSize, 0);\n last = Math.min((first + this.pageSize), this.rowCount);\n }\n\n this.indexes = { first, last };\n }\n\n /**\n * Refreshes the full Row Height cache. Should be used\n * when the entire row array state has changed.\n * \n * @returns {void}\n * \n * @memberOf DataTableBodyComponent\n */\n refreshRowHeightCache(): void {\n if(!this.scrollbarV) return;\n\n // clear the previous row height cache if already present.\n // this is useful during sorts, filters where the state of the\n // rows array is changed.\n this.rowHeightsCache.clearCache();\n\n // Initialize the tree only if there are rows inside the tree.\n if (this.rows && this.rows.length) {\n this.rowHeightsCache.initCache(\n this.rows, this.rowHeight, this.detailRowHeight);\n }\n }\n\n /**\n * Gets the index for the view port\n * \n * @returns {number}\n * \n * @memberOf DataTableBodyComponent\n */\n getAdjustedViewPortIndex(): number {\n // Capture the row index of the first row that is visible on the viewport.\n // If the scroll bar is just below the row which is highlighted then make that as the\n // first index.\n let viewPortFirstRowIndex = this.indexes.first;\n\n if (this.scrollbarV) {\n const offsetScroll = this.rowHeightsCache.query(viewPortFirstRowIndex - 1);\n return offsetScroll <= this.offsetY ? viewPortFirstRowIndex - 1 : viewPortFirstRowIndex;\n }\n\n return viewPortFirstRowIndex;\n }\n\n /**\n * Toggle the Expansion of the row i.e. if the row is expanded then it will\n * collapse and vice versa. Note that the expanded status is stored as\n * a part of the row object itself as we have to preserve the expanded row\n * status in case of sorting and filtering of the row set.\n * \n * @param {*} row The row for which the expansion needs to be toggled.\n * \n * @memberOf DataTableBodyComponent\n */\n toggleRowExpansion(row: any): void {\n // Capture the row index of the first row that is visible on the viewport.\n let viewPortFirstRowIndex = this.getAdjustedViewPortIndex();\n\n // If the detailRowHeight is auto --> only in case of non-virtualized scroll\n if(this.scrollbarV) {\n const detailRowHeight = this.detailRowHeight * (row.$$expanded ? -1 : 1);\n this.rowHeightsCache.update(row.$$index, detailRowHeight);\n }\n\n // Update the toggled row and update the heights in the cache.\n row.$$expanded ^= 1;\n\n this.detailToggle.emit({\n rows: [row],\n currentIndex: viewPortFirstRowIndex\n });\n }\n\n /**\n * Expand/Collapse all the rows no matter what their state is.\n * \n * @param {boolean} expanded When true, all rows are expanded and when false, all rows will be collapsed.\n * \n * @memberOf DataTableBodyComponent\n */\n toggleAllRows(expanded: boolean): void {\n let rowExpanded = expanded ? 1 : 0;\n\n // Capture the row index of the first row that is visible on the viewport.\n let viewPortFirstRowIndex = this.getAdjustedViewPortIndex();\n\n for(let row of this.rows) {\n row.$$expanded = rowExpanded;\n }\n\n if(this.scrollbarV) {\n // Refresh the full row heights cache since every row was affected.\n this.refreshRowHeightCache();\n }\n\n // Emit all rows that have been expanded.\n this.detailToggle.emit({\n rows: this.rows,\n currentIndex: viewPortFirstRowIndex\n });\n }\n\n /**\n * Recalculates the table\n * \n * @memberOf DataTableBodyComponent\n */\n recalcLayout(): void {\n this.refreshRowHeightCache();\n this.updateIndexes();\n this.updateRows();\n }\n\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/body/body.component.ts","export * from './body.component';\nexport * from './body-cell.component';\nexport * from './body-row.component';\nexport * from './progress-bar.component';\nexport * from './scroller.component';\nexport * from './body-row-wrapper.component';\nexport * from './selection.component';\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/body/index.ts","import { Component, ChangeDetectionStrategy } from '@angular/core';\n\n@Component({\n selector: 'datatable-progress',\n template: `\n