File
Extends
Implements
Constructor
constructor(cdRef: ChangeDetectorRef, translateService: TranslateService)
|
Parameters :
| Name |
Type |
Optional |
| cdRef |
ChangeDetectorRef
|
No
|
| translateService |
TranslateService
|
No
|
|
Methods
|
selectOption
|
selectOption(opt)
|
|
|
|
setPipe
|
setPipe(filterStr: string)
|
Parameters :
| Name |
Type |
Optional |
| filterStr |
string
|
No
|
|
|
defaultPlaceholder$
|
Default value : defer(() =>
isObservable(this.to?.c8yForOptions) ? this.to?.c8yForOptions : of(this.to?.c8yForOptions)
).pipe(
map(({ data }) => get(data[0], this.labelProp || 'name')),
map(example => {
return !!example
? this.translateService.instant(
gettext('Start typing to search, for example, {{ example }}'),
{ example }
)
: this.translateService.instant(gettext('No items'));
})
)
|
|
match
|
Default value : false
|
|
placeholder$
|
Default value : defer(() => of(this.to?.placeholder)).pipe(
switchMap(placeholder =>
placeholder
? of(placeholder)
: this.defaultPlaceholder$.pipe(
startWith(this.translateService.instant(gettext('Start typing to search')))
)
)
)
|
|
selected
|
Type : IIdentified
|
<c8y-typeahead
[required]="to?.required || false"
[placeholder]="placeholder$ | async"
[displayProperty]="to?.displayProperty"
[selected]="selected"
[allowFreeEntries]="to?.allowFreeEntries || false"
[container]="to?.container || ''"
[disabled]="to?.disabled"
(onSearch)="setPipe($event)"
[formControl]="formControl"
[class.is-invalid]="showError"
[formlyAttributes]="field">
<c8y-li *c8yFor="let opt of to?.c8yForOptions; loadMore: to?.loadMore || 'auto'; pipe: filterPipe; notFound: notFoundTemplate; loadingTemplate: loading;"
(click)="selectOption(opt); setPipe('')"
class="p-l-8 p-r-8 c8y-list__item--link"
[attr.role]="'menuitem'">
<c8y-highlight [text]="opt[labelProp]" [pattern]="pattern"></c8y-highlight>
</c8y-li>
<ng-template #notFoundTemplate>
<c8y-li class="bg-level-2 p-8" *ngIf="pattern.length > 0 && !match">
<p><strong translate>No match found.</strong></p>
</c8y-li>
</ng-template>
<ng-template #loading>
<c8y-li class="text-center p-t-8 p-relative">
<c8y-loading></c8y-loading>
</c8y-li>
</ng-template>
</c8y-typeahead>