@openeuropa/bcl-theme-default 0.20.0 → 0.23.0

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

@@ -761,11 +761,11 @@
    * ------------------------------------------------------------------------
    */
 
-  const NAME$d = 'alert';
-  const DATA_KEY$c = 'bs.alert';
-  const EVENT_KEY$c = `.${DATA_KEY$c}`;
-  const EVENT_CLOSE = `close${EVENT_KEY$c}`;
-  const EVENT_CLOSED = `closed${EVENT_KEY$c}`;
+  const NAME$e = 'alert';
+  const DATA_KEY$d = 'bs.alert';
+  const EVENT_KEY$d = `.${DATA_KEY$d}`;
+  const EVENT_CLOSE = `close${EVENT_KEY$d}`;
+  const EVENT_CLOSED = `closed${EVENT_KEY$d}`;
   const CLASS_NAME_FADE$5 = 'fade';
   const CLASS_NAME_SHOW$8 = 'show';
   /**
@@ -777,7 +777,7 @@
   class Alert extends BaseComponent {
     // Getters
     static get NAME() {
-      return NAME$d;
+      return NAME$e;
     } // Public
 
 
@@ -850,13 +850,13 @@
    * ------------------------------------------------------------------------
    */
 
-  const NAME$c = 'button';
-  const DATA_KEY$b = 'bs.button';
-  const EVENT_KEY$b = `.${DATA_KEY$b}`;
-  const DATA_API_KEY$7 = '.data-api';
+  const NAME$d = 'button';
+  const DATA_KEY$c = 'bs.button';
+  const EVENT_KEY$c = `.${DATA_KEY$c}`;
+  const DATA_API_KEY$8 = '.data-api';
   const CLASS_NAME_ACTIVE$3 = 'active';
   const SELECTOR_DATA_TOGGLE$5 = '[data-bs-toggle="button"]';
-  const EVENT_CLICK_DATA_API$6 = `click${EVENT_KEY$b}${DATA_API_KEY$7}`;
+  const EVENT_CLICK_DATA_API$7 = `click${EVENT_KEY$c}${DATA_API_KEY$8}`;
   /**
    * ------------------------------------------------------------------------
    * Class Definition
@@ -866,7 +866,7 @@
   class Button extends BaseComponent {
     // Getters
     static get NAME() {
-      return NAME$c;
+      return NAME$d;
     } // Public
 
 
@@ -894,7 +894,7 @@
    */
 
 
-  EventHandler.on(document, EVENT_CLICK_DATA_API$6, SELECTOR_DATA_TOGGLE$5, event => {
+  EventHandler.on(document, EVENT_CLICK_DATA_API$7, SELECTOR_DATA_TOGGLE$5, event => {
     event.preventDefault();
     const button = event.target.closest(SELECTOR_DATA_TOGGLE$5);
     const data = Button.getOrCreateInstance(button);
@@ -1065,16 +1065,16 @@
    * ------------------------------------------------------------------------
    */
 
-  const NAME$b = 'carousel';
-  const DATA_KEY$a = 'bs.carousel';
-  const EVENT_KEY$a = `.${DATA_KEY$a}`;
-  const DATA_API_KEY$6 = '.data-api';
+  const NAME$c = 'carousel';
+  const DATA_KEY$b = 'bs.carousel';
+  const EVENT_KEY$b = `.${DATA_KEY$b}`;
+  const DATA_API_KEY$7 = '.data-api';
   const ARROW_LEFT_KEY = 'ArrowLeft';
   const ARROW_RIGHT_KEY = 'ArrowRight';
   const TOUCHEVENT_COMPAT_WAIT = 500; // Time for mouse compat events to fire after touch
 
   const SWIPE_THRESHOLD = 40;
-  const Default$a = {
+  const Default$b = {
     interval: 5000,
     keyboard: true,
     slide: false,
@@ -1082,7 +1082,7 @@
     wrap: true,
     touch: true
   };
-  const DefaultType$a = {
+  const DefaultType$b = {
     interval: '(number|boolean)',
     keyboard: 'boolean',
     slide: '(boolean|string)',
@@ -1098,19 +1098,19 @@
     [ARROW_LEFT_KEY]: DIRECTION_RIGHT,
     [ARROW_RIGHT_KEY]: DIRECTION_LEFT
   };
-  const EVENT_SLIDE = `slide${EVENT_KEY$a}`;
-  const EVENT_SLID = `slid${EVENT_KEY$a}`;
-  const EVENT_KEYDOWN = `keydown${EVENT_KEY$a}`;
-  const EVENT_MOUSEENTER = `mouseenter${EVENT_KEY$a}`;
-  const EVENT_MOUSELEAVE = `mouseleave${EVENT_KEY$a}`;
-  const EVENT_TOUCHSTART = `touchstart${EVENT_KEY$a}`;
-  const EVENT_TOUCHMOVE = `touchmove${EVENT_KEY$a}`;
-  const EVENT_TOUCHEND = `touchend${EVENT_KEY$a}`;
-  const EVENT_POINTERDOWN = `pointerdown${EVENT_KEY$a}`;
-  const EVENT_POINTERUP = `pointerup${EVENT_KEY$a}`;
-  const EVENT_DRAG_START = `dragstart${EVENT_KEY$a}`;
-  const EVENT_LOAD_DATA_API$2 = `load${EVENT_KEY$a}${DATA_API_KEY$6}`;
-  const EVENT_CLICK_DATA_API$5 = `click${EVENT_KEY$a}${DATA_API_KEY$6}`;
+  const EVENT_SLIDE = `slide${EVENT_KEY$b}`;
+  const EVENT_SLID = `slid${EVENT_KEY$b}`;
+  const EVENT_KEYDOWN = `keydown${EVENT_KEY$b}`;
+  const EVENT_MOUSEENTER = `mouseenter${EVENT_KEY$b}`;
+  const EVENT_MOUSELEAVE = `mouseleave${EVENT_KEY$b}`;
+  const EVENT_TOUCHSTART = `touchstart${EVENT_KEY$b}`;
+  const EVENT_TOUCHMOVE = `touchmove${EVENT_KEY$b}`;
+  const EVENT_TOUCHEND = `touchend${EVENT_KEY$b}`;
+  const EVENT_POINTERDOWN = `pointerdown${EVENT_KEY$b}`;
+  const EVENT_POINTERUP = `pointerup${EVENT_KEY$b}`;
+  const EVENT_DRAG_START = `dragstart${EVENT_KEY$b}`;
+  const EVENT_LOAD_DATA_API$2 = `load${EVENT_KEY$b}${DATA_API_KEY$7}`;
+  const EVENT_CLICK_DATA_API$6 = `click${EVENT_KEY$b}${DATA_API_KEY$7}`;
   const CLASS_NAME_CAROUSEL = 'carousel';
   const CLASS_NAME_ACTIVE$2 = 'active';
   const CLASS_NAME_SLIDE = 'slide';
@@ -1157,11 +1157,11 @@
 
 
     static get Default() {
-      return Default$a;
+      return Default$b;
     }
 
     static get NAME() {
-      return NAME$b;
+      return NAME$c;
     } // Public
 
 
@@ -1239,11 +1239,11 @@
 
 
     _getConfig(config) {
-      config = { ...Default$a,
+      config = { ...Default$b,
         ...Manipulator.getDataAttributes(this._element),
         ...(typeof config === 'object' ? config : {})
       };
-      typeCheckConfig(NAME$b, config, DefaultType$a);
+      typeCheckConfig(NAME$c, config, DefaultType$b);
       return config;
     }
 
@@ -1585,7 +1585,7 @@
    */
 
 
-  EventHandler.on(document, EVENT_CLICK_DATA_API$5, SELECTOR_DATA_SLIDE, Carousel.dataApiClickHandler);
+  EventHandler.on(document, EVENT_CLICK_DATA_API$6, SELECTOR_DATA_SLIDE, Carousel.dataApiClickHandler);
   EventHandler.on(window, EVENT_LOAD_DATA_API$2, () => {
     const carousels = SelectorEngine.find(SELECTOR_DATA_RIDE);
 
@@ -1614,23 +1614,23 @@
    * ------------------------------------------------------------------------
    */
 
-  const NAME$a = 'collapse';
-  const DATA_KEY$9 = 'bs.collapse';
-  const EVENT_KEY$9 = `.${DATA_KEY$9}`;
-  const DATA_API_KEY$5 = '.data-api';
-  const Default$9 = {
+  const NAME$b = 'collapse';
+  const DATA_KEY$a = 'bs.collapse';
+  const EVENT_KEY$a = `.${DATA_KEY$a}`;
+  const DATA_API_KEY$6 = '.data-api';
+  const Default$a = {
     toggle: true,
     parent: null
   };
-  const DefaultType$9 = {
+  const DefaultType$a = {
     toggle: 'boolean',
     parent: '(null|element)'
   };
-  const EVENT_SHOW$5 = `show${EVENT_KEY$9}`;
-  const EVENT_SHOWN$5 = `shown${EVENT_KEY$9}`;
-  const EVENT_HIDE$5 = `hide${EVENT_KEY$9}`;
-  const EVENT_HIDDEN$5 = `hidden${EVENT_KEY$9}`;
-  const EVENT_CLICK_DATA_API$4 = `click${EVENT_KEY$9}${DATA_API_KEY$5}`;
+  const EVENT_SHOW$5 = `show${EVENT_KEY$a}`;
+  const EVENT_SHOWN$5 = `shown${EVENT_KEY$a}`;
+  const EVENT_HIDE$5 = `hide${EVENT_KEY$a}`;
+  const EVENT_HIDDEN$5 = `hidden${EVENT_KEY$a}`;
+  const EVENT_CLICK_DATA_API$5 = `click${EVENT_KEY$a}${DATA_API_KEY$6}`;
   const CLASS_NAME_SHOW$7 = 'show';
   const CLASS_NAME_COLLAPSE = 'collapse';
   const CLASS_NAME_COLLAPSING = 'collapsing';
@@ -1680,11 +1680,11 @@
 
 
     static get Default() {
-      return Default$9;
+      return Default$a;
     }
 
     static get NAME() {
-      return NAME$a;
+      return NAME$b;
     } // Public
 
 
@@ -1734,7 +1734,7 @@
         }
 
         if (!activesData) {
-          Data.set(elemActive, DATA_KEY$9, null);
+          Data.set(elemActive, DATA_KEY$a, null);
         }
       });
 
@@ -1823,14 +1823,14 @@
 
 
     _getConfig(config) {
-      config = { ...Default$9,
+      config = { ...Default$a,
         ...Manipulator.getDataAttributes(this._element),
         ...config
       };
       config.toggle = Boolean(config.toggle); // Coerce string values
 
       config.parent = getElement(config.parent);
-      typeCheckConfig(NAME$a, config, DefaultType$9);
+      typeCheckConfig(NAME$b, config, DefaultType$a);
       return config;
     }
 
@@ -1898,7 +1898,7 @@
    */
 
 
-  EventHandler.on(document, EVENT_CLICK_DATA_API$4, SELECTOR_DATA_TOGGLE$4, function (event) {
+  EventHandler.on(document, EVENT_CLICK_DATA_API$5, SELECTOR_DATA_TOGGLE$4, function (event) {
     // preventDefault only for <a> elements (which change the URL) not inside the collapsible element
     if (event.target.tagName === 'A' || event.delegateTarget && event.delegateTarget.tagName === 'A') {
       event.preventDefault();
@@ -2221,6 +2221,10 @@
 
     var currentNode = getParentNode(element);
 
+    if (isShadowRoot(currentNode)) {
+      currentNode = currentNode.host;
+    }
+
     while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) {
       var css = getComputedStyle$1(currentNode); // This is non-exhaustive but covers the most common CSS properties that
       // create a containing block.
@@ -2453,7 +2457,7 @@
 
       if (placement === top || (placement === left || placement === right) && variation === end) {
         sideY = bottom;
-        var offsetY = isFixed && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
+        var offsetY = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
         offsetParent[heightProp];
         y -= offsetY - popperRect.height;
         y *= gpuAcceleration ? 1 : -1;
@@ -2461,7 +2465,7 @@
 
       if (placement === left || (placement === top || placement === bottom) && variation === end) {
         sideX = right;
-        var offsetX = isFixed && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
+        var offsetX = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
         offsetParent[widthProp];
         x -= offsetX - popperRect.width;
         x *= gpuAcceleration ? 1 : -1;
@@ -3940,10 +3944,10 @@
    * ------------------------------------------------------------------------
    */
 
-  const NAME$9 = 'dropdown';
-  const DATA_KEY$8 = 'bs.dropdown';
-  const EVENT_KEY$8 = `.${DATA_KEY$8}`;
-  const DATA_API_KEY$4 = '.data-api';
+  const NAME$a = 'dropdown';
+  const DATA_KEY$9 = 'bs.dropdown';
+  const EVENT_KEY$9 = `.${DATA_KEY$9}`;
+  const DATA_API_KEY$5 = '.data-api';
   const ESCAPE_KEY$2 = 'Escape';
   const SPACE_KEY = 'Space';
   const TAB_KEY$1 = 'Tab';
@@ -3952,13 +3956,13 @@
   const RIGHT_MOUSE_BUTTON = 2; // MouseEvent.button value for the secondary button, usually the right button
 
   const REGEXP_KEYDOWN = new RegExp(`${ARROW_UP_KEY}|${ARROW_DOWN_KEY}|${ESCAPE_KEY$2}`);
-  const EVENT_HIDE$4 = `hide${EVENT_KEY$8}`;
-  const EVENT_HIDDEN$4 = `hidden${EVENT_KEY$8}`;
-  const EVENT_SHOW$4 = `show${EVENT_KEY$8}`;
-  const EVENT_SHOWN$4 = `shown${EVENT_KEY$8}`;
-  const EVENT_CLICK_DATA_API$3 = `click${EVENT_KEY$8}${DATA_API_KEY$4}`;
-  const EVENT_KEYDOWN_DATA_API = `keydown${EVENT_KEY$8}${DATA_API_KEY$4}`;
-  const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY$8}${DATA_API_KEY$4}`;
+  const EVENT_HIDE$4 = `hide${EVENT_KEY$9}`;
+  const EVENT_HIDDEN$4 = `hidden${EVENT_KEY$9}`;
+  const EVENT_SHOW$4 = `show${EVENT_KEY$9}`;
+  const EVENT_SHOWN$4 = `shown${EVENT_KEY$9}`;
+  const EVENT_CLICK_DATA_API$4 = `click${EVENT_KEY$9}${DATA_API_KEY$5}`;
+  const EVENT_KEYDOWN_DATA_API = `keydown${EVENT_KEY$9}${DATA_API_KEY$5}`;
+  const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY$9}${DATA_API_KEY$5}`;
   const CLASS_NAME_SHOW$6 = 'show';
   const CLASS_NAME_DROPUP = 'dropup';
   const CLASS_NAME_DROPEND = 'dropend';
@@ -3974,7 +3978,7 @@
   const PLACEMENT_BOTTOMEND = isRTL() ? 'bottom-start' : 'bottom-end';
   const PLACEMENT_RIGHT = isRTL() ? 'left-start' : 'right-start';
   const PLACEMENT_LEFT = isRTL() ? 'right-start' : 'left-start';
-  const Default$8 = {
+  const Default$9 = {
     offset: [0, 2],
     boundary: 'clippingParents',
     reference: 'toggle',
@@ -3982,7 +3986,7 @@
     popperConfig: null,
     autoClose: true
   };
-  const DefaultType$8 = {
+  const DefaultType$9 = {
     offset: '(array|string|function)',
     boundary: '(string|element)',
     reference: '(string|element|object)',
@@ -4007,15 +4011,15 @@
 
 
     static get Default() {
-      return Default$8;
+      return Default$9;
     }
 
     static get DefaultType() {
-      return DefaultType$8;
+      return DefaultType$9;
     }
 
     static get NAME() {
-      return NAME$9;
+      return NAME$a;
     } // Public
 
 
@@ -4125,11 +4129,11 @@
         ...Manipulator.getDataAttributes(this._element),
         ...config
       };
-      typeCheckConfig(NAME$9, config, this.constructor.DefaultType);
+      typeCheckConfig(NAME$a, config, this.constructor.DefaultType);
 
       if (typeof config.reference === 'object' && !isElement$1(config.reference) && typeof config.reference.getBoundingClientRect !== 'function') {
         // Popper virtual elements require a getBoundingClientRect method
-        throw new TypeError(`${NAME$9.toUpperCase()}: Option "reference" provided type "object" without a required "getBoundingClientRect" method.`);
+        throw new TypeError(`${NAME$a.toUpperCase()}: Option "reference" provided type "object" without a required "getBoundingClientRect" method.`);
       }
 
       return config;
@@ -4375,9 +4379,9 @@
 
   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_CLICK_DATA_API$3, Dropdown.clearMenus);
+  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$3, SELECTOR_DATA_TOGGLE$3, function (event) {
+  EventHandler.on(document, EVENT_CLICK_DATA_API$4, SELECTOR_DATA_TOGGLE$3, function (event) {
     event.preventDefault();
     Dropdown.getOrCreateInstance(this).toggle();
   });
@@ -4390,6 +4394,167 @@
 
   defineJQueryPlugin(Dropdown);
 
+  /**
+   * --------------------------------------------------------------------------
+   * Bootstrap (v5.1.3): gallery.js
+   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+   * --------------------------------------------------------------------------
+   */
+  /**
+   * ------------------------------------------------------------------------
+   * Constants
+   * ------------------------------------------------------------------------
+   */
+
+  const Default$8 = {};
+  const DefaultType$8 = {};
+  const NAME$9 = 'gallery';
+  const DATA_KEY$8 = 'bs.gallery';
+  const EVENT_KEY$8 = `.${DATA_KEY$8}`;
+  const DATA_API_KEY$4 = '.data-api';
+  const CAROUSEL_SELECTOR = '.carousel';
+  const CAROUSEL_PAGER_SELECTOR = '.carousel-pager span';
+  const CAROUSEL_ACTIVE_SELECTOR = '.carousel-item.active';
+  const CAROUSEL_ITEM_SELECTOR = '.carousel-item';
+  const THUMBNAIL_SELECTOR = '.bcl-gallery__grid a, .bcl-gallery__mobile-view-more';
+  const MODAL_SELECTOR = '.modal';
+  const EVENT_MODAL_HIDE$1 = 'hide.bs.modal';
+  const CAROUSEL_EVENT = 'slide.bs.carousel';
+  const EVENT_CLICK_DATA_API$3 = `click${EVENT_KEY$8}${DATA_API_KEY$4}`;
+  /**
+   * ------------------------------------------------------------------------
+   * Class Definition
+   * ------------------------------------------------------------------------
+   */
+
+  class Gallery extends BaseComponent {
+    constructor(element, config) {
+      super(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._config = this._getConfig(config);
+
+      this._addEventListeners();
+
+      this._carouselLazyLoad(this._carouselActiveItem);
+    } // Getters
+
+
+    static get NAME() {
+      return NAME$9;
+    } // Public
+
+
+    setSlide(event) {
+      const slideFrom = SelectorEngine.findOne(CAROUSEL_ACTIVE_SELECTOR, this._carousel);
+      const slideTo = event.relatedTarget;
+
+      this._carouselLazyLoad(slideTo);
+
+      this._carouselPager.textContent = event.to + 1;
+      this.stopVideo(slideFrom);
+    }
+
+    stopSlide() {
+      const currentSlide = SelectorEngine.findOne(CAROUSEL_ACTIVE_SELECTOR, this._carousel);
+      this.stopVideo(currentSlide);
+    }
+
+    stopVideo(slide) {
+      const iframe = SelectorEngine.findOne('iframe', slide);
+      const video = SelectorEngine.findOne('video', slide);
+
+      if (iframe) {
+        iframe.src = iframe.dataset.src;
+      } else if (video) {
+        video.pause();
+      }
+    } // Private
+
+
+    _carouselLazyLoad(slide) {
+      const media = SelectorEngine.findOne('[data-src]', slide);
+
+      if (media && !media.src) {
+        media.src = media.dataset.src;
+      }
+    }
+
+    _getConfig(config) {
+      config = { ...Default$8,
+        ...Manipulator.getDataAttributes(this._element),
+        ...(typeof config === 'object' ? config : {})
+      };
+      typeCheckConfig(NAME$9, config, DefaultType$8);
+      return config;
+    }
+
+    _addEventListeners() {
+      EventHandler.on(this._carousel, CAROUSEL_EVENT, event => this.setSlide(event));
+      EventHandler.on(this._modal, EVENT_MODAL_HIDE$1, event => this.stopSlide(event));
+    } // Static
+
+
+    static get Default() {
+      return Default$8;
+    }
+
+    static galleryInterface(element, config) {
+      const data = Gallery.getOrCreateInstance(element, config);
+      let {
+        _config
+      } = data;
+
+      if (typeof config === 'object') {
+        _config = { ..._config,
+          ...config
+        };
+      }
+    }
+
+    static jQueryInterface(config) {
+      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);
+      });
+    }
+
+  }
+  /**
+   * ------------------------------------------------------------------------
+   * Data Api implementation
+   * ------------------------------------------------------------------------
+   */
+
+
+  EventHandler.on(document, EVENT_CLICK_DATA_API$3, THUMBNAIL_SELECTOR, function (event) {
+    const gallery = event.target.closest('div.bcl-gallery');
+    const firstSlide = event.target.parentNode.getAttribute('data-bs-slide-to');
+    gallery.dataset.galleryStart = firstSlide;
+    Gallery.galleryInterface(gallery, Gallery.getInstance(gallery));
+  });
+  /**
+   * ------------------------------------------------------------------------
+   * jQuery
+   * ------------------------------------------------------------------------
+   * add .gallery to jQuery only if jQuery is present
+   */
+
+  defineJQueryPlugin(Gallery);
+
   /**
    * --------------------------------------------------------------------------
    * Bootstrap (v5.1.3): util/scrollBar.js
@@ -7013,6 +7178,7 @@
     Carousel,
     Collapse,
     Dropdown,
+    Gallery,
     Modal,
     Offcanvas,
     Popover,