<div #anchor class="filter">
  <div *ngIf="singleMode" class="single">
  <kendo-dropdownbutton *ngIf="showOperatorChoice" class="thin"
                        [data]="availableOperators" textField="op" look="bare"
                        (itemClick)="onOperatorClick($event)">
    {{operator.op}}
    <ng-template kendoDropDownButtonItemTemplate let-dataItem>
      <span>{{ dataItem.op }}</span>&nbsp;
      <span>{{ dataItem.description }}</span>
    </ng-template>
  </kendo-dropdownbutton>
    <kendo-textbox #single class="full" [ngClass]="{'with-padding': showOperatorChoice}"
                    [(ngModel)]="valueFrom" (valueChange)="onChangeFrom($event)"
                    [ngModelOptions]="{standalone: true}"
                    [showErrorIcon]="!valueFromValid"
                    [required]="required"
                    format="{0:c}"
                    (inputFocus)="onFromTouched()"
    ></kendo-textbox>
  </div>


  <div *ngIf="!singleMode" class="multiple"  >
    <kendo-textbox  #rangeFrom class="first-half"
                    [required]="required"
                    [showErrorIcon]="!valueFromValid"
                    [ngModelOptions]="{standalone: true}"
                    (inputFocus)="onFromTouched()"
                    [(ngModel)]="valueFrom" (valueChange)="onChangeFrom($event)">

    </kendo-textbox>
    <kendo-dropdownbutton   class="minimum"
                            [data]="availableOperators" textField="op"
                            look="bare" (itemClick)="onOperatorClick($event)">
      {{operator.op}}
      <ng-template kendoDropDownButtonItemTemplate let-dataItem>
        <span>{{ dataItem.op }}</span>
        <span>{{ dataItem.description }}</span>
      </ng-template>

    </kendo-dropdownbutton>
    <kendo-textbox #rangeTo class="second-half"
                    [required]="required"
                    [showErrorIcon]="!valueToValid"
                    [(ngModel)]="valueTo"
                    (inputFocus)="onToTouched()"
                    [ngModelOptions]="{standalone: true}"
                    (valueChange)="onChangeTo($event)"></kendo-textbox>
  </div>
</div>

<kendo-popup  [anchor]="anchor"  (anchorViewportLeave)="showError = false"  *ngIf="showError" >
  <div class="content popup-content">
    {{errorMessage}}
  </div>
</kendo-popup>
