import { IgxGridCellComponent } from '../cell.component';
import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
import { HammerGesturesManager } from '../../core/touch';
import { IGX_GRID_BASE } from '../common/grid.interface';
import * as i0 from "@angular/core";
import * as i1 from "../selection/selection.service";
import * as i2 from "../../core/touch";
import * as i3 from "../../core/utils";
import * as i4 from "../../chips/chip.component";
import * as i5 from "../../icon/icon.component";
import * as i6 from "../../input-group/input-group.component";
import * as i7 from "../../checkbox/checkbox.component";
import * as i8 from "../../date-picker/date-picker.component";
import * as i9 from "../../time-picker/time-picker.component";
import * as i10 from "@angular/common";
import * as i11 from "../../directives/text-highlight/text-highlight.directive";
import * as i12 from "@angular/forms";
import * as i13 from "../../directives/input/input.directive";
import * as i14 from "../../directives/focus/focus.directive";
import * as i15 from "../../directives/date-time-editor/date-time-editor.directive";
import * as i16 from "../../directives/prefix/prefix.directive";
import * as i17 from "../../directives/suffix/suffix.directive";
import * as i18 from "../common/pipes";
export class IgxHierarchicalGridCellComponent extends IgxGridCellComponent {
    constructor(selectionService, grid, cdr, helement, zone, touchManager, platformUtil) {
        super(selectionService, grid, cdr, helement, zone, touchManager, platformUtil);
        this.selectionService = selectionService;
        this.grid = grid;
        this.cdr = cdr;
        this.zone = zone;
        this.platformUtil = platformUtil;
    }
    ngOnInit() {
        super.ngOnInit();
        this._rootGrid = this._getRootGrid();
    }
    /**
     * @hidden
     * @internal
     */
    activate(event) {
        this._clearAllHighlights();
        const currentElement = this.grid.nativeElement;
        let parentGrid = this.grid;
        let childGrid;
        // add highligh to the current grid
        if (this._rootGrid.id !== currentElement.id) {
            currentElement.classList.add('igx-grid__tr--highlighted');
        }
        // add highligh to the current grid
        while (this._rootGrid.id !== parentGrid.id) {
            childGrid = parentGrid;
            parentGrid = parentGrid.parent;
            const parentRowID = parentGrid.gridAPI.getParentRowId(childGrid);
            parentGrid.highlightedRowID = parentRowID;
        }
        this.grid.navigation.activeNode.gridID = this.gridID;
        super.activate(event);
    }
    _getRootGrid() {
        let currGrid = this.grid;
        while (currGrid.parent) {
            currGrid = currGrid.parent;
        }
        return currGrid;
    }
    // TODO: Extend the new selection service to avoid complete traversal
    _clearAllHighlights() {
        [this._rootGrid, ...this._rootGrid.getChildGrids(true)].forEach(grid => {
            if (grid !== this.grid && grid.navigation.activeNode) {
                grid.navigation.clearActivation();
                grid.selectionService.initKeyboardState();
                grid.selectionService.clear();
            }
            grid.selectionService.activeElement = null;
            grid.nativeElement.classList.remove('igx-grid__tr--highlighted');
            grid.highlightedRowID = null;
            grid.cdr.markForCheck();
        });
    }
}
IgxHierarchicalGridCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: IgxHierarchicalGridCellComponent, deps: [{ token: i1.IgxGridSelectionService }, { token: IGX_GRID_BASE }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i2.HammerGesturesManager }, { token: i3.PlatformUtil }], target: i0.ɵɵFactoryTarget.Component });
IgxHierarchicalGridCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: IgxHierarchicalGridCellComponent, selector: "igx-hierarchical-grid-cell", providers: [HammerGesturesManager], usesInheritance: true, ngImport: i0, template: "<ng-template #defaultPinnedIndicator>\n    <igx-chip\n        *ngIf=\"displayPinnedChip\"\n        class=\"igx-grid__td--pinned-chip\"\n        [disabled]=\"true\"\n        [displayDensity]=\"'compact'\"\n        >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip\n    >\n</ng-template>\n<ng-template #defaultCell>\n    <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n        igxTextHighlight\n        class=\"igx-grid__td-text\"\n        style=\"pointer-events: none;\"\n        [cssClass]=\"highlightClass\"\n        [activeCssClass]=\"activeHighlightClass\"\n        [groupName]=\"gridID\"\n        [value]=\"\n            formatter\n                ? (value | columnFormatter:formatter:rowData:columnData)\n                : column.dataType === 'number'\n                ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                : column.dataType === 'currency'\n                ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                : column.dataType === 'percent'\n                ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                : value\n        \"\n        [row]=\"rowData\"\n        [column]=\"this.column.field\"\n        [containerClass]=\"'igx-grid__td-text'\"\n        [metadata]=\"searchMetadata\"\n    >{{\n            formatter\n                ? (value | columnFormatter:formatter:rowData:columnData)\n                : column.dataType === \"number\"\n                ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                : column.dataType === 'currency'\n                ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                : column.dataType === 'percent'\n                ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                : value\n        }}</div>\n    <igx-icon\n        *ngIf=\"column.dataType === 'boolean' && !this.formatter\"\n        [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\"\n        >{{ value ? \"check\" : \"close\" }}</igx-icon\n    >\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n    <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n        igxTextHighlight class=\"igx-grid__td-text\" style=\"pointer-events: none\"\n    [cssClass]=\"highlightClass\"\n    [activeCssClass]=\"activeHighlightClass\"\n    [groupName]=\"gridID\"\n    [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n        (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n        (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency' ?\n        (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n        (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\n    [row]=\"rowData\"\n    [column]=\"this.column.field\"\n    [containerClass]=\"'igx-grid__td-text'\"\n    [metadata]=\"searchMetadata\">{{\n        !isEmptyAddRowCell ? value : (column.header || column.field)\n    }}</div>\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n    <ng-container *ngIf=\"column.dataType === 'string'\">\n        <igx-input-group displayDensity=\"compact\">\n            <input\n                igxInput\n                [(ngModel)]=\"editValue\"\n                [igxFocus]=\"true\"\n                (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n                (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n            />\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'number'\">\n        <igx-input-group displayDensity=\"compact\">\n            <input\n                igxInput\n                [(ngModel)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n            />\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'boolean'\">\n        <igx-checkbox\n            [checked]=\"editValue\"\n            (change)=\"editValue = $event.checked\"\n            [igxFocus]=\"true\"\n            [disableRipple]=\"true\"\n        ></igx-checkbox>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'date'\">\n        <igx-date-picker\n            [style.width.%]=\"100\"\n            [outlet]=\"grid.outlet\"\n            mode=\"dropdown\"\n            [locale]=\"grid.locale\"\n            [(value)]=\"editValue\"\n            [igxFocus]=\"true\"\n        >\n        </igx-date-picker>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'time'\">\n        <igx-time-picker\n            [style.width.%]=\"100\"\n            [outlet]=\"grid.outlet\"\n            mode=\"dropdown\"\n            [locale]=\"grid.locale\"\n            [inputFormat]=\"column.defaultTimeFormat\"\n            [(value)]=\"editValue\"\n            [igxFocus]=\"true\"\n            >\n        </igx-time-picker>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'dateTime'\">\n        <igx-input-group>\n            <input type=\"text\" igxInput [igxDateTimeEditor]=\"column.defaultDateTimeFormat\" [(ngModel)]=\"editValue\" [igxFocus]=\"true\"/>\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'currency'\">\n        <igx-input-group displayDensity=\"compact\">\n            <igx-prefix *ngIf=\"grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-prefix>\n            <input\n                igxInput\n                [(ngModel)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n            />\n            <igx-suffix *ngIf=\"!grid.currencyPositionLeft\" >{{ currencyCodeSymbol }}</igx-suffix>\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'percent'\">\n        <igx-input-group displayDensity=\"compact\">\n            <input\n                igxInput\n                [(ngModel)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n            />\n            <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n        </igx-input-group>\n    </ng-container>\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n", components: [{ type: i4.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"] }, { type: i5.IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { type: i6.IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { type: i7.IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "readonly", "disableTransitions"], outputs: ["change"] }, { type: i8.IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["weekStart", "hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { type: i9.IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.IgxTextHighlightDirective, selector: "[igxTextHighlight]", inputs: ["cssClass", "activeCssClass", "containerClass", "groupName", "value", "row", "column", "metadata"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i12.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i13.IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { type: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i12.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i14.IgxFocusDirective, selector: "[igxFocus]", inputs: ["igxFocus"], exportAs: ["igxFocus"] }, { type: i12.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i15.IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { type: i16.IgxPrefixDirective, selector: "igx-prefix,[igxPrefix]" }, { type: i17.IgxSuffixDirective, selector: "igx-suffix,[igxSuffix]" }, { type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "columnFormatter": i18.IgxColumnFormatterPipe, "number": i10.DecimalPipe, "date": i10.DatePipe, "currency": i10.CurrencyPipe, "percent": i10.PercentPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: IgxHierarchicalGridCellComponent, decorators: [{
            type: Component,
            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-hierarchical-grid-cell', providers: [HammerGesturesManager], template: "<ng-template #defaultPinnedIndicator>\n    <igx-chip\n        *ngIf=\"displayPinnedChip\"\n        class=\"igx-grid__td--pinned-chip\"\n        [disabled]=\"true\"\n        [displayDensity]=\"'compact'\"\n        >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip\n    >\n</ng-template>\n<ng-template #defaultCell>\n    <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n        igxTextHighlight\n        class=\"igx-grid__td-text\"\n        style=\"pointer-events: none;\"\n        [cssClass]=\"highlightClass\"\n        [activeCssClass]=\"activeHighlightClass\"\n        [groupName]=\"gridID\"\n        [value]=\"\n            formatter\n                ? (value | columnFormatter:formatter:rowData:columnData)\n                : column.dataType === 'number'\n                ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                : column.dataType === 'currency'\n                ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                : column.dataType === 'percent'\n                ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                : value\n        \"\n        [row]=\"rowData\"\n        [column]=\"this.column.field\"\n        [containerClass]=\"'igx-grid__td-text'\"\n        [metadata]=\"searchMetadata\"\n    >{{\n            formatter\n                ? (value | columnFormatter:formatter:rowData:columnData)\n                : column.dataType === \"number\"\n                ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                : column.dataType === 'currency'\n                ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                : column.dataType === 'percent'\n                ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                : value\n        }}</div>\n    <igx-icon\n        *ngIf=\"column.dataType === 'boolean' && !this.formatter\"\n        [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\"\n        >{{ value ? \"check\" : \"close\" }}</igx-icon\n    >\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n    <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n        igxTextHighlight class=\"igx-grid__td-text\" style=\"pointer-events: none\"\n    [cssClass]=\"highlightClass\"\n    [activeCssClass]=\"activeHighlightClass\"\n    [groupName]=\"gridID\"\n    [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n        (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n        (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency' ?\n        (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n        (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\n    [row]=\"rowData\"\n    [column]=\"this.column.field\"\n    [containerClass]=\"'igx-grid__td-text'\"\n    [metadata]=\"searchMetadata\">{{\n        !isEmptyAddRowCell ? value : (column.header || column.field)\n    }}</div>\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n    <ng-container *ngIf=\"column.dataType === 'string'\">\n        <igx-input-group displayDensity=\"compact\">\n            <input\n                igxInput\n                [(ngModel)]=\"editValue\"\n                [igxFocus]=\"true\"\n                (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n                (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n            />\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'number'\">\n        <igx-input-group displayDensity=\"compact\">\n            <input\n                igxInput\n                [(ngModel)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n            />\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'boolean'\">\n        <igx-checkbox\n            [checked]=\"editValue\"\n            (change)=\"editValue = $event.checked\"\n            [igxFocus]=\"true\"\n            [disableRipple]=\"true\"\n        ></igx-checkbox>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'date'\">\n        <igx-date-picker\n            [style.width.%]=\"100\"\n            [outlet]=\"grid.outlet\"\n            mode=\"dropdown\"\n            [locale]=\"grid.locale\"\n            [(value)]=\"editValue\"\n            [igxFocus]=\"true\"\n        >\n        </igx-date-picker>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'time'\">\n        <igx-time-picker\n            [style.width.%]=\"100\"\n            [outlet]=\"grid.outlet\"\n            mode=\"dropdown\"\n            [locale]=\"grid.locale\"\n            [inputFormat]=\"column.defaultTimeFormat\"\n            [(value)]=\"editValue\"\n            [igxFocus]=\"true\"\n            >\n        </igx-time-picker>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'dateTime'\">\n        <igx-input-group>\n            <input type=\"text\" igxInput [igxDateTimeEditor]=\"column.defaultDateTimeFormat\" [(ngModel)]=\"editValue\" [igxFocus]=\"true\"/>\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'currency'\">\n        <igx-input-group displayDensity=\"compact\">\n            <igx-prefix *ngIf=\"grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-prefix>\n            <input\n                igxInput\n                [(ngModel)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n            />\n            <igx-suffix *ngIf=\"!grid.currencyPositionLeft\" >{{ currencyCodeSymbol }}</igx-suffix>\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'percent'\">\n        <igx-input-group displayDensity=\"compact\">\n            <input\n                igxInput\n                [(ngModel)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n            />\n            <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n        </igx-input-group>\n    </ng-container>\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n" }]
        }], ctorParameters: function () { return [{ type: i1.IgxGridSelectionService }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [IGX_GRID_BASE]
                }] }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i2.HammerGesturesManager }, { type: i3.PlatformUtil }]; } });
//# sourceMappingURL=data:application/json;base64, 