desy-html 11.2.0 → 12.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/_global.foot.njk +1 -1
- package/docs/_macro.example-render.njk +62 -18
- package/docs/ds/_ds.section.textos.njk +1 -1
- package/docs/index.html +10 -0
- package/docs/pagina-prueba.html +2 -2
- package/package.json +2 -2
- package/src/css/component.text.css +0 -1
- package/src/js/aria/utils.js +80 -15
- package/src/js/desy-html.js +239 -196
- package/src/js/filters/filter-caller.js +4 -2
- package/src/js/filters/filter-escape-ltgt.js +7 -0
- package/src/js/filters/filter-quotes.js +50 -0
- package/src/js/filters/filter-version.js +8 -0
- package/src/js/filters/index.js +7 -1
- package/src/templates/components/accordion/_examples.accordion.njk +107 -107
- package/src/templates/components/accordion/_template.accordion.njk +5 -5
- package/src/templates/components/accordion-history/_examples.accordion-history.njk +119 -119
- package/src/templates/components/accordion-history/_template.accordion-history.njk +11 -11
- package/src/templates/components/alert/_examples.alert.njk +2 -2
- package/src/templates/components/breadcrumbs/_examples.breadcrumbs.njk +4 -4
- package/src/templates/components/breadcrumbs/_template.breadcrumbs.njk +4 -4
- package/src/templates/components/button/_examples.button.njk +19 -19
- package/src/templates/components/button/_template.button.njk +2 -2
- package/src/templates/components/button-loader/_examples.button-loader.njk +17 -17
- package/src/templates/components/button-loader/_template.button-loader.njk +2 -2
- package/src/templates/components/card/_examples.card.njk +3 -3
- package/src/templates/components/card/_template.card.njk +4 -4
- package/src/templates/components/character-count/_examples.character-count.njk +2 -2
- package/src/templates/components/checkboxes/_examples.checkboxes.njk +6 -6
- package/src/templates/components/checkboxes/_template.checkboxes.njk +2 -2
- package/src/templates/components/collapsible/_examples.collapsible.njk +4 -4
- package/src/templates/components/collapsible/_template.collapsible.njk +1 -1
- package/src/templates/components/date-input/_template.date-input.njk +1 -1
- package/src/templates/components/datepicker/_examples.datepicker.njk +45 -62
- package/src/templates/components/datepicker/_styles.datepicker.css +4 -0
- package/src/templates/components/datepicker/_template.datepicker.njk +10 -2
- package/src/templates/components/description-list/_examples.description-list.njk +3 -3
- package/src/templates/components/description-list/_template.description-list.njk +2 -2
- package/src/templates/components/details/_examples.details.njk +3 -3
- package/src/templates/components/details/_template.details.njk +1 -1
- package/src/templates/components/dialog/_examples.dialog.njk +4 -4
- package/src/templates/components/dropdown/_examples.dropdown.njk +31 -17
- package/src/templates/components/dropdown/_template.dropdown.njk +1 -1
- package/src/templates/components/error-message/_examples.error-message.njk +1 -1
- package/src/templates/components/error-message/_template.error-message.njk +1 -1
- package/src/templates/components/error-summary/_template.error-summary.njk +2 -2
- package/src/templates/components/fieldset/_examples.fieldset.njk +3 -3
- package/src/templates/components/fieldset/_template.fieldset.njk +7 -7
- package/src/templates/components/footer/_examples.footer.njk +32 -32
- package/src/templates/components/footer/_template.footer.njk +6 -6
- package/src/templates/components/header/_examples.header.njk +14 -8
- package/src/templates/components/header/_template.header.header__navigation.njk +2 -2
- package/src/templates/components/header/_template.header.header__offcanvasButton.njk +1 -1
- package/src/templates/components/header/_template.header.header__subnav.njk +1 -1
- package/src/templates/components/header/_template.header.njk +2 -2
- package/src/templates/components/header-advanced/_examples.header-advanced.njk +14 -8
- package/src/templates/components/header-advanced/_template.header-advanced.njk +3 -3
- package/src/templates/components/header-mini/_examples.header-mini.njk +3 -3
- package/src/templates/components/header-mini/_template.header-mini.njk +2 -2
- package/src/templates/components/hint/_examples.hint.njk +1 -1
- package/src/templates/components/hint/_template.hint.njk +1 -1
- package/src/templates/components/input/_examples.input.njk +7 -7
- package/src/templates/components/input-group/_examples.input-group.njk +1 -1
- package/src/templates/components/input-group/_template.input-group.njk +1 -1
- package/src/templates/components/item/_examples.item.njk +23 -23
- package/src/templates/components/item/_template.item.njk +9 -9
- package/src/templates/components/label/_examples.label.njk +2 -2
- package/src/templates/components/label/_template.label.njk +1 -1
- package/src/templates/components/links-list/_examples.links-list.njk +29 -32
- package/src/templates/components/links-list/_template.links-list.njk +11 -11
- package/src/templates/components/listbox/_examples.listbox.njk +16 -16
- package/src/templates/components/listbox/_template.listbox.njk +3 -3
- package/src/templates/components/media-object/_examples.media-object.njk +5 -5
- package/src/templates/components/menu-horizontal/_examples.menu-horizontal.njk +16 -16
- package/src/templates/components/menu-horizontal/_template.menu-horizontal.njk +2 -2
- package/src/templates/components/menu-navigation/_examples.menu-navigation.njk +6 -6
- package/src/templates/components/menu-navigation/_template.menu-navigation.njk +4 -4
- package/src/templates/components/menu-vertical/_examples.menu-vertical.njk +8 -8
- package/src/templates/components/menu-vertical/_template.menu-vertical.njk +9 -9
- package/src/templates/components/menubar/_examples.menubar.njk +16 -16
- package/src/templates/components/menubar/_template.menubar.njk +7 -7
- package/src/templates/components/modal/_examples.modal.njk +18 -18
- package/src/templates/components/modal/_template.modal.njk +8 -8
- package/src/templates/components/nav/_examples.nav.njk +7 -7
- package/src/templates/components/nav/_template.nav.njk +2 -2
- package/src/templates/components/notification/_examples.notification.njk +9 -9
- package/src/templates/components/notification/_template.notification.njk +11 -11
- package/src/templates/components/pagination/_examples.pagination.njk +6 -6
- package/src/templates/components/pagination/_template.pagination.njk +3 -3
- package/src/templates/components/pill/_examples.pill.njk +8 -8
- package/src/templates/components/pill/_template.pill.njk +3 -3
- package/src/templates/components/radios/_examples.radios.njk +2 -2
- package/src/templates/components/radios/_template.radios.njk +1 -1
- package/src/templates/components/select/_examples.select.njk +1 -1
- package/src/templates/components/skip-link/_examples.skip-link.njk +1 -1
- package/src/templates/components/skip-link/_template.skip-link.njk +1 -1
- package/src/templates/components/status/_examples.status.njk +1 -1
- package/src/templates/components/status/_template.status.njk +1 -1
- package/src/templates/components/status-item/_examples.status-item.njk +15 -15
- package/src/templates/components/status-item/_template.status-item.njk +3 -3
- package/src/templates/components/table/_examples.table.njk +3 -3
- package/src/templates/components/table/_template.table.njk +2 -2
- package/src/templates/components/table-advanced/_examples.table-advanced.njk +7 -7
- package/src/templates/components/table-advanced/_template.table-advanced.njk +5 -5
- package/src/templates/components/tabs/_examples.tabs.njk +19 -19
- package/src/templates/components/tabs/_styles.tabs.css +2 -2
- package/src/templates/components/tabs/_template.tabs.njk +7 -7
- package/src/templates/components/textarea/_examples.textarea.njk +2 -2
- package/src/templates/components/toggle/_examples.toggle.njk +29 -29
- package/src/templates/components/toggle/_template.toggle.njk +2 -2
- package/src/templates/components/tooltip/_examples.tooltip.njk +11 -11
- package/src/templates/components/tooltip/_template.tooltip.njk +3 -3
- package/src/templates/components/tree/_examples.tree.njk +12 -60
- package/src/templates/components/tree/_template.tree.njk +4 -4
- package/src/templates/includes/_test-include.njk +2 -2
- package/src/templates/pages/_page.footer.njk +1 -1
- package/src/templates/pages/_template.logged-selector-subheader.njk +1 -1
|
@@ -142,11 +142,11 @@
|
|
|
142
142
|
{% if loop.first and params.firstCellIsHeader %}
|
|
143
143
|
<th scope="row" class="px-base py-xs border-neutral-base border-b-0 border-r text-left font-normal text-sm text-neutral-dark{%- if cell.classes %} {{ cell.classes }}{% endif %}"
|
|
144
144
|
{{- commonAttributes | safe -}}
|
|
145
|
-
>{{ cell.html | safe if cell.html else cell.text }}</th>
|
|
145
|
+
>{{ cell.html | filterquotes | safe if cell.html else cell.text }}</th>
|
|
146
146
|
{% else %}
|
|
147
147
|
<td tabindex="-1" class="px-base py-sm {%- if cell.classes %} {{ cell.classes }}{% endif %}"
|
|
148
148
|
{{- commonAttributes | safe -}}
|
|
149
|
-
>{{ cell.html | safe if cell.html else cell.text }}</td>
|
|
149
|
+
>{{ cell.html | filterquotes | safe if cell.html else cell.text }}</td>
|
|
150
150
|
{% endif %}
|
|
151
151
|
{% endfor %}
|
|
152
152
|
</tr>
|
|
@@ -155,7 +155,7 @@
|
|
|
155
155
|
</tbody>
|
|
156
156
|
<tfoot>
|
|
157
157
|
{% for row in params.foot %}
|
|
158
|
-
{%- set idCheckbox = idPrefix + "-checkbox-" + loop.index0 -%}
|
|
158
|
+
{%- set idCheckbox = idPrefix + "-tfoot-checkbox-" + loop.index0 -%}
|
|
159
159
|
{% if row %}
|
|
160
160
|
<tr class="border-t-2 border-b border-neutral-base hover:bg-neutral-lighter">
|
|
161
161
|
{% if params.hasCheckboxes %}
|
|
@@ -182,11 +182,11 @@
|
|
|
182
182
|
{% if loop.first and params.firstCellIsHeader %}
|
|
183
183
|
<th scope="row" class="px-base py-xs border-neutral-base border-b-0 border-r text-left font-normal text-sm text-neutral-dark{%- if cell.classes %} {{ cell.classes }}{% endif %}"
|
|
184
184
|
{{- commonAttributes | safe -}}
|
|
185
|
-
>{{ cell.html | safe if cell.html else cell.text }}</th>
|
|
185
|
+
>{{ cell.html | filterquotes | safe if cell.html else cell.text }}</th>
|
|
186
186
|
{% else %}
|
|
187
187
|
<td tabindex="-1" class="px-base py-sm {%- if cell.classes %} {{ cell.classes }}{% endif %}"
|
|
188
188
|
{{- commonAttributes | safe -}}
|
|
189
|
-
>{{ cell.html | safe if cell.html else cell.text }}</td>
|
|
189
|
+
>{{ cell.html | filterquotes | safe if cell.html else cell.text }}</td>
|
|
190
190
|
{% endif %}
|
|
191
191
|
{% endfor %}
|
|
192
192
|
</tr>
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
},
|
|
39
39
|
{
|
|
40
40
|
"name": "con encabezado",
|
|
41
|
-
"description":
|
|
41
|
+
"description": "Usa el parámetro <code>'headingLevel'</code> para establecer el nivel del encabezado. Por ejemplo: <code>'headingLevel': 3</code> creará un encabezado <code><h3></code>.",
|
|
42
42
|
"data": {
|
|
43
43
|
"title": "Título con h3",
|
|
44
44
|
"headingLevel": 3,
|
|
@@ -79,25 +79,25 @@
|
|
|
79
79
|
"idPrefix": "tab-example-html",
|
|
80
80
|
"items": [
|
|
81
81
|
{
|
|
82
|
-
"html":
|
|
82
|
+
"html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 mr-xs' aria-label='Archivo' role='img' focusable='false'><path d='M89.355 12.518l26.46 26.46a2.917 2.917 0 01.852 2.06v84.379a2.917 2.917 0 01-2.917 2.916h-87.5a2.917 2.917 0 01-2.917-2.916V14.583a2.917 2.917 0 012.917-2.916h61.046a2.917 2.917 0 012.059.851zM90.918 0H23.333a11.667 11.667 0 00-11.666 11.667v116.666A11.667 11.667 0 0023.333 140h93.334a11.667 11.667 0 0011.666-11.667V37.415a5.833 5.833 0 00-1.709-4.124L95.042 1.709A5.833 5.833 0 0090.918 0z' fill='currentColor'/><path d='M93.333 64.167h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM93.333 87.5h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM67.083 110.833h-26.25a5.833 5.833 0 010-11.666h26.25a5.833 5.833 0 010 11.666z' fill='currentColor'/></svg> Tab 1",
|
|
83
83
|
"panel": {
|
|
84
84
|
"html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
|
|
85
85
|
}
|
|
86
86
|
},
|
|
87
87
|
{
|
|
88
|
-
"html":
|
|
88
|
+
"html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 mr-xs' aria-label='Link' role='img' focusable='false'><path d='M72.368 86.946a5.833 5.833 0 00-3.167 7.624 5.833 5.833 0 01-1.266 6.358l-16.497 16.503a11.667 11.667 0 01-16.496 0l-12.379-12.373a11.667 11.667 0 010-16.502l16.52-16.497a5.91 5.91 0 016.364-1.266 5.834 5.834 0 004.451-10.786 17.698 17.698 0 00-19.063 3.804l-16.52 16.497a23.368 23.368 0 000 32.999l12.378 12.372a23.333 23.333 0 0032.994 0l16.502-16.496a17.547 17.547 0 003.798-19.075 5.833 5.833 0 00-7.619-3.162z' fill='currentColor'/><path d='M45.25 94.74a5.897 5.897 0 008.247 0l45.378-45.373a5.833 5.833 0 00-8.248-8.248L45.249 86.491a5.833 5.833 0 000 8.248z' fill='currentColor'/><path d='M125.685 26.682l-12.373-12.373a23.368 23.368 0 00-32.999 0L63.811 30.806a17.535 17.535 0 00-3.798 19.069A5.835 5.835 0 1070.8 45.418a5.833 5.833 0 011.266-6.335l16.497-16.496a11.667 11.667 0 0116.502 0l12.373 12.372a11.667 11.667 0 010 16.503l-16.52 16.467a5.92 5.92 0 01-6.364 1.266 5.836 5.836 0 00-4.463 10.786 17.652 17.652 0 0019.075-3.798l16.497-16.496a23.374 23.374 0 00.023-33.005z' fill='currentColor'/></svg> Tab 2",
|
|
89
89
|
"panel": {
|
|
90
90
|
"html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
|
|
91
91
|
}
|
|
92
92
|
},
|
|
93
93
|
{
|
|
94
|
-
"html":
|
|
94
|
+
"html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 mr-xs' aria-label='Solicitud' role='img' focusable='false'><path d='M96.25 52.5h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 000-8.75zM100.625 77.286a4.375 4.375 0 00-4.375-4.375h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 004.375-4.375zM58.333 37.917h23.334a5.833 5.833 0 005.833-5.834V17.5A17.54 17.54 0 0065.287.624 17.762 17.762 0 0052.5 18.007v14.076a5.833 5.833 0 005.833 5.834zm7.292-21.875A4.375 4.375 0 1170 20.417a4.375 4.375 0 01-4.375-4.381z' fill='currentColor'/><path d='M113.75 17.5H97.708a1.458 1.458 0 00-1.458 1.458v8.75a1.458 1.458 0 001.458 1.459h13.125a2.917 2.917 0 012.917 2.916v74.62a2.917 2.917 0 01-.852 2.065l-18.713 18.708a2.917 2.917 0 01-2.06.851H29.168a2.917 2.917 0 01-2.917-2.916V32.083a2.917 2.917 0 012.917-2.916h13.125a1.458 1.458 0 001.458-1.459v-8.75a1.458 1.458 0 00-1.458-1.458H26.25a11.667 11.667 0 00-11.667 11.667v99.166A11.667 11.667 0 0026.25 140h87.5a11.667 11.667 0 0011.667-11.667V29.167A11.667 11.667 0 00113.75 17.5z' fill='currentColor'/><path d='M43.75 93.333a4.375 4.375 0 000 8.75h21.875a4.375 4.375 0 000-8.75z' fill='currentColor'/></svg> Tab 3",
|
|
95
95
|
"panel": {
|
|
96
96
|
"html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
|
|
97
97
|
}
|
|
98
98
|
},
|
|
99
99
|
{
|
|
100
|
-
"html":
|
|
100
|
+
"html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 mr-xs' aria-label='Borrar' role='img' focusable='false'><g fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M100.625 122.5h-61.25a8.75 8.75 0 0 1-8.75-8.75V35h78.75v78.75a8.75 8.75 0 0 1-8.75 8.75zM56.875 96.25v-35M83.125 96.25v-35M13.125 35h113.75M83.125 17.5h-26.25a8.75 8.75 0 0 0-8.75 8.75V35h43.75v-8.75a8.75 8.75 0 0 0-8.75-8.75z' stroke-width='8.749995'/></g></svg> Tab 4",
|
|
101
101
|
"panel": {
|
|
102
102
|
"html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
|
|
103
103
|
}
|
|
@@ -141,7 +141,7 @@
|
|
|
141
141
|
},
|
|
142
142
|
{
|
|
143
143
|
"name": "con item activo",
|
|
144
|
-
"description":
|
|
144
|
+
"description": "Añade <code>active: true</code> a una tab para mostrarla activa inicialmente. También puedes usar con javascript la función global <code>activateItemTabs(elementMenu, idItemSeleccionado)</code> para seleccionar una tab y su panel, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemTabs('tabs-active', 'tab-example-active-3')</code> para desactivar la tab actual y activar la tercera tab de este ejemplo.",
|
|
145
145
|
"data": {
|
|
146
146
|
"tablistAriaLabel": "Ejemplo de tab",
|
|
147
147
|
"idPrefix": "tab-example-active",
|
|
@@ -260,7 +260,7 @@
|
|
|
260
260
|
},
|
|
261
261
|
{
|
|
262
262
|
"name": "con scroll en móvil",
|
|
263
|
-
"description":
|
|
263
|
+
"description": "Usa <code>.c-tabs--scroll</code> para hacer que la apariencia en móvil sea la misma que en escritorio. Prueba a mirarlo en breakpoints pequeños y verás que aparece un scroll horizontal.",
|
|
264
264
|
"data": {
|
|
265
265
|
"tablistAriaLabel": "Ejemplo de tab",
|
|
266
266
|
"idPrefix": "tab-example-scroll-mobile",
|
|
@@ -342,26 +342,26 @@
|
|
|
342
342
|
}
|
|
343
343
|
},
|
|
344
344
|
{
|
|
345
|
-
"name": "con html en tabs",
|
|
345
|
+
"name": "con html en tabs para mobile",
|
|
346
346
|
"data": {
|
|
347
347
|
"tablistAriaLabel": "Ejemplo de tab",
|
|
348
348
|
"idPrefix": "tab-example-html-stacked",
|
|
349
349
|
"classes": "c-tabs--scroll",
|
|
350
350
|
"items": [
|
|
351
351
|
{
|
|
352
|
-
"html":
|
|
352
|
+
"html": "<span class='block'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='block w-8 h-8 mx-auto mb-sm' aria-label='Archivo' role='img' focusable='false'><path d='M89.355 12.518l26.46 26.46a2.917 2.917 0 01.852 2.06v84.379a2.917 2.917 0 01-2.917 2.916h-87.5a2.917 2.917 0 01-2.917-2.916V14.583a2.917 2.917 0 012.917-2.916h61.046a2.917 2.917 0 012.059.851zM90.918 0H23.333a11.667 11.667 0 00-11.666 11.667v116.666A11.667 11.667 0 0023.333 140h93.334a11.667 11.667 0 0011.666-11.667V37.415a5.833 5.833 0 00-1.709-4.124L95.042 1.709A5.833 5.833 0 0090.918 0z' fill='currentColor'/><path d='M93.333 64.167h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM93.333 87.5h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM67.083 110.833h-26.25a5.833 5.833 0 010-11.666h26.25a5.833 5.833 0 010 11.666z' fill='currentColor'/></svg><span class='block mx-auto'>Tab 1</span></span>",
|
|
353
353
|
"panel": {
|
|
354
354
|
"html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
|
|
355
355
|
}
|
|
356
356
|
},
|
|
357
357
|
{
|
|
358
|
-
"html":
|
|
358
|
+
"html": "<span class='block'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='block w-8 h-8 mx-auto mb-sm' aria-label='Archivo' role='img' focusable='false'><path d='M72.368 86.946a5.833 5.833 0 00-3.167 7.624 5.833 5.833 0 01-1.266 6.358l-16.497 16.503a11.667 11.667 0 01-16.496 0l-12.379-12.373a11.667 11.667 0 010-16.502l16.52-16.497a5.91 5.91 0 016.364-1.266 5.834 5.834 0 004.451-10.786 17.698 17.698 0 00-19.063 3.804l-16.52 16.497a23.368 23.368 0 000 32.999l12.378 12.372a23.333 23.333 0 0032.994 0l16.502-16.496a17.547 17.547 0 003.798-19.075 5.833 5.833 0 00-7.619-3.162z' fill='currentColor'/><path d='M45.25 94.74a5.897 5.897 0 008.247 0l45.378-45.373a5.833 5.833 0 00-8.248-8.248L45.249 86.491a5.833 5.833 0 000 8.248z' fill='currentColor'/><path d='M125.685 26.682l-12.373-12.373a23.368 23.368 0 00-32.999 0L63.811 30.806a17.535 17.535 0 00-3.798 19.069A5.835 5.835 0 1070.8 45.418a5.833 5.833 0 011.266-6.335l16.497-16.496a11.667 11.667 0 0116.502 0l12.373 12.372a11.667 11.667 0 010 16.503l-16.52 16.467a5.92 5.92 0 01-6.364 1.266 5.836 5.836 0 00-4.463 10.786 17.652 17.652 0 0019.075-3.798l16.497-16.496a23.374 23.374 0 00.023-33.005z' fill='currentColor'/></svg><span class='block mx-auto'>Tab 2</span></span>",
|
|
359
359
|
"panel": {
|
|
360
360
|
"html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
|
|
361
361
|
}
|
|
362
362
|
},
|
|
363
363
|
{
|
|
364
|
-
"html":
|
|
364
|
+
"html": "<span class='block'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='block w-8 h-8 mx-auto mb-sm' aria-label='Archivo' role='img' focusable='false'><path d='M96.25 52.5h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 000-8.75zM100.625 77.286a4.375 4.375 0 00-4.375-4.375h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 004.375-4.375zM58.333 37.917h23.334a5.833 5.833 0 005.833-5.834V17.5A17.54 17.54 0 0065.287.624 17.762 17.762 0 0052.5 18.007v14.076a5.833 5.833 0 005.833 5.834zm7.292-21.875A4.375 4.375 0 1170 20.417a4.375 4.375 0 01-4.375-4.381z' fill='currentColor'/><path d='M113.75 17.5H97.708a1.458 1.458 0 00-1.458 1.458v8.75a1.458 1.458 0 001.458 1.459h13.125a2.917 2.917 0 012.917 2.916v74.62a2.917 2.917 0 01-.852 2.065l-18.713 18.708a2.917 2.917 0 01-2.06.851H29.168a2.917 2.917 0 01-2.917-2.916V32.083a2.917 2.917 0 012.917-2.916h13.125a1.458 1.458 0 001.458-1.459v-8.75a1.458 1.458 0 00-1.458-1.458H26.25a11.667 11.667 0 00-11.667 11.667v99.166A11.667 11.667 0 0026.25 140h87.5a11.667 11.667 0 0011.667-11.667V29.167A11.667 11.667 0 00113.75 17.5z' fill='currentColor'/><path d='M43.75 93.333a4.375 4.375 0 000 8.75h21.875a4.375 4.375 0 000-8.75z' fill='currentColor'/></svg><span class='block mx-auto'>Tab 3</span></span>",
|
|
365
365
|
"panel": {
|
|
366
366
|
"html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
|
|
367
367
|
}
|
|
@@ -412,35 +412,35 @@
|
|
|
412
412
|
},
|
|
413
413
|
{
|
|
414
414
|
"name": "Con aspecto de Links list",
|
|
415
|
-
"description":
|
|
415
|
+
"description": "Usa la clase <code>.tabs--reset</code> para quitar los estilos por defecto de los tabs. Luego añade una clase modificadora propia de tu proyecto, o bien, esta de este ejemplo llamada <code>.tabs--list</code> para dar estilo a los elementos. Añade estilos adicionales con los parámetros <code>tablistClasses</code> y <code>panel.classes</code> para posicionar y tener mayor control del estilo de los elementos.",
|
|
416
416
|
"data": {
|
|
417
417
|
"tablistClasses": "flex flex-col col-span-2 lg:col-span-1 lg:divide-y lg:divide-neutral-base mb-base lg:mb-0",
|
|
418
418
|
"tablistAriaLabel": "Ejemplo de tab con aspecto de links list dispuesto en horizontal",
|
|
419
419
|
"idPrefix": "tab-links-list",
|
|
420
420
|
"items": [
|
|
421
421
|
{
|
|
422
|
-
"html":
|
|
422
|
+
"html": "<span class='flex w-full'><span class='flex gap-base justify-between items-center flex-1 c-link'>Tab 1</span><span class='block self-center h-full text-primary-base'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='hidden lg:block self-center' aria-hidden='true' focusable='false' width='1em' height='1em'><path d='M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z' fill='currentColor'></path></svg></span></span>",
|
|
423
423
|
"panel": {
|
|
424
424
|
"html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>",
|
|
425
425
|
"classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
|
|
426
426
|
}
|
|
427
427
|
},
|
|
428
428
|
{
|
|
429
|
-
"html":
|
|
429
|
+
"html": "<span class='flex w-full'><span class='flex gap-base justify-between items-center flex-1 c-link'>Tab 2</span><span class='block self-center h-full text-primary-base'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='hidden lg:block self-center' aria-hidden='true' focusable='false' width='1em' height='1em'><path d='M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z' fill='currentColor'></path></svg></span></span>",
|
|
430
430
|
"panel": {
|
|
431
431
|
"html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
|
|
432
432
|
"classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
|
|
433
433
|
}
|
|
434
434
|
},
|
|
435
435
|
{
|
|
436
|
-
"html":
|
|
436
|
+
"html": "<span class='flex w-full'><span class='flex gap-base justify-between items-center flex-1 c-link'>Tab 3</span><span class='block self-center h-full text-primary-base'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='hidden lg:block self-center' aria-hidden='true' focusable='false' width='1em' height='1em'><path d='M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z' fill='currentColor'></path></svg></span></span>",
|
|
437
437
|
"panel": {
|
|
438
438
|
"html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
|
|
439
439
|
"classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
|
|
440
440
|
}
|
|
441
441
|
},
|
|
442
442
|
{
|
|
443
|
-
"html":
|
|
443
|
+
"html": "<span class='flex w-full'><span class='flex gap-base justify-between items-center flex-1 c-link'>Tab 4</span><span class='block self-center h-full text-primary-base'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='hidden lg:block self-center' aria-hidden='true' focusable='false' width='1em' height='1em'><path d='M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z' fill='currentColor'></path></svg></span></span>",
|
|
444
444
|
"panel": {
|
|
445
445
|
"html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
|
|
446
446
|
"classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
|
|
@@ -455,7 +455,7 @@
|
|
|
455
455
|
},
|
|
456
456
|
{
|
|
457
457
|
"name": "con ids individuales",
|
|
458
|
-
"description":
|
|
458
|
+
"description": "Mostrar código para ver los <code>id</code> aplicados",
|
|
459
459
|
"data": {
|
|
460
460
|
"tablistAriaLabel": "Ejemplo de tab",
|
|
461
461
|
"items": [
|
|
@@ -500,14 +500,14 @@
|
|
|
500
500
|
"text": "Cambios",
|
|
501
501
|
"id": "tab-example-a-2",
|
|
502
502
|
"panel": {
|
|
503
|
-
"html":
|
|
503
|
+
"html": "<div class='mb-base p-base bg-warning-light'><ul class='c-ul mb-0'><li><p>Ley 38/2003, de 17 de noviembre, General de Subvenciones. (BOE nº 276 de 18 de noviembre de 2003) y su Reglamento de desarrollo aprobado por Real Decreto 887/2006, de 21 de julio. </p><p><a href='#' class='c-link text-sm'>Ver detalles de la normativa</a></p></li><li>Ley 5/2015, de 25 de marzo, de Subvenciones de Aragón. (BOA nº 68 de 10 de abril de 2015). <br><a href='#' class='c-link text-sm'>Ver detalles de la normativa</a></li></ul></div><div class='flex items-baseline'><p class='flex-1 text-sm text-neutral-dark'>Cambios realizados hace 2 horas</p><div class='ml-auto'><button class='c-button c-button--transparent'>Descartar</button><button class='c-button c-button--transparent'>Editar</button></div></div>"
|
|
504
504
|
}
|
|
505
505
|
},
|
|
506
506
|
{
|
|
507
507
|
"text": "Ver original",
|
|
508
508
|
"id": "tab-example-b-2",
|
|
509
509
|
"panel": {
|
|
510
|
-
"html":
|
|
510
|
+
"html": "<div class='mb-base p-base'><ul class='c-ul mb-0'><li><p>Ley 38/2003, de 17 de noviembre, General de Subvenciones. (BOE nº 276 de 11 de diciembre de 2020) y su Reglamento de desarrollo aprobado por Real Decreto 887/2006, de 21 de julio.</p><p><a href='#' class='c-link text-sm'>Ver detalles de la normativa</a></p></li><li>Ley 5/2015, de 25 de marzo, de Subvenciones de Aragón. (BOA nº 68 de 10 de abril de 2015). <br><a href='#' class='c-link text-sm'>Ver detalles de la normativa</a></li></ul></div><p class='text-sm text-neutral-dark'>Texto original</p>"
|
|
511
511
|
}
|
|
512
512
|
}
|
|
513
513
|
]
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
@apply lg:sr-only;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
.c-tabs:not(.c-tabs--reset)
|
|
30
|
+
.c-tabs--scroll:not(.c-tabs--reset) {
|
|
31
31
|
.c-tabs__heading {
|
|
32
32
|
@apply sr-only;
|
|
33
33
|
}
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
.c-tabs__link {
|
|
40
|
-
@apply snap-start
|
|
40
|
+
@apply snap-start px-lg py-base border;
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
.c-tabs__link--is-active {
|
|
@@ -46,21 +46,21 @@
|
|
|
46
46
|
{% for attribute, value in item.panel.attributes %} {{attribute}}="{{value}}"{% endfor %}>
|
|
47
47
|
<div class="c-tabs__panel-heading">
|
|
48
48
|
{% if params.headingLevel == "1" %}
|
|
49
|
-
<h2 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | safe if item.html else item.text }}</h2>
|
|
49
|
+
<h2 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | filterquotes | safe if item.html else item.text }}</h2>
|
|
50
50
|
{% elseif params.headingLevel == "2" %}
|
|
51
|
-
<h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | safe if item.html else item.text }}</h3>
|
|
51
|
+
<h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | filterquotes | safe if item.html else item.text }}</h3>
|
|
52
52
|
{% elseif params.headingLevel == "3" %}
|
|
53
|
-
<h4 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | safe if item.html else item.text }}</h4>
|
|
53
|
+
<h4 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | filterquotes | safe if item.html else item.text }}</h4>
|
|
54
54
|
{% elseif params.headingLevel == "4" %}
|
|
55
|
-
<h5 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | safe if item.html else item.text }}</h5>
|
|
55
|
+
<h5 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | filterquotes | safe if item.html else item.text }}</h5>
|
|
56
56
|
{% elseif params.headingLevel == "5" %}
|
|
57
|
-
<h6 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | safe if item.html else item.text }}</h6>
|
|
57
|
+
<h6 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | filterquotes | safe if item.html else item.text }}</h6>
|
|
58
58
|
{% else %}
|
|
59
|
-
<h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | safe if item.html else item.text }}</h3>
|
|
59
|
+
<h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | filterquotes | safe if item.html else item.text }}</h3>
|
|
60
60
|
{% endif %}
|
|
61
61
|
</div>
|
|
62
62
|
{% if item.panel.html %}
|
|
63
|
-
{{ item.panel.html | safe }}
|
|
63
|
+
{{ item.panel.html | filterquotes | safe }}
|
|
64
64
|
{% else %}
|
|
65
65
|
<p>{{ item.panel.text }}</p>
|
|
66
66
|
{% endif %}
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
},
|
|
65
65
|
{
|
|
66
66
|
"name": "con label como encabezado",
|
|
67
|
-
"description":
|
|
67
|
+
"description": "Utiliza el parámetro <code>'isPageheading': true</code> para que el label esté dentro de un encabezado. Usa el parámetro <code>'headingLevel'</code> para establecer el nivel del encabezado. Por ejemplo: <code>'headingLevel': 3</code> creará un encabezado <code><h3></code>.",
|
|
68
68
|
"data": {
|
|
69
69
|
"id": "textarea-with-page-heading-a",
|
|
70
70
|
"name": "address",
|
|
@@ -101,7 +101,7 @@
|
|
|
101
101
|
{
|
|
102
102
|
"name": "placeholder",
|
|
103
103
|
"data": {
|
|
104
|
-
"id": "placeholder",
|
|
104
|
+
"id": "con-placeholder",
|
|
105
105
|
"name": "placeholder",
|
|
106
106
|
"label": {
|
|
107
107
|
"text": "Valor"
|