<ng-container *ngIf="appearance === 'bar'">
<mat-icon class="absolute ml-6 sm:ml-8" [svgIcon]="'heroicons_outline:search'"> <mat-autocomplete class="max-h-128 sm:px-2 border-t rounded-b shadow-md" [disableRipple]="true" #matAutocomplete="matAutocomplete"> <mat-option class="py-0 px-6 text-md pointer-events-none text-secondary bg-transparent" *ngIf="resultSets && !resultSets.length"> Aucun résultat n'a été trouvé ! <ng-container *ngFor="let resultSet of resultSets; trackBy: trackByFn"> {{resultSet.label.toUpperCase()}} <ng-container *ngFor="let result of resultSet.results; trackBy: trackByFn"> <mat-option class="group relative mb-1 py-0 px-6 text-md rounded-md hover:bg-gray-100 dark:hover:bg-hover" [routerLink]="result.link"> <ng-container *ngIf="resultSet.id === 'contacts'"> <ng-container *ngTemplateOutlet="contactResult; context: {$implicit: result}"> <ng-container *ngIf="resultSet.id === 'pages'"> <ng-container *ngTemplateOutlet="pageResult; context: {$implicit: result}"> <ng-container *ngIf="resultSet.id === 'tasks'"> <ng-container *ngTemplateOutlet="taskResult; context: {$implicit: result}">
<ng-container *ngIf="appearance === 'basic'">
<mat-icon matPrefix [svgIcon]="'heroicons_outline:search'"> <mat-autocomplete class="max-h-128 mt-1 rounded" [disableRipple]="true" #matAutocomplete="matAutocomplete"> <mat-option class="py-0 px-6 text-md pointer-events-none text-secondary bg-transparent" *ngIf="resultSets && !resultSets.length"> Aucun résultat n'a été trouvé ! <ng-container *ngFor="let resultSet of resultSets; trackBy: trackByFn"> {{resultSet.label.toUpperCase()}} <ng-container *ngFor="let result of resultSet.results; trackBy: trackByFn"> <mat-option class="group relative mb-1 py-0 px-6 text-md rounded-md hover:bg-gray-100 dark:hover:bg-hover" [routerLink]="result.link"> <ng-container *ngIf="resultSet.id === 'contacts'"> <ng-container *ngTemplateOutlet="contactResult; context: {$implicit: result}"> <ng-container *ngIf="resultSet.id === 'pages'"> <ng-container *ngTemplateOutlet="pageResult; context: {$implicit: result}"> <ng-container *ngIf="resultSet.id === 'tasks'"> <ng-container *ngTemplateOutlet="taskResult; context: {$implicit: result}">
<ng-template #contactResult let-result>
<img *ngIf="result.avatar" [src]="result.avatar"> <mat-icon class="m-0 icon-size-5 text-primary dark:text-primary-400" *ngIf="!result.avatar" [svgIcon]="'heroicons_outline:user-circle'">
<span [innerHTML]="result.name">
<ng-template #pageResult let-result>
{{result.link}}
<ng-template #taskResult let-result>
<ng-container *ngIf="result.completed"> <mat-icon class="mr-0 text-primary dark:text-primary-400" [svgIcon]="'heroicons_outline:check-circle'"> <ng-container *ngIf="!result.completed"> <mat-icon class="mr-0 text-hint" [svgIcon]="'heroicons_outline:check-circle'">