@openeuropa/bcl-twig-templates 1.10.6 → 1.10.8

package/package.json

@@ -2,7 +2,7 @@
   "name": "@openeuropa/bcl-twig-templates",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "1.10.6",
+  "version": "1.10.8",
   "description": "OE Bcl Twig Templates",
   "publishConfig": {
     "access": "public"
@@ -11,70 +11,71 @@
     "hoistingLimits": "workspaces"
   },
   "devDependencies": {
-    "@openeuropa/bcl-accordion": "^1.10.6",
-    "@openeuropa/bcl-alert": "^1.10.6",
-    "@openeuropa/bcl-badge": "^1.10.6",
-    "@openeuropa/bcl-banner": "^1.10.6",
-    "@openeuropa/bcl-base-templates": "^1.10.6",
-    "@openeuropa/bcl-blockquote": "^1.10.6",
-    "@openeuropa/bcl-breadcrumb": "^1.10.6",
-    "@openeuropa/bcl-button": "^1.10.6",
-    "@openeuropa/bcl-button-group": "^1.10.6",
-    "@openeuropa/bcl-card": "^1.10.6",
-    "@openeuropa/bcl-card-layout": "^1.10.6",
-    "@openeuropa/bcl-carousel": "^1.10.6",
-    "@openeuropa/bcl-contact-form": "^1.10.6",
-    "@openeuropa/bcl-content-banner": "^1.10.6",
-    "@openeuropa/bcl-date-block": "^1.10.6",
-    "@openeuropa/bcl-description-list": "^1.10.6",
-    "@openeuropa/bcl-dropdown": "^1.10.6",
-    "@openeuropa/bcl-event": "^1.10.6",
-    "@openeuropa/bcl-fact-figures": "^1.10.6",
-    "@openeuropa/bcl-featured-media": "^1.10.6",
-    "@openeuropa/bcl-file": "^1.10.6",
-    "@openeuropa/bcl-footer": "^1.10.6",
-    "@openeuropa/bcl-form": "^1.10.6",
-    "@openeuropa/bcl-form-input": "^1.10.6",
-    "@openeuropa/bcl-gallery": "^1.10.6",
-    "@openeuropa/bcl-glossary": "^1.10.6",
-    "@openeuropa/bcl-group": "^1.10.6",
-    "@openeuropa/bcl-header": "^1.10.6",
-    "@openeuropa/bcl-heading": "^1.10.6",
-    "@openeuropa/bcl-icon": "^1.10.6",
-    "@openeuropa/bcl-inpage-navigation": "^1.10.6",
-    "@openeuropa/bcl-landing-page": "^1.10.6",
-    "@openeuropa/bcl-language-list": "^1.10.6",
-    "@openeuropa/bcl-language-switcher": "^1.10.6",
-    "@openeuropa/bcl-link": "^1.10.6",
-    "@openeuropa/bcl-links-block": "^1.10.6",
-    "@openeuropa/bcl-list-group": "^1.10.6",
-    "@openeuropa/bcl-listing": "^1.10.6",
-    "@openeuropa/bcl-mega-menu": "^1.10.6",
-    "@openeuropa/bcl-modal": "^1.10.6",
-    "@openeuropa/bcl-multilingual": "^1.10.6",
-    "@openeuropa/bcl-navbar": "^1.10.6",
-    "@openeuropa/bcl-navigation": "^1.10.6",
-    "@openeuropa/bcl-news": "^1.10.6",
-    "@openeuropa/bcl-offcanvas": "^1.10.6",
-    "@openeuropa/bcl-page": "^1.10.6",
-    "@openeuropa/bcl-pagination": "^1.10.6",
-    "@openeuropa/bcl-person": "^1.10.6",
-    "@openeuropa/bcl-placeholder": "^1.10.6",
-    "@openeuropa/bcl-progress": "^1.10.6",
-    "@openeuropa/bcl-project": "^1.10.6",
-    "@openeuropa/bcl-project-status": "^1.10.6",
-    "@openeuropa/bcl-recent-activities": "^1.10.6",
-    "@openeuropa/bcl-search": "^1.10.6",
-    "@openeuropa/bcl-search-form": "^1.10.6",
-    "@openeuropa/bcl-select": "^1.10.6",
-    "@openeuropa/bcl-spinner": "^1.10.6",
-    "@openeuropa/bcl-subscription": "^1.10.6",
-    "@openeuropa/bcl-subscription-block": "^1.10.6",
-    "@openeuropa/bcl-table": "^1.10.6",
-    "@openeuropa/bcl-textarea": "^1.10.6",
-    "@openeuropa/bcl-timeline": "^1.10.6",
-    "@openeuropa/bcl-toast": "^1.10.6",
-    "@openeuropa/bcl-user": "^1.10.6",
+    "@openeuropa/bcl-accordion": "^1.10.8",
+    "@openeuropa/bcl-alert": "^1.10.8",
+    "@openeuropa/bcl-badge": "^1.10.8",
+    "@openeuropa/bcl-banner": "^1.10.8",
+    "@openeuropa/bcl-base-templates": "^1.10.8",
+    "@openeuropa/bcl-blockquote": "^1.10.8",
+    "@openeuropa/bcl-breadcrumb": "^1.10.8",
+    "@openeuropa/bcl-button": "^1.10.8",
+    "@openeuropa/bcl-button-group": "^1.10.8",
+    "@openeuropa/bcl-card": "^1.10.8",
+    "@openeuropa/bcl-card-layout": "^1.10.8",
+    "@openeuropa/bcl-carousel": "^1.10.8",
+    "@openeuropa/bcl-contact-form": "^1.10.8",
+    "@openeuropa/bcl-content-banner": "^1.10.8",
+    "@openeuropa/bcl-date-block": "^1.10.8",
+    "@openeuropa/bcl-description-list": "^1.10.8",
+    "@openeuropa/bcl-dropdown": "^1.10.8",
+    "@openeuropa/bcl-event": "^1.10.8",
+    "@openeuropa/bcl-fact-figures": "^1.10.8",
+    "@openeuropa/bcl-featured-media": "^1.10.8",
+    "@openeuropa/bcl-file": "^1.10.8",
+    "@openeuropa/bcl-footer": "^1.10.8",
+    "@openeuropa/bcl-form": "^1.10.8",
+    "@openeuropa/bcl-form-input": "^1.10.8",
+    "@openeuropa/bcl-gallery": "^1.10.8",
+    "@openeuropa/bcl-glossary": "^1.10.8",
+    "@openeuropa/bcl-group": "^1.10.8",
+    "@openeuropa/bcl-header": "^1.10.8",
+    "@openeuropa/bcl-heading": "^1.10.8",
+    "@openeuropa/bcl-icon": "^1.10.8",
+    "@openeuropa/bcl-inpage-navigation": "^1.10.8",
+    "@openeuropa/bcl-landing-page": "^1.10.8",
+    "@openeuropa/bcl-language-list": "^1.10.8",
+    "@openeuropa/bcl-language-switcher": "^1.10.8",
+    "@openeuropa/bcl-link": "^1.10.8",
+    "@openeuropa/bcl-links-block": "^1.10.8",
+    "@openeuropa/bcl-list-group": "^1.10.8",
+    "@openeuropa/bcl-listing": "^1.10.8",
+    "@openeuropa/bcl-mega-menu": "^1.10.8",
+    "@openeuropa/bcl-modal": "^1.10.8",
+    "@openeuropa/bcl-multilingual": "^1.10.8",
+    "@openeuropa/bcl-navbar": "^1.10.8",
+    "@openeuropa/bcl-navigation": "^1.10.8",
+    "@openeuropa/bcl-news": "^1.10.8",
+    "@openeuropa/bcl-offcanvas": "^1.10.8",
+    "@openeuropa/bcl-page": "^1.10.8",
+    "@openeuropa/bcl-pagination": "^1.10.8",
+    "@openeuropa/bcl-pagination-v2": "^1.10.8",
+    "@openeuropa/bcl-person": "^1.10.8",
+    "@openeuropa/bcl-placeholder": "^1.10.8",
+    "@openeuropa/bcl-progress": "^1.10.8",
+    "@openeuropa/bcl-project": "^1.10.8",
+    "@openeuropa/bcl-project-status": "^1.10.8",
+    "@openeuropa/bcl-recent-activities": "^1.10.8",
+    "@openeuropa/bcl-search": "^1.10.8",
+    "@openeuropa/bcl-search-form": "^1.10.8",
+    "@openeuropa/bcl-select": "^1.10.8",
+    "@openeuropa/bcl-spinner": "^1.10.8",
+    "@openeuropa/bcl-subscription": "^1.10.8",
+    "@openeuropa/bcl-subscription-block": "^1.10.8",
+    "@openeuropa/bcl-table": "^1.10.8",
+    "@openeuropa/bcl-textarea": "^1.10.8",
+    "@openeuropa/bcl-timeline": "^1.10.8",
+    "@openeuropa/bcl-toast": "^1.10.8",
+    "@openeuropa/bcl-user": "^1.10.8",
     "copyfiles": "2.4.1",
     "rimraf": "6.0.1"
   },
@@ -97,5 +98,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "f2c1911b328b12531079c209ecada73a505713c2"
+  "gitHead": "9c2e64443ae179948cbf748c41d438af7a0f2421"
 }

package/templates/bcl-base-templates/listing-page.html.twig

@@ -8,20 +8,16 @@
   - pagination (object) (default: {})
   - sidebar (object) (default: '')
 #}
+{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" -%}
 
-{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" %}
-
-{% set _title = title|default('') %}
-{% set _title_tag = title_tag|default('h2') %}
-{% set _title_link = title_link|default({}) %}
-{% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _listing = listing|default({}) %}
-{% set _pagination = pagination|default({}) %}
-{% set _sidebar = sidebar|default({}) %}
-
-{% set _title_attributes = _title_attributes ?: create_attribute() %}
 
-{% block content_top %}
+{%- block content_top %}
+  {% set _title = title|default('') %}
+  {% set _title_tag = title_tag|default('h2') %}
+  {% set _title_link = title_link|default({}) %}
+  {% set _title_attributes = title_attributes ?: create_attribute() %}
+  {% set _title_attributes = _title_attributes ?: create_attribute() %}
 {% if filter_button %}
   {% include '@oe-bcl/bcl-button/button.html.twig' with filter_button only %}
 {% endif %}
@@ -29,7 +25,7 @@
     <div class="col-md-6 col-lg-8 align-self-center">
       {% if _title is not empty %}
         {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
-          title: _title ~ ' (' ~ listing.items.length ~ ')',
+          title: _title ~ ' (' ~ (_listing.items|length) ~ ')',
           title_tag: _title_tag,
           title_link: _title_link,
           attributes: _title_attributes.addClass(['mb-0', 'text-capitalize']),
@@ -54,21 +50,23 @@
     </div>
   </div>
   <hr class="d-none d-md-block mb-4-75"/>
-{% endblock %}
+{%- endblock -%}
 
-{% block content %}
+{%- block content %}
   {% if _listing is not empty %}
     {% include '@oe-bcl/bcl-listing/listing.html.twig' with  _listing only %}
   {% endif %}
-{% endblock %}
+{%- endblock -%}
 
-{% block content_bottom %}
+{%- block content_bottom %}
+  {% set _pagination = pagination|default({}) %}
   {% if _pagination is not empty %}
     <hr class="d-none d-md-block mt-4-5">
     {% include '@oe-bcl/bcl-pagination/pagination.html.twig' with _pagination only %}
   {% endif %}
-{% endblock %}
+{%- endblock -%}
 
-{% block sidebar %}
+{%- block sidebar %}
+  {% set _sidebar = sidebar|default({}) %}
   {% include '@oe-bcl/bcl-base-templates/sidebar-search.html.twig' with _sidebar only %}
-{% endblock %}
+{%- endblock -%}

package/templates/bcl-contact-form/contact-form.html.twig

@@ -1,5 +1,5 @@
-{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' %}
+{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' -%}
 
-{% block content %}
+{%- block content %}
   {% include '@oe-bcl/bcl-form/form.html.twig' with form only %}
-{% endblock %}
+{%- endblock -%}

package/templates/bcl-content-banner/content-banner.html.twig

@@ -92,6 +92,9 @@
 {% if _date is not empty %}
   {% set _left_col_classes = 'bcl-card-start-col' %}
   {% set _right_col_classes = 'col-12 col-md col-xxl-9' %}
+  {% if _image is empty %}
+    {% set _body_classes = 'pt-4 pt-md-0 px-0 px-md-1-5 pb-0' %}
+  {% endif %}
 {% endif %}
 {% if _image is empty and _date is empty %}
   {% set _right_col_classes = 'col-lg-10 col-xl-9 col-xxl-8' %}

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

@@ -42,6 +42,7 @@
 {% set _alignment = alignment|default('') %}
 {% set _dark = dark ?? false %}
 {% set _remove_wrapper = remove_wrapper ?? false %}
+{% set _inside_navigation = inside_navigation ?? false %}
 {% set _items = items|default([]) %}
 
 {% set _class = 'dropdown' %}
@@ -75,14 +76,18 @@
                       .setAttribute('id', _id)
 }) %}
 
-{% if _link %}
-  {% set _trigger = _trigger|merge({
-    attributes: _trigger.attributes.setAttribute('role', 'button') 
-  }) %}
+{% if not _inside_navigation %}
+  {% if _link %}
+    {% set _trigger = _trigger|merge({
+      attributes: _trigger.attributes.setAttribute('role', 'button') 
+    }) %}
+  {% else %}
+    {% set _trigger = _trigger|merge({
+      attributes: _trigger.attributes.setAttribute('autocomplete', 'off') 
+    }) %}
+  {% endif %}
 {% else %}
-  {% set _trigger = _trigger|merge({
-    attributes: _trigger.attributes.setAttribute('autocomplete', 'off') 
-  }) %}
+  {% set attributes = attributes.setAttribute('aria-hidden', 'true').setAttribute('role', 'presentation') %}
 {% endif %}
 
 {% if not _remove_wrapper %}

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

@@ -1,10 +1,10 @@
-{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' %}
+{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' -%}
 
-{% block sidebar %}
+{%- block sidebar %}
   {% include '@oe-bcl/bcl-inpage-navigation/inpage-navigation.html.twig' with sidebar only %}
-{% endblock %}
+{%- endblock -%}
 
-{% block content %}
+{%- block content %}
   {% include '@oe-bcl/bcl-description-list/description-list.html.twig' with details_list only %}
 
   <h2 id="item-1" class="my-4">Description</h2>
@@ -21,4 +21,4 @@
   <h2 id="item-2" class="my-4">Related documents</h2>
   {% include '@oe-bcl/bcl-file/file.html.twig' with files[0] only %}
   {% include '@oe-bcl/bcl-file/file.html.twig' with files[1] only %}
-{% endblock %}
+{%- endblock -%}

package/templates/bcl-glossary/glossary-detail.html.twig

@@ -1,6 +1,6 @@
-{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' %}
+{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' -%}
 
-{% block  content %}
+{%- block  content %}
 	{% include  '@oe-bcl/bcl-heading/heading.html.twig' with {
 		title: 'Description',
 		title_tag: 'h2',
@@ -38,6 +38,5 @@
     <div {{ file_classes ? 'class="' ~ file_classes ~ '"' }}>
       {% include '@oe-bcl/bcl-file/file.html.twig' with file only %}
     </div>
-  {% endfor %}
-
-{% endblock %}
+	{% endfor %}
+{%- endblock -%}

package/templates/bcl-glossary/glossary-listing.html.twig

@@ -1,6 +1,6 @@
-{% extends '@oe-bcl/bcl-base-templates/listing-page.html.twig' %}
+{% extends '@oe-bcl/bcl-base-templates/listing-page.html.twig' -%}
 
-{% block content_row %}
+{%- block content_row %}
 		{% include '@oe-bcl/bcl-pagination/pagination.html.twig' with glossary only %}
 	<div class="col-12">
 	  <div class="d-md-flex justify-content-end mb-md-4-75 align-items-center border-bottom-md border-top-md border-gray-300 py-3">
@@ -8,12 +8,12 @@
 	    {% include '@oe-bcl/bcl-select/select.html.twig' with itemsPerPage only %}
 	  </div>
   </div>
-{% endblock %}
+{%- endblock -%}
 
-{% block content_top %}
+{%- block content_top %}
 	{% include '@oe-bcl/bcl-heading/heading.html.twig' with {
 	  title: 'Starting with "A" (48)',
 	  title_tag: 'h2',
 	} only %}
 
-{% endblock %}
+{%- endblock -%}

package/templates/bcl-group/group-landing.html.twig

@@ -1,6 +1,6 @@
-{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" %}
+{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" -%}
 
-{% block banner %}
+{%- block banner %}
 <div class="container">
   {% if banner is not empty %}
   <div class="mt-4 mt-md-5">
@@ -70,9 +70,9 @@
   </div>
   {% endif %}
 </div>
-{% endblock %}
+{%- endblock -%}
 
-{% block content %}
+{%- block content %}
   {% if recent is not empty and members is not empty %}
   <div class="row mt-3">
     <div class="col-md-8">
@@ -98,4 +98,4 @@
       {% include '@oe-bcl/bcl-listing/listing.html.twig' with contributions.listing only %}
     {% endif %}
   {% endif %}
-{% endblock %}
+{%- endblock -%}

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

@@ -1,6 +1,6 @@
-{% extends "@oe-bcl/bcl-base-templates/listing-page.html.twig" %}
+{% extends "@oe-bcl/bcl-base-templates/listing-page.html.twig" -%}
 
-{% block banner %}
+{%- block banner %}
 <div class="container mt-4 mt-md-5">
   <div class="col-xxl-11">
     <div class="p-md-3-5 pt-3 bg-lighter d-md-flex n-mx-container">
@@ -24,4 +24,4 @@
   {% endif %}
   </div>
 </div>
-{% endblock %}
+{%- endblock -%}

package/templates/bcl-landing-page/landing-page.html.twig

@@ -1,13 +1,11 @@
-{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" %}
+{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" -%}
 
-{% block banner %}
+{%- block banner %}
   {% if banner is defined %}
     {% include '@oe-bcl/bcl-banner/banner.html.twig' with banner only %}
   {% endif %}
-{% endblock %}
-
-{% block content %}
-
+{%- endblock -%}
+{%- block content %}
 <div class="container">
   {% if featured_section is defined %}
     <div class="my-4">
@@ -55,5 +53,4 @@
     </div>
   {% endif %}
 </div>
-
-{% endblock %}
+{%- endblock -%}

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

@@ -19,7 +19,7 @@
 {% block header %}
   {% if size == 'fullscreen' %}
   <div class="container">
-    {% if variant == 'eu' or variant == 'ec' %}
+    {% if _variant == 'eu' or _variant == 'ec' %}
     <div class="border-bottom mx-n3 px-3 px-md-0 pt-md-4-5">
       <div class="py-3-5 px-3 px-sm-0 px-md-3">
     {% endif %}
@@ -43,7 +43,7 @@
   ></button>
   {% if size == 'fullscreen' %}
     </div>
-    {% if variant == 'eu' or variant == 'ec' %}
+    {% if _variant == 'eu' or _variant == 'ec' %}
       </div>
     </div>
     {% endif %}
@@ -52,7 +52,60 @@
 {% endblock %}
 
 {% block body %}
-  {% include '@oe-bcl/bcl-language-list/language-list.html.twig' with {
-    attributes: create_attribute()
-  } %}
+  {% set attributes = create_attribute().addClass(['bcl-language-list', 'bcl-language-list--' ~ _variant]) %}
+  <div
+    {{ attributes }}
+  >
+    {% if _logo is not empty %}
+    <div class="container">
+      {% if _title is empty %}
+      <div class="text-center">
+      {% endif %}
+      <div class="d-inline-flex align-items-center">
+        <img
+          {% if _logo.path is not empty %}
+          src="{{ _logo.path }}"
+          {% endif %}
+          {% if _logo.alt is not empty %}
+          alt="{{ _logo.alt }}"
+          {% endif %}
+          {% if _logo.class is not empty %}
+          class="{{ _logo.class }}"
+          {% endif %}
+        />
+        {% if _title is not empty %}
+        <h5 class="h5 ms-4">{{ _title }}</h5>
+        {% endif %}
+      </div>
+      {% if _title is empty %}
+      </div>
+      {% endif %}
+    </div>
+    {% endif %}
+
+    {% if _items is not empty or _non_eu_items is not empty %}
+    <div class="main pt-4">
+      {% if not (_variant == 'neutral' and _inside_container) %}
+      <div class="container">
+      {% endif %}
+      {% if _items is not empty and _items is iterable %}
+        {% include '@oe-bcl/bcl-language-list/language-list-grid.html.twig' with {
+            items: _items,
+            icon_path: _icon_path,
+            category: eu_category,
+        } only %}
+      {% endif %}
+      {% if _non_eu_items is not empty and _non_eu_items is iterable %}
+        {% include '@oe-bcl/bcl-language-list/language-list-grid.html.twig' with {
+            items: _non_eu_items,
+            icon_path: _icon_path,
+            category: non_eu_category,
+        } only %}
+      {% endif %}
+      {% if not (_variant == 'neutral' and _inside_container) %}
+      </div>
+      {% endif %}
+    </div>
+    {% endif %}
+  </div>
 {% endblock %}

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

@@ -14,7 +14,10 @@
   - body (block) (default: '')
   - footer (block) (default: '')
   - attributes (drupal attrs)
-  
+  - header_attributes (drupal attrs)
+  - body_attributes (drupal attrs)
+  - footer_attributes (drupal attrs)
+
   Blocks
     - header
     - messages
@@ -29,9 +32,12 @@
 {% set _verticaly_centered = verticaly_centered ?? false %}
 {% set _scrollable = scrollable ?? false %}
 {% set _header = header|default('') %}
+{% set _header_attributes = header_attributes ?: create_attribute() %}
 {% set _messages = messages|default('') %}
 {% set _body = body|default('') %}
+{% set _body_attributes = body_attributes ?: create_attribute() %}
 {% set _footer = footer|default('') %}
+{% set _footer_attributes = footer_attributes ?: create_attribute() %}
 
 {% set _classes = ['modal', 'fade'] %}
 
@@ -62,16 +68,22 @@
   >
     <div class="modal-content">
       {% if header is not empty %}
-      <div class="modal-header">
+      <div
+        {{- _header_attributes.addClass(['modal-header']) -}}
+      >
         {%- block header _header -%}
       </div>
       {% endif %}
       {%- block messages _messages -%}
-      <div class="modal-body">
+      <div
+          {{- _body_attributes.addClass(['modal-body']) -}}
+      >
         {%- block body _body -%}
       </div>
       {% if footer is not empty %}
-      <div class="modal-footer">
+      <div
+          {{- _footer_attributes.addClass(['modal-footer']) -}}
+      >
         {%- block footer _footer -%}
       </div>
       {% endif %}

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

@@ -121,6 +121,14 @@
           %}
         {% 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 %}

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

@@ -1,10 +1,10 @@
-{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' %}
+{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' -%}
 
-{% block sidebar %}
+{%- block sidebar %}
   {% include '@oe-bcl/bcl-inpage-navigation/inpage-navigation.html.twig' with sidebar only %}
-{% endblock %}
+{%- endblock -%}
 
-{% block content %}
+{%- block content %}
   <p id="content">{{ get_dummy_text(6) }}
   </p>
   <h2 id="item-1" class="my-4">Section 1</h2>
@@ -42,4 +42,4 @@
 
   {% include '@oe-bcl/bcl-file/file.html.twig' with files[0] only %}
   {% include '@oe-bcl/bcl-file/file.html.twig' with files[1] only %}
-{% endblock %}
+{%- endblock -%}

package/templates/bcl-pagination-v2/pagination-item.html.twig

@@ -0,0 +1,90 @@
+{% apply spaceless %}
+
+{# Parameters:
+  - path (string) (default: '')
+  - label (string) (default: '')
+  - disabled (boolean) (default: false)
+  - active (boolean) (default: false)
+  - icon (icon object) (default: {})
+  - attributes (drupal attrs)
+#}
+
+{% set _path = path|default('') %}
+{% set _label = label|default('') %}
+{% set _disabled = disabled ?? false %}
+{% set _active = active ?? false %}
+{% set _aria_label = aria_label|default('') %}
+{% set _icon = icon|default({}) %}
+{% set _icon_path = icon_path|default('') %}
+{% set _icon_name = icon_name|default('') %}
+{% set _icon_html = icon_html|default('') %}
+{% set _icon_position = icon_position|default('after') %}
+{% set _current_mobile_label = current_mobile_label|default('') %}
+{% set _classes = ['page-link'] %}
+
+{% if _icon_path is not empty and _icon is empty %}
+  {% if _icon_name is not empty %}
+    {% set _icon = _icon|merge({
+      name: _icon_name,
+      path: _icon_path,
+      size: "fluid"
+    }) %}
+    {% set _label = "" %}
+  {% endif %}
+{% else %}
+  {% if _icon_html is not empty %}
+    {% set _label %}
+      <span aria-hidden="true">{{- _icon_html -}}</span>
+    {% endset %}
+  {% endif %}
+{% endif %}
+
+{% if _icon is not empty %}
+  {% set _icon = _icon|merge({
+    path: _icon_path,
+  }) %}
+{% endif %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% if _aria_label is not empty %}
+  {% set attributes = attributes.setAttribute('aria-label', _aria_label) %}
+{% endif %}
+
+{% if _active %}
+  {% set attributes = attributes.setAttribute('aria-current', 'page') %}
+  {% set attributes = attributes.setAttribute('tabindex', '0') %}
+{% endif %}
+
+{% set attributes = attributes.addClass(_classes) %}
+
+{% if _path and not _active %}
+  {% if _disabled %}
+    {% set attributes = attributes.setAttribute('aria-disabled', 'true') %}
+  {% endif %}
+  {% set attributes = attributes.setAttribute('aria-hidden', 'false') %}
+
+  {%- include '@oe-bcl/bcl-link/link.html.twig' with {
+    label: _label,
+    path: _path,
+    disabled: _disabled,
+    icon: _icon,
+    icon_position: _icon_position,
+    attributes: attributes,
+  } only -%}
+{% else %}
+  <div{{ attributes }}>
+    {% if _current_mobile_label %}
+      <span class="d-none d-md-inline-block">{{- _label -}}</span>
+      <span class="d-inline-block d-md-none">{{- _current_mobile_label -}}</span>
+    {% else %}
+      <span class="d-inline-block">
+        {{- _label -}}
+      </span>
+    {% endif %}
+  </div>
+{% endif %}
+
+{% endapply %}

package/templates/bcl-pagination-v2/pagination.html.twig

@@ -0,0 +1,213 @@
+{% apply spaceless %}
+
+{# Parameters:
+  - size (string) (default: '')
+    - options ['sm', 'lg']
+  - alignment (string) (default: 'center')
+    - options ['start', 'end', 'center']
+  - enable_prev_next_icon (boolean) (default: true)
+  - enable_first_last_icon (boolean) (default: false)
+  - ellipsis_before (boolean) (default: false)
+  - ellipsis_after (boolean) (default: false)
+  - first (pagination Item object) (default: {})
+  - prev (pagination Item object) (default: {})
+  - next (pagination Item object) (default: {})
+  - last (pagination Item object) (default: {})
+  - items (pagination item[]) (default: [])
+    format: [
+    {
+      - path (string) (default: '')
+      - label (string) (default: '')
+      - disabled (boolean) (default: false)
+      - active (boolean) (default: false)
+      - icon (Icon component) (default: {})
+      - attributes (drupal attrs)
+    }
+  - icon_path (string) (default: '')
+  - attributes (drupal attrs)
+  - list_attributes (drupal attrs)
+#}
+
+{% set _size = size|default('') %}
+{% set _alignment = alignment|default('center') %}
+{% set _enable_prev_next_icon = enable_prev_next_icon ?? true %}
+{% set _enable_first_last_icon = enable_first_last_icon ?? false %}
+{% set _ellipsis_before = ellipsis_before ?? false %}
+{% set _ellipsis_after = ellipsis_after ?? false %}
+{% set _first = first|default({}) %}
+{% set _prev = prev|default({}) %}
+{% set _next = next|default({}) %}
+{% set _last = last|default({}) %}
+{% set _items = items|default([]) %}
+{% set _icon_path = icon_path|default('') %}
+{% set _ellipsis_markup %} … {% endset %}
+
+{% set _type_flags = {
+  first: { first: true },
+  last: { last: true },
+  prev: { prev: true },
+  next: { next: true },
+  ellipsis: { ellipsis: true },
+} %}
+
+{% set _icon_defaults = {
+  ellipsis: {
+    icon_html: _ellipsis_markup,
+    icon_path: "",
+  },
+} %}
+
+{% if _enable_prev_next_icon %}
+  {% set _icon_defaults = _icon_defaults|merge({
+    prev: {
+      icon_position: 'before',
+      icon: {
+        size: 'fluid',
+        name: "chevron-left",
+      },
+    },
+    next: {
+      icon_position: 'after',
+      icon: {
+        size: 'fluid',
+        name: "chevron-right",
+      },
+    },
+  }) %}
+{% endif %}
+
+{% if _enable_first_last_icon %}
+  {% set _icon_defaults = _icon_defaults|merge({
+    first: {
+      icon_html: "«",
+      icon_name: "chevron-double-left",
+    },
+    last: {
+      icon_html: "»",
+      icon_name: "chevron-double-right",
+    },
+  }) %}
+{% endif %}
+
+{% set _raw_items = [
+  { item: _prev, fallback_type: 'prev' },
+  { item: _first, fallback_type: 'first' },
+] %}
+
+{% if _ellipsis_before %}
+  {% set _raw_items = _raw_items|merge([
+    { item: {
+      item_type: 'ellipsis',
+      ellipsis: true,
+    } },
+  ]) %}
+{% endif %}
+
+{% if _items is iterable %}
+  {% for _item in _items %}
+    {% set _raw_items = _raw_items|merge([{ item: _item }]) %}
+  {% endfor %}
+{% endif %}
+
+{% if _ellipsis_after %}
+  {% set _raw_items = _raw_items|merge([
+    { item: {
+      item_type: 'ellipsis',
+      ellipsis: true,
+    } },
+  ]) %}
+{% endif %}
+
+{% set _raw_items = _raw_items|merge([
+  { item: _last, fallback_type: 'last' },
+  { item: _next, fallback_type: 'next' },
+]) %}
+
+{% set _internal_items = [] %}
+
+{% for _entry in _raw_items %}
+  {% set _item = _entry.item %}
+  {% if _item is not empty %}
+    {% set _type = attribute(_item, 'item_type')|default(_entry.fallback_type|default('')) %}
+    {% if not _type and (_item.ellipsis ?? false) %}
+      {% set _type = 'ellipsis' %}
+    {% endif %}
+    {% set _type_flag = attribute(_type_flags, _type)|default({}) %}
+    {% if _type_flag is not empty %}
+      {% set _item = _item|merge(_type_flag) %}
+    {% endif %}
+    {% set _icon_defaults_for_type = attribute(_icon_defaults, _type)|default({}) %}
+    {% if _icon_defaults_for_type is not empty %}
+      {% set _item = _item|merge(_icon_defaults_for_type) %}
+    {% endif %}
+    {% if (_item.active ?? false) and current_mobile_label is defined and _item.current_mobile_label is not defined %}
+      {% set _item = _item|merge({ current_mobile_label: current_mobile_label }) %}
+    {% endif %}
+    {% set _internal_items = _internal_items|merge([_item]) %}
+  {% endif %}
+{% endfor %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set attributes = attributes.addClass(['pager', 'pagination-v2']) %}
+
+{% if list_attributes is empty %}
+  {% set list_attributes = create_attribute() %}
+{% endif %}
+
+{% set _classes = [
+  'pagination',
+  'pager__items',
+  'js-pager__items',
+  'd-flex',
+  'flex-row',
+  'justify-content-between'
+] %}
+
+{% if _size is not empty %}
+  {% set _classes = _classes|merge(['pagination-' ~ _size]) %}
+{% endif %}
+{% if _alignment is not empty %}
+  {% set _classes = _classes|merge(['justify-content-md-' ~ _alignment]) %}
+{% endif %}
+
+{% set list_attributes = list_attributes.addClass(_classes) %}
+
+<nav{{ attributes }}>
+  <ul{{ list_attributes }}>
+    {% if _internal_items is not empty and _internal_items is iterable %}
+      {% for _item in _internal_items %}
+        {% if _item is not empty %}
+          {% set _item_class = ['page-item', 'pager__item'] %}
+
+          {% if _item.prev %}
+            {% set _item_class = _item_class|merge(['pager__item--prev', 'd-inline-block']) %}
+          {% elseif _item.next %}
+            {% set _item_class = _item_class|merge(['pager__item--next', 'd-inline-block']) %}
+          {% elseif not _item.active %}
+            {% set _item_class = _item_class|merge(['d-none', 'd-md-inline-block']) %}
+          {% endif %}
+
+          {% if _item.disabled %}
+            {% set _item_class = _item_class|merge(['disabled']) %}
+          {% endif %}
+
+          {% if _item.active %}
+            {% set _item_class = _item_class|merge(['active', 'd-inline-block']) %}
+          {% endif %}
+
+          <li class="{{ _item_class|join(' ') }}">
+            {% if _item.icon_path is not defined %}
+              {% set _item = _item|merge({ icon_path: _icon_path }) %}
+            {% endif %}
+            {% include '@oe-bcl/bcl-pagination-v2/pagination-item.html.twig' with _item only %}
+          </li>
+        {% endif %}
+      {% endfor %}
+    {% endif %}
+  </ul>
+</nav>
+
+{% endapply %}

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

@@ -1,10 +1,10 @@
-{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' %}
+{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' -%}
 
-{% block sidebar %}
+{%- block sidebar %}
   {% include '@oe-bcl/bcl-inpage-navigation/inpage-navigation.html.twig' with sidebar only %}
-{% endblock %}
+{%- endblock -%}
 
-{% block content %}
+{%- block content %}
   {% if information.main_title is not empty %}
     <h2
       class="mb-4"
@@ -26,4 +26,4 @@
       {% include '@oe-bcl/bcl-file/file.html.twig' with file only %}
     {% endfor %}
   {% endif %}
-{% endblock %}
+{%- endblock -%}

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

@@ -1,10 +1,10 @@
-{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' %}
+{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' -%}
 
-{% block sidebar %}
+{%- block sidebar %}
   {% include '@oe-bcl/bcl-inpage-navigation/inpage-navigation.html.twig' with sidebar only %}
-{% endblock %}
+{%- endblock -%}
 
-{% block content %}
+{%- block content %}
   {% if project_status is not empty %}
     {% if project_status_title is not empty %}
       {% set _project_title_attributes = create_attribute().addClass(['mb-4']) %}
@@ -62,11 +62,11 @@
   {% endif %}
 
   {% if social_block is not empty %}
-    {% block social_block %}
+    {%- block social_block %}
       {{ social_buttons }}
       {% include '@oe-bcl/bcl-button/button.html.twig' with button_social_modal only %}
       {% include '@oe-bcl/bcl-modal/modal.html.twig' with social_modal only %}
-    {% endblock %}
+    {%- endblock -%}
   {% endif %}
 
-{% endblock %}
+{%- endblock -%}

package/templates/bcl-project-status/project-contributions.html.twig

@@ -28,7 +28,7 @@
 <div {{ attributes }}>
   <div class="row">
 
-  {% if _chart is not empty %}
+  {% if _chart %}
     <div class="bcl-project-contributions-chart col-5 col-md-3">
     {% block project_status_contrib_chart %}
       <div class="circular-progress" data-percentage="{{ _corporate_contributions }}">

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

@@ -1,6 +1,6 @@
-{% extends "@oe-bcl/bcl-base-templates/listing-page.html.twig" %}
+{% extends "@oe-bcl/bcl-base-templates/listing-page.html.twig" -%}
 
-{% block banner %}
+{%- block banner %}
 {% if banner.search_bar is defined %}
   <div class="bg-lighter pt-3 pb-4 pb-lg-3">
     <div class="container">
@@ -19,4 +19,4 @@
     </div>
   </div>
 {% endif %}
-{% endblock %}
+{%- endblock -%}

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

@@ -1,10 +1,10 @@
-{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' %}
+{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' -%}
 
-{% block sidebar %}
+{%- block sidebar %}
   {% include '@oe-bcl/bcl-inpage-navigation/inpage-navigation.html.twig' with sidebar only %}
-{% endblock %}
+{%- endblock -%}
 
-{% block content_bottom %}
+{%- block content_bottom %}
   {% include '@oe-bcl/bcl-subscription-block/subscription-block.html.twig' with subscription only %}
   {% include '@oe-bcl/bcl-subscription/subscription-modal.html.twig' with modal only %}
-{% endblock %}
+{%- endblock -%}

package/templates/bcl-toast/toasts.html.twig

@@ -10,6 +10,11 @@
   - toasts (object[]) format: [
     {
       - body (string) (default: '')
+      - body_attributes (drupal attrs)
+      - header (string) (default: '')
+      - header_attributes (drupal attrs)
+      - button_attributes (drupal attrs)
+      - custom_content (string) (default: '')
       - role (string) (default: 'alert')
       - with_close (boolean) (default: true)
       - autohide (boolean) (default: false)
@@ -66,6 +71,9 @@
     {% set _with_body_wrapper = _toast.with_body_wrapper ?? false %}
     {% set _body_wrapper_classes = _toast.body_wrapper_classes|default('') %}
     {% set _toast_attributes = _toast.attributes ?: create_attribute() %}
+    {% set _body_attributes = _toast.body_attributes ?: create_attribute() %}
+    {% set _header_attributes = _toast.header_attributes ?: create_attribute() %}
+    {% set _button_attributes = _toast.button_attributes ?: create_attribute() %}
     {% set _toast_attributes =  _toast_attributes.addClass(_classes).setAttribute('aria-atomic', 'true') %}
     {% if _aria_live is not empty %}
       {% set _toast_attributes = _toast_attributes.setAttribute('aria-live', _aria_live) %}
@@ -82,16 +90,16 @@
     {% if _with_close or
       (_toast.header is defined and _toast.header is not empty)
     %}
-    <div class="toast-header">
+    <div{{ _header_attributes.addClass(['toast-header']) }}>
     {{- _toast.header|default('') -}}
     {% if _with_close %}
-      {% set button_attributes = create_attribute()
-                                .addClass(['btn-close'])
-                                .setAttribute('aria-label', 'close')
-                                .setAttribute('data-bs-dismiss', 'toast')
-      %}
+      {% if not _button_attributes.hasAttribute('aria-label') %}
+        {% set _button_attributes = _button_attributes.setAttribute('aria-label', 'Close') %}
+      {% endif %}
       {%- include '@oe-bcl/bcl-button/button.html.twig' with {
-        attributes: button_attributes,
+        attributes: _button_attributes
+          .addClass(['btn-close'])
+          .setAttribute('data-bs-dismiss', 'toast'),
         clean_class: true
       } only -%}
     {% endif %}
@@ -104,12 +112,13 @@
     {% endif %}
     >
   {% endif %}
-    <div class="toast-body">
+    <div{{ _body_attributes.addClass(['toast-body']) }}>
       {{- _body -}}
     </div>
   {% if _with_body_wrapper %}
     </div>
   {% endif %}
+  {{- _toast.custom_content|default('') -}}
   </div>
   {% endfor %}
 {% endif %}

package/templates/bcl-user/user-terms.html.twig

@@ -1,6 +1,6 @@
-{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" %}
+{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" -%}
 
-{% block content %}
+{%- block content %}
   {{ get_dummy_text(4, true) }}
   <ul class="mb-4-5">
     <li>{{ get_dummy_text() }}</li>
@@ -8,4 +8,4 @@
     <li>{{ get_dummy_text() }}</li>
   </ul>
   {% include '@oe-bcl/bcl-form/form.html.twig' with terms_form only %}
-{% endblock %}
+{%- endblock -%}

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

@@ -1,6 +1,6 @@
-{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" %}
+{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" -%}
 
-{% block content %}
+{%- block content %}
   {% include "@oe-bcl/bcl-navigation/navigation.html.twig" with navigation only %}
   <div class="tab-content">
     <div class="tab-pane fade show active" id="view" role="tabpanel" aria-labelledby="view-tab">
@@ -134,4 +134,4 @@
       {% include '@oe-bcl/bcl-form/form.html.twig' with cancel.form only %}
     </div>
   </div>
-{% endblock %}
+{%- endblock -%}