| <div class="cuppa-dropdown" (clickOutside)="closeDropdown()"> |
| <div class="selected-list"> |
| <div class="c-btn" (click)="toggleDropdown($event)"> |
| <span *ngIf="selectedItems?.length == 0">{{settings.text}}</span> |
| <span *ngIf="settings.singleSelection"> |
| <span *ngFor="let item of selectedItems;trackBy: trackByFn;"> |
| {{item.itemName}} |
| </span> |
| </span> |
| <div class="c-list" *ngIf="selectedItems?.length > 0 && !settings.singleSelection"> |
| <div class="c-token" *ngFor="let item of selectedItems;trackBy: trackByFn;let k = index" [hidden]="k > settings.badgeShowLimit-1"> |
| <span class="c-label">{{item.itemName}}</span> |
| <span class="fa fa-remove" (click)="onItemClick(item)"></span> |
| </div> |
| </div> |
| <span class="amuount" *ngIf="selectedItems?.length > settings.badgeShowLimit">+{{selectedItems?.length - settings.badgeShowLimit }}</span> |
| <span class="fa" [ngClass]="{'fa-angle-down': !isActive,'fa-angle-up':isActive}"></span> |
| </div> |
| </div> |
| <div class="dropdown-list" [hidden]="!isActive"> |
| <div class="arrow-up"></div> |
| <div class="list-area"> |
| <div class="pure-checkbox select-all" *ngIf="settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection" (click)="toggleSelectAll()"> |
| <input type="checkbox" [checked]="isSelectAll" [disabled]="settings.limitSelection == selectedItems?.length"/> |
| <label> |
| <span [hidden]="isSelectAll">{{settings.selectAllText}}</span> |
| <span [hidden]="!isSelectAll">{{settings.unSelectAllText}}</span> |
| </label> |
| </div> |
| <div class="list-filter" *ngIf="settings.enableSearchFilter"> |
| <span class="fa fa-search"></span> |
| <input type="text" placeholder="Search" [(ngModel)]="filter.itemName"> |
| </div> |
| <ul [style.maxHeight] = "settings.maxHeight+'px'"> |
| <li *ngFor="let item of data | listFilter:filter; let i = index;" (click)="onItemClick(item,i)" class="pure-checkbox"> |
| <input type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/> |
| <label>{{item.itemName}}</label> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |