diff --git a/projects/hslayers/common/toast/toast.component.ts b/projects/hslayers/common/toast/toast.component.ts index d10e073397..e4cbd3fc52 100644 --- a/projects/hslayers/common/toast/toast.component.ts +++ b/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('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}`; }); } diff --git a/projects/hslayers/config/config.service.ts b/projects/hslayers/config/config.service.ts index 1c012f6f30..ccc52240a1 100644 --- a/projects/hslayers/config/config.service.ts +++ b/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; diff --git a/projects/hslayers/config/public-api.ts b/projects/hslayers/config/public-api.ts index 58d9655ec4..f45974db40 100644 --- a/projects/hslayers/config/public-api.ts +++ b/projects/hslayers/config/public-api.ts @@ -4,4 +4,5 @@ export { SymbolizerIcon, MapSwipeOptions, KeyNumberDict, + ToastPosition, } from './config.service'; diff --git a/projects/hslayers/core/hslayers.component.ts b/projects/hslayers/core/hslayers.component.ts index 58bc4c5959..26085eb214 100644 --- a/projects/hslayers/core/hslayers.component.ts +++ b/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; 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 { diff --git a/projects/hslayers/core/hslayers.html b/projects/hslayers/core/hslayers.html index b757866ee3..55efb6701f 100755 --- a/projects/hslayers/core/hslayers.html +++ b/projects/hslayers/core/hslayers.html @@ -31,7 +31,7 @@ - +
diff --git a/projects/test-app/src/hslayers-app/hslayers-app.component.ts b/projects/test-app/src/hslayers-app/hslayers-app.component.ts index d2f04a1fed..9e3bd3fe3a 100644 --- a/projects/test-app/src/hslayers-app/hslayers-app.component.ts +++ b/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'},