[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>

apps/web/src/app/admin-console/organizations/manage/groups.component.html

@@ -22,7 +22,7 @@
   <p *ngIf="!dataSource.filteredData.length">{{ "noGroupsInList" | i18n }}</p>
   <!-- The padding on the bottom of the cdk-virtual-scroll-viewport element is required to prevent table row content
   from overflowing the <main> element. -->
-  <cdk-virtual-scroll-viewport scrollWindow [itemSize]="rowHeight" class="tw-pb-8">
+  <cdk-virtual-scroll-viewport bitScrollLayout [itemSize]="rowHeight" class="tw-pb-8">
     <bit-table *ngIf="dataSource.filteredData.length" [dataSource]="dataSource">
       <ng-container header>
         <tr>

apps/web/src/app/admin-console/organizations/members/members.component.html

@@ -75,7 +75,7 @@
     </bit-callout>
     <!-- The padding on the bottom of the cdk-virtual-scroll-viewport element is required to prevent table row content
     from overflowing the <main> element. -->
-    <cdk-virtual-scroll-viewport scrollWindow [itemSize]="rowHeight" class="tw-pb-8">
+    <cdk-virtual-scroll-viewport bitScrollLayout [itemSize]="rowHeight" class="tw-pb-8">
       <bit-table [dataSource]="dataSource">
         <ng-container header>
           <tr>

apps/web/src/app/admin-console/organizations/members/members.module.ts

@@ -3,6 +3,7 @@ import { NgModule } from "@angular/core";
 
 import { PasswordStrengthV2Component } from "@bitwarden/angular/tools/password-strength/password-strength-v2.component";
 import { PasswordCalloutComponent } from "@bitwarden/auth/angular";
+import { ScrollLayoutDirective } from "@bitwarden/components";
 
 import { LooseComponentsModule } from "../../../shared";
 import { SharedOrganizationModule } from "../shared";
@@ -27,6 +28,7 @@ import { MembersComponent } from "./members.component";
     PasswordCalloutComponent,
     ScrollingModule,
     PasswordStrengthV2Component,
+    ScrollLayoutDirective,
   ],
   declarations: [
     BulkConfirmDialogComponent,

apps/web/src/app/admin-console/organizations/organization.module.ts

@@ -1,6 +1,8 @@
 import { ScrollingModule } from "@angular/cdk/scrolling";
 import { NgModule } from "@angular/core";
 
+import { ScrollLayoutDirective } from "@bitwarden/components";
+
 import { LooseComponentsModule } from "../../shared";
 
 import { CoreOrganizationModule } from "./core";
@@ -18,6 +20,7 @@ import { AccessSelectorModule } from "./shared/components/access-selector";
     OrganizationsRoutingModule,
     LooseComponentsModule,
     ScrollingModule,
+    ScrollLayoutDirective,
   ],
   declarations: [GroupsComponent, GroupAddEditComponent],
 })

apps/web/src/app/admin-console/organizations/shared/components/collection-dialog/collection-dialog.component.ts

@@ -591,5 +591,5 @@ export function openCollectionDialog(
   dialogService: DialogService,
   config: DialogConfig<CollectionDialogParams, DialogRef<CollectionDialogResult>>,
 ) {
-  return dialogService.open(CollectionDialogComponent, config);
+  return dialogService.open<CollectionDialogResult>(CollectionDialogComponent, config);
 }