fix virtual scroll; add bitScrollLayout directive

libs/components/src/layout/index.ts

@@ -1 +1,2 @@
 export * from "./layout.component";
+export * from "./scroll-layout.directive";

libs/components/src/layout/layout.component.ts

@@ -25,11 +25,14 @@ import { SharedModule } from "../shared";
 })
 export class LayoutComponent {
   protected mainContentId = "main-content";
-
   protected sideNavService = inject(SideNavService);
   protected drawerPortal = inject(DrawerService).portal;
 
-  focusMainContent() {
-    document.getElementById(this.mainContentId)?.focus();
+  getMainContent() {
+    return document.getElementById(this.mainContentId)!;
+  }
+
+  protected focusMainContent() {
+    this.getMainContent().focus();
   }
 }

libs/components/src/layout/scroll-layout.directive.ts

@@ -0,0 +1,35 @@
+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 {
+  private mainEl: ElementRef<HTMLElement>;
+
+  constructor(
+    layout: LayoutComponent,
+    scrollDispatcher: ScrollDispatcher,
+    ngZone: NgZone,
+    @Optional() dir: Directionality,
+  ) {
+    const mainEl = new ElementRef(layout.getMainContent());
+    super(mainEl, scrollDispatcher, ngZone, dir);
+    this.mainEl = mainEl;
+  }
+
+  override getElementRef(): ElementRef<HTMLElement> {
+    return this.mainEl;
+  }
+
+  override measureBoundingClientRectWithScrollOffset(
+    from: "left" | "top" | "right" | "bottom",
+  ): number {
+    return this.mainEl.nativeElement.getBoundingClientRect()[from] - this.measureScrollOffset(from);
+  }
+}

libs/components/src/stories/kitchen-sink/components/dialog-virtual-scroll-block.component.ts

@@ -3,15 +3,23 @@ import { Component, OnInit } from "@angular/core";
 
 import { DialogModule, DialogService } from "../../../dialog";
 import { IconButtonModule } from "../../../icon-button";
+import { ScrollLayoutDirective } from "../../../layout";
 import { SectionComponent } from "../../../section";
 import { TableDataSource, TableModule } from "../../../table";
 
 @Component({
   selector: "dialog-virtual-scroll-block",
   standalone: true,
-  imports: [DialogModule, IconButtonModule, SectionComponent, TableModule, ScrollingModule],
+  imports: [
+    DialogModule,
+    IconButtonModule,
+    SectionComponent,
+    TableModule,
+    ScrollingModule,
+    ScrollLayoutDirective,
+  ],
   template: /*html*/ `<bit-section>
-    <cdk-virtual-scroll-viewport scrollWindow itemSize="47">
+    <cdk-virtual-scroll-viewport bitScrollLayout itemSize="63.5">
       <bit-table [dataSource]="dataSource">
         <ng-container header>
           <tr>