UNPKG

igniteui-angular

Version:

Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps

1,272 lines • 148 kB
/** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ import * as tslib_1 from "tslib"; import { IgxGridNavigationService } from '../grid-navigation.service'; import { first } from 'rxjs/operators'; import { FilterMode } from '../grid-base.component'; var IgxHierarchicalGridNavigationService = /** @class */ (function (_super) { tslib_1.__extends(IgxHierarchicalGridNavigationService, _super); function IgxHierarchicalGridNavigationService() { return _super !== null && _super.apply(this, arguments) || this; } /** * @protected * @param {?=} visibleIndex * @param {?=} isSummary * @return {?} */ IgxHierarchicalGridNavigationService.prototype.getCellSelector = /** * @protected * @param {?=} visibleIndex * @param {?=} isSummary * @return {?} */ function (visibleIndex, isSummary) { if (isSummary === void 0) { isSummary = false; } return isSummary ? 'igx-grid-summary-cell' : 'igx-hierarchical-grid-cell'; }; /** * @protected * @return {?} */ IgxHierarchicalGridNavigationService.prototype.getRowSelector = /** * @protected * @return {?} */ function () { return 'igx-hierarchical-grid-row'; }; /** * @protected * @param {?} index * @return {?} */ IgxHierarchicalGridNavigationService.prototype.getRowByIndex = /** * @protected * @param {?} index * @return {?} */ function (index) { var _this = this; /** @type {?} */ var selector = this.getRowSelector(); /** @type {?} */ var rows = Array.from(this.grid.nativeElement.querySelectorAll(selector + "[data-rowindex=\"" + index + "\"]")); /** @type {?} */ var row; rows.forEach(function (r) { /** @type {?} */ var parentGrid = _this.getClosestElemByTag(r, 'igx-hierarchical-grid'); if (parentGrid && parentGrid.getAttribute('id') === _this.grid.id) { row = r; } }); return row; }; /** * @private * @param {?=} grid * @return {?} */ IgxHierarchicalGridNavigationService.prototype.getChildContainer = /** * @private * @param {?=} grid * @return {?} */ function (grid) { /** @type {?} */ var currGrid = grid || this.grid; return currGrid.nativeElement.parentNode.parentNode.parentNode; }; /** * @private * @param {?=} grid * @return {?} */ IgxHierarchicalGridNavigationService.prototype.getChildGridRowContainer = /** * @private * @param {?=} grid * @return {?} */ function (grid) { /** @type {?} */ var currGrid = grid || this.grid; return currGrid.nativeElement.parentNode.parentNode; }; /** * @private * @param {?} childGridID * @param {?} grid * @return {?} */ IgxHierarchicalGridNavigationService.prototype.getChildGrid = /** * @private * @param {?} childGridID * @param {?} grid * @return {?} */ function (childGridID, grid) { /** @type {?} */ var cgrid = grid.hgridAPI.getChildGrids(true).filter(function (g) { return g.id === childGridID; })[0]; return cgrid; }; /** * @private * @param {?} grid * @return {?} */ IgxHierarchicalGridNavigationService.prototype._isScrolledToBottom = /** * @private * @param {?} grid * @return {?} */ function (grid) { /** @type {?} */ var scrollTop = grid.verticalScrollContainer.getVerticalScroll().scrollTop; /** @type {?} */ var scrollHeight = grid.verticalScrollContainer.getVerticalScroll().scrollHeight; return scrollHeight === 0 || Math.round(scrollTop + grid.verticalScrollContainer.igxForContainerSize) === scrollHeight; }; /** * @private * @param {?} index * @return {?} */ IgxHierarchicalGridNavigationService.prototype.getIsChildAtIndex = /** * @private * @param {?} index * @return {?} */ function (index) { return this.grid.isChildGridRecord(this.grid.verticalScrollContainer.igxForOf[index]); }; /** * @param {?} rowIndex * @param {?} visibleColumnIndex * @param {?=} isSummary * @return {?} */ IgxHierarchicalGridNavigationService.prototype.getCellElementByVisibleIndex = /** * @param {?} rowIndex * @param {?} visibleColumnIndex * @param {?=} isSummary * @return {?} */ function (rowIndex, visibleColumnIndex, isSummary) { if (isSummary === void 0) { isSummary = false; } /** @type {?} */ var cellSelector = this.getCellSelector(visibleColumnIndex, isSummary); if (isSummary) { /** @type {?} */ var summaryRow = this.grid.summariesRowList.toArray()[0].nativeElement; return summaryRow.querySelector(cellSelector + "[data-visibleIndex=\"" + visibleColumnIndex + "\"]"); } /** @type {?} */ var row = this.getRowByIndex(rowIndex); return row.querySelector(cellSelector + "[data-rowindex=\"" + rowIndex + "\"][data-visibleIndex=\"" + visibleColumnIndex + "\"]"); }; /** * @param {?} rowElement * @param {?} currentRowIndex * @param {?} visibleColumnIndex * @return {?} */ IgxHierarchicalGridNavigationService.prototype.navigateUp = /** * @param {?} rowElement * @param {?} currentRowIndex * @param {?} visibleColumnIndex * @return {?} */ function (rowElement, currentRowIndex, visibleColumnIndex) { var _this = this; /** @type {?} */ var prevElem = rowElement.previousElementSibling; if (prevElem) { /** @type {?} */ var nodeName = prevElem.children[0].nodeName.toLowerCase(); /** @type {?} */ var isElemChildGrid = nodeName.toLowerCase() === 'igx-child-grid-row'; if (isElemChildGrid) { this.focusPrevChild(prevElem, visibleColumnIndex, this.grid); } else { if (this.grid.parent !== null) { // currently navigating in child grid this._navigateUpInChild(rowElement, currentRowIndex, visibleColumnIndex); } else { _super.prototype.navigateUp.call(this, rowElement, currentRowIndex, visibleColumnIndex); } } } else if (currentRowIndex !== 0) { // handle scenario when prev item is child grid but is not yet in view /** @type {?} */ var isPrevChildGrid = this.getIsChildAtIndex(currentRowIndex - 1); if (!isPrevChildGrid) { _super.prototype.navigateUp.call(this, rowElement, currentRowIndex, visibleColumnIndex); } else { this.scrollGrid(this.grid, -rowElement.offsetHeight, function () { rowElement = _this.getRowByIndex(currentRowIndex); _this.navigateUp(rowElement, currentRowIndex, visibleColumnIndex); }); } } else if (this.grid.parent !== null && currentRowIndex === 0) { // move to prev row in sibling layout or parent this.focusPrev(visibleColumnIndex); } }; /** * @param {?} rowElement * @param {?} currentRowIndex * @param {?} visibleColumnIndex * @return {?} */ IgxHierarchicalGridNavigationService.prototype.navigateDown = /** * @param {?} rowElement * @param {?} currentRowIndex * @param {?} visibleColumnIndex * @return {?} */ function (rowElement, currentRowIndex, visibleColumnIndex) { /** @type {?} */ var nextElem = rowElement.nextElementSibling; if (nextElem) { // next elem is in DOM /** @type {?} */ var nodeName = nextElem.children[0].nodeName.toLowerCase(); /** @type {?} */ var isNextElemChildGrid = nodeName.toLowerCase() === 'igx-child-grid-row'; if (isNextElemChildGrid) { this.focusNextChild(nextElem, visibleColumnIndex, this.grid); } else { if (this.grid.parent !== null) { // currently navigating in child grid this._navigateDownInChild(rowElement, currentRowIndex, visibleColumnIndex); } else { _super.prototype.navigateDown.call(this, rowElement, currentRowIndex, visibleColumnIndex); } } } else if (currentRowIndex !== this.grid.verticalScrollContainer.igxForOf.length - 1) { // scroll next in view _super.prototype.navigateDown.call(this, rowElement, currentRowIndex, visibleColumnIndex); } else if (this.grid.parent !== null && currentRowIndex === this.grid.verticalScrollContainer.igxForOf.length - 1) { // move to next row in sibling layout or in parent this.focusNext(visibleColumnIndex); } }; /** * @param {?} visibleColumnIndex * @return {?} */ IgxHierarchicalGridNavigationService.prototype.navigateTop = /** * @param {?} visibleColumnIndex * @return {?} */ function (visibleColumnIndex) { var _this = this; if (this.grid.parent !== null) { // navigating in child /** @type {?} */ var verticalScroll = this.grid.verticalScrollContainer.getVerticalScroll(); /** @type {?} */ var cellSelector_1 = this.getCellSelector(visibleColumnIndex); if (verticalScroll.scrollTop === 0) { this._focusScrollCellInView(visibleColumnIndex); } else { this.scrollGrid(this.grid, 'top', function () { /** @type {?} */ var cells = _this.grid.nativeElement.querySelectorAll(cellSelector_1 + "[data-visibleIndex=\"" + visibleColumnIndex + "\"]"); if (cells.length > 0) { _this._focusScrollCellInView(visibleColumnIndex); } }); } } else { _super.prototype.navigateTop.call(this, visibleColumnIndex); } }; /** * @param {?} visibleColumnIndex * @return {?} */ IgxHierarchicalGridNavigationService.prototype.navigateBottom = /** * @param {?} visibleColumnIndex * @return {?} */ function (visibleColumnIndex) { var _this = this; // handle scenario where last index is child grid // in that case focus cell in last data row /** @type {?} */ var lastIndex = this.grid.verticalScrollContainer.igxForOf.length - 1; if (this.getIsChildAtIndex(lastIndex)) { /** @type {?} */ var targetIndex_1 = lastIndex - 1; /** @type {?} */ var scrTopPosition = this.grid.verticalScrollContainer.getScrollForIndex(targetIndex_1, true); /** @type {?} */ var verticalScroll = this.grid.verticalScrollContainer.getVerticalScroll(); /** @type {?} */ var cellSelector_2 = this.getCellSelector(visibleColumnIndex); if (verticalScroll.scrollTop === scrTopPosition) { /** @type {?} */ var cells = this.getRowByIndex(targetIndex_1).querySelectorAll(cellSelector_2 + "[data-visibleIndex=\"" + visibleColumnIndex + "\"]"); cells[cells.length - 1].focus(); } else { this.scrollGrid(this.grid, scrTopPosition - verticalScroll.scrollTop, function () { /** @type {?} */ var cells = _this.getRowByIndex(targetIndex_1).querySelectorAll(cellSelector_2 + "[data-visibleIndex=\"" + visibleColumnIndex + "\"]"); if (cells.length > 0) { cells[cells.length - 1].focus(); } }); } } else { _super.prototype.navigateBottom.call(this, visibleColumnIndex); } }; /** * @return {?} */ IgxHierarchicalGridNavigationService.prototype.goToLastCell = /** * @return {?} */ function () { var _this = this; // handle scenario where last index is child grid // in that case focus last cell in last data row /** @type {?} */ var lastIndex = this.grid.verticalScrollContainer.igxForOf.length - 1; if (this.getIsChildAtIndex(lastIndex)) { /** @type {?} */ var targetIndex_2 = lastIndex - 1; /** @type {?} */ var scrTopPosition = this.grid.verticalScrollContainer.getScrollForIndex(targetIndex_2, true); /** @type {?} */ var verticalScroll = this.grid.verticalScrollContainer.getVerticalScroll(); if (verticalScroll.scrollTop === scrTopPosition) { this.onKeydownEnd(targetIndex_2); } else { this.scrollGrid(this.grid, scrTopPosition - verticalScroll.scrollTop, function () { _this.onKeydownEnd(targetIndex_2); }); } } else { _super.prototype.goToLastCell.call(this); } }; /** * @param {?} rowIndex * @param {?=} isSummary * @return {?} */ IgxHierarchicalGridNavigationService.prototype.onKeydownEnd = /** * @param {?} rowIndex * @param {?=} isSummary * @return {?} */ function (rowIndex, isSummary) { var _this = this; if (isSummary === void 0) { isSummary = false; } if (this.grid.parent && !isSummary) { // handle scenario where last child row might not be in view // parent should scroll to child grid end /** @type {?} */ var childContainer = this.grid.nativeElement.parentNode.parentNode; /** @type {?} */ var diffBottom = childContainer.getBoundingClientRect().bottom - this.grid.rootGrid.nativeElement.getBoundingClientRect().bottom; /** @type {?} */ var row = this.grid.getRowByIndex(rowIndex).element.nativeElement; /** @type {?} */ var rowBottom = row.getBoundingClientRect().bottom; /** @type {?} */ var rowIsVisible = rowBottom <= this.grid.rootGrid.tbody.nativeElement.getBoundingClientRect().bottom; /** @type {?} */ var gridTop = this._getMaxTop(this.grid); /** @type {?} */ var diffTop = row.getBoundingClientRect().bottom - row.offsetHeight - gridTop; /** @type {?} */ var endIsVisible = diffBottom <= 0; /** @type {?} */ var topVisible = diffTop >= 0; if (!endIsVisible && !rowIsVisible) { this.scrollGrid(this.grid.parent, diffBottom, function () { return _super.prototype.onKeydownEnd.call(_this, rowIndex); }); } else if (!topVisible) { /** @type {?} */ var scrGrid = this.grid.verticalScrollContainer.getVerticalScroll().scrollTop !== 0 ? this.grid : this.getNextScrollable(this.grid).grid; /** @type {?} */ var topGrid = scrGrid.tbody.nativeElement.getBoundingClientRect().top > this.grid.rootGrid.tbody.nativeElement.getBoundingClientRect().top ? scrGrid : this.grid.rootGrid; this.scrollGrid(topGrid, diffTop, function () { return _super.prototype.onKeydownEnd.call(_this, rowIndex); }); } else { _super.prototype.onKeydownEnd.call(this, rowIndex, isSummary); } } else { _super.prototype.onKeydownEnd.call(this, rowIndex, isSummary); } }; /** * @return {?} */ IgxHierarchicalGridNavigationService.prototype.goToFirstCell = /** * @return {?} */ function () { var _this = this; /** @type {?} */ var verticalScroll = this.grid.verticalScrollContainer.getVerticalScroll(); /** @type {?} */ var horizontalScroll = this.grid.dataRowList.first.virtDirRow.getHorizontalScroll(); if (verticalScroll.scrollTop === 0 && this.grid.parent) { // scroll parent so that current child is in view if (!horizontalScroll.clientWidth || parseInt(horizontalScroll.scrollLeft, 10) <= 1 || this.grid.pinnedColumns.length) { this.navigateTop(0); } else { this.horizontalScroll(this.grid.dataRowList.first.index).scrollTo(0); this.grid.parentVirtDir.onChunkLoad .pipe(first()) .subscribe(function () { _this.navigateTop(0); }); } } else { _super.prototype.goToFirstCell.call(this); } }; /** * @param {?} currentRowEl * @param {?} rowIndex * @param {?} visibleColumnIndex * @param {?=} isSummaryRow * @return {?} */ IgxHierarchicalGridNavigationService.prototype.performTab = /** * @param {?} currentRowEl * @param {?} rowIndex * @param {?} visibleColumnIndex * @param {?=} isSummaryRow * @return {?} */ function (currentRowEl, rowIndex, visibleColumnIndex, isSummaryRow) { var _this = this; if (isSummaryRow === void 0) { isSummaryRow = false; } /** @type {?} */ var summaryRows = this.grid.summariesRowList.toArray(); /** @type {?} */ var hasSummaries = summaryRows.length > 0; /** @type {?} */ var isLastDataRow = rowIndex === this.grid.verticalScrollContainer.igxForOf.length - 1; /** @type {?} */ var nextIsDataRow = this.grid.dataRowList.find(function (row) { return row.index === rowIndex + 1; }); /** @type {?} */ var isLastColumn = this.grid.unpinnedColumns[this.grid.unpinnedColumns.length - 1].visibleIndex === visibleColumnIndex; /** @type {?} */ var isLastSummaryRow = hasSummaries && isSummaryRow; /** @type {?} */ var nextIndex = rowIndex + 1; /** @type {?} */ var virt = this.grid.verticalScrollContainer; /** @type {?} */ var isNextChild = nextIndex <= virt.igxForOf.length - 1 && this.grid.isChildGridRecord(virt.igxForOf[nextIndex]); if (!nextIsDataRow && !(isLastDataRow && hasSummaries) && isLastColumn && !isSummaryRow) { // navigating in child, next is not summary /** @type {?} */ var childContainer = this.getChildGridRowContainer(); /** @type {?} */ var nextIsSiblingChild = this.grid.parent ? !!childContainer.nextElementSibling : false; if (nextIsSiblingChild) { this.focusNextChildDOMElem(childContainer, this.grid.parent); } else if (isNextChild) { /** @type {?} */ var isInView = virt.state.startIndex + virt.state.chunkSize > nextIndex; if (!isInView) { this.scrollGrid(this.grid, 'next', function () { _this.focusNextChildDOMElem(currentRowEl, _this.grid); }); } else { this.focusNextChildDOMElem(currentRowEl, this.grid); } } else { this.navigateDown(currentRowEl, rowIndex, 0); } } else if (isLastSummaryRow && isLastColumn && this.grid.parent) { // navigating in child summary, next is parent summary or next parent row /** @type {?} */ var parent_1 = this.grid.parent; /** @type {?} */ var parentHasSummary = parent_1.summariesRowList.toArray().length > 0; /** @type {?} */ var parentRowIndex = parseInt(this.getClosestElemByTag(currentRowEl, 'igx-child-grid-row').parentNode.getAttribute('data-rowindex'), 10); /** @type {?} */ var isLastRowInParent = parent_1.verticalScrollContainer.igxForOf.length - 1 === parentRowIndex; // check if next is sibling /** @type {?} */ var childRowContainer = this.getChildGridRowContainer(this.grid); /** @type {?} */ var nextIsSiblingChild = !!childRowContainer.nextElementSibling; if (isLastRowInParent && parentHasSummary && !nextIsSiblingChild) { // next is parent summary /** @type {?} */ var parentSummary = parent_1.summariesRowList.toArray()[0].nativeElement; parent_1.navigation.focusNextRow(parentSummary, 0, this.grid.rootGrid, true); } else { // next is sibling or parent this.focusNext(0); } } else if (isLastDataRow && hasSummaries && isLastColumn && this.grid.parent) { // navigating in child rows, next is child grid's summary row this.focusNextRow(summaryRows[0].nativeElement, 0, this.grid.parent, true); } else { _super.prototype.performTab.call(this, currentRowEl, rowIndex, visibleColumnIndex, isSummaryRow); } }; /** * @private * @param {?} currentRowEl * @param {?} grid * @return {?} */ IgxHierarchicalGridNavigationService.prototype.focusNextChildDOMElem = /** * @private * @param {?} currentRowEl * @param {?} grid * @return {?} */ function (currentRowEl, grid) { /** @type {?} */ var gridElem = currentRowEl.nextElementSibling.querySelector('igx-hierarchical-grid'); /** @type {?} */ var childGridID = gridElem.getAttribute('id'); /** @type {?} */ var childGrid = this.getChildGrid(childGridID, grid); if (childGrid.allowFiltering && childGrid.filterMode === FilterMode.quickFilter) { childGrid.navigation.moveFocusToFilterCell(true); return; } this.focusNextChild(currentRowEl.nextElementSibling, 0, grid); }; /** * @param {?} column * @param {?} eventArgs * @return {?} */ IgxHierarchicalGridNavigationService.prototype.navigatePrevFilterCell = /** * @param {?} column * @param {?} eventArgs * @return {?} */ function (column, eventArgs) { if (column.visibleIndex === 0 && this.grid.parent) { eventArgs.preventDefault(); /** @type {?} */ var targetGrid = this.grid.parent; /** @type {?} */ var prevSiblingChild = this.getChildGridRowContainer().previousElementSibling; if (prevSiblingChild) { /** @type {?} */ var gridElem = prevSiblingChild.querySelectorAll('igx-hierarchical-grid')[0]; targetGrid = this.getChildGrid(gridElem.getAttribute('id'), this.grid.parent); } this.focusPrev(targetGrid.unpinnedColumns[targetGrid.unpinnedColumns.length - 1].visibleIndex); } else { _super.prototype.navigatePrevFilterCell.call(this, column, eventArgs); } }; /** * @param {?} column * @param {?} eventArgs * @return {?} */ IgxHierarchicalGridNavigationService.prototype.navigateNextFilterCell = /** * @param {?} column * @param {?} eventArgs * @return {?} */ function (column, eventArgs) { /** @type {?} */ var cols = this.grid.filteringService.unpinnedFilterableColumns; /** @type {?} */ var nextFilterableIndex = cols.indexOf(column) + 1; if (nextFilterableIndex >= this.grid.filteringService.unpinnedFilterableColumns.length) { // next is not filter cell /** @type {?} */ var dataRows = this.grid.rowList.toArray(); /** @type {?} */ var hasRows = dataRows.length !== 0; /** @type {?} */ var summaryRows = this.grid.summariesRowList.toArray(); /** @type {?} */ var hasSummaries = summaryRows.length > 0 && summaryRows[0].summaryCells.length > 0; if (hasRows) { this.focusNextRow(dataRows[0].nativeElement, 0, this.grid, false); } else if (hasSummaries) { this.focusNextRow(summaryRows[0].nativeElement, 0, this.grid, true); } else { this.focusNext(0); } eventArgs.preventDefault(); } else { _super.prototype.navigateNextFilterCell.call(this, column, eventArgs); } }; /** * @param {?} currentRowEl * @param {?} rowIndex * @param {?} visibleColumnIndex * @param {?=} isSummary * @return {?} */ IgxHierarchicalGridNavigationService.prototype.performShiftTabKey = /** * @param {?} currentRowEl * @param {?} rowIndex * @param {?} visibleColumnIndex * @param {?=} isSummary * @return {?} */ function (currentRowEl, rowIndex, visibleColumnIndex, isSummary) { var _this = this; if (isSummary === void 0) { isSummary = false; } if (visibleColumnIndex === 0 && rowIndex === 0 && this.grid.parent && !isSummary) { if (this.grid.allowFiltering && this.grid.filterMode === FilterMode.quickFilter) { this.moveFocusToFilterCell(); } else { /** @type {?} */ var prevSiblingChild = this.getChildGridRowContainer().previousElementSibling; if (prevSiblingChild) { /** @type {?} */ var gridElem = prevSiblingChild.querySelectorAll('igx-hierarchical-grid')[0]; this.performShiftTabIntoChild(gridElem, currentRowEl, rowIndex); } else { this.navigateUp(currentRowEl, rowIndex, this.grid.parent.unpinnedColumns[this.grid.parent.unpinnedColumns.length - 1].visibleIndex); } } } else if (visibleColumnIndex === 0 && currentRowEl.previousElementSibling && currentRowEl.previousElementSibling.children[0].tagName.toLowerCase() === 'igx-child-grid-row') { /** @type {?} */ var gridElem = this.getLastGridElem(currentRowEl.previousElementSibling); this.performShiftTabIntoChild(gridElem, currentRowEl, rowIndex); } else if (visibleColumnIndex === 0 && isSummary) { /** @type {?} */ var lastRowIndex_1 = this.grid.verticalScrollContainer.igxForOf.length - 1; if (lastRowIndex_1 === -1) { // no child data if (this.grid.allowFiltering && this.grid.filterMode === FilterMode.quickFilter) { this.moveFocusToFilterCell(); } else { this.navigateUp(currentRowEl, rowIndex, this.grid.parent.unpinnedColumns[this.grid.parent.unpinnedColumns.length - 1].visibleIndex); } } else if (!this.getIsChildAtIndex(lastRowIndex_1)) { _super.prototype.goToLastCell.call(this); } else { /** @type {?} */ var scrTopPosition = this.grid.verticalScrollContainer.getScrollForIndex(lastRowIndex_1, true); /** @type {?} */ var verticalScroll = this.grid.verticalScrollContainer.getVerticalScroll(); if (verticalScroll.scrollTop === scrTopPosition || isNaN(scrTopPosition)) { /** @type {?} */ var closestChild = this.getLastGridElem(this.grid.getRowByIndex(lastRowIndex_1).nativeElement.parentElement); this.performShiftTabIntoChild(closestChild, currentRowEl, rowIndex); } else { this.scrollGrid(this.grid, scrTopPosition - verticalScroll.scrollTop, function () { /** @type {?} */ var closestChild = _this.getLastGridElem(_this.grid.getRowByIndex(lastRowIndex_1).nativeElement.parentElement); _this.performShiftTabIntoChild(closestChild, currentRowEl, rowIndex); }); } } } else { _super.prototype.performShiftTabKey.call(this, currentRowEl, rowIndex, visibleColumnIndex, isSummary); } }; /** * @private * @param {?} trContainer * @return {?} */ IgxHierarchicalGridNavigationService.prototype.getLastGridElem = /** * @private * @param {?} trContainer * @return {?} */ function (trContainer) { /** @type {?} */ var children = trContainer.children; /** @type {?} */ var closestChild = children[children.length - 1].children[0].children[0]; return closestChild; }; /** * @private * @param {?} gridElem * @param {?} currentRowEl * @param {?} rowIndex * @return {?} */ IgxHierarchicalGridNavigationService.prototype.performShiftTabIntoChild = /** * @private * @param {?} gridElem * @param {?} currentRowEl * @param {?} rowIndex * @return {?} */ function (gridElem, currentRowEl, rowIndex) { /** @type {?} */ var childGridID = gridElem.getAttribute('id'); /** @type {?} */ var childGrid = this.getChildGrid(childGridID, this.grid) || this.getChildGrid(childGridID, this.grid.parent); /** @type {?} */ var lastIndex = childGrid.unpinnedColumns[childGrid.unpinnedColumns.length - 1].visibleIndex; /** @type {?} */ var summaryRows = childGrid.summariesRowList.toArray(); if (summaryRows.length > 0 && summaryRows[0].summaryCells.length > 0) { // move focus to last summary row cell /** @type {?} */ var summaryRow = summaryRows[0].nativeElement; this.focusPrevRow(summaryRow, lastIndex, childGrid, true, true); } else if (childGrid.rowList.toArray().length === 0 && childGrid.allowFiltering && childGrid.filterMode === FilterMode.quickFilter) { // move to filter cell childGrid.navigation.moveFocusToFilterCell(); } else { // move to next cell this.navigateUp(currentRowEl, rowIndex, lastIndex); } }; /** * @private * @param {?} visibleColumnIndex * @return {?} */ IgxHierarchicalGridNavigationService.prototype._focusScrollCellInView = /** * @private * @param {?} visibleColumnIndex * @return {?} */ function (visibleColumnIndex) { /** @type {?} */ var cellSelector = this.getCellSelector(visibleColumnIndex); /** @type {?} */ var cells = this.grid.nativeElement.querySelectorAll(cellSelector + "[data-visibleIndex=\"" + visibleColumnIndex + "\"]"); /** @type {?} */ var cell = cells[0]; /** @type {?} */ var childContainer = this.grid.nativeElement.parentNode.parentNode; /** @type {?} */ var scrTop = this.grid.parent.verticalScrollContainer.getVerticalScroll().scrollTop; /** @type {?} */ var dc = childContainer.parentNode.parentNode; /** @type {?} */ var scrWith = parseInt(dc.style.top, 10); if (scrTop === 0 || scrWith === 0) { // cell is in view cell.focus({ preventScroll: true }); } else { // scroll parent so that cell is in view this.scrollGrid(this.grid.parent, scrWith, function () { return cell.focus({ preventScroll: true }); }); } }; /** * @private * @param {?} elem * @param {?} visibleColumnIndex * @param {?} grid * @return {?} */ IgxHierarchicalGridNavigationService.prototype.focusNextChild = /** * @private * @param {?} elem * @param {?} visibleColumnIndex * @param {?} grid * @return {?} */ function (elem, visibleColumnIndex, grid) { var _this = this; /** @type {?} */ var gridElem = elem.querySelector('igx-hierarchical-grid'); /** @type {?} */ var childGridID = gridElem.getAttribute('id'); /** @type {?} */ var childGrid = this.getChildGrid(childGridID, grid); if (childGrid.rowList.toArray().length === 0) { this.focusNext(visibleColumnIndex, childGrid); return; } // Update column index since the next child can have in general less columns than visibleColumnIndex value. /** @type {?} */ var lastCellIndex = childGrid.unpinnedColumns[childGrid.unpinnedColumns.length - 1].visibleIndex; visibleColumnIndex = Math.min(lastCellIndex, visibleColumnIndex); if (childGrid.verticalScrollContainer.state.startIndex !== 0) { // scroll to top this.scrollGrid(childGrid, 'top', function () { return _this.focusNextRow(elem, visibleColumnIndex, childGrid); }); } else { this.focusNextRow(elem, visibleColumnIndex, childGrid); } }; /** * @private * @param {?} elem * @param {?} visibleColumnIndex * @param {?} grid * @return {?} */ IgxHierarchicalGridNavigationService.prototype.focusPrevChild = /** * @private * @param {?} elem * @param {?} visibleColumnIndex * @param {?} grid * @return {?} */ function (elem, visibleColumnIndex, grid) { var _this = this; /** @type {?} */ var grids = []; /** @type {?} */ var gridElems = Array.from(elem.querySelectorAll('igx-hierarchical-grid')); /** @type {?} */ var childLevel = grid.childLayoutList.first.level; gridElems.forEach(function (hg) { /** @type {?} */ var parentRow = _this.getClosestElemByTag(hg, 'igx-child-grid-row'); if (parentRow && parseInt(parentRow.getAttribute('data-level'), 10) === childLevel) { grids.push(hg); } }); /** @type {?} */ var gridElem = grids[grids.length - 1]; /** @type {?} */ var childGridID = gridElem.getAttribute('id'); /** @type {?} */ var childGrid = this.getChildGrid(childGridID, grid); if (childGrid.rowList.toArray().length === 0) { this.focusPrev(visibleColumnIndex, childGrid); return; } // Update column index since the previous child can have in general less columns than visibleColumnIndex value. /** @type {?} */ var lastCellIndex = childGrid.unpinnedColumns[childGrid.unpinnedColumns.length - 1].visibleIndex; visibleColumnIndex = Math.min(lastCellIndex, visibleColumnIndex); /** @type {?} */ var isScrolledToBottom = this._isScrolledToBottom(childGrid); /** @type {?} */ var lastIndex = childGrid.verticalScrollContainer.igxForOf.length - 1; if (!isScrolledToBottom) { // scroll to end this.scrollGrid(childGrid, 'bottom', function () { return _this.focusPrevChild(elem, visibleColumnIndex, grid); }); } else { /** @type {?} */ var lastRowInChild = childGrid.getRowByIndex(lastIndex); /** @type {?} */ var isChildGrid = lastRowInChild.nativeElement.nodeName.toLowerCase() === 'igx-child-grid-row'; if (isChildGrid) { this.focusPrevChild(lastRowInChild.nativeElement.parentNode, visibleColumnIndex, childGrid); } else { this.focusPrevRow(lastRowInChild.nativeElement, visibleColumnIndex, childGrid, true); } } }; /** * @private * @param {?} visibleColumnIndex * @param {?=} grid * @return {?} */ IgxHierarchicalGridNavigationService.prototype.focusPrev = /** * @private * @param {?} visibleColumnIndex * @param {?=} grid * @return {?} */ function (visibleColumnIndex, grid) { var _this = this; /** @type {?} */ var currGrid = grid || this.grid; /** @type {?} */ var parentContainer = this.getChildContainer(currGrid); /** @type {?} */ var childRowContainer = this.getChildGridRowContainer(currGrid); /** @type {?} */ var prevIsSiblingChild = !!childRowContainer.previousElementSibling; /** @type {?} */ var prev = childRowContainer.previousElementSibling || parentContainer.previousElementSibling; if (prev) { if (prevIsSiblingChild) { this.focusPrevChild(prev, visibleColumnIndex, currGrid.parent); } else { this.focusPrevRow(prev, visibleColumnIndex, currGrid.parent); } } else { this.scrollGrid(currGrid.parent, 'prev', function () { parentContainer = _this.getChildContainer(grid); childRowContainer = _this.getChildGridRowContainer(grid); prev = childRowContainer.previousElementSibling || parentContainer.previousElementSibling; if (prevIsSiblingChild) { _this.focusPrevChild(prev, visibleColumnIndex, currGrid.parent); } else { _this.focusPrevRow(prev, visibleColumnIndex, currGrid.parent); } }); } }; /** * @private * @param {?} grid * @return {?} */ IgxHierarchicalGridNavigationService.prototype.getNextParentInfo = /** * @private * @param {?} grid * @return {?} */ function (grid) { // find next parent that is not at bottom /** @type {?} */ var currGrid = grid.parent; /** @type {?} */ var nextElem = this.getChildContainer(grid).nextElementSibling; while (!nextElem && currGrid.parent !== null) { nextElem = this.getChildContainer(currGrid).nextElementSibling; currGrid = currGrid.parent; } return { grid: currGrid, nextElement: nextElem }; }; /** * @private * @param {?} grid * @return {?} */ IgxHierarchicalGridNavigationService.prototype.getNextScrollable = /** * @private * @param {?} grid * @return {?} */ function (grid) { /** @type {?} */ var currGrid = grid.parent; if (!currGrid) { return { grid: grid, prev: null }; } /** @type {?} */ var nonScrollable = currGrid.verticalScrollContainer.getVerticalScroll().scrollTop === 0; /** @type {?} */ var prev = grid; while (nonScrollable && currGrid.parent !== null) { prev = currGrid; currGrid = currGrid.parent; nonScrollable = currGrid.verticalScrollContainer.getVerticalScroll().scrollTop === 0; } return { grid: currGrid, prev: prev }; }; /** * @private * @param {?} visibleColumnIndex * @param {?=} grid * @return {?} */ IgxHierarchicalGridNavigationService.prototype.focusNext = /** * @private * @param {?} visibleColumnIndex * @param {?=} grid * @return {?} */ function (visibleColumnIndex, grid) { var _this = this; /** @type {?} */ var currGrid = grid || this.grid; /** @type {?} */ var parentInfo = this.getNextParentInfo(currGrid); /** @type {?} */ var nextParentGrid = parentInfo.grid; /** @type {?} */ var nextParentElem = parentInfo.nextElement; /** @type {?} */ var childRowContainer = this.getChildGridRowContainer(currGrid); /** @type {?} */ var nextIsSiblingChild = !!childRowContainer.nextElementSibling; /** @type {?} */ var next = childRowContainer.nextElementSibling || nextParentElem; /** @type {?} */ var verticalScroll = nextParentGrid.verticalScrollContainer.getVerticalScroll(); if (next) { if (nextIsSiblingChild) { this.focusNextChild(next, visibleColumnIndex, nextParentGrid); } else { this.focusNextRow(next, visibleColumnIndex, grid || nextParentGrid); } } else if (verticalScroll.scrollTop !== verticalScroll.scrollHeight - nextParentGrid.verticalScrollContainer.igxForContainerSize) { this.scrollGrid(nextParentGrid, 'next', function () { nextParentElem = parentInfo.nextElement; childRowContainer = _this.getChildGridRowContainer(); next = childRowContainer.nextElementSibling || nextParentElem; if (next && nextIsSiblingChild) { _this.focusNextChild(next, visibleColumnIndex, nextParentGrid); } else if (next) { _this.focusNextRow(next, visibleColumnIndex, grid || nextParentGrid); } }); } }; /** * @private * @param {?} grid * @return {?} */ IgxHierarchicalGridNavigationService.prototype.getNextScrollableDown = /** * @private * @param {?} grid * @return {?} */ function (grid) { /** @type {?} */ var currGrid = grid.parent; if (!currGrid) { return { grid: grid, prev: null }; } /** @type {?} */ var scrollTop = currGrid.verticalScrollContainer.getVerticalScroll().scrollTop; /** @type {?} */ var scrollHeight = currGrid.verticalScrollContainer.getVerticalScroll().scrollHeight; /** @type {?} */ var nonScrollable = scrollHeight === 0 || Math.round(scrollTop + currGrid.verticalScrollContainer.igxForContainerSize) === scrollHeight; /** @type {?} */ var prev = grid; while (nonScrollable && currGrid.parent !== null) { prev = currGrid; currGrid = currGrid.parent; scrollTop = currGrid.verticalScrollContainer.getVerticalScroll().scrollTop; scrollHeight = currGrid.verticalScrollContainer.getVerticalScroll().scrollHeight; nonScrollable = scrollHeight === 0 || Math.round(scrollTop + currGrid.verticalScrollContainer.igxForContainerSize) === scrollHeight; } return { grid: currGrid, prev: prev }; }; /** * @private * @param {?} grid * @return {?} */ IgxHierarchicalGridNavigationService.prototype._getMinBottom = /** * @private * @param {?} grid * @return {?} */ function (grid) { /** @type {?} */ var currGrid = grid; /** @type {?} */ var bottom = currGrid.tbody.nativeElement.getBoundingClientRect().bottom; while (currGrid.parent) { currGrid = currGrid.parent; bottom = Math.min(bottom, currGrid.tbody.nativeElement.getBoundingClientRect().bottom); } return bottom; }; /** * @private * @param {?} grid * @return {?} */ IgxHierarchicalGridNavigationService.prototype._getMaxTop = /** * @private * @param {?} grid * @return {?} */ function (grid) { /** @type {?} */ var currGrid = grid; /** @type {?} */ var top = currGrid.tbody.nativeElement.getBoundingClientRect().top; while (currGrid.parent) { currGrid = currGrid.parent; top = Math.max(top, currGrid.tbody.nativeElement.getBoundingClientRect().top); } return top; }; /** * @private * @param {?} elem * @param {?} visibleColumnIndex * @param {?} grid * @param {?=} isSummary * @return {?} */ IgxHierarchicalGridNavigationService.prototype.focusNextRow = /** * @private * @param {?} elem * @param {?} visibleColumnIndex * @param {?} grid * @param {?=} isSummary * @return {?} */ function (elem, visibleColumnIndex, grid, isSummary) { /** @type {?} */ var cellSelector = this.getCellSelector(visibleColumnIndex, isSummary); if (grid.navigation.isColumnFullyVisible(visibleColumnIndex) && grid.navigation.isColumnLeftFullyVisible(visibleColumnIndex)) { /** @type {?} */ var cell_1 = elem.querySelector(cellSelector + "[data-visibleIndex=\"" + visibleColumnIndex + "\"]"); /** @type {?} */ var closestScrollableGrid = this.getNextScrollableDown(grid).grid; // const diff = cell.getBoundingClientRect().bottom - grid.rootGrid.tbody.nativeElement.getBoundingClientRect().bottom; /** @type {?} */ var gridBottom = this._getMinBottom(grid); /** @type {?} */ var diff = cell_1.getBoundingClientRect().bottom - gridBottom; /** @type {?} */ var inView = diff <= 0; /** @type {?} */ var scrollTop = closestScrollableGrid.verticalScrollContainer.getVerticalScroll().scrollTop; /** @type {?} */ var scrollHeight = closestScrollableGrid.verticalScrollContainer.getVerticalScroll().scrollHeight; /** @type {?} */ var canScroll = !(scrollHeight === 0 || Math.round(scrollTop + closestScrollableGrid.verticalScrollContainer.igxForContainerSize) === scrollHeight); if (!inView && canScroll) { this.scrollGrid(closestScrollableGrid, diff, function () { return cell_1.focus({ preventScroll: true }); }); } else { cell_1.focus({ preventScroll: true }); } } else { /** @type {?} */ var cellElem = elem.querySelector("" + cellSelector); /** @type {?} */ var rowIndex = parseInt(cellElem.getAttribute('data-rowindex'), 10); grid.navigation.performHorizontalScrollToCell(rowIndex, visibleColumnIndex); } }; /** * @private * @param {?} elem * @param {?} visibleColumnIndex * @param {?} grid * @param {?=} inChild * @param {?=} isSummary * @return {?} */ IgxHierarchicalGridNavigationService.prototype.focusPrevRow = /** * @private * @param {?} elem * @param {?} visibleColumnIndex * @param {?} grid * @param {?=} inChild * @param {?=} isSummary * @return {?} */ function (elem, visibleColumnIndex, grid, inChild, isSummary) { var _this = this; if (grid.navigation.isColumnFullyVisible(visibleColumnIndex) && grid.navigation.isColumnLeftFullyVisible(visibleColumnIndex)) { /** @type {?} */ var cellSelector_3 = this.getCellSelector(visibleColumnIndex, isSummary); /** @type {?} */ var cells = elem.querySelectorAll(cellSelector_3 + "[data-visibleIndex=\"" + visibleColumnIndex + "\"]"); /** @type {?} */ var cell_2 = cells[cells.length - 1]; /** @type {?} */ var rIndex_1 = parseInt(elem.getAttribute('data-rowindex'), 10); /** @type {?} */ var scrGrid = grid.verticalScrollContainer.getVerticalScroll().scrollTop !== 0 ? grid : this.getNextScrollable(grid).grid; /** @type {?} */ var topGrid = scrGrid.tbody.nativeElement.getBoundingClientRect().top > grid.rootGrid.tbody.nativeElement.getBoundingClientRect().top ? scrGrid : grid.rootGrid; /** @type {?} */ var gridTop = this._getMaxTop(grid); /** @type {?} */ var scrTop = scrGrid.verticalScrollContainer.getVerticalScroll().scrollTop; /** @type {?} */ var diff = cell_2.getBoundingClientRect().bottom - cell_2.offsetHeight - gridTop; if (scrTop !== 0 && diff < 0 && !inChild) { this.scrollGrid(scrGrid, diff, function () { /** @type {?} */ var el = !isSummary ? grid.navigation.getRowByIndex(rIndex_1) : elem; cell_2 = el.querySelectorAll(cellSelector_3 + "[data-visibleIndex=\"" + visibleColumnIndex + "\"]")[0]; cell_2.focus({ preventScroll: true }); }); } else if (diff < 0 && inChild) { this.scrollGrid(topGrid, diff, function () { cell_2.focus({ preventScroll: true }); }); } else { cell_2.focus({ preventScroll: true }); } } else { this.horizontalScrollGridToIndex(grid, visibleColumnIndex, function () { _this.focusPrevRow(elem, visibleColumnIndex, grid, inChild, isSummary); }); } }; /** * @private * @param {?} grid * @param {?} visibleColumnIndex * @param {?} callBackFunc * @return {?} */ IgxHierarchicalGridNavigationService.prototype.horizontalScrollGridToIndex = /** * @private * @param {?} grid * @param {?} visibleColumnIndex * @param {?} callBack