/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
import * as tslib_1 from "tslib";
import { ChangeDetectionStrategy, Component, HostBinding, Input, forwardRef, TemplateRef, ViewChild, ViewChildren, QueryList, ContentChildren, ElementRef, NgZone, ChangeDetectorRef, IterableDiffers, ViewContainerRef, Inject, ComponentFactoryResolver, Optional } from '@angular/core';
import { IgxGridBaseComponent, IgxGridTransaction } from '../grid-base.component';
import { GridBaseAPIService } from '../api.service';
import { IgxHierarchicalGridAPIService } from './hierarchical-grid-api.service';
import { IgxRowIslandComponent } from './row-island.component';
import { IgxChildGridRowComponent } from './child-grid-row.component';
import { IgxFilteringService } from '../filtering/grid-filtering.service';
import { DisplayDensityToken } from '../../core/displayDensity';
import { DOCUMENT } from '@angular/common';
import { IgxHierarchicalSelectionAPIService } from './selection';
import { IgxHierarchicalGridNavigationService } from './hierarchical-grid-navigation.service';
import { IgxGridSummaryService } from '../summaries/grid-summary.service';
import { IgxHierarchicalGridBaseComponent } from './hierarchical-grid-base.component';
import { takeUntil } from 'rxjs/operators';
import { IgxTemplateOutletDirective } from '../../directives/template-outlet/template_outlet.directive';
/** @type {?} */
var NEXT_ID = 0;
/**
 * @record
 */
export function HierarchicalStateRecord() { }
if (false) {
    /** @type {?} */
    HierarchicalStateRecord.prototype.rowID;
}
var IgxHierarchicalGridComponent = /** @class */ (function (_super) {
    tslib_1.__extends(IgxHierarchicalGridComponent, _super);
    function IgxHierarchicalGridComponent(gridAPI, selection, transactionFactory, elementRef, zone, document, cdr, resolver, differs, viewRef, navigation, filteringService, summaryService, _displayDensityOptions) {
        var _this = _super.call(this, gridAPI, selection, typeof transactionFactory === 'function' ? transactionFactory() : transactionFactory, elementRef, zone, document, cdr, resolver, differs, viewRef, navigation, filteringService, summaryService, _displayDensityOptions) || this;
        _this.transactionFactory = transactionFactory;
        _this.document = document;
        _this.summaryService = summaryService;
        _this._displayDensityOptions = _displayDensityOptions;
        /**
         * Sets the state of the `IgxHierarchicalGridComponent` containing which rows are expanded.
         * ```typescript
         * this.gridState = [{ rowID: 1 }, { rowID: 4}];
         * ```
         * ```html
         * <igx-hierarchical-grid [primaryKey]="'ID'" [data]="Data" [autoGenerate]="false" [hierarchicalState]="hgridState">
         *      <igx-column field="ID"  [dataType]='number'></igx-column>
         *      <igx-column field="Product"  [dataType]='string'></igx-column>
         *      <igx-column field="Description"  [dataType]='string'></igx-column>
         * </igx-hierarchical-grid>
         * ```
         * \@memberof IgxHierarchicalGridComponent
         */
        _this.hierarchicalState = [];
        /**
         * @hidden
         */
        _this.highlightedRowID = null;
        /**
         * @hidden
         */
        _this.updateOnRender = false;
        /**
         * @hidden
         */
        _this.parent = null;
        _this._hierarchicalState = [];
        _this._filteredData = null;
        _this.h_id = "igx-hierarchical-grid-" + NEXT_ID++;
        _this.childGridTemplates = new Map();
        _this.scrollTop = 0;
        _this.scrollLeft = 0;
        _this.hgridAPI = (/** @type {?} */ (gridAPI));
        return _this;
    }
    Object.defineProperty(IgxHierarchicalGridComponent.prototype, "id", {
        /**
         * Sets the value of the `id` attribute. If not provided it will be automatically generated.
         * ```html
         * <igx-hierarchical-grid [id]="'igx-hgrid-1'" [data]="Data" [autoGenerate]="true"></igx-hierarchical-grid>
         * ```
         * @memberof IgxHierarchicalGridComponent
         */
        get: /**
         * Sets the value of the `id` attribute. If not provided it will be automatically generated.
         * ```html
         * <igx-hierarchical-grid [id]="'igx-hgrid-1'" [data]="Data" [autoGenerate]="true"></igx-hierarchical-grid>
         * ```
         * \@memberof IgxHierarchicalGridComponent
         * @return {?}
         */
        function () {
            return this.h_id;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxHierarchicalGridComponent.prototype, "data", {
        /**
         * Returns an array of data set to the `IgxHierarchicalGridComponent`.
         * ```typescript
         * let filteredData = this.grid.filteredData;
         * ```
         * @memberof IgxHierarchicalGridComponent
         */
        get: /**
         * Returns an array of data set to the `IgxHierarchicalGridComponent`.
         * ```typescript
         * let filteredData = this.grid.filteredData;
         * ```
         * \@memberof IgxHierarchicalGridComponent
         * @return {?}
         */
        function () {
            return this._data;
        },
        /**
         * An @Input property that lets you fill the `IgxHierarchicalGridComponent` with an array of data.
         * ```html
         * <igx-hierarchical-grid [data]="Data" [autoGenerate]="true"></igx-hierarchical-grid>
         * ```
         * @memberof IgxHierarchicalGridComponent
         */
        set: /**
         * An \@Input property that lets you fill the `IgxHierarchicalGridComponent` with an array of data.
         * ```html
         * <igx-hierarchical-grid [data]="Data" [autoGenerate]="true"></igx-hierarchical-grid>
         * ```
         * \@memberof IgxHierarchicalGridComponent
         * @param {?} value
         * @return {?}
         */
        function (value) {
            this._data = value;
            this.summaryService.clearSummaryCache();
            if (this.shouldGenerate) {
                this.setupColumns();
                this.reflow();
            }
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxHierarchicalGridComponent.prototype, "filteredData", {
        /**
         * Returns an array of objects containing the filtered data in the `IgxHierarchicalGridComponent`.
         * ```typescript
         * let filteredData = this.grid.filteredData;
         * ```
         * @memberof IgxHierarchicalGridComponent
         */
        get: /**
         * Returns an array of objects containing the filtered data in the `IgxHierarchicalGridComponent`.
         * ```typescript
         * let filteredData = this.grid.filteredData;
         * ```
         * \@memberof IgxHierarchicalGridComponent
         * @return {?}
         */
        function () {
            return this._filteredData;
        },
        /**
         * Sets an array of objects containing the filtered data in the `IgxHierarchicalGridComponent`.
         * ```typescript
         * this.grid.filteredData = [{
         *       ID: 1,
         *       Name: "A"
         * }];
         * ```
         * @memberof IgxHierarchicalGridComponent
         */
        set: /**
         * Sets an array of objects containing the filtered data in the `IgxHierarchicalGridComponent`.
         * ```typescript
         * this.grid.filteredData = [{
         *       ID: 1,
         *       Name: "A"
         * }];
         * ```
         * \@memberof IgxHierarchicalGridComponent
         * @param {?} value
         * @return {?}
         */
        function (value) {
            this._filteredData = value;
            if (this.rowSelectable) {
                this.updateHeaderCheckboxStatusOnFilter(this._filteredData);
            }
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxHierarchicalGridComponent.prototype, "expandChildren", {
        /**
         * Gets if all immediate children of the `IgxHierarchicalGridComponent` previously have been set to be expanded/collapsed.
         * If previously set and some rows have been manually expanded/collapsed it will still return the last set value.
         * ```typescript
         * const expanded = this.grid.expandChildren;
         * ```
         * @memberof IgxHierarchicalGridComponent
         */
        get: /**
         * Gets if all immediate children of the `IgxHierarchicalGridComponent` previously have been set to be expanded/collapsed.
         * If previously set and some rows have been manually expanded/collapsed it will still return the last set value.
         * ```typescript
         * const expanded = this.grid.expandChildren;
         * ```
         * \@memberof IgxHierarchicalGridComponent
         * @return {?}
         */
        function () {
            return this._expandChildren;
        },
        /**
         * Sets if all immediate children of the `IgxHierarchicalGridComponent` should be expanded/collapsed.
         * Defult value is false.
         * ```html
         * <igx-hierarchical-grid [id]="'igx-grid-1'" [data]="Data" [autoGenerate]="true" [expandChildren]="true"></igx-hierarchical-grid>
         * ```
         * @memberof IgxHierarchicalGridComponent
         */
        set: /**
         * Sets if all immediate children of the `IgxHierarchicalGridComponent` should be expanded/collapsed.
         * Defult value is false.
         * ```html
         * <igx-hierarchical-grid [id]="'igx-grid-1'" [data]="Data" [autoGenerate]="true" [expandChildren]="true"></igx-hierarchical-grid>
         * ```
         * \@memberof IgxHierarchicalGridComponent
         * @param {?} value
         * @return {?}
         */
        function (value) {
            var _this = this;
            this._expandChildren = value;
            if (value && this.data) {
                this.hierarchicalState = this.data.map(function (rec) {
                    return { rowID: _this.primaryKey ? rec[_this.primaryKey] : rec };
                });
            }
            else if (this.data) {
                this.hierarchicalState = [];
            }
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxHierarchicalGridComponent.prototype, "hasExpandableChildren", {
        /**
         * @hidden
         */
        get: /**
         * @hidden
         * @return {?}
         */
        function () {
            if (!this.data || this.data.length === 0) {
                return false;
            }
            return !!this.childLayoutKeys.length;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxHierarchicalGridComponent.prototype, "childLayoutKeys", {
        /**
         * @hidden
         */
        get: /**
         * @hidden
         * @return {?}
         */
        function () {
            /** @type {?} */
            var layoutsList = this.parentIsland ? this.parentIsland.children : this.childLayoutList;
            /** @type {?} */
            var keys = layoutsList.map(function (item) { return item.key; });
            return keys;
        },
        enumerable: true,
        configurable: true
    });
    /**
     * @hidden
     */
    /**
     * @hidden
     * @return {?}
     */
    IgxHierarchicalGridComponent.prototype.ngOnInit = /**
     * @hidden
     * @return {?}
     */
    function () {
        this.hgridAPI.register(this);
        _super.prototype.ngOnInit.call(this);
        this._transactions = this.parentIsland ? this.parentIsland.transactions : this._transactions;
    };
    /**
     * @hidden
     */
    /**
     * @hidden
     * @return {?}
     */
    IgxHierarchicalGridComponent.prototype.ngAfterViewInit = /**
     * @hidden
     * @return {?}
     */
    function () {
        var _this = this;
        _super.prototype.ngAfterViewInit.call(this);
        this.verticalScrollContainer.getVerticalScroll().addEventListener('scroll', this.hg_verticalScrollHandler.bind(this));
        this.parentVirtDir.getHorizontalScroll().addEventListener('scroll', this.hg_horizontalScrollHandler.bind(this));
        if (this.expandChildren && this.data && this.hierarchicalState.length !== this.data.length) {
            this.hierarchicalState = this.data.map(function (rec) {
                return { rowID: _this.primaryKey ? rec[_this.primaryKey] : rec };
            });
        }
        this.verticalScrollContainer.onBeforeViewDestroyed.pipe(takeUntil(this.destroy$)).subscribe(function (view) {
            /** @type {?} */
            var rowData = view.context.$implicit;
            if (_this.isChildGridRecord(rowData)) {
                /** @type {?} */
                var cachedData = _this.childGridTemplates.get(rowData.rowID);
                if (cachedData) {
                    /** @type {?} */
                    var tmlpOutlet = cachedData.owner;
                    tmlpOutlet._viewContainerRef.detach(0);
                }
            }
        });
        if (this.parent) {
            this._displayDensity = this.rootGrid._displayDensity;
            this.rootGrid.onDensityChanged.pipe(takeUntil(this.destroy$)).subscribe(function () {
                requestAnimationFrame(function () {
                    _this._displayDensity = _this.rootGrid._displayDensity;
                    if (document.body.contains(_this.nativeElement)) {
                        _this.reflow();
                    }
                    else {
                        _this.updateOnRender = true;
                    }
                });
            });
        }
    };
    /**
     * @hidden
     */
    /**
     * @hidden
     * @return {?}
     */
    IgxHierarchicalGridComponent.prototype.ngAfterContentInit = /**
     * @hidden
     * @return {?}
     */
    function () {
        var _this = this;
        /** @type {?} */
        var nestedColumns = this.allLayoutList.map(function (layout) {
            layout.rootGrid = _this;
            return layout.columnList.toArray();
        });
        /** @type {?} */
        var colsArray = [].concat.apply([], nestedColumns);
        if (colsArray.length > 0) {
            /** @type {?} */
            var topCols = this.columnList.filter(function (item) {
                return colsArray.indexOf(item) === -1;
            });
            this.columnList.reset(topCols);
        }
        _super.prototype.ngAfterContentInit.call(this);
    };
    Object.defineProperty(IgxHierarchicalGridComponent.prototype, "template", {
        /**
        * @hidden
        */
        get: /**
         * @hidden
         * @return {?}
         */
        function () {
            if (this.filteredData && this.filteredData.length === 0) {
                return this.emptyGridTemplate ? this.emptyGridTemplate : this.emptyFilteredGridTemplate;
            }
            if (this.isLoading && (!this.data || this.dataLength === 0)) {
                return this.loadingGridTemplate ? this.loadingGridTemplate : this.loadingGridDefaultTemplate;
            }
            if (this.dataLength === 0) {
                return this.emptyGridTemplate ? this.emptyGridTemplate : this.emptyGridDefaultTemplate;
            }
        },
        enumerable: true,
        configurable: true
    });
    /**
     * Gets calculated width of the pinned area.
     * ```typescript
     * const pinnedWidth = this.grid.getPinnedWidth();
     * ```
     * @param takeHidden If we should take into account the hidden columns in the pinned area.
     * @memberof IgxHierarchicalGridComponent
     */
    /**
     * Gets calculated width of the pinned area.
     * ```typescript
     * const pinnedWidth = this.grid.getPinnedWidth();
     * ```
     * \@memberof IgxHierarchicalGridComponent
     * @param {?=} takeHidden If we should take into account the hidden columns in the pinned area.
     * @return {?}
     */
    IgxHierarchicalGridComponent.prototype.getPinnedWidth = /**
     * Gets calculated width of the pinned area.
     * ```typescript
     * const pinnedWidth = this.grid.getPinnedWidth();
     * ```
     * \@memberof IgxHierarchicalGridComponent
     * @param {?=} takeHidden If we should take into account the hidden columns in the pinned area.
     * @return {?}
     */
    function (takeHidden) {
        if (takeHidden === void 0) { takeHidden = false; }
        return _super.prototype.getPinnedWidth.call(this, takeHidden) + this.headerHierarchyExpander.nativeElement.clientWidth;
    };
    /**
     * @hidden
     */
    /**
     * @hidden
     * @param {?} rowData
     * @return {?}
     */
    IgxHierarchicalGridComponent.prototype.isRowHighlighted = /**
     * @hidden
     * @param {?} rowData
     * @return {?}
     */
    function (rowData) {
        return this.highlightedRowID === rowData.rowID;
    };
    /**
     * @hidden
     */
    /**
     * @hidden
     * @param {?} record
     * @return {?}
     */
    IgxHierarchicalGridComponent.prototype.isHierarchicalRecord = /**
     * @hidden
     * @param {?} record
     * @return {?}
     */
    function (record) {
        return this.childLayoutList.length !== 0 && record[this.childLayoutList.first.key];
    };
    /**
     * @hidden
     */
    /**
     * @hidden
     * @param {?} record
     * @return {?}
     */
    IgxHierarchicalGridComponent.prototype.isChildGridRecord = /**
     * @hidden
     * @param {?} record
     * @return {?}
     */
    function (record) {
        // Can be null when there is defined layout but no child data was found
        return record.childGridData !== undefined;
    };
    /**
     * @hidden
     */
    /**
     * @hidden
     * @param {?} index
     * @param {?} rec
     * @return {?}
     */
    IgxHierarchicalGridComponent.prototype.trackChanges = /**
     * @hidden
     * @param {?} index
     * @param {?} rec
     * @return {?}
     */
    function (index, rec) {
        if (rec.childGridData !== undefined) {
            // if is child rec
            return rec.rowID;
        }
        return rec;
    };
    /**
     * @hidden
     */
    /**
     * @hidden
     * @param {?} rowData
     * @return {?}
     */
    IgxHierarchicalGridComponent.prototype.getContext = /**
     * @hidden
     * @param {?} rowData
     * @return {?}
     */
    function (rowData) {
        if (this.isChildGridRecord(rowData)) {
            /** @type {?} */
            var cachedData = this.childGridTemplates.get(rowData.rowID);
            if (cachedData) {
                /** @type {?} */
                var view = cachedData.view;
                /** @type {?} */
                var tmlpOutlet = cachedData.owner;
                return {
                    $implicit: rowData,
                    moveView: view,
                    owner: tmlpOutlet,
                    index: this.verticalScrollContainer.igxForOf.indexOf(rowData)
                };
            }
            else {
                /** @type {?} */
                var rowID = this.primaryKey ? rowData.rowID : this.data.indexOf(rowData.rowID);
                // child rows contain unique grids, hence should have unique templates
                return {
                    $implicit: rowData,
                    templateID: 'childRow-' + rowID,
                    index: this.verticalScrollContainer.igxForOf.indexOf(rowData)
                };
            }
        }
        else {
            return {
                $implicit: rowData,
                templateID: 'dataRow',
                index: this.verticalScrollContainer.igxForOf.indexOf(rowData)
            };
        }
    };
    Object.defineProperty(IgxHierarchicalGridComponent.prototype, "rootGrid", {
        /**
         * @hidden
        */
        get: /**
         * @hidden
         * @template THIS
         * @this {THIS}
         * @return {THIS}
         */
        function () {
            /** @type {?} */
            var currGrid = (/** @type {?} */ (this));
            while (currGrid.parent) {
                currGrid = currGrid.parent;
            }
            return currGrid;
        },
        enumerable: true,
        configurable: true
    });
    /**
     * @hidden
     * Gets the visible content height that includes header + tbody + footer.
     * For hierarchical child grid it may be scrolled and not fully visible.
     */
    /**
     * @hidden
     * Gets the visible content height that includes header + tbody + footer.
     * For hierarchical child grid it may be scrolled and not fully visible.
     * @return {?}
     */
    IgxHierarchicalGridComponent.prototype.getVisibleContentHeight = /**
     * @hidden
     * Gets the visible content height that includes header + tbody + footer.
     * For hierarchical child grid it may be scrolled and not fully visible.
     * @return {?}
     */
    function () {
        /** @type {?} */
        var height = _super.prototype.getVisibleContentHeight.call(this);
        if (this.parent) {
            /** @type {?} */
            var rootHeight = this.rootGrid.getVisibleContentHeight();
            /** @type {?} */
            var topDiff = this.nativeElement.getBoundingClientRect().top - this.rootGrid.nativeElement.getBoundingClientRect().top;
            height = rootHeight - topDiff > height ? height : rootHeight - topDiff;
        }
        return height;
    };
    /**
     * @hidden
    */
    /**
     * @hidden
     * @return {?}
     */
    IgxHierarchicalGridComponent.prototype.collapseAllRows = /**
     * @hidden
     * @return {?}
     */
    function () {
        this.hierarchicalState = [];
    };
    /**
     * @hidden
     */
    /**
     * @hidden
     * @param {?} record
     * @return {?}
     */
    IgxHierarchicalGridComponent.prototype.isExpanded = /**
     * @hidden
     * @param {?} record
     * @return {?}
     */
    function (record) {
        var _this = this;
        /** @type {?} */
        var inState;
        if (record.childGridData !== undefined) {
            inState = !!this.hierarchicalState.find(function (v) { return v.rowID === record.rowID; });
        }
        else {
            inState = !!this.hierarchicalState.find(function (v) {
                return _this.primaryKey ? v.rowID === record[_this.primaryKey] : v.rowID === record;
            });
        }
        return inState && this.childLayoutList.length !== 0;
    };
    /**
     * @hidden
     */
    /**
     * @hidden
     * @param {?} args
     * @return {?}
     */
    IgxHierarchicalGridComponent.prototype.viewCreatedHandler = /**
     * @hidden
     * @param {?} args
     * @return {?}
     */
    function (args) {
        if (this.isChildGridRecord(args.context.$implicit)) {
            /** @type {?} */
            var key = args.context.$implicit.rowID;
            this.childGridTemplates.set(key, args);
        }
    };
    /**
     * @hidden
     */
    /**
     * @hidden
     * @param {?} args
     * @return {?}
     */
    IgxHierarchicalGridComponent.prototype.viewMovedHandler = /**
     * @hidden
     * @param {?} args
     * @return {?}
     */
    function (args) {
        var _this = this;
        if (this.isChildGridRecord(args.context.$implicit)) {
            // view was moved, update owner in cache
            /** @type {?} */
            var key = args.context.$implicit.rowID;
            /** @type {?} */
            var cachedData = this.childGridTemplates.get(key);
            cachedData.owner = args.owner;
            this.childLayoutKeys.forEach(function (layoutKey) {
                /** @type {?} */
                var relatedGrid = _this.hgridAPI.getChildGridByID(layoutKey, args.context.$implicit.rowID);
                if (relatedGrid && relatedGrid.updateOnRender) {
                    // Detect changes if `expandChildren` has changed when the grid wasn't visible. This is for performance reasons.
                    relatedGrid.reflow();
                    relatedGrid.updateOnRender = false;
                }
            });
            /** @type {?} */
            var childGrids = this.getChildGrids(true);
            childGrids.forEach(function (grid) {
                grid.updateScrollPosition();
            });
        }
    };
    /**
     * @hidden
     */
    /**
     * @hidden
     * @return {?}
     */
    IgxHierarchicalGridComponent.prototype.updateScrollPosition = /**
     * @hidden
     * @return {?}
     */
    function () {
        /** @type {?} */
        var vScr = this.verticalScrollContainer.getVerticalScroll();
        /** @type {?} */
        var hScr = this.parentVirtDir.getHorizontalScroll();
        if (vScr) {
            vScr.scrollTop = this.scrollTop;
        }
        if (hScr) {
            hScr.scrollLeft = this.scrollLeft;
        }
    };
    /**
     * @hidden
     */
    /**
     * @hidden
     * @return {?}
     */
    IgxHierarchicalGridComponent.prototype.getPossibleColumnWidth = /**
     * @hidden
     * @return {?}
     */
    function () {
        /** @type {?} */
        var computedWidth = this.calcWidth || parseInt(this.document.defaultView.getComputedStyle(this.nativeElement).getPropertyValue('width'), 10);
        computedWidth -= this.headerHierarchyExpander.nativeElement.clientWidth;
        return _super.prototype.getPossibleColumnWidth.call(this, computedWidth);
    };
    /**
     * @protected
     * @param {?=} inDeph
     * @return {?}
     */
    IgxHierarchicalGridComponent.prototype.getChildGrids = /**
     * @protected
     * @param {?=} inDeph
     * @return {?}
     */
    function (inDeph) {
        return this.hgridAPI.getChildGrids(inDeph);
    };
    /**
     * @protected
     * @param {?} data
     * @return {?}
     */
    IgxHierarchicalGridComponent.prototype.generateDataFields = /**
     * @protected
     * @param {?} data
     * @return {?}
     */
    function (data) {
        var _this = this;
        return _super.prototype.generateDataFields.call(this, data).filter(function (field) {
            return _this.childLayoutKeys.indexOf(field) === -1;
        });
    };
    /**
     * @private
     * @param {?} event
     * @return {?}
     */
    IgxHierarchicalGridComponent.prototype.hg_verticalScrollHandler = /**
     * @private
     * @param {?} event
     * @return {?}
     */
    function (event) {
        this.scrollTop = event.target.scrollTop;
    };
    /**
     * @private
     * @param {?} event
     * @return {?}
     */
    IgxHierarchicalGridComponent.prototype.hg_horizontalScrollHandler = /**
     * @private
     * @param {?} event
     * @return {?}
     */
    function (event) {
        this.scrollLeft = event.target.scrollLeft;
    };
    IgxHierarchicalGridComponent.decorators = [
        { type: Component, args: [{
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    preserveWhitespaces: false,
                    selector: 'igx-hierarchical-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\">\n    <div class=\"igx-grid__thead-wrapper\"  role=\"rowgroup\" [style.width.px]='calcWidth + 1' #theadRow>\n        <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]='calcWidth + 1'>\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                <div class=\"igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header\" #headerHierarchyExpander [hidden]='!hasExpandableChildren'[ngClass]=\"{\n                    'igx-grid__hierarchical-expander--push': filteringService.isFilterRowVisible\n                }\">\n                    <igx-icon role=\"button\" fontSet=\"material\" [isActive]='hierarchicalState.length > 0 && hasExpandableChildren' (click)=\"collapseAllRows()\">unfold_less</igx-icon>\n                </div>\n                <ng-container *ngIf=\"showRowCheckboxes\">\n                    <div class=\"igx-grid__cbx-selection\" #headerCheckboxContainer [ngClass]=\"{\n                        'igx-grid__cbx-selection--push': filteringService.isFilterRowVisible\n                    }\">\n                        <igx-checkbox [checked]=\"allRowsSelected\" (change)=\"onHeaderCheckboxClick($event, filteredData)\" 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'  [igxForSizePropName]='\"calcWidth\"' #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        </div>\n        <igx-grid-filtering-row [style.width.px]='calcWidth' *ngIf=\"filteringService.isFilterRowVisible\" [column]=\"filteringService.filteredColumn\"></igx-grid-filtering-row>\n    </div>\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__thead-thumb\" [hidden]='!hasVerticalSroll()' [style.height]=\"headerHeight\" [style.width.px]=\"scrollWidth\"></div>\n</div>\n\n<div class=\"igx-grid__tbody\">\n    <div class=\"igx-grid__tbody-content\" role=\"rowgroup\" [style.height.px]='calcHeight' [style.width.px]='calcWidth + 1' #tbody (scroll)='scrollHandler($event)'>\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        | gridTransaction:id:pipeTrigger\n        | gridFiltering:filteringExpressionsTree:id:pipeTrigger\n        | gridSort:sortingExpressions:id:pipeTrigger\n        | gridHierarchicalPaging:page:perPage:id:pipeTrigger\n        | gridHierarchical:hierarchicalState:id:primaryKey:childLayoutKeys:pipeTrigger\"\n        let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\"  [igxForScrollContainer]='verticalScroll'\n        [igxForContainerSize]='calcHeight' [igxForItemSize]=\"rowHeight\" [igxForTrackBy]='trackChanges' #verticalScrollContainer (onChunkPreload)=\"dataLoading($event)\">\n                <ng-template\n                [igxTemplateOutlet]='(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) && isExpanded(rowData) ? child_record_template : hierarchical_record_template))'\n                [igxTemplateOutletContext]='getContext(rowData)'\n                (onViewCreated)='viewCreatedHandler($event)'\n                (onViewMoved)='viewMovedHandler($event)'\n                ></ng-template>\n            <!-- <ng-container *igxTemplateOutlet=\"(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) && isExpanded(rowData) ? child_record_template : hierarchical_record_template)); context: getContext(rowData)\"></ng-container> -->\n        </ng-template>\n        <ng-template #hierarchical_record_template let-rowIndex=\"index\" let-rowData>\n            <igx-hierarchical-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [rowData]=\"rowData\" #row>\n            </igx-hierarchical-grid-row>\n        </ng-template>\n        <ng-template #child_record_template let-rowIndex=\"index\" let-rowData>\n            <div style=\"overflow:auto;width: 100%;\" [attr.data-rowindex]='rowIndex' [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr--highlighted':isRowHighlighted(rowData)\n            }\">\n                    <igx-child-grid-row *ngFor=\"let layout of childLayoutList\" [parentGridID]=\"id\" [index]=\"rowIndex\" [rowData]=\"rowData\" [layout]='layout' #row>\n                    </igx-child-grid-row>\n            </div>\n        </ng-template>\n        <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-summary-row [gridID]=\"id\" [summaries]=\"rowData.summaries\" [index]=\"rowIndex\" class=\"igx-grid__summaries--body\" #summaryRow>\n            </igx-grid-summary-row>\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    <span *ngIf=\"hasMovableColumns && draggedColumn\" [igxColumnMovingDrop]=\"parentVirtDir\" [attr.droppable]=\"true\" id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    <div [hidden]='!hasVerticalSroll()' class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollWidth\" [style.height.px]='calcHeight'>\n        <ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder ></ng-template>\n    </div>\n</div>\n\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]='summariesHeight' #tfoot>\n    <igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summariesHeight' *ngIf=\"hasSummarizedColumns && rootSummariesEnabled\" [gridID]=\"id\" [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [indentation]=\"1\" [index]=\"0\" class=\"igx-grid__summaries\"  #summaryRow>\n    </igx-grid-summary-row>\n    <div class=\"igx-grid__tfoot-thumb\" [hidden]='!hasVerticalSroll()' [style.height.px]='summariesHeight' [style.width.px]=\"scrollWidth\"></div>\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<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\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 #defaultRowEditText>\n    You have {{ rowChangesCount }} changes in this row\n</ng-template>\n<ng-template #defaultRowEditActions>\n    <button igxButton igxRowEditTabStop (click)=\"endEdit(false, $event)\">Cancel</button>\n    <button igxButton igxRowEditTabStop (click)=\"endEdit(true, $event)\">Done</button>\n</ng-template>\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container *ngTemplateOutlet=\"rowEditText ? rowEditText : defaultRowEditText; context: { $implicit: rowChangesCount }\"></ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container *ngTemplateOutlet=\"rowEditActions ? rowEditActions : defaultRowEditActions; context: { $implicit: endEdit.bind(this) }\"></ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n",
                    providers: [
                        { provide: GridBaseAPIService, useClass: IgxHierarchicalGridAPIService },
                        { provide: IgxGridBaseComponent, useExisting: forwardRef(function () { return IgxHierarchicalGridComponent; }) },
                        IgxGridSummaryService,
                        IgxFilteringService,
                        IgxHierarchicalGridNavigationService
                    ]
                }] }
    ];
    /** @nocollapse */
    IgxHierarchicalGridComponent.ctorParameters = function () { return [
        { type: GridBaseAPIService },
        { type: IgxHierarchicalSelectionAPIService },
        { type: undefined, 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: IgxHierarchicalGridNavigationService },
        { type: IgxFilteringService },
        { type: IgxGridSummaryService },
        { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DisplayDensityToken,] }] }
    ]; };
    IgxHierarchicalGridComponent.propDecorators = {
        id: [{ type: HostBinding, args: ['attr.id',] }, { type: Input }],
        data: [{ type: Input }],
        hierarchicalState: [{ type: Input }],
        expandChildren: [{ type: Input }],
        childLayoutList: [{ type: ContentChildren, args: [IgxRowIslandComponent, { read: IgxRowIslandComponent, descendants: false },] }],
        allLayoutList: [{ type: ContentChildren, args: [IgxRowIslandComponent, { read: IgxRowIslandComponent, descendants: true },] }],
        hierarchicalRecordTemplate: [{ type: ViewChild, args: ['hierarchical_record_template', { read: TemplateRef },] }],
        childTemplate: [{ type: ViewChild, args: ['child_record_template', { read: TemplateRef },] }],
        headerHierarchyExpander: [{ type: ViewChild, args: ['headerHierarchyExpander', { read: ElementRef },] }],
        templateOutlets: [{ type: ViewChildren, args: [IgxTemplateOutletDirective, { read: IgxTemplateOutletDirective },] }],
        hierarchicalRows: [{ type: ViewChildren, args: [IgxChildGridRowComponent, { read: IgxChildGridRowComponent },] }]
    };
    return IgxHierarchicalGridComponent;
}(IgxHierarchicalGridBaseComponent));
export { IgxHierarchicalGridComponent };
if (false) {
    /**
     * Sets the state of the `IgxHierarchicalGridComponent` containing which rows are expanded.
     * ```typescript
     * this.gridState = [{ rowID: 1 }, { rowID: 4}];
     * ```
     * ```html
     * <igx-hierarchical-grid [primaryKey]="'ID'" [data]="Data" [autoGenerate]="false" [hierarchicalState]="hgridState">
     *      <igx-column field="ID"  [dataType]='number'></igx-column>
     *      <igx-column field="Product"  [dataType]='string'></igx-column>
     *      <igx-column field="Description"  [dataType]='string'></igx-column>
     * </igx-hierarchical-grid>
     * ```
     * \@memberof IgxHierarchicalGridComponent
     * @type {?}
     */
    IgxHierarchicalGridComponent.prototype.hierarchicalState;
    /**
     * @hidden
     * @type {?}
     */
    IgxHierarchicalGridComponent.prototype.childLayoutList;
    /**
     * @hidden
     * @type {?}
     */
    IgxHierarchicalGridComponent.prototype.allLayoutList;
    /**
     * @type {?}
     * @protected
     */
    IgxHierarchicalGridComponent.prototype.hierarchicalRecordTemplate;
    /**
     * @type {?}
     * @protected
     */
    IgxHierarchicalGridComponent.prototype.childTemplate;
    /**
     * @type {?}
     * @protected
     */
    IgxHierarchicalGridComponent.prototype.headerHierarchyExpander;
    /**
     * @hidden
     * @type {?}
     */
    IgxHierarchicalGridComponent.prototype.templateOutlets;
    /**
     * @hidden
     * @type {?}
     */
    IgxHierarchicalGridComponent.prototype.hierarchicalRows;
    /**
     * @hidden
     * @type {?}
     */
    IgxHierarchicalGridComponent.prototype.highlightedRowID;
    /**
     * @hidden
     * @type {?}
     */
    IgxHierarchicalGridComponent.prototype.updateOnRender;
    /**
     * @hidden
     * @type {?}
     */
    IgxHierarchicalGridComponent.prototype.parent;
    /**
     * @type {?}
     * @private
     */
    IgxHierarchicalGridComponent.prototype._hierarchicalState;
    /**
     * @type {?}
     * @private
     */
    IgxHierarchicalGridComponent.prototype._data;
    /**
     * @type {?}
     * @private
     */
    IgxHierarchicalGridComponent.prototype._filteredData;
    /**
     * @type {?}
     * @private
     */
    IgxHierarchicalGridComponent.prototype.h_id;
    /**
     * @type {?}
     * @private
     */
    IgxHierarchicalGridComponent.prototype.childGridTemplates;
    /**
     * @type {?}
     * @private
     */
    IgxHierarchicalGridComponent.prototype.scrollTop;
    /**
     * @type {?}
     * @private
     */
    IgxHierarchicalGridComponent.prototype.scrollLeft;
    /**
     * @type {?}
     * @protected
     */
    IgxHierarchicalGridComponent.prototype.transactionFactory;
    /** @type {?} */
    IgxHierarchicalGridComponent.prototype.document;
    /** @type {?} */
    IgxHierarchicalGridComponent.prototype.summaryService;
    /**
     * @type {?}
     * @protected
     */
    IgxHierarchicalGridComponent.prototype._displayDensityOptions;
}
//# sourceMappingURL=data:application/json;base64, 