@openeuropa/bcl-theme-default 1.10.0 → 1.10.2

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

@@ -196,7 +196,7 @@ const noop = () => {};
  * @param {HTMLElement} element
  * @return void
  *
- * @see https://www.charistheo.io/blog/2021/02/restart-a-css-animation-with-javascript/#restarting-a-css-animation
+ * @see https://www.harrytheo.com/blog/2021/02/restart-a-css-animation-with-javascript/#restarting-a-css-animation
  */
 const reflow = element => {
   element.offsetHeight; // eslint-disable-line no-unused-expressions
@@ -241,7 +241,7 @@ const defineJQueryPlugin$1 = plugin => {
   });
 };
 const execute = (possibleCallback, args = [], defaultValue = possibleCallback) => {
-  return typeof possibleCallback === 'function' ? possibleCallback(...args) : defaultValue;
+  return typeof possibleCallback === 'function' ? possibleCallback.call(...args) : defaultValue;
 };
 const executeAfterTransition = (callback, transitionElement, waitForTransition = true) => {
   if (!waitForTransition) {
@@ -563,7 +563,7 @@ const Manipulator$1 = {
     const bsKeys = Object.keys(element.dataset).filter(key => key.startsWith('bs') && !key.startsWith('bsConfig'));
     for (const key of bsKeys) {
       let pureKey = key.replace(/^bs/, '');
-      pureKey = pureKey.charAt(0).toLowerCase() + pureKey.slice(1, pureKey.length);
+      pureKey = pureKey.charAt(0).toLowerCase() + pureKey.slice(1);
       attributes[pureKey] = normalizeData$1(element.dataset[key]);
     }
     return attributes;
@@ -638,7 +638,7 @@ class Config {
  * Constants
  */
 
-const VERSION = '5.3.3';
+const VERSION = '5.3.6';
 
 /**
  * Class definition
@@ -664,6 +664,8 @@ class BaseComponent extends Config {
       this[propertyName] = null;
     }
   }
+
+  // Private
   _queueCallback(callback, element, isAnimated = true) {
     executeAfterTransition(callback, element, isAnimated);
   }
@@ -1595,11 +1597,11 @@ class Collapse extends BaseComponent {
     this._element.style[dimension] = '';
     this._queueCallback(complete, this._element, true);
   }
+
+  // Private
   _isShown(element = this._element) {
     return element.classList.contains(CLASS_NAME_SHOW$7);
   }
-
-  // Private
   _configAfterMerge(config) {
     config.toggle = Boolean(config.toggle); // Coerce string values
     config.parent = getElement$1(config.parent);
@@ -1702,7 +1704,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';
@@ -1842,6 +1844,9 @@ class Dropdown extends BaseComponent {
     this._element.setAttribute('aria-expanded', 'false');
     Manipulator$1.removeDataAttribute(this._menu, 'popper');
     EventHandler.trigger(this._element, EVENT_HIDDEN$5, relatedTarget);
+
+    // Explicitly return focus to the trigger element
+    this._element.focus();
   }
   _getConfig(config) {
     config = super._getConfig(config);
@@ -1853,7 +1858,7 @@ class Dropdown extends BaseComponent {
   }
   _createPopper() {
     if (typeof Popper === 'undefined') {
-      throw new TypeError('Bootstrap\'s dropdowns require Popper (https://popper.js.org)');
+      throw new TypeError('Bootstrap\'s dropdowns require Popper (https://popper.js.org/docs/v2/)');
     }
     let referenceElement = this._element;
     if (this._config.reference === 'parent') {
@@ -1932,7 +1937,7 @@ class Dropdown extends BaseComponent {
     }
     return {
       ...defaultBsPopperConfig,
-      ...execute(this._config.popperConfig, [defaultBsPopperConfig])
+      ...execute(this._config.popperConfig, [undefined, defaultBsPopperConfig])
     };
   }
   _selectMenuItem({
@@ -2028,8 +2033,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) {
@@ -3119,7 +3124,7 @@ class TemplateFactory extends Config {
     return this._config.sanitize ? sanitizeHtml(arg, this._config.allowList, this._config.sanitizeFn) : arg;
   }
   _resolvePossibleFunction(arg) {
-    return execute(arg, [this]);
+    return execute(arg, [undefined, this]);
   }
   _putElementInTemplate(element, templateElement) {
     if (this._config.html) {
@@ -3218,7 +3223,7 @@ const DefaultType$3 = {
 class Tooltip extends BaseComponent {
   constructor(element, config) {
     if (typeof Popper === 'undefined') {
-      throw new TypeError('Bootstrap\'s tooltips require Popper (https://popper.js.org)');
+      throw new TypeError('Bootstrap\'s tooltips require Popper (https://popper.js.org/docs/v2/)');
     }
     super(element, config);
 
@@ -3264,7 +3269,6 @@ class Tooltip extends BaseComponent {
     if (!this._isEnabled) {
       return;
     }
-    this._activeTrigger.click = !this._activeTrigger.click;
     if (this._isShown()) {
       this._leave();
       return;
@@ -3452,7 +3456,7 @@ class Tooltip extends BaseComponent {
     return offset;
   }
   _resolvePossibleFunction(arg) {
-    return execute(arg, [this._element]);
+    return execute(arg, [this._element, this._element]);
   }
   _getPopperConfig(attachment) {
     const defaultBsPopperConfig = {
@@ -3490,7 +3494,7 @@ class Tooltip extends BaseComponent {
     };
     return {
       ...defaultBsPopperConfig,
-      ...execute(this._config.popperConfig, [defaultBsPopperConfig])
+      ...execute(this._config.popperConfig, [undefined, defaultBsPopperConfig])
     };
   }
   _setListeners() {
@@ -4726,7 +4730,6 @@ class Toast extends BaseComponent {
   }
 
   // Private
-
   _maybeScheduleHide() {
     if (!this._config.autohide) {
       return;
@@ -4802,23 +4805,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 +4824,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 +4947,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 +5036,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() {