/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
 */
import * as tslib_1 from "tslib";
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ComponentFactoryResolver, ElementRef, HostBinding, Input, IterableDiffers, ViewContainerRef, Output, EventEmitter, Inject, NgZone, forwardRef, Optional } from '@angular/core';
import { IgxSelectionAPIService } from '../../core/selection';
import { IgxTreeGridAPIService } from './tree-grid-api.service';
import { IgxGridBaseComponent, IgxGridTransaction } from '../grid-base.component';
import { GridBaseAPIService } from '../api.service';
import { DisplayDensityToken } from '../../core/displayDensity';
import { TransactionType } from '../../services/transaction/transaction';
import { DOCUMENT } from '@angular/common';
import { IgxGridNavigationService } from '../grid-navigation.service';
import { IgxHierarchicalTransactionService } from '../../services';
import { IgxFilteringService } from '../filtering/grid-filtering.service';
import { IgxGridSummaryService } from '../summaries/grid-summary.service';
/** @type {?} */
var NEXT_ID = 0;
/**
 * **Ignite UI for Angular Tree Grid** -
 * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid.html)
 *
 * The Ignite UI Tree Grid displays and manipulates hierarchical data with consistent schema formatted as a table and
 * provides features such as sorting, filtering, editing, column pinning, paging, column moving and hiding.
 *
 * Example:
 * ```html
 * <igx-tree-grid [data]="employeeData" primaryKey="employeeID" foreignKey="PID" autoGenerate="false">
 *   <igx-column field="first" header="First Name"></igx-column>
 *   <igx-column field="last" header="Last Name"></igx-column>
 *   <igx-column field="role" header="Role"></igx-column>
 * </igx-tree-grid>
 * ```
 */
var IgxTreeGridComponent = /** @class */ (function (_super) {
    tslib_1.__extends(IgxTreeGridComponent, _super);
    function IgxTreeGridComponent(gridAPI, selection, _transactions, elementRef, zone, document, cdr, resolver, differs, viewRef, navigation, filteringService, summaryService, _displayDensityOptions) {
        var _this = _super.call(this, gridAPI, selection, _transactions, elementRef, zone, document, cdr, resolver, differs, viewRef, navigation, filteringService, summaryService, _displayDensityOptions) || this;
        _this._transactions = _transactions;
        _this.document = document;
        _this._displayDensityOptions = _displayDensityOptions;
        _this._id = "igx-tree-grid-" + NEXT_ID++;
        /**
         * Returns a map of all `ITreeGridRecord`s.
         * ```typescript
         * // gets the record with primaryKey=2
         * const states = this.grid.records.get(2);
         * ```
         * \@memberof IgxTreeGridComponent
         */
        _this.records = new Map();
        /**
         * Returns a map of all processed (filtered and sorted) `ITreeGridRecord`s.
         * ```typescript
         * // gets the processed record with primaryKey=2
         * const states = this.grid.processedRecords.get(2);
         * ```
         * \@memberof IgxTreeGridComponent
         */
        _this.processedRecords = new Map();
        /**
         * An \@Input property indicating whether child records should be deleted when their parent gets deleted.
         * By default it is set to true and deletes all children along with the parent.
         * ```html
         * <igx-tree-grid [data]="employeeData" [primaryKey]="employeeID" [foreignKey]="parentID" cascadeOnDelete="false" [autoGenerate]="true">
         * </igx-tree-grid>
         * ```
         * \@memberof IgxTreeGridComponent
         */
        _this.cascadeOnDelete = true;
        _this._expansionDepth = Infinity;
        _this._expansionStates = new Map();
        /**
         * Emitted when the expanded state of a row gets changed.
         * ```typescript
         * rowToggle(event: IRowToggleEventArgs){
         *  // the id of the row
         *  const rowID = event.rowID;
         *  // the new expansion state
         *  const newExpandedState = event.expanded;
         *  // the original event that triggered onRowToggle
         *  const originalEvent = event.event;
         *  // whether the event should be cancelled
         *  event.cancel = true;
         * }
         * ```
         * ```html
         * <igx-tree-grid [data]="employeeData" (onRowToggle)="rowToggle($event)" [autoGenerate]="true"></igx-tree-grid>
         * ```
         * \@memberof IgxTreeGridComponent
         */
        _this.onRowToggle = new EventEmitter();
        _this._gridAPI = (/** @type {?} */ (gridAPI));
        return _this;
    }
    Object.defineProperty(IgxTreeGridComponent.prototype, "id", {
        /**
         * An @Input property that sets the value of the `id` attribute. If not provided it will be automatically generated.
         * ```html
         * <igx-tree-grid [id]="'igx-tree-grid-1'"></igx-tree-grid>
         * ```
         * @memberof IgxTreeGridComponent
         */
        get: /**
         * An \@Input property that sets the value of the `id` attribute. If not provided it will be automatically generated.
         * ```html
         * <igx-tree-grid [id]="'igx-tree-grid-1'"></igx-tree-grid>
         * ```
         * \@memberof IgxTreeGridComponent
         * @return {?}
         */
        function () {
            return this._id;
        },
        set: /**
         * @param {?} value
         * @return {?}
         */
        function (value) {
            if (this._id !== value) {
                /** @type {?} */
                var oldId = this._id;
                this._id = value;
                this._gridAPI.reset(oldId, this._id);
            }
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxTreeGridComponent.prototype, "transactions", {
        /**
         * Get transactions service for the grid.
         * @experimental @hidden
         */
        get: /**
         * Get transactions service for the grid.
         * \@experimental \@hidden
         * @return {?}
         */
        function () {
            return this._transactions;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxTreeGridComponent.prototype, "expansionDepth", {
        /**
         * An @Input property that sets the count of levels to be expanded in the `IgxTreeGridComponent`. By default it is
         * set to `Infinity` which means all levels would be expanded.
         * ```html
         * <igx-tree-grid #grid [data]="employeeData" [childDataKey]="employees" expansionDepth="1" [autoGenerate]="true"></igx-tree-grid>
         * ```
         * @memberof IgxTreeGridComponent
         */
        get: /**
         * An \@Input property that sets the count of levels to be expanded in the `IgxTreeGridComponent`. By default it is
         * set to `Infinity` which means all levels would be expanded.
         * ```html
         * <igx-tree-grid #grid [data]="employeeData" [childDataKey]="employees" expansionDepth="1" [autoGenerate]="true"></igx-tree-grid>
         * ```
         * \@memberof IgxTreeGridComponent
         * @return {?}
         */
        function () {
            return this._expansionDepth;
        },
        set: /**
         * @param {?} value
         * @return {?}
         */
        function (value) {
            this._expansionDepth = value;
            this.cdr.markForCheck();
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxTreeGridComponent.prototype, "expansionStates", {
        /**
         * Returns a list of key-value pairs [row ID, expansion state]. Includes only states that differ from the default one.
         * ```typescript
         * const expansionStates = this.grid.expansionStates;
         * ```
         * @memberof IgxTreeGridComponent
         */
        get: /**
         * Returns a list of key-value pairs [row ID, expansion state]. Includes only states that differ from the default one.
         * ```typescript
         * const expansionStates = this.grid.expansionStates;
         * ```
         * \@memberof IgxTreeGridComponent
         * @return {?}
         */
        function () {
            return this._expansionStates;
        },
        /**
         * Sets a list of key-value pairs [row ID, expansion state].
         * ```typescript
         * const states = new Map<any, boolean>();
         * states.set(1, true);
         * this.grid.expansionStates = states;
         * ```
         * @memberof IgxTreeGridComponent
         */
        set: /**
         * Sets a list of key-value pairs [row ID, expansion state].
         * ```typescript
         * const states = new Map<any, boolean>();
         * states.set(1, true);
         * this.grid.expansionStates = states;
         * ```
         * \@memberof IgxTreeGridComponent
         * @param {?} value
         * @return {?}
         */
        function (value) {
            this._expansionStates = this.cloneMap(value);
            this.cdr.detectChanges();
        },
        enumerable: true,
        configurable: true
    });
    /**
     * @param {?} mapIn
     * @return {?}
     */
    IgxTreeGridComponent.prototype.cloneMap = /**
     * @param {?} mapIn
     * @return {?}
     */
    function (mapIn) {
        /** @type {?} */
        var mapCloned = new Map();
        mapIn.forEach(function (value, key, mapObj) {
            mapCloned.set(key, value);
        });
        return mapCloned;
    };
    /**
     * Expands the `IgxTreeGridRowComponent` with the specified rowID.
     * @param rowID The identifier of the row to be expanded.
     * ```typescript
     * this.grid.expandRow(2);
     * ```
     * @memberof IgxTreeGridComponent
     */
    /**
     * Expands the `IgxTreeGridRowComponent` with the specified rowID.
     * \@memberof IgxTreeGridComponent
     * @param {?} rowID The identifier of the row to be expanded.
     * ```typescript
     * this.grid.expandRow(2);
     * ```
     * @return {?}
     */
    IgxTreeGridComponent.prototype.expandRow = /**
     * Expands the `IgxTreeGridRowComponent` with the specified rowID.
     * \@memberof IgxTreeGridComponent
     * @param {?} rowID The identifier of the row to be expanded.
     * ```typescript
     * this.grid.expandRow(2);
     * ```
     * @return {?}
     */
    function (rowID) {
        this._gridAPI.expand_row(this.id, rowID);
    };
    /**
     * Collapses the `IgxTreeGridRowComponent` with the specified rowID.
     * @param rowID The identifier of the row to be collapsed.
     * ```typescript
     * this.grid.collapseRow(2);
     * ```
     * @memberof IgxTreeGridComponent
     */
    /**
     * Collapses the `IgxTreeGridRowComponent` with the specified rowID.
     * \@memberof IgxTreeGridComponent
     * @param {?} rowID The identifier of the row to be collapsed.
     * ```typescript
     * this.grid.collapseRow(2);
     * ```
     * @return {?}
     */
    IgxTreeGridComponent.prototype.collapseRow = /**
     * Collapses the `IgxTreeGridRowComponent` with the specified rowID.
     * \@memberof IgxTreeGridComponent
     * @param {?} rowID The identifier of the row to be collapsed.
     * ```typescript
     * this.grid.collapseRow(2);
     * ```
     * @return {?}
     */
    function (rowID) {
        this._gridAPI.collapse_row(this.id, rowID);
    };
    /**
     * Toggles the expansion state of the `IgxTreeGridRowComponent` with the specified rowID.
     * @param rowID The identifier of the row to be toggled.
     * ```typescript
     * this.grid.toggleRow(2);
     * ```
     * @memberof IgxTreeGridComponent
     */
    /**
     * Toggles the expansion state of the `IgxTreeGridRowComponent` with the specified rowID.
     * \@memberof IgxTreeGridComponent
     * @param {?} rowID The identifier of the row to be toggled.
     * ```typescript
     * this.grid.toggleRow(2);
     * ```
     * @return {?}
     */
    IgxTreeGridComponent.prototype.toggleRow = /**
     * Toggles the expansion state of the `IgxTreeGridRowComponent` with the specified rowID.
     * \@memberof IgxTreeGridComponent
     * @param {?} rowID The identifier of the row to be toggled.
     * ```typescript
     * this.grid.toggleRow(2);
     * ```
     * @return {?}
     */
    function (rowID) {
        this._gridAPI.toggle_row_expansion(this.id, rowID);
    };
    /**
     * Expands all rows.
     * ```typescript
     * this.grid.expandAll();
     * ```
     * @memberof IgxTreeGridComponent
     */
    /**
     * Expands all rows.
     * ```typescript
     * this.grid.expandAll();
     * ```
     * \@memberof IgxTreeGridComponent
     * @return {?}
     */
    IgxTreeGridComponent.prototype.expandAll = /**
     * Expands all rows.
     * ```typescript
     * this.grid.expandAll();
     * ```
     * \@memberof IgxTreeGridComponent
     * @return {?}
     */
    function () {
        this._expansionDepth = Infinity;
        this.expansionStates = new Map();
    };
    /**
     * Collapses all rows.
     * ```typescript
     * this.grid.collapseAll();
     * ```
     * @memberof IgxTreeGridComponent
     */
    /**
     * Collapses all rows.
     * ```typescript
     * this.grid.collapseAll();
     * ```
     * \@memberof IgxTreeGridComponent
     * @return {?}
     */
    IgxTreeGridComponent.prototype.collapseAll = /**
     * Collapses all rows.
     * ```typescript
     * this.grid.collapseAll();
     * ```
     * \@memberof IgxTreeGridComponent
     * @return {?}
     */
    function () {
        this._expansionDepth = 0;
        this.expansionStates = new Map();
    };
    /**
     * Creates a new `IgxTreeGridRowComponent` with the given data. If a parentRowID is not specified, the newly created
     * row would be added at the root level. Otherwise, it would be added as a child of the row whose primaryKey matches
     * the specified parentRowID. If the parentRowID does not exist, an error would be thrown.
     * ```typescript
     * const record = {
     *     ID: this.grid.data[this.grid1.data.length - 1].ID + 1,
     *     Name: this.newRecord
     * };
     * this.grid.addRow(record, 1); // Adds a new child row to the row with ID=1.
     * ```
     * @param data
     * @param parentRowID
     * @memberof IgxTreeGridComponent
     */
    /**
     * Creates a new `IgxTreeGridRowComponent` with the given data. If a parentRowID is not specified, the newly created
     * row would be added at the root level. Otherwise, it would be added as a child of the row whose primaryKey matches
     * the specified parentRowID. If the parentRowID does not exist, an error would be thrown.
     * ```typescript
     * const record = {
     *     ID: this.grid.data[this.grid1.data.length - 1].ID + 1,
     *     Name: this.newRecord
     * };
     * this.grid.addRow(record, 1); // Adds a new child row to the row with ID=1.
     * ```
     * \@memberof IgxTreeGridComponent
     * @param {?} data
     * @param {?=} parentRowID
     * @return {?}
     */
    IgxTreeGridComponent.prototype.addRow = /**
     * Creates a new `IgxTreeGridRowComponent` with the given data. If a parentRowID is not specified, the newly created
     * row would be added at the root level. Otherwise, it would be added as a child of the row whose primaryKey matches
     * the specified parentRowID. If the parentRowID does not exist, an error would be thrown.
     * ```typescript
     * const record = {
     *     ID: this.grid.data[this.grid1.data.length - 1].ID + 1,
     *     Name: this.newRecord
     * };
     * this.grid.addRow(record, 1); // Adds a new child row to the row with ID=1.
     * ```
     * \@memberof IgxTreeGridComponent
     * @param {?} data
     * @param {?=} parentRowID
     * @return {?}
     */
    function (data, parentRowID) {
        if (parentRowID) {
            /** @type {?} */
            var parentRecord = this.records.get(parentRowID);
            if (!parentRecord) {
                throw Error('Invalid parent row ID!');
            }
            this.summaryService.clearSummaryCache({ rowID: parentRecord.rowID });
            if (this.primaryKey && this.foreignKey) {
                data[this.foreignKey] = parentRowID;
                _super.prototype.addRow.call(this, data);
            }
            else {
                /** @type {?} */
                var parentData = parentRecord.data;
                /** @type {?} */
                var childKey = this.childDataKey;
                if (this.transactions.enabled) {
                    /** @type {?} */
                    var rowId = this.primaryKey ? data[this.primaryKey] : data;
                    /** @type {?} */
                    var path = [];
                    path.push.apply(path, tslib_1.__spread(this.generateRowPath(parentRowID)));
                    path.push(parentRowID);
                    this.transactions.add((/** @type {?} */ ({
                        id: rowId,
                        path: path,
                        newValue: data,
                        type: TransactionType.ADD
                    })), null);
                }
                else {
                    if (!parentData[childKey]) {
                        parentData[childKey] = [];
                    }
                    parentData[childKey].push(data);
                }
                this.onRowAdded.emit({ data: data });
                this._pipeTrigger++;
                this.cdr.markForCheck();
                this.refreshSearch();
            }
        }
        else {
            if (this.primaryKey && this.foreignKey) {
                /** @type {?} */
                var rowID = data[this.foreignKey];
                this.summaryService.clearSummaryCache({ rowID: rowID });
            }
            _super.prototype.addRow.call(this, data);
        }
    };
    /** @hidden */
    /**
     * @hidden
     * @param {?} rowId
     * @return {?}
     */
    IgxTreeGridComponent.prototype.deleteRowById = /**
     * @hidden
     * @param {?} rowId
     * @return {?}
     */
    function (rowId) {
        //  if this is flat self-referencing data, and CascadeOnDelete is set to true
        //  and if we have transactions we should start pending transaction. This allows
        //  us in case of delete action to delete all child rows as single undo action
        /** @type {?} */
        var flatDataWithCascadeOnDeleteAndTransactions = this.primaryKey &&
            this.foreignKey &&
            this.cascadeOnDelete &&
            this.transactions.enabled;
        if (flatDataWithCascadeOnDeleteAndTransactions) {
            this.transactions.startPending();
        }
        _super.prototype.deleteRowById.call(this, rowId);
        if (flatDataWithCascadeOnDeleteAndTransactions) {
            this.transactions.endPending(true);
        }
    };
    /** @hidden */
    /**
     * @hidden
     * @param {?} rowID
     * @param {?} index
     * @return {?}
     */
    IgxTreeGridComponent.prototype.deleteRowFromData = /**
     * @hidden
     * @param {?} rowID
     * @param {?} index
     * @return {?}
     */
    function (rowID, index) {
        var _this = this;
        if (this.primaryKey && this.foreignKey) {
            _super.prototype.deleteRowFromData.call(this, rowID, index);
            if (this.cascadeOnDelete) {
                /** @type {?} */
                var treeRecord = this.records.get(rowID);
                if (treeRecord && treeRecord.children && treeRecord.children.length > 0) {
                    for (var i = 0; i < treeRecord.children.length; i++) {
                        /** @type {?} */
                        var child = treeRecord.children[i];
                        _super.prototype.deleteRowById.call(this, child.rowID);
                    }
                }
            }
        }
        else {
            /** @type {?} */
            var record = this.records.get(rowID);
            /** @type {?} */
            var collection = record.parent ? record.parent.data[this.childDataKey] : this.data;
            index = this.primaryKey ?
                collection.map(function (c) { return c[_this.primaryKey]; }).indexOf(rowID) :
                collection.indexOf(rowID);
            /** @type {?} */
            var selectedChildren = [];
            this._gridAPI.get_selected_children(this.id, record, selectedChildren);
            if (selectedChildren.length > 0) {
                this.deselectRows(selectedChildren);
            }
            if (this.transactions.enabled) {
                /** @type {?} */
                var path = this.generateRowPath(rowID);
                this.transactions.add({
                    id: rowID,
                    type: TransactionType.DELETE,
                    newValue: null,
                    path: path
                }, collection[index]);
            }
            else {
                collection.splice(index, 1);
            }
        }
    };
    /** @hidden */
    /**
     * @hidden
     * @param {?} rowId
     * @return {?}
     */
    IgxTreeGridComponent.prototype.generateRowPath = /**
     * @hidden
     * @param {?} rowId
     * @return {?}
     */
    function (rowId) {
        /** @type {?} */
        var path = [];
        /** @type {?} */
        var record = this.records.get(rowId);
        while (record.parent) {
            path.push(record.parent.rowID);
            record = record.parent;
        }
        return path.reverse();
    };
    /**
     * @hidden
     */
    /**
     * @hidden
     * @return {?}
     */
    IgxTreeGridComponent.prototype.restoreHighlight = /**
     * @hidden
     * @return {?}
     */
    function () {
    };
    /**
     * @hidden
     */
    /**
     * @hidden
     * @param {?=} updateActiveInfo
     * @return {?}
     */
    IgxTreeGridComponent.prototype.refreshSearch = /**
     * @hidden
     * @param {?=} updateActiveInfo
     * @return {?}
     */
    function (updateActiveInfo) {
        return 0;
    };
    /**
     * @hidden
     */
    /**
     * @hidden
     * @param {?} text
     * @param {?=} caseSensitive
     * @param {?=} exactMatch
     * @return {?}
     */
    IgxTreeGridComponent.prototype.findNext = /**
     * @hidden
     * @param {?} text
     * @param {?=} caseSensitive
     * @param {?=} exactMatch
     * @return {?}
     */
    function (text, caseSensitive, exactMatch) {
        return 0;
    };
    /**
     * @hidden
     */
    /**
     * @hidden
     * @param {?} text
     * @param {?=} caseSensitive
     * @param {?=} exactMatch
     * @return {?}
     */
    IgxTreeGridComponent.prototype.findPrev = /**
     * @hidden
     * @param {?} text
     * @param {?=} caseSensitive
     * @param {?=} exactMatch
     * @return {?}
     */
    function (text, caseSensitive, exactMatch) {
        return 0;
    };
    /**
     * @hidden
     */
    /**
     * @hidden
     * @return {?}
     */
    IgxTreeGridComponent.prototype.clearSearch = /**
     * @hidden
     * @return {?}
     */
    function () {
    };
    /**
    * @hidden
    */
    /**
     * @hidden
     * @param {?} rowData
     * @return {?}
     */
    IgxTreeGridComponent.prototype.getContext = /**
     * @hidden
     * @param {?} rowData
     * @return {?}
     */
    function (rowData) {
        return {
            $implicit: rowData,
            templateID: this.isSummaryRow(rowData) ? 'summaryRow' : 'dataRow'
        };
    };
    IgxTreeGridComponent.decorators = [
        { type: Component, args: [{
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    preserveWhitespaces: false,
                    selector: 'igx-tree-grid',
                    template: "<igx-grid-toolbar role=\"rowgroup\" [style.width.px]=\"calcWidth\" *ngIf=\"showToolbar\" [gridID]=\"id\" [displayDensity]=\"displayDensity\" #toolbar>\n</igx-grid-toolbar>\n\n<ng-template #defaultPager let-api>\n    <button [disabled]=\"api.isFirstPage\" (click)=\"api.paginate(0)\" igxButton=\"icon\" igxRipple igxRippleCentered=\"true\">\n        <igx-icon fontSet=\"material\">first_page</igx-icon>\n    </button>\n    <button [disabled]=\"api.isFirstPage\" (click)=\"api.previousPage()\" igxButton=\"icon\" igxRipple igxRippleCentered=\"true\">\n        <igx-icon fontSet=\"material\">chevron_left</igx-icon>\n    </button>\n    <span>{{ api.page + 1 }} of {{ api.totalPages }}</span>\n    <button [disabled]=\"api.isLastPage\" (click)=\"api.nextPage()\" igxRipple igxRippleCentered=\"true\" igxButton=\"icon\">\n        <igx-icon fontSet=\"material\">chevron_right</igx-icon>\n    </button>\n        <button [disabled]=\"api.isLastPage\" (click)=\"api.paginate(api.totalPages - 1)\" igxButton=\"icon\" igxRipple igxRippleCentered=\"true\">\n        <igx-icon fontSet=\"material\">last_page</igx-icon>\n    </button>\n    <select style=\"margin-left: 1rem;\" (change)=\"api.perPage = $event.target.value\">\n            <option [value]=\"val\" [selected]=\"api.perPage == val\" *ngFor=\"let val of [5, 10, 15, 25, 50, 100, 500]\">{{ val }}</option>\n    </select>\n</ng-template>\n\n<div class=\"igx-grid__thead\" role=\"rowgroup\" [style.width.px]='calcWidth' #theadRow>\n    <div class=\"igx-grid__tr\" [style.width.px]='calcWidth' role=\"row\">\n        <span *ngIf=\"hasMovableColumns && draggedColumn && pinnedColumns.length <= 0\" [igxColumnMovingDrop]=\"parentVirtDir\" [attr.droppable]=\"true\" id=\"left\" class=\"igx-grid__scroll-on-drag-left\" [style.left.px]=\"headerCheckboxWidth\"></span>\n        <span *ngIf=\"hasMovableColumns && draggedColumn && pinnedColumns.length > 0\" [igxColumnMovingDrop]=\"parentVirtDir\" [attr.droppable]=\"true\" id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n        <ng-container *ngIf=\"rowSelectable\">\n            <div class=\"igx-grid__cbx-selection\" #headerCheckboxContainer>\n                <igx-checkbox [checked]=\"allRowsSelected\" (change)=\"onHeaderCheckboxClick($event)\" disableRipple=\"true\" [aria-label]=\"headerCheckboxAriaLabel\" #headerCheckbox></igx-checkbox>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"pinnedColumns.length > 0\">\n            <ng-template ngFor let-col [ngForOf]=\"onlyTopLevel(pinnedColumns)\">\n                <igx-grid-header-group [igxColumnMovingDrag]=\"col\" [attr.droppable]=\"true\" [igxColumnMovingDrop]=\"col\" [column]=\"col\" [gridID]=\"id\" [style.min-width.px]=\"getHeaderGroupWidth(col)\" [style.flex-basis.px]=\"getHeaderGroupWidth(col)\"></igx-grid-header-group>\n            </ng-template>\n        </ng-container>\n        <ng-template igxGridFor let-col [igxGridForOf]=\"onlyTopLevel(unpinnedColumns)\" [igxForScrollOrientation]=\"'horizontal'\" [igxForScrollContainer]=\"parentVirtDir\"\n            [igxForContainerSize]='unpinnedWidth' [igxForTrackBy]='trackColumnChanges' #headerContainer>\n            <igx-grid-header-group [igxColumnMovingDrag]=\"col\" [attr.droppable]=\"true\" [igxColumnMovingDrop]=\"col\" [column]=\"col\" [gridID]=\"id\" [style.min-width.px]=\"getHeaderGroupWidth(col)\" [style.flex-basis.px]=\"getHeaderGroupWidth(col)\"></igx-grid-header-group>\n        </ng-template>\n        <span *ngIf=\"hasMovableColumns && draggedColumn\" [igxColumnMovingDrop]=\"parentVirtDir\" [attr.droppable]=\"true\" id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    </div>\n    <igx-grid-filtering-row *ngIf=\"filteringService.isFilterRowVisible\" [column]=\"filteringService.filteredColumn\"></igx-grid-filtering-row>\n</div>\n\n<div class=\"igx-grid__tbody\" role=\"rowgroup\" [style.height.px]='calcHeight' [style.width.px]='calcWidth' #tbody (scroll)='scrollHandler($event)' (wheel)=\"wheelHandler()\">\n    <span *ngIf=\"hasMovableColumns && draggedColumn && pinnedColumns.length <= 0\" [igxColumnMovingDrop]=\"parentVirtDir\" [attr.droppable]=\"true\" id=\"left\" class=\"igx-grid__scroll-on-drag-left\"></span>\n    <span *ngIf=\"hasMovableColumns && draggedColumn && pinnedColumns.length > 0\" [igxColumnMovingDrop]=\"parentVirtDir\" [attr.droppable]=\"true\" id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n    <ng-template igxGridFor let-rowData [igxGridForOf]=\"data\n\t| treeGridTransaction:id:pipeTrigger\n\t| treeGridHierarchizing:primaryKey:foreignKey:childDataKey:id:pipeTrigger\n    | treeGridFiltering:filteringExpressionsTree:id:pipeTrigger\n    | treeGridSorting:sortingExpressions:id:pipeTrigger\n    | treeGridFlattening:id:expansionDepth:expansionStates:pipeTrigger\n    | treeGridPaging:page:perPage:id:pipeTrigger\n    | treeGridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:pipeTrigger:summaryPipeTrigger\"\n\n    let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\"\n    [igxForContainerSize]='calcHeight' [igxForItemSize]=\"rowHeight\" #verticalScrollContainer (onChunkPreload)=\"dataLoading($event)\">\n        <ng-template #record_template>\n            <igx-tree-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [treeRow]=\"rowData\" #row>\n            </igx-tree-grid-row>\n        </ng-template>\n        <ng-template #summary_template>\n            <igx-grid-summary-row [gridID]=\"id\" [summaries]=\"rowData.summaries\" [firstCellIndentation]=\"rowData.cellIndentation\" [index]=\"rowIndex\" class=\"igx-grid__summaries--body\" #summaryRow>\n            </igx-grid-summary-row>\n        </ng-template>\n\n        <ng-container *igxTemplateOutlet=\"isSummaryRow(rowData) ? summary_template : record_template; context: getContext(rowData) \"></ng-container>\n    </ng-template>\n    <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n    <span *ngIf=\"hasMovableColumns && draggedColumn\" [igxColumnMovingDrop]=\"parentVirtDir\" [attr.droppable]=\"true\" id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.width.px]='calcWidth' #tfoot>\n    <igx-grid-summary-row *ngIf=\"hasSummarizedColumns && rootSummariesEnabled\" [gridID]=\"id\" [firstCellIndentation]=\"0\" [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"0\" class=\"igx-grid__summaries\"  #summaryRow>\n    </igx-grid-summary-row>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height]=\"'18px'\" #scr [hidden]=\"unpinnedWidth - totalWidth >= 0\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]='pinnedWidth' [hidden]=\"pinnedWidth === 0\"></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]='unpinnedWidth'>\n        <ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>\n        </ng-template>\n    </div>\n</div>\n\n<div class=\"igx-paginator igx-grid-paginator\" *ngIf=\"paging\" #paginator>\n    <ng-container *ngTemplateOutlet=\"paginationTemplate ? paginationTemplate : defaultPager; context: { $implicit: this }\">\n    </ng-container>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\">{{emptyFilteredGridMessage}}</span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\">{{emptyGridMessage}}</span>\n</ng-template>\n\n<div *ngIf=\"rowEditable\" igxToggle>\n    <div [className]=\"bannerClass\">\n        <ng-container *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: endEdit.bind(this) }\"></ng-container>\n    </div>\n</div>\n<ng-template #defaultRowEditTemplate >\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">You have {{ rowChangesCount }} changes in this row</span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <button igxButton igxRowEditTabStop (click)=\"endEdit(false, $event)\">Cancel</button>\n            <button igxButton igxRowEditTabStop (click)=\"endEdit(true, $event)\">Done</button>\n        </div>\n    </div>\n</ng-template>\n\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n",
                    providers: [IgxGridNavigationService, IgxGridSummaryService, { provide: GridBaseAPIService, useClass: IgxTreeGridAPIService },
                        { provide: IgxGridBaseComponent, useExisting: forwardRef(function () { return IgxTreeGridComponent; }) }, IgxFilteringService]
                }] }
    ];
    /** @nocollapse */
    IgxTreeGridComponent.ctorParameters = function () { return [
        { type: GridBaseAPIService },
        { type: IgxSelectionAPIService },
        { type: IgxHierarchicalTransactionService, decorators: [{ type: Inject, args: [IgxGridTransaction,] }] },
        { type: ElementRef },
        { type: NgZone },
        { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
        { type: ChangeDetectorRef },
        { type: ComponentFactoryResolver },
        { type: IterableDiffers },
        { type: ViewContainerRef },
        { type: IgxGridNavigationService },
        { type: IgxFilteringService },
        { type: IgxGridSummaryService },
        { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DisplayDensityToken,] }] }
    ]; };
    IgxTreeGridComponent.propDecorators = {
        id: [{ type: HostBinding, args: ['attr.id',] }, { type: Input }],
        childDataKey: [{ type: Input }],
        foreignKey: [{ type: Input }],
        cascadeOnDelete: [{ type: Input }],
        expansionDepth: [{ type: Input }],
        expansionStates: [{ type: Input }],
        onRowToggle: [{ type: Output }]
    };
    return IgxTreeGridComponent;
}(IgxGridBaseComponent));
export { IgxTreeGridComponent };
if (false) {
    /** @type {?} */
    IgxTreeGridComponent.prototype._id;
    /**
     * @hidden
     * @type {?}
     */
    IgxTreeGridComponent.prototype.flatData;
    /**
     * Returns an array of the root level `ITreeGridRecord`s.
     * ```typescript
     * // gets the root record with index=2
     * const states = this.grid.rootRecords[2];
     * ```
     * \@memberof IgxTreeGridComponent
     * @type {?}
     */
    IgxTreeGridComponent.prototype.rootRecords;
    /**
     * Returns a map of all `ITreeGridRecord`s.
     * ```typescript
     * // gets the record with primaryKey=2
     * const states = this.grid.records.get(2);
     * ```
     * \@memberof IgxTreeGridComponent
     * @type {?}
     */
    IgxTreeGridComponent.prototype.records;
    /**
     * Returns an array of processed (filtered and sorted) root `ITreeGridRecord`s.
     * ```typescript
     * // gets the processed root record with index=2
     * const states = this.grid.processedRootRecords[2];
     * ```
     * \@memberof IgxTreeGridComponent
     * @type {?}
     */
    IgxTreeGridComponent.prototype.processedRootRecords;
    /**
     * Returns a map of all processed (filtered and sorted) `ITreeGridRecord`s.
     * ```typescript
     * // gets the processed record with primaryKey=2
     * const states = this.grid.processedRecords.get(2);
     * ```
     * \@memberof IgxTreeGridComponent
     * @type {?}
     */
    IgxTreeGridComponent.prototype.processedRecords;
    /**
     * An \@Input property that sets the child data key of the `IgxTreeGridComponent`.
     * ```html
     * <igx-tree-grid #grid [data]="employeeData" [childDataKey]="employees" [autoGenerate]="true"></igx-tree-grid>
     * ```
     * \@memberof IgxTreeGridComponent
     * @type {?}
     */
    IgxTreeGridComponent.prototype.childDataKey;
    /**
     * An \@Input property that sets the foreign key of the `IgxTreeGridComponent`.
     * ```html
     * <igx-tree-grid #grid [data]="employeeData" [primaryKey]="employeeID" [foreignKey]="parentID" [autoGenerate]="true"></igx-tree-grid>
     * ```
     * \@memberof IgxTreeGridComponent
     * @type {?}
     */
    IgxTreeGridComponent.prototype.foreignKey;
    /**
     * An \@Input property indicating whether child records should be deleted when their parent gets deleted.
     * By default it is set to true and deletes all children along with the parent.
     * ```html
     * <igx-tree-grid [data]="employeeData" [primaryKey]="employeeID" [foreignKey]="parentID" cascadeOnDelete="false" [autoGenerate]="true">
     * </igx-tree-grid>
     * ```
     * \@memberof IgxTreeGridComponent
     * @type {?}
     */
    IgxTreeGridComponent.prototype.cascadeOnDelete;
    /** @type {?} */
    IgxTreeGridComponent.prototype._expansionDepth;
    /** @type {?} */
    IgxTreeGridComponent.prototype._expansionStates;
    /**
     * Emitted when the expanded state of a row gets changed.
     * ```typescript
     * rowToggle(event: IRowToggleEventArgs){
     *  // the id of the row
     *  const rowID = event.rowID;
     *  // the new expansion state
     *  const newExpandedState = event.expanded;
     *  // the original event that triggered onRowToggle
     *  const originalEvent = event.event;
     *  // whether the event should be cancelled
     *  event.cancel = true;
     * }
     * ```
     * ```html
     * <igx-tree-grid [data]="employeeData" (onRowToggle)="rowToggle($event)" [autoGenerate]="true"></igx-tree-grid>
     * ```
     * \@memberof IgxTreeGridComponent
     * @type {?}
     */
    IgxTreeGridComponent.prototype.onRowToggle;
    /** @type {?} */
    IgxTreeGridComponent.prototype._gridAPI;
    /** @type {?} */
    IgxTreeGridComponent.prototype._transactions;
    /** @type {?} */
    IgxTreeGridComponent.prototype.document;
    /** @type {?} */
    IgxTreeGridComponent.prototype._displayDensityOptions;
}
//# sourceMappingURL=data:application/json;base64, 