From 897ede94b14ed18a6a3356054bd48efd8d90eac3 Mon Sep 17 00:00:00 2001
From: William Martin <contact@willmartian.com>
Date: Thu, 24 Apr 2025 11:35:22 -0400
Subject: [PATCH] fix provider issue when used in router outlet

---
 .../components/src/layout/layout.component.ts |  2 +-
 .../src/layout/scroll-layout.directive.ts     | 25 ++++++++++---------
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/libs/components/src/layout/layout.component.ts b/libs/components/src/layout/layout.component.ts
index 941d5b8068e..6ee7dd8222e 100644
--- a/libs/components/src/layout/layout.component.ts
+++ b/libs/components/src/layout/layout.component.ts
@@ -27,7 +27,7 @@ export class LayoutComponent {
   protected sideNavService = inject(SideNavService);
   protected drawerPortal = inject(DrawerService).portal;
 
-  mainContent = viewChild.required<ElementRef<HTMLElement>>("main");
+  private mainContent = viewChild.required<ElementRef<HTMLElement>>("main");
 
   protected focusMainContent() {
     this.mainContent().nativeElement.focus();
diff --git a/libs/components/src/layout/scroll-layout.directive.ts b/libs/components/src/layout/scroll-layout.directive.ts
index 143db4d80ea..d3ea2bf557b 100644
--- a/libs/components/src/layout/scroll-layout.directive.ts
+++ b/libs/components/src/layout/scroll-layout.directive.ts
@@ -2,33 +2,34 @@ import { Directionality } from "@angular/cdk/bidi";
 import { CdkVirtualScrollable, ScrollDispatcher, VIRTUAL_SCROLLABLE } from "@angular/cdk/scrolling";
 import { Directive, ElementRef, NgZone, Optional } from "@angular/core";
 
-import { LayoutComponent } from "./layout.component";
-
 @Directive({
   selector: "cdk-virtual-scroll-viewport[bitScrollLayout]",
   standalone: true,
   providers: [{ provide: VIRTUAL_SCROLLABLE, useExisting: ScrollLayoutDirective }],
 })
 export class ScrollLayoutDirective extends CdkVirtualScrollable {
-  constructor(
-    private layout: LayoutComponent,
-    scrollDispatcher: ScrollDispatcher,
-    ngZone: NgZone,
-    @Optional() dir: Directionality,
-  ) {
-    super(layout.mainContent(), scrollDispatcher, ngZone, dir);
+  private mainRef: ElementRef<HTMLElement>;
+
+  constructor(scrollDispatcher: ScrollDispatcher, ngZone: NgZone, @Optional() dir: Directionality) {
+    const mainEl = document.querySelector("main")!;
+    if (!mainEl) {
+      // eslint-disable-next-line no-console
+      console.error("HTML main element must be an ancestor of [bitScrollLayout]");
+    }
+    const mainRef = new ElementRef(mainEl);
+    super(mainRef, scrollDispatcher, ngZone, dir);
+    this.mainRef = mainRef;
   }
 
   override getElementRef(): ElementRef<HTMLElement> {
-    return this.layout.mainContent();
+    return this.mainRef;
   }
 
   override measureBoundingClientRectWithScrollOffset(
     from: "left" | "top" | "right" | "bottom",
   ): number {
     return (
-      this.layout.mainContent().nativeElement.getBoundingClientRect()[from] -
-      this.measureScrollOffset(from)
+      this.mainRef.nativeElement.getBoundingClientRect()[from] - this.measureScrollOffset(from)
     );
   }
 }