igniteui-angular-sovn/src/lib/grids/filtering/excel-style/excel-style-custom-dialog.component.html

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

<article #toggle igxToggle
    class="igx-excel-filter__secondary"
    [ngClass]="{
        'igx-excel-filter__secondary--cosy': grid.displayDensity === 'cosy',
        'igx-excel-filter__secondary--compact': grid.displayDensity === 'compact'
    }"
    (keydown)="onKeyDown($event)"
    (opening)="onCustomDialogOpening()"
    (opened)="onCustomDialogOpened()">
    <header class="igx-excel-filter__secondary-header">
        <h4 class="ig-typography__h6">
            {{ grid.resourceStrings.igx_grid_excel_custom_dialog_header }}{{ column.header || column.field }}
        </h4>
    </header>

    <article #expressionsContainer class="igx-excel-filter__secondary-main">
        <ng-container *ngIf="column.dataType === 'date' || column.dataType === 'dateTime' || column.dataType === 'time'">
            <igx-excel-style-date-expression *ngFor="let expression of expressionsList;"
                class="igx-excel-filter__condition"
                [expressionUI]="expression"
                [column]="column"
                [grid]="grid"
                [displayDensity]="displayDensity"
                [expressionsList]="expressionsList"
                (expressionRemoved)="onExpressionRemoved($event)"
                (logicOperatorChanged)="onLogicOperatorChanged($event)">
            </igx-excel-style-date-expression>
        </ng-container>

        <ng-container *ngIf="column.dataType !== 'date' && column.dataType !== 'dateTime' && column.dataType !== 'time'">
            <igx-excel-style-default-expression *ngFor="let expression of expressionsList;"
                class="igx-excel-filter__condition"
                [expressionUI]="expression"
                [column]="column"
                [grid]="grid"
                [displayDensity]="displayDensity"
                [expressionsList]="expressionsList"
                (expressionRemoved)="onExpressionRemoved($event)"
                (logicOperatorChanged)="onLogicOperatorChanged($event)">
            </igx-excel-style-default-expression>
        </ng-container>

        <button igxButton [displayDensity]="displayDensity"
            class="igx-excel-filter__add-filter"
            (click)="onAddButtonClick()">
            <igx-icon>add</igx-icon>
            <span>{{ grid.resourceStrings.igx_grid_excel_custom_dialog_add }}</span>
        </button>
    </article>

    <footer class="igx-excel-filter__secondary-footer">
        <div class="igx-excel-filter__clear">
            <button
                igxButton="flat"
                [displayDensity]="displayDensity"
                (click)="onClearButtonClick()">
                    {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}
            </button>
        </div>
        <div class="igx-excel-filter__cancel">
            <button
                igxButton="flat"
                [displayDensity]="displayDensity"
                (click)="closeDialog()">
                    {{ grid.resourceStrings.igx_grid_excel_cancel }}
            </button>
        </div>
        <div class="igx-excel-filter__apply">
            <button
                igxButton="raised"
                [displayDensity]="displayDensity"
                (click)="onApplyButtonClick()"
                (keydown)="onApplyButtonKeyDown($event)">
                {{ grid.resourceStrings.igx_grid_excel_apply }}
            </button>
        </div>
    </footer>
</article>