@nextcloud/vue 8.6.0 → 9.0.0-alpha.1

package/dist/Components/NcModal.mjs

@@ -1,18 +1,19 @@
-import '../assets/NcModal-UZh031V1.css';
-import { S as c } from "../chunks/ScopeComponent-3zN8-DXa.mjs";
-import { g as r } from "../chunks/focusTrap-Py2bQ9-r.mjs";
-import { r as u, F as d, G as p, a as i } from "../chunks/_l10n--bDJ_Qyj.mjs";
-import { G as h } from "../chunks/GenRandomId-VodkdWbp.mjs";
-import { N as f } from "../chunks/NcActions-bAnBpPrc.mjs";
-import m from "./NcButton.mjs";
+import "../assets/NcModal-lgvjJTYz.css";
+import { S as M } from "../chunks/ScopeComponent-mG7CSpxl.mjs";
+import { g as B } from "../chunks/focusTrap-Py2bQ9-r.mjs";
+import { r as E, G as I, H as F, a as f } from "../chunks/_l10n-uuAvfQgY.mjs";
+import { G as V } from "../chunks/GenRandomId-VodkdWbp.mjs";
+import { N as D } from "../chunks/NcActions-76CtOBCq.mjs";
+import { N as R } from "../chunks/NcButton-YOXv3gFY.mjs";
 import "../Directives/Tooltip.mjs";
-import { n as l } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.mjs";
-import { C as y } from "../chunks/ChevronRight-9owhU_17.mjs";
-import { C as _ } from "../chunks/Close-QtH6_3PP.mjs";
-import { createFocusTrap as w } from "focus-trap";
-import { useSwipe as v } from "@vueuse/core";
-import { VTooltip as g } from "floating-vue";
-u(p, d);
+import { openBlock as l, createElementBlock as o, mergeProps as S, createElementVNode as r, toDisplayString as w, createCommentVNode as d, resolveComponent as h, resolveDirective as H, createBlock as p, Transition as y, withCtx as c, withDirectives as _, normalizeClass as b, normalizeStyle as O, createVNode as n, renderSlot as N, withModifiers as G, vShow as k, pushScopeId as K, popScopeId as W } from "vue";
+import { _ as v } from "../chunks/_plugin-vue_export-helper-hUChTQA_.mjs";
+import { C as Z } from "../chunks/ChevronRight-gF2cX9Cu.mjs";
+import { C as q } from "../chunks/Close-hKJ11hky.mjs";
+import { createFocusTrap as U } from "focus-trap";
+import { useSwipe as j } from "@vueuse/core";
+import { VTooltip as J } from "floating-vue";
+E(F, I);
 /**
  * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
  *
@@ -34,21 +35,21 @@ u(p, d);
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-function C(s, e) {
-  let t, a, o = e, n;
+function Q(t, a) {
+  let e, m, s = a, i;
   this.start = function() {
-    n = !0, a = /* @__PURE__ */ new Date(), t = setTimeout(s, o);
+    i = !0, m = /* @__PURE__ */ new Date(), e = setTimeout(t, s);
   }, this.pause = function() {
-    n = !1, clearTimeout(t), o -= /* @__PURE__ */ new Date() - a;
+    i = !1, clearTimeout(e), s -= /* @__PURE__ */ new Date() - m;
   }, this.clear = function() {
-    n = !1, clearTimeout(t), o = 0;
+    i = !1, clearTimeout(e), s = 0;
   }, this.getTimeLeft = function() {
-    return n && (this.pause(), this.start()), o;
+    return i && (this.pause(), this.start()), s;
   }, this.getStateRunning = function() {
-    return n;
+    return i;
   }, this.start();
 }
-const b = {
+const X = {
   name: "ChevronLeftIcon",
   emits: ["click"],
   props: {
@@ -64,23 +65,29 @@ const b = {
       default: 24
     }
   }
-};
-var S = 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 ? null : !0, "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()])])]);
-}, k = [], T = /* @__PURE__ */ l(
-  b,
-  S,
-  k,
-  !1,
-  null,
-  null,
-  null,
-  null
-);
-const x = T.exports, N = {
+}, Y = ["aria-hidden", "aria-label"], $ = ["fill", "width", "height"], ee = { d: "M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" }, te = { key: 0 };
+function ie(t, a, e, m, s, i) {
+  return l(), o("span", S(t.$attrs, {
+    "aria-hidden": e.title ? null : !0,
+    "aria-label": e.title,
+    class: "material-design-icon chevron-left-icon",
+    role: "img",
+    onClick: a[0] || (a[0] = (u) => t.$emit("click", u))
+  }), [
+    (l(), o("svg", {
+      fill: e.fillColor,
+      class: "material-design-icon__svg",
+      width: e.size,
+      height: e.size,
+      viewBox: "0 0 24 24"
+    }, [
+      r("path", ee, [
+        e.title ? (l(), o("title", te, w(e.title), 1)) : d("", !0)
+      ])
+    ], 8, $))
+  ], 16, Y);
+}
+const ae = /* @__PURE__ */ v(X, [["render", ie]]), se = {
   name: "PauseIcon",
   emits: ["click"],
   props: {
@@ -96,23 +103,29 @@ const x = T.exports, N = {
       default: 24
     }
   }
-};
-var B = function() {
-  var e = this, t = e._self._c;
-  return t("span", e._b({ staticClass: "material-design-icon pause-icon", attrs: { "aria-hidden": e.title ? null : !0, "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()])])]);
-}, $ = [], P = /* @__PURE__ */ l(
-  N,
-  B,
-  $,
-  !1,
-  null,
-  null,
-  null,
-  null
-);
-const z = P.exports, L = {
+}, le = ["aria-hidden", "aria-label"], oe = ["fill", "width", "height"], ne = { d: "M14,19H18V5H14M6,19H10V5H6V19Z" }, re = { key: 0 };
+function ce(t, a, e, m, s, i) {
+  return l(), o("span", S(t.$attrs, {
+    "aria-hidden": e.title ? null : !0,
+    "aria-label": e.title,
+    class: "material-design-icon pause-icon",
+    role: "img",
+    onClick: a[0] || (a[0] = (u) => t.$emit("click", u))
+  }), [
+    (l(), o("svg", {
+      fill: e.fillColor,
+      class: "material-design-icon__svg",
+      width: e.size,
+      height: e.size,
+      viewBox: "0 0 24 24"
+    }, [
+      r("path", ne, [
+        e.title ? (l(), o("title", re, w(e.title), 1)) : d("", !0)
+      ])
+    ], 8, oe))
+  ], 16, le);
+}
+const de = /* @__PURE__ */ v(se, [["render", ce]]), ue = {
   name: "PlayIcon",
   emits: ["click"],
   props: {
@@ -128,35 +141,41 @@ const z = P.exports, L = {
       default: 24
     }
   }
-};
-var F = function() {
-  var e = this, t = e._self._c;
-  return t("span", e._b({ staticClass: "material-design-icon play-icon", attrs: { "aria-hidden": e.title ? null : !0, "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()])])]);
-}, M = [], A = /* @__PURE__ */ l(
-  L,
-  F,
-  M,
-  !1,
-  null,
-  null,
-  null,
-  null
-);
-const E = A.exports, R = {
+}, he = ["aria-hidden", "aria-label"], me = ["fill", "width", "height"], fe = { d: "M8,5.14V19.14L19,12.14L8,5.14Z" }, pe = { key: 0 };
+function ye(t, a, e, m, s, i) {
+  return l(), o("span", S(t.$attrs, {
+    "aria-hidden": e.title ? null : !0,
+    "aria-label": e.title,
+    class: "material-design-icon play-icon",
+    role: "img",
+    onClick: a[0] || (a[0] = (u) => t.$emit("click", u))
+  }), [
+    (l(), o("svg", {
+      fill: e.fillColor,
+      class: "material-design-icon__svg",
+      width: e.size,
+      height: e.size,
+      viewBox: "0 0 24 24"
+    }, [
+      r("path", fe, [
+        e.title ? (l(), o("title", pe, w(e.title), 1)) : d("", !0)
+      ])
+    ], 8, me))
+  ], 16, he);
+}
+const _e = /* @__PURE__ */ v(ue, [["render", ye]]), we = {
   name: "NcModal",
   components: {
-    NcActions: f,
-    ChevronLeft: x,
-    ChevronRight: y,
-    Close: _,
-    Pause: z,
-    Play: E,
-    NcButton: m
+    NcActions: D,
+    ChevronLeft: ae,
+    ChevronRight: Z,
+    Close: q,
+    Pause: de,
+    Play: _e,
+    NcButton: R
   },
   directives: {
-    tooltip: g
+    tooltip: J
   },
   props: {
     /**
@@ -228,7 +247,7 @@ const E = A.exports, R = {
     size: {
       type: String,
       default: "normal",
-      validator: (s) => ["small", "normal", "large", "full"].includes(s)
+      validator: (t) => ["small", "normal", "large", "full"].includes(t)
     },
     /**
      * Declare if the modal can be closed
@@ -311,7 +330,7 @@ const E = A.exports, R = {
       slideshowTimeout: null,
       iconSize: 24,
       focusTrap: null,
-      randId: h(),
+      randId: V(),
       internalShow: !0
     };
   },
@@ -320,10 +339,10 @@ const E = A.exports, R = {
       return this.show === void 0 ? this.internalShow : this.show;
     },
     modalTransitionName() {
-      return `modal-${this.outTransition ? "out" : "in"}`;
+      return "modal-".concat(this.outTransition ? "out" : "in");
     },
     playPauseName() {
-      return this.playing ? i("Pause slideshow") : i("Start slideshow");
+      return this.playing ? f("Pause slideshow") : f("Start slideshow");
     },
     cssVariables() {
       return {
@@ -332,13 +351,13 @@ const E = A.exports, R = {
       };
     },
     closeButtonAriaLabel() {
-      return i("Close");
+      return f("Close");
     },
     prevButtonAriaLabel() {
-      return i("Previous");
+      return f("Previous");
     },
     nextButtonAriaLabel() {
-      return i("Next");
+      return f("Next");
     }
   },
   watch: {
@@ -347,42 +366,42 @@ const E = A.exports, R = {
      *
      * @param {boolean} paused is the player paused
      */
-    slideshowPaused(s) {
-      this.slideshowTimeout && (s ? this.slideshowTimeout.pause() : this.slideshowTimeout.start());
+    slideshowPaused(t) {
+      this.slideshowTimeout && (t ? this.slideshowTimeout.pause() : this.slideshowTimeout.start());
     },
-    additionalTrapElements(s) {
+    additionalTrapElements(t) {
       if (this.focusTrap) {
-        const e = this.$refs.mask;
-        this.focusTrap.updateContainerElements([e, ...s]);
+        const a = this.$refs.mask;
+        this.focusTrap.updateContainerElements([a, ...t]);
       }
     }
   },
   beforeMount() {
     window.addEventListener("keydown", this.handleKeydown);
   },
-  beforeDestroy() {
+  beforeUnmount() {
     window.removeEventListener("keydown", this.handleKeydown), this.mc.stop();
   },
   mounted() {
-    this.useFocusTrap(), this.mc = v(this.$refs.mask, {
+    this.useFocusTrap(), this.mc = j(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: f,
     // Events emitters
-    previous(s) {
-      this.hasPrevious && (s && this.resetSlideshow(), this.$emit("previous", s));
+    previous(t) {
+      this.hasPrevious && (t && this.resetSlideshow(), this.$emit("previous", t));
     },
-    next(s) {
-      this.hasNext && (s && this.resetSlideshow(), this.$emit("next", s));
+    next(t) {
+      this.hasNext && (t && this.resetSlideshow(), this.$emit("next", t));
     },
-    close(s) {
+    close(t) {
       this.canClose && (this.internalShow = !1, this.$emit("update:show", !1), setTimeout(() => {
-        this.$emit("close", s);
+        this.$emit("close", t);
       }, 300));
     },
     /**
@@ -391,23 +410,23 @@ const E = A.exports, R = {
      *
      * @param {MouseEvent} event The click event
      */
-    handleClickModalWrapper(s) {
-      this.closeOnClickOutside && this.close(s);
+    handleClickModalWrapper(t) {
+      this.closeOnClickOutside && this.close(t);
     },
     /**
      * @param {KeyboardEvent} event - keyboard event
      */
-    handleKeydown(s) {
-      if (s.key === "Escape") {
-        const t = r();
-        return t.length > 0 && t[t.length - 1] !== this.focusTrap ? void 0 : this.close(s);
+    handleKeydown(t) {
+      if (t.key === "Escape") {
+        const e = B();
+        return e.length > 0 && e[e.length - 1] !== this.focusTrap ? void 0 : this.close(t);
       }
-      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[t.key])
+        return document.activeElement && !this.$el.contains(document.activeElement) ? void 0 : a[t.key](t);
     },
     /**
      * handle the swipe event
@@ -415,8 +434,8 @@ const E = A.exports, R = {
      * @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(t, a) {
+      this.enableSwipe && (a === "left" ? this.next(t) : a === "right" && this.previous(t));
     },
     /**
      * Toggle the slideshow state
@@ -436,7 +455,7 @@ const E = A.exports, R = {
      * Handle the slideshow timer and next event
      */
     handleSlideshow() {
-      this.playing = !0, this.hasNext ? this.slideshowTimeout = new C(() => {
+      this.playing = !0, this.hasNext ? this.slideshowTimeout = new Q(() => {
         this.next(), this.handleSlideshow();
       }, this.slideshowDelay) : (this.playing = !1, this.clearSlideshowTimeout());
     },
@@ -452,51 +471,210 @@ const E = A.exports, R = {
     async useFocusTrap() {
       if (!this.showModal || this.focusTrap)
         return;
-      const s = this.$refs.mask;
+      const t = this.$refs.mask;
       await this.$nextTick();
-      const e = {
+      const a = {
         allowOutsideClick: !0,
-        fallbackFocus: s,
-        trapStack: r(),
+        fallbackFocus: t,
+        trapStack: B(),
         // 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,
         setReturnFocus: this.setReturnFocus
       };
-      this.focusTrap = w([s, ...this.additionalTrapElements], e), this.focusTrap.activate();
+      this.focusTrap = U([t, ...this.additionalTrapElements], a), this.focusTrap.activate();
     },
     clearFocusTrap() {
-      this.focusTrap && (this.focusTrap?.deactivate(), this.focusTrap = null);
+      var t;
+      this.focusTrap && ((t = this.focusTrap) == null || t.deactivate(), this.focusTrap = null);
     }
   }
-};
-var I = 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)]);
-}, V = [], D = /* @__PURE__ */ l(
-  R,
-  I,
-  V,
-  !1,
-  null,
-  "bbeb5a25",
-  null,
-  null
-);
-const H = D.exports;
+}, ge = (t) => (K("data-v-c512267c"), t = t(), W(), t), ke = ["aria-labelledby", "aria-describedby"], ve = { class: "modal-header" }, Ce = ["id"], be = { class: "icons-menu" }, Se = { class: "hidden-visually" }, Te = {
+  key: 2,
+  class: "progress-ring",
+  height: "50",
+  width: "50"
+}, Be = /* @__PURE__ */ ge(() => /* @__PURE__ */ r("circle", {
+  class: "progress-ring__circle",
+  stroke: "white",
+  "stroke-width": "2",
+  fill: "transparent",
+  r: "15",
+  cx: "25",
+  cy: "25"
+}, null, -1)), Ne = [
+  Be
+], Pe = ["id"], ze = { class: "modal-container__content" };
+function Le(t, a, e, m, s, i) {
+  const u = h("Play"), P = h("Pause"), z = h("NcActions"), T = h("Close"), g = h("NcButton"), L = h("ChevronLeft"), x = h("ChevronRight"), A = H("tooltip");
+  return l(), p(y, {
+    name: "fade",
+    appear: "",
+    onAfterEnter: i.useFocusTrap,
+    onBeforeLeave: i.clearFocusTrap
+  }, {
+    default: c(() => [
+      _(r("div", {
+        ref: "mask",
+        class: b(["modal-mask", { "modal-mask--dark": e.dark || !e.closeButtonContained || e.hasPrevious || e.hasNext }]),
+        style: O(i.cssVariables),
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": "modal-name-" + s.randId,
+        "aria-describedby": "modal-description-" + s.randId,
+        tabindex: "-1"
+      }, [
+        n(y, {
+          name: "fade-visibility",
+          appear: ""
+        }, {
+          default: c(() => [
+            r("div", ve, [
+              e.name.trim() !== "" ? (l(), o("h2", {
+                key: 0,
+                id: "modal-name-" + s.randId,
+                class: "modal-name"
+              }, w(e.name), 9, Ce)) : d("", !0),
+              r("div", be, [
+                e.hasNext && e.enableSlideshow ? _((l(), o("button", {
+                  key: 0,
+                  class: b([{ "play-pause-icons--paused": e.slideshowPaused }, "play-pause-icons"]),
+                  type: "button",
+                  onClick: a[0] || (a[0] = (...C) => i.togglePlayPause && i.togglePlayPause(...C))
+                }, [
+                  s.playing ? (l(), p(P, {
+                    key: 1,
+                    size: s.iconSize,
+                    class: "play-pause-icons__pause"
+                  }, null, 8, ["size"])) : (l(), p(u, {
+                    key: 0,
+                    size: s.iconSize,
+                    class: "play-pause-icons__play"
+                  }, null, 8, ["size"])),
+                  r("span", Se, w(i.playPauseName), 1),
+                  s.playing ? (l(), o("svg", Te, Ne)) : d("", !0)
+                ], 2)), [
+                  [
+                    A,
+                    i.playPauseName,
+                    void 0,
+                    { auto: !0 }
+                  ]
+                ]) : d("", !0),
+                n(z, {
+                  class: "header-actions",
+                  inline: e.inlineActions
+                }, {
+                  default: c(() => [
+                    N(t.$slots, "actions", {}, void 0, !0)
+                  ]),
+                  _: 3
+                }, 8, ["inline"]),
+                e.canClose && !e.closeButtonContained ? (l(), p(g, {
+                  key: 1,
+                  "aria-label": i.closeButtonAriaLabel,
+                  class: "header-close",
+                  type: "tertiary",
+                  onClick: i.close
+                }, {
+                  icon: c(() => [
+                    n(T, { size: s.iconSize }, null, 8, ["size"])
+                  ]),
+                  _: 1
+                }, 8, ["aria-label", "onClick"])) : d("", !0)
+              ])
+            ])
+          ]),
+          _: 3
+        }),
+        n(y, {
+          name: i.modalTransitionName,
+          appear: ""
+        }, {
+          default: c(() => [
+            _(r("div", {
+              class: b([[
+                "modal-wrapper--".concat(e.size),
+                { "modal-wrapper--spread-navigation": e.spreadNavigation }
+              ], "modal-wrapper"]),
+              onMousedown: a[1] || (a[1] = G((...C) => i.handleClickModalWrapper && i.handleClickModalWrapper(...C), ["self"]))
+            }, [
+              n(y, {
+                name: "fade-visibility",
+                appear: ""
+              }, {
+                default: c(() => [
+                  _(n(g, {
+                    type: "tertiary-no-background",
+                    class: "prev",
+                    "aria-label": i.prevButtonAriaLabel,
+                    onClick: i.previous
+                  }, {
+                    icon: c(() => [
+                      n(L, { size: 40 })
+                    ]),
+                    _: 1
+                  }, 8, ["aria-label", "onClick"]), [
+                    [k, e.hasPrevious]
+                  ])
+                ]),
+                _: 1
+              }),
+              r("div", {
+                id: "modal-description-" + s.randId,
+                class: "modal-container"
+              }, [
+                e.canClose && e.closeButtonContained ? (l(), p(g, {
+                  key: 0,
+                  type: "tertiary",
+                  class: "modal-container__close",
+                  "aria-label": i.closeButtonAriaLabel,
+                  onClick: i.close
+                }, {
+                  icon: c(() => [
+                    n(T, { size: 20 })
+                  ]),
+                  _: 1
+                }, 8, ["aria-label", "onClick"])) : d("", !0),
+                r("div", ze, [
+                  N(t.$slots, "default", {}, void 0, !0)
+                ])
+              ], 8, Pe),
+              n(y, {
+                name: "fade-visibility",
+                appear: ""
+              }, {
+                default: c(() => [
+                  _(n(g, {
+                    type: "tertiary-no-background",
+                    class: "next",
+                    "aria-label": i.nextButtonAriaLabel,
+                    onClick: i.next
+                  }, {
+                    icon: c(() => [
+                      n(x, { size: 40 })
+                    ]),
+                    _: 1
+                  }, 8, ["aria-label", "onClick"]), [
+                    [k, e.hasNext]
+                  ])
+                ]),
+                _: 1
+              })
+            ], 34), [
+              [k, i.showModal]
+            ])
+          ]),
+          _: 3
+        }, 8, ["name"])
+      ], 14, ke), [
+        [k, i.showModal]
+      ])
+    ]),
+    _: 3
+  }, 8, ["onAfterEnter", "onBeforeLeave"]);
+}
+const xe = /* @__PURE__ */ v(we, [["render", Le], ["__scopeId", "data-v-c512267c"]]);
 /**
  * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
  *
@@ -518,7 +696,7 @@ const H = D.exports;
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-c(H);
+M(xe);
 export {
-  H as default
+  xe as default
 };