jbc.lol
unoffical wafrn mirror
wafrn.net
atproto
social-network
activitypub
1<div class="w-full">
2 <form [formGroup]="form">
3 <mat-form-field class="w-full">
4 <mat-label>{{ controlText }}</mat-label>
5 <input formControlName="userSearcher" matNativeControl [matAutocomplete]="auto" />
6 </mat-form-field>
7
8 <mat-autocomplete
9 (optionSelected)="optionSelected.emit({ remoteId: $event.option.value.remoteId, url: $event.option.getLabel() })"
10 [displayWith]="autoCompleteDisplay"
11 #auto="matAutocomplete"
12 >
13 @for (user of usersAutocompleteOptions; track user) {
14 <mat-option [value]="user">
15 <div class="flex gap-3 align-items-center suggestion-item">
16 <app-avatar-small [user]="user"></app-avatar-small> <span>{{ user.url }}</span>
17 </div></mat-option
18 >
19 }
20 @if (form.controls['userSearcher'].value && usersAutocompleteOptions.length === 0) {
21 @if (searching()) {
22 <mat-option class="full-option" disabled>
23 <div class="flex gap-3 align-items-center">
24 <app-avatar-small></app-avatar-small>
25 <mat-progress-bar class="max-w-16rem" mode="indeterminate"></mat-progress-bar>
26 </div>
27 </mat-option>
28 } @else {
29 <mat-option disabled>{{ 'editor.noResults' | translate }}</mat-option>
30 }
31 }
32 </mat-autocomplete>
33 </form>
34</div>