feat(config):Configurable toast messages position - toastPosition

Value based on config parameter or sidebarPoisiton if not defined

Author: FilipLeitner

projects/hslayers/common/toast/toast.component.ts

@@ -1,18 +1,10 @@
-import {Component, Input, computed} from '@angular/core';
+import {Component, computed, input} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {toSignal} from '@angular/core/rxjs-interop';
 
 import {HsToastService} from './toast.service';
 import {HsToastItemComponent} from './toast-item.component';
-import {HsConfig} from 'hslayers-ng/config';
-
-export type ToastPosition =
-  | 'top-left'
-  | 'top-right'
-  | 'top-center'
-  | 'bottom-left'
-  | 'bottom-right'
-  | 'bottom-center';
+import {HsConfig, ToastPosition} from 'hslayers-ng/config';
 
 @Component({
   selector: 'hs-toast',
@@ -37,7 +29,7 @@ export type ToastPosition =
   },
 })
 export class HsToastComponent {
-  @Input() position: ToastPosition = 'bottom-center';
+  position = input<ToastPosition>('bottom-center');
 
   constructor(
     public hsToastService: HsToastService,
@@ -58,10 +50,11 @@ export class HsToastComponent {
    */
   positionClasses = computed(() => {
     this.configChanges();
+    const containerPosition = this.position();
     const positionType =
       this.hsConfig.toastAnchor === 'screen'
         ? 'position-fixed'
         : 'position-absolute';
-    return `${this.position} ${positionType}`;
+    return `${containerPosition} ${positionType}`;
   });
 }

projects/hslayers/config/config.service.ts

@@ -14,6 +14,14 @@ import {
 } from 'hslayers-ng/types';
 import {StyleLike} from 'ol/style/Style';
 
+export type ToastPosition =
+  | 'top-left'
+  | 'top-right'
+  | 'top-center'
+  | 'bottom-left'
+  | 'bottom-right'
+  | 'bottom-center';
+
 export type SymbolizerIcon = {
   name: string;
   url: string;
@@ -157,6 +165,11 @@ export class HsConfigObject {
    * 'map' - anchors toasts to the map container
    */
   toastAnchor?: 'screen' | 'map' = 'map';
+  /**
+   * Controls the position of toast notifications
+   * @default 'bottom-right'
+   */
+  toastPosition?: ToastPosition;
   errorToastDuration?: number;
 
   advancedForm?: boolean;

projects/hslayers/config/public-api.ts

@@ -4,4 +4,5 @@ export {
   SymbolizerIcon,
   MapSwipeOptions,
   KeyNumberDict,
+  ToastPosition,
 } from './config.service';

projects/hslayers/core/hslayers.component.ts

@@ -10,10 +10,18 @@ import {
   ViewChild,
   inject,
 } from '@angular/core';
-import {delay, filter, fromEvent, timer} from 'rxjs';
+import {
+  combineLatestWith,
+  delay,
+  filter,
+  fromEvent,
+  map,
+  startWith,
+  timer,
+} from 'rxjs';
 import {takeUntilDestroyed, toSignal} from '@angular/core/rxjs-interop';
 
-import {HsConfig, HsConfigObject} from 'hslayers-ng/config';
+import {HsConfig, HsConfigObject, ToastPosition} from 'hslayers-ng/config';
 import {HsEventBusService} from 'hslayers-ng/services/event-bus';
 import {HsExternalService} from 'hslayers-ng/services/external';
 import {HsLayoutService} from 'hslayers-ng/services/layout';
@@ -69,6 +77,7 @@ export class HslayersComponent implements AfterViewInit, OnInit {
   private panelSpace: HTMLElement;
   private mapSpace: HTMLElement;
 
+  toastPosition: Signal<ToastPosition>;
   constructor(
     public hsConfig: HsConfig,
     private elementRef: ElementRef,
@@ -83,6 +92,20 @@ export class HslayersComponent implements AfterViewInit, OnInit {
   ) {
     this.sidebarPosition = toSignal(this.HsLayoutService.sidebarPosition);
     this.sidebarVisible = toSignal(this.HsLayoutService.sidebarVisible);
+
+    this.toastPosition = toSignal(
+      this.HsLayoutService.sidebarPosition$.pipe(
+        combineLatestWith(
+          this.hsConfig.configChanges.pipe(startWith(this.hsConfig)),
+        ),
+        map(([sidebarPosition, _]) => {
+          return (
+            this.hsConfig.toastPosition ??
+            (sidebarPosition === 'left' ? 'bottom-right' : 'bottom-left')
+          );
+        }),
+      ),
+    );
   }
 
   async ngOnInit(): Promise<void> {

projects/hslayers/core/hslayers.html

@@ -31,7 +31,7 @@
         </div>
       </div>
     </div>
-    <hs-toast aria-live="polite" aria-atomic="true" [position]="sidebarPosition() === 'left' ? 'bottom-right' : 'bottom-left'"></hs-toast>
+    <hs-toast aria-live="polite" aria-atomic="true" [position]="toastPosition()"></hs-toast>
     <div class="hs-dialog-area"></div>
   </div>
   <hs-dialog-container></hs-dialog-container>

projects/test-app/src/hslayers-app/hslayers-app.component.ts

@@ -425,6 +425,7 @@ export class HslayersAppComponent {
       language: 'en',
       assetsPath: 'assets',
       saveMapStateOnReload: false,
+      toastAnchor: 'screen',
       symbolizerIcons: [
         {name: 'bag', url: '/assets/icons/bag1.svg'},
         {name: 'banking', url: '/assets/icons/banking4.svg'},