@openeuropa/bcl-mega-menu 0.1.202510071430 → 0.1.202601141030

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/mega-menu-items.html.twig +18 -21
  2. package/mega-menu-submenu.html.twig +22 -22
  3. package/mega-menu.html.twig +35 -38
  4. package/package.json +5 -5
package/mega-menu-items.html.twig CHANGED
@@ -1,35 +1,32 @@
1
- {% apply spaceless %}
2
-
3
1
  {% set _label = label ?? null %}
4
2
  {% set _items = items ?? [] %}
5
3
  {% set _icon_path = icon_path ?? '' %}
6
4
  {% set _level = level ?? 1 %}
7
- {% set _see_all = see_all ?? null %}
5
+ {% set _see_all = see_all ?? null -%}
8
6
 
9
7
  <ul class="bcl-mega-menu__items __level-{{ _level }}">
10
- {% for _item in _items %}
11
- {% set _li_attributes = _item.li_attributes ?? create_attribute() %}
12
- {% if _item.items is defined and _item.items is not empty %}
13
- {# This is a parent item. #}
8
+ {%- for _item in _items %}
9
+ {%- set _li_attributes = _item.li_attributes ?? create_attribute() %}
10
+ {%- if _item.items is defined and _item.items is not empty %}
11
+ {#- This is a parent item. -#}
14
12
  <li{{ _li_attributes.addClass('__parent') }}>
15
- {% include '@oe-bcl/bcl-mega-menu/mega-menu-submenu.html.twig' with _item|merge({
13
+ {%- include '@oe-bcl/bcl-mega-menu/mega-menu-submenu.html.twig' with _item|merge({
16
14
  icon_path: _icon_path,
17
15
  level: _level + 1,
18
- }) only %}
16
+ }) only -%}
19
17
  </li>
20
- {% else %}
21
- {# This is a leaf item. #}
18
+ {%- else %}
19
+ {#- This is a leaf item. -#}
22
20
  <li{{ _li_attributes.addClass('__leaf') }}>
23
- {% if _item.path is empty %}
24
- {# This is a nolink item. #}
21
+ {%- if _item.path is empty %}
22
+ {#- This is a nolink item. -#}
25
23
  <span{{ _item.attributes ?? '' }}>{{ _item.label }}</span>
26
- {% else %}
27
- {# This is a link. #}
28
- {% include '@oe-bcl/bcl-link/link.html.twig' with _item only %}
29
- {% endif %}
24
+ {%- else %}
25
+ {#- This is a link. #}
26
+ {%- include '@oe-bcl/bcl-link/link.html.twig' with _item only %}
27
+ {%- endif -%}
30
28
  </li>
31
- {% endif %}
32
- {% endfor %}
29
+ {%- endif %}
30
+ {%- endfor -%}
33
31
  </ul>
34
-
35
- {% endapply %}
32
+ {#--#}
package/mega-menu-submenu.html.twig CHANGED
@@ -1,15 +1,13 @@
1
- {% apply spaceless %}
2
-
3
1
  {% set _items = items ?? [] %}
4
2
  {% set _trigger = trigger ?? null %}
5
3
  {% set _icon_path = icon_path ?? '' %}
6
4
  {% set _level = level ?? 2 %}
7
5
  {% set _see_all = see_all ?? null %}
8
6
 
9
- {% set _trigger_id = _trigger.id|default('mm-trigger-' ~ random(10000)) %}
7
+ {%- set _trigger_id = _trigger.id|default('mm-trigger-' ~ random(10000)) %}
10
8
  {% set _panel_id = 'mm-panel-' ~ _trigger_id %}
11
9
 
12
- {% set _trigger_attributes = _trigger.attributes ?? create_attribute() %}
10
+ {%- set _trigger_attributes = _trigger.attributes ?? create_attribute() %}
13
11
  {% set _trigger = _trigger|merge({
14
12
  attributes: _trigger_attributes
15
13
  .setAttribute('id', _trigger_id)
@@ -21,45 +19,47 @@
21
19
  }) %}
22
20
  {% include '@oe-bcl/bcl-button/button.html.twig' with _trigger only %}
23
21
 
24
- {# Add an optional "See all" link as last item. #}
22
+ {%- set _see_all_link = null %}
23
+ {# Prepare an optional "See all" link rendered outside the list. #}
25
24
  {% if _see_all is not empty %}
26
- {# Wrap the label for an ellipsis. #}
27
- {% set _see_all_label %}
25
+ {%- set _see_all_label -%}
28
26
  <span>{{- _see_all.label -}}</span>
29
- {% endset %}
30
- {% set _see_all_attr = (_see_all.attributes is defined ? _see_all.attributes : create_attribute()) %}
31
- {% set _see_all = _see_all|merge({
27
+ {%- endset %}
28
+ {%- set _see_all_attr = (_see_all.attributes is defined ? _see_all.attributes : create_attribute()) %}
29
+ {%- set _see_all_link = _see_all|merge({
32
30
  label: _see_all_label,
33
31
  icon: {
32
+ size: 'xs',
34
33
  name: 'arrow-right',
35
34
  path: _icon_path,
36
35
  },
37
- li_attributes: create_attribute()
38
- .addClass('__see_all'),
39
36
  attributes: _see_all_attr
40
37
  .addClass(['see-all-button'])
41
38
  .setAttribute('aria-label', 'See all items in ‘' ~ _trigger.label ~ '’')
42
39
  }) %}
43
- {% set _items = _items|merge([_see_all]) %}
44
40
  {% endif %}
45
41
  {% set submenu_attributes = create_attribute()
46
42
  .setAttribute('id', _panel_id)
47
- .setAttribute('hidden', '')
43
+ .setAttribute('hidden', true)
48
44
  .setAttribute('role', 'group')
49
45
  .setAttribute('aria-labelledby', _trigger_id)
50
46
  .addClass('bcl-mega-menu__submenu', '__level-' ~ _level)
51
- %}
47
+ -%}
52
48
  <div{{ submenu_attributes }}>
53
- {% if _trigger %}
54
- <div class="__header">
55
- <p class="__label">{{ _trigger.label }}</p>
49
+ {%- if _trigger -%}
50
+ <div class="__header">{# -#}
51
+ <p class="__label">{{ _trigger.label }}</p>{# -#}
56
52
  </div>
57
- {% endif %}
58
- {% include '@oe-bcl/bcl-mega-menu/mega-menu-items.html.twig' with {
53
+ {%- endif %}
54
+ {%- include '@oe-bcl/bcl-mega-menu/mega-menu-items.html.twig' with {
59
55
  items: _items,
60
56
  icon_path: _icon_path,
61
57
  level: _level,
62
58
  } only %}
59
+ {%- if _see_all_link -%}
60
+ <div class="__see_all">
61
+ {%- include '@oe-bcl/bcl-link/link.html.twig' with _see_all_link only -%}
62
+ </div>
63
+ {%- endif -%}
63
64
  </div>
64
-
65
- {% endapply %}
65
+ {#--#}
package/mega-menu.html.twig CHANGED
@@ -1,5 +1,3 @@
1
- {% apply spaceless %}
2
-
3
1
  {# Parameters:
4
2
  - id (string) (default: dropdown-random(1000))
5
3
  - link (boolean) (default: false) - sets trigger to link, default is button
@@ -19,7 +17,7 @@
19
17
  - icon_path (string) (default: '')
20
18
  #}
21
19
 
22
- {% set _id = id|default('dropdown-' ~ random(1000)) %}
20
+ {%- set _id = id|default('dropdown-' ~ random(1000)) %}
23
21
  {% set _link = link ?? false %}
24
22
  {% set _trigger = trigger|default({}) %}
25
23
  {% set _content_block = content_block|default('') %}
@@ -30,16 +28,16 @@
30
28
  {% set _icon_path = icon_path|default('') %}
31
29
  {% set _menu_id = 'mega-menu-' ~ _id %}
32
30
 
33
- {% if attributes is empty %}
34
- {% set attributes = create_attribute() %}
31
+ {%- if attributes is empty %}
32
+ {%- set attributes = create_attribute() %}
35
33
  {% endif %}
36
34
 
37
- {% set _classes = ['bcl-mega-menu'] %}
35
+ {%- set _classes = ['bcl-mega-menu'] %}
38
36
 
39
- {% set attributes = attributes.addClass(_classes) %}
37
+ {%- set attributes = attributes.addClass(_classes) %}
40
38
 
41
- {% if _trigger.attributes is empty %}
42
- {% set _trigger = _trigger|merge({
39
+ {%- if _trigger.attributes is empty %}
40
+ {%- set _trigger = _trigger|merge({
43
41
  attributes: create_attribute()
44
42
  }) %}
45
43
  {% endif %}
@@ -51,19 +49,19 @@
51
49
  .setAttribute('data-bs-toggle', 'dropdown')
52
50
  .setAttribute('data-bs-auto-close', 'outside')
53
51
  .setAttribute('id', _id)
54
- }) %}
52
+ }) -%}
55
53
 
56
54
  <div {{ attributes }}>
57
- {% include '@oe-bcl/bcl-button/button.html.twig' with _trigger|merge({
55
+ {%- include '@oe-bcl/bcl-button/button.html.twig' with _trigger|merge({
58
56
  variant: 'link',
59
57
  clean_class: true,
60
58
  }) only %}
61
- {# Mega menu panel. #}
62
- <nav id="{{ _menu_id }}" class="bcl-mega-menu__container dropdown-menu" aria-labelledby="{{ _id }}" aria-label="Main mega menu">
59
+ {#- Mega menu panel. -#}
60
+ <nav id="{{ _menu_id }}" class="bcl-mega-menu__container dropdown-menu" aria-labelledby="{{ _id }}" aria-label="Main mega menu">{# -#}
63
61
  <div class="container">
64
- {# Mobile back button. #}
62
+ {#- Mobile back button. -#}
65
63
  <div class="container d-lg-none bcl-mega-menu__back-button-block">
66
- {% include '@oe-bcl/bcl-button/button.html.twig' with {
64
+ {%- include '@oe-bcl/bcl-button/button.html.twig' with {
67
65
  label: _back_button_label,
68
66
  icon_position: "before",
69
67
  variant: 'link',
@@ -72,20 +70,20 @@
72
70
  name: "arrow-left",
73
71
  },
74
72
  attributes: create_attribute().addClass(['back-button']).setAttribute('aria-label', 'Back to main menu')
75
- } only %}
73
+ } only -%}
76
74
  </div>
77
- {# Info/summary and submenu columns. #}
78
- <div class="position-relative">
75
+ {#- Info/summary and submenu columns. -#}
76
+ <div class="position-relative">{# -#}
79
77
  <div class="row">
80
- {# Content / summary column. #}
81
- {% if content_block is defined %}
82
- <div class="col-md-12 col-xl-3 position-relative bcl-mega-menu__info">
78
+ {#- Content / summary column. #}
79
+ {%- if content_block is defined -%}
80
+ <div class="col-md-12 col-xl-3 position-relative bcl-mega-menu__info">{# -#}
83
81
  <div class="content-block">
84
82
  {%- block content_block -%}
85
83
  {{ _content_block }}
86
84
  {%- endblock -%}
87
85
  {% if _content_link.path is not empty %}
88
- {% set _content_link = _content_link|merge({
86
+ {%- set _content_link = _content_link|merge({
89
87
  icon: _content_link.icon|default({})|merge({
90
88
  path: _icon_path
91
89
  }),
@@ -93,23 +91,22 @@
93
91
  ? _content_link.attributes
94
92
  : create_attribute()
95
93
  ).addClass('content-link')
96
- }) %}
94
+ }) -%}
97
95
  <p class="m-0">{% include '@oe-bcl/bcl-link/link.html.twig' with _content_link only %}</p>
98
- {% endif %}
99
- </div>
100
- <div class="shadow-container">
101
- <span class="shadow-bg"></span>
102
- </div>
96
+ {%- endif -%}
97
+ </div>{# -#}
98
+ <div class="shadow-container">{# -#}
99
+ <span class="shadow-bg"></span>{# -#}
100
+ </div>{# -#}
103
101
  </div>
104
- {% endif %}
105
- {# Submenu column. #}
102
+ {%- endif %}
103
+ {#- Submenu column. -#}
106
104
  <div class="col-md-12 col-lg-4 col-xl-3 bcl-mega-menu__menu">
107
- {% include '@oe-bcl/bcl-mega-menu/mega-menu-items.html.twig' %}
108
- </div>
109
- </div>
110
- </div>
111
- </div>
112
- </nav>
105
+ {%- include '@oe-bcl/bcl-mega-menu/mega-menu-items.html.twig' -%}
106
+ </div>{# -#}
107
+ </div>{# -#}
108
+ </div>{# -#}
109
+ </div>{# -#}
110
+ </nav>{# -#}
113
111
  </div>
114
-
115
- {% endapply %}
112
+ {#--#}
package/package.json CHANGED
@@ -2,15 +2,15 @@
2
2
  "name": "@openeuropa/bcl-mega-menu",
3
3
  "author": "European Commission",
4
4
  "license": "EUPL-1.2",
5
- "version": "0.1.202510071430",
5
+ "version": "0.1.202601141030",
6
6
  "publishConfig": {
7
7
  "access": "public"
8
8
  },
9
9
  "description": "OE - BCL mega menu",
10
10
  "dependencies": {
11
- "@openeuropa/bcl-button": "^0.1.202510071430",
12
- "@openeuropa/bcl-dropdown": "^0.1.202510071430",
13
- "@openeuropa/bcl-link": "^0.1.202510071430"
11
+ "@openeuropa/bcl-button": "^0.1.202601141030",
12
+ "@openeuropa/bcl-dropdown": "^0.1.202601141030",
13
+ "@openeuropa/bcl-link": "^0.1.202601141030"
14
14
  },
15
15
  "repository": {
16
16
  "type": "git",
@@ -26,5 +26,5 @@
26
26
  "design-system",
27
27
  "twig"
28
28
  ],
29
- "gitHead": "43791350771d614a6aab0e13003f33a8aa789ea5"
29
+ "gitHead": "ecc310c61893a3c47a8ec7f67385055b5aea4759"
30
30
  }