igniteui-angular-sovn/src/lib/grids/filtering/base/grid-filtering-row.component.html

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

<!-- Have to apply styles inline because of the overlay outlet ... -->
<igx-drop-down #inputGroupConditions [displayDensity]="displayDensity" [height]="'200px'" (selectionChanging)="onConditionsChanged($event)">
    <igx-drop-down-item *ngFor="let condition of conditions"
        [value]="condition"
        [selected]="isConditionSelected(condition)">
        <div class="igx-grid__filtering-dropdown-items">
            <igx-icon family="imx-icons" [name]="getCondition(condition).iconName"></igx-icon>
            <span class="igx-grid__filtering-dropdown-text">{{ translateCondition(condition) }}</span>
        </div>
    </igx-drop-down-item>
</igx-drop-down>

<ng-template #defaultFilterUI>
    <igx-input-group #inputGroup type="box" [displayDensity]="displayDensity" (focusout)="onInputGroupFocusout()">
        <igx-prefix #inputGroupPrefix
                    (click)="inputGroupPrefixClick($event)"
                    (keydown)="onPrefixKeyDown($event)"
                    tabindex="0"
                    [igxDropDownItemNavigation]="inputGroupConditions">
            <igx-icon family="imx-icons" [name]="getIconName()"></igx-icon>
        </igx-prefix>
        <input
            #input
            igxInput
            tabindex="0"
            [placeholder]="placeholder"
            autocomplete="off"
            [value]="value"
            (input)="onInput($event)"
            [type]="type"
            [readonly]="isUnaryCondition"
            (click)="onInputClick()"
            (compositionstart)="onCompositionStart()"
            (compositionend)="onCompositionEnd()"
            (keydown)="onInputKeyDown($event)"
            (keyup)="onInputKeyUp()"/>
            <igx-suffix *ngIf="value || value === 0" >
                <igx-icon (keydown)="onCommitKeyDown($event)" (click)="onCommitClick()" tabindex="0">done</igx-icon>
                <igx-icon (keydown)="onClearKeyDown($event)" (click)="onClearClick()" tabindex="0">clear</igx-icon>
            </igx-suffix>
    </igx-input-group>
</ng-template>

<ng-template #defaultDateUI>
    <igx-date-picker #picker
        [(value)]="value"
        [readOnly]="true"
        [outlet]="filteringService.grid.outlet"
        [locale]="filteringService.grid.locale"
        (click)="expression.condition.isUnary ? null : picker.open()"
        type="box"
        [displayFormat]="column.pipeArgs.format"
        [formatter]="column.formatter"
        [placeholder]="placeholder"
        [weekStart]="column.pipeArgs.weekStart"
        [displayDensity]="displayDensity"
        (keydown)="onInputKeyDown($event)"
        (focusout)="onInputGroupFocusout()"
        (closed)="focusEditElement()">
        <igx-prefix #inputGroupPrefix
            tabindex="0"
            (click)="inputGroupPrefixClick($event)"
            (keydown)="onPrefixKeyDown($event)"
            [igxDropDownItemNavigation]="inputGroupConditions">
            <igx-icon family="imx-icons" [name]="expression.condition.iconName"></igx-icon>
        </igx-prefix>
        <igx-suffix *ngIf="value">
            <igx-icon tabindex="0" (keydown)="onCommitKeyDown($event)" (click)="onCommitClick($event)">done</igx-icon>
            <igx-icon tabindex="0" (keydown)="onClearKeyDown($event)" (click)="clearInput($event)">clear</igx-icon>
        </igx-suffix>
        <!-- disable default icons -->
        <igx-picker-toggle></igx-picker-toggle>
        <igx-picker-clear></igx-picker-clear>
    </igx-date-picker>
</ng-template>

<ng-template #defaultTimeUI>
    <igx-time-picker #picker
        [(value)]="value"
        [inputFormat]="column.defaultTimeFormat"
        [locale]="filteringService.grid.locale"
        [formatter]="column.formatter"
        [outlet]="filteringService.grid.outlet"
        [displayDensity]="displayDensity"
        type="box"
        [readOnly]="true"
        [placeholder]="placeholder"
        (closed)="focusEditElement()"
        (focusout)="onInputGroupFocusout()"
        (keydown)="onInputKeyDown($event)"
        (click)="expression.condition.isUnary ? null : picker.open()">
        <igx-prefix #inputGroupPrefix
        tabindex="0"
        (click)="inputGroupPrefixClick($event)"
        (keydown)="onPrefixKeyDown($event)"
        [igxDropDownItemNavigation]="inputGroupConditions">
        <igx-icon family="imx-icons" [name]="expression.condition.iconName"></igx-icon>
    </igx-prefix>
    <igx-suffix *ngIf="value">
        <igx-icon tabindex="0" (keydown)="onCommitKeyDown($event)" (click)="onCommitClick($event)">done</igx-icon>
        <igx-icon tabindex="0" (keydown)="onClearKeyDown($event)" (click)="clearInput($event)">clear</igx-icon>
    </igx-suffix>
    <!-- disable default icons -->
    <igx-picker-toggle></igx-picker-toggle>
    <igx-picker-clear></igx-picker-clear>
    </igx-time-picker>
</ng-template>

<ng-template #defaultDateTimeUI>
    <igx-input-group #inputGroup type="box" [displayDensity]="displayDensity" (focusout)="onInputGroupFocusout()">
        <igx-prefix #inputGroupPrefix
                    (click)="inputGroupPrefixClick($event)"
                    (keydown)="onPrefixKeyDown($event)"
                    tabindex="0"
                    [igxDropDownItemNavigation]="inputGroupConditions">
            <igx-icon family="imx-icons" [name]="getIconName()"></igx-icon>
        </igx-prefix>
        <input
            #input
            igxInput
            tabindex="0"
            [placeholder]="placeholder"
            [igxDateTimeEditor]="column.defaultDateTimeFormat"
            [value]="value"
            (valueChange)="onInput($event)"
            [readonly]="isUnaryCondition"
            (click)="onInputClick()"
            (keydown)="onInputKeyDown($event)"
            (keyup)="onInputKeyUp()"/>
            <igx-suffix *ngIf="value || value === 0" >
                <igx-icon (keydown)="onCommitKeyDown($event)" (click)="onCommitClick()" tabindex="0">done</igx-icon>
                <igx-icon (keydown)="onClearKeyDown($event)" (click)="onClearClick()" tabindex="0">clear</igx-icon>
            </igx-suffix>
    </igx-input-group>
</ng-template>

<ng-container *ngTemplateOutlet="template; context: { $implicit: this }"></ng-container>

<button igxButton="icon" type="button" class="igx-grid__filtering-row-scroll-start" *ngIf="showArrows" (keydown)="onLeftArrowKeyDown($event)" (click)="scrollChipsOnArrowPress('left')">
    <igx-icon>navigate_before</igx-icon>
</button>

<div #container class="igx-grid__filtering-row-main">
    <div>
         <igx-chips-area #chipsArea>
            <ng-container *ngFor="let item of expressionsList; index as i; let last = last;" tabindex="0">
                <igx-chip #chip id='chip'
                    (pointerdown)="onChipPointerdown($event, chip)"
                    (click)="onChipClick($event, item)"
                    (keydown)="onChipKeyDown($event, item)"
                    (remove)="onChipRemoved($event, item)"
                    [selectable]="false"
                    [selected]="item.isSelected"
                    [displayDensity]="displayDensity"
                    [removable]="true">
                    <igx-icon
                        igxPrefix
                        family="imx-icons"
                        [name]="item.expression.condition.iconName">
                    </igx-icon>
                    <span>{{filteringService.getChipLabel(item.expression)}}</span>
                </igx-chip>

                <span id='operand' *ngIf="!last">
                    <button igxButton type="button" (click)="toggleOperatorsDropDown($event, i)" [igxDropDownItemNavigation]="operators" [displayDensity]="displayDensity">
                        <igx-icon>expand_more</igx-icon>
                        <span>{{filteringService.getOperatorAsString(item.afterOperator)}}</span>
                    </button>
                    <igx-drop-down [displayDensity]="column.grid.displayDensity" #operators (selectionChanging)="onLogicOperatorChanged($event, item)">
                            <igx-drop-down-item [value]="0" [selected]="item.afterOperator === 0">{{filteringService.grid.resourceStrings.igx_grid_filter_operator_and}}</igx-drop-down-item>
                            <igx-drop-down-item [value]="1" [selected]="item.afterOperator === 1">{{filteringService.grid.resourceStrings.igx_grid_filter_operator_or}}</igx-drop-down-item>
                    </igx-drop-down>
                </span>
            </ng-container>
        </igx-chips-area>
    </div>
</div>

<button igxButton="icon" type="button" class="igx-grid__filtering-row-scroll-end" *ngIf="showArrows" (click)="scrollChipsOnArrowPress('right')">
    <igx-icon>navigate_next</igx-icon>
</button>

<div #buttonsContainer [ngClass]="isNarrowWidth ? 'igx-grid__filtering-row-editing-buttons--small' : 'igx-grid__filtering-row-editing-buttons'">
    <button [displayDensity]="displayDensity" [igxButton]="isNarrowWidth ? 'icon' : 'flat'" type="button" igxRipple (click)="clearFiltering()" [disabled]="disabled" [tabindex]="disabled">
        <igx-icon>refresh</igx-icon>
        <span>{{isNarrowWidth ? '' : filteringService.grid.resourceStrings.igx_grid_filter_row_reset}}</span>
    </button>
    <button #closeButton [displayDensity]="displayDensity" [igxButton]="isNarrowWidth ? 'icon' : 'flat'" type="button" igxRipple (click)="close()">
        <igx-icon>close</igx-icon>
        <span>{{isNarrowWidth ? '' : filteringService.grid.resourceStrings.igx_grid_filter_row_close}}</span>
    </button>
</div>