@nextcloud/vue 8.0.0-beta.7 → 8.0.0-beta.9

package/dist/Components/NcModal.mjs

@@ -1,10 +1,10 @@
-import "../assets/index-852d8576.css";
-import { S as l } from "../chunks/ScopeComponent-1f3a7612.mjs";
-import { g as r } from "../chunks/focusTrap-173aba65.mjs";
-import { t as i } from "../chunks/l10n-9a5a6afc.mjs";
-import { G as c } from "../chunks/GenRandomId-1e1b509a.mjs";
-import { l as d } from "../chunks/l10n-05baf7da.mjs";
-import u from "./NcActions.mjs";
+import "../assets/index-5ee8a575.css";
+import { S as l } from "../chunks/ScopeComponent-9519afcc.mjs";
+import { g as r } from "../chunks/focusTrap-5d0f71d4.mjs";
+import { t as o } from "../chunks/l10n-05a09c66.mjs";
+import { G as u } from "../chunks/GenRandomId-cb9ccebe.mjs";
+import { l as c } from "../chunks/l10n-9aa6482d.mjs";
+import d from "./NcActions.mjs";
 import h from "./NcButton.mjs";
 import "../Directives/Tooltip.mjs";
 import p from "vue-material-design-icons/ChevronLeft.vue";
@@ -14,110 +14,406 @@ import y from "vue-material-design-icons/Pause.vue";
 import w from "vue-material-design-icons/Play.vue";
 import { createFocusTrap as v } from "focus-trap";
 import { useSwipe as g } from "@vueuse/core";
-import { n as T } from "../chunks/_plugin-vue2_normalizer-5b4c43a4.mjs";
-import { VTooltip as b } from "floating-vue";
-function C(e, t) {
-  let s, n, o = t, a;
+import { n as _ } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+import { VTooltip as C } from "floating-vue";
+/**
+ * @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 T(s, e) {
+  let t, a, n = e, i;
   this.start = function() {
-    a = !0, n = /* @__PURE__ */ new Date(), s = setTimeout(e, o);
+    i = !0, a = /* @__PURE__ */ new Date(), t = setTimeout(s, n);
   }, this.pause = function() {
-    a = !1, clearTimeout(s), o -= /* @__PURE__ */ new Date() - n;
+    i = !1, clearTimeout(t), n -= /* @__PURE__ */ new Date() - a;
   }, this.clear = function() {
-    a = !1, clearTimeout(s), o = 0;
+    i = !1, clearTimeout(t), n = 0;
   }, this.getTimeLeft = function() {
-    return a && (this.pause(), this.start()), o;
+    return i && (this.pause(), this.start()), n;
   }, this.getStateRunning = function() {
-    return a;
+    return i;
   }, this.start();
 }
-const S = { name: "NcModal", components: { NcActions: u, ChevronLeft: p, ChevronRight: m, Close: f, Pause: y, Play: w, NcButton: h }, directives: { tooltip: b }, mixins: [d], props: { name: { type: String, default: "" }, hasPrevious: { type: Boolean, default: !1 }, hasNext: { type: Boolean, default: !1 }, outTransition: { type: Boolean, default: !1 }, enableSlideshow: { type: Boolean, default: !1 }, slideshowDelay: { type: Number, default: 5e3 }, slideshowPaused: { type: Boolean, default: !1 }, enableSwipe: { type: Boolean, default: !0 }, spreadNavigation: { type: Boolean, default: !1 }, size: { type: String, default: "normal", validator: (e) => ["small", "normal", "large", "full"].includes(e) }, canClose: { type: Boolean, default: !0 }, closeOnClickOutside: { type: Boolean, default: !0 }, dark: { type: Boolean, default: !1 }, container: { type: [String, null], default: "body" }, closeButtonContained: { type: Boolean, default: !0 }, additionalTrapElements: { type: Array, default: () => [] }, inlineActions: { type: Number, default: 0 }, show: { type: Boolean, default: void 0 } }, emits: ["previous", "next", "close", "update:show"], data() {
-  return { mc: null, playing: !1, slideshowTimeout: null, iconSize: 24, focusTrap: null, randId: c(), internalShow: !0 };
-}, computed: { showModal() {
-  return this.show === void 0 ? this.internalShow : this.show;
-}, modalTransitionName() {
-  return `modal-${this.outTransition ? "out" : "in"}`;
-}, playPauseName() {
-  return this.playing ? i("Pause slideshow") : i("Start slideshow");
-}, cssVariables() {
-  return { "--slideshow-duration": this.slideshowDelay + "ms", "--icon-size": this.iconSize + "px" };
-}, closeButtonAriaLabel() {
-  return i("Close modal");
-}, prevButtonAriaLabel() {
-  return i("Previous");
-}, nextButtonAriaLabel() {
-  return i("Next");
-} }, watch: { slideshowPaused(e) {
-  this.slideshowTimeout && (e ? this.slideshowTimeout.pause() : this.slideshowTimeout.start());
-}, additionalTrapElements(e) {
-  if (this.focusTrap) {
-    const t = this.$refs.mask;
-    this.focusTrap.updateContainerElements([t, ...e]);
+const S = {
+  name: "NcModal",
+  components: {
+    NcActions: d,
+    ChevronLeft: p,
+    ChevronRight: m,
+    Close: f,
+    Pause: y,
+    Play: w,
+    NcButton: h
+  },
+  directives: {
+    tooltip: C
+  },
+  mixins: [c],
+  props: {
+    /**
+     * Name to be shown with the modal
+     */
+    name: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Declare if a previous slide is available
+     */
+    hasPrevious: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Declare if a next slide is available
+     */
+    hasNext: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Declare if hiding the modal should be animated
+     */
+    outTransition: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Declare if the slideshow functionality should be enabled
+     */
+    enableSlideshow: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Declare the slide interval
+     */
+    slideshowDelay: {
+      type: Number,
+      default: 5e3
+    },
+    /**
+     * Allow to pause an ongoing slideshow
+     */
+    slideshowPaused: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Enable swipe between slides
+     */
+    enableSwipe: {
+      type: Boolean,
+      default: !0
+    },
+    spreadNavigation: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Defines the modal size.
+     * Default is 'normal'.
+     * Available are 'small', 'normal', 'large' and 'full'.
+     * All sizes except 'small' change automatically to full-screen on mobile.
+     */
+    size: {
+      type: String,
+      default: "normal",
+      validator: (s) => ["small", "normal", "large", "full"].includes(s)
+    },
+    /**
+     * Declare if the modal can be closed
+     */
+    canClose: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Close the modal if the user clicked outside of the modal
+     * Only relevant if `canClose` is set to true.
+     */
+    closeOnClickOutside: {
+      type: Boolean,
+      default: !0
+    },
+    /** Makes the modal backdrop black if true  */
+    dark: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Selector for the modal container, pass `null` to prevent automatic container mounting
+     */
+    container: {
+      type: [String, null],
+      default: "body"
+    },
+    /**
+     * Pass in false if you want the modal 'close' button to be displayed
+     * outside the modal boundaries, in the top right corner of the window
+     */
+    closeButtonContained: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Additional elements to add to the focus trap
+     */
+    additionalTrapElements: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * Display x items inline
+     *
+     * @see Actions component usage
+     */
+    inlineActions: {
+      type: Number,
+      default: 0
+    },
+    show: {
+      type: Boolean,
+      default: void 0
+    }
+  },
+  emits: [
+    "previous",
+    "next",
+    "close",
+    "update:show"
+  ],
+  data() {
+    return {
+      mc: null,
+      playing: !1,
+      slideshowTimeout: null,
+      iconSize: 24,
+      focusTrap: null,
+      randId: u(),
+      internalShow: !0
+    };
+  },
+  computed: {
+    showModal() {
+      return this.show === void 0 ? this.internalShow : this.show;
+    },
+    modalTransitionName() {
+      return `modal-${this.outTransition ? "out" : "in"}`;
+    },
+    playPauseName() {
+      return this.playing ? o("Pause slideshow") : o("Start slideshow");
+    },
+    cssVariables() {
+      return {
+        "--slideshow-duration": this.slideshowDelay + "ms",
+        "--icon-size": this.iconSize + "px"
+      };
+    },
+    closeButtonAriaLabel() {
+      return o("Close modal");
+    },
+    prevButtonAriaLabel() {
+      return o("Previous");
+    },
+    nextButtonAriaLabel() {
+      return o("Next");
+    }
+  },
+  watch: {
+    /**
+     * Handle play/pause of an ongoing slideshow
+     *
+     * @param {boolean} paused is the player paused
+     */
+    slideshowPaused(s) {
+      this.slideshowTimeout && (s ? this.slideshowTimeout.pause() : this.slideshowTimeout.start());
+    },
+    additionalTrapElements(s) {
+      if (this.focusTrap) {
+        const e = this.$refs.mask;
+        this.focusTrap.updateContainerElements([e, ...s]);
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener("keydown", this.handleKeydown);
+  },
+  beforeDestroy() {
+    window.removeEventListener("keydown", this.handleKeydown), this.mc.stop();
+  },
+  mounted() {
+    this.useFocusTrap(), this.mc = g(this.$refs.mask, {
+      onSwipeEnd: this.handleSwipe
+    }), this.container && (this.container === "body" ? document.body.insertBefore(this.$el, document.body.lastChild) : document.querySelector(this.container).appendChild(this.$el));
+  },
+  destroyed() {
+    this.clearFocusTrap(), this.$el.remove();
+  },
+  methods: {
+    // Events emitters
+    previous(s) {
+      this.hasPrevious && (s && this.resetSlideshow(), this.$emit("previous", s));
+    },
+    next(s) {
+      this.hasNext && (s && this.resetSlideshow(), this.$emit("next", s));
+    },
+    close(s) {
+      this.canClose && (this.internalShow = !1, this.$emit("update:show", !1), setTimeout(() => {
+        this.$emit("close", s);
+      }, 300));
+    },
+    /**
+     * Handle click on modal wrapper
+     * If `closeOnClickOutside` is set the modal will be closed
+     *
+     * @param {MouseEvent} event The click event
+     */
+    handleClickModalWrapper(s) {
+      this.closeOnClickOutside && this.close(s);
+    },
+    /**
+     * @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);
+      }
+      const e = {
+        ArrowLeft: this.previous,
+        ArrowRight: this.next
+      };
+      if (e[s.key])
+        return document.activeElement && !this.$el.contains(document.activeElement) ? void 0 : e[s.key](s);
+    },
+    /**
+     * handle the swipe event
+     *
+     * @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));
+    },
+    /**
+     * Toggle the slideshow state
+     */
+    togglePlayPause() {
+      this.playing = !this.playing, this.playing ? this.handleSlideshow() : this.clearSlideshowTimeout();
+    },
+    /**
+     * Reset the slideshow timer and keep going if it was on
+     */
+    resetSlideshow() {
+      this.playing = !this.playing, this.clearSlideshowTimeout(), this.$nextTick(function() {
+        this.togglePlayPause();
+      });
+    },
+    /**
+     * Handle the slideshow timer and next event
+     */
+    handleSlideshow() {
+      this.playing = !0, this.hasNext ? this.slideshowTimeout = new T(() => {
+        this.next(), this.handleSlideshow();
+      }, this.slideshowDelay) : (this.playing = !1, this.clearSlideshowTimeout());
+    },
+    /**
+     * Clear slideshowTimeout if ongoing
+     */
+    clearSlideshowTimeout() {
+      this.slideshowTimeout && this.slideshowTimeout.clear();
+    },
+    /**
+     * Add focus trap for accessibility.
+     */
+    async useFocusTrap() {
+      if (!this.showModal || this.focusTrap)
+        return;
+      const s = this.$refs.mask;
+      await this.$nextTick();
+      const e = {
+        allowOutsideClick: !0,
+        fallbackFocus: s,
+        trapStack: r(),
+        // 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
+      };
+      this.focusTrap = v([s, ...this.additionalTrapElements], e), this.focusTrap.activate();
+    },
+    clearFocusTrap() {
+      var s;
+      this.focusTrap && ((s = this.focusTrap) == null || s.deactivate(), this.focusTrap = null);
+    }
   }
-} }, beforeMount() {
-  window.addEventListener("keydown", this.handleKeydown);
-}, beforeDestroy() {
-  window.removeEventListener("keydown", this.handleKeydown), this.mc.stop();
-}, mounted() {
-  this.useFocusTrap(), this.mc = g(this.$refs.mask, { onSwipeEnd: this.handleSwipe }), this.container && (this.container === "body" ? document.body.insertBefore(this.$el, document.body.lastChild) : document.querySelector(this.container).appendChild(this.$el));
-}, destroyed() {
-  this.clearFocusTrap(), this.$el.remove();
-}, methods: { previous(e) {
-  this.hasPrevious && (e && this.resetSlideshow(), this.$emit("previous", e));
-}, next(e) {
-  this.hasNext && (e && this.resetSlideshow(), this.$emit("next", e));
-}, close(e) {
-  this.canClose && (this.internalShow = !1, this.$emit("update:show", !1), setTimeout(() => {
-    this.$emit("close", e);
-  }, 300));
-}, handleClickModalWrapper(e) {
-  this.closeOnClickOutside && this.close(e);
-}, handleKeydown(e) {
-  if (e.key === "Escape")
-    return this.close(e);
-  const t = { ArrowLeft: this.previous, ArrowRight: this.next };
-  if (t[e.key])
-    return document.activeElement && !this.$el.contains(document.activeElement) ? void 0 : t[e.key](e);
-}, handleSwipe(e, t) {
-  this.enableSwipe && (t === "left" ? this.next(e) : t === "right" && this.previous(e));
-}, togglePlayPause() {
-  this.playing = !this.playing, this.playing ? this.handleSlideshow() : this.clearSlideshowTimeout();
-}, resetSlideshow() {
-  this.playing = !this.playing, this.clearSlideshowTimeout(), this.$nextTick(function() {
-    this.togglePlayPause();
-  });
-}, handleSlideshow() {
-  this.playing = !0, this.hasNext ? this.slideshowTimeout = new C(() => {
-    this.next(), this.handleSlideshow();
-  }, this.slideshowDelay) : (this.playing = !1, this.clearSlideshowTimeout());
-}, clearSlideshowTimeout() {
-  this.slideshowTimeout && this.slideshowTimeout.clear();
-}, async useFocusTrap() {
-  if (!this.showModal || this.focusTrap)
-    return;
-  const e = this.$refs.mask;
-  await this.$nextTick();
-  const t = { allowOutsideClick: !0, fallbackFocus: e, trapStack: r(), escapeDeactivates: !1 };
-  this.focusTrap = v([e, ...this.additionalTrapElements], t), this.focusTrap.activate();
-}, clearFocusTrap() {
-  var e;
-  this.focusTrap && ((e = this.focusTrap) == null || e.deactivate(), this.focusTrap = null);
-} } };
-var k = function() {
+};
+var b = 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 }, style: e.cssVariables, attrs: { role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-name-" + e.randId, "aria-describedby": "modal-description-" + e.randId, tabindex: "-1" } }, [t("transition", { attrs: { name: "fade-visibility", appear: "" } }, [t("div", { staticClass: "modal-header" }, [e.name.trim() !== "" ? t("h2", { staticClass: "modal-name", attrs: { id: "modal-name-" + e.randId } }, [e._v(" " + e._s(e.name) + " ")]) : e._e(), t("div", { staticClass: "icons-menu" }, [e.hasNext && e.enableSlideshow ? t("button", { directives: [{ name: "tooltip", rawName: "v-tooltip.auto", value: e.playPauseName, expression: "playPauseName", modifiers: { auto: !0 } }], staticClass: "play-pause-icons", class: { "play-pause-icons--paused": e.slideshowPaused }, attrs: { type: "button" }, on: { click: e.togglePlayPause } }, [e.playing ? t("Pause", { staticClass: "play-pause-icons__pause", attrs: { size: e.iconSize } }) : t("Play", { staticClass: "play-pause-icons__play", attrs: { size: e.iconSize } }), t("span", { staticClass: "hidden-visually" }, [e._v(" " + e._s(e.playPauseName) + " ")]), e.playing ? t("svg", { staticClass: "progress-ring", attrs: { height: "50", width: "50" } }, [t("circle", { staticClass: "progress-ring__circle", attrs: { stroke: "white", "stroke-width": "2", fill: "transparent", r: "15", cx: "25", cy: "25" } })]) : e._e()], 1) : e._e(), t("NcActions", { staticClass: "header-actions", attrs: { inline: e.inlineActions } }, [e._t("actions")], 2), e.canClose && !e.closeButtonContained ? t("NcButton", { staticClass: "header-close", attrs: { "aria-label": e.closeButtonAriaLabel, type: "tertiary" }, on: { click: e.close }, scopedSlots: e._u([{ key: "icon", fn: function() {
     return [t("Close", { attrs: { size: e.iconSize } })];
-  }, proxy: !0 }], null, !1, 1841713362) }) : e._e()], 1)])]), t("transition", { attrs: { name: e.modalTransitionName, appear: "" } }, [t("div", { directives: [{ name: "show", rawName: "v-show", value: e.showModal, expression: "showModal" }], staticClass: "modal-wrapper", class: [`modal-wrapper--${e.size}`, e.spreadNavigation ? "modal-wrapper--spread-navigation" : ""], on: { mousedown: function(s) {
-    return s.target !== s.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", class: { invisible: !e.hasPrevious }, attrs: { type: "tertiary-no-background", "aria-label": e.prevButtonAriaLabel }, on: { click: e.previous }, scopedSlots: e._u([{ key: "icon", fn: function() {
+  }, proxy: !0 }], null, !1, 1841713362) }) : e._e()], 1)])]), t("transition", { attrs: { name: e.modalTransitionName, appear: "" } }, [t("div", { directives: [{ name: "show", rawName: "v-show", value: e.showModal, expression: "showModal" }], staticClass: "modal-wrapper", class: [
+    `modal-wrapper--${e.size}`,
+    { "modal-wrapper--spread-navigation": e.spreadNavigation }
+  ], on: { mousedown: function(a) {
+    return a.target !== a.currentTarget ? null : e.handleClickModalWrapper.apply(null, arguments);
+  } } }, [t("transition", { attrs: { name: "fade-visibility", appear: "" } }, [t("NcButton", { directives: [{ name: "show", rawName: "v-show", value: e.hasPrevious, expression: "hasPrevious" }], staticClass: "prev", attrs: { type: "tertiary-no-background", "aria-label": e.prevButtonAriaLabel }, on: { click: e.previous }, scopedSlots: e._u([{ key: "icon", fn: function() {
     return [t("ChevronLeft", { attrs: { size: 40 } })];
   }, proxy: !0 }]) })], 1), t("div", { staticClass: "modal-container", attrs: { id: "modal-description-" + e.randId } }, [e.canClose && e.closeButtonContained ? t("NcButton", { staticClass: "modal-container__close", attrs: { type: "tertiary", "aria-label": e.closeButtonAriaLabel }, on: { click: e.close }, scopedSlots: e._u([{ key: "icon", fn: function() {
     return [t("Close", { attrs: { size: 20 } })];
-  }, proxy: !0 }], null, !1, 2121748766) }) : e._e(), t("div", { staticClass: "modal-container__content" }, [e._t("default")], 2)], 1), t("transition", { attrs: { name: "fade-visibility", appear: "" } }, [t("NcButton", { directives: [{ name: "show", rawName: "v-show", value: e.hasNext, expression: "hasNext" }], staticClass: "next", class: { invisible: !e.hasNext }, attrs: { type: "tertiary-no-background", "aria-label": e.nextButtonAriaLabel }, on: { click: e.next }, scopedSlots: e._u([{ key: "icon", fn: function() {
+  }, 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)]);
-}, x = [], N = T(S, k, x, !1, null, "27c27b41", null, null);
-const B = N.exports;
-l(B);
+}, k = [], x = /* @__PURE__ */ _(
+  S,
+  b,
+  k,
+  !1,
+  null,
+  "45e668d9",
+  null,
+  null
+);
+const N = x.exports;
+/**
+ * @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/>.
+ *
+ */
+l(N);
 export {
-  B as default
+  N as default
 };

package/dist/Components/NcModal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcModal.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcModal.mjs","sources":["../../src/utils/Timer.js","../../src/components/NcModal/NcModal.vue","../../src/components/NcModal/index.js"],"sourcesContent":["/**\n * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n *\n * @author John Molakvoæ <skjnldsv@protonmail.com>\n *\n * @license AGPL-3.0-or-later\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU Affero General Public License as\n * published by the Free Software Foundation, either version 3 of the\n * License, or (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU Affero General Public License for more details.\n *\n * You should have received a copy of the GNU Affero General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n *\n */\n\n/**\n * @param {Function} callback The function to call\n * @param {number} delay The time to wait\n */\nexport default function timer(callback, delay) {\n\tlet id\n\tlet started\n\tlet remaining = delay\n\tlet running\n\n\tthis.start = function() {\n\t\trunning = true\n\t\tstarted = new Date()\n\t\tid = setTimeout(callback, remaining)\n\t}\n\n\tthis.pause = function() {\n\t\trunning = false\n\t\tclearTimeout(id)\n\t\tremaining -= new Date() - started\n\t}\n\n\tthis.clear = function() {\n\t\trunning = false\n\t\tclearTimeout(id)\n\t\tremaining = 0\n\t}\n\n\tthis.getTimeLeft = function() {\n\t\tif (running) {\n\t\t\tthis.pause()\n\t\t\tthis.start()\n\t\t}\n\n\t\treturn remaining\n\t}\n\n\tthis.getStateRunning = function() {\n\t\treturn running\n\t}\n\n\tthis.start()\n}\n","<!--\n  - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<docs>\nFor showing the modal you can use either `:show.sync=\"showModal\"` or `v-if` on the `NcModal`,\ndepending on whether you require the Modal to stay within the DOM or not. Do not mix both, as this will break the out transition animation.\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"showModal\">Show Modal</NcButton>\n\t\t<NcModal\n\t\t\t:show.sync=\"modal\"\n\t\t\t@close=\"closeModal\"\n\t\t\tsize=\"small\"\n\t\t\tname=\"Name\"\n\t\t\t:outTransition=\"true\"\n\t\t\t:hasNext=\"true\"\n\t\t\t:hasPrevious=\"true\">\n\t\t\t<div class=\"modal__content\">Hello world</div>\n\t\t</NcModal>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tmodal: false\n\t\t}\n\t},\n\tmethods: {\n\t\tshowModal() {\n\t\t\tthis.modal = true\n\t\t},\n\t\tcloseModal() {\n\t\t\tthis.modal = false\n\t\t}\n\t}\n}\n</script>\n<style scoped>\n.modal__content {\n\tmargin: 50px;\n\ttext-align: center;\n}\n</style>\n```\n\n### Modal with more properties\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"showModal\">Show Modal with fields</NcButton>\n\t\t<NcModal\n\t\t\tv-if=\"modal\"\n\t\t\tref=\"modalRef\"\n\t\t\t@close=\"closeModal\"\n\t\t\tname=\"Name inside modal\">\n\t\t\t<div class=\"modal__content\">\n\t\t\t\t<h2>Please enter your name</h2>\n\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t<NcTextField label=\"First Name\" :value.sync=\"firstName\" />\n\t\t\t\t</div>\n\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t<NcTextField label=\"Last Name\" :value.sync=\"lastName\" />\n\t\t\t\t</div>\n\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t<label for=\"pizza\">What is the most important pizza item?</label>\n\t\t\t\t\t<NcSelect input-id=\"pizza\" :options=\"['Cheese', 'Tomatos', 'Pineapples']\" v-model=\"pizza\" />\n\t\t\t\t</div>\n\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t<label for=\"emoji-trigger\">Select your favorite emoji</label>\n\t\t\t\t\t<NcEmojiPicker v-if=\"modalRef\" :container=\"modalRef.$el\">\n\t\t\t\t\t\t<NcButton id=\"emoji-trigger\">Select</NcButton>\n\t\t\t\t\t</NcEmojiPicker>\n\t\t\t\t</div>\n\n\t\t\t\t<NcButton\n\t\t\t\t\t:disabled=\"!firstName || !lastName || !pizza\"\n\t\t\t\t\t@click=\"closeModal\"\n\t\t\t\t\ttype=\"primary\">\n\t\t\t\t\tSubmit\n\t\t\t\t</NcButton>\n\t\t\t</div>\n\t\t</NcModal>\n\t</div>\n</template>\n<script>\nimport { ref } from 'vue'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmodalRef: ref(null),\n\t\t}\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tmodal: false,\n\t\t\tfirstName: '',\n\t\t\tlastName: '',\n\t\t\tpizza: [],\n\t\t}\n\t},\n\tmethods: {\n\t\tshowModal() {\n\t\t\tthis.firstName = ''\n\t\t\tthis.lastName = ''\n\t\t\tthis.modal = true\n\t\t},\n\t\tcloseModal() {\n\t\t\tthis.modal = false\n\t\t}\n\t}\n}\n</script>\n<style scoped>\n.modal__content {\n\tmargin: 50px;\n}\n\n.modal__content h2 {\n\ttext-align: center;\n}\n\n.form-group {\n\tmargin: calc(var(--default-grid-baseline) * 4) 0;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: flex-start;\n}\n</style>\n```\n\n### Usage of popover in modal\n\n* Set container property to .modal-mask to inject popover context of the modal:\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"showModal\">Show Modal</NcButton>\n\t\t<NcModal v-if=\"modal\" @close=\"closeModal\" size=\"small\" class=\"emoji-modal\">\n\t\t\t<NcEmojiPicker container=\".emoji-modal\" @select=\"select\">\n\t\t\t\t<NcButton>Select emoji {{ emoji }}</NcButton>\n\t\t\t</NcEmojiPicker>\n\t\t</NcModal>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\temoji: '😛',\n\t\t\tmodal: false\n\t\t}\n\t},\n\tmethods: {\n\t\tshowModal() {\n\t\t\tthis.modal = true\n\t\t},\n\t\tcloseModal() {\n\t\t\tthis.modal = false\n\t\t},\n\t\tselect(emoji) {\n\t\t\tthis.emoji = emoji\n\t\t},\n\t},\n}\n</script>\n<style scoped>\n.modal__content {\n\tmargin: 50px;\n\ttext-align: center;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<transition name=\"fade\"\n\t\tappear\n\t\t@after-enter=\"useFocusTrap\"\n\t\t@before-leave=\"clearFocusTrap\">\n\t\t<div v-show=\"showModal\"\n\t\t\tref=\"mask\"\n\t\t\tclass=\"modal-mask\"\n\t\t\t:class=\"{ 'modal-mask--dark': dark }\"\n\t\t\t:style=\"cssVariables\"\n\t\t\trole=\"dialog\"\n\t\t\taria-modal=\"true\"\n\t\t\t:aria-labelledby=\"'modal-name-' + randId\"\n\t\t\t:aria-describedby=\"'modal-description-' + randId\"\n\t\t\ttabindex=\"-1\">\n\t\t\t<!-- Header -->\n\t\t\t<transition name=\"fade-visibility\" appear>\n\t\t\t\t<div class=\"modal-header\">\n\t\t\t\t\t<h2 v-if=\"name.trim() !== ''\"\n\t\t\t\t\t\t:id=\"'modal-name-' + randId\"\n\t\t\t\t\t\tclass=\"modal-name\">\n\t\t\t\t\t\t{{ name }}\n\t\t\t\t\t</h2>\n\t\t\t\t\t<div class=\"icons-menu\">\n\t\t\t\t\t\t<!-- Play-pause toggle -->\n\t\t\t\t\t\t<button v-if=\"hasNext && enableSlideshow\"\n\t\t\t\t\t\t\tv-tooltip.auto=\"playPauseName\"\n\t\t\t\t\t\t\t:class=\"{ 'play-pause-icons--paused': slideshowPaused }\"\n\t\t\t\t\t\t\tclass=\"play-pause-icons\"\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t@click=\"togglePlayPause\">\n\t\t\t\t\t\t\t<!-- Play/pause icons -->\n\t\t\t\t\t\t\t<Play v-if=\"!playing\"\n\t\t\t\t\t\t\t\t:size=\"iconSize\"\n\t\t\t\t\t\t\t\tclass=\"play-pause-icons__play\" />\n\t\t\t\t\t\t\t<Pause v-else\n\t\t\t\t\t\t\t\t:size=\"iconSize\"\n\t\t\t\t\t\t\t\tclass=\"play-pause-icons__pause\" />\n\t\t\t\t\t\t\t<span class=\"hidden-visually\">\n\t\t\t\t\t\t\t\t{{ playPauseName }}\n\t\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t\t<!-- Progress circle, css animated -->\n\t\t\t\t\t\t\t<svg v-if=\"playing\"\n\t\t\t\t\t\t\t\tclass=\"progress-ring\"\n\t\t\t\t\t\t\t\theight=\"50\"\n\t\t\t\t\t\t\t\twidth=\"50\">\n\t\t\t\t\t\t\t\t<circle class=\"progress-ring__circle\"\n\t\t\t\t\t\t\t\t\tstroke=\"white\"\n\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\t\t\t\t\tfill=\"transparent\"\n\t\t\t\t\t\t\t\t\tr=\"15\"\n\t\t\t\t\t\t\t\t\tcx=\"25\"\n\t\t\t\t\t\t\t\t\tcy=\"25\" />\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</button>\n\n\t\t\t\t\t\t<!-- Actions menu -->\n\t\t\t\t\t\t<NcActions class=\"header-actions\" :inline=\"inlineActions\">\n\t\t\t\t\t\t\t<!-- @slot List of actions to show -->\n\t\t\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t\t\t</NcActions>\n\n\t\t\t\t\t\t<!-- Close modal -->\n\t\t\t\t\t\t<NcButton v-if=\"canClose && !closeButtonContained\"\n\t\t\t\t\t\t\t:aria-label=\"closeButtonAriaLabel\"\n\t\t\t\t\t\t\tclass=\"header-close\"\n\t\t\t\t\t\t\ttype=\"tertiary\"\n\t\t\t\t\t\t\t@click=\"close\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Close :size=\"iconSize\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</transition>\n\n\t\t\t<!-- Content wrapper -->\n\t\t\t<transition :name=\"modalTransitionName\" appear>\n\t\t\t\t<div v-show=\"showModal\"\n\t\t\t\t\t:class=\"[\n\t\t\t\t\t\t`modal-wrapper--${size}`,\n\t\t\t\t\t\t{ 'modal-wrapper--spread-navigation': spreadNavigation },\n\t\t\t\t\t]\"\n\t\t\t\t\tclass=\"modal-wrapper\"\n\t\t\t\t\t@mousedown.self=\"handleClickModalWrapper\">\n\t\t\t\t\t<!-- Navigation button -->\n\t\t\t\t\t<transition name=\"fade-visibility\" appear>\n\t\t\t\t\t\t<NcButton v-show=\"hasPrevious\"\n\t\t\t\t\t\t\ttype=\"tertiary-no-background\"\n\t\t\t\t\t\t\tclass=\"prev\"\n\t\t\t\t\t\t\t:aria-label=\"prevButtonAriaLabel\"\n\t\t\t\t\t\t\t@click=\"previous\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<ChevronLeft :size=\"40\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t</transition>\n\n\t\t\t\t\t<!-- Content -->\n\t\t\t\t\t<div :id=\"'modal-description-' + randId\" class=\"modal-container\">\n\t\t\t\t\t\t<!-- Close modal -->\n\t\t\t\t\t\t<NcButton v-if=\"canClose && closeButtonContained\"\n\t\t\t\t\t\t\ttype=\"tertiary\"\n\t\t\t\t\t\t\tclass=\"modal-container__close\"\n\t\t\t\t\t\t\t:aria-label=\"closeButtonAriaLabel\"\n\t\t\t\t\t\t\t@click=\"close\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Close :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t<div class=\"modal-container__content\">\n\t\t\t\t\t\t\t<!-- @slot Modal content to render -->\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- Navigation button -->\n\t\t\t\t\t<transition name=\"fade-visibility\" appear>\n\t\t\t\t\t\t<NcButton v-show=\"hasNext\"\n\t\t\t\t\t\t\ttype=\"tertiary-no-background\"\n\t\t\t\t\t\t\tclass=\"next\"\n\t\t\t\t\t\t\t:aria-label=\"nextButtonAriaLabel\"\n\t\t\t\t\t\t\t@click=\"next\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<ChevronRight :size=\"40\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t</transition>\n\t\t\t\t</div>\n\t\t\t</transition>\n\t\t</div>\n\t</transition>\n</template>\n\n<script>\nimport { getTrapStack } from '../../utils/focusTrap.js'\nimport { t } from '../../l10n.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport l10n from '../../mixins/l10n.js'\nimport NcActions from '../NcActions/index.js'\nimport NcButton from '../../components/NcButton/index.js'\nimport Timer from '../../utils/Timer.js'\nimport Tooltip from '../../directives/Tooltip/index.js'\n\nimport ChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'\nimport ChevronRight from 'vue-material-design-icons/ChevronRight.vue'\nimport Close from 'vue-material-design-icons/Close.vue'\nimport Pause from 'vue-material-design-icons/Pause.vue'\nimport Play from 'vue-material-design-icons/Play.vue'\n\nimport { createFocusTrap } from 'focus-trap'\nimport { useSwipe } from '@vueuse/core'\n\nexport default {\n\tname: 'NcModal',\n\n\tcomponents: {\n\t\tNcActions,\n\t\tChevronLeft,\n\t\tChevronRight,\n\t\tClose,\n\t\tPause,\n\t\tPlay,\n\t\tNcButton,\n\t},\n\n\tdirectives: {\n\t\ttooltip: Tooltip,\n\t},\n\n\tmixins: [l10n],\n\n\tprops: {\n\t\t/**\n\t\t * Name to be shown with the modal\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * Declare if a previous slide is available\n\t\t */\n\t\thasPrevious: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Declare if a next slide is available\n\t\t */\n\t\thasNext: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Declare if hiding the modal should be animated\n\t\t */\n\t\toutTransition: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Declare if the slideshow functionality should be enabled\n\t\t */\n\t\tenableSlideshow: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Declare the slide interval\n\t\t */\n\t\tslideshowDelay: {\n\t\t\ttype: Number,\n\t\t\tdefault: 5000,\n\t\t},\n\t\t/**\n\t\t * Allow to pause an ongoing slideshow\n\t\t */\n\t\tslideshowPaused: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Enable swipe between slides\n\t\t */\n\t\tenableSwipe: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\tspreadNavigation: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Defines the modal size.\n\t\t * Default is 'normal'.\n\t\t * Available are 'small', 'normal', 'large' and 'full'.\n\t\t * All sizes except 'small' change automatically to full-screen on mobile.\n\t\t */\n\t\tsize: {\n\t\t\ttype: String,\n\t\t\tdefault: 'normal',\n\t\t\tvalidator: size => {\n\t\t\t\treturn ['small', 'normal', 'large', 'full'].includes(size)\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * Declare if the modal can be closed\n\t\t */\n\t\tcanClose: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Close the modal if the user clicked outside of the modal\n\t\t * Only relevant if `canClose` is set to true.\n\t\t */\n\t\tcloseOnClickOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/** Makes the modal backdrop black if true  */\n\t\tdark: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Selector for the modal container, pass `null` to prevent automatic container mounting\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: [String, null],\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/**\n\t\t * Pass in false if you want the modal 'close' button to be displayed\n\t\t * outside the modal boundaries, in the top right corner of the window\n\t\t */\n\t\tcloseButtonContained: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Additional elements to add to the focus trap\n\t\t */\n\t\tadditionalTrapElements: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/**\n\t\t * Display x items inline\n\t\t *\n\t\t * @see Actions component usage\n\t\t */\n\t\tinlineActions: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t},\n\n\t\tshow: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: undefined,\n\t\t},\n\t},\n\n\temits: [\n\t\t'previous',\n\t\t'next',\n\t\t'close',\n\t\t'update:show',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tmc: null,\n\t\t\tplaying: false,\n\t\t\tslideshowTimeout: null,\n\t\t\ticonSize: 24,\n\t\t\tfocusTrap: null,\n\t\t\trandId: GenRandomId(),\n\t\t\tinternalShow: true,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tshowModal() {\n\t\t\treturn (this.show === undefined) ? this.internalShow : this.show\n\t\t},\n\t\tmodalTransitionName() {\n\t\t\treturn `modal-${this.outTransition ? 'out' : 'in'}`\n\t\t},\n\t\tplayPauseName() {\n\t\t\treturn this.playing ? t('Pause slideshow') : t('Start slideshow')\n\t\t},\n\t\tcssVariables() {\n\t\t\treturn {\n\t\t\t\t'--slideshow-duration': this.slideshowDelay + 'ms',\n\t\t\t\t'--icon-size': this.iconSize + 'px',\n\t\t\t}\n\t\t},\n\n\t\tcloseButtonAriaLabel() {\n\t\t\treturn t('Close modal')\n\t\t},\n\t\tprevButtonAriaLabel() {\n\t\t\treturn t('Previous')\n\t\t},\n\t\tnextButtonAriaLabel() {\n\t\t\treturn t('Next')\n\t\t},\n\t},\n\n\twatch: {\n\t\t/**\n\t\t * Handle play/pause of an ongoing slideshow\n\t\t *\n\t\t * @param {boolean} paused is the player paused\n\t\t */\n\t\tslideshowPaused(paused) {\n\t\t\tif (this.slideshowTimeout) {\n\t\t\t\tif (paused) {\n\t\t\t\t\tthis.slideshowTimeout.pause()\n\t\t\t\t} else {\n\t\t\t\t\tthis.slideshowTimeout.start()\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\tadditionalTrapElements(elements) {\n\t\t\tif (this.focusTrap) {\n\t\t\t\tconst contentContainer = this.$refs.mask\n\t\t\t\tthis.focusTrap.updateContainerElements([contentContainer, ...elements])\n\t\t\t}\n\t\t},\n\t},\n\n\tbeforeMount() {\n\t\twindow.addEventListener('keydown', this.handleKeydown)\n\t},\n\tbeforeDestroy() {\n\t\twindow.removeEventListener('keydown', this.handleKeydown)\n\t\tthis.mc.stop()\n\t},\n\tmounted() {\n\t\t// init clear view\n\t\tthis.useFocusTrap()\n\t\tthis.mc = useSwipe(this.$refs.mask, {\n\t\t\tonSwipeEnd: this.handleSwipe,\n\t\t})\n\n\t\tif (this.container) {\n\t\t\tif (this.container === 'body') {\n\t\t\t\t// force mount the component to body\n\t\t\t\tdocument.body.insertBefore(this.$el, document.body.lastChild)\n\t\t\t} else {\n\t\t\t\tconst container = document.querySelector(this.container)\n\t\t\t\tcontainer.appendChild(this.$el)\n\t\t\t}\n\t\t}\n\t},\n\tdestroyed() {\n\t\tthis.clearFocusTrap()\n\t\tthis.$el.remove()\n\t},\n\n\tmethods: {\n\t\t// Events emitters\n\t\tprevious(event) {\n\t\t\t// do not send the event if nothing is available\n\t\t\tif (this.hasPrevious) {\n\t\t\t\t// if data is set, then it's a user mouse event\n\t\t\t\t// and not the slideshow handler, therefore\n\t\t\t\t// we reset the timer\n\t\t\t\tif (event) {\n\t\t\t\t\tthis.resetSlideshow()\n\t\t\t\t}\n\t\t\t\tthis.$emit('previous', event)\n\t\t\t}\n\t\t},\n\t\tnext(event) {\n\t\t\t// do not send the event if nothing is available\n\t\t\tif (this.hasNext) {\n\t\t\t\t// if data is set, then it's a mouse event\n\t\t\t\t// and not the slideshow handler, therefore\n\t\t\t\t// we reset the timer\n\t\t\t\tif (event) {\n\t\t\t\t\tthis.resetSlideshow()\n\t\t\t\t}\n\t\t\t\tthis.$emit('next', event)\n\t\t\t}\n\t\t},\n\t\tclose(data) {\n\t\t\t// do not fire event if forbidden\n\t\t\tif (this.canClose) {\n\t\t\t\t// We set internalShow here, so the out transitions properly run before the component is destroyed\n\t\t\t\tthis.internalShow = false\n\t\t\t\tthis.$emit('update:show', false)\n\n\t\t\t\t// delay closing for animation\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t/**\n\t\t\t\t\t * Emitted when the closing animation is finished\n\t\t\t\t\t */\n\t\t\t\t\tthis.$emit('close', data)\n\t\t\t\t}, 300)\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Handle click on modal wrapper\n\t\t * If `closeOnClickOutside` is set the modal will be closed\n\t\t *\n\t\t * @param {MouseEvent} event The click event\n\t\t */\n\t\thandleClickModalWrapper(event) {\n\t\t\tif (this.closeOnClickOutside) {\n\t\t\t\tthis.close(event)\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * @param {KeyboardEvent} event - keyboard event\n\t\t */\n\t\thandleKeydown(event) {\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\tconst trapStack = getTrapStack()\n\t\t\t\t// Only close the most recent focus trap modal\n\t\t\t\tif (trapStack.length > 0 && trapStack[trapStack.length - 1] !== this.focusTrap) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\treturn this.close(event)\n\t\t\t}\n\n\t\t\tconst arrowHandlers = {\n\t\t\t\tArrowLeft: this.previous,\n\t\t\t\tArrowRight: this.next,\n\t\t\t}\n\t\t\tif (arrowHandlers[event.key]) {\n\t\t\t\t// Ignore arrow navigation, if there is a current focus outside the modal.\n\t\t\t\t// For example, when the focus is in Sidebar or NcActions's items,\n\t\t\t\t// arrow navigation should not be intercept by modal slider\n\t\t\t\tif (document.activeElement && !this.$el.contains(document.activeElement)) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\treturn arrowHandlers[event.key](event)\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * handle the swipe event\n\t\t *\n\t\t * @param {TouchEvent} e The touch event\n\t\t * @param {import('@vueuse/core').SwipeDirection} direction Swipe direction\n\t\t */\n\t\thandleSwipe(e, direction) {\n\t\t\tif (this.enableSwipe) {\n\t\t\t\tif (direction === 'left') {\n\t\t\t\t\t// swiping to left to go to the next item\n\t\t\t\t\tthis.next(e)\n\t\t\t\t} else if (direction === 'right') {\n\t\t\t\t\t// swiping to right to go back to the previous item\n\t\t\t\t\tthis.previous(e)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Toggle the slideshow state\n\t\t */\n\t\ttogglePlayPause() {\n\t\t\tthis.playing = !this.playing\n\t\t\tif (this.playing) {\n\t\t\t\tthis.handleSlideshow()\n\t\t\t} else {\n\t\t\t\tthis.clearSlideshowTimeout()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Reset the slideshow timer and keep going if it was on\n\t\t */\n\t\tresetSlideshow() {\n\t\t\tthis.playing = !this.playing\n\t\t\tthis.clearSlideshowTimeout()\n\t\t\tthis.$nextTick(function() {\n\t\t\t\tthis.togglePlayPause()\n\t\t\t})\n\t\t},\n\n\t\t/**\n\t\t * Handle the slideshow timer and next event\n\t\t */\n\t\thandleSlideshow() {\n\t\t\tthis.playing = true\n\t\t\tif (this.hasNext) {\n\t\t\t\tthis.slideshowTimeout = new Timer(() => {\n\t\t\t\t\tthis.next()\n\t\t\t\t\tthis.handleSlideshow()\n\t\t\t\t}, this.slideshowDelay)\n\t\t\t} else {\n\t\t\t\tthis.playing = false\n\t\t\t\tthis.clearSlideshowTimeout()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Clear slideshowTimeout if ongoing\n\t\t */\n\t\tclearSlideshowTimeout() {\n\t\t\tif (this.slideshowTimeout) {\n\t\t\t\tthis.slideshowTimeout.clear()\n\t\t\t}\n\t\t},\n\t\t/**\n\t\t * Add focus trap for accessibility.\n\t\t */\n\t\tasync useFocusTrap() {\n\t\t\t// Don't do anything if the modal is hidden,\n\t\t\t// or we have a focus trap already\n\t\t\tif (!this.showModal || this.focusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst contentContainer = this.$refs.mask\n\t\t\t// wait until all children are mounted and available in the DOM before focusTrap can be added\n\t\t\tawait this.$nextTick()\n\n\t\t\tconst options = {\n\t\t\t\tallowOutsideClick: true,\n\t\t\t\tfallbackFocus: contentContainer,\n\t\t\t\ttrapStack: getTrapStack(),\n\t\t\t\t// Esc can be used without stop in content or additionalTrapElements where it should not deacxtivate modal's focus trap.\n\t\t\t\t// Focus trap is deactivated on modal close anyway.\n\t\t\t\tescapeDeactivates: false,\n\t\t\t}\n\n\t\t\t// Init focus trap\n\t\t\tthis.focusTrap = createFocusTrap([contentContainer, ...this.additionalTrapElements], options)\n\t\t\tthis.focusTrap.activate()\n\t\t},\n\t\tclearFocusTrap() {\n\t\t\tif (!this.focusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.focusTrap?.deactivate()\n\t\t\tthis.focusTrap = null\n\t\t},\n\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.modal-mask {\n\tposition: fixed;\n\tz-index: 9998;\n\ttop: 0;\n\tleft: 0;\n\tdisplay: block;\n\twidth: 100%;\n\theight: 100%;\n\tbackground-color: rgba(0, 0, 0, .5);\n\t&--dark {\n\t\tbackground-color: rgba(0, 0, 0, .92);\n\t}\n}\n\n.modal-header {\n\tposition: absolute;\n\tz-index: 10001;\n\ttop: 0;\n\tright: 0;\n\tleft: 0;\n\t// prevent vue show to use display:none and reseting\n\t// the circle animation loop\n\tdisplay: flex !important;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 100%;\n\theight: $header-height;\n\toverflow: hidden;\n\ttransition: opacity 250ms, visibility 250ms;\n\n\t.modal-name {\n\t\toverflow-x: hidden;\n\t\tbox-sizing: border-box;\n\t\twidth: 100%;\n\t\tpadding: 0 #{$clickable-area * 3} 0 12px; // maximum actions is 3\n\t\ttransition: padding ease 100ms;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\tcolor: #fff;\n\t\tfont-size: $icon-margin;\n\t\tmargin-bottom: 0;\n\t}\n\n\t// On wider screens the name can be centered\n\t@media only screen and (min-width: $breakpoint-mobile) {\n\t\t.modal-name {\n\t\t\tpadding-left: #{$clickable-area * 3}; // maximum actions is 3\n\t\t\ttext-align: center;\n\t\t}\n\t}\n\n\t.icons-menu {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: flex-end;\n\n\t\t.header-close {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: math.div($header-height - $clickable-area, 2);\n\t\t\tpadding: 0;\n\t\t}\n\n\t\t.play-pause-icons {\n\t\t\tposition: relative;\n\t\t\twidth: $header-height;\n\t\t\theight: $header-height;\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\tcursor: pointer;\n\t\t\tborder: none;\n\t\t\tbackground-color: transparent;\n\t\t\t&:hover,\n\t\t\t&:focus {\n\t\t\t\t.play-pause-icons__play,\n\t\t\t\t.play-pause-icons__pause {\n\t\t\t\t\topacity: $opacity_full;\n\t\t\t\t\tborder-radius: math.div($clickable-area, 2);\n\t\t\t\t\tbackground-color: $icon-focus-bg;\n\t\t\t\t}\n\t\t\t}\n\t\t\t&__play,\n\t\t\t&__pause {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: $clickable-area;\n\t\t\t\theight: $clickable-area;\n\t\t\t\tmargin: math.div($header-height - $clickable-area, 2);\n\t\t\t\tcursor: pointer;\n\t\t\t\topacity: $opacity_normal;\n\t\t\t}\n\t\t}\n\n\t\t.header-actions {\n\t\t\tcolor: white;\n\t\t}\n\n\t\t&:deep() .action-item {\n\t\t\tmargin: math.div($header-height - $clickable-area, 2);\n\n\t\t\t&--single {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: $clickable-area;\n\t\t\t\theight: $clickable-area;\n\t\t\t\tcursor: pointer;\n\t\t\t\tbackground-position: center;\n\t\t\t\tbackground-size: 22px;\n\t\t\t}\n\t\t}\n\n\t\t:deep(button) {\n\t\t\t// force white instead of default main text\n\t\t\tcolor: #fff;\n\t\t}\n\n\t\t// Force the Actions menu icon to be the same size as other icons\n\t\t&:deep(.action-item__menutoggle) {\n\t\t\tpadding: 0;\n\t\t\tspan, svg {\n\t\t\t\twidth: var(--icon-size);\n\t\t\t\theight: var(--icon-size);\n\t\t\t}\n\t\t}\n\t}\n}\n\n.modal-wrapper {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbox-sizing: border-box;\n\twidth: 100%;\n\theight: 100%;\n\n\t/* Navigation buttons */\n\t.prev,\n\t.next {\n\t\tz-index: 10000;\n\t\theight: 35vh;\n\t\tmin-height: 300px;\n\t\tposition: absolute;\n\t\ttransition: opacity 250ms;\n\t\t// hover the mask\n\t\tcolor: white;\n\n\t\t&:focus-visible {\n\t\t\t// Override NcButton focus styles\n\t\t\tbox-shadow: 0 0 0 2px var(--color-primary-element-text);\n\t\t\tbackground-color: var(--color-box-shadow);\n\t\t}\n\t}\n\n\t.prev {\n\t\tleft: 2px;\n\t}\n\t.next {\n\t\tright: 2px;\n\t}\n\n\t/* Content */\n\t.modal-container {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\tpadding: 0;\n\t\ttransition: transform 300ms ease;\n\t\tborder-radius: var(--border-radius-large);\n\t\tbackground-color: var(--color-main-background);\n\t\tcolor: var(--color-main-text);\n\t\tbox-shadow: 0 0 40px rgba(0, 0, 0, .2);\n\n\t\t&__close {\n\t\t\t// Ensure the close button is always ontop of the content\n\t\t\tz-index: 1;\n\t\t\tposition: absolute;\n\t\t\ttop: 4px;\n\t\t\tright: 4px;\n\t\t}\n\n\t\t&__content {\n\t\t\twidth: 100%;\n\t\t\tmin-height: 52px; // At least the close button shall fit in\n\t\t\toverflow: auto; // avoids unecessary hacks if the content should be bigger than the modal\n\t\t}\n\t}\n\n\t// We allow 90% max-height, but we need to ensure the header does not overlap the modal\n\t// as the modal is centered, we need the space on top and bottom\n\t$max-modal-height: min(90%, calc(100% - 2 * $header-height));\n\n\t// Sizing\n\t&--small {\n\t\t.modal-container {\n\t\t\twidth: 400px;\n\t\t\tmax-width: 90%;\n\t\t\tmax-height: $max-modal-height;\n\t\t}\n\t}\n\t&--normal {\n\t\t.modal-container {\n\t\t\tmax-width: 90%;\n\t\t\twidth: 600px;\n\t\t\tmax-height: $max-modal-height;\n\t\t}\n\t}\n\t&--large {\n\t\t.modal-container {\n\t\t\tmax-width: 90%;\n\t\t\twidth: 900px;\n\t\t\tmax-height: $max-modal-height;\n\t\t}\n\t}\n\t&--full {\n\t\t.modal-container {\n\t\t\twidth: 100%;\n\t\t\theight: calc(100% - var(--header-height));\n\t\t\tposition: absolute;\n\t\t\ttop: $header-height;\n\t\t\tborder-radius: 0;\n\t\t}\n\t}\n\n\t// Make modal full screen on mobile\n\t@media only screen and (max-width: math.div($breakpoint-mobile, 2)) {\n\t\t.modal-container {\n\t\t\tmax-width: initial;\n\t\t\twidth: 100%;\n\t\t\tmax-height: initial;\n\t\t\theight: calc(100% - var(--header-height));\n\t\t\tposition: absolute;\n\t\t\ttop: $header-height;\n\t\t\tborder-radius: 0;\n\t\t}\n\t}\n}\n\n/* TRANSITIONS */\n.fade-enter-active,\n.fade-leave-active {\n\ttransition: opacity 250ms;\n}\n\n.fade-enter,\n.fade-leave-to {\n\topacity: 0;\n}\n\n.fade-visibility-enter,\n.fade-visibility-leave-to {\n\tvisibility: hidden;\n\topacity: 0;\n}\n\n.modal-in-enter-active,\n.modal-in-leave-active,\n.modal-out-enter-active,\n.modal-out-leave-active {\n\ttransition: opacity 250ms;\n}\n\n.modal-in-enter,\n.modal-in-leave-to,\n.modal-out-enter,\n.modal-out-leave-to {\n\topacity: 0;\n}\n\n.modal-in-enter .modal-container,\n.modal-in-leave-to .modal-container {\n\ttransform: scale(.9);\n}\n\n.modal-out-enter .modal-container,\n.modal-out-leave-to .modal-container {\n\ttransform: scale(1.1);\n}\n\n// animated circle\n$radius: 15;\n$pi: 3.14159265358979;\n\n.modal-mask .play-pause-icons {\n\t.progress-ring {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\ttransform: rotate(-90deg);\n\t\t.progress-ring__circle {\n\t\t\ttransition: 100ms stroke-dashoffset;\n\t\t\ttransform-origin: 50% 50%; // axis compensation\n\t\t\tanimation: progressring linear var(--slideshow-duration) infinite;\n\n\t\t\tstroke-linecap: round;\n\t\t\tstroke-dashoffset: $radius * 2 * $pi; // radius * 2 * PI\n\t\t\tstroke-dasharray: $radius * 2 * $pi; // radius * 2 * PI\n\t\t}\n\t}\n\t&--paused {\n\t\t.icon-pause {\n\t\t\tanimation: breath 2s cubic-bezier(.4, 0, .2, 1) infinite;\n\t\t}\n\t\t.progress-ring__circle {\n\t\t\tanimation-play-state: paused !important;\n\t\t}\n\t}\n}\n\n// keyframes get scoped too and break the animation name, we need them unscoped\n@keyframes progressring {\n\tfrom {\n\t\tstroke-dashoffset: $radius * 2 * $pi; // radius * 2 * PI\n\t}\n\tto {\n\t\tstroke-dashoffset: 0;\n\t}\n}\n\n@keyframes breath {\n\t0% {\n\t\topacity: 1;\n\t}\n\t50% {\n\t\topacity: 0;\n\t}\n\t100% {\n\t\topacity: 1;\n\t}\n}\n\n</style>\n","/**\n * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n *\n * @author John Molakvoæ <skjnldsv@protonmail.com>\n *\n * @license AGPL-3.0-or-later\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU Affero General Public License as\n * published by the Free Software Foundation, either version 3 of the\n * License, or (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU Affero General Public License for more details.\n *\n * You should have received a copy of the GNU Affero General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n *\n */\nimport ScopeComponent from '../../utils/ScopeComponent.js'\nimport NcModal from './NcModal.vue'\n\nScopeComponent(NcModal)\n\nexport default NcModal\n"],"names":["timer","callback","delay","id","started","remaining","running","_sfc_main","NcActions","ChevronLeft","ChevronRight","Close","Pause","Play","NcButton","VTooltip","l10n","size","GenRandomId","t","paused","elements","contentContainer","useSwipe","event","data","trapStack","getTrapStack","arrowHandlers","e","direction","options","createFocusTrap","_a","ScopeComponent","NcModal"],"mappings":"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"}