Panels v17 (#53)

* feat(panels): create a panels handler for mobile/desktop

---------

Co-authored-by: Alexandre Caron <alexandre.caron12@msp.gouv.qc.ca>

src/app/pages/menu/menu-pages/map/map.module.ts

@@ -5,8 +5,6 @@ import { IgoLanguageModule } from '@igo2/core/language';
 
 import { MapComponent } from './map.component';
 
-import { MapComponent } from './map.component';
-
 @NgModule({
   declarations: [MapComponent],
   imports: [CommonModule, IgoLanguageModule],

src/app/pages/portal/filter-button/filter-button.component.html

@@ -0,0 +1,13 @@
+<button
+  id="filter-button"
+  mat-raised-button
+  (click)="toggleFilter()"
+  [matTooltip]="
+    ((panelsHandlerState.opened$ | async) ? 'filter.close' : 'filter.open')
+      | translate
+  "
+  matTooltipPosition="left"
+  [matTooltipDisabled]="tooltipDisabled"
+>
+  {{ 'filter.button' | translate }}
+</button>

src/app/pages/portal/filter-button/filter-button.component.scss

@@ -0,0 +1,7 @@
+:host {
+  #filter-button {
+    border-radius: 0 !important;
+    color: #095797 !important;
+    border-color: #095797 !important;
+  }
+}

src/app/pages/portal/filter-button/filter-button.component.ts

@@ -0,0 +1,30 @@
+import { AsyncPipe } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { MatButton } from '@angular/material/button';
+import { MatTooltip } from '@angular/material/tooltip';
+
+import { TranslateModule } from '@ngx-translate/core';
+
+import { PanelsHandlerState } from '../panels/panels-handler/panels-handler.state';
+
+@Component({
+  selector: 'app-filter-button',
+  templateUrl: './filter-button.component.html',
+  styleUrls: ['./filter-button.component.scss'],
+  standalone: true,
+  imports: [MatButton, MatTooltip, TranslateModule, AsyncPipe]
+})
+export class FilterButtonComponent {
+  @Input() tooltipDisabled: boolean;
+  @Output() filterToggled = new EventEmitter<boolean>();
+
+  public dialogRef = null;
+  public legendButtonTooltip: unknown;
+
+  constructor(public panelsHandlerState: PanelsHandlerState) {}
+
+  toggleFilter(): void {
+    this.panelsHandlerState.shownComponent$;
+    this.filterToggled.emit();
+  }
+}

src/app/pages/portal/legend-button/legend-button.component.html

@@ -3,6 +3,7 @@
   mat-raised-button
   (click)="toggleLegend()"
   [matTooltip]="legendButtonTooltip"
+  matTooltipPosition="left"
   [matTooltipDisabled]="tooltipDisabled"
 >
   {{ 'legend.button' | translate }}

src/app/pages/portal/map-overlay/map-overlay.component.ts

@@ -1,4 +1,4 @@
-import { NgClass, NgStyle } from '@angular/common';
+import { NgClass, NgFor, NgIf, NgStyle } from '@angular/common';
 import { AfterViewInit, Component, OnDestroy } from '@angular/core';
 
 import { Context, ContextService } from '@igo2/context';
@@ -14,7 +14,7 @@ import { MapOverlay } from './map-overlay.interface';
   templateUrl: './map-overlay.component.html',
   styleUrls: ['./map-overlay.component.scss'],
   standalone: true,
-  imports: [NgClass, NgStyle]
+  imports: [NgFor, NgClass, NgIf, NgStyle]
 })
 export class MapOverlayComponent implements AfterViewInit, OnDestroy {
   public mapOverlay: MapOverlay[] = [];
@@ -44,14 +44,14 @@ export class MapOverlayComponent implements AfterViewInit, OnDestroy {
   }
 
   private handleContextChange(context: Context) {
-    let mapOverlay = [];
+    let mapOverlay: MapOverlay[] = [];
     if (context !== undefined) {
       this.mapOverlay = [];
 
       if (context['mapOverlay']) {
         mapOverlay = context['mapOverlay'];
-      } else if (this.configService.getConfig('mapOverlay')) {
-        mapOverlay = this.configService.getConfig('mapOverlay');
+      } else {
+        mapOverlay = this.configService.getConfig('mapOverlay', []);
       }
       for (const overlay of mapOverlay) {
         // If no media define use default to desktop, display only if current media is on context definition

src/app/pages/portal/map-overlay/map-overlay.enum.ts

@@ -0,0 +1,11 @@
+export enum MapOverlayCssClass {
+  TopLeft = 'top-left',
+  CenterLeft = 'center-left',
+  BottomLeft = 'bottom-left',
+  TopCenter = 'top-center',
+  CenterCenter = 'center-center',
+  BottomCenter = 'bottom-center',
+  TopRight = 'top-right',
+  CenterRight = 'center-right',
+  BottoMRight = 'bottom-right'
+}

src/app/pages/portal/map-overlay/map-overlay.interface.ts

@@ -1,20 +1,17 @@
+import { Media } from '@igo2/core/media';
+
+import { MapOverlayCssClass } from './map-overlay.enum';
+
 export interface MapOverlay {
-  media: Array<string> /* Media device to display the mapOverlay
-                            - options: mobile
-                                       tablet
-                                       desktop
-                            - default: desktop
-  cssClass: string;         /* Css class to define position of the element
-                            - options:  top-left
-                                        center-left
-                                        bottom-left
-                                        top-center
-                                        center-center
-                                        bottom-center
-                                        top-right
-                                        center-right
-                                        bottom-right
-  */;
+  /**
+   * Media device to display the mapOverlay
+   * Desktop is the default value.
+   */
+  media: Array<Media>;
+  /**
+   * Css class to define position of the element
+   */
+  cssClass: MapOverlayCssClass;
   fixed?: boolean; // Is element is fixed, won't be affect by animation, default to false
   link?: string; // Link to open when element is clicked
   imgSrc?: string; // source of the image to show