@ministryofjustice/frontend 3.3.1 → 3.4.0

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

@@ -2,234 +2,232 @@
  * Datepicker config
  *
  * @typedef {object} DatepickerConfig
- * @property {string}  [excludedDates] - Dates that cannot be selected
- * @property {string}  [excludedDays]  - Days that cannot be selected
+ * @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 {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 {string} [minDate] - The earliest available date
+ * @property {string} [maxDate] - The latest available date
+ * @property {string} [weekStartDay] - First day of the week in calendar view
  */
 
 /**
  * @param {HTMLElement} $module - HTML element
  * @param {DatepickerConfig} config - config object
- * @constructor
+ * @class
  */
 function Datepicker($module, config = {}) {
   if (!$module) {
-    return this;
+    return this
   }
 
   const schema = Object.freeze({
     properties: {
-      excludedDates: { type: "string" },
-      excludedDays: { type: "string" },
-      leadingZeros: { type: "string" },
-      maxDate: { type: "string" },
-      minDate: { type: "string" },
-      weekStartDay: { type: "string" },
-    },
-  });
+      excludedDates: { type: 'string' },
+      excludedDays: { type: 'string' },
+      leadingZeros: { type: 'string' },
+      maxDate: { type: 'string' },
+      minDate: { type: 'string' },
+      weekStartDay: { type: 'string' }
+    }
+  })
 
   const defaults = {
     leadingZeros: false,
-    weekStartDay: "monday",
-  };
+    weekStartDay: 'monday'
+  }
 
   // data attributes override JS config, which overrides defaults
   this.config = this.mergeConfigs(
     defaults,
     config,
-    this.parseDataset(schema, $module.dataset),
-  );
+    this.parseDataset(schema, $module.dataset)
+  )
 
   this.dayLabels = [
-    "Monday",
-    "Tuesday",
-    "Wednesday",
-    "Thursday",
-    "Friday",
-    "Saturday",
-    "Sunday",
-  ];
+    '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.buttonClass = "moj-datepicker__button";
-  this.selectedDayButtonClass = "moj-datepicker__button--selected";
-  this.currentDayButtonClass = "moj-datepicker__button--current";
-  this.todayButtonClass = "moj-datepicker__button--today";
-
-  this.$module = $module;
-  this.$input = $module.querySelector(".moj-js-datepicker-input");
+    '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.buttonClass = 'moj-datepicker__button'
+  this.selectedDayButtonClass = 'moj-datepicker__button--selected'
+  this.currentDayButtonClass = 'moj-datepicker__button--current'
+  this.todayButtonClass = 'moj-datepicker__button--today'
+
+  this.$module = $module
+  this.$input = $module.querySelector('.moj-js-datepicker-input')
 }
 
 Datepicker.prototype.init = function () {
   // Check that required elements are present
   if (!this.$input) {
-    return;
+    return
   }
   if (this.$module.dataset.initialized) {
-    return;
+    return
   }
 
-  this.setOptions();
-  this.initControls();
-  this.$module.setAttribute("data-initialized", "true");
-};
+  this.setOptions()
+  this.initControls()
+  this.$module.setAttribute('data-initialized', 'true')
+}
 
 Datepicker.prototype.initControls = function () {
-  this.id = `datepicker-${this.$input.id}`;
+  this.id = `datepicker-${this.$input.id}`
 
-  this.$dialog = this.createDialog();
-  this.createCalendarHeaders();
+  this.$dialog = this.createDialog()
+  this.createCalendarHeaders()
 
-  const $componentWrapper = document.createElement("div");
-  const $inputWrapper = document.createElement("div");
-  $componentWrapper.classList.add("moj-datepicker__wrapper");
-  $inputWrapper.classList.add("govuk-input__wrapper");
+  const $componentWrapper = document.createElement('div')
+  const $inputWrapper = document.createElement('div')
+  $componentWrapper.classList.add('moj-datepicker__wrapper')
+  $inputWrapper.classList.add('govuk-input__wrapper')
 
-  this.$input.parentNode.insertBefore($componentWrapper, this.$input);
-  $componentWrapper.appendChild($inputWrapper);
-  $inputWrapper.appendChild(this.$input);
+  this.$input.parentNode.insertBefore($componentWrapper, this.$input)
+  $componentWrapper.appendChild($inputWrapper)
+  $inputWrapper.appendChild(this.$input)
 
-  $inputWrapper.insertAdjacentHTML("beforeend", this.toggleTemplate());
-  $componentWrapper.insertAdjacentElement("beforeend", this.$dialog);
+  $inputWrapper.insertAdjacentHTML('beforeend', this.toggleTemplate())
+  $componentWrapper.insertAdjacentElement('beforeend', this.$dialog)
 
-  this.$calendarButton = this.$module.querySelector(
-    ".moj-js-datepicker-toggle",
-  );
+  this.$calendarButton = this.$module.querySelector('.moj-js-datepicker-toggle')
   this.$dialogTitle = this.$dialog.querySelector(
-    ".moj-js-datepicker-month-year",
-  );
+    '.moj-js-datepicker-month-year'
+  )
 
-  this.createCalendar();
+  this.createCalendar()
 
   this.$prevMonthButton = this.$dialog.querySelector(
-    ".moj-js-datepicker-prev-month",
-  );
+    '.moj-js-datepicker-prev-month'
+  )
   this.$prevYearButton = this.$dialog.querySelector(
-    ".moj-js-datepicker-prev-year",
-  );
+    '.moj-js-datepicker-prev-year'
+  )
   this.$nextMonthButton = this.$dialog.querySelector(
-    ".moj-js-datepicker-next-month",
-  );
+    '.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");
+    '.moj-js-datepicker-next-year'
+  )
+  this.$cancelButton = this.$dialog.querySelector('.moj-js-datepicker-cancel')
+  this.$okButton = this.$dialog.querySelector('.moj-js-datepicker-ok')
 
   // add event listeners
-  this.$prevMonthButton.addEventListener("click", (event) =>
-    this.focusPreviousMonth(event, false),
-  );
-  this.$prevYearButton.addEventListener("click", (event) =>
-    this.focusPreviousYear(event, false),
-  );
-  this.$nextMonthButton.addEventListener("click", (event) =>
-    this.focusNextMonth(event, false),
-  );
-  this.$nextYearButton.addEventListener("click", (event) =>
-    this.focusNextYear(event, false),
-  );
-  this.$cancelButton.addEventListener("click", (event) => {
-    event.preventDefault();
-    this.closeDialog(event);
-  });
-  this.$okButton.addEventListener("click", () => {
-    this.selectDate(this.currentDate);
-  });
+  this.$prevMonthButton.addEventListener('click', (event) =>
+    this.focusPreviousMonth(event, false)
+  )
+  this.$prevYearButton.addEventListener('click', (event) =>
+    this.focusPreviousYear(event, false)
+  )
+  this.$nextMonthButton.addEventListener('click', (event) =>
+    this.focusNextMonth(event, false)
+  )
+  this.$nextYearButton.addEventListener('click', (event) =>
+    this.focusNextYear(event, false)
+  )
+  this.$cancelButton.addEventListener('click', (event) => {
+    event.preventDefault()
+    this.closeDialog(event)
+  })
+  this.$okButton.addEventListener('click', () => {
+    this.selectDate(this.currentDate)
+  })
 
   const dialogButtons = this.$dialog.querySelectorAll(
-    'button:not([disabled="true"])',
-  );
+    'button:not([disabled="true"])'
+  )
   // eslint-disable-next-line prefer-destructuring
-  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),
-  );
-
-  this.$dialog.addEventListener("keydown", (event) => {
-    if (event.key === "Escape") {
-      this.closeDialog();
-      event.preventDefault();
-      event.stopPropagation();
+  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)
+  )
+
+  this.$dialog.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape') {
+      this.closeDialog()
+      event.preventDefault()
+      event.stopPropagation()
     }
-  });
+  })
 
-  document.body.addEventListener("mouseup", (event) =>
-    this.backgroundClick(event),
-  );
+  document.body.addEventListener('mouseup', (event) =>
+    this.backgroundClick(event)
+  )
 
   // populates calendar with initial dates, avoids Wave errors about null buttons
-  this.updateCalendar();
-};
+  this.updateCalendar()
+}
 
 Datepicker.prototype.createDialog = function () {
-  const titleId = `datepicker-title-${this.$input.id}`;
-  const $dialog = document.createElement("div");
-
-  $dialog.id = this.id;
-  $dialog.setAttribute("class", "moj-datepicker__dialog");
-  $dialog.setAttribute("role", "dialog");
-  $dialog.setAttribute("aria-modal", "true");
-  $dialog.setAttribute("aria-labelledby", titleId);
-  $dialog.innerHTML = this.dialogTemplate(titleId);
-  $dialog.hidden = true;
-
-  return $dialog;
-};
+  const titleId = `datepicker-title-${this.$input.id}`
+  const $dialog = document.createElement('div')
+
+  $dialog.id = this.id
+  $dialog.setAttribute('class', 'moj-datepicker__dialog')
+  $dialog.setAttribute('role', 'dialog')
+  $dialog.setAttribute('aria-modal', 'true')
+  $dialog.setAttribute('aria-labelledby', titleId)
+  $dialog.innerHTML = this.dialogTemplate(titleId)
+  $dialog.hidden = true
+
+  return $dialog
+}
 
 Datepicker.prototype.createCalendar = function () {
-  const $tbody = this.$dialog.querySelector("tbody");
-  let dayCount = 0;
+  const $tbody = this.$dialog.querySelector('tbody')
+  let dayCount = 0
   for (let i = 0; i < 6; i++) {
     // create row
-    const $row = $tbody.insertRow(i);
+    const $row = $tbody.insertRow(i)
 
     for (let j = 0; j < 7; j++) {
       // create cell (day)
-      const $cell = document.createElement("td");
-      const $dateButton = document.createElement("button");
+      const $cell = document.createElement('td')
+      const $dateButton = document.createElement('button')
 
-      $cell.appendChild($dateButton);
-      $row.appendChild($cell);
+      $cell.appendChild($dateButton)
+      $row.appendChild($cell)
 
-      const calendarDay = new DSCalendarDay($dateButton, dayCount, i, j, this);
-      calendarDay.init();
-      this.calendarDays.push(calendarDay);
-      dayCount++;
+      const calendarDay = new DSCalendarDay($dateButton, dayCount, i, j, this)
+      calendarDay.init()
+      this.calendarDays.push(calendarDay)
+      dayCount++
     }
   }
-};
+}
 
 Datepicker.prototype.toggleTemplate = function () {
   return `<button class="moj-datepicker__toggle moj-js-datepicker-toggle" type="button" aria-haspopup="dialog" aria-controls="${this.id}" aria-expanded="false">
@@ -244,14 +242,14 @@ Datepicker.prototype.toggleTemplate = function () {
               <rect x="3.66669" width="1.46667" height="5.13333" rx="0.733333" fill="currentColor"></rect>
               <rect x="16.8667" width="1.46667" height="5.13333" rx="0.733333" fill="currentColor"></rect>
             </svg>
-          </button>`;
-};
+          </button>`
+}
 
 /**
  * HTML template for calendar dialog
  *
  * @param {string} [titleId] - Id attribute for dialog title
- * @return {string}
+ * @returns {string}
  */
 Datepicker.prototype.dialogTemplate = function (titleId) {
   return `<div class="moj-datepicker__dialog-header">
@@ -303,213 +301,220 @@ Datepicker.prototype.dialogTemplate = function (titleId) {
           <div class="govuk-button-group">
             <button type="button" class="govuk-button moj-js-datepicker-ok">Select</button>
             <button type="button" class="govuk-button govuk-button--secondary moj-js-datepicker-cancel">Close</button>
-          </div>`;
-};
+          </div>`
+}
 
 Datepicker.prototype.createCalendarHeaders = function () {
   this.dayLabels.forEach((day) => {
-    const html = `<th scope="col"><span aria-hidden="true">${day.substring(0, 3)}</span><span class="govuk-visually-hidden">${day}</span></th>`;
-    const $headerRow = this.$dialog.querySelector("thead > tr");
-    $headerRow.insertAdjacentHTML("beforeend", html);
-  });
-};
+    const html = `<th scope="col"><span aria-hidden="true">${day.substring(0, 3)}</span><span class="govuk-visually-hidden">${day}</span></th>`
+    const $headerRow = this.$dialog.querySelector('thead > tr')
+    $headerRow.insertAdjacentHTML('beforeend', html)
+  })
+}
 
 /**
  * Pads given number with leading zeros
  *
  * @param {number} value - The value to be padded
  * @param {number} length - The length in characters of the output
- * @return {string}
+ * @returns {string}
  */
 Datepicker.prototype.leadingZeros = function (value, length = 2) {
-  let ret = value.toString();
+  let ret = value.toString()
 
   while (ret.length < length) {
-    ret = `0${ret}`;
+    ret = `0${ret}`
   }
 
-  return ret;
-};
+  return ret
+}
 
 Datepicker.prototype.setOptions = function () {
-  this.setMinAndMaxDatesOnCalendar();
-  this.setExcludedDates();
-  this.setExcludedDays();
-  this.setLeadingZeros();
-  this.setWeekStartDay();
-};
+  this.setMinAndMaxDatesOnCalendar()
+  this.setExcludedDates()
+  this.setExcludedDays()
+  this.setLeadingZeros()
+  this.setWeekStartDay()
+}
 
 Datepicker.prototype.setMinAndMaxDatesOnCalendar = function () {
   if (this.config.minDate) {
-    this.minDate = this.formattedDateFromString(this.config.minDate, null);
+    this.minDate = this.formattedDateFromString(this.config.minDate, null)
     if (this.minDate && this.currentDate < this.minDate) {
-      this.currentDate = this.minDate;
+      this.currentDate = this.minDate
     }
   }
 
   if (this.config.maxDate) {
-    this.maxDate = this.formattedDateFromString(this.config.maxDate, null);
+    this.maxDate = this.formattedDateFromString(this.config.maxDate, null)
     if (this.maxDate && this.currentDate > this.maxDate) {
-      this.currentDate = this.maxDate;
+      this.currentDate = this.maxDate
     }
   }
-};
+}
 
 Datepicker.prototype.setExcludedDates = function () {
   if (this.config.excludedDates) {
     this.excludedDates = this.config.excludedDates
-      .replace(/\s+/, " ")
-      .split(" ")
+      .replace(/\s+/, ' ')
+      .split(' ')
       .map((item) => {
-        if (item.includes("-")) {
-          // parse the date range from the format "dd/mm/yyyy-dd/mm/yyyy"
-          const [startDate, endDate] = item
-            .split("-")
-            .map((d) => this.formattedDateFromString(d, null));
-          if (startDate && endDate) {
-            const date = new Date(startDate.getTime());
-            const dates = [];
-            while (date <= endDate) {
-              dates.push(new Date(date));
-              date.setDate(date.getDate() + 1);
-            }
-            return dates;
-          }
-        } else {
-          return this.formattedDateFromString(item, null);
-        }
+        return item.includes('-')
+          ? this.parseDateRangeString(item)
+          : this.formattedDateFromString(item)
       })
       .flat()
-      .filter((item) => item);
+      .filter((item) => item)
   }
-};
+}
+
+/*
+ * 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[]}
+ */
+Datepicker.prototype.parseDateRangeString = function (datestring) {
+  const dates = []
+  const [startDate, endDate] = datestring
+    .split('-')
+    .map((d) => this.formattedDateFromString(d, null))
+
+  if (startDate && endDate) {
+    const date = new Date(startDate.getTime())
+    /* eslint-disable no-unmodified-loop-condition */
+    while (date <= endDate) {
+      dates.push(new Date(date))
+      date.setDate(date.getDate() + 1)
+    }
+    /* eslint-enable no-unmodified-loop-condition */
+  }
+  return dates
+}
 
 Datepicker.prototype.setExcludedDays = function () {
   if (this.config.excludedDays) {
     // lowercase and arrange dayLabels to put indexOf sunday == 0 for comparison
     // with getDay() function
-    let weekDays = this.dayLabels.map((item) => item.toLowerCase());
-    if (this.config.weekStartDay === "monday") {
-      weekDays.unshift(weekDays.pop());
+    const weekDays = this.dayLabels.map((item) => item.toLowerCase())
+    if (this.config.weekStartDay === 'monday') {
+      weekDays.unshift(weekDays.pop())
     }
 
     this.excludedDays = this.config.excludedDays
-      .replace(/\s+/, " ")
+      .replace(/\s+/, ' ')
       .toLowerCase()
-      .split(" ")
+      .split(' ')
       .map((item) => weekDays.indexOf(item))
-      .filter((item) => item !== -1);
+      .filter((item) => item !== -1)
   }
-};
+}
 
 Datepicker.prototype.setLeadingZeros = function () {
-  if (typeof this.config.leadingZeros !== "boolean") {
-    if (this.config.leadingZeros.toLowerCase() === "true") {
-      this.config.leadingZeros = true;
-      return;
+  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;
-      return;
+    if (this.config.leadingZeros.toLowerCase() === 'false') {
+      this.config.leadingZeros = false
     }
   }
-};
+}
 
 Datepicker.prototype.setWeekStartDay = function () {
-  const weekStartDayParam = this.config.weekStartDay;
-  if (weekStartDayParam?.toLowerCase() === "sunday") {
-    this.config.weekStartDay = "sunday";
+  const weekStartDayParam = this.config.weekStartDay
+  if (weekStartDayParam && weekStartDayParam.toLowerCase() === 'sunday') {
+    this.config.weekStartDay = 'sunday'
     // Rotate dayLabels array to put Sunday as the first item
-    this.dayLabels.unshift(this.dayLabels.pop());
+    this.dayLabels.unshift(this.dayLabels.pop())
   } else {
-    this.config.weekStartDay = "monday";
+    this.config.weekStartDay = 'monday'
   }
-};
+}
 
 /**
  * Determine if a date is selecteable
  *
  * @param {Date} date - the date to check
- * @return {boolean}
- *
+ * @returns {boolean}
  */
 Datepicker.prototype.isExcludedDate = function (date) {
   // This comparison does not work correctly - it will exclude the mindate itself
   // see: https://github.com/ministryofjustice/moj-frontend/issues/923
   if (this.minDate && this.minDate > date) {
-    return true;
+    return true
   }
 
   // This comparison works as expected - the maxdate will not be excluded
   if (this.maxDate && this.maxDate < date) {
-    return true;
+    return true
   }
 
   for (const excludedDate of this.excludedDates) {
     if (date.toDateString() === excludedDate.toDateString()) {
-      return true;
+      return true
     }
   }
 
   if (this.excludedDays.includes(date.getDay())) {
-    return true;
+    return true
   }
 
-  return false;
-};
+  return false
+}
 
 /**
  * Get a Date object from a string
  *
  * @param {string} dateString - string in the format d/m/yyyy dd/mm/yyyy
  * @param {Date} fallback - date object to return if formatting fails
- * @return {Date}
+ * @returns {Date}
  */
 Datepicker.prototype.formattedDateFromString = function (
   dateString,
-  fallback = new Date(),
+  fallback = new Date()
 ) {
-  let formattedDate = null;
+  let formattedDate = null
   // Accepts d/m/yyyy and dd/mm/yyyy
-  const dateFormatPattern = /(\d{1,2})([-/,. ])(\d{1,2})\2(\d{4})/;
+  const dateFormatPattern = /(\d{1,2})([-/,. ])(\d{1,2})\2(\d{4})/
 
-  if (!dateFormatPattern.test(dateString)) return fallback;
+  if (!dateFormatPattern.test(dateString)) return fallback
 
-  const match = dateString.match(dateFormatPattern);
-  const day = match[1];
-  const month = match[3];
-  const year = match[4];
+  const match = dateString.match(dateFormatPattern)
+  const day = match[1]
+  const month = match[3]
+  const year = match[4]
 
-  formattedDate = new Date(`${year}-${month}-${day}`);
+  formattedDate = new Date(`${year}-${month}-${day}`)
   if (formattedDate instanceof Date && !isNaN(formattedDate)) {
-    return formattedDate;
+    return formattedDate
   }
-  return fallback;
-};
+  return fallback
+}
 
 /**
  * Get a formatted date string from a Date object
  *
  * @param {Date} date - date to format to a string
- * @return {string}
+ * @returns {string}
  */
 Datepicker.prototype.formattedDateFromDate = function (date) {
   if (this.config.leadingZeros) {
-    return `${this.leadingZeros(date.getDate())}/${this.leadingZeros(date.getMonth() + 1)}/${date.getFullYear()}`;
-  } else {
-    return `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`;
+    return `${this.leadingZeros(date.getDate())}/${this.leadingZeros(date.getMonth() + 1)}/${date.getFullYear()}`
   }
-};
+
+  return `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`
+}
 
 /**
  * Get a human readable date in the format Monday 2 March 2024
  *
- * @param {Date} - date to format
- * @return {string}
+ * @param {Date} date - date to format
+ * @returns {string}
  */
 Datepicker.prototype.formattedDateHuman = function (date) {
-  return `${this.dayLabels[(date.getDay() + 6) % 7]} ${date.getDate()} ${this.monthLabels[date.getMonth()]} ${date.getFullYear()}`;
-};
+  return `${this.dayLabels[(date.getDay() + 6) % 7]} ${date.getDate()} ${this.monthLabels[date.getMonth()]} ${date.getFullYear()}`
+}
 
 Datepicker.prototype.backgroundClick = function (event) {
   if (
@@ -518,75 +523,75 @@ Datepicker.prototype.backgroundClick = function (event) {
     !this.$input.contains(event.target) &&
     !this.$calendarButton.contains(event.target)
   ) {
-    event.preventDefault();
-    this.closeDialog();
+    event.preventDefault()
+    this.closeDialog()
   }
-};
+}
 
 Datepicker.prototype.firstButtonKeydown = function (event) {
-  if (event.key === "Tab" && event.shiftKey) {
-    this.$lastButtonInDialog.focus();
-    event.preventDefault();
+  if (event.key === 'Tab' && event.shiftKey) {
+    this.$lastButtonInDialog.focus()
+    event.preventDefault()
   }
-};
+}
 
 Datepicker.prototype.lastButtonKeydown = function (event) {
-  if (event.key === "Tab" && !event.shiftKey) {
-    this.$firstButtonInDialog.focus();
-    event.preventDefault();
+  if (event.key === 'Tab' && !event.shiftKey) {
+    this.$firstButtonInDialog.focus()
+    event.preventDefault()
   }
-};
+}
 
 // render calendar
 Datepicker.prototype.updateCalendar = function () {
-  this.$dialogTitle.innerHTML = `${this.monthLabels[this.currentDate.getMonth()]} ${this.currentDate.getFullYear()}`;
+  this.$dialogTitle.innerHTML = `${this.monthLabels[this.currentDate.getMonth()]} ${this.currentDate.getFullYear()}`
 
-  const day = this.currentDate;
-  const firstOfMonth = new Date(day.getFullYear(), day.getMonth(), 1);
-  let dayOfWeek;
+  const day = this.currentDate
+  const firstOfMonth = new Date(day.getFullYear(), day.getMonth(), 1)
+  let dayOfWeek
 
-  if (this.config.weekStartDay === "monday") {
-    dayOfWeek = firstOfMonth.getDay() === 0 ? 6 : firstOfMonth.getDay() - 1; // Change logic to make Monday first day of week, i.e. 0
+  if (this.config.weekStartDay === 'monday') {
+    dayOfWeek = firstOfMonth.getDay() === 0 ? 6 : firstOfMonth.getDay() - 1 // Change logic to make Monday first day of week, i.e. 0
   } else {
-    dayOfWeek = firstOfMonth.getDay();
+    dayOfWeek = firstOfMonth.getDay()
   }
 
-  firstOfMonth.setDate(firstOfMonth.getDate() - dayOfWeek);
+  firstOfMonth.setDate(firstOfMonth.getDate() - dayOfWeek)
 
-  const thisDay = new Date(firstOfMonth);
+  const thisDay = new Date(firstOfMonth)
 
   // loop through our days
   for (let i = 0; i < this.calendarDays.length; i++) {
-    const hidden = thisDay.getMonth() !== day.getMonth();
-    const disabled = this.isExcludedDate(thisDay);
+    const hidden = thisDay.getMonth() !== day.getMonth()
+    const disabled = this.isExcludedDate(thisDay)
 
-    this.calendarDays[i].update(thisDay, hidden, disabled);
+    this.calendarDays[i].update(thisDay, hidden, disabled)
 
-    thisDay.setDate(thisDay.getDate() + 1);
+    thisDay.setDate(thisDay.getDate() + 1)
   }
-};
+}
 
 Datepicker.prototype.setCurrentDate = function (focus = true) {
-  const { currentDate } = this;
+  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);
-    const calendarDayDate = calendarDay.date;
-    calendarDayDate.setHours(0, 0, 0, 0);
+    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);
+    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)
       }
     }
 
@@ -594,213 +599,210 @@ Datepicker.prototype.setCurrentDate = function (focus = true) {
       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" &&
+        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;
+    this.currentDate = enabledDays[0].date
   }
-};
+}
 
 Datepicker.prototype.selectDate = function (date) {
   if (this.isExcludedDate(date)) {
-    return;
+    return
   }
 
-  this.$calendarButton.querySelector("span").innerText =
-    `Choose date. Selected date is ${this.formattedDateHuman(date)}`;
-  this.$input.value = this.formattedDateFromDate(date);
+  this.$calendarButton.querySelector('span').innerText =
+    `Choose date. Selected date is ${this.formattedDateHuman(date)}`
+  this.$input.value = this.formattedDateFromDate(date)
 
-  const changeEvent = new Event("change", { bubbles: true, cancelable: true });
-  this.$input.dispatchEvent(changeEvent);
+  const changeEvent = new Event('change', { bubbles: true, cancelable: true })
+  this.$input.dispatchEvent(changeEvent)
 
-  this.closeDialog();
-};
+  this.closeDialog()
+}
 
 Datepicker.prototype.isOpen = function () {
-  return this.$dialog.classList.contains("moj-datepicker__dialog--open");
-};
+  return this.$dialog.classList.contains('moj-datepicker__dialog--open')
+}
 
 Datepicker.prototype.toggleDialog = function (event) {
-  event.preventDefault();
+  event.preventDefault()
   if (this.isOpen()) {
-    this.closeDialog();
+    this.closeDialog()
   } else {
-    this.setMinAndMaxDatesOnCalendar();
-    this.openDialog();
+    this.setMinAndMaxDatesOnCalendar()
+    this.openDialog()
   }
-};
+}
 
 Datepicker.prototype.openDialog = function () {
-  this.$dialog.hidden = false;
-  this.$dialog.classList.add("moj-datepicker__dialog--open");
-  this.$calendarButton.setAttribute("aria-expanded", "true");
+  this.$dialog.hidden = false
+  this.$dialog.classList.add('moj-datepicker__dialog--open')
+  this.$calendarButton.setAttribute('aria-expanded', 'true')
 
   // position the dialog
   // if input is wider than dialog pin it to the right
   if (this.$input.offsetWidth > this.$dialog.offsetWidth) {
-    this.$dialog.style.right = `0px`;
+    this.$dialog.style.right = `0px`
   }
-  this.$dialog.style.top = `${this.$input.offsetHeight + 3}px`;
+  this.$dialog.style.top = `${this.$input.offsetHeight + 3}px`
 
   // get the date from the input element
-  this.inputDate = this.formattedDateFromString(this.$input.value);
-  this.currentDate = this.inputDate;
-  this.currentDate.setHours(0, 0, 0, 0);
+  this.inputDate = this.formattedDateFromString(this.$input.value)
+  this.currentDate = this.inputDate
+  this.currentDate.setHours(0, 0, 0, 0)
 
-  this.updateCalendar();
-  this.setCurrentDate();
-};
+  this.updateCalendar()
+  this.setCurrentDate()
+}
 
 Datepicker.prototype.closeDialog = function () {
-  this.$dialog.hidden = true;
-  this.$dialog.classList.remove("moj-datepicker__dialog--open");
-  this.$calendarButton.setAttribute("aria-expanded", "false");
-  this.$calendarButton.focus();
-};
+  this.$dialog.hidden = true
+  this.$dialog.classList.remove('moj-datepicker__dialog--open')
+  this.$calendarButton.setAttribute('aria-expanded', 'false')
+  this.$calendarButton.focus()
+}
 
 Datepicker.prototype.goToDate = function (date, focus) {
-  const current = this.currentDate;
-  this.currentDate = date;
+  const current = this.currentDate
+  this.currentDate = date
 
   if (
     current.getMonth() !== this.currentDate.getMonth() ||
     current.getFullYear() !== this.currentDate.getFullYear()
   ) {
-    this.updateCalendar();
+    this.updateCalendar()
   }
 
-  this.setCurrentDate(focus);
-};
+  this.setCurrentDate(focus)
+}
 
 // day navigation
 Datepicker.prototype.focusNextDay = function () {
-  const date = new Date(this.currentDate);
-  date.setDate(date.getDate() + 1);
-  this.goToDate(date);
-};
+  const date = new Date(this.currentDate)
+  date.setDate(date.getDate() + 1)
+  this.goToDate(date)
+}
 
 Datepicker.prototype.focusPreviousDay = function () {
-  const date = new Date(this.currentDate);
-  date.setDate(date.getDate() - 1);
-  this.goToDate(date);
-};
+  const date = new Date(this.currentDate)
+  date.setDate(date.getDate() - 1)
+  this.goToDate(date)
+}
 
 // week navigation
 Datepicker.prototype.focusNextWeek = function () {
-  const date = new Date(this.currentDate);
-  date.setDate(date.getDate() + 7);
-  this.goToDate(date);
-};
+  const date = new Date(this.currentDate)
+  date.setDate(date.getDate() + 7)
+  this.goToDate(date)
+}
 
 Datepicker.prototype.focusPreviousWeek = function () {
-  const date = new Date(this.currentDate);
-  date.setDate(date.getDate() - 7);
-  this.goToDate(date);
-};
+  const date = new Date(this.currentDate)
+  date.setDate(date.getDate() - 7)
+  this.goToDate(date)
+}
 
 Datepicker.prototype.focusFirstDayOfWeek = function () {
-  const date = new Date(this.currentDate);
-  const firstDayOfWeekIndex = this.config.weekStartDay == "sunday" ? 0 : 1;
-  const dayOfWeek = date.getDay();
+  const date = new Date(this.currentDate)
+  const firstDayOfWeekIndex = this.config.weekStartDay === 'sunday' ? 0 : 1
+  const dayOfWeek = date.getDay()
   const diff =
     dayOfWeek >= firstDayOfWeekIndex
       ? dayOfWeek - firstDayOfWeekIndex
-      : 6 - dayOfWeek;
+      : 6 - dayOfWeek
 
-  date.setDate(date.getDate() - diff);
-  date.setHours(0, 0, 0, 0);
+  date.setDate(date.getDate() - diff)
+  date.setHours(0, 0, 0, 0)
 
-  this.goToDate(date);
-};
+  this.goToDate(date)
+}
 
 Datepicker.prototype.focusLastDayOfWeek = function () {
-  const date = new Date(this.currentDate);
-  const lastDayOfWeekIndex = this.config.weekStartDay == "sunday" ? 6 : 0;
-  const dayOfWeek = date.getDay();
+  const date = new Date(this.currentDate)
+  const lastDayOfWeekIndex = this.config.weekStartDay === 'sunday' ? 6 : 0
+  const dayOfWeek = date.getDay()
   const diff =
     dayOfWeek <= lastDayOfWeekIndex
       ? lastDayOfWeekIndex - dayOfWeek
-      : 7 - dayOfWeek;
+      : 7 - dayOfWeek
 
-  date.setDate(date.getDate() + diff);
-  date.setHours(0, 0, 0, 0);
+  date.setDate(date.getDate() + diff)
+  date.setHours(0, 0, 0, 0)
 
-  this.goToDate(date);
-};
+  this.goToDate(date)
+}
 
 // month navigation
 Datepicker.prototype.focusNextMonth = function (event, focus = true) {
-  event.preventDefault();
-  const date = new Date(this.currentDate);
-  date.setMonth(date.getMonth() + 1, 1);
-  this.goToDate(date, focus);
-};
+  event.preventDefault()
+  const date = new Date(this.currentDate)
+  date.setMonth(date.getMonth() + 1, 1)
+  this.goToDate(date, focus)
+}
 
 Datepicker.prototype.focusPreviousMonth = function (event, focus = true) {
-  event.preventDefault();
-  const date = new Date(this.currentDate);
-  date.setMonth(date.getMonth() - 1, 1);
-  this.goToDate(date, focus);
-};
+  event.preventDefault()
+  const date = new Date(this.currentDate)
+  date.setMonth(date.getMonth() - 1, 1)
+  this.goToDate(date, focus)
+}
 
 // year navigation
 Datepicker.prototype.focusNextYear = function (event, focus = true) {
-  event.preventDefault();
-  const date = new Date(this.currentDate);
-  date.setFullYear(date.getFullYear() + 1, date.getMonth(), 1);
-  this.goToDate(date, focus);
-};
+  event.preventDefault()
+  const date = new Date(this.currentDate)
+  date.setFullYear(date.getFullYear() + 1, date.getMonth(), 1)
+  this.goToDate(date, focus)
+}
 
 Datepicker.prototype.focusPreviousYear = function (event, focus = true) {
-  event.preventDefault();
-  const date = new Date(this.currentDate);
-  date.setFullYear(date.getFullYear() - 1, date.getMonth(), 1);
-  this.goToDate(date, focus);
-};
+  event.preventDefault()
+  const date = new Date(this.currentDate)
+  date.setFullYear(date.getFullYear() - 1, date.getMonth(), 1)
+  this.goToDate(date, focus)
+}
 
 /**
  * Parse dataset
  *
- * Loop over an object and normalise each value using {@link normaliseString},
- * optionally expanding nested `i18n.field`
- *
- * @param {{ schema: Schema }} Component - Component class
+ * @param {Schema} schema - Component class
  * @param {DOMStringMap} dataset - HTML element dataset
- * @returns {Object} Normalised dataset
+ * @returns {object} Normalised dataset
  */
 Datepicker.prototype.parseDataset = function (schema, dataset) {
-  const parsed = {};
+  const parsed = {}
 
-  for (const [field, attributes] of Object.entries(schema.properties)) {
+  for (const [field, ,] of Object.entries(schema.properties)) {
     if (field in dataset) {
-      parsed[field] = dataset[field];
+      parsed[field] = dataset[field]
     }
   }
 
-  return parsed;
-};
+  return parsed
+}
 
 /**
  * Config merging function
@@ -812,28 +814,28 @@ Datepicker.prototype.parseDataset = function (schema, dataset) {
  * @returns {{ [key: string]: unknown }} A merged config object
  */
 Datepicker.prototype.mergeConfigs = function (...configObjects) {
-  const formattedConfigObject = {};
+  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];
+      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") {
+      if (typeof option === 'object' && typeof override === 'object') {
         // @ts-expect-error Index signature for type 'string' is missing
-        formattedConfigObject[key] = this.mergeConfigs(option, override);
+        formattedConfigObject[key] = this.mergeConfigs(option, override)
       } else {
-        formattedConfigObject[key] = override;
+        formattedConfigObject[key] = override
       }
     }
   }
 
-  return formattedConfigObject;
-};
+  return formattedConfigObject
+}
 
 /**
  *
@@ -842,22 +844,22 @@ Datepicker.prototype.mergeConfigs = function (...configObjects) {
  * @param {number} row
  * @param {number} column
  * @param {Datepicker} picker
- * @constructor
+ * @class
  */
 function DSCalendarDay(button, index, row, column, picker) {
-  this.index = index;
-  this.row = row;
-  this.column = column;
-  this.button = button;
-  this.picker = picker;
+  this.index = index
+  this.row = row
+  this.column = column
+  this.button = button
+  this.picker = picker
 
-  this.date = new Date();
+  this.date = new Date()
 }
 
 DSCalendarDay.prototype.init = function () {
-  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))
+}
 
 /**
  * @param {Date} day - the Date for the calendar day
@@ -865,84 +867,84 @@ DSCalendarDay.prototype.init = function () {
  * @param {boolean} disabled - is the day selectable or excluded
  */
 DSCalendarDay.prototype.update = function (day, hidden, disabled) {
-  let label = day.getDate();
-  let accessibleLabel = this.picker.formattedDateHuman(day);
+  const label = day.getDate()
+  let accessibleLabel = this.picker.formattedDateHuman(day)
 
   if (disabled) {
-    this.button.setAttribute("aria-disabled", true);
-    accessibleLabel = "Excluded date, " + accessibleLabel;
+    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),
-  );
+    '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);
-};
+  this.button.innerHTML = `<span class="govuk-visually-hidden">${accessibleLabel}</span><span aria-hidden="true">${label}</span>`
+  this.date = new Date(day)
+}
 
 DSCalendarDay.prototype.click = function (event) {
-  this.picker.goToDate(this.date);
-  this.picker.selectDate(this.date);
+  this.picker.goToDate(this.date)
+  this.picker.selectDate(this.date)
 
-  event.stopPropagation();
-  event.preventDefault();
-};
+  event.stopPropagation()
+  event.preventDefault()
+}
 
 DSCalendarDay.prototype.keyPress = function (event) {
-  let calendarNavKey = true;
+  let calendarNavKey = true
 
   switch (event.key) {
-    case "ArrowLeft":
-      this.picker.focusPreviousDay();
-      break;
-    case "ArrowRight":
-      this.picker.focusNextDay();
-      break;
-    case "ArrowUp":
-      this.picker.focusPreviousWeek();
-      break;
-    case "ArrowDown":
-      this.picker.focusNextWeek();
-      break;
-    case "Home":
-      this.picker.focusFirstDayOfWeek();
-      break;
-    case "End":
-      this.picker.focusLastDayOfWeek();
-      break;
-    case "PageUp":
+    case 'ArrowLeft':
+      this.picker.focusPreviousDay()
+      break
+    case 'ArrowRight':
+      this.picker.focusNextDay()
+      break
+    case 'ArrowUp':
+      this.picker.focusPreviousWeek()
+      break
+    case 'ArrowDown':
+      this.picker.focusNextWeek()
+      break
+    case 'Home':
+      this.picker.focusFirstDayOfWeek()
+      break
+    case 'End':
+      this.picker.focusLastDayOfWeek()
+      break
+    case 'PageUp':
       // eslint-disable-next-line no-unused-expressions
       event.shiftKey
         ? this.picker.focusPreviousYear(event)
-        : this.picker.focusPreviousMonth(event);
-      break;
-    case "PageDown":
+        : this.picker.focusPreviousMonth(event)
+      break
+    case 'PageDown':
       // eslint-disable-next-line no-unused-expressions
       event.shiftKey
         ? this.picker.focusNextYear(event)
-        : this.picker.focusNextMonth(event);
-      break;
+        : this.picker.focusNextMonth(event)
+      break
     default:
-      calendarNavKey = false;
-      break;
+      calendarNavKey = false
+      break
   }
 
   if (calendarNavKey) {
-    event.preventDefault();
-    event.stopPropagation();
+    event.preventDefault()
+    event.stopPropagation()
   }
-};
+}
 
-MOJFrontend.DatePicker = Datepicker;
+MOJFrontend.DatePicker = Datepicker
 
 /**
  * Schema for component config