import { Component, Input, } from '@angular/core';
import { IgxGroupByAreaDirective } from './group-by-area.directive';
import * as i0 from "@angular/core";
import * as i1 from "../../core/utils";
import * as i2 from "@angular/common";
import * as i3 from "../../icon/icon.component";
import * as i4 from "../../directives/suffix/suffix.directive";
import * as i5 from "../../chips/chips-area.component";
import * as i6 from "../../chips/chip.component";
import * as i7 from "../../directives/drag-drop/drag-drop.directive";
import * as i8 from "../grid/grid.directives";
import * as i9 from "./group-by-area.directive";
/**
 * An internal component representing the group-by drop area for the igx-grid component.
 *
 * @hidden @internal
 */
export class IgxGridGroupByAreaComponent extends IgxGroupByAreaDirective {
    constructor(ref, platform) {
        super(ref, platform);
        this.sortingExpressions = [];
    }
    handleReorder(event) {
        const { chipsArray, originalEvent } = event;
        const newExpressions = this.getReorderedExpressions(chipsArray);
        this.grid.groupingExpansionState = [];
        this.expressions = newExpressions;
        // When reordered using keyboard navigation, we don't have `onMoveEnd` event.
        if (originalEvent instanceof KeyboardEvent) {
            this.grid.groupingExpressions = newExpressions;
        }
    }
    handleMoveEnd() {
        this.grid.groupingExpressions = this.expressions;
    }
    groupBy(expression) {
        this.grid.groupBy(expression);
    }
    clearGrouping(name) {
        this.grid.clearGrouping(name);
    }
}
IgxGridGroupByAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: IgxGridGroupByAreaComponent, deps: [{ token: i0.ElementRef }, { token: i1.PlatformUtil }], target: i0.ɵɵFactoryTarget.Component });
IgxGridGroupByAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: IgxGridGroupByAreaComponent, selector: "igx-grid-group-by-area", inputs: { sortingExpressions: "sortingExpressions", grid: "grid" }, providers: [{ provide: IgxGroupByAreaDirective, useExisting: IgxGridGroupByAreaComponent }], usesInheritance: true, ngImport: i0, template: "<igx-chips-area (reorder)=\"handleReorder($event)\" (moveEnd)=\"handleMoveEnd()\">\n    <ng-container *ngFor=\"let expression of chipExpressions; let last = last;\">\n        <igx-chip\n            [id]=\"expression.fieldName\"\n            [title]=\"(expression.fieldName | igxGroupByMeta:grid).title\"\n            [displayDensity]=\"grid.displayDensity\"\n            [removable]=\"(expression.fieldName | igxGroupByMeta:grid).groupable\"\n            [draggable]=\"(expression.fieldName | igxGroupByMeta:grid).groupable\"\n            [disabled]=\"!(expression.fieldName | igxGroupByMeta:grid).groupable\"\n            (keyDown)=\"handleKeyDown($event.owner.id, $event.originalEvent)\"\n            (remove)=\"clearGrouping($event.owner.id)\"\n            (chipClick)=\"handleClick(expression.fieldName)\"\n        >\n            <span>{{ (expression.fieldName | igxGroupByMeta:grid).title }}</span>\n            <igx-icon igxSuffix>{{ expression.dir === 1 ? 'arrow_upward' : 'arrow_downward' }}</igx-icon>\n        </igx-chip>\n\n        <span class=\"igx-grid-grouparea__connector\">\n            <igx-icon [hidden]=\"(last && !dropAreaVisible)\">arrow_forward</igx-icon>\n        </span>\n    </ng-container>\n    <div igxGroupAreaDrop class=\"igx-drop-area{{ density !== 'comfortable' ? '--' + density : ''}}\"\n        [attr.gridId]=\"grid.id\"\n        [hidden]=\"!dropAreaVisible\"\n        (igxDrop)=\"onDragDrop($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"dropAreaTemplate || default\"></ng-container>\n    </div>\n</igx-chips-area>\n\n<ng-template #default>\n    <igx-icon class=\"igx-drop-area__icon\">group_work</igx-icon>\n    <span class=\"igx-drop-area__text\">{{ dropAreaMessage }}</span>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: i4.IgxSuffixDirective, selector: "igx-suffix,[igxSuffix]" }, { kind: "component", type: i5.IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["class", "width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "component", type: i6.IgxChipComponent, selector: "igx-chip", inputs: ["id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "directive", type: i7.IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "directive", type: i8.IgxGroupAreaDropDirective, selector: "[igxGroupAreaDrop]" }, { kind: "pipe", type: i9.IgxGroupByMetaPipe, name: "igxGroupByMeta" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: IgxGridGroupByAreaComponent, decorators: [{
            type: Component,
            args: [{ selector: 'igx-grid-group-by-area', providers: [{ provide: IgxGroupByAreaDirective, useExisting: IgxGridGroupByAreaComponent }], template: "<igx-chips-area (reorder)=\"handleReorder($event)\" (moveEnd)=\"handleMoveEnd()\">\n    <ng-container *ngFor=\"let expression of chipExpressions; let last = last;\">\n        <igx-chip\n            [id]=\"expression.fieldName\"\n            [title]=\"(expression.fieldName | igxGroupByMeta:grid).title\"\n            [displayDensity]=\"grid.displayDensity\"\n            [removable]=\"(expression.fieldName | igxGroupByMeta:grid).groupable\"\n            [draggable]=\"(expression.fieldName | igxGroupByMeta:grid).groupable\"\n            [disabled]=\"!(expression.fieldName | igxGroupByMeta:grid).groupable\"\n            (keyDown)=\"handleKeyDown($event.owner.id, $event.originalEvent)\"\n            (remove)=\"clearGrouping($event.owner.id)\"\n            (chipClick)=\"handleClick(expression.fieldName)\"\n        >\n            <span>{{ (expression.fieldName | igxGroupByMeta:grid).title }}</span>\n            <igx-icon igxSuffix>{{ expression.dir === 1 ? 'arrow_upward' : 'arrow_downward' }}</igx-icon>\n        </igx-chip>\n\n        <span class=\"igx-grid-grouparea__connector\">\n            <igx-icon [hidden]=\"(last && !dropAreaVisible)\">arrow_forward</igx-icon>\n        </span>\n    </ng-container>\n    <div igxGroupAreaDrop class=\"igx-drop-area{{ density !== 'comfortable' ? '--' + density : ''}}\"\n        [attr.gridId]=\"grid.id\"\n        [hidden]=\"!dropAreaVisible\"\n        (igxDrop)=\"onDragDrop($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"dropAreaTemplate || default\"></ng-container>\n    </div>\n</igx-chips-area>\n\n<ng-template #default>\n    <igx-icon class=\"igx-drop-area__icon\">group_work</igx-icon>\n    <span class=\"igx-drop-area__text\">{{ dropAreaMessage }}</span>\n</ng-template>\n" }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.PlatformUtil }]; }, propDecorators: { sortingExpressions: [{
                type: Input
            }], grid: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 