Docs for m2-core, m2-components
  1. Components
  2. SdiListComponent

File

projects/m2-core/src/lib/shared/ui-components/sdi-list.component.ts

Implements

OnInit

Metadata

selector sdi-list
template 
<ul #listRef class="sdi-menu-list no-wrap" tabindex="-1" [class.no-padding]="resetItemPadding" [style.max-height]="listMaxHeight"
        (keydown)="handleKeyDownEvent($event)" (blur)="onListBlur()"
        (mouseup)="focusList()" (mouseleave)="onListMouseLeave()">
    <input #searchInput class="sdi-hide" tabindex="-1" [readonly]="!keyboardFiltering" [(ngModel)]="searchQuery"
           (keyup.escape)="resetKeyboardSearch()">
    <li #listItemRef *ngFor="let listItem of items | filter:searchQuery:nameProperty:auxSearchProp:highlightOnly; let idx = index; let isLast = last; trackBy: trackByFn"
        [class.sdi-hidden]="listItem.isHidden" [class.items-separator]="listItem.isSeparator"
        [class.marked]="listItem.isMarked" [class.focused]="isFocused(listItem)" [class.is-active]="isSelected(listItem)"
        [ngClass]="listItem.styleClasses"
        (mouseenter)="onItemMouseEnter(listItem, idx)"
        (mouseleave)="onItemMouseLeave()"
        (mouseup)="onItemMouseUp($event)"
        (click)="selectItem(listItem, idx)"
        (contextmenu)="onItemRightClick($event, listItem)">

        <ng-container *ngIf="!listItemTemplate">
            <span *ngIf="!listItem.isSeparator; else separatorRef" [title]="listItem.valueTitle || listItem[nameProperty]"
                  [innerHTML]="listItem.$$highlighted ? listItem.$$highlighted : (listItem[nameProperty] | noName)">
            </span>
            <ng-template #separatorRef>
                <div class="options-group-header overflow-ellipsis" [class.labeled]="listItem.label">
                    {{listItem.label}}
                </div>
            </ng-template>
        </ng-container>

        <ng-template [ngTemplateOutlet]="listItemTemplate"
                     [ngTemplateOutletContext]="{ $implicit: listItem, index: idx, isLast: isLast }">
        </ng-template>
    </li>
</ul>

Index

Properties
Methods
Inputs
Outputs
Accessors

Inputs

auxSearchProp
Type : string
externalInput
Type : boolean
Default value : false
focused
Type : boolean
Default value : true
focusSelected
Type : boolean
Default value : false
highlightOnly
Type : boolean
Default value : false
highlightSelected
Type : boolean
Default value : false
items
Type : []
keyboardFiltering
Type : boolean
Default value : false
listItemTemplate
Type : TemplateRef<any>
listMaxHeight
Type : string
Default value : '500px'
nameProperty
Type : string
Default value : 'displayName'
preventScrollIntoView
Type : boolean
Default value : false
resetItemPadding
Type : boolean
searchQuery
Type : string
trackByFn
Type : function

Outputs

itemRightClick
Type : EventEmitter
selected
Type : EventEmitter

Methods

Public activateItemAt
activateItemAt(index: number)
Parameters :
Name Type Optional
index number No
Returns : void
Public focusList
focusList()
Returns : void
Public handleKeyDownEvent
handleKeyDownEvent(event: KeyboardEvent)

Returns TRUE if ENTER key event is skipped

Parameters :
Name Type Optional
event KeyboardEvent No
Returns : boolean | void
isFocused
isFocused(item: any)
Parameters :
Name Type Optional
item any No
Returns : boolean
isItemVisible
isItemVisible(item: any)
Parameters :
Name Type Optional
item any No
Returns : boolean
isSelected
isSelected(item: any)
Parameters :
Name Type Optional
item any No
Returns : boolean
ngOnInit
ngOnInit()
Returns : void
onItemMouseEnter
onItemMouseEnter(item: any, index: number)
Parameters :
Name Type Optional
item any No
index number No
Returns : void
onItemMouseLeave
onItemMouseLeave()
Returns : void
onItemMouseUp
onItemMouseUp(event: MouseEvent)
Parameters :
Name Type Optional
event MouseEvent No
Returns : void
onItemRightClick
onItemRightClick(event: MouseEvent, item: any)
Parameters :
Name Type Optional
event MouseEvent No
item any No
Returns : void
onListBlur
onListBlur()
Returns : void
onListMouseLeave
onListMouseLeave()
Returns : void
Public resetKeyboardSearch
resetKeyboardSearch()
Returns : void
selectItem
selectItem(item: any, index: number)
Parameters :
Name Type Optional
item any No
index number No
Returns : void

Properties

_items
Type : any[]
_selectedItem
Type : any
itemsRef
Type : QueryList<ElementRef>
Decorators :
@ViewChildren('listItemRef')
listRef
Type : ElementRef
Decorators :
@ViewChild('listRef')
searchInput
Type : ElementRef
Decorators :
@ViewChild('searchInput')

Accessors

items
getitems()
setitems(value: any[])
Parameters :
Name Type Optional
value any[] No
Returns : void
filteredCount
getfilteredCount()
selectedItem
setselectedItem(value: any)
Parameters :
Name Type Optional
value any No
Returns : void
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""