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

package/components/Datepicker/sgds-datepicker.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-datepicker.cjs.js","sources":["../../../src/components/Datepicker/sgds-datepicker.ts"],"sourcesContent":["import { ScopedElementsMixin } from \"@open-wc/scoped-elements\";\nimport { html } from \"lit\";\nimport { property, queryAsync, state } from \"lit/decorators.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { DropdownElement } from \"../../base/dropdown-element\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsInput } from \"../Input/sgds-input\";\nimport { DatepickerCalendar } from \"./datepicker-calendar\";\nimport { DatepickerHeader } from \"./datepicker-header\";\nimport styles from \"./sgds-datepicker.scss\";\nimport { ViewEnum } from \"./types\";\nimport { sortAscDates } from \"../../utils/time\";\n\nexport type DateFormat = \"MM/DD/YYYY\" | \"DD/MM/YYYY\" | \"YYYY/MM/DD\";\n\n/**\n * @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.\n *\n * @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\n *\n * @cssproperty --datepicker-theme-color - Datepicker's overall theme color\n * @cssproperty --datepicker-hover-bg-color - Datepicker's calendar menu hover color\n * @cssproperty --datepicker-bg-color - Datepicker's menu background color\n * @cssproperty --datepicker-closebutton-bg-color - Datepicker's close button background color\n * @cssproperty --datepicker-closebutton-hover-bg-color - Datepicker's close button hover background color\n * @cssproperty --datepicker-closebutton-color - Datepicker's close button color\n * @cssproperty --datepicker-selected-date-bg-color - Selected date's background color\n * @cssproperty --datepicker-selected-date-text-color - Selected date's text color\n *\n * @description displayDate sets the month, year views of the calendar while focusedDate follows the focus which also directly changes\n * displayDate on certain occasions. Example, when keyboard moves up to the next month, it updates displayDate which then affect the current\n * date view of the calendar\n */\n\nexport class SgdsDatepicker extends ScopedElementsMixin(DropdownElement) {\n  static styles = [DropdownElement.styles, styles];\n\n  /**@internal */\n  static get scopedElements() {\n    return {\n      \"sgds-input\": SgdsInput,\n      \"sgds-datepicker-calendar\": DatepickerCalendar,\n      \"sgds-datepicker-header\": DatepickerHeader\n    };\n  }\n\n  /** When true, adds required attribute to input element */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** When true, adds disabled attribute to input and button element */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** 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  */\n  @property({ type: Array, reflect: true }) initialValue: string[];\n\n  /** Date format reflected on input  */\n  @property({ type: String }) dateFormat: DateFormat = \"DD/MM/YYYY\";\n\n  /** ISO date string to set the lowest allowable date value. e.g. \"2016-05-19T12:00:00.000Z\" */\n  @property({ type: String }) minDate: string;\n\n  /** ISO date string to set the highest allowable date value. e.g. \"2016-05-19T12:00:00.000Z\" */\n  @property({ type: String }) maxDate: string;\n\n  /** Changes DatePicker to single date selection or range date selection */\n  @property({ type: String, reflect: true }) mode: \"single\" | \"range\" = \"single\";\n\n  /** @internal */\n  @state() value: string;\n\n  /** @internal */\n  @state()\n  private view: ViewEnum = \"days\";\n\n  /** @internal */\n  @state() private selectedDateRange: Date[] = [];\n\n  /** @internal */\n  @state() private displayDate: Date = new Date();\n\n  /** @internal */\n  @state() private focusedDate: Date = new Date();\n\n  @state() private focusedTabIndex = 3;\n\n  @queryAsync(\"sgds-input\")\n  private dropdownRef: Promise<SgdsInput>;\n\n  @queryAsync(\"sgds-datepicker-calendar\")\n  private calendar: Promise<DatepickerCalendar>;\n\n  constructor() {\n    super();\n    this.modifierOpt = [\n      {\n        name: \"offset\",\n        options: {\n          offset: [0, 10]\n        }\n      }\n    ];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-view\", this._handleViewChanged);\n    this.addEventListener(\"sgds-change-calendar\", this._handleDateChanged);\n    this.addEventListener(\"sgds-update-focus\", this._handleFocusDateChanged);\n    this.addEventListener(\"sgds-selectmonth\", this._handleSelectMonth);\n    this.addEventListener(\"sgds-selectyear\", this._handleSelectYear);\n    this.addEventListener(\"sgds-selectdates\", this._handleSelectDates);\n    this.addEventListener(\"keydown\", this._handleTab);\n    this.addEventListener(\"sgds-hide\", this._handleCloseMenu);\n\n    if (this.initialValue && this.initialValue.length > 0) {\n      // Validate initialValue against the dateFormat regex\n      const dateFormatRegex = new RegExp(this._getDateFormatRegex());\n      const startDateString = this.initialValue[0];\n\n      if (!dateFormatRegex.test(startDateString)) {\n        // Handle invalid date format in initialValue\n        console.error(\"Invalid date format in initialValue:\", startDateString);\n        return;\n      }\n\n      const startDate = this._parseDateStringToDate(startDateString);\n\n      if (this.mode === \"single\" && startDate) {\n        // Single mode\n        this.selectedDateRange = [startDate];\n        this.displayDate = startDate;\n      } else if (this.mode === \"range\" && this.initialValue.length === 2) {\n        // Range mode\n        const endDateString = this.initialValue[1];\n\n        if (!dateFormatRegex.test(endDateString)) {\n          // Handle invalid date format in initialValue\n          console.error(\"Invalid date format in initialValue:\", endDateString);\n          return;\n        }\n\n        const endDate = this._parseDateStringToDate(endDateString);\n\n        if (startDate && endDate) {\n          this.selectedDateRange = [startDate, endDate];\n          this.selectedDateRange = sortAscDates(this.selectedDateRange);\n          // this.selectedDateRange.sort((a, b) => a.getTime() - b.getTime());\n\n          this.displayDate = startDate;\n        }\n      }\n    }\n\n    if (this.selectedDateRange && this.selectedDateRange.length > 0) {\n      // Get the formattedDate value for the selected dates\n      const formattedDate = this._makeInputValueString(\n        this.selectedDateRange[0],\n        this.selectedDateRange[1],\n        this.dateFormat\n      );\n\n      this.value = formattedDate;\n    } else {\n      // If selectedDateRange is empty, emit sgds-change-date event with an empty string\n      this.value = \"\";\n    }\n  }\n  async firstUpdated() {\n    super.firstUpdated();\n    if (this.menuIsOpen) {\n      const input = await this.dropdownRef;\n      this.showMenu();\n      const cal = await this.calendar;\n      cal.focusOnCalendar(input);\n    }\n  }\n\n  private _parseDateStringToDate(dateString: string): Date | null {\n    let year: string, month: string, day: string;\n\n    switch (this.dateFormat) {\n      case \"MM/DD/YYYY\":\n        [month, day, year] = dateString.split(\"/\");\n        break;\n      case \"DD/MM/YYYY\":\n        [day, month, year] = dateString.split(\"/\");\n        break;\n      case \"YYYY/MM/DD\":\n        [year, month, day] = dateString.split(\"/\");\n        break;\n      default:\n        return null;\n    }\n\n    return new Date(`${year}-${month}-${day}`);\n  }\n\n  /** @internal */\n  private _getDateFormatRegex(): string {\n    // validate date strings and adhere to the specified date format\n    return (\n      this.dateFormat\n        // Replace any special characters with their escaped version using \"\\\\$&\"\n        .replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\")\n        // Replace 'MM' with '\\\\d{2}', which matches two digits representing the month (e.g., 01, 12)\n        .replace(\"MM\", \"\\\\d{2}\")\n        // Replace 'DD' with '\\\\d{2}', which matches two digits representing the day (e.g., 01, 31)\n        .replace(\"DD\", \"\\\\d{2}\")\n        // Replace 'YYYY' with '\\\\d{4}', which matches four digits representing the year (e.g., 2021)\n        .replace(\"YYYY\", \"\\\\d{4}\")\n        // Replace '/' with '\\\\/', which matches the forward slash character\n        .replace(\"/\", \"\\\\/\")\n    );\n  }\n  private _handleTab(event: KeyboardEvent) {\n    const tabIndexArray = Array(4);\n    if (event.shiftKey && event.key === \"Tab\") {\n      event.preventDefault();\n      this.focusedTabIndex = (this.focusedTabIndex - 1 + tabIndexArray.length) % tabIndexArray.length;\n    } else if (event.key === \"Tab\") {\n      event.preventDefault();\n      this.focusedTabIndex = (this.focusedTabIndex + 1 + tabIndexArray.length) % tabIndexArray.length;\n    }\n  }\n\n  @watch(\"value\")\n  _handleValueChange() {\n    this.emit(\"sgds-change-date\");\n  }\n\n  private async _handleCloseMenu() {\n    if (this.selectedDateRange.length === 0) {\n      this.displayDate = new Date();\n    } else {\n      const selectedDatesLength = this.selectedDateRange.length;\n      this.displayDate = this.selectedDateRange[selectedDatesLength - 1];\n      const calendar = await this.calendar;\n      calendar._updateFocusedDate();\n    }\n  }\n\n  private _makeInputValueString = (startDate: Date, endDate: Date, dateFormat: string) => {\n    if (!startDate && !endDate) return \"\";\n\n    const formatDate = (date: Date) => {\n      if (!(date instanceof Date) || isNaN(date.getTime())) {\n        return \"\"; // Return an empty string if the date is not a valid Date object\n      }\n\n      const month = date.getMonth() + 1;\n      const day = date.getDate();\n      const separator = \"/\";\n      const formattedMonth = month > 9 ? month.toString() : `0${month}`;\n      const formattedDay = day > 9 ? day.toString() : `0${day}`;\n\n      return dateFormat === \"YYYY/MM/DD\"\n        ? `${date.getFullYear()}${separator}${formattedMonth}${separator}${formattedDay}`\n        : dateFormat === \"DD/MM/YYYY\"\n        ? `${formattedDay}${separator}${formattedMonth}${separator}${date.getFullYear()}`\n        : `${formattedMonth}${separator}${formattedDay}${separator}${date.getFullYear()}`;\n    };\n\n    if (startDate && endDate) {\n      return `${formatDate(startDate)} - ${formatDate(endDate)}`;\n    }\n\n    if (startDate) {\n      return formatDate(startDate);\n    }\n\n    return \"\";\n  };\n\n  private _handleSelectDates(event: CustomEvent<Date[]>) {\n    const newSelectedDates = event.detail;\n    this.displayDate = newSelectedDates[0];\n    this.focusedDate = newSelectedDates[0];\n    if (this.mode === \"range\") {\n      // Sort the newSelectedDates array in ascending order\n      newSelectedDates.sort((a: Date, b: Date) => a.getTime() - b.getTime());\n\n      this.selectedDateRange = newSelectedDates;\n      if (this.selectedDateRange.length === 2) {\n        this.hideMenu();\n      }\n    } else if (this.mode === \"single\") {\n      this.selectedDateRange = [newSelectedDates[0]];\n\n      if (this.selectedDateRange.length === 1) {\n        this.hideMenu();\n      }\n    }\n\n    // Get the formattedDate value for the selected dates\n    const formattedDate = this._makeInputValueString(\n      this.selectedDateRange[0],\n      this.selectedDateRange[1],\n      this.dateFormat\n    );\n\n    // Set formattedDate value as the new value for sgds-input\n    this.value = formattedDate;\n  }\n\n  /** update latest view state from datepicker-header */\n  private _handleViewChanged(event: CustomEvent<string>) {\n    this.view = event.detail as ViewEnum;\n  }\n\n  private _handleDateChanged(event: CustomEvent<Date>) {\n    this.displayDate = event.detail;\n  }\n  private _handleFocusDateChanged(event: CustomEvent<Date>) {\n    this.focusedDate = event.detail;\n  }\n\n  private _handleSelectMonth(event: CustomEvent<Date>) {\n    this.displayDate = event.detail;\n  }\n\n  private _handleSelectYear(event: CustomEvent<Date>) {\n    this.displayDate = event.detail;\n  }\n\n  private _handleButtonResetClick() {\n    this.displayDate = new Date();\n    this.selectedDateRange = [];\n    this.value = \"\";\n    this.view = \"days\";\n\n    this.hideMenu();\n  }\n\n  render() {\n    let formattedDate = \"\";\n    if (this.mode === \"single\") {\n      formattedDate = this._makeInputValueString(this.selectedDateRange[0], undefined, this.dateFormat);\n    } else if (this.mode === \"range\") {\n      formattedDate = this._makeInputValueString(this.selectedDateRange[0], this.selectedDateRange[1], this.dateFormat);\n    }\n\n    const getPlaceholder = (): string => {\n      const validDateFormats: DateFormat[] = [\"MM/DD/YYYY\", \"DD/MM/YYYY\", \"YYYY/MM/DD\"];\n\n      if (this.mode === \"range\" && validDateFormats.includes(this.dateFormat)) {\n        return `${this.dateFormat.toLowerCase()} - ${this.dateFormat.toLowerCase()}`;\n      } else if (this.mode === \"single\" && validDateFormats.includes(this.dateFormat)) {\n        return this.dateFormat.toLowerCase();\n      }\n\n      return \"\";\n    };\n\n    const svgEl = html`\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"16\"\n        height=\"16\"\n        fill=\"currentColor\"\n        class=\"bi bi-x\"\n        viewBox=\"0 0 16 16\"\n      >\n        <path\n          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\"\n        />\n      </svg>\n    `;\n\n    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\">\n    <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\"/>\n  </svg>\n    `;\n    return html`\n      <div>\n        <sgds-input\n          id=\"myInput\"\n          icon=${svgIcon}\n          .value=${live(formattedDate)}\n          inputClasses=\"rounded-0 rounded-start\"\n          placeholder=\"${getPlaceholder()}\"\n          aria-expanded=\"${this.menuIsOpen}\"\n          ${ref(this.myDropdown)}\n          @click=${() => this.toggleMenu()}\n          readonly\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n          role=\"combobox\"\n          aria-haspopup=\"dialog\"\n          aria-controls=${this.dropdownMenuId}\n        ></sgds-input>\n        <button\n          ?disabled=${this.disabled}\n          class=\"btn sgds rounded-0 d-flex align-items-center\"\n          aria-label=\"reset the datepicker\"\n          @click=${() => this._handleButtonResetClick()}\n        >\n          ${svgEl}\n        </button>\n        <ul\n          id=${this.dropdownMenuId}\n          class=\"sgds datepicker dropdown-menu\"\n          role=\"dialog\"\n          part=\"menu\"\n          @click=${(event: MouseEvent) => event.stopPropagation()}\n        >\n          <sgds-datepicker-header\n            .view=${this.view}\n            .displayDate=${this.displayDate}\n            .focusedDate=${this.focusedDate}\n            .selectedDate=${this.selectedDateRange}\n            .focusedTabIndex=${this.focusedTabIndex}\n          ></sgds-datepicker-header>\n          <sgds-datepicker-calendar\n            .show=${this.menuIsOpen}\n            .view=${this.view}\n            .displayDate=${this.displayDate}\n            .mode=${this.mode}\n            minDate=${this.minDate}\n            maxDate=${this.maxDate}\n            .selectedDate=${this.selectedDateRange}\n            .focusedTabIndex=${this.focusedTabIndex}\n          ></sgds-datepicker-calendar>\n        </ul>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDatepicker;\n"],"names":["ScopedElementsMixin","DropdownElement","SgdsInput","DatepickerCalendar","DatepickerHeader","sortAscDates","html","live","ref","styles","__decorate","property","state","queryAsync","watch"],"mappings":"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"}
+{"version":3,"file":"sgds-datepicker.cjs.js","sources":["../../../src/components/Datepicker/sgds-datepicker.ts"],"sourcesContent":["import { ScopedElementsMixin } from \"@open-wc/scoped-elements\";\nimport { format, parse } from \"date-fns\";\nimport { html } from \"lit\";\nimport { property, query, queryAsync, state } from \"lit/decorators.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { DropdownElement } from \"../../base/dropdown-element\";\nimport { watch } from \"../../utils/watch\";\nimport { DatepickerCalendar } from \"./datepicker-calendar\";\nimport { DatepickerHeader } from \"./datepicker-header\";\nimport DatepickerInput from \"./datepicker-input\";\nimport styles from \"./sgds-datepicker.scss\";\nimport { ViewEnum } from \"./types\";\nimport { DATE_PATTERNS, setTimeToNoon } from \"../../utils/time\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { type SgdsFormControl } from \"../../utils/form\";\n\nexport type DateFormat = \"MM/DD/YYYY\" | \"DD/MM/YYYY\" | \"YYYY/MM/DD\";\n\n/**\n * @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\n *\n * @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\n *\n * @cssproperty --datepicker-theme-color - Datepicker's overall theme color\n * @cssproperty --datepicker-hover-bg-color - Datepicker's calendar menu hover color\n * @cssproperty --datepicker-bg-color - Datepicker's menu background color\n * @cssproperty --datepicker-closebutton-bg-color - Datepicker's close button background color\n * @cssproperty --datepicker-closebutton-hover-bg-color - Datepicker's close button hover background color\n * @cssproperty --datepicker-closebutton-color - Datepicker's close button color\n * @cssproperty --datepicker-selected-date-bg-color - Selected date's background color\n * @cssproperty --datepicker-selected-date-text-color - Selected date's text color\n *\n * @description displayDate sets the month, year views of the calendar while focusedDate follows the focus which also directly changes\n * displayDate on certain occasions. Example, when keyboard moves up to the next month, it updates displayDate which then affect the current\n * date view of the calendar\n */\nexport class SgdsDatepicker extends ScopedElementsMixin(DropdownElement) implements SgdsFormControl {\n  static styles = [DropdownElement.styles, styles];\n  static formAssociated = true;\n  private _internals: ElementInternals;\n\n  /**@internal */\n  static get scopedElements() {\n    return {\n      \"sgds-datepicker-input\": DatepickerInput,\n      \"sgds-datepicker-calendar\": DatepickerCalendar,\n      \"sgds-datepicker-header\": DatepickerHeader\n    };\n  }\n\n  /** When true, adds required attribute to input element */\n  @property({ type: Boolean, reflect: true }) required = false;\n  /**The datepicker input's name attribute */\n  @property({ reflect: true }) name: string;\n  /** When true, adds disabled attribute to input and button element */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** 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  */\n  @property({ type: Array, reflect: true }) initialValue: string[] = [];\n\n  /** Date format reflected on input  */\n  @property({ type: String }) dateFormat: DateFormat = \"DD/MM/YYYY\";\n\n  /** ISO date string to set the lowest allowable date value. e.g. \"2016-05-19T12:00:00.000Z\" */\n  @property({ type: String }) minDate = \"\";\n\n  /** ISO date string to set the highest allowable date value. e.g. \"2016-05-19T12:00:00.000Z\" */\n  @property({ type: String }) maxDate = \"\";\n\n  /** Changes DatePicker to single date selection or range date selection */\n  @property({ type: String, reflect: true }) mode: \"single\" | \"range\" = \"single\";\n\n  /**Feedback text for error state when date input is invalid */\n  @property({ type: String, reflect: true }) invalidFeedback = \"Please enter a valid date\";\n\n  /** The datepicker input's label  */\n  @property({ reflect: true }) label = \"\";\n\n  /** The datepicker input's hint text below the label */\n  @property({ reflect: true }) hintText = \"\";\n\n  /** Controls auto-flipping of menu */\n  @property({ type: Boolean, reflect: true, state: false })\n  noFlip = false;\n\n  /** The drop position of menu relative to the toggle button */\n  @property({ type: String, reflect: true, state: false })\n  drop: \"up\" | \"down\" = \"down\";\n\n  /** Provides the date context for Calendar to present the appropriate view. Defaults to today's date */\n  @property({ attribute: false }) displayDate: Date;\n\n  @state() value = \"\";\n\n  @state()\n  private view: ViewEnum = \"days\";\n\n  @state() private selectedDateRange: Date[] = [];\n\n  @state() private focusedDate: Date;\n\n  @state() private focusedTabIndex = 3;\n\n  private initialDisplayDate: Date;\n\n  @queryAsync(\"sgds-datepicker-calendar\")\n  private calendar: Promise<DatepickerCalendar>;\n\n  @queryAsync(\"sgds-datepicker-input\")\n  private datepickerInputAsync: Promise<DatepickerInput>;\n\n  @query(\"sgds-datepicker-input\")\n  private datepickerInput: DatepickerInput;\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  public reportValidity(): boolean {\n    return this._internals.reportValidity();\n  }\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n    /**@internal */\n    this.modifierOpt = [\n      {\n        name: \"offset\",\n        options: {\n          offset: [0, 10]\n        }\n      }\n    ];\n  }\n\n  async connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-view\", this._handleViewChanged);\n    this.addEventListener(\"sgds-change-calendar\", this._handleDateChanged);\n    this.addEventListener(\"sgds-update-focus\", this._handleFocusDateChanged);\n    this.addEventListener(\"sgds-selectmonth\", this._handleSelectMonth);\n    this.addEventListener(\"sgds-selectyear\", this._handleSelectYear);\n    this.addEventListener(\"sgds-selectdates\", this._handleSelectDatesAndClose);\n    this.addEventListener(\"sgds-selectdates-input\", this._handleSelectDatesInput);\n    this.addEventListener(\"sgds-empty-input\", this._handleEmptyInput);\n    this.addEventListener(\"keydown\", this._handleTab);\n    this.addEventListener(\"sgds-hide\", this._handleCloseMenu);\n    this.initialDisplayDate = this.displayDate || new Date();\n    if (this.initialValue && this.initialValue.length > 0) {\n      // Validate initialValue against the dateFormat regex\n      const dateFormatRegex = new RegExp(this._getDateFormatRegex());\n      // const startDateString = this.initialValue[0];\n      const invalidDates = this.initialValue.filter(v => !dateFormatRegex.test(v));\n      if (invalidDates.length > 0) {\n        return console.error(\"Invalid date format in initialValue:\", invalidDates);\n      } else {\n        const initialSelectedDates = this.initialValue.map(v =>\n          setTimeToNoon(parse(v, DATE_PATTERNS[this.dateFormat].fnsPattern, new Date()))\n        );\n        this._handleSelectDates(initialSelectedDates);\n      }\n    } else {\n      this.displayDate = this.initialDisplayDate;\n    }\n  }\n\n  async firstUpdated() {\n    super.firstUpdated();\n    if (this.menuIsOpen) {\n      const input = await this.datepickerInputAsync;\n      this.showMenu();\n      const cal = await this.calendar;\n      cal.focusOnCalendar(input);\n    }\n\n    const shadowInput = await this.datepickerInput.shadowInput;\n    this._manageInternalsDefault(shadowInput);\n    this._internals.setValidity(shadowInput.validity, shadowInput.validationMessage, shadowInput);\n  }\n\n  /** @internal */\n  private _getDateFormatRegex(): string {\n    // validate date strings and adhere to the specified date format\n    return (\n      this.dateFormat\n        // Replace any special characters with their escaped version using \"\\\\$&\"\n        .replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\")\n        // Replace 'MM' with '\\\\d{2}', which matches two digits representing the month (e.g., 01, 12)\n        .replace(\"MM\", \"\\\\d{2}\")\n        // Replace 'DD' with '\\\\d{2}', which matches two digits representing the day (e.g., 01, 31)\n        .replace(\"DD\", \"\\\\d{2}\")\n        // Replace 'YYYY' with '\\\\d{4}', which matches four digits representing the year (e.g., 2021)\n        .replace(\"YYYY\", \"\\\\d{4}\")\n        // Replace '/' with '\\\\/', which matches the forward slash character\n        .replace(\"/\", \"\\\\/\")\n    );\n  }\n  private _handleTab(event: KeyboardEvent) {\n    if (!this.menuIsOpen) {\n      return;\n    }\n    const tabIndexArray = Array(4);\n    if (event.shiftKey && event.key === \"Tab\") {\n      event.preventDefault();\n      this.focusedTabIndex = (this.focusedTabIndex - 1 + tabIndexArray.length) % tabIndexArray.length;\n    } else if (event.key === \"Tab\") {\n      event.preventDefault();\n      this.focusedTabIndex = (this.focusedTabIndex + 1 + tabIndexArray.length) % tabIndexArray.length;\n    }\n  }\n\n  @watch(\"value\")\n  _handleValueChange() {\n    this.emit(\"sgds-change-date\");\n    this._setInternalFormValue(this.value);\n  }\n\n  private async _handleCloseMenu() {\n    if (this.selectedDateRange.length === 0) {\n      this.displayDate = this.initialDisplayDate;\n    } else {\n      const selectedDatesLength = this.selectedDateRange.length;\n      this.displayDate = this.selectedDateRange[selectedDatesLength - 1];\n      const calendar = await this.calendar;\n      calendar._updateFocusedDate();\n    }\n  }\n\n  private _makeInputValueString = (startDate: Date, endDate: Date, dateFormat: string) => {\n    if (!startDate && !endDate) return this.value;\n    const formatDate = (date: Date) => format(date, DATE_PATTERNS[dateFormat].fnsPattern);\n    switch (this.mode) {\n      case \"single\": {\n        if (startDate) {\n          this.value = formatDate(startDate);\n        }\n        break;\n      }\n      case \"range\": {\n        if (startDate && endDate) {\n          this.value = `${formatDate(startDate)} - ${formatDate(endDate)}`;\n        }\n        if (startDate && !endDate) {\n          this.value = `${formatDate(startDate)} - ${this.dateFormat.toLowerCase()}`;\n        }\n        break;\n      }\n    }\n    return this.value;\n  };\n  private _handleSelectDatesInput(event: CustomEvent<Date[]>) {\n    this._handleSelectDates(event.detail);\n    this._manageInternalsDefault(this._shadowInput);\n  }\n  private async _handleSelectDates(newSelectedDates: Date[]) {\n    newSelectedDates.sort((a: Date, b: Date) => a.getTime() - b.getTime());\n    this.displayDate = newSelectedDates[0];\n    this.focusedDate = newSelectedDates[0];\n    this.selectedDateRange = newSelectedDates;\n\n    // Get the formattedDate value for the selected dates\n    const formattedDate = this._makeInputValueString(\n      this.selectedDateRange[0],\n      this.selectedDateRange[1],\n      this.dateFormat\n    );\n\n    // Set formattedDate value as the new value for sgds-input\n    this.value = formattedDate;\n    const input = await this.datepickerInputAsync;\n    input.updateMaskValue();\n  }\n\n  private get _shadowInput() {\n    return this.datepickerInput.shadowRoot.querySelector(\"input\");\n  }\n  private _handleSelectDatesAndClose(event: CustomEvent<Date[]>) {\n    this._handleSelectDates(event.detail);\n\n    if (this.mode === \"range\" && this.selectedDateRange.length === 2) {\n      this.hideMenu();\n    } else if (this.mode === \"single\" && this.selectedDateRange.length === 1) {\n      this.hideMenu();\n    }\n    this._manageInternalsValid();\n  }\n\n  /** update latest view state from datepicker-header */\n  private _handleViewChanged(event: CustomEvent<string>) {\n    this.view = event.detail as ViewEnum;\n  }\n\n  private _handleDateChanged(event: CustomEvent<Date>) {\n    this.displayDate = event.detail;\n  }\n  private _handleFocusDateChanged(event: CustomEvent<Date>) {\n    this.focusedDate = event.detail;\n  }\n\n  private _handleSelectMonth(event: CustomEvent<Date>) {\n    this.displayDate = event.detail;\n  }\n\n  private _handleSelectYear(event: CustomEvent<Date>) {\n    this.displayDate = event.detail;\n  }\n  private async _handleInvalidInput() {\n    this.selectedDateRange = [];\n    this.displayDate = this.initialDisplayDate;\n    this._manageInternalsBadInput();\n  }\n  private async _handleButtonResetClick() {\n    this.displayDate = this.initialDisplayDate;\n    this.selectedDateRange = [];\n    this.value = \"\";\n    this.view = \"days\";\n    this.hideMenu();\n    const input = await this.datepickerInputAsync;\n    input.setInvalid(false);\n    input.destroyInputMask();\n    await input.applyInputMask();\n\n    this._manageInternalsRequired();\n  }\n\n  private async _handleEmptyInput() {\n    this._manageInternalsRequired();\n  }\n\n  private _manageInternalsRequired() {\n    this.required\n      ? this._internals.setValidity(\n          {\n            valueMissing: true\n          },\n          \"Please fill in this field\",\n          this._shadowInput\n        )\n      : this._internals.setValidity({});\n  }\n  private _manageInternalsBadInput() {\n    this._internals.setValidity(\n      {\n        badInput: true\n      },\n      \"The chosen date(s) are invalid\",\n      this._shadowInput\n    );\n  }\n\n  private _manageInternalsValid() {\n    this._internals.setValidity({});\n  }\n\n  private _manageInternalsDefault(inputEl: HTMLInputElement) {\n    this._internals.setValidity(inputEl.validity, inputEl.validationMessage, inputEl);\n  }\n\n  private _setInternalFormValue(value: string) {\n    this._internals.setFormValue(value);\n  }\n\n  private async _handleInputMaskChange(e: CustomEvent) {\n    this.value = e.detail;\n  }\n  render() {\n    const svgEl = html`\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"16\"\n        height=\"16\"\n        fill=\"currentColor\"\n        class=\"bi bi-x\"\n        viewBox=\"0 0 16 16\"\n      >\n        <path\n          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\"\n        />\n      </svg>\n    `;\n\n    return html`\n      <div>\n        <sgds-datepicker-input\n          .value=${live(this.value)}\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n          placeholder=\"\"\n          ${ref(this.myDropdown)}\n          mode=${this.mode}\n          dateFormat=${this.dateFormat}\n          invalidFeedback=${this.invalidFeedback}\n          @sgds-mask-input-change=${this._handleInputMaskChange}\n          @sgds-invalid-input=${this._handleInvalidInput}\n          minDate=${this.minDate}\n          maxDate=${this.maxDate}\n          label=${this.label}\n          hintText=${this.hintText}\n          name=${this.name}\n        >\n          <button\n            slot=\"calendar-btn\"\n            class=${classMap({\n              \"sgds btn rounded-0 border btn-outline-dark\": true\n            })}\n            aria-expanded=\"${this.menuIsOpen}\"\n            aria-haspopup=\"dialog\"\n            aria-controls=${this.dropdownMenuId}\n            @click=${() => this.toggleMenu()}\n            aria-label=${this.menuIsOpen ? \"Close Calendar\" : \"Open Calendar\"}\n            ?disabled=${this.disabled}\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              fill=\"currentColor\"\n              class=\"bi bi-calendar\"\n              viewBox=\"0 0 16 16\"\n            >\n              <path\n                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\"\n              />\n            </svg>\n          </button>\n          <button\n            slot=\"reset-btn\"\n            ?disabled=${this.disabled}\n            class=\"btn sgds rounded-0 reset-btn\"\n            @click=${() => this._handleButtonResetClick()}\n            aria-label=\"Reset Datepicker\"\n          >\n            ${svgEl}\n          </button>\n        </sgds-datepicker-input>\n\n        <ul\n          id=${this.dropdownMenuId}\n          class=\"sgds datepicker dropdown-menu\"\n          role=\"dialog\"\n          part=\"menu\"\n          @click=${(event: MouseEvent) => event.stopPropagation()}\n        >\n          <sgds-datepicker-header\n            .view=${this.view}\n            .displayDate=${this.displayDate}\n            .focusedDate=${this.focusedDate}\n            .selectedDate=${this.selectedDateRange}\n            .focusedTabIndex=${this.focusedTabIndex}\n          ></sgds-datepicker-header>\n          <sgds-datepicker-calendar\n            .show=${this.menuIsOpen}\n            .view=${this.view}\n            .displayDate=${this.displayDate}\n            .mode=${this.mode}\n            minDate=${this.minDate}\n            maxDate=${this.maxDate}\n            .selectedDate=${this.selectedDateRange}\n            .focusedTabIndex=${this.focusedTabIndex}\n          ></sgds-datepicker-calendar>\n        </ul>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDatepicker;\n"],"names":["ScopedElementsMixin","DropdownElement","DatepickerInput","DatepickerCalendar","DatepickerHeader","format","DATE_PATTERNS","setTimeToNoon","parse","html","live","ref","classMap","styles","__decorate","property","state","queryAsync","query","watch"],"mappings":"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"}

package/components/Datepicker/sgds-datepicker.cjs2.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host{--datepicker-theme-color:var(--sgds-primary);--datepicker-hover-bg-color:var(--sgds-primary-100);--datepicker-bg-color:#fff;--datepicker-closebutton-bg-color:var(--datepicker-theme-color);--datepicker-closebutton-hover-bg-color:var(--sgds-primary-600);--datepicker-closebutton-color:#fff;--datepicker-selected-date-bg-color:var(--sgds-primary-600);--datepicker-selected-date-text-color:#fff}div{display:flex}.datepicker{background-color:var(--datepicker-bg-color)}sgds-input{flex:1;margin-right:0}button.btn{background-color:var(--datepicker-closebutton-bg-color)}button.btn,button.btn:hover{color:var(--datepicker-closebutton-color)}button.btn:hover{background-color:var(--datepicker-closebutton-hover-bg-color)}`;
+var css_248z = lit.css`:host{--datepicker-theme-color:var(--sgds-primary);--datepicker-hover-bg-color:var(--sgds-primary-100);--datepicker-bg-color:#fff;--datepicker-closebutton-bg-color:var(--datepicker-theme-color);--datepicker-closebutton-hover-bg-color:var(--sgds-primary-600);--datepicker-closebutton-color:#fff;--datepicker-selected-date-bg-color:var(--sgds-primary-600);--datepicker-selected-date-text-color:#fff}div{display:flex}button{align-self:self-start}.datepicker{background-color:var(--datepicker-bg-color)}sgds-datepicker-input{flex:1;margin-right:0}.reset-btn{background-color:var(--datepicker-closebutton-bg-color)}.reset-btn,.reset-btn:hover{color:var(--datepicker-closebutton-color)}.reset-btn:hover{background-color:var(--datepicker-closebutton-hover-bg-color)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=sgds-datepicker.cjs2.js.map

package/components/Datepicker/sgds-datepicker.d.ts

@@ -1,11 +1,12 @@
 import { DropdownElement } from "../../base/dropdown-element";
-import { SgdsInput } from "../Input/sgds-input";
 import { DatepickerCalendar } from "./datepicker-calendar";
 import { DatepickerHeader } from "./datepicker-header";
+import DatepickerInput from "./datepicker-input";
+import { type SgdsFormControl } from "../../utils/form";
 export type DateFormat = "MM/DD/YYYY" | "DD/MM/YYYY" | "YYYY/MM/DD";
 declare const SgdsDatepicker_base: typeof DropdownElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types").ScopedElementsHost>;
 /**
- * @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
  *
@@ -22,16 +23,20 @@ declare const SgdsDatepicker_base: typeof DropdownElement & import("@open-wc/ded
  * displayDate on certain occasions. Example, when keyboard moves up to the next month, it updates displayDate which then affect the current
  * date view of the calendar
  */
-export declare class SgdsDatepicker extends SgdsDatepicker_base {
+export declare class SgdsDatepicker extends SgdsDatepicker_base implements SgdsFormControl {
     static styles: import("lit").CSSResultGroup[];
+    static formAssociated: boolean;
+    private _internals;
     /**@internal */
     static get scopedElements(): {
-        "sgds-input": typeof SgdsInput;
+        "sgds-datepicker-input": typeof DatepickerInput;
         "sgds-datepicker-calendar": typeof DatepickerCalendar;
         "sgds-datepicker-header": typeof DatepickerHeader;
     };
     /** When true, adds required attribute to input element */
     required: boolean;
+    /**The datepicker input's name attribute */
+    name: string;
     /** When true, adds disabled attribute to input and button element */
     disabled: boolean;
     /** 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  */
@@ -44,37 +49,57 @@ export declare class SgdsDatepicker extends SgdsDatepicker_base {
     maxDate: string;
     /** Changes DatePicker to single date selection or range date selection */
     mode: "single" | "range";
-    /** @internal */
+    /**Feedback text for error state when date input is invalid */
+    invalidFeedback: string;
+    /** The datepicker input's label  */
+    label: string;
+    /** The datepicker input's hint text below the label */
+    hintText: string;
+    /** Controls auto-flipping of menu */
+    noFlip: boolean;
+    /** The drop position of menu relative to the toggle button */
+    drop: "up" | "down";
+    /** Provides the date context for Calendar to present the appropriate view. Defaults to today's date */
+    displayDate: Date;
     value: string;
-    /** @internal */
     private view;
-    /** @internal */
     private selectedDateRange;
-    /** @internal */
-    private displayDate;
-    /** @internal */
     private focusedDate;
     private focusedTabIndex;
-    private dropdownRef;
+    private initialDisplayDate;
     private calendar;
+    private datepickerInputAsync;
+    private datepickerInput;
+    /** Checks for validity and shows the browser's validation message if the control is invalid. */
+    reportValidity(): boolean;
     constructor();
-    connectedCallback(): void;
+    connectedCallback(): Promise<void>;
     firstUpdated(): Promise<void>;
-    private _parseDateStringToDate;
     /** @internal */
     private _getDateFormatRegex;
     private _handleTab;
     _handleValueChange(): void;
     private _handleCloseMenu;
     private _makeInputValueString;
+    private _handleSelectDatesInput;
     private _handleSelectDates;
+    private get _shadowInput();
+    private _handleSelectDatesAndClose;
     /** update latest view state from datepicker-header */
     private _handleViewChanged;
     private _handleDateChanged;
     private _handleFocusDateChanged;
     private _handleSelectMonth;
     private _handleSelectYear;
+    private _handleInvalidInput;
     private _handleButtonResetClick;
+    private _handleEmptyInput;
+    private _manageInternalsRequired;
+    private _manageInternalsBadInput;
+    private _manageInternalsValid;
+    private _manageInternalsDefault;
+    private _setInternalFormValue;
+    private _handleInputMaskChange;
     render(): import("lit-html").TemplateResult<1>;
 }
 export default SgdsDatepicker;