[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);
 }

apps/web/src/app/auth/settings/security/device-management.component.spec.ts

@@ -9,7 +9,13 @@ import { DeviceType } from "@bitwarden/common/enums";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
 import { MessageListener } from "@bitwarden/common/platform/messaging";
-import { DialogService, ToastService, TableModule, PopoverModule } from "@bitwarden/components";
+import {
+  DialogService,
+  ToastService,
+  TableModule,
+  PopoverModule,
+  LayoutComponent,
+} from "@bitwarden/components";
 
 import { SharedModule } from "../../../shared";
 import { VaultBannersService } from "../../../vault/individual-vault/vault-banners/services/vault-banners.service";
@@ -115,6 +121,12 @@ describe("DeviceManagementComponent", () => {
             showError: jest.fn(),
           },
         },
+        {
+          provide: LayoutComponent,
+          useValue: {
+            mainContent: jest.fn(),
+          },
+        },
       ],
     }).compileComponents();
 

apps/web/src/app/billing/members/add-sponsorship-dialog.component.ts

@@ -1,4 +1,3 @@
-import { DIALOG_DATA, DialogConfig, DialogRef } from "@angular/cdk/dialog";
 import { Component, Inject } from "@angular/core";
 import {
   AbstractControl,
@@ -19,7 +18,10 @@ import { EncryptService } from "@bitwarden/common/key-management/crypto/abstract
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { OrgKey } from "@bitwarden/common/types/key";
 import {
+  DialogRef,
   ButtonModule,
+  DialogConfig,
+  DIALOG_DATA,
   DialogModule,
   DialogService,
   FormFieldModule,

apps/web/src/app/billing/members/free-bitwarden-families.component.ts

@@ -1,4 +1,3 @@
-import { DialogRef } from "@angular/cdk/dialog";
 import { formatDate } from "@angular/common";
 import { Component, OnInit, signal } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
@@ -16,7 +15,7 @@ import { EncString } from "@bitwarden/common/platform/models/domain/enc-string";
 import { StateProvider } from "@bitwarden/common/platform/state";
 import { OrganizationId, UserId } from "@bitwarden/common/types/guid";
 import { OrgKey } from "@bitwarden/common/types/key";
-import { DialogService, ToastService } from "@bitwarden/components";
+import { DialogRef, DialogService, ToastService } from "@bitwarden/components";
 import { KeyService } from "@bitwarden/key-management";
 
 import { AddSponsorshipDialogComponent } from "./add-sponsorship-dialog.component";

apps/web/src/app/vault/components/vault-items/vault-items.component.html

@@ -1,4 +1,4 @@
-<cdk-virtual-scroll-viewport [itemSize]="RowHeight" scrollWindow class="tw-pb-8">
+<cdk-virtual-scroll-viewport [itemSize]="RowHeight" bitScrollLayout class="tw-pb-8">
   <bit-table [dataSource]="dataSource" layout="fixed">
     <ng-container header>
       <tr>

apps/web/src/app/vault/components/vault-items/vault-items.module.ts

@@ -3,7 +3,7 @@ import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 import { RouterModule } from "@angular/router";
 
-import { TableModule } from "@bitwarden/components";
+import { ScrollLayoutDirective, TableModule } from "@bitwarden/components";
 
 import { CollectionNameBadgeComponent } from "../../../admin-console/organizations/collections";
 import { GroupBadgeModule } from "../../../admin-console/organizations/collections/group-badge/group-badge.module";
@@ -26,6 +26,7 @@ import { VaultItemsComponent } from "./vault-items.component";
     CollectionNameBadgeComponent,
     GroupBadgeModule,
     PipesModule,
+    ScrollLayoutDirective,
   ],
   declarations: [VaultItemsComponent, VaultCipherRowComponent, VaultCollectionRowComponent],
   exports: [VaultItemsComponent],

apps/web/src/app/vault/components/vault-items/vault-items.stories.ts

@@ -2,7 +2,13 @@
 // @ts-strict-ignore
 import { importProvidersFrom } from "@angular/core";
 import { RouterModule } from "@angular/router";
-import { applicationConfig, Meta, moduleMetadata, StoryObj } from "@storybook/angular";
+import {
+  applicationConfig,
+  componentWrapperDecorator,
+  Meta,
+  moduleMetadata,
+  StoryObj,
+} from "@storybook/angular";
 import { BehaviorSubject, of } from "rxjs";
 
 import {
@@ -29,6 +35,7 @@ import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { LoginUriView } from "@bitwarden/common/vault/models/view/login-uri.view";
 import { LoginView } from "@bitwarden/common/vault/models/view/login.view";
 import { CipherAuthorizationService } from "@bitwarden/common/vault/services/cipher-authorization.service";
+import { LayoutComponent } from "@bitwarden/components";
 import { RestrictedItemTypesService } from "@bitwarden/vault";
 
 import { GroupView } from "../../../admin-console/organizations/core";
@@ -49,8 +56,9 @@ export default {
   title: "Web/Vault/Items",
   component: VaultItemsComponent,
   decorators: [
+    componentWrapperDecorator((story) => `<bit-layout>${story}</bit-layout>`),
     moduleMetadata({
-      imports: [VaultItemsModule, RouterModule],
+      imports: [VaultItemsModule, RouterModule, LayoutComponent],
       providers: [
         {
           provide: EnvironmentService,