@govtechsg/sgds-web-component 1.1.0-rc.0 → 1.1.0

package/components/Datepicker/sgds-datepicker.js

@@ -1,19 +1,21 @@
 import { __decorate } from 'tslib';
 import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { parse, format } from 'date-fns';
 import { html } from 'lit';
-import { property, state, queryAsync } from 'lit/decorators.js';
+import { property, state, queryAsync, query } from 'lit/decorators.js';
 import { live } from 'lit/directives/live.js';
 import { ref } from 'lit/directives/ref.js';
 import { DropdownElement } from '../../base/dropdown-element.js';
 import { watch } from '../../utils/watch.js';
-import { SgdsInput } from '../Input/sgds-input.js';
 import { DatepickerCalendar } from './datepicker-calendar.js';
 import { DatepickerHeader } from './datepicker-header.js';
+import { DatepickerInput } from './datepicker-input.js';
 import css_248z from './sgds-datepicker2.js';
-import { sortAscDates } from '../../utils/time.js';
+import { setTimeToNoon, DATE_PATTERNS } from '../../utils/time.js';
+import { classMap } from 'lit/directives/class-map.js';
 
 /**
- * @summary The `DatePicker` Component is built using `Dropdown`, `Input` and `Button` components. By default, the Calendar points to current date and input has no value. The input is a read-only and users can only pick dates using the Calendar.
+ * @summary The `DatePicker` Component is built using `Dropdown`, `Input` and `Button` components. By default, the Calendar points to today's date and input has no value. Users can either pick dates from the calendar or type dates through the input
  *
  * @event sgds-change-date - Emitted when the state of datepicker's input changes during first load, close button reset click & date click. Date values can be accessed via event.target.value
  *
@@ -34,56 +36,70 @@ class SgdsDatepicker extends ScopedElementsMixin(DropdownElement) {
     /**@internal */
     static get scopedElements() {
         return {
-            "sgds-input": SgdsInput,
+            "sgds-datepicker-input": DatepickerInput,
             "sgds-datepicker-calendar": DatepickerCalendar,
             "sgds-datepicker-header": DatepickerHeader
         };
     }
+    /** Checks for validity and shows the browser's validation message if the control is invalid. */
+    reportValidity() {
+        return this._internals.reportValidity();
+    }
     constructor() {
         super();
         /** When true, adds required attribute to input element */
         this.required = false;
         /** When true, adds disabled attribute to input and button element */
         this.disabled = false;
+        /** The initial value of DatePicker on first load for single & range mode as array of string. eg.'["22/12/2023"]' for single & '["22/12/2023","25/12/2023"]' for range respectively  */
+        this.initialValue = [];
         /** Date format reflected on input  */
         this.dateFormat = "DD/MM/YYYY";
+        /** ISO date string to set the lowest allowable date value. e.g. "2016-05-19T12:00:00.000Z" */
+        this.minDate = "";
+        /** ISO date string to set the highest allowable date value. e.g. "2016-05-19T12:00:00.000Z" */
+        this.maxDate = "";
         /** Changes DatePicker to single date selection or range date selection */
         this.mode = "single";
-        /** @internal */
+        /**Feedback text for error state when date input is invalid */
+        this.invalidFeedback = "Please enter a valid date";
+        /** The datepicker input's label  */
+        this.label = "";
+        /** The datepicker input's hint text below the label */
+        this.hintText = "";
+        /** Controls auto-flipping of menu */
+        this.noFlip = false;
+        /** The drop position of menu relative to the toggle button */
+        this.drop = "down";
+        this.value = "";
         this.view = "days";
-        /** @internal */
         this.selectedDateRange = [];
-        /** @internal */
-        this.displayDate = new Date();
-        /** @internal */
-        this.focusedDate = new Date();
         this.focusedTabIndex = 3;
         this._makeInputValueString = (startDate, endDate, dateFormat) => {
             if (!startDate && !endDate)
-                return "";
-            const formatDate = (date) => {
-                if (!(date instanceof Date) || isNaN(date.getTime())) {
-                    return ""; // Return an empty string if the date is not a valid Date object
+                return this.value;
+            const formatDate = (date) => format(date, DATE_PATTERNS[dateFormat].fnsPattern);
+            switch (this.mode) {
+                case "single": {
+                    if (startDate) {
+                        this.value = formatDate(startDate);
+                    }
+                    break;
+                }
+                case "range": {
+                    if (startDate && endDate) {
+                        this.value = `${formatDate(startDate)} - ${formatDate(endDate)}`;
+                    }
+                    if (startDate && !endDate) {
+                        this.value = `${formatDate(startDate)} - ${this.dateFormat.toLowerCase()}`;
+                    }
+                    break;
                 }
-                const month = date.getMonth() + 1;
-                const day = date.getDate();
-                const separator = "/";
-                const formattedMonth = month > 9 ? month.toString() : `0${month}`;
-                const formattedDay = day > 9 ? day.toString() : `0${day}`;
-                return dateFormat === "YYYY/MM/DD"
-                    ? `${date.getFullYear()}${separator}${formattedMonth}${separator}${formattedDay}`
-                    : dateFormat === "DD/MM/YYYY"
-                        ? `${formattedDay}${separator}${formattedMonth}${separator}${date.getFullYear()}`
-                        : `${formattedMonth}${separator}${formattedDay}${separator}${date.getFullYear()}`;
-            };
-            if (startDate && endDate) {
-                return `${formatDate(startDate)} - ${formatDate(endDate)}`;
-            }
-            if (startDate) {
-                return formatDate(startDate);
             }
-            return "";
+            return this.value;
         };
+        this._internals = this.attachInternals();
+        /**@internal */
         this.modifierOpt = [
             {
                 name: "offset",
@@ -93,83 +109,47 @@ class SgdsDatepicker extends ScopedElementsMixin(DropdownElement) {
             }
         ];
     }
-    connectedCallback() {
+    async connectedCallback() {
         super.connectedCallback();
         this.addEventListener("sgds-view", this._handleViewChanged);
         this.addEventListener("sgds-change-calendar", this._handleDateChanged);
         this.addEventListener("sgds-update-focus", this._handleFocusDateChanged);
         this.addEventListener("sgds-selectmonth", this._handleSelectMonth);
         this.addEventListener("sgds-selectyear", this._handleSelectYear);
-        this.addEventListener("sgds-selectdates", this._handleSelectDates);
+        this.addEventListener("sgds-selectdates", this._handleSelectDatesAndClose);
+        this.addEventListener("sgds-selectdates-input", this._handleSelectDatesInput);
+        this.addEventListener("sgds-empty-input", this._handleEmptyInput);
         this.addEventListener("keydown", this._handleTab);
         this.addEventListener("sgds-hide", this._handleCloseMenu);
+        this.initialDisplayDate = this.displayDate || new Date();
         if (this.initialValue && this.initialValue.length > 0) {
             // Validate initialValue against the dateFormat regex
             const dateFormatRegex = new RegExp(this._getDateFormatRegex());
-            const startDateString = this.initialValue[0];
-            if (!dateFormatRegex.test(startDateString)) {
-                // Handle invalid date format in initialValue
-                console.error("Invalid date format in initialValue:", startDateString);
-                return;
+            // const startDateString = this.initialValue[0];
+            const invalidDates = this.initialValue.filter(v => !dateFormatRegex.test(v));
+            if (invalidDates.length > 0) {
+                return console.error("Invalid date format in initialValue:", invalidDates);
             }
-            const startDate = this._parseDateStringToDate(startDateString);
-            if (this.mode === "single" && startDate) {
-                // Single mode
-                this.selectedDateRange = [startDate];
-                this.displayDate = startDate;
-            }
-            else if (this.mode === "range" && this.initialValue.length === 2) {
-                // Range mode
-                const endDateString = this.initialValue[1];
-                if (!dateFormatRegex.test(endDateString)) {
-                    // Handle invalid date format in initialValue
-                    console.error("Invalid date format in initialValue:", endDateString);
-                    return;
-                }
-                const endDate = this._parseDateStringToDate(endDateString);
-                if (startDate && endDate) {
-                    this.selectedDateRange = [startDate, endDate];
-                    this.selectedDateRange = sortAscDates(this.selectedDateRange);
-                    // this.selectedDateRange.sort((a, b) => a.getTime() - b.getTime());
-                    this.displayDate = startDate;
-                }
+            else {
+                const initialSelectedDates = this.initialValue.map(v => setTimeToNoon(parse(v, DATE_PATTERNS[this.dateFormat].fnsPattern, new Date())));
+                this._handleSelectDates(initialSelectedDates);
             }
         }
-        if (this.selectedDateRange && this.selectedDateRange.length > 0) {
-            // Get the formattedDate value for the selected dates
-            const formattedDate = this._makeInputValueString(this.selectedDateRange[0], this.selectedDateRange[1], this.dateFormat);
-            this.value = formattedDate;
-        }
         else {
-            // If selectedDateRange is empty, emit sgds-change-date event with an empty string
-            this.value = "";
+            this.displayDate = this.initialDisplayDate;
         }
     }
     async firstUpdated() {
         super.firstUpdated();
         if (this.menuIsOpen) {
-            const input = await this.dropdownRef;
+            const input = await this.datepickerInputAsync;
             this.showMenu();
             const cal = await this.calendar;
             cal.focusOnCalendar(input);
         }
-    }
-    _parseDateStringToDate(dateString) {
-        let year, month, day;
-        switch (this.dateFormat) {
-            case "MM/DD/YYYY":
-                [month, day, year] = dateString.split("/");
-                break;
-            case "DD/MM/YYYY":
-                [day, month, year] = dateString.split("/");
-                break;
-            case "YYYY/MM/DD":
-                [year, month, day] = dateString.split("/");
-                break;
-            default:
-                return null;
-        }
-        return new Date(`${year}-${month}-${day}`);
+        const shadowInput = await this.datepickerInput.shadowInput;
+        this._manageInternalsDefault(shadowInput);
+        this._internals.setValidity(shadowInput.validity, shadowInput.validationMessage, shadowInput);
     }
     /** @internal */
     _getDateFormatRegex() {
@@ -187,6 +167,9 @@ class SgdsDatepicker extends ScopedElementsMixin(DropdownElement) {
             .replace("/", "\\/"));
     }
     _handleTab(event) {
+        if (!this.menuIsOpen) {
+            return;
+        }
         const tabIndexArray = Array(4);
         if (event.shiftKey && event.key === "Tab") {
             event.preventDefault();
@@ -199,10 +182,11 @@ class SgdsDatepicker extends ScopedElementsMixin(DropdownElement) {
     }
     _handleValueChange() {
         this.emit("sgds-change-date");
+        this._setInternalFormValue(this.value);
     }
     async _handleCloseMenu() {
         if (this.selectedDateRange.length === 0) {
-            this.displayDate = new Date();
+            this.displayDate = this.initialDisplayDate;
         }
         else {
             const selectedDatesLength = this.selectedDateRange.length;
@@ -211,28 +195,34 @@ class SgdsDatepicker extends ScopedElementsMixin(DropdownElement) {
             calendar._updateFocusedDate();
         }
     }
-    _handleSelectDates(event) {
-        const newSelectedDates = event.detail;
+    _handleSelectDatesInput(event) {
+        this._handleSelectDates(event.detail);
+        this._manageInternalsDefault(this._shadowInput);
+    }
+    async _handleSelectDates(newSelectedDates) {
+        newSelectedDates.sort((a, b) => a.getTime() - b.getTime());
         this.displayDate = newSelectedDates[0];
         this.focusedDate = newSelectedDates[0];
-        if (this.mode === "range") {
-            // Sort the newSelectedDates array in ascending order
-            newSelectedDates.sort((a, b) => a.getTime() - b.getTime());
-            this.selectedDateRange = newSelectedDates;
-            if (this.selectedDateRange.length === 2) {
-                this.hideMenu();
-            }
-        }
-        else if (this.mode === "single") {
-            this.selectedDateRange = [newSelectedDates[0]];
-            if (this.selectedDateRange.length === 1) {
-                this.hideMenu();
-            }
-        }
+        this.selectedDateRange = newSelectedDates;
         // Get the formattedDate value for the selected dates
         const formattedDate = this._makeInputValueString(this.selectedDateRange[0], this.selectedDateRange[1], this.dateFormat);
         // Set formattedDate value as the new value for sgds-input
         this.value = formattedDate;
+        const input = await this.datepickerInputAsync;
+        input.updateMaskValue();
+    }
+    get _shadowInput() {
+        return this.datepickerInput.shadowRoot.querySelector("input");
+    }
+    _handleSelectDatesAndClose(event) {
+        this._handleSelectDates(event.detail);
+        if (this.mode === "range" && this.selectedDateRange.length === 2) {
+            this.hideMenu();
+        }
+        else if (this.mode === "single" && this.selectedDateRange.length === 1) {
+            this.hideMenu();
+        }
+        this._manageInternalsValid();
     }
     /** update latest view state from datepicker-header */
     _handleViewChanged(event) {
@@ -250,31 +240,51 @@ class SgdsDatepicker extends ScopedElementsMixin(DropdownElement) {
     _handleSelectYear(event) {
         this.displayDate = event.detail;
     }
-    _handleButtonResetClick() {
-        this.displayDate = new Date();
+    async _handleInvalidInput() {
+        this.selectedDateRange = [];
+        this.displayDate = this.initialDisplayDate;
+        this._manageInternalsBadInput();
+    }
+    async _handleButtonResetClick() {
+        this.displayDate = this.initialDisplayDate;
         this.selectedDateRange = [];
         this.value = "";
         this.view = "days";
         this.hideMenu();
+        const input = await this.datepickerInputAsync;
+        input.setInvalid(false);
+        input.destroyInputMask();
+        await input.applyInputMask();
+        this._manageInternalsRequired();
+    }
+    async _handleEmptyInput() {
+        this._manageInternalsRequired();
+    }
+    _manageInternalsRequired() {
+        this.required
+            ? this._internals.setValidity({
+                valueMissing: true
+            }, "Please fill in this field", this._shadowInput)
+            : this._internals.setValidity({});
+    }
+    _manageInternalsBadInput() {
+        this._internals.setValidity({
+            badInput: true
+        }, "The chosen date(s) are invalid", this._shadowInput);
+    }
+    _manageInternalsValid() {
+        this._internals.setValidity({});
+    }
+    _manageInternalsDefault(inputEl) {
+        this._internals.setValidity(inputEl.validity, inputEl.validationMessage, inputEl);
+    }
+    _setInternalFormValue(value) {
+        this._internals.setFormValue(value);
+    }
+    async _handleInputMaskChange(e) {
+        this.value = e.detail;
     }
     render() {
-        let formattedDate = "";
-        if (this.mode === "single") {
-            formattedDate = this._makeInputValueString(this.selectedDateRange[0], undefined, this.dateFormat);
-        }
-        else if (this.mode === "range") {
-            formattedDate = this._makeInputValueString(this.selectedDateRange[0], this.selectedDateRange[1], this.dateFormat);
-        }
-        const getPlaceholder = () => {
-            const validDateFormats = ["MM/DD/YYYY", "DD/MM/YYYY", "YYYY/MM/DD"];
-            if (this.mode === "range" && validDateFormats.includes(this.dateFormat)) {
-                return `${this.dateFormat.toLowerCase()} - ${this.dateFormat.toLowerCase()}`;
-            }
-            else if (this.mode === "single" && validDateFormats.includes(this.dateFormat)) {
-                return this.dateFormat.toLowerCase();
-            }
-            return "";
-        };
         const svgEl = html `
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -288,37 +298,62 @@ class SgdsDatepicker extends ScopedElementsMixin(DropdownElement) {
           d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
         />
       </svg>
-    `;
-        const svgIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
-    <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
-  </svg>
     `;
         return html `
       <div>
-        <sgds-input
-          id="myInput"
-          icon=${svgIcon}
-          .value=${live(formattedDate)}
-          inputClasses="rounded-0 rounded-start"
-          placeholder="${getPlaceholder()}"
-          aria-expanded="${this.menuIsOpen}"
-          ${ref(this.myDropdown)}
-          @click=${() => this.toggleMenu()}
-          readonly
+        <sgds-datepicker-input
+          .value=${live(this.value)}
           ?required=${this.required}
           ?disabled=${this.disabled}
-          role="combobox"
-          aria-haspopup="dialog"
-          aria-controls=${this.dropdownMenuId}
-        ></sgds-input>
-        <button
-          ?disabled=${this.disabled}
-          class="btn sgds rounded-0 d-flex align-items-center"
-          aria-label="reset the datepicker"
-          @click=${() => this._handleButtonResetClick()}
+          placeholder=""
+          ${ref(this.myDropdown)}
+          mode=${this.mode}
+          dateFormat=${this.dateFormat}
+          invalidFeedback=${this.invalidFeedback}
+          @sgds-mask-input-change=${this._handleInputMaskChange}
+          @sgds-invalid-input=${this._handleInvalidInput}
+          minDate=${this.minDate}
+          maxDate=${this.maxDate}
+          label=${this.label}
+          hintText=${this.hintText}
+          name=${this.name}
         >
-          ${svgEl}
-        </button>
+          <button
+            slot="calendar-btn"
+            class=${classMap({
+            "sgds btn rounded-0 border btn-outline-dark": true
+        })}
+            aria-expanded="${this.menuIsOpen}"
+            aria-haspopup="dialog"
+            aria-controls=${this.dropdownMenuId}
+            @click=${() => this.toggleMenu()}
+            aria-label=${this.menuIsOpen ? "Close Calendar" : "Open Calendar"}
+            ?disabled=${this.disabled}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              fill="currentColor"
+              class="bi bi-calendar"
+              viewBox="0 0 16 16"
+            >
+              <path
+                d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z"
+              />
+            </svg>
+          </button>
+          <button
+            slot="reset-btn"
+            ?disabled=${this.disabled}
+            class="btn sgds rounded-0 reset-btn"
+            @click=${() => this._handleButtonResetClick()}
+            aria-label="Reset Datepicker"
+          >
+            ${svgEl}
+          </button>
+        </sgds-datepicker-input>
+
         <ul
           id=${this.dropdownMenuId}
           class="sgds datepicker dropdown-menu"
@@ -349,9 +384,13 @@ class SgdsDatepicker extends ScopedElementsMixin(DropdownElement) {
     }
 }
 SgdsDatepicker.styles = [DropdownElement.styles, css_248z];
+SgdsDatepicker.formAssociated = true;
 __decorate([
     property({ type: Boolean, reflect: true })
 ], SgdsDatepicker.prototype, "required", void 0);
+__decorate([
+    property({ reflect: true })
+], SgdsDatepicker.prototype, "name", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], SgdsDatepicker.prototype, "disabled", void 0);
@@ -370,6 +409,24 @@ __decorate([
 __decorate([
     property({ type: String, reflect: true })
 ], SgdsDatepicker.prototype, "mode", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsDatepicker.prototype, "invalidFeedback", void 0);
+__decorate([
+    property({ reflect: true })
+], SgdsDatepicker.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true })
+], SgdsDatepicker.prototype, "hintText", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, state: false })
+], SgdsDatepicker.prototype, "noFlip", void 0);
+__decorate([
+    property({ type: String, reflect: true, state: false })
+], SgdsDatepicker.prototype, "drop", void 0);
+__decorate([
+    property({ attribute: false })
+], SgdsDatepicker.prototype, "displayDate", void 0);
 __decorate([
     state()
 ], SgdsDatepicker.prototype, "value", void 0);
@@ -379,21 +436,21 @@ __decorate([
 __decorate([
     state()
 ], SgdsDatepicker.prototype, "selectedDateRange", void 0);
-__decorate([
-    state()
-], SgdsDatepicker.prototype, "displayDate", void 0);
 __decorate([
     state()
 ], SgdsDatepicker.prototype, "focusedDate", void 0);
 __decorate([
     state()
 ], SgdsDatepicker.prototype, "focusedTabIndex", void 0);
-__decorate([
-    queryAsync("sgds-input")
-], SgdsDatepicker.prototype, "dropdownRef", void 0);
 __decorate([
     queryAsync("sgds-datepicker-calendar")
 ], SgdsDatepicker.prototype, "calendar", void 0);
+__decorate([
+    queryAsync("sgds-datepicker-input")
+], SgdsDatepicker.prototype, "datepickerInputAsync", void 0);
+__decorate([
+    query("sgds-datepicker-input")
+], SgdsDatepicker.prototype, "datepickerInput", void 0);
 __decorate([
     watch("value")
 ], SgdsDatepicker.prototype, "_handleValueChange", null);