@openeuropa/bcl-theme-default 0.18.0 → 0.21.0

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

@@ -4,11 +4,13 @@
   Parameters:
     - "background" (string) (default: 'white')
       options: [ white, gray ]
-    - "banner" (object)
     - "title" (object)
     - "image" (object)
+    - "image_size" (string) 
+      options: ['sm', 'md', 'lg']
     - "content" (string)
     - "badges" (array of objects of type badge)
+    - "links" (array of objects of type link)
     - "action_button" (object of type button) (default: {})
     - "service_buttons" (array of objects of type button) (default: [])
     - "attributes" (drupal attrs)
@@ -18,10 +20,10 @@
 {% set _action_button = action_button|default({}) %}
 {% set _service_buttons = service_buttons|default([]) %}
 {% set _image = image|default({}) %}
+{% set _image_size = image_size|default('md') %}
 
 {% set _css_classes = [
   'bcl-content-banner',
-  'vw-100',
   'pt-lg-4-75',
 ] %}
 
@@ -46,34 +48,39 @@
   {% set attributes = create_attribute() %}
 {% endif %}
 
+{% set _body_classes = 'pt-0 px-0 pb-0' %}
+{% set _left_col_classes = '' %}
+{% set _right_col_classes = 'col-md-8 col-lg-9 col-xxl-8' %}
+
+{% if _image is not empty %}
+  {% set _left_col_classes = 'col-8 col-md-4 col-lg-3 offset-2 offset-md-0' %}
+  {% set _right_col_classes = 'col-md-8 col-lg-9 col-xxl-8' %}
+  {% set _body_classes = 'pt-4 pt-md-0 px-0 px-md-3 pb-0' %}
+  {% if _image_size == 'lg' %}
+    {% set _left_col_classes = 'col-md-4' %}
+    {% set _right_col_classes = 'col-md-8' %}
+  {% endif %}
+  {% if _image_size == 'sm' %}
+    {% set _left_col_classes = 'col-6 col-md-4 col-lg-2 offset-3 offset-md-0' %}
+  {% endif %}
+{% endif %}
+
+{% set _horizontal_classes = {
+  left_col_classes: _left_col_classes,
+  right_col_classes: _right_col_classes,
+} %}
+
 {% set _card = {
   title: title|default({})|merge({
     tag: 'h2',
     attributes: create_attribute().addClass(['fw-bold']),
   }),
   horizontal: true,
-  horizontal_grid: {
-    right_col_classes: 'col-md-8 col-lg-9 col-xxl-8',
-  },
+  horizontal_grid: _horizontal_classes,
   extra_classes_header: 'bg-transparent pt-0 pb-0 border-0',
-  extra_classes_body: 'pt-0 px-0 pb-0',
+  extra_classes_body: _body_classes,
 } %}
 
-{% if _image is not empty %}
-  {% set _card = _card|merge({
-    horizontal_grid: _card.horizontal_grid|merge({
-      left_col_classes: 'col-md-4 col-lg-3',
-    }),
-    extra_classes_body: 'pt-md-0 px-0 px-md-3 pb-0',
-  }) %}
-{% else %}
-  {% set _card = _card|merge({
-    horizontal_grid: {
-      right_col_classes: 'col-md-8 col-lg-9 col-xxl-8 px-sm-0 px-md-2-5',
-    },
-  }) %}
-{% endif %}
-
 {% set _css_classes = _css_classes|merge([_modifiers[_background]]) %}
 {% set _attributes = attributes.addClass(['bg-transparent', 'border-0']) %}
 
@@ -83,24 +90,22 @@
 
 <div class="{{ _css_classes|join(' ') }}">
   <div class="container">
-    <div class="row">
-    {% include '@oe-bcl/bcl-card/card.html.twig' with _card %}
+  {% include '@oe-bcl/bcl-card/card.html.twig' with _card %}
 
-  {% if _action_button is not empty %}
-    <div class="col-12 col-md-2 text-end">
-      <div class="d-grid d-md-block">
+  {% if _service_buttons is not empty or _action_button is not empty %}
+    <div class="d-flex justify-content-end mt-2 align-items-center">
+    {% if _service_buttons is not empty %}
+      {% for _button in _service_buttons %}
+        {% include '@oe-bcl/bcl-button/button.html.twig' with _button only %}
+      {% endfor %}
+    {% endif %}
+    {% if _action_button is not empty %}
+      <div class="d-grid d-md-block ms-3">
         {% include '@oe-bcl/bcl-button/button.html.twig' with _action_button only %}
       </div>
+    {% endif %}
     </div>
   {% endif %}
-  {% if _service_buttons is not empty %}
-    <div class="d-flex justify-content-end">
-    {% for _button in _service_buttons %}
-      {% include '@oe-bcl/bcl-button/button.html.twig' with _button only %}
-    {% endfor %}
-    </div>
-  {% endif %}
-  </div>
   </div>
 </div>
 

package/templates/bcl-date-block/date-block.html.twig

@@ -7,24 +7,29 @@
     - "month" (string) (default: '')
     - "date_time" (string) (default: '')
     - "year" (integer) (default: '')
+    - "end_day" (integer) (default: '')
+    - "end_month" (string) (default: '')
+    - "end_year" (integer) (default: '')
 #}
 
 {% set _month = month|default('') %}
 {% set _day = day|default('') %}
 {% set _year = year|default('') %}
 {% set _date_time = date_time|default('') %}
+{% set _end_day = end_day|default('') %}
+{% set _end_month = end_month|default('') %}
+{% set _end_year = end_year|default('') %}
 {% set _variant = variant|default('') %}
 {% set _css_classes = [
   'bcl-date-block',
-  'd-flex',
-  'flex-column',
-  'align-items-center',
-  'justify-content-center',
   'bg-date',
-  'text-light',
-  'pt-3',
-  'rounded-top',
+  'rounded',
   'mw-date',
+  'text-center',
+  'd-flex',
+  'flex-column',
+  'ratio',
+  'ratio-1x1'
 ] %}
 
 {% if attributes is empty %}
@@ -38,9 +43,23 @@
 {% endif %}
 
 <time {{ attributes }}>
-  <span>{{ _day }}</span>
-  <span class="pb-3 text-uppercase">{{ _month }}</span>
-  <span class="bg-light w-100 text-center py-2 text-dark rounded-bottom mb-n1">{{ _year }}</span>
+  <span class="d-flex flex-column pt-2">
+    <span class="d-flex flex-column align-item-center justify-content-center bg-white border border-bottom-0 w-100 h-100 fs-5 text-uppercase">
+      <span class="d-block">{{- _day ~ ' ' ~ _month ~ ((_end_day or _end_month) ? ' - ' ) -}}</span>
+      {%- if _end_day is not empty -%}
+        {{- _end_day -}}
+      {% endif %}
+      {% if _end_month is not empty %}
+        {{- _end_month -}}
+      {%- endif -%}
+    </span>
+    <span class="bg-lighter border w-100 rounded-bottom py-1">
+      {{- _year -}}
+      {%- if _end_year is not empty -%}
+        {{ ' - ' ~ _end_year }}
+      {%- endif -%}
+    </span>
+  </span>
 </time>
 
 {% endspaceless %}

package/templates/bcl-description-list/description-list.html.twig

@@ -63,8 +63,14 @@
               {% include '@oe-bcl/bcl-icon/icon.html.twig' with _term.icon|merge({
                 attributes: create_attribute().addClass(_icon_classes)
               }) only %}
+              <p class="mb-0 d-inline-block">{{ _term.label }}</p>
+            {%- elseif _term.color is not empty -%}
+              <div class="d-flex align-items-center">
+                <span class="p-2 me-2 d-inline-block rounded-1 {{ _term.color }}"></span>{{- _term.label -}}
+              </div>
+            {%- else -%}
+              {{- _term.label -}}
             {%- endif -%}
-            {{- _term.label -}}
           </dt>
         {% endfor %}
         {% if _variant == 'horizontal' %}
@@ -76,31 +82,51 @@
             class="d-flex"
           {% endif %}
         >
-          {% if _item.term.icon is not empty %}
-              {% set _icon_classes = ["me-2"] %}
-              {% if _variant == 'horizontal' %}
-                {% set _icon_classes = _icon_classes|merge(["mt-1"]) %}
-              {% endif %}
+          {%- if _item.term.icon is not empty -%}
+            {% set _icon_classes = ["me-2"] %}
+            {% if _variant == 'horizontal' %}
+              {% set _icon_classes = _icon_classes|merge(["mt-1"]) %}
+            {% endif %}
             {%- include '@oe-bcl/bcl-icon/icon.html.twig' with _item.term.icon|merge({
               attributes: create_attribute().addClass(_icon_classes)
             }) only -%}
-          {% endif %}
-          {{- _item.term.label -}}
+            <p class="mb-0 d-inline-block">{{ _item.term.label }}</p>
+          {%- elseif _item.term.color is not empty -%}
+            <div class="d-flex align-items-center">
+              <span class="p-2 me-2 d-inline-block rounded-1 {{ _item.term.color }}"></span>{{- _item.term.label -}}
+            </div>
+          {%- else -%}
+            {{- _item.term.label -}}
+          {%- endif -%}
         </dt>
       {% endif %}
     {% endif %}
     {% if _item.definition is not empty %}
       {% if _item.definition is iterable %}
         {% if _variant == 'horizontal' %}
-          <div>
+          <dd>
         {% endif %}
         {% for _definition in _item.definition %}
-          {% if _definition.label is not defined %}
-            <dd>{{- _definition -}}</dd>
-          {% endif %}
+          {% if _variant == 'horizontal' %}<div>{% else %}<dd>{% endif %}
+            {%- if _definition.button is defined -%}
+              {% include '@oe-bcl/bcl-button/button.html.twig' with _definition.button only %}
+            {%- elseif _definition.link is defined %}
+              {% include '@oe-bcl/bcl-link/link.html.twig' with _definition.link only -%}
+            {%- else -%}
+              {%- if _definition.icon is defined -%}
+                {%- set _icon_classes = ["me-2"] -%}
+                {%- include '@oe-bcl/bcl-icon/icon.html.twig' with _definition.icon|merge({
+                  attributes: create_attribute().addClass(_icon_classes)
+                }) only -%}
+               <p class="mb-0 d-inline-block">{{ _definition.label }}</p>
+              {%- else -%}
+                {{- _definition.label -}}
+              {%- endif -%}
+            {%- endif -%}
+          {% if _variant == 'horizontal' %}</div>{% else %}</dd>{% endif %}
         {% endfor %}
         {% if _variant == 'horizontal' %}
-          </div>
+          </dd>
         {% endif %}
       {% else %}
         <dd>

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

@@ -1,28 +1,13 @@
 {% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' %}
 
 {% block sidebar %}
-  {% if sidebar.image is not empty %}
-    <img class="mb-4" src="https://picsum.photos/275?random=1" alt="image" />
-  {% endif %}
-  <div class="bcl-event-details mb-4">
-    <h3 class="fw-bold mb-4">Event Details</h3>
-    {% include '@oe-bcl/bcl-description-list/description-list.html.twig' with sidebar only %}
-    <div class="mt-3-5">
-    {% for badge in sidebar.badges %}
-      {% include '@oe-bcl/bcl-badge/badge.html.twig' with badge only %}
-    {% endfor %}
-    </div>
-  </div>
+  {% include '@oe-bcl/bcl-inpage-navigation/inpage-navigation.html.twig' with sidebar only %}
 {% endblock %}
 
 {% block content %}
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet eleifend tortor. In facilisis eros vitae turpis ullamcorper,
-  a euismod dolor lacinia. Nam facilisis ipsum et sollicitudin imperdiet. Curabitur a efficitur ante. Phasellus non felis laoreet,
-  posuere ante ut, rhoncus tortor. Proin sed erat vel nisl luctus vulputate. Nunc tristique ultricies turpis, eu dictum enim ultrices vel.
-  Sed posuere at leo sit amet placerat. Sed dapibus viverra urna ac pretium. Praesent et laoreet erat, eget volutpat metus. Duis ac augue
-  sed tortor elementum dignissim in sit amet velit. Nullam nec viverra mi.
-  </p>
-  <h3 class="fw-bold my-4">Description</h3>
+  {% include '@oe-bcl/bcl-description-list/description-list.html.twig' with details_list only %}
+
+  <h3 id="item-1" class="fw-bold my-4">Description</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet eleifend tortor. In facilisis eros vitae turpis ullamcorper,
   a euismod dolor lacinia. Nam facilisis ipsum et sollicitudin imperdiet. Curabitur a efficitur ante. Phasellus non felis laoreet,
   posuere ante ut, rhoncus tortor. Proin sed erat vel nisl luctus vulputate. Nunc tristique ultricies turpis, eu dictum enim ultrices vel.
@@ -32,10 +17,8 @@
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet eleifend tortor. In facilisis eros vitae turpis ullamcorper,
   a euismod dolor lacinia. Nam facilisis ipsum et sollicitudin imperdiet.
   </p>
-{% endblock %}
 
-{% block related %}
-  <h3 class="fw-bold my-4">Related documents</h3>
+  <h3 id="item-2" class="fw-bold my-4">Related documents</h3>
   {% 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 %}

package/templates/bcl-fact-figures/fact-figures.html.twig

@@ -18,7 +18,7 @@
   - "gutter" (int) (default: 4)
   - "equal_height" (boolean) (default: false)
   - "cols_extra_classes" (string) (default: '')
-  - "icons_path" (string) (default: '')
+  - "icon_path" (string) (default: '')
   - "link_more" (object of type link) (default {})
 #}
 
@@ -37,7 +37,7 @@
 {% set _equal_height = equal_height|default(false) %}
 {% set _cols_extra_classes = cols_extra_classes|default('') %}
 {% set _cols_classes = 'col' %}
-{% set _icons_path = icons_path|default('') %}
+{% set _icon_path = icon_path|default('') %}
 {% set _link_more = link_more|default({}) %}
 {% set _wrapper_classes = [] %}
 
@@ -83,7 +83,7 @@
       {% if _item.icon is defined and _item.icon is not empty and _display_icons %}
         {% set _item = _item|merge({
           icon: _item.icon|merge({
-            path: _icons_path,
+            path: _icon_path,
             size: 'l',
           })
         }) %}

package/templates/bcl-featured-media/featured-media.html.twig

@@ -57,6 +57,8 @@
   {% set attributes = create_attribute() %}
 {% endif %}
 
+{% set attributes = attributes.addClass(["rounded", "overflow-hidden"]) %}
+
 {% if _with_text %}
 <div class="{{ _wrapper_classes }}">
 
@@ -75,7 +77,7 @@
         {% include '@oe-bcl/bcl-link/link.html.twig' with _read_more only %}
       {% endif %}
     </div>
-    <div class="{{ _col_classes }} order-{{ _alignment == "right" ? '2' : '1' }}">
+    <div class="{{ _col_classes }} order-{{ _alignment == "right" ? '2 mt-4 mt-md-0' : '1' }}">
 {% endif %}
 
 <figure

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

@@ -53,7 +53,7 @@
 {% if _icon is not empty %}
   {% set _container_classes = _container_classes ~ ' ms-2-5' %}
   {% set _icon = _icon|merge({
-    attributes: create_attribute().addClass(['mt-1', 'text-secondary'])
+    attributes: create_attribute().addClass(['mt-1', 'icon--file'])
   }) %}
 {% endif %}
 
@@ -72,7 +72,8 @@
   {% set attributes = attributes.addClass(['border', 'rounded-bottom']) %}
   {% set _image = _image|merge({
     position: "top",
-    classes: "mb-3"
+    classes: "mb-3",
+    rounded: 0,
   }) %}
   {% include '@oe-bcl/bcl-card/card.html.twig' with {
     horizontal: true,
@@ -134,7 +135,7 @@
           },
           attributes: create_attribute()
                       .setAttribute('download', _download.url)
-                      .addClass(['text-underline-hover', 'align-self-center', 'd-inline-block', 'mt-1', 'mt-md-0'])
+                      .addClass(['standalone', 'align-self-center', 'd-inline-block', 'mt-1', 'mt-md-0'])
         }) %}
         {% include '@oe-bcl/bcl-link/link.html.twig' with _download only %}
       </div>
@@ -147,7 +148,7 @@
       {% include '@oe-bcl/bcl-link/link.html.twig' with _translation.label|merge({
         path: '#' ~ _id,
         attributes: create_attribute()
-                    .addClass(['text-underline-hover'])
+                    .addClass(['standalone'])
                     .setAttribute('aria-controls', _id)
                     .setAttribute('data-bs-toggle', 'collapse')
                     .setAttribute('aria-expanded', 'false')
@@ -193,7 +194,7 @@
               },
               attributes: create_attribute()
                           .setAttribute("download", _item.download.url)
-                          .addClass(['d-block', 'text-underline-hover', 'mt-1'])
+                          .addClass(['d-block', 'standalone', 'mt-1'])
             }) only %}
             </div>
           </div>

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

@@ -69,9 +69,11 @@
                   {% endif %}
                   {% if item.type == 'links' %}
                     {% for link in item.links %}
+                      <div class="mb-1">
                       {% include '@oe-bcl/bcl-link/link.html.twig' with link|merge({
-                        attributes: create_attribute().addClass(['d-block', 'text-underline-hover', 'mb-1'])
+                        attributes: create_attribute().addClass(['standalone'])
                       }) only %}
+                      </div>
                     {% endfor %}
                   {% endif %}
                 {% endfor %}

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

@@ -1,6 +1,10 @@
 {% spaceless %}
 
 {# Parameters:
+  - title: (string) (default: '')
+  - title_tag: (string) (default: 'h2')
+  - helper_text (string) (default: '')
+  - antispam (string) (default: '')
   - items (array of array of objects) (default: []) format: [
    [
     {
@@ -20,13 +24,28 @@
   - submit (object) (default: {}) Array of objects or object of type button
 #}
 
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h2') %}
+{% set _helper_text = helper_text|default('') %}
 {% set _items = items|default([]) %}
+{% set _antispam = antispam|default('') %}
 {% set _submit = submit|default({}) %}
 
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}
 {% endif %}
 
+{% if _title is not empty %}
+  {% set _title_classes = 'fw-bold mb-4' %}
+  <{{ _title_tag }} class="{{ _title_classes }}">
+    {{- _title -}}
+  </{{ _title_tag }}>
+{% endif %}
+
+{% if _helper_text is not empty %}
+  <p>{{ _helper_text }}</p>
+{% endif %}
+
 <form
   {{ attributes }}
 >
@@ -98,6 +117,13 @@
   {% endif %}
 {% endfor %}
 {% endif %}
+{% if _antispam is not empty %}
+  <div class="mt-4 mb-2">
+    <div class="bg-light">
+      {{ _antispam }}
+    </div>
+  </div>
+{% endif %}
 {# submit #}
 {% if _submit is not empty %}
   {% if _submit.items is empty %}

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

@@ -0,0 +1,203 @@
+{% spaceless %}
+
+{#
+Parameters:
+  - "id" (string) (default: '')
+  - "title" (string) (default: '')
+  - "title_tag" (string) (default: 'h2')
+  - "counter" (string) (default: '')
+  - "toggle_collapsed" (string) (default: '')
+  - "toggle_expanded" (string) (default: '')
+  - "previous_label" (string) (default: '')
+  - "next_label" (string) (default: '')
+  - "max_visible_thumbnails" (int) (default: 5)
+  - "items" (array of objects) format: [
+      {
+        thumbnails (string) img path
+        media: (string) <img> tag
+        caption (string)
+        caption_title (string)
+        caption_classes (string)
+        interval (integer) (default: 0)
+      }
+      ...
+    ],
+  - "icon_path" (string) (default: '')
+#}
+
+{# Internal properties #}
+
+{% set _id = id|default('gallery-' ~ random(1000)) %}
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h2') %}
+{% set _counter = counter|default('') %}
+{% set _toggle_collapsed = toggle_collapsed|default('') %}
+{% set _toggle_expanded = toggle_expanded|default('') %}
+{% set _next_label = next_label|default('Next') %}
+{% set _prev_label = prev_label|default('Previous') %}
+{% set _items = items|default([]) %}
+{% set _max_visible_thumbnails = max_visible_thumbnails|default(5) %}
+{% set _icon_path = icon_path|default('') %}
+
+{% set _carousel_items = [] %}
+{% set _carousel_id = "carousel" ~ _id|capitalize %}
+{% set _modal_id = "modal" ~ _id|capitalize %}
+{% set _collpase_id = "collapse" ~ _id|capitalize %}
+{% set _max_visible_thumbnails = _max_visible_thumbnails + 1 %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set attributes = attributes.addClass('bcl-gallery') %}
+
+{# Print the result #}
+
+{% if _items is not empty %}
+
+  <div {{ attributes }}>
+    {% if _items is iterable %}
+      <div class="d-sm-flex flex-sm-row align-items-sm-center">
+        <div class="flex-sm-grow-1">
+          {%- if _title is not empty -%}
+            {% set _title_classes = 'fw-bold mb-3' %}
+            <{{ _title_tag }} class="{{ _title_classes }}">
+              {{- _title -}}
+            </{{ _title_tag }}>
+          {%- endif -%}
+        </div>
+        <div class="mb-3 mb-sm-0 fw-bold">
+          {%- if _counter is not empty -%}
+            {{ _counter|replace({'%d': _items|length}) }}
+          {%- endif -%}
+        </div>
+      </div>
+
+      {% for _item in _items %}
+        {% if loop.first %}
+          <div class="bcl-gallery__thumbnails">
+        {% endif %}
+          {% if loop.index == _max_visible_thumbnails %}
+            <div class="bcl-gallery__thumbnails-collaspe collapse" id="{{ _collpase_id }}">
+          {% endif %}
+            {% if loop.index % _max_visible_thumbnails == 0 or loop.first %}
+              <ul class="bcl-gallery__grid">
+            {% endif %}
+                <li>
+                  <a href="#" data-bs-target="#{{ _carousel_id }}" data-bs-slide-to="{{ loop.index - 1 }}" class="bcl-gallery__item d-block w-100 img-fluid">
+                    <div class="bcl-gallery__item-overlay" data-bs-target="#{{ _modal_id }}" data-bs-toggle="modal">
+                    {% if '<iframe' in _item.media or '<video' in _item.media %}
+                      <span class="bcl-gallery__item-play-icon">
+                      {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
+                        name: 'play-fill',
+                        size: 's',
+                        path: _icon_path,
+                      } only %}
+                      </span>
+                    {% endif %}
+                    {% if _item.caption is not empty or item.caption_title is not empty %}
+                      <div class="bcl-gallery__item-caption">
+                      {% if _item.caption_title is not empty %}
+                        <h5>{{ _item.caption_title }}</h5>
+                      {% endif %}
+                      {% if _item.caption is not empty %}
+                        <div class="bcl-gallery__item-description">
+                          {{ _item.caption }}
+                        </div>
+                      {% endif %}
+                      </div>
+                    {% endif %}
+                    </div>
+                    {{ _item.thumbnail }}
+                  </a>
+                </li>
+            {% if loop.index % 5 == 0 or loop.last %}
+              </ul>
+            {% endif %}  
+          {% if loop.last %}
+            </div>
+          {% endif %}
+        {% if loop.index > _max_visible_thumbnails and loop.last %}
+          </div>
+          <div class="bg-lighter py-3 px-4 mt-2 rounded text-center">
+            <a 
+              class="bcl-gallery__collapse standalone d-none d-sm-inline-block" 
+              aria-controls="{{ _collpase_id }}" 
+              data-bs-toggle="collapse" 
+              aria-expanded="false" 
+              role="button" 
+              href="#{{ _collpase_id }}"
+            >
+              <span class="label-collapsed">{{ _toggle_collapsed|replace({'%d': _items|length}) }}</span>
+              <span class="label-expanded">{{ _toggle_expanded }}</span>
+              {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
+                name: 'caret-down-fill',
+                size: '2xs',
+                path: _icon_path,
+                attributes: create_attribute().addClass('ms-2-5'),
+              } only %}
+            </a>
+            <a 
+              class="bcl-gallery__mobile-view-more standalone d-inline-block d-sm-none" 
+              data-bs-target="#{{ _carousel_id }}" 
+              data-bs-slide-to="{{ _max_visible_thumbnails - 1 }}" 
+              role="button" 
+              href="#"
+            >
+              <span data-bs-target="#{{ _modal_id }}" data-bs-toggle="modal">
+                <span class="label-collapsed">{{ _toggle_collapsed|replace({'%d': _items|length}) }}</span>
+                {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
+                  name: 'caret-down-fill',
+                  size: '2xs',
+                  path: _icon_path,
+                  attributes: create_attribute().addClass('ms-2-5'),
+                } only %}
+              <span>
+            </a>
+          </div>
+        {% endif %}
+      {% endfor %}
+    {% endif %}
+
+    <div class="modal" id="{{ _modal_id }}" tabindex="-1" aria-labelledby="{{ _modal_id }}" aria-hidden="true" data-bs-backdrop="false">
+      <div class="modal-dialog modal-dialog-centered modal-fullscreen">
+        <div class="modal-content">
+          <div class="modal-header border-0 justify-content-between">
+            {% if _title is not empty %}
+              <div class="modal-title">
+                <h3 class="d-none d-sm-block">{{- _title -}}</h3>
+              </div>
+            {% endif %}
+            <div class="carousel-pager">
+              <span>1</span> / {{ _items|length }}
+            </div>
+            <div class="modal-close">
+              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+          </div>
+          
+          <div class="modal-body d-flex align-items-center justify-content-center">
+            {% for _item in _items %}
+              {% set _carousel_items = _carousel_items|merge([_item|merge({
+                caption: ('<iframe' in _item.media or '<video' in _item.media) ? '' : _item.caption,
+                image: ('<iframe' in _item.media or '<img' in _item.media) ? _item.media|replace({'src=': 'data-src='}) : _item.media,
+              })]) %}
+            {% endfor %}
+            {% include '@oe-bcl/bcl-carousel/carousel.html.twig' with {
+              id: _carousel_id,
+              with_controls: true,
+              with_indicators: false,
+              prev_label: _prev_label,
+              next_label: _next_label,
+              autoplay: false,
+              items: _carousel_items,
+            } only %}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+{% endif %}
+
+{% endspaceless %}