lems-select.component.html 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839
  1. <ng-container *ngIf="lemsTypes.length > 0">
  2. <ng-select
  3. [items]="lemsTypes"
  4. [multiple]="true"
  5. [closeOnSelect]="false"
  6. [searchable]="false"
  7. [placeholder]="'selectLemsItems' | translate"
  8. [(ngModel)]="selectedLemTypes"
  9. [disabled]="lemsTypes.length === 0"
  10. groupBy="group"
  11. (change)="updateSelectedLemTypes($event)">
  12. <ng-template ng-header-tmp>
  13. <div class="lem-select-toolbar">
  14. <div class="w-100 text-dark select-all-btn">
  15. <input id="select-all" type="checkbox" class="mr-2" (click)="toggleSelection()"
  16. [checked]="selectedLemTypes?.length === lemsTypes.length"/>
  17. <label for="select-all" class="m-0">{{ 'selectLemsAll' | translate }}</label>
  18. </div>
  19. </div>
  20. </ng-template>
  21. <ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index" let-search="searchTerm">
  22. <input id="item-{{index}}" type="checkbox" [ngModel]="item$.selected"/>
  23. <evt-icon [iconInfo]="iconColor" [style.color]="item.color"></evt-icon>
  24. <span class="ng-value-label">{{item.label | translate}}</span>
  25. </ng-template>
  26. <ng-template ng-multi-label-tmp let-items="items" let-clear="clear">
  27. <ng-container *ngIf="items.length === 1">
  28. <div class="ng-value" *ngFor="let item of items | slice:0:1">
  29. <evt-icon [iconInfo]="iconColor" [style.color]="item.color"></evt-icon>
  30. <span class="ng-value-label">{{item.label}}</span>
  31. <span class="ng-value-icon right" (click)="clear(item)" aria-hidden="true">×</span>
  32. </div>
  33. </ng-container>
  34. <div class="ng-value" *ngIf="items.length > 1">
  35. <span class="ng-value-label">{{items.length}} {{'selected' | translate}}</span>
  36. </div>
  37. </ng-template>
  38. </ng-select>
  39. </ng-container>