@openeuropa/bcl-twig-templates 0.4298.202511051800 → 0.4360.202601141610

package/templates/bcl-mega-menu/mega-menu.html.twig

@@ -1,5 +1,3 @@
-{% apply spaceless %}
-
 {# Parameters:
   - id (string) (default: dropdown-random(1000))
   - link (boolean) (default: false) - sets trigger to link, default is button
@@ -19,7 +17,7 @@
   - icon_path (string) (default: '')
 #}
 
-{% set _id = id|default('dropdown-' ~ random(1000)) %}
+{%- set _id = id|default('dropdown-' ~ random(1000)) %}
 {% set _link = link ?? false %}
 {% set _trigger = trigger|default({}) %}
 {% set _content_block = content_block|default('') %}
@@ -30,16 +28,16 @@
 {% set _icon_path = icon_path|default('') %}
 {% set _menu_id = 'mega-menu-' ~ _id %}
 
-{% if attributes is empty %}
-  {% set attributes = create_attribute() %}
+{%- if attributes is empty %}
+  {%- set attributes = create_attribute() %}
 {% endif %}
 
-{% set _classes = ['bcl-mega-menu'] %}
+{%- set _classes = ['bcl-mega-menu'] %}
 
-{% set attributes = attributes.addClass(_classes) %}
+{%- set attributes = attributes.addClass(_classes) %}
 
-{% if _trigger.attributes is empty %}
-  {% set _trigger = _trigger|merge({
+{%- if _trigger.attributes is empty %}
+  {%- set _trigger = _trigger|merge({
     attributes: create_attribute()
   }) %}
 {% endif %}
@@ -51,19 +49,19 @@
                       .setAttribute('data-bs-toggle', 'dropdown')
                       .setAttribute('data-bs-auto-close', 'outside')
                       .setAttribute('id', _id)
-}) %}
+}) -%}
 
 <div {{ attributes }}>
-  {% include '@oe-bcl/bcl-button/button.html.twig' with _trigger|merge({
+  {%- include '@oe-bcl/bcl-button/button.html.twig' with _trigger|merge({
     variant: 'link',
     clean_class: true,
   }) only %}
-  {# Mega menu panel. #}
-  <nav id="{{ _menu_id }}" class="bcl-mega-menu__container dropdown-menu" aria-labelledby="{{ _id }}" aria-label="Main mega menu">
+  {#- Mega menu panel. -#}
+  <nav id="{{ _menu_id }}" class="bcl-mega-menu__container dropdown-menu" aria-labelledby="{{ _id }}" aria-label="Main mega menu">{# -#}
     <div class="container">
-      {# Mobile back button. #}
+      {#- Mobile back button. -#}
       <div class="container d-lg-none bcl-mega-menu__back-button-block">
-        {% include '@oe-bcl/bcl-button/button.html.twig' with {
+        {%- include '@oe-bcl/bcl-button/button.html.twig' with {
           label: _back_button_label,
           icon_position: "before",
           variant: 'link',
@@ -72,20 +70,20 @@
             name: "arrow-left",
           },
           attributes: create_attribute().addClass(['back-button']).setAttribute('aria-label', 'Back to main menu')
-        } only %}
+        } only -%}
       </div>
-      {# Info/summary and submenu columns. #}
-      <div class="position-relative">
+      {#- Info/summary and submenu columns. -#}
+      <div class="position-relative">{# -#}
         <div class="row">
-          {# Content / summary column. #}
-          {% if content_block is defined %}
-            <div class="col-md-12 col-xl-3 position-relative bcl-mega-menu__info">
+          {#- Content / summary column. #}
+          {%- if content_block is defined -%}
+            <div class="col-md-12 col-xl-3 position-relative bcl-mega-menu__info">{# -#}
               <div class="content-block">
                 {%- block content_block -%}
                   {{ _content_block }}
                 {%- endblock -%}
                 {% if _content_link.path is not empty %}
-                  {% set _content_link = _content_link|merge({
+                  {%- set _content_link = _content_link|merge({
                     icon: _content_link.icon|default({})|merge({
                       path: _icon_path
                     }),
@@ -93,23 +91,24 @@
                       ? _content_link.attributes
                       : create_attribute()
                     ).addClass('content-link')
-                  }) %}
+                  }) -%}
                   <p class="m-0">{% include '@oe-bcl/bcl-link/link.html.twig' with _content_link only %}</p>
-                {% endif %}
-              </div>
-              <div class="shadow-container">
-                <span class="shadow-bg"></span>
-              </div>
+                {%- endif -%}
+              </div>{# -#}
+              <div class="shadow-container">{# -#}
+                <span class="shadow-bg"></span>{# -#}
+              </div>{# -#}
             </div>
-          {% endif %}
-          {# Submenu column. #}
+          {%- endif %}
+          {#- Submenu column. -#}
           <div class="col-md-12 col-lg-4 col-xl-3 bcl-mega-menu__menu">
-            {% include '@oe-bcl/bcl-mega-menu/mega-menu-items.html.twig' %}
-          </div>
-        </div>
-      </div>
-    </div>
-  </nav>
+            <div class="__submenu_body">
+              {% include '@oe-bcl/bcl-mega-menu/mega-menu-items.html.twig' %}
+            </div>{# -#}
+          </div>{# -#}
+        </div>{# -#}
+      </div>{# -#}
+    </div>{# -#}
+  </nav>{# -#}
 </div>
-
-{% endapply %}
+{#--#}

package/templates/bcl-modal/modal.html.twig

@@ -1,5 +1,3 @@
-{% apply spaceless %}
-
 {# Parameters:
   - size (string) default('')
     options: sm, lg, xl, fullscreen
@@ -7,7 +5,8 @@
   - fullscreen_responsive (string) (default: '')
     options: sm, md, lg, xl, xxl
   - static_backdrop (boolean) (default: false)
-  - verticaly_centered (boolean) (default: false)
+  - vertically_centered (boolean) (default: false)
+  - verticaly_centered (boolean) (default: false) // deprecated typo
   - scrollable (boolean) (default: false)
   - header (block) (default: '')
   - messages (block) (default: '')
@@ -25,11 +24,11 @@
     - footer
 #}
 
-{% set _size =  size|default('') %}
+{%- set _size =  size|default('') %}
 {% set _id = id|default('modal-' ~ random(10000)) %}
 {% set _fullscreen_responsive =  fullscreen_responsive|default('') %}
 {% set _static_backdrop = static_backdrop ?? false %}
-{% set _verticaly_centered = verticaly_centered ?? false %}
+{% set _vertically_centered = vertically_centered ?? verticaly_centered ?? false %}
 {% set _scrollable = scrollable ?? false %}
 {% set _header = header|default('') %}
 {% set _header_attributes = header_attributes ?: create_attribute() %}
@@ -39,13 +38,13 @@
 {% set _footer = footer|default('') %}
 {% set _footer_attributes = footer_attributes ?: create_attribute() %}
 
-{% set _classes = ['modal', 'fade'] %}
+{%- set _classes = ['modal', 'fade'] %}
 
-{% if attributes is empty %}
-  {% set attributes = create_attribute() %}
+{%- if attributes is empty %}
+  {%- set attributes = create_attribute() %}
 {% endif %}
 
-{% set attributes = attributes
+{%- set attributes = attributes
                     .setAttribute('id', _id)
                     .setAttribute('tabindex', '-1')
                     .setAttribute('aria-hidden', 'true')
@@ -53,42 +52,41 @@
                     .addClass(_classes)
 %}
 
-{% if _static_backdrop %}
-  {% set attributes = attributes.setAttribute('data-bs-backdrop', 'static') %}
-{% endif %}
+{%- if _static_backdrop %}
+  {%- set attributes = attributes.setAttribute('data-bs-backdrop', 'static') %}
+{% endif -%}
 
 <div
   {{ attributes }}
->
+>{# -#}
   <div class="modal-dialog
   {{- _size ? ' modal-' ~ size -}}
   {{- _fullscreen_responsive ? ' modal-fullscreen-' ~ _fullscreen_responsive ~ '-down' -}}
-  {{- _verticaly_centered ? ' modal-dialog-centered' -}}
+  {{- _vertically_centered ? ' modal-dialog-centered' -}}
   {{- _scrollable ? ' modal-dialog-scrollable' -}}"
-  >
+  >{# -#}
     <div class="modal-content">
-      {% if header is not empty %}
+      {%- if header is not empty -%}
       <div
         {{- _header_attributes.addClass(['modal-header']) -}}
       >
         {%- block header _header -%}
       </div>
-      {% endif %}
+      {%- endif %}
       {%- block messages _messages -%}
       <div
           {{- _body_attributes.addClass(['modal-body']) -}}
       >
         {%- block body _body -%}
       </div>
-      {% if footer is not empty %}
+      {%- if footer is not empty -%}
       <div
           {{- _footer_attributes.addClass(['modal-footer']) -}}
       >
         {%- block footer _footer -%}
       </div>
-      {% endif %}
-    </div>
-  </div>
+      {%- endif -%}
+    </div>{# -#}
+  </div>{# -#}
 </div>
-
-{% endapply %}
+{#--#}

package/templates/bcl-navbar/navbar.html.twig

@@ -1,5 +1,3 @@
-{% apply spaceless %}
-
 {# Parameters:
   - collapse_id (string) (default: '')
   - background (string) (default: '')
@@ -26,7 +24,7 @@
     - right
 #}
 
-{% set _collapse_id = collapse_id|default('') %}
+{%- set _collapse_id = collapse_id|default('') %}
 {% set _background = background|default('') %}
 {% set _brand = brand|default({}) %}
 {% set _navigation = navigation|default({}) %}
@@ -35,48 +33,48 @@
 {% set _color_set = color_set|default('light') %}
 {% set _disable_collapse = disable_collapse ?? false %}
 
-{% set _classes = ['navbar', 'navbar-expand-' ~ _expand] %}
+{%- set _classes = ['navbar', 'navbar-expand-' ~ _expand] %}
 {% if _background is not empty %}
-  {% set _classes = _classes|merge(['bg-' ~ _background]) %}
+  {%- set _classes = _classes|merge(['bg-' ~ _background]) %}
 {% endif %}
 {% if _color_set is not empty %}
-  {% set _classes = _classes|merge(['navbar-' ~ _color_set]) %}
+  {%- set _classes = _classes|merge(['navbar-' ~ _color_set]) %}
 {% endif %}
 
-{% if attributes is empty %}
-  {% set attributes = create_attribute() %}
+{%- if attributes is empty %}
+  {%- set attributes = create_attribute() %}
 {% endif %}
 
-{% set attributes = attributes.addClass(_classes) %}
+{%- set attributes = attributes.addClass(_classes) -%}
 
 <nav
   {{ attributes }}
->
+>{# -#}
   <div class='container'>
-  {% block branding %}
-    {% if _brand is not empty %}
+  {%- block branding %}
+    {%- if _brand is not empty -%}
       <a class='navbar-brand' href='{{ _brand.link }}'>
-      {% for logo in _brand.logos %}
+      {%- for logo in _brand.logos -%}
         <img
           src='{{ logo.src }}'
           {% if logo.alt is not empty %}
           alt='{{ logo.alt }}'
           {% endif %}
-          {% if logo.class is not empty %}
+          {%- if logo.class is not empty %}
           class='{{ logo.class }}'
           {% endif %}
         />
-      {% endfor %}
+      {%- endfor %}
     {%- if _brand.label is defined -%}
     <div class="h5 ms-4-5 d-none d-lg-inline-block">
       {{- _brand.label -}}
       </div>
-    {% endif %}
+    {%- endif -%}
       </a>
-    {% endif %}
-  {% endblock %}
+    {%- endif %}
+  {%- endblock %}
 
-  {% if not _disable_collapse %}
+  {%- if not _disable_collapse -%}
     <button
       class="navbar-toggler"
       type="button"
@@ -85,25 +83,24 @@
       aria-controls='{{ _collapse_id }}'
       aria-expanded="false"
       aria-label="Toggle navigation"
-    >
-      <span class="navbar-toggler-icon"></span>
-    </button>
+    >{# -#}
+      <span class="navbar-toggler-icon"></span>{# -#}
+    </button>{# -#}
     <div class="collapse navbar-collapse" id='{{ _collapse_id }}'>
-  {% endif %}
-  {% block navigation %}
-    {% if _navigation is not empty %}
-      {% include '@oe-bcl/bcl-navigation/navigation.html.twig' with _navigation only %}
-    {% endif %}
-  {%  endblock %}
-  {% block right %}
-    {% if _form is not empty %}
-      {% include '@oe-bcl/bcl-form/form.html.twig' with _form only %}
-    {% endif %}
-  {%  endblock %}
-  {% if not _disable_collapse %}
+  {%- endif %}
+  {%- block navigation %}
+    {%- if _navigation is not empty %}
+      {%- include '@oe-bcl/bcl-navigation/navigation.html.twig' with _navigation only %}
+    {%- endif %}
+  {%- endblock %}
+  {%- block right %}
+    {%- if _form is not empty %}
+      {%- include '@oe-bcl/bcl-form/form.html.twig' with _form only %}
+    {%- endif %}
+  {%- endblock %}
+  {%- if not _disable_collapse -%}
     </div>
-  {% endif %}
-  </div>
+  {%- endif -%}
+  </div>{# -#}
 </nav>
-
-{% endapply %}
+{#--#}

package/templates/bcl-navigation/navigation.html.twig

@@ -1,7 +1,6 @@
 {% import _self as navigation %}
-{% apply spaceless %}
 
-{# Parameters:
+{#- Parameters:
   - id (string) (default: '')
   - pills (boolean) (default: false)
   - tabs (boolean) (default: false) - If tabs is set to true, the nav should also be set to true for accessibility reasons
@@ -25,120 +24,119 @@
   - attributes (drupal attrs)
 #}
 
-{# Define main macro #}
+{#- Define main macro #}
 {% macro render(items, pills, tabs, tabs_content, vertical, full_width, alignment, id, nav, navbar, attributes) %}
-{% apply spaceless %}
-  {% import _self as navigation %}
+  {%- import _self as navigation %}
 
-  {% set _id = id|default('') %}
-  {% set _pills = pills ?? false %}
-  {% set _tabs = tabs ?? false %}
-  {% set _vertical = vertical ?? false %}
-  {% set _full_width = full_width ?? false %}
-  {% set _alignment = alignment|default('') %}
-  {% set _tabs_content = tabs_content ?? false %}
-  {% set _nav = nav ?? false %}
-  {% set _navbar = navbar ?? false %}
-  {% set _items = items|default([]) %}
+  {%- set _id = id|default('') %}
+  {%- set _pills = pills ?? false %}
+  {%- set _tabs = tabs ?? false %}
+  {%- set _vertical = vertical ?? false %}
+  {%- set _full_width = full_width ?? false %}
+  {%- set _alignment = alignment|default('') %}
+  {%- set _tabs_content = tabs_content ?? false %}
+  {%- set _nav = nav ?? false %}
+  {%- set _navbar = navbar ?? false %}
+  {%- set _items = items|default([]) %}
 
-  {% if _navbar %}
-    {% set _classes = ['navbar-nav'] %}
-  {% else %}
-    {% set _classes = ['nav'] %}
-  {% endif %}
-  {% if _pills %}
-    {% set _classes = _classes|merge(['nav-pills']) %}
-  {% endif %}
-  {% if _tabs %}
-    {% set _classes = _classes|merge(['nav-tabs']) %}
-  {% endif %}
-  {% if _vertical %}
-    {% set _classes = _classes|merge(['flex-column']) %}
-  {% endif %}
-  {% if _full_width %}
-    {% set _classes = _classes|merge(['nav-fill']) %}
-  {% endif %}
-  {% if _alignment is not empty %}
-    {% set _classes = _classes|merge(['justify-content-' ~ _alignment]) %}
-  {% endif %}
+  {%- if _navbar %}
+    {%- set _classes = ['navbar-nav'] %}
+  {%- else %}
+    {%- set _classes = ['nav'] %}
+  {%- endif %}
+  {%- if _pills %}
+    {%- set _classes = _classes|merge(['nav-pills']) %}
+  {%- endif %}
+  {%- if _tabs %}
+    {%- set _classes = _classes|merge(['nav-tabs']) %}
+  {%- endif %}
+  {%- if _vertical %}
+    {%- set _classes = _classes|merge(['flex-column']) %}
+  {%- endif %}
+  {%- if _full_width %}
+    {%- set _classes = _classes|merge(['nav-fill']) %}
+  {%- endif %}
+  {%- if _alignment is not empty %}
+    {%- set _classes = _classes|merge(['justify-content-' ~ _alignment]) %}
+  {%- endif %}
 
-  {% if attributes is empty %}
-    {% set attributes = create_attribute() %}
-  {% endif %}
+  {%- if attributes is empty %}
+    {%- set attributes = create_attribute() %}
+  {%- endif %}
 
-  {% if _id is not empty %}
-    {% set attributes = attributes.setAttribute('id', _id) %}
-  {% endif %}
+  {%- if _id is not empty %}
+    {%- set attributes = attributes.setAttribute('id', _id) %}
+  {%- endif %}
 
-  {% if _tabs %}
-    {% set attributes = attributes.setAttribute('role', 'tablist') %}
-  {% endif %}
-  {% set attributes = attributes.addClass(_classes) %}
+  {%- if _tabs %}
+    {%- set attributes = attributes.setAttribute('role', 'tablist') %}
+  {%- endif %}
+  {%- set attributes = attributes.addClass(_classes) %}
 
-  {% if _nav %}
+  {%- if _nav -%}
   <nav
     {{ attributes }}
   >
-  {% else %}
+  {%- else -%}
   <ul
     {{ attributes }}
   >
-  {% endif %}
-    {% if _items is not empty and _items is iterable %}
-      {% for _item in items %}
-        {% set _nav_class = 'nav-item' %}
-        {% if _item.dropdown %}
-          {% set _nav_class = _nav_class ~ ' dropdown' %}
-          {% set _item = _item|merge({remove_wrapper: true}) %}
-        {% endif %}
-        {% if _item.dropdown or _item.mega_menu %}
-          {% set _item_classes = [] %}
-        {% else %}
-          {% set _item_classes = ['nav-link'] %}
-        {% endif %}
-        {% if _item.active %}
-          {% set _item_classes = _item_classes|merge(['active']) %}
-        {% endif %}
-        {% if _item.attributes is empty %}
-          {% set _item = _item|merge({
+  {%- endif %}
+    {%- if _items is not empty and _items is iterable %}
+      {%- for _item in items %}
+        {%- set _nav_class = 'nav-item' %}
+        {%- if _item.dropdown %}
+          {%- set _nav_class = _nav_class ~ ' dropdown' %}
+          {%- set _item = _item|merge({remove_wrapper: true}) %}
+        {%- endif %}
+        {%- if _item.dropdown or _item.mega_menu %}
+          {%- set _item_classes = [] %}
+        {%- else %}
+          {%- set _item_classes = ['nav-link'] %}
+        {%- endif %}
+        {%- if _item.active %}
+          {%- set _item_classes = _item_classes|merge(['active']) %}
+        {%- endif %}
+        {%- if _item.attributes is empty %}
+          {%- set _item = _item|merge({
             attributes: create_attribute()
           }) %}
-        {% endif %}
-        {% set _item = _item|merge({
+        {%- endif %}
+        {%- set _item = _item|merge({
           attributes: _item.attributes.addClass(_item_classes),
           clean_class: true}) %}
-        {% if not _nav %}
+        {%- if not _nav -%}
         <li
           class="{{ _nav_class }}"
           {% if _tabs %}
             role="tab"
           {% endif %}
         >
-        {% elseif _tabs and _item.dropdown is not defined %}
-          {% set _item = _item|merge({
+        {%- elseif _tabs and _item.dropdown is not defined %}
+          {%- set _item = _item|merge({
             attributes: _item.attributes.setAttribute("role", "tab"),
-            }) 
+            })
           %}
-        {% endif %}
-        {% if _item.dropdown is defined %}
-            {% if _tabs %}
-              {% set _item = _item|merge({
+        {%- endif %}
+        {%- if _item.dropdown is defined %}
+            {%- if _tabs %}
+              {%- set _item = _item|merge({
                 inside_navigation: true,
                 trigger: _item.trigger|merge({
                   attributes: _item.trigger.attributes.setAttribute("role", "tab"),
                 }),
               }) %}
-            {% endif %}
-          {% include '@oe-bcl/bcl-dropdown/dropdown.html.twig' with _item only %}
-        {% elseif _item.button is defined %}
-          {% include '@oe-bcl/bcl-button/button.html.twig' with _item only %}
-        {% elseif _item.mega_menu is defined %}
-          {% include '@oe-bcl/bcl-mega-menu/mega-menu.html.twig' with _item only %}
-        {% else %}
-          {% include '@oe-bcl/bcl-link/link.html.twig' with _item only %}
-        {% endif %}
-        {% if _item.navigation is defined and _item.navigation.items is not empty and _item.navigation.items is iterable %}
-          {{ navigation.render(
+            {%- endif %}
+          {%- include '@oe-bcl/bcl-dropdown/dropdown.html.twig' with _item only %}
+        {%- elseif _item.button is defined %}
+          {%- include '@oe-bcl/bcl-button/button.html.twig' with _item only %}
+        {%- elseif _item.mega_menu is defined %}
+          {%- include '@oe-bcl/bcl-mega-menu/mega-menu.html.twig' with _item only %}
+        {%- else %}
+          {%- include '@oe-bcl/bcl-link/link.html.twig' with _item only %}
+        {%- endif %}
+        {%- if _item.navigation is defined and _item.navigation.items is not empty and _item.navigation.items is iterable %}
+          {{- navigation.render(
             _item.navigation.items,
             _item.navigation.pills,
             _item.navigation.tabs,
@@ -151,39 +149,36 @@
             _item.navigation.navbar,
             _item.navigation.attributes
             ) }}
-        {% endif %}
-        {% if not _nav %}
+        {%- endif %}
+        {%- if not _nav -%}
         </li>
-        {% endif %}
-      {% endfor %}
-    {% endif %}
-  {% if _nav %}
+        {%- endif %}
+      {%- endfor %}
+    {%- endif %}
+  {%- if _nav -%}
   </nav>
-  {% else %}
+  {%- else -%}
   </ul>
-  {% endif %}
-  {% if _tabs_content %}
+  {%- endif %}
+  {%- if _tabs_content -%}
   <div class="tab-content">
     {%- block contents -%}
       {% if _items is not empty and _items is iterable %}
-        {% for _item in _items %}
-          {% if _item.content is not empty %}
-            {% set _content_class = 'tab-pane fade' %}
-            {% if _item.active %}
-              {% set _content_class = _content_class ~ ' show active' %}
-            {% endif %}
+        {%- for _item in _items %}
+          {%- if _item.content is not empty %}
+            {%- set _content_class = 'tab-pane fade' %}
+            {%- if _item.active %}
+              {%- set _content_class = _content_class ~ ' show active' %}
+            {%- endif -%}
             <div class="{{ _content_class }}" id="{{ _item.target }}" role="tabpanel" aria-labelledby="{{ _item.id }}">
               {{- _item.content -}}
             </div>
-          {% endif %}
-        {% endfor %}
-      {% endif %}
+          {%- endif %}
+        {%- endfor %}
+      {%- endif %}
     {%- endblock -%}
   </div>
-  {% endif %}
-{% endapply %}
-{% endmacro %}
-
-{{ navigation.render(items, pills, tabs, tabs_content, vertical, full_width, alignment, id, nav, navbar, attributes) }}
+  {%- endif %}
+{%- endmacro %}
 
-{% endapply %}
+{{- navigation.render(items, pills, tabs, tabs_content, vertical, full_width, alignment, id, nav, navbar, attributes) -}}