From 52342156b3ae29d5ac3614d9165d8d49bd4864d2 Mon Sep 17 00:00:00 2001
From: boris jenicek <boris.jenicek@gmail.com>
Date: Tue, 9 Apr 2024 23:04:19 +0200
Subject: [PATCH] fix: fadein animation

---
 .../src/animations/fadein-out-animation.ts    |  4 ++--
 .../drawer-component/drawer.component.ts      |  4 ++--
 libs/drawer/src/styles/styles.scss            | 24 ++++++++++---------
 3 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/libs/drawer/src/animations/fadein-out-animation.ts b/libs/drawer/src/animations/fadein-out-animation.ts
index ebd32a3..e7aeb35 100644
--- a/libs/drawer/src/animations/fadein-out-animation.ts
+++ b/libs/drawer/src/animations/fadein-out-animation.ts
@@ -19,14 +19,14 @@ export const fadeinOutAnimation: AnimationTriggerMetadata = trigger(
     transition('* => enter', [
       style({ opacity: 0 }),
       group([
-        animate('400ms ease-in', style({ opacity: 1 })),
+        animate('300ms ease-in', style({ opacity: 1 })),
         query('@*', animateChild(), { optional: true }),
       ]),
     ]),
     transition('enter => leave', [
       group([
         query('@*', animateChild(), { optional: true }),
-        animate('400ms ease-out', style({ opacity: 0 })),
+        animate('300ms ease-out', style({ opacity: 0 })),
       ]),
     ]),
   ]
diff --git a/libs/drawer/src/components/drawer-component/drawer.component.ts b/libs/drawer/src/components/drawer-component/drawer.component.ts
index 38c8e55..b6bfd5d 100644
--- a/libs/drawer/src/components/drawer-component/drawer.component.ts
+++ b/libs/drawer/src/components/drawer-component/drawer.component.ts
@@ -64,7 +64,7 @@ export class DrawerComponent implements AfterViewInit {
       setTimeout(() => {
         this.loaderComponentType = undefined; // Clear loader component
         this.loadComponent(); // Load main component
-      }, 300);
+      }, 400);
     }
   }
 
@@ -74,12 +74,12 @@ export class DrawerComponent implements AfterViewInit {
 
   private loadComponent(): void {
     const componentType = this.loaderComponentType || this.mainComponentType;
+    this.contentAnimationState = 'enter';
     this.helper.loadComponent(
       this.drawerContent,
       this.drawerRemoteControl,
       componentType
     );
-    this.contentAnimationState = 'enter';
   }
 
   onAnimationDone(event: any) {
diff --git a/libs/drawer/src/styles/styles.scss b/libs/drawer/src/styles/styles.scss
index b45d470..d5b3e8f 100644
--- a/libs/drawer/src/styles/styles.scss
+++ b/libs/drawer/src/styles/styles.scss
@@ -1,25 +1,27 @@
-$z-index-overlay: 9999;
-$z-index-drawer: 10000;
-$overlay-shade: black;
-$drawer-background: white;
-$overlay-backdrop-filter: blur(1px);
-$overlay-background: transparentize($drawer-background, 0.75);
+:root {
+  --drawer-background: #f5f5f5;
+  --drawer-overlay-background: #{transparentize(black, 0.75)};
+  --drawer-overlay-backdrop-filter: blur(1px);
+  --drawer-default-loader-color: #6c757d;
+  --drawer-z-index-overlay: 9999;
+  --drawer-z-index-drawer: 10000;
+}
 
 .ng-vibe-drawer-overlay {
-  backdrop-filter: $overlay-backdrop-filter;
-  background: $overlay-background;
+  backdrop-filter: var(--drawer-overlay-backdrop-filter);
+  background: var(--drawer-overlay-background);
   bottom: 0;
   left: 0;
   position: fixed;
   right: 0;
   top: 0;
-  z-index: $z-index-overlay;
+  z-index: var(--drawer-z-index-overlay);
 }
 
 .ng-vibe-drawer-wrapper {
-  background-color: $drawer-background;
+  background-color: var(--drawer-background);
   position: fixed;
-  z-index: $z-index-drawer;
+  z-index: var(--drawer-z-index-drawer);
   overflow: hidden;
 
   .drawer-content {