@rdkmaster/jigsaw-labs/component/transfer/transfer-list.html

Jigsaw, the next generation component set for RDK

<div class="jigsaw-transfer-head">
    <j-checkbox [checked]="_$currentPageSelectedItems && _$currentPageSelectedItems.length ? (_$currentPageSelectedItems.length == data.length ? 1 : 2) : 0"
                (checkedChange)="_$handleHeadSelect($event)" ></j-checkbox>
    <span class="jigsaw-transfer-middle-title">
        {{_$currentPageSelectedItems ? _$currentPageSelectedItems.length : 0}} / {{data ? data.length : 0}} {{'transfer.items' | translate}}</span>
    <span class="jigsaw-transfer-right-title" *ngIf="data && data.pagingInfo && data.pagingInfo.pageSize != _$infinity">
        {{'transfer.total' | translate}} {{selectedItems ? selectedItems.length : 0}} / {{data && data.pagingInfo ? data.pagingInfo.totalRecord : 0}} {{'transfer.items' | translate}}
    </span>
</div>
<div class="jigsaw-transfer-list-box" [style.height]="data && data.pagingInfo && data.pagingInfo.pageSize != _$infinity ? 'calc(100% - 60px)' : 'calc(100% - 32px)'">
    <div class="jigsaw-transfer-search-wrapper" *ngIf="searchable">
        <j-input class="jigsaw-transfer-list-search" width="100%" [(value)]="_$searchKey"
                 (valueChange)="_$handleSearching($event)" >
            <span jigsaw-prefix-icon class="fa fa-search"></span>
        </j-input>
    </div>
    <div class="jigsaw-transfer-list-wrapper"
         [perfectScrollbar]="{suppressScrollX: true, wheelSpeed: 0.5, minScrollbarLength: 20}"
         [style.max-height]="searchable ? 'calc(100% - 38px)': '100%'">
        <j-list #listGroup width="100%" [multipleSelect]="true" [trackItemBy]="trackItemBy"
                [(selectedItems)]="_$currentPageSelectedItems" (selectedItemsChange)="_$updateSelectedItemsByCurrent()" >
            <j-list-option #listItem *ngFor="let item of data; trackBy: _$trackByFn" [value]="item" [disabled]="item.disabled">
                <div j-title>
                    <j-checkbox [(checked)]="listItem.selected" [disabled]="item.disabled"
                                (checkedChange)="listGroup.update(item, $event)"></j-checkbox>
                    <span
                        class="jigsaw-transfer-middle-title">{{item && item[labelField] ? item[labelField] : item}}</span>
                </div>
                <span j-sub-title>{{item && item[subLabelField] ? item[subLabelField] : ''}}</span>
            </j-list-option>
        </j-list>
    </div>
</div>
<div class="jigsaw-transfer-foot" *ngIf="data && data.pagingInfo && data.pagingInfo.pageSize != _$infinity">
    <j-pagination [total]="data.pagingInfo.totalRecord"
                  [pageSize]="data.pagingInfo.pageSize"
                  [(current)]="data.pagingInfo.currentPage"
                  mode="simple" (currentChange)="_$updateCurrentPageSelectedItems()"></j-pagination>
</div>