@ministryofjustice/frontend 3.3.1 → 3.5.0

package/moj/components/multi-select/multi-select.js

@@ -1,70 +1,106 @@
-MOJFrontend.MultiSelect = function(options) {
-  this.container = $(options.container);
-
-  if (this.container.data('moj-multi-select-initialised')) {
-    return
-  }
-
-  this.container.data('moj-multi-select-initialised', true);
-
-  const idPrefix = options.id_prefix;
-  let allId = 'checkboxes-all';
-  if (typeof idPrefix !== 'undefined') {
-    allId = idPrefix + 'checkboxes-all';
-  }
-
-  this.toggle = $(this.getToggleHtml(allId));
-  this.toggleButton = this.toggle.find('input');
-  this.toggleButton.on('click', $.proxy(this, 'onButtonClick'));
-  this.container.append(this.toggle);
-  this.checkboxes = $(options.checkboxes);
-  this.checkboxes.on('click', $.proxy(this, 'onCheckboxClick'));
-  this.checked = options.checked || false;
-};
-
-MOJFrontend.MultiSelect.prototype.getToggleHtml = function (allId) {
-  let html = '';
-  html += '<div class="govuk-checkboxes__item govuk-checkboxes--small moj-multi-select__checkbox">';
-  html += `  <input type="checkbox" class="govuk-checkboxes__input" id="${allId}">`;
-  html += `  <label class="govuk-label govuk-checkboxes__label moj-multi-select__toggle-label" for="${allId}">`;
-  html += '    <span class="govuk-visually-hidden">Select all</span>';
-  html += '  </label>';
-  html += '</div>';
-  return html;
-};
-
-MOJFrontend.MultiSelect.prototype.onButtonClick = function(e) {
-  if(this.checked) {
-    this.uncheckAll();
-    this.toggleButton[0].checked = false;
-  } else {
-    this.checkAll();
-    this.toggleButton[0].checked = true;
-  }
-};
-
-MOJFrontend.MultiSelect.prototype.checkAll = function() {
-  this.checkboxes.each($.proxy(function(index, el) {
-    el.checked = true;
-  }, this));
-  this.checked = true;
-};
-
-MOJFrontend.MultiSelect.prototype.uncheckAll = function() {
-  this.checkboxes.each($.proxy(function(index, el) {
-    el.checked = false;
-  }, this));
-  this.checked = false;
-};
-
-MOJFrontend.MultiSelect.prototype.onCheckboxClick = function(e) {
-  if(!e.target.checked) {
-    this.toggleButton[0].checked = false;
-    this.checked = false;
-  } else {
-    if(this.checkboxes.filter(':checked').length === this.checkboxes.length) {
-      this.toggleButton[0].checked = true;
-      this.checked = true;
-    }
-  }
-};
+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+	typeof define === 'function' && define.amd ? define(factory) :
+	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.MOJFrontend = factory());
+})(this, (function () { 'use strict';
+
+	function getDefaultExportFromCjs (x) {
+		return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+	}
+
+	var _global_window_jQuery = window.jQuery;
+
+	var multiSelect$1;
+	var hasRequiredMultiSelect;
+
+	function requireMultiSelect () {
+		if (hasRequiredMultiSelect) return multiSelect$1;
+		hasRequiredMultiSelect = 1;
+		const $ = _global_window_jQuery;
+
+		function MultiSelect(options) {
+		  this.container = $(options.container);
+
+		  if (this.container.data('moj-multi-select-initialised')) {
+		    return
+		  }
+
+		  this.container.data('moj-multi-select-initialised', true);
+
+		  const idPrefix = options.id_prefix;
+		  let allId = 'checkboxes-all';
+		  if (typeof idPrefix !== 'undefined') {
+		    allId = `${idPrefix}checkboxes-all`;
+		  }
+
+		  this.toggle = $(this.getToggleHtml(allId));
+		  this.toggleButton = this.toggle.find('input');
+		  this.toggleButton.on('click', $.proxy(this, 'onButtonClick'));
+		  this.container.append(this.toggle);
+		  this.checkboxes = $(options.checkboxes);
+		  this.checkboxes.on('click', $.proxy(this, 'onCheckboxClick'));
+		  this.checked = options.checked || false;
+		}
+
+		MultiSelect.prototype.getToggleHtml = function (allId) {
+		  let html = '';
+		  html +=
+		    '<div class="govuk-checkboxes__item govuk-checkboxes--small moj-multi-select__checkbox">';
+		  html += `  <input type="checkbox" class="govuk-checkboxes__input" id="${allId}">`;
+		  html += `  <label class="govuk-label govuk-checkboxes__label moj-multi-select__toggle-label" for="${allId}">`;
+		  html += '    <span class="govuk-visually-hidden">Select all</span>';
+		  html += '  </label>';
+		  html += '</div>';
+		  return html
+		};
+
+		MultiSelect.prototype.onButtonClick = function (e) {
+		  if (this.checked) {
+		    this.uncheckAll();
+		    this.toggleButton[0].checked = false;
+		  } else {
+		    this.checkAll();
+		    this.toggleButton[0].checked = true;
+		  }
+		};
+
+		MultiSelect.prototype.checkAll = function () {
+		  this.checkboxes.each(
+		    $.proxy(function (index, el) {
+		      el.checked = true;
+		    }, this)
+		  );
+		  this.checked = true;
+		};
+
+		MultiSelect.prototype.uncheckAll = function () {
+		  this.checkboxes.each(
+		    $.proxy(function (index, el) {
+		      el.checked = false;
+		    }, this)
+		  );
+		  this.checked = false;
+		};
+
+		MultiSelect.prototype.onCheckboxClick = function (e) {
+		  if (!e.target.checked) {
+		    this.toggleButton[0].checked = false;
+		    this.checked = false;
+		  } else {
+		    if (this.checkboxes.filter(':checked').length === this.checkboxes.length) {
+		      this.toggleButton[0].checked = true;
+		      this.checked = true;
+		    }
+		  }
+		};
+
+		multiSelect$1 = { MultiSelect };
+		return multiSelect$1;
+	}
+
+	var multiSelectExports = requireMultiSelect();
+	var multiSelect = /*@__PURE__*/getDefaultExportFromCjs(multiSelectExports);
+
+	return multiSelect;
+
+}));

package/moj/components/notification-badge/_notification-badge.scss

@@ -3,15 +3,15 @@
    ========================================================================== */
 
 .moj-notification-badge {
-    @include govuk-font($size: 16, $weight: "bold");
-    color: govuk-colour("white");
-    display: inline-block;
-    min-width: 15px;
-    padding: 5px 8px 2px 8px;
-    border-radius: 75px;
-    background-color: govuk-colour("red");
-    font-size: 16px;
-    font-weight: 600;
-    text-align: center;
-    white-space: nowrap;
-}
+  @include govuk-font($size: 16, $weight: "bold");
+  display: inline-block;
+  min-width: 15px;
+  padding: 5px 8px 2px;
+  border-radius: 75px;
+  color: govuk-colour("white");
+  background-color: govuk-colour("red");
+  font-size: 16px;
+  font-weight: 600;
+  text-align: center;
+  white-space: nowrap;
+}

package/moj/components/organisation-switcher/_organisation-switcher.scss

@@ -13,8 +13,8 @@
 .moj-organisation-nav__title {
   @include govuk-font($size: 19, $weight: "bold");
   @include govuk-media-query($from: tablet) {
-    float: left;
     width: 75%;
+    float: left;
   }
 }
 

package/moj/components/page-header-actions/_page-header-actions.scss

@@ -1,11 +1,11 @@
 .moj-page-header-actions {
   display: flex;
+  min-height: govuk-spacing(7); // Match button height
+  margin-bottom: govuk-spacing(7);
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
   gap: govuk-spacing(2);
-  margin-bottom: govuk-spacing(7);
-  min-height: govuk-spacing(7); // Match button height
 }
 
 .moj-page-header-actions__title {
@@ -18,6 +18,7 @@
   .moj-button-group {
     margin-bottom: 0;
   }
+
   .govuk-button {
     margin-bottom: 0;
   }

package/moj/components/pagination/_pagination.scss

@@ -2,10 +2,10 @@
   // text-align: center;
 
   @include govuk-media-query($from: desktop) {
+    margin-right: - govuk-spacing(1);
 
     // Alignment adjustments
     margin-left: - govuk-spacing(1);
-    margin-right: - govuk-spacing(1);
 
     // Hide whitespace between elements
     font-size: 0;
@@ -13,19 +13,18 @@
     // Trick to remove the need for floats
     text-align: justify;
 
-    &:after {
-      content: '';
+    &::after {
+      content: "";
       display: inline-block;
       width: 100%;
     }
   }
-
 }
 
 .moj-pagination__list {
-  list-style: none;
   margin: 0;
   padding: 0;
+  list-style: none;
   @include govuk-media-query($from: desktop) {
     display: inline-block;
     margin-bottom: 0;
@@ -36,6 +35,7 @@
 .moj-pagination__results {
   @include govuk-font(19);
   margin-top: 0;
+  padding: govuk-spacing(1);
   @include govuk-media-query($from: desktop) {
     display: inline-block;
     margin-bottom: 0;
@@ -50,49 +50,49 @@
 
 .moj-pagination__item--active,
 .moj-pagination__item--dots {
-  font-weight: bold;
   height: 25px;
   padding: govuk-spacing(1) govuk-spacing(2);
+  font-weight: bold;
   text-align: center;
 }
 
 .moj-pagination__item--dots {
-  padding-left: 0;
   padding-right: 0;
+  padding-left: 0;
 }
 
-.moj-pagination__item--prev .moj-pagination__link:before,
-.moj-pagination__item--next .moj-pagination__link:after {
-    display: inline-block;
-    height: 10px;
-    width: 10px;
-    border-style: solid;
-    color: govuk-colour("black");
-    background: transparent;
-    -webkit-transform: rotate(-45deg);
-    -ms-transform: rotate(-45deg);
-    transform: rotate(-45deg);
-    content: "";
+.moj-pagination__item--prev .moj-pagination__link::before,
+.moj-pagination__item--next .moj-pagination__link::after {
+  content: "";
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  border-style: solid;
+  color: govuk-colour("black");
+  background: transparent;
 }
 
-.moj-pagination__item--prev .moj-pagination__link:before {
-    border-width: 3px 0 0 3px;
-    margin-right: govuk-spacing(1);
+.moj-pagination__item--prev .moj-pagination__link::before {
+  margin-right: govuk-spacing(1);
+  border-width: 3px 0 0 3px;
 }
 
-.moj-pagination__item--next .moj-pagination__link:after {
-    border-width: 0 3px 3px 0;
-    margin-left: govuk-spacing(1);
+.moj-pagination__item--next .moj-pagination__link::after {
+  margin-left: govuk-spacing(1);
+  border-width: 0 3px 3px 0;
 }
 
 .moj-pagination__link {
   @include govuk-link-common;
   @include govuk-link-style-default;
   display: block;
+  min-width: 25px;
   padding: govuk-spacing(1);
   text-align: center;
   text-decoration: none;
-  min-width: 25px;
 
   &:link,
   &:visited {
@@ -106,9 +106,4 @@
   &:focus {
     color: govuk-colour("black");
   }
-
-}
-
-.moj-pagination__results {
-  padding: govuk-spacing(1);
 }

package/moj/components/password-reveal/_password-reveal.scss

@@ -12,5 +12,4 @@
   &__button {
     width: 80px;
   }
-
-}
+}

package/moj/components/password-reveal/password-reveal.js

@@ -1,32 +1,64 @@
-MOJFrontend.PasswordReveal = function(element) {
-  this.el = element;
-  var $el = $(this.el)
-
-  if ($el.data('moj-password-reveal-initialised')) {
-    return
-  }
-
-  $el.data('moj-password-reveal-initialised', true);
-  $el.attr('spellcheck', 'false');
-
-  $el.wrap('<div class="moj-password-reveal"></div>');
-  this.container = $(this.el).parent();
-  this.createButton();
-};
-
-MOJFrontend.PasswordReveal.prototype.createButton = function() {
-  this.button = $('<button type="button" class="govuk-button govuk-button--secondary moj-password-reveal__button">Show <span class="govuk-visually-hidden">password</span></button>');
-  this.container.append(this.button);
-  this.button.on('click', $.proxy(this, 'onButtonClick'));
-};
-
-MOJFrontend.PasswordReveal.prototype.onButtonClick = function() {
-  if (this.el.type === 'password') {
-    this.el.type = 'text';
-    this.button.html('Hide <span class="govuk-visually-hidden">password</span>');
-  } else {
-    this.el.type = 'password';
-    this.button.html('Show <span class="govuk-visually-hidden">password</span>');
-  }
-};
+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+	typeof define === 'function' && define.amd ? define(factory) :
+	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.MOJFrontend = factory());
+})(this, (function () { 'use strict';
 
+	function getDefaultExportFromCjs (x) {
+		return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+	}
+
+	var _global_window_jQuery = window.jQuery;
+
+	var passwordReveal$1;
+	var hasRequiredPasswordReveal;
+
+	function requirePasswordReveal () {
+		if (hasRequiredPasswordReveal) return passwordReveal$1;
+		hasRequiredPasswordReveal = 1;
+		const $ = _global_window_jQuery;
+
+		function PasswordReveal(element) {
+		  this.el = element;
+		  const $el = $(this.el);
+
+		  if ($el.data('moj-password-reveal-initialised')) {
+		    return
+		  }
+
+		  $el.data('moj-password-reveal-initialised', true);
+		  $el.attr('spellcheck', 'false');
+
+		  $el.wrap('<div class="moj-password-reveal"></div>');
+		  this.container = $(this.el).parent();
+		  this.createButton();
+		}
+
+		PasswordReveal.prototype.createButton = function () {
+		  this.button = $(
+		    '<button type="button" class="govuk-button govuk-button--secondary moj-password-reveal__button">Show <span class="govuk-visually-hidden">password</span></button>'
+		  );
+		  this.container.append(this.button);
+		  this.button.on('click', $.proxy(this, 'onButtonClick'));
+		};
+
+		PasswordReveal.prototype.onButtonClick = function () {
+		  if (this.el.type === 'password') {
+		    this.el.type = 'text';
+		    this.button.html('Hide <span class="govuk-visually-hidden">password</span>');
+		  } else {
+		    this.el.type = 'password';
+		    this.button.html('Show <span class="govuk-visually-hidden">password</span>');
+		  }
+		};
+
+		passwordReveal$1 = { PasswordReveal };
+		return passwordReveal$1;
+	}
+
+	var passwordRevealExports = requirePasswordReveal();
+	var passwordReveal = /*@__PURE__*/getDefaultExportFromCjs(passwordRevealExports);
+
+	return passwordReveal;
+
+}));

package/moj/components/primary-navigation/_primary-navigation.scss

@@ -11,12 +11,11 @@
   font-size: 0; // Hide whitespace between elements
   text-align: justify; // Trick to remove the need for floats
 
-  &:after {
-    content: '';
+  &::after {
+    content: "";
     display: inline-block;
     width: 100%;
   }
-
 }
 
 .moj-primary-navigation__nav {
@@ -25,36 +24,34 @@
     display: inline-block;
     vertical-align: middle;
   }
-
 }
 
 .moj-primary-navigation__list {
-  font-size: 0; // Removes white space when using inline-block on child element.
-  list-style: none;
   margin: 0;
   padding: 0;
+  font-size: 0; // Removes white space when using inline-block on child element.
+  list-style: none;
 }
 
 .moj-primary-navigation__item {
   @include govuk-font($size: 19);
   display: inline-block;
-  margin-right: govuk-spacing(4);
   margin-top: 0;
+  margin-right: govuk-spacing(4);
 
   &:last-child {
     margin-right: 0;
   }
-
 }
 
 .moj-primary-navigation__link {
   @include govuk-link-common;
   @include govuk-link-style-default;
   display: block;
-  padding-bottom: 15px;
   padding-top: 15px;
-  text-decoration: none;
+  padding-bottom: 15px;
   font-weight: bold;
+  text-decoration: none;
 
   &:link,
   &:visited {
@@ -66,63 +63,63 @@
   }
 
   &:focus {
-    color: govuk-colour("black"); // Focus colour on yellow should really be black.
     position: relative; // Ensure focus sits above everything else.
     z-index: 1;
+    color: govuk-colour("black"); // Focus colour on yellow should really be black.
     box-shadow: none;
   }
 
-  &:focus:before {
-    background-color: govuk-colour("black");
+  &:focus::before {
     content: "";
     display: block;
-    height: 5px;
-    position: absolute; bottom: 0; left: 0;
+    position: absolute;
+    bottom: 0;
+    left: 0;
     width: 100%;
+    height: 5px;
+    background-color: govuk-colour("black");
   }
 
   &[aria-current] {
-    color: $govuk-link-colour;
     position: relative;
-    text-decoration: none;
+    color: $govuk-link-colour;
     font-weight: bold;
-    &:before {
-      background-color: $govuk-link-colour;
+    text-decoration: none;
+
+    &::before {
       content: "";
       display: block;
-      height: 5px;
-      position: absolute; bottom: 0; left: 0;
+      position: absolute;
+      bottom: 0;
+      left: 0;
       width: 100%;
+      height: 5px;
+      background-color: $govuk-link-colour;
     }
 
     &:hover {
       color: $govuk-link-hover-colour;
 
-      &:before {
+      &::before {
         background-color: $govuk-link-hover-colour;
       }
     }
 
     &:focus {
-      color: govuk-colour("black"); // Focus colour on yellow should really be black.
       position: relative; // Ensure focus sits above everything else.
       border: none;
+      color: govuk-colour("black"); // Focus colour on yellow should really be black.
 
-      &:before {
+      &::before {
         background-color: govuk-colour("black");
       }
-
     }
-
   }
-
 }
 
 .moj-primary-navigation__search {
-
   @include govuk-media-query($from: desktop) {
     display: inline-block;
     vertical-align: middle;
   }
-
 }