@ministryofjustice/frontend 5.0.0 → 5.1.1

package/moj/components/search-toggle/search-toggle.mjs

@@ -1,46 +1,116 @@
-class SearchToggle {
-  constructor(options) {
-    this.options = options;
-    this.container = this.options.search.container;
-    this.toggleButtonContainer = this.options.toggleButton.container;
-    if (this.container.hasAttribute('data-moj-search-toggle-init')) {
+import { ConfigurableComponent } from 'govuk-frontend';
+
+/**
+ * @augments {ConfigurableComponent<SearchToggleConfig>}
+ */
+class SearchToggle extends ConfigurableComponent {
+  /**
+   * @param {Element | null} $root - HTML element to use for search toggle
+   * @param {SearchToggleConfig} [config] - Search toggle config
+   */
+  constructor($root, config = {}) {
+    var _this$config$searchCo, _this$config$toggleBu;
+    super($root, config);
+    const $searchContainer = (_this$config$searchCo = this.config.searchContainer.element) != null ? _this$config$searchCo : this.$root.querySelector(this.config.searchContainer.selector);
+    const $toggleButtonContainer = (_this$config$toggleBu = this.config.toggleButtonContainer.element) != null ? _this$config$toggleBu : this.$root.querySelector(this.config.toggleButtonContainer.selector);
+    if (!$searchContainer || !$toggleButtonContainer || !($searchContainer instanceof HTMLElement) || !($toggleButtonContainer instanceof HTMLElement)) {
       return this;
     }
-    this.container.setAttribute('data-moj-search-toggle-init', '');
+    this.$searchContainer = $searchContainer;
+    this.$toggleButtonContainer = $toggleButtonContainer;
     const svg = '<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="moj-search-toggle__button__icon"><path d="M7.433,12.5790048 C6.06762625,12.5808611 4.75763941,12.0392925 3.79217348,11.0738265 C2.82670755,10.1083606 2.28513891,8.79837375 2.28699522,7.433 C2.28513891,6.06762625 2.82670755,4.75763941 3.79217348,3.79217348 C4.75763941,2.82670755 6.06762625,2.28513891 7.433,2.28699522 C8.79837375,2.28513891 10.1083606,2.82670755 11.0738265,3.79217348 C12.0392925,4.75763941 12.5808611,6.06762625 12.5790048,7.433 C12.5808611,8.79837375 12.0392925,10.1083606 11.0738265,11.0738265 C10.1083606,12.0392925 8.79837375,12.5808611 7.433,12.5790048 L7.433,12.5790048 Z M14.293,12.579 L13.391,12.579 L13.071,12.269 C14.2300759,10.9245158 14.8671539,9.20813198 14.866,7.433 C14.866,3.32786745 11.5381325,-1.65045755e-15 7.433,-1.65045755e-15 C3.32786745,-1.65045755e-15 -1.65045755e-15,3.32786745 -1.65045755e-15,7.433 C-1.65045755e-15,11.5381325 3.32786745,14.866 7.433,14.866 C9.208604,14.8671159 10.9253982,14.2296624 12.27,13.07 L12.579,13.39 L12.579,14.294 L18.296,20 L20,18.296 L14.294,12.579 L14.293,12.579 Z"></path></svg>';
-    this.toggleButton = document.createElement('button');
-    this.toggleButton.setAttribute('class', 'moj-search-toggle__button');
-    this.toggleButton.setAttribute('type', 'button');
-    this.toggleButton.setAttribute('aria-haspopup', 'true');
-    this.toggleButton.setAttribute('aria-expanded', 'false');
-    this.toggleButton.innerHTML = `${this.options.toggleButton.text} ${svg}`;
-    this.toggleButton.addEventListener('click', this.onToggleButtonClick.bind(this));
-    this.toggleButtonContainer.append(this.toggleButton);
+    this.$toggleButton = document.createElement('button');
+    this.$toggleButton.setAttribute('class', 'moj-search-toggle__button');
+    this.$toggleButton.setAttribute('type', 'button');
+    this.$toggleButton.setAttribute('aria-haspopup', 'true');
+    this.$toggleButton.setAttribute('aria-expanded', 'false');
+    this.$toggleButton.innerHTML = `${this.config.toggleButton.text} ${svg}`;
+    this.$toggleButton.addEventListener('click', this.onToggleButtonClick.bind(this));
+    this.$toggleButtonContainer.append(this.$toggleButton);
     document.addEventListener('click', this.onDocumentClick.bind(this));
     document.addEventListener('focusin', this.onDocumentClick.bind(this));
   }
   showMenu() {
-    this.toggleButton.setAttribute('aria-expanded', 'true');
-    this.container.classList.remove('moj-js-hidden');
-    this.container.querySelector('input').focus();
+    this.$toggleButton.setAttribute('aria-expanded', 'true');
+    this.$searchContainer.classList.remove('moj-js-hidden');
+    this.$searchContainer.querySelector('input').focus();
   }
   hideMenu() {
-    this.container.classList.add('moj-js-hidden');
-    this.toggleButton.setAttribute('aria-expanded', 'false');
+    this.$searchContainer.classList.add('moj-js-hidden');
+    this.$toggleButton.setAttribute('aria-expanded', 'false');
   }
   onToggleButtonClick() {
-    if (this.toggleButton.getAttribute('aria-expanded') === 'false') {
+    if (this.$toggleButton.getAttribute('aria-expanded') === 'false') {
       this.showMenu();
     } else {
       this.hideMenu();
     }
   }
+
+  /**
+   * @param {MouseEvent | FocusEvent} event
+   */
   onDocumentClick(event) {
-    if (!this.toggleButtonContainer.contains(event.target) && !this.container.contains(event.target)) {
+    if (event.target instanceof Node && !this.$toggleButtonContainer.contains(event.target) && !this.$searchContainer.contains(event.target)) {
       this.hideMenu();
     }
   }
+
+  /**
+   * Name for the component used when initialising using data-module attributes.
+   */
 }
 
+/**
+ * @typedef {object} SearchToggleConfig
+ * @property {object} [searchContainer] - Search config
+ * @property {string} [searchContainer.selector] - Selector for search container
+ * @property {Element | null} [searchContainer.element] - HTML element for search container
+ * @property {object} [toggleButton] - Toggle button config
+ * @property {string} [toggleButton.text] - Text for toggle button
+ * @property {object} [toggleButtonContainer] - Toggle button container config
+ * @property {string} [toggleButtonContainer.selector] - Selector for toggle button container
+ * @property {Element | null} [toggleButtonContainer.element] - HTML element for toggle button container
+ */
+
+/**
+ * @import { Schema } from 'govuk-frontend/dist/govuk/common/configuration.mjs'
+ */
+SearchToggle.moduleName = 'moj-search-toggle';
+/**
+ * Search toggle config
+ *
+ * @type {SearchToggleConfig}
+ */
+SearchToggle.defaults = Object.freeze({
+  searchContainer: {
+    selector: '.moj-search'
+  },
+  toggleButton: {
+    text: 'Search'
+  },
+  toggleButtonContainer: {
+    selector: '.moj-search-toggle__toggle'
+  }
+});
+/**
+ * Search toggle config schema
+ *
+ * @satisfies {Schema<SearchToggleConfig>}
+ */
+SearchToggle.schema = Object.freeze(/** @type {const} */{
+  properties: {
+    searchContainer: {
+      type: 'object'
+    },
+    toggleButton: {
+      type: 'object'
+    },
+    toggleButtonContainer: {
+      type: 'object'
+    }
+  }
+});
+
 export { SearchToggle };
 //# sourceMappingURL=search-toggle.mjs.map

package/moj/components/search-toggle/search-toggle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"search-toggle.mjs","sources":["../../../../src/moj/components/search-toggle/search-toggle.mjs"],"sourcesContent":["export class SearchToggle {\n  constructor(options) {\n    this.options = options\n    this.container = this.options.search.container\n    this.toggleButtonContainer = this.options.toggleButton.container\n\n    if (this.container.hasAttribute('data-moj-search-toggle-init')) {\n      return this\n    }\n\n    this.container.setAttribute('data-moj-search-toggle-init', '')\n\n    const svg =\n      '<svg viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" class=\"moj-search-toggle__button__icon\"><path d=\"M7.433,12.5790048 C6.06762625,12.5808611 4.75763941,12.0392925 3.79217348,11.0738265 C2.82670755,10.1083606 2.28513891,8.79837375 2.28699522,7.433 C2.28513891,6.06762625 2.82670755,4.75763941 3.79217348,3.79217348 C4.75763941,2.82670755 6.06762625,2.28513891 7.433,2.28699522 C8.79837375,2.28513891 10.1083606,2.82670755 11.0738265,3.79217348 C12.0392925,4.75763941 12.5808611,6.06762625 12.5790048,7.433 C12.5808611,8.79837375 12.0392925,10.1083606 11.0738265,11.0738265 C10.1083606,12.0392925 8.79837375,12.5808611 7.433,12.5790048 L7.433,12.5790048 Z M14.293,12.579 L13.391,12.579 L13.071,12.269 C14.2300759,10.9245158 14.8671539,9.20813198 14.866,7.433 C14.866,3.32786745 11.5381325,-1.65045755e-15 7.433,-1.65045755e-15 C3.32786745,-1.65045755e-15 -1.65045755e-15,3.32786745 -1.65045755e-15,7.433 C-1.65045755e-15,11.5381325 3.32786745,14.866 7.433,14.866 C9.208604,14.8671159 10.9253982,14.2296624 12.27,13.07 L12.579,13.39 L12.579,14.294 L18.296,20 L20,18.296 L14.294,12.579 L14.293,12.579 Z\"></path></svg>'\n\n    this.toggleButton = document.createElement('button')\n    this.toggleButton.setAttribute('class', 'moj-search-toggle__button')\n    this.toggleButton.setAttribute('type', 'button')\n    this.toggleButton.setAttribute('aria-haspopup', 'true')\n    this.toggleButton.setAttribute('aria-expanded', 'false')\n    this.toggleButton.innerHTML = `${this.options.toggleButton.text} ${svg}`\n\n    this.toggleButton.addEventListener(\n      'click',\n      this.onToggleButtonClick.bind(this)\n    )\n\n    this.toggleButtonContainer.append(this.toggleButton)\n\n    document.addEventListener('click', this.onDocumentClick.bind(this))\n    document.addEventListener('focusin', this.onDocumentClick.bind(this))\n  }\n\n  showMenu() {\n    this.toggleButton.setAttribute('aria-expanded', 'true')\n    this.container.classList.remove('moj-js-hidden')\n    this.container.querySelector('input').focus()\n  }\n\n  hideMenu() {\n    this.container.classList.add('moj-js-hidden')\n    this.toggleButton.setAttribute('aria-expanded', 'false')\n  }\n\n  onToggleButtonClick() {\n    if (this.toggleButton.getAttribute('aria-expanded') === 'false') {\n      this.showMenu()\n    } else {\n      this.hideMenu()\n    }\n  }\n\n  onDocumentClick(event) {\n    if (\n      !this.toggleButtonContainer.contains(event.target) &&\n      !this.container.contains(event.target)\n    ) {\n      this.hideMenu()\n    }\n  }\n}\n"],"names":["SearchToggle","constructor","options","container","search","toggleButtonContainer","toggleButton","hasAttribute","setAttribute","svg","document","createElement","innerHTML","text","addEventListener","onToggleButtonClick","bind","append","onDocumentClick","showMenu","classList","remove","querySelector","focus","hideMenu","add","getAttribute","event","contains","target"],"mappings":"AAAO,MAAMA,YAAY,CAAC;EACxBC,WAAWA,CAACC,OAAO,EAAE;IACnB,IAAI,CAACA,OAAO,GAAGA,OAAO;IACtB,IAAI,CAACC,SAAS,GAAG,IAAI,CAACD,OAAO,CAACE,MAAM,CAACD,SAAS;IAC9C,IAAI,CAACE,qBAAqB,GAAG,IAAI,CAACH,OAAO,CAACI,YAAY,CAACH,SAAS;IAEhE,IAAI,IAAI,CAACA,SAAS,CAACI,YAAY,CAAC,6BAA6B,CAAC,EAAE;AAC9D,MAAA,OAAO,IAAI;AACb;IAEA,IAAI,CAACJ,SAAS,CAACK,YAAY,CAAC,6BAA6B,EAAE,EAAE,CAAC;IAE9D,MAAMC,GAAG,GACP,6pCAA6pC;IAE/pC,IAAI,CAACH,YAAY,GAAGI,QAAQ,CAACC,aAAa,CAAC,QAAQ,CAAC;IACpD,IAAI,CAACL,YAAY,CAACE,YAAY,CAAC,OAAO,EAAE,2BAA2B,CAAC;IACpE,IAAI,CAACF,YAAY,CAACE,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC;IAChD,IAAI,CAACF,YAAY,CAACE,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;IACvD,IAAI,CAACF,YAAY,CAACE,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC;AACxD,IAAA,IAAI,CAACF,YAAY,CAACM,SAAS,GAAG,CAAG,EAAA,IAAI,CAACV,OAAO,CAACI,YAAY,CAACO,IAAI,CAAA,CAAA,EAAIJ,GAAG,CAAE,CAAA;AAExE,IAAA,IAAI,CAACH,YAAY,CAACQ,gBAAgB,CAChC,OAAO,EACP,IAAI,CAACC,mBAAmB,CAACC,IAAI,CAAC,IAAI,CACpC,CAAC;IAED,IAAI,CAACX,qBAAqB,CAACY,MAAM,CAAC,IAAI,CAACX,YAAY,CAAC;AAEpDI,IAAAA,QAAQ,CAACI,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAACI,eAAe,CAACF,IAAI,CAAC,IAAI,CAAC,CAAC;AACnEN,IAAAA,QAAQ,CAACI,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAACI,eAAe,CAACF,IAAI,CAAC,IAAI,CAAC,CAAC;AACvE;AAEAG,EAAAA,QAAQA,GAAG;IACT,IAAI,CAACb,YAAY,CAACE,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;IACvD,IAAI,CAACL,SAAS,CAACiB,SAAS,CAACC,MAAM,CAAC,eAAe,CAAC;IAChD,IAAI,CAAClB,SAAS,CAACmB,aAAa,CAAC,OAAO,CAAC,CAACC,KAAK,EAAE;AAC/C;AAEAC,EAAAA,QAAQA,GAAG;IACT,IAAI,CAACrB,SAAS,CAACiB,SAAS,CAACK,GAAG,CAAC,eAAe,CAAC;IAC7C,IAAI,CAACnB,YAAY,CAACE,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC;AAC1D;AAEAO,EAAAA,mBAAmBA,GAAG;IACpB,IAAI,IAAI,CAACT,YAAY,CAACoB,YAAY,CAAC,eAAe,CAAC,KAAK,OAAO,EAAE;MAC/D,IAAI,CAACP,QAAQ,EAAE;AACjB,KAAC,MAAM;MACL,IAAI,CAACK,QAAQ,EAAE;AACjB;AACF;EAEAN,eAAeA,CAACS,KAAK,EAAE;IACrB,IACE,CAAC,IAAI,CAACtB,qBAAqB,CAACuB,QAAQ,CAACD,KAAK,CAACE,MAAM,CAAC,IAClD,CAAC,IAAI,CAAC1B,SAAS,CAACyB,QAAQ,CAACD,KAAK,CAACE,MAAM,CAAC,EACtC;MACA,IAAI,CAACL,QAAQ,EAAE;AACjB;AACF;AACF;;;;"}
+{"version":3,"file":"search-toggle.mjs","sources":["../../../../src/moj/components/search-toggle/search-toggle.mjs"],"sourcesContent":["import { ConfigurableComponent } from 'govuk-frontend'\n\n/**\n * @augments {ConfigurableComponent<SearchToggleConfig>}\n */\nexport class SearchToggle extends ConfigurableComponent {\n  /**\n   * @param {Element | null} $root - HTML element to use for search toggle\n   * @param {SearchToggleConfig} [config] - Search toggle config\n   */\n  constructor($root, config = {}) {\n    super($root, config)\n\n    const $searchContainer =\n      this.config.searchContainer.element ??\n      this.$root.querySelector(this.config.searchContainer.selector)\n\n    const $toggleButtonContainer =\n      this.config.toggleButtonContainer.element ??\n      this.$root.querySelector(this.config.toggleButtonContainer.selector)\n\n    if (\n      !$searchContainer ||\n      !$toggleButtonContainer ||\n      !($searchContainer instanceof HTMLElement) ||\n      !($toggleButtonContainer instanceof HTMLElement)\n    ) {\n      return this\n    }\n\n    this.$searchContainer = $searchContainer\n    this.$toggleButtonContainer = $toggleButtonContainer\n\n    const svg =\n      '<svg viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" class=\"moj-search-toggle__button__icon\"><path d=\"M7.433,12.5790048 C6.06762625,12.5808611 4.75763941,12.0392925 3.79217348,11.0738265 C2.82670755,10.1083606 2.28513891,8.79837375 2.28699522,7.433 C2.28513891,6.06762625 2.82670755,4.75763941 3.79217348,3.79217348 C4.75763941,2.82670755 6.06762625,2.28513891 7.433,2.28699522 C8.79837375,2.28513891 10.1083606,2.82670755 11.0738265,3.79217348 C12.0392925,4.75763941 12.5808611,6.06762625 12.5790048,7.433 C12.5808611,8.79837375 12.0392925,10.1083606 11.0738265,11.0738265 C10.1083606,12.0392925 8.79837375,12.5808611 7.433,12.5790048 L7.433,12.5790048 Z M14.293,12.579 L13.391,12.579 L13.071,12.269 C14.2300759,10.9245158 14.8671539,9.20813198 14.866,7.433 C14.866,3.32786745 11.5381325,-1.65045755e-15 7.433,-1.65045755e-15 C3.32786745,-1.65045755e-15 -1.65045755e-15,3.32786745 -1.65045755e-15,7.433 C-1.65045755e-15,11.5381325 3.32786745,14.866 7.433,14.866 C9.208604,14.8671159 10.9253982,14.2296624 12.27,13.07 L12.579,13.39 L12.579,14.294 L18.296,20 L20,18.296 L14.294,12.579 L14.293,12.579 Z\"></path></svg>'\n\n    this.$toggleButton = document.createElement('button')\n    this.$toggleButton.setAttribute('class', 'moj-search-toggle__button')\n    this.$toggleButton.setAttribute('type', 'button')\n    this.$toggleButton.setAttribute('aria-haspopup', 'true')\n    this.$toggleButton.setAttribute('aria-expanded', 'false')\n    this.$toggleButton.innerHTML = `${this.config.toggleButton.text} ${svg}`\n\n    this.$toggleButton.addEventListener(\n      'click',\n      this.onToggleButtonClick.bind(this)\n    )\n\n    this.$toggleButtonContainer.append(this.$toggleButton)\n\n    document.addEventListener('click', this.onDocumentClick.bind(this))\n    document.addEventListener('focusin', this.onDocumentClick.bind(this))\n  }\n\n  showMenu() {\n    this.$toggleButton.setAttribute('aria-expanded', 'true')\n    this.$searchContainer.classList.remove('moj-js-hidden')\n    this.$searchContainer.querySelector('input').focus()\n  }\n\n  hideMenu() {\n    this.$searchContainer.classList.add('moj-js-hidden')\n    this.$toggleButton.setAttribute('aria-expanded', 'false')\n  }\n\n  onToggleButtonClick() {\n    if (this.$toggleButton.getAttribute('aria-expanded') === 'false') {\n      this.showMenu()\n    } else {\n      this.hideMenu()\n    }\n  }\n\n  /**\n   * @param {MouseEvent | FocusEvent} event\n   */\n  onDocumentClick(event) {\n    if (\n      event.target instanceof Node &&\n      !this.$toggleButtonContainer.contains(event.target) &&\n      !this.$searchContainer.contains(event.target)\n    ) {\n      this.hideMenu()\n    }\n  }\n\n  /**\n   * Name for the component used when initialising using data-module attributes.\n   */\n  static moduleName = 'moj-search-toggle'\n\n  /**\n   * Search toggle config\n   *\n   * @type {SearchToggleConfig}\n   */\n  static defaults = Object.freeze({\n    searchContainer: {\n      selector: '.moj-search'\n    },\n    toggleButton: {\n      text: 'Search'\n    },\n    toggleButtonContainer: {\n      selector: '.moj-search-toggle__toggle'\n    }\n  })\n\n  /**\n   * Search toggle config schema\n   *\n   * @satisfies {Schema<SearchToggleConfig>}\n   */\n  static schema = Object.freeze(\n    /** @type {const} */ ({\n      properties: {\n        searchContainer: { type: 'object' },\n        toggleButton: { type: 'object' },\n        toggleButtonContainer: { type: 'object' }\n      }\n    })\n  )\n}\n\n/**\n * @typedef {object} SearchToggleConfig\n * @property {object} [searchContainer] - Search config\n * @property {string} [searchContainer.selector] - Selector for search container\n * @property {Element | null} [searchContainer.element] - HTML element for search container\n * @property {object} [toggleButton] - Toggle button config\n * @property {string} [toggleButton.text] - Text for toggle button\n * @property {object} [toggleButtonContainer] - Toggle button container config\n * @property {string} [toggleButtonContainer.selector] - Selector for toggle button container\n * @property {Element | null} [toggleButtonContainer.element] - HTML element for toggle button container\n */\n\n/**\n * @import { Schema } from 'govuk-frontend/dist/govuk/common/configuration.mjs'\n */\n"],"names":["SearchToggle","ConfigurableComponent","constructor","$root","config","_this$config$searchCo","_this$config$toggleBu","$searchContainer","searchContainer","element","querySelector","selector","$toggleButtonContainer","toggleButtonContainer","HTMLElement","svg","$toggleButton","document","createElement","setAttribute","innerHTML","toggleButton","text","addEventListener","onToggleButtonClick","bind","append","onDocumentClick","showMenu","classList","remove","focus","hideMenu","add","getAttribute","event","target","Node","contains","moduleName","defaults","Object","freeze","schema","properties","type"],"mappings":"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"}

package/moj/components/sortable-table/_sortable-table.scss

@@ -2,9 +2,10 @@
 
 [aria-sort] button,
 [aria-sort] button:hover {
+  display: inline-flex;
   position: relative;
   margin: 0;
-  padding: 0 10px 0 0;
+  padding: 0;
   border-width: 0;
   color: #005ea5;
   background-color: transparent;
@@ -15,6 +16,7 @@
   font-weight: inherit;
   text-align: inherit;
   cursor: pointer;
+  align-items: center;
 }
 
 [aria-sort] button:focus {
@@ -26,45 +28,4 @@
     0 4px $govuk-focus-text-colour;
 }
 
-[aria-sort]:first-child button {
-  right: auto;
-}
-
-[aria-sort] button::before {
-  content: " \25bc";
-  position: absolute;
-  top: 9px;
-  right: -1px;
-  font-size: 0.5em;
-}
-
-[aria-sort] button::after {
-  content: " \25b2";
-  position: absolute;
-  top: 1px;
-  right: -1px;
-  font-size: 0.5em;
-}
-
-[aria-sort="ascending"] button::before,
-[aria-sort="descending"] button::before {
-  content: none;
-}
-
-[aria-sort="ascending"] button::after {
-  content: " \25b2";
-  position: absolute;
-  top: 2px;
-  right: -5px;
-  font-size: 0.8em;
-}
-
-[aria-sort="descending"] button::after {
-  content: " \25bc";
-  position: absolute;
-  top: 2px;
-  right: -5px;
-  font-size: 0.8em;
-}
-
 /*# sourceMappingURL=_sortable-table.scss.map */

package/moj/components/sortable-table/_sortable-table.scss.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/moj/components/sortable-table/_sortable-table.scss"],"names":[],"mappings":"AAAA,uCAAuC;;AAEvC;;EAEE,kBAAkB;EAClB,SAAS;EACT,mBAAmB;EACnB,eAAe;EACf,cAAc;EACd,6BAA6B;EAG7B,mBAAmB;EACnB,oBAAoB;EACpB,kBAAkB;EAClB,cAAc;EACd,oBAAoB;EACpB,mBAAmB;EACnB,eAAe;AACjB;;AAEA;EACE,aAAa;EACb,+BAA+B;EAC/B,qCAAqC;EACrC;;kCAEgC;AAClC;;AAEA;EACE,WAAW;AACb;;AAEA;EACE,iBAAiB;EACjB,kBAAkB;EAClB,QAAQ;EACR,WAAW;EACX,gBAAgB;AAClB;;AAEA;EACE,iBAAiB;EACjB,kBAAkB;EAClB,QAAQ;EACR,WAAW;EACX,gBAAgB;AAClB;;AAEA;;EAEE,aAAa;AACf;;AAEA;EACE,iBAAiB;EACjB,kBAAkB;EAClB,QAAQ;EACR,WAAW;EACX,gBAAgB;AAClB;;AAEA;EACE,iBAAiB;EACjB,kBAAkB;EAClB,QAAQ;EACR,WAAW;EACX,gBAAgB;AAClB","file":"_sortable-table.scss","sourcesContent":["@use \"../../vendor/govuk-frontend\" as *;\n\n[aria-sort] button,\n[aria-sort] button:hover {\n  position: relative;\n  margin: 0;\n  padding: 0 10px 0 0;\n  border-width: 0;\n  color: #005ea5;\n  background-color: transparent;\n  -webkit-box-shadow: 0 0 0 0;\n  -moz-box-shadow: 0 0 0 0;\n  box-shadow: 0 0 0 0;\n  font-family: inherit;\n  font-size: inherit;\n  font-size: 1em;\n  font-weight: inherit;\n  text-align: inherit;\n  cursor: pointer;\n}\n\n[aria-sort] button:focus {\n  outline: none;\n  color: $govuk-focus-text-colour;\n  background-color: $govuk-focus-colour;\n  box-shadow:\n    0 -2px $govuk-focus-colour,\n    0 4px $govuk-focus-text-colour;\n}\n\n[aria-sort]:first-child button {\n  right: auto;\n}\n\n[aria-sort] button::before {\n  content: \" \\25bc\";\n  position: absolute;\n  top: 9px;\n  right: -1px;\n  font-size: 0.5em;\n}\n\n[aria-sort] button::after {\n  content: \" \\25b2\";\n  position: absolute;\n  top: 1px;\n  right: -1px;\n  font-size: 0.5em;\n}\n\n[aria-sort=\"ascending\"] button::before,\n[aria-sort=\"descending\"] button::before {\n  content: none;\n}\n\n[aria-sort=\"ascending\"] button::after {\n  content: \" \\25b2\";\n  position: absolute;\n  top: 2px;\n  right: -5px;\n  font-size: 0.8em;\n}\n\n[aria-sort=\"descending\"] button::after {\n  content: \" \\25bc\";\n  position: absolute;\n  top: 2px;\n  right: -5px;\n  font-size: 0.8em;\n}\n"]}
+{"version":3,"sources":["../../../../src/moj/components/sortable-table/_sortable-table.scss"],"names":[],"mappings":"AAAA,uCAAuC;;AAEvC;;EAEE,oBAAoB;EACpB,kBAAkB;EAClB,SAAS;EACT,UAAU;EACV,eAAe;EACf,cAAc;EACd,6BAA6B;EAG7B,mBAAmB;EACnB,oBAAoB;EACpB,kBAAkB;EAClB,cAAc;EACd,oBAAoB;EACpB,mBAAmB;EACnB,eAAe;EACf,mBAAmB;AACrB;;AAEA;EACE,aAAa;EACb,+BAA+B;EAC/B,qCAAqC;EACrC;;kCAEgC;AAClC","file":"_sortable-table.scss","sourcesContent":["@use \"../../vendor/govuk-frontend\" as *;\n\n[aria-sort] button,\n[aria-sort] button:hover {\n  display: inline-flex;\n  position: relative;\n  margin: 0;\n  padding: 0;\n  border-width: 0;\n  color: #005ea5;\n  background-color: transparent;\n  -webkit-box-shadow: 0 0 0 0;\n  -moz-box-shadow: 0 0 0 0;\n  box-shadow: 0 0 0 0;\n  font-family: inherit;\n  font-size: inherit;\n  font-size: 1em;\n  font-weight: inherit;\n  text-align: inherit;\n  cursor: pointer;\n  align-items: center;\n}\n\n[aria-sort] button:focus {\n  outline: none;\n  color: $govuk-focus-text-colour;\n  background-color: $govuk-focus-colour;\n  box-shadow:\n    0 -2px $govuk-focus-colour,\n    0 4px $govuk-focus-text-colour;\n}\n"]}

package/moj/components/sortable-table/sortable-table.bundle.js

@@ -1,133 +1,250 @@
 (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 SortableTable {
-    constructor(params) {
-      const table = params.table;
-      const head = table == null ? void 0 : table.querySelector('thead');
-      const body = table == null ? void 0 : table.querySelector('tbody');
-      if (!table || !(table instanceof HTMLElement) || !head || !body) {
+  /**
+   * @augments {ConfigurableComponent<SortableTableConfig>}
+   */
+  class SortableTable extends govukFrontend.ConfigurableComponent {
+    /**
+     * @param {Element | null} $root - HTML element to use for sortable table
+     * @param {SortableTableConfig} [config] - Sortable table config
+     */
+    constructor($root, config = {}) {
+      super($root, config);
+      const $head = $root == null ? void 0 : $root.querySelector('thead');
+      const $body = $root == null ? void 0 : $root.querySelector('tbody');
+      if (!$head || !$body) {
         return this;
       }
-      this.table = table;
-      this.head = head;
-      this.body = body;
-      if (this.table.hasAttribute('data-moj-sortable-table-init')) {
-        return this;
-      }
-      this.table.setAttribute('data-moj-sortable-table-init', '');
-      this.headings = this.head ? Array.from(this.head.querySelectorAll('th')) : [];
-      this.setupOptions(params);
+      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));
-    }
-    setupOptions(params) {
-      params = params || {};
-      this.statusMessage = params.statusMessage || 'Sort by %heading% (%direction%)';
-      this.ascendingText = params.ascendingText || 'ascending';
-      this.descendingText = params.descendingText || 'descending';
+      this.$head.addEventListener('click', this.onSortButtonClick.bind(this));
     }
     createHeadingButtons() {
-      for (const heading of this.headings) {
-        if (heading.hasAttribute('aria-sort')) {
-          this.createHeadingButton(heading);
+      for (const $heading of this.$headings) {
+        if ($heading.hasAttribute('aria-sort')) {
+          this.createHeadingButton($heading);
         }
       }
     }
-    createHeadingButton(heading) {
-      const index = this.headings.indexOf(heading);
-      const button = document.createElement('button');
-      button.setAttribute('type', 'button');
-      button.setAttribute('data-index', `${index}`);
-      button.textContent = heading.textContent;
-      heading.textContent = '';
-      heading.appendChild(button);
+
+    /**
+     * @param {HTMLTableCellElement} $heading
+     */
+    createHeadingButton($heading) {
+      const index = this.$headings.indexOf($heading);
+      const $button = document.createElement('button');
+      $button.setAttribute('type', 'button');
+      $button.setAttribute('data-index', `${index}`);
+      $button.textContent = $heading.textContent;
+      $heading.textContent = '';
+      $heading.appendChild($button);
     }
     createStatusBox() {
-      this.status = document.createElement('div');
-      this.status.setAttribute('aria-atomic', 'true');
-      this.status.setAttribute('aria-live', 'polite');
-      this.status.setAttribute('class', 'govuk-visually-hidden');
-      this.status.setAttribute('role', 'status');
-      this.table.insertAdjacentElement('afterend', this.status);
+      this.$status = document.createElement('div');
+      this.$status.setAttribute('aria-atomic', 'true');
+      this.$status.setAttribute('aria-live', 'polite');
+      this.$status.setAttribute('class', 'govuk-visually-hidden');
+      this.$status.setAttribute('role', 'status');
+      this.$root.insertAdjacentElement('afterend', this.$status);
     }
     initialiseSortedColumn() {
-      var _sortButton$getAttrib;
-      const rows = this.getTableRowsArray();
-      const heading = this.table.querySelector('th[aria-sort]');
-      const sortButton = heading == null ? void 0 : heading.querySelector('button');
-      const sortDirection = heading == null ? void 0 : heading.getAttribute('aria-sort');
-      const columnNumber = Number.parseInt((_sortButton$getAttrib = sortButton == null ? void 0 : sortButton.getAttribute('data-index')) != null ? _sortButton$getAttrib : '0', 10);
-      if (!heading || !sortButton || !(sortDirection === 'ascending' || sortDirection === 'descending')) {
+      var _$sortButton$getAttri;
+      const $rows = this.getTableRowsArray();
+      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);
+      if (!$heading || !$sortButton || !(sortDirection === 'ascending' || sortDirection === 'descending')) {
         return;
       }
-      const sortedRows = this.sort(rows, columnNumber, sortDirection);
-      this.addRows(sortedRows);
+      const $sortedRows = this.sort($rows, columnNumber, sortDirection);
+      this.addRows($sortedRows);
     }
+
+    /**
+     * @param {MouseEvent} event - Click event
+     */
     onSortButtonClick(event) {
-      var _button$getAttribute;
-      const button = event.target;
-      if (!button || !(button instanceof HTMLButtonElement) || !button.parentElement) {
+      var _$button$getAttribute;
+      const $target = /** @type {HTMLElement} */event.target;
+      const $button = $target.closest('button');
+      if (!$button || !($button instanceof HTMLButtonElement) || !$button.parentElement) {
         return;
       }
-      const heading = button.parentElement;
-      const sortDirection = heading.getAttribute('aria-sort');
-      const columnNumber = Number.parseInt((_button$getAttribute = button == null ? void 0 : button.getAttribute('data-index')) != null ? _button$getAttribute : '0', 10);
+      const $heading = $button.parentElement;
+      const sortDirection = $heading.getAttribute('aria-sort');
+      const columnNumber = Number.parseInt((_$button$getAttribute = $button == null ? void 0 : $button.getAttribute('data-index')) != null ? _$button$getAttribute : '0', 10);
       const newSortDirection = sortDirection === 'none' || sortDirection === 'descending' ? 'ascending' : 'descending';
-      const rows = this.getTableRowsArray();
-      const sortedRows = this.sort(rows, columnNumber, newSortDirection);
-      this.addRows(sortedRows);
+      const $rows = this.getTableRowsArray();
+      const $sortedRows = this.sort($rows, columnNumber, newSortDirection);
+      this.addRows($sortedRows);
       this.removeButtonStates();
-      this.updateButtonState(button, newSortDirection);
+      this.updateButtonState($button, newSortDirection);
+      this.updateDirectionIndicators();
     }
-    updateButtonState(button, direction) {
+    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);
+    }
+
+    /**
+     * @param {HTMLButtonElement} $button
+     * @param {string} direction
+     */
+    updateButtonState($button, direction) {
       if (!(direction === 'ascending' || direction === 'descending')) {
         return;
       }
-      button.parentElement.setAttribute('aria-sort', direction);
-      let message = this.statusMessage;
-      message = message.replace(/%heading%/, button.textContent);
-      message = message.replace(/%direction%/, this[`${direction}Text`]);
-      this.status.textContent = message;
+      $button.parentElement.setAttribute('aria-sort', direction);
+      let message = this.config.statusMessage;
+      message = message.replace(/%heading%/, $button.textContent);
+      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');
+      for (const $heading of this.$headings) {
+        $heading.setAttribute('aria-sort', 'none');
       }
     }
-    addRows(rows) {
-      for (const row of rows) {
-        this.body.append(row);
+
+    /**
+     * @param {HTMLTableRowElement[]} $rows
+     */
+    addRows($rows) {
+      for (const $row of $rows) {
+        this.$body.append($row);
       }
     }
     getTableRowsArray() {
-      return Array.from(this.body.querySelectorAll('tr'));
+      return Array.from(this.$body.querySelectorAll('tr'));
     }
-    sort(rows, columnNumber, sortDirection) {
-      return rows.sort((rowA, rowB) => {
-        const tdA = rowA.querySelectorAll('td, th')[columnNumber];
-        const tdB = rowB.querySelectorAll('td, th')[columnNumber];
-        if (!tdA || !tdB || !(tdA instanceof HTMLElement) || !(tdB instanceof HTMLElement)) {
+
+    /**
+     * @param {HTMLTableRowElement[]} $rows
+     * @param {number} columnNumber
+     * @param {string} sortDirection
+     */
+    sort($rows, columnNumber, sortDirection) {
+      return $rows.sort(($rowA, $rowB) => {
+        const $tdA = $rowA.querySelectorAll('td, th')[columnNumber];
+        const $tdB = $rowB.querySelectorAll('td, th')[columnNumber];
+        if (!$tdA || !$tdB || !($tdA instanceof HTMLElement) || !($tdB instanceof HTMLElement)) {
           return 0;
         }
-        const valueA = sortDirection === 'ascending' ? this.getCellValue(tdA) : this.getCellValue(tdB);
-        const valueB = sortDirection === 'ascending' ? this.getCellValue(tdB) : this.getCellValue(tdA);
+        const valueA = sortDirection === 'ascending' ? this.getCellValue($tdA) : this.getCellValue($tdB);
+        const valueB = sortDirection === 'ascending' ? this.getCellValue($tdB) : this.getCellValue($tdA);
         return !(typeof valueA === 'number' && typeof valueB === 'number') ? valueA.toString().localeCompare(valueB.toString()) : valueA - valueB;
       });
     }
-    getCellValue(cell) {
-      const val = cell.getAttribute('data-sort-value') || cell.innerHTML;
+
+    /**
+     * @param {HTMLElement} $cell
+     */
+    getCellValue($cell) {
+      const val = $cell.getAttribute('data-sort-value') || $cell.innerHTML;
       const valAsNumber = Number(val);
       return Number.isFinite(valAsNumber) ? valAsNumber // Exclude invalid numbers, infinity etc
       : val;
     }
+
+    /**
+     * Name for the component used when initialising using data-module attributes.
+     */
   }
 
+  /**
+   * Sortable table config
+   *
+   * @typedef {object} SortableTableConfig
+   * @property {string} [statusMessage] - Status message
+   * @property {string} [ascendingText] - Ascending text
+   * @property {string} [descendingText] - Descending text
+   */
+
+  /**
+   * @import { Schema } from 'govuk-frontend/dist/govuk/common/configuration.mjs'
+   */
+  SortableTable.moduleName = 'moj-sortable-table';
+  /**
+   * Sortable table config
+   *
+   * @type {SortableTableConfig}
+   */
+  SortableTable.defaults = Object.freeze({
+    statusMessage: 'Sort by %heading% (%direction%)',
+    ascendingText: 'ascending',
+    descendingText: 'descending'
+  });
+  /**
+   * Sortable table config schema
+   *
+   * @satisfies {Schema<SortableTableConfig>}
+   */
+  SortableTable.schema = Object.freeze(/** @type {const} */{
+    properties: {
+      statusMessage: {
+        type: 'string'
+      },
+      ascendingText: {
+        type: 'string'
+      },
+      descendingText: {
+        type: 'string'
+      }
+    }
+  });
+
   exports.SortableTable = SortableTable;
 
 }));