@nextcloud/vue 9.0.0-alpha.2 → 9.0.0-alpha.4

package/dist/Components/NcModal.mjs

@@ -1,55 +1,52 @@
-import "../assets/NcModal-DIWPznuf.css";
-import { S as M } from "../chunks/ScopeComponent-CUI_ekHj.mjs";
-import { g as B } from "../chunks/focusTrap-Be9GEB5C.mjs";
-import { r as E, G as I, H as F, a as f } from "../chunks/_l10n-D1NkaqfQ.mjs";
-import { G as V } from "../chunks/GenRandomId-BW3iYFf9.mjs";
-import { N as D } from "../chunks/NcActions-WuvVCajO.mjs";
-import { N as R } from "../chunks/NcButton-BOed2DnZ.mjs";
+import '../assets/NcModal-B5iEU9Qr.css';
+import { S as ScopeComponent } from "../chunks/ScopeComponent-C5tGtO7l.mjs";
+import { g as getTrapStack } from "../chunks/focusTrap-Cecv_gjR.mjs";
+import { r as register, E as t30, F as t16, a as t } from "../chunks/_l10n-C3nxU4O-.mjs";
+import { G as GenRandomId } from "../chunks/GenRandomId-CMooMQt0.mjs";
+import { N as NcActions } from "../chunks/NcActions-COaRMDe5.mjs";
+import { N as NcButton } from "../chunks/NcButton-DvO0XwJf.mjs";
 import "../Directives/Tooltip.mjs";
-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-CHgC5LLL.mjs";
-import { C as Z } from "../chunks/ChevronRight-SLd1I986.mjs";
-import { C as q } from "../chunks/Close-4aPDwwcw.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>
- *
- * @author John Molakvoæ <skjnldsv@protonmail.com>
- *
- * @license AGPL-3.0-or-later
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
-function Q(t, a) {
-  let e, m, s = a, i;
+import { openBlock, createElementBlock, mergeProps, createElementVNode, toDisplayString, createCommentVNode, resolveComponent, resolveDirective, createBlock, Transition, withCtx, withDirectives, normalizeClass, normalizeStyle, createVNode, renderSlot, withModifiers, vShow, pushScopeId, popScopeId } from "vue";
+import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.mjs";
+import { C as ChevronRight } from "../chunks/ChevronRight-C33SNIxR.mjs";
+import { C as Close } from "../chunks/Close-pmiXntgw.mjs";
+import { createFocusTrap } from "focus-trap";
+import { useSwipe } from "@vueuse/core";
+import { VTooltip } from "floating-vue";
+register(t16, t30);
+function timer(callback, delay) {
+  let id;
+  let started;
+  let remaining = delay;
+  let running;
   this.start = function() {
-    i = !0, m = /* @__PURE__ */ new Date(), e = setTimeout(t, s);
-  }, this.pause = function() {
-    i = !1, clearTimeout(e), s -= /* @__PURE__ */ new Date() - m;
-  }, this.clear = function() {
-    i = !1, clearTimeout(e), s = 0;
-  }, this.getTimeLeft = function() {
-    return i && (this.pause(), this.start()), s;
-  }, this.getStateRunning = function() {
-    return i;
-  }, 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 X = {
+const _sfc_main$3 = {
   name: "ChevronLeftIcon",
   emits: ["click"],
   props: {
@@ -65,29 +62,34 @@ const X = {
       default: 24
     }
   }
-}, 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,
+};
+const _hoisted_1$3 = ["aria-hidden", "aria-label"];
+const _hoisted_2$3 = ["fill", "width", "height"];
+const _hoisted_3$3 = { d: "M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" };
+const _hoisted_4$3 = { key: 0 };
+function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : true,
+    "aria-label": $props.title,
     class: "material-design-icon chevron-left-icon",
     role: "img",
-    onClick: a[0] || (a[0] = (u) => t.$emit("click", u))
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
   }), [
-    (l(), o("svg", {
-      fill: e.fillColor,
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
       class: "material-design-icon__svg",
-      width: e.size,
-      height: e.size,
+      width: $props.size,
+      height: $props.size,
       viewBox: "0 0 24 24"
     }, [
-      r("path", ee, [
-        e.title ? (l(), o("title", te, w(e.title), 1)) : d("", !0)
+      createElementVNode("path", _hoisted_3$3, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$3, toDisplayString($props.title), 1)) : createCommentVNode("", true)
       ])
-    ], 8, $))
-  ], 16, Y);
+    ], 8, _hoisted_2$3))
+  ], 16, _hoisted_1$3);
 }
-const ae = /* @__PURE__ */ v(X, [["render", ie]]), se = {
+const ChevronLeft = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
+const _sfc_main$2 = {
   name: "PauseIcon",
   emits: ["click"],
   props: {
@@ -103,29 +105,34 @@ const ae = /* @__PURE__ */ v(X, [["render", ie]]), se = {
       default: 24
     }
   }
-}, 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,
+};
+const _hoisted_1$2 = ["aria-hidden", "aria-label"];
+const _hoisted_2$2 = ["fill", "width", "height"];
+const _hoisted_3$2 = { d: "M14,19H18V5H14M6,19H10V5H6V19Z" };
+const _hoisted_4$2 = { key: 0 };
+function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : true,
+    "aria-label": $props.title,
     class: "material-design-icon pause-icon",
     role: "img",
-    onClick: a[0] || (a[0] = (u) => t.$emit("click", u))
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
   }), [
-    (l(), o("svg", {
-      fill: e.fillColor,
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
       class: "material-design-icon__svg",
-      width: e.size,
-      height: e.size,
+      width: $props.size,
+      height: $props.size,
       viewBox: "0 0 24 24"
     }, [
-      r("path", ne, [
-        e.title ? (l(), o("title", re, w(e.title), 1)) : d("", !0)
+      createElementVNode("path", _hoisted_3$2, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$2, toDisplayString($props.title), 1)) : createCommentVNode("", true)
       ])
-    ], 8, oe))
-  ], 16, le);
+    ], 8, _hoisted_2$2))
+  ], 16, _hoisted_1$2);
 }
-const de = /* @__PURE__ */ v(se, [["render", ce]]), ue = {
+const Pause = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
+const _sfc_main$1 = {
   name: "PlayIcon",
   emits: ["click"],
   props: {
@@ -141,41 +148,46 @@ const de = /* @__PURE__ */ v(se, [["render", ce]]), ue = {
       default: 24
     }
   }
-}, 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,
+};
+const _hoisted_1$1 = ["aria-hidden", "aria-label"];
+const _hoisted_2$1 = ["fill", "width", "height"];
+const _hoisted_3$1 = { d: "M8,5.14V19.14L19,12.14L8,5.14Z" };
+const _hoisted_4$1 = { key: 0 };
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : true,
+    "aria-label": $props.title,
     class: "material-design-icon play-icon",
     role: "img",
-    onClick: a[0] || (a[0] = (u) => t.$emit("click", u))
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
   }), [
-    (l(), o("svg", {
-      fill: e.fillColor,
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
       class: "material-design-icon__svg",
-      width: e.size,
-      height: e.size,
+      width: $props.size,
+      height: $props.size,
       viewBox: "0 0 24 24"
     }, [
-      r("path", fe, [
-        e.title ? (l(), o("title", pe, w(e.title), 1)) : d("", !0)
+      createElementVNode("path", _hoisted_3$1, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$1, toDisplayString($props.title), 1)) : createCommentVNode("", true)
       ])
-    ], 8, me))
-  ], 16, he);
+    ], 8, _hoisted_2$1))
+  ], 16, _hoisted_1$1);
 }
-const _e = /* @__PURE__ */ v(ue, [["render", ye]]), we = {
+const Play = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+const _sfc_main = {
   name: "NcModal",
   components: {
-    NcActions: D,
-    ChevronLeft: ae,
-    ChevronRight: Z,
-    Close: q,
-    Pause: de,
-    Play: _e,
-    NcButton: R
+    NcActions,
+    ChevronLeft,
+    ChevronRight,
+    Close,
+    Pause,
+    Play,
+    NcButton
   },
   directives: {
-    tooltip: J
+    tooltip: VTooltip
   },
   props: {
     /**
@@ -190,28 +202,28 @@ const _e = /* @__PURE__ */ v(ue, [["render", ye]]), we = {
      */
     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
@@ -225,18 +237,18 @@ const _e = /* @__PURE__ */ v(ue, [["render", ye]]), we = {
      */
     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.
@@ -247,14 +259,16 @@ const _e = /* @__PURE__ */ v(ue, [["render", ye]]), we = {
     size: {
       type: String,
       default: "normal",
-      validator: (t) => ["small", "normal", "large", "full"].includes(t)
+      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
@@ -262,7 +276,7 @@ const _e = /* @__PURE__ */ v(ue, [["render", ye]]), we = {
      */
     closeOnClickOutside: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Makes the modal backdrop black if true
@@ -270,7 +284,7 @@ const _e = /* @__PURE__ */ v(ue, [["render", ye]]), we = {
      */
     dark: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Selector for the modal container, pass `null` to prevent automatic container mounting
@@ -285,7 +299,7 @@ const _e = /* @__PURE__ */ v(ue, [["render", ye]]), we = {
      */
     closeButtonContained: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Additional elements to add to the focus trap
@@ -326,12 +340,12 @@ const _e = /* @__PURE__ */ v(ue, [["render", ye]]), we = {
   data() {
     return {
       mc: null,
-      playing: !1,
+      playing: false,
       slideshowTimeout: null,
       iconSize: 24,
       focusTrap: null,
-      randId: V(),
-      internalShow: !0
+      randId: GenRandomId(),
+      internalShow: true
     };
   },
   computed: {
@@ -339,10 +353,10 @@ const _e = /* @__PURE__ */ v(ue, [["render", ye]]), we = {
       return this.show === void 0 ? this.internalShow : this.show;
     },
     modalTransitionName() {
-      return "modal-".concat(this.outTransition ? "out" : "in");
+      return `modal-${this.outTransition ? "out" : "in"}`;
     },
     playPauseName() {
-      return this.playing ? f("Pause slideshow") : f("Start slideshow");
+      return this.playing ? t("Pause slideshow") : t("Start slideshow");
     },
     cssVariables() {
       return {
@@ -351,13 +365,13 @@ const _e = /* @__PURE__ */ v(ue, [["render", ye]]), we = {
       };
     },
     closeButtonAriaLabel() {
-      return f("Close");
+      return t("Close");
     },
     prevButtonAriaLabel() {
-      return f("Previous");
+      return t("Previous");
     },
     nextButtonAriaLabel() {
-      return f("Next");
+      return t("Next");
     }
   },
   watch: {
@@ -366,13 +380,19 @@ const _e = /* @__PURE__ */ v(ue, [["render", ye]]), we = {
      *
      * @param {boolean} paused is the player paused
      */
-    slideshowPaused(t) {
-      this.slideshowTimeout && (t ? this.slideshowTimeout.pause() : this.slideshowTimeout.start());
+    slideshowPaused(paused) {
+      if (this.slideshowTimeout) {
+        if (paused) {
+          this.slideshowTimeout.pause();
+        } else {
+          this.slideshowTimeout.start();
+        }
+      }
     },
-    additionalTrapElements(t) {
+    additionalTrapElements(elements) {
       if (this.focusTrap) {
-        const a = this.$refs.mask;
-        this.focusTrap.updateContainerElements([a, ...t]);
+        const contentContainer = this.$refs.mask;
+        this.focusTrap.updateContainerElements([contentContainer, ...elements]);
       }
     }
   },
@@ -380,29 +400,54 @@ const _e = /* @__PURE__ */ v(ue, [["render", ye]]), we = {
     window.addEventListener("keydown", this.handleKeydown);
   },
   beforeUnmount() {
-    window.removeEventListener("keydown", this.handleKeydown), this.mc.stop();
+    window.removeEventListener("keydown", this.handleKeydown);
+    this.mc.stop();
   },
   mounted() {
-    this.useFocusTrap(), this.mc = j(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);
+      }
+    }
   },
   unmounted() {
-    this.clearFocusTrap(), this.$el.remove();
+    this.clearFocusTrap();
+    this.$el.remove();
   },
   methods: {
-    t: f,
+    t,
     // Events emitters
-    previous(t) {
-      this.hasPrevious && (t && this.resetSlideshow(), this.$emit("previous", t));
+    previous(event) {
+      if (this.hasPrevious) {
+        if (event) {
+          this.resetSlideshow();
+        }
+        this.$emit("previous", event);
+      }
     },
-    next(t) {
-      this.hasNext && (t && this.resetSlideshow(), this.$emit("next", t));
+    next(event) {
+      if (this.hasNext) {
+        if (event) {
+          this.resetSlideshow();
+        }
+        this.$emit("next", event);
+      }
     },
-    close(t) {
-      this.canClose && (this.internalShow = !1, this.$emit("update:show", !1), setTimeout(() => {
-        this.$emit("close", t);
-      }, 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
@@ -410,23 +455,32 @@ const _e = /* @__PURE__ */ v(ue, [["render", ye]]), we = {
      *
      * @param {MouseEvent} event The click event
      */
-    handleClickModalWrapper(t) {
-      this.closeOnClickOutside && this.close(t);
+    handleClickModalWrapper(event) {
+      if (this.closeOnClickOutside) {
+        this.close(event);
+      }
     },
     /**
      * @param {KeyboardEvent} event - keyboard event
      */
-    handleKeydown(t) {
-      if (t.key === "Escape") {
-        const e = B();
-        return e.length > 0 && e[e.length - 1] !== this.focusTrap ? void 0 : this.close(t);
+    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 a = {
+      const arrowHandlers = {
         ArrowLeft: this.previous,
         ArrowRight: this.next
       };
-      if (a[t.key])
-        return document.activeElement && !this.$el.contains(document.activeElement) ? void 0 : a[t.key](t);
+      if (arrowHandlers[event.key]) {
+        if (document.activeElement && !this.$el.contains(document.activeElement)) {
+          return;
+        }
+        return arrowHandlers[event.key](event);
+      }
     },
     /**
      * handle the swipe event
@@ -434,20 +488,33 @@ const _e = /* @__PURE__ */ v(ue, [["render", ye]]), we = {
      * @param {TouchEvent} e The touch event
      * @param {import('@vueuse/core').SwipeDirection} direction Swipe direction
      */
-    handleSwipe(t, a) {
-      this.enableSwipe && (a === "left" ? this.next(t) : a === "right" && this.previous(t));
+    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();
       });
     },
@@ -455,46 +522,71 @@ const _e = /* @__PURE__ */ v(ue, [["render", ye]]), we = {
      * Handle the slideshow timer and next event
      */
     handleSlideshow() {
-      this.playing = !0, this.hasNext ? this.slideshowTimeout = new Q(() => {
-        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 t = this.$refs.mask;
+      }
+      const contentContainer = this.$refs.mask;
       await this.$nextTick();
-      const a = {
-        allowOutsideClick: !0,
-        fallbackFocus: t,
-        trapStack: B(),
+      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 = U([t, ...this.additionalTrapElements], a), this.focusTrap.activate();
+      this.focusTrap = createFocusTrap([contentContainer, ...this.additionalTrapElements], options);
+      this.focusTrap.activate();
     },
     clearFocusTrap() {
-      var t;
-      this.focusTrap && ((t = this.focusTrap) == null || t.deactivate(), this.focusTrap = null);
+      if (!this.focusTrap) {
+        return;
+      }
+      this.focusTrap?.deactivate();
+      this.focusTrap = null;
     }
   }
-}, ge = (t) => (K("data-v-7c811920"), t = t(), W(), t), ke = ["aria-labelledby", "aria-describedby"], ve = { class: "modal-header" }, Ce = ["id"], be = { class: "icons-menu" }, Se = { class: "hidden-visually" }, Te = {
+};
+const _withScopeId = (n) => (pushScopeId("data-v-48b56014"), n = n(), popScopeId(), n);
+const _hoisted_1 = ["aria-labelledby", "aria-describedby"];
+const _hoisted_2 = {
+  class: "modal-header",
+  "data-theme-dark": ""
+};
+const _hoisted_3 = ["id"];
+const _hoisted_4 = { class: "icons-menu" };
+const _hoisted_5 = { class: "hidden-visually" };
+const _hoisted_6 = {
   key: 2,
   class: "progress-ring",
   height: "50",
   width: "50"
-}, Be = /* @__PURE__ */ ge(() => /* @__PURE__ */ r("circle", {
+};
+const _hoisted_7 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("circle", {
   class: "progress-ring__circle",
   stroke: "white",
   "stroke-width": "2",
@@ -502,201 +594,190 @@ const _e = /* @__PURE__ */ v(ue, [["render", ye]]), we = {
   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, {
+}, null, -1));
+const _hoisted_8 = [
+  _hoisted_7
+];
+const _hoisted_9 = ["id"];
+const _hoisted_10 = { class: "modal-container__content" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_Play = resolveComponent("Play");
+  const _component_Pause = resolveComponent("Pause");
+  const _component_NcActions = resolveComponent("NcActions");
+  const _component_Close = resolveComponent("Close");
+  const _component_NcButton = resolveComponent("NcButton");
+  const _component_ChevronLeft = resolveComponent("ChevronLeft");
+  const _component_ChevronRight = resolveComponent("ChevronRight");
+  const _directive_tooltip = resolveDirective("tooltip");
+  return openBlock(), createBlock(Transition, {
     name: "fade",
     appear: "",
-    onAfterEnter: i.useFocusTrap,
-    onBeforeLeave: i.clearFocusTrap
+    onAfterEnter: $options.useFocusTrap,
+    onBeforeLeave: $options.clearFocusTrap
   }, {
-    default: c(() => [
-      _(r("div", {
+    default: withCtx(() => [
+      withDirectives(createElementVNode("div", {
         ref: "mask",
-        class: b(["modal-mask", { "modal-mask--dark": e.dark || !e.closeButtonContained || e.hasPrevious || e.hasNext }]),
-        style: O(i.cssVariables),
+        class: normalizeClass(["modal-mask", { "modal-mask--dark": $props.dark || !$props.closeButtonContained || $props.hasPrevious || $props.hasNext }]),
+        style: normalizeStyle($options.cssVariables),
         role: "dialog",
         "aria-modal": "true",
-        "aria-labelledby": "modal-name-" + s.randId,
-        "aria-describedby": "modal-description-" + s.randId,
+        "aria-labelledby": "modal-name-" + $data.randId,
+        "aria-describedby": "modal-description-" + $data.randId,
         tabindex: "-1"
       }, [
-        n(y, {
+        createVNode(Transition, {
           name: "fade-visibility",
           appear: ""
         }, {
-          default: c(() => [
-            r("div", ve, [
-              e.name.trim() !== "" ? (l(), o("h2", {
+          default: withCtx(() => [
+            createElementVNode("div", _hoisted_2, [
+              $props.name.trim() !== "" ? (openBlock(), createElementBlock("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", {
+                id: "modal-name-" + $data.randId,
+                class: "modal-header__name"
+              }, toDisplayString($props.name), 9, _hoisted_3)) : createCommentVNode("", true),
+              createElementVNode("div", _hoisted_4, [
+                $props.hasNext && $props.enableSlideshow ? withDirectives((openBlock(), createElementBlock("button", {
                   key: 0,
-                  class: b([{ "play-pause-icons--paused": e.slideshowPaused }, "play-pause-icons"]),
+                  class: normalizeClass([{ "play-pause-icons--paused": $props.slideshowPaused }, "play-pause-icons"]),
                   type: "button",
-                  onClick: a[0] || (a[0] = (...C) => i.togglePlayPause && i.togglePlayPause(...C))
+                  onClick: _cache[0] || (_cache[0] = (...args) => $options.togglePlayPause && $options.togglePlayPause(...args))
                 }, [
-                  s.playing ? (l(), p(P, {
-                    key: 1,
-                    size: s.iconSize,
-                    class: "play-pause-icons__pause"
-                  }, null, 8, ["size"])) : (l(), p(u, {
+                  !$data.playing ? (openBlock(), createBlock(_component_Play, {
                     key: 0,
-                    size: s.iconSize,
+                    size: $data.iconSize,
                     class: "play-pause-icons__play"
+                  }, null, 8, ["size"])) : (openBlock(), createBlock(_component_Pause, {
+                    key: 1,
+                    size: $data.iconSize,
+                    class: "play-pause-icons__pause"
                   }, null, 8, ["size"])),
-                  r("span", Se, w(i.playPauseName), 1),
-                  s.playing ? (l(), o("svg", Te, Ne)) : d("", !0)
+                  createElementVNode("span", _hoisted_5, toDisplayString($options.playPauseName), 1),
+                  $data.playing ? (openBlock(), createElementBlock("svg", _hoisted_6, _hoisted_8)) : createCommentVNode("", true)
                 ], 2)), [
                   [
-                    A,
-                    i.playPauseName,
+                    _directive_tooltip,
+                    $options.playPauseName,
                     void 0,
-                    { auto: !0 }
+                    { auto: true }
                   ]
-                ]) : d("", !0),
-                n(z, {
+                ]) : createCommentVNode("", true),
+                createVNode(_component_NcActions, {
                   class: "header-actions",
-                  inline: e.inlineActions
+                  inline: $props.inlineActions
                 }, {
-                  default: c(() => [
-                    N(t.$slots, "actions", {}, void 0, !0)
+                  default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "actions", {}, void 0, true)
                   ]),
                   _: 3
                 }, 8, ["inline"]),
-                e.canClose && !e.closeButtonContained ? (l(), p(g, {
+                $props.canClose && !$props.closeButtonContained ? (openBlock(), createBlock(_component_NcButton, {
                   key: 1,
-                  "aria-label": i.closeButtonAriaLabel,
+                  "aria-label": $options.closeButtonAriaLabel,
                   class: "header-close",
                   type: "tertiary",
-                  onClick: i.close
+                  onClick: $options.close
                 }, {
-                  icon: c(() => [
-                    n(T, { size: s.iconSize }, null, 8, ["size"])
+                  icon: withCtx(() => [
+                    createVNode(_component_Close, { size: $data.iconSize }, null, 8, ["size"])
                   ]),
                   _: 1
-                }, 8, ["aria-label", "onClick"])) : d("", !0)
+                }, 8, ["aria-label", "onClick"])) : createCommentVNode("", true)
               ])
             ])
           ]),
           _: 3
         }),
-        n(y, {
-          name: i.modalTransitionName,
+        createVNode(Transition, {
+          name: $options.modalTransitionName,
           appear: ""
         }, {
-          default: c(() => [
-            _(r("div", {
-              class: b([[
-                "modal-wrapper--".concat(e.size),
-                { "modal-wrapper--spread-navigation": e.spreadNavigation }
+          default: withCtx(() => [
+            withDirectives(createElementVNode("div", {
+              class: normalizeClass([[
+                `modal-wrapper--${$props.size}`,
+                { "modal-wrapper--spread-navigation": $props.spreadNavigation }
               ], "modal-wrapper"]),
-              onMousedown: a[1] || (a[1] = G((...C) => i.handleClickModalWrapper && i.handleClickModalWrapper(...C), ["self"]))
+              onMousedown: _cache[1] || (_cache[1] = withModifiers((...args) => $options.handleClickModalWrapper && $options.handleClickModalWrapper(...args), ["self"]))
             }, [
-              n(y, {
+              createVNode(Transition, {
                 name: "fade-visibility",
                 appear: ""
               }, {
-                default: c(() => [
-                  _(n(g, {
+                default: withCtx(() => [
+                  withDirectives(createVNode(_component_NcButton, {
                     type: "tertiary-no-background",
                     class: "prev",
-                    "aria-label": i.prevButtonAriaLabel,
-                    onClick: i.previous
+                    "aria-label": $options.prevButtonAriaLabel,
+                    onClick: $options.previous
                   }, {
-                    icon: c(() => [
-                      n(L, { size: 40 })
+                    icon: withCtx(() => [
+                      createVNode(_component_ChevronLeft, { size: 40 })
                     ]),
                     _: 1
                   }, 8, ["aria-label", "onClick"]), [
-                    [k, e.hasPrevious]
+                    [vShow, $props.hasPrevious]
                   ])
                 ]),
                 _: 1
               }),
-              r("div", {
-                id: "modal-description-" + s.randId,
+              createElementVNode("div", {
+                id: "modal-description-" + $data.randId,
                 class: "modal-container"
               }, [
-                e.canClose && e.closeButtonContained ? (l(), p(g, {
+                $props.canClose && $props.closeButtonContained ? (openBlock(), createBlock(_component_NcButton, {
                   key: 0,
                   type: "tertiary",
                   class: "modal-container__close",
-                  "aria-label": i.closeButtonAriaLabel,
-                  onClick: i.close
+                  "aria-label": $options.closeButtonAriaLabel,
+                  onClick: $options.close
                 }, {
-                  icon: c(() => [
-                    n(T, { size: 20 })
+                  icon: withCtx(() => [
+                    createVNode(_component_Close, { size: 20 })
                   ]),
                   _: 1
-                }, 8, ["aria-label", "onClick"])) : d("", !0),
-                r("div", ze, [
-                  N(t.$slots, "default", {}, void 0, !0)
+                }, 8, ["aria-label", "onClick"])) : createCommentVNode("", true),
+                createElementVNode("div", _hoisted_10, [
+                  renderSlot(_ctx.$slots, "default", {}, void 0, true)
                 ])
-              ], 8, Pe),
-              n(y, {
+              ], 8, _hoisted_9),
+              createVNode(Transition, {
                 name: "fade-visibility",
                 appear: ""
               }, {
-                default: c(() => [
-                  _(n(g, {
+                default: withCtx(() => [
+                  withDirectives(createVNode(_component_NcButton, {
                     type: "tertiary-no-background",
                     class: "next",
-                    "aria-label": i.nextButtonAriaLabel,
-                    onClick: i.next
+                    "aria-label": $options.nextButtonAriaLabel,
+                    onClick: $options.next
                   }, {
-                    icon: c(() => [
-                      n(x, { size: 40 })
+                    icon: withCtx(() => [
+                      createVNode(_component_ChevronRight, { size: 40 })
                     ]),
                     _: 1
                   }, 8, ["aria-label", "onClick"]), [
-                    [k, e.hasNext]
+                    [vShow, $props.hasNext]
                   ])
                 ]),
                 _: 1
               })
             ], 34), [
-              [k, i.showModal]
+              [vShow, $options.showModal]
             ])
           ]),
           _: 3
         }, 8, ["name"])
-      ], 14, ke), [
-        [k, i.showModal]
+      ], 14, _hoisted_1), [
+        [vShow, $options.showModal]
       ])
     ]),
     _: 3
   }, 8, ["onAfterEnter", "onBeforeLeave"]);
 }
-const xe = /* @__PURE__ */ v(we, [["render", Le], ["__scopeId", "data-v-7c811920"]]);
-/**
- * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
- *
- * @author John Molakvoæ <skjnldsv@protonmail.com>
- *
- * @license AGPL-3.0-or-later
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
-M(xe);
+const NcModal = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-48b56014"]]);
+ScopeComponent(NcModal);
 export {
-  xe as default
+  NcModal as default
 };