desy-html 12.0.0 → 12.1.0

package/src/js/aria/linksList.js

@@ -1,42 +1,42 @@
-export function LinksList(aria) {
-
-  aria.linksListInit = function (domNode) {
-    this.rootEl = domNode;
-  };
-
-  window.activateItemLinksList = function (wrapperId, activeItemId) {
-    const activeItem = document.querySelector(`#${wrapperId} #${activeItemId}`);
-    if (activeItem) {
-      activateElement(wrapperId, activeItemId);
-      return [activeItem];
-    } else {
-      console.log('There is no element with this id in the menu.');
-      return null;
-    }
-  };
-
-  function activateElement(wrapperId, elementActive) {
-    const getWrapper = document.getElementById(wrapperId);
-    getWrapper.querySelectorAll('li').forEach((element) => {
-      const getLink = element.querySelector('a');
-      if (getLink) {
-        if (getLink.id === elementActive) {
-          wrapActiveElement(getLink);
-        } else {
-          deactivateElement(getLink);
-        }
-      }
-    });
-  };
-
-  function wrapActiveElement(elementActive) {
-    const getText = elementActive.querySelector('div[data-element="c-links-list__text"]');
-    getText.innerHTML = `<strong class="font-bold">${elementActive.textContent}</strong>`;
-  };
-
-  function deactivateElement(elementDeactivated) {
-    const getText = elementDeactivated.querySelector('div[data-element="c-links-list__text"]');
-    const replaceStrong = getText.textContent.replace('<strong class="font-bold">', '').replace('<strong/>', '');
-    getText.textContent = `${replaceStrong}`;
-  };
-}
+export function LinksList(aria) {
+
+  aria.linksListInit = function (domNode) {
+    this.rootEl = domNode;
+  };
+
+  window.activateItemLinksList = function (wrapperId, activeItemId) {
+    const activeItem = document.querySelector(`#${wrapperId} #${activeItemId}`);
+    if (activeItem) {
+      activateElement(wrapperId, activeItemId);
+      return [activeItem];
+    } else {
+      console.log('There is no element with this id in the menu.');
+      return null;
+    }
+  };
+
+  function activateElement(wrapperId, elementActive) {
+    const getWrapper = document.getElementById(wrapperId);
+    getWrapper.querySelectorAll('li').forEach((element) => {
+      const getLink = element.querySelector('a');
+      if (getLink) {
+        if (getLink.id === elementActive) {
+          wrapActiveElement(getLink);
+        } else {
+          deactivateElement(getLink);
+        }
+      }
+    });
+  };
+
+  function wrapActiveElement(elementActive) {
+    const getText = elementActive.querySelector('div[data-element="c-links-list__text"]');
+    getText.innerHTML = `<strong class="font-bold">${elementActive.textContent}</strong>`;
+  };
+
+  function deactivateElement(elementDeactivated) {
+    const getText = elementDeactivated.querySelector('div[data-element="c-links-list__text"]');
+    const replaceStrong = getText.textContent.replace('<strong class="font-bold">', '').replace('<strong/>', '');
+    getText.textContent = `${replaceStrong}`;
+  };
+}

package/src/js/aria/notification.js

@@ -1,56 +1,56 @@
-export function Notification(aria) {
-
-  aria.notificationInit = function (domNode) {
-    this.rootEl = domNode;
-    /*No todas las notificaciones tienen botón de cerrar
-    así que comprobamos que el componente contiene el botón.*/
-    if(this.rootEl.querySelector('.c-notification-button__close')) {
-      window.addEventListener('click', this.closeNotification.bind(this));
-    }
-  };
-
-  aria.closeNotification = function (event) {
-    const { target } = event;
-    const elementNotification = target ? target : event
-    if(target) {
-      aria.closeNotificationEvent(elementNotification)
-    }
-
-    if(!target) {
-      aria.closeNotificationWindow(elementNotification)
-    }
-  }
-
-  aria.closeNotificationEvent = function (element) {
-    if(element.classList.contains('c-notification-button__close')) {
-      //Replicamos la transición de alpine con tailwind al cerrar.
-      element.parentElement.parentElement.parentElement.classList.add('transition-opacity', 'duration-150', 'ease-in-out', 'opacity-0');
-      //Añadimos display: none para que el componente "desaparezca del DOM"
-      setTimeout(() =>{
-        element.parentElement.parentElement.parentElement.classList.add('hidden');
-      }, 300)
-    }
-  }
-
-  aria.closeNotificationWindow = function (element) {
-    if(element.querySelector('.c-notification-button__close')) {
-      //Replicamos la transición de alpine con tailwind al cerrar.
-      element.classList.add('transition-opacity', 'duration-150', 'ease-in-out', 'opacity-0');
-      //Añadimos display: none para que el componente "desaparezca del DOM"
-      setTimeout(() =>{
-        element.classList.add('hidden');
-      }, 300)
-    }
-  }
-
-  window.closeItemNotification = function (element) {
-    const notification = document.getElementById(element);
-    if (notification) {
-      aria.closeNotification(notification)
-      return [notification];
-    } else {
-      console.log('There is no notification with this id in the document.');
-      return null;
-    }
-  };
-}
+export function Notification(aria) {
+
+  aria.notificationInit = function (domNode) {
+    this.rootEl = domNode;
+    /*No todas las notificaciones tienen botón de cerrar
+    así que comprobamos que el componente contiene el botón.*/
+    if(this.rootEl.querySelector('.c-notification-button__close')) {
+      window.addEventListener('click', this.closeNotification.bind(this));
+    }
+  };
+
+  aria.closeNotification = function (event) {
+    const { target } = event;
+    const elementNotification = target ? target : event
+    if(target) {
+      aria.closeNotificationEvent(elementNotification)
+    }
+
+    if(!target) {
+      aria.closeNotificationWindow(elementNotification)
+    }
+  }
+
+  aria.closeNotificationEvent = function (element) {
+    if(element.classList.contains('c-notification-button__close')) {
+      //Replicamos la transición de alpine con tailwind al cerrar.
+      element.parentElement.parentElement.parentElement.classList.add('transition-opacity', 'duration-150', 'ease-in-out', 'opacity-0');
+      //Añadimos display: none para que el componente "desaparezca del DOM"
+      setTimeout(() =>{
+        element.parentElement.parentElement.parentElement.classList.add('hidden');
+      }, 300)
+    }
+  }
+
+  aria.closeNotificationWindow = function (element) {
+    if(element.querySelector('.c-notification-button__close')) {
+      //Replicamos la transición de alpine con tailwind al cerrar.
+      element.classList.add('transition-opacity', 'duration-150', 'ease-in-out', 'opacity-0');
+      //Añadimos display: none para que el componente "desaparezca del DOM"
+      setTimeout(() =>{
+        element.classList.add('hidden');
+      }, 300)
+    }
+  }
+
+  window.closeItemNotification = function (element) {
+    const notification = document.getElementById(element);
+    if (notification) {
+      aria.closeNotification(notification)
+      return [notification];
+    } else {
+      console.log('There is no notification with this id in the document.');
+      return null;
+    }
+  };
+}

package/src/js/aria/radioButton.js

@@ -1,50 +1,50 @@
-export function RadioButton(aria) {
-
-  class RadioButton {
-    constructor(domNode) {
-      this.rootEl = domNode;
-      this.rootEl.querySelectorAll('.c-radios__conditional-active input[type="radio"], .c-radios__conditional-hidden input[type="radio"]').forEach(item => {
-        item.addEventListener('click', this.toggleConditional.bind(this))
-      })
-    }
-
-    toggleConditional(event) {
-      const { target: { nodeName, type }, target } = event
-      const targetParent = target.parentElement.parentElement.parentElement.parentElement;
-      const getChildrens = targetParent.querySelectorAll('.c-radios__conditional');
-
-      if(targetParent && targetParent.classList.contains('c-radios__conditional-active')) {
-        return;
-      }
-
-      if(getChildrens.length > 0) {
-        getChildrens.forEach(item => {
-          if(item.querySelector('input[type="radio"]').checked) {
-            item.classList.remove('c-radios__conditional-hidden')
-            item.classList.add('c-radios__conditional-active')
-          }
-        })
-      }
-
-      if(type === 'radio' && nodeName === 'INPUT') {
-        this.rootEl.querySelectorAll('.c-radios__conditional-active, .c-radios__conditional-hidden').forEach(item => {
-          if(item.querySelector('input[type="radio"]').checked){
-            item.classList.remove('c-radios__conditional-hidden')
-            item.classList.add('c-radios__conditional-active')
-          } else {
-            item.classList.remove('c-radios__conditional-active')
-            item.classList.add('c-radios__conditional-hidden')
-          }
-        })
-      }
-    }
-  }
-
-  const radioElements = document.querySelectorAll('[data-module="c-radios"]');
-  radioElements.forEach((radioElement) => {
-    if (radioElement.querySelector('.c-radios__conditional')) {
-      new RadioButton(radioElement);
-    }
-  });
-
-}
+export function RadioButton(aria) {
+
+  class RadioButton {
+    constructor(domNode) {
+      this.rootEl = domNode;
+      this.rootEl.querySelectorAll('.c-radios__conditional-active input[type="radio"], .c-radios__conditional-hidden input[type="radio"]').forEach(item => {
+        item.addEventListener('click', this.toggleConditional.bind(this))
+      })
+    }
+
+    toggleConditional(event) {
+      const { target: { nodeName, type }, target } = event
+      const targetParent = target.parentElement.parentElement.parentElement.parentElement;
+      const getChildrens = targetParent.querySelectorAll('.c-radios__conditional');
+
+      if(targetParent && targetParent.classList.contains('c-radios__conditional-active')) {
+        return;
+      }
+
+      if(getChildrens.length > 0) {
+        getChildrens.forEach(item => {
+          if(item.querySelector('input[type="radio"]').checked) {
+            item.classList.remove('c-radios__conditional-hidden')
+            item.classList.add('c-radios__conditional-active')
+          }
+        })
+      }
+
+      if(type === 'radio' && nodeName === 'INPUT') {
+        this.rootEl.querySelectorAll('.c-radios__conditional-active, .c-radios__conditional-hidden').forEach(item => {
+          if(item.querySelector('input[type="radio"]').checked){
+            item.classList.remove('c-radios__conditional-hidden')
+            item.classList.add('c-radios__conditional-active')
+          } else {
+            item.classList.remove('c-radios__conditional-active')
+            item.classList.add('c-radios__conditional-hidden')
+          }
+        })
+      }
+    }
+  }
+
+  const radioElements = document.querySelectorAll('[data-module="c-radios"]');
+  radioElements.forEach((radioElement) => {
+    if (radioElement.querySelector('.c-radios__conditional')) {
+      new RadioButton(radioElement);
+    }
+  });
+
+}

package/src/js/aria/toggle.js

@@ -1,61 +1,61 @@
-export function Toggle(aria) {
-
-  aria.toggleInit = function (domNode) {
-    this.rootEl = domNode;
-    this.buttonEl = this.rootEl.querySelector('.c-toggle__button');
-    this.buttonEl.addEventListener('click', this.toggle.bind(this));
-    if(this.buttonEl.getAttribute('aria-pressed') === 'true' || this.buttonEl.getAttribute('aria-checked') === 'true') {
-      this.buttonEl.click()
-    }
-  };
-
-  aria.toggle = function (event) {
-    const { target } = event
-    target.classList.toggle('c-toggle--is-opened')
-
-    this.ariaAttribute(target)
-  }
-
-  aria.ariaAttribute = function (target) {
-    if(target.getAttribute('aria-checked')) {
-      const toggleIsOpened = target.classList.contains('c-toggle--is-opened') ? true : false
-      target.setAttribute('aria-checked', toggleIsOpened);
-    }
-
-    if(target.getAttribute('aria-pressed')) {
-      const toggleIsOpened = target.classList.contains('c-toggle--is-opened') ? true : false
-      target.setAttribute('aria-pressed', toggleIsOpened);
-    }
-
-    if(target.getAttribute('aria-expanded')) {
-      const toggleIsOpened = target.classList.contains('c-toggle--is-opened') ? true : false
-      target.setAttribute('aria-expanded', toggleIsOpened);
-    }
-  }
-
-  function handleToggle(element, toggle) {
-    if(toggle){
-      element.classList.add('c-toggle--is-opened')
-    } else {
-      element.classList.remove('c-toggle--is-opened')
-    }
-
-    aria.ariaAttribute(element)
-  }
-
-  window.activateItemToggle = function (element, toggle) {
-    const toggleElement = document.getElementById(element);
-    if (toggleElement) {
-      handleToggle(toggleElement, toggle)
-      return [toggleElement, toggle];
-    } else {
-      console.log('There is no toggle with this id in the document.');
-      return null;
-    }
-  };
-
-  const toggles = document.querySelectorAll('[data-module="c-toggle"]');
-  toggles.forEach((toggleElement) => {
-    aria.toggleInit(toggleElement);
-  });
-}
+export function Toggle(aria) {
+
+  aria.toggleInit = function (domNode) {
+    this.rootEl = domNode;
+    this.buttonEl = this.rootEl.querySelector('.c-toggle__button');
+    this.buttonEl.addEventListener('click', this.toggle.bind(this));
+    if(this.buttonEl.getAttribute('aria-pressed') === 'true' || this.buttonEl.getAttribute('aria-checked') === 'true') {
+      this.buttonEl.click()
+    }
+  };
+
+  aria.toggle = function (event) {
+    const { target } = event
+    target.classList.toggle('c-toggle--is-opened')
+
+    this.ariaAttribute(target)
+  }
+
+  aria.ariaAttribute = function (target) {
+    if(target.getAttribute('aria-checked')) {
+      const toggleIsOpened = target.classList.contains('c-toggle--is-opened') ? true : false
+      target.setAttribute('aria-checked', toggleIsOpened);
+    }
+
+    if(target.getAttribute('aria-pressed')) {
+      const toggleIsOpened = target.classList.contains('c-toggle--is-opened') ? true : false
+      target.setAttribute('aria-pressed', toggleIsOpened);
+    }
+
+    if(target.getAttribute('aria-expanded')) {
+      const toggleIsOpened = target.classList.contains('c-toggle--is-opened') ? true : false
+      target.setAttribute('aria-expanded', toggleIsOpened);
+    }
+  }
+
+  function handleToggle(element, toggle) {
+    if(toggle){
+      element.classList.add('c-toggle--is-opened')
+    } else {
+      element.classList.remove('c-toggle--is-opened')
+    }
+
+    aria.ariaAttribute(element)
+  }
+
+  window.activateItemToggle = function (element, toggle) {
+    const toggleElement = document.getElementById(element);
+    if (toggleElement) {
+      handleToggle(toggleElement, toggle)
+      return [toggleElement, toggle];
+    } else {
+      console.log('There is no toggle with this id in the document.');
+      return null;
+    }
+  };
+
+  const toggles = document.querySelectorAll('[data-module="c-toggle"]');
+  toggles.forEach((toggleElement) => {
+    aria.toggleInit(toggleElement);
+  });
+}