pm-controls

Version:
ProModel Controls
59 lines (53 loc) • 2.39 kB
HTML
<div class="virtual-panel-container"
     [style.max-height]="ControlHeight"
     [style.height]="ActualControlHeight"
     mouseWheel 
     (mouseWheelUp)="mouseWheelUp($event)" 
     (mouseWheelDown)="mouseWheelDown($event)">
    <div class="virtual-item-container"                     
        #virtualItemContainer>
        <div [style.height.px]="HeightPx">
            <div *ngFor="let item of VisibleItems"
                [style.top.px]="item._top"
                [style.height.px]="item._itemHeight"
                (click)="SelectItem(item)" 
                class="{{GetItemClass(item)}} {{IsItemSelected(item)}}">
                <ng-container *ngTemplateOutlet="ItemTemplate || defaultTemplate; context: {$implicit: item}" ></ng-container>

                <div *ngIf="ShowHighlight == true">
                    <div class="{{ItemHighlightClass}}" *ngIf="isHighlight(item)"></div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="item-vertical-shim" *ngIf="ShowVerticalScrollbar">
        <div class="grid-table-top-right-corner">
            <div class="grid-table-top-right-inner-corner"></div>
        </div>
    </div>

    <div class="item-horizontal-shim" *ngIf="ShowHorizontalScrollbar">
        <div class="grid-table-bottom-left-corner">
            <div class="grid-table-bottom-left-inner-corner"></div>
        </div>
        <div class="grid-table-bottom-right-corner">
            <div class="grid-table-bottom-right-inner-corner"></div>
        </div>
    </div>

    <div class="item-scrollbar-vertical-container"
        #itemScrollbarVerticalContainer
        (scroll)="onVerticalScroll($event)"
        [style.bottom.px]="ShowHorizontalScrollbar ? 18 : 0"
        *ngIf="ShowVerticalScrollbar">
        <div class="grid-table-scrollbar-vertical"
            [style.height.px]="HeightPx"></div>
    </div>

    <div class="item-scrollbar-horizontal-container"
        #itemScrollbarHorizontalContainer
        *ngIf="ShowHorizontalScrollbar"        
        (scroll)="onHorizontalScroll($event)">
        <div class="grid-table-scrollbar-horizontal"
             [style.width.px]="WidthPx"></div>
    </div>
</div>

<ng-template #defaultTemplate let-item>
    <div class="item-template" [innerHTML]="getItemDisplay(item) | highlight : Text"></div>
</ng-template>