[CL-696] un-revert "various drawer improvements" + bug fix (#14887)

* Revert "Revert "[CL-622][CL-562][CL-621][CL-632] various drawer improvements …"

This reverts commit 4b32d1f9dd.

* fix virtual scroll: add .cdk-virtual-scrollable to scroll viewport target

* remove references to main el

* use directives instead of querySelector (#14950)

* remove references to main el

* wip

* banish querySelector to the shadow realm

* revert apps/ files

* Add virtual scrolling docs

Co-authored-by: Vicki League <vleague@bitwarden.com>

* add jsdoc

* run eslint

* fix skip links bug

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

Co-authored-by: Vicki League <vleague@bitwarden.com>

* update tab handler

* only run on tab

* fix lint

* fix virtual scroll issue due to Angular 19 upgrade (#15193)

thanks Vicki

---------

Co-authored-by: Vicki League <vleague@bitwarden.com>

libs/components/src/dialog/dialog.service.stories.ts

@@ -1,11 +1,17 @@
 import { DIALOG_DATA, DialogRef } from "@angular/cdk/dialog";
 import { Component, Inject } from "@angular/core";
-import { provideAnimations } from "@angular/platform-browser/animations";
-import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
+import { NoopAnimationsModule, provideAnimations } from "@angular/platform-browser/animations";
+import { RouterTestingModule } from "@angular/router/testing";
+import { Meta, StoryObj, applicationConfig, moduleMetadata } from "@storybook/angular";
+import { getAllByRole, userEvent } from "@storybook/test";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 
 import { ButtonModule } from "../button";
+import { IconButtonModule } from "../icon-button";
+import { LayoutComponent } from "../layout";
+import { SharedModule } from "../shared";
+import { positionFixedWrapperDecorator } from "../stories/storybook-decorators";
 import { I18nMockService } from "../utils/i18n-mock.service";
 
 import { DialogModule } from "./dialog.module";
@@ -16,7 +22,12 @@ interface Animal {
 }
 
 @Component({
-  template: `<button bitButton type="button" (click)="openDialog()">Open Dialog</button>`,
+  template: `
+    <bit-layout>
+      <button class="tw-mr-2" bitButton type="button" (click)="openDialog()">Open Dialog</button>
+      <button bitButton type="button" (click)="openDrawer()">Open Drawer</button>
+    </bit-layout>
+  `,
   imports: [ButtonModule],
 })
 class StoryDialogComponent {
@@ -29,6 +40,14 @@ class StoryDialogComponent {
       },
     });
   }
+
+  openDrawer() {
+    this.dialogService.openDrawer(StoryDialogContentComponent, {
+      data: {
+        animal: "panda",
+      },
+    });
+  }
 }
 
 @Component({
@@ -64,7 +83,21 @@ export default {
   title: "Component Library/Dialogs/Service",
   component: StoryDialogComponent,
   decorators: [
+    positionFixedWrapperDecorator(),
     moduleMetadata({
+      declarations: [StoryDialogContentComponent],
+      imports: [
+        SharedModule,
+        ButtonModule,
+        NoopAnimationsModule,
+        DialogModule,
+        IconButtonModule,
+        RouterTestingModule,
+        LayoutComponent,
+      ],
+      providers: [DialogService],
+    }),
+    applicationConfig({
       providers: [
         provideAnimations(),
         DialogService,
@@ -73,7 +106,13 @@ export default {
           useFactory: () => {
             return new I18nMockService({
               close: "Close",
-              loading: "Loading",
+              search: "Search",
+              skipToContent: "Skip to content",
+              submenu: "submenu",
+              toggleCollapse: "toggle collapse",
+              toggleSideNavigation: "Toggle side navigation",
+              yes: "Yes",
+              no: "No",
             });
           },
         },
@@ -90,4 +129,21 @@ export default {
 
 type Story = StoryObj<StoryDialogComponent>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  play: async (context) => {
+    const canvas = context.canvasElement;
+
+    const button = getAllByRole(canvas, "button")[0];
+    await userEvent.click(button);
+  },
+};
+
+/** Drawers must be a descendant of `bit-layout`. */
+export const Drawer: Story = {
+  play: async (context) => {
+    const canvas = context.canvasElement;
+
+    const button = getAllByRole(canvas, "button")[1];
+    await userEvent.click(button);
+  },
+};