@progress/kendo-angular-treelist 3.1.3-dev.202110041229

package/dist/npm/rendering/list.component.js

@@ -0,0 +1,700 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var core_1 = require("@angular/core");
+var rxjs_1 = require("rxjs");
+var operators_1 = require("rxjs/operators");
+var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
+var row_height_service_1 = require("../scrolling/row-height.service");
+var scroller_service_1 = require("../scrolling/scroller.service");
+var scroll_request_service_1 = require("../scrolling/scroll-request.service");
+var column_base_1 = require("../columns/column-base");
+var utils_1 = require("../utils");
+var columns_container_1 = require("../columns/columns-container");
+var change_notification_service_1 = require("../data/change-notification.service");
+var row_sync_1 = require("../layout/row-sync");
+var no_records_template_directive_1 = require("./no-records-template.directive");
+var suspend_service_1 = require("../scrolling/suspend.service");
+var column_common_1 = require("../columns/column-common");
+var scroll_sync_service_1 = require("../scrolling/scroll-sync.service");
+var resize_service_1 = require("../layout/resize.service");
+var kendo_angular_common_1 = require("@progress/kendo-angular-common");
+var browser_support_service_1 = require("../layout/browser-support.service");
+var edit_service_1 = require("../editing/edit.service");
+var navigation_service_1 = require("../navigation/navigation.service");
+var kendo_angular_common_2 = require("@progress/kendo-angular-common");
+var column_resizing_service_1 = require("../column-resizing/column-resizing.service");
+var default_track_by_1 = require("../common/default-track-by");
+var dom_queries_1 = require("./common/dom-queries");
+var pdf_service_1 = require("../pdf/pdf.service");
+var column_info_service_1 = require("../common/column-info.service");
+var constants_1 = require("./constants");
+var elementAt = function (index, elements, elementOffset) {
+    for (var idx = 0, elementIdx = 0; idx < elements.length; idx++) {
+        var offset = elementOffset(elements[idx]);
+        if (elementIdx <= index && index <= elementIdx + offset - 1) {
+            return elements[idx];
+        }
+        elementIdx += offset;
+    }
+};
+var ɵ0 = elementAt;
+exports.ɵ0 = ɵ0;
+var rowAt = function (index, rows) {
+    return elementAt(index, rows, function (row) { return row.hasAttribute('data-kendo-treelist-item-index') ? 1 : 0; });
+};
+var ɵ1 = rowAt;
+exports.ɵ1 = ɵ1;
+var cellAt = function (index, cells) {
+    return elementAt(index, cells, function (cell) { return !dom_queries_1.hasClasses(cell, constants_1.NON_DATA_CELL_CLASSES) ? parseInt(cell.getAttribute('colSpan'), 10) || 1 : 0; });
+};
+var ɵ2 = cellAt;
+exports.ɵ2 = ɵ2;
+var EMPTY_OBJECT = {};
+/**
+ * @hidden
+ */
+exports.SCROLLER_FACTORY_TOKEN = new core_1.InjectionToken('treelist-scroll-service-factory');
+/**
+ * @hidden
+ */
+function DEFAULT_SCROLLER_FACTORY(observable) {
+    return new scroller_service_1.ScrollerService(observable);
+}
+exports.DEFAULT_SCROLLER_FACTORY = DEFAULT_SCROLLER_FACTORY;
+var wheelDeltaY = function (e) {
+    var deltaY = e.wheelDeltaY;
+    if (e.wheelDelta && (deltaY === undefined || deltaY)) {
+        return e.wheelDelta;
+    }
+    else if (e.detail && e.axis === e.VERTICAL_AXIS) {
+        return (-e.detail) * 10;
+    }
+    return 0;
+};
+var ɵ3 = wheelDeltaY;
+exports.ɵ3 = ɵ3;
+var preventLockedScroll = function (el) { return function (event) {
+    var delta = wheelDeltaY(event);
+    var scrollTop = el.scrollTop;
+    var allowScroll = (scrollTop === 0 && 0 < delta) || (el.scrollHeight <= el.offsetHeight + scrollTop && delta < 0);
+    if (!allowScroll) {
+        event.preventDefault();
+    }
+}; };
+var ɵ4 = preventLockedScroll;
+exports.ɵ4 = ɵ4;
+var translateY = function (renderer, value) { return function (el) { return renderer.setStyle(el, "transform", "translateY(" + value + "px)"); }; };
+var ɵ5 = translateY;
+exports.ɵ5 = ɵ5;
+var maybeNativeElement = function (el) { return el ? el.nativeElement : null; };
+var ɵ6 = maybeNativeElement;
+exports.ɵ6 = ɵ6;
+var hasScrollbar = function (el, parent) { return el.nativeElement.offsetWidth > parent.nativeElement.clientWidth; };
+var ɵ7 = hasScrollbar;
+exports.ɵ7 = ɵ7;
+var setHeight = function (renderer) { return function (_a) {
+    var el = _a.el, height = _a.height;
+    return renderer.setStyle(el, "height", height + "px");
+}; };
+var ɵ8 = setHeight;
+exports.ɵ8 = ɵ8;
+var bufferSize = 1;
+/**
+ * @hidden
+ */
+var ListComponent = /** @class */ (function () {
+    function ListComponent(scrollerFactory, changeNotification, suspendService, ngZone, renderer, scrollSyncService, resizeService, editService, supportService, navigationService, scrollRequestService, localization, columnResizingService, changeDetector, pdfService, columnInfo) {
+        var _this = this;
+        this.changeNotification = changeNotification;
+        this.suspendService = suspendService;
+        this.ngZone = ngZone;
+        this.renderer = renderer;
+        this.scrollSyncService = scrollSyncService;
+        this.resizeService = resizeService;
+        this.editService = editService;
+        this.supportService = supportService;
+        this.navigationService = navigationService;
+        this.localization = localization;
+        this.columnResizingService = columnResizingService;
+        this.changeDetector = changeDetector;
+        this.pdfService = pdfService;
+        this.columnInfo = columnInfo;
+        this.skip = 0;
+        this.columns = new columns_container_1.ColumnsContainer(function () { return []; });
+        this.trackBy = default_track_by_1.defaultTrackBy;
+        this.contentScroll = new core_1.EventEmitter();
+        this.pageChange = new core_1.EventEmitter();
+        this.scrollBottom = new core_1.EventEmitter();
+        this.columnsStartIdx = 0;
+        this.resizeSensors = new core_1.QueryList();
+        this.subscriptions = new rxjs_1.Subscription();
+        this.dispatcher = new rxjs_1.Subject();
+        this.containerScrollTop = 0;
+        this.scrollLeft = 0;
+        this.rtl = false;
+        this.scroller = scrollerFactory(this.dispatcher);
+        this.subscriptions = scrollRequestService.requests.subscribe(function (x) { return _this.scrollTo(x); });
+    }
+    Object.defineProperty(ListComponent.prototype, "hostClass", {
+        get: function () {
+            return true;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ListComponent.prototype, "hostRole", {
+        get: function () {
+            return 'presentation';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ListComponent.prototype, "totalWidth", {
+        get: function () {
+            if (this.virtualColumns && this.columns.unlockedWidth) {
+                return this.columns.unlockedWidth;
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ListComponent.prototype, "lockedLeafColumns", {
+        get: function () {
+            return this.columns.lockedLeafColumns;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ListComponent.prototype, "nonLockedLeafColumns", {
+        get: function () {
+            return this.columns.nonLockedLeafColumns;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ListComponent.prototype, "nonLockedColumnsToRender", {
+        get: function () {
+            if (this.virtualColumns && !this.pdfService.exporting) {
+                return this.viewportColumns;
+            }
+            return this.nonLockedLeafColumns;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ListComponent.prototype, "leafColumns", {
+        get: function () {
+            return this.columns.leafColumnsToRender;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ListComponent.prototype, "lockedWidth", {
+        get: function () {
+            return column_common_1.expandColumns(this.lockedLeafColumns.toArray()).reduce(function (prev, curr) { return prev + (curr.width || 0); }, 0);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ListComponent.prototype, "nonLockedWidth", {
+        get: function () {
+            if ((!this.rtl && this.lockedLeafColumns.length) || this.virtualColumns) {
+                return column_common_1.sumColumnWidths(column_common_1.expandColumns(this.nonLockedColumnsToRender.toArray()));
+            }
+            return undefined;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ListComponent.prototype, "isLocked", {
+        get: function () {
+            return this.lockedLeafColumns.length > 0;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    ListComponent.prototype.ngOnInit = function () {
+        var _this = this;
+        this.init();
+        this.subscriptions.add(this.ngZone.runOutsideAngular(this.handleRowSync.bind(this)));
+        this.subscriptions.add(this.ngZone.runOutsideAngular(this.handleRowNavigationLocked.bind(this)));
+        this.subscriptions.add(rxjs_1.merge(this.columns.changes, this.resizeService.changes).subscribe(function () {
+            if (_this.virtualColumns) {
+                _this.ngZone.run(function () {
+                    _this.updateViewportColumns();
+                    _this.changeDetector.markForCheck();
+                });
+            }
+        }));
+        this.subscriptions.add(this.localization.changes.subscribe(function (_a) {
+            var rtl = _a.rtl;
+            return _this.rtl = rtl;
+        }));
+    };
+    ListComponent.prototype.ngOnChanges = function (changes) {
+        if (utils_1.isChanged("skip", changes) && !this.rebind) {
+            this.skipScroll = true;
+            this.container.nativeElement.scrollTop = this.rowHeightService.offset(this.skip);
+        }
+        if (utils_1.anyChanged(["total", "take"], changes)) {
+            this.init();
+        }
+        this.rebind = false;
+    };
+    ListComponent.prototype.ngDoCheck = function () {
+        if (this.virtualColumns && (!this.viewportColumns || this.viewportWidthChange())) {
+            this.updateViewportColumns();
+        }
+    };
+    ListComponent.prototype.ngAfterViewInit = function () {
+        if (this.skip && this.isVirtual) {
+            this.container.nativeElement.scrollTop = this.rowHeightService.offset(this.skip);
+        }
+        this.resetNavigationViewport();
+        this.attachContainerScroll();
+        this.initResizeService();
+    };
+    ListComponent.prototype.syncRowsHeight = function () {
+        if (this.lockedContainer) {
+            row_sync_1.syncRowsHeight(this.lockedTable.nativeElement, this.table.nativeElement);
+        }
+    };
+    ListComponent.prototype.ngOnDestroy = function () {
+        if (this.subscriptions) {
+            this.subscriptions.unsubscribe();
+        }
+        if (this.resizeService) {
+            this.resizeService.destroy();
+        }
+        this.cleanupScroller();
+    };
+    ListComponent.prototype.init = function () {
+        if (this.suspendService.scroll) {
+            return;
+        }
+        this.rowHeightService = new row_height_service_1.RowHeightService(this.total, this.rowHeight);
+        this.totalHeight = this.rowHeightService.totalHeight();
+        if (!utils_1.isUniversal()) {
+            this.ngZone.runOutsideAngular(this.createScroller.bind(this));
+        }
+    };
+    ListComponent.prototype.attachContainerScroll = function () {
+        var _this = this;
+        if (utils_1.isUniversal()) {
+            return;
+        }
+        this.ngZone.runOutsideAngular(function () {
+            _this.subscriptions.add(rxjs_1.fromEvent(_this.container.nativeElement, 'scroll').pipe(operators_1.map(function (event) { return event.target; }), operators_1.filter(function () { return !_this.suspendService.scroll; }), operators_1.tap(function (target) {
+                _this.onContainerScroll(target);
+                _this.resetNavigationViewport();
+                if (_this.virtualColumns) {
+                    _this.handleColumnScroll();
+                }
+                var rowViewport = _this.navigationService.viewport || EMPTY_OBJECT;
+                var columnViewport = _this.navigationService.columnViewport || EMPTY_OBJECT;
+                _this.contentScroll.emit({
+                    scrollLeft: target.scrollLeft,
+                    scrollTop: target.scrollTop,
+                    startRow: rowViewport.firstItemIndex,
+                    endRow: rowViewport.lastItemIndex,
+                    startColumn: columnViewport.firstItemIndex,
+                    endColumn: columnViewport.lastItemIndex
+                });
+            })).subscribe(_this.dispatcher));
+        });
+        this.scrollSyncService.registerEmitter(this.container.nativeElement, "body");
+        if (this.lockedContainer) {
+            this.ngZone.runOutsideAngular(function () {
+                _this.subscriptions.add(rxjs_1.merge(rxjs_1.fromEvent(_this.lockedContainer.nativeElement, 'mousewheel'), rxjs_1.fromEvent(_this.lockedContainer.nativeElement, 'DOMMouseScroll')).pipe(operators_1.filter(function (event) { return !event.ctrlKey; }), operators_1.tap(preventLockedScroll(_this.container.nativeElement)), operators_1.map(wheelDeltaY))
+                    .subscribe(function (x) { return _this.container.nativeElement.scrollTop -= x; }));
+                _this.subscriptions.add(rxjs_1.fromEvent(_this.lockedContainer.nativeElement, 'scroll').pipe(operators_1.filter(function () { return !_this.suspendService.scroll; }))
+                    .subscribe(function () {
+                    var lockedScrollTop = _this.lockedContainer.nativeElement.scrollTop;
+                    if (lockedScrollTop !== _this.containerScrollTop) {
+                        _this.container.nativeElement.scrollTop = _this.containerScrollTop = lockedScrollTop;
+                    }
+                }));
+                _this.subscriptions.add(rxjs_1.fromEvent(_this.lockedContainer.nativeElement, 'keydown').pipe(operators_1.filter(function (event) { return event.keyCode === kendo_angular_common_2.Keys.PageDown || event.keyCode === kendo_angular_common_2.Keys.PageUp; })).subscribe(function (event) {
+                    var dir = event.keyCode === kendo_angular_common_2.Keys.PageDown ? 1 : -1;
+                    var element = _this.container.nativeElement;
+                    element.scrollTop += element.offsetHeight * dir * 0.8;
+                    event.preventDefault();
+                }));
+            });
+            this.syncRowsHeight();
+        }
+    };
+    ListComponent.prototype.createScroller = function () {
+        var _this = this;
+        this.cleanupScroller();
+        var observable = this.scroller
+            .create(this.rowHeightService, this.skip, this.take, this.total, this.containerScrollTop);
+        this.skipScroll = false;
+        this.scrollerSubscription = observable.pipe(operators_1.filter(function (x) { return x instanceof scroller_service_1.PageAction; }), operators_1.filter(function () {
+            var temp = _this.skipScroll;
+            _this.skipScroll = false;
+            return !temp;
+        }), operators_1.tap(function () { return _this.rebind = true; }))
+            .subscribe(function (x) { return _this.ngZone.run(function () { return _this.pageChange.emit(x); }); });
+        this.scrollerSubscription.add(observable.pipe(operators_1.filter(function (x) { return x instanceof scroller_service_1.ScrollAction; }))
+            .subscribe(this.scroll.bind(this)));
+        this.scrollerSubscription.add(observable.pipe(operators_1.filter(function (x) { return x instanceof scroller_service_1.ScrollBottomAction; }))
+            .subscribe(function () { return _this.scrollBottom.emit(); }));
+    };
+    ListComponent.prototype.scroll = function (_a) {
+        var _b = _a.offset, offset = _b === void 0 ? 0 : _b;
+        if (this.isVirtual) {
+            [
+                maybeNativeElement(this.table),
+                maybeNativeElement(this.lockedTable)
+            ].filter(utils_1.isPresent).forEach(translateY(this.renderer, offset));
+        }
+        this.resetNavigationViewport();
+    };
+    ListComponent.prototype.onContainerScroll = function (_a) {
+        var scrollTop = _a.scrollTop;
+        this.containerScrollTop = scrollTop;
+        if (this.lockedContainer) {
+            this.lockedContainer.nativeElement.scrollTop = scrollTop;
+        }
+    };
+    ListComponent.prototype.handleRowSync = function () {
+        var _this = this;
+        var isLocked = function () { return utils_1.isPresent(_this.lockedContainer); };
+        return rxjs_1.merge(this.changeNotification.changes, this.editService.changed, this.resizeService.changes, this.columnResizingService.changes
+            .pipe(operators_1.filter(function (change) { return change.type === 'end'; })), this.supportService.changes)
+            .pipe(operators_1.tap(function () { return _this.resetNavigationViewport(); }), operators_1.filter(isLocked))
+            .subscribe(function () {
+            var scrollTop = _this.container.nativeElement.scrollTop;
+            var scrollLeft = _this.container.nativeElement.scrollLeft;
+            _this.syncRowsHeight();
+            _this.syncContainerHeight();
+            _this.lockedContainer.nativeElement.scrollTop = _this.container.nativeElement.scrollTop = scrollTop;
+            // fixes scroll left position in IE when editing
+            _this.container.nativeElement.scrollLeft = scrollLeft;
+            _this.resizeSensors.forEach(function (sensor) { return sensor.acceptSize(); });
+        });
+    };
+    ListComponent.prototype.handleRowNavigationLocked = function () {
+        var _this = this;
+        return this.navigationService.changes.pipe(operators_1.filter(function () { return utils_1.isPresent(_this.lockedContainer); }), operators_1.delay(10)).subscribe(function (args) {
+            if (_this.lockedLeafColumns.length <= args.prevColIndex && args.colIndex < _this.lockedLeafColumns.length) {
+                var cell = _this.navigationService.activeCell;
+                if (cell && cell.colIndex + cell.colSpan < args.prevColIndex) {
+                    _this.container.nativeElement.scrollLeft = 0;
+                }
+            }
+        });
+    };
+    ListComponent.prototype.scrollToVirtualRow = function (itemIndex) {
+        var offset = this.rowHeightService.offset(itemIndex);
+        this.container.nativeElement.scrollTop = offset;
+        this.resetNavigationViewport();
+    };
+    ListComponent.prototype.scrollTo = function (_a) {
+        var row = _a.row, column = _a.column;
+        if (utils_1.isNumber(row)) {
+            if (this.isVirtual) {
+                this.scrollToVirtualRow(row);
+            }
+            else {
+                var element = rowAt(row, this.table.nativeElement.rows);
+                if (element) {
+                    this.container.nativeElement.scrollTop = element.offsetTop;
+                }
+            }
+        }
+        if (utils_1.isNumber(column)) {
+            column -= this.lockedLeafColumns.length;
+            if (this.virtualColumns) {
+                var columns = this.columns.leafColumnsToRender;
+                var offset = 0;
+                for (var idx = 0; idx < column; idx++) {
+                    offset += columns[idx].width || 0;
+                }
+                this.container.nativeElement.scrollLeft = this.normalizeScrollLeft(offset);
+            }
+            else {
+                var firstRow = rowAt(0, this.table.nativeElement.rows);
+                if (firstRow) {
+                    var element = cellAt(column, firstRow.cells);
+                    if (element) {
+                        this.container.nativeElement.scrollLeft = this.elementScrollLeft(element);
+                    }
+                }
+            }
+        }
+    };
+    ListComponent.prototype.resetNavigationViewport = function () {
+        if (!this.container ||
+            !this.navigationService.needsViewport() || this.view.length === 0) {
+            return;
+        }
+        var _a = this.container.nativeElement, scrollTop = _a.scrollTop, offsetHeight = _a.offsetHeight;
+        var scrollBottom = scrollTop + offsetHeight;
+        var firstItemIndex = this.rowHeightService.index(scrollTop);
+        var lastItemIndex = this.rowHeightService.index(scrollBottom);
+        var lastItemOffset = this.rowHeightService.offset(lastItemIndex);
+        var lastItemOverflows = lastItemOffset + this.rowHeight > scrollBottom;
+        if (lastItemIndex > 0 && lastItemOverflows) {
+            lastItemIndex--;
+        }
+        this.navigationService.setViewport(firstItemIndex, lastItemIndex);
+    };
+    ListComponent.prototype.cleanupScroller = function () {
+        if (this.scrollerSubscription) {
+            this.scrollerSubscription.unsubscribe();
+        }
+        if (this.scroller) {
+            this.scroller.destroy();
+        }
+    };
+    ListComponent.prototype.initResizeService = function () {
+        this.resizeService.connect(rxjs_1.merge.apply(void 0, this.resizeSensors.map(function (sensor) { return sensor.resize; })));
+    };
+    ListComponent.prototype.syncContainerHeight = function () {
+        var _this = this;
+        [maybeNativeElement(this.lockedContainer)]
+            .filter(utils_1.isPresent)
+            .map(function (el) {
+            el.style.height = '';
+            var height = _this.container.nativeElement.offsetHeight;
+            if (hasScrollbar(_this.table, _this.container)) {
+                height -= _this.supportService.scrollbarWidth;
+            }
+            return { el: el, height: height };
+        })
+            .forEach(setHeight(this.renderer));
+    };
+    ListComponent.prototype.updateViewportColumns = function (range) {
+        var columns = this.columns.nonLockedLeafColumns.toArray();
+        var _a = range || this.calculateViewportColumns(), startIdx = _a.startIdx, endIdx = _a.endIdx, offset = _a.offset;
+        var start = Math.max(0, startIdx - bufferSize);
+        var end = Math.min(endIdx + bufferSize, columns.length - 1);
+        if (start < startIdx) {
+            for (var idx = startIdx - 1; idx >= start; idx--) {
+                offset -= columns[idx].width;
+            }
+        }
+        var currentColumns = columns.slice(start, end + 1);
+        this.viewportColumnsWidth = currentColumns.reduce(function (total, column) { return total + column.width; }, 0);
+        if (start > 0) {
+            var offsetColumn = new column_base_1.ColumnBase();
+            offsetColumn.width = offset;
+            currentColumns.unshift(offsetColumn);
+        }
+        this.viewportColumns = new core_1.QueryList();
+        this.viewportColumns.reset(currentColumns);
+        this.columnsStartIdx = start;
+        this.columnsEndIdx = end;
+        this.columnInfo.columnRangeChange.emit({ start: start, end: end, offset: offset });
+        if (!range) {
+            this.updateColumnViewport(startIdx, endIdx);
+        }
+    };
+    ListComponent.prototype.handleColumnScroll = function () {
+        var _this = this;
+        var container = this.container.nativeElement;
+        var scrollLeft = container.scrollLeft;
+        if (this.scrollLeft !== scrollLeft) {
+            this.scrollLeft = scrollLeft;
+            var range_1 = this.calculateViewportColumns();
+            this.updateColumnViewport(range_1.startIdx, range_1.endIdx);
+            if (range_1.startIdx < this.columnsStartIdx || this.columnsEndIdx < range_1.endIdx) {
+                utils_1.cancelAnimationFrame(this.columnUpdateFrame);
+                this.columnUpdateFrame = utils_1.requestAnimationFrame(function () {
+                    _this.ngZone.run(function () {
+                        _this.updateViewportColumns(range_1);
+                        _this.changeDetector.markForCheck();
+                    });
+                });
+            }
+        }
+    };
+    ListComponent.prototype.updateColumnViewport = function (startIdx, endIdx) {
+        var lockedCount = this.lockedLeafColumns.length;
+        var leafColumns = this.nonLockedLeafColumns.toArray();
+        var viewportStart = lockedCount + startIdx;
+        var viewportEnd = lockedCount + endIdx;
+        for (var idx = 0; idx < leafColumns.length; idx++) {
+            var column = leafColumns[idx];
+            if (column.isSpanColumn) {
+                viewportEnd += column.childColumns.length;
+            }
+        }
+        this.navigationService.setColumnViewport(viewportStart, viewportEnd);
+    };
+    ListComponent.prototype.calculateViewportColumns = function () {
+        var _a = this.container.nativeElement, scrollLeft = _a.scrollLeft, clientWidth = _a.clientWidth;
+        var columns = this.columns.nonLockedLeafColumns.toArray();
+        var normalizedScrollLeft = this.normalizeScrollLeft(scrollLeft);
+        var viewportEnd = normalizedScrollLeft + clientWidth;
+        var startIdx;
+        var endIdx = 0;
+        var current = 0;
+        var offset = 0;
+        var idx;
+        for (idx = 0; idx < columns.length; idx++) {
+            var column = columns[idx];
+            current += column.width || 0;
+            if (startIdx === undefined && current > normalizedScrollLeft) {
+                startIdx = idx;
+                offset = current - (column.width || 0);
+            }
+            if (current >= viewportEnd) {
+                endIdx = idx;
+                break;
+            }
+        }
+        if (!endIdx && idx > 0) {
+            endIdx = columns.length - 1;
+        }
+        return { startIdx: startIdx, endIdx: endIdx, offset: offset };
+    };
+    ListComponent.prototype.viewportWidthChange = function () {
+        var currentWidth = this.viewportColumns.toArray().reduce(function (total, column) { return total + column.width; }, 0);
+        return currentWidth !== this.viewportColumnsWidth;
+    };
+    ListComponent.prototype.normalizeScrollLeft = function (position) {
+        return this.rtl ? dom_queries_1.rtlScrollPosition(position, this.container.nativeElement, this.supportService.rtlScrollLeft) : position;
+    };
+    ListComponent.prototype.elementScrollLeft = function (element) {
+        if (this.rtl) {
+            return this.normalizeScrollLeft(this.container.nativeElement.scrollWidth - element.offsetLeft - element.offsetWidth);
+        }
+        return element.offsetLeft;
+    };
+    tslib_1.__decorate([
+        core_1.HostBinding("class.k-grid-container"),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], ListComponent.prototype, "hostClass", null);
+    tslib_1.__decorate([
+        core_1.HostBinding("attr.role"),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], ListComponent.prototype, "hostRole", null);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", Object)
+    ], ListComponent.prototype, "view", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", Number)
+    ], ListComponent.prototype, "total", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", Number)
+    ], ListComponent.prototype, "rowHeight", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", Number)
+    ], ListComponent.prototype, "take", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", Number)
+    ], ListComponent.prototype, "skip", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", columns_container_1.ColumnsContainer)
+    ], ListComponent.prototype, "columns", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", no_records_template_directive_1.NoRecordsTemplateDirective)
+    ], ListComponent.prototype, "noRecordsTemplate", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", Object)
+    ], ListComponent.prototype, "filterable", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", Function)
+    ], ListComponent.prototype, "rowClass", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", Boolean)
+    ], ListComponent.prototype, "loading", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", Function)
+    ], ListComponent.prototype, "trackBy", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", Boolean)
+    ], ListComponent.prototype, "virtualColumns", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", Boolean)
+    ], ListComponent.prototype, "isVirtual", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", Boolean)
+    ], ListComponent.prototype, "expandIcons", void 0);
+    tslib_1.__decorate([
+        core_1.Output(),
+        tslib_1.__metadata("design:type", core_1.EventEmitter)
+    ], ListComponent.prototype, "contentScroll", void 0);
+    tslib_1.__decorate([
+        core_1.Output(),
+        tslib_1.__metadata("design:type", core_1.EventEmitter)
+    ], ListComponent.prototype, "pageChange", void 0);
+    tslib_1.__decorate([
+        core_1.Output(),
+        tslib_1.__metadata("design:type", core_1.EventEmitter)
+    ], ListComponent.prototype, "scrollBottom", void 0);
+    tslib_1.__decorate([
+        core_1.ViewChild('container', { static: true }),
+        tslib_1.__metadata("design:type", core_1.ElementRef)
+    ], ListComponent.prototype, "container", void 0);
+    tslib_1.__decorate([
+        core_1.ViewChild('table', { static: true }),
+        tslib_1.__metadata("design:type", core_1.ElementRef)
+    ], ListComponent.prototype, "table", void 0);
+    tslib_1.__decorate([
+        core_1.ViewChild('lockedContainer', { static: false }),
+        tslib_1.__metadata("design:type", core_1.ElementRef)
+    ], ListComponent.prototype, "lockedContainer", void 0);
+    tslib_1.__decorate([
+        core_1.ViewChild('lockedTable', { static: false }),
+        tslib_1.__metadata("design:type", core_1.ElementRef)
+    ], ListComponent.prototype, "lockedTable", void 0);
+    tslib_1.__decorate([
+        core_1.ViewChildren(kendo_angular_common_1.ResizeSensorComponent),
+        tslib_1.__metadata("design:type", core_1.QueryList)
+    ], ListComponent.prototype, "resizeSensors", void 0);
+    ListComponent = tslib_1.__decorate([
+        core_1.Component({
+            providers: [
+                {
+                    provide: exports.SCROLLER_FACTORY_TOKEN,
+                    useValue: DEFAULT_SCROLLER_FACTORY
+                }
+            ],
+            selector: 'kendo-treelist-list',
+            template: "\n    <div #lockedContainer class=\"k-grid-content-locked\" role=\"presentation\"\n        *ngIf=\"isLocked\" [style.width.px]=\"lockedWidth\">\n        <div role=\"presentation\" class=\"k-grid-table-wrap\">\n            <table [locked]=\"true\" #lockedTable class=\"k-grid-table\" role=\"presentation\" [style.width.px]=\"lockedWidth\">\n                <colgroup kendoTreeListColGroup\n                    role=\"presentation\"\n                    [columns]=\"lockedLeafColumns\">\n                </colgroup>\n                <tbody kendoTreeListTableBody\n                    role=\"presentation\"\n                    [isLocked]=\"true\"\n                    [view]=\"view\"\n                    [noRecordsText]=\"''\"\n                    [columns]=\"lockedLeafColumns\"\n                    [totalColumnsCount]=\"leafColumns.length\"\n                    [skip]=\"skip\"\n                    [trackBy]=\"trackBy\"\n                    [filterable]=\"filterable\"\n                    [rowClass]=\"rowClass\"\n                    [expandIcons]=\"expandIcons\">\n                </tbody>\n            </table>\n            <kendo-resize-sensor></kendo-resize-sensor>\n        </div>\n        <div class=\"k-height-container\" role=\"presentation\">\n            <div [style.height.px]=\"totalHeight\"></div>\n        </div>\n    </div><div #container\n               class=\"k-grid-content k-virtual-content\"\n               role=\"presentation\" tabindex=\"-1\"\n               [kendoTreeListResizableContainer]=\"lockedLeafColumns.length\"\n               [lockedWidth]=\"lockedWidth + 1\">\n        <div role=\"presentation\" class=\"k-grid-table-wrap\">\n            <table [style.width.px]=\"nonLockedWidth\" #table [virtualColumns]=\"virtualColumns\"\n              class=\"k-grid-table\" role=\"presentation\">\n                <colgroup kendoTreeListColGroup\n                    role=\"presentation\"\n                    [columns]=\"nonLockedColumnsToRender\">\n                </colgroup>\n                <tbody kendoTreeListTableBody\n                    role=\"presentation\"\n                    [view]=\"view\"\n                    [columns]=\"nonLockedColumnsToRender\"\n                    [allColumns]=\"nonLockedLeafColumns\"\n                    [noRecordsTemplate]=\"noRecordsTemplate\"\n                    [lockedColumnsCount]=\"lockedLeafColumns.length\"\n                    [totalColumnsCount]=\"leafColumns.length\"\n                    [skip]=\"skip\"\n                    [trackBy]=\"trackBy\"\n                    [filterable]=\"filterable\"\n                    [rowClass]=\"rowClass\"\n                    [virtualColumns]=\"virtualColumns\"\n                    [expandIcons]=\"expandIcons\">\n                </tbody>\n            </table>\n            <kendo-resize-sensor *ngIf=\"isLocked\"></kendo-resize-sensor>\n        </div>\n        <kendo-resize-sensor *ngIf=\"isLocked || virtualColumns\"></kendo-resize-sensor>\n        <div class=\"k-height-container\" role=\"presentation\">\n            <div [style.height.px]=\"totalHeight\"></div>\n        </div>\n        <div *ngIf=\"virtualColumns\" class=\"k-width-container\" role=\"presentation\">\n            <div [style.width.px]=\"totalWidth\"></div>\n        </div>\n    </div>\n    <div *ngIf=\"loading\" kendoTreeListLoading>\n    </div>\n    "
+        }),
+        tslib_1.__param(0, core_1.Inject(exports.SCROLLER_FACTORY_TOKEN)),
+        tslib_1.__metadata("design:paramtypes", [Object, change_notification_service_1.ChangeNotificationService,
+            suspend_service_1.SuspendService,
+            core_1.NgZone,
+            core_1.Renderer2,
+            scroll_sync_service_1.ScrollSyncService,
+            resize_service_1.ResizeService,
+            edit_service_1.EditService,
+            browser_support_service_1.BrowserSupportService,
+            navigation_service_1.NavigationService,
+            scroll_request_service_1.ScrollRequestService,
+            kendo_angular_l10n_1.LocalizationService,
+            column_resizing_service_1.ColumnResizingService,
+            core_1.ChangeDetectorRef,
+            pdf_service_1.PDFService,
+            column_info_service_1.ColumnInfoService])
+    ], ListComponent);
+    return ListComponent;
+}());
+exports.ListComponent = ListComponent;