From cb11c421a8e1b3c93ee199f76dcd5a4938a9f5b3 Mon Sep 17 00:00:00 2001
From: "dilan.dogan2" <dilan.dogan2@trendyol.com>
Date: Mon, 2 Dec 2024 10:39:09 +0300
Subject: [PATCH] feat(datepicker): add css variables to wrapper class

---
 src/components/calendar/bl-calendar.css     |  4 ++--
 src/components/calendar/bl-calendar.test.ts | 12 ++++++------
 src/components/datepicker/bl-datepicker.css |  7 +++----
 src/components/datepicker/bl-datepicker.ts  |  6 ++++--
 4 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/components/calendar/bl-calendar.css b/src/components/calendar/bl-calendar.css
index 7cb093b9..8b689341 100644
--- a/src/components/calendar/bl-calendar.css
+++ b/src/components/calendar/bl-calendar.css
@@ -5,10 +5,10 @@
 
 .calendar-content {
   display: flex;
-  padding: var(--bl-size-s);
+  padding: var(--bl-size-m);
   flex-direction: column;
   align-items: center;
-  gap: var(--bl-size-s);
+  gap: var(--bl-size-m);
   border-radius: var(--bl-border-radius-s);
   width: fit-content;
   background: var(--bl-color-neutral-full);
diff --git a/src/components/calendar/bl-calendar.test.ts b/src/components/calendar/bl-calendar.test.ts
index 2abba4f4..01d8951b 100644
--- a/src/components/calendar/bl-calendar.test.ts
+++ b/src/components/calendar/bl-calendar.test.ts
@@ -403,13 +403,13 @@ describe("bl-calendar", () => {
 
 
   it("should add range-start-day class to the start date element", async () => {
-    element._selectedDates = [new Date(2024, 10, 1),
-      new Date(2024, 10, 5)
+    element._selectedDates = [new Date(element.today.getFullYear(), element.today.getMonth(), 1),
+      new Date(element.today.getFullYear(), element.today.getMonth(), 5)
     ];
 
     element.setHoverClass();
 
-    await new Promise((resolve) => setTimeout(resolve, 100));
+    await new Promise((resolve) => setTimeout(resolve, 200));
     const startDateElement = element.shadowRoot?.getElementById(
       `${element._selectedDates[0]?.getTime()}`
     )?.parentElement;
@@ -418,12 +418,12 @@ describe("bl-calendar", () => {
   });
 
   it("should add range-end-day class to the end date element", async () => {
-    element._selectedDates = [new Date(2024, 10, 1),
-      new Date(2024, 10, 5)
+    element._selectedDates = [new Date(element.today.getFullYear(), element.today.getMonth(), 1),
+      new Date(element.today.getFullYear(), element.today.getMonth(), 5)
     ];
 
     element.setHoverClass();
-    await new Promise((resolve) => setTimeout(resolve, 100));
+    await new Promise((resolve) => setTimeout(resolve, 200));
 
     const endDateElement = element.shadowRoot?.getElementById(
       `${element._selectedDates[1]?.getTime()}`
diff --git a/src/components/datepicker/bl-datepicker.css b/src/components/datepicker/bl-datepicker.css
index a99cfee4..db493734 100644
--- a/src/components/datepicker/bl-datepicker.css
+++ b/src/components/datepicker/bl-datepicker.css
@@ -1,15 +1,14 @@
 :host {
   width: fit-content;
+  display: block;
+}
 
+.datepicker-content {
   --bl-input-cursor: pointer;
   --icon-size: var(--line-height);
   --icon-color: var(--bl-color-neutral-light);
   --datepicker-width: 314px;
 
-  display: block;
-}
-
-.datepicker-content {
   display: flex;
   flex-direction: column;
   gap: var(--bl-size-2xs);
diff --git a/src/components/datepicker/bl-datepicker.ts b/src/components/datepicker/bl-datepicker.ts
index 5b516c1f..5b38cc63 100644
--- a/src/components/datepicker/bl-datepicker.ts
+++ b/src/components/datepicker/bl-datepicker.ts
@@ -100,7 +100,10 @@ export default class BlDatepicker extends DatepickerCalendarMixin {
   }
 
   closePopoverWithTimeout() {
-    setTimeout(() => this.closePopover(), 200);
+    setTimeout(() => {
+      this.closePopover();
+      this._inputEl.blur();
+    }, 200);
   }
 
   setFloatingDates() {
@@ -140,7 +143,6 @@ export default class BlDatepicker extends DatepickerCalendarMixin {
     this._selectedDates = [];
     this._inputValue = "";
     this._floatingDateCount = 0;
-    this._inputEl?.blur();
   }
 
   openPopover() {