@ministryofjustice/frontend 5.0.0 → 5.1.1

package/moj/components/date-picker/date-picker.bundle.js

@@ -1,72 +1,38 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-  typeof define === 'function' && define.amd ? define(['exports'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.MOJFrontend = global.MOJFrontend || {}));
-})(this, (function (exports) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('govuk-frontend')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'govuk-frontend'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.MOJFrontend = global.MOJFrontend || {}, global.GOVUKFrontend));
+})(this, (function (exports, govukFrontend) { 'use strict';
 
-  class DatePicker {
+  /**
+   * @augments {ConfigurableComponent<DatePickerConfig>}
+   */
+  class DatePicker extends govukFrontend.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}`;
@@ -81,15 +47,23 @@
       $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));
@@ -103,9 +77,9 @@
       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));
@@ -251,7 +225,6 @@
       this.setMinAndMaxDatesOnCalendar();
       this.setExcludedDates();
       this.setExcludedDays();
-      this.setLeadingZeros();
       this.setWeekStartDay();
     }
     setMinAndMaxDatesOnCalendar() {
@@ -276,10 +249,10 @@
       }
     }
 
-    /*
+    /**
      * 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 = [];
@@ -306,17 +279,6 @@
         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') {
@@ -329,7 +291,7 @@
     }
 
     /**
-     * Determine if a date is selecteable
+     * Determine if a date is selectable
      *
      * @param {Date} date - the date to check
      * @returns {boolean}
@@ -395,24 +357,36 @@
     /**
      * 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();
@@ -442,49 +416,57 @@
         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;
@@ -501,6 +483,10 @@
     isOpen() {
       return this.$dialog.classList.contains('moj-datepicker__dialog--open');
     }
+
+    /**
+     * @param {MouseEvent} event - Click event
+     */
     toggleDialog(event) {
       event.preventDefault();
       if (this.isOpen()) {
@@ -535,6 +521,11 @@
       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;
@@ -586,13 +577,23 @@
       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);
@@ -600,13 +601,23 @@
       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);
@@ -615,72 +626,70 @@
     }
 
     /**
-     * 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));
     }
 
     /**
@@ -692,26 +701,34 @@
       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) {
@@ -768,14 +785,17 @@
    * @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'
    */
 
   exports.DatePicker = DatePicker;