igniteui-angular-sovn/src/lib/grids/grid/expandable-cell.component.html

Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps

<ng-template #defaultPinnedIndicator>
    <igx-chip *ngIf="displayPinnedChip" class="igx-grid__td--pinned-chip" [disabled]="true" [displayDensity]="'compact'">{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>
</ng-template>
<ng-template #defaultCell>
    <div *ngIf="column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)"
        igxTextHighlight class="igx-grid__td-text" style="pointer-events: none"
        [cssClass]="highlightClass"
        [activeCssClass]="activeHighlightClass"
        [groupName]="gridID"
        [value]="formatter ? (value | columnFormatter:formatter:rowData)
            : column.dataType === 'number'
            ? (value | number:column.pipeArgs.digitsInfo:grid.locale)
            : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')
            ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)
            : column.dataType === 'currency'
            ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)
            : column.dataType === 'percent'
            ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)
            : value"
        [row]="rowData"
        [column]="this.column.field"
        [containerClass]="'igx-grid__td-text'"
        [metadata]="searchMetadata">{{ formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === "number"
            ? (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')
            ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency'
            ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent'
            ? (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value}}</div>

    <igx-icon
        *ngIf="column.dataType === 'boolean' && !this.formatter"
        [ngClass]="{ 'igx-icon--success': value, 'igx-icon--error': !value }"
    >{{ value ? "check" : "close" }}</igx-icon>
    <img *ngIf="column.dataType === 'image'" [src]="value" [alt]="value | igxCellImageAlt" />
</ng-template>
<ng-template #addRowCell let-cell="cell">
    <div *ngIf="column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)"
        igxTextHighlight class="igx-grid__td-text" style="pointer-events: none"
    [cssClass]="highlightClass"
    [activeCssClass]="activeHighlightClass"
    [groupName]="gridID"
    [value]="formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?
        (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?
        (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency'?
        (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?
        (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value"
    [row]="rowData"
    [column]="this.column.field"
    [containerClass]="'igx-grid__td-text'"
    [metadata]="searchMetadata">{{
        value ? value : (column.header || column.field)
    }}</div>
</ng-template>
<ng-template #inlineEditor let-cell="cell">
    <ng-container *ngIf="column.dataType === 'string' || column.dataType === 'image'" [formGroup]="formGroup">
        <igx-input-group displayDensity="compact" >
            <input
                igxInput
                [attr.aria-describedby]="ariaDescribeBy"
                [attr.aria-invalid]="isInvalid"
                [igxFocus]="true"
                [formControl]="formControl"
                (compositionstart)="grid.crudService.isInCompositionMode = true"
                (compositionend)="grid.crudService.isInCompositionMode = false"
            />
        </igx-input-group>
    </ng-container>
    <ng-container *ngIf="column.dataType === 'number'">
        <igx-input-group displayDensity="compact" [formGroup]="formGroup">
            <input
                igxInput
                [attr.aria-describedby]="ariaDescribeBy"
                [attr.aria-invalid]="isInvalid"
                [igxFocus]="true"
                [step]="step"
                type="number"
                [formControl]="formControl"
            />
        </igx-input-group>
    </ng-container>
    <ng-container *ngIf="column.dataType === 'boolean'" [formGroup]="formGroup">
        <igx-checkbox
            [checked]="editValue"
            [igxFocus]="true"
            [disableRipple]="true"
            [formControl]="formControl"
        ></igx-checkbox>
    </ng-container>
    <ng-container *ngIf="column.dataType === 'date'" [formGroup]="formGroup">
        <igx-date-picker
            [style.width.%]="100"
            [outlet]="grid.outlet"
            mode="dropdown"
            [locale]="grid.locale"
            [weekStart]="column.pipeArgs.weekStart"
            [(value)]="editValue"
            [igxFocus]="true"
            [formControl]="formControl"
        >
        </igx-date-picker>
    </ng-container>
    <ng-container *ngIf="column.dataType === 'time'" [formGroup]="formGroup">
        <igx-time-picker
            [style.width.%]="100"
            [outlet]="grid.outlet"
            mode="dropdown"
            [locale]="grid.locale"
            [inputFormat]="column.defaultTimeFormat"
            [(value)]="editValue"
            [igxFocus]="true"
            [formControl]="formControl"
        ></igx-time-picker>
    </ng-container>
    <ng-container *ngIf="column.dataType === 'dateTime'">
        <igx-input-group [formGroup]="formGroup">
            <input
                type="text"
                [attr.aria-describedby]="ariaDescribeBy"
                [attr.aria-invalid]="isInvalid"
                [formControl]="formControl"
                igxInput
                [igxDateTimeEditor]="column.defaultDateTimeFormat"
                [igxFocus]="true"
            />
        </igx-input-group>
    </ng-container>
    <ng-container *ngIf="column.dataType === 'currency'">
        <igx-input-group displayDensity="compact" [formGroup]="formGroup">
            <igx-prefix *ngIf="grid.currencyPositionLeft">{{ currencyCodeSymbol }}</igx-prefix>
            <input
                igxInput
                [attr.aria-describedby]="ariaDescribeBy"
                [attr.aria-invalid]="isInvalid"
                [igxFocus]="true"
                [step]="step"
                type="number"
                [formControl]="formControl"
            />
            <igx-suffix *ngIf="!grid.currencyPositionLeft">{{ currencyCodeSymbol }}</igx-suffix>
        </igx-input-group>
    </ng-container>
    <ng-container *ngIf="column.dataType === 'percent'">
        <igx-input-group displayDensity="compact" [formGroup]="formGroup">
            <input
                igxInput
                [attr.aria-describedby]="ariaDescribeBy"
                [attr.aria-invalid]="isInvalid"
                [igxFocus]="true"
                [step]="step"
                type="number"
                [formControl]="formControl"
            />
            <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>
        </igx-input-group>
    </ng-container>
</ng-template>
<ng-container *ngIf="showExpanderIndicator">
    <div #indicator
         class="igx-grid__tree-grouping-indicator"
         (click)="toggle($event)" (focus)="onIndicatorFocus()">
         <ng-container *ngTemplateOutlet="iconTemplate; context: { $implicit:  row }">
        </ng-container>
    </div>
</ng-container>
<ng-container *ngTemplateOutlet="pinnedIndicatorTemplate; context: context">
</ng-container>
<ng-container *ngTemplateOutlet="template; context: context">
</ng-container>
<ng-container *ngIf="isInvalid">
    <igx-icon #errorIcon [igxTooltipTarget]="tooltipRef" [igxToggleOutlet]="grid.outlet"
    (mouseover)='errorShowing = true' (mouseout)='errorShowing = false'>error</igx-icon>
    <div [id]="ariaErrorMessage"
    igxTooltip #error #tooltipRef="tooltip">
        <div [style.width]="'max-content'">
            <ng-container *ngTemplateOutlet="cellValidationErrorTemplate || defaultError; context: context"></ng-container>
        </div>
    </div>
</ng-container>

<ng-template #defaultExpandedTemplate>
        <igx-icon>expand_more</igx-icon>
</ng-template>
<ng-template #defaultCollapsedTemplate>
        <igx-icon>chevron_right</igx-icon>
</ng-template>

<ng-template #defaultError>
    <div *ngIf="formGroup?.get(column?.field).errors?.['required']">
        {{grid.resourceStrings.igx_grid_required_validation_error}}
    </div>
    <div *ngIf="formGroup?.get(column?.field).errors?.['minlength']">
        {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.minlength.requiredLength }}
    </div>
    <div *ngIf="formGroup?.get(column?.field).errors?.['maxlength']">
        {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.maxlength.requiredLength }}
    </div>
    <div *ngIf="formGroup?.get(column?.field).errors?.['min']">
        {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.min.min }}
    </div>
    <div *ngIf="formGroup?.get(column?.field).errors?.['max']">
        {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.max.max }}
    </div>
    <div *ngIf="formGroup?.get(column?.field).errors?.['email']">
        {{grid.resourceStrings.igx_grid_email_validation_error }}
    </div>
    <div *ngIf="formGroup?.get(column?.field).errors?.['pattern']">
        {{grid.resourceStrings.igx_grid_pattern_validation_error}}
    </div>
</ng-template>