@ministryofjustice/frontend 3.4.0 → 3.5.0

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

@@ -1,75 +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/password-reveal/password-reveal.js

@@ -1,33 +1,64 @@
-MOJFrontend.PasswordReveal = function (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()
-}
-
-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/rich-text-editor/rich-text-editor.js

@@ -1,153 +1,186 @@
-if ('contentEditable' in document.documentElement) {
-  MOJFrontend.RichTextEditor = function (options) {
-    this.options = options
-    this.options.toolbar = this.options.toolbar || {
-      bold: false,
-      italic: false,
-      underline: false,
-      bullets: true,
-      numbers: true
-    }
-    this.textarea = this.options.textarea
-    this.container = $(this.textarea).parent()
-
-    if (this.container.data('moj-rich-text-editor-initialised')) {
-      return
-    }
-
-    this.container.data('moj-rich-text-editor-initialised', true)
-
-    this.createToolbar()
-    this.hideDefault()
-    this.configureToolbar()
-    this.keys = {
-      left: 37,
-      right: 39,
-      up: 38,
-      down: 40
-    }
-    this.container.on(
-      'click',
-      '.moj-rich-text-editor__toolbar-button',
-      $.proxy(this, 'onButtonClick')
-    )
-    this.container
-      .find('.moj-rich-text-editor__content')
-      .on('input', $.proxy(this, 'onEditorInput'))
-    this.container.find('label').on('click', $.proxy(this, 'onLabelClick'))
-    this.toolbar.on('keydown', $.proxy(this, 'onToolbarKeydown'))
-  }
-
-  MOJFrontend.RichTextEditor.prototype.onToolbarKeydown = function (e) {
-    let focusableButton
-    switch (e.keyCode) {
-      case this.keys.right:
-      case this.keys.down: {
-        focusableButton = this.toolbar.find('button[tabindex=0]')
-        const nextButton = focusableButton.next('button')
-        if (nextButton[0]) {
-          nextButton.focus()
-          focusableButton.attr('tabindex', '-1')
-          nextButton.attr('tabindex', '0')
-        }
-        break
-      }
-      case this.keys.left:
-      case this.keys.up: {
-        focusableButton = this.toolbar.find('button[tabindex=0]')
-        const previousButton = focusableButton.prev('button')
-        if (previousButton[0]) {
-          previousButton.focus()
-          focusableButton.attr('tabindex', '-1')
-          previousButton.attr('tabindex', '0')
-        }
-        break
-      }
-    }
-  }
-
-  MOJFrontend.RichTextEditor.prototype.getToolbarHtml = function () {
-    let html = ''
-
-    html += '<div class="moj-rich-text-editor__toolbar" role="toolbar">'
-
-    if (this.options.toolbar.bold) {
-      html +=
-        '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--bold" type="button" data-command="bold"><span class="govuk-visually-hidden">Bold</span></button>'
-    }
-
-    if (this.options.toolbar.italic) {
-      html +=
-        '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--italic" type="button" data-command="italic"><span class="govuk-visually-hidden">Italic</span></button>'
-    }
-
-    if (this.options.toolbar.underline) {
-      html +=
-        '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--underline" type="button" data-command="underline"><span class="govuk-visually-hidden">Underline</span></button>'
-    }
-
-    if (this.options.toolbar.bullets) {
-      html +=
-        '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--unordered-list" type="button" data-command="insertUnorderedList"><span class="govuk-visually-hidden">Unordered list</span></button>'
-    }
-
-    if (this.options.toolbar.numbers) {
-      html +=
-        '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--ordered-list" type="button" data-command="insertOrderedList"><span class="govuk-visually-hidden">Ordered list</span></button>'
-    }
-
-    html += '</div>'
-    return html
-  }
-
-  MOJFrontend.RichTextEditor.prototype.getEnhancedHtml = function (val) {
-    return `${this.getToolbarHtml()}<div class="govuk-textarea moj-rich-text-editor__content" contenteditable="true" spellcheck="false"></div>`
-  }
-
-  MOJFrontend.RichTextEditor.prototype.hideDefault = function () {
-    this.textarea = this.container.find('textarea')
-    this.textarea.addClass('govuk-visually-hidden')
-    this.textarea.attr('aria-hidden', true)
-    this.textarea.attr('tabindex', '-1')
-  }
-
-  MOJFrontend.RichTextEditor.prototype.createToolbar = function () {
-    this.toolbar = document.createElement('div')
-    this.toolbar.className = 'moj-rich-text-editor'
-    this.toolbar.innerHTML = this.getEnhancedHtml()
-    this.container.append(this.toolbar)
-    this.toolbar = this.container.find('.moj-rich-text-editor__toolbar')
-    this.container
-      .find('.moj-rich-text-editor__content')
-      .html(this.textarea.val())
-  }
-
-  MOJFrontend.RichTextEditor.prototype.configureToolbar = function () {
-    this.buttons = this.container.find('.moj-rich-text-editor__toolbar-button')
-    this.buttons.prop('tabindex', '-1')
-    const firstTab = this.buttons.first()
-    firstTab.prop('tabindex', '0')
-  }
-
-  MOJFrontend.RichTextEditor.prototype.onButtonClick = function (e) {
-    document.execCommand($(e.currentTarget).data('command'), false, null)
-  }
-
-  MOJFrontend.RichTextEditor.prototype.getContent = function () {
-    return this.container.find('.moj-rich-text-editor__content').html()
-  }
-
-  MOJFrontend.RichTextEditor.prototype.onEditorInput = function (e) {
-    this.updateTextarea()
-  }
-
-  MOJFrontend.RichTextEditor.prototype.updateTextarea = function () {
-    document.execCommand('defaultParagraphSeparator', false, 'p')
-    this.textarea.val(this.getContent())
-  }
-
-  MOJFrontend.RichTextEditor.prototype.onLabelClick = function (e) {
-    e.preventDefault()
-    this.container.find('.moj-rich-text-editor__content').focus()
-  }
-}
+(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 richTextEditor$1;
+	var hasRequiredRichTextEditor;
+
+	function requireRichTextEditor () {
+		if (hasRequiredRichTextEditor) return richTextEditor$1;
+		hasRequiredRichTextEditor = 1;
+		const $ = _global_window_jQuery;
+
+		function RichTextEditor(options) {
+		  if (!('contentEditable' in document.documentElement)) {
+		    return
+		  }
+
+		  this.options = options;
+		  this.options.toolbar = this.options.toolbar || {
+		    bold: false,
+		    italic: false,
+		    underline: false,
+		    bullets: true,
+		    numbers: true
+		  };
+		  this.textarea = this.options.textarea;
+		  this.container = $(this.textarea).parent();
+
+		  if (this.container.data('moj-rich-text-editor-initialised')) {
+		    return
+		  }
+
+		  this.container.data('moj-rich-text-editor-initialised', true);
+
+		  this.createToolbar();
+		  this.hideDefault();
+		  this.configureToolbar();
+		  this.keys = {
+		    left: 37,
+		    right: 39,
+		    up: 38,
+		    down: 40
+		  };
+		  this.container.on(
+		    'click',
+		    '.moj-rich-text-editor__toolbar-button',
+		    $.proxy(this, 'onButtonClick')
+		  );
+		  this.container
+		    .find('.moj-rich-text-editor__content')
+		    .on('input', $.proxy(this, 'onEditorInput'));
+		  this.container.find('label').on('click', $.proxy(this, 'onLabelClick'));
+		  this.toolbar.on('keydown', $.proxy(this, 'onToolbarKeydown'));
+		}
+
+		RichTextEditor.prototype.onToolbarKeydown = function (e) {
+		  let focusableButton;
+		  switch (e.keyCode) {
+		    case this.keys.right:
+		    case this.keys.down: {
+		      focusableButton = this.toolbar.find('button[tabindex=0]');
+		      const nextButton = focusableButton.next('button');
+		      if (nextButton[0]) {
+		        nextButton.focus();
+		        focusableButton.attr('tabindex', '-1');
+		        nextButton.attr('tabindex', '0');
+		      }
+		      break
+		    }
+		    case this.keys.left:
+		    case this.keys.up: {
+		      focusableButton = this.toolbar.find('button[tabindex=0]');
+		      const previousButton = focusableButton.prev('button');
+		      if (previousButton[0]) {
+		        previousButton.focus();
+		        focusableButton.attr('tabindex', '-1');
+		        previousButton.attr('tabindex', '0');
+		      }
+		      break
+		    }
+		  }
+		};
+
+		RichTextEditor.prototype.getToolbarHtml = function () {
+		  let html = '';
+
+		  html += '<div class="moj-rich-text-editor__toolbar" role="toolbar">';
+
+		  if (this.options.toolbar.bold) {
+		    html +=
+		      '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--bold" type="button" data-command="bold"><span class="govuk-visually-hidden">Bold</span></button>';
+		  }
+
+		  if (this.options.toolbar.italic) {
+		    html +=
+		      '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--italic" type="button" data-command="italic"><span class="govuk-visually-hidden">Italic</span></button>';
+		  }
+
+		  if (this.options.toolbar.underline) {
+		    html +=
+		      '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--underline" type="button" data-command="underline"><span class="govuk-visually-hidden">Underline</span></button>';
+		  }
+
+		  if (this.options.toolbar.bullets) {
+		    html +=
+		      '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--unordered-list" type="button" data-command="insertUnorderedList"><span class="govuk-visually-hidden">Unordered list</span></button>';
+		  }
+
+		  if (this.options.toolbar.numbers) {
+		    html +=
+		      '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--ordered-list" type="button" data-command="insertOrderedList"><span class="govuk-visually-hidden">Ordered list</span></button>';
+		  }
+
+		  html += '</div>';
+		  return html
+		};
+
+		RichTextEditor.prototype.getEnhancedHtml = function (val) {
+		  return `${this.getToolbarHtml()}<div class="govuk-textarea moj-rich-text-editor__content" contenteditable="true" spellcheck="false"></div>`
+		};
+
+		RichTextEditor.prototype.hideDefault = function () {
+		  this.textarea = this.container.find('textarea');
+		  this.textarea.addClass('govuk-visually-hidden');
+		  this.textarea.attr('aria-hidden', true);
+		  this.textarea.attr('tabindex', '-1');
+		};
+
+		RichTextEditor.prototype.createToolbar = function () {
+		  this.toolbar = document.createElement('div');
+		  this.toolbar.className = 'moj-rich-text-editor';
+		  this.toolbar.innerHTML = this.getEnhancedHtml();
+		  this.container.append(this.toolbar);
+		  this.toolbar = this.container.find('.moj-rich-text-editor__toolbar');
+		  this.container
+		    .find('.moj-rich-text-editor__content')
+		    .html(this.textarea.val());
+		};
+
+		RichTextEditor.prototype.configureToolbar = function () {
+		  this.buttons = this.container.find('.moj-rich-text-editor__toolbar-button');
+		  this.buttons.prop('tabindex', '-1');
+		  const firstTab = this.buttons.first();
+		  firstTab.prop('tabindex', '0');
+		};
+
+		RichTextEditor.prototype.onButtonClick = function (e) {
+		  document.execCommand($(e.currentTarget).data('command'), false, null);
+		};
+
+		RichTextEditor.prototype.getContent = function () {
+		  return this.container.find('.moj-rich-text-editor__content').html()
+		};
+
+		RichTextEditor.prototype.onEditorInput = function (e) {
+		  this.updateTextarea();
+		};
+
+		RichTextEditor.prototype.updateTextarea = function () {
+		  document.execCommand('defaultParagraphSeparator', false, 'p');
+		  this.textarea.val(this.getContent());
+		};
+
+		RichTextEditor.prototype.onLabelClick = function (e) {
+		  e.preventDefault();
+		  this.container.find('.moj-rich-text-editor__content').focus();
+		};
+
+		richTextEditor$1 = { RichTextEditor };
+		return richTextEditor$1;
+	}
+
+	var richTextEditorExports = requireRichTextEditor();
+	var richTextEditor = /*@__PURE__*/getDefaultExportFromCjs(richTextEditorExports);
+
+	return richTextEditor;
+
+}));