akveo · yggg · Nov 22, 2021 · Nov 19, 2021 · Nov 22, 2021 · Nov 22, 2021
diff --git a/src/framework/theme/components/layout/layout.component.ts b/src/framework/theme/components/layout/layout.component.ts
@@ -5,8 +5,18 @@
  */
 
 import {
-  AfterViewInit, Component, ElementRef, HostBinding, HostListener, Input, OnDestroy,
-  Renderer2, ViewChild, ViewContainerRef, Inject, PLATFORM_ID,
+  AfterViewInit,
+  Component,
+  ElementRef,
+  HostBinding,
+  HostListener,
+  Input,
+  OnDestroy,
+  Renderer2,
+  ViewChild,
+  ViewContainerRef,
+  Inject,
+  PLATFORM_ID,
 } from '@angular/core';
 import { isPlatformBrowser } from '@angular/common';
 import { BehaviorSubject, Subject } from 'rxjs';
@@ -136,7 +146,6 @@ import { NbOverlayContainerAdapter } from '../cdk/adapter/overlay-container-adap
   `,
 })
 export class NbLayoutComponent implements AfterViewInit, OnDestroy {
-
   protected scrollBlockClass = 'nb-global-scrollblock';
   protected isScrollBlocked = false;
   protected scrollableContainerOverflowOldValue: string;
@@ -206,7 +215,7 @@ export class NbLayoutComponent implements AfterViewInit, OnDestroy {
   // TODO remove as of 5.0.0
   @ViewChild('layoutTopDynamicArea', { read: ViewContainerRef }) veryTopRef: ViewContainerRef;
 
-  @ViewChild('scrollableContainer', { read: ElementRef })
+  @ViewChild('scrollableContainer', { read: ElementRef, static: true })
   scrollableContainerRef: ElementRef<HTMLElement>;
 
   @ViewChild('layoutContainer', { read: ElementRef })
@@ -232,10 +241,9 @@ export class NbLayoutComponent implements AfterViewInit, OnDestroy {
   ) {
     this.registerAsOverlayContainer();
 
-    this.themeService.onThemeChange()
-      .pipe(
-        takeUntil(this.destroy$),
-      )
+    this.themeService
+      .onThemeChange()
+      .pipe(takeUntil(this.destroy$))
       .subscribe((theme: any) => {
         const body = this.document.getElementsByTagName('body')[0];
         if (theme.previous) {
@@ -244,45 +252,56 @@ export class NbLayoutComponent implements AfterViewInit, OnDestroy {
         this.renderer.addClass(body, `nb-theme-${theme.name}`);
       });
 
-    this.themeService.onAppendLayoutClass()
-      .pipe(
-        takeUntil(this.destroy$),
-      )
+    this.themeService
+      .onAppendLayoutClass()
+      .pipe(takeUntil(this.destroy$))
       .subscribe((className: string) => {
         this.renderer.addClass(this.elementRef.nativeElement, className);
       });
 
-    this.themeService.onRemoveLayoutClass()
-      .pipe(
-        takeUntil(this.destroy$),
-      )
+    this.themeService
+      .onRemoveLayoutClass()
+      .pipe(takeUntil(this.destroy$))
       .subscribe((className: string) => {
         this.renderer.removeClass(this.elementRef.nativeElement, className);
       });
 
-    this.spinnerService.registerLoader(new Promise<void>((resolve) => {
-      this.afterViewInit$
-        .pipe(
-          takeUntil(this.destroy$),
-        )
-        .subscribe((_) => resolve());
-    }));
+    this.spinnerService.registerLoader(
+      new Promise<void>((resolve) => {
+        this.afterViewInit$.pipe(takeUntil(this.destroy$)).subscribe((_) => resolve());
+      }),
+    );
     this.spinnerService.load();
 
-    this.rulerService.onGetDimensions()
-      .pipe(
-        takeUntil(this.destroy$),
-      )
+    this.rulerService
+      .onGetDimensions()
+      .pipe(takeUntil(this.destroy$))
       .subscribe(({ listener }) => {
         listener.next(this.getDimensions());
         listener.complete();
       });
 
     this.scrollService
-      .onScrollableChange()
+      .onGetPosition()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(({ listener }) => {
+        listener.next(this.getScrollPosition());
+        listener.complete();
+      });
+
+    this.scrollTop
+      .shouldRestore()
       .pipe(
-        filter(() => this.withScrollValue),
+        filter(() => this.restoreScrollTopValue),
+        takeUntil(this.destroy$),
       )
+      .subscribe(() => {
+        this.scroll(0, 0);
+      });
+
+    this.scrollService
+      .onScrollableChange()
+      .pipe(filter(() => this.withScrollValue))
       .subscribe((scrollable: boolean) => {
         /**
          * In case when Nebular Layout custom scroll `withScroll` mode is enabled
@@ -303,25 +322,13 @@ export class NbLayoutComponent implements AfterViewInit, OnDestroy {
   }
 
   ngAfterViewInit() {
-    this.scrollService.onGetPosition()
-      .pipe(takeUntil(this.destroy$))
-      .subscribe(({ listener }) => {
-        listener.next(this.getScrollPosition());
-        listener.complete();
-      });
-
-    this.scrollTop.shouldRestore()
-      .pipe(filter(
-        () => this.restoreScrollTopValue),
-        takeUntil(this.destroy$),
-      )
-      .subscribe(() => this.scroll(0, 0));
-
-    this.layoutDirectionService.onDirectionChange()
+    this.layoutDirectionService
+      .onDirectionChange()
       .pipe(takeUntil(this.destroy$))
-      .subscribe(direction => this.document.dir = direction);
+      .subscribe((direction) => (this.document.dir = direction));
 
-    this.scrollService.onManualScroll()
+    this.scrollService
+      .onManualScroll()
       .pipe(takeUntil(this.destroy$))
       .subscribe(({ x, y }: NbScrollPosition) => this.scroll(x, y));
 
@@ -352,7 +359,10 @@ export class NbLayoutComponent implements AfterViewInit, OnDestroy {
    * @returns {NbLayoutDimensions}
    */
   getDimensions(): NbLayoutDimensions {
-    let clientWidth, clientHeight, scrollWidth, scrollHeight = 0;
+    let clientWidth,
+      clientHeight,
+      scrollWidth,
+      scrollHeight = 0;
     if (this.withScrollValue) {
       const container = this.scrollableContainerRef.nativeElement;
       clientWidth = container.clientWidth;
@@ -395,12 +405,19 @@ export class NbLayoutComponent implements AfterViewInit, OnDestroy {
 
     const documentRect = this.document.documentElement.getBoundingClientRect();
 
-    const x = -documentRect.left || this.document.body.scrollLeft || this.window.scrollX ||
-      this.document.documentElement.scrollLeft || 0;
-
-    const y = -documentRect.top || this.document.body.scrollTop || this.window.scrollY ||
-      this.document.documentElement.scrollTop || 0;
+    const x =
+      -documentRect.left ||
+      this.document.body.scrollLeft ||
+      this.window.scrollX ||
+      this.document.documentElement.scrollLeft ||
+      0;
 
+    const y =
+      -documentRect.top ||
+      this.document.body.scrollTop ||
+      this.window.scrollY ||
+      this.document.documentElement.scrollTop ||
+      0;
 
     return { x, y };
   }
@@ -502,12 +519,9 @@ export class NbLayoutComponent implements AfterViewInit, OnDestroy {
  */
 @Component({
   selector: 'nb-layout-column',
-  template: `
-    <ng-content></ng-content>
-  `,
+  template: `<ng-content></ng-content>`,
 })
 export class NbLayoutColumnComponent {
-
   @HostBinding('class.left') leftValue: boolean;
   @HostBinding('class.start') startValue: boolean;
 
@@ -575,7 +589,6 @@ export class NbLayoutColumnComponent {
   `,
 })
 export class NbLayoutHeaderComponent {
-
   @HostBinding('class.fixed') fixedValue: boolean;
   @HostBinding('class.subheader') subheaderValue: boolean;
 
@@ -635,7 +648,6 @@ export class NbLayoutHeaderComponent {
   `,
 })
 export class NbLayoutFooterComponent {
-
   @HostBinding('class.fixed') fixedValue: boolean;
 
   /**
@@ -647,5 +659,4 @@ export class NbLayoutFooterComponent {
     this.fixedValue = convertToBoolProperty(val);
   }
   static ngAcceptInputType_fixed: NbBooleanInput;
-
 }