desy-html 11.1.2 → 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.example.botones-primary-lg.njk +265 -0
- package/docs/ds/_ds.example.dropdowns-variaciones.njk +37 -0
- package/docs/ds/_ds.example.listbox-variaciones.njk +137 -0
- package/docs/ds/_ds.example.tabs.njk +44 -0
- package/docs/ds/_ds.example.textos.njk +5 -0
- package/docs/ds/_ds.section.botones.njk +5 -0
- package/docs/ds/_ds.section.textos.njk +11 -1
- package/docs/index.html +19 -0
- package/docs/pagina-prueba.html +2 -2
- package/package.json +3 -3
- package/src/css/component.text.css +33 -26
- package/src/js/aria/linksList.js +42 -0
- package/src/js/aria/treeitem.js +9 -2
- package/src/js/aria/utils.js +80 -15
- package/src/js/desy-html.js +249 -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/js/index.js +2 -0
- 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 +28 -21
- package/src/templates/components/button/_styles.button.css +7 -0
- package/src/templates/components/button/_template.button.njk +2 -2
- package/src/templates/components/button-loader/_examples.button-loader.njk +25 -18
- package/src/templates/components/button-loader/_styles.button-loader.css +6 -0
- 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 +38 -16
- package/src/templates/components/dropdown/_styles.dropdown.css +7 -0
- 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 +54 -34
- package/src/templates/components/links-list/_template.links-list.njk +15 -15
- package/src/templates/components/listbox/_examples.listbox.njk +52 -17
- package/src/templates/components/listbox/_styles.listbox.css +7 -0
- package/src/templates/components/listbox/_template.listbox.njk +5 -5
- 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 +93 -9
- package/src/templates/components/menu-navigation/_styles.menu-navigation.css +7 -0
- 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 +169 -15
- package/src/templates/components/menubar/_styles.menubar.css +8 -1
- 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 +96 -6
- package/src/templates/components/table-advanced/_template.table-advanced.njk +8 -8
- package/src/templates/components/table-advanced/params.table-advanced.yaml +4 -0
- package/src/templates/components/tabs/_examples.tabs.njk +57 -14
- package/src/templates/components/tabs/_styles.tabs.css +31 -8
- package/src/templates/components/tabs/_template.tabs.njk +8 -8
- package/src/templates/components/tabs/params.tabs.yaml +4 -0
- 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 +112 -47
- package/src/templates/components/tree/_template.tree.njk +6 -6
- 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
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
},
|
|
35
35
|
{
|
|
36
36
|
"name": "por defecto con estado activo",
|
|
37
|
-
"description":
|
|
37
|
+
"description": "Simula activar la pseudoclase de CSS <code>:active</code>",
|
|
38
38
|
"data": {
|
|
39
39
|
"name": "active",
|
|
40
40
|
"text": "Activo",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
},
|
|
44
44
|
{
|
|
45
45
|
"name": "por defecto con estado hover",
|
|
46
|
-
"description":
|
|
46
|
+
"description": "Simula activar la pseudoclase de CSS <code>:hover</code>",
|
|
47
47
|
"data": {
|
|
48
48
|
"name": "hover",
|
|
49
49
|
"text": "Hover",
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
},
|
|
53
53
|
{
|
|
54
54
|
"name": "por defecto con estado focus",
|
|
55
|
-
"description":
|
|
55
|
+
"description": "Simula activar la pseudoclase de CSS <code>:focus</code>",
|
|
56
56
|
"data": {
|
|
57
57
|
"name": "focus",
|
|
58
58
|
"text": "Focus",
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
},
|
|
76
76
|
{
|
|
77
77
|
"name": "primario con estado activo",
|
|
78
|
-
"description":
|
|
78
|
+
"description": "Simula activar la pseudoclase de CSS <code>:active</code>",
|
|
79
79
|
"data": {
|
|
80
80
|
"name": "active",
|
|
81
81
|
"text": "Activo",
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
},
|
|
85
85
|
{
|
|
86
86
|
"name": "primario con estado hover",
|
|
87
|
-
"description":
|
|
87
|
+
"description": "Simula activar la pseudoclase de CSS <code>:hover</code>",
|
|
88
88
|
"data": {
|
|
89
89
|
"name": "hover",
|
|
90
90
|
"text": "Hover",
|
|
@@ -93,7 +93,7 @@
|
|
|
93
93
|
},
|
|
94
94
|
{
|
|
95
95
|
"name": "primario con estado focus",
|
|
96
|
-
"description":
|
|
96
|
+
"description": "Simula activar la pseudoclase de CSS <code>:focus</code>",
|
|
97
97
|
"data": {
|
|
98
98
|
"name": "focus",
|
|
99
99
|
"text": "Focus",
|
|
@@ -117,7 +117,7 @@
|
|
|
117
117
|
},
|
|
118
118
|
{
|
|
119
119
|
"name": "alerta con estado activo",
|
|
120
|
-
"description":
|
|
120
|
+
"description": "Simula activar la pseudoclase de CSS <code>:active</code>",
|
|
121
121
|
"data": {
|
|
122
122
|
"name": "active",
|
|
123
123
|
"text": "Activo",
|
|
@@ -126,7 +126,7 @@
|
|
|
126
126
|
},
|
|
127
127
|
{
|
|
128
128
|
"name": "alerta con estado hover",
|
|
129
|
-
"description":
|
|
129
|
+
"description": "Simula activar la pseudoclase de CSS <code>:hover</code>",
|
|
130
130
|
"data": {
|
|
131
131
|
"name": "hover",
|
|
132
132
|
"text": "Hover",
|
|
@@ -135,7 +135,7 @@
|
|
|
135
135
|
},
|
|
136
136
|
{
|
|
137
137
|
"name": "alerta con estado focus",
|
|
138
|
-
"description":
|
|
138
|
+
"description": "Simula activar la pseudoclase de CSS <code>:focus</code>",
|
|
139
139
|
"data": {
|
|
140
140
|
"name": "focus",
|
|
141
141
|
"text": "Focus",
|
|
@@ -159,7 +159,7 @@
|
|
|
159
159
|
},
|
|
160
160
|
{
|
|
161
161
|
"name": "transparente con estado activo",
|
|
162
|
-
"description":
|
|
162
|
+
"description": "Simula activar la pseudoclase de CSS <code>:active</code>",
|
|
163
163
|
"data": {
|
|
164
164
|
"name": "active",
|
|
165
165
|
"text": "Activo",
|
|
@@ -168,7 +168,7 @@
|
|
|
168
168
|
},
|
|
169
169
|
{
|
|
170
170
|
"name": "transparente con estado hover",
|
|
171
|
-
"description":
|
|
171
|
+
"description": "Simula activar la pseudoclase de CSS <code>:hover</code>",
|
|
172
172
|
"data": {
|
|
173
173
|
"name": "hover",
|
|
174
174
|
"text": "Hover",
|
|
@@ -177,7 +177,7 @@
|
|
|
177
177
|
},
|
|
178
178
|
{
|
|
179
179
|
"name": "transparente con estado focus",
|
|
180
|
-
"description":
|
|
180
|
+
"description": "Simula activar la pseudoclase de CSS <code>:focus</code>",
|
|
181
181
|
"data": {
|
|
182
182
|
"name": "focus",
|
|
183
183
|
"text": "Focus",
|
|
@@ -192,6 +192,13 @@
|
|
|
192
192
|
"classes": "c-button-loader--transparent"
|
|
193
193
|
}
|
|
194
194
|
},
|
|
195
|
+
{
|
|
196
|
+
"name": "grande",
|
|
197
|
+
"data": {
|
|
198
|
+
"text": "Grande y primario",
|
|
199
|
+
"classes": "c-button-loader--lg c-button-loader--primary"
|
|
200
|
+
}
|
|
201
|
+
},
|
|
195
202
|
{
|
|
196
203
|
"name": "peque",
|
|
197
204
|
"data": {
|
|
@@ -209,7 +216,7 @@
|
|
|
209
216
|
{
|
|
210
217
|
"name": "botón enlace con target blank",
|
|
211
218
|
"data": {
|
|
212
|
-
"html":
|
|
219
|
+
"html": "Botón enlace con target <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='0.8em' width='0.8em' class='self-center ml-sm' aria-hidden='true' focusable='false' role='img'><g><path id='Union' fill='currentcolor' fill-rule='evenodd' d='M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z' clip-rule='evenodd' stroke-width='1'></path></g></svg>",
|
|
213
220
|
"href": "http://www.google.com",
|
|
214
221
|
"target": "_blank",
|
|
215
222
|
"attributes": {
|
|
@@ -228,22 +235,22 @@
|
|
|
228
235
|
{
|
|
229
236
|
"name": "botón con icono a la derecha",
|
|
230
237
|
"data": {
|
|
231
|
-
"html":
|
|
238
|
+
"html": "Botón con icono<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='1em' width='1em' class='self-center ml-2' aria-hidden='true' focusable='false' role='img'><g><path fill='currentcolor' fill-rule='evenodd' d='M6.585782857142856 2.3000685714285716C6.960857142857142 1.9249942857142854 7.469565714285714 1.7142857142857142 8 1.7142857142857142c0.5304342857142856 0 1.0391428571428571 0.2107085714285714 1.4142171428571428 0.5857828571428572 0.2369828571428571 0.2369942857142857 0.4083542857142857 0.5273257142857143 0.5024114285714285 0.8427885714285713h-3.8332571428571427c0.09405714285714285 -0.3154628571428571 0.2654285714285714 -0.6057942857142857 0.5024114285714285 -0.8427885714285713ZM4.3299199999999995 3.142857142857143c0.12042285714285714 -0.7734742857142857 0.48325714285714283 -1.4945485714285713 1.04368 -2.054968C6.070171428571428 0.3913257142857143 7.014914285714285 0 8 0c0.9850857142857142 0 1.9298285714285714 0.3913257142857143 2.6264 1.0878891428571429 0.5604228571428571 0.5604194285714286 0.9233142857142856 1.2814937142857143 1.0436571428571428 2.054968H14.571428571428571c0.47337142857142855 0 0.8571428571428571 0.38375999999999993 0.8571428571428571 0.8571428571428571s-0.38377142857142854 0.8571428571428571 -0.8571428571428571 0.8571428571428571H13.714285714285714v9.428571428571429c0 0.4546285714285714 -0.18057142857142855 0.8907428571428571 -0.5020571428571429 1.2122285714285714S12.454628571428572 16 12 16h-8c-0.45466285714285715 0 -0.8906971428571429 -0.18057142857142855 -1.212182857142857 -0.5020571428571429C2.466331428571429 15.176457142857142 2.2857142857142856 14.740342857142856 2.2857142857142856 14.285714285714285V4.857142857142857h-0.8571428571428571C0.955184 4.857142857142857 0.5714285714285714 4.473382857142857 0.5714285714285714 4s0.3837554285714285 -0.8571428571428571 0.8571428571428571 -0.8571428571428571h2.901348571428571ZM6 6.715954285714285c0.39449142857142855 0 0.7142857142857142 0.3198057142857143 0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 -0.3197942857142857 0.7142857142857142 -0.7142857142857142 0.7142857142857142s-0.7142857142857142 -0.3198857142857143 -0.7142857142857142 -0.7142857142857142V7.4302399999999995c0 -0.39447999999999994 0.3197942857142857 -0.7142857142857142 0.7142857142857142 -0.7142857142857142Zm4.714285714285714 0.7142857142857142c0 -0.39447999999999994 -0.3197942857142857 -0.7142857142857142 -0.7142857142857142 -0.7142857142857142s-0.7142857142857142 0.3198057142857143 -0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 0.3197942857142857 0.7142857142857142 0.7142857142857142 0.7142857142857142s0.7142857142857142 -0.3198857142857143 0.7142857142857142 -0.7142857142857142V7.4302399999999995Z' clip-rule='evenodd' stroke-width='1'></path></g></svg>",
|
|
232
239
|
"href": "/"
|
|
233
240
|
}
|
|
234
241
|
},
|
|
235
242
|
{
|
|
236
243
|
"name": "botón con icono a la izquierda",
|
|
237
244
|
"data": {
|
|
238
|
-
|
|
239
|
-
"html":
|
|
245
|
+
|
|
246
|
+
"html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='1em' width='1em' class='self-center mr-2' aria-hidden='true' focusable='false' role='img'><g><path fill='currentcolor' fill-rule='evenodd' d='M6.585782857142856 2.3000685714285716C6.960857142857142 1.9249942857142854 7.469565714285714 1.7142857142857142 8 1.7142857142857142c0.5304342857142856 0 1.0391428571428571 0.2107085714285714 1.4142171428571428 0.5857828571428572 0.2369828571428571 0.2369942857142857 0.4083542857142857 0.5273257142857143 0.5024114285714285 0.8427885714285713h-3.8332571428571427c0.09405714285714285 -0.3154628571428571 0.2654285714285714 -0.6057942857142857 0.5024114285714285 -0.8427885714285713ZM4.3299199999999995 3.142857142857143c0.12042285714285714 -0.7734742857142857 0.48325714285714283 -1.4945485714285713 1.04368 -2.054968C6.070171428571428 0.3913257142857143 7.014914285714285 0 8 0c0.9850857142857142 0 1.9298285714285714 0.3913257142857143 2.6264 1.0878891428571429 0.5604228571428571 0.5604194285714286 0.9233142857142856 1.2814937142857143 1.0436571428571428 2.054968H14.571428571428571c0.47337142857142855 0 0.8571428571428571 0.38375999999999993 0.8571428571428571 0.8571428571428571s-0.38377142857142854 0.8571428571428571 -0.8571428571428571 0.8571428571428571H13.714285714285714v9.428571428571429c0 0.4546285714285714 -0.18057142857142855 0.8907428571428571 -0.5020571428571429 1.2122285714285714S12.454628571428572 16 12 16h-8c-0.45466285714285715 0 -0.8906971428571429 -0.18057142857142855 -1.212182857142857 -0.5020571428571429C2.466331428571429 15.176457142857142 2.2857142857142856 14.740342857142856 2.2857142857142856 14.285714285714285V4.857142857142857h-0.8571428571428571C0.955184 4.857142857142857 0.5714285714285714 4.473382857142857 0.5714285714285714 4s0.3837554285714285 -0.8571428571428571 0.8571428571428571 -0.8571428571428571h2.901348571428571ZM6 6.715954285714285c0.39449142857142855 0 0.7142857142857142 0.3198057142857143 0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 -0.3197942857142857 0.7142857142857142 -0.7142857142857142 0.7142857142857142s-0.7142857142857142 -0.3198857142857143 -0.7142857142857142 -0.7142857142857142V7.4302399999999995c0 -0.39447999999999994 0.3197942857142857 -0.7142857142857142 0.7142857142857142 -0.7142857142857142Zm4.714285714285714 0.7142857142857142c0 -0.39447999999999994 -0.3197942857142857 -0.7142857142857142 -0.7142857142857142 -0.7142857142857142s-0.7142857142857142 0.3198057142857143 -0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 0.3197942857142857 0.7142857142857142 0.7142857142857142 0.7142857142857142s0.7142857142857142 -0.3198857142857143 0.7142857142857142 -0.7142857142857142V7.4302399999999995Z' clip-rule='evenodd' stroke-width='1'></path></g></svg>Botón con icono",
|
|
240
247
|
"href": "/"
|
|
241
248
|
}
|
|
242
249
|
},
|
|
243
250
|
{
|
|
244
251
|
"name": "botón sólo con icono",
|
|
245
252
|
"data": {
|
|
246
|
-
"html":
|
|
253
|
+
"html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='1em' width='1em' class='self-center' aria-hidden='true' focusable='false' role='img' aria-label='Borrar'><g><path fill='currentcolor' fill-rule='evenodd' d='M6.585782857142856 2.3000685714285716C6.960857142857142 1.9249942857142854 7.469565714285714 1.7142857142857142 8 1.7142857142857142c0.5304342857142856 0 1.0391428571428571 0.2107085714285714 1.4142171428571428 0.5857828571428572 0.2369828571428571 0.2369942857142857 0.4083542857142857 0.5273257142857143 0.5024114285714285 0.8427885714285713h-3.8332571428571427c0.09405714285714285 -0.3154628571428571 0.2654285714285714 -0.6057942857142857 0.5024114285714285 -0.8427885714285713ZM4.3299199999999995 3.142857142857143c0.12042285714285714 -0.7734742857142857 0.48325714285714283 -1.4945485714285713 1.04368 -2.054968C6.070171428571428 0.3913257142857143 7.014914285714285 0 8 0c0.9850857142857142 0 1.9298285714285714 0.3913257142857143 2.6264 1.0878891428571429 0.5604228571428571 0.5604194285714286 0.9233142857142856 1.2814937142857143 1.0436571428571428 2.054968H14.571428571428571c0.47337142857142855 0 0.8571428571428571 0.38375999999999993 0.8571428571428571 0.8571428571428571s-0.38377142857142854 0.8571428571428571 -0.8571428571428571 0.8571428571428571H13.714285714285714v9.428571428571429c0 0.4546285714285714 -0.18057142857142855 0.8907428571428571 -0.5020571428571429 1.2122285714285714S12.454628571428572 16 12 16h-8c-0.45466285714285715 0 -0.8906971428571429 -0.18057142857142855 -1.212182857142857 -0.5020571428571429C2.466331428571429 15.176457142857142 2.2857142857142856 14.740342857142856 2.2857142857142856 14.285714285714285V4.857142857142857h-0.8571428571428571C0.955184 4.857142857142857 0.5714285714285714 4.473382857142857 0.5714285714285714 4s0.3837554285714285 -0.8571428571428571 0.8571428571428571 -0.8571428571428571h2.901348571428571ZM6 6.715954285714285c0.39449142857142855 0 0.7142857142857142 0.3198057142857143 0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 -0.3197942857142857 0.7142857142857142 -0.7142857142857142 0.7142857142857142s-0.7142857142857142 -0.3198857142857143 -0.7142857142857142 -0.7142857142857142V7.4302399999999995c0 -0.39447999999999994 0.3197942857142857 -0.7142857142857142 0.7142857142857142 -0.7142857142857142Zm4.714285714285714 0.7142857142857142c0 -0.39447999999999994 -0.3197942857142857 -0.7142857142857142 -0.7142857142857142 -0.7142857142857142s-0.7142857142857142 0.3198057142857143 -0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 0.3197942857142857 0.7142857142857142 0.7142857142857142 0.7142857142857142s0.7142857142857142 -0.3198857142857143 0.7142857142857142 -0.7142857142857142V7.4302399999999995Z' clip-rule='evenodd' stroke-width='1'></path></g></svg>",
|
|
247
254
|
"href": "/",
|
|
248
255
|
"classes": "c-button-loader--primary p-3 align-bottom"
|
|
249
256
|
}
|
|
@@ -251,7 +258,7 @@
|
|
|
251
258
|
{
|
|
252
259
|
"name": "button peque sólo con icono",
|
|
253
260
|
"data": {
|
|
254
|
-
"html":
|
|
261
|
+
"html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='1em' width='1em' class='self-center' aria-hidden='true' focusable='false' role='img' aria-label='Borrar'><g><path fill='currentcolor' fill-rule='evenodd' d='M6.585782857142856 2.3000685714285716C6.960857142857142 1.9249942857142854 7.469565714285714 1.7142857142857142 8 1.7142857142857142c0.5304342857142856 0 1.0391428571428571 0.2107085714285714 1.4142171428571428 0.5857828571428572 0.2369828571428571 0.2369942857142857 0.4083542857142857 0.5273257142857143 0.5024114285714285 0.8427885714285713h-3.8332571428571427c0.09405714285714285 -0.3154628571428571 0.2654285714285714 -0.6057942857142857 0.5024114285714285 -0.8427885714285713ZM4.3299199999999995 3.142857142857143c0.12042285714285714 -0.7734742857142857 0.48325714285714283 -1.4945485714285713 1.04368 -2.054968C6.070171428571428 0.3913257142857143 7.014914285714285 0 8 0c0.9850857142857142 0 1.9298285714285714 0.3913257142857143 2.6264 1.0878891428571429 0.5604228571428571 0.5604194285714286 0.9233142857142856 1.2814937142857143 1.0436571428571428 2.054968H14.571428571428571c0.47337142857142855 0 0.8571428571428571 0.38375999999999993 0.8571428571428571 0.8571428571428571s-0.38377142857142854 0.8571428571428571 -0.8571428571428571 0.8571428571428571H13.714285714285714v9.428571428571429c0 0.4546285714285714 -0.18057142857142855 0.8907428571428571 -0.5020571428571429 1.2122285714285714S12.454628571428572 16 12 16h-8c-0.45466285714285715 0 -0.8906971428571429 -0.18057142857142855 -1.212182857142857 -0.5020571428571429C2.466331428571429 15.176457142857142 2.2857142857142856 14.740342857142856 2.2857142857142856 14.285714285714285V4.857142857142857h-0.8571428571428571C0.955184 4.857142857142857 0.5714285714285714 4.473382857142857 0.5714285714285714 4s0.3837554285714285 -0.8571428571428571 0.8571428571428571 -0.8571428571428571h2.901348571428571ZM6 6.715954285714285c0.39449142857142855 0 0.7142857142857142 0.3198057142857143 0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 -0.3197942857142857 0.7142857142857142 -0.7142857142857142 0.7142857142857142s-0.7142857142857142 -0.3198857142857143 -0.7142857142857142 -0.7142857142857142V7.4302399999999995c0 -0.39447999999999994 0.3197942857142857 -0.7142857142857142 0.7142857142857142 -0.7142857142857142Zm4.714285714285714 0.7142857142857142c0 -0.39447999999999994 -0.3197942857142857 -0.7142857142857142 -0.7142857142857142 -0.7142857142857142s-0.7142857142857142 0.3198057142857143 -0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 0.3197942857142857 0.7142857142857142 0.7142857142857142 0.7142857142857142s0.7142857142857142 -0.3198857142857143 0.7142857142857142 -0.7142857142857142V7.4302399999999995Z' clip-rule='evenodd' stroke-width='1'></path></g></svg>",
|
|
255
262
|
"href": "/",
|
|
256
263
|
"classes": "c-button-loader--primary c-button-loader--sm p-2 align-bottom"
|
|
257
264
|
}
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
{{ iconLoader | safe }}
|
|
58
58
|
{{ iconSuccess | safe }}
|
|
59
59
|
<span class="c-button-loader__content inline-flex align-baseline">
|
|
60
|
-
{{ params.html | safe if params.html else params.text }}
|
|
60
|
+
{{ params.html | filterquotes | safe if params.html else params.text }}
|
|
61
61
|
</span>
|
|
62
62
|
</a>
|
|
63
63
|
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
{{ iconLoader | safe }}
|
|
68
68
|
{{ iconSuccess | safe }}
|
|
69
69
|
<span class="c-button-loader__content inline-flex align-baseline">
|
|
70
|
-
{{ params.html | safe if params.html else params.text }}
|
|
70
|
+
{{ params.html | filterquotes | safe if params.html else params.text }}
|
|
71
71
|
</span>
|
|
72
72
|
</button>
|
|
73
73
|
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
|
|
30
30
|
{% macro verButton(id='id') %}
|
|
31
31
|
{{ componentButton({
|
|
32
|
-
"html":
|
|
32
|
+
"html": "Más <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='self-center ml-2' 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>",
|
|
33
33
|
"classes": "c-button--transparent",
|
|
34
34
|
"href": "#",
|
|
35
35
|
"attributes": {
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
|
|
42
42
|
{% macro verDetalleButton(id='id') %}
|
|
43
43
|
{{ componentButton({
|
|
44
|
-
"html":
|
|
44
|
+
"html": "Ver detalle <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='self-center ml-2' 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>",
|
|
45
45
|
"classes": "c-button--transparent",
|
|
46
46
|
"href": "#",
|
|
47
47
|
"attributes": {
|
|
@@ -111,7 +111,7 @@
|
|
|
111
111
|
},
|
|
112
112
|
{
|
|
113
113
|
"name": "todo el card clicable",
|
|
114
|
-
"description":
|
|
114
|
+
"description": "Usa la clase <code>.c-link--full</code> en un único enlace dentro del card, junto con las clases <code>relative</code> y <code>hover:bg-neutral-light</code> en el parámetro <code>containerClasses</code> para hacer que el enlace ocupe todo el card y sea perceptible en el estado hover. Recuerda que sólo debe haber un enlace en este tipo de cards clicables.",
|
|
115
115
|
"data": {
|
|
116
116
|
"classes": "lg:w-1/3",
|
|
117
117
|
"containerClasses": "p-base border border-neutral-base rounded relative hover:bg-neutral-light",
|
|
@@ -3,13 +3,13 @@
|
|
|
3
3
|
<div {%- if params.containerClasses %} class="{{ params.containerClasses }}"{% endif %}>
|
|
4
4
|
{% if params.super %}
|
|
5
5
|
<div class="{% if params.super.classes %}{{ params.super.classes }}{% else-%} h-32 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.super.backgroundFullColor }}; {% if params.super.backgroundFullUrl %} background-image: url('{{ params.super.backgroundFullUrl }}'){% endif %}" {%- for attribute, value in params.super.attributes %} {{attribute}}="{{value}}"{% endfor %}>
|
|
6
|
-
{{ params.super.html | safe if params.super.html}}
|
|
6
|
+
{{ params.super.html | filterquotes | safe if params.super.html}}
|
|
7
7
|
</div>
|
|
8
8
|
{% endif %}
|
|
9
9
|
<div class="flex">
|
|
10
10
|
{% if params.left %}
|
|
11
11
|
<div class="{% if params.left.classes %}{{ params.left.classes }}{% else-%} w-1/2 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.left.backgroundFullColor }}; {% if params.left.backgroundFullUrl %} background-image: url('{{ params.left.backgroundFullUrl }}'){% endif %}" {%- for attribute, value in params.left.attributes %} {{attribute}}="{{value}}"{% endfor %}>
|
|
12
|
-
{{ params.left.html | safe if params.left.html}}
|
|
12
|
+
{{ params.left.html | filterquotes | safe if params.left.html}}
|
|
13
13
|
</div>
|
|
14
14
|
{% endif %}
|
|
15
15
|
<div {%- if params.left or params.right %} class="flex-1"{% endif %}>
|
|
@@ -21,13 +21,13 @@
|
|
|
21
21
|
</div>
|
|
22
22
|
{% if params.right %}
|
|
23
23
|
<div class="{% if params.right.classes %}{{ params.right.classes }}{% else-%} w-1/2 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.right.backgroundFullColor }}; {% if params.right.backgroundFullUrl %} background-image: url('{{ params.right.backgroundFullUrl }}'){% endif %}" {%- for attribute, value in params.right.attributes %} {{attribute}}="{{value}}"{% endfor %}>
|
|
24
|
-
{{ params.right.html | safe if params.right.html}}
|
|
24
|
+
{{ params.right.html | filterquotes | safe if params.right.html}}
|
|
25
25
|
</div>
|
|
26
26
|
{% endif %}
|
|
27
27
|
</div>
|
|
28
28
|
{% if params.sub %}
|
|
29
29
|
<div class="{% if params.sub.classes %}{{ params.sub.classes }}{% else-%} h-32 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.sub.backgroundFullColor }}; {% if params.sub.backgroundFullUrl %} background-image: url('{{ params.sub.backgroundFullUrl }}'){% endif %}" {%- for attribute, value in params.sub.attributes %} {{attribute}}="{{value}}"{% endfor %}>
|
|
30
|
-
{{ params.sub.html | safe if params.sub.html}}
|
|
30
|
+
{{ params.sub.html | filterquotes | safe if params.sub.html}}
|
|
31
31
|
</div>
|
|
32
32
|
{% endif %}
|
|
33
33
|
</div>
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
{
|
|
15
15
|
"name": "placeholder",
|
|
16
16
|
"data": {
|
|
17
|
-
"name": "placeholder",
|
|
17
|
+
"name": "con-placeholder",
|
|
18
18
|
"id": "placeholder",
|
|
19
19
|
"maxlength": 250,
|
|
20
20
|
"placeholder": "Esto es un placeholder",
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
},
|
|
91
91
|
{
|
|
92
92
|
"name": "con label como encabezado",
|
|
93
|
-
"description":
|
|
93
|
+
"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>. Si no se establece un <code>'headingLevel'</code>, por defecto usará un <code><h1></code>.",
|
|
94
94
|
"data": {
|
|
95
95
|
"id": "textarea-with-page-heading",
|
|
96
96
|
"name": "address",
|
|
@@ -218,7 +218,7 @@
|
|
|
218
218
|
},
|
|
219
219
|
{
|
|
220
220
|
"name": "Con clases de CSS aplicadas",
|
|
221
|
-
"description":
|
|
221
|
+
"description": "Los parámetros <code>classes</code> nos permiten aplicar clases de Tailwind CSS a nuestro componente.",
|
|
222
222
|
"data": {
|
|
223
223
|
"idPrefix": "classes",
|
|
224
224
|
"fieldset": {
|
|
@@ -276,7 +276,7 @@
|
|
|
276
276
|
},
|
|
277
277
|
{
|
|
278
278
|
"name": "con un legend como encabezado",
|
|
279
|
-
"description":
|
|
279
|
+
"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><h3></code>.",
|
|
280
280
|
"data": {
|
|
281
281
|
"idPrefix": "legend-as-page-heading",
|
|
282
282
|
"name": "legend-as-page-heading",
|
|
@@ -372,7 +372,7 @@
|
|
|
372
372
|
"items": [
|
|
373
373
|
{
|
|
374
374
|
"value": "acepto",
|
|
375
|
-
"html":
|
|
375
|
+
"html": "Acepto los <a href='#' target='_blank' class='c-link' title='Se abre en ventana nueva del navegador'>términos y condiciones</a>"
|
|
376
376
|
}
|
|
377
377
|
]
|
|
378
378
|
}
|
|
@@ -387,7 +387,7 @@
|
|
|
387
387
|
"items": [
|
|
388
388
|
{
|
|
389
389
|
"value": "acepto",
|
|
390
|
-
"html":
|
|
390
|
+
"html": "Acepto los <a href='#' target='_blank' class='c-link' title='Se abre en ventana nueva del navegador'>términos y condiciones</a>",
|
|
391
391
|
"hint": {
|
|
392
392
|
"text": "Puedes visualizarlos en ventana nueva del navegador"
|
|
393
393
|
}
|
|
@@ -692,7 +692,7 @@
|
|
|
692
692
|
},
|
|
693
693
|
{
|
|
694
694
|
"name": "indeterminado",
|
|
695
|
-
"description":
|
|
695
|
+
"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.",
|
|
696
696
|
"data": {
|
|
697
697
|
"idPrefix": "indeterminate",
|
|
698
698
|
"name": "indeterminate",
|
|
@@ -712,7 +712,7 @@
|
|
|
712
712
|
},
|
|
713
713
|
{
|
|
714
714
|
"name": "indeterminado marcado",
|
|
715
|
-
"description":
|
|
715
|
+
"description": "Usando los parámetros <code>'isIndeterminate': true</code> y <code>'indeterminateChecked': true</code> podemos marcar como estado indeterminado un item que sea de tipo indeterminado.",
|
|
716
716
|
"data": {
|
|
717
717
|
"idPrefix": "indeterminate-checked",
|
|
718
718
|
"name": "indeterminate-checked",
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
{{-" checked" if item.checked }}
|
|
80
80
|
{{-" disabled" if item.disabled }}
|
|
81
81
|
{%- if item.conditional.html %} aria-controls="{{ conditionalId }}"{% endif -%}
|
|
82
|
-
{%- if itemDescribedBy %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}
|
|
82
|
+
{%- if itemDescribedBy != " " %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}
|
|
83
83
|
{%- if params.errorMessage %} aria-invalid="true"{% endif -%}
|
|
84
84
|
{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}
|
|
85
85
|
{%- if item.isIndeterminate or item.indeterminateChecked %} onclick="if (this.readOnly) this.checked=this.readOnly=false; else if (!this.checked) this.readOnly=this.indeterminate=true;"{% endif %}>
|
|
@@ -105,7 +105,7 @@
|
|
|
105
105
|
</div>
|
|
106
106
|
{% if item.conditional.html %}
|
|
107
107
|
<div class="mb-base ml-5 py-sm pl-6 origin-top-left border-l-2 border-primary-base c-checkboxes__conditional-item" id="{{ conditionalId }}">
|
|
108
|
-
{{ item.conditional.html | safe | indent(10) }}
|
|
108
|
+
{{ item.conditional.html | filterquotes | safe | indent(10) }}
|
|
109
109
|
</div>
|
|
110
110
|
{% endif %}
|
|
111
111
|
{% endif %}
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
},
|
|
16
16
|
{
|
|
17
17
|
"name": "expandido",
|
|
18
|
-
"description":
|
|
18
|
+
"description": "Añade <code>open: true</code> a un item para mostrarlo abierto inicialmente.",
|
|
19
19
|
"data": {
|
|
20
20
|
"id": "collapsible-initially-expanded",
|
|
21
21
|
"headerText": "Cabecera del collapsible",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
},
|
|
31
31
|
{
|
|
32
32
|
"name": "expandido con JavaScript",
|
|
33
|
-
"description":
|
|
33
|
+
"description": "También puedes usar con javascript la función global <code>activateItemCollapsible(element, open)</code>, para mostrar un item abierto o cerrado, usando su id, el parámetro <code>open</code> admite <code>true</code> o <code>false</code>, si le pasamos true se mostrará abierto, y si le pasamos false se mostrará cerrado. Ej: Abre la consola del navegador y escribe <code>activateItemCollapsible('collapsible-expanded-title', true)</code> para mostrar el item actual abierto.",
|
|
34
34
|
"data": {
|
|
35
35
|
"id": "collapsible-expanded",
|
|
36
36
|
"headerText": "Cabecera del collapsible",
|
|
@@ -47,12 +47,12 @@
|
|
|
47
47
|
"data": {
|
|
48
48
|
"id": "collapsible-html",
|
|
49
49
|
"headerText": "Cabecera del collapsible",
|
|
50
|
-
"html":
|
|
50
|
+
"html": "<p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipisicing elit, sed do eiusmod
|
|
51
51
|
tempor <em>incididunt</em> ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
52
52
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
53
53
|
consequat. Duis aute irure dolor in <strong>reprehenderit</strong> in voluptate velit esse
|
|
54
54
|
cillum dolore eu fugiat nulla <em>pariatur</em>. Excepteur sint occaecat cupidatat non
|
|
55
|
-
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
55
|
+
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>"
|
|
56
56
|
}
|
|
57
57
|
},
|
|
58
58
|
{
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
</button>
|
|
7
7
|
<div aria-hidden="true" class="c-collapsible__content {% if params.contentClasses %} {{ params.contentClasses }}{% else -%} py-sm{% endif %}" {%- if params.id %} id="{{params.id}}"{% endif %}>
|
|
8
8
|
{% if params.html %}
|
|
9
|
-
{{ params.html | safe }}
|
|
9
|
+
{{ params.html | filterquotes | safe }}
|
|
10
10
|
{% else %}
|
|
11
11
|
<p>
|
|
12
12
|
{{ params.text }}
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
{% if item.divider %}
|
|
69
69
|
<div {%- if item.divider.classes %} class="{{ item.divider.classes }}{% endif %}" role="separator">
|
|
70
70
|
{% if item.divider.html %}
|
|
71
|
-
{{ item.divider.html | safe }}
|
|
71
|
+
{{ item.divider.html | filterquotes | safe }}
|
|
72
72
|
{% else %}
|
|
73
73
|
<p>
|
|
74
74
|
{{ item.divider.text }}
|