npm - @ministryofjustice/frontend - Versions diffs - 4.0.1 → 5.1.0 - Mend

@ministryofjustice/frontend 4.0.1 → 5.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (256) hide show

package/moj/components/add-another/add-another.bundle.mjs ADDED Viewed

@@ -0,0 +1,271 @@
+function isInitialised($root, moduleName) {
+  return $root instanceof HTMLElement && $root.hasAttribute(`data-${moduleName}-init`);
+}
+/**
+ * Checks if GOV.UK Frontend is supported on this page
+ *
+ * Some browsers will load and run our JavaScript but GOV.UK Frontend
+ * won't be supported.
+ *
+ * @param {HTMLElement | null} [$scope] - (internal) `<body>` HTML element checked for browser support
+ * @returns {boolean} Whether GOV.UK Frontend is supported on this page
+ */
+function isSupported($scope = document.body) {
+  if (!$scope) {
+    return false;
+  }
+  return $scope.classList.contains('govuk-frontend-supported');
+}
+function formatErrorMessage(Component, message) {
+  return `${Component.moduleName}: ${message}`;
+}
+class GOVUKFrontendError extends Error {
+  constructor(...args) {
+    super(...args);
+    this.name = 'GOVUKFrontendError';
+  }
+}
+class SupportError extends GOVUKFrontendError {
+  /**
+   * Checks if GOV.UK Frontend is supported on this page
+   *
+   * @param {HTMLElement | null} [$scope] - HTML element `<body>` checked for browser support
+   */
+  constructor($scope = document.body) {
+    const supportMessage = 'noModule' in HTMLScriptElement.prototype ? 'GOV.UK Frontend initialised without `<body class="govuk-frontend-supported">` from template `<script>` snippet' : 'GOV.UK Frontend is not supported in this browser';
+    super($scope ? supportMessage : 'GOV.UK Frontend initialised without `<script type="module">`');
+    this.name = 'SupportError';
+  }
+}
+class ElementError extends GOVUKFrontendError {
+  constructor(messageOrOptions) {
+    let message = typeof messageOrOptions === 'string' ? messageOrOptions : '';
+    if (typeof messageOrOptions === 'object') {
+      const {
+        component,
+        identifier,
+        element,
+        expectedType
+      } = messageOrOptions;
+      message = identifier;
+      message += element ? ` is not of type ${expectedType != null ? expectedType : 'HTMLElement'}` : ' not found';
+      message = formatErrorMessage(component, message);
+    }
+    super(message);
+    this.name = 'ElementError';
+  }
+}
+class InitError extends GOVUKFrontendError {
+  constructor(componentOrMessage) {
+    const message = typeof componentOrMessage === 'string' ? componentOrMessage : formatErrorMessage(componentOrMessage, `Root element (\`$root\`) already initialised`);
+    super(message);
+    this.name = 'InitError';
+  }
+}
+class Component {
+  /**
+   * Returns the root element of the component
+   *
+   * @protected
+   * @returns {RootElementType} - the root element of component
+   */
+  get $root() {
+    return this._$root;
+  }
+  constructor($root) {
+    this._$root = void 0;
+    const childConstructor = this.constructor;
+    if (typeof childConstructor.moduleName !== 'string') {
+      throw new InitError(`\`moduleName\` not defined in component`);
+    }
+    if (!($root instanceof childConstructor.elementType)) {
+      throw new ElementError({
+        element: $root,
+        component: childConstructor,
+        identifier: 'Root element (`$root`)',
+        expectedType: childConstructor.elementType.name
+      });
+    } else {
+      this._$root = $root;
+    }
+    childConstructor.checkSupport();
+    this.checkInitialised();
+    const moduleName = childConstructor.moduleName;
+    this.$root.setAttribute(`data-${moduleName}-init`, '');
+  }
+  checkInitialised() {
+    const constructor = this.constructor;
+    const moduleName = constructor.moduleName;
+    if (moduleName && isInitialised(this.$root, moduleName)) {
+      throw new InitError(constructor);
+    }
+  }
+  static checkSupport() {
+    if (!isSupported()) {
+      throw new SupportError();
+    }
+  }
+}
+/**
+ * @typedef ChildClass
+ * @property {string} moduleName - The module name that'll be looked for in the DOM when initialising the component
+ */
+/**
+ * @typedef {typeof Component & ChildClass} ChildClassConstructor
+ */
+Component.elementType = HTMLElement;
+class AddAnother extends Component {
+  /**
+   * @param {Element | null} $root - HTML element to use for add another
+   */
+  constructor($root) {
+    super($root);
+    this.$root.addEventListener('click', this.onRemoveButtonClick.bind(this));
+    this.$root.addEventListener('click', this.onAddButtonClick.bind(this));
+    const $buttons = this.$root.querySelectorAll('.moj-add-another__add-button, moj-add-another__remove-button');
+    $buttons.forEach($button => {
+      if (!($button instanceof HTMLButtonElement)) {
+        return;
+      }
+      $button.type = 'button';
+    });
+  }
+  /**
+   * @param {MouseEvent} event - Click event
+   */
+  onAddButtonClick(event) {
+    const $button = event.target;
+    if (!$button || !($button instanceof HTMLButtonElement) || !$button.classList.contains('moj-add-another__add-button')) {
+      return;
+    }
+    const $items = this.getItems();
+    const $item = this.getNewItem();
+    if (!$item || !($item instanceof HTMLElement)) {
+      return;
+    }
+    this.updateAttributes($item, $items.length);
+    this.resetItem($item);
+    const $firstItem = $items[0];
+    if (!this.hasRemoveButton($firstItem)) {
+      this.createRemoveButton($firstItem);
+    }
+    $items[$items.length - 1].after($item);
+    const $input = $item.querySelector('input, textarea, select');
+    if ($input && $input instanceof HTMLInputElement) {
+      $input.focus();
+    }
+  }
+  /**
+   * @param {HTMLElement} $item - Add another item
+   */
+  hasRemoveButton($item) {
+    return $item.querySelectorAll('.moj-add-another__remove-button').length;
+  }
+  getItems() {
+    if (!this.$root) {
+      return [];
+    }
+    const $items = Array.from(this.$root.querySelectorAll('.moj-add-another__item'));
+    return $items.filter(item => item instanceof HTMLElement);
+  }
+  getNewItem() {
+    const $items = this.getItems();
+    const $item = $items[0].cloneNode(true);
+    if (!$item || !($item instanceof HTMLElement)) {
+      return;
+    }
+    if (!this.hasRemoveButton($item)) {
+      this.createRemoveButton($item);
+    }
+    return $item;
+  }
+  /**
+   * @param {HTMLElement} $item - Add another item
+   * @param {number} index - Add another item index
+   */
+  updateAttributes($item, index) {
+    $item.querySelectorAll('[data-name]').forEach($input => {
+      if (!($input instanceof HTMLInputElement)) {
+        return;
+      }
+      const name = $input.getAttribute('data-name') || '';
+      const id = $input.getAttribute('data-id') || '';
+      const originalId = $input.id;
+      $input.name = name.replace(/%index%/, `${index}`);
+      $input.id = id.replace(/%index%/, `${index}`);
+      const $label = $input.parentElement.querySelector('label') || $input.closest('label') || $item.querySelector(`[for="${originalId}"]`);
+      if ($label && $label instanceof HTMLLabelElement) {
+        $label.htmlFor = $input.id;
+      }
+    });
+  }
+  /**
+   * @param {HTMLElement} $item - Add another item
+   */
+  createRemoveButton($item) {
+    const $button = document.createElement('button');
+    $button.type = 'button';
+    $button.classList.add('govuk-button', 'govuk-button--secondary', 'moj-add-another__remove-button');
+    $button.textContent = 'Remove';
+    $item.append($button);
+  }
+  /**
+   * @param {HTMLElement} $item - Add another item
+   */
+  resetItem($item) {
+    $item.querySelectorAll('[data-name], [data-id]').forEach($input => {
+      if (!($input instanceof HTMLInputElement)) {
+        return;
+      }
+      if ($input.type === 'checkbox' || $input.type === 'radio') {
+        $input.checked = false;
+      } else {
+        $input.value = '';
+      }
+    });
+  }
+  /**
+   * @param {MouseEvent} event - Click event
+   */
+  onRemoveButtonClick(event) {
+    const $button = event.target;
+    if (!$button || !($button instanceof HTMLButtonElement) || !$button.classList.contains('moj-add-another__remove-button')) {
+      return;
+    }
+    $button.closest('.moj-add-another__item').remove();
+    const $items = this.getItems();
+    if ($items.length === 1) {
+      $items[0].querySelector('.moj-add-another__remove-button').remove();
+    }
+    $items.forEach(($item, index) => {
+      this.updateAttributes($item, index);
+    });
+    this.focusHeading();
+  }
+  focusHeading() {
+    const $heading = this.$root.querySelector('.moj-add-another__heading');
+    if ($heading && $heading instanceof HTMLElement) {
+      $heading.focus();
+    }
+  }
+  /**
+   * Name for the component used when initialising using data-module attributes.
+   */
+}
+AddAnother.moduleName = 'moj-add-another';
+export { AddAnother };
+//# sourceMappingURL=add-another.bundle.mjs.map

package/moj/components/add-another/add-another.bundle.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"add-another.bundle.mjs","sources":["../../../../node_modules/govuk-frontend/dist/govuk/common/index.mjs","../../../../node_modules/govuk-frontend/dist/govuk/errors/index.mjs","../../../../node_modules/govuk-frontend/dist/govuk/component.mjs","../../../../src/moj/components/add-another/add-another.mjs"],"sourcesContent":["function getFragmentFromUrl(url) {\n if (!url.includes('#')) {\n return undefined;\n }\n return url.split('#').pop();\n}\nfunction getBreakpoint(name) {\n const property = `--govuk-frontend-breakpoint-${name}`;\n const value = window.getComputedStyle(document.documentElement).getPropertyValue(property);\n return {\n property,\n value: value || undefined\n };\n}\nfunction setFocus($element, options = {}) {\n var _options$onBeforeFocu;\n const isFocusable = $element.getAttribute('tabindex');\n if (!isFocusable) {\n $element.setAttribute('tabindex', '-1');\n }\n function onFocus() {\n $element.addEventListener('blur', onBlur, {\n once: true\n });\n }\n function onBlur() {\n var _options$onBlur;\n (_options$onBlur = options.onBlur) == null || _options$onBlur.call($element);\n if (!isFocusable) {\n $element.removeAttribute('tabindex');\n }\n }\n $element.addEventListener('focus', onFocus, {\n once: true\n });\n (_options$onBeforeFocu = options.onBeforeFocus) == null || _options$onBeforeFocu.call($element);\n $element.focus();\n}\nfunction isInitialised($root, moduleName) {\n return $root instanceof HTMLElement && $root.hasAttribute(`data-${moduleName}-init`);\n}\n\n/**\n * Checks if GOV.UK Frontend is supported on this page\n *\n * Some browsers will load and run our JavaScript but GOV.UK Frontend\n * won't be supported.\n *\n * @param {HTMLElement | null} [$scope] - (internal) `<body>` HTML element checked for browser support\n * @returns {boolean} Whether GOV.UK Frontend is supported on this page\n */\nfunction isSupported($scope = document.body) {\n if (!$scope) {\n return false;\n }\n return $scope.classList.contains('govuk-frontend-supported');\n}\nfunction isArray(option) {\n return Array.isArray(option);\n}\nfunction isObject(option) {\n return !!option && typeof option === 'object' && !isArray(option);\n}\nfunction formatErrorMessage(Component, message) {\n return `${Component.moduleName}: ${message}`;\n}\n/**\n * @typedef ComponentWithModuleName\n * @property {string} moduleName - Name of the component\n */\n/**\n * @import { ObjectNested } from './configuration.mjs'\n */\n\nexport { formatErrorMessage, getBreakpoint, getFragmentFromUrl, isInitialised, isObject, isSupported, setFocus };\n//# sourceMappingURL=index.mjs.map\n","import { formatErrorMessage } from '../common/index.mjs';\n\nclass GOVUKFrontendError extends Error {\n constructor(...args) {\n super(...args);\n this.name = 'GOVUKFrontendError';\n }\n}\nclass SupportError extends GOVUKFrontendError {\n /**\n * Checks if GOV.UK Frontend is supported on this page\n *\n * @param {HTMLElement | null} [$scope] - HTML element `<body>` checked for browser support\n */\n constructor($scope = document.body) {\n const supportMessage = 'noModule' in HTMLScriptElement.prototype ? 'GOV.UK Frontend initialised without `<body class=\"govuk-frontend-supported\">` from template `<script>` snippet' : 'GOV.UK Frontend is not supported in this browser';\n super($scope ? supportMessage : 'GOV.UK Frontend initialised without `<script type=\"module\">`');\n this.name = 'SupportError';\n }\n}\nclass ConfigError extends GOVUKFrontendError {\n constructor(...args) {\n super(...args);\n this.name = 'ConfigError';\n }\n}\nclass ElementError extends GOVUKFrontendError {\n constructor(messageOrOptions) {\n let message = typeof messageOrOptions === 'string' ? messageOrOptions : '';\n if (typeof messageOrOptions === 'object') {\n const {\n component,\n identifier,\n element,\n expectedType\n } = messageOrOptions;\n message = identifier;\n message += element ? ` is not of type ${expectedType != null ? expectedType : 'HTMLElement'}` : ' not found';\n message = formatErrorMessage(component, message);\n }\n super(message);\n this.name = 'ElementError';\n }\n}\nclass InitError extends GOVUKFrontendError {\n constructor(componentOrMessage) {\n const message = typeof componentOrMessage === 'string' ? componentOrMessage : formatErrorMessage(componentOrMessage, `Root element (\\`$root\\`) already initialised`);\n super(message);\n this.name = 'InitError';\n }\n}\n/**\n * @import { ComponentWithModuleName } from '../common/index.mjs'\n */\n\nexport { ConfigError, ElementError, GOVUKFrontendError, InitError, SupportError };\n//# sourceMappingURL=index.mjs.map\n","import { isInitialised, isSupported } from './common/index.mjs';\nimport { InitError, ElementError, SupportError } from './errors/index.mjs';\n\nclass Component {\n /**\n * Returns the root element of the component\n *\n * @protected\n * @returns {RootElementType} - the root element of component\n */\n get $root() {\n return this._$root;\n }\n constructor($root) {\n this._$root = void 0;\n const childConstructor = this.constructor;\n if (typeof childConstructor.moduleName !== 'string') {\n throw new InitError(`\\`moduleName\\` not defined in component`);\n }\n if (!($root instanceof childConstructor.elementType)) {\n throw new ElementError({\n element: $root,\n component: childConstructor,\n identifier: 'Root element (`$root`)',\n expectedType: childConstructor.elementType.name\n });\n } else {\n this._$root = $root;\n }\n childConstructor.checkSupport();\n this.checkInitialised();\n const moduleName = childConstructor.moduleName;\n this.$root.setAttribute(`data-${moduleName}-init`, '');\n }\n checkInitialised() {\n const constructor = this.constructor;\n const moduleName = constructor.moduleName;\n if (moduleName && isInitialised(this.$root, moduleName)) {\n throw new InitError(constructor);\n }\n }\n static checkSupport() {\n if (!isSupported()) {\n throw new SupportError();\n }\n }\n}\n\n/**\n * @typedef ChildClass\n * @property {string} moduleName - The module name that'll be looked for in the DOM when initialising the component\n */\n\n/**\n * @typedef {typeof Component & ChildClass} ChildClassConstructor\n */\nComponent.elementType = HTMLElement;\n\nexport { Component };\n//# sourceMappingURL=component.mjs.map\n","import { Component } from 'govuk-frontend'\n\nexport class AddAnother extends Component {\n /**\n * @param {Element | null} $root - HTML element to use for add another\n */\n constructor($root) {\n super($root)\n\n this.$root.addEventListener('click', this.onRemoveButtonClick.bind(this))\n this.$root.addEventListener('click', this.onAddButtonClick.bind(this))\n\n const $buttons = this.$root.querySelectorAll(\n '.moj-add-another__add-button, moj-add-another__remove-button'\n )\n\n $buttons.forEach(($button) => {\n if (!($button instanceof HTMLButtonElement)) {\n return\n }\n\n $button.type = 'button'\n })\n }\n\n /**\n * @param {MouseEvent} event - Click event\n */\n onAddButtonClick(event) {\n const $button = event.target\n\n if (\n !$button ||\n !($button instanceof HTMLButtonElement) ||\n !$button.classList.contains('moj-add-another__add-button')\n ) {\n return\n }\n\n const $items = this.getItems()\n const $item = this.getNewItem()\n\n if (!$item || !($item instanceof HTMLElement)) {\n return\n }\n\n this.updateAttributes($item, $items.length)\n this.resetItem($item)\n\n const $firstItem = $items[0]\n if (!this.hasRemoveButton($firstItem)) {\n this.createRemoveButton($firstItem)\n }\n\n $items[$items.length - 1].after($item)\n\n const $input = $item.querySelector('input, textarea, select')\n if ($input && $input instanceof HTMLInputElement) {\n $input.focus()\n }\n }\n\n /**\n * @param {HTMLElement} $item - Add another item\n */\n hasRemoveButton($item) {\n return $item.querySelectorAll('.moj-add-another__remove-button').length\n }\n\n getItems() {\n if (!this.$root) {\n return []\n }\n\n const $items = Array.from(\n this.$root.querySelectorAll('.moj-add-another__item')\n )\n\n return $items.filter((item) => item instanceof HTMLElement)\n }\n\n getNewItem() {\n const $items = this.getItems()\n const $item = $items[0].cloneNode(true)\n\n if (!$item || !($item instanceof HTMLElement)) {\n return\n }\n\n if (!this.hasRemoveButton($item)) {\n this.createRemoveButton($item)\n }\n\n return $item\n }\n\n /**\n * @param {HTMLElement} $item - Add another item\n * @param {number} index - Add another item index\n */\n updateAttributes($item, index) {\n $item.querySelectorAll('[data-name]').forEach(($input) => {\n if (!($input instanceof HTMLInputElement)) {\n return\n }\n\n const name = $input.getAttribute('data-name') || ''\n const id = $input.getAttribute('data-id') || ''\n const originalId = $input.id\n\n $input.name = name.replace(/%index%/, `${index}`)\n $input.id = id.replace(/%index%/, `${index}`)\n\n const $label =\n $input.parentElement.querySelector('label') ||\n $input.closest('label') ||\n $item.querySelector(`[for=\"${originalId}\"]`)\n\n if ($label && $label instanceof HTMLLabelElement) {\n $label.htmlFor = $input.id\n }\n })\n }\n\n /**\n * @param {HTMLElement} $item - Add another item\n */\n createRemoveButton($item) {\n const $button = document.createElement('button')\n $button.type = 'button'\n\n $button.classList.add(\n 'govuk-button',\n 'govuk-button--secondary',\n 'moj-add-another__remove-button'\n )\n\n $button.textContent = 'Remove'\n\n $item.append($button)\n }\n\n /**\n * @param {HTMLElement} $item - Add another item\n */\n resetItem($item) {\n $item.querySelectorAll('[data-name], [data-id]').forEach(($input) => {\n if (!($input instanceof HTMLInputElement)) {\n return\n }\n\n if ($input.type === 'checkbox' || $input.type === 'radio') {\n $input.checked = false\n } else {\n $input.value = ''\n }\n })\n }\n\n /**\n * @param {MouseEvent} event - Click event\n */\n onRemoveButtonClick(event) {\n const $button = event.target\n\n if (\n !$button ||\n !($button instanceof HTMLButtonElement) ||\n !$button.classList.contains('moj-add-another__remove-button')\n ) {\n return\n }\n\n $button.closest('.moj-add-another__item').remove()\n\n const $items = this.getItems()\n\n if ($items.length === 1) {\n $items[0].querySelector('.moj-add-another__remove-button').remove()\n }\n\n $items.forEach(($item, index) => {\n this.updateAttributes($item, index)\n })\n\n this.focusHeading()\n }\n\n focusHeading() {\n const $heading = this.$root.querySelector('.moj-add-another__heading')\n\n if ($heading && $heading instanceof HTMLElement) {\n $heading.focus()\n }\n }\n\n /**\n * Name for the component used when initialising using data-module attributes.\n */\n static moduleName = 'moj-add-another'\n}\n"],"names":["isInitialised","$root","moduleName","HTMLElement","hasAttribute","isSupported","$scope","document","body","classList","contains","formatErrorMessage","Component","message","GOVUKFrontendError","Error","constructor","args","name","SupportError","supportMessage","HTMLScriptElement","prototype","ElementError","messageOrOptions","component","identifier","element","expectedType","InitError","componentOrMessage","_$root","childConstructor","elementType","checkSupport","checkInitialised","setAttribute","AddAnother","addEventListener","onRemoveButtonClick","bind","onAddButtonClick","$buttons","querySelectorAll","forEach","$button","HTMLButtonElement","type","event","target","$items","getItems","$item","getNewItem","updateAttributes","length","resetItem","$firstItem","hasRemoveButton","createRemoveButton","after","$input","querySelector","HTMLInputElement","focus","Array","from","filter","item","cloneNode","index","getAttribute","id","originalId","replace","$label","parentElement","closest","HTMLLabelElement","htmlFor","createElement","add","textContent","append","checked","value","remove","focusHeading","$heading"],"mappings":"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","x_google_ignoreList":[0,1,2]}

package/moj/components/add-another/add-another.mjs CHANGED Viewed

@@ -1,107 +1,151 @@
-function AddAnother(container) {
-  this.container = $(container);
+import { Component } from 'govuk-frontend';
-  if (this.container.data('moj-add-another-initialised')) {
-    return
+class AddAnother extends Component {
+  /**
+   * @param {Element | null} $root - HTML element to use for add another
+   */
+  constructor($root) {
+    super($root);
+    this.$root.addEventListener('click', this.onRemoveButtonClick.bind(this));
+    this.$root.addEventListener('click', this.onAddButtonClick.bind(this));
+    const $buttons = this.$root.querySelectorAll('.moj-add-another__add-button, moj-add-another__remove-button');
+    $buttons.forEach($button => {
+      if (!($button instanceof HTMLButtonElement)) {
+        return;
+      }
+      $button.type = 'button';
+    });
   }
-  this.container.data('moj-add-another-initialised', true);
-  this.container.on(
-    'click',
-    '.moj-add-another__remove-button',
-    $.proxy(this, 'onRemoveButtonClick')
-  );
-  this.container.on(
-    'click',
-    '.moj-add-another__add-button',
-    $.proxy(this, 'onAddButtonClick')
-  );
-  this.container
-    .find('.moj-add-another__add-button, moj-add-another__remove-button')
-    .prop('type', 'button');
-}
-AddAnother.prototype.onAddButtonClick = function (e) {
-  const item = this.getNewItem();
-  this.updateAttributes(this.getItems().length, item);
-  this.resetItem(item);
-  const firstItem = this.getItems().first();
-  if (!this.hasRemoveButton(firstItem)) {
-    this.createRemoveButton(firstItem);
+  /**
+   * @param {MouseEvent} event - Click event
+   */
+  onAddButtonClick(event) {
+    const $button = event.target;
+    if (!$button || !($button instanceof HTMLButtonElement) || !$button.classList.contains('moj-add-another__add-button')) {
+      return;
+    }
+    const $items = this.getItems();
+    const $item = this.getNewItem();
+    if (!$item || !($item instanceof HTMLElement)) {
+      return;
+    }
+    this.updateAttributes($item, $items.length);
+    this.resetItem($item);
+    const $firstItem = $items[0];
+    if (!this.hasRemoveButton($firstItem)) {
+      this.createRemoveButton($firstItem);
+    }
+    $items[$items.length - 1].after($item);
+    const $input = $item.querySelector('input, textarea, select');
+    if ($input && $input instanceof HTMLInputElement) {
+      $input.focus();
+    }
   }
-  this.getItems().last().after(item);
-  item.find('input, textarea, select').first().focus();
-};
-AddAnother.prototype.hasRemoveButton = function (item) {
-  return item.find('.moj-add-another__remove-button').length
-};
-AddAnother.prototype.getItems = function () {
-  return this.container.find('.moj-add-another__item')
-};
-AddAnother.prototype.getNewItem = function () {
-  const item = this.getItems().first().clone();
-  if (!this.hasRemoveButton(item)) {
-    this.createRemoveButton(item);
+  /**
+   * @param {HTMLElement} $item - Add another item
+   */
+  hasRemoveButton($item) {
+    return $item.querySelectorAll('.moj-add-another__remove-button').length;
+  }
+  getItems() {
+    if (!this.$root) {
+      return [];
+    }
+    const $items = Array.from(this.$root.querySelectorAll('.moj-add-another__item'));
+    return $items.filter(item => item instanceof HTMLElement);
+  }
+  getNewItem() {
+    const $items = this.getItems();
+    const $item = $items[0].cloneNode(true);
+    if (!$item || !($item instanceof HTMLElement)) {
+      return;
+    }
+    if (!this.hasRemoveButton($item)) {
+      this.createRemoveButton($item);
+    }
+    return $item;
   }
-  return item
-};
-AddAnother.prototype.updateAttributes = function (index, item) {
-  item.find('[data-name]').each(function (i, el) {
-    const originalId = el.id;
-    el.name = $(el)
-      .attr('data-name')
-      .replace(/%index%/, index);
-    el.id = $(el)
-      .attr('data-id')
-      .replace(/%index%/, index);
+  /**
+   * @param {HTMLElement} $item - Add another item
+   * @param {number} index - Add another item index
+   */
+  updateAttributes($item, index) {
+    $item.querySelectorAll('[data-name]').forEach($input => {
+      if (!($input instanceof HTMLInputElement)) {
+        return;
+      }
+      const name = $input.getAttribute('data-name') || '';
+      const id = $input.getAttribute('data-id') || '';
+      const originalId = $input.id;
+      $input.name = name.replace(/%index%/, `${index}`);
+      $input.id = id.replace(/%index%/, `${index}`);
+      const $label = $input.parentElement.querySelector('label') || $input.closest('label') || $item.querySelector(`[for="${originalId}"]`);
+      if ($label && $label instanceof HTMLLabelElement) {
+        $label.htmlFor = $input.id;
+      }
+    });
+  }
-    const label =
-      $(el).siblings('label')[0] ||
-      $(el).parents('label')[0] ||
-      item.find(`[for="${originalId}"]`)[0];
-    label.htmlFor = el.id;
-  });
-};
+  /**
+   * @param {HTMLElement} $item - Add another item
+   */
+  createRemoveButton($item) {
+    const $button = document.createElement('button');
+    $button.type = 'button';
+    $button.classList.add('govuk-button', 'govuk-button--secondary', 'moj-add-another__remove-button');
+    $button.textContent = 'Remove';
+    $item.append($button);
+  }
-AddAnother.prototype.createRemoveButton = function (item) {
-  item.append(
-    '<button type="button" class="govuk-button govuk-button--secondary moj-add-another__remove-button">Remove</button>'
-  );
-};
+  /**
+   * @param {HTMLElement} $item - Add another item
+   */
+  resetItem($item) {
+    $item.querySelectorAll('[data-name], [data-id]').forEach($input => {
+      if (!($input instanceof HTMLInputElement)) {
+        return;
+      }
+      if ($input.type === 'checkbox' || $input.type === 'radio') {
+        $input.checked = false;
+      } else {
+        $input.value = '';
+      }
+    });
+  }
-AddAnother.prototype.resetItem = function (item) {
-  item.find('[data-name], [data-id]').each(function (index, el) {
-    if (el.type === 'checkbox' || el.type === 'radio') {
-      el.checked = false;
-    } else {
-      el.value = '';
+  /**
+   * @param {MouseEvent} event - Click event
+   */
+  onRemoveButtonClick(event) {
+    const $button = event.target;
+    if (!$button || !($button instanceof HTMLButtonElement) || !$button.classList.contains('moj-add-another__remove-button')) {
+      return;
+    }
+    $button.closest('.moj-add-another__item').remove();
+    const $items = this.getItems();
+    if ($items.length === 1) {
+      $items[0].querySelector('.moj-add-another__remove-button').remove();
+    }
+    $items.forEach(($item, index) => {
+      this.updateAttributes($item, index);
+    });
+    this.focusHeading();
+  }
+  focusHeading() {
+    const $heading = this.$root.querySelector('.moj-add-another__heading');
+    if ($heading && $heading instanceof HTMLElement) {
+      $heading.focus();
     }
-  });
-};
-AddAnother.prototype.onRemoveButtonClick = function (e) {
-  $(e.currentTarget).parents('.moj-add-another__item').remove();
-  const items = this.getItems();
-  if (items.length === 1) {
-    items.find('.moj-add-another__remove-button').remove();
   }
-  items.each(
-    $.proxy(function (index, el) {
-      this.updateAttributes(index, $(el));
-    }, this)
-  );
-  this.focusHeading();
-};
-AddAnother.prototype.focusHeading = function () {
-  this.container.find('.moj-add-another__heading').get(0).focus();
-};
+  /**
+   * Name for the component used when initialising using data-module attributes.
+   */
+}
+AddAnother.moduleName = 'moj-add-another';
 export { AddAnother };
 //# sourceMappingURL=add-another.mjs.map

package/moj/components/add-another/add-another.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"add-another.mjs","sources":["../../../../src/moj/components/add-another/add-another.mjs"],"sourcesContent":["import $ from 'jquery'\n\nexport function AddAnother(container) {\n this.container = $(container)\n\n if (this.container.data('moj-add-another-initialised')) {\n return\n }\n\n this.container.data('moj-add-another-initialised', true)\n\n this.container.on(\n 'click',\n '.moj-add-another__remove-button',\n $.proxy(this, 'onRemoveButtonClick')\n )\n this.container.on(\n 'click',\n '.moj-add-another__add-button',\n $.proxy(this, 'onAddButtonClick')\n )\n this.container\n .find('.moj-add-another__add-button, moj-add-another__remove-button')\n .prop('type', 'button')\n}\n\nAddAnother.prototype.onAddButtonClick = function (e) {\n const item = this.getNewItem()\n this.updateAttributes(this.getItems().length, item)\n this.resetItem(item)\n const firstItem = this.getItems().first()\n if (!this.hasRemoveButton(firstItem)) {\n this.createRemoveButton(firstItem)\n }\n this.getItems().last().after(item)\n item.find('input, textarea, select').first().focus()\n}\n\nAddAnother.prototype.hasRemoveButton = function (item) {\n return item.find('.moj-add-another__remove-button').length\n}\n\nAddAnother.prototype.getItems = function () {\n return this.container.find('.moj-add-another__item')\n}\n\nAddAnother.prototype.getNewItem = function () {\n const item = this.getItems().first().clone()\n if (!this.hasRemoveButton(item)) {\n this.createRemoveButton(item)\n }\n return item\n}\n\nAddAnother.prototype.updateAttributes = function (index, item) {\n item.find('[data-name]').each(function (i, el) {\n const originalId = el.id\n\n el.name = $(el)\n .attr('data-name')\n .replace(/%index%/, index)\n el.id = $(el)\n .attr('data-id')\n .replace(/%index%/, index)\n\n const label =\n $(el).siblings('label')[0] \|\|\n $(el).parents('label')[0] \|\|\n item.find(`[for=\"${originalId}\"]`)[0]\n label.htmlFor = el.id\n })\n}\n\nAddAnother.prototype.createRemoveButton = function (item) {\n item.append(\n '<button type=\"button\" class=\"govuk-button govuk-button--secondary moj-add-another__remove-button\">Remove</button>'\n )\n}\n\nAddAnother.prototype.resetItem = function (item) {\n item.find('[data-name], [data-id]').each(function (index, el) {\n if (el.type === 'checkbox' \|\| el.type === 'radio') {\n el.checked = false\n } else {\n el.value = ''\n }\n })\n}\n\nAddAnother.prototype.onRemoveButtonClick = function (e) {\n $(e.currentTarget).parents('.moj-add-another__item').remove()\n const items = this.getItems()\n if (items.length === 1) {\n items.find('.moj-add-another__remove-button').remove()\n }\n items.each(\n $.proxy(function (index, el) {\n this.updateAttributes(index, $(el))\n }, this)\n )\n this.focusHeading()\n}\n\nAddAnother.prototype.focusHeading = function () {\n this.container.find('.moj-add-another__heading').get(0).focus()\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"add-another.mjs","sources":["../../../../src/moj/components/add-another/add-another.mjs"],"sourcesContent":["import { Component } from 'govuk-frontend'\n\nexport class AddAnother extends Component {\n /*\n @param {Element \| null} $root - HTML element to use for add another\n /\n constructor($root) {\n super($root)\n\n this.$root.addEventListener('click', this.onRemoveButtonClick.bind(this))\n this.$root.addEventListener('click', this.onAddButtonClick.bind(this))\n\n const $buttons = this.$root.querySelectorAll(\n '.moj-add-another__add-button, moj-add-another__remove-button'\n )\n\n $buttons.forEach(($button) => {\n if (!($button instanceof HTMLButtonElement)) {\n return\n }\n\n $button.type = 'button'\n })\n }\n\n /\n @param {MouseEvent} event - Click event\n /\n onAddButtonClick(event) {\n const $button = event.target\n\n if (\n !$button \|\|\n !($button instanceof HTMLButtonElement) \|\|\n !$button.classList.contains('moj-add-another__add-button')\n ) {\n return\n }\n\n const $items = this.getItems()\n const $item = this.getNewItem()\n\n if (!$item \|\| !($item instanceof HTMLElement)) {\n return\n }\n\n this.updateAttributes($item, $items.length)\n this.resetItem($item)\n\n const $firstItem = $items[0]\n if (!this.hasRemoveButton($firstItem)) {\n this.createRemoveButton($firstItem)\n }\n\n $items[$items.length - 1].after($item)\n\n const $input = $item.querySelector('input, textarea, select')\n if ($input && $input instanceof HTMLInputElement) {\n $input.focus()\n }\n }\n\n /\n @param {HTMLElement} $item - Add another item\n /\n hasRemoveButton($item) {\n return $item.querySelectorAll('.moj-add-another__remove-button').length\n }\n\n getItems() {\n if (!this.$root) {\n return []\n }\n\n const $items = Array.from(\n this.$root.querySelectorAll('.moj-add-another__item')\n )\n\n return $items.filter((item) => item instanceof HTMLElement)\n }\n\n getNewItem() {\n const $items = this.getItems()\n const $item = $items[0].cloneNode(true)\n\n if (!$item \|\| !($item instanceof HTMLElement)) {\n return\n }\n\n if (!this.hasRemoveButton($item)) {\n this.createRemoveButton($item)\n }\n\n return $item\n }\n\n /\n @param {HTMLElement} $item - Add another item\n * @param {number} index - Add another item index\n /\n updateAttributes($item, index) {\n $item.querySelectorAll('[data-name]').forEach(($input) => {\n if (!($input instanceof HTMLInputElement)) {\n return\n }\n\n const name = $input.getAttribute('data-name') \|\| ''\n const id = $input.getAttribute('data-id') \|\| ''\n const originalId = $input.id\n\n $input.name = name.replace(/%index%/, `${index}`)\n $input.id = id.replace(/%index%/, `${index}`)\n\n const $label =\n $input.parentElement.querySelector('label') \|\|\n $input.closest('label') \|\|\n $item.querySelector(`[for=\"${originalId}\"]`)\n\n if ($label && $label instanceof HTMLLabelElement) {\n $label.htmlFor = $input.id\n }\n })\n }\n\n /\n @param {HTMLElement} $item - Add another item\n /\n createRemoveButton($item) {\n const $button = document.createElement('button')\n $button.type = 'button'\n\n $button.classList.add(\n 'govuk-button',\n 'govuk-button--secondary',\n 'moj-add-another__remove-button'\n )\n\n $button.textContent = 'Remove'\n\n $item.append($button)\n }\n\n /\n @param {HTMLElement} $item - Add another item\n /\n resetItem($item) {\n $item.querySelectorAll('[data-name], [data-id]').forEach(($input) => {\n if (!($input instanceof HTMLInputElement)) {\n return\n }\n\n if ($input.type === 'checkbox' \|\| $input.type === 'radio') {\n $input.checked = false\n } else {\n $input.value = ''\n }\n })\n }\n\n /\n @param {MouseEvent} event - Click event\n /\n onRemoveButtonClick(event) {\n const $button = event.target\n\n if (\n !$button \|\|\n !($button instanceof HTMLButtonElement) \|\|\n !$button.classList.contains('moj-add-another__remove-button')\n ) {\n return\n }\n\n $button.closest('.moj-add-another__item').remove()\n\n const $items = this.getItems()\n\n if ($items.length === 1) {\n $items[0].querySelector('.moj-add-another__remove-button').remove()\n }\n\n $items.forEach(($item, index) => {\n this.updateAttributes($item, index)\n })\n\n this.focusHeading()\n }\n\n focusHeading() {\n const $heading = this.$root.querySelector('.moj-add-another__heading')\n\n if ($heading && $heading instanceof HTMLElement) {\n $heading.focus()\n }\n }\n\n /\n Name for the component used when initialising using data-module attributes.\n */\n static moduleName = 'moj-add-another'\n}\n"],"names":["AddAnother","Component","constructor","$root","addEventListener","onRemoveButtonClick","bind","onAddButtonClick","$buttons","querySelectorAll","forEach","$button","HTMLButtonElement","type","event","target","classList","contains","$items","getItems","$item","getNewItem","HTMLElement","updateAttributes","length","resetItem","$firstItem","hasRemoveButton","createRemoveButton","after","$input","querySelector","HTMLInputElement","focus","Array","from","filter","item","cloneNode","index","name","getAttribute","id","originalId","replace","$label","parentElement","closest","HTMLLabelElement","htmlFor","document","createElement","add","textContent","append","checked","value","remove","focusHeading","$heading","moduleName"],"mappings":";;AAEO,MAAMA,UAAU,SAASC,SAAS,CAAC;AACxC;AACF;AACA;EACEC,WAAWA,CAACC,KAAK,EAAE;IACjB,KAAK,CAACA,KAAK,CAAC;AAEZ,IAAA,IAAI,CAACA,KAAK,CAACC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAACC,mBAAmB,CAACC,IAAI,CAAC,IAAI,CAAC,CAAC;AACzE,IAAA,IAAI,CAACH,KAAK,CAACC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAACG,gBAAgB,CAACD,IAAI,CAAC,IAAI,CAAC,CAAC;IAEtE,MAAME,QAAQ,GAAG,IAAI,CAACL,KAAK,CAACM,gBAAgB,CAC1C,8DACF,CAAC;AAEDD,IAAAA,QAAQ,CAACE,OAAO,CAAEC,OAAO,IAAK;AAC5B,MAAA,IAAI,EAAEA,OAAO,YAAYC,iBAAiB,CAAC,EAAE;AAC3C,QAAA;AACF;MAEAD,OAAO,CAACE,IAAI,GAAG,QAAQ;AACzB,KAAC,CAAC;AACJ;;AAEA;AACF;AACA;EACEN,gBAAgBA,CAACO,KAAK,EAAE;AACtB,IAAA,MAAMH,OAAO,GAAGG,KAAK,CAACC,MAAM;AAE5B,IAAA,IACE,CAACJ,OAAO,IACR,EAAEA,OAAO,YAAYC,iBAAiB,CAAC,IACvC,CAACD,OAAO,CAACK,SAAS,CAACC,QAAQ,CAAC,6BAA6B,CAAC,EAC1D;AACA,MAAA;AACF;AAEA,IAAA,MAAMC,MAAM,GAAG,IAAI,CAACC,QAAQ,EAAE;AAC9B,IAAA,MAAMC,KAAK,GAAG,IAAI,CAACC,UAAU,EAAE;IAE/B,IAAI,CAACD,KAAK,IAAI,EAAEA,KAAK,YAAYE,WAAW,CAAC,EAAE;AAC7C,MAAA;AACF;IAEA,IAAI,CAACC,gBAAgB,CAACH,KAAK,EAAEF,MAAM,CAACM,MAAM,CAAC;AAC3C,IAAA,IAAI,CAACC,SAAS,CAACL,KAAK,CAAC;AAErB,IAAA,MAAMM,UAAU,GAAGR,MAAM,CAAC,CAAC,CAAC;AAC5B,IAAA,IAAI,CAAC,IAAI,CAACS,eAAe,CAACD,UAAU,CAAC,EAAE;AACrC,MAAA,IAAI,CAACE,kBAAkB,CAACF,UAAU,CAAC;AACrC;IAEAR,MAAM,CAACA,MAAM,CAACM,MAAM,GAAG,CAAC,CAAC,CAACK,KAAK,CAACT,KAAK,CAAC;AAEtC,IAAA,MAAMU,MAAM,GAAGV,KAAK,CAACW,aAAa,CAAC,yBAAyB,CAAC;AAC7D,IAAA,IAAID,MAAM,IAAIA,MAAM,YAAYE,gBAAgB,EAAE;MAChDF,MAAM,CAACG,KAAK,EAAE;AAChB;AACF;;AAEA;AACF;AACA;EACEN,eAAeA,CAACP,KAAK,EAAE;AACrB,IAAA,OAAOA,KAAK,CAACX,gBAAgB,CAAC,iCAAiC,CAAC,CAACe,MAAM;AACzE;AAEAL,EAAAA,QAAQA,GAAG;AACT,IAAA,IAAI,CAAC,IAAI,CAAChB,KAAK,EAAE;AACf,MAAA,OAAO,EAAE;AACX;AAEA,IAAA,MAAMe,MAAM,GAAGgB,KAAK,CAACC,IAAI,CACvB,IAAI,CAAChC,KAAK,CAACM,gBAAgB,CAAC,wBAAwB,CACtD,CAAC;IAED,OAAOS,MAAM,CAACkB,MAAM,CAAEC,IAAI,IAAKA,IAAI,YAAYf,WAAW,CAAC;AAC7D;AAEAD,EAAAA,UAAUA,GAAG;AACX,IAAA,MAAMH,MAAM,GAAG,IAAI,CAACC,QAAQ,EAAE;IAC9B,MAAMC,KAAK,GAAGF,MAAM,CAAC,CAAC,CAAC,CAACoB,SAAS,CAAC,IAAI,CAAC;IAEvC,IAAI,CAAClB,KAAK,IAAI,EAAEA,KAAK,YAAYE,WAAW,CAAC,EAAE;AAC7C,MAAA;AACF;AAEA,IAAA,IAAI,CAAC,IAAI,CAACK,eAAe,CAACP,KAAK,CAAC,EAAE;AAChC,MAAA,IAAI,CAACQ,kBAAkB,CAACR,KAAK,CAAC;AAChC;AAEA,IAAA,OAAOA,KAAK;AACd;;AAEA;AACF;AACA;AACA;AACEG,EAAAA,gBAAgBA,CAACH,KAAK,EAAEmB,KAAK,EAAE;IAC7BnB,KAAK,CAACX,gBAAgB,CAAC,aAAa,CAAC,CAACC,OAAO,CAAEoB,MAAM,IAAK;AACxD,MAAA,IAAI,EAAEA,MAAM,YAAYE,gBAAgB,CAAC,EAAE;AACzC,QAAA;AACF;MAEA,MAAMQ,IAAI,GAAGV,MAAM,CAACW,YAAY,CAAC,WAAW,CAAC,IAAI,EAAE;MACnD,MAAMC,EAAE,GAAGZ,MAAM,CAACW,YAAY,CAAC,SAAS,CAAC,IAAI,EAAE;AAC/C,MAAA,MAAME,UAAU,GAAGb,MAAM,CAACY,EAAE;AAE5BZ,MAAAA,MAAM,CAACU,IAAI,GAAGA,IAAI,CAACI,OAAO,CAAC,SAAS,EAAE,CAAA,EAAGL,KAAK,CAAA,CAAE,CAAC;AACjDT,MAAAA,MAAM,CAACY,EAAE,GAAGA,EAAE,CAACE,OAAO,CAAC,SAAS,EAAE,CAAA,EAAGL,KAAK,CAAA,CAAE,CAAC;MAE7C,MAAMM,MAAM,GACVf,MAAM,CAACgB,aAAa,CAACf,aAAa,CAAC,OAAO,CAAC,IAC3CD,MAAM,CAACiB,OAAO,CAAC,OAAO,CAAC,IACvB3B,KAAK,CAACW,aAAa,CAAC,CAAA,MAAA,EAASY,UAAU,CAAA,EAAA,CAAI,CAAC;AAE9C,MAAA,IAAIE,MAAM,IAAIA,MAAM,YAAYG,gBAAgB,EAAE;AAChDH,QAAAA,MAAM,CAACI,OAAO,GAAGnB,MAAM,CAACY,EAAE;AAC5B;AACF,KAAC,CAAC;AACJ;;AAEA;AACF;AACA;EACEd,kBAAkBA,CAACR,KAAK,EAAE;AACxB,IAAA,MAAMT,OAAO,GAAGuC,QAAQ,CAACC,aAAa,CAAC,QAAQ,CAAC;IAChDxC,OAAO,CAACE,IAAI,GAAG,QAAQ;IAEvBF,OAAO,CAACK,SAAS,CAACoC,GAAG,CACnB,cAAc,EACd,yBAAyB,EACzB,gCACF,CAAC;IAEDzC,OAAO,CAAC0C,WAAW,GAAG,QAAQ;AAE9BjC,IAAAA,KAAK,CAACkC,MAAM,CAAC3C,OAAO,CAAC;AACvB;;AAEA;AACF;AACA;EACEc,SAASA,CAACL,KAAK,EAAE;IACfA,KAAK,CAACX,gBAAgB,CAAC,wBAAwB,CAAC,CAACC,OAAO,CAAEoB,MAAM,IAAK;AACnE,MAAA,IAAI,EAAEA,MAAM,YAAYE,gBAAgB,CAAC,EAAE;AACzC,QAAA;AACF;MAEA,IAAIF,MAAM,CAACjB,IAAI,KAAK,UAAU,IAAIiB,MAAM,CAACjB,IAAI,KAAK,OAAO,EAAE;QACzDiB,MAAM,CAACyB,OAAO,GAAG,KAAK;AACxB,OAAC,MAAM;QACLzB,MAAM,CAAC0B,KAAK,GAAG,EAAE;AACnB;AACF,KAAC,CAAC;AACJ;;AAEA;AACF;AACA;EACEnD,mBAAmBA,CAACS,KAAK,EAAE;AACzB,IAAA,MAAMH,OAAO,GAAGG,KAAK,CAACC,MAAM;AAE5B,IAAA,IACE,CAACJ,OAAO,IACR,EAAEA,OAAO,YAAYC,iBAAiB,CAAC,IACvC,CAACD,OAAO,CAACK,SAAS,CAACC,QAAQ,CAAC,gCAAgC,CAAC,EAC7D;AACA,MAAA;AACF;IAEAN,OAAO,CAACoC,OAAO,CAAC,wBAAwB,CAAC,CAACU,MAAM,EAAE;AAElD,IAAA,MAAMvC,MAAM,GAAG,IAAI,CAACC,QAAQ,EAAE;AAE9B,IAAA,IAAID,MAAM,CAACM,MAAM,KAAK,CAAC,EAAE;MACvBN,MAAM,CAAC,CAAC,CAAC,CAACa,aAAa,CAAC,iCAAiC,CAAC,CAAC0B,MAAM,EAAE;AACrE;AAEAvC,IAAAA,MAAM,CAACR,OAAO,CAAC,CAACU,KAAK,EAAEmB,KAAK,KAAK;AAC/B,MAAA,IAAI,CAAChB,gBAAgB,CAACH,KAAK,EAAEmB,KAAK,CAAC;AACrC,KAAC,CAAC;IAEF,IAAI,CAACmB,YAAY,EAAE;AACrB;AAEAA,EAAAA,YAAYA,GAAG;IACb,MAAMC,QAAQ,GAAG,IAAI,CAACxD,KAAK,CAAC4B,aAAa,CAAC,2BAA2B,CAAC;AAEtE,IAAA,IAAI4B,QAAQ,IAAIA,QAAQ,YAAYrC,WAAW,EAAE;MAC/CqC,QAAQ,CAAC1B,KAAK,EAAE;AAClB;AACF;;AAEA;AACF;AACA;AAEA;AAtMajC,UAAU,CAqMd4D,UAAU,GAAG,iBAAiB;;;;"}

package/moj/components/alert/_alert.scss CHANGED Viewed

@@ -11,6 +11,7 @@
   border: 5px solid transparent;
   background: govuk-colour("white");
   -ms-grid-columns: min-content fit-content(960px);
+  grid-template-columns: -webkit-min-content fit-content(960px);
   grid-template-columns: min-content fit-content(960px);
   gap: govuk-spacing(2);
   @include govuk-font($size: false);
@@ -22,6 +23,7 @@
 .moj-alert[data-dismissible] {
   @include govuk-media-query($from: tablet) {
+    grid-template-columns: -webkit-min-content fit-content(920px) auto;
     grid-template-columns: min-content fit-content(920px) auto;
   }
 }
@@ -143,3 +145,5 @@
     @include govuk-link-style-error;
   }
 }
+/*# sourceMappingURL=_alert.scss.map */

package/moj/components/alert/_alert.scss.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../src/moj/components/alert/_alert.scss"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,yCAAyC;AACzC,kCAAkC;AAClC,uCAAuC;;AAEvC;EACE,iBAAiB;EACjB,aAAa;EACb,+BAA+B;EAC/B,yBAAyB;EACzB,6BAA6B;EAC7B,iCAAiC;EACjC,gDAAgD;EAChD,6DAAqD;EAArD,qDAAqD;EACrD,qBAAqB;EACrB,iCAAiC;;EAEjC;IACE,qDAAqD;EACvD;AACF;;AAEA;EACE;IACE,kEAA0D;IAA1D,0DAA0D;EAC5D;AACF;;AAEA;EACE,cAAc;EACd,4BAA4B;EAC5B,6BAA6B;EAC7B,kBAAkB;AACpB;;AAEA;EACE,cAAc;EACd,iCAAiC;EACjC,iCAAiC;EACjC,gBAAgB;EAChB,4BAA4B;EAC5B,mCAAmC;;EAEnC;IACE,iCAAiC;EACnC;AACF;;AAEA;EACE,oBAAoB;EACpB,mBAAmB;;EAEnB;IACE,oBAAoB;IACpB,mBAAmB;EACrB;AACF;;AAEA;EACE,8BAA8B;EAC9B,gBAAgB;EAChB,UAAU;EACV,YAAY;EACZ,YAAY;EACZ,6BAA6B;EAC7B,wBAAwB;EACxB,eAAe;EACf,gBAAgB;EAChB,mCAAmC;EACnC,0BAA0B;EAC1B,iCAAiC;EACjC,kCAAkC;AACpC;;AAEA;EACE,cAAc;EACd,aAAa;EACb,mCAAmC;EACnC,0BAA0B;EAC1B,mCAAmC;EACnC,qCAAqC;;EAErC;IACE,mCAAmC;EACrC;AACF;;AAEA;;;EAGE,gBAAgB;AAClB;;AAEA;+EAC+E;AAC/E;EACE,iCAAiC;EACjC,0BAA0B;;EAE1B;;IAEE,0BAA0B;IAC1B,iCAAiC;EACnC;AACF;;AAEA;EACE,mCAAmC;EACnC,4BAA4B;;EAE5B;;;IAGE,0BAA0B;IAC1B,iCAAiC;EACnC;AACF;;AAEA;EACE,iCAAiC;EACjC,0BAA0B;;EAE1B;IACE,+BAA+B;EACjC;;EAEA;;;IAGE,0BAA0B;IAC1B,+BAA+B;EACjC;AACF;;AAEA;EACE,iCAAiC;EACjC,0BAA0B;;EAE1B;;;IAGE,0BAA0B;IAC1B,+BAA+B;EACjC;AACF","file":"_alert.scss","sourcesContent":["@use \"../../helpers/links\" as *;\n@use \"../../objects/width-container\" as *;\n@use \"../../settings/colours\" as *;\n@use \"../../vendor/govuk-frontend\" as *;\n\n.moj-alert {\n display: -ms-grid;\n display: grid;\n margin-bottom: govuk-spacing(6);\n padding: govuk-spacing(2);\n border: 5px solid transparent;\n background: govuk-colour(\"white\");\n -ms-grid-columns: min-content fit-content(960px);\n grid-template-columns: min-content fit-content(960px);\n gap: govuk-spacing(2);\n @include govuk-font($size: false);\n\n &:focus {\n outline: $govuk-focus-width solid $govuk-focus-colour;\n }\n}\n\n.moj-alert[data-dismissible] {\n @include govuk-media-query($from: tablet) {\n grid-template-columns: min-content fit-content(920px) auto;\n }\n}\n\n.moj-alert__icon {\n display: block;\n width: govuk-px-to-rem(30px);\n height: govuk-px-to-rem(30px);\n fill: currentcolor;\n}\n\n.moj-alert__content {\n display: block;\n // Padding to align text with icon\n padding-top: govuk-px-to-rem(5px);\n overflow: hidden;\n color: govuk-colour(\"black\");\n @include govuk-font-size($size: 19);\n\n @include govuk-media-query($from: tablet) {\n padding-top: govuk-px-to-rem(2px);\n }\n}\n\n.moj-alert__action {\n grid-column-start: 2;\n grid-column-end: -1;\n\n @include govuk-media-query($from: tablet) {\n grid-column-start: 3;\n justify-self: right;\n }\n}\n\n.moj-alert__dismiss {\n // Give the button link styling\n margin-bottom: 0;\n padding: 0;\n border: none;\n color: unset;\n background-color: transparent;\n -webkit-appearance: none;\n cursor: pointer;\n appearance: none;\n @include govuk-font-size($size: 19);\n @include govuk-link-common;\n @include govuk-link-style-default;\n @include govuk-link-print-friendly;\n}\n\n.moj-alert__heading {\n display: block;\n margin-top: 0;\n margin-bottom: govuk-px-to-rem(5px);\n @include govuk-text-colour;\n @include govuk-font-size($size: 24);\n @include govuk-typography-weight-bold;\n\n @include govuk-media-query($from: tablet) {\n margin-bottom: govuk-px-to-rem(3px);\n }\n}\n\n.moj-alert__content p:last-child,\n.moj-alert__content a:last-child,\n.moj-alert__content ul:last-child {\n margin-bottom: 0;\n}\n\n/* Style variants\n ========================================================================== */\n.moj-alert--information {\n border-color: $govuk-brand-colour;\n color: $govuk-brand-colour;\n\n .moj-alert__dismiss,\n .moj-alert__content a {\n @include govuk-link-common;\n @include govuk-link-style-default;\n }\n}\n\n.moj-alert--success {\n border-color: govuk-colour(\"green\");\n color: govuk-colour(\"green\");\n\n .moj-alert__dismiss,\n .moj-alert__content a,\n .moj-alert__content .govuk-link {\n @include govuk-link-common;\n @include govuk-link-style-success;\n }\n}\n\n.moj-alert--warning {\n border-color: $moj-warning-colour;\n color: $moj-warning-colour;\n\n .moj-alert__dismiss {\n color: $moj-warning-link-colour;\n }\n\n .moj-alert__dismiss,\n .moj-alert__content a,\n .moj-alert__content .govuk-link {\n @include govuk-link-common;\n @include moj-link-style-warning;\n }\n}\n\n.moj-alert--error {\n border-color: govuk-colour(\"red\");\n color: govuk-colour(\"red\");\n\n .moj-alert__dismiss,\n .moj-alert__content a,\n .moj-alert__content .govuk-link {\n @include govuk-link-common;\n @include govuk-link-style-error;\n }\n}\n"]}