[PM-14426] At-risk password Getting Started Carousel (#13383)

* [PM-14426] Add hideIcon input to simple dialog component

* [PM-14426] Introduce dark-image-source.directive.ts

* [PM-14426] Tweaks to the Vault Carousel component
- Create a Carousel NgModule so that the carousel component and carousel slide component are exported
- Update barrel files
- Adjust min height calculation logic to wait for ;hidden slides to finish rendering before calculating height

* [PM-14426] Introduce at risk password getting started carousel component and images

* [PM-14426] Refactor at-risk-password-page.service.ts to use the same state definition for banner and carousel dismissal

* [PM-14426] Open the getting started carousel on page load

* [PM-14426] Add tests

* [PM-14426] Use booleanAttribute

* [PM-14426] Fix failing type checking

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

@@ -3,10 +3,12 @@
   @fadeIn
 >
   <div class="tw-flex tw-flex-col tw-items-center tw-gap-2 tw-px-4 tw-pt-4 tw-text-center">
-    @if (hasIcon) {
-      <ng-content select="[bitDialogIcon]"></ng-content>
-    } @else {
-      <i class="bwi bwi-exclamation-triangle tw-text-3xl tw-text-warning" aria-hidden="true"></i>
+    @if (!hideIcon()) {
+      @if (hasIcon) {
+        <ng-content select="[bitDialogIcon]"></ng-content>
+      } @else {
+        <i class="bwi bwi-exclamation-triangle tw-text-3xl tw-text-warning" aria-hidden="true"></i>
+      }
     }
     <h1
       bitDialogTitleContainer

libs/components/src/dialog/simple-dialog/simple-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, ContentChild, Directive } from "@angular/core";
+import { booleanAttribute, Component, ContentChild, Directive, input } from "@angular/core";
 
 import { TypographyDirective } from "../../typography/typography.directive";
 import { fadeIn } from "../animations";
@@ -20,6 +20,11 @@ export class IconDirective {}
 export class SimpleDialogComponent {
   @ContentChild(IconDirective) icon!: IconDirective;
 
+  /**
+   * Optional flag to hide the dialog's center icon. Defaults to false.
+   */
+  hideIcon = input(false, { transform: booleanAttribute });
+
   get hasIcon() {
     return this.icon != null;
   }

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

@@ -1,5 +1,5 @@
 import { NoopAnimationsModule } from "@angular/platform-browser/animations";
-import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
+import { Meta, moduleMetadata, StoryObj } from "@storybook/angular";
 
 import { ButtonModule } from "../../button";
 import { DialogModule } from "../dialog.module";
@@ -57,8 +57,24 @@ export const CustomIcon: Story = {
   }),
 };
 
+export const HideIcon: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <bit-simple-dialog hideIcon>
+        <span bitDialogTitle>Premium Subscription Available</span>
+        <span bitDialogContent> Message Content</span>
+        <ng-container bitDialogFooter>
+          <button bitButton buttonType="primary">Yes</button>
+          <button bitButton buttonType="secondary">No</button>
+        </ng-container>
+      </bit-simple-dialog>
+    `,
+  }),
+};
+
 export const ScrollingContent: Story = {
-  render: (args: SimpleDialogComponent) => ({
+  render: (args) => ({
     props: args,
     template: `
       <bit-simple-dialog>