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.
Files changed (117) hide show
  1. package/docs/_global.foot.njk +1 -1
  2. package/docs/_macro.example-render.njk +62 -18
  3. package/docs/ds/_ds.section.textos.njk +1 -1
  4. package/docs/index.html +10 -0
  5. package/docs/pagina-prueba.html +2 -2
  6. package/package.json +2 -2
  7. package/src/css/component.text.css +0 -1
  8. package/src/js/aria/utils.js +80 -15
  9. package/src/js/desy-html.js +239 -196
  10. package/src/js/filters/filter-caller.js +4 -2
  11. package/src/js/filters/filter-escape-ltgt.js +7 -0
  12. package/src/js/filters/filter-quotes.js +50 -0
  13. package/src/js/filters/filter-version.js +8 -0
  14. package/src/js/filters/index.js +7 -1
  15. package/src/templates/components/accordion/_examples.accordion.njk +107 -107
  16. package/src/templates/components/accordion/_template.accordion.njk +5 -5
  17. package/src/templates/components/accordion-history/_examples.accordion-history.njk +119 -119
  18. package/src/templates/components/accordion-history/_template.accordion-history.njk +11 -11
  19. package/src/templates/components/alert/_examples.alert.njk +2 -2
  20. package/src/templates/components/breadcrumbs/_examples.breadcrumbs.njk +4 -4
  21. package/src/templates/components/breadcrumbs/_template.breadcrumbs.njk +4 -4
  22. package/src/templates/components/button/_examples.button.njk +19 -19
  23. package/src/templates/components/button/_template.button.njk +2 -2
  24. package/src/templates/components/button-loader/_examples.button-loader.njk +17 -17
  25. package/src/templates/components/button-loader/_template.button-loader.njk +2 -2
  26. package/src/templates/components/card/_examples.card.njk +3 -3
  27. package/src/templates/components/card/_template.card.njk +4 -4
  28. package/src/templates/components/character-count/_examples.character-count.njk +2 -2
  29. package/src/templates/components/checkboxes/_examples.checkboxes.njk +6 -6
  30. package/src/templates/components/checkboxes/_template.checkboxes.njk +2 -2
  31. package/src/templates/components/collapsible/_examples.collapsible.njk +4 -4
  32. package/src/templates/components/collapsible/_template.collapsible.njk +1 -1
  33. package/src/templates/components/date-input/_template.date-input.njk +1 -1
  34. package/src/templates/components/datepicker/_examples.datepicker.njk +45 -62
  35. package/src/templates/components/datepicker/_styles.datepicker.css +4 -0
  36. package/src/templates/components/datepicker/_template.datepicker.njk +10 -2
  37. package/src/templates/components/description-list/_examples.description-list.njk +3 -3
  38. package/src/templates/components/description-list/_template.description-list.njk +2 -2
  39. package/src/templates/components/details/_examples.details.njk +3 -3
  40. package/src/templates/components/details/_template.details.njk +1 -1
  41. package/src/templates/components/dialog/_examples.dialog.njk +4 -4
  42. package/src/templates/components/dropdown/_examples.dropdown.njk +31 -17
  43. package/src/templates/components/dropdown/_template.dropdown.njk +1 -1
  44. package/src/templates/components/error-message/_examples.error-message.njk +1 -1
  45. package/src/templates/components/error-message/_template.error-message.njk +1 -1
  46. package/src/templates/components/error-summary/_template.error-summary.njk +2 -2
  47. package/src/templates/components/fieldset/_examples.fieldset.njk +3 -3
  48. package/src/templates/components/fieldset/_template.fieldset.njk +7 -7
  49. package/src/templates/components/footer/_examples.footer.njk +32 -32
  50. package/src/templates/components/footer/_template.footer.njk +6 -6
  51. package/src/templates/components/header/_examples.header.njk +14 -8
  52. package/src/templates/components/header/_template.header.header__navigation.njk +2 -2
  53. package/src/templates/components/header/_template.header.header__offcanvasButton.njk +1 -1
  54. package/src/templates/components/header/_template.header.header__subnav.njk +1 -1
  55. package/src/templates/components/header/_template.header.njk +2 -2
  56. package/src/templates/components/header-advanced/_examples.header-advanced.njk +14 -8
  57. package/src/templates/components/header-advanced/_template.header-advanced.njk +3 -3
  58. package/src/templates/components/header-mini/_examples.header-mini.njk +3 -3
  59. package/src/templates/components/header-mini/_template.header-mini.njk +2 -2
  60. package/src/templates/components/hint/_examples.hint.njk +1 -1
  61. package/src/templates/components/hint/_template.hint.njk +1 -1
  62. package/src/templates/components/input/_examples.input.njk +7 -7
  63. package/src/templates/components/input-group/_examples.input-group.njk +1 -1
  64. package/src/templates/components/input-group/_template.input-group.njk +1 -1
  65. package/src/templates/components/item/_examples.item.njk +23 -23
  66. package/src/templates/components/item/_template.item.njk +9 -9
  67. package/src/templates/components/label/_examples.label.njk +2 -2
  68. package/src/templates/components/label/_template.label.njk +1 -1
  69. package/src/templates/components/links-list/_examples.links-list.njk +29 -32
  70. package/src/templates/components/links-list/_template.links-list.njk +11 -11
  71. package/src/templates/components/listbox/_examples.listbox.njk +16 -16
  72. package/src/templates/components/listbox/_template.listbox.njk +3 -3
  73. package/src/templates/components/media-object/_examples.media-object.njk +5 -5
  74. package/src/templates/components/menu-horizontal/_examples.menu-horizontal.njk +16 -16
  75. package/src/templates/components/menu-horizontal/_template.menu-horizontal.njk +2 -2
  76. package/src/templates/components/menu-navigation/_examples.menu-navigation.njk +6 -6
  77. package/src/templates/components/menu-navigation/_template.menu-navigation.njk +4 -4
  78. package/src/templates/components/menu-vertical/_examples.menu-vertical.njk +8 -8
  79. package/src/templates/components/menu-vertical/_template.menu-vertical.njk +9 -9
  80. package/src/templates/components/menubar/_examples.menubar.njk +16 -16
  81. package/src/templates/components/menubar/_template.menubar.njk +7 -7
  82. package/src/templates/components/modal/_examples.modal.njk +18 -18
  83. package/src/templates/components/modal/_template.modal.njk +8 -8
  84. package/src/templates/components/nav/_examples.nav.njk +7 -7
  85. package/src/templates/components/nav/_template.nav.njk +2 -2
  86. package/src/templates/components/notification/_examples.notification.njk +9 -9
  87. package/src/templates/components/notification/_template.notification.njk +11 -11
  88. package/src/templates/components/pagination/_examples.pagination.njk +6 -6
  89. package/src/templates/components/pagination/_template.pagination.njk +3 -3
  90. package/src/templates/components/pill/_examples.pill.njk +8 -8
  91. package/src/templates/components/pill/_template.pill.njk +3 -3
  92. package/src/templates/components/radios/_examples.radios.njk +2 -2
  93. package/src/templates/components/radios/_template.radios.njk +1 -1
  94. package/src/templates/components/select/_examples.select.njk +1 -1
  95. package/src/templates/components/skip-link/_examples.skip-link.njk +1 -1
  96. package/src/templates/components/skip-link/_template.skip-link.njk +1 -1
  97. package/src/templates/components/status/_examples.status.njk +1 -1
  98. package/src/templates/components/status/_template.status.njk +1 -1
  99. package/src/templates/components/status-item/_examples.status-item.njk +15 -15
  100. package/src/templates/components/status-item/_template.status-item.njk +3 -3
  101. package/src/templates/components/table/_examples.table.njk +3 -3
  102. package/src/templates/components/table/_template.table.njk +2 -2
  103. package/src/templates/components/table-advanced/_examples.table-advanced.njk +7 -7
  104. package/src/templates/components/table-advanced/_template.table-advanced.njk +5 -5
  105. package/src/templates/components/tabs/_examples.tabs.njk +19 -19
  106. package/src/templates/components/tabs/_styles.tabs.css +2 -2
  107. package/src/templates/components/tabs/_template.tabs.njk +7 -7
  108. package/src/templates/components/textarea/_examples.textarea.njk +2 -2
  109. package/src/templates/components/toggle/_examples.toggle.njk +29 -29
  110. package/src/templates/components/toggle/_template.toggle.njk +2 -2
  111. package/src/templates/components/tooltip/_examples.tooltip.njk +11 -11
  112. package/src/templates/components/tooltip/_template.tooltip.njk +3 -3
  113. package/src/templates/components/tree/_examples.tree.njk +12 -60
  114. package/src/templates/components/tree/_template.tree.njk +4 -4
  115. package/src/templates/includes/_test-include.njk +2 -2
  116. package/src/templates/pages/_page.footer.njk +1 -1
  117. package/src/templates/pages/_template.logged-selector-subheader.njk +1 -1
package/src/templates/components/accordion/_examples.accordion.njk CHANGED
@@ -2,92 +2,92 @@
2
2
  {% set examples = [
3
3
  {
4
4
  "name": "Por defecto",
5
- "description": 'Si abres uno, se cierran el resto. Una vez que abres un item, se mantiene al menos un item abierto. Asume que <code>allowmultiple: false</code> y <code>allowToggle: false</code> aunque no se defina expresamente.',
5
+ "description": "Si abres uno, se cierran el resto. Una vez que abres un item, se mantiene al menos un item abierto. Asume que <code>allowmultiple: false</code> y <code>allowToggle: false</code> aunque no se defina expresamente.",
6
6
  "data": {
7
7
  "idPrefix": "accordion-example",
8
8
  "headingLevel": 3,
9
9
  "items": [
10
10
  {
11
- "headerText": "Item de acordeón 1",
12
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
11
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
12
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
13
13
  },
14
14
  {
15
- "headerText": "Item de acordeón 2",
16
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
15
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
16
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
17
17
  },
18
18
  {
19
- "headerText": "Item de acordeón 3",
20
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
19
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
20
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
21
21
  }
22
22
  ]
23
23
  }
24
24
  },
25
25
  {
26
26
  "name": "Permite múltiples",
27
- "description": 'Permite tener abiertos varios items a la vez sin cerrar automáticamente ninguno. Define <code>allowmultiple: true</code> y asume que <code>allowToggle: true</code>.',
27
+ "description": "Permite tener abiertos varios items a la vez sin cerrar automáticamente ninguno. Define <code>allowmultiple: true</code> y asume que <code>allowToggle: true</code>.",
28
28
  "data": {
29
29
  "idPrefix": "allowmultiple-example",
30
30
  "headingLevel": 3,
31
31
  "allowMultiple": true,
32
32
  "items": [
33
33
  {
34
- "headerText": "Item de acordeón 1",
35
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
34
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
35
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
36
36
  },
37
37
  {
38
- "headerText": "Item de acordeón 2",
39
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
38
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
39
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
40
40
  },
41
41
  {
42
- "headerText": "Item de acordeón 3",
43
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
42
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
43
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
44
44
  }
45
45
  ]
46
46
  }
47
47
  },
48
48
  {
49
49
  "name": "Permite cerrar",
50
- "description": 'Si abres uno, se cierran el resto. Permite que cierres el que está abierto para que queden todos cerrados. Define <code>allowToggle: true</code> y asume que <code>allowMultiple: false</code>.',
50
+ "description": "Si abres uno, se cierran el resto. Permite que cierres el que está abierto para que queden todos cerrados. Define <code>allowToggle: true</code> y asume que <code>allowMultiple: false</code>.",
51
51
  "data": {
52
52
  "idPrefix": "allowtoggle-example",
53
53
  "headingLevel": 3,
54
54
  "allowToggle": true,
55
55
  "items": [
56
56
  {
57
- "headerText": "Item de acordeón 1",
58
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
57
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
58
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
59
59
  },
60
60
  {
61
- "headerText": "Item de acordeón 2",
62
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
61
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
62
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
63
63
  },
64
64
  {
65
- "headerText": "Item de acordeón 3",
66
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
65
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
66
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
67
67
  }
68
68
  ]
69
69
  }
70
70
  },
71
71
  {
72
72
  "name": "Con un item abierto",
73
- "description": 'Podemos abrir inicialmente un item si le añadimos el parámetro <code>"open": true</code>. También puedes usar con javascript la función global <code>activateItemAccordion(elementMenu, activeItemId)</code> para abrir un item, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemAccordion("accordion", "with-one-item-opened-example-1-title")</code> para cerrar el item actual y abrir el primer item de este ejemplo.',
73
+ "description": "Podemos abrir inicialmente un item si le añadimos el parámetro <code>'open': true</code>. También puedes usar con javascript la función global <code>activateItemAccordion(elementMenu, activeItemId)</code> para abrir un item, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemAccordion('accordion', 'with-one-item-opened-example-1-title')</code> para cerrar el item actual y abrir el primer item de este ejemplo.",
74
74
  "data": {
75
75
  "idPrefix": "with-one-item-opened-example",
76
76
  "headingLevel": 3,
77
77
  "allowToggle": true,
78
78
  "items": [
79
79
  {
80
- "headerText": "Item de acordeón 1",
81
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
80
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
81
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
82
82
  },
83
83
  {
84
- "headerText": "Item de acordeón 2",
85
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
84
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
85
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
86
86
  "open": true
87
87
  },
88
88
  {
89
- "headerText": "Item de acordeón 3",
90
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
89
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
90
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
91
91
  }
92
92
  ],
93
93
  "attributes": {
@@ -97,24 +97,24 @@
97
97
  },
98
98
  {
99
99
  "name": "Con 2 items abiertos",
100
- "description": 'Podemos abrir inicialmente items si les añadimos el parámetro <code>"open": true</code>. También puedes usar con javascript la función global <code>activateItemAccordion(elementMenu, activeItemsIds)</code> para abrir varios items, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemAccordion("accordion-multiple", ["with-2-items-opened-example-2-title", "with-2-items-opened-example-3-title"])</code>.',
100
+ "description": "Podemos abrir inicialmente items si les añadimos el parámetro <code>'open': true</code>. También puedes usar con javascript la función global <code>activateItemAccordion(elementMenu, activeItemsIds)</code> para abrir varios items, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemAccordion('accordion-multiple', ['with-2-items-opened-example-2-title', 'with-2-items-opened-example-3-title'])</code>.",
101
101
  "data": {
102
102
  "idPrefix": "with-2-items-opened-example",
103
103
  "headingLevel": 3,
104
104
  "allowMultiple": true,
105
105
  "items": [
106
106
  {
107
- "headerText": "Item de acordeón 1",
108
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
107
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
108
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
109
109
  "open": true
110
110
  },
111
111
  {
112
- "headerText": "Item de acordeón 2",
113
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
112
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
113
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
114
114
  },
115
115
  {
116
- "headerText": "Item de acordeón 3",
117
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
116
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
117
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
118
118
  "open": true
119
119
  }
120
120
  ],
@@ -125,7 +125,7 @@
125
125
  },
126
126
  {
127
127
  "name": "Deshabilitados con allowToggle y allowMultiple",
128
- "description": 'Ocultará la infomación de mostrar/ocultar y deshabilitará el item para no poder ser clicado. Usando el parámetro <code>"disabled": true</code>.',
128
+ "description": "Ocultará la infomación de mostrar/ocultar y deshabilitará el item para no poder ser clicado. Usando el parámetro <code>'disabled': true</code>.",
129
129
  "data": {
130
130
  "idPrefix": "accordion-disabled",
131
131
  "headingLevel": 3,
@@ -133,17 +133,17 @@
133
133
  "allowMultiple": true,
134
134
  "items": [
135
135
  {
136
- "headerText": "Item de acordeón no deshabilitado",
137
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
136
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón no deshabilitado</span>",
137
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
138
138
  },
139
139
  {
140
- "headerText": "Item de acordeón deshabilitado",
141
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
140
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón deshabilitado</span>",
141
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
142
142
  "disabled": true
143
143
  },
144
144
  {
145
- "headerText": "Item de acordeón deshabilitado y abierto",
146
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
145
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón deshabilitado y abierto</span>",
146
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
147
147
  "disabled": true,
148
148
  "open": true
149
149
  }
@@ -152,7 +152,7 @@
152
152
  },
153
153
  {
154
154
  "name": "Con encabezado",
155
- "description": 'Usa el parámetro <code>"heading"</code> para añadir un encabezado asociado al componente. Usa el parámetro <code>"headingLevel"</code> para establecer el nivel del encabezado. Por ejemplo: <code>"headingLevel": 3</code> creará un encabezado <code>&lt;h3&gt;</code>.',
155
+ "description": "Usa el parámetro <code>'heading'</code> para añadir un encabezado asociado al componente. Usa el parámetro <code>'headingLevel'</code> para establecer el nivel del encabezado. Por ejemplo: <code>'headingLevel': 3</code> creará un encabezado <code>&lt;h3&gt;</code>.",
156
156
  "data": {
157
157
  "idPrefix": "heading-example",
158
158
  "headingLevel": 3,
@@ -161,23 +161,23 @@
161
161
  },
162
162
  "items": [
163
163
  {
164
- "headerText": "Item de acordeón 1",
165
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
164
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
165
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
166
166
  },
167
167
  {
168
- "headerText": "Item de acordeón 2",
169
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
168
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
169
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
170
170
  },
171
171
  {
172
- "headerText": "Item de acordeón 3",
173
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
172
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
173
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
174
174
  }
175
175
  ]
176
176
  }
177
177
  },
178
178
  {
179
179
  "name": "Con encabezado de nivel 4",
180
- "description": 'Usa el parámetro <code>"heading"</code> para añadir un encabezado asociado al componente. Usa el parámetro <code>"headingLevel"</code> para establecer el nivel del encabezado. En este ejemplo: <code>"headingLevel": 4</code> creará un encabezado de componente <code>&lt;h4&gt;</code> y los botones interiores tendrán los siguientes niveles de encabezado para conservar la jerarquía de encabezados correspondiente: en este caso <code>&lt;h5&gt;</code>.',
180
+ "description": "Usa el parámetro <code>'heading'</code> para añadir un encabezado asociado al componente. Usa el parámetro <code>'headingLevel'</code> para establecer el nivel del encabezado. En este ejemplo: <code>'headingLevel': 4</code> creará un encabezado de componente <code>&lt;h4&gt;</code> y los botones interiores tendrán los siguientes niveles de encabezado para conservar la jerarquía de encabezados correspondiente: en este caso <code>&lt;h5&gt;</code>.",
181
181
  "data": {
182
182
  "idPrefix": "accordion-heading-level-example",
183
183
  "headingLevel": 4,
@@ -186,23 +186,23 @@
186
186
  },
187
187
  "items": [
188
188
  {
189
- "headerText": "Este Item 1 con <h5>",
190
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
189
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Este Item 1 con &lt;h5&gt;</span>",
190
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
191
191
  },
192
192
  {
193
- "headerText": "Este Item 2 con <h5>",
194
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
193
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Este Item 2 con &lt;h5&gt;</span>",
194
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
195
195
  },
196
196
  {
197
- "headerText": "Este Item 3 con <h5>",
198
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
197
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Este Item 3 con &lt;h5&gt;</span>",
198
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
199
199
  }
200
200
  ]
201
201
  }
202
202
  },
203
203
  {
204
204
  "name": "Con encabezado y controles de Mostrar todo",
205
- "description": 'Usa el parámetro <code>"showControl": true</code> para mostrar un controlador que permite mostrar/ocultar todos los items de una vez.',
205
+ "description": "Usa el parámetro <code>'showControl': true</code> para mostrar un controlador que permite mostrar/ocultar todos los items de una vez.",
206
206
  "data": {
207
207
  "idPrefix": "heading-and-show-controls-example",
208
208
  "headingLevel": 3,
@@ -213,24 +213,24 @@
213
213
  "allowMultiple": true,
214
214
  "items": [
215
215
  {
216
- "headerText": "Item de acordeón 1",
217
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
216
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
217
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
218
218
  },
219
219
  {
220
- "headerText": "Item de acordeón 2",
221
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
220
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
221
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
222
222
  "open": true
223
223
  },
224
224
  {
225
- "headerText": "Item de acordeón 3",
226
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
225
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
226
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
227
227
  }
228
228
  ]
229
229
  }
230
230
  },
231
231
  {
232
232
  "name": "Mostrar todo u ocultar todo con JavaScript",
233
- "description": 'Es necesario usar el parámetro <code>"showControl": true</code>. Puedes usar con javascript la función global <code>activateAllAccordion(element, show)</code>, para mostrar u ocultar todos los items, usando el idPrefix del acordeón, el parámetro <code>show</code> admite <code>true</code> o <code>false</code>, si le pasamos true 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>activateAllAccordion("show-all-accordion-example-js", true)</code> para mostrar todos los items expandidos.',
233
+ "description": "Es necesario usar el parámetro <code>'showControl': true</code>. Puedes usar con javascript la función global <code>activateAllAccordion(element, show)</code>, para mostrar u ocultar todos los items, usando el idPrefix del acordeón, el parámetro <code>show</code> admite <code>true</code> o <code>false</code>, si le pasamos true 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>activateAllAccordion('show-all-accordion-example-js', true)</code> para mostrar todos los items expandidos.",
234
234
  "data": {
235
235
  "idPrefix": "show-all-accordion-example-js",
236
236
  "headingLevel": 3,
@@ -241,32 +241,32 @@
241
241
  "allowMultiple": true,
242
242
  "items": [
243
243
  {
244
- "headerText": "Item de acordeón 1",
245
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
244
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
245
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
246
246
  },
247
247
  {
248
- "headerText": "Item de acordeón 2",
249
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
248
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
249
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
250
250
  "open": true
251
251
  },
252
252
  {
253
- "headerText": "Item de acordeón 3",
254
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
253
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
254
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
255
255
  }
256
256
  ]
257
257
  }
258
258
  },
259
259
  {
260
260
  "name": "Con controles personalizados para mostrar/ocultar",
261
- "description": 'Usa los parámetros <code>"show"</code> y <code>"hide"</code> para personalizar los controles que permiten abrir cada item. El último item de este ejemplo no muestra ningún controlador visible.',
261
+ "description": "Usa los parámetros <code>'show'</code> y <code>'hide'</code> para personalizar los controles que permiten abrir cada item. El último item de este ejemplo no muestra ningún controlador visible.",
262
262
  "data": {
263
263
  "idPrefix": "accordion-show-hide",
264
264
  "headingLevel": 3,
265
265
  "allowMultiple": true,
266
266
  "items": [
267
267
  {
268
- "headerText": "Item de acordeón 1",
269
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
268
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
269
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
270
270
  "show": {
271
271
  "text": "Expandir detalles"
272
272
  },
@@ -275,31 +275,31 @@
275
275
  }
276
276
  },
277
277
  {
278
- "headerText": "Item de acordeón 2",
279
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
278
+ "headerHtml": "<span class='block pr-lg pointer-events-none'>Item de acordeón 2</span>",
279
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
280
280
  "show": {
281
- "html": '<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M14 7a1 1 0 0 0-1-1H8.25A.25.25 0 0 1 8 5.75V1a1 1 0 0 0-2 0v4.75a.25.25 0 0 1-.25.25H1a1 1 0 0 0 0 2h4.75a.25.25 0 0 1 .25.25V13a1 1 0 0 0 2 0V8.25A.25.25 0 0 1 8.25 8H13a1 1 0 0 0 1-1Z" fill="currentColor" transform="scale(3.42857)"/></svg>'
281
+ "html": "<svg class='w-4 h-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M14 7a1 1 0 0 0-1-1H8.25A.25.25 0 0 1 8 5.75V1a1 1 0 0 0-2 0v4.75a.25.25 0 0 1-.25.25H1a1 1 0 0 0 0 2h4.75a.25.25 0 0 1 .25.25V13a1 1 0 0 0 2 0V8.25A.25.25 0 0 1 8.25 8H13a1 1 0 0 0 1-1Z' fill='currentColor' transform='scale(3.42857)'/></svg>"
282
282
  },
283
283
  "hide": {
284
- "html": '<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M13 8H1a1 1 0 0 1 0-2h12a1 1 0 0 1 0 2Z" fill="currentColor" transform="scale(3.42857)"/></svg>'
284
+ "html": "<svg class='w-4 h-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M13 8H1a1 1 0 0 1 0-2h12a1 1 0 0 1 0 2Z' fill='currentColor' transform='scale(3.42857)'/></svg>"
285
285
  }
286
286
  },
287
287
  {
288
- "headerText": "Item de acordeón 3",
289
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
288
+ "headerHtml": "<span class='block pr-lg pointer-events-none'>Item de acordeón 3</span>",
289
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
290
290
  "show": {
291
- "html": '<div class="c-link">
292
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="-0.5 -0.5 16 16" xml:space="preserve" height="1.25em" width="1.25em"><path d="M7.5 12.1875c-0.4375 0 -0.8125 -0.1875 -1.0625 -0.5L0.25 4.75c-0.375 -0.5 -0.3125 -1.25 0.1875 -1.625 0.5 -0.375 1.1875 -0.375 1.5625 0.125l5.375 6.125c0.0625 0.0625 0.125 0.0625 0.25 0l5.375 -6.125c0.4375 -0.5 1.125 -0.5625 1.625 -0.125s0.5625 1.125 0.125 1.625l-0.0625 0.0625 -6.125 6.9375c-0.25 0.25 -0.6875 0.4375 -1.0625 0.4375z" fill="currentColor" stroke-width="1"></path></svg>
293
- </div>'
291
+ "html": "<span class='c-link'>
292
+ <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' viewBox='-0.5 -0.5 16 16' xml:space='preserve' height='1.25em' width='1.25em'><path d='M7.5 12.1875c-0.4375 0 -0.8125 -0.1875 -1.0625 -0.5L0.25 4.75c-0.375 -0.5 -0.3125 -1.25 0.1875 -1.625 0.5 -0.375 1.1875 -0.375 1.5625 0.125l5.375 6.125c0.0625 0.0625 0.125 0.0625 0.25 0l5.375 -6.125c0.4375 -0.5 1.125 -0.5625 1.625 -0.125s0.5625 1.125 0.125 1.625l-0.0625 0.0625 -6.125 6.9375c-0.25 0.25 -0.6875 0.4375 -1.0625 0.4375z' fill='currentColor' stroke-width='1'></path></svg>
293
+ </span>"
294
294
  },
295
295
  "hide": {
296
- "html": '<div class="c-link">
297
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="-0.5 -0.5 16 16" xml:space="preserve" height="1.25em" width="1.25em"><path d="M7.5625 2.8125c0.4375 0 0.8125 0.1875 1.0625 0.5l6.0625 6.875c0.4375 0.4375 0.375 1.1875 -0.0625 1.625s-1.1875 0.375 -1.625 -0.0625l-0.0625 -0.0625 -5.3125 -6c-0.0625 -0.0625 -0.125 -0.0625 -0.25 0l-5.3125 6c-0.4375 0.5 -1.125 0.5625 -1.625 0.125s-0.5625 -1.125 -0.125 -1.625l0.0625 -0.0625 6.0625 -6.875c0.3125 -0.25 0.6875 -0.4375 1.125 -0.4375z" fill="currentColor" stroke-width="1"></path></svg></div>'
296
+ "html": "<span class='c-link'>
297
+ <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' viewBox='-0.5 -0.5 16 16' xml:space='preserve' height='1.25em' width='1.25em'><path d='M7.5625 2.8125c0.4375 0 0.8125 0.1875 1.0625 0.5l6.0625 6.875c0.4375 0.4375 0.375 1.1875 -0.0625 1.625s-1.1875 0.375 -1.625 -0.0625l-0.0625 -0.0625 -5.3125 -6c-0.0625 -0.0625 -0.125 -0.0625 -0.25 0l-5.3125 6c-0.4375 0.5 -1.125 0.5625 -1.625 0.125s-0.5625 -1.125 -0.125 -1.625l0.0625 -0.0625 6.0625 -6.875c0.3125 -0.25 0.6875 -0.4375 1.125 -0.4375z' fill='currentColor' stroke-width='1'></path></svg></span>"
298
298
  }
299
299
  },
300
300
  {
301
- "headerText": "Item de acordeón 4",
302
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
301
+ "headerHtml": "Item de acordeón 4",
302
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
303
303
  "show": {
304
304
  "text": ""
305
305
  },
@@ -312,29 +312,29 @@
312
312
  },
313
313
  {
314
314
  "name": "Con HTML en las cabeceras de los items",
315
- "description": 'Podemos añadir texto adicional bajo las cabeceras de los items. Para evitar problemas de eventos el el click, usamos la clase <code>pointer-events-none</code> en los subelementos.',
315
+ "description": "Podemos añadir texto adicional bajo las cabeceras de los items. Para evitar problemas de eventos el el click, usamos la clase <code>pointer-events-none</code> en los subelementos.",
316
316
  "data": {
317
317
  "idPrefix": "accordion-example-pointer-events-none",
318
318
  "headingLevel": 3,
319
319
  "items": [
320
320
  {
321
- "headerHtml": '<span class="block pointer-events-none">Item de acordeón 1</span><span class="block pointer-events-none font-normal">El subelemento también recibe eventos</span>',
322
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
321
+ "headerHtml": "<span class='block pointer-events-none'>Item de acordeón 1</span><span class='block pointer-events-none font-normal'>El subelemento también recibe eventos</span>",
322
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
323
323
  },
324
324
  {
325
- "headerHtml": '<span class="block pointer-events-none">Item de acordeón 2</span><span class="block pointer-events-none font-normal">El subelemento también recibe eventos</span>',
326
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
325
+ "headerHtml": "<span class='block pointer-events-none'>Item de acordeón 2</span><span class='block pointer-events-none font-normal'>El subelemento también recibe eventos</span>",
326
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
327
327
  },
328
328
  {
329
- "headerHtml": '<span class="block pointer-events-none">Item de acordeón 3</span><span class="block pointer-events-none font-normal">El subelemento también recibe eventos</span>',
330
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
329
+ "headerHtml": "<span class='block pointer-events-none'>Item de acordeón 3</span><span class='block pointer-events-none font-normal'>El subelemento también recibe eventos</span>",
330
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
331
331
  }
332
332
  ]
333
333
  }
334
334
  },
335
335
  {
336
336
  "name": "Con clases de CSS aplicadas",
337
- "description": 'Los parámetros <code>classes</code> nos permiten aplicar clases de Tailwind CSS a nuestro componente.',
337
+ "description": "Los parámetros <code>classes</code> nos permiten aplicar clases de Tailwind CSS a nuestro componente.",
338
338
  "data": {
339
339
  "idPrefix": "classes-example",
340
340
  "headingLevel": 3,
@@ -345,25 +345,25 @@
345
345
  },
346
346
  "items": [
347
347
  {
348
- "headerText": "Item de acordeón 1",
349
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
348
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
349
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
350
350
  },
351
351
  {
352
- "headerText": "Item de acordeón 2",
353
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-white rounded-lg h-40"></div></div>',
352
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
353
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-white rounded-lg h-40'></div></div>",
354
354
  "classes": "p-sm bg-primary-light",
355
355
  "open": true
356
356
  },
357
357
  {
358
- "headerText": "Item de acordeón 3",
359
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
358
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
359
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
360
360
  }
361
361
  ]
362
362
  }
363
363
  },
364
364
  {
365
365
  "name": "Con atributos aplicados",
366
- "description": 'Los parámetros <code>attributes</code> nos permiten aplicar atributos de HTML a nuestro componente, como por ejemplo <code>id</code> o etiquetas ARIA como <code>aria-label</code>. Mira el código para ver los atributos aplicados.',
366
+ "description": "Los parámetros <code>attributes</code> nos permiten aplicar atributos de HTML a nuestro componente, como por ejemplo <code>id</code> o etiquetas ARIA como <code>aria-label</code>. Mira el código para ver los atributos aplicados.",
367
367
  "data": {
368
368
  "idPrefix": "attributes-example",
369
369
  "headingLevel": 3,
@@ -372,22 +372,22 @@
372
372
  },
373
373
  "items": [
374
374
  {
375
- "headerText": "Item de acordeón 1",
376
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
375
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
376
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
377
377
  "attributes": {
378
378
  "data-attr": "accordion-item-test-a"
379
379
  }
380
380
  },
381
381
  {
382
- "headerText": "Item de acordeón 2",
383
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
382
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
383
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
384
384
  "attributes": {
385
385
  "data-attr": "accordion-item-test-b"
386
386
  }
387
387
  },
388
388
  {
389
- "headerText": "Item de acordeón 3",
390
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
389
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
390
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
391
391
  "attributes": {
392
392
  "data-attr": "accordion-item-test-c"
393
393
  }
package/src/templates/components/accordion/_template.accordion.njk CHANGED
@@ -22,7 +22,7 @@
22
22
  <div class="flex justify-between">
23
23
  {% if params.heading.html or params.heading.text %}
24
24
  {% set headingAttributes %}class="{% if params.heading.classes %}{{ params.heading.classes }}{% else %}c-h2 mb-base{% endif %}"{% endset %}
25
- {% set headingContent %}{{ params.heading.html | safe if params.heading.html else params.heading.text }}{% endset %}
25
+ {% set headingContent %}{{ params.heading.html | filterquotes | safe if params.heading.html else params.heading.text }}{% endset %}
26
26
  {% if params.headingLevel == "1" %}
27
27
  <h1 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h1>
28
28
  {% elseif params.headingLevel == "2" %}
@@ -67,18 +67,18 @@
67
67
  {% endif %}
68
68
  {% if item.disabled %} disabled{% endif %}
69
69
  >
70
- {{ item.headerHtml | safe if item.headerHtml else item.headerText }}
70
+ {{ item.headerHtml | filterquotes | safe if item.headerHtml else item.headerText }}
71
71
  <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none {%- if item.disabled %} hidden{% endif %}" aria-hidden="true">
72
72
  <span class="c-accordion__show {%- if item.open %} hidden{%else%}{%endif%} {%- if item.show.classes %} {{ item.show.classes }}{%endif%}">
73
73
  {% if item.show %}
74
- {{ item.show.html | safe if item.show.html else item.show.text }}
74
+ {{ item.show.html | filterquotes | safe if item.show.html else item.show.text }}
75
75
  {% else %}
76
76
  Mostrar
77
77
  {% endif %}
78
78
  </span>
79
79
  <span class="c-accordion__hide {%- if item.open %}{%else%} hidden{%endif%} {%- if item.hide.classes %} {{ item.hide.classes }}{%endif%}">
80
80
  {% if item.hide %}
81
- {{ item.hide.html | safe if item.hide.html else item.hide.text }}
81
+ {{ item.hide.html | filterquotes | safe if item.hide.html else item.hide.text }}
82
82
  {% else %}
83
83
  Ocultar
84
84
  {% endif %}
@@ -121,7 +121,7 @@
121
121
  {% endif %}
122
122
  class="c-accordion__panel {%- if item.classes %} {{ item.classes }}{% endif %}"
123
123
  {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
124
- {{ item.html | safe if item.html else item.text }}
124
+ {{ item.html | filterquotes | safe if item.html else item.text }}
125
125
  </div>
126
126
  </div>
127
127
  {% endif %}