<ng-container *ngIf="isCustomFilter">
  <div *ngIf="isClick == false">
    <!-- main div1 -->
    <div class="Custom_Filter_Container">
      <!-- div1 -->
      <div class=" suggest" id="">
        <div class="Custom_Filter-header">
          <span class="Custom_Filter_cancel" (click)="onCancelClick() " title="cancel" style="float:left;">
            <i class="material-icons CustomCancelIcon">close</i>
          </span>
          <div class="Custom_Filter-header-suggest">
            Custom Expression
          </div>
          <span class="Custom_Filter_cancel" title="done" (click)="onCustFiltrDone() " style="float: right; text-align: right">
            <i class="material-icons customDoneIcon">done</i>
          </span>
        </div>
      </div>
      <!-- div2 -->
      <div class="alignClass FiltrDivWidth">
        <mat-form-field class="full-width">
          <textarea matInput placeholder="Filter Name:" [(ngModel)]="filterName" maxlength="20"></textarea>
        </mat-form-field>
      </div>
      <!-- div3 -->
      <div class="Custom_filterAddConditionFlwPnl">
        <div *ngFor="let a of andOrAddArr; let i = index" class="alignClass ">
          <!-- subdiv1 -->
          <div class="inlineBlkDiv">
            <mat-form-field style="width: 100%">
              <mat-select placeholder="Field Name:" [(ngModel)]="fileldValueO[i]" (ngModelChange)="getFieldValue(i)">
                <ng-container *ngIf="!isEditJson; else simpleFieldList">
                  <mat-option *ngFor="let key of fieldDispNameMapkeys" [value]="key" [selected]="key == fileldValueO[i]">
                    <!-- editFieldNameSelectedArr[i][key] -->
                    {{displayNameMap[key]}}
                  </mat-option>
                </ng-container>
                <ng-template #simpleFieldList>
                  <mat-option *ngFor="let key of fieldDispNameMapkeys" [value]="key" [selected]="key == fileldValueO[i]">
                    {{displayNameMap[key]}}
                  </mat-option>
                </ng-template>
              </mat-select>
            </mat-form-field>
          </div><br>
          <!-- SubDiv2 -->
          <div class="inlineBlkDiv operatorClass">
            <mat-form-field style="width: 100%">
              <mat-select placeholder="Operator:" [(ngModel)]="operatorValueO[i]" (ngModelChange)="getOperatrValue(i)">
                <ng-container *ngIf="!isEditJson; else simpleOperatorList">
                  <mat-option *ngFor="let key of opratorMapkeys" [value]="key" [selected]="key == operatorValueO[i]">
                    {{key}}
                  </mat-option>
                </ng-container>
                <ng-template #simpleOperatorList>
                  <mat-option *ngFor="let key of opratorMapkeys" [value]="key" [selected]="key == operatorValueO[i]">
                    {{key}}
                  </mat-option>
                </ng-template>
              </mat-select>
            </mat-form-field>
          </div>

          <!-- subDiv3 -->
          <div class = 'promtValClass'>
            <mat-form-field style="width: 100%">
              <mat-select placeholder="Prompt/Value:" [(ngModel)]="promptValueO[i]" (ngModelChange)="selctprmtCondition(i)">
                <ng-container *ngIf="!isEditJson; else simplePromptList">
                  <mat-option *ngFor="let key of valuePromptListArr" [value]="key" [selected]="key == promptValueO[i]">
                    {{key}}
                  </mat-option>
                </ng-container>
                <ng-template #simplePromptList>
                  <mat-option *ngFor="let key of valuePromptListArr" [value]="key" [selected]="key == promptValueO[i]">
                    {{key}}
                  </mat-option>
                </ng-template>
              </mat-select>
            </mat-form-field>
            </div>
            
            <div class="selectionDiv">
              <ng-container *ngIf="!promptSelField[i] && operatorNameArrLst[i] == 'BETWEEN'  && isDateArr[i]==false; else btwnWithDate">
                <mat-form-field class="MatInputWidth">
                  <input matInput placeholder="From:" [(ngModel)]="filterBtwntextValueFrm[i]" (ngModelChange)="getBtwnTextValue(i)" class="DUMMY">
                </mat-form-field>
                <mat-form-field class="MatInputWidth SecondBtnField">
                  <input matInput placeholder="To:" [(ngModel)]="filterBtwntextValueTo[i]" (ngModelChange)="getBtwnTextValue(i)" class=" Dummy">
                </mat-form-field>
              </ng-container>
            </div>
            <ng-template #btwnWithDate>
              <ng-container *ngIf="!promptSelField[i] && operatorNameArrLst[i] == 'BETWEEN'  && isDateArr[i]==true; else SimpleWithNoDate">
                <mat-form-field class="searchDate1">
                  <input matInput placeholder="From:" [matDatepicker]="picker1" [(ngModel)]="filterBtwntextValueFrm[i]" (ngModelChange)="getBtwnTextValue(i)" class="mat-input-element">
                  <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
                  <mat-datepicker #picker1></mat-datepicker>
                </mat-form-field>
                <mat-form-field class="searchDate1 SecondBtnField">
                  <input matInput placeholder="To:" [matDatepicker]="picker2" [(ngModel)]="filterBtwntextValueTo[i]" (ngModelChange)="getBtwnTextValue(i)" class="mat-input-element">
                  <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
                  <mat-datepicker #picker2></mat-datepicker>
                </mat-form-field>
              </ng-container>
            </ng-template>

            <ng-template #SimpleWithNoDate>
              <ng-container *ngIf="!promptSelField[i] && operatorNameArrLst[i] != 'BETWEEN' && isDateArr[i]==false; else SimpleWithDate">
                <mat-form-field class="MatInputWidth">
                  <input matInput placeholder="{{displayNameMap[fileldValueO[i]]}}" [value]="filtertextValue[i]" [(ngModel)]="filtertextValue[i]" (ngModelChange)="getTextValue(i)" class="DUMMY">
                </mat-form-field>
              </ng-container>
            </ng-template>

            <ng-template #SimpleWithDate>
              <ng-container *ngIf="!promptSelField[i] && operatorNameArrLst[i] != 'BETWEEN' && isDateArr[i] == true">
                <mat-form-field class="searchDate1">
                  <!-- <mat-lable>{{field}}</mat-lable> //removed by Sainath T. [angular 9 migration]-->
                  <input matInput placeholder="{{displayNameMap[fileldValueO[i]]}}" [matDatepicker]="picker3" [(ngModel)]="filtertextValue[i]" (ngModelChange)="getTextValue(i)" class="mat-input-element">
                  <mat-datepicker-toggle matSuffix [for]="picker3"></mat-datepicker-toggle>
                  <mat-datepicker #picker3></mat-datepicker>
                </mat-form-field>
              </ng-container>
            </ng-template>
          <br>
          <!-- SubDiv4 -->
          <div class="inlineBlkDiv1 searchDate1">
            <mat-form-field style="width: 100%">
              <mat-select placeholder="Operand:" [(ngModel)]="andOrValueO[i]" (ngModelChange)="onSelectAndOR(i)">
                <ng-container *ngIf="!isEditJson; else simpleAndOrList">
                  <mat-option *ngFor="let key of listBoxOperand" [value]="key" [selected]="key == andOrValueO[i]">
                    {{key}}
                  </mat-option>
                </ng-container>
                <ng-template #simpleAndOrList>
                  <mat-option *ngFor="let key of listBoxOperand" [value]="key" [selected]="key == andOrValueO[i]">
                    {{key}}
                  </mat-option>
                </ng-template>
              </mat-select>
            </mat-form-field>
          </div>
        </div>
      </div>
      <!-- Div4 -->
      <div class="FiltrDivWidth">
        <div *ngIf="isRemoveBtnVisible" class="filterRemoveBtnLbl" title="Remove" (click)="removeFilter()">Remove</div>
      </div>
    </div>
  </div>
</ng-container>