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

File

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

Implements

OnInit

Metadata

selector options-list
styles .options-menu { min-height: 1.8em; } .options-menu.visible-search-input { min-height: 3.8em; } .modal-window-search-wrapper { position: relative; padding: 0 .5em; margin: .3em 0; } .modal-window-search-wrapper > .fa-search { padding: .35em .65em; } .options-menu > .nothing-to-display-label { position: absolute; left: 0; bottom: 0; z-index: -1; } .options-wrapper { max-width: 400px; white-space: nowrap; background-color: #FFF; }
template 
<div class="options-menu" [class.visible-search-input]="searchInputVisible">
    <div *ngIf="searchInputVisible" class="modal-window-search-wrapper" [class.extended-enabled]="openExtendedClickFn != null">
        <i class="fa fa-search sdi-icon info"></i>

        <input #searchInput [(ngModel)]="searchQuery" type="text" class="modal-window-search-input"
               placeholder="{{placeholder}}"
               (click)="onSearchInputClick($event)" (input)="onSearchInput()"
               (keydown)="onSearchInputKeyDown($event)" (keyup.escape)="resetKeyboardSearch()">

        <i *ngIf="openExtendedClickFn" class="fa fa-sliders sdi-icon" i18n-title="@@configureCriteriaTitle" title="Настроить критерии"
           (click)="openExtendedClickFn()">
        </i>
    </div>

    <span *ngIf="options; else loader" class="nothing-to-display-label">{{notFoundMsg}}</span>
    <ng-template #loader>
        <div class="inline-loader inline-loader_menu"></div>
    </ng-template>

    <div class="options-wrapper">
        <sdi-list [items]="options" [focused]="false" [keyboardFiltering]="true" listMaxHeight="40vh"
                  [resetItemPadding]="false" [searchQuery]="searchQuery" [highlightOnly]="highlightOnly"
                  (selected)="onOptionSelected($event)">
        </sdi-list>
    </div>
</div>

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor()

Inputs

getOptionsFn
Type : function
notFoundMsg
Type : string
openExtendedClickFn
Type : function
options
Type : Option[]
placeholder
Type : string
searchInputVisible
Type : boolean
Default value : true

Outputs

optionSelected
Type : EventEmitter

Methods

Public focus
focus()
Returns : void
Public loadOptions
loadOptions(searchQuery?: string)
Parameters :
Name Type Optional
searchQuery string Yes
Returns : void
ngOnInit
ngOnInit()
Returns : void
onOptionSelected
onOptionSelected(option: Option)
Parameters :
Name Type Optional
option Option No
Returns : void
onSearchInput
onSearchInput()
Returns : void
onSearchInputClick
onSearchInputClick(event: MouseEvent)
Parameters :
Name Type Optional
event MouseEvent No
Returns : void
onSearchInputKeyDown
onSearchInputKeyDown(event: KeyboardEvent)
Parameters :
Name Type Optional
event KeyboardEvent No
Returns : void
Public resetKeyboardSearch
resetKeyboardSearch()
Returns : void

Properties

highlightOnly
Default value : false
listComponent
Type : SdiListComponent
Decorators :
@ViewChild(SdiListComponent)
searchInputRef
Type : ElementRef
Decorators :
@ViewChild('searchInput')
searchQuery
Type : string
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""