igniteui-angular-sovn/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.html

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

<igx-select #dropdownConditions
        type="box"
        [displayDensity]="displayDensity"
        [placeholder]="conditionsPlaceholder"
        (selectionChanging)="onConditionsChanged($event)"
        [overlaySettings]="dropDownOverlaySettings">
    <igx-prefix>
        <igx-icon *ngIf="expressionUI.expression.condition" family="imx-icons" [name]="getIconName()"></igx-icon>
        <igx-icon *ngIf="!expressionUI.expression.condition">filter_list</igx-icon>
    </igx-prefix>
    <igx-select-item *ngFor="let condition of conditions" [value]="condition" [text]="getConditionFriendlyName(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-select-item>
</igx-select>

<igx-input-group #inputGroupValues type="box" [displayDensity]="displayDensity">
    <input
        #inputValues
        igxInput
        [type]="type"
        tabindex="0"
        [placeholder]="inputValuePlaceholder"
        [disabled]="expressionUI.expression.condition && expressionUI.expression.condition.isUnary"
        autocomplete="off"
        [value]="expressionUI.expression.searchVal"
        (input)="onValuesInput($event)"
    />
</igx-input-group>

<button (click)="onRemoveButtonClick()" igxButton="icon" [displayDensity]="displayDensity" *ngIf="!isSingle">
    <igx-icon>cancel</igx-icon>
</button>

<igx-buttongroup #logicOperatorButtonGroup
    *ngIf="!isLast"
    [multiSelection]="false">
    <span igxButton [displayDensity]="displayDensity"
        tabindex="0"
        #andButton
        (keydown)="onLogicOperatorKeyDown($event, 0)"
        [selected]="expressionUI.afterOperator === 0"
        type="button"
        (click)="onLogicOperatorButtonClicked($event, 0)">
        {{ grid.resourceStrings.igx_grid_filter_operator_and }}
    </span>

    <span igxButton [displayDensity]="displayDensity"
        tabindex="0"
        #orButton
        (keydown)="onLogicOperatorKeyDown($event, 1)"
        [selected]="expressionUI.afterOperator === 1"
        type="button"
        (click)="onLogicOperatorButtonClicked($event, 1)">
        {{ grid.resourceStrings.igx_grid_filter_operator_or }}
    </span>
</igx-buttongroup>

<div #overlayOutlet
     igxOverlayOutlet
     (pointerdown)="onOutletPointerDown($event)">
</div>