[SM-303] feat: add fadeIn animation to bit-dialog (#4309)

libs/components/src/dialog/animations.ts

@@ -0,0 +1,11 @@
+import { style, animate, trigger, transition, group } from "@angular/animations";
+
+export const fadeIn = trigger("fadeIn", [
+  transition(":enter", [
+    style({ opacity: 0, transform: "translateY(-50px)" }),
+    group([
+      animate("0.15s linear", style({ opacity: 1 })),
+      animate("0.3s ease-out", style({ transform: "none" })),
+    ]),
+  ]),
+]);

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

@@ -1,6 +1,7 @@
 <div
   [ngClass]="width"
   class="tw-my-4 tw-flex tw-max-h-screen tw-flex-col tw-overflow-hidden tw-rounded tw-border tw-border-solid tw-border-secondary-300 tw-bg-text-contrast tw-text-main"
+  @fadeIn
 >
   <div
     class="tw-flex tw-items-center tw-gap-4 tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300 tw-p-4"

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

@@ -1,9 +1,12 @@
 import { coerceBooleanProperty } from "@angular/cdk/coercion";
 import { Component, Input } from "@angular/core";
 
+import { fadeIn } from "../animations";
+
 @Component({
   selector: "bit-dialog",
   templateUrl: "./dialog.component.html",
+  animations: [fadeIn],
 })
 export class DialogComponent {
   @Input() dialogSize: "small" | "default" | "large" = "default";

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

@@ -1,5 +1,6 @@
 <div
   class="tw-my-4 tw-flex tw-max-h-screen tw-w-96 tw-max-w-90vw tw-flex-col tw-overflow-hidden tw-rounded tw-border tw-border-solid tw-border-secondary-300 tw-bg-text-contrast tw-text-main"
+  @fadeIn
 >
   <div class="tw-flex tw-flex-col tw-items-center tw-gap-2 tw-px-4 tw-pt-4 tw-text-center">
     <ng-content *ngIf="hasIcon; else elseBlock" select="[bit-dialog-icon]"></ng-content>

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

@@ -1,11 +1,14 @@
 import { Component, ContentChild, Directive } from "@angular/core";
 
+import { fadeIn } from "../animations";
+
 @Directive({ selector: "[bit-dialog-icon]" })
 export class IconDirective {}
 
 @Component({
   selector: "bit-simple-dialog",
   templateUrl: "./simple-dialog.component.html",
+  animations: [fadeIn],
 })
 export class SimpleDialogComponent {
   @ContentChild(IconDirective) icon!: IconDirective;