desy-html 10.2.2 → 11.0.1

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);
+  });
+}

package/src/js/aria/utils.js

@@ -1,128 +1,128 @@
-
-export function utils(aria) {
-  /**
-   * @namespace aria
-   */
-
-  aria.Utils = aria.Utils || {};
-
-  /**
-   * @desc
-   *  Key code constants
-   */
-  aria.KeyCode = {
-    BACKSPACE: 8,
-    TAB: 9,
-    RETURN: 13,
-    ESC: 27,
-    SPACE: 32,
-    PAGE_UP: 33,
-    PAGE_DOWN: 34,
-    END: 35,
-    HOME: 36,
-    LEFT: 37,
-    UP: 38,
-    RIGHT: 39,
-    DOWN: 40,
-    DELETE: 46
-  };
-
-
-  // Polyfill src https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
-  aria.Utils.matches = function (element, selector) {
-    if (!Element.prototype.matches) {
-      Element.prototype.matches =
-        Element.prototype.matchesSelector ||
-        Element.prototype.mozMatchesSelector ||
-        Element.prototype.msMatchesSelector ||
-        Element.prototype.oMatchesSelector ||
-        Element.prototype.webkitMatchesSelector ||
-        function (s) {
-          var matches = element.parentNode.querySelectorAll(s);
-          var i = matches.length;
-          while (--i >= 0 && matches.item(i) !== this) {}
-          return i > -1;
-        };
-    }
-
-    return element.matches(selector);
-  };
-
-  aria.Utils.remove = function (item) {
-    if (item.remove && typeof item.remove === 'function') {
-      return item.remove();
-    }
-    if (item.parentNode &&
-        item.parentNode.removeChild &&
-        typeof item.parentNode.removeChild === 'function') {
-      return item.parentNode.removeChild(item);
-    }
-    return false;
-  };
-
-  aria.Utils.isFocusable = function (element) {
-    if (element.tabIndex > 0 || (element.tabIndex === 0 && element.getAttribute('tabIndex') !== null)) {
-      return true;
-    }
-
-    if (element.disabled) {
-      return false;
-    }
-
-    switch (element.nodeName) {
-      case 'A':
-        return !!element.href && element.rel != 'ignore';
-      case 'INPUT':
-        return element.type != 'hidden' && element.type != 'file';
-      case 'BUTTON':
-      case 'SELECT':
-      case 'TEXTAREA':
-        return true;
-      default:
-        return false;
-    }
-  };
-
-  aria.Utils.getAncestorBySelector = function (element, selector) {
-    if (!aria.Utils.matches(element, selector + ' ' + element.tagName)) {
-      // Element is not inside an element that matches selector
-      return null;
-    }
-
-    // Move up the DOM tree until a parent matching the selector is found
-    var currentNode = element;
-    var ancestor = null;
-    while (ancestor === null) {
-      if (aria.Utils.matches(currentNode.parentNode, selector)) {
-        ancestor = currentNode.parentNode;
-      }
-      else {
-        currentNode = currentNode.parentNode;
-      }
-    }
-
-    return ancestor;
-  };
-
-  aria.Utils.hasClass = function (element, className) {
-    return (new RegExp('(\\s|^)' + className + '(\\s|$)')).test(element.className);
-  };
-
-  aria.Utils.addClass = function (element, className) {
-    if (!aria.Utils.hasClass(element, className)) {
-      element.className += ' ' + className;
-    }
-  };
-
-  aria.Utils.removeClass = function (element, className) {
-    var classRegex = new RegExp('(\\s|^)' + className + '(\\s|$)');
-    element.className = element.className.replace(classRegex, ' ').trim();
-  };
-
-  aria.Utils.bindMethods = function (object /* , ...methodNames */) {
-    var methodNames = Array.prototype.slice.call(arguments, 1);
-    methodNames.forEach(function (method) {
-      object[method] = object[method].bind(object);
-    });
-  };
-}
+
+export function utils(aria) {
+  /**
+   * @namespace aria
+   */
+
+  aria.Utils = aria.Utils || {};
+
+  /**
+   * @desc
+   *  Key code constants
+   */
+  aria.KeyCode = {
+    BACKSPACE: 8,
+    TAB: 9,
+    RETURN: 13,
+    ESC: 27,
+    SPACE: 32,
+    PAGE_UP: 33,
+    PAGE_DOWN: 34,
+    END: 35,
+    HOME: 36,
+    LEFT: 37,
+    UP: 38,
+    RIGHT: 39,
+    DOWN: 40,
+    DELETE: 46
+  };
+
+
+  // Polyfill src https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
+  aria.Utils.matches = function (element, selector) {
+    if (!Element.prototype.matches) {
+      Element.prototype.matches =
+        Element.prototype.matchesSelector ||
+        Element.prototype.mozMatchesSelector ||
+        Element.prototype.msMatchesSelector ||
+        Element.prototype.oMatchesSelector ||
+        Element.prototype.webkitMatchesSelector ||
+        function (s) {
+          var matches = element.parentNode.querySelectorAll(s);
+          var i = matches.length;
+          while (--i >= 0 && matches.item(i) !== this) {}
+          return i > -1;
+        };
+    }
+
+    return element.matches(selector);
+  };
+
+  aria.Utils.remove = function (item) {
+    if (item.remove && typeof item.remove === 'function') {
+      return item.remove();
+    }
+    if (item.parentNode &&
+        item.parentNode.removeChild &&
+        typeof item.parentNode.removeChild === 'function') {
+      return item.parentNode.removeChild(item);
+    }
+    return false;
+  };
+
+  aria.Utils.isFocusable = function (element) {
+    if (element.tabIndex > 0 || (element.tabIndex === 0 && element.getAttribute('tabIndex') !== null)) {
+      return true;
+    }
+
+    if (element.disabled) {
+      return false;
+    }
+
+    switch (element.nodeName) {
+      case 'A':
+        return !!element.href && element.rel != 'ignore';
+      case 'INPUT':
+        return element.type != 'hidden' && element.type != 'file';
+      case 'BUTTON':
+      case 'SELECT':
+      case 'TEXTAREA':
+        return true;
+      default:
+        return false;
+    }
+  };
+
+  aria.Utils.getAncestorBySelector = function (element, selector) {
+    if (!aria.Utils.matches(element, selector + ' ' + element.tagName)) {
+      // Element is not inside an element that matches selector
+      return null;
+    }
+
+    // Move up the DOM tree until a parent matching the selector is found
+    var currentNode = element;
+    var ancestor = null;
+    while (ancestor === null) {
+      if (aria.Utils.matches(currentNode.parentNode, selector)) {
+        ancestor = currentNode.parentNode;
+      }
+      else {
+        currentNode = currentNode.parentNode;
+      }
+    }
+
+    return ancestor;
+  };
+
+  aria.Utils.hasClass = function (element, className) {
+    return (new RegExp('(\\s|^)' + className + '(\\s|$)')).test(element.className);
+  };
+
+  aria.Utils.addClass = function (element, className) {
+    if (!aria.Utils.hasClass(element, className)) {
+      element.className += ' ' + className;
+    }
+  };
+
+  aria.Utils.removeClass = function (element, className) {
+    var classRegex = new RegExp('(\\s|^)' + className + '(\\s|$)');
+    element.className = element.className.replace(classRegex, ' ').trim();
+  };
+
+  aria.Utils.bindMethods = function (object /* , ...methodNames */) {
+    var methodNames = Array.prototype.slice.call(arguments, 1);
+    methodNames.forEach(function (method) {
+      object[method] = object[method].bind(object);
+    });
+  };
+}