@openeuropa/bcl-theme-default 1.9.2 → 1.10.1

package/js/oe-bcl-default.esm.js

@@ -1702,7 +1702,7 @@ const EVENT_HIDDEN$5 = `hidden${EVENT_KEY$8}`;
 const EVENT_SHOW$5 = `show${EVENT_KEY$8}`;
 const EVENT_SHOWN$5 = `shown${EVENT_KEY$8}`;
 const EVENT_CLICK_DATA_API$4 = `click${EVENT_KEY$8}${DATA_API_KEY$5}`;
-const EVENT_KEYDOWN_DATA_API = `keydown${EVENT_KEY$8}${DATA_API_KEY$5}`;
+const EVENT_KEYDOWN_DATA_API$1 = `keydown${EVENT_KEY$8}${DATA_API_KEY$5}`;
 const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY$8}${DATA_API_KEY$5}`;
 const CLASS_NAME_SHOW$6 = 'show';
 const CLASS_NAME_DROPUP = 'dropup';
@@ -2028,8 +2028,8 @@ class Dropdown extends BaseComponent {
  * Data API implementation
  */
 
-EventHandler.on(document, EVENT_KEYDOWN_DATA_API, SELECTOR_DATA_TOGGLE$3, Dropdown.dataApiKeydownHandler);
-EventHandler.on(document, EVENT_KEYDOWN_DATA_API, SELECTOR_MENU, Dropdown.dataApiKeydownHandler);
+EventHandler.on(document, EVENT_KEYDOWN_DATA_API$1, SELECTOR_DATA_TOGGLE$3, Dropdown.dataApiKeydownHandler);
+EventHandler.on(document, EVENT_KEYDOWN_DATA_API$1, SELECTOR_MENU, Dropdown.dataApiKeydownHandler);
 EventHandler.on(document, EVENT_CLICK_DATA_API$4, Dropdown.clearMenus);
 EventHandler.on(document, EVENT_KEYUP_DATA_API, Dropdown.clearMenus);
 EventHandler.on(document, EVENT_CLICK_DATA_API$4, SELECTOR_DATA_TOGGLE$3, function (event) {
@@ -4802,23 +4802,16 @@ defineJQueryPlugin$1(Toast);
 
 /**
  * --------------------------------------------------------------------------
- * Bootstrap (v5.1.3): gallery.js
+ * Bootstrap (v5.1.3): gallery.js (Refactored)
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  * --------------------------------------------------------------------------
  */
 
-
-/**
- * ------------------------------------------------------------------------
- * 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';
@@ -4828,72 +4821,115 @@ 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
   static get NAME() {
     return NAME;
   }
+  static get Default() {
+    return Default;
+  }
 
-  // Public
-  setSlide(event) {
-    const slideFrom = SelectorEngine.findOne(CAROUSEL_ACTIVE_SELECTOR, this.carousel);
-    const slideTo = event.relatedTarget;
-    this.carouselLazyLoad(slideTo);
+  /**
+   * 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) {
+
+  /**
+   * 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) {
+    if (iframe && iframe.dataset.src) {
       iframe.src = iframe.dataset.src;
     } else if (video) {
       video.pause();
     }
   }
 
-  // Private
-  carouselLazyLoad(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;
     }
   }
-  addEventListeners() {
-    EventHandler.on(this.carousel, CAROUSEL_EVENT, event => this.setSlide(event));
-    EventHandler.on(this.modal, EVENT_MODAL_HIDE, event => this.stopSlide(event));
-  }
 
-  // Static
-  static get Default() {
-    return Default;
+  /**
+   * 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;
+    }
+    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;
@@ -4908,24 +4944,28 @@ 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);
+});
+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);
 });
-
-/**
- * ------------------------------------------------------------------------
- * jQuery
- * ------------------------------------------------------------------------
- * add .gallery to jQuery only if jQuery is present
- */
-
 defineJQueryPlugin$1(Gallery);
 
 class AccordionToggle {
@@ -4993,9 +5033,16 @@ class AccessibleToggle {
     this.addEventListeners();
   }
   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');
+      }
     }
   }
   addEventListeners() {