/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
import * as tslib_1 from "tslib";
import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter, ContentChild, ViewChildren, QueryList, ViewChild, ElementRef, TemplateRef, NgZone, ChangeDetectorRef, ComponentFactoryResolver, IterableDiffers, ViewContainerRef, Inject, HostBinding, forwardRef, Optional } from '@angular/core';
import { GridBaseAPIService } from '../api.service';
import { IgxGridBaseComponent, IgxGridTransaction } from '../grid-base.component';
import { IgxGridNavigationService } from '../grid-navigation.service';
import { IgxGridAPIService } from './grid-api.service';
import { cloneArray } from '../../core/utils';
import { IgxGroupByRowTemplateDirective } from './grid.directives';
import { IgxGridGroupByRowComponent } from './groupby-row.component';
import { DisplayDensityToken } from '../../core/displayDensity';
import { DataUtil } from '../../data-operations/data-util';
import { IgxSelectionAPIService } from '../../core/selection';
import { DOCUMENT } from '@angular/common';
import { takeUntil } from 'rxjs/operators';
import { IgxFilteringService } from '../filtering/grid-filtering.service';
import { IgxColumnResizingService } from '../grid-column-resizing.service';
import { IgxGridSummaryService } from '../summaries/grid-summary.service';
import { IgxGridSelectionService, IgxGridCRUDService } from '../../core/grid-selection';
import { IgxOverlayService } from '../../services/index';
import { IgxForOfSyncService } from '../../directives/for-of/for_of.sync.service';
import { IgxDragIndicatorIconDirective } from '../row-drag.directive';
/** @type {?} */
var NEXT_ID = 0;
/**
 * @record
 */
export function IGridFocusChangeEventArgs() { }
if (false) {
    /** @type {?} */
    IGridFocusChangeEventArgs.prototype.groupRow;
}
/**
 * @record
 */
export function IGroupingDoneEventArgs() { }
if (false) {
    /** @type {?} */
    IGroupingDoneEventArgs.prototype.expressions;
    /** @type {?} */
    IGroupingDoneEventArgs.prototype.groupedColumns;
    /** @type {?} */
    IGroupingDoneEventArgs.prototype.ungroupedColumns;
}
/**
 * **Ignite UI for Angular Grid** -
 * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid.html)
 *
 * The Ignite UI Grid is used for presenting and manipulating tabular data in the simplest way possible.  Once data
 * has been bound, it can be manipulated through filtering, sorting & editing operations.
 *
 * Example:
 * ```html
 * <igx-grid [data]="employeeData" 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-grid>
 * ```
 */
var IgxGridComponent = /** @class */ (function (_super) {
    tslib_1.__extends(IgxGridComponent, _super);
    function IgxGridComponent(selectionService, crudService, colResizingService, gridAPI, selection, _transactions, elementRef, zone, document, cdr, resolver, differs, viewRef, navigation, filteringService, overlayService, summaryService, _displayDensityOptions) {
        var _this = _super.call(this, selectionService, crudService, gridAPI, selection, _transactions, elementRef, zone, document, cdr, resolver, differs, viewRef, navigation, filteringService, overlayService, summaryService, _displayDensityOptions) || this;
        _this.colResizingService = colResizingService;
        _this.document = document;
        _this.overlayService = overlayService;
        _this._displayDensityOptions = _displayDensityOptions;
        _this._id = "igx-grid-" + NEXT_ID++;
        /**
         * @hidden
         */
        _this._groupingExpressions = [];
        /**
         * @hidden
         */
        _this._groupingExpandState = [];
        _this._hideGroupedColumns = false;
        _this._dropAreaMessage = null;
        _this._filteredData = null;
        /**
         * An \@Input property that determines whether created groups are rendered expanded or collapsed.
         * The default rendered state is expanded.
         * ```html
         * <igx-grid #grid [data]="Data" [groupsExpanded]="false" [autoGenerate]="true"></igx-grid>
         * ```
         * \@memberof IgxGridComponent
         */
        _this.groupsExpanded = true;
        /**
         * A hierarchical representation of the group by records.
         * ```typescript
         * let groupRecords = this.grid.groupsRecords;
         * ```
         * \@memberof IgxGridComponent
         */
        _this.groupsRecords = [];
        /**
         * Emitted when a new `IgxColumnComponent` gets grouped/ungrouped, or multiple columns get
         * grouped/ungrouped at once by using the Group By API.
         * The `onGroupingDone` event would be raised only once if several columns get grouped at once by calling
         * the `groupBy()` or `clearGrouping()` API methods and passing an array as an argument.
         * The event arguments provide the `expressions`, `groupedColumns` and `ungroupedColumns` properties, which contain
         * the `ISortingExpression` and the `IgxColumnComponent` related to the grouping/ungrouping operation.
         * Please note that `groupedColumns` and `ungroupedColumns` show only the **newly** changed columns (affected by the **last**
         * grouping/ungrouping operation), not all columns which are currently grouped/ungrouped.
         * columns.
         * ```typescript
         * groupingDone(event: IGroupingDoneEventArgs){
         *     const expressions = event.expressions;
         *     //the newly grouped columns
         *     const groupedColumns = event.groupedColumns;
         *     //the newly ungrouped columns
         *     const ungroupedColumns = event.ungroupedColumns;
         * }
         * ```
         * ```html
         * <igx-grid #grid [data]="localData" (onGroupingDone)="groupingDone($event)" [autoGenerate]="true"></igx-grid>
         * ```
         * \@memberof IgxGridComponent
         */
        _this.onGroupingDone = new EventEmitter();
        _this.onFocusChange = new EventEmitter();
        /**
         * The custom template, if any, that should be used when rendering the row drag indicator icon
         *
         * ```typescript
         * // Set in typescript
         * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
         * myComponent.dragIndicatorIconTemplate = myCustomTemplate;
         * ```
         * ```html
         * <!-- Set in markup -->
         *  <igx-grid #grid>
         *      ...
         *      <ng-template igxDragIndicatorIcon>
         *          <igx-icon fontSet="material">info</igx-icon>
         *      </ng-template>
         *  </igx-grid>
         * ```
         */
        _this.dragIndicatorIconTemplate = null;
        _this._gridAPI = (/** @type {?} */ (gridAPI));
        return _this;
    }
    Object.defineProperty(IgxGridComponent.prototype, "id", {
        /**
         * An @Input property that sets the value of the `id` attribute. If not provided it will be automatically generated.
         * ```html
         * <igx-grid [id]="'igx-grid-1'" [data]="Data" [autoGenerate]="true"></igx-grid>
         * ```
         * @memberof IgxGridComponent
         */
        get: /**
         * An \@Input property that sets the value of the `id` attribute. If not provided it will be automatically generated.
         * ```html
         * <igx-grid [id]="'igx-grid-1'" [data]="Data" [autoGenerate]="true"></igx-grid>
         * ```
         * \@memberof IgxGridComponent
         * @return {?}
         */
        function () {
            return this._id;
        },
        set: /**
         * @param {?} value
         * @return {?}
         */
        function (value) {
            this._id = value;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxGridComponent.prototype, "data", {
        /**
         * An @Input property that lets you fill the `IgxGridComponent` with an array of data.
         * ```html
         * <igx-grid [data]="Data" [autoGenerate]="true"></igx-grid>
         * ```
         * @memberof IgxGridBaseComponent
        */
        get: /**
         * An \@Input property that lets you fill the `IgxGridComponent` with an array of data.
         * ```html
         * <igx-grid [data]="Data" [autoGenerate]="true"></igx-grid>
         * ```
         * \@memberof IgxGridBaseComponent
         * @return {?}
         */
        function () {
            return this._data;
        },
        set: /**
         * @param {?} value
         * @return {?}
         */
        function (value) {
            this._data = value;
            this.summaryService.clearSummaryCache();
            if (this.shouldGenerate) {
                this.setupColumns();
                this.reflow();
            }
            this.cdr.markForCheck();
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxGridComponent.prototype, "filteredData", {
        /**
         * Returns an array of objects containing the filtered data in the `IgxGridComponent`.
         * ```typescript
         * let filteredData = this.grid.filteredData;
         * ```
         * @memberof IgxGridComponent
         */
        get: /**
         * Returns an array of objects containing the filtered data in the `IgxGridComponent`.
         * ```typescript
         * let filteredData = this.grid.filteredData;
         * ```
         * \@memberof IgxGridComponent
         * @return {?}
         */
        function () {
            return this._filteredData;
        },
        /**
         * Sets an array of objects containing the filtered data in the `IgxGridComponent`.
         * ```typescript
         * this.grid.filteredData = [{
         *       ID: 1,
         *       Name: "A"
         * }];
         * ```
         * @memberof IgxGridComponent
         */
        set: /**
         * Sets an array of objects containing the filtered data in the `IgxGridComponent`.
         * ```typescript
         * this.grid.filteredData = [{
         *       ID: 1,
         *       Name: "A"
         * }];
         * ```
         * \@memberof IgxGridComponent
         * @param {?} value
         * @return {?}
         */
        function (value) {
            this._filteredData = value;
            if (this.rowSelectable) {
                this.updateHeaderCheckboxStatusOnFilter(this._filteredData);
            }
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxGridComponent.prototype, "groupingExpressions", {
        /**
         * Returns the group by state of the `IgxGridComponent`.
         * ```typescript
         * let groupByState = this.grid.groupingExpressions;
         * ```
         * @memberof IgxGridComponent
         */
        get: /**
         * Returns the group by state of the `IgxGridComponent`.
         * ```typescript
         * let groupByState = this.grid.groupingExpressions;
         * ```
         * \@memberof IgxGridComponent
         * @return {?}
         */
        function () {
            return this._groupingExpressions;
        },
        /**
         * Sets the group by state of the `IgxGridComponent` and emits the `onGroupingDone`
         * event with the appropriate arguments.
         * ```typescript
         * this.grid.groupingExpressions = [{
         *     fieldName: "ID",
         *     dir: SortingDirection.Asc,
         *     ignoreCase: false
         * }];
         * ```
         * @memberof IgxGridComponent
         */
        set: /**
         * Sets the group by state of the `IgxGridComponent` and emits the `onGroupingDone`
         * event with the appropriate arguments.
         * ```typescript
         * this.grid.groupingExpressions = [{
         *     fieldName: "ID",
         *     dir: SortingDirection.Asc,
         *     ignoreCase: false
         * }];
         * ```
         * \@memberof IgxGridComponent
         * @param {?} value
         * @return {?}
         */
        function (value) {
            var _this = this;
            if (value && value.length > 10) {
                throw Error('Maximum amount of grouped columns is 10.');
            }
            /** @type {?} */
            var oldExpressions = this.groupingExpressions;
            /** @type {?} */
            var newExpressions = value;
            this._groupingExpressions = cloneArray(value);
            this.chipsGoupingExpressions = cloneArray(value);
            if (this._gridAPI.grid) {
                /* grouping should work in conjunction with sorting
                and without overriding separate sorting expressions */
                this._applyGrouping();
                this._gridAPI.arrange_sorting_expressions();
                this.cdr.markForCheck();
            }
            else {
                // setter called before grid is registered in grid API service
                this.sortingExpressions.unshift.apply(this.sortingExpressions, this._groupingExpressions);
            }
            if (JSON.stringify(oldExpressions) !== JSON.stringify(newExpressions) && this.columnList) {
                /** @type {?} */
                var groupedCols_1 = [];
                /** @type {?} */
                var ungroupedCols_1 = [];
                /** @type {?} */
                var groupedColsArr = newExpressions.filter(function (obj) {
                    return !oldExpressions.some(function (obj2) {
                        return obj.fieldName === obj2.fieldName;
                    });
                });
                groupedColsArr.forEach(function (elem) {
                    groupedCols_1.push(_this.getColumnByName(elem.fieldName));
                }, this);
                /** @type {?} */
                var ungroupedColsArr = oldExpressions.filter(function (obj) {
                    return !newExpressions.some(function (obj2) {
                        return obj.fieldName === obj2.fieldName;
                    });
                });
                ungroupedColsArr.forEach(function (elem) {
                    ungroupedCols_1.push(_this.getColumnByName(elem.fieldName));
                }, this);
                this.cdr.detectChanges();
                /** @type {?} */
                var groupingDoneArgs = {
                    expressions: newExpressions,
                    groupedColumns: groupedCols_1,
                    ungroupedColumns: ungroupedCols_1
                };
                this.onGroupingDone.emit(groupingDoneArgs);
            }
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxGridComponent.prototype, "groupingExpansionState", {
        /**
         * Returns a list of expansion states for group rows.
         * Includes only states that differ from the default one (controlled through groupsExpanded and states that the user has changed.
         * Contains the expansion state (expanded: boolean) and the unique identifier for the group row (Array).
         * ```typescript
         * const groupExpState = this.grid.groupingExpansionState;
         * ```
         * @memberof IgxGridComponent
         */
        get: /**
         * Returns a list of expansion states for group rows.
         * Includes only states that differ from the default one (controlled through groupsExpanded and states that the user has changed.
         * Contains the expansion state (expanded: boolean) and the unique identifier for the group row (Array).
         * ```typescript
         * const groupExpState = this.grid.groupingExpansionState;
         * ```
         * \@memberof IgxGridComponent
         * @return {?}
         */
        function () {
            return this._groupingExpandState;
        },
        /**
         * Sets a list of expansion states for group rows.
         * ```typescript
         *      this.grid.groupingExpansionState = [{
         *      expanded: false,
         *      hierarchy: [{ fieldName: 'ID', value: 1 }]
         *   }];
         * // You can use DataUtil.getHierarchy(groupRow) to get the group `IgxGridRowComponent` hierarchy.
         * ```
         * @memberof IgxGridComponent
         */
        set: /**
         * Sets a list of expansion states for group rows.
         * ```typescript
         *      this.grid.groupingExpansionState = [{
         *      expanded: false,
         *      hierarchy: [{ fieldName: 'ID', value: 1 }]
         *   }];
         * // You can use DataUtil.getHierarchy(groupRow) to get the group `IgxGridRowComponent` hierarchy.
         * ```
         * \@memberof IgxGridComponent
         * @param {?} value
         * @return {?}
         */
        function (value) {
            this._groupingExpandState = cloneArray(value);
            this.cdr.detectChanges();
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxGridComponent.prototype, "hideGroupedColumns", {
        /**
         * An @Input property that sets whether the grouped columns should be hidden as well.
         * The default value is "false"
         * ```html
         * <igx-grid #grid [data]="localData" [hideGroupedColumns]="true" [autoGenerate]="true"></igx-grid>
         * ```
         * @memberof IgxGridComponent
         */
        get: /**
         * An \@Input property that sets whether the grouped columns should be hidden as well.
         * The default value is "false"
         * ```html
         * <igx-grid #grid [data]="localData" [hideGroupedColumns]="true" [autoGenerate]="true"></igx-grid>
         * ```
         * \@memberof IgxGridComponent
         * @return {?}
         */
        function () {
            return this._hideGroupedColumns;
        },
        set: /**
         * @param {?} value
         * @return {?}
         */
        function (value) {
            if (value) {
                this.groupingDiffer = this.differs.find(this.groupingExpressions).create();
            }
            else {
                this.groupingDiffer = null;
            }
            if (this.columnList && this.groupingExpressions) {
                this._setGroupColsVisibility(value);
            }
            this._hideGroupedColumns = value;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxGridComponent.prototype, "dropAreaMessage", {
        /**
         * An accessor that returns the message displayed inside the GroupBy drop area where columns can be dragged on.
        */
        get: /**
         * An accessor that returns the message displayed inside the GroupBy drop area where columns can be dragged on.
         * @return {?}
         */
        function () {
            return this._dropAreaMessage || this.resourceStrings.igx_grid_groupByArea_message;
        },
        /**
         * An @Input property that sets the message displayed inside the GroupBy drop area where columns can be dragged on.
         * Note: The grid needs to have at least one groupable column in order the GroupBy area to be displayed.
         * ```html
         * <igx-grid dropAreaMessage="Drop here to group!">
         *      <igx-column [groupable]="true" field="ID"></igx-column>
         * </igx-grid>
         * ```
         * @memberof IgxGridComponent
         */
        set: /**
         * An \@Input property that sets the message displayed inside the GroupBy drop area where columns can be dragged on.
         * Note: The grid needs to have at least one groupable column in order the GroupBy area to be displayed.
         * ```html
         * <igx-grid dropAreaMessage="Drop here to group!">
         *      <igx-column [groupable]="true" field="ID"></igx-column>
         * </igx-grid>
         * ```
         * \@memberof IgxGridComponent
         * @param {?} value
         * @return {?}
         */
        function (value) {
            this._dropAreaMessage = value;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxGridComponent.prototype, "groupsRowList", {
        /**
         * A list of all group rows.
         * ```typescript
         * const groupList = this.grid.groupsRowList;
         * ```
         * @memberof IgxGridComponent
         */
        get: /**
         * A list of all group rows.
         * ```typescript
         * const groupList = this.grid.groupsRowList;
         * ```
         * \@memberof IgxGridComponent
         * @return {?}
         */
        function () {
            /** @type {?} */
            var res = new QueryList();
            if (!this._groupsRowList) {
                return res;
            }
            /** @type {?} */
            var rList = this._groupsRowList.filter(function (item) {
                return item.element.nativeElement.parentElement !== null;
            });
            res.reset(rList);
            return res;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxGridComponent.prototype, "groupAreaHostClass", {
        /**
         * @hidden
         */
        get: /**
         * @hidden
         * @return {?}
         */
        function () {
            return this.getComponentDensityClass('igx-drop-area');
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxGridComponent.prototype, "groupRowTemplate", {
        /**
         * Returns the template reference of the `IgxGridComponent`'s group row.
         * ```
         * const groupRowTemplate = this.grid.groupRowTemplate;
         * ```
         * @memberof IgxGridComponent
         */
        get: /**
         * Returns the template reference of the `IgxGridComponent`'s group row.
         * ```
         * const groupRowTemplate = this.grid.groupRowTemplate;
         * ```
         * \@memberof IgxGridComponent
         * @return {?}
         */
        function () {
            return this._groupRowTemplate;
        },
        /**
         * Sets the template reference of the `IgxGridComponent`'s group `IgxGridRowComponent`.
         * ```typescript
         * this.grid.groupRowTemplate = myRowTemplate.
         * ```
         * @memberof IgxGridComponent
         */
        set: /**
         * Sets the template reference of the `IgxGridComponent`'s group `IgxGridRowComponent`.
         * ```typescript
         * this.grid.groupRowTemplate = myRowTemplate.
         * ```
         * \@memberof IgxGridComponent
         * @param {?} template
         * @return {?}
         */
        function (template) {
            this._groupRowTemplate = template;
            this.markForCheck();
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxGridComponent.prototype, "groupAreaTemplate", {
        /**
         * Returns the template reference of the `IgxGridComponent`'s group area.
         * ```typescript
         * const groupAreaTemplate = this.grid.groupAreaTemplate;
         * ```
         * @memberof IgxGridComponent
         */
        get: /**
         * Returns the template reference of the `IgxGridComponent`'s group area.
         * ```typescript
         * const groupAreaTemplate = this.grid.groupAreaTemplate;
         * ```
         * \@memberof IgxGridComponent
         * @return {?}
         */
        function () {
            return this._groupAreaTemplate;
        },
        /**
         * Sets the template reference of the `IgxGridComponent`'s group area.
         * ```typescript
         * this.grid.groupAreaTemplate = myAreaTemplate.
         * ```
         * @memberof IgxGridComponent
         */
        set: /**
         * Sets the template reference of the `IgxGridComponent`'s group area.
         * ```typescript
         * this.grid.groupAreaTemplate = myAreaTemplate.
         * ```
         * \@memberof IgxGridComponent
         * @param {?} template
         * @return {?}
         */
        function (template) {
            this._groupAreaTemplate = template;
            this.markForCheck();
        },
        enumerable: true,
        configurable: true
    });
    /**
     * Groups by a new `IgxColumnComponent` based on the provided expression, or modifies an existing one.
     * Also allows for multiple columns to be grouped at once if an array of `ISortingExpression` is passed.
     * The onGroupingDone event would get raised only **once** if this method gets called multiple times with the same arguments.
     * ```typescript
     * this.grid.groupBy({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false });
     * this.grid.groupBy([
            { fieldName: name1, dir: SortingDirection.Asc, ignoreCase: false },
            { fieldName: name2, dir: SortingDirection.Desc, ignoreCase: true },
            { fieldName: name3, dir: SortingDirection.Desc, ignoreCase: false }
        ]);
     * ```
     * @memberof IgxGridComponent
     */
    /**
     * Groups by a new `IgxColumnComponent` based on the provided expression, or modifies an existing one.
     * Also allows for multiple columns to be grouped at once if an array of `ISortingExpression` is passed.
     * The onGroupingDone event would get raised only **once** if this method gets called multiple times with the same arguments.
     * ```typescript
     * this.grid.groupBy({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false });
     * this.grid.groupBy([
     * { fieldName: name1, dir: SortingDirection.Asc, ignoreCase: false },
     * { fieldName: name2, dir: SortingDirection.Desc, ignoreCase: true },
     * { fieldName: name3, dir: SortingDirection.Desc, ignoreCase: false }
     * ]);
     * ```
     * \@memberof IgxGridComponent
     * @param {?} expression
     * @return {?}
     */
    IgxGridComponent.prototype.groupBy = /**
     * Groups by a new `IgxColumnComponent` based on the provided expression, or modifies an existing one.
     * Also allows for multiple columns to be grouped at once if an array of `ISortingExpression` is passed.
     * The onGroupingDone event would get raised only **once** if this method gets called multiple times with the same arguments.
     * ```typescript
     * this.grid.groupBy({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false });
     * this.grid.groupBy([
     * { fieldName: name1, dir: SortingDirection.Asc, ignoreCase: false },
     * { fieldName: name2, dir: SortingDirection.Desc, ignoreCase: true },
     * { fieldName: name3, dir: SortingDirection.Desc, ignoreCase: false }
     * ]);
     * ```
     * \@memberof IgxGridComponent
     * @param {?} expression
     * @return {?}
     */
    function (expression) {
        this.endEdit(true);
        this._gridAPI.submit_value();
        if (expression instanceof Array) {
            this._gridAPI.groupBy_multiple(expression);
        }
        else {
            this._gridAPI.groupBy(expression);
        }
        this.cdr.detectChanges();
        this.calculateGridSizes();
    };
    /**
     * Clears all grouping in the grid, if no parameter is passed.
     * If a parameter is provided, clears grouping for a particular column or an array of columns.
     * ```typescript
     * this.grid.clearGrouping(); //clears all grouping
     * this.grid.clearGrouping("ID"); //ungroups a single column
     * this.grid.clearGrouping(["ID", "Column1", "Column2"]); //ungroups multiple columns
     * ```
     *
     */
    /**
     * Clears all grouping in the grid, if no parameter is passed.
     * If a parameter is provided, clears grouping for a particular column or an array of columns.
     * ```typescript
     * this.grid.clearGrouping(); //clears all grouping
     * this.grid.clearGrouping("ID"); //ungroups a single column
     * this.grid.clearGrouping(["ID", "Column1", "Column2"]); //ungroups multiple columns
     * ```
     *
     * @param {?=} name
     * @return {?}
     */
    IgxGridComponent.prototype.clearGrouping = /**
     * Clears all grouping in the grid, if no parameter is passed.
     * If a parameter is provided, clears grouping for a particular column or an array of columns.
     * ```typescript
     * this.grid.clearGrouping(); //clears all grouping
     * this.grid.clearGrouping("ID"); //ungroups a single column
     * this.grid.clearGrouping(["ID", "Column1", "Column2"]); //ungroups multiple columns
     * ```
     *
     * @param {?=} name
     * @return {?}
     */
    function (name) {
        this._gridAPI.clear_groupby(name);
        this.calculateGridSizes();
    };
    /**
     * Returns if a group is expanded or not.
     * ```typescript
     * public groupRow: IGroupByRecord;
     * const expandedGroup = this.grid.isExpandedGroup(this.groupRow);
     * ```
     * @memberof IgxGridComponent
     */
    /**
     * Returns if a group is expanded or not.
     * ```typescript
     * public groupRow: IGroupByRecord;
     * const expandedGroup = this.grid.isExpandedGroup(this.groupRow);
     * ```
     * \@memberof IgxGridComponent
     * @param {?} group
     * @return {?}
     */
    IgxGridComponent.prototype.isExpandedGroup = /**
     * Returns if a group is expanded or not.
     * ```typescript
     * public groupRow: IGroupByRecord;
     * const expandedGroup = this.grid.isExpandedGroup(this.groupRow);
     * ```
     * \@memberof IgxGridComponent
     * @param {?} group
     * @return {?}
     */
    function (group) {
        /** @type {?} */
        var state = this._getStateForGroupRow(group);
        return state ? state.expanded : this.groupsExpanded;
    };
    /**
     * Toggles the expansion state of a group.
     * ```typescript
     * public groupRow: IGroupByRecord;
     * const toggleExpGroup = this.grid.toggleGroup(this.groupRow);
     * ```
     * @memberof IgxGridComponent
     */
    /**
     * Toggles the expansion state of a group.
     * ```typescript
     * public groupRow: IGroupByRecord;
     * const toggleExpGroup = this.grid.toggleGroup(this.groupRow);
     * ```
     * \@memberof IgxGridComponent
     * @param {?} groupRow
     * @return {?}
     */
    IgxGridComponent.prototype.toggleGroup = /**
     * Toggles the expansion state of a group.
     * ```typescript
     * public groupRow: IGroupByRecord;
     * const toggleExpGroup = this.grid.toggleGroup(this.groupRow);
     * ```
     * \@memberof IgxGridComponent
     * @param {?} groupRow
     * @return {?}
     */
    function (groupRow) {
        this._toggleGroup(groupRow);
    };
    /**
     * @hidden
     */
    /**
     * @hidden
     * @param {?} record
     * @return {?}
     */
    IgxGridComponent.prototype.isGroupByRecord = /**
     * @hidden
     * @param {?} record
     * @return {?}
     */
    function (record) {
        // return record.records instance of GroupedRecords fails under Webpack
        return record.records && record.records.length;
    };
    /**
     * Toggles the expansion state of all group rows recursively.
     * ```typescript
     * this.grid.toggleAllGroupRows;
     * ```
     * @memberof IgxGridComponent
     */
    /**
     * Toggles the expansion state of all group rows recursively.
     * ```typescript
     * this.grid.toggleAllGroupRows;
     * ```
     * \@memberof IgxGridComponent
     * @return {?}
     */
    IgxGridComponent.prototype.toggleAllGroupRows = /**
     * Toggles the expansion state of all group rows recursively.
     * ```typescript
     * this.grid.toggleAllGroupRows;
     * ```
     * \@memberof IgxGridComponent
     * @return {?}
     */
    function () {
        this.groupingExpansionState = [];
        this.groupsExpanded = !this.groupsExpanded;
        this.cdr.detectChanges();
    };
    Object.defineProperty(IgxGridComponent.prototype, "hasGroupableColumns", {
        /**
         * Returns if the `IgxGridComponent` has groupable columns.
         * ```typescript
         * const groupableGrid = this.grid.hasGroupableColumns;
         * ```
         * @memberof IgxGridComponent
         */
        get: /**
         * Returns if the `IgxGridComponent` has groupable columns.
         * ```typescript
         * const groupableGrid = this.grid.hasGroupableColumns;
         * ```
         * \@memberof IgxGridComponent
         * @return {?}
         */
        function () {
            return this.columnList.some(function (col) { return col.groupable && !col.columnGroup; });
        },
        enumerable: true,
        configurable: true
    });
    /**
     * @private
     * @param {?} value
     * @return {?}
     */
    IgxGridComponent.prototype._setGroupColsVisibility = /**
     * @private
     * @param {?} value
     * @return {?}
     */
    function (value) {
        var _this = this;
        this.groupingExpressions.forEach(function (expr) {
            /** @type {?} */
            var col = _this.getColumnByName(expr.fieldName);
            col.hidden = value;
        });
    };
    Object.defineProperty(IgxGridComponent.prototype, "dropAreaVisible", {
        /**
         * Returns if the grid's group by drop area is visible.
         * ```typescript
         * const dropVisible = this.grid.dropAreaVisible;
         * ```
         * @memberof IgxGridComponent
         */
        get: /**
         * Returns if the grid's group by drop area is visible.
         * ```typescript
         * const dropVisible = this.grid.dropAreaVisible;
         * ```
         * \@memberof IgxGridComponent
         * @return {?}
         */
        function () {
            return (this.draggedColumn && this.draggedColumn.groupable) ||
                !this.chipsGoupingExpressions.length;
        },
        enumerable: true,
        configurable: true
    });
    /**
     * @hidden
     */
    /**
     * @hidden
     * @protected
     * @param {?} groupRow
     * @return {?}
     */
    IgxGridComponent.prototype._getStateForGroupRow = /**
     * @hidden
     * @protected
     * @param {?} groupRow
     * @return {?}
     */
    function (groupRow) {
        return this._gridAPI.groupBy_get_expanded_for_group(groupRow);
    };
    /**
     * @hidden
     */
    /**
     * @hidden
     * @protected
     * @param {?} groupRow
     * @return {?}
     */
    IgxGridComponent.prototype._toggleGroup = /**
     * @hidden
     * @protected
     * @param {?} groupRow
     * @return {?}
     */
    function (groupRow) {
        this._gridAPI.groupBy_toggle_group(groupRow);
    };
    /**
     * @hidden
     */
    /**
     * @hidden
     * @protected
     * @return {?}
     */
    IgxGridComponent.prototype._applyGrouping = /**
     * @hidden
     * @protected
     * @return {?}
     */
    function () {
        this._gridAPI.sort_multiple(this._groupingExpressions);
    };
    /**
     * @hidden
     */
    /**
     * @hidden
     * @param {?} fieldName
     * @return {?}
     */
    IgxGridComponent.prototype.isColumnGrouped = /**
     * @hidden
     * @param {?} fieldName
     * @return {?}
     */
    function (fieldName) {
        return this.groupingExpressions.find(function (exp) { return exp.fieldName === fieldName; }) ? true : false;
    };
    /**
    * @hidden
    */
    /**
     * @hidden
     * @param {?} rowData
     * @param {?} rowIndex
     * @return {?}
     */
    IgxGridComponent.prototype.getContext = /**
     * @hidden
     * @param {?} rowData
     * @param {?} rowIndex
     * @return {?}
     */
    function (rowData, rowIndex) {
        return {
            $implicit: rowData,
            index: rowIndex,
            templateID: this.isGroupByRecord(rowData) ? 'groupRow' : this.isSummaryRow(rowData) ? 'summaryRow' : 'dataRow'
        };
    };
    Object.defineProperty(IgxGridComponent.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
    });
    /**
     * @hidden
     */
    /**
     * @hidden
     * @protected
     * @return {?}
     */
    IgxGridComponent.prototype.getGroupByRecords = /**
     * @hidden
     * @protected
     * @return {?}
     */
    function () {
        if (this.groupingExpressions && this.groupingExpressions.length) {
            /** @type {?} */
            var state = {
                expressions: this.groupingExpressions,
                expansion: this.groupingExpansionState,
                defaultExpanded: this.groupsExpanded
            };
            return DataUtil.group(cloneArray(this.filteredSortedData), state).metadata;
        }
        else {
            return null;
        }
    };
    /**
     * @hidden
     */
    /**
     * @hidden
     * @param {?} event
     * @return {?}
     */
    IgxGridComponent.prototype.onChipRemoved = /**
     * @hidden
     * @param {?} event
     * @return {?}
     */
    function (event) {
        this.clearGrouping(event.owner.id);
    };
    /**
     * @hidden
     */
    /**
     * @hidden
     * @param {?} event
     * @return {?}
     */
    IgxGridComponent.prototype.chipsOrderChanged = /**
     * @hidden
     * @param {?} event
     * @return {?}
     */
    function (event) {
        /** @type {?} */
        var newGrouping = [];
        var _loop_1 = function (i) {
            /** @type {?} */
            var expr = this_1.groupingExpressions.filter(function (item) {
                return item.fieldName === event.chipsArray[i].id;
            })[0];
            if (!this_1.getColumnByName(expr.fieldName).groupable) {
                return { value: void 0 };
            }
            newGrouping.push(expr);
        };
        var this_1 = this;
        for (var i = 0; i < event.chipsArray.length; i++) {
            var state_1 = _loop_1(i);
            if (typeof state_1 === "object")
                return state_1.value;
        }
        this.groupingExpansionState = [];
        this.chipsGoupingExpressions = newGrouping;
        if (event.originalEvent instanceof KeyboardEvent) {
            // When reordered using keyboard navigation, we don't have `onMoveEnd` event.
            this.groupingExpressions = this.chipsGoupingExpressions;
        }
        this.markForCheck();
    };
    /**
     * @hidden
     */
    /**
     * @hidden
     * @return {?}
     */
    IgxGridComponent.prototype.chipsMovingEnded = /**
     * @hidden
     * @return {?}
     */
    function () {
        this.groupingExpressions = this.chipsGoupingExpressions;
        this.markForCheck();
    };
    /**
     * @hidden
     */
    /**
     * @hidden
     * @param {?} event
     * @return {?}
     */
    IgxGridComponent.prototype.onChipClicked = /**
     * @hidden
     * @param {?} event
     * @return {?}
     */
    function (event) {
        /** @type {?} */
        var sortingExpr = this.sortingExpressions;
        /** @type {?} */
        var columnExpr = sortingExpr.find(function (expr) { return expr.fieldName === event.owner.id; });
        columnExpr.dir = 3 - columnExpr.dir;
        this.sort(columnExpr);
        this.markForCheck();
    };
    /**
     * @hidden
     */
    /**
     * @hidden
     * @param {?} event
     * @return {?}
     */
    IgxGridComponent.prototype.onChipKeyDown = /**
     * @hidden
     * @param {?} event
     * @return {?}
     */
    function (event) {
        if (event.originalEvent.key === ' ' || event.originalEvent.key === 'Spacebar' || event.originalEvent.key === 'Enter') {
            /** @type {?} */
            var sortingExpr = this.sortingExpressions;
            /** @type {?} */
            var columnExpr = sortingExpr.find(function (expr) { return expr.fieldName === event.owner.id; });
            columnExpr.dir = 3 - columnExpr.dir;
            this.sort(columnExpr);
            this.markForCheck();
        }
    };
    /**
     * @hidden
     */
    /**
     * @hidden
     * @protected
     * @return {?}
     */
    IgxGridComponent.prototype.getGroupAreaHeight = /**
     * @hidden
     * @protected
     * @return {?}
     */
    function () {
        return this.groupArea ? this.groupArea.nativeElement.offsetHeight : 0;
    };
    /**
     * 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 IgxGridComponent
     */
    /**
     * Gets calculated width of the pinned area.
     * ```typescript
     * const pinnedWidth = this.grid.getPinnedWidth();
     * ```
     * \@memberof IgxGridComponent
     * @param {?=} takeHidden If we should take into account the hidden columns in the pinned area.
     * @return {?}
     */
    IgxGridComponent.prototype.getPinnedWidth = /**
     * Gets calculated width of the pinned area.
     * ```typescript
     * const pinnedWidth = this.grid.getPinnedWidth();
     * ```
     * \@memberof IgxGridComponent
     * @param {?=} takeHidden If we should take into account the hidden columns in the pinned area.
     * @return {?}
     */
    function (takeHidden) {
        if (takeHidden === void 0) { takeHidden = false; }
        /** @type {?} */
        var sum = _super.prototype.getPinnedWidth.call(this, takeHidden);
        if (this.groupingExpressions.length > 0 && this.headerGroupContainer) {
            sum += this.headerGroupContainer.nativeElement.offsetWidth;
        }
        return sum;
    };
    /**
     * @hidden
     */
    /**
     * @hidden
     * @protected
     * @param {?} row
     * @param {?} column
     * @return {?}
     */
    IgxGridComponent.prototype.scrollTo = /**
     * @hidden
     * @protected
     * @param {?} row
     * @param {?} column
     * @return {?}
     */
    function (row, column) {
        if (this.groupingExpressions && this.groupingExpressions.length
            && typeof (row) !== 'number') {
            /** @type {?} */
            var groupByRecords = this.getGroupByRecords();
            /** @type {?} */
            var rowIndex = this.filteredSortedData.indexOf(row);
            /** @type {?} */
            var groupByRecord = groupByRecords[rowIndex];
            if (groupByRecord && !this.isExpandedGroup(groupByRecord)) {
                this.toggleGroup(groupByRecord);
            }
        }
        _super.prototype.scrollTo.call(this, row, column);
    };
    Object.defineProperty(IgxGridComponent.prototype, "dropAreaTemplateResolved", {
        /**
        * @hidden
        */
        get: /**
         * @hidden
         * @return {?}
         */
        function () {
            if (this.dropAreaTemplate) {
                return this.dropAreaTemplate;
            }
            else {
                return this.defaultDropAreaTemplate;
            }
        },
        enumerable: true,
        configurable: true
    });
    /**
     * @hidden
     */
    /**
     * @hidden
     * @param {?} expression
     * @return {?}
     */
    IgxGridComponent.prototype.getGroupByChipTitle = /**
     * @hidden
     * @param {?} expression
     * @return {?}
     */
    function (expression) {
        return this.getColumnByName(expression.fieldName).header || expression.fieldName;
    };
    /**
     * @hidden
     */
    /**
     * @hidden
     * @return {?}
     */
    IgxGridComponent.prototype.ngAfterContentInit = /**
     * @hidden
     * @return {?}
     */
    function () {
        if (this.groupTemplate) {
            this._groupRowTemplate = this.groupTemplate.template;
        }
        _super.prototype.ngAfterContentInit.call(this);
        if (this.hideGroupedColumns && this.columnList && this.groupingExpressions) {
            this._setGroupColsVisibility(this.hideGroupedColumns);
        }
    };
    /**
     * @return {?}
     */
    IgxGridComponent.prototype.ngOnInit = /**
     * @return {?}
     */
    function () {
        var _this = this;
        _super.prototype.ngOnInit.call(this);
        this.onGroupingDone.pipe(takeUntil(this.destroy$)).subscribe(function (args) {
            _this.endEdit(true);
            _this.summaryService.updateSummaryCache(args);
        });
    };
    /**
     * @return {?}
     */
    IgxGridComponent.prototype.ngDoCheck = /**
     * @return {?}
     */
    function () {
        var _this = this;
        _super.prototype.ngDoCheck.call(this);
        if (this.groupingDiffer) {
            /** @type {?} */
            var changes = this.groupingDiffer.diff(this.groupingExpressions);
            if (changes && this.columnList) {
                changes.forEachAddedItem(function (rec) {
                    /** @type {?} */
                    var col = _this.getColumnByName(rec.item.fieldName);
                    col.hidden = true;
                });
                changes.forEachRemovedItem(function (rec) {
                    /** @type {?} */
                    var col = _this.getColumnByName(rec.item.fieldName);
                    col.hidden = false;
                });
            }
        }
    };
    /**
     * @return {?}
     */
    IgxGridComponent.prototype.getSelectedData = /**
     * @return {?}
     */
    function () {
        if (this.groupingExpressions.length) {
            /** @type {?} */
            var source_1 = [];
            /** @type {?} */
            var process = function (record) {
                if (record.expression || record.summaries) {
                    source_1.push(null);
                    return;
                }
                source_1.push(record);
            };
            this.verticalScrollContainer.igxForOf.forEach(process);
            return this.extractDataFromSelection(source_1);
        }
        else {
            return _super.prototype.getSelectedData.call(this);
        }
    };
    IgxGridComponent.decorators = [
        { type: Component, args: [{
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    preserveWhitespaces: false,
                    providers: [IgxGridNavigationService, IgxGridSummaryService, IgxGridSelectionService, IgxGridCRUDService,
                        { provide: GridBaseAPIService, useClass: IgxGridAPIService },
                        { provide: IgxGridBaseComponent, useExisting: forwardRef(function () { return IgxGridComponent; }) },
                        IgxFilteringService, IgxColumnResizingService, IgxForOfSyncService
                    ],
                    selector: 'igx-grid',
                    template: "<igx-grid-toolbar [style.width.px]=\"outerWidth\" role=\"rowgroup\" *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 [style.width.px]='outerWidth' class=\"igx-grid__grouparea\" *ngIf=\"groupingExpressions.length > 0 || hasGroupableColumns\" #groupArea>\n    <igx-chips-area (onReorder)=\"chipsOrderChanged($event)\" (onMoveEnd)=\"chipsMovingEnded()\">\n        <ng-container *ngFor=\"let expr of chipsGoupingExpressions; let last = last;\">\n            <igx-chip [id]=\"expr.fieldName\" [attr.title]=\"getGroupByChipTitle(expr)\" [removable]=\"getColumnByName(expr.fieldName).groupable\" [draggable]=\"getColumnByName(expr.fieldName).groupable\" [displayDensity]=\"displayDensity\"\n                    (onKeyDown)=\"onChipKeyDown($event)\" (onRemove)=\"onChipRemoved($event)\" (onClick)=\"getColumnByName(expr.fieldName).groupable ? onChipClicked($event): null\" [disabled]='!getColumnByName(expr.fieldName).groupable'>\n                    <span>{{ getGroupByChipTitle(expr) }}</span>\n                    <igx-icon igxSuffix>{{ expr.dir == 1 ? 'arrow_upward' : 'arrow_downward' }}</igx-icon>\n            </igx-chip>\n            <span class=\"igx-grid__grouparea-connector\">\n                <igx-icon [style.visibility]=\"(!last || dropAreaVisible) ? 'visible' : 'hidden'\" >arrow_forward</igx-icon>\n            </span>\n        </ng-container>\n        <div igxGroupAreaDrop [style.visibility]=\"dropAreaVisible ? 'visible' : 'hidden'\" [class]=\"groupAreaHostClass\" [attr.gridId]='this.id'>\n            <ng-container *ngTemplateOutlet=\"dropAreaTemplateResolved\"></ng-container>\n        </div>\n    </igx-chips-area>\n</div>\n\n<div class=\"igx-grid__thead\">\n    <div class=\"igx-grid__thead-wrapper\" [class.igx-grid__tr--mrl]='hasColumnLayouts' 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\" [style.left.px]=\"headerFixedWidth\"></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=\"groupingExpressions.length > 0\">\n                <div class=\"igx-grid__header-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}\" #headerGroupContainer>\n                    <igx-icon *ngIf=\"groupsExpanded\" role=\"button\" class=\"igx-grid__group-expand-btn\" (click)=\"toggleAllGroupRows()\" [ngClass]=\"{\n                        'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n                    }\">unfold_less</igx-icon>\n                    <igx-icon *ngIf=\"!groupsExpanded\" role=\"button\" class=\"igx-grid__group-expand-btn\" (click)=\"toggleAllGroupRows()\"[ngClass]=\"{\n                        'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n                    }\">unfold_more</igx-icon>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"rowDraggable\">\n                <div class=\"igx-grid__drag-indicator\" #headerDragContainer>\n                    <div style=\"visibility: hidden;\">\n                        <ng-container *ngTemplateOutlet=\"this.dragIndicatorIconTemplate ? this.dragIndicatorIconTemplate : this.dragIndicatorIconBase\"></ng-container>\n                    </div>\n                </div>\n            </ng-container>\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]=\"pinnedColumns | igxTopLevel\">\n                    <igx-grid-header-group [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]=\"unpinnedColumns | igxTopLevel\" [igxForScrollOrientation]=\"'horizontal'\" [igxForScrollContainer]=\"parentVirtDir\"\n                [igxForContainerSize]='unpinnedWidth' [igxForTrackBy]='trackColumnChanges'  [igxForSizePropName]='\"calcWidth\"' #headerContainer>\n                <igx-grid-header-group [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.width.px]=\"scrollWidth\"></div>\n</div>\n\n<div igxGridBody class=\"igx-grid__tbody\">\n    <div class=\"igx-grid__tbody-content\" role=\"rowgroup\" (onDragStop)=\"selectionService.dragMode = $event\" (onDragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\" [style.height.px]='calcHeight' [style.width.px]='calcWidth + 1' #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        | gridTransaction:id:pipeTrigger\n        | gridFiltering:filteringExpressionsTree:id:pipeTrigger\n        | gridSort:sortingExpressions:id:pipeTrigger\n        | gridPreGroupBy:groupingExpressions:groupingExpansionState:groupsExpanded:id:groupsRecords:pipeTrigger\n        | gridPaging:page:perPage:id:pipeTrigger\n        | gridPostGroupBy:groupingExpressions:groupingExpansionState:groupsExpanded:id:pipeTrigger\n        | gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:pipeTrigger:summaryPipeTrigger\"\n        let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\"  [igxForScrollContainer]='verticalScroll'\n        [igxForContainerSize]='calcHeight' [igxForItemSize]=\"rowHeight\" #verticalScrollContainer (onChunkPreload)=\"dataLoading($event)\">\n            <ng-template #record_template>\n                <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [rowData]=\"rowData\" #row>\n                </igx-grid-row>\n            </ng-template>\n            <ng-template #group_template>\n                <igx-grid-groupby-row [gridID]=\"id\" [index]=\"rowIndex\" [groupRow]=\"rowData\" #row>\n                </igx-grid-groupby-row>\n            </ng-template>\n            <ng-template #summary_template>\n                <igx-grid-summary-row [gridID]=\"id\" [summaries]=\"rowData.summaries\" [indentation]=\"groupingExpressions.length\" [index]=\"rowIndex\" class=\"igx-grid__summaries--body\" #summaryRow>\n                </igx-grid-summary-row>\n            </ng-template>\n            <ng-template [igxTemplateOutlet]='isGroupByRecord(rowData) ? group_template : isSummaryRow(rowData) ? summary_template : record_template'\n                [igxTemplateOutletContext]='getContext(rowData, rowIndex)'\n                (onCachedViewLoaded)='cachedViewLoaded($event)'>\n            </ng-template>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\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]=\"groupingExpressions.length\" [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<ng-template #defaultDropArea>\n    <igx-icon fontSet=\"material\" class=\"igx-drop-area__icon\">group_work</igx-icon>\n    <span class=\"igx-drop-area__text\">{{dropAreaMessage}}</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\n<ng-template #defaultRowEditText>\n    You have {{ rowChangesCount }} changes in this row\n</ng-template>\n\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\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<ng-template #dragIndicatorIconBase>\n    <igx-icon fontSet=\"material\">drag_indicator</igx-icon>\n</ng-template>\n\n<igx-grid-column-resizer *ngIf=\"colResizingService.showResizer\"></igx-grid-column-resizer>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n"
                }] }
    ];
    /** @nocollapse */
    IgxGridComponent.ctorParameters = function () { return [
        { type: IgxGridSelectionService },
        { type: IgxGridCRUDService },
        { type: IgxColumnResizingService },
        { type: GridBaseAPIService },
        { type: IgxSelectionAPIService },
        { 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: IgxGridNavigationService },
        { type: IgxFilteringService },
        { type: IgxOverlayService, decorators: [{ type: Inject, args: [IgxOverlayService,] }] },
        { type: IgxGridSummaryService },
        { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DisplayDensityToken,] }] }
    ]; };
    IgxGridComponent.propDecorators = {
        id: [{ type: HostBinding, args: ['attr.id',] }, { type: Input }],
        data: [{ type: Input }],
        groupingExpressions: [{ type: Input }],
        groupingExpansionState: [{ type: Input }],
        groupsExpanded: [{ type: Input }],
        hideGroupedColumns: [{ type: Input }],
        dropAreaMessage: [{ type: Input }],
        dropAreaTemplate: [{ type: Input }],
        onGroupingDone: [{ type: Output }],
        onFocusChange: [{ type: Output }],
        groupTemplate: [{ type: ContentChild, args: [IgxGroupByRowTemplateDirective, { read: IgxGroupByRowTemplateDirective },] }],
        dragIndicatorIconTemplate: [{ type: ContentChild, args: [IgxDragIndicatorIconDirective, { read: TemplateRef },] }],
        _groupsRowList: [{ type: ViewChildren, args: [IgxGridGroupByRowComponent, { read: IgxGridGroupByRowComponent },] }],
        defaultDropAreaTemplate: [{ type: ViewChild, args: ['defaultDropArea', { read: TemplateRef },] }],
        groupArea: [{ type: ViewChild, args: ['groupArea',] }]
    };
    return IgxGridComponent;
}(IgxGridBaseComponent));
export { IgxGridComponent };
if (false) {
    /**
     * @type {?}
     * @private
     */
    IgxGridComponent.prototype._id;
    /**
     * @hidden
     * @type {?}
     * @protected
     */
    IgxGridComponent.prototype._groupingExpressions;
    /**
     * @hidden
     * @type {?}
     * @protected
     */
    IgxGridComponent.prototype._groupingExpandState;
    /**
     * @hidden
     * @type {?}
     * @protected
     */
    IgxGridComponent.prototype._groupRowTemplate;
    /**
     * @hidden
     * @type {?}
     * @protected
     */
    IgxGridComponent.prototype._groupAreaTemplate;
    /**
     * @hidden
     * @type {?}
     * @protected
     */
    IgxGridComponent.prototype.groupingDiffer;
    /**
     * @type {?}
     * @private
     */
    IgxGridComponent.prototype._data;
    /**
     * @type {?}
     * @private
     */
    IgxGridComponent.prototype._hideGroupedColumns;
    /**
     * @type {?}
     * @private
     */
    IgxGridComponent.prototype._dropAreaMessage;
    /**
     * @type {?}
     * @private
     */
    IgxGridComponent.prototype._gridAPI;
    /**
     * @type {?}
     * @private
     */
    IgxGridComponent.prototype._filteredData;
    /**
     * An \@Input property that determines whether created groups are rendered expanded or collapsed.
     * The default rendered state is expanded.
     * ```html
     * <igx-grid #grid [data]="Data" [groupsExpanded]="false" [autoGenerate]="true"></igx-grid>
     * ```
     * \@memberof IgxGridComponent
     * @type {?}
     */
    IgxGridComponent.prototype.groupsExpanded;
    /**
     * A hierarchical representation of the group by records.
     * ```typescript
     * let groupRecords = this.grid.groupsRecords;
     * ```
     * \@memberof IgxGridComponent
     * @type {?}
     */
    IgxGridComponent.prototype.groupsRecords;
    /**
     * An \@Input property that sets the template that will be rendered as a GroupBy drop area.
     * Note: The grid needs to have at least one groupable column in order the GroupBy area to be displayed.
     * ```html
     * <igx-grid [dropAreaTemplate]="dropAreaRef">
     *      <igx-column [groupable]="true" field="ID"></igx-column>
     * </igx-grid>
     *
     * <ng-template #myDropArea>
     *      <span> Custom drop area! </span>
     * </ng-template>
     * ```
     * ```ts
     * \@ViewChild('myDropArea', { read: TemplateRef })
     * public dropAreaRef: TemplateRef<any>;
     * ```
     * \@memberof IgxGridComponent
     * @type {?}
     */
    IgxGridComponent.prototype.dropAreaTemplate;
    /**
     * Emitted when a new `IgxColumnComponent` gets grouped/ungrouped, or multiple columns get
     * grouped/ungrouped at once by using the Group By API.
     * The `onGroupingDone` event would be raised only once if several columns get grouped at once by calling
     * the `groupBy()` or `clearGrouping()` API methods and passing an array as an argument.
     * The event arguments provide the `expressions`, `groupedColumns` and `ungroupedColumns` properties, which contain
     * the `ISortingExpression` and the `IgxColumnComponent` related to the grouping/ungrouping operation.
     * Please note that `groupedColumns` and `ungroupedColumns` show only the **newly** changed columns (affected by the **last**
     * grouping/ungrouping operation), not all columns which are currently grouped/ungrouped.
     * columns.
     * ```typescript
     * groupingDone(event: IGroupingDoneEventArgs){
     *     const expressions = event.expressions;
     *     //the newly grouped columns
     *     const groupedColumns = event.groupedColumns;
     *     //the newly ungrouped columns
     *     const ungroupedColumns = event.ungroupedColumns;
     * }
     * ```
     * ```html
     * <igx-grid #grid [data]="localData" (onGroupingDone)="groupingDone($event)" [autoGenerate]="true"></igx-grid>
     * ```
     * \@memberof IgxGridComponent
     * @type {?}
     */
    IgxGridComponent.prototype.onGroupingDone;
    /** @type {?} */
    IgxGridComponent.prototype.onFocusChange;
    /**
     * @hidden
     * @type {?}
     * @protected
     */
    IgxGridComponent.prototype.groupTemplate;
    /**
     * The custom template, if any, that should be used when rendering the row drag indicator icon
     *
     * ```typescript
     * // Set in typescript
     * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
     * myComponent.dragIndicatorIconTemplate = myCustomTemplate;
     * ```
     * ```html
     * <!-- Set in markup -->
     *  <igx-grid #grid>
     *      ...
     *      <ng-template igxDragIndicatorIcon>
     *          <igx-icon fontSet="material">info</igx-icon>
     *      </ng-template>
     *  </igx-grid>
     * ```
     * @type {?}
     */
    IgxGridComponent.prototype.dragIndicatorIconTemplate;
    /**
     * @type {?}
     * @private
     */
    IgxGridComponent.prototype._groupsRowList;
    /**
     * @hidden
     * @type {?}
     */
    IgxGridComponent.prototype.defaultDropAreaTemplate;
    /**
     * @hidden
     * @type {?}
     */
    IgxGridComponent.prototype.groupArea;
    /** @type {?} */
    IgxGridComponent.prototype.colResizingService;
    /** @type {?} */
    IgxGridComponent.prototype.document;
    /**
     * @type {?}
     * @protected
     */
    IgxGridComponent.prototype.overlayService;
    /**
     * @type {?}
     * @protected
     */
    IgxGridComponent.prototype._displayDensityOptions;
}
//# sourceMappingURL=data:application/json;base64, 