@nextcloud/vue 8.4.0 → 9.0.0-alpha.0

package/dist/Components/NcModal.cjs

@@ -1,8 +1,8 @@
-var I = require("../assets/index-a3c23731.css");
-const u = require("../chunks/ScopeComponent-06c558d3.cjs"), r = require("../chunks/focusTrap-14985831.cjs"), i = require("../chunks/_l10n-72c5e29e.cjs"), d = require("../chunks/GenRandomId-c214d235.cjs"), h = require("./NcActions.cjs"), p = require("./NcButton.cjs");
+var de = require("../assets/NcModal-DzsqMWSJ.css");
+const g = require("../chunks/ScopeComponent-4ppIHwI4.cjs"), m = require("../chunks/focusTrap-n3H52LOw.cjs"), s = require("../chunks/_l10n-wK0o0jNS.cjs"), C = require("../chunks/GenRandomId-ULxaMkkr.cjs"), v = require("../chunks/NcActions-VJy75Dj8.cjs"), B = require("../chunks/NcButton-Uxh-oARg.cjs");
 require("../Directives/Tooltip.cjs");
-const l = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), f = require("../chunks/ChevronRight-a4c1e0d3.cjs"), m = require("../chunks/Close-98cb6f12.cjs"), _ = require("focus-trap"), y = require("@vueuse/core"), v = require("floating-vue");
-i.register(i.t16, i.t28);
+const e = require("vue"), d = require("../chunks/_plugin-vue_export-helper-xG2iG1wl.cjs"), N = require("../chunks/ChevronRight-iDcqZ2Ih.cjs"), S = require("../chunks/Close-2nENZfbn.cjs"), b = require("focus-trap"), T = require("@vueuse/core"), V = require("floating-vue");
+s.register(s.t16, s.t29);
 /**
  * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
  *
@@ -24,21 +24,21 @@ i.register(i.t16, i.t28);
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-function w(s, e) {
-  let t, a, o = e, n;
+function x(i, a) {
+  let t, r, n = a, o;
   this.start = function() {
-    n = !0, a = /* @__PURE__ */ new Date(), t = setTimeout(s, o);
+    o = !0, r = /* @__PURE__ */ new Date(), t = setTimeout(i, n);
   }, this.pause = function() {
-    n = !1, clearTimeout(t), o -= /* @__PURE__ */ new Date() - a;
+    o = !1, clearTimeout(t), n -= /* @__PURE__ */ new Date() - r;
   }, this.clear = function() {
-    n = !1, clearTimeout(t), o = 0;
+    o = !1, clearTimeout(t), n = 0;
   }, this.getTimeLeft = function() {
-    return n && (this.pause(), this.start()), o;
+    return o && (this.pause(), this.start()), n;
   }, this.getStateRunning = function() {
-    return n;
+    return o;
   }, this.start();
 }
-const g = {
+const E = {
   name: "ChevronLeftIcon",
   emits: ["click"],
   props: {
@@ -54,23 +54,29 @@ const g = {
       default: 24
     }
   }
-};
-var C = function() {
-  var e = this, t = e._self._c;
-  return t("span", e._b({ staticClass: "material-design-icon chevron-left-icon", attrs: { "aria-hidden": !e.title, "aria-label": e.title, role: "img" }, on: { click: function(a) {
-    return e.$emit("click", a);
-  } } }, "span", e.$attrs, !1), [t("svg", { staticClass: "material-design-icon__svg", attrs: { fill: e.fillColor, width: e.size, height: e.size, viewBox: "0 0 24 24" } }, [t("path", { attrs: { d: "M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" } }, [e.title ? t("title", [e._v(e._s(e.title))]) : e._e()])])]);
-}, b = [], k = /* @__PURE__ */ l.normalizeComponent(
-  g,
-  C,
-  b,
-  !1,
-  null,
-  null,
-  null,
-  null
-);
-const S = k.exports, T = {
+}, P = ["aria-hidden", "aria-label"], z = ["fill", "width", "height"], L = { d: "M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" }, A = { key: 0 };
+function D(i, a, t, r, n, o) {
+  return e.openBlock(), e.createElementBlock("span", e.mergeProps(i.$attrs, {
+    "aria-hidden": !t.title,
+    "aria-label": t.title,
+    class: "material-design-icon chevron-left-icon",
+    role: "img",
+    onClick: a[0] || (a[0] = (l) => i.$emit("click", l))
+  }), [
+    (e.openBlock(), e.createElementBlock("svg", {
+      fill: t.fillColor,
+      class: "material-design-icon__svg",
+      width: t.size,
+      height: t.size,
+      viewBox: "0 0 24 24"
+    }, [
+      e.createElementVNode("path", L, [
+        t.title ? (e.openBlock(), e.createElementBlock("title", A, e.toDisplayString(t.title), 1)) : e.createCommentVNode("", !0)
+      ])
+    ], 8, z))
+  ], 16, P);
+}
+const M = /* @__PURE__ */ d._export_sfc(E, [["render", D]]), q = {
   name: "PauseIcon",
   emits: ["click"],
   props: {
@@ -86,23 +92,29 @@ const S = k.exports, T = {
       default: 24
     }
   }
-};
-var x = function() {
-  var e = this, t = e._self._c;
-  return t("span", e._b({ staticClass: "material-design-icon pause-icon", attrs: { "aria-hidden": !e.title, "aria-label": e.title, role: "img" }, on: { click: function(a) {
-    return e.$emit("click", a);
-  } } }, "span", e.$attrs, !1), [t("svg", { staticClass: "material-design-icon__svg", attrs: { fill: e.fillColor, width: e.size, height: e.size, viewBox: "0 0 24 24" } }, [t("path", { attrs: { d: "M14,19H18V5H14M6,19H10V5H6V19Z" } }, [e.title ? t("title", [e._v(e._s(e.title))]) : e._e()])])]);
-}, N = [], B = /* @__PURE__ */ l.normalizeComponent(
-  T,
-  x,
-  N,
-  !1,
-  null,
-  null,
-  null,
-  null
-);
-const $ = B.exports, z = {
+}, I = ["aria-hidden", "aria-label"], R = ["fill", "width", "height"], F = { d: "M14,19H18V5H14M6,19H10V5H6V19Z" }, H = { key: 0 };
+function O(i, a, t, r, n, o) {
+  return e.openBlock(), e.createElementBlock("span", e.mergeProps(i.$attrs, {
+    "aria-hidden": !t.title,
+    "aria-label": t.title,
+    class: "material-design-icon pause-icon",
+    role: "img",
+    onClick: a[0] || (a[0] = (l) => i.$emit("click", l))
+  }), [
+    (e.openBlock(), e.createElementBlock("svg", {
+      fill: t.fillColor,
+      class: "material-design-icon__svg",
+      width: t.size,
+      height: t.size,
+      viewBox: "0 0 24 24"
+    }, [
+      e.createElementVNode("path", F, [
+        t.title ? (e.openBlock(), e.createElementBlock("title", H, e.toDisplayString(t.title), 1)) : e.createCommentVNode("", !0)
+      ])
+    ], 8, R))
+  ], 16, I);
+}
+const G = /* @__PURE__ */ d._export_sfc(q, [["render", O]]), K = {
   name: "PlayIcon",
   emits: ["click"],
   props: {
@@ -118,36 +130,41 @@ const $ = B.exports, z = {
       default: 24
     }
   }
-};
-var P = function() {
-  var e = this, t = e._self._c;
-  return t("span", e._b({ staticClass: "material-design-icon play-icon", attrs: { "aria-hidden": !e.title, "aria-label": e.title, role: "img" }, on: { click: function(a) {
-    return e.$emit("click", a);
-  } } }, "span", e.$attrs, !1), [t("svg", { staticClass: "material-design-icon__svg", attrs: { fill: e.fillColor, width: e.size, height: e.size, viewBox: "0 0 24 24" } }, [t("path", { attrs: { d: "M8,5.14V19.14L19,12.14L8,5.14Z" } }, [e.title ? t("title", [e._v(e._s(e.title))]) : e._e()])])]);
-}, L = [], M = /* @__PURE__ */ l.normalizeComponent(
-  z,
-  P,
-  L,
-  !1,
-  null,
-  null,
-  null,
-  null
-);
-const A = M.exports;
-const q = {
+}, W = ["aria-hidden", "aria-label"], Z = ["fill", "width", "height"], U = { d: "M8,5.14V19.14L19,12.14L8,5.14Z" }, j = { key: 0 };
+function J(i, a, t, r, n, o) {
+  return e.openBlock(), e.createElementBlock("span", e.mergeProps(i.$attrs, {
+    "aria-hidden": !t.title,
+    "aria-label": t.title,
+    class: "material-design-icon play-icon",
+    role: "img",
+    onClick: a[0] || (a[0] = (l) => i.$emit("click", l))
+  }), [
+    (e.openBlock(), e.createElementBlock("svg", {
+      fill: t.fillColor,
+      class: "material-design-icon__svg",
+      width: t.size,
+      height: t.size,
+      viewBox: "0 0 24 24"
+    }, [
+      e.createElementVNode("path", U, [
+        t.title ? (e.openBlock(), e.createElementBlock("title", j, e.toDisplayString(t.title), 1)) : e.createCommentVNode("", !0)
+      ])
+    ], 8, Z))
+  ], 16, W);
+}
+const Q = /* @__PURE__ */ d._export_sfc(K, [["render", J]]), X = {
   name: "NcModal",
   components: {
-    NcActions: h,
-    ChevronLeft: S,
-    ChevronRight: f.ChevronRight,
-    Close: m.Close,
-    Pause: $,
-    Play: A,
-    NcButton: p
+    NcActions: v.NcActions,
+    ChevronLeft: M,
+    ChevronRight: N.ChevronRight,
+    Close: S.Close,
+    Pause: G,
+    Play: Q,
+    NcButton: B.NcButton
   },
   directives: {
-    tooltip: v.VTooltip
+    tooltip: V.VTooltip
   },
   props: {
     /**
@@ -219,7 +236,7 @@ const q = {
     size: {
       type: String,
       default: "normal",
-      validator: (s) => ["small", "normal", "large", "full"].includes(s)
+      validator: (i) => ["small", "normal", "large", "full"].includes(i)
     },
     /**
      * Declare if the modal can be closed
@@ -278,6 +295,15 @@ const q = {
     show: {
       type: Boolean,
       default: void 0
+    },
+    /**
+     * Set element to return focus to after focus trap deactivation
+     *
+     * @type {import('focus-trap').FocusTargetValueOrFalse}
+     */
+    setReturnFocus: {
+      default: void 0,
+      type: [HTMLElement, SVGElement, String, Boolean]
     }
   },
   emits: [
@@ -293,7 +319,7 @@ const q = {
       slideshowTimeout: null,
       iconSize: 24,
       focusTrap: null,
-      randId: d.GenRandomId(),
+      randId: C.GenRandomId(),
       internalShow: !0
     };
   },
@@ -305,7 +331,7 @@ const q = {
       return `modal-${this.outTransition ? "out" : "in"}`;
     },
     playPauseName() {
-      return this.playing ? i.t("Pause slideshow") : i.t("Start slideshow");
+      return this.playing ? s.t("Pause slideshow") : s.t("Start slideshow");
     },
     cssVariables() {
       return {
@@ -314,13 +340,13 @@ const q = {
       };
     },
     closeButtonAriaLabel() {
-      return i.t("Close");
+      return s.t("Close");
     },
     prevButtonAriaLabel() {
-      return i.t("Previous");
+      return s.t("Previous");
     },
     nextButtonAriaLabel() {
-      return i.t("Next");
+      return s.t("Next");
     }
   },
   watch: {
@@ -329,42 +355,42 @@ const q = {
      *
      * @param {boolean} paused is the player paused
      */
-    slideshowPaused(s) {
-      this.slideshowTimeout && (s ? this.slideshowTimeout.pause() : this.slideshowTimeout.start());
+    slideshowPaused(i) {
+      this.slideshowTimeout && (i ? this.slideshowTimeout.pause() : this.slideshowTimeout.start());
     },
-    additionalTrapElements(s) {
+    additionalTrapElements(i) {
       if (this.focusTrap) {
-        const e = this.$refs.mask;
-        this.focusTrap.updateContainerElements([e, ...s]);
+        const a = this.$refs.mask;
+        this.focusTrap.updateContainerElements([a, ...i]);
       }
     }
   },
   beforeMount() {
     window.addEventListener("keydown", this.handleKeydown);
   },
-  beforeDestroy() {
+  beforeUnmount() {
     window.removeEventListener("keydown", this.handleKeydown), this.mc.stop();
   },
   mounted() {
-    this.useFocusTrap(), this.mc = y.useSwipe(this.$refs.mask, {
+    this.useFocusTrap(), this.mc = T.useSwipe(this.$refs.mask, {
       onSwipeEnd: this.handleSwipe
     }), this.container && (this.container === "body" ? document.body.insertBefore(this.$el, document.body.lastChild) : document.querySelector(this.container).appendChild(this.$el));
   },
-  destroyed() {
+  unmounted() {
     this.clearFocusTrap(), this.$el.remove();
   },
   methods: {
-    t: i.t,
+    t: s.t,
     // Events emitters
-    previous(s) {
-      this.hasPrevious && (s && this.resetSlideshow(), this.$emit("previous", s));
+    previous(i) {
+      this.hasPrevious && (i && this.resetSlideshow(), this.$emit("previous", i));
     },
-    next(s) {
-      this.hasNext && (s && this.resetSlideshow(), this.$emit("next", s));
+    next(i) {
+      this.hasNext && (i && this.resetSlideshow(), this.$emit("next", i));
     },
-    close(s) {
+    close(i) {
       this.canClose && (this.internalShow = !1, this.$emit("update:show", !1), setTimeout(() => {
-        this.$emit("close", s);
+        this.$emit("close", i);
       }, 300));
     },
     /**
@@ -373,23 +399,23 @@ const q = {
      *
      * @param {MouseEvent} event The click event
      */
-    handleClickModalWrapper(s) {
-      this.closeOnClickOutside && this.close(s);
+    handleClickModalWrapper(i) {
+      this.closeOnClickOutside && this.close(i);
     },
     /**
      * @param {KeyboardEvent} event - keyboard event
      */
-    handleKeydown(s) {
-      if (s.key === "Escape") {
-        const t = r.getTrapStack();
-        return t.length > 0 && t[t.length - 1] !== this.focusTrap ? void 0 : this.close(s);
+    handleKeydown(i) {
+      if (i.key === "Escape") {
+        const t = m.getTrapStack();
+        return t.length > 0 && t[t.length - 1] !== this.focusTrap ? void 0 : this.close(i);
       }
-      const e = {
+      const a = {
         ArrowLeft: this.previous,
         ArrowRight: this.next
       };
-      if (e[s.key])
-        return document.activeElement && !this.$el.contains(document.activeElement) ? void 0 : e[s.key](s);
+      if (a[i.key])
+        return document.activeElement && !this.$el.contains(document.activeElement) ? void 0 : a[i.key](i);
     },
     /**
      * handle the swipe event
@@ -397,8 +423,8 @@ const q = {
      * @param {TouchEvent} e The touch event
      * @param {import('@vueuse/core').SwipeDirection} direction Swipe direction
      */
-    handleSwipe(s, e) {
-      this.enableSwipe && (e === "left" ? this.next(s) : e === "right" && this.previous(s));
+    handleSwipe(i, a) {
+      this.enableSwipe && (a === "left" ? this.next(i) : a === "right" && this.previous(i));
     },
     /**
      * Toggle the slideshow state
@@ -418,7 +444,7 @@ const q = {
      * Handle the slideshow timer and next event
      */
     handleSlideshow() {
-      this.playing = !0, this.hasNext ? this.slideshowTimeout = new w(() => {
+      this.playing = !0, this.hasNext ? this.slideshowTimeout = new x(() => {
         this.next(), this.handleSlideshow();
       }, this.slideshowDelay) : (this.playing = !1, this.clearSlideshowTimeout());
     },
@@ -434,51 +460,209 @@ const q = {
     async useFocusTrap() {
       if (!this.showModal || this.focusTrap)
         return;
-      const s = this.$refs.mask;
+      const i = this.$refs.mask;
       await this.$nextTick();
-      const e = {
+      const a = {
         allowOutsideClick: !0,
-        fallbackFocus: s,
-        trapStack: r.getTrapStack(),
+        fallbackFocus: i,
+        trapStack: m.getTrapStack(),
         // Esc can be used without stop in content or additionalTrapElements where it should not deacxtivate modal's focus trap.
         // Focus trap is deactivated on modal close anyway.
-        escapeDeactivates: !1
+        escapeDeactivates: !1,
+        setReturnFocus: this.setReturnFocus
       };
-      this.focusTrap = _.createFocusTrap([s, ...this.additionalTrapElements], e), this.focusTrap.activate();
+      this.focusTrap = b.createFocusTrap([i, ...this.additionalTrapElements], a), this.focusTrap.activate();
     },
     clearFocusTrap() {
-      var s;
-      this.focusTrap && ((s = this.focusTrap) == null || s.deactivate(), this.focusTrap = null);
+      this.focusTrap && (this.focusTrap?.deactivate(), this.focusTrap = null);
     }
   }
-};
-var F = function() {
-  var e = this, t = e._self._c;
-  return t("transition", { attrs: { name: "fade", appear: "" }, on: { "after-enter": e.useFocusTrap, "before-leave": e.clearFocusTrap } }, [t("div", { directives: [{ name: "show", rawName: "v-show", value: e.showModal, expression: "showModal" }], ref: "mask", staticClass: "modal-mask", class: { "modal-mask--dark": e.dark || !e.closeButtonContained || e.hasPrevious || e.hasNext }, style: e.cssVariables, attrs: { role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-name-" + e.randId, "aria-describedby": "modal-description-" + e.randId, tabindex: "-1" } }, [t("transition", { attrs: { name: "fade-visibility", appear: "" } }, [t("div", { staticClass: "modal-header" }, [e.name.trim() !== "" ? t("h2", { staticClass: "modal-name", attrs: { id: "modal-name-" + e.randId } }, [e._v(" " + e._s(e.name) + " ")]) : e._e(), t("div", { staticClass: "icons-menu" }, [e.hasNext && e.enableSlideshow ? t("button", { directives: [{ name: "tooltip", rawName: "v-tooltip.auto", value: e.playPauseName, expression: "playPauseName", modifiers: { auto: !0 } }], staticClass: "play-pause-icons", class: { "play-pause-icons--paused": e.slideshowPaused }, attrs: { type: "button" }, on: { click: e.togglePlayPause } }, [e.playing ? t("Pause", { staticClass: "play-pause-icons__pause", attrs: { size: e.iconSize } }) : t("Play", { staticClass: "play-pause-icons__play", attrs: { size: e.iconSize } }), t("span", { staticClass: "hidden-visually" }, [e._v(" " + e._s(e.playPauseName) + " ")]), e.playing ? t("svg", { staticClass: "progress-ring", attrs: { height: "50", width: "50" } }, [t("circle", { staticClass: "progress-ring__circle", attrs: { stroke: "white", "stroke-width": "2", fill: "transparent", r: "15", cx: "25", cy: "25" } })]) : e._e()], 1) : e._e(), t("NcActions", { staticClass: "header-actions", attrs: { inline: e.inlineActions } }, [e._t("actions")], 2), e.canClose && !e.closeButtonContained ? t("NcButton", { staticClass: "header-close", attrs: { "aria-label": e.closeButtonAriaLabel, type: "tertiary" }, on: { click: e.close }, scopedSlots: e._u([{ key: "icon", fn: function() {
-    return [t("Close", { attrs: { size: e.iconSize } })];
-  }, proxy: !0 }], null, !1, 1841713362) }) : e._e()], 1)])]), t("transition", { attrs: { name: e.modalTransitionName, appear: "" } }, [t("div", { directives: [{ name: "show", rawName: "v-show", value: e.showModal, expression: "showModal" }], staticClass: "modal-wrapper", class: [
-    `modal-wrapper--${e.size}`,
-    { "modal-wrapper--spread-navigation": e.spreadNavigation }
-  ], on: { mousedown: function(a) {
-    return a.target !== a.currentTarget ? null : e.handleClickModalWrapper.apply(null, arguments);
-  } } }, [t("transition", { attrs: { name: "fade-visibility", appear: "" } }, [t("NcButton", { directives: [{ name: "show", rawName: "v-show", value: e.hasPrevious, expression: "hasPrevious" }], staticClass: "prev", attrs: { type: "tertiary-no-background", "aria-label": e.prevButtonAriaLabel }, on: { click: e.previous }, scopedSlots: e._u([{ key: "icon", fn: function() {
-    return [t("ChevronLeft", { attrs: { size: 40 } })];
-  }, proxy: !0 }]) })], 1), t("div", { staticClass: "modal-container", attrs: { id: "modal-description-" + e.randId } }, [e.canClose && e.closeButtonContained ? t("NcButton", { staticClass: "modal-container__close", attrs: { type: "tertiary", "aria-label": e.closeButtonAriaLabel }, on: { click: e.close }, scopedSlots: e._u([{ key: "icon", fn: function() {
-    return [t("Close", { attrs: { size: 20 } })];
-  }, proxy: !0 }], null, !1, 2121748766) }) : e._e(), t("div", { staticClass: "modal-container__content" }, [e._t("default")], 2)], 1), t("transition", { attrs: { name: "fade-visibility", appear: "" } }, [t("NcButton", { directives: [{ name: "show", rawName: "v-show", value: e.hasNext, expression: "hasNext" }], staticClass: "next", attrs: { type: "tertiary-no-background", "aria-label": e.nextButtonAriaLabel }, on: { click: e.next }, scopedSlots: e._u([{ key: "icon", fn: function() {
-    return [t("ChevronRight", { attrs: { size: 40 } })];
-  }, proxy: !0 }]) })], 1)], 1)])], 1)]);
-}, R = [], E = /* @__PURE__ */ l.normalizeComponent(
-  q,
-  F,
-  R,
-  !1,
-  null,
-  "aaa85268",
-  null,
-  null
-);
-const c = E.exports;
+}, Y = (i) => (e.pushScopeId("data-v-b0a83a26"), i = i(), e.popScopeId(), i), $ = ["aria-labelledby", "aria-describedby"], ee = { class: "modal-header" }, te = ["id"], ie = { class: "icons-menu" }, oe = { class: "hidden-visually" }, ae = {
+  key: 2,
+  class: "progress-ring",
+  height: "50",
+  width: "50"
+}, ne = /* @__PURE__ */ Y(() => /* @__PURE__ */ e.createElementVNode("circle", {
+  class: "progress-ring__circle",
+  stroke: "white",
+  "stroke-width": "2",
+  fill: "transparent",
+  r: "15",
+  cx: "25",
+  cy: "25"
+}, null, -1)), se = [
+  ne
+], le = ["id"], re = { class: "modal-container__content" };
+function ce(i, a, t, r, n, o) {
+  const l = e.resolveComponent("Play"), p = e.resolveComponent("Pause"), y = e.resolveComponent("NcActions"), h = e.resolveComponent("Close"), c = e.resolveComponent("NcButton"), _ = e.resolveComponent("ChevronLeft"), w = e.resolveComponent("ChevronRight"), k = e.resolveDirective("tooltip");
+  return e.openBlock(), e.createBlock(e.Transition, {
+    name: "fade",
+    appear: "",
+    onAfterEnter: o.useFocusTrap,
+    onBeforeLeave: o.clearFocusTrap
+  }, {
+    default: e.withCtx(() => [
+      e.withDirectives(e.createElementVNode("div", {
+        ref: "mask",
+        class: e.normalizeClass(["modal-mask", { "modal-mask--dark": t.dark || !t.closeButtonContained || t.hasPrevious || t.hasNext }]),
+        style: e.normalizeStyle(o.cssVariables),
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": "modal-name-" + n.randId,
+        "aria-describedby": "modal-description-" + n.randId,
+        tabindex: "-1"
+      }, [
+        e.createVNode(e.Transition, {
+          name: "fade-visibility",
+          appear: ""
+        }, {
+          default: e.withCtx(() => [
+            e.createElementVNode("div", ee, [
+              t.name.trim() !== "" ? (e.openBlock(), e.createElementBlock("h2", {
+                key: 0,
+                id: "modal-name-" + n.randId,
+                class: "modal-name"
+              }, e.toDisplayString(t.name), 9, te)) : e.createCommentVNode("", !0),
+              e.createElementVNode("div", ie, [
+                t.hasNext && t.enableSlideshow ? e.withDirectives((e.openBlock(), e.createElementBlock("button", {
+                  key: 0,
+                  class: e.normalizeClass([{ "play-pause-icons--paused": t.slideshowPaused }, "play-pause-icons"]),
+                  type: "button",
+                  onClick: a[0] || (a[0] = (...u) => o.togglePlayPause && o.togglePlayPause(...u))
+                }, [
+                  n.playing ? (e.openBlock(), e.createBlock(p, {
+                    key: 1,
+                    size: n.iconSize,
+                    class: "play-pause-icons__pause"
+                  }, null, 8, ["size"])) : (e.openBlock(), e.createBlock(l, {
+                    key: 0,
+                    size: n.iconSize,
+                    class: "play-pause-icons__play"
+                  }, null, 8, ["size"])),
+                  e.createElementVNode("span", oe, e.toDisplayString(o.playPauseName), 1),
+                  n.playing ? (e.openBlock(), e.createElementBlock("svg", ae, se)) : e.createCommentVNode("", !0)
+                ], 2)), [
+                  [
+                    k,
+                    o.playPauseName,
+                    void 0,
+                    { auto: !0 }
+                  ]
+                ]) : e.createCommentVNode("", !0),
+                e.createVNode(y, {
+                  class: "header-actions",
+                  inline: t.inlineActions
+                }, {
+                  default: e.withCtx(() => [
+                    e.renderSlot(i.$slots, "actions", {}, void 0, !0)
+                  ]),
+                  _: 3
+                }, 8, ["inline"]),
+                t.canClose && !t.closeButtonContained ? (e.openBlock(), e.createBlock(c, {
+                  key: 1,
+                  "aria-label": o.closeButtonAriaLabel,
+                  class: "header-close",
+                  type: "tertiary",
+                  onClick: o.close
+                }, {
+                  icon: e.withCtx(() => [
+                    e.createVNode(h, { size: n.iconSize }, null, 8, ["size"])
+                  ]),
+                  _: 1
+                }, 8, ["aria-label", "onClick"])) : e.createCommentVNode("", !0)
+              ])
+            ])
+          ]),
+          _: 3
+        }),
+        e.createVNode(e.Transition, {
+          name: o.modalTransitionName,
+          appear: ""
+        }, {
+          default: e.withCtx(() => [
+            e.withDirectives(e.createElementVNode("div", {
+              class: e.normalizeClass([[
+                `modal-wrapper--${t.size}`,
+                { "modal-wrapper--spread-navigation": t.spreadNavigation }
+              ], "modal-wrapper"]),
+              onMousedown: a[1] || (a[1] = e.withModifiers((...u) => o.handleClickModalWrapper && o.handleClickModalWrapper(...u), ["self"]))
+            }, [
+              e.createVNode(e.Transition, {
+                name: "fade-visibility",
+                appear: ""
+              }, {
+                default: e.withCtx(() => [
+                  e.withDirectives(e.createVNode(c, {
+                    type: "tertiary-no-background",
+                    class: "prev",
+                    "aria-label": o.prevButtonAriaLabel,
+                    onClick: o.previous
+                  }, {
+                    icon: e.withCtx(() => [
+                      e.createVNode(_, { size: 40 })
+                    ]),
+                    _: 1
+                  }, 8, ["aria-label", "onClick"]), [
+                    [e.vShow, t.hasPrevious]
+                  ])
+                ]),
+                _: 1
+              }),
+              e.createElementVNode("div", {
+                id: "modal-description-" + n.randId,
+                class: "modal-container"
+              }, [
+                t.canClose && t.closeButtonContained ? (e.openBlock(), e.createBlock(c, {
+                  key: 0,
+                  type: "tertiary",
+                  class: "modal-container__close",
+                  "aria-label": o.closeButtonAriaLabel,
+                  onClick: o.close
+                }, {
+                  icon: e.withCtx(() => [
+                    e.createVNode(h, { size: 20 })
+                  ]),
+                  _: 1
+                }, 8, ["aria-label", "onClick"])) : e.createCommentVNode("", !0),
+                e.createElementVNode("div", re, [
+                  e.renderSlot(i.$slots, "default", {}, void 0, !0)
+                ])
+              ], 8, le),
+              e.createVNode(e.Transition, {
+                name: "fade-visibility",
+                appear: ""
+              }, {
+                default: e.withCtx(() => [
+                  e.withDirectives(e.createVNode(c, {
+                    type: "tertiary-no-background",
+                    class: "next",
+                    "aria-label": o.nextButtonAriaLabel,
+                    onClick: o.next
+                  }, {
+                    icon: e.withCtx(() => [
+                      e.createVNode(w, { size: 40 })
+                    ]),
+                    _: 1
+                  }, 8, ["aria-label", "onClick"]), [
+                    [e.vShow, t.hasNext]
+                  ])
+                ]),
+                _: 1
+              })
+            ], 34), [
+              [e.vShow, o.showModal]
+            ])
+          ]),
+          _: 3
+        }, 8, ["name"])
+      ], 14, $), [
+        [e.vShow, o.showModal]
+      ])
+    ]),
+    _: 3
+  }, 8, ["onAfterEnter", "onBeforeLeave"]);
+}
+const f = /* @__PURE__ */ d._export_sfc(X, [["render", ce], ["__scopeId", "data-v-b0a83a26"]]);
 /**
  * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
  *
@@ -500,5 +684,5 @@ const c = E.exports;
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-u.ScopeComponent(c);
-module.exports = c;
+g.ScopeComponent(f);
+module.exports = f;