@ministryofjustice/frontend 5.1.0 → 5.1.2

package/moj/all.bundle.js

@@ -14,7 +14,7 @@
    *
    * {@link https://github.com/ministryofjustice/moj-frontend/releases}
    */
-  const version = '5.1.0';
+  const version = '5.1.2';
 
   class AddAnother extends govukFrontend.Component {
     /**
@@ -90,7 +90,7 @@
      */
     updateAttributes($item, index) {
       $item.querySelectorAll('[data-name]').forEach($input => {
-        if (!($input instanceof HTMLInputElement)) {
+        if (!this.isValidInputElement($input)) {
           return;
         }
         const name = $input.getAttribute('data-name') || '';
@@ -121,13 +121,23 @@
      */
     resetItem($item) {
       $item.querySelectorAll('[data-name], [data-id]').forEach($input => {
-        if (!($input instanceof HTMLInputElement)) {
+        if (!this.isValidInputElement($input)) {
           return;
         }
-        if ($input.type === 'checkbox' || $input.type === 'radio') {
-          $input.checked = false;
-        } else {
+        if ($input instanceof HTMLSelectElement) {
+          $input.selectedIndex = -1;
+          $input.value = '';
+        } else if ($input instanceof HTMLTextAreaElement) {
           $input.value = '';
+        } else {
+          switch ($input.type) {
+            case 'checkbox':
+            case 'radio':
+              $input.checked = false;
+              break;
+            default:
+              $input.value = '';
+          }
         }
       });
     }
@@ -157,6 +167,13 @@
       }
     }
 
+    /**
+     * @param {Element} $input - the input to validate
+     */
+    isValidInputElement($input) {
+      return $input instanceof HTMLInputElement || $input instanceof HTMLSelectElement || $input instanceof HTMLTextAreaElement;
+    }
+
     /**
      * Name for the component used when initialising using data-module attributes.
      */
@@ -2799,8 +2816,21 @@
       }
       this.$head = $head;
       this.$body = $body;
+      this.$caption = this.$root.querySelector('caption');
+      this.$upArrow = `<svg width="22" height="22" focusable="false" aria-hidden="true" role="img" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.5625 15.5L11 6.63125L15.4375 15.5H6.5625Z" fill="currentColor"/>
+</svg>`;
+      this.$downArrow = `<svg width="22" height="22" focusable="false" aria-hidden="true" role="img" vviewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.4375 7L11 15.8687L6.5625 7L15.4375 7Z" fill="currentColor"/>
+</svg>`;
+      this.$upDownArrow = `<svg width="22" height="22" focusable="false" aria-hidden="true" role="img" vviewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.1875 9.5L10.9609 3.95703L13.7344 9.5H8.1875Z" fill="currentColor"/>
+<path d="M13.7344 12.0781L10.9609 17.6211L8.1875 12.0781H13.7344Z" fill="currentColor"/>
+</svg>`;
       this.$headings = this.$head ? Array.from(this.$head.querySelectorAll('th')) : [];
       this.createHeadingButtons();
+      this.updateCaption();
+      this.updateDirectionIndicators();
       this.createStatusBox();
       this.initialiseSortedColumn();
       this.$head.addEventListener('click', this.onSortButtonClick.bind(this));
@@ -2836,7 +2866,7 @@
     initialiseSortedColumn() {
       var _$sortButton$getAttri;
       const $rows = this.getTableRowsArray();
-      const $heading = this.$root.querySelector('th[aria-sort]');
+      const $heading = this.$root.querySelector('th[aria-sort="ascending"], th[aria-sort="descending"]');
       const $sortButton = $heading == null ? void 0 : $heading.querySelector('button');
       const sortDirection = $heading == null ? void 0 : $heading.getAttribute('aria-sort');
       const columnNumber = Number.parseInt((_$sortButton$getAttri = $sortButton == null ? void 0 : $sortButton.getAttribute('data-index')) != null ? _$sortButton$getAttri : '0', 10);
@@ -2852,7 +2882,8 @@
      */
     onSortButtonClick(event) {
       var _$button$getAttribute;
-      const $button = event.target;
+      const $target = /** @type {HTMLElement} */event.target;
+      const $button = $target.closest('button');
       if (!$button || !($button instanceof HTMLButtonElement) || !$button.parentElement) {
         return;
       }
@@ -2865,6 +2896,20 @@
       this.addRows($sortedRows);
       this.removeButtonStates();
       this.updateButtonState($button, newSortDirection);
+      this.updateDirectionIndicators();
+    }
+    updateCaption() {
+      if (!this.$caption) {
+        return;
+      }
+      let assistiveText = this.$caption.querySelector('.govuk-visually-hidden');
+      if (assistiveText) {
+        return;
+      }
+      assistiveText = document.createElement('span');
+      assistiveText.classList.add('govuk-visually-hidden');
+      assistiveText.textContent = ' (column headers with buttons are sortable).';
+      this.$caption.appendChild(assistiveText);
     }
 
     /**
@@ -2881,6 +2926,27 @@
       message = message.replace(/%direction%/, this.config[`${direction}Text`]);
       this.$status.textContent = message;
     }
+    updateDirectionIndicators() {
+      for (const $heading of this.$headings) {
+        const $button = /** @type {HTMLButtonElement} */
+        $heading.querySelector('button');
+        if ($heading.hasAttribute('aria-sort') && $button) {
+          var _$button$querySelecto;
+          const direction = $heading.getAttribute('aria-sort');
+          (_$button$querySelecto = $button.querySelector('svg')) == null || _$button$querySelecto.remove();
+          switch (direction) {
+            case 'ascending':
+              $button.insertAdjacentHTML('beforeend', this.$upArrow);
+              break;
+            case 'descending':
+              $button.insertAdjacentHTML('beforeend', this.$downArrow);
+              break;
+            default:
+              $button.insertAdjacentHTML('beforeend', this.$upDownArrow);
+          }
+        }
+      }
+    }
     removeButtonStates() {
       for (const $heading of this.$headings) {
         $heading.setAttribute('aria-sort', 'none');