desy-html 11.1.2 → 12.0.0

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

@@ -185,32 +185,26 @@
             "items": [
               {
                 "text": "Subitem 1",
-                "value": "subitem-1",
                 "href": "#"
               },
               {
                 "text": "Subitem 2",
-                "value": "subitem-2",
                 "href": "#"
               },
               {
                 "text": "Subitem 3",
-                "value": "subitem-3",
                  "sub": {
                     "items": [
                       {
                         "text": "Subitem 1",
-                        "value": "subitem-1",
                         "href": "#"
                       },
                       {
                         "text": "Subitem 2",
-                        "value": "subitem-2",
                         "href": "#"
                       },
                       {
                         "text": "Subitem 3",
-                        "value": "subitem-3",
                         "href": "#",
                         "active": true
                       }
@@ -233,17 +227,14 @@
             "items": [
               {
                 "text": "Subitem 1",
-                "value": "subitem-1",
                 "href": "#"
               },
               {
                 "text": "Subitem 2",
-                "value": "subitem-2",
                 "href": "#"
               },
               {
                 "text": "Subitem 3",
-                "value": "subitem-3",
                 "href": "#"
               }
             ],
@@ -259,17 +250,14 @@
             "items": [
               {
                 "text": "Subitem 1",
-                "value": "subitem-1",
                 "href": "#"
               },
               {
                 "text": "Subitem 2",
-                "value": "subitem-2",
                 "href": "#"
               },
               {
                 "text": "Subitem 3",
-                "value": "subitem-3",
                 "href": "#"
               }
             ],
@@ -283,7 +271,7 @@
   },
   {
     "name": "tree navigation con hasUnderline",
-    "description": 'Usa <code>"hasUnderline": true</code> cuando tienes mezclados, items deshabilitados o sin href e items normales.',
+    "description": "Usa <code>'hasUnderline': true</code> cuando tienes mezclados, items deshabilitados o sin href e items normales.",
     "data": {
       "name": "tree-nav-hasunderline",
       "classes": "mt-base",
@@ -300,34 +288,28 @@
             "items": [
               {
                 "text": "Subitem 1",
-                "value": "subitem-1",
                 "href": "#"
               },
               {
                 "text": "Subitem 2 deshabilitado o sin href",
-                "value": "subitem-2",
                 "href": "#",
                 "disabled": true
               },
               {
                 "text": "Subitem 3",
-                "value": "subitem-3",
                 "href": "#",
                 "sub": {
                   "items": [
                     {
                       "text": "Subitem 1",
-                      "value": "subitem-1",
                       "href": "#"
                     },
                     {
                       "text": "Subitem 2",
-                      "value": "subitem-2",
                       "href": "#"
                     },
                     {
                       "text": "Subitem 3",
-                      "value": "subitem-3",
                       "href": "#",
                       "active": true
                     }
@@ -350,18 +332,15 @@
             "items": [
               {
                 "text": "Subitem 1",
-                "value": "subitem-1",
                 "href": "#"
               },
               {
                 "text": "Subitem 2 deshabilitado o sin href",
-                "value": "subitem-2",
                 "href": "#",
                 "disabled": true
               },
               {
                 "text": "Subitem 3",
-                "value": "subitem-3",
                 "href": "#"
               }
             ],
@@ -378,17 +357,14 @@
             "items": [
               {
                 "text": "Subitem 1",
-                "value": "subitem-1",
                 "href": "#"
               },
               {
                 "text": "Subitem 2",
-                "value": "subitem-2",
                 "href": "#"
               },
               {
                 "text": "Subitem 3",
-                "value": "subitem-3",
                 "href": "#"
               }
             ],
@@ -402,7 +378,7 @@
   },
   {
     "name": "tree navigation link",
-    "description": 'Usa el parámetro <code>"classes": "c-link"</code> en cada item para dar apariencia más visible de links.',
+    "description": "Usa el parámetro <code>'classes': 'c-link'</code> en cada item para dar apariencia más visible de links.",
     "data": {
       "name": "tree-nav-link",
       "classes": "mt-base",
@@ -418,37 +394,31 @@
             "items": [
               {
                 "text": "Subitem 1",
-                "value": "subitem-1",
                 "href": "#",
                 "classes": "c-link"
               },
               {
                 "text": "Subitem 2",
-                "value": "subitem-2",
                 "href": "#",
                 "classes": "c-link"
               },
               {
                 "text": "Subitem 3",
-                "value": "subitem-3",
                 "classes": "c-link",
                  "sub": {
                     "items": [
                       {
                         "text": "Subitem 1",
-                        "value": "subitem-1",
                         "href": "#",
                         "classes": "c-link"
                       },
                       {
                         "text": "Subitem 2",
-                        "value": "subitem-2",
                         "href": "#",
                         "classes": "c-link"
                       },
                       {
                         "text": "Subitem 3",
-                        "value": "subitem-3",
                         "href": "#",
                         "active": true,
                         "classes": "c-link"
@@ -473,19 +443,16 @@
             "items": [
               {
                 "text": "Subitem 1",
-                "value": "subitem-1",
                 "href": "#",
                 "classes": "c-link"
               },
               {
                 "text": "Subitem 2",
-                "value": "subitem-2",
                 "href": "#",
                 "classes": "c-link"
               },
               {
                 "text": "Subitem 3",
-                "value": "subitem-3",
                 "href": "#",
                 "classes": "c-link"
               }
@@ -503,19 +470,16 @@
             "items": [
               {
                 "text": "Subitem 1",
-                "value": "subitem-1",
                 "href": "#",
                 "classes": "c-link"
               },
               {
                 "text": "Subitem 2",
-                "value": "subitem-2",
                 "href": "#",
                 "classes": "c-link"
               },
               {
                 "text": "Subitem 3",
-                "value": "subitem-3",
                 "href": "#",
                 "classes": "c-link"
               }
@@ -528,6 +492,107 @@
       ]
     }
   },
+  {
+    "name": "Tree Nav: Mostrar activo un item del tree con JavaScript",
+    "description": "Puedes usar con javascript la función global <code>activateItemsTree(tree, element,  true)</code>, para mostrar un item activo del tree nav. Ej: Abre la consola del navegador y escribe <code>activateItemsTree('tree-nav-js', 'sub-sub-tree-nav-js-item-1-2-1', true)</code> para mostrar un item del menú activo.",
+    "data": {
+      "name": "tree-navigation-js",
+      "classes": "mt-base",
+      "id": "tree-nav-js",
+      "type": "navigation",
+      "idPrefix": "tree-nav-js-example",
+      "items": [
+        {
+          "text": "Item 1",
+          "id": "tree-nav-js-item-1",
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "href": "index.html"
+              },
+              {
+                "text": "Subitem 2",
+                "href": "#"
+              },
+              {
+                "text": "Subitem 3",
+                "href": "#",
+                 "sub": {
+                    "items": [
+                      {
+                        "text": "Subitem 1",
+                        "href": "#"
+                      },
+                      {
+                        "text": "Subitem 2",
+                        "href": "#"
+                      },
+                      {
+                        "text": "Subitem 3",
+                        "href": "#"
+                      }
+                    ],
+                    "attributes": {
+                      "aria-labelledby": "tree-nav-js-item-3"
+                    }
+                  }
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "tree-nav-js-item-1"
+            }
+          }
+        },
+        {
+          "text": "Item 2",
+          "id": "tree-nav-js-item-2",
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "href": "#"
+              },
+              {
+                "text": "Subitem 2",
+                "href": "#"
+              },
+              {
+                "text": "Subitem 3",
+                "href": "#"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "tree-nav-js-item-2"
+            }
+          }
+        },
+        {
+          "text": "Item 3",
+          "id": "tree-nav-js-item-3",
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "href": "#"
+              },
+              {
+                "text": "Subitem 2",
+                "href": "#"
+              },
+              {
+                "text": "Subitem 3",
+                "href": "#"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "tree-nav-js-item-3"
+            }
+          }
+        }
+      ]
+    }
+  },
   {
     "name": "con pista y error",
     "data": {
@@ -1257,7 +1322,7 @@
   },
   {
     "name": "con un item padre abierto",
-    "description": 'Usa <code>"expanded": true</code>',
+    "description": "Usa <code>'expanded': true</code>",
     "data": {
       "name": "with-a-parent-item-opened",
       "classes": "mt-base",
@@ -1531,7 +1596,7 @@
   },
   {
     "name": "indeterminado",
-    "description": 'Usando el parámetro <code>"isIndeterminate": true</code> podemos crear un item del checkbox que tenga 3 estados: marcado, desmarcado o indeterminado. El estado indeterminado expresa que hay sólo algún item seleccionado pero no todos. Útil para selecciones múltiples.',
+    "description": "Usando el parámetro <code>'isIndeterminate': true</code> podemos crear un item del checkbox que tenga 3 estados: marcado, desmarcado o indeterminado. El estado indeterminado expresa que hay sólo algún item seleccionado pero no todos. Útil para selecciones múltiples.",
     "data": {
       "name": "indeterminate",
       "classes": "mt-base",
@@ -1811,7 +1876,7 @@
   },
   {
     "name": "con searchbar y scroll en el contenedor de árbol",
-    "description": 'Puedes usar las clases de CSS: <code>max-h-64</code> o <code>max-h-40</code> junto a <code>overflow-y-auto</code>, para poner barras de scroll al árbol en caso de que su altura sea muy grande o bien cuando la altura crezca debido a que los items sean expandidos por el usuario.',
+    "description": "Puedes usar las clases de CSS: <code>max-h-64</code> o <code>max-h-40</code> junto a <code>overflow-y-auto</code>, para poner barras de scroll al árbol en caso de que su altura sea muy grande o bien cuando la altura crezca debido a que los items sean expandidos por el usuario.",
     "data": {
       "name": "with-searchbar-scroll",
       "classes": "mt-base max-h-64 overflow-y-auto",
@@ -1997,7 +2062,7 @@
   },
   {
     "name": "con idPrefix",
-    "description": 'Mostrar código para ver el <code>idPrefix</code> aplicado',
+    "description": "Mostrar código para ver el <code>idPrefix</code> aplicado",
     "data": {
       "name": "with-idprefix",
       "classes": "mt-base",
@@ -2036,7 +2101,7 @@
   },
   {
     "name": "con ids individuales",
-    "description": 'Mostrar código para ver los <code>id</code> aplicados',
+    "description": "Mostrar código para ver los <code>id</code> aplicados",
     "data": {
       "name": "with-individual-ids",
       "classes": "mt-base",
@@ -2172,7 +2237,7 @@
   },
   {
     "name": "Mostrar u ocultar un item con JavaScript",
-    "description": 'Puedes usar con javascript la función global <code>activateItemsTree(tree, element, show)</code>, para mostrar u ocultar todos los items, usando el id del elemento, el parámetro <code>show</code> admite <code>true</code> o <code>false</code>, si le pasamos true se se mostrará el item expandido, y si le pasamos false se mostrará cerrado. Ej: Abre la consola del navegador y escribe <code>activateItemsTree("tree-item-js", "tree-item-js-example-item-1", true)</code> para mostrar todos los items expandidos.',
+    "description": "Puedes usar con javascript la función global <code>activateItemsTree(tree, element, show)</code>, para mostrar u ocultar todos los items, usando el id del elemento, el parámetro <code>show</code> admite <code>true</code> o <code>false</code>, si le pasamos true se se mostrará el item expandido, y si le pasamos false se mostrará cerrado. Ej: Abre la consola del navegador y escribe <code>activateItemsTree('tree-item-js', 'tree-item-js-example-item-1', true)</code> para mostrar todos los items expandidos.",
     "data": {
       "name": "tree-item-js",
       "classes": "mt-base",
@@ -2257,7 +2322,7 @@
   },
   {
     "name": "Mostrar u ocultar todos los items con JavaScript",
-    "description": 'Puedes usar con javascript la función global <code>activateItemsTree(tree, elements, show)</code>, para mostrar u ocultar todos los items, usando los id de los elementos, el parámetro <code>show</code> admite <code>true</code> o <code>false</code>, si le pasamos true se se mostrarán todos los items expandidos, y si le pasamos false se mostrarán cerrados. Ej: Abre la consola del navegador y escribe <code>activateItemsTree("tree-multiple-items-js", ["tree-multiple-items-js-1", "tree-multiple-items-js-2"], true)</code> para mostrar todos los items expandidos.',
+    "description": "Puedes usar con javascript la función global <code>activateItemsTree(tree, elements, show)</code>, para mostrar u ocultar todos los items, usando los id de los elementos, el parámetro <code>show</code> admite <code>true</code> o <code>false</code>, si le pasamos true se se mostrarán todos los items expandidos, y si le pasamos false se mostrarán cerrados. Ej: Abre la consola del navegador y escribe <code>activateItemsTree('tree-multiple-items-js', ['tree-multiple-items-js-1', 'tree-multiple-items-js-2'], true)</code> para mostrar todos los items expandidos.",
     "data": {
       "name": "tree-multiple-items-js",
       "classes": "mt-base",
@@ -2342,7 +2407,7 @@
   },
   {
     "name": "Mostrar u ocultar todos los items con JavaScript con diferentes estados",
-    "description": 'Puedes usar con javascript la función global <code>activateItemsTree(tree, elements)</code>, para mostrar u ocultar todos los items, usando los id de los elementos, el parámetro <code>show</code> admite <code>true</code> o <code>false</code>, si le pasamos true se se mostrarán todos los items expandidos, y si le pasamos false se mostrarán cerrados. Ej: Abre la consola del navegador y escribe <code>activateItemsTree("tree-multiple-items-states-js", [["tree-multiple-items-states-item-1", true], ["tree-multiple-items-states-item-3", false]])</code> para mostrar todos los items expandidos.',
+    "description": "Puedes usar con javascript la función global <code>activateItemsTree(tree, elements)</code>, para mostrar u ocultar todos los items, usando los id de los elementos, el parámetro <code>show</code> admite <code>true</code> o <code>false</code>, si le pasamos true se se mostrarán todos los items expandidos, y si le pasamos false se mostrarán cerrados. Ej: Abre la consola del navegador y escribe <code>activateItemsTree('tree-multiple-items-states-js', [['tree-multiple-items-states-item-1', true], ['tree-multiple-items-states-item-3', false]])</code> para mostrar todos los items expandidos.",
     "data": {
       "name": "tree-multiple-items-states-js",
       "classes": "mt-base",
@@ -2427,7 +2492,7 @@
   },
   {
     "name": "Mostrar u ocultar un item con muchos niveles de profundidad con JavaScript ",
-    "description": 'Puedes usar con javascript la función global <code>activateItemsTree(tree, element, show)</code>, para mostrar u ocultar un item, usando el id del elemento, el parámetro <code>show</code> admite <code>true</code> o <code>false</code>, si le pasamos true se se mostrará el item expandido, y si le pasamos false se mostrará cerrado. Ej: Abre la consola del navegador y escribe <code>activateItemsTree("tree-item-deep-js", "sub-sub-sub-tree-item-deep-js-2-2-2-0", true)</code> se abrirá el último elemento del arbol, y el resto de elementos superiores.',
+    "description": "Puedes usar con javascript la función global <code>activateItemsTree(tree, element, show)</code>, para mostrar u ocultar un item, usando el id del elemento, el parámetro <code>show</code> admite <code>true</code> o <code>false</code>, si le pasamos true se se mostrará el item expandido, y si le pasamos false se mostrará cerrado. Ej: Abre la consola del navegador y escribe <code>activateItemsTree('tree-item-deep-js', 'sub-sub-sub-tree-item-deep-js-2-2-2-0', true)</code> se abrirá el último elemento del arbol, y el resto de elementos superiores.",
     "data": {
       "name": "tree-item-deep-js",
       "classes": "mt-base",

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

@@ -69,17 +69,17 @@
         {% if item.href %}
           <a {%- if id %} id="{{ id }}-link"{% endif %} href="{{ item.href }}" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if hasUnderline %} underline{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %} {%- if not item.disabled %} hover:text-primary-base hover:underline{% endif %} {%- if item.disabled %} no-underline pointer-events-none{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %}{%- if item.active %} aria-current="page"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {% if item.target %} target="{{ item.target }}"{% endif %}{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
             {% if item.active %}
-            <strong class="font-bold">{{ item.html | safe if item.html else item.text }}</strong>
+            <strong class="font-bold">{{ item.html | filterquotes | safe if item.html else item.text }}</strong>
             {% else %}
-            {{ item.html | safe if item.html else item.text }}
+            {{ item.html | filterquotes | safe if item.html else item.text }}
             {% endif %}
           </a>
         {% else %}
           <span {%- if id %} id="{{ id }}-link"{% endif %} class="block px-xs {%- if item.classes %} {{ item.classes }}{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
             {% if item.active %}
-            <strong class="font-bold">{{ item.html | safe if item.html else item.text }}</strong>
+            <strong class="font-bold">{{ item.html | filterquotes | safe if item.html else item.text }}</strong>
             {% else %}
-            {{ item.html | safe if item.html else item.text }}
+            {{ item.html | filterquotes | safe if item.html else item.text }}
             {% endif %}
           </span>
         {% endif %}
@@ -169,7 +169,7 @@
   {% if params.searchbar %}
     {{ componentSearchbar(params.searchbar)  }}
   {% endif %}
-  <ul class="c-tree {%- if params.classes %} {{ params.classes }}{% endif %}" id="{% if params.id %}{{ params.id }}{% else %}{{ idPrefix }}{% endif %}" role="tree" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} data-module="c-tree">
+  <ul class="c-tree {%- if params.classes %} {{ params.classes }}{% endif %}" id="{% if params.id %}{{ params.id }}{% else %}{{ idPrefix }}{% endif %}" role="tree" {%- if params.type=='navigation' %} data-tree-navigation{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} data-module="c-tree">
     {% for item in params.items %}
       {% if item %}
         {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
@@ -184,7 +184,7 @@
         {% set itemHintId = id + "-item-hint" if hasHint else "" %}
         {% set itemDescribedBy = describedBy if not hasFieldset else "" %}
         {% set itemDescribedBy = (itemDescribedBy + " " + itemHintId) | trim %}
-    <li id="{{ id }}" class="{%- if t %}{% endif %}c-tree__item ml-4 {%- if params.type=='navigation' %} my-sm {% endif %} focus:outline-none {%- if item.active %} font-bold{% endif %}" role="treeitem" data-module="c-tree__item" {%- if item.sub%}{% if item.expanded %} aria-expanded="true"{% else %} aria-expanded="false"{% endif %}{% endif %}>
+    <li id="{{ id }}" class="c-tree__item ml-4 {%- if params.type=='navigation' %} my-sm {% endif %} focus:outline-none {%- if item.active %} font-bold{% endif %}" role="treeitem" data-module="c-tree__item" {%- if item.sub%}{% if item.expanded %} aria-expanded="true"{% else %} aria-expanded="false"{% endif %}{% endif %}>
       {{ childrenTree(item, id, name, params.type) | trim }}
     </li>
       {% endif %}

package/src/templates/includes/_test-include.njk

@@ -4,10 +4,10 @@
 <div class="p-base border border-neutral-base">
   <p>Este es un include de prueba</p>
   {{ componentTestComponent({
-    "html": 'Este es <strong class="font-bold">un componente de prueba</strong>'
+    "html": "Este es <strong class='font-bold'>un componente de prueba</strong>"
   })  }}
   {% call componentTestComponentCaller({
-    "html": 'Este es un componente <strong class="font-bold ">con caller</strong>'
+    "html": "Este es un componente <strong class='font-bold '>con caller</strong>"
   })  %}
       <div class="w-48 p-2"><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
   {% endcall %}

package/src/templates/pages/_page.footer.njk

@@ -13,7 +13,7 @@
         "text": "Mapa web"
       }
     ],
-    "html": 'Creado por <a href="https://sda.aragon.es/" class="c-link c-link--neutral">SDA Servicios Digitales de Aragón</a>'
+    "html": "'html': 'Creado por <a href='https://sda.aragon.es/' class='c-link c-link--neutral'>SDA Servicios Digitales de Aragón</a>"
   },
   "classes": "mt-lg lg:mt-48"
 })  }}

package/src/templates/pages/_template.logged-selector-subheader.njk

@@ -14,7 +14,7 @@
             {% block subheaderNavigation %}
               <nav aria-label="Volver a la página anterior">
                 {{ componentButton({
-                  "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M37.93 27.93l-35 35a10 10 0 000 14.14l35 35a10 10 0 1014.14-14.14L38.41 84.27A2.5 2.5 0 0140.18 80H130a10 10 0 000-20H40.18a2.5 2.5 0 01-1.77-4.27l13.66-13.66a10 10 0 00-14.14-14.14z" fill="currentColor"></path></svg>Volver',
+                  "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='self-center mr-2' aria-hidden='true' focusable='false' width='1em' height='1em'><path d='M37.93 27.93l-35 35a10 10 0 000 14.14l35 35a10 10 0 1014.14-14.14L38.41 84.27A2.5 2.5 0 0140.18 80H130a10 10 0 000-20H40.18a2.5 2.5 0 01-1.77-4.27l13.66-13.66a10 10 0 00-14.14-14.14z' fill='currentColor'></path></svg>Volver",
                   "classes": "c-button--transparent c-button--sm",
                   "href": "/"
                 })  }}