desy-html 12.0.1 → 13.0.0

package/src/templates/components/table-advanced/_examples.table-advanced.njk

@@ -645,7 +645,7 @@
       "firstCellIsHeader": true,
       "head": [
         {
-          "text": "Número de fila"
+          "text": "Identificador"
         },
         {
           "text": "Mes de pago",
@@ -713,7 +713,7 @@
       "rows": [
         [
           {
-            "text": "Primera fila"
+            "text": "A"
           },
           {
             "text": "Enero"
@@ -729,7 +729,7 @@
         ],
         [
           {
-            "text": "Segunda fila"
+            "text": "B"
           },
           {
             "text": "Febrero"
@@ -745,7 +745,7 @@
         ],
         [
           {
-            "text": "Tercera fila"
+            "text": "C"
           },
           {
             "text": "Marzo"
@@ -781,185 +781,5 @@
       ],
       "classes": "min-w-full"
     }
-  },
-  {
-    "name": "tabla con columnas sticky",
-    "description": "Con <code>orderBy</code>, <code>hasCheckboxes</code>, <code>hasFilter</code> y <code>firstCellIsHeader</code>",
-    "data": {
-      "idPrefix": "table-with-sticky-columns",
-      "hasCheckboxes": true,
-      "checkboxesClasses": "sticky left-0 z-10 w-0 bg-white",
-      "firstCellIsHeader": true,
-      "head": [
-        {
-          "text": "Número de fila",
-          "classes": "sticky left-16 z-10 w-60 bg-white"
-        },
-        {
-          "text": "Mes de pago",
-          "orderBy": "none",
-          "hasFilter": true
-        },
-        {
-          "text": "Primer pago",
-          "orderBy": "none",
-          "classes": "text-right",
-          "hasFilter": true
-        },
-        {
-          "text": "Segundo pago",
-          "orderBy": "none",
-          "classes": "text-right",
-          "hasFilter": true
-        },
-        {
-          "text": "Rate for column A",
-          "orderBy": "none",
-          "classes": "text-right",
-          "hasFilter": true
-        },
-        {
-          "text": "Rate for column B",
-          "orderBy": "none",
-          "classes": "text-right",
-          "hasFilter": true
-        },
-        {
-          "text": "Rate for column C",
-          "orderBy": "none",
-          "classes": "text-right",
-          "hasFilter": true
-        },
-        {
-          "text": "Rate for column D",
-          "orderBy": "none",
-          "classes": "text-right",
-          "hasFilter": true
-        },
-        {
-          "text": "Rate for column E",
-          "orderBy": "none",
-          "classes": "text-right sticky right-0 z-10 w-60 bg-white",
-          "hasFilter": true
-        }
-      ],
-      "rows": [
-        [
-          {
-            "text": "First row",
-            "classes": "sticky left-16 z-10 w-60 bg-white"
-          },
-          {
-            "text": "Enero"
-          },
-          {
-            "text": "85€",
-            "classes": "text-right"
-          },
-          {
-            "text": "95€",
-            "classes": "text-right"
-          },
-          {
-            "text": "85€",
-            "classes": "text-right"
-          },
-          {
-            "text": "95€",
-            "classes": "text-right"
-          },
-          {
-            "text": "95€",
-            "classes": "text-right"
-          },
-          {
-            "text": "95€",
-            "classes": "text-right"
-          },
-          {
-            "text": "95€",
-            "classes": "text-right sticky z-10 right-0 w-60 bg-white"
-          }
-        ],
-        [
-          {
-            "text": "Second row",
-            "classes": "sticky left-16 z-10 w-60 bg-white"
-          },
-          {
-            "text": "Febrero"
-          },
-          {
-            "text": "75€",
-            "classes": "text-right"
-          },
-          {
-            "text": "55€",
-            "classes": "text-right"
-          },
-          {
-            "text": "85€",
-            "classes": "text-right"
-          },
-          {
-            "text": "95€",
-            "classes": "text-right"
-          },
-          {
-            "text": "95€",
-            "classes": "text-right"
-          },
-          {
-            "text": "95€",
-            "classes": "text-right"
-          },
-          {
-            "text": "95€",
-            "classes": "text-right sticky right-0 z-10 w-60 bg-white"
-          }
-        ],
-        [
-          {
-            "text": "Third row",
-            "classes": "sticky left-16 z-10 w-60 bg-white"
-          },
-          {
-            "text": "Marzo"
-          },
-          {
-            "text": "165€",
-            "classes": "text-right"
-          },
-          {
-            "text": "125€",
-            "classes": "text-right"
-          },
-          {
-            "text": "85€",
-            "classes": "text-right"
-          },
-          {
-            "text": "95€",
-            "classes": "text-right"
-          },
-          {
-            "text": "95€",
-            "classes": "text-right"
-          },
-          {
-            "text": "95€",
-            "classes": "text-right"
-          },
-          {
-            "text": "95€",
-            "classes": "text-right sticky z-10 right-0 w-60 bg-white"
-          }
-        ]
-      ],
-      "wrapper": {
-        "classes": "overflow-x-auto pb-base"
-      },
-      "classes": "relative whitespace-nowrap min-w-full"
-    }
   }
 ] %}

package/src/templates/components/table-advanced/_template.table-advanced.njk

@@ -6,20 +6,23 @@
 {% set idPrefix = params.idPrefix if params.idPrefix else 'id-table-row' %}
 {% set hasFilters = false %}
 {% set hasSelects = false %}
+{% set hasFiltersOrSelects = false %}
 
 {% for item in params.head %}
   {% if item.hasFilter %}
     {% set hasFilters = true %}
+    {% set hasFiltersOrSelects = true %}
   {% endif %}
   {% if item.select %}
     {% set hasSelects = true %}
+    {% set hasFiltersOrSelects = true %}
   {% endif %}
 {% endfor %}
 
 {#- Capture the HTML so we can optionally nest it in a wrapper -#}
 {% set innerHtml %}
   <table class="c-table-advanced border-t-2 border-b-2 border-neutral-base
-    {%- if params.classes %} {{ params.classes }}{% endif %}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} data-module="c-table-advanced" role="grid">
+    {%- if params.classes %} {{ params.classes }}{% endif %}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} data-module="c-table-advanced" role="grid" aria-readonly="true">
     {% if params.caption %}
     <caption {%- if params.captionClasses %} class="{{ params.captionClasses }}"{% endif %}>{{ params.caption }}</caption>
     {% endif %}
@@ -127,7 +130,7 @@
                   <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base text-primary-base" id="{{ idCheckbox }}" name="{{ idCheckbox }}" type="checkbox" value="table-checkbox">
                 </div>
                 <div class="pt-0.5 leading-5">
-                  <label class="sr-only block text-sm -mt-1" for="{{ idCheckbox }}">Selecciona fila {{ loop.index + 1 }}</label>
+                  <label class="sr-only block text-sm -mt-1" for="{{ idCheckbox }}">Selecciona fila {% if hasFiltersOrSelects %}{{ loop.index + 2 }}{% else %}{{ loop.index + 1 }}{% endif %}</label>
                 </div>
               </div>
             </div>

package/src/templates/components/textarea/_template.textarea.njk

@@ -28,7 +28,6 @@
 {% endif %}
 {% if params.errorMessage %}
   {% set errorId = params.id + '-error' %}
-  {% set describedBy = describedBy + " " + errorId if describedBy else errorId %}
   {{ componentErrorMessage({
     id: errorId,
     classes: params.errorMessage.classes,

package/src/templates/components/toggle/_examples.toggle.njk

@@ -110,15 +110,15 @@
     "description": "Apariencia de Switch con <code>'isSwitch': true</code>, sin cambio en el texto, sólo cambia su estado visual. Necesita un elemento externo con un <code>id</code> para referenciarlo con su <code>aria-labelledby</code>.",
     "data": {
       "id": "toggle-isswitch",
-      "classes": "focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black",
+      "classes": "focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black group",
       "isSwitch": true,
       "offState": {
         "classes": "",
-        "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm' aria-hidden='true'>Off</span><span class='bg-neutral-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75'><span class='sr-only'>Off</span><span aria-hidden='true' class='translate-x-0 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200'></span></span><span class='text-sm' aria-hidden='true'>On</span></span>"
+        "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm group-focus:text-black' aria-hidden='true'>Desactivado</span><span class='bg-neutral-base group-focus:bg-black relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base group-focus:border-black rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75'><span class='sr-only'>Desactivado</span><span aria-hidden='true' class='translate-x-0 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200'></span></span><span class='text-sm' aria-hidden='true'>Activado</span></span>"
       },
       "onState": {
         "classes": "",
-        "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm' aria-hidden='true'>Off</span><span class='bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75'><span class='sr-only'>On</span><span aria-hidden='true' class='translate-x-4 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200'></span></span><span class='text-sm' aria-hidden='true'>On</span></span>"
+        "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm group-focus:text-black' aria-hidden='true'>Desactivado</span><span class='bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75'><span class='sr-only'>Activado</span><span aria-hidden='true' class='translate-x-4 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200'></span></span><span class='text-sm' aria-hidden='true'>Activado</span></span>"
       },
       "attributes": {
         "aria-labelledby": "id-text"
@@ -130,16 +130,16 @@
     "description": "Usa <code>'pressed': true</code> para activarlo inicialmente.",
     "data": {
       "id": "toggle-isswitch-pressed",
-      "classes": "focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black",
+      "classes": "focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black group",
       "pressed": true,
       "isSwitch": true,
       "offState": {
         "classes": "",
-        "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm' aria-hidden='true'>Off</span><span class='bg-neutral-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75'><span class='sr-only'>Off</span><span aria-hidden='true' class='translate-x-0 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200'></span></span><span class='text-sm' aria-hidden='true'>On</span></span>"
+        "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm group-focus:text-black' aria-hidden='true'>Desactivado</span><span class='bg-neutral-base group-focus:bg-black relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base group-focus:border-black rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75'><span class='sr-only'>Desactivado</span><span aria-hidden='true' class='translate-x-0 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200'></span></span><span class='text-sm' aria-hidden='true'>Activado</span></span>"
       },
       "onState": {
         "classes": "",
-        "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm' aria-hidden='true'>Off</span><span class='bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75'><span class='sr-only'>On</span><span aria-hidden='true' class='translate-x-4 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200'></span></span><span class='text-sm' aria-hidden='true'>On</span></span>"
+        "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm group-focus:text-black' aria-hidden='true'>Desactivado</span><span class='bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75'><span class='sr-only'>Activado</span><span aria-hidden='true' class='translate-x-4 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200'></span></span><span class='text-sm' aria-hidden='true'>Activado</span></span>"
       },
       "attributes": {
         "aria-labelledby": "id-text"
@@ -150,16 +150,16 @@
     "name": "isSwitch con JavaScript",
     "description": "También puedes usar con javascript la función global <code>activateItemToggle(element, toggle)</code>,  para modificar el estado del Switch, usando su id, el parámetro <code>toggle</code> admite <code>true</code> o <code>false</code>, si le pasamos true se mostrará activado, y si le pasamos false se mostrará desactivado. Ej: Abre la consola del navegador y escribe <code>activateItemToggle('toggle-switch-js', true)</code> para mostrar el switch activado.",
     "data": {
-      "classes": "focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black",
+      "classes": "focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black group",
       "id": "toggle-switch-js",
       "isSwitch": true,
       "offState": {
         "classes": "",
-        "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm' aria-hidden='true'>Off</span><span class='bg-neutral-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75'><span class='sr-only'>Off</span><span aria-hidden='true' class='translate-x-0 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200'></span></span><span class='text-sm' aria-hidden='true'>On</span></span>"
+        "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm group-focus:text-black' aria-hidden='true'>Desactivado</span><span class='bg-neutral-base group-focus:bg-black relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base group-focus:border-black rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75'><span class='sr-only'>Desactivado</span><span aria-hidden='true' class='translate-x-0 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200'></span></span><span class='text-sm' aria-hidden='true'>Activado</span></span>"
       },
       "onState": {
         "classes": "",
-        "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm' aria-hidden='true'>Off</span><span class='bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75'><span class='sr-only'>On</span><span aria-hidden='true' class='translate-x-4 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200'></span></span><span class='text-sm' aria-hidden='true'>On</span></span>"
+        "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm group-focus:text-black' aria-hidden='true'>Desactivado</span><span class='bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75'><span class='sr-only'>Activado</span><span aria-hidden='true' class='translate-x-4 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200'></span></span><span class='text-sm' aria-hidden='true'>Activado</span></span>"
       },
       "attributes": {
         "aria-labelledby": "id-text"
@@ -170,15 +170,15 @@
     "name": "isSwitch peque",
     "data": {
       "id": "toggle-small",
-      "classes": "focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black",
+      "classes": "mb-sm focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black group",
       "isSwitch": true,
       "offState": {
         "classes": "",
-        "html": "<span class='flex align-center justify-between gap-xs'><span class='text-xs' aria-hidden='true'>Off</span><span class='bg-neutral-base relative inline-flex flex-shrink-0 h-4 w-8 border-2 border-neutral-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75'><span class='sr-only'>Off</span><span aria-hidden='true' class='translate-x-0 pointer-events-none inline-block h-3 w-3 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200'></span></span><span class='text-xs' aria-hidden='true'>On</span></span>"
+        "html": "<span class='flex align-center justify-between gap-xs'><span class='text-xs group-focus:text-black' aria-hidden='true'>Desactivado</span><span class='bg-neutral-base group-focus:bg-black relative inline-flex flex-shrink-0 h-4 w-8 border-2 border-neutral-base group-focus:border-black rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75'><span class='sr-only'>Desactivado</span><span aria-hidden='true' class='translate-x-0 pointer-events-none inline-block h-3 w-3 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200'></span></span><span class='text-xs' aria-hidden='true'>Activado</span></span>"
       },
       "onState": {
         "classes": "",
-        "html": "<span class='flex align-center justify-between gap-xs'><span class='text-xs' aria-hidden='true'>Off</span><span class='bg-primary-base relative inline-flex flex-shrink-0 h-4 w-8 border-2 border-primary-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75'><span class='sr-only'>On</span><span aria-hidden='true' class='translate-x-4 pointer-events-none inline-block h-3 w-3 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200'></span></span><span class='text-xs' aria-hidden='true'>On</span></span>"
+        "html": "<span class='flex align-center justify-between gap-xs'><span class='text-xs group-focus:text-black' aria-hidden='true'>Desactivado</span><span class='bg-primary-base relative inline-flex flex-shrink-0 h-4 w-8 border-2 border-primary-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75'><span class='sr-only'>Activado</span><span aria-hidden='true' class='translate-x-4 pointer-events-none inline-block h-3 w-3 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200'></span></span><span class='text-xs' aria-hidden='true'>Activado</span></span>"
       },
       "attributes": {
         "aria-labelledby": "id-text"

package/src/templates/components/tooltip/_template.tooltip.njk

@@ -2,7 +2,7 @@
 {% set idButton = params.id + "-button" %}
 {% set idTooltip = params.id + "-tooltip" %}
 <div id="{{ params.id }}" data-module="c-tooltip" {% if params.classes %}class="{{ params.classes }}"{% endif %} {%- if params.attributes %}{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endif %}>
-  <div id="{{ idButton }}" data-module="c-tooltip-button" {%- if params.complex %} data-type="c-tooltip-button-complex"{% endif %} class="inline-flex items-center focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" tabindex="0" role="button" aria-labelledby="{{ idButton }}" aria-describedby="{{ idTooltip }}">
+  <div id="{{ idButton }}" data-module="c-tooltip-button" {%- if params.complex %} data-type="c-tooltip-button-complex"{% endif %} class="inline-flex items-center p-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" tabindex="0" role="button" aria-labelledby="{{ idButton }}" aria-describedby="{{ idTooltip }}">
     {% if params.text or params.html %}
     {% if params.html %}
     {{ params.html | filterquotes | safe }}

package/src/js/aria/HeaderNavigation.js

@@ -1,55 +0,0 @@
-export function HeaderNavigation(aria) {
-  (function () {
-    aria.HeaderNavigation = function (domNode) {
-      this.domNode = domNode;
-    };
-
-    aria.HeaderNavigation.prototype.init = function () {
-      this.valueActive = this.domNode.dataset.menuActive;
-      if (this.valueActive) {
-        this.activateElement(this.valueActive);
-      }
-    };
-
-    aria.HeaderNavigation.prototype.activateElement = function (elementActive) {
-      this.domNode.querySelectorAll('li').forEach((element) => {
-        const getLink = element.querySelector('a') || element.querySelector('span');
-        if (getLink) {
-          if (getLink.id === elementActive) {
-            this.wrapActiveElement(getLink);
-          } else {
-            this.deactivateElement(getLink);
-          }
-        }
-      });
-    };
-
-    aria.HeaderNavigation.prototype.wrapActiveElement = function (elementActive) {
-      elementActive.setAttribute('aria-current', 'page');
-      elementActive.innerHTML = `<strong class="font-bold">${elementActive.textContent}</strong>`;
-    };
-
-    aria.HeaderNavigation.prototype.deactivateElement = function (elementDeactivated) {
-      elementDeactivated.removeAttribute('aria-current');
-      elementDeactivated.innerHTML = elementDeactivated.textContent;
-    };
-
-    window.activateItemHeaderNavigation = function (menuId, activeItemId) {
-      const menu = document.getElementById(menuId);
-      if (menu) {
-        const activeItem = document.querySelector(`#${menuId} #${activeItemId}`);
-        if (activeItem) {
-          const menuInstance = new aria.HeaderNavigation(menu);
-          menuInstance.activateElement(activeItemId);
-          return [menu, activeItem];
-        } else {
-          console.log('There is no element with this id in the menu.');
-          return null;
-        }
-      } else {
-        console.log('There is no menu with this id in the document.');
-        return null;
-      }
-    };
-  }());
-}