@openeuropa/bcl-theme-default 1.10.0 → 1.10.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "@openeuropa/bcl-theme-default",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "1.10.0",
+  "version": "1.10.2",
   "description": "OE - BCL theme default",
   "scripts": {
     "align-templates": "lerna --scope \"@openeuropa/bcl-twig-templates\" run prepublish",
@@ -15,23 +15,24 @@
     "clean": "rimraf css js templates logos icons",
     "prepublish": "npm run build",
     "update:styles": "npm run build:styles && npm run build:color-scheme && copyfiles -f css/*.min.css ../../../assets",
-    "update:scripts": "npm run build:scripts && copyfiles -f js/*.bundle.min.js ../../../assets",
+    "update:scripts": "npm run build:scripts && copyfiles -f js/* ../../../assets",
     "update:templates": "npm-run-all -s align-templates build:copy"
   },
   "devDependencies": {
     "@ecl/resources-ec-logo": "3.7.1",
     "@ecl/resources-eu-logo": "3.7.1",
     "@ecl/resources-flag-icons": "3.7.1",
-    "@openeuropa/bcl-bootstrap": "^1.10.0",
-    "@openeuropa/bcl-builder": "^1.10.0",
-    "@openeuropa/bcl-twig-templates": "^1.10.0",
+    "@openeuropa/bcl-bootstrap": "^1.10.2",
+    "@openeuropa/bcl-builder": "^1.10.2",
+    "@openeuropa/bcl-twig-templates": "^1.10.2",
     "@rollup/plugin-replace": "6.0.2",
     "copyfiles": "2.4.1",
     "cross-env": "7.0.3",
     "flag-icons": "6.9.2",
     "glob": "11.0.1",
     "npm-run-all": "4.1.5",
-    "slim-select": "1.27.1"
+    "slim-select": "1.27.1",
+    "slim-select-2": "brianvoe/slim-select#e6239514875df954edd772fd146aed5657f0a498"
   },
   "publishConfig": {
     "access": "public"
@@ -50,5 +51,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "f83c1567b2ce60d7ccc564820bdb29ca58a26ad0"
+  "gitHead": "d4bb50f58dd038748c618cc2f7bff2674f0b1f2a"
 }

package/src/js/accessible-toggle/accessible-toggle.js

@@ -35,9 +35,17 @@ class AccessibleToggle {
   }
 
   addAriaAttributes() {
-    if (this.triggerElement) {
-      this.triggerElement.setAttribute("aria-haspopup", "true");
-      this.triggerElement.setAttribute("aria-expanded", "false");
+    if (this.type === 'modal') {
+      if (this.triggerElement) {
+        this.triggerElement.setAttribute('aria-haspopup', 'dialog');
+      }
+    }
+  
+    if (this.type === 'offcanvas') {
+      if (this.triggerElement) {
+        this.triggerElement.setAttribute('aria-haspopup', 'dialog');
+        this.triggerElement.setAttribute('aria-expanded', 'false');
+      }
     }
   }
 

package/src/js/gallery/gallery.js

@@ -1,6 +1,6 @@
 /**
  * --------------------------------------------------------------------------
- * Bootstrap (v5.1.3): gallery.js
+ * Bootstrap (v5.1.3): gallery.js (Refactored)
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  * --------------------------------------------------------------------------
  */
@@ -10,19 +10,13 @@ import EventHandler from '@openeuropa/bcl-bootstrap/js/src/dom/event-handler'
 import BaseComponent from '@openeuropa/bcl-bootstrap/js/src/base-component'
 import SelectorEngine from '@openeuropa/bcl-bootstrap/js/src/dom/selector-engine'
 
-/**
- * ------------------------------------------------------------------------
- * Constants
- * ------------------------------------------------------------------------
- */
-
-const Default = {}
-
 const NAME = 'gallery'
 const DATA_KEY = 'bs.gallery'
 const EVENT_KEY = `.${DATA_KEY}`
 const DATA_API_KEY = '.data-api'
 
+const Default = {}
+
 const CAROUSEL_SELECTOR = '.carousel'
 const CAROUSEL_PAGER_SELECTOR = '.carousel-pager span'
 const CAROUSEL_ACTIVE_SELECTOR = '.carousel-item.active'
@@ -32,25 +26,31 @@ const MODAL_SELECTOR = '.modal'
 const EVENT_MODAL_HIDE = 'hide.bs.modal'
 const CAROUSEL_EVENT = 'slide.bs.carousel'
 const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
-
-/**
- * ------------------------------------------------------------------------
- * Class Definition
- * ------------------------------------------------------------------------
- */
+const EVENT_KEYDOWN_DATA_API = `keydown${EVENT_KEY}${DATA_API_KEY}`
 
 class Gallery extends BaseComponent {
   constructor(element, config) {
     super(element, config)
-    /* eslint no-underscore-dangle: ["error", { "allow": ["_element"] }] */
+
     this.carousel = SelectorEngine.findOne(CAROUSEL_SELECTOR, this._element)
     this.carouselPager = SelectorEngine.findOne(CAROUSEL_PAGER_SELECTOR, this._element)
-    this.carouselStartIndex = element.getAttribute('data-gallery-start')
-    this.carouselActiveItem = SelectorEngine.find(CAROUSEL_ITEM_SELECTOR, this.carousel)[this.carouselStartIndex]
-    this.carouselPager.textContent = Number(this.carouselStartIndex) + 1
     this.modal = SelectorEngine.findOne(MODAL_SELECTOR, this._element)
-    this.addEventListeners()
-    this.carouselLazyLoad(this.carouselActiveItem)
+
+    this.carouselStartIndex = element.getAttribute('data-gallery-start') || 0
+    const allCarouselItems = SelectorEngine.find(CAROUSEL_ITEM_SELECTOR, this.carousel)
+
+    const startIndexNum = Math.max(
+      0,
+      Math.min(Number(this.carouselStartIndex), allCarouselItems.length - 1)
+    )
+
+    this.carouselPager.textContent = startIndexNum + 1
+    this.carouselActiveItem = allCarouselItems[startIndexNum]
+    this._carouselLazyLoad(this.carouselActiveItem)
+
+    EventHandler.on(this.carousel, CAROUSEL_EVENT, event => this._handleCarouselSlide(event))
+
+    EventHandler.on(this.modal, EVENT_MODAL_HIDE, () => this._stopSlide())
   }
 
   // Getters
@@ -58,61 +58,111 @@ class Gallery extends BaseComponent {
     return NAME
   }
 
-  // Public
-  setSlide(event) {
-    const slideFrom = SelectorEngine.findOne(CAROUSEL_ACTIVE_SELECTOR, this.carousel)
-    const slideTo = event.relatedTarget
-    this.carouselLazyLoad(slideTo)
+  static get Default() {
+    return Default
+  }
+
+  /**
+   * Handle the carousel "slide.bs.carousel" event
+   * @param {Event} event
+   */
+  _handleCarouselSlide(event) {
+    const previousSlide = SelectorEngine.findOne(CAROUSEL_ACTIVE_SELECTOR, this.carousel)
+    const currentSlide = event.relatedTarget
+
+    this._carouselLazyLoad(currentSlide)
+
     this.carouselPager.textContent = event.to + 1
-    this.stopVideo(slideFrom)
+
+    this._stopVideo(previousSlide)
   }
 
-  stopSlide() {
+  /**
+   * Stop the current carousel slide (when modal hides or component is disposed)
+   */
+  _stopSlide() {
     const currentSlide = SelectorEngine.findOne(CAROUSEL_ACTIVE_SELECTOR, this.carousel)
-    this.stopVideo(currentSlide)
+    this._stopVideo(currentSlide)
   }
 
-  stopVideo(slide) {
-    const iframe = SelectorEngine.findOne('iframe', slide);
-    const video = SelectorEngine.findOne('video', slide);
-    if (iframe) {
-      iframe.src = iframe.dataset.src;
+  /**
+   * Stop any video or iframe in the given slide
+   * @param {HTMLElement} slide
+   */
+  _stopVideo(slide) {
+    if (!slide) {
+      return
+    }
+    const iframe = SelectorEngine.findOne('iframe', slide)
+    const video = SelectorEngine.findOne('video', slide)
+
+    if (iframe && iframe.dataset.src) {
+      iframe.src = iframe.dataset.src
     } else if (video) {
-      video.pause();
+      video.pause()
     }
   }
 
-  // Private
-  carouselLazyLoad(slide) {
-    const media = SelectorEngine.findOne('[data-src]', slide);
-
+  /**
+   * Lazy load media (img, iframe, video, etc.) by copying data-src into src
+   * @param {HTMLElement} slide
+   */
+  _carouselLazyLoad(slide) {
+    if (!slide) {
+      return
+    }
+    const media = SelectorEngine.findOne('[data-src]', slide)
     if (media && !media.src) {
-      media.src = media.dataset.src;
+      media.src = media.dataset.src
     }
   }
 
-  addEventListeners() {
-    EventHandler.on(this.carousel, CAROUSEL_EVENT, event => this.setSlide(event))
-    EventHandler.on(this.modal, EVENT_MODAL_HIDE, event => this.stopSlide(event))
-  }
+  /**
+   * Internal helper to open the modal and jump to a specific slide
+   * @param {HTMLElement} gallery
+   * @param {HTMLElement} targetLink
+   */
+  static _openModalAndShowSlide(gallery, targetLink) {
+    if (!gallery || !targetLink) {
+      return
+    }
 
-  // Static
-  static get Default() {
-    return Default
+    const firstSlide = Number(targetLink.getAttribute('data-bs-slide-to') || 0)
+    gallery.dataset.galleryStart = firstSlide
+
+    const instance = Gallery.getOrCreateInstance(gallery)
+
+    const overlay = SelectorEngine.findOne('.bcl-gallery__item-overlay', targetLink)
+    if (overlay) {
+      const modalId = overlay.getAttribute('data-bs-target')
+      const modalElement = document.querySelector(modalId)
+      if (modalElement) {
+        const modal = bootstrap.Modal.getOrCreateInstance(modalElement)
+        modal.show()
+      }
+    }
+
+    setTimeout(() => {
+      const carousel = SelectorEngine.findOne(CAROUSEL_SELECTOR, instance._element)
+      const carouselInstance = bootstrap.Carousel.getOrCreateInstance(carousel)
+      carouselInstance.to(firstSlide)
+
+      const pager = SelectorEngine.findOne(CAROUSEL_PAGER_SELECTOR, instance._element)
+      if (pager) {
+        pager.textContent = firstSlide + 1
+      }
+    }, 50)
   }
 
   static jQueryInterface(config) {
-    return this.each(function jInterface() {
+    return this.each(function () {
       const data = Gallery.getOrCreateInstance(this)
-
       if (typeof config !== 'string') {
         return
       }
-
       if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
         throw new TypeError(`No method named "${config}"`)
       }
-
       data[config](this)
     })
   }
@@ -120,24 +170,30 @@ class Gallery extends BaseComponent {
 
 /**
  * ------------------------------------------------------------------------
- * Data Api implementation
+ * Data API implementation
  * ------------------------------------------------------------------------
  */
 
+const isEnterOrSpace = (event) => {
+  return event.key === 'Enter' || event.key === ' '
+}
+
 EventHandler.on(document, EVENT_CLICK_DATA_API, THUMBNAIL_SELECTOR, (event) => {
+  event.preventDefault()
+  const targetLink = event.target.closest('a')
   const gallery = event.target.closest('div.bcl-gallery')
-  const firstSlide = event.target.parentNode.getAttribute('data-bs-slide-to');
-  gallery.dataset.galleryStart = firstSlide;
-
-  Gallery.getOrCreateInstance(gallery);
+  Gallery._openModalAndShowSlide(gallery, targetLink)
 })
 
-/**
- * ------------------------------------------------------------------------
- * jQuery
- * ------------------------------------------------------------------------
- * add .gallery to jQuery only if jQuery is present
- */
+EventHandler.on(document, EVENT_KEYDOWN_DATA_API, THUMBNAIL_SELECTOR, (event) => {
+  if (!isEnterOrSpace(event)) {
+    return
+  }
+  event.preventDefault()
+  const targetLink = event.target.closest('a')
+  const gallery = event.target.closest('div.bcl-gallery')
+  Gallery._openModalAndShowSlide(gallery, targetLink)
+})
 
 defineJQueryPlugin(Gallery)
 

package/src/scss/_accordion.scss

@@ -5,3 +5,7 @@
     outline: 2px solid $primary;
   }
 }
+.accordion-button > span,
+.accordion-body {
+  max-width: 80ch;
+}

package/src/scss/_inpage-navigation.scss

@@ -13,7 +13,13 @@
     justify-content: space-between;
     align-items: center;
     white-space: normal;
+    border-left: none;
+    border-top: none;
+    border-right: none;
+    background: transparent;
     border-bottom: 1px solid $gray-300;
+    width: 100%;
+    padding: map-get($spacers, "3-5");
     &:after {
       display: none;
     }
@@ -40,6 +46,7 @@
   .bcl-heading {
     margin-bottom: 0;
     padding: map-get($spacers, "3-5");
+    border-bottom: 1px solid $gray-300;
   }
   ul {
     padding: map-get($spacers, "2-5");

package/src/scss/_multiselect-2.scss

@@ -9,7 +9,7 @@
   // Colors
   --ss-bg-color: #ffffff;
   --ss-font-color: #4d4d4d;
-  --ss-font-placeholder-color: #8d8d8d;
+  --ss-font-placeholder-color: #212529;
   --ss-disabled-color: #dcdee2;
   --ss-border-color: #dcdee2;
   --ss-highlight-color: #fffb8c;

package/src/scss/_multiselect.scss

@@ -108,6 +108,27 @@ select.multi-select {
   }
 }
 
+.ss-main.ss-1 {
+  &.form-select.is-invalid,
+  &.form-select.is-valid {
+    background: none;
+    padding: 0;
+  }
+  &.form-select {
+    border: none;
+    background: none;
+    padding: 0.075rem 0 0.075rem 0.3rem;
+  }
+  .ss-single-selected {
+    min-height: 37px;
+    .placeholder {
+      background: none;
+      cursor: pointer;
+      opacity: 1;
+    }
+  }
+}
+
 .ss-main.multi-select.is-invalid,
 .ss-main.multi-select.is-valid,
 .was-validated .multi-select:invalid + .ss-main.multi-select,

package/src/scss/_timeline.scss

@@ -19,9 +19,11 @@
       position: absolute;
       border-radius: 50%;
       border: 2px solid var(--bs-primary);
+      top: 6px;
       left: 0;
       width: 22px;
       height: 22px;
+      z-index: 1;
     }
 
     &::after {

package/src/scss/base/_layout.scss

@@ -1,6 +1,9 @@
-@include media-breakpoint-up(lg) {
-  .bcl-sidebar h2 {
-    font-size: $h4-font-size;
+@include media-breakpoint-down(md) {
+  .bcl-sidebar {
+    .dropdown-toggle,
+    h2 {
+      font-size: $h4-font-size;
+    }
   }
 }
 

package/src/scss/base/_variables.scss

@@ -1,6 +1,3 @@
-$enable-negative-margins: true;
-$negative-spacers: negativify-map($spacers);
-
 // Colors variables
 $lighter: $gray-100;
 $date: #1698af;
@@ -67,6 +64,8 @@ $spacers-extended: (
 
 $spacers: map-merge($spacers, $spacers-extended);
 $gutters: $spacers;
+$enable-negative-margins: true;
+$negative-spacers: negativify-map($spacers);
 
 // accordion
 $accordion-button-active-color: $accordion-button-color;

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

@@ -6,7 +6,7 @@
   - title_tag (string) (default: 'h2')
   - title_link: (link object) (default: {})
   - title_attributes: (drupal attrs)
-  - id (int) (default: random(1000))
+  - id (int) (default: random(10000))
   - flush (boolean) (default: false)
   - items (array) (default: []): format: [
       {
@@ -26,7 +26,7 @@
 {% set _title_tag = title_tag|default('h2') %}
 {% set _title_link = title_link|default({}) %}
 {% set _title_attributes = title_attributes ?: create_attribute() %}
-{% set _id = id|default(random(1000)) %}
+{% set _id = id|default(random(10000)) %}
 {% set _flush = flush ?? false %}
 {% set _items = items|default([]) %}
 {% set _expand_button = expand_button|default({}) %}
@@ -110,8 +110,13 @@
                                     .setAttribute('aria-controls', 'collapse-' ~ _id ~ '-' ~ loop.index)
                                     .setAttribute('aria-expanded', open_item ? 'true' : 'false')
           %}
+          {% set item_title %}
+            <span>
+              {{- _item.title -}}
+            </span>
+          {% endset %}
           {% include '@oe-bcl/bcl-button/button.html.twig' with {
-            label: _item.title,
+            label: item_title,
             clean_class: true,
             attributes: button_attributes
           } only %}

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

@@ -1,7 +1,7 @@
 {% apply spaceless %}
 
 {# Parameters:
-  - id (string) (default: dropdown-random(1000))
+  - id (string) (default: dropdown-random(10000))
   - trigger (link or button)
   - link (boolean) (default: false)
   - direction (string) (default: '')

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

@@ -1,7 +1,7 @@
 {% apply spaceless %}
 
 {# Parameters:
-  - id (string) (default: language-dropdown-random(1000))
+  - id (string) (default: language-dropdown-random(10000))
   - label (string) (default: '')
   - icon_path (string) (default: '')
   - items (string) (default: [])
@@ -15,7 +15,7 @@
     ]
 #}
 
-{% set _id = id|default('language-dropdown' ~ random(1000)) %}
+{% set _id = id|default('language-dropdown' ~ random(10000)) %}
 {% set _label = label|default('') %}
 {% set _icon_path = icon_path|default('') %}
 {% set _items = items|default([]) %}

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

@@ -30,6 +30,7 @@ Parameters:
 {% set attributes = attributes.addClass(['bcl-gallery__item', 'd-block', 'w-100', 'img-fluid'])
                               .setAttribute('data-bs-target', '#' ~ _carousel_id)
                               .setAttribute('data-bs-slide-to', _carousel_anchor)
+                              .setAttribute('tabindex', '0')
 %}
 
 <a 

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

@@ -2,7 +2,7 @@
 
 {#
 Parameters:
-  - id (string) (default: gallery-random(1000))
+  - id (string) (default: gallery-random(10000))
   - title (string) (default: '')
   - title_tag (string) (default: 'h2')
   - title_link: (link object) (default: {})
@@ -28,7 +28,7 @@ Parameters:
     carousel
 #}
 
-{% set _id = id|default('gallery-' ~ random(1000)) %}
+{% set _id = id|default('gallery-' ~ random(10000)) %}
 {% set _title = title|default('') %}
 {% set _title_tag = title_tag|default('h2') %}
 {% set _title_link = title_link|default({}) %}

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

@@ -7,8 +7,8 @@ Parameters:
   - title_link: (link object) (default: {})
   - title_attributes (drupal attrs)
   - links: (link[]) (default: [])
-  - id (string) (default: bcl-inpage-navigation-random(100))
-  - dropdown_id (string) (default: bcl-inpage-navigation-dropdown-random(100))
+  - id (string) (default: bcl-inpage-navigation-random(10000))
+  - dropdown_id (string) (default: bcl-inpage-navigation-dropdown-random(10000))
   - dynamic_active: (boolean) (default: false)
   - icon_path (string) (default: '')
   - attributes (drupal attrs)
@@ -19,9 +19,9 @@ Parameters:
 {% set _title_link = title_link|default({}) %}
 {% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _links = links|default([]) %}
-{% set _id = id|default('bcl-inpage-navigation-' ~ random(100)) %}
+{% set _id = id|default('bcl-inpage-navigation-' ~ random(10000)) %}
 {% set _icon_path = icon_path|default('') %}
-{% set _dropdown_id = dropdown_id|default('bcl-inpage-navigation-dropdown' ~ random(100)) %}
+{% set _dropdown_id = dropdown_id|default('bcl-inpage-navigation-dropdown' ~ random(10000)) %}
 {% set _dyanmic_active = dynamic_active|default(false) %}
 
 {% if attributes is empty %}
@@ -29,8 +29,8 @@ Parameters:
 {% endif %}
 
 {% set attributes = attributes.addClass(['bcl-inpage-navigation', 'position-sticky']).setAttribute('id', _id) %}
-{% set title_attributes = _title_attributes.addClass('mb-0') %}
-{% set _title_content %}
+{% set title_attributes = _title_attributes.addClass(['mb-0', 'd-none', 'd-md-block']) %}
+{% set _button_content %}
   {{ _title }}
   {%- include '@oe-bcl/bcl-icon/icon.html.twig' with {
     name: 'chevron-down',
@@ -51,13 +51,17 @@ Parameters:
                               .setAttribute('type', 'button')
                               .setAttribute('id', _dropdown_id)
                               .setAttribute('data-bs-toggle', 'dropdown')
-                              .addClass(['dropdown-toggle']) %}
+                              .addClass(['dropdown-toggle', 'h2', 'd-md-none']) %}
+  {% include '@oe-bcl/bcl-button/button.html.twig' with {
+    label: _button_content,
+    clean_class: true,
+    attributes: trigger_attributes,
+  } only %}
   {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
-    title: _title_content,
+    title: _title,
     title_tag: _title_tag,
     title_link: _title_link,
-    attributes: _title_attributes
-                .merge(trigger_attributes),
+    attributes: _title_attributes,
   } only %}
   <div class="dropdown-menu" aria-labelledby="{{ _dropdown_id }}">
     {% include '@oe-bcl/bcl-navigation/navigation.html.twig' with {

package/templates/bcl-language-switcher/language-switcher.html.twig

@@ -1,13 +1,13 @@
 {% apply spaceless %}
 
 {# Parameters:
-  - id (string) (default: collapse-random(1000), optional)
+  - id (string) (default: collapse-random(10000), optional)
   - message (alert object) (default: {})
   - expandable (button object) (default: {})
   - languages (link[]) (default: [])
 #}
 
-{% set _id = id|default('collapse-' ~ random(1000)) %}
+{% set _id = id|default('collapse-' ~ random(10000)) %}
 {% set _message = message|default({}) %}
 {% set _expandable = expandable|default({}) %}
 {% set _languages = languages|default([]) %}

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

@@ -3,7 +3,7 @@
 {# Parameters:
   - size (string) default('')
     options: sm, lg, xl, fullscreen
-  - id (boolean) (default: modal-random(1000))
+  - id (boolean) (default: modal-random(10000))
   - fullscreen_responsive (string) (default: '')
     options: sm, md, lg, xl, xxl
   - static_backdrop (boolean) (default: false)
@@ -23,7 +23,7 @@
 #}
 
 {% set _size =  size|default('') %}
-{% set _id = id|default('modal-' ~ random(1000)) %}
+{% 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 %}

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

@@ -2,7 +2,7 @@
 
 {#
 Parameters:
-  - id: (integer) (default: random(1000))
+  - id: (integer) (default: random(10000))
   - title: (string) (default: '')
   - title_tag: (string) (default: 'h2')
   - title_link: (link object) (default: {})
@@ -25,7 +25,7 @@ Parameters:
   - icon_path (string) (default: ''): file containing the svg icons
 #}
 
-{% set _id = id|default(random(1000)) %}
+{% set _id = id|default(random(10000)) %}
 {% set _title = title|default('') %}
 {% set _title_tag = title_tag|default('h2') %}
 {% set _title_link = title_link|default({}) %}