Calendar datepicker bug fix

src/components/calendar/bl-calendar.css

@@ -63,27 +63,27 @@
   --bl-size-xl: 40px;
   --bl-border-radius-m: 50%;
   --bl-border-radius-l: 50%;
+}
 
-  &.today-day {
-    --bl-color-neutral-darker: var(--bl-color-primary);
-    --bl-color-neutral-darkest: var(--bl-color-primary);
-  }
+.day.today-day {
+  --bl-color-neutral-darker: var(--bl-color-primary);
+  --bl-color-neutral-darkest: var(--bl-color-primary);
+}
 
-  &.other-month-day {
-    --bl-color-neutral-darker: var(--bl-color-neutral-dark);
+.day.other-month-day {
+  --bl-color-neutral-darker: var(--bl-color-neutral-dark);
+}
 
-    &.selected-day {
-      --bl-color-neutral-darker: var(--bl-color-neutral-full);
-    }
-  }
+.day.other-month-day.selected-day {
+  --bl-color-neutral-darker: var(--bl-color-neutral-full);
+}
 
-  &.selected-day {
-    background: var(--bl-color-primary);
-    border-radius: 50%;
+.day.selected-day {
+  background: var(--bl-color-primary);
+  border-radius: 50%;
 
-    --bl-button-focus-border-color: var(--bl-color-primary);
-    --bl-color-neutral-darker: var(--bl-color-neutral-full);
-  }
+  --bl-button-focus-border-color: var(--bl-color-primary);
+  --bl-color-neutral-darker: var(--bl-color-neutral-full);
 }
 
 .range-day {
@@ -127,7 +127,6 @@
 
 .grid-item {
   width: 93.33px;
-
   --bl-size-3xs: 15px;
 }
 

src/components/calendar/bl-calendar.test.ts

@@ -1,7 +1,6 @@
 import { expect, fixture, html } from "@open-wc/testing";
 import "./bl-calendar";
 import { BlButton, BlCalendar } from "../../baklava";
-import { blCalendarChangedEvent } from "./bl-calendar";
 import { CALENDAR_TYPES, CALENDAR_VIEWS, FIRST_MONTH_INDEX, LAST_MONTH_INDEX } from "./bl-calendar.constant";
 import sinon from "sinon";
 
@@ -93,7 +92,7 @@ describe("bl-calendar", () => {
       selectedDates = customEvent.detail;
     };
 
-    singleTypeCalendar.addEventListener(blCalendarChangedEvent, onBlCalendarChanged);
+    singleTypeCalendar.addEventListener("bl-calendar-change", onBlCalendarChanged);
     const daysButtons = Array.from(singleTypeCalendar.shadowRoot?.querySelectorAll(".day-wrapper bl-button") || []) as BlButton[];
 
     daysButtons[0].click();

src/components/calendar/bl-calendar.ts

@@ -14,8 +14,6 @@ import {
 import style from "./bl-calendar.css";
 import { Calendar, CalendarDay, CalendarView } from "./bl-calendar.types";
 
-export const blCalendarChangedEvent = "bl-calendar-change";
-
 /**
  * @tag bl-calendar
  * @summary Baklava Calendar component
@@ -37,7 +35,7 @@ export default class BlCalendar extends DatepickerCalendarMixin {
   /**
    * Fires when date selection changes
    */
-  @event(blCalendarChangedEvent) _onBlCalendarChange: EventDispatcher<Date[]>;
+  @event("bl-calendar-change") _onBlCalendarChange: EventDispatcher<Date[]>;
 
   static get styles(): CSSResultGroup {
     return [style];
@@ -224,7 +222,11 @@ export default class BlCalendar extends DatepickerCalendarMixin {
     }
     if (this.disabledDates.length > 0) {
       return this.disabledDates.some(disabledDate => {
-        return calendarDate.getTime() === disabledDate.getTime();
+        return (
+          calendarDate.getDate() === disabledDate.getDate() &&
+          calendarDate.getMonth() === disabledDate.getMonth() &&
+          calendarDate.getFullYear() === disabledDate.getFullYear()
+        );
       });
     }
     return false;

src/components/datepicker/bl-datepicker.test.ts

@@ -1,12 +1,11 @@
 import { aTimeout, expect, fixture, html } from "@open-wc/testing";
-import BlDatepicker, { blDatepickerChangedEvent } from "./bl-datepicker";
 import { BlButton, BlDatePicker } from "../../baklava";
-import { blCalendarChangedEvent } from "../calendar/bl-calendar";
 import { CALENDAR_TYPES } from "../calendar/bl-calendar.constant";
 import sinon from "sinon";
+import "./bl-datepicker";
 
 describe("BlDatepicker", () => {
-  let element: BlDatepicker;
+  let element: BlDatePicker;
   let getElementByIdStub: sinon.SinonStub;
   let consoleWarnSpy: sinon.SinonSpy;
 
@@ -69,7 +68,7 @@ describe("BlDatepicker", () => {
     element._inputEl?.click();
     await element.updateComplete;
 
-    element._calendarEl?.dispatchEvent(new CustomEvent(blCalendarChangedEvent, { detail: [new Date()] }));
+    element._calendarEl?.dispatchEvent(new CustomEvent("bl-calendar-change", { detail: [new Date()] }));
     await element.updateComplete;
     await aTimeout(400);
     expect(element._selectedDates.length).to.equal(1);
@@ -79,15 +78,15 @@ describe("BlDatepicker", () => {
   it("should trigger datepicker change event on date selection", async () => {
     const testDate = new Date(2023, 1, 1);
 
-    element.addEventListener(blDatepickerChangedEvent, (event) => {
+    element.addEventListener("bl-datepicker-change", (event) => {
       const customEvent = event as CustomEvent;
 
       expect(customEvent).to.exist;
       expect(customEvent.detail).to.deep.equal([testDate]);
 
     });
 
-    element._calendarEl.dispatchEvent(new CustomEvent(blCalendarChangedEvent, { detail: [testDate] }));
+    element._calendarEl.dispatchEvent(new CustomEvent("bl-calendar-change", { detail: [testDate] }));
 
     await element.updateComplete;
   });
@@ -117,7 +116,7 @@ describe("BlDatepicker", () => {
   it("should use custom value formatter when provided", async () => {
     const testDate = new Date(2023, 1, 1);
 
-    element.inputValueFormatter = (dates: Date[]) => `Custom format: ${dates[0].toDateString()}`;
+    element.valueFormatter = (dates: Date[]) => `Custom format: ${dates[0].toDateString()}`;
     element.setDatePickerInput([testDate]);
     await element.updateComplete;
 
@@ -130,7 +129,7 @@ describe("BlDatepicker", () => {
     element.type = CALENDAR_TYPES.MULTIPLE;
     await element.updateComplete;
 
-    element._calendarEl?.dispatchEvent(new CustomEvent(blCalendarChangedEvent, { detail: dates }));
+    element._calendarEl?.dispatchEvent(new CustomEvent("bl-calendar-change", { detail: dates }));
     await element.updateComplete;
 
     expect(element._selectedDates.length).to.equal(2);
@@ -152,7 +151,7 @@ describe("BlDatepicker", () => {
     element.type = CALENDAR_TYPES.RANGE;
     await element.updateComplete;
 
-    element._calendarEl?.dispatchEvent(new CustomEvent(blCalendarChangedEvent, { detail: [startDate, endDate] }));
+    element._calendarEl?.dispatchEvent(new CustomEvent("bl-calendar-change", { detail: [startDate, endDate] }));
     await element.updateComplete;
 
     expect(element._selectedDates.length).to.equal(2);
@@ -259,15 +258,17 @@ describe("BlDatepicker", () => {
   it("should return a single date when value is a single Date", () => {
     const date = new Date("2024-01-01");
 
-    element._value = date;
+    element.value = date;
     expect(element.value).to.equal(date);
   });
 
   it("should return an array of dates when value is an array of Dates", () => {
     const dates = [new Date("2024-01-01"), new Date("2024-02-01")];
 
-    element._value = dates;
-    expect(element.value).to.deep.equal(dates);
+    element.type=CALENDAR_TYPES.MULTIPLE;
+    element.value = dates;
+
+    expect(element.value).to.equal(dates);
   });
 
   it("should return undefined if value is not set", () => {
@@ -277,7 +278,7 @@ describe("BlDatepicker", () => {
   it("should warn when 'value' is not an array for multiple/range selection", async () => {
     element = await fixture<BlDatePicker>(html`
       <bl-datepicker type="multiple" locale="en"></bl-datepicker>`);
-    element._value = new Date();
+    element.value = new Date();
 
     element.firstUpdated();
 
@@ -286,7 +287,7 @@ describe("BlDatepicker", () => {
 
   it("should not warn when value is an array for multiple/range selection", () => {
     element.type = CALENDAR_TYPES.MULTIPLE;
-    element._value = [new Date(), new Date()];
+    element.value = [new Date(), new Date()];
 
     element.firstUpdated();
 
@@ -295,7 +296,7 @@ describe("BlDatepicker", () => {
 
   it("should not warn when 'value' is an array of exactly two Date objects in RANGE mode", () => {
     element.type = CALENDAR_TYPES.RANGE;
-    element._value = [new Date(), new Date()];
+    element.value = [new Date(), new Date()];
 
     element.firstUpdated();
 

src/components/datepicker/bl-datepicker.ts

@@ -10,16 +10,13 @@ import BlInput, { InputSize } from "../input/bl-input";
 import "../tooltip/bl-tooltip";
 import style from "./bl-datepicker.css";
 
-export const blDatepickerTag = "bl-datepicker";
-export const blDatepickerChangedEvent = "bl-datepicker-change";
-
 /**
  * @tag bl-datepicker
  * @summary Baklava DatePicker component
  *
  * @cssproperty [--bl-datepicker-input-width] - Sets the width of datepicker input
  **/
-@customElement(blDatepickerTag)
+@customElement("bl-datepicker")
 export default class BlDatepicker extends DatepickerCalendarMixin {
   /**
    * Defines the datepicker input placeholder
@@ -30,13 +27,13 @@ export default class BlDatepicker extends DatepickerCalendarMixin {
    * Sets input size.
    */
   @property({ type: String, reflect: true })
-  inputSize?: InputSize = "medium";
+  size?: InputSize = "medium";
 
   /**
    * Makes datepicker input label as fixed positioned
    */
-  @property({ type: Boolean, attribute: "input-label-fixed", reflect: true })
-  inputLabelFixed = false;
+  @property({ type: Boolean, attribute: "label-fixed", reflect: true })
+  labelFixed = false;
   /**
    * Defines the datepicker input label
    */
@@ -45,8 +42,8 @@ export default class BlDatepicker extends DatepickerCalendarMixin {
   /**
    * Defines the custom formatter function
    */
-  @property({ type: Function, attribute: "input-value-formatter" })
-  inputValueFormatter: ((dates: Date[]) => string) | null = null;
+  @property({ type: Function, attribute: "value-formatter" })
+  valueFormatter: ((dates: Date[]) => string) | null = null;
   /**
    * Sets datepicker to disabled
    */
@@ -85,7 +82,7 @@ export default class BlDatepicker extends DatepickerCalendarMixin {
   /**
    * Fires when date selection is changed
    */
-  @event(blDatepickerChangedEvent) private _onBlDatepickerChanged: EventDispatcher<Date[]>;
+  @event("bl-datepicker-change") private _onBlDatepickerChange: EventDispatcher<Date[]>;
 
   static get styles(): CSSResultGroup {
     return [style];
@@ -132,14 +129,14 @@ export default class BlDatepicker extends DatepickerCalendarMixin {
       this._inputValue = "";
     } else {
       this._selectedDates = dates;
-      if (this.inputValueFormatter) {
-        this._inputValue = this.inputValueFormatter(this._selectedDates);
+      if (this.valueFormatter) {
+        this._inputValue = this.valueFormatter(this._selectedDates);
       } else {
         this.defaultInputValueFormatter();
       }
     }
 
-    this._onBlDatepickerChanged(this._selectedDates);
+    this._onBlDatepickerChange(this._selectedDates);
   }
 
   formatDate(date: Date): string {
@@ -215,7 +212,7 @@ export default class BlDatepicker extends DatepickerCalendarMixin {
           .maxDate=${this.maxDate}
           .startOfWeek=${this.startOfWeek}
           .disabledDates=${this.disabledDates}
-          .value=${this._value}
+          .value=${this.value}
           .locale=${this.locale}
           @bl-calendar-change="${(event: CustomEvent) => this.setDatePickerInput(event.detail)}"
         ></bl-calendar>
@@ -264,8 +261,8 @@ export default class BlDatepicker extends DatepickerCalendarMixin {
           @click=${this._togglePopover}
           help-text=${this.helpText}
           ?disabled=${this.disabled}
-          .size=${this.inputSize}
-          .labelFixed=${this.inputLabelFixed}
+          .size=${this.size}
+          .labelFixed=${this.labelFixed}
           readonly
         >
           <div slot="icon" class="icon-container" id="icon-container">

src/components/input/bl-input.css

@@ -140,7 +140,7 @@ input {
   color: var(--text-color);
   -webkit-text-fill-color: var(--text-color);
   background-color: transparent;
-  cursor: var(--bl-input-cursor, not-allowed);
+  cursor: var(--bl-input-cursor, unset);
 }
 
 input::-webkit-credentials-auto-fill-button {