@ons/design-system 45.0.3 → 45.1.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/components/accordion/_macro.njk +3 -1
- package/components/checkboxes/_macro.njk +7 -1
- package/components/collapsible/_collapsible.scss +10 -4
- package/components/collapsible/_macro.njk +14 -15
- package/components/collapsible/collapsible.js +2 -1
- package/components/field/_field.scss +10 -0
- package/components/field/_macro.njk +1 -1
- package/components/fieldset/_macro.njk +2 -2
- package/components/icons/_macro.njk +18 -18
- package/components/input/_macro.njk +4 -2
- package/components/lists/_macro.njk +73 -67
- package/components/question/_macro.njk +92 -20
- package/components/question/_question.scss +9 -1
- package/components/select/_macro.njk +2 -1
- package/components/summary/_macro.njk +3 -3
- package/components/table/_macro.njk +2 -2
- package/components/timeout-modal/timeout.js +3 -2
- package/css/census.css +1 -1
- package/css/main.css +1 -1
- package/package.json +4 -3
- package/scripts/main.es5.js +2 -2
- package/scripts/main.js +2 -2
- package/scss/objects/_spacing.scss +1 -3
- package/scss/utilities/_utilities.scss +1 -1
|
@@ -31,6 +31,7 @@
|
|
|
31
31
|
{% endif %}
|
|
32
32
|
<div class="ons-checkboxes__items">
|
|
33
33
|
{% for checkbox in params.checkboxes %}
|
|
34
|
+
{% set childIsChecked = false %}
|
|
34
35
|
{% set labelHTML = checkbox.label.text %}
|
|
35
36
|
{% if params.mutuallyExclusive is defined and params.mutuallyExclusive %}
|
|
36
37
|
{% set exclusiveClass = ' ons-js-exclusive-group-item' %}
|
|
@@ -43,13 +44,18 @@
|
|
|
43
44
|
{% if checkbox.other.selectAllChildren is defined and checkbox.other.selectAllChildren == true %}
|
|
44
45
|
{% set otherClass = otherClass + " ons-js-select-all-children" %}
|
|
45
46
|
{% endif %}
|
|
47
|
+
{% for otherCheckbox in checkbox.other.checkboxes %}
|
|
48
|
+
{% if otherCheckbox.checked is defined and otherCheckbox.checked %}
|
|
49
|
+
{% set childIsChecked = true %}
|
|
50
|
+
{% endif %}
|
|
51
|
+
{% endfor %}
|
|
46
52
|
{% endif %}
|
|
47
53
|
<span class="ons-checkboxes__item{{ " ons-checkboxes__item--no-border" if params.borderless }}">
|
|
48
54
|
{% set config = {
|
|
49
55
|
"id": checkbox.id,
|
|
50
56
|
"name": checkbox.name,
|
|
51
57
|
"value": checkbox.value,
|
|
52
|
-
"checked": checkbox.checked,
|
|
58
|
+
"checked": childIsChecked if childIsChecked == true else checkbox.checked,
|
|
53
59
|
"borderless": params.borderless,
|
|
54
60
|
"classes": checkbox.classes | default('') + borderless | default(''),
|
|
55
61
|
"inputClasses": exclusiveClass | default('') + otherClass | default(''),
|
|
@@ -22,12 +22,12 @@ $collapsible-caret-width: 1.5rem;
|
|
|
22
22
|
margin-left: -$collapsible-caret-width;
|
|
23
23
|
padding-left: $collapsible-caret-width;
|
|
24
24
|
}
|
|
25
|
-
.ons-collapsible__icon {
|
|
26
|
-
fill: $color-
|
|
25
|
+
.ons-collapsible__icon .ons-svg-icon {
|
|
26
|
+
fill: $color-text-link-focus;
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
&:hover {
|
|
30
|
+
&:hover:not(:focus) {
|
|
31
31
|
color: $color-text-link-hover;
|
|
32
32
|
.ons-collapsible__icon {
|
|
33
33
|
fill: $color-text-link-hover;
|
|
@@ -42,7 +42,7 @@ $collapsible-caret-width: 1.5rem;
|
|
|
42
42
|
display: inline-block;
|
|
43
43
|
fill: $color-text-link;
|
|
44
44
|
height: $collapsible-caret-width;
|
|
45
|
-
left: -0.
|
|
45
|
+
left: -0.15rem;
|
|
46
46
|
position: absolute;
|
|
47
47
|
top: -0.25rem;
|
|
48
48
|
width: $collapsible-caret-width;
|
|
@@ -138,4 +138,10 @@ $collapsible-caret-width: 1.5rem;
|
|
|
138
138
|
padding: 0;
|
|
139
139
|
}
|
|
140
140
|
}
|
|
141
|
+
|
|
142
|
+
&--simple & {
|
|
143
|
+
&__icon {
|
|
144
|
+
top: 0.8rem;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
141
147
|
}
|
|
@@ -3,11 +3,12 @@
|
|
|
3
3
|
|
|
4
4
|
<div
|
|
5
5
|
id="{{ params.id }}"
|
|
6
|
-
class="ons-collapsible ons-js-collapsible{% if params.isAccordion is defined and params.isAccordion %} ons-collapsible--accordion{% endif %}{% if params.classes is defined and params.classes %} {{ params.classes }}{% endif %}"
|
|
6
|
+
class="ons-collapsible ons-js-collapsible{% if params.isAccordion is defined and params.isAccordion %} ons-collapsible--accordion{% endif %}{% if params.classes is defined and params.classes %} {{ params.classes }}{% endif %}{% if params.variants is defined and params.variants %}{% if params.variants is not string %}{% for variant in params.variants %} ons-collapsible--{{ variant }}{% endfor %}{% else %} ons-collapsible--{{ params.variants }}{% endif %}{% endif %}"
|
|
7
7
|
{% if params.button is defined and params.button and params.button.close is defined and params.button.close %} data-btn-close="{{ params.button.close }}"{% endif %}
|
|
8
8
|
{% if params.group is defined and params.group %} data-group="{{ params.group }}"{% endif %}
|
|
9
9
|
{% if params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ attribute }}{% if value is defined and value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
|
|
10
10
|
{% if params.saveState is defined and params.saveState %} data-save-state="true"{% endif %}
|
|
11
|
+
{% if params.open is defined and params.open %} data-open="true"{% endif %}
|
|
11
12
|
>
|
|
12
13
|
<div
|
|
13
14
|
class="ons-collapsible__heading ons-js-collapsible-heading"
|
|
@@ -15,7 +16,7 @@
|
|
|
15
16
|
>
|
|
16
17
|
{# Required to use display flex on Safari as it's not currently supported: https://bugs.webkit.org/show_bug.cgi?id=167111 #}
|
|
17
18
|
<div class="ons-collapsible__controls">
|
|
18
|
-
{% set titleTag = params.titleTag | default("
|
|
19
|
+
{% set titleTag = params.titleTag | default("h2") %}
|
|
19
20
|
<{{ titleTag }} class="ons-collapsible__title">{{ params.title }}</{{ titleTag }}>
|
|
20
21
|
<span class="ons-collapsible__icon">
|
|
21
22
|
{% from "components/icons/_macro.njk" import onsIcon %}
|
|
@@ -45,19 +46,17 @@
|
|
|
45
46
|
{{ params.content | safe }}{{ caller() if caller }}
|
|
46
47
|
{% else %}
|
|
47
48
|
{{ params.content | safe }}{{ caller() if caller }}
|
|
48
|
-
{
|
|
49
|
-
{
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
}}
|
|
60
|
-
{% endif %}
|
|
49
|
+
{{
|
|
50
|
+
onsButton({
|
|
51
|
+
"type": "button",
|
|
52
|
+
"text": params.button.close | default ('Hide this'),
|
|
53
|
+
"buttonContext": (params.button.context | default(params.title)) + " " + params.button.contextSuffix | default("content"),
|
|
54
|
+
"classes": "ons-js-collapsible-button ons-u-d-no " + (params.button.classes | default("ons-btn--secondary")),
|
|
55
|
+
"innerClasses": "ons-js-collapsible-button-inner",
|
|
56
|
+
"variants": "small",
|
|
57
|
+
"attributes": params.button.attributes
|
|
58
|
+
})
|
|
59
|
+
}}
|
|
61
60
|
{% endif %}
|
|
62
61
|
</div>
|
|
63
62
|
</div>
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export default class Collapsible {
|
|
2
2
|
constructor(collapsibleElement) {
|
|
3
3
|
this.saveState = collapsibleElement.getAttribute('data-save-state') === 'true';
|
|
4
|
+
this.open = collapsibleElement.getAttribute('data-open') === 'true';
|
|
4
5
|
|
|
5
6
|
// State
|
|
6
7
|
this.group = collapsibleElement.getAttribute('data-group');
|
|
@@ -31,7 +32,7 @@ export default class Collapsible {
|
|
|
31
32
|
if (!this.isAccordion) {
|
|
32
33
|
this.collapsibleHeader.setAttribute('tabindex', 0);
|
|
33
34
|
}
|
|
34
|
-
if (localStorage.getItem(collapsibleId)) {
|
|
35
|
+
if (localStorage.getItem(collapsibleId) || this.open) {
|
|
35
36
|
this.setOpen(true);
|
|
36
37
|
} else {
|
|
37
38
|
this.setOpen(false);
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
{% else %}
|
|
12
12
|
<div
|
|
13
13
|
{% if params.id is defined and params.id %}id="{{ params.id }}"{% endif %}
|
|
14
|
-
class="ons-field{% if params.classes is defined and params.classes %} {{ params.classes }}{% endif %}"
|
|
14
|
+
class="ons-field{% if params.inline is defined and params.inline %} ons-field--inline{% endif %}{% if params.classes is defined and params.classes %} {{ params.classes }}{% endif %}"
|
|
15
15
|
{% if params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ attribute }}{% if value is defined and value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
|
|
16
16
|
>
|
|
17
17
|
{{ caller() }}
|
|
@@ -14,14 +14,14 @@
|
|
|
14
14
|
>
|
|
15
15
|
<legend class="ons-fieldset__legend{% if params.legendIsQuestionTitle is defined and params.legendIsQuestionTitle %} ons-u-mb-no{% endif %}{% if params.legendClasses is defined and params.legendClasses %} {{ params.legendClasses }}{% endif %}">
|
|
16
16
|
{% if params.legendIsQuestionTitle %}
|
|
17
|
-
<h1 id="fieldset-legend-title" class="ons-fieldset__legend-title {% if params.legendTitleClasses is defined and params.legendTitleClasses %}{{ params.legendTitleClasses }}{% endif %}">
|
|
17
|
+
<h1 id="fieldset-legend-title" class="ons-fieldset__legend-title ons-u-mb-m{% if params.legendTitleClasses is defined and params.legendTitleClasses %} {{ params.legendTitleClasses }}{% endif %}">
|
|
18
18
|
{{- params.legend | safe -}}
|
|
19
19
|
</h1>
|
|
20
20
|
{% else %}
|
|
21
21
|
{{- params.legend | safe -}}
|
|
22
22
|
{% endif %}
|
|
23
23
|
{% if params.description is defined and params.description %}
|
|
24
|
-
<div class="ons-fieldset__description
|
|
24
|
+
<div class="ons-fieldset__description{% if params.legendIsQuestionTitle %} ons-fieldset__description--title ons-u-mb-m{% endif %}">{{ params.description | safe }}</div>
|
|
25
25
|
{% endif %}
|
|
26
26
|
</legend>
|
|
27
27
|
{{ caller() }}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{% macro onsIcon(params) %}
|
|
2
2
|
|
|
3
3
|
{% if params.classes is defined and params.classes %}
|
|
4
|
-
{% set iconClasses = params.classes %}
|
|
4
|
+
{% set iconClasses = ' ' + params.classes %}
|
|
5
5
|
{% endif %}
|
|
6
6
|
|
|
7
7
|
{# Function icons A-Z #}
|
|
@@ -10,55 +10,55 @@
|
|
|
10
10
|
<path d="M4.2,12c0-0.6,0.4-1,1-1h11.2l-4.9-4.9c-0.4-0.4-0.4-1,0-1.4c0.4-0.4,1-0.4,1.4,0l6.6,6.6c0.4,0.4,0.4,1,0,1.4l-6.6,6.6c-0.4,0.4-1,0.4-1.4,0c-0.4-0.4-0.4-1,0-1.4l4.9-4.9H5.2C4.7,13,4.2,12.6,4.2,12z" fill="currentColor"></path>
|
|
11
11
|
</svg>
|
|
12
12
|
{% elif params.iconType == "arrow-next" %}
|
|
13
|
-
<svg class="{% if params.iconSize %}ons-svg-icon ons-svg-icon--{{ params.iconSize }}{% else %}ons-svg-icon{% endif %}
|
|
13
|
+
<svg class="{% if params.iconSize %}ons-svg-icon ons-svg-icon--{{ params.iconSize }}{% else %}ons-svg-icon{% endif %}{{ iconClasses }}" viewBox="0 0 17 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
|
|
14
14
|
<path d="m10 .2-.9.9c-.1.1-.1.4 0 .5l4 4H.6c-.2 0-.4.2-.4.4v1.2c0 .2.2.4.4.4h12.5l-3.9 3.7c-.2.2-.2.4 0 .6l.8.9c.2.2.4.2.6 0L16.8 7c.2-.2.2-.4 0-.6L10.7.3c-.3-.2-.5-.2-.7-.1z"/>
|
|
15
15
|
</svg>
|
|
16
16
|
{% elif params.iconType == "arrow-previous" %}
|
|
17
|
-
<svg class="{% if params.iconSize %}ons-svg-icon ons-svg-icon--{{ params.iconSize }}{% else %}ons-svg-icon{% endif %}
|
|
17
|
+
<svg class="{% if params.iconSize %}ons-svg-icon ons-svg-icon--{{ params.iconSize }}{% else %}ons-svg-icon{% endif %}{{ iconClasses }}" viewBox="0 0 17 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
|
|
18
18
|
<path d="M6.4.2.3 6.4c-.2.2-.2.4 0 .6l6.2 5.8c.2.2.4.1.6 0l.8-.9c.2-.2.1-.4 0-.6l-4-3.7h12.5c.2 0 .4-.2.4-.4V6c0-.2-.2-.4-.4-.4H3.8l4-4c.2-.1.2-.4.1-.5L7 .2c-.1-.1-.4-.1-.6 0z"/>
|
|
19
19
|
</svg>
|
|
20
20
|
{% elif params.iconType == "check" %}
|
|
21
|
-
<svg class="{% if params.iconSize %}ons-svg-icon ons-svg-icon--{{ params.iconSize }}{% else %}ons-svg-icon{% endif %}
|
|
21
|
+
<svg class="{% if params.iconSize %}ons-svg-icon ons-svg-icon--{{ params.iconSize }}{% else %}ons-svg-icon{% endif %}{{ iconClasses }}" viewBox="0 0 13 10" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
|
|
22
22
|
<path d="M14.35,3.9l-.71-.71a.5.5,0,0,0-.71,0h0L5.79,10.34,3.07,7.61a.51.51,0,0,0-.71,0l-.71.71a.51.51,0,0,0,0,.71l3.78,3.78a.5.5,0,0,0,.71,0h0L14.35,4.6A.5.5,0,0,0,14.35,3.9Z" transform="translate(-1.51 -3.04)"/>
|
|
23
23
|
</svg>
|
|
24
24
|
{% elif params.iconType == "chevron" %}
|
|
25
|
-
<svg class="{% if params.iconSize %}ons-svg-icon ons-svg-icon--{{ params.iconSize }}{% else %}ons-svg-icon{% endif %}
|
|
25
|
+
<svg class="{% if params.iconSize %}ons-svg-icon ons-svg-icon--{{ params.iconSize }}{% else %}ons-svg-icon{% endif %}{{ iconClasses }}" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
|
|
26
26
|
<path d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z" transform="translate(-5.02 -1.59)"/>
|
|
27
27
|
</svg>
|
|
28
28
|
{% elif params.iconType == "download" %}
|
|
29
|
-
<svg class="{% if params.iconSize %}ons-svg-icon ons-svg-icon--{{ params.iconSize }}{% else %}ons-svg-icon{% endif %}
|
|
29
|
+
<svg class="{% if params.iconSize %}ons-svg-icon ons-svg-icon--{{ params.iconSize }}{% else %}ons-svg-icon{% endif %}{{ iconClasses }}" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
|
|
30
30
|
<path d="M5.6 9a.48.48 0 0 0 .7 0l3-3.2a.48.48 0 0 0 0-.7C9.3 5 9.2 5 9 5H7.5V.5A.47.47 0 0 0 7 0H5a.47.47 0 0 0-.5.5V5H3a.47.47 0 0 0-.5.5.37.37 0 0 0 .1.3Z" />
|
|
31
31
|
<path d="M11.5 9H11a.47.47 0 0 0-.5.5v1h-9v-1A.47.47 0 0 0 1 9H.5a.47.47 0 0 0-.5.5v2a.47.47 0 0 0 .5.5h11a.47.47 0 0 0 .5-.5v-2a.47.47 0 0 0-.5-.5Z" />
|
|
32
32
|
</svg>
|
|
33
33
|
{% elif params.iconType == "exit" %}
|
|
34
|
-
<svg class="{% if params.iconSize %}ons-svg-icon ons-svg-icon--{{ params.iconSize }}{% else %}ons-svg-icon{% endif %}
|
|
34
|
+
<svg class="{% if params.iconSize %}ons-svg-icon ons-svg-icon--{{ params.iconSize }}{% else %}ons-svg-icon{% endif %}{{ iconClasses }}" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
|
|
35
35
|
<path d="M13.85,7.65l-2.5-2.5a.5.5,0,0,0-.71,0,.48.48,0,0,0-.15.36V7h-3a.5.5,0,0,0-.5.5v1a.5.5,0,0,0,.5.5h3v1.5A.49.49,0,0,0,11,11a.48.48,0,0,0,.34-.14l2.51-2.5a.49.49,0,0,0,0-.68Z" transform="translate(-2 -2)"/>
|
|
36
36
|
<path d="M8.5,14h-6a.5.5,0,0,1-.5-.5V2.5A.5.5,0,0,1,2.5,2h6a.5.5,0,0,1,.5.5V3a.5.5,0,0,1-.5.5h-5v9h5A.5.5,0,0,1,9,13v.5A.5.5,0,0,1,8.5,14Z" transform="translate(-2 -2)"/>
|
|
37
37
|
</svg>
|
|
38
38
|
{% elif params.iconType == "external-link" %}
|
|
39
|
-
<svg class="{% if params.iconSize %}ons-svg-icon ons-svg-icon--{{ params.iconSize }}{% else %}ons-svg-icon{% endif %}
|
|
39
|
+
<svg class="{% if params.iconSize %}ons-svg-icon ons-svg-icon--{{ params.iconSize }}{% else %}ons-svg-icon{% endif %}{{ iconClasses }}" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
|
|
40
40
|
<path d="M13.5,9H13a.5.5,0,0,0-.5.5v3h-9v-9h3A.5.5,0,0,0,7,3V2.5A.5.5,0,0,0,6.5,2h-4a.5.5,0,0,0-.5.5v11a.5.5,0,0,0,.5.5h11a.5.5,0,0,0,.5-.5v-4A.5.5,0,0,0,13.5,9Z" transform="translate(-2 -1.99)"/>
|
|
41
41
|
<path d="M8.83,7.88a.51.51,0,0,0,.71,0l2.31-2.32,1.28,1.28A.51.51,0,0,0,14,6.49v-4a.52.52,0,0,0-.5-.5h-4A.51.51,0,0,0,9,2.52a.58.58,0,0,0,.14.33l1.28,1.28L8.12,6.46a.51.51,0,0,0,0,.71Z" transform="translate(-2 -1.99)"/>
|
|
42
42
|
</svg>
|
|
43
43
|
{% elif params.iconType == "lock" %}
|
|
44
|
-
<svg class="{% if params.iconSize %}ons-svg-icon ons-svg-icon--{{ params.iconSize }}{% else %}ons-svg-icon{% endif %}
|
|
44
|
+
<svg class="{% if params.iconSize %}ons-svg-icon ons-svg-icon--{{ params.iconSize }}{% else %}ons-svg-icon{% endif %}{{ iconClasses }}" viewBox="0 0 10 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
|
|
45
45
|
<path d="M12.25,6h-.72V4.49a3.5,3.5,0,0,0-7,0V6H3.75A.77.77,0,0,0,3,6.75v6.5a.77.77,0,0,0,.75.75h8.5a.77.77,0,0,0,.75-.75V6.75A.77.77,0,0,0,12.25,6ZM5.54,4.49a2.5,2.5,0,1,1,5,0V6h-5ZM9,11.66a.3.3,0,0,1-.26.34H7.29A.29.29,0,0,1,7,11.69v0l.39-1.82a1,1,0,1,1,1.4-.18.77.77,0,0,1-.18.18Z" transform="translate(-3 -0.99)"/>
|
|
46
46
|
</svg>
|
|
47
47
|
{% elif params.iconType == "person" %}
|
|
48
|
-
<svg class="{% if params.iconSize %}ons-svg-icon ons-svg-icon--{{ params.iconSize }}{% else %}ons-svg-icon{% endif %}
|
|
48
|
+
<svg class="{% if params.iconSize %}ons-svg-icon ons-svg-icon--{{ params.iconSize }}{% else %}ons-svg-icon{% endif %}{{ iconClasses }}" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
|
|
49
49
|
<path d="M7,9H9a5,5,0,0,1,5,5H2A5,5,0,0,1,7,9Z" transform="translate(-2 -2)"/>
|
|
50
50
|
<circle cx="6" cy="3" r="3"/>
|
|
51
51
|
</svg>
|
|
52
52
|
{% elif params.iconType == "print" %}
|
|
53
|
-
<svg class="{% if params.iconSize %}ons-svg-icon ons-svg-icon--{{ params.iconSize }}{% else %}ons-svg-icon{% endif %}
|
|
53
|
+
<svg class="{% if params.iconSize %}ons-svg-icon ons-svg-icon--{{ params.iconSize }}{% else %}ons-svg-icon{% endif %}{{ iconClasses }}" viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
|
|
54
54
|
<path d="M17 4H3C1.3 4 0 5.2 0 6.8v5.5h4V16h12v-3.7h4V6.8C20 5.2 18.7 4 17 4zm-3 10H6V9h8v5zm3-6a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-1-8H4v3h12V0z"/>
|
|
55
55
|
</svg>
|
|
56
56
|
{% elif params.iconType == "quote" %}
|
|
57
|
-
<svg class="{% if params.iconSize %}ons-svg-icon ons-svg-icon--{{ params.iconSize }}{% else %}ons-svg-icon{% endif %}
|
|
57
|
+
<svg class="{% if params.iconSize %}ons-svg-icon ons-svg-icon--{{ params.iconSize }}{% else %}ons-svg-icon{% endif %}{{ iconClasses }}" viewBox="0 0 14 10" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
|
|
58
58
|
<path d="M13.44.77h-3l-2 4v6h6v-6h-3l2-4zm-8 0h-3l-2 4v6h6v-6h-3l2-4z" transform="translate(-0.44 -0.77)"/>
|
|
59
59
|
</svg>
|
|
60
60
|
{% elif params.iconType == "search" %}
|
|
61
|
-
<svg class="{% if params.iconSize %}ons-svg-icon ons-svg-icon--{{ params.iconSize }}{% else %}ons-svg-icon{% endif %}
|
|
61
|
+
<svg class="{% if params.iconSize %}ons-svg-icon ons-svg-icon--{{ params.iconSize }}{% else %}ons-svg-icon{% endif %}{{ iconClasses }}" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor">
|
|
62
62
|
<path d="M11.86 10.23 8.62 6.99a4.63 4.63 0 1 0-6.34 1.64 4.55 4.55 0 0 0 2.36.64 4.65 4.65 0 0 0 2.33-.65l3.24 3.23a.46.46 0 0 0 .65 0l1-1a.48.48 0 0 0 0-.62Zm-5-3.32a3.28 3.28 0 0 1-2.31.93 3.22 3.22 0 1 1 2.35-.93Z"/>
|
|
63
63
|
</svg>
|
|
64
64
|
{% elif params.iconType == "sort-sprite" %}
|
|
@@ -68,24 +68,24 @@
|
|
|
68
68
|
</svg>
|
|
69
69
|
{# Social media icons #}
|
|
70
70
|
{% elif params.iconType == "facebook" %}
|
|
71
|
-
<svg class="{% if params.iconSize %}ons-svg-icon ons-svg-icon--{{ params.iconSize }}{% else %}ons-svg-icon{% endif %}
|
|
71
|
+
<svg class="{% if params.iconSize %}ons-svg-icon ons-svg-icon--{{ params.iconSize }}{% else %}ons-svg-icon{% endif %}{{ iconClasses }}" id="icon-facebook" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
|
|
72
72
|
<path d="M32,16.0986285 C32.0009185,7.5342974 25.337417,0.468462963 16.8372092,0.0203294753 C8.33700136,-0.427804013 0.97607758,5.89865855 0.0874346352,14.4161886 C-0.801208309,22.9337186 5.09355054,30.6602611 13.5009524,31.9979281 L13.5009524,20.7518951 L9.44,20.7518951 L9.44,16.0986285 L13.5009524,16.0986285 L13.5009524,12.549267 C13.5009524,8.5169471 15.8857143,6.28613892 19.5428571,6.28613892 C20.742535,6.30277426 21.9393895,6.40782423 23.1238095,6.60044523 L23.1238095,10.5637711 L21.1047619,10.5637711 C19.1161905,10.5637711 18.4990476,11.8056643 18.4990476,13.0782216 L18.4990476,16.0986285 L22.9409524,16.0986285 L22.2247619,20.7518951 L18.4990476,20.7518951 L18.4990476,31.9979281 C26.2735701,30.760956 31.9991507,24.0182672 32,16.0986285 L32,16.0986285 Z"/>
|
|
73
73
|
</svg>
|
|
74
74
|
{% elif params.iconType == "twitter" %}
|
|
75
|
-
<svg class="{% if params.iconSize %}ons-svg-icon ons-svg-icon--{{ params.iconSize }}{% else %}ons-svg-icon{% endif %}
|
|
75
|
+
<svg class="{% if params.iconSize %}ons-svg-icon ons-svg-icon--{{ params.iconSize }}{% else %}ons-svg-icon{% endif %}{{ iconClasses }}" id="icon-twitter" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
|
|
76
76
|
<path d="M24.04,12.95c0,0.17,0,0.33,0,0.5c0.01,4.01-2.17,7.71-5.69,9.64c-3.52,1.93-7.81,1.78-11.19-0.38c0.31,0.04,0.61,0.05,0.92,0.05c1.73,0,3.42-0.58,4.78-1.65c-1.65-0.04-3.09-1.11-3.6-2.68c0.25,0.05,0.51,0.07,0.76,0.07c0.34,0,0.68-0.05,1.01-0.14C9.23,18,7.93,16.4,7.95,14.55v-0.05c0.54,0.29,1.13,0.46,1.74,0.48c-1.66-1.12-2.2-3.33-1.23-5.08c1.96,2.41,4.85,3.87,7.95,4.03c-0.07-0.29-0.1-0.58-0.1-0.88c0-1.58,0.97-3,2.44-3.59c1.47-0.58,3.15-0.21,4.23,0.94c0.86-0.17,1.69-0.49,2.45-0.94c-0.28,0.9-0.88,1.65-1.69,2.13c0.76-0.09,1.51-0.29,2.21-0.6C25.43,11.76,24.79,12.42,24.04,12.95zM16,0C7.16,0,0,7.16,0,16s7.16,16,16,16s16-7.16,16-16c0-4.24-1.69-8.31-4.69-11.31S20.24,0,16,0z"/>
|
|
77
77
|
</svg>
|
|
78
78
|
{% elif params.iconType == "instagram" %}
|
|
79
|
-
<svg class="{% if params.iconSize %}ons-svg-icon ons-svg-icon--{{ params.iconSize }}{% else %}ons-svg-icon{% endif %}
|
|
79
|
+
<svg class="{% if params.iconSize %}ons-svg-icon ons-svg-icon--{{ params.iconSize }}{% else %}ons-svg-icon{% endif %}{{ iconClasses }}" id="icon-instagram" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
|
|
80
80
|
<path d="M21.34,9.46c0.66,0,1.2,0.54,1.2,1.2c0,0.66-0.54,1.2-1.2,1.2c-0.66,0-1.2-0.54-1.2-1.2C20.14,10,20.68,9.46,21.34,9.46z M16,12.67c-1.84,0-3.33,1.49-3.33,3.33c0,1.84,1.49,3.33,3.33,3.33c1.84,0,3.33-1.49,3.33-3.33C19.33,14.16,17.84,12.67,16,12.67z M16,10.86c2.84,0,5.14,2.3,5.14,5.14c0,2.84-2.3,5.14-5.14,5.14c-2.84,0-5.14-2.3-5.14-5.14C10.86,13.16,13.16,10.86,16,10.86z M16.56,7.8h-1.11c-2.17,0-2.51,0.01-3.49,0.06c-0.97,0.04-1.5,0.21-1.86,0.34C9.64,8.39,9.3,8.6,8.95,8.95C8.6,9.3,8.39,9.64,8.2,10.1c-0.14,0.35-0.3,0.88-0.34,1.86c-0.04,0.98-0.06,1.32-0.06,3.49v1.11c0,2.17,0.01,2.51,0.06,3.49c0.04,0.97,0.21,1.5,0.34,1.86c0.18,0.47,0.4,0.8,0.75,1.15c0.35,0.35,0.68,0.57,1.15,0.75c0.35,0.14,0.88,0.3,1.86,0.34c0.94,0.04,1.29,0.06,3.23,0.06h1.61c1.94,0,2.3-0.02,3.23-0.06c0.97-0.04,1.5-0.21,1.86-0.34c0.47-0.18,0.8-0.4,1.15-0.75c0.35-0.35,0.57-0.68,0.75-1.15c0.14-0.35,0.3-0.88,0.34-1.86c0.04-0.94,0.06-1.29,0.06-3.23v-1.61c0-1.94-0.02-2.3-0.06-3.23c-0.04-0.97-0.21-1.5-0.34-1.86c-0.18-0.47-0.4-0.8-0.75-1.15C22.7,8.6,22.36,8.39,21.9,8.2c-0.35-0.14-0.88-0.3-1.86-0.34C19.06,7.82,18.72,7.8,16.56,7.8z M17.03,6c1.8,0,2.18,0.02,3.1,0.06c1.06,0.05,1.79,0.22,2.43,0.46c0.66,0.26,1.22,0.6,1.77,1.15c0.56,0.56,0.9,1.11,1.15,1.77c0.25,0.64,0.42,1.36,0.46,2.43c0.05,0.99,0.06,1.35,0.06,3.58v1.09c0,2.22-0.01,2.59-0.06,3.58c-0.05,1.06-0.22,1.79-0.46,2.43c-0.26,0.66-0.6,1.22-1.15,1.77c-0.56,0.56-1.11,0.9-1.77,1.15c-0.64,0.25-1.36,0.42-2.43,0.46C19.13,25.99,18.77,26,16.55,26h-1.09c-2.22,0-2.59-0.01-3.58-0.06c-1.06-0.05-1.79-0.22-2.43-0.46c-0.66-0.26-1.22-0.6-1.77-1.15c-0.56-0.56-0.9-1.11-1.15-1.77c-0.25-0.64-0.42-1.36-0.46-2.43C6.02,19.21,6,18.83,6,17.03v-2.06c0-1.8,0.02-2.18,0.06-3.1c0.05-1.06,0.22-1.79,0.46-2.43c0.26-0.66,0.6-1.22,1.15-1.77c0.56-0.56,1.11-0.9,1.77-1.15c0.64-0.25,1.36-0.42,2.43-0.46C12.79,6.02,13.17,6,14.97,6H17.03z M16,0C7.16,0,0,7.16,0,16s7.16,16,16,16s16-7.16,16-16c0-4.24-1.69-8.31-4.69-11.31S20.24,0,16,0z"/>
|
|
81
81
|
</svg>
|
|
82
82
|
{% elif params.iconType == "linkedin" %}
|
|
83
|
-
<svg class="{% if params.iconSize %}ons-svg-icon ons-svg-icon--{{ params.iconSize }}{% else %}ons-svg-icon{% endif %}
|
|
83
|
+
<svg class="{% if params.iconSize %}ons-svg-icon ons-svg-icon--{{ params.iconSize }}{% else %}ons-svg-icon{% endif %}{{ iconClasses }}" id="icon-linkedin" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
|
|
84
84
|
<path d="M16,-3.41060513e-13 C20.2434638,-3.41060513e-13 24.3131264,1.68570945 27.3137085,4.6862915 C30.3142906,7.68687356 32,11.7565362 32,16 C32,24.836556 24.836556,32 16,32 C7.163444,32 0,24.836556 0,16 C0,7.163444 7.163444,-3.41060513e-13 16,-3.41060513e-13 Z M11.3505859,12.4641113 L7.45385744,12.4641113 L7.45385744,24.1875 L11.3505859,24.1875 L11.3505859,12.4641113 Z M20.9152832,12.1889649 C18.8479004,12.1889649 17.9213867,13.3251953 17.4035644,14.1240234 L17.4035644,14.1240234 L17.4035644,12.4641113 L13.5070801,12.4641113 C13.5212538,12.7696262 13.5275532,13.809993 13.5292593,15.1533871 L13.5293118,16.8832762 C13.5292156,16.9843911 13.5291048,17.0860852 13.5289803,17.1882303 L13.5280782,17.8054916 L13.5280782,17.8054916 L13.5268961,18.427439 C13.5216699,20.9164121 13.5108442,23.3704557 13.5078578,24.0208157 L13.5070801,24.1875 L17.4035644,24.1875 L17.4035644,17.640625 C17.4035644,17.2902832 17.4287109,16.9401856 17.5317382,16.6896972 C17.8134766,15.9897461 18.4545899,15.2646484 19.5310059,15.2646484 C20.940918,15.2646484 21.5051269,16.3395996 21.5051269,17.9157715 L21.5051269,17.9157715 L21.5051269,24.1875 L25.4013672,24.1875 L25.4013672,17.465332 C25.4013672,13.8645019 23.4790039,12.1889649 20.9152832,12.1889649 Z M9.42822263,6.8125 C8.09521488,6.8125 7.22363281,7.68774412 7.22363281,8.83813475 C7.22363281,9.96313475 8.06933594,10.8632812 9.37695313,10.8632812 L9.37695313,10.8632812 L9.40234375,10.8632812 C10.7612305,10.8632812 11.6069336,9.96313475 11.6069336,8.83813475 C11.581543,7.68774412 10.7612305,6.8125 9.42822263,6.8125 Z"/>
|
|
85
85
|
</svg>
|
|
86
86
|
{# Animated icons #}
|
|
87
87
|
{% elif params.iconType == "loader" %}
|
|
88
|
-
<svg class="ons-svg-icon
|
|
88
|
+
<svg class="ons-svg-icon{{ iconClasses }}" xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" fill="currentcolor">
|
|
89
89
|
<rect x="0" y="0" width="100" height="100" fill="none"></rect>
|
|
90
90
|
<rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' transform='rotate(0 50 50) translate(0 -30)'>
|
|
91
91
|
<animate attributeName='opacity' from='1' to='0' dur='1s' begin='0s' repeatCount='indefinite'/>
|
|
@@ -65,7 +65,8 @@
|
|
|
65
65
|
"classes": params.label.classes,
|
|
66
66
|
"description": params.label.description,
|
|
67
67
|
"attributes": params.label.attributes,
|
|
68
|
-
"accessiblePlaceholder": params.accessiblePlaceholder
|
|
68
|
+
"accessiblePlaceholder": params.accessiblePlaceholder,
|
|
69
|
+
"inline": params.label.inline
|
|
69
70
|
}) }}
|
|
70
71
|
{% endif %}
|
|
71
72
|
|
|
@@ -153,7 +154,8 @@
|
|
|
153
154
|
"classes": params.fieldClasses,
|
|
154
155
|
"dontWrap": params.dontWrap,
|
|
155
156
|
"legendIsQuestionTitle": params.legendIsQuestionTitle,
|
|
156
|
-
"error": params.error
|
|
157
|
+
"error": params.error,
|
|
158
|
+
"inline": params.label.inline
|
|
157
159
|
}) %}
|
|
158
160
|
{% if charCheckField is defined and charCheckField %}
|
|
159
161
|
{{ charCheckField | safe }}
|
|
@@ -13,83 +13,89 @@
|
|
|
13
13
|
{% set otherClasses = '' %}
|
|
14
14
|
{% endif %}
|
|
15
15
|
|
|
16
|
-
{% if
|
|
17
|
-
{% set listEl = 'p' %}
|
|
18
|
-
{% elif params.element is defined and params.element %}
|
|
16
|
+
{% if params.element is defined and params.element %}
|
|
19
17
|
{% set listEl = params.element | lower %}
|
|
20
18
|
{% else %}
|
|
21
19
|
{% set listEl = 'ul' %}
|
|
22
20
|
{% endif %}
|
|
23
21
|
|
|
24
|
-
|
|
25
|
-
{
|
|
26
|
-
{
|
|
22
|
+
{% if (params.element is defined and params.element == 'ol') and listLength < 2 %}
|
|
23
|
+
<p {% if params.id is defined and params.id %}id="{{ params.id }}"{% endif %}{% if params.classes is defined and params.classes %} class="{{ params.classes -}}"{% endif %}>
|
|
24
|
+
{%- for item in params.itemsList -%}
|
|
25
|
+
{{ item.text }}
|
|
26
|
+
{%- endfor -%}
|
|
27
|
+
</p>
|
|
28
|
+
{% else %}
|
|
29
|
+
<{{listEl}} {% if params.id is defined and params.id %}id="{{ params.id }}"{% endif %}class="{% if listLength > 1 %}ons-list{% endif %}{% if params.classes is defined and params.classes %} {{ params.classes -}}{% endif %}{% if params.variants is defined and params.variants %}{% if params.variants is not string %}{% for variant in params.variants %} ons-list--{{ variant }}{% endfor %}{% else %} ons-list--{{ params.variants }}{% endif %}{% endif %}{% if otherClasses %} {{ otherClasses -}}{% endif %}">
|
|
30
|
+
{%- for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) -%}
|
|
31
|
+
<li class="ons-list__item{% if item.listClasses is defined and item.listClasses %} {{ item.listClasses }}{% endif %}"{% if item.current is defined and item.current %} aria-current="true"{% endif %}>
|
|
27
32
|
|
|
28
|
-
|
|
33
|
+
{% set itemText = item.text %}
|
|
29
34
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
35
|
+
{% if params.itemsList[0] is defined and item.iconType is defined and item.iconType %}
|
|
36
|
+
{% set iconType = item.iconType if item.iconType else '' %}
|
|
37
|
+
{% endif %}
|
|
33
38
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
39
|
+
{# For Craft support we also support title and navigation title #}
|
|
40
|
+
{% if item.navigationTitle is defined and item.navigationTitle %}
|
|
41
|
+
{% set itemText = item.navigationTitle %}
|
|
42
|
+
{% elif item.title is defined and item.title %}
|
|
43
|
+
{% set itemText = item.title %}
|
|
44
|
+
{% endif %}
|
|
40
45
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
46
|
+
{%- if item.index is defined and item.index or item.prefix is defined and item.prefix or (params.iconPosition is defined and params.iconPosition == 'before') -%}
|
|
47
|
+
<span class="ons-list__prefix"{% if listEl != 'ol' %} aria-hidden="true"{% endif %}>
|
|
48
|
+
{%- if item.prefix is defined and item.prefix -%}
|
|
49
|
+
{{- item.prefix -}}.
|
|
50
|
+
{%- elif (item.index is defined and item.index and listEl != 'ol') or (item.index is defined and item.index and listEl == 'ol' and 'bare' in variants) -%}
|
|
51
|
+
{{- loop.index -}}.
|
|
52
|
+
{% elif params.iconPosition is defined and params.iconPosition == 'before' %}
|
|
53
|
+
{% from "components/icons/_macro.njk" import onsIcon %}
|
|
54
|
+
{{
|
|
55
|
+
onsIcon({
|
|
56
|
+
"iconType": iconType,
|
|
57
|
+
"iconSize": params.iconSize
|
|
58
|
+
})
|
|
59
|
+
}}
|
|
60
|
+
{%- endif -%}
|
|
61
|
+
</span>
|
|
55
62
|
{%- endif -%}
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
63
|
+
{%- if item.url is defined and item.url and item.current != true -%}
|
|
64
|
+
{%- if item.external is defined and item.external -%}
|
|
65
|
+
{% from "components/external-link/_macro.njk" import onsExternalLink %}
|
|
66
|
+
{{
|
|
67
|
+
onsExternalLink({
|
|
68
|
+
"url": item.url,
|
|
69
|
+
"linkText": itemText
|
|
70
|
+
})
|
|
71
|
+
}}
|
|
72
|
+
{%- else -%}
|
|
73
|
+
<a href="{{ item.url }}" class="ons-list__link {% if item.variant == 'inPageLink' %}ons-js-inpagelink {% endif %} {{ item.classes }}"{% if item.index is defined and item.index %} data-qa="list-item-{{ loop.index }}"{% endif %}{% if item.target is defined and item.target %} target="{{ item.target }}"{% endif %}{% if item.rel is defined and item.rel %} rel="{{ item.rel }}"{% endif %}>
|
|
74
|
+
{%- if item.prefix is defined and item.prefix -%}<span class="ons-u-vh">{{- item.prefix -}}</span>{%- endif -%} {{- itemText | safe -}}
|
|
75
|
+
{%- if item.target is defined and item.target == "_blank" -%}<span class="ons-u-vh">{{- item.screenreaderMessage | default("this link will open in a new tab") -}}</span>{%- endif -%}
|
|
76
|
+
</a>
|
|
77
|
+
{%- endif -%}
|
|
67
78
|
{%- else -%}
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
79
|
+
{{- itemText | safe -}}
|
|
80
|
+
{%- endif -%}
|
|
81
|
+
{%- if item.suffix is defined and item.suffix or (params.iconPosition is defined and params.iconPosition == 'after') -%}
|
|
82
|
+
<span class="ons-list__suffix"{% if listEl != 'ol' %} aria-hidden="true"{% endif %}>
|
|
83
|
+
{%- if item.suffix is defined and item.suffix -%}
|
|
84
|
+
{{- item.suffix -}}
|
|
85
|
+
{%- elif (item.index is defined and item.index and listEl != 'ol') or (item.index is defined and item.index and listEl == 'ol' and 'bare' in variants) -%}
|
|
86
|
+
{{- loop.index -}}
|
|
87
|
+
{% elif params.iconPosition is defined and params.iconPosition == 'after' %}
|
|
88
|
+
{% from "components/icons/_macro.njk" import onsIcon %}
|
|
89
|
+
{{
|
|
90
|
+
onsIcon({
|
|
91
|
+
"iconType": iconType,
|
|
92
|
+
"iconSize": params.iconSize
|
|
93
|
+
})
|
|
94
|
+
}}
|
|
95
|
+
{%- endif -%} </span>
|
|
72
96
|
{%- endif -%}
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
<span class="ons-list__suffix"{% if listEl != 'ol' %} aria-hidden="true"{% endif %}>
|
|
78
|
-
{%- if item.suffix is defined and item.suffix -%}
|
|
79
|
-
{{- item.suffix -}}
|
|
80
|
-
{%- elif (item.index is defined and item.index and listEl != 'ol') or (item.index is defined and item.index and listEl == 'ol' and 'bare' in variants) -%}
|
|
81
|
-
{{- loop.index -}}
|
|
82
|
-
{% elif params.iconPosition is defined and params.iconPosition == 'after' %}
|
|
83
|
-
{% from "components/icons/_macro.njk" import onsIcon %}
|
|
84
|
-
{{
|
|
85
|
-
onsIcon({
|
|
86
|
-
"iconType": iconType,
|
|
87
|
-
"iconSize": params.iconSize
|
|
88
|
-
})
|
|
89
|
-
}}
|
|
90
|
-
{%- endif -%} </span>
|
|
91
|
-
{%- endif -%}
|
|
92
|
-
{% if listLength > 1 %}</li>{%- endif -%}
|
|
93
|
-
{%- endfor -%}
|
|
94
|
-
</{{listEl}}>
|
|
97
|
+
</li>
|
|
98
|
+
{%- endfor -%}
|
|
99
|
+
</{{listEl}}>
|
|
100
|
+
{% endif %}
|
|
95
101
|
{% endmacro %}
|