@ministryofjustice/frontend 4.0.1 → 5.0.0

package/moj/components/rich-text-editor/rich-text-editor.mjs

@@ -1,158 +1,137 @@
-function RichTextEditor(options) {
-  if (!('contentEditable' in document.documentElement)) {
-    return
+class RichTextEditor {
+  /**
+   * @param {RichTextEditorConfig} options
+   */
+  constructor(options = {}) {
+    const {
+      textarea
+    } = options;
+    if (!textarea || !textarea.parentElement || !(textarea instanceof HTMLTextAreaElement) || !('contentEditable' in document.documentElement)) {
+      return this;
+    }
+    options.toolbar = options.toolbar || {
+      bold: false,
+      italic: false,
+      underline: false,
+      bullets: true,
+      numbers: true
+    };
+    this.textarea = textarea;
+    this.container = this.textarea.parentElement;
+    this.options = options;
+    if (this.container.hasAttribute('data-rich-text-editor-init')) {
+      return this;
+    }
+    this.container.setAttribute('data-rich-text-editor-init', '');
+    this.createToolbar();
+    this.hideDefault();
+    this.configureToolbar();
+    this.keys = {
+      left: 37,
+      right: 39,
+      up: 38,
+      down: 40
+    };
+    this.content.addEventListener('input', this.onEditorInput.bind(this));
+    this.container.querySelector('label').addEventListener('click', this.onLabelClick.bind(this));
+    this.toolbar.addEventListener('keydown', this.onToolbarKeydown.bind(this));
   }
-
-  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
+  onToolbarKeydown(event) {
+    let focusableButton;
+    switch (event.keyCode) {
+      case this.keys.right:
+      case this.keys.down:
+        {
+          focusableButton = this.buttons.find(button => button.getAttribute('tabindex') === '0');
+          const nextButton = focusableButton.nextElementSibling;
+          if (nextButton instanceof HTMLButtonElement) {
+            nextButton.focus();
+            focusableButton.setAttribute('tabindex', '-1');
+            nextButton.setAttribute('tabindex', '0');
+          }
+          break;
+        }
+      case this.keys.left:
+      case this.keys.up:
+        {
+          focusableButton = this.buttons.find(button => button.getAttribute('tabindex') === '0');
+          const previousButton = focusableButton.previousElementSibling;
+          if (previousButton instanceof HTMLButtonElement) {
+            previousButton.focus();
+            focusableButton.setAttribute('tabindex', '-1');
+            previousButton.setAttribute('tabindex', '0');
+          }
+          break;
+        }
+    }
   }
-
-  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
+  getToolbarHtml() {
+    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>';
     }
-    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
+    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.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>';
+  getEnhancedHtml() {
+    return `${this.getToolbarHtml()}<div class="govuk-textarea moj-rich-text-editor__content" contenteditable="true" spellcheck="false"></div>`;
   }
-
-  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>';
+  hideDefault() {
+    this.textarea.classList.add('govuk-visually-hidden');
+    this.textarea.setAttribute('aria-hidden', 'true');
+    this.textarea.setAttribute('tabindex', '-1');
   }
-
-  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>';
+  createToolbar() {
+    this.toolbar = document.createElement('div');
+    this.toolbar.className = 'moj-rich-text-editor';
+    this.toolbar.innerHTML = this.getEnhancedHtml();
+    this.container.append(this.toolbar);
+    this.content = /** @type {HTMLDivElement} */
+    this.container.querySelector('.moj-rich-text-editor__content');
+    this.content.innerHTML = this.$textarea.value;
   }
-
-  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>';
+  configureToolbar() {
+    this.buttons = Array.from(/** @type {NodeListOf<HTMLButtonElement>} */
+    this.container.querySelectorAll('.moj-rich-text-editor__toolbar-button'));
+    this.buttons.forEach((button, index) => {
+      button.setAttribute('tabindex', !index ? '0' : '-1');
+      button.addEventListener('click', this.onButtonClick.bind(this));
+    });
   }
-
-  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>';
+  onButtonClick(event) {
+    if (!(event.currentTarget instanceof HTMLElement)) {
+      return;
+    }
+    document.execCommand(event.currentTarget.getAttribute('data-command'), false, undefined);
   }
-
-  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();
-};
+  getContent() {
+    return this.content.innerHTML;
+  }
+  onEditorInput() {
+    this.updateTextarea();
+  }
+  updateTextarea() {
+    document.execCommand('defaultParagraphSeparator', false, 'p');
+    this.textarea.value = this.getContent();
+  }
+  onLabelClick(event) {
+    event.preventDefault();
+    this.content.focus();
+  }
+}
 
 export { RichTextEditor };
 //# sourceMappingURL=rich-text-editor.mjs.map

package/moj/components/rich-text-editor/rich-text-editor.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"rich-text-editor.mjs","sources":["../../../../src/moj/components/rich-text-editor/rich-text-editor.mjs"],"sourcesContent":["import $ from 'jquery'\n\nexport function RichTextEditor(options) {\n  if (!('contentEditable' in document.documentElement)) {\n    return\n  }\n\n  this.options = options\n  this.options.toolbar = this.options.toolbar || {\n    bold: false,\n    italic: false,\n    underline: false,\n    bullets: true,\n    numbers: true\n  }\n  this.textarea = this.options.textarea\n  this.container = $(this.textarea).parent()\n\n  if (this.container.data('moj-rich-text-editor-initialised')) {\n    return\n  }\n\n  this.container.data('moj-rich-text-editor-initialised', true)\n\n  this.createToolbar()\n  this.hideDefault()\n  this.configureToolbar()\n  this.keys = {\n    left: 37,\n    right: 39,\n    up: 38,\n    down: 40\n  }\n  this.container.on(\n    'click',\n    '.moj-rich-text-editor__toolbar-button',\n    $.proxy(this, 'onButtonClick')\n  )\n  this.container\n    .find('.moj-rich-text-editor__content')\n    .on('input', $.proxy(this, 'onEditorInput'))\n  this.container.find('label').on('click', $.proxy(this, 'onLabelClick'))\n  this.toolbar.on('keydown', $.proxy(this, 'onToolbarKeydown'))\n}\n\nRichTextEditor.prototype.onToolbarKeydown = function (e) {\n  let focusableButton\n  switch (e.keyCode) {\n    case this.keys.right:\n    case this.keys.down: {\n      focusableButton = this.toolbar.find('button[tabindex=0]')\n      const nextButton = focusableButton.next('button')\n      if (nextButton[0]) {\n        nextButton.focus()\n        focusableButton.attr('tabindex', '-1')\n        nextButton.attr('tabindex', '0')\n      }\n      break\n    }\n    case this.keys.left:\n    case this.keys.up: {\n      focusableButton = this.toolbar.find('button[tabindex=0]')\n      const previousButton = focusableButton.prev('button')\n      if (previousButton[0]) {\n        previousButton.focus()\n        focusableButton.attr('tabindex', '-1')\n        previousButton.attr('tabindex', '0')\n      }\n      break\n    }\n  }\n}\n\nRichTextEditor.prototype.getToolbarHtml = function () {\n  let html = ''\n\n  html += '<div class=\"moj-rich-text-editor__toolbar\" role=\"toolbar\">'\n\n  if (this.options.toolbar.bold) {\n    html +=\n      '<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>'\n  }\n\n  if (this.options.toolbar.italic) {\n    html +=\n      '<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>'\n  }\n\n  if (this.options.toolbar.underline) {\n    html +=\n      '<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>'\n  }\n\n  if (this.options.toolbar.bullets) {\n    html +=\n      '<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>'\n  }\n\n  if (this.options.toolbar.numbers) {\n    html +=\n      '<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>'\n  }\n\n  html += '</div>'\n  return html\n}\n\nRichTextEditor.prototype.getEnhancedHtml = function (val) {\n  return `${this.getToolbarHtml()}<div class=\"govuk-textarea moj-rich-text-editor__content\" contenteditable=\"true\" spellcheck=\"false\"></div>`\n}\n\nRichTextEditor.prototype.hideDefault = function () {\n  this.textarea = this.container.find('textarea')\n  this.textarea.addClass('govuk-visually-hidden')\n  this.textarea.attr('aria-hidden', true)\n  this.textarea.attr('tabindex', '-1')\n}\n\nRichTextEditor.prototype.createToolbar = function () {\n  this.toolbar = document.createElement('div')\n  this.toolbar.className = 'moj-rich-text-editor'\n  this.toolbar.innerHTML = this.getEnhancedHtml()\n  this.container.append(this.toolbar)\n  this.toolbar = this.container.find('.moj-rich-text-editor__toolbar')\n  this.container\n    .find('.moj-rich-text-editor__content')\n    .html(this.textarea.val())\n}\n\nRichTextEditor.prototype.configureToolbar = function () {\n  this.buttons = this.container.find('.moj-rich-text-editor__toolbar-button')\n  this.buttons.prop('tabindex', '-1')\n  const firstTab = this.buttons.first()\n  firstTab.prop('tabindex', '0')\n}\n\nRichTextEditor.prototype.onButtonClick = function (e) {\n  document.execCommand($(e.currentTarget).data('command'), false, null)\n}\n\nRichTextEditor.prototype.getContent = function () {\n  return this.container.find('.moj-rich-text-editor__content').html()\n}\n\nRichTextEditor.prototype.onEditorInput = function (e) {\n  this.updateTextarea()\n}\n\nRichTextEditor.prototype.updateTextarea = function () {\n  document.execCommand('defaultParagraphSeparator', false, 'p')\n  this.textarea.val(this.getContent())\n}\n\nRichTextEditor.prototype.onLabelClick = function (e) {\n  e.preventDefault()\n  this.container.find('.moj-rich-text-editor__content').focus()\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"rich-text-editor.mjs","sources":["../../../../src/moj/components/rich-text-editor/rich-text-editor.mjs"],"sourcesContent":["export class RichTextEditor {\n  /**\n   * @param {RichTextEditorConfig} options\n   */\n  constructor(options = {}) {\n    const { textarea } = options\n\n    if (\n      !textarea ||\n      !textarea.parentElement ||\n      !(textarea instanceof HTMLTextAreaElement) ||\n      !('contentEditable' in document.documentElement)\n    ) {\n      return this\n    }\n\n    options.toolbar = options.toolbar || {\n      bold: false,\n      italic: false,\n      underline: false,\n      bullets: true,\n      numbers: true\n    }\n\n    this.textarea = textarea\n    this.container = this.textarea.parentElement\n    this.options = options\n\n    if (this.container.hasAttribute('data-rich-text-editor-init')) {\n      return this\n    }\n\n    this.container.setAttribute('data-rich-text-editor-init', '')\n\n    this.createToolbar()\n    this.hideDefault()\n    this.configureToolbar()\n\n    this.keys = {\n      left: 37,\n      right: 39,\n      up: 38,\n      down: 40\n    }\n\n    this.content.addEventListener('input', this.onEditorInput.bind(this))\n\n    this.container\n      .querySelector('label')\n      .addEventListener('click', this.onLabelClick.bind(this))\n\n    this.toolbar.addEventListener('keydown', this.onToolbarKeydown.bind(this))\n  }\n\n  onToolbarKeydown(event) {\n    let focusableButton\n    switch (event.keyCode) {\n      case this.keys.right:\n      case this.keys.down: {\n        focusableButton = this.buttons.find(\n          (button) => button.getAttribute('tabindex') === '0'\n        )\n        const nextButton = focusableButton.nextElementSibling\n        if (nextButton instanceof HTMLButtonElement) {\n          nextButton.focus()\n          focusableButton.setAttribute('tabindex', '-1')\n          nextButton.setAttribute('tabindex', '0')\n        }\n        break\n      }\n      case this.keys.left:\n      case this.keys.up: {\n        focusableButton = this.buttons.find(\n          (button) => button.getAttribute('tabindex') === '0'\n        )\n        const previousButton = focusableButton.previousElementSibling\n        if (previousButton instanceof HTMLButtonElement) {\n          previousButton.focus()\n          focusableButton.setAttribute('tabindex', '-1')\n          previousButton.setAttribute('tabindex', '0')\n        }\n        break\n      }\n    }\n  }\n\n  getToolbarHtml() {\n    let html = ''\n\n    html += '<div class=\"moj-rich-text-editor__toolbar\" role=\"toolbar\">'\n\n    if (this.options.toolbar.bold) {\n      html +=\n        '<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>'\n    }\n\n    if (this.options.toolbar.italic) {\n      html +=\n        '<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>'\n    }\n\n    if (this.options.toolbar.underline) {\n      html +=\n        '<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>'\n    }\n\n    if (this.options.toolbar.bullets) {\n      html +=\n        '<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>'\n    }\n\n    if (this.options.toolbar.numbers) {\n      html +=\n        '<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>'\n    }\n\n    html += '</div>'\n    return html\n  }\n\n  getEnhancedHtml() {\n    return `${this.getToolbarHtml()}<div class=\"govuk-textarea moj-rich-text-editor__content\" contenteditable=\"true\" spellcheck=\"false\"></div>`\n  }\n\n  hideDefault() {\n    this.textarea.classList.add('govuk-visually-hidden')\n    this.textarea.setAttribute('aria-hidden', 'true')\n    this.textarea.setAttribute('tabindex', '-1')\n  }\n\n  createToolbar() {\n    this.toolbar = document.createElement('div')\n    this.toolbar.className = 'moj-rich-text-editor'\n    this.toolbar.innerHTML = this.getEnhancedHtml()\n    this.container.append(this.toolbar)\n\n    this.content = /** @type {HTMLDivElement} */ (\n      this.container.querySelector('.moj-rich-text-editor__content')\n    )\n\n    this.content.innerHTML = this.$textarea.value\n  }\n\n  configureToolbar() {\n    this.buttons = Array.from(\n      /** @type {NodeListOf<HTMLButtonElement>} */\n      (this.container.querySelectorAll('.moj-rich-text-editor__toolbar-button'))\n    )\n\n    this.buttons.forEach((button, index) => {\n      button.setAttribute('tabindex', !index ? '0' : '-1')\n      button.addEventListener('click', this.onButtonClick.bind(this))\n    })\n  }\n\n  onButtonClick(event) {\n    if (!(event.currentTarget instanceof HTMLElement)) {\n      return\n    }\n\n    document.execCommand(\n      event.currentTarget.getAttribute('data-command'),\n      false,\n      undefined\n    )\n  }\n\n  getContent() {\n    return this.content.innerHTML\n  }\n\n  onEditorInput() {\n    this.updateTextarea()\n  }\n\n  updateTextarea() {\n    document.execCommand('defaultParagraphSeparator', false, 'p')\n    this.textarea.value = this.getContent()\n  }\n\n  onLabelClick(event) {\n    event.preventDefault()\n    this.content.focus()\n  }\n}\n"],"names":["RichTextEditor","constructor","options","textarea","parentElement","HTMLTextAreaElement","document","documentElement","toolbar","bold","italic","underline","bullets","numbers","container","hasAttribute","setAttribute","createToolbar","hideDefault","configureToolbar","keys","left","right","up","down","content","addEventListener","onEditorInput","bind","querySelector","onLabelClick","onToolbarKeydown","event","focusableButton","keyCode","buttons","find","button","getAttribute","nextButton","nextElementSibling","HTMLButtonElement","focus","previousButton","previousElementSibling","getToolbarHtml","html","getEnhancedHtml","classList","add","createElement","className","innerHTML","append","$textarea","value","Array","from","querySelectorAll","forEach","index","onButtonClick","currentTarget","HTMLElement","execCommand","undefined","getContent","updateTextarea","preventDefault"],"mappings":"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"}

package/moj/components/search/_search.scss

@@ -44,3 +44,5 @@
     padding: 0 !important;
   }
 }
+
+/*# sourceMappingURL=_search.scss.map */

package/moj/components/search/_search.scss.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/moj/components/search/_search.scss"],"names":[],"mappings":"AAAA,uCAAuC;;AAEvC;EACE,YAAY,EAAE,UAAU;AAC1B;;AAEA;EACE,qBAAqB;EACrB,aAAa;AACf;;AAEA;EACE,qBAAqB;EACrB,OAAO;EACP,gBAAgB;EAChB,mBAAmB;AACrB;;AAEA;;EAEE,gBAAgB;AAClB;;AAEA;EACE,kBAAkB;EAClB,UAAU;AACZ;;AAEA;EACE,qBAAqB;EACrB,kBAAkB;EAClB,SAAS,EAAE,8DAA8D;EACzE,WAAW;EACX,gBAAgB;EAChB,6BAA6B;EAC7B,sBAAsB;AACxB;;AAEA;EACE,sDAAsD;EACtD,sCAAsC;EACtC;IACE,sDAAsD;IACtD,qBAAqB;EACvB;AACF","file":"_search.scss","sourcesContent":["@use \"../../vendor/govuk-frontend\" as *;\n\n.moj-search {\n  font-size: 0; // Fallback\n}\n\n.moj-search form {\n  align-items: flex-end;\n  display: flex;\n}\n\n.moj-search .govuk-form-group {\n  display: inline-block;\n  flex: 1;\n  margin-bottom: 0;\n  vertical-align: top;\n}\n\n.moj-search__label,\n.moj-search__hint {\n  text-align: left;\n}\n\n.moj-search__input:focus {\n  position: relative;\n  z-index: 1;\n}\n\n.moj-search__button {\n  display: inline-block;\n  position: relative;\n  top: -2px; // Override default gov properties due to active pixel movement\n  width: auto;\n  margin-bottom: 0;\n  margin-left: govuk-spacing(2);\n  vertical-align: bottom;\n}\n\n.moj-search--inline {\n  // stylelint-disable-next-line declaration-no-important\n  padding: govuk-spacing(2) 0 !important;\n  @include govuk-media-query($from: desktop) {\n    // stylelint-disable-next-line declaration-no-important\n    padding: 0 !important;\n  }\n}\n"]}

package/moj/components/search-toggle/{search-toggle.scss → _search-toggle.scss}

@@ -75,3 +75,5 @@
     max-width: 450px;
   }
 }
+
+/*# sourceMappingURL=_search-toggle.scss.map */

package/moj/components/search-toggle/_search-toggle.scss.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/moj/components/search-toggle/_search-toggle.scss"],"names":[],"mappings":"AAAA,uCAAuC;;AAEvC;EACE,qBAAqB;EACrB,iBAAiB;EACjB,gBAAgB;EAChB,oBAAoB;EACpB,eAAe;EACf,YAAY;EACZ,yBAAyB;EACzB,6BAA6B;EAC7B,eAAe;EACf,mCAAmC;EACnC,wBAAwB;EACxB,gBAAgB;EAChB,6CAA6C;;EAE7C;IACE,qBAAqB;IACrB,WAAW;IACX,YAAY;IACZ,6BAA6B;IAC7B,kBAAkB;IAClB,sBAAsB;;IAEtB;MACE,gBAAgB;IAClB;EACF;;EAEA;IACE,kBAAkB;IAClB,UAAU;IACV,aAAa;IACb,+BAA+B;IAC/B,qCAAqC;IACrC;;oCAEgC;EAClC;AACF;;AAEA;EACE,yBAAyB;;EAEzB;IACE,sDAAsD;IACtD,2BAA2B;IAC3B,sDAAsD;IACtD,0BAA0B;EAC5B;AACF;;AAEA,YAAY;AACZ;EACE;IACE,sDAAsD;IACtD,yBAAyB;EAC3B;AACF;;AAEA;EACE,kBAAkB;AACpB;;AAEA;EACE,4CAA4C;;EAE5C;IACE,kBAAkB;IAClB,WAAW;IACX,SAAS,EAAE,mBAAmB;IAC9B,YAAY;IACZ,YAAY;IACZ,gBAAgB;EAClB;AACF","file":"_search-toggle.scss","sourcesContent":["@use \"../../vendor/govuk-frontend\" as *;\n\n.moj-search-toggle__button {\n  display: inline-block;\n  padding-top: 12px;\n  padding-right: 0;\n  padding-bottom: 13px;\n  padding-left: 0;\n  border: none;\n  color: $govuk-link-colour;\n  background-color: transparent;\n  cursor: pointer;\n  -webkit-font-smoothing: antialiased;\n  -webkit-appearance: none;\n  appearance: none;\n  @include govuk-font($size: 19, $weight: bold);\n\n  &__icon {\n    display: inline-block;\n    width: 20px;\n    height: 20px;\n    margin-left: govuk-spacing(2);\n    fill: currentcolor;\n    vertical-align: middle;\n\n    @media screen and (forced-colors: active) {\n      fill: windowText;\n    }\n  }\n\n  &:focus {\n    position: relative;\n    z-index: 1;\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\n.moj-search--toggle {\n  padding: govuk-spacing(3);\n\n  @include govuk-media-query($until: desktop) {\n    // stylelint-disable-next-line declaration-no-important\n    padding-right: 0 !important;\n    // stylelint-disable-next-line declaration-no-important\n    padding-left: 0 !important;\n  }\n}\n\n// JS enabled\n.js-enabled .moj-search--toggle {\n  @include govuk-media-query($until: desktop) {\n    // stylelint-disable-next-line declaration-no-important\n    padding-top: 0 !important;\n  }\n}\n\n.js-enabled .moj-search-toggle {\n  position: relative;\n}\n\n.js-enabled .moj-search-toggle__search {\n  background-color: govuk-colour(\"light-grey\");\n\n  @include govuk-media-query($from: desktop) {\n    position: absolute;\n    z-index: 10;\n    top: 50px; // Height of nav bar\n    right: -15px;\n    width: 450px;\n    max-width: 450px;\n  }\n}\n"]}

package/moj/components/search-toggle/search-toggle.bundle.js

@@ -0,0 +1,54 @@
+(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';
+
+  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')) {
+        return this;
+      }
+      this.container.setAttribute('data-moj-search-toggle-init', '');
+      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);
+      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();
+    }
+    hideMenu() {
+      this.container.classList.add('moj-js-hidden');
+      this.toggleButton.setAttribute('aria-expanded', 'false');
+    }
+    onToggleButtonClick() {
+      if (this.toggleButton.getAttribute('aria-expanded') === 'false') {
+        this.showMenu();
+      } else {
+        this.hideMenu();
+      }
+    }
+    onDocumentClick(event) {
+      if (!this.toggleButtonContainer.contains(event.target) && !this.container.contains(event.target)) {
+        this.hideMenu();
+      }
+    }
+  }
+
+  exports.SearchToggle = SearchToggle;
+
+}));
+//# sourceMappingURL=search-toggle.bundle.js.map

package/moj/components/search-toggle/search-toggle.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-toggle.bundle.js","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":";;;;;;EAAO,MAAMA,YAAY,CAAC;IACxBC,WAAWA,CAACC,OAAO,EAAE;MACnB,IAAI,CAACA,OAAO,GAAGA,OAAO;MACtB,IAAI,CAACC,SAAS,GAAG,IAAI,CAACD,OAAO,CAACE,MAAM,CAACD,SAAS;MAC9C,IAAI,CAACE,qBAAqB,GAAG,IAAI,CAACH,OAAO,CAACI,YAAY,CAACH,SAAS;MAEhE,IAAI,IAAI,CAACA,SAAS,CAACI,YAAY,CAAC,6BAA6B,CAAC,EAAE;EAC9D,MAAA,OAAO,IAAI;EACb;MAEA,IAAI,CAACJ,SAAS,CAACK,YAAY,CAAC,6BAA6B,EAAE,EAAE,CAAC;MAE9D,MAAMC,GAAG,GACP,6pCAA6pC;MAE/pC,IAAI,CAACH,YAAY,GAAGI,QAAQ,CAACC,aAAa,CAAC,QAAQ,CAAC;MACpD,IAAI,CAACL,YAAY,CAACE,YAAY,CAAC,OAAO,EAAE,2BAA2B,CAAC;MACpE,IAAI,CAACF,YAAY,CAACE,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC;MAChD,IAAI,CAACF,YAAY,CAACE,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;MACvD,IAAI,CAACF,YAAY,CAACE,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC;EACxD,IAAA,IAAI,CAACF,YAAY,CAACM,SAAS,GAAG,CAAG,EAAA,IAAI,CAACV,OAAO,CAACI,YAAY,CAACO,IAAI,CAAA,CAAA,EAAIJ,GAAG,CAAE,CAAA;EAExE,IAAA,IAAI,CAACH,YAAY,CAACQ,gBAAgB,CAChC,OAAO,EACP,IAAI,CAACC,mBAAmB,CAACC,IAAI,CAAC,IAAI,CACpC,CAAC;MAED,IAAI,CAACX,qBAAqB,CAACY,MAAM,CAAC,IAAI,CAACX,YAAY,CAAC;EAEpDI,IAAAA,QAAQ,CAACI,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAACI,eAAe,CAACF,IAAI,CAAC,IAAI,CAAC,CAAC;EACnEN,IAAAA,QAAQ,CAACI,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAACI,eAAe,CAACF,IAAI,CAAC,IAAI,CAAC,CAAC;EACvE;EAEAG,EAAAA,QAAQA,GAAG;MACT,IAAI,CAACb,YAAY,CAACE,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;MACvD,IAAI,CAACL,SAAS,CAACiB,SAAS,CAACC,MAAM,CAAC,eAAe,CAAC;MAChD,IAAI,CAAClB,SAAS,CAACmB,aAAa,CAAC,OAAO,CAAC,CAACC,KAAK,EAAE;EAC/C;EAEAC,EAAAA,QAAQA,GAAG;MACT,IAAI,CAACrB,SAAS,CAACiB,SAAS,CAACK,GAAG,CAAC,eAAe,CAAC;MAC7C,IAAI,CAACnB,YAAY,CAACE,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC;EAC1D;EAEAO,EAAAA,mBAAmBA,GAAG;MACpB,IAAI,IAAI,CAACT,YAAY,CAACoB,YAAY,CAAC,eAAe,CAAC,KAAK,OAAO,EAAE;QAC/D,IAAI,CAACP,QAAQ,EAAE;EACjB,KAAC,MAAM;QACL,IAAI,CAACK,QAAQ,EAAE;EACjB;EACF;IAEAN,eAAeA,CAACS,KAAK,EAAE;MACrB,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;QACA,IAAI,CAACL,QAAQ,EAAE;EACjB;EACF;EACF;;;;;;;;"}

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

@@ -0,0 +1,46 @@
+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')) {
+      return this;
+    }
+    this.container.setAttribute('data-moj-search-toggle-init', '');
+    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);
+    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();
+  }
+  hideMenu() {
+    this.container.classList.add('moj-js-hidden');
+    this.toggleButton.setAttribute('aria-expanded', 'false');
+  }
+  onToggleButtonClick() {
+    if (this.toggleButton.getAttribute('aria-expanded') === 'false') {
+      this.showMenu();
+    } else {
+      this.hideMenu();
+    }
+  }
+  onDocumentClick(event) {
+    if (!this.toggleButtonContainer.contains(event.target) && !this.container.contains(event.target)) {
+      this.hideMenu();
+    }
+  }
+}
+
+export { SearchToggle };
+//# sourceMappingURL=search-toggle.bundle.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"search-toggle.bundle.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;;;;"}

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

@@ -1,55 +1,46 @@
-function SearchToggle(options) {
-  this.options = options;
-  this.container = $(this.options.search.container);
-  this.toggleButtonContainer = $(this.options.toggleButton.container);
-
-  if (this.container.data('moj-search-toggle-initialised')) {
-    return
+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')) {
+      return this;
+    }
+    this.container.setAttribute('data-moj-search-toggle-init', '');
+    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);
+    document.addEventListener('click', this.onDocumentClick.bind(this));
+    document.addEventListener('focusin', this.onDocumentClick.bind(this));
   }
-
-  this.container.data('moj-search-toggle-initialised', true);
-
-  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 = $(
-    `<button class="moj-search-toggle__button" type="button" aria-haspopup="true" aria-expanded="false">
-      ${this.options.toggleButton.text} ${svg}
-    </button>`
-  );
-  this.toggleButton.on('click', $.proxy(this, 'onToggleButtonClick'));
-  this.toggleButtonContainer.append(this.toggleButton);
-  $(document).on('click', this.onDocumentClick.bind(this));
-  $(document).on('focusin', this.onDocumentClick.bind(this));
-}
-
-SearchToggle.prototype.showMenu = function () {
-  this.toggleButton.attr('aria-expanded', 'true');
-  this.container.removeClass('moj-js-hidden');
-  this.container.find('input').first().get(0).focus();
-};
-
-SearchToggle.prototype.hideMenu = function () {
-  this.container.addClass('moj-js-hidden');
-  this.toggleButton.attr('aria-expanded', 'false');
-};
-
-SearchToggle.prototype.onToggleButtonClick = function () {
-  if (this.toggleButton.attr('aria-expanded') === 'false') {
-    this.showMenu();
-  } else {
-    this.hideMenu();
+  showMenu() {
+    this.toggleButton.setAttribute('aria-expanded', 'true');
+    this.container.classList.remove('moj-js-hidden');
+    this.container.querySelector('input').focus();
   }
-};
-
-SearchToggle.prototype.onDocumentClick = function (e) {
-  if (
-    !$.contains(this.toggleButtonContainer[0], e.target) &&
-    !$.contains(this.container[0], e.target)
-  ) {
-    this.hideMenu();
+  hideMenu() {
+    this.container.classList.add('moj-js-hidden');
+    this.toggleButton.setAttribute('aria-expanded', 'false');
   }
-};
+  onToggleButtonClick() {
+    if (this.toggleButton.getAttribute('aria-expanded') === 'false') {
+      this.showMenu();
+    } else {
+      this.hideMenu();
+    }
+  }
+  onDocumentClick(event) {
+    if (!this.toggleButtonContainer.contains(event.target) && !this.container.contains(event.target)) {
+      this.hideMenu();
+    }
+  }
+}
 
 export { SearchToggle };
 //# sourceMappingURL=search-toggle.mjs.map