
<div *ngIf = 'filterInfo'>
	<div *ngIf = " filterType == '1' && help_option == '2'"  class="filterType1">
		<!--<label class="filterLabel"> {{filterDescr}} </label>-->
		<bb-autosuggest class="ang-filter-input"
						[(ngModel)]="filterValue"
						[uxDesign] = "'UX3'"
						[dataSource]= "dataSource"
						[chipEnable] = "false"
						[chipValue] = "filterValue"
						[placeholder] = "filterDescr"
						[minlength]="auto_fill_len"
						[refId]="refId"
						[isPophelp]="true"
						[required]="filterMandatory"
						(onSelectionChange)="changeSelection($event);"
						(onChangeValue) = "onChangeValue($event)">
		</bb-autosuggest>
		
		<i *ngIf="isPopHelp" (click)="openPophelp();" class="material-icons ang-pophelp-icon">&#xE315;</i>
	</div>
	
	<div *ngIf = " filterType == '1' && help_option != '2' && !hidden"   class="filterType1">
		<!--<label class="filterLabel"> {{filterDescr}} </label>-->
		<bb-textbox  *ngIf = "multi_opt != '1'"
					 class="batteryStatus" 
				    [(ngModel)]="filterValue"
				    [value]="filterValue"
					[placeholder]="filterDescr" 
					[uxDesign]="'UX3'" 
					[required]="filterMandatory"
					[readOnly]="readOnly"					
					name="{{filterName}}"
					id="{{filterId}}"
					(change) = "changeValue();">
		</bb-textbox>

		<bb-chip-input  *ngIf = "multi_opt == '1'" 
					class="chipField" 
					[(ngModel)]="filterValue" 
					[placeholder]="filterDescr" 
					[required]="filterMandatory" 
					(dataChange) = "changeChipValue($event);"
					[dataList]="chipData">						
		</bb-chip-input>  

		<i *ngIf="isPopHelp" (click)="openPophelp();" class="material-icons ang-pophelp-icon">&#xE315;</i>
	</div>
	
	<div *ngIf = " filterType == '1' && help_option != '2' && hidden"  class="filterType1">
		<input type="hidden" [(ngModel)]="filterValue" [value]="filterValue">
	</div>
	
	<div *ngIf = " filterType == '2' "  class="filterType2">
		<span class="filterName">{{filterDescr}}</span>
		<bb-checkbox  style="padding-bottom: 6px;" *ngIf="filterValues.selectAll=='true'" [(ngModel)]="filterValue" [value]="filterValues.item[1].data" (bbChange)="selectAll(filterValues.item);">All</bb-checkbox>

		<bb-checkbox  [checked]="isAllSelected" [disabled]="disabled" style="padding-bottom: 6px;" *ngFor="let values of filterValues.item" [(ngModel)]="filterValue" [value]="values.data" (bbChange)="changeMultipleValue(values.data);">{{values.display}}</bb-checkbox>
	
	</div>
	
	<div *ngIf = " filterType == '3' "  class="filterType3">
		<span class="filterName">{{filterDescr}}</span>
		<bb-radio-group required name="" [(ngModel)]="filterValue">
			<bb-radio-button style="padding-bottom: 6px; display: grid;"  *ngFor="let values of filterValues.item" [value]="values.data" (change)="changeSingleValues(values.data);" [labelPosition]="'after'">{{values.display}}</bb-radio-button>
		</bb-radio-group>
	</div>
		
	<div *ngIf = " filterType == '4'"  class="filterType4">
		<!--<label class="filterLabel"> {{filterDescr}} </label>-->
			<mat-form-field class="datePicker">
				<span *ngIf = " filterName == 'fromDate' ">
					  <input matInput  
						  	 [(ngModel)]="filterValue"
						  	 [value]="filterValue"
						  	 [max]="toDate" 
							 [matDatepicker]="datePicker" 
							 (dateChange)="changeDate($event);" 
							 [placeholder]="filterDescr" 
							 [required]="filterMandatory"
							 name="{{filterName}}" 
							 id="{{filterId}}" >
		        </span>
				<span *ngIf = " filterName == 'toDate' ">
					  <input matInput  
						     [(ngModel)]="filterValue" 
						     [value]="filterValue"
						     [max]="maxDate" 
						     [min]="fromDate"
						     [required]="filterMandatory"
							 [matDatepicker]="datePicker" 
							 (dateChange)="changeDate($event);" 
							 [placeholder]="filterDescr" 
							 name="{{filterName}}" 
							 id="{{filterId}}" >
				</span>
				<span *ngIf = " filterName != 'toDate' && filterName != 'fromDate' ">
				  <input matInput  [(ngModel)]="filterValue"
				  	[value]="filterValue"
					[matDatepicker]="datePicker" 
					(dateChange)="changeDate($event);" 
					[placeholder]="filterDescr" 
					[required]="filterMandatory"
					name="{{filterName}}" 
					id="{{filterId}}" >
				</span>
			    <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
			    <mat-datepicker #datePicker></mat-datepicker>
			</mat-form-field>
	</div>
	<div #monthPickerEl class="date-picker" *ngIf="filterType == '5'">
		<span class="desc">{{filterDescr}}</span>
		<bb-month-picker [value]="filterValue" (changeMonth)="changeMonthValues($event);" (opened)="openCalender($event)"></bb-month-picker>
	</div>
	<div class="date-picker" *ngIf="filterType == '6'">
		<span class="desc">{{filterDescr}}</span>
		<bb-year-picker [value]="filterValue" (changeYear)="changeYearValues($event);" (opened)="openCalender($event)"></bb-year-picker>
	</div>
	<div *ngIf = " filterType == '7' "  >
	    <site-picker [filterInfo]="filterInfo" [filterExprInput]="filterExprInput"  (populateData)="changeSiteValue($event);"></site-picker>
	</div>
</div>


<ng-template #portal>
	 <div role="dialog" class="ang-pophelp-panel">
		<ang-pophelp [dataSource]="dataSource"
		             [filterName]="filterName"
					 [multi_opt]="multi_opt"
					 [filterValue]="filterValue"
					 [refId]="refId"
					 [layout]="layout"
					 [filterExprInput]="filterExprInput"
					 (onClose)="closePohelp();"
					 (onSelect)="setValue($event);">
		 </ang-pophelp>
	 </div>
</ng-template>





