desy-html 11.2.0 → 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"
               }
@@ -530,7 +494,7 @@
   },
   {
     "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.',
+    "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",
@@ -545,33 +509,27 @@
             "items": [
               {
                 "text": "Subitem 1",
-                "value": "subitem-1",
                 "href": "index.html"
               },
               {
                 "text": "Subitem 2",
-                "value": "subitem-2",
                 "href": "#"
               },
               {
                 "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": "#"
                       }
                     ],
@@ -593,17 +551,14 @@
             "items": [
               {
                 "text": "Subitem 1",
-                "value": "subitem-1",
                 "href": "#"
               },
               {
                 "text": "Subitem 2",
-                "value": "subitem-2",
                 "href": "#"
               },
               {
                 "text": "Subitem 3",
-                "value": "subitem-3",
                 "href": "#"
               }
             ],
@@ -619,17 +574,14 @@
             "items": [
               {
                 "text": "Subitem 1",
-                "value": "subitem-1",
                 "href": "#"
               },
               {
                 "text": "Subitem 2",
-                "value": "subitem-2",
                 "href": "#"
               },
               {
                 "text": "Subitem 3",
-                "value": "subitem-3",
                 "href": "#"
               }
             ],
@@ -1370,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",
@@ -1644,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",
@@ -1924,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",
@@ -2110,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",
@@ -2149,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",
@@ -2285,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",
@@ -2370,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",
@@ -2455,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",
@@ -2540,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 %}

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": "/"
                 })  }}