[CL-927] anon layout header actions slot (#17796)

* add a slot for consumers to show user actions in anon layout header

* remove commented code

* ensure logo stays top aligned

* switch to dashed naming

* fix ngif statements

* remove empty selector

* remove unnecessary containers

* use smaller logo on smaller screens

* remove commented code from extension layout

* remove dupe slot

* only take extension screenshots on small screens

* take screenshot at 380

* take large and small screenshot

* update story to use new control flow

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

@@ -5,13 +5,19 @@
     'tw-min-h-full': clientType === 'browser' || clientType === 'desktop',
   }"
 >
-  <a
-    *ngIf="!hideLogo()"
-    [routerLink]="['/']"
-    class="tw-w-[200px] tw-block tw-mb-12 [&>*]:tw-align-top"
-  >
-    <bit-icon [icon]="logo" [ariaLabel]="'appLogoLabel' | i18n"></bit-icon>
-  </a>
+  <div class="tw-flex tw-justify-between tw-items-center tw-w-full tw-mb-12">
+    @if (!hideLogo()) {
+      <a
+        [routerLink]="['/']"
+        class="tw-w-32 sm:tw-w-[200px] tw-self-center sm:tw-self-start tw-block [&>*]:tw-align-top"
+      >
+        <bit-icon [icon]="logo" [ariaLabel]="'appLogoLabel' | i18n"></bit-icon>
+      </a>
+    }
+    <div class="tw-ms-auto">
+      <ng-content select="[slot=header-actions]"></ng-content>
+    </div>
+  </div>
 
   <div class="tw-text-center tw-mb-4 sm:tw-mb-6 tw-mx-auto" [ngClass]="maxWidthClass">
     @let iconInput = icon();
@@ -25,7 +31,7 @@
       <bit-icon [icon]="iconInput"></bit-icon>
     </div>
 
-    <ng-container *ngIf="title()">
+    @if (title()) {
       <!-- Small screens -->
       <h1 bitTypography="h2" class="tw-mt-2 sm:tw-hidden">
         {{ title() }}
@@ -34,9 +40,11 @@
       <h1 bitTypography="h1" class="tw-mt-2 tw-hidden sm:tw-block">
         {{ title() }}
       </h1>
-    </ng-container>
+    }
 
-    <div *ngIf="subtitle()" class="tw-text-sm sm:tw-text-base">{{ subtitle() }}</div>
+    @if (subtitle()) {
+      <div class="tw-text-sm sm:tw-text-base">{{ subtitle() }}</div>
+    }
   </div>
 
   <div
@@ -57,18 +65,20 @@
     <ng-content select="[slot=secondary]"></ng-content>
   </div>
 
-  <footer *ngIf="!hideFooter()" class="tw-text-center tw-mt-4 sm:tw-mt-6">
-    <div *ngIf="showReadonlyHostname()" bitTypography="body2">
-      {{ "accessing" | i18n }} {{ hostname }}
-    </div>
-    <ng-container *ngIf="!showReadonlyHostname()">
-      <ng-content select="[slot=environment-selector]"></ng-content>
-    </ng-container>
-    <ng-container *ngIf="!hideYearAndVersion">
-      <div bitTypography="body2">&copy; {{ year }} Bitwarden Inc.</div>
-      <div bitTypography="body2">{{ version }}</div>
-    </ng-container>
-  </footer>
+  @if (!hideFooter()) {
+    <footer class="tw-text-center tw-mt-4 sm:tw-mt-6">
+      @if (showReadonlyHostname()) {
+        <div bitTypography="body2">{{ "accessing" | i18n }} {{ hostname }}</div>
+      } @else {
+        <ng-content select="[slot=environment-selector]"></ng-content>
+      }
+
+      @if (!hideYearAndVersion) {
+        <div bitTypography="body2">&copy; {{ year }} Bitwarden Inc.</div>
+        <div bitTypography="body2">{{ version }}</div>
+      }
+    </footer>
+  }
 
   @if (!hideBackgroundIllustration()) {
     <div