@openeuropa/bcl-theme-default 1.10.0 → 1.10.2

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

@@ -200,7 +200,7 @@
    * @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
@@ -245,7 +245,7 @@
     });
   };
   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) {
@@ -567,7 +567,7 @@
       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;
@@ -642,7 +642,7 @@
    * Constants
    */
 
-  const VERSION = '5.3.3';
+  const VERSION = '5.3.6';
 
   /**
    * Class definition
@@ -668,6 +668,8 @@
         this[propertyName] = null;
       }
     }
+
+    // Private
     _queueCallback(callback, element, isAnimated = true) {
       executeAfterTransition(callback, element, isAnimated);
     }
@@ -1599,11 +1601,11 @@
       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);
@@ -3369,7 +3371,7 @@
   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';
@@ -3509,6 +3511,9 @@
       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);
@@ -3520,7 +3525,7 @@
     }
     _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') {
@@ -3599,7 +3604,7 @@
       }
       return {
         ...defaultBsPopperConfig,
-        ...execute(this._config.popperConfig, [defaultBsPopperConfig])
+        ...execute(this._config.popperConfig, [undefined, defaultBsPopperConfig])
       };
     }
     _selectMenuItem({
@@ -3695,8 +3700,8 @@
    * 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) {
@@ -4786,7 +4791,7 @@
       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) {
@@ -4885,7 +4890,7 @@
   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);
 
@@ -4931,7 +4936,6 @@
       if (!this._isEnabled) {
         return;
       }
-      this._activeTrigger.click = !this._activeTrigger.click;
       if (this._isShown()) {
         this._leave();
         return;
@@ -5119,7 +5123,7 @@
       return offset;
     }
     _resolvePossibleFunction(arg) {
-      return execute(arg, [this._element]);
+      return execute(arg, [this._element, this._element]);
     }
     _getPopperConfig(attachment) {
       const defaultBsPopperConfig = {
@@ -5157,7 +5161,7 @@
       };
       return {
         ...defaultBsPopperConfig,
-        ...execute(this._config.popperConfig, [defaultBsPopperConfig])
+        ...execute(this._config.popperConfig, [undefined, defaultBsPopperConfig])
       };
     }
     _setListeners() {
@@ -6393,7 +6397,6 @@
     }
 
     // Private
-
     _maybeScheduleHide() {
       if (!this._config.autohide) {
         return;
@@ -6507,23 +6510,16 @@
 
   /**
    * --------------------------------------------------------------------------
-   * 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';
@@ -6533,72 +6529,115 @@
   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;
@@ -6613,24 +6652,28 @@
 
   /**
    * ------------------------------------------------------------------------
-   * 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);
 
   /**
@@ -6660,9 +6703,16 @@
       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() {