core/select/select.component.ts
| selector | c8y-select |
| templateUrl | ./select.component.html |
Properties |
Methods |
Inputs |
Outputs |
HostListeners |
| applyLabel |
Type : string
|
Default value : gettext('Apply')
|
| disableApplyOnNoSelection |
Type : boolean
|
Default value : false
|
| items |
Type : Item[]
|
| placeholder |
Type : string
|
Default value : gettext('Select item')
|
| selected |
Type : Item[] | selectedFunction
|
| selectedLabel |
Type : string | selectedLabelFunction
|
| updateItems |
Type : EventEmitter<boolean>
|
| onChange |
Type : EventEmitter<Item[]>
|
| click |
Arguments : '$event'
|
click(evt)
|
| applyChanges |
applyChanges()
|
|
Returns :
void
|
| getSelectAllToggleStatus |
getSelectAllToggleStatus()
|
|
Returns :
{ label: any; checked: boolean; indeterminate: boolean; }
|
| isAllFilteredSelected |
isAllFilteredSelected()
|
|
Returns :
boolean
|
| isAllItemsSelected |
isAllItemsSelected()
|
|
Returns :
boolean
|
| isNoItemSelected |
isNoItemSelected()
|
|
Returns :
boolean
|
| isOpenChange | ||||||
isOpenChange(isOpen: boolean)
|
||||||
|
Parameters :
Returns :
void
|
| isSelected | ||||||
isSelected(item: Item)
|
||||||
|
Parameters :
Returns :
any
|
| ngOnChanges | ||||||
ngOnChanges(changes: SimpleChanges)
|
||||||
|
Parameters :
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| onChangeItem |
onChangeItem(checked: boolean, item: Item)
|
|
Returns :
void
|
| outterSelected | ||||||
outterSelected(item: Item)
|
||||||
|
Parameters :
Returns :
any
|
| preventClick | ||||
preventClick(evt)
|
||||
Decorators :
@HostListener('click', ['$event'])
|
||||
|
Parameters :
Returns :
void
|
| selectAll | ||||||
selectAll(checked: boolean)
|
||||||
|
Parameters :
Returns :
void
|
| updateFiltered | ||||||
updateFiltered(term: string)
|
||||||
|
Parameters :
Returns :
void
|
| dropdown |
Type : BsDropdownDirective
|
Decorators :
@ViewChild(BsDropdownDirective, {static: false})
|
| filteredItems |
Type : Item[]
|
Default value : []
|
| isOpen |
Default value : false
|
| labelsForSelectAll |
Type : any
|
Default value : {
all: gettext('All'),
allFiltered: gettext('All filtered')
}
|
| labelText |
Type : string
|
Default value : ''
|
| liChildren |
Decorators :
@ContentChildren(ListItemComponent)
|
| searchFilter |
Type : null
|
Default value : null
|
| showAllLabel |
Default value : false
|
| Readonly sizeToShowFilter |
Type : number
|
Default value : 5
|
| textFilter |
Type : string
|
Default value : ''
|
<div
class="c8y-child-assets-selector dropdown fit-w"
(isOpenChange)="isOpenChange($event)"
dropdown
#dropdown
c8yDropdownDirection
px-event="Select type"
>
<button
type="button"
class="btn dropdown-toggle c8y-dropdown"
title="{{ labelText || placeholder | translate }}"
dropdownToggle
>
<span class="text-truncate" *ngIf="labelText">
<ng-container *ngIf="showAllLabel">{{ 'All' | translate }}</ng-container>
<ng-container *ngIf="!showAllLabel">{{ labelText | translate }}</ng-container>
</span>
<span class="text-truncate text-muted" *ngIf="!labelText">
{{ placeholder | translate }}
</span>
</button>
<ul class="dropdown-menu multiselect-container" *dropdownMenu>
<ng-content select="c8y-li"></ng-content>
<ng-container *ngIf="liChildren.length === 0">
<li *ngIf="items.length > sizeToShowFilter" class="multiselect-item">
<div class="input-group input-group-search">
<input
type="search"
class="form-control"
placeholder="{{ 'Filter' | translate }}…"
(keyup)="updateFiltered($event.target.value)"
[(ngModel)]="searchFilter"
/>
<span class="input-group-addon">
<i c8yIcon="search" *ngIf="!textFilter"></i>
<i c8yIcon="times" class="text-muted" *ngIf="textFilter" (click)="textFilter = ''"></i>
</span>
</div>
</li>
<li class="multiselect-item">
<label
[title]="getSelectAllToggleStatus().label | translate"
class="c8y-checkbox input-sm"
ng-click="vm.toggleSelectAll(); $event.preventDefault()"
>
<input
type="checkbox"
[checked]="getSelectAllToggleStatus().checked"
(change)="selectAll($event.target.checked)"
[indeterminate]="getSelectAllToggleStatus().indeterminate"
class="m-t-0"
/>
<span></span>
<span class="label-text">
{{ getSelectAllToggleStatus().label | translate }}
</span>
</label>
</li>
<li class="multiselect-item-container">
<ul class="list-unstyled">
<li class="multiselect-item" *ngFor="let item of filteredItems">
<label title="{{ item.name | translate }}" class="c8y-checkbox input-sm text-truncate">
<input
type="checkbox"
[checked]="isSelected(item)"
(change)="onChangeItem($event.target.checked, item)"
class="m-t-0"
/>
<span></span>
<span class="label-text">
{{ item.name | translate }}
</span>
</label>
</li>
</ul>
</li>
<li class="divider"></li>
<li class="bg-white">
<button
title="{{ applyLabel | translate }}"
class="btn btn-primary btn-block"
[disabled]="disableApplyOnNoSelection && isNoItemSelected()"
(click)="applyChanges()"
>
{{ applyLabel | translate }}
</button>
</li>
</ng-container>
</ul>
</div>