@nextcloud/vue 9.0.0-alpha.8 → 9.0.0-rc.0

package/dist/components/NcHeaderButton/NcHeaderButton.vue.d.ts

@@ -15,22 +15,13 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<__VLS_Props>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    click: (event: MouseEvent) => void;
-}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<__VLS_Props>>> & Readonly<{
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (event: MouseEvent) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClick?: ((event: MouseEvent) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/components/NcHeaderButton/index.mjs

@@ -1,4 +1,4 @@
-import { N } from "../../chunks/NcHeaderButton-BsstEWtv.mjs";
+import { N } from "../../chunks/NcHeaderButton-BXfTpkIm.mjs";
 export {
   N as default
 };

package/dist/components/NcHeaderMenu/index.mjs

@@ -1,4 +1,4 @@
-import { N } from "../../chunks/NcHeaderMenu-ZzoCwPvX.mjs";
+import { N } from "../../chunks/NcHeaderMenu-CEH_-KT_.mjs";
 export {
   N as default
 };

package/dist/components/NcIconSvgWrapper/NcIconSvgWrapper.vue.d.ts

@@ -1,4 +1,12 @@
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /**
+     * Make the icon directional, meaning it is langauge direction aware.
+     * If the icon is placed in a right-to-left context it will be mirrored vertically.
+     */
+    directional: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /**
      * Set if the icon should be used as inline content e.g. within text.
      * By default the icon is made a block element for use inside `icon`-slots.
@@ -44,15 +52,15 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
      */
     iconSize(): string;
     cleanSvg(): string | undefined;
-    attributes(): {
-        class: (string | {
-            'icon-vue--inline': boolean;
-        })[];
-        role: string;
-        'aria-hidden': boolean | undefined;
-        'aria-label': string | undefined;
-    };
 }, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /**
+     * Make the icon directional, meaning it is langauge direction aware.
+     * If the icon is placed in a right-to-left context it will be mirrored vertically.
+     */
+    directional: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /**
      * Set if the icon should be used as inline content e.g. within text.
      * By default the icon is made a block element for use inside `icon`-slots.
@@ -93,10 +101,11 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         validator: (value: unknown) => value is number | "auto";
     };
 }>> & Readonly<{}>, {
-    size: string | number;
     name: string;
-    inline: boolean;
-    svg: string;
+    size: string | number;
     path: string;
+    svg: string;
+    inline: boolean;
+    directional: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/components/NcIconSvgWrapper/index.mjs

@@ -1,4 +1,4 @@
-import { N } from "../../chunks/NcIconSvgWrapper-BYTrkA66.mjs";
+import { N } from "../../chunks/NcIconSvgWrapper-Bc3ogp8T.mjs";
 export {
   N as default
 };

package/dist/components/NcInputField/index.mjs

@@ -1,4 +1,4 @@
-import { N } from "../../chunks/NcInputField-DdZlDVwQ.mjs";
+import { N } from "../../chunks/NcInputField-BBS1E7r-.mjs";
 export {
   N as default
 };

package/dist/components/NcListItem/index.mjs

@@ -1,4 +1,4 @@
-import { N } from "../../chunks/NcListItem-DF8Yv05m.mjs";
+import { N } from "../../chunks/NcListItem-CVX52kG-.mjs";
 export {
   N as default
 };

package/dist/components/NcListItemIcon/index.mjs

@@ -1,4 +1,4 @@
-import { N } from "../../chunks/NcListItemIcon-nzw_x2Q5.mjs";
+import { N } from "../../chunks/NcListItemIcon-Cc6vXRrY.mjs";
 export {
   N as default
 };

package/dist/components/NcLoadingIcon/NcLoadingIcon.vue.d.ts

@@ -51,8 +51,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         default: string;
     };
 }>> & Readonly<{}>, {
-    size: number;
     name: string;
+    size: number;
     appearance: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/components/NcModal/index.mjs

@@ -1,19 +1,17 @@
-import '../../assets/index-Du_FXiPy.css';
-import { S as ScopeComponent } from "../../chunks/ScopeComponent-BWZEma4R.mjs";
+import '../../assets/index-CjPwAJ46.css';
+import { S as ScopeComponent } from "../../chunks/ScopeComponent-BIpNSmeE.mjs";
 import { useSwipe } from "@vueuse/core";
+import { b as mdiChevronRight, c as mdiChevronLeft } from "../../chunks/mdi-zYpVOORa.mjs";
 import { createFocusTrap } from "focus-trap";
-import { createElementBlock, openBlock, mergeProps, createElementVNode, createCommentVNode, toDisplayString, resolveComponent, resolveDirective, createBlock, Transition, withCtx, withDirectives, normalizeStyle, normalizeClass, createVNode, renderSlot, withModifiers, vShow, warn } from "vue";
-import { g as getTrapStack } from "../../chunks/focusTrap-DmkaYJTC.mjs";
-import { r as register, C as t34, D as t18, a as t } from "../../chunks/_l10n-7kR7gXFc.mjs";
+import { createElementBlock, openBlock, mergeProps, createElementVNode, createCommentVNode, toDisplayString, resolveComponent, createBlock, Transition, withCtx, withDirectives, normalizeStyle, normalizeClass, createVNode, renderSlot, withModifiers, vShow, warn } from "vue";
 import { c as createElementId } from "../../chunks/createElementId-DhjFt1I9.mjs";
-import { N as NcActions } from "../../chunks/NcActions-CgKHXNbF.mjs";
-import { N as NcButton } from "../../chunks/NcButton-BHLqKKYP.mjs";
-import "../../directives/Tooltip/index.mjs";
-import { C as ChevronLeftIcon } from "../../chunks/ChevronLeft-FfC-tiIS.mjs";
-import { C as ChevronRight } from "../../chunks/ChevronRight-LvtA5_hq.mjs";
+import { g as getTrapStack } from "../../chunks/focusTrap-DmkaYJTC.mjs";
+import { r as register, z as t34, A as t18, a as t } from "../../chunks/_l10n-BNGeEX3W.mjs";
+import { N as NcActions } from "../../chunks/NcActions-DpYAcY6a.mjs";
+import { N as NcButton } from "../../chunks/NcButton-Byg8-ta1.mjs";
+import { N as NcIconSvgWrapper } from "../../chunks/NcIconSvgWrapper-Bc3ogp8T.mjs";
 import { I as IconClose } from "../../chunks/Close-D6ngJ4t9.mjs";
 import { _ as _export_sfc } from "../../chunks/_plugin-vue_export-helper-1tPrXgE0.mjs";
-import { VTooltip } from "floating-vue";
 register(t18, t34);
 function timer(callback, delay) {
   let id;
@@ -136,16 +134,12 @@ const Play = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]
 const _sfc_main = {
   name: "NcModal",
   components: {
-    NcActions,
-    ChevronLeft: ChevronLeftIcon,
-    ChevronRight,
     Close: IconClose,
     Pause,
     Play,
-    NcButton
-  },
-  directives: {
-    tooltip: VTooltip
+    NcActions,
+    NcButton,
+    NcIconSvgWrapper
   },
   props: {
     /**
@@ -260,12 +254,15 @@ const _sfc_main = {
       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
+     * Pass in `true` if you want the modal 'close' button to be displayed
+     * outside the modal boundaries, in the top right corner of the window.
+     *
+     * @default false
+     * @since 8.25.0
      */
-    closeButtonContained: {
+    closeButtonOutside: {
       type: Boolean,
-      default: true
+      default: false
     },
     /**
      * Additional elements to add to the focus trap
@@ -311,6 +308,12 @@ const _sfc_main = {
     "close",
     "update:show"
   ],
+  setup() {
+    return {
+      mdiChevronLeft,
+      mdiChevronRight
+    };
+  },
   data() {
     return {
       mc: null,
@@ -568,24 +571,23 @@ const _hoisted_1 = ["aria-labelledby", "aria-describedby"];
 const _hoisted_2 = ["data-theme-light", "data-theme-dark"];
 const _hoisted_3 = ["id"];
 const _hoisted_4 = { class: "icons-menu" };
-const _hoisted_5 = { class: "hidden-visually" };
-const _hoisted_6 = {
+const _hoisted_5 = ["title"];
+const _hoisted_6 = { class: "hidden-visually" };
+const _hoisted_7 = {
   key: 2,
   class: "progress-ring",
   height: "50",
   width: "50"
 };
-const _hoisted_7 = ["id"];
-const _hoisted_8 = { class: "modal-container__content" };
+const _hoisted_8 = ["id"];
+const _hoisted_9 = { class: "modal-container__content" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Play = resolveComponent("Play");
   const _component_Pause = resolveComponent("Pause");
   const _component_NcActions = resolveComponent("NcActions");
   const _component_Close = resolveComponent("Close");
   const _component_NcButton = resolveComponent("NcButton");
-  const _component_ChevronLeft = resolveComponent("ChevronLeft");
-  const _component_ChevronRight = resolveComponent("ChevronRight");
-  const _directive_tooltip = resolveDirective("tooltip");
+  const _component_NcIconSvgWrapper = resolveComponent("NcIconSvgWrapper");
   return openBlock(), createBlock(Transition, {
     name: "fade",
     appear: "",
@@ -596,7 +598,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       withDirectives(createElementVNode("div", {
         ref: "mask",
         class: normalizeClass(["modal-mask", {
-          "modal-mask--opaque": $props.dark || !$props.closeButtonContained || $props.hasPrevious || $props.hasNext,
+          "modal-mask--opaque": $props.dark || $props.closeButtonOutside || $props.hasPrevious || $props.hasNext,
           "modal-mask--light": $props.lightBackdrop
         }]),
         style: normalizeStyle($options.cssVariables),
@@ -622,9 +624,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 class: "modal-header__name"
               }, toDisplayString($props.name), 9, _hoisted_3)) : createCommentVNode("", true),
               createElementVNode("div", _hoisted_4, [
-                $props.hasNext && $props.enableSlideshow ? withDirectives((openBlock(), createElementBlock("button", {
+                $props.hasNext && $props.enableSlideshow ? (openBlock(), createElementBlock("button", {
                   key: 0,
                   class: normalizeClass([{ "play-pause-icons--paused": $props.slideshowPaused }, "play-pause-icons"]),
+                  title: $options.playPauseName,
                   type: "button",
                   onClick: _cache[0] || (_cache[0] = (...args) => $options.togglePlayPause && $options.togglePlayPause(...args))
                 }, [
@@ -637,8 +640,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                     size: $data.iconSize,
                     class: "play-pause-icons__pause"
                   }, null, 8, ["size"])),
-                  createElementVNode("span", _hoisted_5, toDisplayString($options.playPauseName), 1),
-                  $data.playing ? (openBlock(), createElementBlock("svg", _hoisted_6, _cache[2] || (_cache[2] = [
+                  createElementVNode("span", _hoisted_6, toDisplayString($options.playPauseName), 1),
+                  $data.playing ? (openBlock(), createElementBlock("svg", _hoisted_7, _cache[2] || (_cache[2] = [
                     createElementVNode("circle", {
                       class: "progress-ring__circle",
                       stroke: "white",
@@ -649,14 +652,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                       cy: "25"
                     }, null, -1)
                   ]))) : createCommentVNode("", true)
-                ], 2)), [
-                  [
-                    _directive_tooltip,
-                    $options.playPauseName,
-                    void 0,
-                    { auto: true }
-                  ]
-                ]) : createCommentVNode("", true),
+                ], 10, _hoisted_5)) : createCommentVNode("", true),
                 createVNode(_component_NcActions, {
                   class: "header-actions",
                   inline: $props.inlineActions
@@ -666,7 +662,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                   ]),
                   _: 3
                 }, 8, ["inline"]),
-                !$props.noClose && !$props.closeButtonContained ? (openBlock(), createBlock(_component_NcButton, {
+                !$props.noClose && $props.closeButtonOutside ? (openBlock(), createBlock(_component_NcButton, {
                   key: 1,
                   "aria-label": $options.closeButtonAriaLabel,
                   class: "header-close",
@@ -707,7 +703,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                     onClick: $options.previous
                   }, {
                     icon: withCtx(() => [
-                      createVNode(_component_ChevronLeft, { size: 40 })
+                      createVNode(_component_NcIconSvgWrapper, {
+                        directional: "",
+                        path: $setup.mdiChevronLeft,
+                        size: 40
+                      }, null, 8, ["path"])
                     ]),
                     _: 1
                   }, 8, ["aria-label", "onClick"]), [
@@ -720,10 +720,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 id: "modal-description-" + $data.randId,
                 class: "modal-container"
               }, [
-                createElementVNode("div", _hoisted_8, [
+                createElementVNode("div", _hoisted_9, [
                   renderSlot(_ctx.$slots, "default", {}, void 0, true)
                 ]),
-                !$props.noClose && $props.closeButtonContained ? (openBlock(), createBlock(_component_NcButton, {
+                !$props.noClose && !$props.closeButtonOutside ? (openBlock(), createBlock(_component_NcButton, {
                   key: 0,
                   "aria-label": $options.closeButtonAriaLabel,
                   class: "modal-container__close",
@@ -735,7 +735,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                   ]),
                   _: 1
                 }, 8, ["aria-label", "onClick"])) : createCommentVNode("", true)
-              ], 8, _hoisted_7),
+              ], 8, _hoisted_8),
               createVNode(Transition, {
                 name: "fade-visibility",
                 appear: ""
@@ -748,7 +748,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                     onClick: $options.next
                   }, {
                     icon: withCtx(() => [
-                      createVNode(_component_ChevronRight, { size: 40 })
+                      createVNode(_component_NcIconSvgWrapper, {
+                        directional: "",
+                        path: $setup.mdiChevronRight,
+                        size: 40
+                      }, null, 8, ["path"])
                     ]),
                     _: 1
                   }, 8, ["aria-label", "onClick"]), [
@@ -770,7 +774,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["onAfterEnter", "onBeforeLeave"]);
 }
-const NcModal = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-db232fa9"]]);
+const NcModal = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-61f0615c"]]);
 ScopeComponent(NcModal);
 export {
   NcModal as default

package/dist/components/NcModal/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/utils/Timer.js","../../../node_modules/vue-material-design-icons/Pause.vue","../../../node_modules/vue-material-design-icons/Play.vue","../../../src/components/NcModal/NcModal.vue","../../../src/components/NcModal/index.js"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\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","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon pause-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M14,19H18V5H14M6,19H10V5H6V19Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"PauseIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon play-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M8,5.14V19.14L19,12.14L8,5.14Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"PlayIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nFor showing the modal you can use either `v-model:show=\"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\tv-model:show=\"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<template #actions>\n\t\t\t\t<NcActionCaption name=\"Some action\" />\n\t\t\t</template>\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\" v-model=\"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\" v-model=\"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', 'Tomatoes', '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\tvariant=\"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=\"{\n\t\t\t\t'modal-mask--opaque': dark || !closeButtonContained || hasPrevious || hasNext,\n\t\t\t\t'modal-mask--light': lightBackdrop,\n\t\t\t}\"\n\t\t\t:style=\"cssVariables\"\n\t\t\trole=\"dialog\"\n\t\t\taria-modal=\"true\"\n\t\t\t:aria-labelledby=\"modalLabelId\"\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:data-theme-light=\"lightBackdrop\"\n\t\t\t\t\t:data-theme-dark=\"!lightBackdrop\">\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-header__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 Actions to show (one or more NcAction* components) -->\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=\"!noClose && !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\tvariant=\"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\t:aria-label=\"prevButtonAriaLabel\"\n\t\t\t\t\t\t\tclass=\"prev\"\n\t\t\t\t\t\t\tvariant=\"tertiary-no-background\"\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<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\t<!-- Close modal -->\n\t\t\t\t\t\t<NcButton v-if=\"!noClose && closeButtonContained\"\n\t\t\t\t\t\t\t:aria-label=\"closeButtonAriaLabel\"\n\t\t\t\t\t\t\tclass=\"modal-container__close\"\n\t\t\t\t\t\t\tvariant=\"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=\"20\" />\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\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\t:aria-label=\"nextButtonAriaLabel\"\n\t\t\t\t\t\t\tclass=\"next\"\n\t\t\t\t\t\t\tvariant=\"tertiary-no-background\"\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 { useSwipe } from '@vueuse/core'\nimport { createFocusTrap } from 'focus-trap'\nimport { warn as VueWarn } from 'vue'\n\nimport { getTrapStack } from '../../utils/focusTrap.ts'\nimport { t } from '../../l10n.js'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport NcActions from '../NcActions/index.js'\nimport NcButton from '../NcButton/index.ts'\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\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\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 * Disable swipe between slides\n\t\t */\n\t\tdisableSwipe: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\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 * Do not show the close button for the dialog.\n\t\t * @default false\n\t\t */\n\t\tnoClose: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Close the modal if the user clicked outside the modal\n\t\t * Only relevant if `noClose` is not set.\n\t\t */\n\t\tcloseOnClickOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Makes the modal backdrop opaque if true\n\t\t * Will be overwritten if some buttons are shown outside\n\t\t */\n\t\tdark: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Set light backdrop. Makes the modal header appear light.\n\t\t */\n\t\tlightBackdrop: {\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\n\t\t/**\n\t\t * Id of the element that labels the dialog (the name)\n\t\t * Not needed if the `name` prop is set, but if no name is set you need to provide the ID of an element to label the dialog for accessibility.\n\t\t */\n\t\tlabelId: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Set element to return focus to after focus trap deactivation\n\t\t *\n\t\t * @type {import('focus-trap').FocusTargetValueOrFalse}\n\t\t */\n\t\tsetReturnFocus: {\n\t\t\tdefault: undefined,\n\t\t\ttype: [HTMLElement, SVGElement, String, Boolean],\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\texternalFocusTrapStack: [],\n\t\t\trandId: createElementId(),\n\t\t\tinternalShow: true,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * ID of the element to label the modal\n\t\t */\n\t\tmodalLabelId() {\n\t\t\treturn this.labelId || `modal-name-${this.randId}`\n\t\t},\n\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')\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\tbeforeUnmount() {\n\t\twindow.removeEventListener('keydown', this.handleKeydown)\n\t\tthis.mc.stop()\n\t},\n\tmounted() {\n\t\tif (!this.name && !this.labelId) {\n\t\t\tVueWarn('[NcModal] You need either set the name or set a `labelId` for accessibility.')\n\t\t}\n\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\tunmounted() {\n\t\tthis.clearFocusTrap()\n\t\tthis.$el.remove()\n\t},\n\n\tmethods: {\n\t\tt,\n\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.noClose) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// We set internalShow here, so the out transitions properly run before the component is destroyed\n\t\t\tthis.internalShow = false\n\t\t\tthis.$emit('update:show', false)\n\n\t\t\t// delay closing for animation\n\t\t\tsetTimeout(() => {\n\t\t\t\t/**\n\t\t\t\t * Emitted when the closing animation is finished\n\t\t\t\t */\n\t\t\t\tthis.$emit('close', data)\n\t\t\t}, 300)\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' items,\n\t\t\t\t// arrow navigation should not be intercepted 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.disableSwipe) {\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 deactivate 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\tsetReturnFocus: this.setReturnFocus,\n\t\t\t}\n\n\t\t\t// Deactivate other focus traps to unlock modal elements\n\t\t\tthis.externalFocusTrapStack = [...options.trapStack]\n\t\t\tfor (const trap of this.externalFocusTrapStack) {\n\t\t\t\ttrap.deactivate()\n\t\t\t}\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\tfor (const trap of this.externalFocusTrapStack) {\n\t\t\t\ttrap.activate()\n\t\t\t}\n\t\t\tthis.externalFocusTrapStack = []\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\t--backdrop-color: 0, 0, 0;\n\tbackground-color: rgba(var(--backdrop-color), .5);\n\n\t&,\n\t& * {\n\t\tbox-sizing: border-box;\n\t}\n\n\t&--opaque {\n\t\tbackground-color: rgba(var(--backdrop-color), .92);\n\t}\n\t&--light {\n\t\t--backdrop-color: 255, 255, 255;\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 resetting\n\t// the circle animation loop\n\tdisplay: flex !important;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 100%;\n\theight: var(--header-height);\n\toverflow: hidden;\n\ttransition: opacity 250ms, visibility 250ms;\n\n\t&__name {\n\t\toverflow-x: hidden;\n\t\twidth: 100%;\n\t\tpadding: 0 calc(var(--default-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\tfont-size: $icon-size;\n\t\tmargin-block: 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&__name {\n\t\t\tpadding-left: calc(var(--default-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\tmargin: calc((var(--header-height) - var(--default-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: var(--header-height);\n\t\t\theight: var(--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: calc(var(--default-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\twidth: var(--default-clickable-area);\n\t\t\t\theight: var(--default-clickable-area);\n\t\t\t\tmargin: calc((var(--header-height) - var(--default-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&:deep() .action-item {\n\t\t\tmargin: calc((var(--header-height) - var(--default-clickable-area)) / 2);\n\n\t\t\t&--single {\n\t\t\t\twidth: var(--default-clickable-area);\n\t\t\t\theight: var(--default-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// The modal ignores the color theme and adds a black backdrop\n\t\t// so we need to add custom color of the actions toggle\n\t\t.header-actions :deep(button:focus-visible) {\n\t\t\tbox-shadow: none !important;\n\t\t\toutline: 2px solid #fff !important;\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\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 on top of the content\n\t\t\tz-index: 1;\n\t\t\tposition: absolute;\n\t\t\ttop: 4px;\n\t\t\tinset-inline-end: var(--default-grid-baseline);\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 unnecessary 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 * var(--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: var(--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: $breakpoint-small-mobile) or (max-height: 400px)) {\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: var(--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-from,\n.fade-leave-to {\n\topacity: 0;\n}\n\n.fade-visibility-enter-from,\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-from,\n.modal-in-leave-to,\n.modal-out-enter-from,\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 * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport ScopeComponent from '../../utils/ScopeComponent.js'\nimport NcModal from './NcModal.vue'\n\nScopeComponent(NcModal)\n\nexport default NcModal\n"],"names":["_sfc_main","_hoisted_1","_hoisted_2","_hoisted_3","_createElementBlock","_mergeProps","_createElementVNode","_hoisted_4","_createCommentVNode","ChevronLeft","Close","Tooltip","VueWarn","Timer","_createBlock","_Transition","_withCtx","_normalizeClass","_normalizeStyle","_createVNode","_toDisplayString","_openBlock","_renderSlot","_withModifiers"],"mappings":"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","x_google_ignoreList":[1,2]}
+{"version":3,"file":"index.mjs","sources":["../../../src/utils/Timer.js","../../../node_modules/vue-material-design-icons/Pause.vue","../../../node_modules/vue-material-design-icons/Play.vue","../../../src/components/NcModal/NcModal.vue","../../../src/components/NcModal/index.js"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\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","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon pause-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M14,19H18V5H14M6,19H10V5H6V19Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"PauseIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon play-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M8,5.14V19.14L19,12.14L8,5.14Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"PlayIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nFor showing the modal you can use either `v-model:show=\"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\tv-model:show=\"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<template #actions>\n\t\t\t\t<NcActionCaption name=\"Some action\" />\n\t\t\t</template>\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\" v-model=\"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\" v-model=\"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', 'Tomatoes', '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\tvariant=\"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=\"{\n\t\t\t\t'modal-mask--opaque': dark || closeButtonOutside || hasPrevious || hasNext,\n\t\t\t\t'modal-mask--light': lightBackdrop,\n\t\t\t}\"\n\t\t\t:style=\"cssVariables\"\n\t\t\trole=\"dialog\"\n\t\t\taria-modal=\"true\"\n\t\t\t:aria-labelledby=\"modalLabelId\"\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:data-theme-light=\"lightBackdrop\"\n\t\t\t\t\t:data-theme-dark=\"!lightBackdrop\">\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-header__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\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\t:title=\"playPauseName\"\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 Actions to show (one or more NcAction* components) -->\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=\"!noClose && closeButtonOutside\"\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\tvariant=\"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\t:aria-label=\"prevButtonAriaLabel\"\n\t\t\t\t\t\t\tclass=\"prev\"\n\t\t\t\t\t\t\tvariant=\"tertiary-no-background\"\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<NcIconSvgWrapper directional\n\t\t\t\t\t\t\t\t\t:path=\"mdiChevronLeft\"\n\t\t\t\t\t\t\t\t\t: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<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\t<!-- Close modal -->\n\t\t\t\t\t\t<NcButton v-if=\"!noClose && !closeButtonOutside\"\n\t\t\t\t\t\t\t:aria-label=\"closeButtonAriaLabel\"\n\t\t\t\t\t\t\tclass=\"modal-container__close\"\n\t\t\t\t\t\t\tvariant=\"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=\"20\" />\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\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\t:aria-label=\"nextButtonAriaLabel\"\n\t\t\t\t\t\t\tclass=\"next\"\n\t\t\t\t\t\t\tvariant=\"tertiary-no-background\"\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<NcIconSvgWrapper directional\n\t\t\t\t\t\t\t\t\t:path=\"mdiChevronRight\"\n\t\t\t\t\t\t\t\t\t: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 { useSwipe } from '@vueuse/core'\nimport { mdiChevronLeft, mdiChevronRight } from '@mdi/js'\nimport { createFocusTrap } from 'focus-trap'\nimport { warn as VueWarn } from 'vue'\n\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { getTrapStack } from '../../utils/focusTrap.ts'\nimport { t } from '../../l10n.js'\n\nimport NcActions from '../NcActions/index.js'\nimport NcButton from '../NcButton/index.ts'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\nimport Timer from '../../utils/Timer.js'\n\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\nexport default {\n\tname: 'NcModal',\n\n\tcomponents: {\n\t\tClose,\n\t\tPause,\n\t\tPlay,\n\t\tNcActions,\n\t\tNcButton,\n\t\tNcIconSvgWrapper,\n\t},\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 * Disable swipe between slides\n\t\t */\n\t\tdisableSwipe: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\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 * Do not show the close button for the dialog.\n\t\t * @default false\n\t\t */\n\t\tnoClose: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Close the modal if the user clicked outside the modal\n\t\t * Only relevant if `noClose` is not set.\n\t\t */\n\t\tcloseOnClickOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Makes the modal backdrop opaque if true\n\t\t * Will be overwritten if some buttons are shown outside\n\t\t */\n\t\tdark: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Set light backdrop. Makes the modal header appear light.\n\t\t */\n\t\tlightBackdrop: {\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 `true` 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\t * @default false\n\t\t * @since 8.25.0\n\t\t */\n\t\tcloseButtonOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\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\n\t\t/**\n\t\t * Id of the element that labels the dialog (the name)\n\t\t * Not needed if the `name` prop is set, but if no name is set you need to provide the ID of an element to label the dialog for accessibility.\n\t\t */\n\t\tlabelId: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Set element to return focus to after focus trap deactivation\n\t\t *\n\t\t * @type {import('focus-trap').FocusTargetValueOrFalse}\n\t\t */\n\t\tsetReturnFocus: {\n\t\t\tdefault: undefined,\n\t\t\ttype: [HTMLElement, SVGElement, String, Boolean],\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\tsetup() {\n\t\treturn {\n\t\t\tmdiChevronLeft,\n\t\t\tmdiChevronRight,\n\t\t}\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\texternalFocusTrapStack: [],\n\t\t\trandId: createElementId(),\n\t\t\tinternalShow: true,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * ID of the element to label the modal\n\t\t */\n\t\tmodalLabelId() {\n\t\t\treturn this.labelId || `modal-name-${this.randId}`\n\t\t},\n\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')\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\tbeforeUnmount() {\n\t\twindow.removeEventListener('keydown', this.handleKeydown)\n\t\tthis.mc.stop()\n\t},\n\tmounted() {\n\t\tif (!this.name && !this.labelId) {\n\t\t\tVueWarn('[NcModal] You need either set the name or set a `labelId` for accessibility.')\n\t\t}\n\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\tunmounted() {\n\t\tthis.clearFocusTrap()\n\t\tthis.$el.remove()\n\t},\n\n\tmethods: {\n\t\tt,\n\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.noClose) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// We set internalShow here, so the out transitions properly run before the component is destroyed\n\t\t\tthis.internalShow = false\n\t\t\tthis.$emit('update:show', false)\n\n\t\t\t// delay closing for animation\n\t\t\tsetTimeout(() => {\n\t\t\t\t/**\n\t\t\t\t * Emitted when the closing animation is finished\n\t\t\t\t */\n\t\t\t\tthis.$emit('close', data)\n\t\t\t}, 300)\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' items,\n\t\t\t\t// arrow navigation should not be intercepted 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.disableSwipe) {\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 deactivate 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\tsetReturnFocus: this.setReturnFocus,\n\t\t\t}\n\n\t\t\t// Deactivate other focus traps to unlock modal elements\n\t\t\tthis.externalFocusTrapStack = [...options.trapStack]\n\t\t\tfor (const trap of this.externalFocusTrapStack) {\n\t\t\t\ttrap.deactivate()\n\t\t\t}\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\tfor (const trap of this.externalFocusTrapStack) {\n\t\t\t\ttrap.activate()\n\t\t\t}\n\t\t\tthis.externalFocusTrapStack = []\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\tinset-inline-start: 0;\n\tdisplay: block;\n\twidth: 100%;\n\theight: 100%;\n\t--backdrop-color: 0, 0, 0;\n\tbackground-color: rgba(var(--backdrop-color), .5);\n\n\t&,\n\t& * {\n\t\tbox-sizing: border-box;\n\t}\n\n\t&--opaque {\n\t\tbackground-color: rgba(var(--backdrop-color), .92);\n\t}\n\t&--light {\n\t\t--backdrop-color: 255, 255, 255;\n\t}\n}\n\n.modal-header {\n\tposition: absolute;\n\tz-index: 10001;\n\ttop: 0;\n\tinset-inline: 0 0;\n\t// prevent vue show to use display:none and resetting\n\t// the circle animation loop\n\tdisplay: flex !important;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 100%;\n\theight: var(--header-height);\n\toverflow: hidden;\n\ttransition: opacity 250ms, visibility 250ms;\n\n\t&__name {\n\t\toverflow-x: hidden;\n\t\twidth: 100%;\n\t\tpadding: 0 calc(var(--default-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\tfont-size: $icon-size;\n\t\tmargin-block: 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&__name {\n\t\t\tpadding-inline-start: calc(var(--default-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\tinset-inline-end: 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\tmargin: calc((var(--header-height) - var(--default-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: var(--header-height);\n\t\t\theight: var(--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: calc(var(--default-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\twidth: var(--default-clickable-area);\n\t\t\t\theight: var(--default-clickable-area);\n\t\t\t\tmargin: calc((var(--header-height) - var(--default-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&:deep() .action-item {\n\t\t\tmargin: calc((var(--header-height) - var(--default-clickable-area)) / 2);\n\n\t\t\t&--single {\n\t\t\t\twidth: var(--default-clickable-area);\n\t\t\t\theight: var(--default-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// The modal ignores the color theme and adds a black backdrop\n\t\t// so we need to add custom color of the actions toggle\n\t\t.header-actions :deep(button:focus-visible) {\n\t\t\tbox-shadow: none !important;\n\t\t\toutline: 2px solid #fff !important;\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\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\tinset-inline-start: 2px;\n\t}\n\t.next {\n\t\tinset-inline-end: 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 on top of the content\n\t\t\tz-index: 1;\n\t\t\tposition: absolute;\n\t\t\ttop: 4px;\n\t\t\tinset-inline-end: var(--default-grid-baseline);\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 unnecessary 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 * var(--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: var(--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: $breakpoint-small-mobile) or (max-height: 400px)) {\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: var(--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-from,\n.fade-leave-to {\n\topacity: 0;\n}\n\n.fade-visibility-enter-from,\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-from,\n.modal-in-leave-to,\n.modal-out-enter-from,\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\tinset-inline-start: 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 * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport ScopeComponent from '../../utils/ScopeComponent.js'\nimport NcModal from './NcModal.vue'\n\nScopeComponent(NcModal)\n\nexport default NcModal\n"],"names":["_sfc_main","_hoisted_1","_hoisted_2","_hoisted_3","_createElementBlock","_mergeProps","_createElementVNode","_hoisted_4","_createCommentVNode","Close","VueWarn","Timer","_createBlock","_Transition","_withCtx","_normalizeClass","_normalizeStyle","_createVNode","_toDisplayString","_openBlock","_renderSlot","_withModifiers"],"mappings":"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","x_google_ignoreList":[1,2]}

package/dist/components/NcPasswordField/index.mjs

@@ -1,4 +1,4 @@
-import { N } from "../../chunks/NcPasswordField-BnnlEhT1.mjs";
+import { N } from "../../chunks/NcPasswordField-CYPRKGml.mjs";
 export {
   N as default
 };

package/dist/components/NcPopover/index.mjs

@@ -1,4 +1,4 @@
-import { N } from "../../chunks/NcPopover-C3ZoyUjc.mjs";
+import { N } from "../../chunks/NcPopover-EPnt2iHh.mjs";
 export {
   N as default
 };

package/dist/components/NcRelatedResourcesPanel/index.mjs

@@ -1,4 +1,4 @@
-import { N } from "../../chunks/NcRelatedResourcesPanel-D2YLEouH.mjs";
+import { N } from "../../chunks/NcRelatedResourcesPanel-Bcy58V31.mjs";
 export {
   N as default
 };