[PM-8236] Move AnonLayoutWrapperComponent to Libs (#9272)

* move to libs/auth

* add tw-max-w-md to anonlayout

libs/auth/src/angular/anon-layout/anon-layout-wrapper.component.ts

@@ -5,6 +5,12 @@ import { AnonLayoutComponent } from "@bitwarden/auth/angular";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { Icon } from "@bitwarden/components";
 
+export interface AnonLayoutWrapperData {
+  pageTitle: string;
+  pageSubtitle: string;
+  pageIcon: Icon;
+}
+
 @Component({
   standalone: true,
   templateUrl: "anon-layout-wrapper.component.html",

libs/auth/src/angular/anon-layout/anon-layout.component.html

@@ -13,7 +13,7 @@
     </h1>
     <p *ngIf="subtitle" bitTypography="body1">{{ subtitle }}</p>
   </div>
-  <div class="tw-mb-auto tw-mx-auto tw-flex tw-flex-col tw-items-center">
+  <div class="tw-mb-auto tw-max-w-md tw-mx-auto tw-flex tw-flex-col tw-items-center">
     <div
       class="tw-rounded-xl tw-mb-9 tw-mx-auto sm:tw-bg-background sm:tw-border sm:tw-border-solid sm:tw-border-secondary-300 sm:tw-p-8"
     >

libs/auth/src/angular/anon-layout/anon-layout.mdx

@@ -31,14 +31,13 @@ writing:
 Instead the AnonLayoutComponent is implemented solely in the router via routable composition, which
 gives us the advantages of nested routes in Angular.
 
-To allow for routable composition, Auth will also provide a wrapper component in each client, called
-AnonLayout**Wrapper**Component.
+To allow for routable composition, Auth also provides an AnonLayout**Wrapper**Component which embeds
+the AnonLayoutComponent.
 
 For clarity:
 
-- AnonLayoutComponent = the Auth-owned library component - `<auth-anon-layout>`
-- AnonLayout**Wrapper**Component = the client-specific wrapper component to be used in a client
-  routing module
+- AnonLayoutComponent = the base, Auth-owned library component - `<auth-anon-layout>`
+- AnonLayout**Wrapper**Component = the wrapper to be used in client routing modules
 
 The AnonLayout**Wrapper**Component embeds the AnonLayoutComponent along with the router outlets:
 
@@ -79,7 +78,7 @@ example) to construct the page via routable composition:
           pageTitle: "logIn", // example of a translation key from messages.json
           pageSubtitle: "loginWithMasterPassword", // example of a translation key from messages.json
           pageIcon: LockIcon, // example of an icon to pass in
-        },
+        } satisfies AnonLayoutWrapperData,
       },
     ],
   },
@@ -99,7 +98,7 @@ In the `oss-routing.module.ts` example above, notice the data properties being p
 All 3 of these properties are optional.
 
 ```javascript
-import { LockIcon } from "@bitwarden/auth/angular";
+import { AnonLayoutWrapperData, LockIcon } from "@bitwarden/auth/angular";
 
 // ...
 
@@ -109,7 +108,7 @@ import { LockIcon } from "@bitwarden/auth/angular";
     pageTitle: "logIn",
     pageSubtitle: "loginWithMasterPassword",
     pageIcon: LockIcon,
-  },
+  } satisfies AnonLayoutWrapperData,
 }
 ```
 

libs/auth/src/angular/anon-layout/anon-layout.stories.ts

@@ -41,7 +41,7 @@ export const WithPrimaryContent: Story = {
       // Projected content (the <div>) and styling is just a sample and can be replaced with any content/styling.
       `
       <auth-anon-layout [title]="title" [subtitle]="subtitle">
-        <div class="tw-max-w-md">
+        <div>
           <div class="tw-font-bold">Primary Projected Content Area (customizable)</div>
           <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus illum vero, placeat recusandae esse ratione eius minima veniam nemo, quas beatae! Impedit molestiae alias sapiente explicabo. Sapiente corporis ipsa numquam?</div>
         </div>
@@ -58,12 +58,12 @@ export const WithSecondaryContent: Story = {
       // Notice that slot="secondary" is requred to project any secondary content.
       `
       <auth-anon-layout [title]="title" [subtitle]="subtitle">
-        <div class="tw-max-w-md">
+        <div>
           <div class="tw-font-bold">Primary Projected Content Area (customizable)</div>
           <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus illum vero, placeat recusandae esse ratione eius minima veniam nemo, quas beatae! Impedit molestiae alias sapiente explicabo. Sapiente corporis ipsa numquam?</div>
         </div>
 
-        <div slot="secondary" class="text-center tw-max-w-md">
+        <div slot="secondary" class="text-center">
           <div class="tw-font-bold tw-mb-2">Secondary Projected Content (optional)</div>
           <button bitButton>Perform Action</button>
         </div>
@@ -79,12 +79,12 @@ export const WithLongContent: Story = {
       // Projected content (the <div>'s) and styling is just a sample and can be replaced with any content/styling.
       `
       <auth-anon-layout title="Page Title lorem ipsum dolor consectetur sit amet expedita quod est" subtitle="Subtitle here Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita, quod est?">
-        <div class="tw-max-w-md">
+        <div>
           <div class="tw-font-bold">Primary Projected Content Area (customizable)</div>
           <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus illum vero, placeat recusandae esse ratione eius minima veniam nemo, quas beatae! Impedit molestiae alias sapiente explicabo. Sapiente corporis ipsa numquam? Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
         </div>
 
-        <div slot="secondary" class="text-center tw-max-w-md">
+        <div slot="secondary" class="text-center">
           <div class="tw-font-bold tw-mb-2">Secondary Projected Content (optional)</div>
           <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias laborum nostrum natus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias laborum nostrum natus. Expedita, quod est?          </p>
           <button bitButton>Perform Action</button>
@@ -101,7 +101,7 @@ export const WithIcon: Story = {
       // Projected content (the <div>) and styling is just a sample and can be replaced with any content/styling.
       `
       <auth-anon-layout [title]="title" [subtitle]="subtitle" [icon]="icon">
-        <div class="tw-max-w-md">
+        <div>
           <div class="tw-font-bold">Primary Projected Content Area (customizable)</div>
           <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus illum vero, placeat recusandae esse ratione eius minima veniam nemo, quas beatae! Impedit molestiae alias sapiente explicabo. Sapiente corporis ipsa numquam?</div>
         </div>

libs/auth/src/angular/index.ts

@@ -6,6 +6,7 @@
 export * from "./icons";
 
 export * from "./anon-layout/anon-layout.component";
+export * from "./anon-layout/anon-layout-wrapper.component";
 export * from "./fingerprint-dialog/fingerprint-dialog.component";
 export * from "./password-callout/password-callout.component";