Revert "[CL-622][CL-562][CL-621][CL-632] various drawer improvements (#14120)" (#14827)

This reverts commit a0429d7d09.

libs/components/src/layout/index.ts

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

libs/components/src/layout/layout.component.html

@@ -1,52 +1,43 @@
-@let mainContentId = "main-content";
-<div class="tw-flex tw-w-full">
-  <div class="tw-flex tw-w-full" cdkTrapFocus>
-    <div
-      class="tw-fixed tw-z-50 tw-w-full tw-flex tw-justify-center tw-opacity-0 focus-within:tw-opacity-100 tw-pointer-events-none focus-within:tw-pointer-events-auto"
+<div
+  class="tw-fixed tw-z-50 tw-w-full tw-flex tw-justify-center tw-opacity-0 focus-within:tw-opacity-100 tw-pointer-events-none focus-within:tw-pointer-events-auto"
+>
+  <nav class="tw-bg-background-alt3 tw-rounded-md tw-rounded-t-none tw-py-2 tw-text-alt2">
+    <a
+      bitLink
+      class="tw-mx-6 focus-visible:before:!tw-ring-0"
+      [fragment]="mainContentId"
+      [routerLink]="[]"
+      (click)="focusMainContent()"
+      linkType="light"
+      >{{ "skipToContent" | i18n }}</a
     >
-      <nav class="tw-bg-background-alt3 tw-rounded-md tw-rounded-t-none tw-py-2 tw-text-alt2">
-        <a
-          bitLink
-          class="tw-mx-6 focus-visible:before:!tw-ring-0"
-          [fragment]="mainContentId"
-          [routerLink]="[]"
-          (click)="focusMainContent()"
-          linkType="light"
-          >{{ "skipToContent" | i18n }}</a
-        >
-      </nav>
-    </div>
-    <ng-content select="bit-side-nav, [slot=side-nav]"></ng-content>
-    <main
-      #main
-      [id]="mainContentId"
-      tabindex="-1"
-      class="tw-overflow-auto tw-max-h-screen tw-min-w-0 tw-flex-1 tw-bg-background tw-p-6 md:tw-ml-0 tw-ml-16"
-    >
-      <ng-content></ng-content>
-
-      <!-- overlay backdrop for side-nav -->
-      @if (
-        {
-          open: sideNavService.open$ | async,
-        };
-        as data
-      ) {
-        <div
-          class="tw-pointer-events-none tw-fixed tw-inset-0 tw-z-10 tw-bg-black tw-bg-opacity-0 motion-safe:tw-transition-colors md:tw-hidden"
-          [ngClass]="[data.open ? 'tw-bg-opacity-30 md:tw-bg-opacity-0' : 'tw-bg-opacity-0']"
-        >
-          @if (data.open) {
-            <div
-              (click)="sideNavService.toggle()"
-              class="tw-pointer-events-auto tw-size-full"
-            ></div>
-          }
-        </div>
-      }
-    </main>
-  </div>
-  <div class="tw-absolute tw-z-50 tw-left-0 md:tw-sticky tw-top-0 tw-h-screen md:tw-w-auto">
-    <ng-template [cdkPortalOutlet]="drawerPortal()"></ng-template>
-  </div>
+  </nav>
+</div>
+<div class="tw-flex tw-w-full">
+  <ng-content select="bit-side-nav, [slot=side-nav]"></ng-content>
+  <main
+    [id]="mainContentId"
+    tabindex="-1"
+    class="tw-overflow-auto tw-min-w-0 tw-flex-1 tw-bg-background tw-p-6 md:tw-ml-0 tw-ml-16"
+  >
+    <ng-content></ng-content>
+
+    <!-- overlay backdrop for side-nav -->
+    @if (
+      {
+        open: sideNavService.open$ | async,
+      };
+      as data
+    ) {
+      <div
+        class="tw-pointer-events-none tw-fixed tw-inset-0 tw-z-10 tw-bg-black tw-bg-opacity-0 motion-safe:tw-transition-colors md:tw-hidden"
+        [ngClass]="[data.open ? 'tw-bg-opacity-30 md:tw-bg-opacity-0' : 'tw-bg-opacity-0']"
+      >
+        @if (data.open) {
+          <div (click)="sideNavService.toggle()" class="tw-pointer-events-auto tw-size-full"></div>
+        }
+      </div>
+    }
+  </main>
+  <ng-template [cdkPortalOutlet]="drawerPortal()"></ng-template>
 </div>

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

@@ -1,10 +1,9 @@
-import { A11yModule, CdkTrapFocus } from "@angular/cdk/a11y";
 import { PortalModule } from "@angular/cdk/portal";
 import { CommonModule } from "@angular/common";
-import { Component, ElementRef, inject, viewChild } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { RouterModule } from "@angular/router";
 
-import { DrawerService } from "../drawer/drawer.service";
+import { DrawerHostDirective } from "../drawer/drawer-host.directive";
 import { LinkModule } from "../link";
 import { SideNavService } from "../navigation/side-nav.service";
 import { SharedModule } from "../shared";
@@ -13,23 +12,16 @@ import { SharedModule } from "../shared";
   selector: "bit-layout",
   templateUrl: "layout.component.html",
   standalone: true,
-  imports: [
-    CommonModule,
-    SharedModule,
-    LinkModule,
-    RouterModule,
-    PortalModule,
-    A11yModule,
-    CdkTrapFocus,
-  ],
+  imports: [CommonModule, SharedModule, LinkModule, RouterModule, PortalModule],
+  hostDirectives: [DrawerHostDirective],
 })
 export class LayoutComponent {
+  protected mainContentId = "main-content";
+
   protected sideNavService = inject(SideNavService);
-  protected drawerPortal = inject(DrawerService).portal;
+  protected drawerPortal = inject(DrawerHostDirective).portal;
 
-  private mainContent = viewChild.required<ElementRef<HTMLElement>>("main");
-
-  protected focusMainContent() {
-    this.mainContent().nativeElement.focus();
+  focusMainContent() {
+    document.getElementById(this.mainContentId)?.focus();
   }
 }

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

@@ -1,35 +0,0 @@
-import { Directionality } from "@angular/cdk/bidi";
-import { CdkVirtualScrollable, ScrollDispatcher, VIRTUAL_SCROLLABLE } from "@angular/cdk/scrolling";
-import { Directive, ElementRef, NgZone, Optional } from "@angular/core";
-
-@Directive({
-  selector: "cdk-virtual-scroll-viewport[bitScrollLayout]",
-  standalone: true,
-  providers: [{ provide: VIRTUAL_SCROLLABLE, useExisting: ScrollLayoutDirective }],
-})
-export class ScrollLayoutDirective extends CdkVirtualScrollable {
-  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.mainRef;
-  }
-
-  override measureBoundingClientRectWithScrollOffset(
-    from: "left" | "top" | "right" | "bottom",
-  ): number {
-    return (
-      this.mainRef.nativeElement.getBoundingClientRect()[from] - this.measureScrollOffset(from)
-    );
-  }
-}