core/select/select.component.ts
AfterContentInit
OnDestroy
AfterViewInit
ControlValueAccessor
Validator
| host | { |
| providers |
{
provide: NG_VALUE_ACCESSOR, multi: true, useExisting: forwardRef(() => SelectComponent)
}
{
provide: NG_VALIDATORS, useExisting: forwardRef(() => SelectComponent), multi: true
}
SelectKeyboardService
|
| selector | c8y-select |
| templateUrl | ./select.component.html |
Properties |
Methods |
Inputs |
Outputs |
Accessors |
| autoClose |
Type : boolean
|
Default value : true
|
|
Defines, if the dropdown should close automatically after user interaction. |
| canDeselect |
Type : boolean
|
Default value : false
|
|
Allows the user to deselect an item. |
| container |
Type : string | "body"
|
Default value : 'body'
|
|
The container to put the dropdown to. Defaults to body. |
| disabled |
Type : boolean
|
Default value : false
|
|
If set to true, the select is disabled. |
| icon |
Type : string
|
Default value : 'caret-down'
|
|
The icon to be displayed in the select. |
| insideClick |
Type : boolean
|
|
Defines if the dropdown should stay open when the user clicks inside the select. If set to true, the dropdown will only close when the user clicks outside the select. |
| multi |
Type : boolean
|
Default value : false
|
|
If set to true, the user can select multiple items. |
| name |
Type : string
|
Default value : 'select'
|
|
The name used for this select. |
| placeholder |
Type : string
|
Default value : 'Select item…'
|
|
Placeholder text to be displayed in the select. |
| required |
Type : boolean
|
Default value : false
|
|
Marks the select as required. |
| selected |
Type : string | SelectableItem | Array
|
|
The selected item. |
| onDeselect |
Type : EventEmitter
|
|
Emits if a item was deselected. |
| onIconClick |
Type : EventEmitter
|
|
Emits when the select icon is clicked. |
| onSelect |
Type : EventEmitter
|
|
Emits if a item is selected. |
| close |
close()
|
|
Closes the dropdown.
Returns :
void
|
| deselect | ||||||||
deselect(item: SelectableItem)
|
||||||||
|
Deselects an item.
Parameters :
Returns :
void
|
| deselectAll |
deselectAll()
|
|
Deselects all items
Returns :
void
|
| ngAfterViewInit |
ngAfterViewInit()
|
|
Returns :
void
|
| open |
open()
|
|
Opens the dropdown.
Returns :
void
|
| select | ||||||||
select(item: SelectableItem)
|
||||||||
|
Selects an item
Parameters :
Returns :
void
|
| searchHasFocus |
Default value : false
|
|
Indicates if the search input has focus. |
| items | ||||||
getitems()
|
||||||
|
The items to be displayed in the select.
Returns :
SelectableItemTemplate[]
|
||||||
setitems(value: string[] | SelectableItem[] | SelectableItemTemplate[])
|
||||||
|
Items to be displayed in the select.
Can be an array of strings or an array of objects with
Parameters :
Example :
Returns :
void
|
| selected | ||||||
getselected()
|
||||||
|
Returns the selected item.
Returns :
SelectableItem[]
|
||||||
setselected(value: string | SelectableItem | Array<string | SelectableItem>)
|
||||||
|
The selected item.
Parameters :
Returns :
void
|
| preselectedItem |
getpreselectedItem()
|
|
A item which is preselected. It is used when a user types in the search input to give a visual typeahead feedback.
Returns :
SelectableItem
|
<div
class="c8y-search-dropdown dropdown fit-w"
placement="bottom left"
dropdown
[container]="container"
#dropdown="bs-dropdown"
[autoClose]="autoClose"
[isDisabled]="disabled"
[insideClick]="insideClick"
(onShown)="onShown()"
(onHidden)="onHidden()"
dropdownToggle
(click)="open()"
>
<div
class="input-group input-group-dropdown"
role="button"
>
<div
class="form-control text-truncate"
*ngIf="true"
[ngClass]="{
'm-r-80': canDeselect && selected.length > 0,
'm-r-40': !canDeselect || selected.length === 0,
'text-truncate': !multi,
'inner-scroll d-flex a-i-center': multi
}"
>
<!-- rendering of selected items (with content projection) -->
<div
class="selected-items"
*ngIf="projectedSelectedItems"
>
<ng-container *ngFor="let selectedItem of selected">
<ng-container
*ngTemplateOutlet="
projectedSelectedItems.templateRef;
context: { $implicit: selectedItem }
"
></ng-container>
</ng-container>
<i
class="text-muted"
*ngIf="selected.length === 0 && !searchHasFocus && searchControl.value.length === 0"
>
{{ placeholder | translate }}
</i>
</div>
<!-- rendering of selected items (default) -->
<div
class="selected-items"
*ngIf="!projectedSelectedItems"
>
<span *ngIf="!multi">
<span *ngIf="searchHasFocus && preselectedItem">
{{ preselectedItem.label | translate }}
</span>
<span *ngIf="!searchHasFocus && selected.length === 1">
{{ selected[0].label | translate }}
</span>
</span>
<i
class="text-muted"
*ngIf="selected.length === 0 && !preselectedItem && searchControl.value.length === 0"
>
{{ placeholder | translate }}
</i>
<ng-container *ngIf="multi">
<span class="m-r-4">{{ searchControl.value }}</span>
<span
class="tag tag--info chip"
*ngFor="let selectedItem of selected"
>
<button
class="btn btn-xs btn-clean text-10 m-r-4"
title="{{ selectedItem.label | translate }}"
type="button"
(click)="$event.preventDefault(); $event.stopPropagation(); deselect(selectedItem)"
>
<i c8yIcon="times"></i>
</button>
{{ selectedItem.label | translate }}
</span>
</ng-container>
</div>
</div>
<input
class="form-control text-truncate"
type="text"
autocomplete="off"
#searchControl
[ngClass]="{
'p-absolute': true,
'm-r-80': canDeselect && selected.length > 0,
'm-r-40': !canDeselect || selected.length === 0
}"
[required]="required"
(blur)="doBlur()"
(focus)="doFocus()"
[name]="name"
[disabled]="disabled"
/>
<span class="input-group-btn">
<!-- this button is displayed only if we have something selected and are allowed to deselect -->
<button
class="btn btn-dot"
title="{{ 'Deselect' | translate }}"
type="button"
*ngIf="canDeselect && selected.length > 0"
[disabled]="disabled"
(click)="$event.preventDefault(); $event.stopPropagation(); deselectAll()"
>
<i c8yIcon="times"></i>
</button>
<button
class="btn btn-dot"
title="{{ 'Search' | translate }}"
type="button"
[disabled]="disabled"
(click)="onIconClick.emit({ icon, $event })"
data-cy="select-button"
>
<i
class="text-primary"
[c8yIcon]="icon"
></i>
</button>
</span>
</div>
<c8y-list-group
class="dropdown-menu dropdown-menu--modal"
[style.width]="container === 'body' ? searchControl.parentNode.clientWidth + 'px' : undefined"
role="menu"
data-cy="select--dropdown-menu"
*dropdownMenu
>
<!-- rendering of items (default) -->
<c8y-li
style="cursor: pointer"
*ngFor="let item of items"
[selectable]="true"
[dense]="true"
[active]="!multi && item.value === selected[0]?.value"
(click)="select(item)"
>
<span [attr.data-search-label]="item.label | translate"></span>
<c8y-li-checkbox
*ngIf="multi"
[selected]="selected.indexOf(item) > -1"
(click)="$event.preventDefault(); $event.stopPropagation(); select(item)"
></c8y-li-checkbox>
<c8y-li-body
*ngIf="!item.template"
>
{{ item.label | translate }}
</c8y-li-body>
<ng-container
*ngTemplateOutlet="item?.template"
ngProjectAs="c8y-li-body"
></ng-container>
</c8y-li>
<ng-content select="div"></ng-content>
</c8y-list-group>
</div>