| <!-- |
| ****************************************************************************** |
| * Copyright © 2017-2018 PTA GmbH. |
| * All rights reserved. This program and the accompanying materials |
| * are made available under the terms of the Eclipse Public License v1.0 |
| * which accompanies this distribution, and is available at |
| * |
| * http://www.eclipse.org/legal/epl-v10.html |
| * |
| ****************************************************************************** |
| --> |
| |
| <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> |