import { ChangeDetectionStrategy, Component, ElementRef, Inject, Input, TemplateRef, ViewChild } from '@angular/core';
import { IgxGridCellComponent } from '../cell.component';
import { DOCUMENT, NgIf, NgClass, NgTemplateOutlet, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe } from '@angular/common';
import { HammerGesturesManager } from '../../core/touch';
import { IGX_GRID_BASE } from '../common/grid.interface';
import { IgxOverlayService } from '../../services/public_api';
import { IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxColumnFormatterPipe } from '../common/pipes';
import { IgxTooltipDirective } from '../../directives/tooltip/tooltip.directive';
import { IgxTooltipTargetDirective } from '../../directives/tooltip/tooltip-target.directive';
import { IgxSuffixDirective } from '../../directives/suffix/suffix.directive';
import { IgxPrefixDirective } from '../../directives/prefix/prefix.directive';
import { IgxDateTimeEditorDirective } from '../../directives/date-time-editor/date-time-editor.directive';
import { IgxTimePickerComponent } from '../../time-picker/time-picker.component';
import { IgxDatePickerComponent } from '../../date-picker/date-picker.component';
import { IgxCheckboxComponent } from '../../checkbox/checkbox.component';
import { IgxFocusDirective } from '../../directives/focus/focus.directive';
import { IgxInputDirective } from '../../directives/input/input.directive';
import { IgxInputGroupComponent } from '../../input-group/input-group.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { IgxIconComponent } from '../../icon/icon.component';
import { IgxTextHighlightDirective } from '../../directives/text-highlight/text-highlight.directive';
import { IgxChipComponent } from '../../chips/chip.component';
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 "@angular/forms";
import * as i5 from "../../services/public_api";
export class IgxGridExpandableCellComponent extends IgxGridCellComponent {
    constructor(selectionService, grid, overlayService, cdr, element, zone, touchManager, document, platformUtil) {
        super(selectionService, grid, overlayService, cdr, element, zone, touchManager, platformUtil);
        this.document = document;
        /**
         * @hidden
         */
        this.expanded = false;
    }
    /**
     * @hidden
     */
    toggle(event) {
        event.stopPropagation();
        const expansionState = this.grid.gridAPI.get_row_expansion_state(this.intRow.data);
        this.grid.gridAPI.set_row_expansion_state(this.intRow.key, !expansionState, event);
    }
    /**
     * @hidden
     */
    onIndicatorFocus() {
        this.grid.gridAPI.update_cell(this.grid.crudService.cell);
    }
    /**
     * @hidden
     */
    calculateSizeToFit(range) {
        let leftPadding = 0;
        if (this.indentationDiv) {
            const indentationStyle = this.document.defaultView.getComputedStyle(this.indentationDiv.nativeElement);
            leftPadding = parseFloat(indentationStyle.paddingLeft);
        }
        const contentWidth = this.platformUtil.getNodeSizeViaRange(range, this.nativeElement);
        return contentWidth + 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.intRow.pinned && this.intRow.disabled;
        return !this.editMode && (!this.intRow.pinned || isGhost);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxGridExpandableCellComponent, deps: [{ token: i1.IgxGridSelectionService }, { token: IGX_GRID_BASE }, { token: IgxOverlayService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i2.HammerGesturesManager }, { token: DOCUMENT }, { token: i3.PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: IgxGridExpandableCellComponent, isStandalone: true, selector: "igx-expandable-grid-cell", inputs: { expanded: "expanded" }, providers: [HammerGesturesManager], viewQueries: [{ propertyName: "indicator", first: true, predicate: ["indicator"], descendants: true, read: ElementRef }, { propertyName: "indentationDiv", first: true, predicate: ["indentationDiv"], descendants: true, read: ElementRef }, { propertyName: "defaultExpandedTemplate", first: true, predicate: ["defaultExpandedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultCollapsedTemplate", first: true, predicate: ["defaultCollapsedTemplate"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #defaultPinnedIndicator>\n    <igx-chip *ngIf=\"displayPinnedChip\" class=\"igx-grid__td--pinned-chip\" [disabled]=\"true\" [style.--ig-size]=\"1\">{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n</ng-template>\n<ng-template #defaultCell>\n    <div *ngIf=\"column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)\"\n        igxTextHighlight class=\"igx-grid__td-text\"\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' || 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        [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' || 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}}</div>\n\n    <igx-icon\n        family=\"default\"\n        [name]=\"value ? 'confirm' : 'close'\"\n        *ngIf=\"column.dataType === 'boolean' && !this.formatter\"\n        [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n    </igx-icon>\n    <img *ngIf=\"column.dataType === 'image'\" [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\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\"\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        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' || column.dataType === 'image'\" [formGroup]=\"formGroup\">\n        <igx-input-group [style.--ig-size]=\"1\" >\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\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 [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'boolean'\" [formGroup]=\"formGroup\">\n        <igx-checkbox\n            [checked]=\"editValue\"\n            [igxFocus]=\"true\"\n            [disableRipple]=\"true\"\n            [formControl]=\"formControl\"\n        ></igx-checkbox>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'date'\" [formGroup]=\"formGroup\">\n        <igx-date-picker\n            [style.width.%]=\"100\"\n            [outlet]=\"grid.outlet\"\n            mode=\"dropdown\"\n            [locale]=\"grid.locale\"\n            [weekStart]=\"column.pipeArgs.weekStart\"\n            [(value)]=\"editValue\"\n            [igxFocus]=\"true\"\n            [formControl]=\"formControl\"\n            [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n            [displayFormat]=\"column.pipeArgs.format\"\n        >\n        </igx-date-picker>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'time'\" [formGroup]=\"formGroup\">\n        <igx-time-picker\n            [style.width.%]=\"100\"\n            [outlet]=\"grid.outlet\"\n            mode=\"dropdown\"\n            [locale]=\"grid.locale\"\n            [(value)]=\"editValue\"\n            [igxFocus]=\"true\"\n            [formControl]=\"formControl\"\n            [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n            [displayFormat]=\"column.pipeArgs.format\"\n        ></igx-time-picker>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'dateTime'\">\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                type=\"text\"\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [formControl]=\"formControl\"\n                igxInput\n                [locale]=\"grid.locale\"\n                [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n                [defaultFormatType]=\"column.dataType\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [igxFocus]=\"true\"\n            />\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'currency'\">\n        <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n            <igx-prefix *ngIf=\"grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-prefix>\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\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 [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\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=\"showExpanderIndicator\">\n    <div #indicator\n         class=\"igx-grid__tree-grouping-indicator\"\n         (click)=\"toggle($event)\" (focus)=\"onIndicatorFocus()\">\n         <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit:  row }\">\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-container *ngIf=\"isInvalid\">\n    <igx-icon\n        family=\"default\"\n        name=\"error\"\n        #errorIcon\n        [igxTooltipTarget]=\"tooltipRef\"\n        [igxToggleOutlet]=\"grid.outlet\"\n        (mouseover)='errorShowing = true'\n        (mouseout)='errorShowing = false'>\n    </igx-icon>\n    <div [id]=\"ariaErrorMessage\"\n    igxTooltip #error #tooltipRef=\"tooltip\">\n        <div [style.width]=\"'max-content'\">\n            <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></ng-container>\n        </div>\n    </div>\n</ng-container>\n\n<ng-template #defaultExpandedTemplate>\n        <igx-icon family=\"default\" name=\"tree_collapse\"></igx-icon>\n</ng-template>\n<ng-template #defaultCollapsedTemplate>\n        <igx-icon family=\"default\" name=\"tree_expand\"></igx-icon>\n</ng-template>\n\n<ng-template #defaultError>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['required']\">\n        {{grid.resourceStrings.igx_grid_required_validation_error}}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['minlength']\">\n        {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.minlength.requiredLength }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['maxlength']\">\n        {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.maxlength.requiredLength }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['min']\">\n        {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.min.min }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['max']\">\n        {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.max.max }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['email']\">\n        {{grid.resourceStrings.igx_grid_email_validation_error }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['pattern']\">\n        {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "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: IgxTextHighlightDirective, selector: "[igxTextHighlight]", inputs: ["cssClass", "activeCssClass", "containerClass", "groupName", "value", "row", "column", "metadata"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxFocusDirective, selector: "[igxFocus]", inputs: ["igxFocus"], exportAs: ["igxFocus"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: 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"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "tooltipDisabled", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id"], exportAs: ["tooltip"] }, { kind: "pipe", type: IgxGridCellImageAltPipe, name: "igxCellImageAlt" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxGridExpandableCellComponent, decorators: [{
            type: Component,
            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-expandable-grid-cell', providers: [HammerGesturesManager], standalone: true, imports: [NgIf, IgxChipComponent, IgxTextHighlightDirective, IgxIconComponent, NgClass, FormsModule, ReactiveFormsModule, IgxInputGroupComponent, IgxInputDirective, IgxFocusDirective, IgxCheckboxComponent, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateTimeEditorDirective, IgxPrefixDirective, IgxSuffixDirective, NgTemplateOutlet, IgxTooltipTargetDirective, IgxTooltipDirective, IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxColumnFormatterPipe, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe], template: "<ng-template #defaultPinnedIndicator>\n    <igx-chip *ngIf=\"displayPinnedChip\" class=\"igx-grid__td--pinned-chip\" [disabled]=\"true\" [style.--ig-size]=\"1\">{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n</ng-template>\n<ng-template #defaultCell>\n    <div *ngIf=\"column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)\"\n        igxTextHighlight class=\"igx-grid__td-text\"\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' || 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        [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' || 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}}</div>\n\n    <igx-icon\n        family=\"default\"\n        [name]=\"value ? 'confirm' : 'close'\"\n        *ngIf=\"column.dataType === 'boolean' && !this.formatter\"\n        [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n    </igx-icon>\n    <img *ngIf=\"column.dataType === 'image'\" [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\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\"\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        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' || column.dataType === 'image'\" [formGroup]=\"formGroup\">\n        <igx-input-group [style.--ig-size]=\"1\" >\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\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 [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'boolean'\" [formGroup]=\"formGroup\">\n        <igx-checkbox\n            [checked]=\"editValue\"\n            [igxFocus]=\"true\"\n            [disableRipple]=\"true\"\n            [formControl]=\"formControl\"\n        ></igx-checkbox>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'date'\" [formGroup]=\"formGroup\">\n        <igx-date-picker\n            [style.width.%]=\"100\"\n            [outlet]=\"grid.outlet\"\n            mode=\"dropdown\"\n            [locale]=\"grid.locale\"\n            [weekStart]=\"column.pipeArgs.weekStart\"\n            [(value)]=\"editValue\"\n            [igxFocus]=\"true\"\n            [formControl]=\"formControl\"\n            [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n            [displayFormat]=\"column.pipeArgs.format\"\n        >\n        </igx-date-picker>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'time'\" [formGroup]=\"formGroup\">\n        <igx-time-picker\n            [style.width.%]=\"100\"\n            [outlet]=\"grid.outlet\"\n            mode=\"dropdown\"\n            [locale]=\"grid.locale\"\n            [(value)]=\"editValue\"\n            [igxFocus]=\"true\"\n            [formControl]=\"formControl\"\n            [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n            [displayFormat]=\"column.pipeArgs.format\"\n        ></igx-time-picker>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'dateTime'\">\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                type=\"text\"\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [formControl]=\"formControl\"\n                igxInput\n                [locale]=\"grid.locale\"\n                [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n                [defaultFormatType]=\"column.dataType\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [igxFocus]=\"true\"\n            />\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'currency'\">\n        <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n            <igx-prefix *ngIf=\"grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-prefix>\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\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 [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\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=\"showExpanderIndicator\">\n    <div #indicator\n         class=\"igx-grid__tree-grouping-indicator\"\n         (click)=\"toggle($event)\" (focus)=\"onIndicatorFocus()\">\n         <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit:  row }\">\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-container *ngIf=\"isInvalid\">\n    <igx-icon\n        family=\"default\"\n        name=\"error\"\n        #errorIcon\n        [igxTooltipTarget]=\"tooltipRef\"\n        [igxToggleOutlet]=\"grid.outlet\"\n        (mouseover)='errorShowing = true'\n        (mouseout)='errorShowing = false'>\n    </igx-icon>\n    <div [id]=\"ariaErrorMessage\"\n    igxTooltip #error #tooltipRef=\"tooltip\">\n        <div [style.width]=\"'max-content'\">\n            <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></ng-container>\n        </div>\n    </div>\n</ng-container>\n\n<ng-template #defaultExpandedTemplate>\n        <igx-icon family=\"default\" name=\"tree_collapse\"></igx-icon>\n</ng-template>\n<ng-template #defaultCollapsedTemplate>\n        <igx-icon family=\"default\" name=\"tree_expand\"></igx-icon>\n</ng-template>\n\n<ng-template #defaultError>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['required']\">\n        {{grid.resourceStrings.igx_grid_required_validation_error}}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['minlength']\">\n        {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.minlength.requiredLength }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['maxlength']\">\n        {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.maxlength.requiredLength }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['min']\">\n        {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.min.min }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['max']\">\n        {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.max.max }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['email']\">\n        {{grid.resourceStrings.igx_grid_email_validation_error }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['pattern']\">\n        {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n    </div>\n</ng-template>\n" }]
        }], ctorParameters: () => [{ type: i1.IgxGridSelectionService }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [IGX_GRID_BASE]
                }] }, { type: i5.IgxOverlayService, decorators: [{
                    type: Inject,
                    args: [IgxOverlayService]
                }] }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i2.HammerGesturesManager }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }, { type: i3.PlatformUtil }], 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, 