[CL-428] create drawer component (#12812)

* remove private/protected/lifecycle fields from Storybook docs table

* move theme override decorator into util method

* implement base drawer component

* update bit-layout to be drawer container

* create drawer helper components

* expose new APIs to DS barrel file

* write docs

* update docs; add role input

* use host directive instead of service

* clean up logic a tad

* add start slot to story

* update docs

* Apply suggestions from code review

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

* update docs

* Update libs/components/src/drawer/drawer.mdx

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

* update docs / stories

* add non text element to drawer

---------

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

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

@@ -37,4 +37,5 @@
       ></div>
     </div>
   </main>
+  <ng-template [cdkPortalOutlet]="drawerPortal()"></ng-template>
 </div>

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

@@ -1,7 +1,9 @@
+import { PortalModule } from "@angular/cdk/portal";
 import { CommonModule } from "@angular/common";
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { RouterModule } from "@angular/router";
 
+import { DrawerHostDirective } from "../drawer/drawer-host.directive";
 import { LinkModule } from "../link";
 import { SideNavService } from "../navigation/side-nav.service";
 import { SharedModule } from "../shared";
@@ -10,12 +12,14 @@ import { SharedModule } from "../shared";
   selector: "bit-layout",
   templateUrl: "layout.component.html",
   standalone: true,
-  imports: [CommonModule, SharedModule, LinkModule, RouterModule],
+  imports: [CommonModule, SharedModule, LinkModule, RouterModule, PortalModule],
+  hostDirectives: [DrawerHostDirective],
 })
 export class LayoutComponent {
   protected mainContentId = "main-content";
 
-  constructor(protected sideNavService: SideNavService) {}
+  protected sideNavService = inject(SideNavService);
+  protected drawerPortal = inject(DrawerHostDirective).portal;
 
   focusMainContent() {
     document.getElementById(this.mainContentId)?.focus();

libs/components/src/layout/layout.stories.ts

@@ -6,10 +6,11 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 
 import { CalloutModule } from "../callout";
 import { NavigationModule } from "../navigation";
+import { positionFixedWrapperDecorator } from "../stories/storybook-decorators";
 import { I18nMockService } from "../utils/i18n-mock.service";
-import { positionFixedWrapperDecorator } from "../utils/position-fixed-wrapper-decorator";
 
 import { LayoutComponent } from "./layout.component";
+import { mockLayoutI18n } from "./mocks";
 
 export default {
   title: "Component Library/Layout",
@@ -22,12 +23,7 @@ export default {
         {
           provide: I18nService,
           useFactory: () => {
-            return new I18nMockService({
-              toggleSideNavigation: "Toggle side navigation",
-              skipToContent: "Skip to content",
-              submenu: "submenu",
-              toggleCollapse: "toggle collapse",
-            });
+            return new I18nMockService(mockLayoutI18n);
           },
         },
       ],

libs/components/src/layout/mocks.ts

@@ -0,0 +1,7 @@
+/** TODO: create mock messages.json file for all of CL in favor of sharing per-Story mocks */
+export const mockLayoutI18n = {
+  toggleSideNavigation: "Toggle side navigation",
+  skipToContent: "Skip to content",
+  submenu: "submenu",
+  toggleCollapse: "toggle collapse",
+};