@nextcloud/vue 8.11.1 → 8.11.3

package/dist/Components/NcModal.mjs

@@ -1,18 +1,18 @@
-import '../assets/NcModal-CwgrmxSg.css';
-import { S as c } from "../chunks/ScopeComponent-BZYPT7rR.mjs";
-import { g as r } from "../chunks/focusTrap-Be9GEB5C.mjs";
-import { r as u, D as d, E as p, a as i } from "../chunks/_l10n-BZu8wI2q.mjs";
-import { G as h } from "../chunks/GenRandomId-BW3iYFf9.mjs";
-import { N as f } from "../chunks/NcActions-B1Ue3gj8.mjs";
-import m from "./NcButton.mjs";
+import '../assets/NcModal-Cof88czY.css';
+import { S as ScopeComponent } from "../chunks/ScopeComponent-B9RptB1A.mjs";
+import { g as getTrapStack } from "../chunks/focusTrap-hWDNhn4t.mjs";
+import { r as register, D as t30, E as t16, a as t } from "../chunks/_l10n-DwEsZ6zb.mjs";
+import { G as GenRandomId } from "../chunks/GenRandomId-CXkjMlAT.mjs";
+import { N as NcActions } from "../chunks/NcActions-CZe78ai2.mjs";
+import NcButton from "./NcButton.mjs";
 import "../Directives/Tooltip.mjs";
-import { n as l } from "../chunks/_plugin-vue2_normalizer-Bj5bLKV4.mjs";
-import { C as y } from "../chunks/ChevronRight-DL3e8bjj.mjs";
-import { C as _ } from "../chunks/Close-BtO5TPBO.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 { n as normalizeComponent } from "../chunks/_plugin-vue2_normalizer-D637Qkok.mjs";
+import { C as ChevronRight } from "../chunks/ChevronRight-BNa7yMja.mjs";
+import { C as Close } from "../chunks/Close-1V1F2F-M.mjs";
+import { createFocusTrap } from "focus-trap";
+import { useSwipe } from "@vueuse/core";
+import { VTooltip } from "floating-vue";
+register(t16, t30);
 /**
  * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
  *
@@ -34,21 +34,39 @@ 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 timer(callback, delay) {
+  let id;
+  let started;
+  let remaining = delay;
+  let running;
   this.start = function() {
-    n = !0, a = /* @__PURE__ */ new Date(), t = setTimeout(s, o);
-  }, this.pause = function() {
-    n = !1, clearTimeout(t), o -= /* @__PURE__ */ new Date() - a;
-  }, this.clear = function() {
-    n = !1, clearTimeout(t), o = 0;
-  }, this.getTimeLeft = function() {
-    return n && (this.pause(), this.start()), o;
-  }, this.getStateRunning = function() {
-    return n;
-  }, this.start();
+    running = true;
+    started = /* @__PURE__ */ new Date();
+    id = setTimeout(callback, remaining);
+  };
+  this.pause = function() {
+    running = false;
+    clearTimeout(id);
+    remaining -= /* @__PURE__ */ new Date() - started;
+  };
+  this.clear = function() {
+    running = false;
+    clearTimeout(id);
+    remaining = 0;
+  };
+  this.getTimeLeft = function() {
+    if (running) {
+      this.pause();
+      this.start();
+    }
+    return remaining;
+  };
+  this.getStateRunning = function() {
+    return running;
+  };
+  this.start();
 }
-const S = {
+const _sfc_main$3 = {
   name: "ChevronLeftIcon",
   emits: ["click"],
   props: {
@@ -65,22 +83,25 @@ const S = {
     }
   }
 };
-var b = 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(
-  S,
-  b,
-  k,
-  !1,
+var _sfc_render$3 = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("span", _vm._b({ staticClass: "material-design-icon chevron-left-icon", attrs: { "aria-hidden": _vm.title ? null : true, "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
+    return _vm.$emit("click", $event);
+  } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
+};
+var _sfc_staticRenderFns$3 = [];
+var __component__$3 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$3,
+  _sfc_render$3,
+  _sfc_staticRenderFns$3,
+  false,
   null,
   null,
   null,
   null
 );
-const x = T.exports, N = {
+const ChevronLeft = __component__$3.exports;
+const _sfc_main$2 = {
   name: "PauseIcon",
   emits: ["click"],
   props: {
@@ -97,22 +118,25 @@ const x = T.exports, N = {
     }
   }
 };
-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,
+var _sfc_render$2 = function render2() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("span", _vm._b({ staticClass: "material-design-icon pause-icon", attrs: { "aria-hidden": _vm.title ? null : true, "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
+    return _vm.$emit("click", $event);
+  } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M14,19H18V5H14M6,19H10V5H6V19Z" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
+};
+var _sfc_staticRenderFns$2 = [];
+var __component__$2 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$2,
+  _sfc_render$2,
+  _sfc_staticRenderFns$2,
+  false,
   null,
   null,
   null,
   null
 );
-const z = P.exports, L = {
+const Pause = __component__$2.exports;
+const _sfc_main$1 = {
   name: "PlayIcon",
   emits: ["click"],
   props: {
@@ -129,34 +153,37 @@ const z = P.exports, L = {
     }
   }
 };
-var M = 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()])])]);
-}, F = [], A = /* @__PURE__ */ l(
-  L,
-  M,
-  F,
-  !1,
+var _sfc_render$1 = function render3() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("span", _vm._b({ staticClass: "material-design-icon play-icon", attrs: { "aria-hidden": _vm.title ? null : true, "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
+    return _vm.$emit("click", $event);
+  } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M8,5.14V19.14L19,12.14L8,5.14Z" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
+};
+var _sfc_staticRenderFns$1 = [];
+var __component__$1 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$1,
+  _sfc_render$1,
+  _sfc_staticRenderFns$1,
+  false,
   null,
   null,
   null,
   null
 );
-const E = A.exports, R = {
+const Play = __component__$1.exports;
+const _sfc_main = {
   name: "NcModal",
   components: {
-    NcActions: f,
-    ChevronLeft: x,
-    ChevronRight: y,
-    Close: _,
-    Pause: z,
-    Play: E,
-    NcButton: m
+    NcActions,
+    ChevronLeft,
+    ChevronRight,
+    Close,
+    Pause,
+    Play,
+    NcButton
   },
   directives: {
-    tooltip: g
+    tooltip: VTooltip
   },
   props: {
     /**
@@ -171,28 +198,28 @@ const E = A.exports, R = {
      */
     hasPrevious: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Declare if a next slide is available
      */
     hasNext: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Declare if hiding the modal should be animated
      */
     outTransition: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Declare if the slideshow functionality should be enabled
      */
     enableSlideshow: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Declare the slide interval
@@ -206,18 +233,18 @@ const E = A.exports, R = {
      */
     slideshowPaused: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Enable swipe between slides
      */
     enableSwipe: {
       type: Boolean,
-      default: !0
+      default: true
     },
     spreadNavigation: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Defines the modal size.
@@ -228,14 +255,16 @@ const E = A.exports, R = {
     size: {
       type: String,
       default: "normal",
-      validator: (s) => ["small", "normal", "large", "full"].includes(s)
+      validator: (size) => {
+        return ["small", "normal", "large", "full"].includes(size);
+      }
     },
     /**
      * Declare if the modal can be closed
      */
     canClose: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Close the modal if the user clicked outside of the modal
@@ -243,7 +272,7 @@ const E = A.exports, R = {
      */
     closeOnClickOutside: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Makes the modal backdrop black if true
@@ -251,7 +280,7 @@ const E = A.exports, R = {
      */
     dark: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Selector for the modal container, pass `null` to prevent automatic container mounting
@@ -266,7 +295,7 @@ const E = A.exports, R = {
      */
     closeButtonContained: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Additional elements to add to the focus trap
@@ -307,12 +336,12 @@ const E = A.exports, R = {
   data() {
     return {
       mc: null,
-      playing: !1,
+      playing: false,
       slideshowTimeout: null,
       iconSize: 24,
       focusTrap: null,
-      randId: h(),
-      internalShow: !0
+      randId: GenRandomId(),
+      internalShow: true
     };
   },
   computed: {
@@ -323,7 +352,7 @@ const E = A.exports, R = {
       return "modal-".concat(this.outTransition ? "out" : "in");
     },
     playPauseName() {
-      return this.playing ? i("Pause slideshow") : i("Start slideshow");
+      return this.playing ? t("Pause slideshow") : t("Start slideshow");
     },
     cssVariables() {
       return {
@@ -332,13 +361,13 @@ const E = A.exports, R = {
       };
     },
     closeButtonAriaLabel() {
-      return i("Close");
+      return t("Close");
     },
     prevButtonAriaLabel() {
-      return i("Previous");
+      return t("Previous");
     },
     nextButtonAriaLabel() {
-      return i("Next");
+      return t("Next");
     }
   },
   watch: {
@@ -347,13 +376,19 @@ const E = A.exports, R = {
      *
      * @param {boolean} paused is the player paused
      */
-    slideshowPaused(s) {
-      this.slideshowTimeout && (s ? this.slideshowTimeout.pause() : this.slideshowTimeout.start());
+    slideshowPaused(paused) {
+      if (this.slideshowTimeout) {
+        if (paused) {
+          this.slideshowTimeout.pause();
+        } else {
+          this.slideshowTimeout.start();
+        }
+      }
     },
-    additionalTrapElements(s) {
+    additionalTrapElements(elements) {
       if (this.focusTrap) {
-        const e = this.$refs.mask;
-        this.focusTrap.updateContainerElements([e, ...s]);
+        const contentContainer = this.$refs.mask;
+        this.focusTrap.updateContainerElements([contentContainer, ...elements]);
       }
     }
   },
@@ -361,29 +396,54 @@ const E = A.exports, R = {
     window.addEventListener("keydown", this.handleKeydown);
   },
   beforeDestroy() {
-    window.removeEventListener("keydown", this.handleKeydown), this.mc.stop();
+    window.removeEventListener("keydown", this.handleKeydown);
+    this.mc.stop();
   },
   mounted() {
-    this.useFocusTrap(), this.mc = v(this.$refs.mask, {
+    this.useFocusTrap();
+    this.mc = 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));
+    });
+    if (this.container) {
+      if (this.container === "body") {
+        document.body.insertBefore(this.$el, document.body.lastChild);
+      } else {
+        const container = document.querySelector(this.container);
+        container.appendChild(this.$el);
+      }
+    }
   },
   destroyed() {
-    this.clearFocusTrap(), this.$el.remove();
+    this.clearFocusTrap();
+    this.$el.remove();
   },
   methods: {
-    t: i,
+    t,
     // Events emitters
-    previous(s) {
-      this.hasPrevious && (s && this.resetSlideshow(), this.$emit("previous", s));
+    previous(event) {
+      if (this.hasPrevious) {
+        if (event) {
+          this.resetSlideshow();
+        }
+        this.$emit("previous", event);
+      }
     },
-    next(s) {
-      this.hasNext && (s && this.resetSlideshow(), this.$emit("next", s));
+    next(event) {
+      if (this.hasNext) {
+        if (event) {
+          this.resetSlideshow();
+        }
+        this.$emit("next", event);
+      }
     },
-    close(s) {
-      this.canClose && (this.internalShow = !1, this.$emit("update:show", !1), setTimeout(() => {
-        this.$emit("close", s);
-      }, 300));
+    close(data) {
+      if (this.canClose) {
+        this.internalShow = false;
+        this.$emit("update:show", false);
+        setTimeout(() => {
+          this.$emit("close", data);
+        }, 300);
+      }
     },
     /**
      * Handle click on modal wrapper
@@ -391,23 +451,32 @@ const E = A.exports, R = {
      *
      * @param {MouseEvent} event The click event
      */
-    handleClickModalWrapper(s) {
-      this.closeOnClickOutside && this.close(s);
+    handleClickModalWrapper(event) {
+      if (this.closeOnClickOutside) {
+        this.close(event);
+      }
     },
     /**
      * @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(event) {
+      if (event.key === "Escape") {
+        const trapStack = getTrapStack();
+        if (trapStack.length > 0 && trapStack[trapStack.length - 1] !== this.focusTrap) {
+          return;
+        }
+        return this.close(event);
       }
-      const e = {
+      const arrowHandlers = {
         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 (arrowHandlers[event.key]) {
+        if (document.activeElement && !this.$el.contains(document.activeElement)) {
+          return;
+        }
+        return arrowHandlers[event.key](event);
+      }
     },
     /**
      * handle the swipe event
@@ -415,20 +484,33 @@ 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(e, direction) {
+      if (this.enableSwipe) {
+        if (direction === "left") {
+          this.next(e);
+        } else if (direction === "right") {
+          this.previous(e);
+        }
+      }
     },
     /**
      * Toggle the slideshow state
      */
     togglePlayPause() {
-      this.playing = !this.playing, this.playing ? this.handleSlideshow() : this.clearSlideshowTimeout();
+      this.playing = !this.playing;
+      if (this.playing) {
+        this.handleSlideshow();
+      } else {
+        this.clearSlideshowTimeout();
+      }
     },
     /**
      * Reset the slideshow timer and keep going if it was on
      */
     resetSlideshow() {
-      this.playing = !this.playing, this.clearSlideshowTimeout(), this.$nextTick(function() {
+      this.playing = !this.playing;
+      this.clearSlideshowTimeout();
+      this.$nextTick(function() {
         this.togglePlayPause();
       });
     },
@@ -436,68 +518,87 @@ const E = A.exports, R = {
      * Handle the slideshow timer and next event
      */
     handleSlideshow() {
-      this.playing = !0, this.hasNext ? this.slideshowTimeout = new C(() => {
-        this.next(), this.handleSlideshow();
-      }, this.slideshowDelay) : (this.playing = !1, this.clearSlideshowTimeout());
+      this.playing = true;
+      if (this.hasNext) {
+        this.slideshowTimeout = new timer(() => {
+          this.next();
+          this.handleSlideshow();
+        }, this.slideshowDelay);
+      } else {
+        this.playing = false;
+        this.clearSlideshowTimeout();
+      }
     },
     /**
      * Clear slideshowTimeout if ongoing
      */
     clearSlideshowTimeout() {
-      this.slideshowTimeout && this.slideshowTimeout.clear();
+      if (this.slideshowTimeout) {
+        this.slideshowTimeout.clear();
+      }
     },
     /**
      * Add focus trap for accessibility.
      */
     async useFocusTrap() {
-      if (!this.showModal || this.focusTrap)
+      if (!this.showModal || this.focusTrap) {
         return;
-      const s = this.$refs.mask;
+      }
+      const contentContainer = this.$refs.mask;
       await this.$nextTick();
-      const e = {
-        allowOutsideClick: !0,
-        fallbackFocus: s,
-        trapStack: r(),
+      const options = {
+        allowOutsideClick: true,
+        fallbackFocus: contentContainer,
+        trapStack: 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: false,
         setReturnFocus: this.setReturnFocus
       };
-      this.focusTrap = w([s, ...this.additionalTrapElements], e), this.focusTrap.activate();
+      this.focusTrap = createFocusTrap([contentContainer, ...this.additionalTrapElements], options);
+      this.focusTrap.activate();
     },
     clearFocusTrap() {
-      var s;
-      this.focusTrap && ((s = this.focusTrap) == null || s.deactivate(), this.focusTrap = null);
+      var _a;
+      if (!this.focusTrap) {
+        return;
+      }
+      (_a = this.focusTrap) == null ? void 0 : _a.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--".concat(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)]);
-}, D = [], V = /* @__PURE__ */ l(
-  R,
-  I,
-  D,
-  !1,
+var _sfc_render = function render4() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("transition", { attrs: { "name": "fade", "appear": "" }, on: { "after-enter": _vm.useFocusTrap, "before-leave": _vm.clearFocusTrap } }, [_c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.showModal, expression: "showModal" }], ref: "mask", staticClass: "modal-mask", class: { "modal-mask--dark": _vm.dark || !_vm.closeButtonContained || _vm.hasPrevious || _vm.hasNext }, style: _vm.cssVariables, attrs: { "role": "dialog", "aria-modal": "true", "aria-labelledby": "modal-name-" + _vm.randId, "aria-describedby": "modal-description-" + _vm.randId, "tabindex": "-1" } }, [_c("transition", { attrs: { "name": "fade-visibility", "appear": "" } }, [_c("div", { staticClass: "modal-header" }, [_vm.name.trim() !== "" ? _c("h2", { staticClass: "modal-name", attrs: { "id": "modal-name-" + _vm.randId } }, [_vm._v(" " + _vm._s(_vm.name) + " ")]) : _vm._e(), _c("div", { staticClass: "icons-menu" }, [_vm.hasNext && _vm.enableSlideshow ? _c("button", { directives: [{ name: "tooltip", rawName: "v-tooltip.auto", value: _vm.playPauseName, expression: "playPauseName", modifiers: { "auto": true } }], staticClass: "play-pause-icons", class: { "play-pause-icons--paused": _vm.slideshowPaused }, attrs: { "type": "button" }, on: { "click": _vm.togglePlayPause } }, [!_vm.playing ? _c("Play", { staticClass: "play-pause-icons__play", attrs: { "size": _vm.iconSize } }) : _c("Pause", { staticClass: "play-pause-icons__pause", attrs: { "size": _vm.iconSize } }), _c("span", { staticClass: "hidden-visually" }, [_vm._v(" " + _vm._s(_vm.playPauseName) + " ")]), _vm.playing ? _c("svg", { staticClass: "progress-ring", attrs: { "height": "50", "width": "50" } }, [_c("circle", { staticClass: "progress-ring__circle", attrs: { "stroke": "white", "stroke-width": "2", "fill": "transparent", "r": "15", "cx": "25", "cy": "25" } })]) : _vm._e()], 1) : _vm._e(), _c("NcActions", { staticClass: "header-actions", attrs: { "inline": _vm.inlineActions } }, [_vm._t("actions")], 2), _vm.canClose && !_vm.closeButtonContained ? _c("NcButton", { staticClass: "header-close", attrs: { "aria-label": _vm.closeButtonAriaLabel, "type": "tertiary" }, on: { "click": _vm.close }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("Close", { attrs: { "size": _vm.iconSize } })];
+  }, proxy: true }], null, false, 1841713362) }) : _vm._e()], 1)])]), _c("transition", { attrs: { "name": _vm.modalTransitionName, "appear": "" } }, [_c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.showModal, expression: "showModal" }], staticClass: "modal-wrapper", class: [
+    "modal-wrapper--".concat(_vm.size),
+    { "modal-wrapper--spread-navigation": _vm.spreadNavigation }
+  ], on: { "mousedown": function($event) {
+    if ($event.target !== $event.currentTarget)
+      return null;
+    return _vm.handleClickModalWrapper.apply(null, arguments);
+  } } }, [_c("transition", { attrs: { "name": "fade-visibility", "appear": "" } }, [_c("NcButton", { directives: [{ name: "show", rawName: "v-show", value: _vm.hasPrevious, expression: "hasPrevious" }], staticClass: "prev", attrs: { "type": "tertiary-no-background", "aria-label": _vm.prevButtonAriaLabel }, on: { "click": _vm.previous }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("ChevronLeft", { attrs: { "size": 40 } })];
+  }, proxy: true }]) })], 1), _c("div", { staticClass: "modal-container", attrs: { "id": "modal-description-" + _vm.randId } }, [_vm.canClose && _vm.closeButtonContained ? _c("NcButton", { staticClass: "modal-container__close", attrs: { "type": "tertiary", "aria-label": _vm.closeButtonAriaLabel }, on: { "click": _vm.close }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("Close", { attrs: { "size": 20 } })];
+  }, proxy: true }], null, false, 2121748766) }) : _vm._e(), _c("div", { staticClass: "modal-container__content" }, [_vm._t("default")], 2)], 1), _c("transition", { attrs: { "name": "fade-visibility", "appear": "" } }, [_c("NcButton", { directives: [{ name: "show", rawName: "v-show", value: _vm.hasNext, expression: "hasNext" }], staticClass: "next", attrs: { "type": "tertiary-no-background", "aria-label": _vm.nextButtonAriaLabel }, on: { "click": _vm.next }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("ChevronRight", { attrs: { "size": 40 } })];
+  }, proxy: true }]) })], 1)], 1)])], 1)]);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
   null,
   "1ea9d450",
   null,
   null
 );
-const H = V.exports;
+const NcModal = __component__.exports;
 /**
  * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
  *
@@ -519,7 +620,7 @@ const H = V.exports;
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-c(H);
+ScopeComponent(NcModal);
 export {
-  H as default
+  NcModal as default
 };