core/select/typeahead.component.ts
ControlValueAccessor
Validator
AfterViewInit
| providers |
{
provide: NG_VALUE_ACCESSOR, multi: true, useExisting: forwardRef(() => TypeaheadComponent)
}
{
provide: NG_VALIDATORS, useExisting: forwardRef(() => TypeaheadComponent), multi: true
}
SelectKeyboardService
|
| selector | c8y-typeahead |
| templateUrl | ./typeahead.component.html |
Properties |
Methods |
Inputs |
Outputs |
constructor(selectKeyboardService: SelectKeyboardService)
|
||||||
|
Parameters :
|
| allowFreeEntries |
Type : boolean
|
Default value : true
|
| autoClose |
Type : boolean
|
Default value : true
|
| container |
Type : string | "body"
|
Default value : ''
|
| disabled |
Type : boolean
|
Default value : false
|
| displayProperty |
Type : string
|
Default value : 'name'
|
| hideNew |
Type : boolean
|
Default value : false
|
| highlightFirstItem |
Type : boolean
|
Default value : false
|
| icon |
Type : string
|
Default value : 'caret-down'
|
| maxlength |
Type : string | number
|
| name |
Type : string
|
Default value : this.displayProperty
|
| placeholder |
Type : string
|
| required |
Type : boolean
|
Default value : false
|
| selected |
Type : IIdentified
|
Default value : {
id: null
}
|
| onIconClick |
Type : EventEmitter
|
| onSearch |
Type : EventEmitter
|
| doBlur |
doBlur()
|
|
Returns :
void
|
| getDisplayProperty |
getDisplayProperty()
|
|
Returns :
any
|
| ngAfterViewInit |
ngAfterViewInit()
|
|
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Returns :
void
|
| onShown |
onShown()
|
|
Returns :
void
|
| registerOnChange | ||||||
registerOnChange(fn: any)
|
||||||
|
Parameters :
Returns :
void
|
| registerOnTouched | ||||||
registerOnTouched(fn: any)
|
||||||
|
Parameters :
Returns :
void
|
| reset |
reset()
|
|
Resets the input field - clear value and clean field to be pristine and untouched.
Returns :
void
|
| setDisabledState | ||||||
setDisabledState(isDisabled: boolean)
|
||||||
|
Parameters :
Returns :
void
|
| validate | ||||||
validate(_ctrl: AbstractControl)
|
||||||
|
Parameters :
Returns :
literal type
|
| writeValue | ||||
writeValue(value)
|
||||
|
Parameters :
Returns :
void
|
| dropdown |
Type : BsDropdownDirective
|
Decorators :
@ViewChild('dropdown', {static: false})
|
| list |
Type : QueryList<ListItemComponent>
|
Decorators :
@ContentChildren(ListItemComponent)
|
| searchControl |
Type : ElementRef
|
Decorators :
@ViewChild('searchControl', {static: false})
|
| searchControlModel |
Decorators :
@ViewChild('searchControlModel', {static: false})
|
<div
class="c8y-search-dropdown dropdown fit-w"
dropdown
[container]="container"
placement="bottom left"
#dropdown="bs-dropdown"
[autoClose]="true"
(onShown)="onShown()"
[isDisabled]="disabled"
dropdownToggle
>
<div role="button" class="input-group input-group-dropdown">
<input
#searchControl
#searchControlModel="ngModel"
type="text"
class="form-control text-truncate"
[ngClass]="{
'p-r-80':
!hideNew &&
(selected
? selected.id === null && getDisplayProperty()?.length > 0 && allowFreeEntries
: false),
'p-r-40': hideNew || getDisplayProperty()?.length === 0
}"
[required]="required"
[ngModel]="selected ? getDisplayProperty() : ''"
[placeholder]="placeholder | translate"
(blur)="doBlur()"
[name]="name"
[maxlength]="maxlength"
[disabled]="disabled"
/>
<span
class="label label-info p-absolute"
style="top: 10px; right: 40px; z-index: 10"
*ngIf="
!hideNew &&
(selected
? selected.id === null && getDisplayProperty()?.length > 0 && allowFreeEntries
: false)
"
>
{{ 'New' | translate }}
</span>
<span class="input-group-btn">
<button
class="btn btn-dot"
title="{{ 'Search' | translate }}"
type="button"
[disabled]="disabled"
(click)="onIconClick.emit({ icon, $event });"
data-cy="typeahead-button"
>
<i [c8yIcon]="icon" class="text-primary"></i>
</button>
</span>
</div>
<c8y-list-group
class="dropdown-menu dropdown-menu--modal"
data-cy="typeahead--dropdown-menu"
role="menu"
*dropdownMenu
[style.width]="container === 'body' ? searchControl.clientWidth + 'px' : undefined"
>
<ng-content select="div, c8y-li, c8y-list-item, button, a"></ng-content>
</c8y-list-group>
</div>