kalidea/kaligraphi

<h1>List</h1>

<div class="example">

  <article>

    <kal-list
      tabindex="1"
      [icon]="icon"
      [selection]="listSelection"
      [dataSource]="dataSource"
      [groupByFunction]="groupByFunction"
      [disableRowsFunction]="disableRowsFunction"
      [selectionMode]="selectionMode"
      [virtualScrollConfig]="virtualScrollConfig"
      [selectRowOnContentClick]="selectRowOnContentClick"
      [class.has-selected-element]="listSelection && listSelection.total > 0"
      (selectionChange)="selectRow($event)"
      (highlighted)="highlightItem($event)">

      <ng-template kalListItem let-item="item">
        {{ item.name }}
      </ng-template>

    </kal-list>

    <div class="technical-value">
      <div class="technical-value__item">
        <span>Selected value</span>
        <span>{{ listSelection.format() | json }}</span>
      </div>

      <div class="technical-value__item">
        <span>highlighted value</span>
        <span>{{ highlightedItem | json }}</span>
      </div>
    </div>

  </article>

</div>

<div class="configurator">

  <kal-button type="button" kalTheme="secondary" (click)="addGroupByFunction()">Group items</kal-button>
  <kal-button type="button" kalTheme="secondary" (click)="disableRow()">Disable rows</kal-button>
  <kal-button type="button" kalTheme="secondary" (click)="unselectRows()">Unselectable rows</kal-button>
  <kal-button type="button" kalTheme="secondary" (click)="selectSingleRow()">Single selectable row</kal-button>
  <kal-button type="button" kalTheme="secondary" (click)="selectMultipleRows()">Multiple selectable rows</kal-button>
  <kal-button type="button" kalTheme="secondary" (click)="selectAll()">Select All rows</kal-button>
  <kal-button type="button" kalTheme="secondary" (click)="changeSelection()">Select first item</kal-button>
  <kal-button type="button" kalTheme="secondary" (click)="changeDataSource()">Change DataSource</kal-button>
  <kal-button type="button" kalTheme="secondary" (click)="selectRowOnContentClick = !selectRowOnContentClick">Select row
    on content click
  </kal-button>

</div>