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

package/dist/Components/NcModal.cjs

@@ -1 +1,403 @@
-var _=require("../assets/index-852d8576.css");const l=require("../chunks/ScopeComponent-4b8bd1ee.cjs"),u=require("../chunks/focusTrap-139520e2.cjs"),i=require("../chunks/l10n-46d0c1c0.cjs"),c=require("../chunks/GenRandomId-67df40eb.cjs"),d=require("../chunks/l10n-dacb6440.cjs"),h=require("./NcActions.cjs"),p=require("./NcButton.cjs");require("../Directives/Tooltip.cjs");const m=require("vue-material-design-icons/ChevronLeft.vue"),y=require("vue-material-design-icons/ChevronRight.vue"),w=require("vue-material-design-icons/Close.vue"),f=require("vue-material-design-icons/Pause.vue"),v=require("vue-material-design-icons/Play.vue"),g=require("focus-trap"),T=require("@vueuse/core"),C=require("../chunks/_plugin-vue2_normalizer-764a4c12.cjs"),b=require("floating-vue");function S(e,t){let s,n,o=t,a;this.start=function(){a=!0,n=new Date,s=setTimeout(e,o)},this.pause=function(){a=!1,clearTimeout(s),o-=new Date-n},this.clear=function(){a=!1,clearTimeout(s),o=0},this.getTimeLeft=function(){return a&&(this.pause(),this.start()),o},this.getStateRunning=function(){return a},this.start()}const k={name:"NcModal",components:{NcActions:h,ChevronLeft:m,ChevronRight:y,Close:w,Pause:f,Play:v,NcButton:p},directives:{tooltip:b.VTooltip},mixins:[d.l10n],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.GenRandomId(),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.t("Pause slideshow"):i.t("Start slideshow")},cssVariables(){return{"--slideshow-duration":this.slideshowDelay+"ms","--icon-size":this.iconSize+"px"}},closeButtonAriaLabel(){return i.t("Close modal")},prevButtonAriaLabel(){return i.t("Previous")},nextButtonAriaLabel(){return i.t("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])}}},beforeMount(){window.addEventListener("keydown",this.handleKeydown)},beforeDestroy(){window.removeEventListener("keydown",this.handleKeydown),this.mc.stop()},mounted(){this.useFocusTrap(),this.mc=T.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))},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 S(()=>{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:u.getTrapStack(),escapeDeactivates:!1};this.focusTrap=g.createFocusTrap([e,...this.additionalTrapElements],t),this.focusTrap.activate()},clearFocusTrap(){var e;this.focusTrap&&((e=this.focusTrap)==null||e.deactivate(),this.focusTrap=null)}}};var x=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(){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(){return[t("ChevronRight",{attrs:{size:40}})]},proxy:!0}])})],1)],1)])],1)])},N=[],B=C.normalizeComponent(k,x,N,!1,null,"27c27b41",null,null);const r=B.exports;l.ScopeComponent(r),module.exports=r;
+var L = require("../assets/index-5ee8a575.css");
+const c = require("../chunks/ScopeComponent-e060526a.cjs"), l = require("../chunks/focusTrap-14985831.cjs"), o = require("../chunks/l10n-b1d264c7.cjs"), d = require("../chunks/GenRandomId-c214d235.cjs"), h = require("../chunks/l10n-c7bd0ea6.cjs"), p = require("./NcActions.cjs"), f = require("./NcButton.cjs");
+require("../Directives/Tooltip.cjs");
+const m = require("vue-material-design-icons/ChevronLeft.vue"), y = require("vue-material-design-icons/ChevronRight.vue"), w = require("vue-material-design-icons/Close.vue"), v = require("vue-material-design-icons/Pause.vue"), _ = require("vue-material-design-icons/Play.vue"), g = require("focus-trap"), C = require("@vueuse/core"), T = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), S = require("floating-vue"), n = (t) => t && t.__esModule ? t : { default: t }, b = /* @__PURE__ */ n(m), k = /* @__PURE__ */ n(y), x = /* @__PURE__ */ n(w), N = /* @__PURE__ */ n(v), B = /* @__PURE__ */ n(_);
+/**
+ * @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 P(t, e) {
+  let s, a, r = e, i;
+  this.start = function() {
+    i = !0, a = /* @__PURE__ */ new Date(), s = setTimeout(t, r);
+  }, this.pause = function() {
+    i = !1, clearTimeout(s), r -= /* @__PURE__ */ new Date() - a;
+  }, this.clear = function() {
+    i = !1, clearTimeout(s), r = 0;
+  }, this.getTimeLeft = function() {
+    return i && (this.pause(), this.start()), r;
+  }, this.getStateRunning = function() {
+    return i;
+  }, this.start();
+}
+const q = {
+  name: "NcModal",
+  components: {
+    NcActions: p,
+    ChevronLeft: b.default,
+    ChevronRight: k.default,
+    Close: x.default,
+    Pause: N.default,
+    Play: B.default,
+    NcButton: f
+  },
+  directives: {
+    tooltip: S.VTooltip
+  },
+  mixins: [h.l10n],
+  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: (t) => ["small", "normal", "large", "full"].includes(t)
+    },
+    /**
+     * 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: d.GenRandomId(),
+      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.t("Pause slideshow") : o.t("Start slideshow");
+    },
+    cssVariables() {
+      return {
+        "--slideshow-duration": this.slideshowDelay + "ms",
+        "--icon-size": this.iconSize + "px"
+      };
+    },
+    closeButtonAriaLabel() {
+      return o.t("Close modal");
+    },
+    prevButtonAriaLabel() {
+      return o.t("Previous");
+    },
+    nextButtonAriaLabel() {
+      return o.t("Next");
+    }
+  },
+  watch: {
+    /**
+     * Handle play/pause of an ongoing slideshow
+     *
+     * @param {boolean} paused is the player paused
+     */
+    slideshowPaused(t) {
+      this.slideshowTimeout && (t ? this.slideshowTimeout.pause() : this.slideshowTimeout.start());
+    },
+    additionalTrapElements(t) {
+      if (this.focusTrap) {
+        const e = this.$refs.mask;
+        this.focusTrap.updateContainerElements([e, ...t]);
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener("keydown", this.handleKeydown);
+  },
+  beforeDestroy() {
+    window.removeEventListener("keydown", this.handleKeydown), this.mc.stop();
+  },
+  mounted() {
+    this.useFocusTrap(), this.mc = C.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));
+  },
+  destroyed() {
+    this.clearFocusTrap(), this.$el.remove();
+  },
+  methods: {
+    // Events emitters
+    previous(t) {
+      this.hasPrevious && (t && this.resetSlideshow(), this.$emit("previous", t));
+    },
+    next(t) {
+      this.hasNext && (t && this.resetSlideshow(), this.$emit("next", t));
+    },
+    close(t) {
+      this.canClose && (this.internalShow = !1, this.$emit("update:show", !1), setTimeout(() => {
+        this.$emit("close", t);
+      }, 300));
+    },
+    /**
+     * Handle click on modal wrapper
+     * If `closeOnClickOutside` is set the modal will be closed
+     *
+     * @param {MouseEvent} event The click event
+     */
+    handleClickModalWrapper(t) {
+      this.closeOnClickOutside && this.close(t);
+    },
+    /**
+     * @param {KeyboardEvent} event - keyboard event
+     */
+    handleKeydown(t) {
+      if (t.key === "Escape") {
+        const s = l.getTrapStack();
+        return s.length > 0 && s[s.length - 1] !== this.focusTrap ? void 0 : this.close(t);
+      }
+      const e = {
+        ArrowLeft: this.previous,
+        ArrowRight: this.next
+      };
+      if (e[t.key])
+        return document.activeElement && !this.$el.contains(document.activeElement) ? void 0 : e[t.key](t);
+    },
+    /**
+     * handle the swipe event
+     *
+     * @param {TouchEvent} e The touch event
+     * @param {import('@vueuse/core').SwipeDirection} direction Swipe direction
+     */
+    handleSwipe(t, e) {
+      this.enableSwipe && (e === "left" ? this.next(t) : e === "right" && this.previous(t));
+    },
+    /**
+     * 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 P(() => {
+        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 t = this.$refs.mask;
+      await this.$nextTick();
+      const e = {
+        allowOutsideClick: !0,
+        fallbackFocus: t,
+        trapStack: l.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
+      };
+      this.focusTrap = g.createFocusTrap([t, ...this.additionalTrapElements], e), this.focusTrap.activate();
+    },
+    clearFocusTrap() {
+      var t;
+      this.focusTrap && ((t = this.focusTrap) == null || t.deactivate(), this.focusTrap = null);
+    }
+  }
+};
+var z = function() {
+  var e = this, s = e._self._c;
+  return s("transition", { attrs: { name: "fade", appear: "" }, on: { "after-enter": e.useFocusTrap, "before-leave": e.clearFocusTrap } }, [s("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" } }, [s("transition", { attrs: { name: "fade-visibility", appear: "" } }, [s("div", { staticClass: "modal-header" }, [e.name.trim() !== "" ? s("h2", { staticClass: "modal-name", attrs: { id: "modal-name-" + e.randId } }, [e._v(" " + e._s(e.name) + " ")]) : e._e(), s("div", { staticClass: "icons-menu" }, [e.hasNext && e.enableSlideshow ? s("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 ? s("Pause", { staticClass: "play-pause-icons__pause", attrs: { size: e.iconSize } }) : s("Play", { staticClass: "play-pause-icons__play", attrs: { size: e.iconSize } }), s("span", { staticClass: "hidden-visually" }, [e._v(" " + e._s(e.playPauseName) + " ")]), e.playing ? s("svg", { staticClass: "progress-ring", attrs: { height: "50", width: "50" } }, [s("circle", { staticClass: "progress-ring__circle", attrs: { stroke: "white", "stroke-width": "2", fill: "transparent", r: "15", cx: "25", cy: "25" } })]) : e._e()], 1) : e._e(), s("NcActions", { staticClass: "header-actions", attrs: { inline: e.inlineActions } }, [e._t("actions")], 2), e.canClose && !e.closeButtonContained ? s("NcButton", { staticClass: "header-close", attrs: { "aria-label": e.closeButtonAriaLabel, type: "tertiary" }, on: { click: e.close }, scopedSlots: e._u([{ key: "icon", fn: function() {
+    return [s("Close", { attrs: { size: e.iconSize } })];
+  }, proxy: !0 }], null, !1, 1841713362) }) : e._e()], 1)])]), s("transition", { attrs: { name: e.modalTransitionName, appear: "" } }, [s("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);
+  } } }, [s("transition", { attrs: { name: "fade-visibility", appear: "" } }, [s("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 [s("ChevronLeft", { attrs: { size: 40 } })];
+  }, proxy: !0 }]) })], 1), s("div", { staticClass: "modal-container", attrs: { id: "modal-description-" + e.randId } }, [e.canClose && e.closeButtonContained ? s("NcButton", { staticClass: "modal-container__close", attrs: { type: "tertiary", "aria-label": e.closeButtonAriaLabel }, on: { click: e.close }, scopedSlots: e._u([{ key: "icon", fn: function() {
+    return [s("Close", { attrs: { size: 20 } })];
+  }, proxy: !0 }], null, !1, 2121748766) }) : e._e(), s("div", { staticClass: "modal-container__content" }, [e._t("default")], 2)], 1), s("transition", { attrs: { name: "fade-visibility", appear: "" } }, [s("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 [s("ChevronRight", { attrs: { size: 40 } })];
+  }, proxy: !0 }]) })], 1)], 1)])], 1)]);
+}, $ = [], A = /* @__PURE__ */ T.normalizeComponent(
+  q,
+  z,
+  $,
+  !1,
+  null,
+  "45e668d9",
+  null,
+  null
+);
+const u = A.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/>.
+ *
+ */
+c.ScopeComponent(u);
+module.exports = u;

package/dist/Components/NcModal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcModal.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"NcModal.cjs","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","Components_NcActions","ChevronLeft__default","ChevronRight__default","Close__default","Pause__default","Play__default","Components_NcButton","floatingVue","l10n","size","GenRandomId","l10n$1","paused","elements","contentContainer","core","event","data","trapStack","focusTrap","arrowHandlers","e","direction","options","focusTrap$1","_a","ScopeComponent"],"mappings":"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"}