[CL-167] Replace title slot with title-suffix for web header (#7571)

apps/web/src/app/layouts/header/web-header.component.html

@@ -9,11 +9,7 @@
   <div class="tw-flex">
     <div class="tw-flex tw-min-w-0 tw-flex-1 tw-flex-col tw-gap-2">
       <ng-content select="[slot=breadcrumbs]"></ng-content>
-      <div #titleContainer [ngClass]="{ 'tw-hidden': titleContainer.childElementCount === 0 }">
-        <ng-content select="[slot=title]"></ng-content>
-      </div>
       <h1
-        *ngIf="titleContainer.childElementCount === 0"
         bitTypography="h1"
         noMargin
         class="tw-m-0 tw-mr-2 tw-truncate tw-leading-10"
@@ -21,6 +17,7 @@
       >
         <i *ngIf="icon" class="bwi {{ icon }}" aria-hidden="true"></i>
         {{ title || (routeData.titleId | i18n) }}
+        <ng-content select="[slot=title-suffix]"></ng-content>
       </h1>
     </div>
     <div class="tw-ml-auto tw-flex tw-flex-col tw-gap-4">

apps/web/src/app/layouts/header/web-header.stories.ts

@@ -209,11 +209,11 @@ export const WithTabs: Story = (args) => ({
   `,
 });
 
-export const WithCustomTitleComponent: Story = (args) => ({
+export const WithTitleSuffixComponent: Story = (args) => ({
   props: args,
   template: `
     <app-header title="Foobar" icon="bwi-bug" class="tw-text-main">
-      <h1 slot="title" class="tw-text-3xl tw-font-semibold" style="font-family: 'Comic Sans MS'">Bitwarden</h1>
+      <ng-container slot="title-suffix"><i class="bwi bwi-spinner bwi-spin"></i></ng-container>
     </app-header>
   `,
 });