uikit 3.16.24-dev.d6158da87 → 3.16.25-dev.12f581d90

package/dist/js/components/slideshow.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.16.24-dev.d6158da87 | https://www.getuikit.com | (c) 2014 - 2023 YOOtheme | MIT License */
+/*! UIkit 3.16.25-dev.12f581d90 | https://www.getuikit.com | (c) 2014 - 2023 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('uikit-util')) :
@@ -12,6 +12,23 @@
       }
     };
 
+    var SliderReactive = {
+      update: {
+        write() {
+          if (this.stack.length || this.dragging) {
+            return;
+          }
+          const index = this.getValidIndex(this.index);
+          if (!~this.prevIndex || this.index !== index) {
+            this.show(index);
+          } else {
+            this._translate(1, this.prevIndex, this.index);
+          }
+        },
+        events: ["resize"]
+      }
+    };
+
     var Animations$1 = {
       slide: {
         show(dir) {
@@ -33,10 +50,10 @@
     }
     function translate(value = 0, unit = "%") {
       value += value ? unit : "";
-      return `translate3d(${value}, 0, 0)`;
+      return "translate3d(".concat(value, ", 0, 0)");
     }
     function scale3d(value) {
-      return `scale3d(${value}, ${value}, 1)`;
+      return "scale3d(".concat(value, ", ").concat(value, ", 1)");
     }
 
     function Transitioner(prev, next, dir, { animation, easing }) {
@@ -94,6 +111,36 @@
       util.trigger(el, util.createEvent(type, false, false, data));
     }
 
+    function resize(options) {
+      return observe(util.observeResize, options, "resize");
+    }
+    function intersection(options) {
+      return observe(util.observeIntersection, options);
+    }
+    function lazyload(options = {}) {
+      return intersection({
+        handler: function(entries, observer) {
+          const { targets = this.$el, preload = 5 } = options;
+          for (const el of util.toNodes(util.isFunction(targets) ? targets(this) : targets)) {
+            util.$$('[loading="lazy"]', el).slice(0, preload - 1).forEach((el2) => util.removeAttr(el2, "loading"));
+          }
+          for (const el of entries.filter(({ isIntersecting }) => isIntersecting).map(({ target }) => target)) {
+            observer.unobserve(el);
+          }
+        },
+        ...options
+      });
+    }
+    function observe(observe2, options, emit) {
+      return {
+        observe: observe2,
+        handler() {
+          this.$emit(emit);
+        },
+        ...options
+      };
+    }
+
     var I18n = {
       props: {
         i18n: Object
@@ -113,201 +160,56 @@
       }
     };
 
-    const keyMap = {
-      TAB: 9,
-      ESC: 27,
-      SPACE: 32,
-      END: 35,
-      HOME: 36,
-      LEFT: 37,
-      UP: 38,
-      RIGHT: 39,
-      DOWN: 40
-    };
-
-    function generateId(instance, el = instance.$el, postfix = "") {
-      if (el.id) {
-        return el.id;
-      }
-      let id = `${instance.$options.id}-${instance._uid}${postfix}`;
-      if (util.$(`#${id}`)) {
-        id = generateId(instance, el, `${postfix}-2`);
-      }
-      return id;
-    }
-
-    var SliderNav = {
-      i18n: {
-        next: "Next slide",
-        previous: "Previous slide",
-        slideX: "Slide %s",
-        slideLabel: "%s of %s",
-        role: "String"
+    var SliderAutoplay = {
+      props: {
+        autoplay: Boolean,
+        autoplayInterval: Number,
+        pauseOnHover: Boolean
       },
       data: {
-        selNav: false,
-        role: "region"
+        autoplay: false,
+        autoplayInterval: 7e3,
+        pauseOnHover: true
       },
-      computed: {
-        nav({ selNav }, $el) {
-          return util.$(selNav, $el);
-        },
-        navChildren() {
-          return util.children(this.nav);
-        },
-        selNavItem({ attrItem }) {
-          return `[${attrItem}],[data-${attrItem}]`;
-        },
-        navItems(_, $el) {
-          return util.$$(this.selNavItem, $el);
-        }
+      connected() {
+        util.attr(this.list, "aria-live", this.autoplay ? "off" : "polite");
+        this.autoplay && this.startAutoplay();
       },
-      watch: {
-        nav(nav, prev) {
-          util.attr(nav, "role", "tablist");
-          if (prev) {
-            this.$emit();
-          }
-        },
-        list(list) {
-          util.attr(list, "role", "presentation");
-        },
-        navChildren(children2) {
-          util.attr(children2, "role", "presentation");
-        },
-        navItems(items) {
-          for (const el of items) {
-            const cmd = util.data(el, this.attrItem);
-            const button = util.$("a,button", el) || el;
-            let ariaLabel;
-            let ariaControls = null;
-            if (util.isNumeric(cmd)) {
-              const item = util.toNumber(cmd);
-              const slide = this.slides[item];
-              if (slide) {
-                if (!slide.id) {
-                  slide.id = generateId(this, slide, `-item-${cmd}`);
-                }
-                ariaControls = slide.id;
-              }
-              ariaLabel = this.t("slideX", util.toFloat(cmd) + 1);
-              util.attr(button, "role", "tab");
-            } else {
-              if (this.list) {
-                if (!this.list.id) {
-                  this.list.id = generateId(this, this.list, "-items");
-                }
-                ariaControls = this.list.id;
-              }
-              ariaLabel = this.t(cmd);
-            }
-            util.attr(button, {
-              "aria-controls": ariaControls,
-              "aria-label": util.attr(button, "aria-label") || ariaLabel
-            });
-          }
-        },
-        slides(slides) {
-          slides.forEach(
-            (slide, i) => util.attr(slide, {
-              role: this.nav ? "tabpanel" : "group",
-              "aria-label": this.t("slideLabel", i + 1, this.length),
-              "aria-roledescription": this.nav ? null : "slide"
-            })
-          );
-        },
-        length(length) {
-          const navLength = this.navChildren.length;
-          if (this.nav && length !== navLength) {
-            util.empty(this.nav);
-            for (let i = 0; i < length; i++) {
-              util.append(this.nav, `<li ${this.attrItem}="${i}"><a href></a></li>`);
-            }
-          }
-        }
+      disconnected() {
+        this.stopAutoplay();
       },
-      connected() {
-        util.attr(this.$el, {
-          role: this.role,
-          "aria-roledescription": "carousel"
-        });
+      update() {
+        util.attr(this.slides, "tabindex", "-1");
       },
-      update: [
-        {
-          write() {
-            this.navItems.concat(this.nav).forEach((el) => el && (el.hidden = !this.maxIndex));
-            this.updateNav();
-          },
-          events: ["resize"]
-        }
-      ],
       events: [
         {
-          name: "click keydown",
-          delegate() {
-            return this.selNavItem;
+          name: "visibilitychange",
+          el() {
+            return document;
           },
-          handler(e) {
-            if (util.closest(e.target, "a,button") && (e.type === "click" || e.keyCode === keyMap.SPACE)) {
-              e.preventDefault();
-              this.show(util.data(e.current, this.attrItem));
-            }
-          }
-        },
-        {
-          name: "itemshow",
-          handler: "updateNav"
-        },
-        {
-          name: "keydown",
-          delegate() {
-            return this.selNavItem;
+          filter() {
+            return this.autoplay;
           },
-          handler(e) {
-            const { current, keyCode } = e;
-            const cmd = util.data(current, this.attrItem);
-            if (!util.isNumeric(cmd)) {
-              return;
-            }
-            let i = keyCode === keyMap.HOME ? 0 : keyCode === keyMap.END ? "last" : keyCode === keyMap.LEFT ? "previous" : keyCode === keyMap.RIGHT ? "next" : -1;
-            if (~i) {
-              e.preventDefault();
-              this.show(i);
+          handler() {
+            if (document.hidden) {
+              this.stopAutoplay();
+            } else {
+              this.startAutoplay();
             }
           }
         }
       ],
       methods: {
-        updateNav() {
-          const index = this.getValidIndex();
-          let focus;
-          let focusEl;
-          for (const el of this.navItems) {
-            const cmd = util.data(el, this.attrItem);
-            const button = util.$("a,button", el) || el;
-            if (util.isNumeric(cmd)) {
-              const item = util.toNumber(cmd);
-              const active = item === index;
-              util.toggleClass(el, this.clsActive, active);
-              util.attr(button, {
-                "aria-selected": active,
-                tabindex: active ? null : -1
-              });
-              if (active) {
-                focusEl = button;
-              }
-              focus || (focus = util.matches(button, ":focus"));
-            } else {
-              util.toggleClass(
-                el,
-                "uk-invisible",
-                this.finite && (cmd === "previous" && index === 0 || cmd === "next" && index >= this.maxIndex)
-              );
-            }
-            if (focus && focusEl) {
-              focusEl.focus();
+        startAutoplay() {
+          this.stopAutoplay();
+          this.interval = setInterval(() => {
+            if (!(this.stack.length || this.draggable && util.matches(this.$el, ":focus-within") || this.pauseOnHover && util.matches(this.$el, ":hover"))) {
+              this.show("next");
             }
-          }
+          }, this.autoplayInterval);
+        },
+        stopAutoplay() {
+          clearInterval(this.interval);
         }
       }
     };
@@ -341,7 +243,7 @@
           name: pointerDown,
           passive: true,
           delegate() {
-            return `${this.selList} > *`;
+            return "".concat(this.selList, " > *");
           },
           handler(e) {
             if (!this.draggable || !util.isTouch(e) && hasSelectableText(e.target) || util.closest(e.target, util.selInput) || e.button > 0 || this.length < 2) {
@@ -433,124 +335,237 @@
             util.trigger(next, "itemshow", [this]);
           }
         },
-        end() {
-          util.off(document, pointerMove, this.move, pointerOptions);
-          util.off(document, pointerUp, this.end, pointerUpOptions);
-          if (this.dragging) {
-            this.dragging = null;
-            if (this.index === this.prevIndex) {
-              this.percent = 1 - this.percent;
-              this.dir *= -1;
-              this._show(false, this.index, true);
-              this._transitioner = null;
+        end() {
+          util.off(document, pointerMove, this.move, pointerOptions);
+          util.off(document, pointerUp, this.end, pointerUpOptions);
+          if (this.dragging) {
+            this.dragging = null;
+            if (this.index === this.prevIndex) {
+              this.percent = 1 - this.percent;
+              this.dir *= -1;
+              this._show(false, this.index, true);
+              this._transitioner = null;
+            } else {
+              const dirChange = (util.isRtl ? this.dir * (util.isRtl ? 1 : -1) : this.dir) < 0 === this.prevPos > this.pos;
+              this.index = dirChange ? this.index : this.prevIndex;
+              if (dirChange) {
+                this.percent = 1 - this.percent;
+              }
+              this.show(
+                this.dir > 0 && !dirChange || this.dir < 0 && dirChange ? "next" : "previous",
+                true
+              );
+            }
+          }
+          util.css(this.list, { userSelect: "", pointerEvents: "" });
+          this.drag = this.percent = null;
+        },
+        _getDistance(prev, next) {
+          return this._getTransitioner(prev, prev !== next && next).getDistance() || this.slides[prev].offsetWidth;
+        }
+      }
+    };
+    function hasSelectableText(el) {
+      return util.css(el, "userSelect") !== "none" && util.toArray(el.childNodes).some((el2) => el2.nodeType === 3 && el2.textContent.trim());
+    }
+
+    function generateId(instance, el = instance.$el, postfix = "") {
+      if (el.id) {
+        return el.id;
+      }
+      let id = "".concat(instance.$options.id, "-").concat(instance._uid).concat(postfix);
+      if (util.$("#".concat(id))) {
+        id = generateId(instance, el, "".concat(postfix, "-2"));
+      }
+      return id;
+    }
+
+    const keyMap = {
+      TAB: 9,
+      ESC: 27,
+      SPACE: 32,
+      END: 35,
+      HOME: 36,
+      LEFT: 37,
+      UP: 38,
+      RIGHT: 39,
+      DOWN: 40
+    };
+
+    var SliderNav = {
+      i18n: {
+        next: "Next slide",
+        previous: "Previous slide",
+        slideX: "Slide %s",
+        slideLabel: "%s of %s",
+        role: "String"
+      },
+      data: {
+        selNav: false,
+        role: "region"
+      },
+      computed: {
+        nav({ selNav }, $el) {
+          return util.$(selNav, $el);
+        },
+        navChildren() {
+          return util.children(this.nav);
+        },
+        selNavItem({ attrItem }) {
+          return "[".concat(attrItem, "],[data-").concat(attrItem, "]");
+        },
+        navItems(_, $el) {
+          return util.$$(this.selNavItem, $el);
+        }
+      },
+      watch: {
+        nav(nav, prev) {
+          util.attr(nav, "role", "tablist");
+          if (prev) {
+            this.$emit();
+          }
+        },
+        list(list) {
+          util.attr(list, "role", "presentation");
+        },
+        navChildren(children2) {
+          util.attr(children2, "role", "presentation");
+        },
+        navItems(items) {
+          for (const el of items) {
+            const cmd = util.data(el, this.attrItem);
+            const button = util.$("a,button", el) || el;
+            let ariaLabel;
+            let ariaControls = null;
+            if (util.isNumeric(cmd)) {
+              const item = util.toNumber(cmd);
+              const slide = this.slides[item];
+              if (slide) {
+                if (!slide.id) {
+                  slide.id = generateId(this, slide, "-item-".concat(cmd));
+                }
+                ariaControls = slide.id;
+              }
+              ariaLabel = this.t("slideX", util.toFloat(cmd) + 1);
+              util.attr(button, "role", "tab");
             } else {
-              const dirChange = (util.isRtl ? this.dir * (util.isRtl ? 1 : -1) : this.dir) < 0 === this.prevPos > this.pos;
-              this.index = dirChange ? this.index : this.prevIndex;
-              if (dirChange) {
-                this.percent = 1 - this.percent;
+              if (this.list) {
+                if (!this.list.id) {
+                  this.list.id = generateId(this, this.list, "-items");
+                }
+                ariaControls = this.list.id;
               }
-              this.show(
-                this.dir > 0 && !dirChange || this.dir < 0 && dirChange ? "next" : "previous",
-                true
-              );
+              ariaLabel = this.t(cmd);
             }
+            util.attr(button, {
+              "aria-controls": ariaControls,
+              "aria-label": util.attr(button, "aria-label") || ariaLabel
+            });
           }
-          util.css(this.list, { userSelect: "", pointerEvents: "" });
-          this.drag = this.percent = null;
         },
-        _getDistance(prev, next) {
-          return this._getTransitioner(prev, prev !== next && next).getDistance() || this.slides[prev].offsetWidth;
+        slides(slides) {
+          slides.forEach(
+            (slide, i) => util.attr(slide, {
+              role: this.nav ? "tabpanel" : "group",
+              "aria-label": this.t("slideLabel", i + 1, this.length),
+              "aria-roledescription": this.nav ? null : "slide"
+            })
+          );
+        },
+        length(length) {
+          const navLength = this.navChildren.length;
+          if (this.nav && length !== navLength) {
+            util.empty(this.nav);
+            for (let i = 0; i < length; i++) {
+              util.append(this.nav, "<li ".concat(this.attrItem, '="').concat(i, '"><a href></a></li>'));
+            }
+          }
         }
-      }
-    };
-    function hasSelectableText(el) {
-      return util.css(el, "userSelect") !== "none" && util.toArray(el.childNodes).some((el2) => el2.nodeType === 3 && el2.textContent.trim());
-    }
-
-    var SliderAutoplay = {
-      props: {
-        autoplay: Boolean,
-        autoplayInterval: Number,
-        pauseOnHover: Boolean
-      },
-      data: {
-        autoplay: false,
-        autoplayInterval: 7e3,
-        pauseOnHover: true
       },
       connected() {
-        util.attr(this.list, "aria-live", this.autoplay ? "off" : "polite");
-        this.autoplay && this.startAutoplay();
-      },
-      disconnected() {
-        this.stopAutoplay();
-      },
-      update() {
-        util.attr(this.slides, "tabindex", "-1");
+        util.attr(this.$el, {
+          role: this.role,
+          "aria-roledescription": "carousel"
+        });
       },
+      update: [
+        {
+          write() {
+            this.navItems.concat(this.nav).forEach((el) => el && (el.hidden = !this.maxIndex));
+            this.updateNav();
+          },
+          events: ["resize"]
+        }
+      ],
       events: [
         {
-          name: "visibilitychange",
-          el() {
-            return document;
+          name: "click keydown",
+          delegate() {
+            return this.selNavItem;
           },
-          filter() {
-            return this.autoplay;
+          handler(e) {
+            if (util.closest(e.target, "a,button") && (e.type === "click" || e.keyCode === keyMap.SPACE)) {
+              e.preventDefault();
+              this.show(util.data(e.current, this.attrItem));
+            }
+          }
+        },
+        {
+          name: "itemshow",
+          handler: "updateNav"
+        },
+        {
+          name: "keydown",
+          delegate() {
+            return this.selNavItem;
           },
-          handler() {
-            if (document.hidden) {
-              this.stopAutoplay();
-            } else {
-              this.startAutoplay();
+          handler(e) {
+            const { current, keyCode } = e;
+            const cmd = util.data(current, this.attrItem);
+            if (!util.isNumeric(cmd)) {
+              return;
+            }
+            let i = keyCode === keyMap.HOME ? 0 : keyCode === keyMap.END ? "last" : keyCode === keyMap.LEFT ? "previous" : keyCode === keyMap.RIGHT ? "next" : -1;
+            if (~i) {
+              e.preventDefault();
+              this.show(i);
             }
           }
         }
       ],
       methods: {
-        startAutoplay() {
-          this.stopAutoplay();
-          this.interval = setInterval(() => {
-            if (!(this.stack.length || this.draggable && util.matches(this.$el, ":focus-within") || this.pauseOnHover && util.matches(this.$el, ":hover"))) {
-              this.show("next");
+        updateNav() {
+          const index = this.getValidIndex();
+          let focusEl;
+          for (const el of this.navItems) {
+            const cmd = util.data(el, this.attrItem);
+            const button = util.$("a,button", el) || el;
+            if (util.isNumeric(cmd)) {
+              const item = util.toNumber(cmd);
+              const active = item === index;
+              util.toggleClass(el, this.clsActive, active);
+              util.attr(button, {
+                "aria-selected": active,
+                tabindex: active ? null : -1
+              });
+              if (active) {
+                focusEl || (focusEl = util.matches(util.parent(el), ":focus-within") && button);
+              }
+            } else {
+              util.toggleClass(
+                el,
+                "uk-invisible",
+                this.finite && (cmd === "previous" && index === 0 || cmd === "next" && index >= this.maxIndex)
+              );
             }
-          }, this.autoplayInterval);
-        },
-        stopAutoplay() {
-          clearInterval(this.interval);
+            if (focusEl && util.isInView(focusEl)) {
+              focusEl.focus();
+            }
+          }
         }
       }
     };
 
-    function resize(options) {
-      return observe(util.observeResize, options, "resize");
-    }
-    function intersection(options) {
-      return observe(util.observeIntersection, options);
-    }
-    function lazyload(options = {}) {
-      return intersection({
-        handler: function(entries, observer) {
-          const { targets = this.$el, preload = 5 } = options;
-          for (const el of util.toNodes(util.isFunction(targets) ? targets(this) : targets)) {
-            util.$$('[loading="lazy"]', el).slice(0, preload - 1).forEach((el2) => util.removeAttr(el2, "loading"));
-          }
-          for (const el of entries.filter(({ isIntersecting }) => isIntersecting).map(({ target }) => target)) {
-            observer.unobserve(el);
-          }
-        },
-        ...options
-      });
-    }
-    function observe(observe2, options, emit) {
-      return {
-        observe: observe2,
-        handler() {
-          this.$emit(emit);
-        },
-        ...options
-      };
-    }
-
     var Slider = {
       mixins: [SliderAutoplay, SliderDrag, SliderNav, I18n],
       props: {
@@ -733,6 +748,13 @@
       }
     };
 
+    var SliderPreload = {
+      observe: lazyload({
+        target: ({ slides }) => slides,
+        targets: (instance) => instance.getAdjacentSlides()
+      })
+    };
+
     var Animations = {
       ...Animations$1,
       fade: {
@@ -808,30 +830,6 @@
       }
     };
 
-    var SliderReactive = {
-      update: {
-        write() {
-          if (this.stack.length || this.dragging) {
-            return;
-          }
-          const index = this.getValidIndex(this.index);
-          if (!~this.prevIndex || this.index !== index) {
-            this.show(index);
-          } else {
-            this._translate(1, this.prevIndex, this.index);
-          }
-        },
-        events: ["resize"]
-      }
-    };
-
-    var SliderPreload = {
-      observe: lazyload({
-        target: ({ slides }) => slides,
-        targets: (instance) => instance.getAdjacentSlides()
-      })
-    };
-
     var Component = {
       mixins: [Class, Slideshow, SliderReactive, SliderPreload],
       props: {