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

apps/web/src/app/vault/individual-vault/vault-items.component.html

@@ -62,11 +62,13 @@
                 <i class="bwi bwi-fw bwi-undo" aria-hidden="true"></i>
                 {{ "restoreSelected" | i18n }}
               </button>
-              <button bitMenuItem class="tw-text-danger" (click)="bulkDelete()">
-                <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>
-                {{
-                  (activeFilter.isDeleted ? "permanentlyDeleteSelected" : "deleteSelected") | i18n
-                }}
+              <button bitMenuItem (click)="bulkDelete()">
+                <span class="tw-text-danger">
+                  <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>
+                  {{
+                    (activeFilter.isDeleted ? "permanentlyDeleteSelected" : "deleteSelected") | i18n
+                  }}
+                </span>
               </button>
             </ng-container>
           </bit-menu>

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

@@ -1,5 +1,5 @@
 <bit-simple-dialog>
-  <i bit-dialog-icon class="bwi tw-text-3xl" [class]="iconClasses" aria-hidden="true"></i>
+  <i bitDialogIcon class="bwi tw-text-3xl" [class]="iconClasses" aria-hidden="true"></i>
 
   <span bitDialogTitle>{{ title }}</span>
 

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">

libs/components/src/menu/menu.component.html

@@ -5,6 +5,7 @@
     [attr.role]="ariaRole"
     [attr.aria-label]="ariaLabel"
     cdkTrapFocus
+    [cdkTrapFocusAutoCapture]="ariaRole === 'dialog'"
   >
     <ng-content></ng-content>
   </div>