npm - @nextcloud/vue - Versions diffs - 9.1.0 → 9.3.0 - Mend

@nextcloud/vue 9.1.0 → 9.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (347) hide show

package/dist/chunks/NcListItemIcon-D_ReDycv.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcListItemIcon-D_ReDycv.mjs","sources":["../../src/components/NcListItemIcon/NcListItemIcon.vue"],"sourcesContent":["\n\n<docs>\n## This is used to display a avatar-name/subname + icon layout\nIt might be used for list rendering or within the multiselect for example\n\n> **Note:** Any binding will be forwarded on the Avatar component root\n\n```vue\n<NcListItemIcon name=\"User 1\" />\n<NcListItemIcon name=\"User 1\" subname=\"Hidden subname because size is too small\" :avatar-size=\"24\" />\n```\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"User 1\" :avatar-size=\"44\">\n\t\t\t<IconAccountOutline :size=\"20\" />\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport IconAccountOutline from 'vue-material-design-icons/AccountOutline.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconAccountOutline,\n\t\t},\n\t}\n\t</script>\n```\n\n### With icon\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"Group 1\" subname=\"13 members\" :is-no-user=\"true\">\n\t\t\t<IconAccountMultipleOutline :size=\"20\" />\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport IconAccountMultipleOutline from 'vue-material-design-icons/AccountMultipleOutline.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconAccountMultipleOutline,\n\t\t},\n\t}\n\t</script>\n```\n\n### Searching\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"Test user 1\" subname=\"callmetest@domain.com\" search=\"test\" />\n\t\t<NcListItemIcon name=\"Testing admin\" subname=\"testme@example.com\" search=\"test\" />\n\t\t<NcListItemIcon name=\"Test group 2\" subname=\"loremipsum@domain.com\" :is-no-user=\"true\" search=\"test\">\n\t\t\t<IconAccountMultipleOutline :size=\"20\" />\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport IconAccountMultipleOutline from 'vue-material-design-icons/AccountMultipleOutline.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconAccountMultipleOutline,\n\t\t},\n\t}\n\t</script>\n```\n\n### With actions\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"Test user 1\" subname=\"callmetest@domain.com\">\n\t\t\t<NcActions>\n\t\t\t\t<NcActionButton @click=\"alert('Edit')\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconPencilOutline :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tEdit\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton @click=\"alert('Delete')\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconDeleteOutline :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tDelete\n\t\t\t\t</NcActionButton>\n\t\t\t</NcActions>\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport IconDeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'\n\timport IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconDeleteOutline,\n\t\t\tIconPencilOutline,\n\t\t},\n\t}\n\t</script>\n```\n</docs>\n\n<template>\n\t<span\n\t\t:id=\"id\"\n\t\tclass=\"option\"\n\t\t:class=\"{ 'option--compact': avatarSize < defaultSize }\"\n\t\t:style=\"cssVars\">\n\t\t<NcAvatar\n\t\t\tv-bind=\"$attrs\"\n\t\t\t:disable-menu=\"true\"\n\t\t\t:disable-tooltip=\"true\"\n\t\t\t:display-name=\"displayName || name\"\n\t\t\t:is-no-user=\"isNoUser\"\n\t\t\t:size=\"avatarSize\"\n\t\t\tclass=\"option__avatar\" />\n\t\t<div class=\"option__details\">\n\t\t\t<NcHighlight\n\t\t\t\tclass=\"option__lineone\"\n\t\t\t\t:text=\"name\"\n\t\t\t\t:search=\"searchParts[0]\" />\n\t\t\t<NcHighlight\n\t\t\t\tv-if=\"isValidSubname && isSizeBigEnough\"\n\t\t\t\tclass=\"option__linetwo\"\n\t\t\t\t:text=\"subname\"\n\t\t\t\t:search=\"searchParts[1]\" />\n\t\t\t<span v-else-if=\"hasStatus\">\n\t\t\t\t<span>{{ userStatus.icon }}</span>\n\t\t\t\t<span>{{ userStatus.message }}</span>\n\t\t\t</span>\n\t\t</div>\n\n\t\t\n\t\t<slot>\n\t\t\t<NcIconSvgWrapper\n\t\t\t\tv-if=\"hasIconSvg\"\n\t\t\t\tclass=\"option__icon\"\n\t\t\t\t:svg=\"iconSvg\"\n\t\t\t\t:name=\"iconName\" />\n\t\t\t<span\n\t\t\t\tv-else-if=\"hasIcon\"\n\t\t\t\tclass=\"icon option__icon\"\n\t\t\t\t:class=\"icon\"\n\t\t\t\t:aria-label=\"iconName\" />\n\t\t</slot>\n\t</span>\n</template>\n\n<script>\nimport { userStatus } from '../../mixins/index.js'\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcHighlight from '../NcHighlight/index.ts'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.ts'\n\n// global margin, ^2 ratio\nconst margin = 8\nconst defaultSize = 32\n\nexport default {\n\tname: 'NcListItemIcon',\n\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcHighlight,\n\t\tNcIconSvgWrapper,\n\t},\n\n\tmixins: [\n\t\tuserStatus,\n\t],\n\n\tprops: {\n\t\t/**\n\t\t * Default first line text\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Secondary optional line\n\t\t * Only visible on size of 32 and above\n\t\t */\n\t\tsubname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Icon class to be displayed at the end of the component\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * SVG icon to be displayed at the end of the component\n\t\t */\n\t\ticonSvg: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Descriptive name for the icon\n\t\t */\n\t\ticonName: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Search within the highlight of name/subname\n\t\t */\n\t\tsearch: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Set a size in px that will define the avatar height/width\n\t\t * and therefore, the height of the component\n\t\t */\n\t\tavatarSize: {\n\t\t\ttype: Number,\n\t\t\tdefault: defaultSize,\n\t\t},\n\n\t\t/**\n\t\t * Disable the margins of this component.\n\t\t * Useful for integration in `NcSelect` for example\n\t\t */\n\t\tnoMargin: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * See the [Avatar](#Avatar) displayName prop\n\t\t * Fallback to name\n\t\t */\n\t\tdisplayName: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * See the [Avatar](#Avatar) isNoUser prop\n\t\t * Enable/disable the UserStatus fetching\n\t\t */\n\t\tisNoUser: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Unique list item ID\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\tsetup() {\n\t\treturn {\n\t\t\tmargin,\n\t\t\tdefaultSize,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\thasIcon() {\n\t\t\treturn this.icon !== ''\n\t\t},\n\n\t\thasIconSvg() {\n\t\t\treturn this.iconSvg !== ''\n\t\t},\n\n\t\tisValidSubname() {\n\t\t\treturn this.subname?.trim?.() !== ''\n\t\t},\n\n\t\tisSizeBigEnough() {\n\t\t\treturn this.avatarSize >= 26 // the font sizes\n\t\t},\n\n\t\tcssVars() {\n\t\t\t// Don't use margin to calculate the height if noMargin\n\t\t\tconst margin = this.noMargin ? 0 : this.margin\n\n\t\t\treturn {\n\t\t\t\t'--height': this.avatarSize + 2 * margin + 'px',\n\t\t\t\t'--margin': this.margin + 'px',\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Separates the search property into two parts, the first one is the search part on the name, the second on the subname.\n\t\t *\n\t\t * @return {[string, string]}\n\t\t */\n\t\tsearchParts() {\n\t\t\t// Match the email notation like \"Jane <j.doe@example.com>\" with the email address as matching group\n\t\t\tconst EMAIL_NOTATION = /^([^<]*)<([^>]+)>?$/\n\n\t\t\tconst match = this.search.match(EMAIL_NOTATION)\n\t\t\tif (this.isNoUser || !match) {\n\t\t\t\treturn [this.search, this.search]\n\t\t\t}\n\t\t\treturn [match[1].trim(), match[2]]\n\t\t},\n\t},\n\n\tbeforeMount() {\n\t\t// If we don't have a subname and if this is a user\n\t\tif (!this.isNoUser && !this.subname) {\n\t\t\tthis.fetchUserStatus(this.user)\n\t\t}\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.option {\n\tdisplay: flex;\n\talign-items: center;\n\twidth: 100%;\n\theight: var(--height);\n\tcursor: inherit;\n\n\t&__avatar {\n\t\tmargin-inline-end: var(--margin);\n\t}\n\n\t&__details {\n\t\tdisplay: flex;\n\t\tflex: 1 1;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\tmin-width: 0;\n\t}\n\n\t&__lineone {\n\t\tcolor: var(--color-main-text);\n\t}\n\n\t&__linetwo {\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\t&__lineone,\n\t&__linetwo {\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\tline-height: 1.2;\n\t\tstrong {\n\t\t\tfont-weight: bold;\n\t\t}\n\t}\n\n\t&--compact {\n\t\t.option {\n\t\t\t&__lineone {\n\t\t\t\tfont-size: 14px;\n\t\t\t}\n\t\t\t&__linetwo {\n\t\t\t\tfont-size: 11px;\n\t\t\t\tline-height: 1.5;\n\t\t\t\tmargin-top: -4px;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__icon {\n\t\twidth: var(--default-clickable-area);\n\t\theight: var(--default-clickable-area);\n\t\tcolor: var(--color-text-maxcontrast);\n\t\t&.icon {\n\t\t\tflex: 0 0 var(--default-clickable-area);\n\t\t\topacity: $opacity_normal;\n\t\t\tbackground-position: center;\n\t\t\tbackground-size: 16px;\n\t\t}\n\t}\n\n\t&__details,\n\t&__lineone,\n\t&__linetwo,\n\t&__icon {\n\t\tcursor: inherit;\n\t}\n}\n</style>\n"],"names":["NcHighlight","margin","_createElementBlock","_normalizeClass","_createVNode","_mergeProps","_createElementVNode","_createBlock","_toDisplayString","_renderSlot"],"mappings":"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"}

package/dist/chunks/{NcModal-CvHjwuUy.mjs → NcModal-DZtBQM1y.mjs} RENAMED Viewed

@@ -1,16 +1,16 @@
 import '../assets/NcModal-Dyub1-f2.css';
-import { c as mdiChevronRight, s as mdiChevronLeft } from "./mdi-Cjx8NyEs.mjs";
+import { c as mdiChevronRight, x as mdiChevronLeft } from "./mdi-HQ-WBPmL.mjs";
 import { useSwipe } from "@vueuse/core";
 import { createFocusTrap } from "focus-trap";
 import { createElementBlock, openBlock, mergeProps, createElementVNode, createCommentVNode, toDisplayString, warn, resolveComponent, createBlock, Transition, withCtx, withDirectives, normalizeStyle, normalizeClass, createVNode, renderSlot, withModifiers, vShow } from "vue";
 import { I as IconClose } from "./Close-D6ngJ4t9.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-import { r as register, n as t35, o as t19, a as t } from "./_l10n-YZMLsK4O.mjs";
+import { r as register, o as t36, p as t19, a as t } from "./_l10n-CWKr1fUH.mjs";
 import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
 import { g as getTrapStack } from "./focusTrap-HJQ4pqHV.mjs";
-import { N as NcActions } from "./NcActions-C-E6BGfZ.mjs";
-import { N as NcButton } from "./NcButton-DkC5k3Lb.mjs";
-import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-5AA93z-F.mjs";
+import { N as NcActions } from "./NcActions-B0kM6AYb.mjs";
+import { N as NcButton } from "./NcButton-ZNHdqKQl.mjs";
+import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-BvLanNaW.mjs";
 const _sfc_main$2 = {
   name: "PauseIcon",
   emits: ["click"],
@@ -97,7 +97,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
   ], 16, _hoisted_1$1);
 }
 const Play = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
-register(t19, t35);
+register(t19, t36);
 function timer(callback, delay) {
   let id;
   let started;
@@ -775,4 +775,4 @@ const NcModal = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render],
 export {
   NcModal as N
 };
-//# sourceMappingURL=NcModal-CvHjwuUy.mjs.map
+//# sourceMappingURL=NcModal-DZtBQM1y.mjs.map

package/dist/chunks/{NcModal-CvHjwuUy.mjs.map → NcModal-DZtBQM1y.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcModal-CvHjwuUy.mjs","sources":["../../node_modules/vue-material-design-icons/Pause.vue","../../node_modules/vue-material-design-icons/Play.vue","../../src/utils/Timer.js","../../src/components/NcModal/NcModal.vue"],"sourcesContent":["<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/\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 - 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\n\t\tname=\"fade\"\n\t\tappear\n\t\t@after-enter=\"useFocusTrap\"\n\t\t@before-leave=\"clearFocusTrap\">\n\t\t<div\n\t\t\tv-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\n\t\t\t\t\tclass=\"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\n\t\t\t\t\t\tv-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\n\t\t\t\t\t\t\tv-if=\"hasNext && enableSlideshow\"\n\t\t\t\t\t\t\tclass=\"play-pause-icons\"\n\t\t\t\t\t\t\t:class=\"{ 'play-pause-icons--paused': slideshowPaused }\"\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\n\t\t\t\t\t\t\t\tv-if=\"!playing\"\n\t\t\t\t\t\t\t\tclass=\"play-pause-icons__play\"\n\t\t\t\t\t\t\t\t:size=\"iconSize\" />\n\t\t\t\t\t\t\t<Pause\n\t\t\t\t\t\t\t\tv-else\n\t\t\t\t\t\t\t\tclass=\"play-pause-icons__pause\"\n\t\t\t\t\t\t\t\t:size=\"iconSize\" />\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\n\t\t\t\t\t\t\t\tv-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\n\t\t\t\t\t\t\t\t\tclass=\"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\n\t\t\t\t\t\t\tv-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\n\t\t\t\t\tv-show=\"showModal\"\n\t\t\t\t\tclass=\"modal-wrapper\"\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\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\n\t\t\t\t\t\t\tv-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\n\t\t\t\t\t\t\t\t\tdirectional\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\n\t\t\t\t\t\t\tv-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\n\t\t\t\t\t\t\tv-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\n\t\t\t\t\t\t\t\t\tdirectional\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 { mdiChevronLeft, mdiChevronRight } from '@mdi/js'\nimport { useSwipe } from '@vueuse/core'\nimport { createFocusTrap } from 'focus-trap'\nimport { warn as VueWarn } from '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'\nimport { t } from '../../l10n.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { getTrapStack } from '../../utils/focusTrap.ts'\nimport Timer from '../../utils/Timer.js'\nimport NcActions from '../NcActions/index.js'\nimport NcButton from '../NcButton/index.ts'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.ts'\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\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\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\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\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\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\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\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\n\t\t/\n\t\t Enable spread navigation\n\t\t /\n\t\tspreadNavigation: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\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 \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\t/\n\t\t The current open property of the modal\n\t\t /\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: [Boolean, HTMLElement, SVGElement, String],\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\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\n\t\tmodalTransitionName() {\n\t\t\treturn `modal-${this.outTransition ? 'out' : 'in'}`\n\t\t},\n\n\t\tplayPauseName() {\n\t\t\treturn this.playing ? t('Pause slideshow') : t('Start slideshow')\n\t\t},\n\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\n\t\tprevButtonAriaLabel() {\n\t\t\treturn t('Previous')\n\t\t},\n\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\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\n\tbeforeUnmount() {\n\t\twindow.removeEventListener('keydown', this.handleKeydown)\n\t\tthis.mc.stop()\n\t},\n\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\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\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\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\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// Init focus trap\n\t\t\tthis.focusTrap = createFocusTrap([contentContainer, ...this.additionalTrapElements], options)\n\t\t\tthis.focusTrap.activate()\n\t\t},\n\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\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-container);\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"],"names":["_sfc_main","_hoisted_3","_createElementBlock","_mergeProps","_createElementVNode","_openBlock","Close","VueWarn","Timer","_createBlock","_Transition","_createVNode","_normalizeClass","_toDisplayString","_renderSlot"],"mappings":"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","x_google_ignoreList":[0,1]}
1	+ {"version":3,"file":"NcModal-DZtBQM1y.mjs","sources":["../../node_modules/vue-material-design-icons/Pause.vue","../../node_modules/vue-material-design-icons/Play.vue","../../src/utils/Timer.js","../../src/components/NcModal/NcModal.vue"],"sourcesContent":["<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/\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 - 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\n\t\tname=\"fade\"\n\t\tappear\n\t\t@after-enter=\"useFocusTrap\"\n\t\t@before-leave=\"clearFocusTrap\">\n\t\t<div\n\t\t\tv-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\n\t\t\t\t\tclass=\"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\n\t\t\t\t\t\tv-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\n\t\t\t\t\t\t\tv-if=\"hasNext && enableSlideshow\"\n\t\t\t\t\t\t\tclass=\"play-pause-icons\"\n\t\t\t\t\t\t\t:class=\"{ 'play-pause-icons--paused': slideshowPaused }\"\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\n\t\t\t\t\t\t\t\tv-if=\"!playing\"\n\t\t\t\t\t\t\t\tclass=\"play-pause-icons__play\"\n\t\t\t\t\t\t\t\t:size=\"iconSize\" />\n\t\t\t\t\t\t\t<Pause\n\t\t\t\t\t\t\t\tv-else\n\t\t\t\t\t\t\t\tclass=\"play-pause-icons__pause\"\n\t\t\t\t\t\t\t\t:size=\"iconSize\" />\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\n\t\t\t\t\t\t\t\tv-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\n\t\t\t\t\t\t\t\t\tclass=\"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\n\t\t\t\t\t\t\tv-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\n\t\t\t\t\tv-show=\"showModal\"\n\t\t\t\t\tclass=\"modal-wrapper\"\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\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\n\t\t\t\t\t\t\tv-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\n\t\t\t\t\t\t\t\t\tdirectional\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\n\t\t\t\t\t\t\tv-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\n\t\t\t\t\t\t\tv-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\n\t\t\t\t\t\t\t\t\tdirectional\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 { mdiChevronLeft, mdiChevronRight } from '@mdi/js'\nimport { useSwipe } from '@vueuse/core'\nimport { createFocusTrap } from 'focus-trap'\nimport { warn as VueWarn } from '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'\nimport { t } from '../../l10n.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { getTrapStack } from '../../utils/focusTrap.ts'\nimport Timer from '../../utils/Timer.js'\nimport NcActions from '../NcActions/index.js'\nimport NcButton from '../NcButton/index.ts'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.ts'\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\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\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\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\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\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\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\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\n\t\t/\n\t\t Enable spread navigation\n\t\t /\n\t\tspreadNavigation: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\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 \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\t/\n\t\t The current open property of the modal\n\t\t /\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: [Boolean, HTMLElement, SVGElement, String],\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\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\n\t\tmodalTransitionName() {\n\t\t\treturn `modal-${this.outTransition ? 'out' : 'in'}`\n\t\t},\n\n\t\tplayPauseName() {\n\t\t\treturn this.playing ? t('Pause slideshow') : t('Start slideshow')\n\t\t},\n\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\n\t\tprevButtonAriaLabel() {\n\t\t\treturn t('Previous')\n\t\t},\n\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\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\n\tbeforeUnmount() {\n\t\twindow.removeEventListener('keydown', this.handleKeydown)\n\t\tthis.mc.stop()\n\t},\n\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\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\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\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\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// Init focus trap\n\t\t\tthis.focusTrap = createFocusTrap([contentContainer, ...this.additionalTrapElements], options)\n\t\t\tthis.focusTrap.activate()\n\t\t},\n\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\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-container);\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"],"names":["_sfc_main","_hoisted_3","_createElementBlock","_mergeProps","_createElementVNode","_openBlock","Close","VueWarn","Timer","_createBlock","_Transition","_createVNode","_normalizeClass","_toDisplayString","_renderSlot"],"mappings":"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","x_google_ignoreList":[0,1]}

package/dist/chunks/{NcNoteCard-BomepG0z.mjs → NcNoteCard-C6JdnZUp.mjs} RENAMED Viewed

@@ -1,8 +1,8 @@
-import '../assets/NcNoteCard-l5nIN9Hg.css';
+import '../assets/NcNoteCard-DZSuYX4-.css';
 import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, unref, renderSlot, createElementVNode, createVNode, createCommentVNode, toDisplayString } from "vue";
-import { f as mdiAlert, g as mdiInformation, h as mdiCheckboxMarkedCircle, i as mdiAlertDecagram } from "./mdi-Cjx8NyEs.mjs";
+import { g as mdiAlert, h as mdiInformation, i as mdiCheckboxMarkedCircle, j as mdiAlertDecagram } from "./mdi-HQ-WBPmL.mjs";
 import { i as isLegacy } from "./legacy-DcjXBL_t.mjs";
-import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-5AA93z-F.mjs";
+import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-BvLanNaW.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const _hoisted_1 = ["role"];
 const _hoisted_2 = {
@@ -59,8 +59,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const NcNoteCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-dfa67081"]]);
+const NcNoteCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7e4656f9"]]);
 export {
   NcNoteCard as N
 };
-//# sourceMappingURL=NcNoteCard-BomepG0z.mjs.map
+//# sourceMappingURL=NcNoteCard-C6JdnZUp.mjs.map

package/dist/chunks/NcNoteCard-C6JdnZUp.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcNoteCard-C6JdnZUp.mjs","sources":["../../src/components/NcNoteCard/NcNoteCard.vue"],"sourcesContent":["\n\n<docs>\nThis component is made to display additional information to the user. It is\navailable in four versions:\n\n- **success**: Display a successful message.<br>\n Should be used to show success of an operation or optional information to help a user be more successful.\n- **info**: Display an informational message.<br>\n Should be used to highlight information that users should take into account.\n- **warning**: Display a warning to the user.<br>\n Should be used for critical content demanding user attention due to potential risks.\n- **error**: Display an error message.<br>\n Should be used for negative potential consequences of an action.\n\n### Usage\n\n```vue\n<template>\n\t<div>\n\t\t<NcNoteCard type=\"warning\" text=\"This is dangerous\" />\n\n\t\t<NcNoteCard type=\"error\"\n\t\t\theading=\"Error\"\n\t\t\ttext=\"The server is not happy and reported the following error\" />\n\n\t\t<NcNoteCard type=\"success\" text=\"You won\" />\n\n\t\t<NcNoteCard type=\"info\" text=\"For your information\" />\n\n\t\t<h4>Custom icon</h4>\n\t\t<NcNoteCard type=\"warning\" text=\"Custom icon usage\">\n\t\t\t<template #icon>\n\t\t\t\t<IconCogOutline :size=\"20\"/>\n\t\t\t</template>\n\t\t</NcNoteCard>\n\n\t\t<h4>Custom content using the default slot</h4>\n\t\t<NcNoteCard type=\"info\">\n\t\t\tPress <kbd>CTRL</kbd>+<kbd>C</kbd>\n\t\t</NcNoteCard>\n\t</div>\n</template>\n\n<script>\n\timport IconCogOutline from 'vue-material-design-icons/CogOutline.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconCogOutline,\n\t\t},\n\t}\n</script>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { mdiAlert, mdiAlertDecagram, mdiCheckboxMarkedCircle, mdiInformation } from '@mdi/js'\nimport { computed } from 'vue'\nimport { isLegacy } from '../../utils/legacy.ts'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.ts'\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * Optional text to show as a heading of the note card\n\t */\n\theading?: string\n\n\t/**\n\t * Enforce the `alert` role on the note card.\n\t *\n\t * The alert role should only be used for information that requires the user's immediate attention.\n\t *\n\t * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role\n\t */\n\tshowAlert?: boolean\n\n\t/**\n\t * The message text of the note card\n\t */\n\ttext?: string\n\n\t/**\n\t * Type or severity of the message\n\t */\n\ttype?: 'success' | 'info' | 'warning' | 'error'\n}>(), {\n\theading: undefined,\n\ttext: undefined,\n\ttype: 'warning',\n})\n\ndefineSlots<{\n\t/** The main content (overwrites the `text` prop) */\n\tdefault?: Slot\n\t/** Manually provided icon */\n\ticon?: Slot\n}>()\n\nconst shouldShowAlert = computed(() => props.showAlert || props.type === 'error')\n\nconst iconPath = computed(() => {\n\tswitch (props.type) {\n\t\tcase 'error':\n\t\t\treturn mdiAlertDecagram\n\t\tcase 'success':\n\t\t\treturn mdiCheckboxMarkedCircle\n\t\tcase 'info':\n\t\t\treturn mdiInformation\n\t\tcase 'warning':\n\t\tdefault:\n\t\t\treturn mdiAlert\n\t}\n})\n</script>\n\n<template>\n\t<div\n\t\tclass=\"notecard\"\n\t\t:class=\"{\n\t\t\t[`notecard--${type}`]: type,\n\t\t\t'notecard--legacy': isLegacy,\n\t\t}\"\n\t\t:role=\"shouldShowAlert ? 'alert' : 'note'\">\n\t\t<slot name=\"icon\">\n\t\t\t<NcIconSvgWrapper\n\t\t\t\t:path=\"iconPath\"\n\t\t\t\tclass=\"notecard__icon\"\n\t\t\t\t:class=\"{ 'notecard__icon--heading': heading }\"\n\t\t\t\tinline />\n\t\t</slot>\n\t\t<div>\n\t\t\t<p v-if=\"heading\" class=\"notecard__heading\">\n\t\t\t\t{{ heading }}\n\t\t\t</p>\n\t\t\t<slot>\n\t\t\t\t<p class=\"notecard__text\">\n\t\t\t\t\t{{ text }}\n\t\t\t\t</p>\n\t\t\t</slot>\n\t\t</div>\n\t</div>\n</template>\n\n<style lang=\"scss\" scoped>\n.notecard {\n\t--note-card-icon-size: 20px;\n\t--note-card-padding: calc(2 * var(--default-grid-baseline));\n\tcolor: var(--color-main-text) !important;\n\tbackground-color: var(--note-background) !important;\n\tborder-inline-start: var(--default-grid-baseline) solid var(--note-theme);\n\tborder-radius: var(--border-radius-small);\n\tmargin: 1rem 0;\n\tpadding: var(--note-card-padding);\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: var(--note-card-padding);\n\n\t&__heading {\n\t\tfont-size: var(--note-card-icon-size); // Same as icon\n\t\tfont-weight: 600;\n\t}\n\n\t&__icon {\n\t\tcolor: var(--note-theme);\n\n\t\t&--heading {\n\t\t\tfont-size: var(--note-card-icon-size);\n\t\t\t// Ensure icon is on the same height as the heading\n\t\t\tmargin-block: calc((1lh - 1em) / 2) auto;\n\t\t}\n\t}\n\n\t&--success {\n\t\t--note-background: var(--color-success);\n\t\t--note-theme: var(--color-success-text);\n\t}\n\n\t&--info {\n\t\t--note-background: var(--color-info);\n\t\t--note-theme: var(--color-info-text);\n\t}\n\n\t&--error {\n\t\t--note-background: var(--color-error);\n\t\t--note-theme: var(--color-error-text);\n\t}\n\n\t&--warning {\n\t\t--note-background: var(--color-warning);\n\t\t--note-theme: var(--color-warning-text);\n\t}\n\n\t&--legacy {\n\t\tbackground-color: color-mix(in srgb, var(--note-background), var(--color-main-background) 80%) !important;\n\t\tcolor: var(--color-main-text) !important;\n\t}\n}\n</style>\n"],"names":["_createElementBlock","type","_unref","_renderSlot","_createVNode","_normalizeClass","heading","_createElementVNode","_toDisplayString","text"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmEA,UAAM,QAAQ;AAqCd,UAAM,kBAAkB,SAAS,MAAM,MAAM,aAAa,MAAM,SAAS,OAAO;AAEhF,UAAM,WAAW,SAAS,MAAM;AAC/B,cAAQ,MAAM,MAAA;AAAA,QACb,KAAK;AACJ,iBAAO;AAAA,QACR,KAAK;AACJ,iBAAO;AAAA,QACR,KAAK;AACJ,iBAAO;AAAA,QACR,KAAK;AAAA,QACL;AACC,iBAAO;AAAA,MAAA;AAAA,IAEV,CAAC;;0BAIAA,mBAwBM,OAAA;AAAA,QAvBL,uBAAM,YAAU;AAAA,UACWC,CAAAA,aAAAA,KAAAA,IAAI,KAAKA,KAAAA;AAAAA,8BAA6BC,MAAA,QAAA;AAAA,QAAA;QAIhE,MAAM,gBAAA,QAAe,UAAA;AAAA,MAAA;QACtBC,WAMO,yBANP,MAMO;AAAA,UALNC,YAIUF,MAAA,gBAAA,GAAA;AAAA,YAHR,MAAM,SAAA;AAAA,YACP,OAAKG,eAAA,CAAC,kBAAgB,EAAA,2BACeC,KAAAA,QAAAA,CAAO,CAAA;AAAA,YAC5C,QAAA;AAAA,UAAA;;QAEFC,mBASM,OAAA,MAAA;AAAA,UARID,KAAAA,wBAATN,mBAEI,KAFJ,YAEIQ,gBADAF,KAAAA,OAAO,GAAA,CAAA;UAEXH,WAIO,4BAJP,MAIO;AAAA,YAHNI,mBAEI,KAFJ,YAEIC,gBADAC,KAAAA,IAAI,GAAA,CAAA;AAAA,UAAA;;;;;;;"}

package/dist/chunks/{NcPasswordField-DroBJzYE.mjs → NcPasswordField-BquWP0Di.mjs} RENAMED Viewed

@@ -1,13 +1,13 @@
-import '../assets/NcPasswordField-CMuvrdVC.css';
+import '../assets/NcPasswordField-BCJ0LHSS.css';
 import { defineComponent, mergeModels, useModel, watch, useTemplateRef, ref, computed, createBlock, openBlock, mergeProps, unref, createSlots, withCtx, createVNode, renderSlot } from "vue";
-import { k as mdiEyeOff, l as mdiEye } from "./mdi-Cjx8NyEs.mjs";
+import { o as mdiEyeOff, p as mdiEye } from "./mdi-HQ-WBPmL.mjs";
 import axios from "@nextcloud/axios";
 import { getCapabilities } from "@nextcloud/capabilities";
 import { generateOcsUrl } from "@nextcloud/router";
 import debounce from "debounce";
-import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-5AA93z-F.mjs";
-import { N as NcInputField } from "./NcInputField-By_D1kDJ.mjs";
-import { r as register, a as t } from "./_l10n-YZMLsK4O.mjs";
+import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-BvLanNaW.mjs";
+import { N as NcInputField } from "./NcInputField-z8wpYKt2.mjs";
+import { r as register, a as t } from "./_l10n-CWKr1fUH.mjs";
 import { l as logger } from "./logger-D3RVzcfQ.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 register();
@@ -61,6 +61,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       delete all.success;
       return all;
     });
+    const minLengthWithPolicy = computed(() => {
+      return props.minlength ?? (props.checkPasswordStrength ? passwordPolicy?.minLength : void 0) ?? void 0;
+    });
     async function checkPassword() {
       if (!props.checkPasswordStrength) {
         return;
@@ -96,7 +99,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         error: _ctx.error || isValid.value === false,
         "helper-text": _ctx.helperText || internalHelpMessage.value,
         "input-class": [_ctx.inputClass, { "password-field__input--secure-text": !visible.value && _ctx.asText }],
-        minlength: _ctx.minlength ?? unref(passwordPolicy)?.minLength ?? 0,
+        minlength: minLengthWithPolicy.value,
         success: _ctx.success || isValid.value === true,
         "trailing-button-label": visible.value ? unref(t)("Hide password") : unref(t)("Show password"),
         type: visible.value || _ctx.asText ? "text" : "password",
@@ -120,8 +123,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const NcPasswordField = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-76707ed7"]]);
+const NcPasswordField = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b2684de6"]]);
 export {
   NcPasswordField as N
 };
-//# sourceMappingURL=NcPasswordField-DroBJzYE.mjs.map
+//# sourceMappingURL=NcPasswordField-BquWP0Di.mjs.map

package/dist/chunks/NcPasswordField-BquWP0Di.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcPasswordField-BquWP0Di.mjs","sources":["../../src/components/NcPasswordField/NcPasswordField.vue"],"sourcesContent":["\n\n<docs>\n### Description\nSee [NcInputField](#/Components/NcFields?id=ncinputfield) for a list of all available props.\n\nGeneral purpose password field component.\n\n```\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcPasswordField v-model=\"text1\"\n\t\t\tlabel=\"Old password\" />\n\t\t<div class=\"external-label\">\n\t\t\t<label for=\"textField\">New password</label>\n\t\t\t<NcPasswordField v-model=\"text2\"\n\t\t\t\tid=\"textField\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Min. 12 characters\" />\n\t\t</div>\n\t\t<div class=\"external-label\">\n\t\t\t<label for=\"textField2\">New password</label>\n\t\t\t<NcPasswordField v-model=\"text3\"\n\t\t\t\tid=\"textField2\"\n\t\t\t\t:error=\"true\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Min. 12 characters\"\n\t\t\t\thelper-text=\"Password is insecure\" />\n\t\t</div>\n\n\t\t<NcPasswordField v-model=\"text4\"\n\t\t\tlabel=\"Good new password\"\n\t\t\t:success=\"true\"\n\t\t\tplaceholder=\"Min. 12 characters\"\n\t\t\thelper-text=\"Password is secure\">\n\t\t\t<template #icon>\n\t\t\t\t<IconLockOutline :size=\"20\" />\n\t\t\t</template>\n\t\t</NcPasswordField>\n\n\t\t<NcPasswordField v-model=\"text5\"\n\t\t\t:disabled=\"true\"\n\t\t\tlabel=\"Disabled\" />\n\n\t\t<NcPasswordField :value.sync=\"text6\"\n\t\t\tlabel=\"Secret token\"\n\t\t\tas-text />\n\t</div>\n</template>\n<script>\nimport IconLockOutline from 'vue-material-design-icons/LockOutline'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext1: '',\n\t\t\ttext2: '',\n\t\t\ttext3: 'hunter',\n\t\t\ttext4: '',\n\t\t\ttext5: '',\n\t\t\ttext6: 'secret-token',\n\t\t}\n\t},\n\n\tcomponents: {\n\t\tIconLockOutline,\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 4px;\n\talign-items: flex-end;\n\tflex-wrap: wrap;\n}\n\n.external-label {\n\tdisplay: flex;\n\tgap: 14px;\n\twidth: 100%;\n\tmargin-top: 1rem;\n}\n\n.external-label label {\n\tpadding-top: 7px;\n\twhite-space: nowrap;\n}\n</style>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport type { Writable } from '../../utils/VueTypes.ts'\nimport type { NcInputFieldProps } from '../NcInputField/NcInputField.vue'\n\nimport { mdiEye, mdiEyeOff } from '@mdi/js'\nimport axios from '@nextcloud/axios'\nimport { getCapabilities } from '@nextcloud/capabilities'\nimport { generateOcsUrl } from '@nextcloud/router'\nimport debounce from 'debounce'\nimport { computed, ref, useTemplateRef, watch } from 'vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport NcInputField from '../NcInputField/NcInputField.vue'\nimport { t } from '../../l10n.ts'\nimport { logger } from '../../utils/logger.ts'\n\nconst modelValue = defineModel<string>({ default: '' })\n\n/**\n * The visibility of the password.\n * If this is set to true then the password will not be obfuscated by the browser.\n */\nconst visible = defineModel<boolean>('visible', { default: false })\n\nconst props = withDefaults(defineProps<Omit<NcInputFieldProps, 'trailingButtonLabel' | 'type'> & {\n\t/**\n\t * Check if the user entered a valid password using the password_policy\n\t * app if available.\n\t *\n\t * Warning: this doesn't replace server side checking and will do nothing\n\t * if the password_policy app is disabled.\n\t */\n\tcheckPasswordStrength?: boolean\n\n\t/**\n\t * The minlength property defines the minimum number of characters\n\t * (as UTF-16 code units) the user can enter.\n\t */\n\tminlength?: number\n\n\t/**\n\t * Render as input[type=text] that looks like password field.\n\t * Allows to avoid unwanted password-specific browser behavior,\n\t * such as save or generate password prompt.\n\t * Useful for secret token fields.\n\t * Note: autocomplete=\"off\" is ignored by most browsers.\n\t */\n\tasText?: boolean\n}>(), {\n\tinputClass: '',\n\tminlength: undefined,\n\t// overwrite default\n\tshowTrailingButton: true,\n})\n\nconst emit = defineEmits<{\n\tvalid: []\n\tinvalid: []\n}>()\n\nwatch(modelValue, debounce(checkPassword, 500))\n\n// public API\ndefineExpose({\n\tfocus,\n\tselect,\n})\n\n// password policy\ninterface PasswordPolicy {\n\t/**\n\t * The URLs to the password_policy app methods\n\t */\n\tapi: {\n\t\t/**\n\t\t * The URL to the password generator\n\t\t */\n\t\tgenerate: string\n\n\t\t/**\n\t\t * The URL to the password validator\n\t\t */\n\t\tvalidate: string\n\t}\n\n\t/**\n\t * Whether to enforce non common passwords\n\t */\n\tenforceNonCommonPassword: boolean\n\n\t/**\n\t * Whether to enforce numeric characters\n\t */\n\tenforceNumericCharacters: boolean\n\n\t/**\n\t * Whether to enforce special characters\n\t */\n\tenforceSpecialCharacters: boolean\n\n\t/**\n\t * Whether to enforce upper and lower case\n\t */\n\tenforceUpperLowerCase: boolean\n\n\t/**\n\t * The minimum length of the password\n\t */\n\tminLength: number\n}\n\nconst { password_policy: passwordPolicy } = getCapabilities() as { password_policy?: PasswordPolicy }\n\n// internal state\nconst inputFieldInstance = useTemplateRef('inputField')\n\nconst internalHelpMessage = ref('')\nconst isValid = ref<boolean>()\n\nconst propsToForward = computed<Partial<NcInputFieldProps>>(() => {\n\tconst all = { ...props } as Partial<Writable<typeof props>>\n\t// our props\n\tdelete all.checkPasswordStrength\n\tdelete all.minlength\n\tdelete all.asText\n\t// other props already set in template\n\tdelete all.error\n\tdelete all.helperText\n\tdelete all.inputClass\n\tdelete all.success\n\n\treturn all satisfies Partial<NcInputFieldProps>\n})\n\nconst minLengthWithPolicy = computed(() => {\n\treturn props.minlength\n\t\t?? (props.checkPasswordStrength ? passwordPolicy?.minLength : undefined)\n\t\t?? undefined\n})\n\n/**\n * Validate the entered password.\n * If available this method will use the password-policy app API to validate the password.\n */\nasync function checkPassword() {\n\tif (!props.checkPasswordStrength) {\n\t\treturn\n\t}\n\n\ttry {\n\t\tconst { data } = await axios.post(generateOcsUrl('apps/password_policy/api/v1/validate'), { password: modelValue.value })\n\t\tisValid.value = data.ocs.data.passed\n\t\tif (data.ocs.data.passed) {\n\t\t\tinternalHelpMessage.value = t('Password is secure')\n\t\t\t/**\n\t\t\t * Triggers when the internal password_policy detect that the\n\t\t\t * password entered is valid.\n\t\t\t */\n\t\t\temit('valid')\n\t\t\treturn\n\t\t}\n\n\t\tinternalHelpMessage.value = data.ocs.data.reason\n\t\t/**\n\t\t * Triggers when the internal password_policy detect that the\n\t\t * password entered is invalid.\n\t\t */\n\t\temit('invalid')\n\t} catch (error) {\n\t\tlogger.error('Password policy returned an error', { error })\n\t}\n}\n\n/**\n * Toggle the visibility of the password\n */\nfunction toggleVisibility() {\n\tvisible.value = !visible.value\n}\n\n/**\n * Focus the input element\n *\n * @param options - Focus options\n * @public\n */\nfunction focus(options?: FocusOptions) {\n\tinputFieldInstance.value!.focus(options)\n}\n\n/**\n * Select all the text in the input\n *\n * @public\n */\nfunction select() {\n\tinputFieldInstance.value!.select()\n}\n</script>\n\n<template>\n\t<NcInputField\n\t\tv-bind=\"propsToForward\"\n\t\tref=\"inputField\"\n\t\tv-model=\"modelValue\"\n\t\t:error=\"error || isValid === false\"\n\t\t:helper-text=\"helperText || internalHelpMessage\"\n\t\t:input-class=\"[inputClass, { 'password-field__input--secure-text': !visible && asText }]\"\n\t\t:minlength=\"minLengthWithPolicy\"\n\t\t:success=\"success || isValid === true\"\n\t\t:trailing-button-label=\"visible ? t('Hide password') : t('Show password')\"\n\t\t:type=\"visible || asText ? 'text' : 'password'\"\n\t\t@trailing-button-click=\"toggleVisibility\">\n\t\t<template v-if=\"!!$slots.icon\" #icon>\n\t\t\t\n\t\t\t<slot name=\"icon\" />\n\t\t</template>\n\t\t<template #trailing-button-icon>\n\t\t\t<NcIconSvgWrapper :path=\"visible ? mdiEyeOff : mdiEye\" />\n\t\t</template>\n\t</NcInputField>\n</template>\n\n<style lang=\"scss\" scoped>\n:deep(.password-field__input--secure-text) {\n\t// Emulate password field look\n\t// This is not a part of the standard but well supported\n\t-webkit-text-security: disc;\n}\n</style>\n"],"names":["_useModel","_createBlock","_mergeProps","error","helperText","inputClass","asText","success","_unref","_createVNode","$slots","_renderSlot"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8GA,UAAM,aAAaA,SAAmB,SAAA,YAAgB;AAMtD,UAAM,UAAUA,SAAoB,SAAC,SAA6B;AAElE,UAAM,QAAQ;AA+Bd,UAAM,OAAO;AAKb,UAAM,YAAY,SAAS,eAAe,GAAG,CAAC;AAG9C,aAAa;AAAA,MACZ;AAAA,MACA;AAAA,IAAA,CACA;AA6CD,UAAM,EAAE,iBAAiB,eAAA,IAAmB,gBAAA;AAG5C,UAAM,qBAAqB,eAAe,YAAY;AAEtD,UAAM,sBAAsB,IAAI,EAAE;AAClC,UAAM,UAAU,IAAA;AAEhB,UAAM,iBAAiB,SAAqC,MAAM;AACjE,YAAM,MAAM,EAAE,GAAG,MAAA;AAEjB,aAAO,IAAI;AACX,aAAO,IAAI;AACX,aAAO,IAAI;AAEX,aAAO,IAAI;AACX,aAAO,IAAI;AACX,aAAO,IAAI;AACX,aAAO,IAAI;AAEX,aAAO;AAAA,IACR,CAAC;AAED,UAAM,sBAAsB,SAAS,MAAM;AAC1C,aAAO,MAAM,cACR,MAAM,wBAAwB,gBAAgB,YAAY,WAC3D;AAAA,IACL,CAAC;AAMD,mBAAe,gBAAgB;AAC9B,UAAI,CAAC,MAAM,uBAAuB;AACjC;AAAA,MACD;AAEA,UAAI;AACH,cAAM,EAAE,KAAA,IAAS,MAAM,MAAM,KAAK,eAAe,sCAAsC,GAAG,EAAE,UAAU,WAAW,OAAO;AACxH,gBAAQ,QAAQ,KAAK,IAAI,KAAK;AAC9B,YAAI,KAAK,IAAI,KAAK,QAAQ;AACzB,8BAAoB,QAAQ,EAAE,oBAAoB;AAKlD,eAAK,OAAO;AACZ;AAAA,QACD;AAEA,4BAAoB,QAAQ,KAAK,IAAI,KAAK;AAK1C,aAAK,SAAS;AAAA,MACf,SAAS,OAAO;AACf,eAAO,MAAM,qCAAqC,EAAE,MAAA,CAAO;AAAA,MAC5D;AAAA,IACD;AAKA,aAAS,mBAAmB;AAC3B,cAAQ,QAAQ,CAAC,QAAQ;AAAA,IAC1B;AAQA,aAAS,MAAM,SAAwB;AACtC,yBAAmB,MAAO,MAAM,OAAO;AAAA,IACxC;AAOA,aAAS,SAAS;AACjB,yBAAmB,MAAO,OAAA;AAAA,IAC3B;;0BAICC,YAmBe,cAnBfC,WAmBe,eAAA,OAlBQ;AAAA,QACtB,KAAI;AAAA,oBACK,WAAA;AAAA,qEAAA,WAAU,QAAA;AAAA,QAClB,OAAOC,KAAAA,SAAS,QAAA,UAAO;AAAA,QACvB,eAAaC,KAAAA,cAAc,oBAAA;AAAA,QAC3B,eAAW,CAAGC,KAAAA,YAAU,EAAA,sCAAA,CAA2C,QAAA,SAAWC,KAAAA,QAAM;AAAA,QACpF,WAAW,oBAAA;AAAA,QACX,SAASC,KAAAA,WAAW,QAAA,UAAO;AAAA,QAC3B,yBAAuB,QAAA,QAAUC,MAAA,CAAA,qBAAqBA,MAAA,CAAA,EAAC,eAAA;AAAA,QACvD,MAAM,QAAA,SAAWF,KAAAA,SAAM,SAAA;AAAA,QACvB,uBAAuB;AAAA,MAAA;QAKb,gCACV,MAAyD;AAAA,UAAzDG,YAAyD,kBAAA;AAAA,YAAtC,MAAM,QAAA,QAAUD,MAAA,SAAA,IAAYA,MAAA,MAAA;AAAA,UAAA;;;;QAL9BE,CAAAA,CAAAA,KAAAA,OAAO;gBAAO;AAAA,sBAE/B,MAAoB;AAAA,YAApBC,WAAoB,KAAA,QAAA,QAAA,CAAA,GAAA,QAAA,IAAA;AAAA,UAAA;;;;;;;;"}

package/dist/chunks/NcRadioGroup-CLtk-WPR.mjs ADDED Viewed

@@ -0,0 +1,75 @@
+import '../assets/NcRadioGroup-1zpSX8V5.css';
+import { defineComponent, mergeModels, useModel, ref, provide, computed, warn, createBlock, openBlock, withCtx, createElementBlock, renderSlot, normalizeClass } from "vue";
+import { N as NcFormBox } from "./NcFormBox-K2tCRm3B.mjs";
+import { N as NcFormGroup } from "./NcFormGroup-CnSfPFey.mjs";
+import { I as INSIDE_RADIO_GROUP_KEY } from "./useNcRadioGroup-DaZbEKbf.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "NcRadioGroup",
+  props: /* @__PURE__ */ mergeModels({
+    label: {},
+    labelHidden: { type: Boolean },
+    hideLabel: { type: Boolean },
+    description: {}
+  }, {
+    "modelValue": { required: false, default: "" },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const modelValue = useModel(__props, "modelValue");
+    const buttonVariant = ref();
+    provide(INSIDE_RADIO_GROUP_KEY, computed(() => ({
+      register,
+      modelValue: modelValue.value,
+      onUpdate
+    })));
+    function register(isButton) {
+      if (buttonVariant.value !== void 0 && buttonVariant.value !== isButton) {
+        warn("[NcRadioGroup] Mixing NcCheckboxRadioSwitch and NcRadioGroupButton is not possible!");
+      }
+      buttonVariant.value = isButton;
+    }
+    function onUpdate(value) {
+      modelValue.value = value;
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(NcFormGroup, {
+        label: _ctx.label,
+        description: _ctx.description,
+        "hide-label": _ctx.labelHidden || _ctx.hideLabel
+      }, {
+        default: withCtx(() => [
+          buttonVariant.value ? (openBlock(), createBlock(NcFormBox, {
+            key: 0,
+            row: ""
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+          })) : (openBlock(), createElementBlock("span", {
+            key: 1,
+            class: normalizeClass(_ctx.$style.radioGroup_checkboxRadioContainer)
+          }, [
+            renderSlot(_ctx.$slots, "default")
+          ], 2))
+        ]),
+        _: 3
+      }, 8, ["label", "description", "hide-label"]);
+    };
+  }
+});
+const radioGroup_checkboxRadioContainer = "_radioGroup_checkboxRadioContainer_14z4o_20";
+const style0 = {
+  "material-design-icon": "_material-design-icon_14z4o_12",
+  radioGroup_checkboxRadioContainer
+};
+const cssModules = {
+  "$style": style0
+};
+const NcRadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  NcRadioGroup as N
+};
+//# sourceMappingURL=NcRadioGroup-CLtk-WPR.mjs.map

package/dist/chunks/NcRadioGroup-CLtk-WPR.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcRadioGroup-CLtk-WPR.mjs","sources":["../../src/components/NcRadioGroup/NcRadioGroup.vue"],"sourcesContent":["\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { computed, provide, ref, warn } from 'vue'\nimport NcFormBox from '../NcFormBox/NcFormBox.vue'\nimport NcFormGroup from '../NcFormGroup/NcFormGroup.vue'\nimport { INSIDE_RADIO_GROUP_KEY } from './useNcRadioGroup.ts'\n\nconst modelValue = defineModel<string>({ required: false, default: '' })\n\ndefineProps<{\n\t/**\n\t * Label of the radio group (accessible name).\n\t * It can be hidden visually if needed using `hide-label` prop.\n\t */\n\tlabel: string\n\n\t/**\n\t * If set the label of the button group will not be shown visually but only for accessibility purposes.\n\t *\n\t * @deprecated Use `hide-label` instead.\n\t */\n\tlabelHidden?: boolean\n\n\t/**\n\t * If set the label of the button group will not be shown visually but only for accessibility purposes.\n\t */\n\thideLabel?: boolean\n\n\t/**\n\t * Optional visual description of the radio group.\n\t */\n\tdescription?: string\n}>()\n\ndefineSlots<{\n\t/**\n\t * Slot for the included radio buttons (`NcCheckboxRadioSwitch`).\n\t * The `type` prop of the `NcCheckboxRadioSwitch` will be automatically set (and forced) to `radio`.\n\t *\n\t * If you want the button variant, then you have to use `NcRadioGroupButton`.\n\t */\n\tdefault?: Slot\n}>()\n\nconst buttonVariant = ref<boolean>()\n\nprovide(INSIDE_RADIO_GROUP_KEY, computed(() => ({\n\tregister,\n\tmodelValue: modelValue.value,\n\tonUpdate,\n})))\n\n/**\n * Register a child component\n *\n * @param isButton - Whether the registered child component is a button or normal radio\n */\nfunction register(isButton: boolean): void {\n\tif (buttonVariant.value !== undefined && buttonVariant.value !== isButton) {\n\t\twarn('[NcRadioGroup] Mixing NcCheckboxRadioSwitch and NcRadioGroupButton is not possible!')\n\t}\n\tbuttonVariant.value = isButton\n}\n\n/**\n * Handle updating the current model value\n *\n * @param value - The new value\n */\nfunction onUpdate(value: string) {\n\tmodelValue.value = value\n}\n</script>\n\n<template>\n\t<NcFormGroup\n\t\t:label\n\t\t:description\n\t\t:hide-label=\"labelHidden || hideLabel\">\n\t\t<NcFormBox v-if=\"buttonVariant\" row>\n\t\t\t<slot />\n\t\t</NcFormBox>\n\t\t<span v-else :class=\"$style.radioGroup_checkboxRadioContainer\">\n\t\t\t<slot />\n\t\t</span>\n\t</NcFormGroup>\n</template>\n\n<style module lang=\"scss\">\n.radioGroup_checkboxRadioContainer :global(.checkbox-content) {\n\tmax-width: unset !important;\n}\n</style>\n\n<docs>\n## Usage example\n\n### Grouping multiple radio buttons\n\nThe radio group allows to group radio buttons into semantical groups.\nThe `v-model` only needs to be bound to the group component, also the `type` will automatically be set to `radio`.\n\n```vue\n<template>\n\t<NcRadioGroup v-model=\"selectedSides\" class=\"radio-group\" label=\"Sides\" description=\"Please choose the sides for your menu.\">\n\t\t<NcCheckboxRadioSwitch value=\"fries\">\n\t\t\tFries\n\t\t</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch value=\"salad\">\n\t\t\tSalad\n\t\t</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch value=\"none\">\n\t\t\tNothing\n\t\t</NcCheckboxRadioSwitch>\n\t</NcRadioGroup>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tselectedSides: 'none',\n\t\t}\n\t},\n}\n</script>\n\n<style scoped>\n.radio-group {\n\tmax-width: 400px\n}\n</style>\n```\n\n### Radio buttons with button styling\n\nThe radio group also allows to create a button like styling together with the `NcRadioGroupButton` component:\n\n```vue\n<template>\n\t<div>\n\t\t<h4>With text labels</h4>\n\t\t<div style=\"max-width: 400px\">\n\t\t\t<NcRadioGroup v-model=\"alignment\" label=\"Example alignment\" hide-label>\n\t\t\t\t<NcRadioGroupButton label=\"Start\" value=\"start\" />\n\t\t\t\t<NcRadioGroupButton label=\"Center\" value=\"center\" />\n\t\t\t\t<NcRadioGroupButton label=\"End\" value=\"end\" />\n\t\t\t</NcRadioGroup>\n\t\t</div>\n\n\t\t<br>\n\n\t\t<h4>With icons</h4>\n\t\t<div style=\"max-width: 250px\">\n\t\t\t<NcRadioGroup v-model=\"alignment\" label=\"Example alignment with icons\" hide-label>\n\t\t\t\t<NcRadioGroupButton aria-label=\"Start\" value=\"start\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper directional :path=\"mdiAlignHorizontalLeft\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcRadioGroupButton>\n\t\t\t\t<NcRadioGroupButton aria-label=\"Center\" value=\"center\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiAlignHorizontalCenter\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcRadioGroupButton>\n\t\t\t\t<NcRadioGroupButton aria-label=\"End\" value=\"end\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper directional :path=\"mdiAlignHorizontalRight\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcRadioGroupButton>\n\t\t\t</NcRadioGroup>\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport { mdiAlignHorizontalCenter, mdiAlignHorizontalLeft, mdiAlignHorizontalRight } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiAlignHorizontalCenter,\n\t\t\tmdiAlignHorizontalLeft,\n\t\t\tmdiAlignHorizontalRight,\n\t\t}\n\t},\n\tdata() {\n\t\treturn {\n\t\t\talignment: 'center',\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n"],"names":["_useModel","_createBlock","label","description","labelHidden","hideLabel","_renderSlot","_createElementBlock","_normalizeClass","$style"],"mappings":";;;;;;;;;;;;;;;;;;AAaA,UAAM,aAAaA,SAAmB,SAAA,YAAiC;AAqCvE,UAAM,gBAAgB,IAAA;AAEtB,YAAQ,wBAAwB,SAAS,OAAO;AAAA,MAC/C;AAAA,MACA,YAAY,WAAW;AAAA,MACvB;AAAA,IAAA,EACC,CAAC;AAOH,aAAS,SAAS,UAAyB;AAC1C,UAAI,cAAc,UAAU,UAAa,cAAc,UAAU,UAAU;AAC1E,aAAK,qFAAqF;AAAA,MAC3F;AACA,oBAAc,QAAQ;AAAA,IACvB;AAOA,aAAS,SAAS,OAAe;AAChC,iBAAW,QAAQ;AAAA,IACpB;;0BAICC,YAUc,aAAA;AAAA,QATZ,OAAAC,KAAAA;AAAAA,QACA,aAAAC,KAAAA;AAAAA,QACA,cAAYC,KAAAA,eAAeC,KAAAA;AAAAA,MAAAA;yBAC5B,MAEY;AAAA,UAFK,cAAA,sBAAjBJ,YAEY,WAAA;AAAA;YAFoB,KAAA;AAAA,UAAA;6BAC/B,MAAQ;AAAA,cAARK,WAAQ,KAAA,QAAA,SAAA;AAAA,YAAA;;8BAETC,mBAEO,QAAA;AAAA;YAFO,OAAKC,eAAEC,KAAAA,OAAO,iCAAiC;AAAA,UAAA;YAC5DH,WAAQ,KAAA,QAAA,SAAA;AAAA,UAAA;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcRadioGroupButton-BNydXurR.mjs → NcRadioGroupButton-CDA5i7Dq.mjs} RENAMED Viewed

@@ -1,6 +1,7 @@
-import '../assets/NcRadioGroupButton-qxDfssOp.css';
-import { defineComponent, onMounted, computed, createElementBlock, openBlock, normalizeClass, createCommentVNode, createElementVNode, renderSlot, unref, toDisplayString } from "vue";
+import '../assets/NcRadioGroupButton-DRZ1_-yY.css';
+import { defineComponent, onMounted, computed, createElementBlock, openBlock, normalizeClass, unref, createCommentVNode, createElementVNode, renderSlot, toDisplayString } from "vue";
 import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
+import { u as useNcFormBox } from "./useNcFormBox-DA9iwXWY.mjs";
 import { u as useInsideRadioGroup } from "./useNcRadioGroup-DaZbEKbf.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const _hoisted_1 = ["id"];
@@ -16,6 +17,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const labelId = createElementId();
     const radioGroup = useInsideRadioGroup();
+    const { formBoxItemClass } = useNcFormBox();
     onMounted(() => radioGroup.value.register(true));
     const isChecked = computed(() => radioGroup?.value.modelValue === props.value);
     function onUpdate() {
@@ -25,7 +27,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass([{
           [_ctx.$style.radioGroupButton_active]: isChecked.value
-        }, _ctx.$style.radioGroupButton]),
+        }, _ctx.$style.radioGroupButton, unref(formBoxItemClass)]),
         onClick: onUpdate
       }, [
         _ctx.$slots.icon ? (openBlock(), createElementBlock("div", {
@@ -52,12 +54,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const radioGroupButton = "_radioGroupButton_12t7u_20";
-const radioGroupButton__label = "_radioGroupButton__label_12t7u_46";
-const radioGroupButton__icon = "_radioGroupButton__icon_12t7u_49";
-const radioGroupButton_active = "_radioGroupButton_active_12t7u_70";
+const radioGroupButton = "_radioGroupButton_1euqq_20";
+const radioGroupButton__label = "_radioGroupButton__label_1euqq_46";
+const radioGroupButton__icon = "_radioGroupButton__icon_1euqq_49";
+const radioGroupButton_active = "_radioGroupButton_active_1euqq_62";
 const style0 = {
-  "material-design-icon": "_material-design-icon_12t7u_12",
+  "material-design-icon": "_material-design-icon_1euqq_12",
   radioGroupButton,
   radioGroupButton__label,
   radioGroupButton__icon,
@@ -70,4 +72,4 @@ const NcRadioGroupButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModule
 export {
   NcRadioGroupButton as N
 };
-//# sourceMappingURL=NcRadioGroupButton-BNydXurR.mjs.map
+//# sourceMappingURL=NcRadioGroupButton-CDA5i7Dq.mjs.map

package/dist/chunks/NcRadioGroupButton-CDA5i7Dq.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcRadioGroupButton-CDA5i7Dq.mjs","sources":["../../src/components/NcRadioGroupButton/NcRadioGroupButton.vue"],"sourcesContent":["\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { computed, onMounted } from 'vue'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { useNcFormBox } from '../NcFormBox/useNcFormBox.ts'\nimport { useInsideRadioGroup } from '../NcRadioGroup/useNcRadioGroup.ts'\n\nconst props = defineProps<{\n\t/**\n\t * Non visible label for accessibility when no `label` is passed.\n\t */\n\tariaLabel?: string\n\n\t/**\n\t * The visual label of the radio button\n\t */\n\tlabel?: string\n\n\t/**\n\t * The value that should be assigned to the `modelValue` of the `NcRadioGroup`.\n\t */\n\tvalue: string\n}>()\n\ndefineSlots<{\n\t/**\n\t * Optional icon slot\n\t */\n\ticon?: Slot\n}>()\n\nconst labelId = createElementId()\nconst radioGroup = useInsideRadioGroup()\nconst { formBoxItemClass } = useNcFormBox()\n\nonMounted(() => radioGroup!.value.register(true))\n\nconst isChecked = computed(() => radioGroup?.value.modelValue === props.value)\n\n/**\n * Handle updating the current model value\n */\nfunction onUpdate() {\n\tradioGroup!.value.onUpdate(props.value)\n}\n</script>\n\n<template>\n\t<div\n\t\t:class=\"[{\n\t\t\t[$style.radioGroupButton_active]: isChecked,\n\t\t}, $style.radioGroupButton, formBoxItemClass]\"\n\t\t@click=\"onUpdate\">\n\t\t<div v-if=\"$slots.icon\" :class=\"$style.radioGroupButton__icon\">\n\t\t\t<slot name=\"icon\" />\n\t\t</div>\n\n\t\t<div v-if=\"label\" :id=\"labelId\" :class=\"$style.radioGroupButton__label\">\n\t\t\t{{ label }}\n\t\t</div>\n\n\t\t<input\n\t\t\t:aria-labelledby=\"label ? labelId : undefined\"\n\t\t\t:aria-label=\"label ? undefined : ariaLabel\"\n\t\t\tclass=\"hidden-visually\"\n\t\t\t:checked=\"isChecked\"\n\t\t\ttype=\"radio\"\n\t\t\t:value\n\t\t\t@input=\"onUpdate\">\n\t</div>\n</template>\n\n<style module lang=\"scss\">\n.radioGroupButton {\n\t--radio-group-button--border-radius: var(--border-radius-small);\n\t--radio-group-button--border-width: 1px;\n\t--radio-group-button--color: var(--color-primary-element-light-text);\n\t--radio-group-button--background-color: var(--color-primary-element-light);\n\t--radio-group-button--background-color-hover: var(--color-primary-element-light-hover);\n\t--radio-group-button--padding: 1px;\n\tcursor: pointer;\n\tcolor: var(--radio-group-button--color);\n\tbackground-color: var(--radio-group-button--background-color);\n\ttransition: var(--animation-quick) background-color;\n\tborder: var(--radio-group-button--border-width) solid var(--radio-group-button--background-color-hover);\n\tborder-bottom-width: 2px;\n\tborder-radius: var(--radio-group-button--border-radius);\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: center;\n\ttext-align: center;\n\tmin-height: var(--default-clickable-area);\n\t// ensure that the content is centered because of uneven border\n\tpadding-block: var(--radio-group-button--padding) 0;\n\tpadding-inline: var(--radio-group-button--padding);\n\n\t* {\n\t\tcursor: pointer;\n\t}\n\n\t&:has(&__label) {\n\t\tpadding-inline: calc(var(--radio-group-button--padding) + var(--border-radius-element));\n\t}\n\n\t&:has(&__icon) {\n\t\tpadding-inline-start: var(--radio-group-button--padding);\n\t}\n\n\t&:hover {\n\t\tbackground-color: var(--radio-group-button--background-color-hover);\n\t}\n\n\t&:focus-within {\n\t\t--radio-group-button--border-width: 2px;\n\t\t--radio-group-button--padding: 0px;\n\t\tborder: var(--radio-group-button--border-width) solid var(--color-main-text) !important;\n\t\toutline: calc(var(--default-grid-baseline) / 2) var(--color-main-background);\n\t}\n}\n\n.radioGroupButton_active {\n\t--radio-group-button--color: var(--color-primary-element-text);\n\t--radio-group-button--background-color: var(--color-primary-element);\n\t--radio-group-button--background-color-hover: var(--color-primary-element-hover);\n}\n\n.radioGroupButton__label {\n\tfont-weight: bold;\n}\n\n.radioGroupButton__icon {\n\t--radio-group-button--icon-size: calc(var(--default-clickable-area) - 4px);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\theight: 100%;\n\twidth: var(--radio-group-button--icon-size);\n\n\t// make sure the icon is a bit smaller to account for border\n\t* {\n\t\t--default-clickable-area: var(--radio-group-button--icon-size);\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","$style","_unref","$slots","_renderSlot","label","_createElementVNode","ariaLabel","value"],"mappings":";;;;;;;;;;;;;;;AAaA,UAAM,QAAQ;AAwBd,UAAM,UAAU,gBAAA;AAChB,UAAM,aAAa,oBAAA;AACnB,UAAM,EAAE,iBAAA,IAAqB,aAAA;AAE7B,cAAU,MAAM,WAAY,MAAM,SAAS,IAAI,CAAC;AAEhD,UAAM,YAAY,SAAS,MAAM,YAAY,MAAM,eAAe,MAAM,KAAK;AAK7E,aAAS,WAAW;AACnB,iBAAY,MAAM,SAAS,MAAM,KAAK;AAAA,IACvC;;0BAICA,mBAqBM,OAAA;AAAA,QApBJ,OAAKC,eAAA,CAAA;AAAA,WAASC,KAAAA,OAAO,uBAAuB,GAAG,UAAA;AAAA,QAAA,GAAgBA,KAAAA,OAAO,kBAAkBC,MAAA,gBAAA,CAAgB,CAAA;AAAA,QAGxG,SAAO;AAAA,MAAA;QACGC,KAAAA,OAAO,qBAAlBJ,mBAEM,OAAA;AAAA;UAFmB,OAAKC,eAAEC,KAAAA,OAAO,sBAAsB;AAAA,QAAA;UAC5DG,WAAoB,KAAA,QAAA,MAAA;AAAA,QAAA;QAGVC,KAAAA,sBAAXN,mBAEM,OAAA;AAAA;UAFa,IAAIG,MAAA,OAAA;AAAA,UAAU,OAAKF,eAAEC,KAAAA,OAAO,uBAAuB;AAAA,QAAA,mBAClEI,KAAAA,KAAK,GAAA,IAAA,UAAA;QAGTC,mBAOmB,SAAA;AAAA,UANjB,mBAAiBD,KAAAA,QAAQH,MAAA,OAAA,IAAU;AAAA,UACnC,cAAYG,KAAAA,QAAQ,SAAYE,KAAAA;AAAAA,UACjC,OAAM;AAAA,UACL,SAAS,UAAA;AAAA,UACV,MAAK;AAAA,UACJ,OAAAC,KAAAA;AAAAA,UACA,SAAO;AAAA,QAAA;;;;;;;;;;;;;;;;;;;;"}