@ministryofjustice/frontend 3.4.0 → 3.6.0

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

@@ -1,153 +1,165 @@
-if ('contentEditable' in document.documentElement) {
-  MOJFrontend.RichTextEditor = function (options) {
-    this.options = options
+(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';
+
+  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()
+    };
+    this.textarea = this.options.textarea;
+    this.container = window.jQuery(this.textarea).parent();
 
     if (this.container.data('moj-rich-text-editor-initialised')) {
       return
     }
 
-    this.container.data('moj-rich-text-editor-initialised', true)
+    this.container.data('moj-rich-text-editor-initialised', true);
 
-    this.createToolbar()
-    this.hideDefault()
-    this.configureToolbar()
+    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')
-    )
+      window.jQuery.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'))
+      .on('input', window.jQuery.proxy(this, 'onEditorInput'));
+    this.container.find('label').on('click', window.jQuery.proxy(this, 'onLabelClick'));
+    this.toolbar.on('keydown', window.jQuery.proxy(this, 'onToolbarKeydown'));
   }
 
-  MOJFrontend.RichTextEditor.prototype.onToolbarKeydown = function (e) {
-    let focusableButton
+  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')
+        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')
+          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')
+        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')
+          previousButton.focus();
+          focusableButton.attr('tabindex', '-1');
+          previousButton.attr('tabindex', '0');
         }
         break
       }
     }
-  }
+  };
 
-  MOJFrontend.RichTextEditor.prototype.getToolbarHtml = function () {
-    let html = ''
+  RichTextEditor.prototype.getToolbarHtml = function () {
+    let html = '';
 
-    html += '<div class="moj-rich-text-editor__toolbar" role="toolbar">'
+    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>'
+        '<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>'
+        '<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>'
+        '<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>'
+        '<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>'
+        '<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>'
+    html += '</div>';
     return html
-  }
+  };
 
-  MOJFrontend.RichTextEditor.prototype.getEnhancedHtml = function (val) {
+  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')
+  };
+
+  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())
-  }
+      .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')
-  }
+  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)
-  }
+  RichTextEditor.prototype.onButtonClick = function (e) {
+    document.execCommand(window.jQuery(e.currentTarget).data('command'), false, null);
+  };
 
-  MOJFrontend.RichTextEditor.prototype.getContent = function () {
+  RichTextEditor.prototype.getContent = function () {
     return this.container.find('.moj-rich-text-editor__content').html()
-  }
+  };
 
-  MOJFrontend.RichTextEditor.prototype.onEditorInput = function (e) {
-    this.updateTextarea()
-  }
+  RichTextEditor.prototype.onEditorInput = function (e) {
+    this.updateTextarea();
+  };
 
-  MOJFrontend.RichTextEditor.prototype.updateTextarea = function () {
-    document.execCommand('defaultParagraphSeparator', false, 'p')
-    this.textarea.val(this.getContent())
-  }
+  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()
-  }
-}
+  RichTextEditor.prototype.onLabelClick = function (e) {
+    e.preventDefault();
+    this.container.find('.moj-rich-text-editor__content').focus();
+  };
+
+  exports.RichTextEditor = RichTextEditor;
+
+}));

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

@@ -0,0 +1,157 @@
+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 = window.jQuery(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',
+    window.jQuery.proxy(this, 'onButtonClick')
+  );
+  this.container
+    .find('.moj-rich-text-editor__content')
+    .on('input', window.jQuery.proxy(this, 'onEditorInput'));
+  this.container.find('label').on('click', window.jQuery.proxy(this, 'onLabelClick'));
+  this.toolbar.on('keydown', window.jQuery.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(window.jQuery(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();
+};
+
+export { RichTextEditor };

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

@@ -1,52 +1,62 @@
-MOJFrontend.SearchToggle = function (options) {
-  this.options = options
-  this.container = $(this.options.search.container)
-  this.toggleButtonContainer = $(this.options.toggleButton.container)
+(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';
 
-  if (this.container.data('moj-search-toggle-initialised')) {
-    return
-  }
+  function SearchToggle(options) {
+    this.options = options;
+    this.container = window.jQuery(this.options.search.container);
+    this.toggleButtonContainer = window.jQuery(this.options.toggleButton.container);
+
+    if (this.container.data('moj-search-toggle-initialised')) {
+      return
+    }
 
-  this.container.data('moj-search-toggle-initialised', true)
+    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>'
+    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.toggleButton = window.jQuery(
+      `<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))
-}
-
-MOJFrontend.SearchToggle.prototype.showMenu = function () {
-  this.toggleButton.attr('aria-expanded', 'true')
-  this.container.removeClass('moj-js-hidden')
-  this.container.find('input').first().get(0).focus()
-}
-
-MOJFrontend.SearchToggle.prototype.hideMenu = function () {
-  this.container.addClass('moj-js-hidden')
-  this.toggleButton.attr('aria-expanded', 'false')
-}
-
-MOJFrontend.SearchToggle.prototype.onToggleButtonClick = function () {
-  if (this.toggleButton.attr('aria-expanded') === 'false') {
-    this.showMenu()
-  } else {
-    this.hideMenu()
+    );
+    this.toggleButton.on('click', window.jQuery.proxy(this, 'onToggleButtonClick'));
+    this.toggleButtonContainer.append(this.toggleButton);
+    window.jQuery(document).on('click', this.onDocumentClick.bind(this));
+    window.jQuery(document).on('focusin', this.onDocumentClick.bind(this));
   }
-}
-
-MOJFrontend.SearchToggle.prototype.onDocumentClick = function (e) {
-  if (
-    !$.contains(this.toggleButtonContainer[0], e.target) &&
-    !$.contains(this.container[0], e.target)
-  ) {
-    this.hideMenu()
-  }
-}
+
+  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();
+    }
+  };
+
+  SearchToggle.prototype.onDocumentClick = function (e) {
+    if (
+      !window.jQuery.contains(this.toggleButtonContainer[0], e.target) &&
+      !window.jQuery.contains(this.container[0], e.target)
+    ) {
+      this.hideMenu();
+    }
+  };
+
+  exports.SearchToggle = SearchToggle;
+
+}));

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

@@ -0,0 +1,54 @@
+function SearchToggle(options) {
+  this.options = options;
+  this.container = window.jQuery(this.options.search.container);
+  this.toggleButtonContainer = window.jQuery(this.options.toggleButton.container);
+
+  if (this.container.data('moj-search-toggle-initialised')) {
+    return
+  }
+
+  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 = window.jQuery(
+    `<button class="moj-search-toggle__button" type="button" aria-haspopup="true" aria-expanded="false">
+      ${this.options.toggleButton.text} ${svg}
+    </button>`
+  );
+  this.toggleButton.on('click', window.jQuery.proxy(this, 'onToggleButtonClick'));
+  this.toggleButtonContainer.append(this.toggleButton);
+  window.jQuery(document).on('click', this.onDocumentClick.bind(this));
+  window.jQuery(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();
+  }
+};
+
+SearchToggle.prototype.onDocumentClick = function (e) {
+  if (
+    !window.jQuery.contains(this.toggleButtonContainer[0], e.target) &&
+    !window.jQuery.contains(this.container[0], e.target)
+  ) {
+    this.hideMenu();
+  }
+};
+
+export { SearchToggle };