import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { HammerGesturesManager } from '../../core/touch';
import { IgxGridExpandableCellComponent } from '../grid/expandable-cell.component';
export class IgxTreeGridCellComponent extends IgxGridExpandableCellComponent {
    constructor() {
        super(...arguments);
        /**
         * @hidden
         */
        this.level = 0;
        /**
         * @hidden
         */
        this.showIndicator = false;
    }
    get treeGridAPI() {
        return this.gridAPI;
    }
    /**
     * @hidden
     */
    toggle(event) {
        event.stopPropagation();
        this.treeGridAPI.set_row_expansion_state(this.row.rowID, !this.row.expanded, event);
    }
    /**
     * @hidden
     */
    onLoadingDblClick(event) {
        event.stopPropagation();
    }
}
IgxTreeGridCellComponent.decorators = [
    { type: Component, args: [{
                changeDetection: ChangeDetectionStrategy.OnPush,
                selector: 'igx-tree-grid-cell',
                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'\"\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)\n                : column.dataType === 'number'\n                ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                : column.dataType === 'date'\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)\n                : column.dataType === \"number\"\n                ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                : column.dataType === \"date\"\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'\"\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 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' ?\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 igxInput [(ngModel)]=\"editValue\" [igxFocus]=\"true\" />\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            (change)=\"editValue = $event.checked\"\n            [value]=\"editValue\"\n            [checked]=\"editValue\"\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            [labelVisibility]=\"false\"\n        >\n        </igx-date-picker>\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                [value]=\"editValue\"\n                (input)=\"editValue = $event.target.value\"\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 igxInput\n                [value]=\"editValue\"\n                (input)=\"editValue = $event.target.value\"\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 *ngIf=\"!editMode\">\n    <ng-container *ngIf=\"level > 0\">\n        <div\n            #indentationDiv\n            class=\"igx-grid__tree-cell--padding-level-{{ level }}\"\n        ></div>\n    </ng-container>\n    <div\n        #indicator\n        *ngIf=\"!isLoading\"\n        class=\"igx-grid__tree-grouping-indicator\"\n        [ngStyle]=\"{ visibility: showIndicator ? 'visible' : 'hidden' }\"\n        (click)=\"toggle($event)\"\n        (focus)=\"onIndicatorFocus($event)\"\n    >\n        <ng-container\n            *ngTemplateOutlet=\"iconTemplate; context: { $implicit:  this }\"\n        >\n        </ng-container>\n        <ng-container\n            *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\"\n        >\n        </ng-container>\n    </div>\n    <div\n        *ngIf=\"isLoading\"\n        (dblclick)=\"onLoadingDblClick($event)\"\n        class=\"igx-grid__tree-loading-indicator\"\n    >\n        <ng-container\n            *ngTemplateOutlet=\"\n                grid.rowLoadingIndicatorTemplate\n                    ? grid.rowLoadingIndicatorTemplate\n                    : defaultLoadingIndicatorTemplate\n            \"\n        >\n        </ng-container>\n    </div>\n    <ng-template #defaultLoadingIndicatorTemplate>\n        <igx-circular-bar [indeterminate]=\"true\"> </igx-circular-bar>\n    </ng-template>\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"> </ng-container>\n<ng-template #defaultExpandedTemplate>\n    <igx-icon>expand_more</igx-icon>\n</ng-template>\n<ng-template #defaultCollapsedTemplate>\n    <igx-icon>chevron_right</igx-icon>\n</ng-template>\n",
                providers: [HammerGesturesManager]
            },] }
];
IgxTreeGridCellComponent.propDecorators = {
    level: [{ type: Input }],
    showIndicator: [{ type: Input }],
    isLoading: [{ type: Input }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHJlZS1jZWxsLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2lnbml0ZXVpLWFuZ3VsYXIvc3JjL2xpYi9ncmlkcy90cmVlLWdyaWQvdHJlZS1jZWxsLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0gsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxLQUFLLEVBQ1IsTUFBTSxlQUFlLENBQUM7QUFFdkIsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFDekQsT0FBTyxFQUFFLDhCQUE4QixFQUFFLE1BQU0sbUNBQW1DLENBQUM7QUFRbkYsTUFBTSxPQUFPLHdCQUF5QixTQUFRLDhCQUE4QjtJQU41RTs7UUFZSTs7V0FFRztRQUVJLFVBQUssR0FBRyxDQUFDLENBQUM7UUFFakI7O1dBRUc7UUFFSSxrQkFBYSxHQUFHLEtBQUssQ0FBQztJQXNCakMsQ0FBQztJQXBDRyxJQUFZLFdBQVc7UUFDbkIsT0FBTyxJQUFJLENBQUMsT0FBZ0MsQ0FBQztJQUNqRCxDQUFDO0lBb0JEOztPQUVHO0lBQ0ksTUFBTSxDQUFDLEtBQVk7UUFDdEIsS0FBSyxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQ3hCLElBQUksQ0FBQyxXQUFXLENBQUMsdUJBQXVCLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxLQUFLLEVBQUUsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLFFBQVEsRUFBRSxLQUFLLENBQUMsQ0FBQztJQUN4RixDQUFDO0lBRUQ7O09BRUc7SUFDSSxpQkFBaUIsQ0FBQyxLQUFZO1FBQ2pDLEtBQUssQ0FBQyxlQUFlLEVBQUUsQ0FBQztJQUM1QixDQUFDOzs7WUEzQ0osU0FBUyxTQUFDO2dCQUNQLGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO2dCQUMvQyxRQUFRLEVBQUUsb0JBQW9CO2dCQUM5QixrNU9BQXVDO2dCQUN2QyxTQUFTLEVBQUUsQ0FBQyxxQkFBcUIsQ0FBQzthQUNyQzs7O29CQVVJLEtBQUs7NEJBTUwsS0FBSzt3QkFNTCxLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgICBDb21wb25lbnQsXG4gICAgSW5wdXRcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJZ3hUcmVlR3JpZEFQSVNlcnZpY2UgfSBmcm9tICcuL3RyZWUtZ3JpZC1hcGkuc2VydmljZSc7XG5pbXBvcnQgeyBIYW1tZXJHZXN0dXJlc01hbmFnZXIgfSBmcm9tICcuLi8uLi9jb3JlL3RvdWNoJztcbmltcG9ydCB7IElneEdyaWRFeHBhbmRhYmxlQ2VsbENvbXBvbmVudCB9IGZyb20gJy4uL2dyaWQvZXhwYW5kYWJsZS1jZWxsLmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICAgIHNlbGVjdG9yOiAnaWd4LXRyZWUtZ3JpZC1jZWxsJyxcbiAgICB0ZW1wbGF0ZVVybDogJ3RyZWUtY2VsbC5jb21wb25lbnQuaHRtbCcsXG4gICAgcHJvdmlkZXJzOiBbSGFtbWVyR2VzdHVyZXNNYW5hZ2VyXVxufSlcbmV4cG9ydCBjbGFzcyBJZ3hUcmVlR3JpZENlbGxDb21wb25lbnQgZXh0ZW5kcyBJZ3hHcmlkRXhwYW5kYWJsZUNlbGxDb21wb25lbnQge1xuXG4gICAgcHJpdmF0ZSBnZXQgdHJlZUdyaWRBUEkoKTogSWd4VHJlZUdyaWRBUElTZXJ2aWNlIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuZ3JpZEFQSSBhcyBJZ3hUcmVlR3JpZEFQSVNlcnZpY2U7XG4gICAgfVxuXG4gICAgLyoqXG4gICAgICogQGhpZGRlblxuICAgICAqL1xuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIGxldmVsID0gMDtcblxuICAgIC8qKlxuICAgICAqIEBoaWRkZW5cbiAgICAgKi9cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBzaG93SW5kaWNhdG9yID0gZmFsc2U7XG5cbiAgICAvKipcbiAgICAgKiBAaGlkZGVuXG4gICAgICovXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgaXNMb2FkaW5nOiBib29sZWFuO1xuXG4gICAgLyoqXG4gICAgICogQGhpZGRlblxuICAgICAqL1xuICAgIHB1YmxpYyB0b2dnbGUoZXZlbnQ6IEV2ZW50KSB7XG4gICAgICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xuICAgICAgICB0aGlzLnRyZWVHcmlkQVBJLnNldF9yb3dfZXhwYW5zaW9uX3N0YXRlKHRoaXMucm93LnJvd0lELCAhdGhpcy5yb3cuZXhwYW5kZWQsIGV2ZW50KTtcbiAgICB9XG5cbiAgICAvKipcbiAgICAgKiBAaGlkZGVuXG4gICAgICovXG4gICAgcHVibGljIG9uTG9hZGluZ0RibENsaWNrKGV2ZW50OiBFdmVudCkge1xuICAgICAgICBldmVudC5zdG9wUHJvcGFnYXRpb24oKTtcbiAgICB9XG59XG4iXX0=