feat(geo): Show add results icon only when hovering over the result

packages/geo/src/lib/search/search-results/search-results-add-button.component.html

@@ -23,6 +23,7 @@
 </button>
 
 <button
+[id]="(!isMobile) ? 'hide-save-search-result-btn' : ''"
 igoStopPropagation
 *ngIf="layer.meta.dataType === 'Feature' && saveSearchResultInLayer"
 mat-icon-button

packages/geo/src/lib/search/search-results/search-results-add-button.component.scss

@@ -0,0 +1,7 @@
+#hide-save-search-result-btn {
+    display: none;
+}
+
+#show-save-search-result-btn {
+    display: block;
+}

packages/geo/src/lib/search/search-results/search-results-add-button.component.ts

@@ -32,6 +32,7 @@ import OlOverlay from 'ol/Overlay';
 import { VectorSourceEvent as OlVectorSourceEvent } from 'ol/source/Vector';
 import { default as OlGeometry } from 'ol/geom/Geometry';
 import { QueryableDataSourceOptions } from '../../query';
+import { Media, MediaService } from '@igo2/core';
 
 
 @Component({
@@ -99,16 +100,26 @@ export class SearchResultAddButtonComponent implements OnInit, OnDestroy{
       String(layer.id).includes('igo-search-layer')
     );
   }
-
+  private mediaService$$: Subscription;
+  public isMobile: boolean = false;
   constructor(
     private layerService: LayerService,
     private dialog: MatDialog,
-    private dataSourceService: DataSourceService) {}
+    private dataSourceService: DataSourceService,
+    private mediaService: MediaService) {}
 
   /**
    * @internal
    */
   ngOnInit(): void {
+    // check the view if is mobile or not
+    this.mediaService$$ = this.mediaService.media$.subscribe(
+      (media: Media) => {
+        if(media === Media.Mobile) {
+          this.isMobile = true;
+        }
+      }
+    );
     if (this.layer.meta.dataType === 'Layer') {
       this.added =
         this.map.layers.findIndex(
@@ -127,6 +138,9 @@ export class SearchResultAddButtonComponent implements OnInit, OnDestroy{
   ngOnDestroy() {
     this.resolution$$.unsubscribe();
     this.layers$$.unsubscribe();
+    if (this.mediaService$$) {
+      this.mediaService$$.unsubscribe();
+    }
   }
 
   /**

packages/geo/src/lib/search/search-results/search-results-item.component.html

@@ -1,4 +1,4 @@
-<mat-list-item>
+<mat-list-item (mouseenter)="onMouseEvent($event)" (mouseleave)="onMouseEvent($event)">
   <mat-icon *ngIf="icon" mat-list-avatar svgIcon="{{showIcons ? icon : 'blank'}}"></mat-icon>
 
   <h4 matLine *ngIf="titleHtml" [innerHtml]="titleHtml" matTooltipShowDelay="500" [matTooltip]="tooltipHtml" matTooltipClass="search-result-tooltip"></h4>

packages/geo/src/lib/search/search-results/search-results-item.component.ts

@@ -84,4 +84,27 @@ export class SearchResultsItemComponent {
     });
     moveToOlFeatures(this.map, [olFeature], FeatureMotion.Default);
   }
+
+  /**
+   * On mouse event, mouseenter /mouseleave
+   * @internal
+   */
+  onMouseEvent(event) {
+    const element = event.target;
+    const type = event.type;
+    switch (type) {
+      case 'mouseenter':
+        const hideBtn = element.querySelector('#hide-save-search-result-btn');
+        (hideBtn) ?
+        hideBtn.setAttribute('id', 'show-save-search-result-btn') : null;
+        break;
+      case 'mouseleave':
+        const showBtn = element.querySelector('#show-save-search-result-btn');
+        (showBtn) ?
+        showBtn.setAttribute('id', 'hide-save-search-result-btn') : null;
+        break;
+      default:
+        break;
+    }
+  }
 }