systelab-components/html/abstract-sortable-list.component.html

systelab-components is a set of components that use wide accepted and adopted standard technologies like Angular and Bootstrap, as well as other popular libraries. Please read the ATTRIBUTION.md file for a complete list of dependencies.

<div class="slab-sortable-list text-nowrap"
  (onDragEnter)="handleDragEnter($event)"
  (onDragOver)="handleDragOver($event)"
  (onDragLeave)="handleDragLeave($event)">
  <div class="slab-sortable-list-row list-group w-100" cdkDropList (cdkDropListDropped)="dropped($event)">
    @for (element of (elementsList| datafilter:secondListSearch); track element; let i = $index) {
      <div [id]="'element'+i"
        (keydown)="removeElement(element, $event)"
        tabindex="-1"
        [ngClass]="{'slab-sortable-list-row slab-sortable-list-row-selected':getSelectionFieldValue(element),'slab-sortable-list-row':!getSelectionFieldValue(element)}"
        [class.slab-sortable-list-even-row]="0 === i % 2"
        [class.slab-sortable-list-odd-row]="1 === i % 2"
        (click)="selectElement(element,$event)" (dblclick)="dbClickSelectedItem(element)" cdkDrag [cdkDragDisabled]="!dragAndDropEnabled">
        @if (showIcon) {
          <i class="mr-1 text-primary" [ngClass]="getIcon(element)"></i>
          }{{getDescription(element)}}
        </div>
      }
    </div>
  </div>