import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Inject, Input, NgZone, TemplateRef, ViewChild } from '@angular/core';
import { IgxGridCellComponent } from '../cell.component';
import { GridBaseAPIService } from '../api.service';
import { getNodeSizeViaRange, PlatformUtil } from '../../core/utils';
import { DOCUMENT } from '@angular/common';
import { IgxGridSelectionService, IgxGridCRUDService } from '../selection/selection.service';
import { HammerGesturesManager } from '../../core/touch';
export class IgxGridExpandableCellComponent extends IgxGridCellComponent {
    constructor(selectionService, crudService, gridAPI, cdr, element, zone, touchManager, document, platformUtil) {
        super(selectionService, crudService, gridAPI, cdr, element, zone, touchManager, platformUtil);
        this.zone = zone;
        this.document = document;
        this.platformUtil = platformUtil;
        /**
         * @hidden
         */
        this.expanded = false;
    }
    /**
     * @hidden
     */
    toggle(event) {
        event.stopPropagation();
        const expansionState = this.gridAPI.get_row_expansion_state(this.row.rowData);
        this.gridAPI.set_row_expansion_state(this.row.rowID, !expansionState, event);
    }
    /**
     * @hidden
     */
    onIndicatorFocus(event) {
        this.gridAPI.submit_value(event);
    }
    /**
     * @hidden
     */
    calculateSizeToFit(range) {
        const indicatorWidth = this.indicator.nativeElement.getBoundingClientRect().width;
        const indicatorStyle = this.document.defaultView.getComputedStyle(this.indicator.nativeElement);
        const indicatorMargin = parseFloat(indicatorStyle.marginRight);
        let leftPadding = 0;
        if (this.indentationDiv) {
            const indentationStyle = this.document.defaultView.getComputedStyle(this.indentationDiv.nativeElement);
            leftPadding = parseFloat(indentationStyle.paddingLeft);
        }
        const largestWidth = Math.max(...Array.from(this.nativeElement.children)
            .map((child) => getNodeSizeViaRange(range, child)));
        return largestWidth + indicatorWidth + indicatorMargin + leftPadding;
    }
    /**
     * @hidden
     */
    get iconTemplate() {
        if (this.expanded) {
            return this.grid.rowExpandedIndicatorTemplate || this.defaultExpandedTemplate;
        }
        else {
            return this.grid.rowCollapsedIndicatorTemplate || this.defaultCollapsedTemplate;
        }
    }
    /**
     * @hidden
     */
    get showExpanderIndicator() {
        const isGhost = this.row.pinned && this.row.disabled;
        return !this.editMode && (!this.row.pinned || isGhost);
    }
}
IgxGridExpandableCellComponent.decorators = [
    { type: Component, args: [{
                changeDetection: ChangeDetectionStrategy.OnPush,
                selector: 'igx-expandable-grid-cell',
                template: "<ng-template #defaultPinnedIndicator>\n    <igx-chip *ngIf=\"displayPinnedChip\" class=\"igx-grid__td--pinned-chip\" [disabled]=\"true\" [displayDensity]=\"'compact'\">{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n</ng-template>\n<ng-template #defaultCell>\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)\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        [row]=\"rowData\"\n        [column]=\"this.column.field\"\n        [containerClass]=\"'igx-grid__td-text'\"\n        [metadata]=\"searchMetadata\">{{ 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}}</div>\n\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' ?\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        value ? 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 igxInput [(ngModel)]=\"editValue\" [igxFocus]=\"true\" [step]=\"step\"  type=\"number\">\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'boolean'\">\n        <igx-checkbox (change)=\"editValue = $event.checked\" [value]=\"editValue\" [checked]=\"editValue\" [disableRipple]=\"true\"></igx-checkbox>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'date'\">\n        <igx-date-picker [style.width.%]=\"100\" [outlet]=\"grid.outlet\" mode=\"dropdown\"\n        [locale]=\"grid.locale\" [(value)]=\"editValue\" [igxFocus]=\"true\" [labelVisibility]=\"false\">\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  igxInput [value]=\"editValue\" (input)=\"editValue = $event.target.value\"\n                [igxFocus]=\"true\" [step]=\"step\" type=\"number\"/>\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 [value]=\"editValue\"\n                (input)=\"editValue = $event.target.value\" [step]=\"step\"\n                [igxFocus]=\"true\" type=\"number\"/>\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=\"showExpanderIndicator\">\n    <div #indicator\n         class=\"igx-grid__tree-grouping-indicator\"\n         (click)=\"toggle($event)\" (focus)=\"onIndicatorFocus($event)\">\n         <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit:  this }\">\n        </ng-container>\n    </div>\n</ng-container>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\">\n</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]
            },] }
];
IgxGridExpandableCellComponent.ctorParameters = () => [
    { type: IgxGridSelectionService },
    { type: IgxGridCRUDService },
    { type: GridBaseAPIService },
    { type: ChangeDetectorRef },
    { type: ElementRef },
    { type: NgZone },
    { type: HammerGesturesManager },
    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
    { type: PlatformUtil }
];
IgxGridExpandableCellComponent.propDecorators = {
    expanded: [{ type: Input }],
    indicator: [{ type: ViewChild, args: ['indicator', { read: ElementRef },] }],
    indentationDiv: [{ type: ViewChild, args: ['indentationDiv', { read: ElementRef },] }],
    defaultExpandedTemplate: [{ type: ViewChild, args: ['defaultExpandedTemplate', { read: TemplateRef, static: true },] }],
    defaultCollapsedTemplate: [{ type: ViewChild, args: ['defaultCollapsedTemplate', { read: TemplateRef, static: true },] }]
};
//# sourceMappingURL=data:application/json;base64, 