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

This reverts commit a0429d7d09.

libs/components/src/drawer/drawer-body.component.ts

@@ -1,7 +1,7 @@
 import { CdkScrollable } from "@angular/cdk/scrolling";
-import { ChangeDetectionStrategy, Component } from "@angular/core";
-
-import { hasScrolledFrom } from "../utils/has-scrolled-from";
+import { ChangeDetectionStrategy, Component, Signal, inject } from "@angular/core";
+import { toSignal } from "@angular/core/rxjs-interop";
+import { map } from "rxjs";
 
 /**
  * Body container for `bit-drawer`
@@ -14,7 +14,7 @@ import { hasScrolledFrom } from "../utils/has-scrolled-from";
   host: {
     class:
       "tw-p-4 tw-pt-0 tw-block tw-overflow-auto tw-border-solid tw-border tw-border-transparent tw-transition-colors tw-duration-200",
-    "[class.tw-border-t-secondary-300]": "this.hasScrolledFrom().top",
+    "[class.tw-border-t-secondary-300]": "isScrolled()",
   },
   hostDirectives: [
     {
@@ -24,5 +24,13 @@ import { hasScrolledFrom } from "../utils/has-scrolled-from";
   template: ` <ng-content></ng-content> `,
 })
 export class DrawerBodyComponent {
-  protected hasScrolledFrom = hasScrolledFrom();
+  private scrollable = inject(CdkScrollable);
+
+  /** TODO: share this utility with browser popup header? */
+  protected isScrolled: Signal<boolean> = toSignal(
+    this.scrollable
+      .elementScrolled()
+      .pipe(map(() => this.scrollable.measureScrollOffset("top") > 0)),
+    { initialValue: false },
+  );
 }

libs/components/src/drawer/drawer.component.ts

@@ -10,7 +10,7 @@ import {
   viewChild,
 } from "@angular/core";
 
-import { DrawerService } from "./drawer.service";
+import { DrawerHostDirective } from "./drawer-host.directive";
 
 /**
  * A drawer is a panel of supplementary content that is adjacent to the page's main content.
@@ -25,7 +25,7 @@ import { DrawerService } from "./drawer.service";
   templateUrl: "drawer.component.html",
 })
 export class DrawerComponent {
-  private drawerHost = inject(DrawerService);
+  private drawerHost = inject(DrawerHostDirective);
   private portal = viewChild.required(CdkPortal);
 
   /**

libs/components/src/drawer/drawer.mdx

@@ -12,8 +12,6 @@ import { DrawerComponent } from "@bitwarden/components";
 
 # Drawer
 
-**Note: `bit-drawer` is deprecated. Use `bit-dialog` and `DialogService.openDrawer(...)` instead.**
-
 A drawer is a panel of supplementary content that is adjacent to the page's main content.
 
 <Primary />

libs/components/src/drawer/drawer.service.ts

@@ -1,20 +0,0 @@
-import { Portal } from "@angular/cdk/portal";
-import { Injectable, signal } from "@angular/core";
-
-@Injectable({ providedIn: "root" })
-export class DrawerService {
-  private _portal = signal<Portal<unknown> | undefined>(undefined);
-
-  /** The portal to display */
-  portal = this._portal.asReadonly();
-
-  open(portal: Portal<unknown>) {
-    this._portal.set(portal);
-  }
-
-  close(portal: Portal<unknown>) {
-    if (portal === this.portal()) {
-      this._portal.set(undefined);
-    }
-  }
-}