fix(ngx-search-container): add NgTemplateOutlet import + add tooltip …

…and style to icons
DSI-HUG · Jul 25, 2024 · 46ae279 · 46ae279
1 parent 73defb9
commit 46ae279
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/projects/search-container/src/search-container.component.html b/projects/search-container/src/search-container.component.html
@@ -1,10 +1,10 @@
 <div *ngIf="mediaService.isHandset$ | async; else noHandsetTpl" class="ngx-search-container-mobile mobile" [class.active]="activeSearch$ | async" #mobileSearch>
     <ng-container *ngIf="activeSearch$ | async; else noActiveSearchTpl">
-        <mat-icon (click)="activeSearch$.next(false)">arrow_back</mat-icon>
+        <mat-icon class="icon-close-search" [matTooltip]="closeSearchTooltip" (click)="activeSearch$.next(false)">arrow_back</mat-icon>
         <ng-container *ngTemplateOutlet="searchContainerTpl"></ng-container>
     </ng-container>
     <ng-template #noActiveSearchTpl>
-        <mat-icon (click)="activeSearch$.next(true)">search</mat-icon>
+        <mat-icon class="icon-open-search" [matTooltip]="openSearchTooltip" (click)="activeSearch$.next(true)">search</mat-icon>
     </ng-template>
 </div>
 

diff --git a/projects/search-container/src/search-container.component.scss b/projects/search-container/src/search-container.component.scss
@@ -50,7 +50,7 @@ ngx-search-container {
         &.active {
             display: flex;
             align-items: center;
-            position: fixed;
+            position: absolute;
             top: 0;
             left: 0;
             width: 100vw;
@@ -61,5 +61,10 @@ ngx-search-container {
         .mat-icon {
             padding: 0.5rem;
         }
+
+        .icon-close-search,
+        .icon-open-search {
+            cursor: pointer;
+        }
     }
 }
diff --git a/projects/search-container/src/search-container.component.ts b/projects/search-container/src/search-container.component.ts
@@ -1,4 +1,4 @@
-import { AsyncPipe, NgIf } from '@angular/common';
+import { AsyncPipe, NgIf, NgTemplateOutlet } from '@angular/common';
 import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChild, Directive, ElementRef, EventEmitter, inject, Input, NgZone, Output, TemplateRef, ViewEncapsulation } from '@angular/core';
 import { NgControl } from '@angular/forms';
 import { MatIconModule } from '@angular/material/icon';
@@ -34,6 +34,7 @@ export class NgxSearchInputDirective {
     imports: [
         AsyncPipe,
         NgIf,
+        NgTemplateOutlet,
         MatIconModule,
         MatTooltipModule
     ]
@@ -46,6 +47,12 @@ export class NgxSearchContainerComponent extends NgxDestroy implements AfterCont
     @Input()
     public clearTooltip = 'Effacer la recherche';
 
+    @Input()
+    public openSearchTooltip = 'Ouvrir la recherche';
+
+    @Input()
+    public closeSearchTooltip = 'Quitter la recherche';
+
     @ContentChild('mobileSearch')
     public mobileSearch: TemplateRef<unknown> | undefined;
 
@@ -58,10 +65,10 @@ export class NgxSearchContainerComponent extends NgxDestroy implements AfterCont
     @ContentChild(NgxSearchInputDirective)
     public set searchInput(searchInput: NgxSearchInputDirective) {
         if (!searchInput) {
-            throw new Error('You need to add the attribute ngx-search-input to the SearchContainerComponent');
+            throw new Error('You need to add the attribute ngx-search-input to the NgxSearchContainerComponent');
         }
         if (!searchInput.ngControl) {
-            throw new Error('You need to add the attribute ngModel to the SearchContainerComponent');
+            throw new Error('You need to add the attribute ngModel to the NgxSearchContainerComponent');
         }
         this._searchInput = searchInput;
     }