[PM-26514] Archive With Non Premium User (#17820)

* Add callout for archive non premium, add premium check, add archive badge to view/edit modal, update btn text

libs/components/src/dialog/dialog/dialog.component.html

@@ -34,16 +34,21 @@
       }
       <ng-content select="[bitDialogTitle]"></ng-content>
     </h2>
-    @if (!this.dialogRef?.disableClose) {
-      <button
-        type="button"
-        bitIconButton="bwi-close"
-        buttonType="main"
-        size="default"
-        bitDialogClose
-        [label]="'close' | i18n"
-      ></button>
-    }
+
+    <div class="tw-flex tw-items-center tw-justify-center">
+      <ng-content select="[bitDialogHeaderEnd]"></ng-content>
+
+      @if (!this.dialogRef?.disableClose) {
+        <button
+          type="button"
+          bitIconButton="bwi-close"
+          buttonType="main"
+          size="default"
+          bitDialogClose
+          [label]="'close' | i18n"
+        ></button>
+      }
+    </div>
   </header>
 
   <div

libs/components/src/dialog/dialog/dialog.stories.ts

@@ -94,6 +94,7 @@ export const Default: Story = {
         <ng-container bitDialogTitle>
           <span bitBadge variant="success">Foobar</span>
         </ng-container>
+
         <ng-container bitDialogContent>Dialog body text goes here.</ng-container>
         <ng-container bitDialogFooter>
           <button type="button" bitButton buttonType="primary" [disabled]="loading">Save</button>
@@ -292,3 +293,42 @@ export const WithCards: Story = {
     disableAnimations: true,
   },
 };
+
+export const HeaderEnd: Story = {
+  render: (args) => ({
+    props: args,
+    template: /*html*/ `
+      <bit-dialog
+        [dialogSize]="dialogSize"
+        [title]="title"
+        [subtitle]="subtitle"
+        [loading]="loading"
+        [disablePadding]="disablePadding"
+        [disableAnimations]="disableAnimations">
+
+        <ng-container bitDialogHeaderEnd>
+          <span bitBadge>Archived</span>
+        </ng-container>
+
+        <ng-container bitDialogContent>Dialog body text goes here.</ng-container>
+        <ng-container bitDialogFooter>
+          <button type="button" bitButton buttonType="primary" [disabled]="loading">Save</button>
+          <button type="button" bitButton buttonType="secondary" [disabled]="loading">Cancel</button>
+          <button
+            type="button"
+            [disabled]="loading"
+            class="tw-ms-auto"
+            bitIconButton="bwi-trash"
+            buttonType="danger"
+            size="default"
+            label="Delete"></button>
+        </ng-container>
+      </bit-dialog>
+    `,
+  }),
+  args: {
+    dialogSize: "small",
+    title: "Very Long Title That Should Be Truncated After Two Lines To Test Header End Slot",
+    subtitle: "Subtitle",
+  },
+};