@nextcloud/vue 8.11.1 → 8.11.3

package/dist/Components/NcModal.cjs

@@ -1,9 +1,19 @@
-require('../assets/NcModal-CwgrmxSg.css');
+require('../assets/NcModal-Cof88czY.css');
 "use strict";
-const u = require("../chunks/ScopeComponent-C0EJf0Ag.cjs"), r = require("../chunks/focusTrap-xauhLvvr.cjs"), i = require("../chunks/_l10n-BVVVUgGU.cjs"), d = require("../chunks/GenRandomId-B2O1GMbH.cjs"), h = require("../chunks/NcActions-X10TnO-4.cjs"), p = require("./NcButton.cjs");
+const ScopeComponent = require("../chunks/ScopeComponent-Cmn9OSZb.cjs");
+const focusTrap = require("../chunks/focusTrap-Dsmd28wG.cjs");
+const _l10n = require("../chunks/_l10n-ftziezFF.cjs");
+const GenRandomId = require("../chunks/GenRandomId-kBCcgMJd.cjs");
+const NcActions = require("../chunks/NcActions-ePQTvWyX.cjs");
+const Components_NcButton = require("./NcButton.cjs");
 require("../Directives/Tooltip.cjs");
-const l = require("../chunks/_plugin-vue2_normalizer-GXKvuwrq.cjs"), f = require("../chunks/ChevronRight-BAJhNawb.cjs"), m = require("../chunks/Close-DBfrdXMw.cjs"), _ = require("focus-trap"), y = require("@vueuse/core"), w = require("floating-vue");
-i.register(i.t16, i.t30);
+const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-DbFIE4_M.cjs");
+const ChevronRight = require("../chunks/ChevronRight-DVw6mR11.cjs");
+const Close = require("../chunks/Close-C2VrgKj3.cjs");
+const focusTrap$1 = require("focus-trap");
+const core = require("@vueuse/core");
+const floatingVue = require("floating-vue");
+_l10n.register(_l10n.t16, _l10n.t30);
 /**
  * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
  *
@@ -25,21 +35,39 @@ i.register(i.t16, i.t30);
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-function v(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 g = {
+const _sfc_main$3 = {
   name: "ChevronLeftIcon",
   emits: ["click"],
   props: {
@@ -56,22 +84,25 @@ const g = {
     }
   }
 };
-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 ? 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()])])]);
-}, S = [], T = /* @__PURE__ */ l.normalizeComponent(
-  g,
-  C,
-  S,
-  !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__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main$3,
+  _sfc_render$3,
+  _sfc_staticRenderFns$3,
+  false,
   null,
   null,
   null,
   null
 );
-const b = T.exports, k = {
+const ChevronLeft = __component__$3.exports;
+const _sfc_main$2 = {
   name: "PauseIcon",
   emits: ["click"],
   props: {
@@ -88,22 +119,25 @@ const b = T.exports, k = {
     }
   }
 };
-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 ? 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()])])]);
-}, N = [], B = /* @__PURE__ */ l.normalizeComponent(
-  k,
-  x,
-  N,
-  !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__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main$2,
+  _sfc_render$2,
+  _sfc_staticRenderFns$2,
+  false,
   null,
   null,
   null,
   null
 );
-const $ = B.exports, z = {
+const Pause = __component__$2.exports;
+const _sfc_main$1 = {
   name: "PlayIcon",
   emits: ["click"],
   props: {
@@ -120,34 +154,37 @@ const $ = B.exports, z = {
     }
   }
 };
-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 ? 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()])])]);
-}, L = [], A = /* @__PURE__ */ l.normalizeComponent(
-  z,
-  P,
-  L,
-  !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__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main$1,
+  _sfc_render$1,
+  _sfc_staticRenderFns$1,
+  false,
   null,
   null,
   null,
   null
 );
-const M = A.exports, F = {
+const Play = __component__$1.exports;
+const _sfc_main = {
   name: "NcModal",
   components: {
-    NcActions: h.NcActions,
-    ChevronLeft: b,
-    ChevronRight: f.ChevronRight,
-    Close: m.Close,
-    Pause: $,
-    Play: M,
-    NcButton: p
+    NcActions: NcActions.NcActions,
+    ChevronLeft,
+    ChevronRight: ChevronRight.ChevronRight,
+    Close: Close.Close,
+    Pause,
+    Play,
+    NcButton: Components_NcButton
   },
   directives: {
-    tooltip: w.VTooltip
+    tooltip: floatingVue.VTooltip
   },
   props: {
     /**
@@ -162,28 +199,28 @@ const M = A.exports, F = {
      */
     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
@@ -197,18 +234,18 @@ const M = A.exports, F = {
      */
     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.
@@ -219,14 +256,16 @@ const M = A.exports, F = {
     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
@@ -234,7 +273,7 @@ const M = A.exports, F = {
      */
     closeOnClickOutside: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Makes the modal backdrop black if true
@@ -242,7 +281,7 @@ const M = A.exports, F = {
      */
     dark: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Selector for the modal container, pass `null` to prevent automatic container mounting
@@ -257,7 +296,7 @@ const M = A.exports, F = {
      */
     closeButtonContained: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Additional elements to add to the focus trap
@@ -298,12 +337,12 @@ const M = A.exports, F = {
   data() {
     return {
       mc: null,
-      playing: !1,
+      playing: false,
       slideshowTimeout: null,
       iconSize: 24,
       focusTrap: null,
-      randId: d.GenRandomId(),
-      internalShow: !0
+      randId: GenRandomId.GenRandomId(),
+      internalShow: true
     };
   },
   computed: {
@@ -314,7 +353,7 @@ const M = A.exports, F = {
       return "modal-".concat(this.outTransition ? "out" : "in");
     },
     playPauseName() {
-      return this.playing ? i.t("Pause slideshow") : i.t("Start slideshow");
+      return this.playing ? _l10n.t("Pause slideshow") : _l10n.t("Start slideshow");
     },
     cssVariables() {
       return {
@@ -323,13 +362,13 @@ const M = A.exports, F = {
       };
     },
     closeButtonAriaLabel() {
-      return i.t("Close");
+      return _l10n.t("Close");
     },
     prevButtonAriaLabel() {
-      return i.t("Previous");
+      return _l10n.t("Previous");
     },
     nextButtonAriaLabel() {
-      return i.t("Next");
+      return _l10n.t("Next");
     }
   },
   watch: {
@@ -338,13 +377,19 @@ const M = A.exports, F = {
      *
      * @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]);
       }
     }
   },
@@ -352,29 +397,54 @@ const M = A.exports, F = {
     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 = y.useSwipe(this.$refs.mask, {
+    this.useFocusTrap();
+    this.mc = core.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,
+    t: _l10n.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
@@ -382,23 +452,32 @@ const M = A.exports, F = {
      *
      * @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.getTrapStack();
-        return t.length > 0 && t[t.length - 1] !== this.focusTrap ? void 0 : this.close(s);
+    handleKeydown(event) {
+      if (event.key === "Escape") {
+        const trapStack = focusTrap.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
@@ -406,20 +485,33 @@ const M = A.exports, F = {
      * @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();
       });
     },
@@ -427,68 +519,87 @@ const M = A.exports, F = {
      * Handle the slideshow timer and next event
      */
     handleSlideshow() {
-      this.playing = !0, this.hasNext ? this.slideshowTimeout = new v(() => {
-        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.getTrapStack(),
+      const options = {
+        allowOutsideClick: true,
+        fallbackFocus: contentContainer,
+        trapStack: focusTrap.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 = _.createFocusTrap([s, ...this.additionalTrapElements], e), this.focusTrap.activate();
+      this.focusTrap = focusTrap$1.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 R = 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)]);
-}, q = [], E = /* @__PURE__ */ l.normalizeComponent(
-  F,
-  R,
-  q,
-  !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__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
   null,
   "1ea9d450",
   null,
   null
 );
-const c = E.exports;
+const NcModal = __component__.exports;
 /**
  * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
  *
@@ -510,5 +621,5 @@ const c = E.exports;
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-u.ScopeComponent(c);
-module.exports = c;
+ScopeComponent.ScopeComponent(NcModal);
+module.exports = NcModal;