<div *ngIf="selectedList.length < 2" class="cont-lib-header-cont" [style.display]="!isSearchHeader ? 'block' : 'none'">
	<div class = "select-bb-option" >
		 <!--  <mat-form-field class="sel-form-field">
			  <mat-select [(ngModel)]="selectedChipList" #selectOpt  placeholder="Select"  multiple>
			     <mat-option  class = "bb-option-descr"   #opt *ngFor="let docRef of references" (click)="optSelected(docRef.refSer);" [value]="docRef.refSer">{{docRef.refSerDescr | lowercase}} </mat-option>
			     <mat-option   class = "bb-option-descr"   [value]="'ALL'" (click)="deselect();">Show All</mat-option>
			  </mat-select>
		  </mat-form-field> -->
	
			  <mat-form-field class="sel-form-field" >
				  <mat-select   #select  [(ngModel)]="selectedChipList" #selectOpt  placeholder="Select"  multiple>
				     <mat-option  class = "bb-option-descr"   #opt *ngFor="let docRef of references" (click)="optSelected(docRef.refSer);" [value]="docRef.refSer">{{docRef.refSerDescr | lowercase}} </mat-option>
				     <mat-option   class = "bb-option-descr"   [value]="'ALL'" (click)="deselect();">Show All</mat-option>
				  </mat-select>
			  </mat-form-field>
		  
		 <button  ngClass="menu-filter-item-button" type="button" mat-button (click)="select.open()">
			  <span class="menu-filter-item-title">Select</span>
			  <!-- <mat-icon class = "arrow-down">keyboard_arrow_down</mat-icon> -->
			  <span class="visioniconnav-down  arrow-down "></span>
		 </button>
		 <!--  	<bb-select  #selectOpt placeholder="Select" [(ngModel)]="selectedChipList" [multiple]="true"   [ngModelOptions]="{standalone: true}">
				      				<bb-option #opt  *ngFor="let docRef of references" (bbClick)="optSelected(docRef.refSer);"  value="docRef.refSer">{{docRef.refSerDescr}} </bb-option>
				      				<bb-option value="'ALL'" (bbClick)="deselect();" >Show All</bb-option>
			</bb-select>
		   -->
		
	</div>
	<div class = "selected-chip-list">
		<mat-chip-list>
		    <mat-chip  *ngFor="let selected of selectedChipList" [ngStyle]="{'border': chipColor}" [color]="color"  class ="display-chip" >
		          {{getRefSerDesc(selected)}} 
		    <i class="material-icons closeChip" [ngStyle]="{'color': themeColor}" (click)="removeFromList(selected); " >clear</i>
		    </mat-chip>
		</mat-chip-list>
    </div>
	
	<div class = "bb-select-search">	
	
		<!-- Added by Chitranga Tandel for filtering -->
<!-- 		<button mat-icon-button class="filter-by-button"   cdk-overlay-origin #groupByOverlay="cdkOverlayOrigin" (click)="isMenuOpen = !isMenuOpen">   -->
<!--  			 <img src="{{ASSET_IMG_URL}}/svg/filter.svg" height="20" width="20"> -->
<!--  	    </button>	   -->
			 
<!-- 		<ng-template cdk-connected-overlay [origin]="groupByOverlay" [width]="200"  [open]="isMenuOpen">
			<span *ngIf="groupByView == 'documentMenu'">
				<ng-container *ngTemplateOutlet="documentMenu">
				</ng-container>
			</span>
			
			<span *ngIf="groupByView == 'refSerMenu'">
				<ng-container *ngTemplateOutlet="refSerMenu" >
				</ng-container>
			</span>
		</ng-template>
		
		
		<ng-template #documentMenu >
				<div class="overlayMenu">
				
				<div class = "overlay-menu"> 
					<span class="overlay-head-doc">Document</span>
					<i class="material-icons navigate-next" (click)="groupByView = 'refSerMenu'" >navigate_next</i>
				</div>
				
				<div class="checkBox">
					<mat-checkbox  [(ngModel)]="checked5"  class="filter-option">e-Appraisal</mat-checkbox><br>
					<mat-checkbox  [(ngModel)]="checked6"  class="filter-option">other</mat-checkbox><br>
					<mat-checkbox [(ngModel)]="checked8" class="filter-option">Show All</mat-checkbox>
				</div>	
					
				</div>
		</ng-template>
		
		<ng-template #refSerMenu >
			<div class="overlayMenu"  style="background: #fff;"  >
			
			<div class = "overlay-menu">
				<i class="material-icons navigate-before" (click)="groupByView = 'documentMenu'">navigate_before</i> 
				<span class="overlay-head-ref">Ref Series</span>
			</div>
			
			<div class="checkBox" >
			    <mat-checkbox  *ngFor="let docRef of groupByDocRef; let i = index" (change) = "select(docRef.key)"  class="filter-option">{{refSerList[docRef.key]}}</mat-checkbox><br>
				<mat-checkbox [(ngModel)]="checked8" class="filter-option">Show All</mat-checkbox>
			</div>
				
			</div>
		</ng-template> -->
	    
		<!-- Ended by Chitranga Tandel -->	 
			 			
		<button mat-icon-button class="sort-by-button" [matMenuTriggerFor]="sortByMenu">
<!-- 	 		<img src="{{ASSET_IMG_URL}}/svg/sort.svg" height="18" width="18"> -->
				<span class="icon-sort visioniconsort" style="height: 18px;width: 18px;font-size: 15px;"  ></span>
		</button>			
		
		<span class="pin">
			<content-pin [pinType]="'HEADER'" [hostUrl]="hostUrl" ></content-pin>
		</span>
	
		<span class ="search-bar">
		<!-- 	<img src="{{ASSET_IMG_URL}}/search.png" height="30" width="30" (click)="showSearch(); isSearchHeader = true;">  -->
			  <span class="icon-search visioniconsearch" (click)="showSearch(); isSearchHeader = true;" ></span>	
	    </span>
	</div>
</div>

<div *ngIf="selectedList.length > 1">
	<div class = "total-selected-sect">
		{{selectedList.length}} files selected
	</div>
	
	<div class = "icons-sect">
		<span class="view-icon" (click)="viewDocument();">
			<img class="view-img" src="{{ASSET_IMG_URL}}/svg/view.svg">
			<span class="view-title">View</span>
	    </span>
	   <span class="share-icon" (click)="shareContents();">
			<img class="share-img" src="{{ASSET_IMG_URL}}/svg/share.svg">
	    	<span class="share-title">Share</span>
	    </span>
	</div>
	
</div>
	
<div [style.display]="isSearchHeader ? 'block' : 'none'">
	 <div role="dialog" class="search-section">
		 <span style="float:left;">
			<button mat-button class="square-button" (click)="onCancel();isSearchHeader = false;" >
			 <!--  <i class="material-icons back-search">keyboard_backspace</i>    -->	
			 	<span class="visioniconarrow-left back-search"></span>
			</button>
		 </span>
<!-- 	      <mat-input-container floatPlaceholder="never" class="search-full-width"> -->
<!-- 			    <input #myInput type="tel" matInput placeholder="Search " (keyup.enter)="onEnter(myInput.value)"   value="" name="search" id="search" > -->
<!-- 			    <i matSuffix class="material-icons search-icon" (click)="isSearchHeader = false;">search</i> -->
<!-- 		  </mat-input-container>	 -->
			
			<div class="search-full-width">
<!--
			  <input #myInput (keyup.enter)="onEnter(myInput.value)" class="clm-search-inp-field" [(ngModel)]="searchVal" placeholder="Search">
			  <button (click)="onEnter(myInput.value);" class="clm-search-bn ">
			  	<span class="visioniconsearch"></span>
			  </button>
-->
			   <mat-chip-list #chipList>
                <mat-chip *ngFor="let chip of searchChips" (removed)="removeSearchCip(chip)">
                  {{chip}}
                  <mat-icon matChipRemove>cancel</mat-icon>
                </mat-chip>
        
    			<input [matChipInputFor]="chipList" #myInput (keyup.enter)="onEnter(myInput.value)" class="clm-search-inp-field" [(ngModel)]="searchVal" placeholder="Search (For tags use #)">
    			<button (click)="onEnter(myInput.value);" class="clm-search-bn ">
    			  	<span class="visioniconsearch"></span>
    			</button>
              </mat-chip-list>

<!-- 			  <button *ngIf="myInput.value" (click)="onEnter('');myInput.value='';" class="clm-cncl-btn">x</button> -->
			</div>
<!--			
			<ul class="tag-list" *ngIf="tagArray">
			  <li *ngFor="let tag of tagArray | filterBy:myInput.value" >
			    <div (click)="setValue(tag)" class="tag-list_detail">
			      <span>{{tag}}</span>
			    </div>
			  </li>
			</ul>
-->			
			<div class="tag-list" *ngIf="tagArray">
			  <span class="tag-list_detail" (click)="setValue(tag)" *ngFor="let tag of tagArray | filterBy:searchVal as result" >
			    {{tag}}
			  </span>
			</div>
	 </div>
</div>


<mat-menu #sortByMenu="matMenu" xPosition="before">
	  <button mat-menu-item (click)="sortBy('recent')">
	    <span>Recently Used</span>
	  </button>
	  <button mat-menu-item (click)="sortBy('frequent')">
	    <span>Fequently Used</span>
	  </button>
</mat-menu>

<!--  <mat-menu #filterByMenu="matMenu" xPosition="after">
    <span class = "flter-menu">Ref Series </span>
	<mat-checkbox *ngFor="let docRef of docReferences; let i = index" [(ngModel)]="checked" (change)="changeFilter(docRef.refSer, checked);" class="filter-option">{{docRef.refSerDescr}}</mat-checkbox>
	<mat-checkbox (change)="changeFilter('showall',checked);" [(ngModel)]="checked" class="filter-option">Show All</mat-checkbox>
</mat-menu> -->

<!-- <mat-menu #filterByMenu="matMenu" xPosition="after">
    <div class = "flter-menu"> <i class="material-icons">navigate_before</i> <a>Document  </a><i class="material-icons">navigate_next</i></div>
	<mat-checkbox *ngFor="let docRef of docReferences; let i = index" [(ngModel)]="checked" (change)="changeFilter(docRef.refSer, checked);" class="filter-option">{{docRef.refSer}}</mat-checkbox>
	<mat-checkbox (change)="changeFilter('showall',checked);" [(ngModel)]="checked" class="filter-option">Show All</mat-checkbox>
</mat-menu> -->
