RubyGems - govuk_publishing_components - Versions diffs - 44.1.0 → 44.3.0 - Mend

govuk_publishing_components 44.1.0 → 44.3.0

Files changed (142) hide show

data/node_modules/govuk-frontend/dist/govuk/components/accordion/accordion.bundle.mjs CHANGED Viewed

@@ -68,6 +68,19 @@ function extractConfigByNamespace(Component, dataset, namespace) {
   }
   return newObject[namespace];
 }
+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;
@@ -80,6 +93,9 @@ function isArray(option) {
 function isObject(option) {
   return !!option && typeof option === 'object' && !isArray(option);
 }
+function formatErrorMessage(Component, message) {
+  return `${Component.moduleName}: ${message}`;
+}
 /**
  * Schema for component config
@@ -103,6 +119,10 @@ function isObject(option) {
  * @property {string[]} required - List of required config fields
  * @property {string} errorMessage - Error message when required config fields not provided
  */
+/**
+ * @typedef ComponentWithModuleName
+ * @property {string} moduleName - Name of the component
+ */
 function normaliseDataset(Component, dataset) {
   const out = {};
@@ -140,30 +160,85 @@ class ElementError extends GOVUKFrontendError {
     let message = typeof messageOrOptions === 'string' ? messageOrOptions : '';
     if (typeof messageOrOptions === 'object') {
       const {
-        componentName,
+        component,
         identifier,
         element,
         expectedType
       } = messageOrOptions;
-      message = `${componentName}: ${identifier}`;
+      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';
+  }
+}
+/**
+ * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
+ */
 class GOVUKFrontendComponent {
-  constructor() {
-    this.checkSupport();
+  /**
+   * Returns the root element of the component
+   *
+   * @protected
+   * @returns {RootElementType} - the root element of component
+   */
+  get $root() {
+    return this._$root;
   }
-  checkSupport() {
+  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 GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+ */
+GOVUKFrontendComponent.elementType = HTMLElement;
 class I18n {
   constructor(translations = {}, config = {}) {
     var _config$locale;
@@ -373,12 +448,11 @@ I18n.pluralRules = {
  */
 class Accordion extends GOVUKFrontendComponent {
   /**
-   * @param {Element | null} $module - HTML element to use for accordion
+   * @param {Element | null} $root - HTML element to use for accordion
    * @param {AccordionConfig} [config] - Accordion config
    */
-  constructor($module, config = {}) {
-    super();
-    this.$module = void 0;
+  constructor($root, config = {}) {
+    super($root);
     this.config = void 0;
     this.i18n = void 0;
     this.controlsClass = 'govuk-accordion__controls';
@@ -404,20 +478,12 @@ class Accordion extends GOVUKFrontendComponent {
     this.$showAllButton = null;
     this.$showAllIcon = null;
     this.$showAllText = null;
-    if (!($module instanceof HTMLElement)) {
-      throw new ElementError({
-        componentName: 'Accordion',
-        element: $module,
-        identifier: 'Root element (`$module`)'
-      });
-    }
-    this.$module = $module;
-    this.config = mergeConfigs(Accordion.defaults, config, normaliseDataset(Accordion, $module.dataset));
+    this.config = mergeConfigs(Accordion.defaults, config, normaliseDataset(Accordion, this.$root.dataset));
     this.i18n = new I18n(this.config.i18n);
-    const $sections = this.$module.querySelectorAll(`.${this.sectionClass}`);
+    const $sections = this.$root.querySelectorAll(`.${this.sectionClass}`);
     if (!$sections.length) {
       throw new ElementError({
-        componentName: 'Accordion',
+        component: Accordion,
         identifier: `Sections (\`<div class="${this.sectionClass}">\`)`
       });
     }
@@ -437,7 +503,7 @@ class Accordion extends GOVUKFrontendComponent {
     const $accordionControls = document.createElement('div');
     $accordionControls.setAttribute('class', this.controlsClass);
     $accordionControls.appendChild(this.$showAllButton);
-    this.$module.insertBefore($accordionControls, this.$module.firstChild);
+    this.$root.insertBefore($accordionControls, this.$root.firstChild);
     this.$showAllText = document.createElement('span');
     this.$showAllText.classList.add(this.showAllTextClass);
     this.$showAllButton.appendChild(this.$showAllText);
@@ -451,7 +517,7 @@ class Accordion extends GOVUKFrontendComponent {
       const $header = $section.querySelector(`.${this.sectionHeaderClass}`);
       if (!$header) {
         throw new ElementError({
-          componentName: 'Accordion',
+          component: Accordion,
           identifier: `Section headers (\`<div class="${this.sectionHeaderClass}">\`)`
         });
       }
@@ -467,19 +533,19 @@ class Accordion extends GOVUKFrontendComponent {
     const $summary = $header.querySelector(`.${this.sectionSummaryClass}`);
     if (!$heading) {
       throw new ElementError({
-        componentName: 'Accordion',
+        component: Accordion,
         identifier: `Section heading (\`.${this.sectionHeadingClass}\`)`
       });
     }
     if (!$span) {
       throw new ElementError({
-        componentName: 'Accordion',
+        component: Accordion,
         identifier: `Section button placeholder (\`<span class="${this.sectionButtonClass}">\`)`
       });
     }
     const $button = document.createElement('button');
     $button.setAttribute('type', 'button');
-    $button.setAttribute('aria-controls', `${this.$module.id}-content-${index + 1}`);
+    $button.setAttribute('aria-controls', `${this.$root.id}-content-${index + 1}`);
     for (const attr of Array.from($span.attributes)) {
       if (attr.name !== 'id') {
         $button.setAttribute(attr.name, attr.value);
@@ -553,7 +619,7 @@ class Accordion extends GOVUKFrontendComponent {
     const $content = $section.querySelector(`.${this.sectionContentClass}`);
     if (!$content) {
       throw new ElementError({
-        componentName: 'Accordion',
+        component: Accordion,
         identifier: `Section content (\`<div class="${this.sectionContentClass}">\`)`
       });
     }