feat(datepicker): developing datepicker component

commitlint.config.cjs

@@ -36,6 +36,7 @@ module.exports = {
         "calendar",
         "table",
         "split-button",
+        "datepicker",
       ],
     ],
   },

playground/template.html

@@ -32,6 +32,9 @@ <h1>Baklava Playground</h1>
       <code>npm run serve</code>.
     </p>
 
+
+    <bl-datepicker style="padding-top: 20px" type="multiple" placeholder="Placeholder" label="label"></bl-datepicker>
     <bl-button>Baklava is ready</bl-button>
+
   </body>
 </html>

src/baklava.ts

@@ -36,4 +36,5 @@ export { default as BlTableHeaderCell } from "./components/table/table-header-ce
 export { default as BlTableCell } from "./components/table/table-cell/bl-table-cell";
 export { default as BlSplitButton } from "./components/split-button/bl-split-button";
 export { default as BlCalendar } from "./components/calendar/bl-calendar";
+export { default as BlDatePicker } from "./components/datepicker/bl-datepicker";
 export { getIconPath, setIconPath } from "./utilities/asset-paths";

src/components/calendar/bl-calendar.ts

@@ -1,8 +1,10 @@
-import { CSSResultGroup, html, LitElement } from "lit";
+import { CSSResultGroup, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
+import DatepickerCalendarMixin from "../../mixins/datepicker-calendar-mixin/datepicker-calendar-mixin";
 import { event, EventDispatcher } from "../../utilities/event";
 import "../button/bl-button";
+import { blDatepickerClearSelectedDatesEvent } from "../datepicker/bl-datepicker";
 import "../icon/bl-icon";
 import {
   CALENDAR_TYPES,
@@ -14,54 +16,28 @@ import style from "./bl-calendar.css";
 import {
   Calendar,
   CalendarDate,
-  CalendarType,
-  CalendarView,
   CalendarDay,
-  DayValues,
+  CalendarView,
   RangePickerDates,
 } from "./bl-calendar.types";
 
+export const blCalendarChangedEvent = "bl-calendar-change";
+
 /**
  * @tag bl-calendar
  * @summary Baklava Calendar component
  **/
 @customElement("bl-calendar")
-export default class BlCalendar extends LitElement {
-  /**
-   * Defines the calendar types, available types are single, multiple and range
-   */
-  @property()
-  type: CalendarType = CALENDAR_TYPES.SINGLE;
-
-  /**
-   * Defines the minimum date value for the calendar
-   */
-  @property({ type: Date, attribute: "min-date", reflect: true })
-  minDate: Date;
-
-  /**
-   * Defines the maximum date value for the calendar
-   */
-  @property({ type: Date, attribute: "max-date", reflect: true })
-  maxDate: Date;
-
-  /**
-   * Defines the start day of the calendar (1 defines monday)
-   */
-  @property({ type: Number, attribute: "start-of-week", reflect: true })
-  startOfWeek: DayValues = 0;
-
-  /**
-   * Defines the unselectable dates for calendar
-   */
-  @property({ type: Array, attribute: "disabled-dates", reflect: true })
-  disabledDates: Date[];
+export default class BlCalendar extends DatepickerCalendarMixin {
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener(blDatepickerClearSelectedDatesEvent, this.handleClearSelectedDates);
+  }
 
-  /**
-   * Defines the calendar language
-   */
-  @property()
-  locale: string = document.documentElement.lang;
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener(blDatepickerClearSelectedDatesEvent, this.handleClearSelectedDates);
+  }
 
   @state()
   private _selectedDates: CalendarDate[] = [];
@@ -87,24 +63,51 @@ export default class BlCalendar extends LitElement {
   @state()
   private _calendarDays: CalendarDay[] = [];
 
-  private _defaultValue: Date | Date[];
-
-  /**
-   * Defines the default selected date value for the calendar
-   */
-  @property({ type: Array, attribute: "default-value", reflect: true })
-  get defaultValue(): Date | Date[] {
-    return this._defaultValue;
-  }
-  set defaultValue(defaultValue) {
-    if (this.type === CALENDAR_TYPES.SINGLE && Array.isArray(defaultValue)) {
-      console.warn("Invalid prop value for defaultValue");
-    } else if (this.defaultValue) {
-      if (Array.isArray(this.defaultValue)) {
-        this._selectedDates = { ...this.defaultValue };
-      } else this._selectedDates = [this.defaultValue];
+  @property({ attribute: "default-value", reflect: true })
+  set defaultValue(defaultValue: Date | Date[]) {
+    if (!this._defaultValue) {
+      if (this.type === CALENDAR_TYPES.SINGLE && Array.isArray(defaultValue)) {
+        console.warn(
+          "'defaultValue' must be of type Date when the date selection mode is set to single."
+        );
+      } else if (
+        (this.type === CALENDAR_TYPES.MULTIPLE || this.type === CALENDAR_TYPES.RANGE) &&
+        !Array.isArray(defaultValue)
+      ) {
+        console.warn(
+          "'defaultValue' must be an array of two Date objects when the date selection mode is set to range."
+        );
+      } else if (
+        this.type === CALENDAR_TYPES.RANGE &&
+        Array.isArray(defaultValue) &&
+        (defaultValue.length < 0 || defaultValue.length > 2)
+      ) {
+        console.warn(
+          "'defaultValue' must be an array of Date objects when the date selection mode is set to multiple."
+        );
+      } else {
+        this._defaultValue = defaultValue;
+        if (this.type === CALENDAR_TYPES.SINGLE && !Array.isArray(this._defaultValue)) {
+          this._selectedDates = [this._defaultValue];
+        } else if (this.type === CALENDAR_TYPES.MULTIPLE && Array.isArray(this._defaultValue)) {
+          this._selectedDates = this._defaultValue;
+        } else if (this.type === CALENDAR_TYPES.RANGE && Array.isArray(this._defaultValue)) {
+          this._selectedDates = this._defaultValue;
+          this._selectedRangeDates.startDate = this._defaultValue[0];
+          this._selectedRangeDates.endDate = this._defaultValue[1];
+          this.setHoverClass();
+        }
+        this._onBlCalendarChange(this._selectedDates);
+      }
     }
   }
+
+  public handleClearSelectedDates = () => {
+    this._selectedDates = [];
+    this._onBlCalendarChange([]);
+    this.clearRangePickerStyles();
+  };
+
   get months() {
     return [...Array(12).keys()].map(month => {
       return {
@@ -115,6 +118,7 @@ export default class BlCalendar extends LitElement {
       };
     });
   }
+
   get days() {
     return [...Array(7).keys()].map(day => {
       return {
@@ -126,16 +130,19 @@ export default class BlCalendar extends LitElement {
   /**
    * Fires when date selection changes
    */
-  @event("bl-calendar-change") private _onBlCalendarChange: EventDispatcher<Date[]>;
+  @event(blCalendarChangedEvent) private _onBlCalendarChange: EventDispatcher<Date[]>;
   static get styles(): CSSResultGroup {
     return [style];
   }
+
   getDayNumInAMonth(year: number, month: number) {
     return new Date(year, month + 1, 0).getDate();
   }
+
   getWeekDayOfDate(year: number, month: number) {
     return new Date(year, month, 1).getDay();
   }
+
   setPreviousCalendarView() {
     this.clearRangePickerStyles();
     if (this._calendarView === CALENDAR_VIEWS.DAYS) {
@@ -157,6 +164,7 @@ export default class BlCalendar extends LitElement {
       this.setHoverClass();
     }
   }
+
   setNextCalendarView() {
     this.clearRangePickerStyles();
     if (this._calendarView === CALENDAR_VIEWS.DAYS) {
@@ -209,6 +217,7 @@ export default class BlCalendar extends LitElement {
       );
     }
   }
+
   clearRangePickerStyles() {
     this.shadowRoot?.querySelectorAll(".range-day").forEach(day => {
       day.classList.remove("range-day");
@@ -220,6 +229,7 @@ export default class BlCalendar extends LitElement {
       day.classList.remove("range-end-day");
     });
   }
+
   handleDate(date: CalendarDate) {
     if (this.type !== CALENDAR_TYPES.RANGE) {
       if (date.getMonth() < this._calendarMonth) {
@@ -236,14 +246,15 @@ export default class BlCalendar extends LitElement {
     } else if (this.type === CALENDAR_TYPES.RANGE) {
       this.handleRangeSelectCalendar(date);
     }
-
     this._onBlCalendarChange(this._selectedDates);
     this.requestUpdate();
   }
+
   handleSingleSelectCalendar(calendarDate: CalendarDate) {
     this._selectedDates.splice(0, 1);
     this._selectedDates.push(calendarDate);
   }
+
   handleMultipleSelectCalendar(calendarDate: CalendarDate) {
     const dateExist = this._selectedDates.find(function (selectedDate) {
       return selectedDate.getTime() === calendarDate.getTime();
@@ -256,6 +267,7 @@ export default class BlCalendar extends LitElement {
       );
     else this._selectedDates.push(calendarDate);
   }
+
   handleRangeSelectCalendar(calendarDate: CalendarDate) {
     if (!this._selectedRangeDates.startDate) {
       this._selectedRangeDates.startDate = calendarDate;
@@ -291,6 +303,7 @@ export default class BlCalendar extends LitElement {
 
     return !!day;
   }
+
   checkIfDateIsToday(calendarDate: CalendarDate) {
     const today = new Date();
 
@@ -437,41 +450,41 @@ export default class BlCalendar extends LitElement {
             return html` <div class="calendar-text weekday-text">${key}</div> `;
           })}</div>
         <div class="days-wrapper">
-        ${[...Array(valuesArray[0].length).keys()].map(key => {
-          return html`<div class="week-row">
-            ${valuesArray.map(values => {
-              const date = values[key];
-              const isSelectedDay = this.checkIfSelectedDate(date);
-              const isDayToday = this.checkIfDateIsToday(date);
-              const isDisabledDay = this.checkIfDateIsDisabled(date);
-
-              const classes = classMap({
-                "day": true,
-                "calendar-text": true,
-                "today-day": isDayToday,
-                "selected-day": isSelectedDay,
-                "other-month-day": values[key].getMonth() !== this._calendarMonth,
-                "disabled-day": isDisabledDay,
-              });
-
-              return html`
-                <div class="day-wrapper">
-                  <bl-button
-                    id=${date.getTime()}
-                    variant="tertiary"
-                    kind="neutral"
-                    size="small"
-                    class=${classes}
-                    ?disabled=${isDisabledDay}
-                    @click="${() => !isDisabledDay && this.handleDate(date)}"
-                  >
-                    ${date.getDate()}
-                  </bl-button>
-                </div>
-              `;
-            })}
-          </div>`;
-        })}
+          ${[...Array(valuesArray[0].length).keys()].map(key => {
+            return html`<div class="week-row">
+              ${valuesArray.map(values => {
+                const date = values[key];
+                const isSelectedDay = this.checkIfSelectedDate(date);
+                const isDayToday = this.checkIfDateIsToday(date);
+                const isDisabledDay = this.checkIfDateIsDisabled(date);
+
+                const classes = classMap({
+                  "day": true,
+                  "calendar-text": true,
+                  "today-day": isDayToday,
+                  "selected-day": isSelectedDay,
+                  "other-month-day": values[key].getMonth() !== this._calendarMonth,
+                  "disabled-day": isDisabledDay,
+                });
+
+                return html`
+                  <div class="day-wrapper">
+                    <bl-button
+                      id=${date.getTime()}
+                      variant="tertiary"
+                      kind="neutral"
+                      size="small"
+                      class=${classes}
+                      ?disabled=${isDisabledDay}
+                      @click="${() => !isDisabledDay && this.handleDate(date)}"
+                    >
+                      ${date.getDate()}
+                    </bl-button>
+                  </div>
+                `;
+              })}
+            </div>`;
+          })}
         </div>
         </div>`;
       } else if (calendarView === CALENDAR_VIEWS.MONTHS) {

src/components/datepicker/bl-datepicker.css

@@ -0,0 +1,57 @@
+:host {
+  width: fit-content;
+  --bl-input-cursor: pointer;
+  --icon-size: var(--line-height);
+  --icon-color: var(--bl-color-neutral-light);
+  display: block;
+}
+
+.datepicker-content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: fit-content;
+}
+
+.datepicker-input {
+  width: 314px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.icon-container {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+}
+
+.calendarIcon {
+  display: flex;
+  align-items: center;
+  gap: var(--icon-gap);
+  flex-basis: var(--icon-size);
+  align-self: center;
+  margin-right: var(--label-padding);
+  font-size: var(--icon-size);
+  color: var(--icon-color);
+  height: var(--icon-size);
+}
+
+.popover {
+  position: var(--popover-position);
+  border: solid 1px var(--border-color);
+  background-color: var(--background-color);
+  font: var(--bl-font-title-3-regular);
+  border-radius: var(--bl-border-radius-s);
+  padding: var(--menu-padding);
+  outline: none;
+  box-sizing: border-box;
+  max-height: var(--menu-height);
+  overflow-y: auto;
+  display: none;
+  z-index: var(--bl-index-popover);
+}
+
+.show-popover {
+  display: block;
+}