@ilo-org/twig 0.18.0 → 1.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/dist/components/card_detail/card_detail.twig +27 -27
- package/dist/components/card_detail/card_detail.wingsuit.yml +12 -0
- package/dist/components/card_factlist/card_factlist.twig +11 -11
- package/dist/components/card_factlist/card_factlist.wingsuit.yml +12 -0
- package/dist/components/card_feature/card_feature.twig +24 -24
- package/dist/components/card_feature/card_feature.wingsuit.yml +12 -0
- package/dist/components/card_multilink/card_multilink.twig +1 -1
- package/dist/components/card_multilink/card_multilink.wingsuit.yml +12 -0
- package/dist/components/card_promo/card_promo.twig +23 -23
- package/dist/components/card_promo/card_promo.wingsuit.yml +12 -0
- package/dist/components/card_stat/card_stat.twig +1 -1
- package/dist/components/card_stat/card_stat.wingsuit.yml +12 -0
- package/dist/components/card_text/card_text.twig +21 -21
- package/dist/components/card_text/card_text.wingsuit.yml +12 -0
- package/dist/components/cardgroup/cardgroup.twig +16 -18
- package/dist/components/cardgroup/cardgroup.wingsuit.yml +12 -0
- package/dist/components/navigation/navigation.behavior.js +1 -1
- package/dist/components/navigation/navigation.css +1 -1
- package/dist/components/navigation/navigation.twig +27 -27
- package/dist/components/promocard/promocard.css +1 -1
- package/package.json +4 -4
- package/src/patterns/components/card_detail/card_detail.twig +27 -27
- package/src/patterns/components/card_detail/card_detail.wingsuit.yml +12 -0
- package/src/patterns/components/card_factlist/card_factlist.twig +11 -11
- package/src/patterns/components/card_factlist/card_factlist.wingsuit.yml +12 -0
- package/src/patterns/components/card_feature/card_feature.twig +24 -24
- package/src/patterns/components/card_feature/card_feature.wingsuit.yml +12 -0
- package/src/patterns/components/card_multilink/card_multilink.twig +1 -1
- package/src/patterns/components/card_multilink/card_multilink.wingsuit.yml +12 -0
- package/src/patterns/components/card_promo/card_promo.twig +23 -23
- package/src/patterns/components/card_promo/card_promo.wingsuit.yml +12 -0
- package/src/patterns/components/card_stat/card_stat.twig +1 -1
- package/src/patterns/components/card_stat/card_stat.wingsuit.yml +12 -0
- package/src/patterns/components/card_text/card_text.twig +21 -21
- package/src/patterns/components/card_text/card_text.wingsuit.yml +12 -0
- package/src/patterns/components/cardgroup/cardgroup.twig +16 -18
- package/src/patterns/components/cardgroup/cardgroup.wingsuit.yml +12 -0
- package/src/patterns/components/navigation/navigation.js +27 -3
- package/src/patterns/components/navigation/navigation.twig +27 -27
|
@@ -3,35 +3,35 @@
|
|
|
3
3
|
#}
|
|
4
4
|
|
|
5
5
|
<div class="ilo--card ilo--card__type__detail ilo--card__action ilo--card__size__{{size}} {% if isvideo %} ilo--card__isvideo {% endif %}">
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
6
|
+
<a class="ilo--card--link" href="{{link}}" title="{{title}}">
|
|
7
|
+
<span class="ilo--card--link--text">{{title}}</span>
|
|
8
|
+
</a>
|
|
9
|
+
<div class="ilo--card--wrap">
|
|
10
|
+
{% if image %}
|
|
11
|
+
<div class="ilo--card--image--wrapper">
|
|
12
|
+
{% include "@components/picture/picture.twig" with {
|
|
13
13
|
image: image,
|
|
14
14
|
class: "card"
|
|
15
15
|
}
|
|
16
16
|
%}
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
17
|
+
</div>
|
|
18
|
+
{% endif %}
|
|
19
|
+
<div class="ilo--card--content">
|
|
20
|
+
{% if eyebrow %}
|
|
21
|
+
<p class="ilo--card--eyebrow">{{eyebrow}}</p>
|
|
22
|
+
{% endif %}
|
|
23
|
+
{% if title %}
|
|
24
|
+
<{{titleLevel|default('p')}} class="{{ prefix }}--card--title">{{ title }}</{{titleLevel|default('p')}}>
|
|
25
|
+
{% endif %}
|
|
26
|
+
{% if intro %}
|
|
27
|
+
<p class="ilo--card--intro">{{intro}}</p>
|
|
28
|
+
{% endif %}
|
|
29
|
+
{% if date %}
|
|
30
|
+
<time class="ilo--card--date" datetime="{{date.unix}}">{{date.human}}</time>
|
|
31
|
+
{% endif %}
|
|
32
|
+
{% if dateExtra %}
|
|
33
|
+
<p class="ilo--card--date-extra">{{dateExtra}}</p>
|
|
34
|
+
{% endif %}
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
37
|
</div>
|
|
@@ -69,3 +69,15 @@ detailcard:
|
|
|
69
69
|
options:
|
|
70
70
|
"true": "true"
|
|
71
71
|
"false": "false"
|
|
72
|
+
titleLevel:
|
|
73
|
+
type: select
|
|
74
|
+
label: Title Element
|
|
75
|
+
description: HTML element used for the title
|
|
76
|
+
required: false
|
|
77
|
+
options:
|
|
78
|
+
p: p
|
|
79
|
+
h1: h1
|
|
80
|
+
h2: h2
|
|
81
|
+
h3: h3
|
|
82
|
+
h4: h4
|
|
83
|
+
h5: h5
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
{#
|
|
2
2
|
FACT LIST CARD COMPONENT
|
|
3
3
|
#}
|
|
4
|
-
<div class="ilo--card ilo--card__type__factlist
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
4
|
+
<div class="ilo--card ilo--card__type__factlist ilo--card__size__{{size}} ilo--card__theme__{{theme}}">
|
|
5
|
+
<div class="ilo--card--wrap">
|
|
6
|
+
<div class="ilo--card--content">
|
|
7
|
+
{% if title %}
|
|
8
|
+
<{{titleLevel|default('p')}} class="{{ prefix }}--card--title">{{ title }}</{{titleLevel|default('p')}}>
|
|
9
|
+
{% endif %}
|
|
10
|
+
{% if list %}
|
|
11
|
+
{% include "@components/list/list.twig" with {
|
|
12
12
|
title: list.title,
|
|
13
13
|
ordered: list.ordered,
|
|
14
14
|
alignment: list.alignment,
|
|
15
15
|
items: list.items,
|
|
16
16
|
prefix: prefix,
|
|
17
17
|
} only %}
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
18
|
+
{% endif %}
|
|
19
|
+
</div>
|
|
20
|
+
</div>
|
|
21
21
|
</div>
|
|
@@ -3,37 +3,37 @@
|
|
|
3
3
|
#}
|
|
4
4
|
|
|
5
5
|
<div class="ilo--card ilo--card__type__feature ilo--card__action ilo--card__theme__{{theme}} ilo--card__size__{{ size }} {% if isvideo %} ilo--card__isvideo {% endif %} {% if cta %} ilo--card__linklist {% endif %}">
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
6
|
+
<a class="ilo--card--link" href="{{link}}" title="{{title}}">
|
|
7
|
+
<span class="ilo--card--link--text">{{title}}</span>
|
|
8
|
+
</a>
|
|
9
|
+
<div class="ilo--card--wrap">
|
|
10
|
+
{% if image %}
|
|
11
|
+
<div class="ilo--card--image--wrapper">
|
|
12
|
+
{% include "@components/picture/picture.twig" with {
|
|
13
13
|
image: image,
|
|
14
14
|
class: "card"
|
|
15
15
|
}
|
|
16
16
|
%}
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
17
|
+
</div>
|
|
18
|
+
{% endif %}
|
|
19
|
+
<div class="ilo--card--content">
|
|
20
|
+
{% if eyebrow %}
|
|
21
|
+
<p class="ilo--card--eyebrow">{{eyebrow}}</p>
|
|
22
|
+
{% endif %}
|
|
23
|
+
{% if title %}
|
|
24
|
+
<{{titleLevel|default('p')}} class="{{ prefix }}--card--title">{{ title }}</{{titleLevel|default('p')}}>
|
|
25
|
+
{% endif %}
|
|
26
|
+
{% if date %}
|
|
27
|
+
<time class="ilo--card--date" datetime="{{date.unix}}">{{date.human}}</time>
|
|
28
|
+
{% endif %}
|
|
29
|
+
{% if cta %}
|
|
30
|
+
{% include "@components/linklist/linklist.twig" with {
|
|
31
31
|
linkgroup: [{
|
|
32
32
|
links: [cta]
|
|
33
33
|
}],
|
|
34
34
|
prefix: prefix
|
|
35
35
|
} only %}
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
36
|
+
{% endif %}
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
39
|
</div>
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
<p class="ilo--card--eyebrow">{{eyebrow}}</p>
|
|
20
20
|
{% endif %}
|
|
21
21
|
{% if title %}
|
|
22
|
-
<
|
|
22
|
+
<{{titleLevel|default('p')}} class="{{ prefix }}--card--title">{{ title }}</{{titleLevel|default('p')}}>
|
|
23
23
|
{% endif %}
|
|
24
24
|
{% if image %}
|
|
25
25
|
<div class="ilo--card--image--wrapper">
|
|
@@ -89,3 +89,15 @@ multilinkcard:
|
|
|
89
89
|
narrow: narrow
|
|
90
90
|
wide: wide
|
|
91
91
|
fluid: fluid
|
|
92
|
+
titleLevel:
|
|
93
|
+
type: select
|
|
94
|
+
label: Title Element
|
|
95
|
+
description: HTML element used for the title
|
|
96
|
+
required: false
|
|
97
|
+
options:
|
|
98
|
+
p: p
|
|
99
|
+
h1: h1
|
|
100
|
+
h2: h2
|
|
101
|
+
h3: h3
|
|
102
|
+
h4: h4
|
|
103
|
+
h5: h5
|
|
@@ -3,33 +3,33 @@
|
|
|
3
3
|
#}
|
|
4
4
|
|
|
5
5
|
<div class="ilo--card--wrapper ilo--card--wrapper__type__promo ilo--card--wrapper__type__promo__size__{{ size }}">
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
6
|
+
<div class="ilo--card ilo--card__type__promo ilo--card__size__{{ size }} ilo--card__action ilo--card__theme__{{theme}} {% if cornercut %}ilo--card__cornercut{% endif %}">
|
|
7
|
+
<a class="ilo--card--link" href="{{link}}" title="{{title}}">
|
|
8
|
+
<span class="ilo--card--link--text">{{title}}</span>
|
|
9
|
+
</a>
|
|
10
|
+
<div class="ilo--card--wrap">
|
|
11
|
+
<div class="ilo--card--content">
|
|
12
|
+
{% if eyebrow %}
|
|
13
|
+
<p class="ilo--card--eyebrow">{{eyebrow}}</p>
|
|
14
|
+
{% endif %}
|
|
15
|
+
{% if title %}
|
|
16
|
+
<{{titleLevel|default('p')}} class="{{ prefix }}--card--title">{{ title }}</{{titleLevel|default('p')}}>
|
|
17
|
+
{% endif %}
|
|
18
|
+
{% if intro %}
|
|
19
|
+
<p class="ilo--card--intro">{{intro}}</p>
|
|
20
|
+
{% endif %}
|
|
21
|
+
{% if cta %}
|
|
22
|
+
<div class="ilo--card--cta">
|
|
23
|
+
{% include "@components/button/button.twig" with {
|
|
24
24
|
size: "medium",
|
|
25
25
|
url: cta.url,
|
|
26
26
|
label: cta.label,
|
|
27
27
|
type: "primary",
|
|
28
28
|
prefix: prefix,
|
|
29
29
|
} only %}
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
30
|
+
</div>
|
|
31
|
+
{% endif %}
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
35
|
</div>
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
<div class="ilo--card--wrap">
|
|
6
6
|
<div class="ilo--card--content">
|
|
7
7
|
{% if title %}
|
|
8
|
-
<
|
|
8
|
+
<{{titleLevel|default('p')}} class="{{ prefix }}--card--title">{{ title }}</{{titleLevel|default('p')}}>
|
|
9
9
|
{% endif %}
|
|
10
10
|
{% if intro %}
|
|
11
11
|
<p class="ilo--card--intro">{{intro}}</p>
|
|
@@ -42,3 +42,15 @@ statcard:
|
|
|
42
42
|
yellow: yellow
|
|
43
43
|
blue: blue
|
|
44
44
|
preview: "blue"
|
|
45
|
+
titleLevel:
|
|
46
|
+
type: select
|
|
47
|
+
label: Title Element
|
|
48
|
+
description: HTML element used for the title
|
|
49
|
+
required: false
|
|
50
|
+
options:
|
|
51
|
+
p: p
|
|
52
|
+
h1: h1
|
|
53
|
+
h2: h2
|
|
54
|
+
h3: h3
|
|
55
|
+
h4: h4
|
|
56
|
+
h5: h5
|
|
@@ -3,23 +3,23 @@
|
|
|
3
3
|
#}
|
|
4
4
|
|
|
5
5
|
<div class="ilo--card--wrapper">
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
6
|
+
<div class="ilo--card ilo--card__type__text ilo--card__size__{{ size }} ilo--card__action ilo--card__theme__{{theme}}">
|
|
7
|
+
<a class="ilo--card--link" href="{{link}}" title="{{title}}">
|
|
8
|
+
<span class="ilo--card--link--text">{{title}}</span>
|
|
9
|
+
</a>
|
|
10
|
+
<div class="ilo--card--wrap">
|
|
11
|
+
<div class="ilo--card--content">
|
|
12
|
+
{% if eyebrow %}
|
|
13
|
+
<p class="ilo--card--eyebrow">{{eyebrow}}</p>
|
|
14
|
+
{% endif %}
|
|
15
|
+
{% if title %}
|
|
16
|
+
<{{titleLevel|default('p')}} class="{{ prefix }}--card--title">{{ title }}</{{titleLevel|default('p')}}>
|
|
17
|
+
{% endif %}
|
|
18
|
+
{% if date %}
|
|
19
|
+
<time class="ilo--card--date" datetime="{{date.unix}}">{{date.human}}</time>
|
|
20
|
+
{% endif %}
|
|
21
|
+
{% if profile %}
|
|
22
|
+
{% include "@components/profile/profile.twig" with {
|
|
23
23
|
avatar: profile.avatar,
|
|
24
24
|
description: profile.description,
|
|
25
25
|
link: profile.link,
|
|
@@ -28,8 +28,8 @@
|
|
|
28
28
|
prefix: prefix,
|
|
29
29
|
theme: theme,
|
|
30
30
|
} only %}
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
31
|
+
{% endif %}
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
35
|
</div>
|
|
@@ -2,14 +2,14 @@
|
|
|
2
2
|
CARDGROUP COMPONENT
|
|
3
3
|
#}
|
|
4
4
|
{% if not cardcount%}
|
|
5
|
-
|
|
5
|
+
{% set cardcount = "three" %}
|
|
6
6
|
{% endif %}
|
|
7
7
|
|
|
8
8
|
<div class="ilo--cardgroup ilo--cardgroup__count__{{cardcount}} {% if collapsed %} ilo--cardgroup__collapsed {% endif %}">
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
<div class="ilo--cardgroup--inner">
|
|
10
|
+
{% for card in group %}
|
|
11
|
+
<div class="ilo--cardgroup--card">
|
|
12
|
+
{% include "@components/card/card.twig" with {
|
|
13
13
|
size: size,
|
|
14
14
|
theme: theme,
|
|
15
15
|
type: type,
|
|
@@ -24,23 +24,21 @@
|
|
|
24
24
|
linklist: card.linklist,
|
|
25
25
|
list: card.list,
|
|
26
26
|
title: card.title,
|
|
27
|
+
titleLevel: titleLevel,
|
|
27
28
|
alignment: alignment,
|
|
28
29
|
color: card.color,
|
|
29
30
|
cornercut: card.cornercut,
|
|
30
31
|
source: card.source,
|
|
31
32
|
prefix: prefix
|
|
32
33
|
} only %}
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
</a>
|
|
44
|
-
</div>
|
|
45
|
-
{% endif %}
|
|
34
|
+
</div>
|
|
35
|
+
{% endfor %}
|
|
36
|
+
</div>
|
|
37
|
+
{% if cta %}
|
|
38
|
+
<div class="ilo--cardgroup--button-wrap">
|
|
39
|
+
<a class="ilo--button ilo--button--medium ilo--button--secondary" href="{{cta.url}}">
|
|
40
|
+
<span class="button__label">{{ cta.label }}</span>
|
|
41
|
+
</a>
|
|
42
|
+
</div>
|
|
43
|
+
{% endif %}
|
|
46
44
|
</div>
|
|
@@ -53,6 +53,18 @@ cardgroup:
|
|
|
53
53
|
options:
|
|
54
54
|
dark: Dark
|
|
55
55
|
light: Light
|
|
56
|
+
titleLevel:
|
|
57
|
+
type: select
|
|
58
|
+
label: TitleLevel
|
|
59
|
+
description: Sets the heading level of the title for all of the cards. This is not applied to Data Cards which do not have titles
|
|
60
|
+
preview: p
|
|
61
|
+
options:
|
|
62
|
+
p: p
|
|
63
|
+
h1: h1
|
|
64
|
+
h2: h2
|
|
65
|
+
h3: h3
|
|
66
|
+
h4: h4
|
|
67
|
+
h5: h5
|
|
56
68
|
type:
|
|
57
69
|
type: select
|
|
58
70
|
label: Type
|
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(t){"function"==typeof define&&define.amd?define(t):t()}((function(){"use strict";function t(t){var e=function(t,e){if("object"!=typeof t||!t)return t;var n=t[Symbol.toPrimitive];if(void 0!==n){var i=n.call(t,e||"default");if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==typeof e?e:e+""}function e(e,n){for(var i=0;i<n.length;i++){var s=n[i];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(e,t(s.key),s)}}var n="click",i="keydown",s="resize",
|
|
1
|
+
!function(t){"function"==typeof define&&define.amd?define(t):t()}((function(){"use strict";function t(t){var e=function(t,e){if("object"!=typeof t||!t)return t;var n=t[Symbol.toPrimitive];if(void 0!==n){var i=n.call(t,e||"default");if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==typeof e?e:e+""}function e(e,n){for(var i=0;i<n.length;i++){var s=n[i];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(e,t(s.key),s)}}var n="click",i="keydown",s="resize",o="touchstart",a=function(){return t=function t(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.element=e,this.prefix=this.element.dataset.prefix,this.callback=n,this.init()},(a=[{key:"init",value:function(){return this.cacheDomReferences().setupHandlers().enable(),this}},{key:"cacheDomReferences",value:function(){return this.subNav=this.element.querySelector(".".concat(this.prefix,"--subnav")),this.subnavButton=this.element.querySelector(".".concat(this.prefix,"--nav--trigger")),this.menuCloseSet=this.element.querySelectorAll(".".concat(this.prefix,"--header--menu--close")),this.subnavBack=this.element.querySelectorAll(".".concat(this.prefix,"--mobile--subnav--back")),this.menuOpen=this.element.querySelector(".".concat(this.prefix,"--header--menu")),this.searchButton=this.element.querySelector(".".concat(this.prefix,"--search--button")),this.searchBox=this.element.querySelector(".".concat(this.prefix,"--search-box")),this.contextButton=this.element.querySelector(".".concat(this.prefix,"--language-switcher--button")),this.languageButton=this.element.querySelector(".".concat(this.prefix,"--mobile--nav--language--switcher--button")),this.contextLinks=this.element.querySelectorAll(".".concat(this.prefix,"--context-menu--link")),this.languageLinks=this.element.querySelectorAll(".".concat(this.prefix,"--nav--language")),this.body=document.body,this}},{key:"setupHandlers",value:function(){return this.subnavClick=this.handleSubnavClick.bind(this),this.subnavClickOff=this.handleSubnavClickOff.bind(this),this.subnavClickOn=this.handleSubnavClickOn.bind(this),this.subnavBackClick=this.handleSubnavBackClick.bind(this),this.menuCloseClick=this.handleMenuCloseClick.bind(this),this.menuOpenClick=this.handleMenuOpenClick.bind(this),this.languageButtonClick=this.handleLanguageButtonClick.bind(this),this.contextLinkClick=this.handleContextLinkClick.bind(this),this.onResize=this.handleResize.bind(this),this.keyPress=this.handleKeyPress.bind(this),this.contextButtonClick=this.handleContextButtonClick.bind(this),this.contextButtonClickOff=this.handleContextButtonClickOff.bind(this),this.contextButtonClickOn=this.handleContextButtonClickOn.bind(this),this.searchButtonClick=this.handleSearchButtonClick.bind(this),this.searchButtonClickOff=this.handleSearchButtonClickOff.bind(this),this.searchButtonClickOn=this.handleSearchButtonClickOn.bind(this),this}},{key:"enable",value:function(){var t=this;return this.subnavButton&&(this.subnavButton.addEventListener(n,(function(e){return t.subnavClick(e)})),this.subnavButton.addEventListener(o,(function(e){return t.subnavClick(e)}))),this.subnavBack.length>0&&this.subnavBack.forEach((function(e){e.addEventListener(n,(function(e){return t.subnavBackClick(e)})),e.addEventListener(o,(function(e){return t.subnavBackClick(e)}))})),this.searchButton&&(this.searchButton.addEventListener(n,(function(e){return t.searchButtonClick(e)})),this.searchButton.addEventListener(o,(function(e){return t.searchButtonClick(e)}))),this.menuCloseSet.length>0&&this.menuCloseSet.forEach((function(e,i){e.addEventListener(n,(function(e){return t.menuCloseClick(i,e)})),e.addEventListener(o,(function(e){return t.menuCloseClick(i,e)}))})),this.menuOpen&&(this.menuOpen.addEventListener(n,(function(e){return t.menuOpenClick(e)})),this.menuOpen.addEventListener(o,(function(e){return t.menuOpenClick(e)}))),this.contextButton&&(this.contextButton.addEventListener(n,(function(e){return t.contextButtonClick(e)})),this.contextButton.addEventListener(o,(function(e){return t.contextButtonClick(e)}))),this.languageButton&&(this.languageButton.addEventListener(n,(function(e){return t.languageButtonClick(e)})),this.languageButton.addEventListener(o,(function(e){return t.languageButtonClick(e)}))),this.contextLinks.length>0&&this.callback&&this.contextLinks.forEach((function(e){e.addEventListener(n,(function(e){return t.contextLinkClick(e)})),e.addEventListener(o,(function(e){return t.contextLinkClick(e)}))})),this.languageLinks.length>0&&this.callback&&this.languageLinks.forEach((function(e){e.addEventListener(n,(function(e){return t.contextLinkClick(e)})),e.addEventListener(o,(function(e){return t.contextLinkClick(e)}))})),this.searchBox.addEventListener(n,(function(t){t.stopPropagation()}),!1),this.subNav.addEventListener(n,(function(t){t.stopPropagation()}),!1),window.addEventListener(s,(function(e){window.innerWidth>=1024&&t.onResize(e)})),this}},{key:"handleContextLinkClick",value:function(t){return t.preventDefault(),this.callback(t),this}},{key:"handleKeyPress",value:function(t,e){return"Escape"===t.key&&e(t),this}},{key:"handleLanguageButtonClick",value:function(t){return t.preventDefault(),t.stopImmediatePropagation(),this.element.classList.toggle("".concat(this.prefix,"--select--open")),this}},{key:"handleContextButtonClickOn",value:function(t){var e=this;return t.stopImmediatePropagation(),this.element.classList.add("".concat(this.prefix,"--context--open")),window.addEventListener(i,(function(t){return e.keyPress(t,e.contextButtonClickOff)}),!1),window.addEventListener(n,this.contextButtonClickOff),this}},{key:"handleContextButtonClickOff",value:function(t){var e=this;return t.stopImmediatePropagation(),this.element.classList.remove("".concat(this.prefix,"--context--open")),window.removeEventListener(i,(function(t){return e.keyPress(t,e.contextButtonClickOff)}),!1),window.removeEventListener(n,this.contextButtonClickOff),this}},{key:"handleContextButtonClick",value:function(t){return this.element.classList.contains("".concat(this.prefix,"--context--open"))?this.contextButtonClickOff(t):this.contextButtonClickOn(t),this}},{key:"handleSearchButtonClickOn",value:function(t){var e=this;return t.stopImmediatePropagation(),this.searchBox.style.display="block",window.setTimeout((function(){e.element.classList.add("".concat(e.prefix,"--search--open"))}),10),window.addEventListener(i,(function(t){return e.keyPress(t,e.searchButtonClickOff)}),!1),window.innerWidth>=1024&&window.addEventListener(n,this.searchButtonClickOff,!1),this}},{key:"handleSearchButtonClickOff",value:function(t){var e=this;return t.stopImmediatePropagation(),this.element.classList.remove("".concat(this.prefix,"--search--open")),window.setTimeout((function(){e.searchBox.style.display="none"}),225),window.removeEventListener(i,(function(t){return e.keyPress(t,e.searchButtonClickOff)}),!1),window.removeEventListener(n,this.searchButtonClickOff,!1),this}},{key:"handleSearchButtonClick",value:function(t){return this.element.classList.remove("".concat(this.prefix,"--subnav--open")),this.element.classList.contains("".concat(this.prefix,"--search--open"))?this.searchButtonClickOff(t):this.searchButtonClickOn(t),this}},{key:"handleMenuOpenClick",value:function(t){return t.preventDefault(),t.stopImmediatePropagation(),this.element.classList.add("".concat(this.prefix,"--mobile--open")),this.body.classList.add("".concat(this.prefix,"--menu--open")),this}},{key:"handleSubnavClickOn",value:function(t){var e=this;return t.stopImmediatePropagation(),this.subNav.style.display="block",window.setTimeout((function(){e.element.classList.add("".concat(e.prefix,"--subnav--open"))}),10),window.addEventListener(i,(function(t){return e.keyPress(t,e.subnavClickOff)}),!1),window.innerWidth>=1024&&window.addEventListener(n,this.subnavClickOff),this}},{key:"handleSubnavClickOff",value:function(t){var e=this;return t.stopImmediatePropagation(),this.element.classList.remove("".concat(this.prefix,"--subnav--open")),window.setTimeout((function(){e.subNav.style.display="none"}),150),window.removeEventListener(i,(function(t){return e.keyPress(t,e.subnavClickOff)}),!1),window.removeEventListener(n,this.subnavClickOff),this}},{key:"handleSubnavClick",value:function(t){return t.preventDefault(),t.stopImmediatePropagation(),this.element.classList.remove("".concat(this.prefix,"--search--open")),this.element.classList.contains("".concat(this.prefix,"--subnav--open"))?this.subnavClickOff(t):this.subnavClickOn(t),this}},{key:"handleSubnavBackClick",value:function(t){return t.stopImmediatePropagation(),t.preventDefault(),this.subnavClickOff(t),this.element.classList.remove("".concat(this.prefix,"--select--open")),this}},{key:"handleMenuCloseClick",value:function(t,e){return e.preventDefault(),e.stopImmediatePropagation(),this.element.classList.remove("".concat(this.prefix,"--mobile--open")),this.element.classList.remove("".concat(this.prefix,"--subnav--open")),this.body.classList.remove("".concat(this.prefix,"--menu--open")),this}},{key:"handleResize",value:function(){return this.element.classList.remove("".concat(this.prefix,"--context--open")),this.element.classList.remove("".concat(this.prefix,"--mobile--open")),this.element.classList.remove("".concat(this.prefix,"--subnav--open")),this.element.classList.remove("".concat(this.prefix,"--search--open")),this}}])&&e(t.prototype,a),c&&e(t,c),Object.defineProperty(t,"prototype",{writable:!1}),t;var t,a,c}();Drupal.behaviors.navigation={attach:function(){Array.prototype.forEach.call(document.querySelectorAll('[data-loadcomponent="Navigation"]'),(function(t){t.dataset.jsProcessed||(new a(t),t.dataset.jsProcessed=!0)}))}}}));
|