import { AfterViewInit , ChangeDetectorRef , Component , ElementRef , ViewChild , } from '@angular/core' ; import { HsConfig } from '../../config.service' ; import { HsEventBusService } from '../core/event-bus.service' ; import { HsLayoutService } from './layout.service' ; import { HsMapHostDirective } from './map-host.directive' ; import { HsOverlayPanelContainerService } from './overlay-panel-container.service' ; import { HsPanelContainerService } from './panels/panel-container.service' ; import { HsUtilsService } from '../utils/utils.service' ; @ Component ( { selector : 'hs-layout' , templateUrl : './partials/layout.html' , } ) export class HsLayoutComponent implements AfterViewInit { @ ViewChild ( 'hslayout' ) hslayout : ElementRef ; @ ViewChild ( HsMapHostDirective , { static : true } ) mapHost : HsMapHostDirective ; panelVisible ( which , scope ? ) { return this . HsLayoutService . panelVisible ( which , scope ) ; } panelEnabled ( which , status ? ) { return this . HsLayoutService . panelEnabled ( which , status ) ; } panelSpaceWidth ( ) { return this . HsLayoutService . panelSpaceWidth ( ) ; } constructor ( public HsConfig , public HsLayoutService , public HsEventBusService , private elementRef , private cdr , private HsUtilsService , public HsPanelContainerService , public HsOverlayPanelContainerService ) { this . HsLayoutService . layoutElement = elementRef . nativeElement ; } ngOnInit ( ) { this . HsLayoutService . contentWrapper = this . elementRef . nativeElement . querySelector ( '.hs-content-wrapper' ) ; if ( this . HsConfig . sidebarPosition === 'left' ) { this . HsLayoutService . contentWrapper . classList . add ( 'flex-reverse' ) ; this . HsLayoutService . sidebarRight = false ; } else if ( this . HsConfig . sidebarPosition != 'invisible' ) { this . HsConfig . sidebarPosition = 'right' ; } if ( window . innerWidth < 600 && this . HsUtilsService . runningInBrowser ( ) ) { const viewport = document . querySelector ( 'meta[name="viewport"]' ) ; viewport . setAttribute ( 'content' , 'width=device-width, initial-scale=0.6, maximum-scale=2, user-scalable=no' ) ; } } ngAfterViewInit ( ) { this . HsLayoutService . layoutElement = this . hslayout . nativeElement ; const hsapp = this . elementRef . nativeElement . parentElement ; if ( window . innerWidth < 767 ) { document . body . style . margin = '0px' ; } if ( getComputedStyle ( hsapp ) . display == 'inline' ) { hsapp . style . display = 'block' ; console . warn ( 'Main element (<hslayers>) needs display property to be defined...fallback value added' ) ; } const minHeight = window . devicePixelRatio <= 1 ? 350 : 300 * window . devicePixelRatio ; if ( hsapp . clientHeight < minHeight ) { hsapp . style . height = '100%' ; if ( hsapp . clientHeight < minHeight ) { hsapp . style . height = 'calc(var(--vh, 1vh) * 100)' ; } console . warn ( 'Main element (<hslayers>) needs height property to be defined...fallback value added' ) ; } this . HsEventBusService . layoutLoads . next ( { element : this . elementRef . nativeElement , innerElement : '.hs-map-space' , } ) ; this . HsLayoutService . mapSpaceRef . next ( this . mapHost . viewContainerRef ) ; this . cdr . detectChanges ( ) ; } }