@ministryofjustice/frontend 5.0.0 → 5.1.0

package/moj/components/date-picker/date-picker.mjs

@@ -1,66 +1,34 @@
-class DatePicker {
+import { ConfigurableComponent } from 'govuk-frontend';
+
+/**
+ * @augments {ConfigurableComponent<DatePickerConfig>}
+ */
+class DatePicker extends ConfigurableComponent {
   /**
-   * @param {Element | null} $module - HTML element to use for date picker
+   * @param {Element | null} $root - HTML element to use for date picker
    * @param {DatePickerConfig} [config] - Date picker config
    */
-  constructor($module, config = {}) {
-    if (!$module || !($module instanceof HTMLElement)) {
-      return this;
-    }
-    const $input = $module.querySelector('.moj-js-datepicker-input');
-
-    // Check that required elements are present
+  constructor($root, config = {}) {
+    var _this$config$input$el;
+    super($root, config);
+    const $input = (_this$config$input$el = this.config.input.element) != null ? _this$config$input$el : this.$root.querySelector(this.config.input.selector);
     if (!$input || !($input instanceof HTMLInputElement)) {
       return this;
     }
-    this.$module = $module;
     this.$input = $input;
-    const schema = Object.freeze({
-      properties: {
-        excludedDates: {
-          type: 'string'
-        },
-        excludedDays: {
-          type: 'string'
-        },
-        leadingZeros: {
-          type: 'string'
-        },
-        maxDate: {
-          type: 'string'
-        },
-        minDate: {
-          type: 'string'
-        },
-        weekStartDay: {
-          type: 'string'
-        }
-      }
-    });
-    const defaults = {
-      leadingZeros: false,
-      weekStartDay: 'monday'
-    };
-
-    // data attributes override JS config, which overrides defaults
-    this.config = this.mergeConfigs(defaults, config, this.parseDataset(schema, $module.dataset));
     this.dayLabels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
     this.monthLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
     this.currentDate = new Date();
     this.currentDate.setHours(0, 0, 0, 0);
-    this.calendarDays = [];
-    this.excludedDates = [];
-    this.excludedDays = [];
+    this.calendarDays = /** @type {DSCalendarDay[]} */[];
+    this.excludedDates = /** @type {Date[]} */[];
+    this.excludedDays = /** @type {number[]} */[];
     this.buttonClass = 'moj-datepicker__button';
     this.selectedDayButtonClass = 'moj-datepicker__button--selected';
     this.currentDayButtonClass = 'moj-datepicker__button--current';
     this.todayButtonClass = 'moj-datepicker__button--today';
-    if (this.$module.dataset.initialized) {
-      return this;
-    }
     this.setOptions();
     this.initControls();
-    this.$module.setAttribute('data-initialized', 'true');
   }
   initControls() {
     this.id = `datepicker-${this.$input.id}`;
@@ -75,15 +43,23 @@ class DatePicker {
     $inputWrapper.appendChild(this.$input);
     $inputWrapper.insertAdjacentHTML('beforeend', this.toggleTemplate());
     $componentWrapper.insertAdjacentElement('beforeend', this.$dialog);
-    this.$calendarButton = this.$module.querySelector('.moj-js-datepicker-toggle');
-    this.$dialogTitle = this.$dialog.querySelector('.moj-js-datepicker-month-year');
+    this.$calendarButton = /** @type {HTMLButtonElement} */
+    this.$root.querySelector('.moj-js-datepicker-toggle');
+    this.$dialogTitle = /** @type {HTMLHeadingElement} */
+    this.$dialog.querySelector('.moj-js-datepicker-month-year');
     this.createCalendar();
-    this.$prevMonthButton = this.$dialog.querySelector('.moj-js-datepicker-prev-month');
-    this.$prevYearButton = this.$dialog.querySelector('.moj-js-datepicker-prev-year');
-    this.$nextMonthButton = this.$dialog.querySelector('.moj-js-datepicker-next-month');
-    this.$nextYearButton = this.$dialog.querySelector('.moj-js-datepicker-next-year');
-    this.$cancelButton = this.$dialog.querySelector('.moj-js-datepicker-cancel');
-    this.$okButton = this.$dialog.querySelector('.moj-js-datepicker-ok');
+    this.$prevMonthButton = /** @type {HTMLButtonElement} */
+    this.$dialog.querySelector('.moj-js-datepicker-prev-month');
+    this.$prevYearButton = /** @type {HTMLButtonElement} */
+    this.$dialog.querySelector('.moj-js-datepicker-prev-year');
+    this.$nextMonthButton = /** @type {HTMLButtonElement} */
+    this.$dialog.querySelector('.moj-js-datepicker-next-month');
+    this.$nextYearButton = /** @type {HTMLButtonElement} */
+    this.$dialog.querySelector('.moj-js-datepicker-next-year');
+    this.$cancelButton = /** @type {HTMLButtonElement} */
+    this.$dialog.querySelector('.moj-js-datepicker-cancel');
+    this.$okButton = /** @type {HTMLButtonElement} */
+    this.$dialog.querySelector('.moj-js-datepicker-ok');
 
     // add event listeners
     this.$prevMonthButton.addEventListener('click', event => this.focusPreviousMonth(event, false));
@@ -97,9 +73,9 @@ class DatePicker {
     this.$okButton.addEventListener('click', () => {
       this.selectDate(this.currentDate);
     });
-    const dialogButtons = this.$dialog.querySelectorAll('button:not([disabled="true"])');
-    this.$firstButtonInDialog = dialogButtons[0];
-    this.$lastButtonInDialog = dialogButtons[dialogButtons.length - 1];
+    const $dialogButtons = this.$dialog.querySelectorAll('button:not([disabled="true"])');
+    this.$firstButtonInDialog = $dialogButtons[0];
+    this.$lastButtonInDialog = $dialogButtons[$dialogButtons.length - 1];
     this.$firstButtonInDialog.addEventListener('keydown', event => this.firstButtonKeydown(event));
     this.$lastButtonInDialog.addEventListener('keydown', event => this.lastButtonKeydown(event));
     this.$calendarButton.addEventListener('click', event => this.toggleDialog(event));
@@ -245,7 +221,6 @@ class DatePicker {
     this.setMinAndMaxDatesOnCalendar();
     this.setExcludedDates();
     this.setExcludedDays();
-    this.setLeadingZeros();
     this.setWeekStartDay();
   }
   setMinAndMaxDatesOnCalendar() {
@@ -270,10 +245,10 @@ class DatePicker {
     }
   }
 
-  /*
+  /**
    * Parses a daterange string into an array of dates
-   * @param {String} datestring - A daterange string in the format "dd/mm/yyyy-dd/mm/yyyy"
-   * @returns {Date[]}
+   *
+   * @param {string} datestring - A daterange string in the format "dd/mm/yyyy-dd/mm/yyyy"
    */
   parseDateRangeString(datestring) {
     const dates = [];
@@ -300,17 +275,6 @@ class DatePicker {
       this.excludedDays = this.config.excludedDays.replace(/\s+/, ' ').toLowerCase().split(' ').map(item => weekDays.indexOf(item)).filter(item => item !== -1);
     }
   }
-  setLeadingZeros() {
-    if (typeof this.config.leadingZeros !== 'boolean') {
-      if (this.config.leadingZeros.toLowerCase() === 'true') {
-        this.config.leadingZeros = true;
-        return;
-      }
-      if (this.config.leadingZeros.toLowerCase() === 'false') {
-        this.config.leadingZeros = false;
-      }
-    }
-  }
   setWeekStartDay() {
     const weekStartDayParam = this.config.weekStartDay;
     if (weekStartDayParam && weekStartDayParam.toLowerCase() === 'sunday') {
@@ -323,7 +287,7 @@ class DatePicker {
   }
 
   /**
-   * Determine if a date is selecteable
+   * Determine if a date is selectable
    *
    * @param {Date} date - the date to check
    * @returns {boolean}
@@ -389,24 +353,36 @@ class DatePicker {
   /**
    * Get a human readable date in the format Monday 2 March 2024
    *
-   * @param {Date} date - date to format
+   * @param {Date} date - Date to format
    * @returns {string}
    */
   formattedDateHuman(date) {
     return `${this.dayLabels[(date.getDay() + 6) % 7]} ${date.getDate()} ${this.monthLabels[date.getMonth()]} ${date.getFullYear()}`;
   }
+
+  /**
+   * @param {MouseEvent} event - Click event
+   */
   backgroundClick(event) {
     if (this.isOpen() && event.target instanceof Node && !this.$dialog.contains(event.target) && !this.$input.contains(event.target) && !this.$calendarButton.contains(event.target)) {
       event.preventDefault();
       this.closeDialog();
     }
   }
+
+  /**
+   * @param {KeyboardEvent} event - Keydown event
+   */
   firstButtonKeydown(event) {
     if (event.key === 'Tab' && event.shiftKey) {
       this.$lastButtonInDialog.focus();
       event.preventDefault();
     }
   }
+
+  /**
+   * @param {KeyboardEvent} event - Keydown event
+   */
   lastButtonKeydown(event) {
     if (event.key === 'Tab' && !event.shiftKey) {
       this.$firstButtonInDialog.focus();
@@ -436,49 +412,57 @@ class DatePicker {
       thisDay.setDate(thisDay.getDate() + 1);
     }
   }
+
+  /**
+   * @param {boolean} [focus] - Focus the day button
+   */
   setCurrentDate(focus = true) {
     const {
       currentDate
     } = this;
     this.calendarDays.forEach(calendarDay => {
-      calendarDay.button.classList.add('moj-datepicker__button');
-      calendarDay.button.classList.add('moj-datepicker__calendar-day');
-      calendarDay.button.setAttribute('tabindex', '-1');
-      calendarDay.button.classList.remove(this.selectedDayButtonClass);
+      calendarDay.$button.classList.add('moj-datepicker__button');
+      calendarDay.$button.classList.add('moj-datepicker__calendar-day');
+      calendarDay.$button.setAttribute('tabindex', '-1');
+      calendarDay.$button.classList.remove(this.selectedDayButtonClass);
       const calendarDayDate = calendarDay.date;
       calendarDayDate.setHours(0, 0, 0, 0);
       const today = new Date();
       today.setHours(0, 0, 0, 0);
       if (calendarDayDate.getTime() === currentDate.getTime() /* && !calendarDay.button.disabled */) {
         if (focus) {
-          calendarDay.button.setAttribute('tabindex', '0');
-          calendarDay.button.focus();
-          calendarDay.button.classList.add(this.selectedDayButtonClass);
+          calendarDay.$button.setAttribute('tabindex', '0');
+          calendarDay.$button.focus();
+          calendarDay.$button.classList.add(this.selectedDayButtonClass);
         }
       }
       if (this.inputDate && calendarDayDate.getTime() === this.inputDate.getTime()) {
-        calendarDay.button.classList.add(this.currentDayButtonClass);
-        calendarDay.button.setAttribute('aria-current', 'date');
+        calendarDay.$button.classList.add(this.currentDayButtonClass);
+        calendarDay.$button.setAttribute('aria-current', 'date');
       } else {
-        calendarDay.button.classList.remove(this.currentDayButtonClass);
-        calendarDay.button.removeAttribute('aria-current');
+        calendarDay.$button.classList.remove(this.currentDayButtonClass);
+        calendarDay.$button.removeAttribute('aria-current');
       }
       if (calendarDayDate.getTime() === today.getTime()) {
-        calendarDay.button.classList.add(this.todayButtonClass);
+        calendarDay.$button.classList.add(this.todayButtonClass);
       } else {
-        calendarDay.button.classList.remove(this.todayButtonClass);
+        calendarDay.$button.classList.remove(this.todayButtonClass);
       }
     });
 
     // if no date is tab-able, make the first non-disabled date tab-able
     if (!focus) {
       const enabledDays = this.calendarDays.filter(calendarDay => {
-        return window.getComputedStyle(calendarDay.button).display === 'block' && !calendarDay.button.disabled;
+        return window.getComputedStyle(calendarDay.$button).display === 'block' && !calendarDay.$button.disabled;
       });
-      enabledDays[0].button.setAttribute('tabindex', '0');
+      enabledDays[0].$button.setAttribute('tabindex', '0');
       this.currentDate = enabledDays[0].date;
     }
   }
+
+  /**
+   * @param {Date} date - Date to select
+   */
   selectDate(date) {
     if (this.isExcludedDate(date)) {
       return;
@@ -495,6 +479,10 @@ class DatePicker {
   isOpen() {
     return this.$dialog.classList.contains('moj-datepicker__dialog--open');
   }
+
+  /**
+   * @param {MouseEvent} event - Click event
+   */
   toggleDialog(event) {
     event.preventDefault();
     if (this.isOpen()) {
@@ -529,6 +517,11 @@ class DatePicker {
     this.$calendarButton.setAttribute('aria-expanded', 'false');
     this.$calendarButton.focus();
   }
+
+  /**
+   * @param {Date} date - Date to go to
+   * @param {boolean} [focus] - Focus the day button
+   */
   goToDate(date, focus) {
     const current = this.currentDate;
     this.currentDate = date;
@@ -580,13 +573,23 @@ class DatePicker {
     this.goToDate(date);
   }
 
-  // month navigation
+  /**
+   * Month navigation
+   *
+   * @param {KeyboardEvent | MouseEvent} event - Key press or click event
+   * @param {boolean} [focus] - Focus the day button
+   */
   focusNextMonth(event, focus = true) {
     event.preventDefault();
     const date = new Date(this.currentDate);
     date.setMonth(date.getMonth() + 1, 1);
     this.goToDate(date, focus);
   }
+
+  /**
+   * @param {KeyboardEvent | MouseEvent} event - Key press or click event
+   * @param {boolean} [focus] - Focus the day button
+   */
   focusPreviousMonth(event, focus = true) {
     event.preventDefault();
     const date = new Date(this.currentDate);
@@ -594,13 +597,23 @@ class DatePicker {
     this.goToDate(date, focus);
   }
 
-  // year navigation
+  /**
+   * Year navigation
+   *
+   * @param {KeyboardEvent | MouseEvent} event - Key press or click event
+   * @param {boolean} [focus] - Focus the day button
+   */
   focusNextYear(event, focus = true) {
     event.preventDefault();
     const date = new Date(this.currentDate);
     date.setFullYear(date.getFullYear() + 1, date.getMonth(), 1);
     this.goToDate(date, focus);
   }
+
+  /**
+   * @param {KeyboardEvent | MouseEvent} event - Key press or click event
+   * @param {boolean} [focus] - Focus the day button
+   */
   focusPreviousYear(event, focus = true) {
     event.preventDefault();
     const date = new Date(this.currentDate);
@@ -609,72 +622,70 @@ class DatePicker {
   }
 
   /**
-   * Parse dataset
-   *
-   * @param {Schema} schema - Component class
-   * @param {DOMStringMap} dataset - HTML element dataset
-   * @returns {object} Normalised dataset
-   */
-  parseDataset(schema, dataset) {
-    const parsed = {};
-    for (const [field,,] of Object.entries(schema.properties)) {
-      if (field in dataset) {
-        parsed[field] = dataset[field];
-      }
-    }
-    return parsed;
-  }
-
-  /**
-   * Config merging function
-   *
-   * Takes any number of objects and combines them together, with
-   * greatest priority on the LAST item passed in.
-   *
-   * @param {...{ [key: string]: unknown }} configObjects - Config objects to merge
-   * @returns {{ [key: string]: unknown }} A merged config object
+   * Name for the component used when initialising using data-module attributes.
    */
-  mergeConfigs(...configObjects) {
-    const formattedConfigObject = {};
-
-    // Loop through each of the passed objects
-    for (const configObject of configObjects) {
-      for (const key of Object.keys(configObject)) {
-        const option = formattedConfigObject[key];
-        const override = configObject[key];
-
-        // Push their keys one-by-one into formattedConfigObject. Any duplicate
-        // keys with object values will be merged, otherwise the new value will
-        // override the existing value.
-        if (typeof option === 'object' && typeof override === 'object') {
-          // @ts-expect-error Index signature for type 'string' is missing
-          formattedConfigObject[key] = this.mergeConfigs(option, override);
-        } else {
-          formattedConfigObject[key] = override;
-        }
-      }
-    }
-    return formattedConfigObject;
-  }
 }
+DatePicker.moduleName = 'moj-date-picker';
+/**
+ * Date picker default config
+ *
+ * @type {DatePickerConfig}
+ */
+DatePicker.defaults = Object.freeze({
+  leadingZeros: false,
+  weekStartDay: 'monday',
+  input: {
+    selector: '.moj-js-datepicker-input'
+  }
+});
+/**
+ * Date picker config schema
+ *
+ * @satisfies {Schema<DatePickerConfig>}
+ */
+DatePicker.schema = Object.freeze(/** @type {const} */{
+  properties: {
+    excludedDates: {
+      type: 'string'
+    },
+    excludedDays: {
+      type: 'string'
+    },
+    leadingZeros: {
+      type: 'boolean'
+    },
+    maxDate: {
+      type: 'string'
+    },
+    minDate: {
+      type: 'string'
+    },
+    weekStartDay: {
+      type: 'string'
+    },
+    input: {
+      type: 'object'
+    }
+  }
+});
 class DSCalendarDay {
   /**
    *
-   * @param {HTMLElement} button
+   * @param {HTMLButtonElement} $button
    * @param {number} index
    * @param {number} row
    * @param {number} column
    * @param {DatePicker} picker
    */
-  constructor(button, index, row, column, picker) {
+  constructor($button, index, row, column, picker) {
     this.index = index;
     this.row = row;
     this.column = column;
-    this.button = button;
+    this.$button = $button;
     this.picker = picker;
     this.date = new Date();
-    this.button.addEventListener('keydown', this.keyPress.bind(this));
-    this.button.addEventListener('click', this.click.bind(this));
+    this.$button.addEventListener('keydown', this.keyPress.bind(this));
+    this.$button.addEventListener('click', this.click.bind(this));
   }
 
   /**
@@ -686,26 +697,34 @@ class DSCalendarDay {
     const label = day.getDate();
     let accessibleLabel = this.picker.formattedDateHuman(day);
     if (disabled) {
-      this.button.setAttribute('aria-disabled', 'true');
+      this.$button.setAttribute('aria-disabled', 'true');
       accessibleLabel = `Excluded date, ${accessibleLabel}`;
     } else {
-      this.button.removeAttribute('aria-disabled');
+      this.$button.removeAttribute('aria-disabled');
     }
     if (hidden) {
-      this.button.style.display = 'none';
+      this.$button.style.display = 'none';
     } else {
-      this.button.style.display = 'block';
+      this.$button.style.display = 'block';
     }
-    this.button.setAttribute('data-testid', this.picker.formattedDateFromDate(day));
-    this.button.innerHTML = `<span class="govuk-visually-hidden">${accessibleLabel}</span><span aria-hidden="true">${label}</span>`;
+    this.$button.setAttribute('data-testid', this.picker.formattedDateFromDate(day));
+    this.$button.innerHTML = `<span class="govuk-visually-hidden">${accessibleLabel}</span><span aria-hidden="true">${label}</span>`;
     this.date = new Date(day);
   }
+
+  /**
+   * @param {MouseEvent} event - Click event
+   */
   click(event) {
     this.picker.goToDate(this.date);
     this.picker.selectDate(this.date);
     event.stopPropagation();
     event.preventDefault();
   }
+
+  /**
+   * @param {KeyboardEvent} event - Keydown event
+   */
   keyPress(event) {
     let calendarNavKey = true;
     switch (event.key) {
@@ -762,14 +781,17 @@ class DSCalendarDay {
  * @typedef {object} DatePickerConfig
  * @property {string} [excludedDates] - Dates that cannot be selected
  * @property {string} [excludedDays] - Days that cannot be selected
- * @property {boolean} [leadingZeroes] - Whether to add leading zeroes when populating the field
+ * @property {boolean} [leadingZeros] - Whether to add leading zeroes when populating the field
  * @property {string} [minDate] - The earliest available date
  * @property {string} [maxDate] - The latest available date
  * @property {string} [weekStartDay] - First day of the week in calendar view
+ * @property {object} [input] - Input config
+ * @property {string} [input.selector] - Selector for the input element
+ * @property {Element | null} [input.element] - HTML element for the input
  */
 
 /**
- * @import { Schema } from '../../all.mjs'
+ * @import { Schema } from 'govuk-frontend/dist/govuk/common/configuration.mjs'
  */
 
 export { DatePicker };