Fix broken Storybook: Change ng-template to ng-container for ngIf and rename icon directive (#4816)

* remove added template for ngIf and rename icon directive

* fix regression in product switcher

* fix text color of bulk delete in org vault

* use ng-container for *ngIf

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

@@ -3,9 +3,9 @@
   @fadeIn
 >
   <div class="tw-flex tw-flex-col tw-items-center tw-gap-2 tw-px-4 tw-pt-4 tw-text-center">
-    <ng-template *ngIf="hasIcon; else elseBlock">
-      <ng-content select="[bit-dialog-icon]"></ng-content>
-    </ng-template>
+    <ng-container *ngIf="hasIcon; else elseBlock">
+      <ng-content select="[bitDialogIcon]"></ng-content>
+    </ng-container>
     <ng-template #elseBlock>
       <i class="bwi bwi-exclamation-triangle tw-text-3xl tw-text-warning" aria-hidden="true"></i>
     </ng-template>

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

@@ -2,7 +2,7 @@ import { Component, ContentChild, Directive } from "@angular/core";
 
 import { fadeIn } from "../animations";
 
-@Directive({ selector: "[bit-dialog-icon]" })
+@Directive({ selector: "[bitDialogIcon]" })
 export class IconDirective {}
 
 @Component({

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

@@ -42,7 +42,7 @@ const TemplateWithIcon: Story<SimpleDialogComponent> = (args: SimpleDialogCompon
   props: args,
   template: `
   <bit-simple-dialog>
-      <i bit-dialog-icon class="bwi bwi-star tw-text-3xl tw-text-success" aria-hidden="true"></i>
+      <i bitDialogIcon class="bwi bwi-star tw-text-3xl tw-text-success" aria-hidden="true"></i>
       <span bitDialogTitle>Premium Subscription Available</span>
       <span bitDialogContent> Message Content</span>
       <div bitDialogFooter class="tw-flex tw-flex-row tw-gap-2">