desy-html 8.0.1 → 8.1.1
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/ds/_ds.section.color.njk +92 -44
- package/docs/index.html +11 -2
- package/package.json +1 -1
- package/src/js/aria/checkBoxes.js +11 -1
- package/src/js/aria/treeitem.js +6 -0
- package/src/templates/components/checkboxes/_template.checkboxes.njk +1 -1
- package/src/templates/components/menu-horizontal/_examples.menu-horizontal.njk +2 -2
- package/src/templates/components/menu-horizontal/_styles.menu-horizontal.css +10 -0
- package/src/templates/components/searchbar/_examples.searchbar.njk +4 -4
- package/src/templates/components/searchbar/_template.searchbar.njk +2 -2
- package/src/templates/components/tree/_template.tree.njk +1 -1
|
@@ -6,51 +6,99 @@
|
|
|
6
6
|
{{ DSSectionTitle({
|
|
7
7
|
title: "Color"
|
|
8
8
|
}) }}
|
|
9
|
-
<div class="
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
</div>
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
9
|
+
<div class="grid lg:grid-cols-4 grid-rows-12 gap-base">
|
|
10
|
+
|
|
11
|
+
{# 1 #}
|
|
12
|
+
<div class="self-center flex items-center p-base border border-neutral-base rounded h-full">
|
|
13
|
+
<div class="w-full">
|
|
14
|
+
<p class="font-semibold text-center self-center">Interacción</p>
|
|
15
|
+
</div>
|
|
16
|
+
</div>
|
|
17
|
+
<div class="flex inset-0 bg-primary-light text-black lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">primary-light</p><p>#d6eaf0</p></div></div>
|
|
18
|
+
<div class="flex inset-0 bg-primary-base text-white"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">primary-base</p><p>#00607a</p></div></div>
|
|
19
|
+
<div class="flex inset-0 bg-primary-dark font-semibold text-white"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">primary-dark</p><p>#00475C</p></div></div>
|
|
20
|
+
|
|
21
|
+
{# 2 #}
|
|
22
|
+
<div class="self-center flex items-center p-base border border-neutral-base rounded lg:row-span-4 h-full">
|
|
23
|
+
<div class="w-full">
|
|
24
|
+
<p class="font-semibold text-center self-center">Soporte</p>
|
|
25
|
+
</div>
|
|
26
|
+
</div>
|
|
27
|
+
|
|
28
|
+
<div class="flex inset-0 bg-warning-light text-black lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">warning-light</p><p>#fef6b2</p></div></div>
|
|
29
|
+
<div class="flex inset-0 bg-warning-base text-black"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">warning-base</p><p>#fdcb33</p></div></div>
|
|
30
|
+
<div class="flex inset-0 bg-warning-dark font-semibold text-black"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">warning-dark</p><p>#b88e12</p></div></div>
|
|
31
|
+
|
|
32
|
+
<div class="flex inset-0 bg-success-light text-black lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">success-light</p><p>#dcf8e2</p></div></div>
|
|
33
|
+
<div class="flex inset-0 bg-success-base text-black"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">success-base</p><p>#24d14c</p></div></div>
|
|
34
|
+
<div class="flex inset-0 bg-success-dark font-semibold text-black"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">success-dark</p><p>#1aa23a</p></div></div>
|
|
35
|
+
|
|
36
|
+
<div class="flex inset-0 bg-info-light text-black lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">info-light</p><p>#feebcc</p></div></div>
|
|
37
|
+
<div class="flex inset-0 bg-info-base text-black"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">info-base</p><p>#fa9902</p></div></div>
|
|
38
|
+
<div class="flex inset-0 bg-info-dark font-semibold text-black"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">info-dark</p><p>#c97a00</p></div></div>
|
|
39
|
+
|
|
40
|
+
<div class="flex inset-0 bg-alert-light text-black lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">alert-light</p><p>#fbd3ce</p></div></div>
|
|
41
|
+
<div class="flex inset-0 bg-alert-base text-white"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">alert-base</p><p>#d22333</p></div></div>
|
|
42
|
+
<div class="flex inset-0 bg-alert-dark font-semibold text-white"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">alert-dark</p><p>#a40014</p></div></div>
|
|
43
|
+
|
|
44
|
+
{# 3 #}
|
|
45
|
+
<div class="self-center flex items-center p-base border border-neutral-base rounded h-full">
|
|
46
|
+
<div class="w-full">
|
|
47
|
+
<p class="font-semibold text-center self-center">Fondo</p>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
<div class="flex inset-0 bg-white stroke-black text-black lg:p-lg border border-neutral-base"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">white</p><p>#ffffff</p></div></div>
|
|
51
|
+
<div class="flex inset-0 bg-neutral-lighter text-black lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">neutral-lighter</p><p>#f6f6f5</p></div></div>
|
|
52
|
+
<div class="flex inset-0 bg-neutral-light text-black"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">neutral-light</p><p>#ededec</p></div></div>
|
|
53
|
+
|
|
54
|
+
{# 4 #}
|
|
55
|
+
<div class="self-center flex items-center p-base border border-neutral-base rounded h-full">
|
|
56
|
+
<div class="w-full">
|
|
57
|
+
<p class="font-semibold text-center self-center">Contenido</p>
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
<div class="flex inset-0 bg-neutral-base text-black lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">neutral-base</p><p>#92949b</p></div></div>
|
|
61
|
+
<div class="flex inset-0 bg-neutral-dark font-semibold text-white lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">neutral-dark</p><p>#5e616b</p></div></div>
|
|
62
|
+
<div class="flex inset-0 bg-black font-semibold text-white"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">black</p><p>#1f2331</p></div></div>
|
|
63
|
+
|
|
64
|
+
{# 5 #}
|
|
65
|
+
<div class="self-center flex items-center p-base border border-neutral-base rounded h-full">
|
|
66
|
+
<div class="w-full">
|
|
67
|
+
<p class="font-semibold text-center self-center">Cabecera</p>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
<div class="flex inset-0 bg-heading-base font-semibold text-white lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">heading-base</p><p>#2d495f</p></div></div>
|
|
71
|
+
<div class="flex inset-0 bg-heading-dark font-semibold text-white"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">heading-dark</p><p>#21384b</p></div></div>
|
|
72
|
+
<div></div>
|
|
73
|
+
|
|
74
|
+
{# 6 #}
|
|
75
|
+
<div class="self-center lg:row-span-2 flex items-center p-base border border-neutral-base rounded h-full">
|
|
76
|
+
<div class="w-full">
|
|
77
|
+
<p class="font-semibold text-center self-center ">Para gráficas</p>
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
<div class="flex inset-0 bg-[#4d1f2e] font-semibold text-white p-sm lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p>#819eae</p></div></div>
|
|
81
|
+
<div class="flex inset-0 bg-[#aa3c2b] font-semibold text-white p-sm lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p>#aa3c2b</p></div></div>
|
|
82
|
+
<div class="flex inset-0 bg-[#819eae] font-semibold text-black p-sm lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p>#819eae</p></div></div>
|
|
83
|
+
<div class="flex inset-0 bg-[#00607a] font-semibold text-white p-sm lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p>#00607a</p></div></div>
|
|
84
|
+
<div class="flex inset-0 bg-[#013c53] font-semibold text-white p-sm lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p>#013c53</p></div></div>
|
|
85
|
+
<div></div>
|
|
86
|
+
|
|
87
|
+
{# 6 #}
|
|
88
|
+
<div class="self-center lg:row-span-2 flex items-center p-base border border-neutral-base rounded h-full">
|
|
89
|
+
<div class="w-full">
|
|
90
|
+
<p class="font-semibold text-center self-center ">Para gráficas (ampliación)</p>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
<div class="flex inset-0 bg-[#ffdc00] font-semibold text-black p-sm lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p>#ffdc00</p></div></div>
|
|
94
|
+
<div class="flex inset-0 bg-[#ffaa00] font-semibold text-black p-sm lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p>#ffaa00</p></div></div>
|
|
95
|
+
<div class="flex inset-0 bg-[#ed020d] font-semibold text-white p-sm lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p>#ed020d</p></div></div>
|
|
96
|
+
<div class="flex inset-0 bg-[#646464] font-semibold text-white p-sm lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p>#646464</p></div></div>
|
|
97
|
+
<div class="flex inset-0 bg-[#e1e1e1] text-black p-sm lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p>#e1e1e1</p></div></div>
|
|
98
|
+
<div></div>
|
|
52
99
|
</div>
|
|
53
|
-
|
|
100
|
+
|
|
101
|
+
<div class="pb-2xl"></div>
|
|
54
102
|
{% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
|
|
55
103
|
{{ DSSubsectionTitle({
|
|
56
104
|
title: "Border"
|
package/docs/index.html
CHANGED
|
@@ -8,8 +8,7 @@
|
|
|
8
8
|
<h1>desy-html</h1>
|
|
9
9
|
<p>desy-html es una librería NPM que sirve para construir la interfaz de usuario de las aplicaciones web del Gobierno de Aragón. Utiliza <a href="https://gulpjs.com/">Gulp</a>, <a href="https://postcss.org/">PostCSS</a>, <a href="https://tailwindcss.com/">Tailwind CSS</a> y <a href="https://mozilla.github.io/nunjucks/">Nunjucks</a> para renderizar componentes HTML+CSS+JS. Es útil para crear aplicaciones web ligeras o maquetas html.</p>
|
|
10
10
|
<p>Si necesitas una librería con más potencia para construir tu aplicación web, te recomendamos mejor, que uses su versión traducida a Angular: <a href="https://bitbucket.org/sdaragon/desy-angular">desy-angular librería NPM</a>, <a href="https://desy.aragon.es/desy-angular">Ejemplos de desy-angular</a></p>
|
|
11
|
-
<p>Mira ejemplos de componentes de
|
|
12
|
-
<p>Mira ejemplos de templates de página usando los componentes de desy-html: <a href="https://desy.aragon.es/pages/desy-html-templates">https://desy.aragon.es/pages/desy-html-templates</a></p>
|
|
11
|
+
<p>Mira ejemplos de componentes y plantillas de página en la documentación: <a href="https://desy.aragon.es/">https://desy.aragon.es/</a></p>
|
|
13
12
|
|
|
14
13
|
<h2>¿Cómo comenzar?</h2>
|
|
15
14
|
<ul>
|
|
@@ -38,6 +37,16 @@
|
|
|
38
37
|
|
|
39
38
|
<h2>Changelog (English)</h2>
|
|
40
39
|
<p>What's new in the latest version of desy-html</p>
|
|
40
|
+
<h3>v.8.1.1</h3>
|
|
41
|
+
<ul class="text-sm">
|
|
42
|
+
<li>Fixed a bug in Searchbar that avoids linebreak in button.</li>
|
|
43
|
+
<li>Added new graphics colors, removed desy-html-templates in docs.</li>
|
|
44
|
+
</ul>
|
|
45
|
+
<h3>v.8.1.0</h3>
|
|
46
|
+
<ul class="text-sm">
|
|
47
|
+
<li>Added a new modifier class in Menu horizontal to show scroll in mobile.</li>
|
|
48
|
+
<li>Bug fixes.</li>
|
|
49
|
+
</ul>
|
|
41
50
|
<h3>v.8.0.1</h3>
|
|
42
51
|
<ul class="text-sm">
|
|
43
52
|
<li>Fixed a bug in examples Nunjucks code.</li>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "desy-html",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.1.1",
|
|
4
4
|
"description": "desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Desy (SDA Servicios Digitales de Aragón)",
|
|
@@ -6,6 +6,10 @@ export function CheckBox(aria) {
|
|
|
6
6
|
this.rootEl.querySelectorAll('.c-checkboxes__conditional').forEach(item => {
|
|
7
7
|
item.addEventListener('click', this.toggleConditional.bind(this))
|
|
8
8
|
})
|
|
9
|
+
|
|
10
|
+
this.rootEl.querySelectorAll('.c-checkboxes__indeterminate-active').forEach(item => {
|
|
11
|
+
this.toggleIndeterminate(item, true)
|
|
12
|
+
})
|
|
9
13
|
}
|
|
10
14
|
|
|
11
15
|
toggleConditional(event) {
|
|
@@ -24,11 +28,17 @@ export function CheckBox(aria) {
|
|
|
24
28
|
})
|
|
25
29
|
}
|
|
26
30
|
}
|
|
31
|
+
|
|
32
|
+
toggleIndeterminate(event) {
|
|
33
|
+
const selectInput = event.querySelector('input');
|
|
34
|
+
selectInput.readOnly = true
|
|
35
|
+
selectInput.indeterminate = true
|
|
36
|
+
}
|
|
27
37
|
}
|
|
28
38
|
|
|
29
39
|
const checkBoxesElements = document.querySelectorAll('[data-module="c-checkboxes"]');
|
|
30
40
|
checkBoxesElements.forEach((checkBoxElement) => {
|
|
31
|
-
if (checkBoxElement.querySelector('.c-checkboxes__conditional')) {
|
|
41
|
+
if (checkBoxElement.querySelector('.c-checkboxes__conditional') || checkBoxElement.querySelector('.c-checkboxes__indeterminate-active')) {
|
|
32
42
|
new CheckBox(checkBoxElement);
|
|
33
43
|
}
|
|
34
44
|
});
|
package/src/js/aria/treeitem.js
CHANGED
|
@@ -95,6 +95,12 @@ export function Treeitem(aria) {
|
|
|
95
95
|
this.domNode.addEventListener('mouseover', this.handleMouseOver.bind(this));
|
|
96
96
|
this.domNode.addEventListener('mouseout', this.handleMouseOut.bind(this));
|
|
97
97
|
}
|
|
98
|
+
|
|
99
|
+
const getCheckboxes = document.querySelectorAll('.c-checkboxes__indeterminate-active');
|
|
100
|
+
Array.from(getCheckboxes).forEach((checkbox) => {
|
|
101
|
+
checkbox.readOnly = true
|
|
102
|
+
checkbox.indeterminate = true
|
|
103
|
+
});
|
|
98
104
|
};
|
|
99
105
|
|
|
100
106
|
aria.Treeitem.prototype.isExpanded = function () {
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
{% set itemHintId = id + "-item-hint" if hasHint else "" %}
|
|
73
73
|
{% set itemDescribedBy = describedBy if not hasFieldset else "" %}
|
|
74
74
|
{% set itemDescribedBy = (itemDescribedBy + " " + itemHintId) %}
|
|
75
|
-
<div class="{%- if params.hasDividers %} border-t border-b border-neutral-base -mb-px{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %} {%- if item.conditional.html %} c-checkboxes__conditional{% endif %} {%- if item.checked %} c-checkboxes__conditional-active {% else %} c-checkboxes__conditional-hidden{% endif %}">
|
|
75
|
+
<div class="{%- if params.hasDividers %} border-t border-b border-neutral-base -mb-px{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %} {%- if item.conditional.html %} c-checkboxes__conditional{% endif %} {%- if item.checked %} c-checkboxes__conditional-active {%- elif item.isIndeterminate and not item.indeterminateChecked %} c-checkboxes__indeterminate {%- elif item.isIndeterminate and item.indeterminateChecked %} c-checkboxes__indeterminate c-checkboxes__indeterminate-active {% else %} c-checkboxes__conditional-hidden{% endif %}">
|
|
76
76
|
<div class="relative flex items-start py-base">
|
|
77
77
|
<div class="flex items-center mx-sm">
|
|
78
78
|
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ item.value }}"
|
|
@@ -163,9 +163,9 @@
|
|
|
163
163
|
},
|
|
164
164
|
{
|
|
165
165
|
"name": "con clases aplicadas: tabs en móvil",
|
|
166
|
-
"description": '
|
|
166
|
+
"description": 'Clases modificadoras aplicadas: <code>.c-menu-horizontal--tabs-mobile</code> y <code>.c-menu-horizontal--scroll</code>',
|
|
167
167
|
"data": {
|
|
168
|
-
"classes": "c-menu-horizontal--tabs-mobile",
|
|
168
|
+
"classes": "c-menu-horizontal--tabs-mobile c-menu-horizontal--scroll",
|
|
169
169
|
"items": [
|
|
170
170
|
{
|
|
171
171
|
"href": "#",
|
|
@@ -75,9 +75,9 @@
|
|
|
75
75
|
"button": {
|
|
76
76
|
"text": "Buscar",
|
|
77
77
|
"type": "submit",
|
|
78
|
-
"classes": "c-button--primary
|
|
78
|
+
"classes": "c-button--primary"
|
|
79
79
|
},
|
|
80
|
-
"classes": "flex-1
|
|
80
|
+
"classes": "flex-1"
|
|
81
81
|
}
|
|
82
82
|
},
|
|
83
83
|
{
|
|
@@ -91,9 +91,9 @@
|
|
|
91
91
|
"button": {
|
|
92
92
|
"text": "Buscar",
|
|
93
93
|
"type": "submit",
|
|
94
|
-
"classes": "c-button--sm
|
|
94
|
+
"classes": "c-button--sm"
|
|
95
95
|
},
|
|
96
|
-
"classes": "flex-1
|
|
96
|
+
"classes": "flex-1 c-input--sm"
|
|
97
97
|
}
|
|
98
98
|
}
|
|
99
99
|
] %}
|
|
@@ -17,8 +17,8 @@
|
|
|
17
17
|
attributes: params.label.attributes,
|
|
18
18
|
for: params.id
|
|
19
19
|
}) }}
|
|
20
|
-
<div class="relative {%- if params.button %} flex flex-wrap items-end{% endif %}">
|
|
21
|
-
<input class="c-input block
|
|
20
|
+
<div class="relative {%- if params.button %} flex flex-wrap items-end gap-sm{% endif %}">
|
|
21
|
+
<input class="c-input block border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base {%- if not params.button %} pr-12 w-full{% endif %} {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} border-alert-base ring-2 ring-alert-base {% endif %}" id="{{ params.id }}" name="{{ params.id }}" type="search"
|
|
22
22
|
{%- if params.value %} value="{{ params.value}}"{% endif %}
|
|
23
23
|
{%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
|
|
24
24
|
{%- if params.errorMessage %} aria-errormessage="{{ errorId }}" aria-invalid="true"{% endif %}
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
<div class="{%- if params.hasDividers %} border-t border-b border-neutral-base -mb-px{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %}">
|
|
30
30
|
<div class="relative flex items-start py-xs">
|
|
31
31
|
<div class="flex items-center mx-sm">
|
|
32
|
-
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="{{ id }}-input" name="{{ name }}" {%- if type == 'checkbox' %} type="checkbox"{% else %} type="radio"{% endif %} value="{{ item.value }}"
|
|
32
|
+
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base {%- if item.isIndeterminate and item.indeterminateChecked %} c-checkboxes__indeterminate-active {% endif %}" id="{{ id }}-input" name="{{ name }}" {%- if type == 'checkbox' %} type="checkbox"{% else %} type="radio"{% endif %} value="{{ item.value }}"
|
|
33
33
|
{{-" checked" if item.checked }}
|
|
34
34
|
{{-" disabled" if item.disabled }}
|
|
35
35
|
{%- if itemDescribedBy %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}
|