@nextcloud/vue 9.12.0 → 9.13.1

package/dist/chunks/NcDialog.mjs

@@ -159,7 +159,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const NcDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-24e91b99"]]);
+const NcDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-adda232f"]]);
 export {
   NcDialog as N
 };

package/dist/chunks/NcDialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcDialog.mjs","sources":["../../src/components/NcDialog/NcDialog.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### General description\n\nThis component uses the `NcModal` under the hood for allowing users to create generic dialogs.\n\n### Basic example\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcDialog v-model:open=\"showDialog\" name=\"Confirmation\" message=\"Are you sure to proceed?\" :buttons=\"buttons\" />\n\t\t<p>Last response: {{ lastResponse }}</p>\n\t</div>\n</template>\n<script>\nimport IconCancel from '@mdi/svg/svg/cancel.svg?raw'\nimport IconCheck from '@mdi/svg/svg/check.svg?raw'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tlastResponse: 'None',\n\t\t\tbuttons: [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Cancel',\n\t\t\t\t\ticon: IconCancel,\n\t\t\t\t\tcallback: () => { this.lastResponse = 'Pressed \"Cancel\"' },\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Ok',\n\t\t\t\t\ttype: 'primary',\n\t\t\t\t\ticon: IconCheck,\n\t\t\t\t\tcallback: () => { this.lastResponse = 'Pressed \"Ok\"' },\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t},\n}\n</script>\n```\n\n### Use custom actions and content\nInstead of using the buttons property, you can also inject your custom actions using a named slot.\nYou can also use the default slot to inject custom content.\n\n```vue\n<template>\n\t<div style=\"display: flex; gap: 12px;\">\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcButton @click=\"showLongDialog = true\">Show long dialog</NcButton>\n\t\t<NcDialog v-if=\"showDialog\" name=\"Warning\" no-close>\n\t\t\t<template #actions>\n\t\t\t\t<NcButton @click=\"showDialog = false\">Ok</NcButton>\n\t\t\t</template>\n\t\t\t<div style=\"color: red; font-weight: bold;\">This is serious</div>\n\t\t</NcDialog>\n\t\t<NcDialog v-model:open=\"showLongDialog\" name=\"Lorem Ipsum\">\n\t\t\t<p v-for=\"i in new Array(63)\" :key=\"i\">Lorem ipsum dolor sit amet.</p>\n\t\t</NcDialog>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tshowLongDialog: false,\n\t\t}\n\t},\n}\n</script>\n```\n\n### Form example\nIt is also possible to use the dialog for small forms.\nThis can be used when asking for a password, a name or similar to have native form validation.\n\nTo make the dialog a form the `is-form` prop needs to be set.\nWhen using the form variant you can also pass buttons with `nativeType` prop to add a native `submit` button.\n\nNote that this is not possible if the dialog contains a navigation!\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcDialog is-form\n\t\t\t:buttons=\"buttons\"\n\t\t\tname=\"Choose a name\"\n\t\t\tv-model:open=\"showDialog\"\n\t\t\t@submit=\"currentName = newName\"\n\t\t\t@reset=\"newName = ''\"\n\t\t\t@closing=\"newName = ''\">\n\t\t\t<NcTextField v-model=\"newName\"\n\t\t\t\tlabel=\"New name\"\n\t\t\t\tminlength=\"6\"\n\t\t\t\tplaceholder=\"Min. 6 characters\"\n\t\t\t\trequired />\n\t\t</NcDialog>\n\t\t<p>New name: {{ currentName }}</p>\n\t</div>\n</template>\n<script>\nimport IconCheck from '@mdi/svg/svg/check.svg?raw'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tnewName: '',\n\t\t\tcurrentName: 'none yet.',\n\t\t\tbuttons: [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Reset',\n\t\t\t\t\tnativeType: 'reset',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Submit',\n\t\t\t\t\ttype: 'primary',\n\t\t\t\t\tnativeType: 'submit',\n\t\t\t\t\ticon: IconCheck,\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t},\n}\n</script>\n```\n\n### Loading buttons\nSometimes a dialog ends with a request and this request might fail due to server-side-validation.\nIn this case it is often desired to keep the dialog open, this can be done by returning `false` from the button callback,\nto not block this callback should return a `Promise<false>`.\n\nIt is also possible to get the result of the callback from the dialog, as the result is passed as the payload of the `closing` event.\n\nWhile the promise is awaited the button will have a loading state,\nthis means, as long as no custom `icon`-slot is used, a loading icon will be shown.\nPlease note that the **button will not be disabled or accessibility reasons**,\nbecause disabled elements cannot be focused and so the loading state could not be communicated e.g. via screen readers.\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"openDialog\">Show dialog</NcButton>\n\t\t<NcDialog :buttons=\"buttons\"\n\t\t\tname=\"Create user\"\n\t\t\t:message=\"message\"\n\t\t\t:open.sync=\"showDialog\"\n\t\t\t@closing=\"response = $event\"\n\t\t\t@update:open=\"clickClosesDialog = false\" />\n\t\t<div style=\"margin-top: 8px;\">Dialog response: {{ response }}</div>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tclickClosesDialog: false,\n\t\t\tresponse: 'none',\n\t\t}\n\t},\n\n\tmethods: {\n\t\tasync callback() {\n\t\t\t// wait 3 seconds\n\t\t\tawait new Promise((resolve) => window.setTimeout(resolve, 3000))\n\t\t\tthis.clickClosesDialog = !this.clickClosesDialog\n\t\t\t// Do not close the dialog on first and then every second button click\n\t\t\tif (this.clickClosesDialog) {\n\t\t\t\t// return false means the dialog stays open\n\t\t\t\treturn false\n\t\t\t}\n\t\t\treturn '✅'\n\t\t},\n\n\t\topenDialog() {\n\t\t\tthis.response = 'none'\n\t\t\tthis.showDialog = true\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tbuttons() {\n\t\t\treturn [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Create user',\n\t\t\t\t\ttype: 'primary',\n\t\t\t\t\tcallback: this.callback,\n\t\t\t\t}\n\t\t\t]\n\t\t},\n\t\tmessage() {\n\t\t\tif (this.clickClosesDialog) {\n\t\t\t\treturn 'Next button click will work and close the dialog.'\n\t\t\t} else {\n\t\t\t\treturn 'Clicking the button will load but not close the dialog.'\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\nimport type { ComponentProps, VueClassType } from '../../utils/VueTypes.ts'\n\nimport { useElementSize } from '@vueuse/core'\nimport { computed, ref, useTemplateRef } from 'vue'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport NcDialogButton from '../NcDialogButton/index.ts'\nimport NcModal from '../NcModal/index.js'\n\ntype NcDialogButtonProps = ComponentProps<typeof NcDialogButton>\n\n/**\n * Whether the dialog should be shown\n */\nconst open = defineModel<boolean>('open', { default: true })\n\nconst props = withDefaults(defineProps<{\n\t/** Name of the dialog (the heading) */\n\tname: string\n\n\t/** Text of the dialog */\n\tmessage?: string\n\n\t/** Additional elements to add to the focus trap */\n\tadditionalTrapElements?: Array<string | HTMLElement>\n\n\t/**\n\t * The element where to mount the dialog, if `null` is passed the dialog is mounted in place.\n\t */\n\tcontainer?: string\n\n\t/**\n\t * Size of the underlying NcModal\n\t */\n\tsize?: 'small' | 'normal' | 'large' | 'full'\n\n\t/**\n\t * Buttons to display\n\t */\n\tbuttons?: NcDialogButtonProps[]\n\n\t/**\n\t * Make the dialog wrapper a HTML form element.\n\t * The buttons will be wrapped within the form so they can be used as submit / reset buttons.\n\t * Please note that when using the property the `navigation` should not be used.\n\t */\n\tisForm?: boolean\n\n\t/**\n\t * Do not show the close button for the dialog.\n\t */\n\tnoClose?: boolean\n\n\t/**\n\t * Close the dialog if the user clicked outside of the dialog\n\t * Only relevant if `noClose` is not set.\n\t */\n\tcloseOnClickOutside?: boolean\n\n\t/**\n\t * Declare if hiding the modal should be animated\n\t */\n\toutTransition?: boolean\n\n\t/**\n\t * aria-label for the dialog navigation.\n\t * Use it when you want to provide a more meaningful label than the dialog name.\n\t *\n\t * By default, navigation is labeled by the dialog name.\n\t */\n\tnavigationAriaLabel?: string\n\n\t/**\n\t * aria-labelledby for the dialog navigation.\n\t * Use it when you have an implicit navigation label (e.g. a heading).\n\t *\n\t * By default, navigation is labeled by the dialog name.\n\t */\n\tnavigationAriaLabelledby?: string\n\n\t/**\n\t * Optionally pass additional classes which will be set on the content wrapper for custom styling\n\t */\n\tcontentClasses?: VueClassType\n\n\t/**\n\t * Optionally pass additional classes which will be set on the dialog itself\n\t * (the default `class` attribute will be set on the modal wrapper)\n\t */\n\tdialogClasses?: VueClassType\n\n\t/**\n\t * Optionally pass additional classes which will be set on the navigation for custom styling\n\t *\n\t * @example\n\t * ```html\n\t * <DialogBase :navigation-classes=\"['mydialog-navigation']\"><!-- --></DialogBase>\n\t * <!-- ... -->\n\t * <style lang=\"scss\">\n\t * :deep(.mydialog-navigation) {\n\t *     flex-direction: row-reverse;\n\t * }\n\t * </style>\n\t * ```\n\t */\n\tnavigationClasses?: VueClassType\n}>(), {\n\tadditionalTrapElements: () => [],\n\tbuttons: () => [],\n\tcontainer: 'body',\n\tcontentClasses: '',\n\tdialogClasses: '',\n\tmessage: '',\n\tnavigationAriaLabel: '',\n\tnavigationAriaLabelledby: '',\n\tnavigationClasses: '',\n\tsize: 'small',\n})\n\nconst emit = defineEmits<{\n\t/**\n\t * Emitted when the dialog is closing, so the out transition did not finish yet.\n\t *\n\t * @param result - The result of the button callback (`undefined` if closing because of clicking the 'close'-button)\n\t */\n\tclosing: [result?: unknown]\n\t/**\n\t * Forwarded HTMLFormElement reset event (only if `is-form` is set).\n\t *\n\t * @param event - The forwarded form event\n\t */\n\treset: [event: Event]\n\t/**\n\t * Forwarded HTMLFormElement submit event (only if `is-form` is set)\n\t *\n\t * @param event - The submit event\n\t */\n\tsubmit: [event: SubmitEvent]\n}>()\n\nconst slots = defineSlots<{\n\tactions?: Slot\n\tdefault?: Slot\n\tnavigation?: Slot\n}>()\n\n/**\n * The dialog wrapper element\n */\nconst wrapperElement = useTemplateRef('wrapper')\n\n/**\n * We use the dialog width to decide if we collapse the navigation (flex direction row)\n */\nconst { width: dialogWidth } = useElementSize(wrapperElement, { width: 900, height: 0 })\n\n/**\n * Whether the navigation is collapsed due to dialog and window size\n * (collapses when modal is below: 900px modal width - 2x 12px margin)\n */\nconst isNavigationCollapsed = computed(() => dialogWidth.value < 876)\n\n/**\n * Whether a navigation was passed and the element should be displayed\n */\nconst hasNavigation = computed(() => slots?.navigation !== undefined)\n\n/**\n * The unique id of the nav element\n */\nconst navigationId = createElementId()\n\n/**\n * aria-label attribute for the nav element\n */\nconst navigationAriaLabelAttr = computed(() => props.navigationAriaLabel || undefined)\n\n/**\n * aria-labelledby attribute for the nav element\n */\nconst navigationAriaLabelledbyAttr = computed(() => {\n\tif (props.navigationAriaLabel) {\n\t\t// Not needed, already labelled by aria-label\n\t\treturn undefined\n\t}\n\t// Use dialog name as a fallback label for navigation\n\treturn props.navigationAriaLabelledby || navigationId\n})\n\nconst dialogRootElement = useTemplateRef<HTMLDivElement | HTMLFormElement>('dialogElement')\n/**\n * The HTML element to use for the dialog wrapper - either form or plain div\n */\nconst dialogTagName = computed(() => props.isForm && !hasNavigation.value ? 'form' : 'div')\n/**\n * Listener to assign to the dialog element\n * This only sets the `@submit` listener if the dialog element is a form\n */\nconst dialogListeners = computed(() => {\n\tif (dialogTagName.value !== 'form') {\n\t\treturn {}\n\t}\n\n\treturn {\n\t\t/**\n\t\t * @param event - Form submit event\n\t\t */\n\t\tsubmit(event: SubmitEvent) {\n\t\t\tevent.preventDefault()\n\t\t\temit('submit', event)\n\t\t},\n\n\t\t/**\n\t\t * @param event - Form submit event\n\t\t */\n\t\treset(event: Event) {\n\t\t\tevent.preventDefault()\n\t\t\temit('reset', event)\n\t\t},\n\t}\n})\n\n/**\n * If the underlying modal is shown\n */\nconst showModal = ref(true)\n\n// Because NcModal does not emit `close` when show prop is changed\n/**\n * Handle clicking a dialog button -> should close\n *\n * @param button - The button that was clicked\n * @param result - Result of the callback function\n */\nfunction handleButtonClose(button: NcDialogButtonProps, result: unknown) {\n\t// Skip close on submit if invalid dialog\n\tif (button.type === 'submit'\n\t\t&& dialogTagName.value === 'form'\n\t\t&& 'reportValidity' in dialogRootElement.value!\n\t\t&& !dialogRootElement.value.reportValidity()) {\n\t\treturn\n\t}\n\thandleClosing(result)\n\twindow.setTimeout(() => handleClosed(), 300)\n}\n\n/**\n * Handle closing the dialog, optional out transition did not run yet\n *\n * @param result - The result of the callback\n */\nfunction handleClosing(result?: unknown): void {\n\tshowModal.value = false\n\temit('closing', result)\n}\n\n/**\n * Handle dialog closed (out transition finished)\n */\nfunction handleClosed() {\n\tshowModal.value = true\n\topen.value = false\n}\n\n/**\n * Properties to pass to the underlying NcModal\n */\nconst modalProps = computed(() => ({\n\tnoClose: props.noClose,\n\tcontainer: props.container === undefined ? 'body' : props.container,\n\t// we do not pass the name as we already have the name as the headline\n\t// name: props.name,\n\t// But we need to set the correct label id so the dialog is labelled\n\tlabelId: navigationId,\n\tsize: props.size,\n\tshow: open.value && showModal.value,\n\toutTransition: props.outTransition,\n\tcloseOnClickOutside: props.closeOnClickOutside,\n\tadditionalTrapElements: props.additionalTrapElements,\n}))\n</script>\n\n<template>\n\t<NcModal\n\t\tv-if=\"open\"\n\t\tclass=\"dialog__modal\"\n\t\tdisableSwipe\n\t\tv-bind=\"modalProps\"\n\t\t@close=\"handleClosed\"\n\t\t@update:show=\"handleClosing()\">\n\t\t<!-- The dialog name / header -->\n\t\t<h2 :id=\"navigationId\" class=\"dialog__name\" v-text=\"name\" />\n\t\t<component\n\t\t\t:is=\"dialogTagName\"\n\t\t\tref=\"dialogElement\"\n\t\t\tclass=\"dialog\"\n\t\t\t:class=\"dialogClasses\"\n\t\t\tv-on=\"dialogListeners\">\n\t\t\t<div ref=\"wrapper\" class=\"dialog__wrapper\" :class=\"[{ 'dialog__wrapper--collapsed': isNavigationCollapsed }]\">\n\t\t\t\t<!-- When the navigation is collapsed (too small dialog) it is displayed above the main content, otherwise on the inline start -->\n\t\t\t\t<nav\n\t\t\t\t\tv-if=\"hasNavigation\"\n\t\t\t\t\tclass=\"dialog__navigation\"\n\t\t\t\t\t:class=\"navigationClasses\"\n\t\t\t\t\t:aria-label=\"navigationAriaLabelAttr\"\n\t\t\t\t\t:aria-labelledby=\"navigationAriaLabelledbyAttr\">\n\t\t\t\t\t<slot name=\"navigation\" :isCollapsed=\"isNavigationCollapsed\" />\n\t\t\t\t</nav>\n\t\t\t\t<!-- Main dialog content -->\n\t\t\t\t<div class=\"dialog__content\" :class=\"contentClasses\">\n\t\t\t\t\t<slot>\n\t\t\t\t\t\t<p class=\"dialog__text\">\n\t\t\t\t\t\t\t{{ message }}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</slot>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<!-- The dialog actions aka the buttons -->\n\t\t\t<div class=\"dialog__actions\">\n\t\t\t\t<slot name=\"actions\">\n\t\t\t\t\t<NcDialogButton\n\t\t\t\t\t\tv-for=\"(button, idx) in buttons\"\n\t\t\t\t\t\t:key=\"idx\"\n\t\t\t\t\t\tv-bind=\"button\"\n\t\t\t\t\t\t@click=\"(_, result) => handleButtonClose(button, result)\" />\n\t\t\t\t</slot>\n\t\t\t</div>\n\t\t</component>\n\t</NcModal>\n</template>\n\n<style lang=\"scss\">\n/** When having the small dialog style we override the modal styling so dialogs look more dialog like */\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.dialog__modal .modal-wrapper--small .modal-container {\n\t\twidth: fit-content;\n\t\theight: unset;\n\t\tmax-height: 90%;\n\t\tposition: relative;\n\t\ttop: unset;\n\t\tborder-radius: var(--border-radius-element);\n\t}\n}\n</style>\n\n<style lang=\"scss\" scoped>\n.dialog {\n\theight: 100%;\n\twidth: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\toverflow: hidden;\n\n\t&__modal {\n\t\t:deep(.modal-wrapper .modal-container) {\n\t\t\tdisplay: flex !important;\n\t\t\tpadding-block: 4px 0; // 4px to align with close button, 0 block-end to make overflowing content on scroll look nice\n\t\t\tpadding-inline: 12px 0; // Same as with padding-block, we need the actions to have a margin of 4px for the button outline\n\t\t}\n\t\t:deep(.modal-wrapper .modal-container__content) {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\toverflow: hidden; // Only overflow on the .dialog__content\n\t\t}\n\t}\n\n\t&__wrapper {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\t// Auto scale to fit\n\t\tflex: 1;\n\t\tmin-height: 0;\n\t\toverflow: hidden;\n\n\t\t&--collapsed {\n\t\t\tflex-direction: column;\n\t\t}\n\t}\n\n\t&__navigation {\n\t\tdisplay: flex;\n\t\tflex-shrink: 0;\n\t}\n\n\t// Navigation styling when side-by-side with content\n\t&__wrapper:not(&__wrapper--collapsed) &__navigation {\n\t\tflex-direction: column;\n\n\t\toverflow: hidden auto;\n\t\theight: 100%;\n\t\tmin-width: 200px;\n\t\tmargin-inline-end: 20px;\n\t}\n\n\t// Navigation styling when on top of content\n\t&__wrapper#{&}__wrapper--collapsed &__navigation {\n\t\tflex-direction: row;\n\t\tjustify-content: space-between;\n\n\t\toverflow: auto hidden;\n\t\twidth: 100%;\n\t\tmin-width: 100%;\n\t}\n\n\t&__name {\n\t\tfont-size: 21px;\n\n\t\ttext-align: center;\n\t\theight: fit-content;\n\t\tmin-height: var(--default-clickable-area);\n\t\tline-height: var(--default-clickable-area);\n\t\toverflow-wrap: break-word;\n\t\tmargin-block: 0 12px;\n\t}\n\n\t&__content {\n\t\t// Auto fit\n\t\tflex: 1;\n\t\tmin-height: 0;\n\t\toverflow: auto;\n\t\t// see .dialog__modal, we can not set the padding there to prevent floating scroll bars\n\t\tpadding-inline-end: 12px;\n\t}\n\n\t// In case only text content is show\n\t&__text {\n\t\t// Also add padding to the bottom to make it more readable\n\t\tpadding-block-end: 6px;\n\t}\n\n\t&__actions {\n\t\tdisplay: flex;\n\t\tgap: 6px;\n\t\talign-content: center;\n\t\tjustify-content: end;\n\n\t\twidth: 100%;\n\t\tmax-width: 100%;\n\t\tpadding-inline: 0 12px; // 12px to align with the overall modal padding\n\t\tmargin-inline: 0;\n\t\tmargin-block: 0;\n\n\t\t&:not(:empty) {\n\t\t\tmargin-block: 6px 12px; // only if there are actions, we add margin so if it is empty scroll content looks nice\n\t\t}\n\t}\n}\n\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t// Ensure the dialog name does not interfere with the close button\n\t.dialog__name {\n\t\ttext-align: start;\n\t\tmargin-inline-end: var(--default-clickable-area);\n\t}\n}\n</style>\n"],"names":["_useModel","_useSlots","_openBlock","_createBlock","_unref","_mergeProps","_createElementVNode","_toDisplayString","_resolveDynamicComponent","_toHandlers","_normalizeClass","_createElementBlock","_renderSlot","_Fragment","_renderList"],"mappings":"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"}
+{"version":3,"file":"NcDialog.mjs","sources":["../../src/components/NcDialog/NcDialog.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### General description\n\nThis component uses the `NcModal` under the hood for allowing users to create generic dialogs.\n\n### Basic example\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcDialog v-model:open=\"showDialog\" name=\"Confirmation\" message=\"Are you sure to proceed?\" :buttons=\"buttons\" />\n\t\t<p>Last response: {{ lastResponse }}</p>\n\t</div>\n</template>\n<script>\nimport IconCancel from '@mdi/svg/svg/cancel.svg?raw'\nimport IconCheck from '@mdi/svg/svg/check.svg?raw'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tlastResponse: 'None',\n\t\t\tbuttons: [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Cancel',\n\t\t\t\t\ticon: IconCancel,\n\t\t\t\t\tcallback: () => { this.lastResponse = 'Pressed \"Cancel\"' },\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Ok',\n\t\t\t\t\ttype: 'primary',\n\t\t\t\t\ticon: IconCheck,\n\t\t\t\t\tcallback: () => { this.lastResponse = 'Pressed \"Ok\"' },\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t},\n}\n</script>\n```\n\n### Use custom actions and content\nInstead of using the buttons property, you can also inject your custom actions using a named slot.\nYou can also use the default slot to inject custom content.\n\n```vue\n<template>\n\t<div style=\"display: flex; gap: 12px;\">\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcButton @click=\"showLongDialog = true\">Show long dialog</NcButton>\n\t\t<NcDialog v-if=\"showDialog\" name=\"Warning\" no-close>\n\t\t\t<template #actions>\n\t\t\t\t<NcButton @click=\"showDialog = false\">Ok</NcButton>\n\t\t\t</template>\n\t\t\t<div style=\"color: red; font-weight: bold;\">This is serious</div>\n\t\t</NcDialog>\n\t\t<NcDialog v-model:open=\"showLongDialog\" name=\"Lorem Ipsum\">\n\t\t\t<p v-for=\"i in new Array(63)\" :key=\"i\">Lorem ipsum dolor sit amet.</p>\n\t\t</NcDialog>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tshowLongDialog: false,\n\t\t}\n\t},\n}\n</script>\n```\n\n### Form example\nIt is also possible to use the dialog for small forms.\nThis can be used when asking for a password, a name or similar to have native form validation.\n\nTo make the dialog a form the `is-form` prop needs to be set.\nWhen using the form variant you can also pass buttons with `nativeType` prop to add a native `submit` button.\n\nNote that this is not possible if the dialog contains a navigation!\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcDialog is-form\n\t\t\t:buttons=\"buttons\"\n\t\t\tname=\"Choose a name\"\n\t\t\tv-model:open=\"showDialog\"\n\t\t\t@submit=\"currentName = newName\"\n\t\t\t@reset=\"newName = ''\"\n\t\t\t@closing=\"newName = ''\">\n\t\t\t<NcTextField v-model=\"newName\"\n\t\t\t\tlabel=\"New name\"\n\t\t\t\tminlength=\"6\"\n\t\t\t\tplaceholder=\"Min. 6 characters\"\n\t\t\t\trequired />\n\t\t</NcDialog>\n\t\t<p>New name: {{ currentName }}</p>\n\t</div>\n</template>\n<script>\nimport IconCheck from '@mdi/svg/svg/check.svg?raw'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tnewName: '',\n\t\t\tcurrentName: 'none yet.',\n\t\t\tbuttons: [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Reset',\n\t\t\t\t\tnativeType: 'reset',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Submit',\n\t\t\t\t\ttype: 'primary',\n\t\t\t\t\tnativeType: 'submit',\n\t\t\t\t\ticon: IconCheck,\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t},\n}\n</script>\n```\n\n### Loading buttons\nSometimes a dialog ends with a request and this request might fail due to server-side-validation.\nIn this case it is often desired to keep the dialog open, this can be done by returning `false` from the button callback,\nto not block this callback should return a `Promise<false>`.\n\nIt is also possible to get the result of the callback from the dialog, as the result is passed as the payload of the `closing` event.\n\nWhile the promise is awaited the button will have a loading state,\nthis means, as long as no custom `icon`-slot is used, a loading icon will be shown.\nPlease note that the **button will not be disabled or accessibility reasons**,\nbecause disabled elements cannot be focused and so the loading state could not be communicated e.g. via screen readers.\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"openDialog\">Show dialog</NcButton>\n\t\t<NcDialog :buttons=\"buttons\"\n\t\t\tname=\"Create user\"\n\t\t\t:message=\"message\"\n\t\t\t:open.sync=\"showDialog\"\n\t\t\t@closing=\"response = $event\"\n\t\t\t@update:open=\"clickClosesDialog = false\" />\n\t\t<div style=\"margin-top: 8px;\">Dialog response: {{ response }}</div>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tclickClosesDialog: false,\n\t\t\tresponse: 'none',\n\t\t}\n\t},\n\n\tmethods: {\n\t\tasync callback() {\n\t\t\t// wait 3 seconds\n\t\t\tawait new Promise((resolve) => window.setTimeout(resolve, 3000))\n\t\t\tthis.clickClosesDialog = !this.clickClosesDialog\n\t\t\t// Do not close the dialog on first and then every second button click\n\t\t\tif (this.clickClosesDialog) {\n\t\t\t\t// return false means the dialog stays open\n\t\t\t\treturn false\n\t\t\t}\n\t\t\treturn '✅'\n\t\t},\n\n\t\topenDialog() {\n\t\t\tthis.response = 'none'\n\t\t\tthis.showDialog = true\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tbuttons() {\n\t\t\treturn [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Create user',\n\t\t\t\t\ttype: 'primary',\n\t\t\t\t\tcallback: this.callback,\n\t\t\t\t}\n\t\t\t]\n\t\t},\n\t\tmessage() {\n\t\t\tif (this.clickClosesDialog) {\n\t\t\t\treturn 'Next button click will work and close the dialog.'\n\t\t\t} else {\n\t\t\t\treturn 'Clicking the button will load but not close the dialog.'\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\nimport type { ComponentProps, VueClassType } from '../../utils/VueTypes.ts'\n\nimport { useElementSize } from '@vueuse/core'\nimport { computed, ref, useTemplateRef } from 'vue'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport NcDialogButton from '../NcDialogButton/index.ts'\nimport NcModal from '../NcModal/index.js'\n\ntype NcDialogButtonProps = ComponentProps<typeof NcDialogButton>\n\n/**\n * Whether the dialog should be shown\n */\nconst open = defineModel<boolean>('open', { default: true })\n\nconst props = withDefaults(defineProps<{\n\t/** Name of the dialog (the heading) */\n\tname: string\n\n\t/** Text of the dialog */\n\tmessage?: string\n\n\t/** Additional elements to add to the focus trap */\n\tadditionalTrapElements?: Array<string | HTMLElement>\n\n\t/**\n\t * The element where to mount the dialog, if `null` is passed the dialog is mounted in place.\n\t */\n\tcontainer?: string\n\n\t/**\n\t * Size of the underlying NcModal\n\t */\n\tsize?: 'small' | 'normal' | 'large' | 'full'\n\n\t/**\n\t * Buttons to display\n\t */\n\tbuttons?: NcDialogButtonProps[]\n\n\t/**\n\t * Make the dialog wrapper a HTML form element.\n\t * The buttons will be wrapped within the form so they can be used as submit / reset buttons.\n\t * Please note that when using the property the `navigation` should not be used.\n\t */\n\tisForm?: boolean\n\n\t/**\n\t * Do not show the close button for the dialog.\n\t */\n\tnoClose?: boolean\n\n\t/**\n\t * Close the dialog if the user clicked outside of the dialog\n\t * Only relevant if `noClose` is not set.\n\t */\n\tcloseOnClickOutside?: boolean\n\n\t/**\n\t * Declare if hiding the modal should be animated\n\t */\n\toutTransition?: boolean\n\n\t/**\n\t * aria-label for the dialog navigation.\n\t * Use it when you want to provide a more meaningful label than the dialog name.\n\t *\n\t * By default, navigation is labeled by the dialog name.\n\t */\n\tnavigationAriaLabel?: string\n\n\t/**\n\t * aria-labelledby for the dialog navigation.\n\t * Use it when you have an implicit navigation label (e.g. a heading).\n\t *\n\t * By default, navigation is labeled by the dialog name.\n\t */\n\tnavigationAriaLabelledby?: string\n\n\t/**\n\t * Optionally pass additional classes which will be set on the content wrapper for custom styling\n\t */\n\tcontentClasses?: VueClassType\n\n\t/**\n\t * Optionally pass additional classes which will be set on the dialog itself\n\t * (the default `class` attribute will be set on the modal wrapper)\n\t */\n\tdialogClasses?: VueClassType\n\n\t/**\n\t * Optionally pass additional classes which will be set on the navigation for custom styling\n\t *\n\t * @example\n\t * ```html\n\t * <DialogBase :navigation-classes=\"['mydialog-navigation']\"><!-- --></DialogBase>\n\t * <!-- ... -->\n\t * <style lang=\"scss\">\n\t * :deep(.mydialog-navigation) {\n\t *     flex-direction: row-reverse;\n\t * }\n\t * </style>\n\t * ```\n\t */\n\tnavigationClasses?: VueClassType\n}>(), {\n\tadditionalTrapElements: () => [],\n\tbuttons: () => [],\n\tcontainer: 'body',\n\tcontentClasses: '',\n\tdialogClasses: '',\n\tmessage: '',\n\tnavigationAriaLabel: '',\n\tnavigationAriaLabelledby: '',\n\tnavigationClasses: '',\n\tsize: 'small',\n})\n\nconst emit = defineEmits<{\n\t/**\n\t * Emitted when the dialog is closing, so the out transition did not finish yet.\n\t *\n\t * @param result - The result of the button callback (`undefined` if closing because of clicking the 'close'-button)\n\t */\n\tclosing: [result?: unknown]\n\t/**\n\t * Forwarded HTMLFormElement reset event (only if `is-form` is set).\n\t *\n\t * @param event - The forwarded form event\n\t */\n\treset: [event: Event]\n\t/**\n\t * Forwarded HTMLFormElement submit event (only if `is-form` is set)\n\t *\n\t * @param event - The submit event\n\t */\n\tsubmit: [event: SubmitEvent]\n}>()\n\nconst slots = defineSlots<{\n\tactions?: Slot\n\tdefault?: Slot\n\tnavigation?: Slot\n}>()\n\n/**\n * The dialog wrapper element\n */\nconst wrapperElement = useTemplateRef('wrapper')\n\n/**\n * We use the dialog width to decide if we collapse the navigation (flex direction row)\n */\nconst { width: dialogWidth } = useElementSize(wrapperElement, { width: 900, height: 0 })\n\n/**\n * Whether the navigation is collapsed due to dialog and window size\n * (collapses when modal is below: 900px modal width - 2x 12px margin)\n */\nconst isNavigationCollapsed = computed(() => dialogWidth.value < 876)\n\n/**\n * Whether a navigation was passed and the element should be displayed\n */\nconst hasNavigation = computed(() => slots?.navigation !== undefined)\n\n/**\n * The unique id of the nav element\n */\nconst navigationId = createElementId()\n\n/**\n * aria-label attribute for the nav element\n */\nconst navigationAriaLabelAttr = computed(() => props.navigationAriaLabel || undefined)\n\n/**\n * aria-labelledby attribute for the nav element\n */\nconst navigationAriaLabelledbyAttr = computed(() => {\n\tif (props.navigationAriaLabel) {\n\t\t// Not needed, already labelled by aria-label\n\t\treturn undefined\n\t}\n\t// Use dialog name as a fallback label for navigation\n\treturn props.navigationAriaLabelledby || navigationId\n})\n\nconst dialogRootElement = useTemplateRef<HTMLDivElement | HTMLFormElement>('dialogElement')\n/**\n * The HTML element to use for the dialog wrapper - either form or plain div\n */\nconst dialogTagName = computed(() => props.isForm && !hasNavigation.value ? 'form' : 'div')\n/**\n * Listener to assign to the dialog element\n * This only sets the `@submit` listener if the dialog element is a form\n */\nconst dialogListeners = computed(() => {\n\tif (dialogTagName.value !== 'form') {\n\t\treturn {}\n\t}\n\n\treturn {\n\t\t/**\n\t\t * @param event - Form submit event\n\t\t */\n\t\tsubmit(event: SubmitEvent) {\n\t\t\tevent.preventDefault()\n\t\t\temit('submit', event)\n\t\t},\n\n\t\t/**\n\t\t * @param event - Form submit event\n\t\t */\n\t\treset(event: Event) {\n\t\t\tevent.preventDefault()\n\t\t\temit('reset', event)\n\t\t},\n\t}\n})\n\n/**\n * If the underlying modal is shown\n */\nconst showModal = ref(true)\n\n// Because NcModal does not emit `close` when show prop is changed\n/**\n * Handle clicking a dialog button -> should close\n *\n * @param button - The button that was clicked\n * @param result - Result of the callback function\n */\nfunction handleButtonClose(button: NcDialogButtonProps, result: unknown) {\n\t// Skip close on submit if invalid dialog\n\tif (button.type === 'submit'\n\t\t&& dialogTagName.value === 'form'\n\t\t&& 'reportValidity' in dialogRootElement.value!\n\t\t&& !dialogRootElement.value.reportValidity()) {\n\t\treturn\n\t}\n\thandleClosing(result)\n\twindow.setTimeout(() => handleClosed(), 300)\n}\n\n/**\n * Handle closing the dialog, optional out transition did not run yet\n *\n * @param result - The result of the callback\n */\nfunction handleClosing(result?: unknown): void {\n\tshowModal.value = false\n\temit('closing', result)\n}\n\n/**\n * Handle dialog closed (out transition finished)\n */\nfunction handleClosed() {\n\tshowModal.value = true\n\topen.value = false\n}\n\n/**\n * Properties to pass to the underlying NcModal\n */\nconst modalProps = computed(() => ({\n\tnoClose: props.noClose,\n\tcontainer: props.container === undefined ? 'body' : props.container,\n\t// we do not pass the name as we already have the name as the headline\n\t// name: props.name,\n\t// But we need to set the correct label id so the dialog is labelled\n\tlabelId: navigationId,\n\tsize: props.size,\n\tshow: open.value && showModal.value,\n\toutTransition: props.outTransition,\n\tcloseOnClickOutside: props.closeOnClickOutside,\n\tadditionalTrapElements: props.additionalTrapElements,\n}))\n</script>\n\n<template>\n\t<NcModal\n\t\tv-if=\"open\"\n\t\tclass=\"dialog__modal\"\n\t\tdisableSwipe\n\t\tv-bind=\"modalProps\"\n\t\t@close=\"handleClosed\"\n\t\t@update:show=\"handleClosing()\">\n\t\t<!-- The dialog name / header -->\n\t\t<h2 :id=\"navigationId\" class=\"dialog__name\" v-text=\"name\" />\n\t\t<component\n\t\t\t:is=\"dialogTagName\"\n\t\t\tref=\"dialogElement\"\n\t\t\tclass=\"dialog\"\n\t\t\t:class=\"dialogClasses\"\n\t\t\tv-on=\"dialogListeners\">\n\t\t\t<div ref=\"wrapper\" class=\"dialog__wrapper\" :class=\"[{ 'dialog__wrapper--collapsed': isNavigationCollapsed }]\">\n\t\t\t\t<!-- When the navigation is collapsed (too small dialog) it is displayed above the main content, otherwise on the inline start -->\n\t\t\t\t<nav\n\t\t\t\t\tv-if=\"hasNavigation\"\n\t\t\t\t\tclass=\"dialog__navigation\"\n\t\t\t\t\t:class=\"navigationClasses\"\n\t\t\t\t\t:aria-label=\"navigationAriaLabelAttr\"\n\t\t\t\t\t:aria-labelledby=\"navigationAriaLabelledbyAttr\">\n\t\t\t\t\t<slot name=\"navigation\" :isCollapsed=\"isNavigationCollapsed\" />\n\t\t\t\t</nav>\n\t\t\t\t<!-- Main dialog content -->\n\t\t\t\t<div class=\"dialog__content\" :class=\"contentClasses\">\n\t\t\t\t\t<slot>\n\t\t\t\t\t\t<p class=\"dialog__text\">\n\t\t\t\t\t\t\t{{ message }}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</slot>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<!-- The dialog actions aka the buttons -->\n\t\t\t<div class=\"dialog__actions\">\n\t\t\t\t<slot name=\"actions\">\n\t\t\t\t\t<NcDialogButton\n\t\t\t\t\t\tv-for=\"(button, idx) in buttons\"\n\t\t\t\t\t\t:key=\"idx\"\n\t\t\t\t\t\tv-bind=\"button\"\n\t\t\t\t\t\t@click=\"(_, result) => handleButtonClose(button, result)\" />\n\t\t\t\t</slot>\n\t\t\t</div>\n\t\t</component>\n\t</NcModal>\n</template>\n\n<style lang=\"scss\">\n/** When having the small dialog style we override the modal styling so dialogs look more dialog like */\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.dialog__modal .modal-wrapper.modal-wrapper--small .modal-container {\n\t\twidth: fit-content;\n\t\theight: unset;\n\t\tmax-height: 90%;\n\t\tposition: relative;\n\t\ttop: unset;\n\t\tborder-radius: var(--border-radius-element);\n\t}\n}\n</style>\n\n<style lang=\"scss\" scoped>\n.dialog {\n\theight: 100%;\n\twidth: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\toverflow: hidden;\n\n\t&__modal {\n\t\t:deep(.modal-wrapper .modal-container) {\n\t\t\tdisplay: flex !important;\n\t\t\tpadding-block: 4px 0; // 4px to align with close button, 0 block-end to make overflowing content on scroll look nice\n\t\t\tpadding-inline: 12px 0; // Same as with padding-block, we need the actions to have a margin of 4px for the button outline\n\t\t}\n\t\t:deep(.modal-wrapper .modal-container__content) {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\toverflow: hidden; // Only overflow on the .dialog__content\n\t\t}\n\t}\n\n\t&__wrapper {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\t// Auto scale to fit\n\t\tflex: 1;\n\t\tmin-height: 0;\n\t\toverflow: hidden;\n\n\t\t&--collapsed {\n\t\t\tflex-direction: column;\n\t\t}\n\t}\n\n\t&__navigation {\n\t\tdisplay: flex;\n\t\tflex-shrink: 0;\n\t}\n\n\t// Navigation styling when side-by-side with content\n\t&__wrapper:not(&__wrapper--collapsed) &__navigation {\n\t\tflex-direction: column;\n\n\t\toverflow: hidden auto;\n\t\theight: 100%;\n\t\tmin-width: 200px;\n\t\tmargin-inline-end: 20px;\n\t}\n\n\t// Navigation styling when on top of content\n\t&__wrapper#{&}__wrapper--collapsed &__navigation {\n\t\tflex-direction: row;\n\t\tjustify-content: space-between;\n\n\t\toverflow: auto hidden;\n\t\twidth: 100%;\n\t\tmin-width: 100%;\n\t}\n\n\t&__name {\n\t\tfont-size: 21px;\n\n\t\ttext-align: center;\n\t\theight: fit-content;\n\t\tmin-height: var(--default-clickable-area);\n\t\tline-height: var(--default-clickable-area);\n\t\toverflow-wrap: break-word;\n\t\tmargin-block: 0 12px;\n\t}\n\n\t&__content {\n\t\t// Auto fit\n\t\tflex: 1;\n\t\tmin-height: 0;\n\t\toverflow: auto;\n\t\t// see .dialog__modal, we can not set the padding there to prevent floating scroll bars\n\t\tpadding-inline-end: 12px;\n\t}\n\n\t// In case only text content is show\n\t&__text {\n\t\t// Also add padding to the bottom to make it more readable\n\t\tpadding-block-end: 6px;\n\t}\n\n\t&__actions {\n\t\tdisplay: flex;\n\t\tgap: 6px;\n\t\talign-content: center;\n\t\tjustify-content: end;\n\n\t\twidth: 100%;\n\t\tmax-width: 100%;\n\t\tpadding-inline: 0 12px; // 12px to align with the overall modal padding\n\t\tmargin-inline: 0;\n\t\tmargin-block: 0;\n\n\t\t&:not(:empty) {\n\t\t\tmargin-block: 6px 12px; // only if there are actions, we add margin so if it is empty scroll content looks nice\n\t\t}\n\t}\n}\n\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t// Ensure the dialog name does not interfere with the close button\n\t.dialog__name {\n\t\ttext-align: start;\n\t\tmargin-inline-end: var(--default-clickable-area);\n\t}\n}\n</style>\n"],"names":["_useModel","_useSlots","_openBlock","_createBlock","_unref","_mergeProps","_createElementVNode","_toDisplayString","_resolveDynamicComponent","_toHandlers","_normalizeClass","_createElementBlock","_renderSlot","_Fragment","_renderList"],"mappings":"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"}

package/dist/chunks/NcFilePicker.mjs

@@ -290,7 +290,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const filePicker = "_filePicker_BUlcx";
+const filePicker = "_filePicker_OtaU5";
 const style0 = {
   filePicker
 };

package/dist/chunks/NcFormBox.mjs

@@ -24,12 +24,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ncFormBox = "_ncFormBox_VNb0a";
-const ncFormBox_row = "_ncFormBox_row_NzGjv";
-const ncFormBox__item = "_ncFormBox__item_JIu9L";
-const ncFormBox_col = "_ncFormBox_col_UaYOI";
+const ncFormBox = "_ncFormBox_8ywSx";
+const ncFormBox_row = "_ncFormBox_row_rN0Yz";
+const ncFormBox__item = "_ncFormBox__item_ZKUg8";
+const ncFormBox_col = "_ncFormBox_col_jXBwS";
 const style0 = {
-  "material-design-icon": "_material-design-icon_UQYft",
+  "material-design-icon": "_material-design-icon_yBoUo",
   ncFormBox,
   ncFormBox_row,
   ncFormBox__item,

package/dist/chunks/NcFormBoxButton.mjs

@@ -130,9 +130,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const formBoxButton = "_formBoxButton_14txJ";
+const formBoxButton = "_formBoxButton_JbeJI";
 const style0 = {
-  "material-design-icon": "_material-design-icon_0RfRa",
+  "material-design-icon": "_material-design-icon_8LcXj",
   formBoxButton
 };
 const cssModules = {

package/dist/chunks/NcFormBoxItem.mjs

@@ -70,15 +70,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const formBoxItem = "_formBoxItem_ER-6m";
-const formBoxItem__description = "_formBoxItem__description_g-KcX";
-const formBoxItem_legacy = "_formBoxItem_legacy_TW1Sp";
-const formBoxItem_inverted = "_formBoxItem_inverted_CxfyH";
-const formBoxItem__element = "_formBoxItem__element_zgVx-";
-const formBoxItem__content = "_formBoxItem__content_dYtDe";
-const formBoxItem__icon = "_formBoxItem__icon_ZIpCi";
+const formBoxItem = "_formBoxItem_0eB9U";
+const formBoxItem__description = "_formBoxItem__description_-Y9pr";
+const formBoxItem_legacy = "_formBoxItem_legacy_K9-y2";
+const formBoxItem_inverted = "_formBoxItem_inverted_-wXyj";
+const formBoxItem__element = "_formBoxItem__element_jngkO";
+const formBoxItem__content = "_formBoxItem__content_hRTkn";
+const formBoxItem__icon = "_formBoxItem__icon_udRxK";
 const style0 = {
-  "material-design-icon": "_material-design-icon_ILRX2",
+  "material-design-icon": "_material-design-icon_50Qhh",
   formBoxItem,
   formBoxItem__description,
   formBoxItem_legacy,

package/dist/chunks/NcFormBoxSwitch.mjs

@@ -77,9 +77,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const formBoxSwitch__input = "_formBoxSwitch__input_BLkhF";
+const formBoxSwitch__input = "_formBoxSwitch__input_oY7zN";
 const style0 = {
-  "material-design-icon": "_material-design-icon_0Ylmc",
+  "material-design-icon": "_material-design-icon_Xz4ev",
   formBoxSwitch__input
 };
 const cssModules = {

package/dist/chunks/NcFormGroup.mjs

@@ -49,14 +49,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const formGroup = "_formGroup_eD8cV";
-const formGroup_noGap = "_formGroup_noGap_Eo-YJ";
-const formGroup__label = "_formGroup__label_KZ5RR";
-const formGroup__description = "_formGroup__description_rYOct";
-const formGroup__content = "_formGroup__content_ypTY1";
-const formGroup__content_only = "_formGroup__content_only_z-ggI";
+const formGroup = "_formGroup_q7zVW";
+const formGroup_noGap = "_formGroup_noGap_6A2Dx";
+const formGroup__label = "_formGroup__label_B0sqc";
+const formGroup__description = "_formGroup__description_V-dp-";
+const formGroup__content = "_formGroup__content_fXWHt";
+const formGroup__content_only = "_formGroup__content_only_o13JX";
 const style0 = {
-  "material-design-icon": "_material-design-icon_pO-y6",
+  "material-design-icon": "_material-design-icon_lkvY0",
   formGroup,
   formGroup_noGap,
   formGroup__label,

package/dist/chunks/NcHotkey.mjs

@@ -42,11 +42,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const hotkey = "_hotkey_rps3-";
-const hotkey__label = "_hotkey__label_9rACj";
-const hotkey__keys = "_hotkey__keys_D5xsu";
+const hotkey = "_hotkey_W5WOO";
+const hotkey__label = "_hotkey__label_UJqDg";
+const hotkey__keys = "_hotkey__keys_DhshL";
 const style0 = {
-  "material-design-icon": "_material-design-icon_Lafyy",
+  "material-design-icon": "_material-design-icon_b8Jeb",
   hotkey,
   hotkey__label,
   hotkey__keys

package/dist/chunks/NcHotkeyList.mjs

@@ -26,8 +26,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const hotkeyList = "_hotkeyList_tAexI";
-const hotkeyList__heading = "_hotkeyList__heading_KDnkd";
+const hotkeyList = "_hotkeyList_l6iQ2";
+const hotkeyList__heading = "_hotkeyList__heading_N5hMl";
 const style0 = {
   hotkeyList,
   hotkeyList__heading

package/dist/chunks/NcIconToggleSwitch.mjs

@@ -35,9 +35,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const iconToggleSwitch = "_iconToggleSwitch_fKjEc";
+const iconToggleSwitch = "_iconToggleSwitch_hhj0H";
 const style0 = {
-  "material-design-icon": "_material-design-icon_Pm1ga",
+  "material-design-icon": "_material-design-icon_zYnoU",
   iconToggleSwitch
 };
 const cssModules = {

package/dist/chunks/NcKbd.mjs

@@ -38,9 +38,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const kbd = "_kbd_gHLon";
+const kbd = "_kbd_ouG-F";
 const style0 = {
-  "material-design-icon": "_material-design-icon_5751A",
+  "material-design-icon": "_material-design-icon_TcOah",
   kbd
 };
 const cssModules = {

package/dist/chunks/NcMentionBubble.vue_vue_type_style_index_0_scoped_3c4a673d_lang.mjs

@@ -1,13 +1,13 @@
 import '../assets/NcMentionBubble.css';
-import { generateUrl } from "@nextcloud/router";
+import { generateAvatarUrl } from "@nextcloud/router";
 import { checkIfDarkTheme } from "../functions/isDarkTheme/index.mjs";
 function getAvatarUrl(user, options) {
-  const size = (options?.size || 64) <= 64 ? 64 : 512;
-  const guestUrl = options?.isGuest ? "/guest" : "";
-  const themeUrl = options?.isDarkTheme ?? checkIfDarkTheme(document.body) ? "/dark" : "";
-  return generateUrl(`/avatar${guestUrl}/{user}/{size}${themeUrl}?guestFallback=true`, {
-    user,
-    size
+  return generateAvatarUrl(user, {
+    size: options?.size,
+    isGuestUser: options?.isGuest,
+    isDarkTheme: options?.isDarkTheme ?? checkIfDarkTheme(document.body),
+    guestFallback: true,
+    version: options?.version
   });
 }
 export {

package/dist/chunks/NcMentionBubble.vue_vue_type_style_index_0_scoped_3c4a673d_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcMentionBubble.vue_vue_type_style_index_0_scoped_3c4a673d_lang.mjs","sources":["../../src/utils/getAvatarUrl.ts"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport { generateUrl } from '@nextcloud/router'\nimport { checkIfDarkTheme } from '../functions/isDarkTheme/index.ts'\n\ninterface AvatarUrlOptions {\n\t/**\n\t * Should the dark theme variant be used.\n\t */\n\tisDarkTheme?: boolean\n\n\t/**\n\t * Is the user a guest user.\n\t */\n\tisGuest?: boolean\n\n\t/**\n\t * Size of the avatar.\n\t *\n\t * @default 64\n\t */\n\tsize?: 64 | 512\n}\n\n/**\n * Get the avatar URL for a given user.\n *\n * @param user - The user id\n * @param options - Adjustments for the avatar format\n */\nexport function getAvatarUrl(user: string, options?: AvatarUrlOptions): string {\n\t// backend only supports 64 and 512px\n\t// so we only request the needed size for better caching of the request.\n\tconst size = (options?.size || 64) <= 64\n\t\t? 64\n\t\t: 512\n\n\tconst guestUrl = options?.isGuest\n\t\t? '/guest'\n\t\t: ''\n\tconst themeUrl = options?.isDarkTheme ?? checkIfDarkTheme(document.body)\n\t\t? '/dark'\n\t\t: ''\n\n\treturn generateUrl(`/avatar${guestUrl}/{user}/{size}${themeUrl}?guestFallback=true`, {\n\t\tuser,\n\t\tsize,\n\t})\n}\n"],"names":[],"mappings":";;AAiCO,SAAS,aAAa,MAAc,SAAoC;AAG9E,QAAM,QAAQ,SAAS,QAAQ,OAAO,KACnC,KACA;AAEH,QAAM,WAAW,SAAS,UACvB,WACA;AACH,QAAM,WAAW,SAAS,eAAe,iBAAiB,SAAS,IAAI,IACpE,UACA;AAEH,SAAO,YAAY,UAAU,QAAQ,iBAAiB,QAAQ,uBAAuB;AAAA,IACpF;AAAA,IACA;AAAA,EAAA,CACA;AACF;"}
+{"version":3,"file":"NcMentionBubble.vue_vue_type_style_index_0_scoped_3c4a673d_lang.mjs","sources":["../../src/utils/getAvatarUrl.ts"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport { generateAvatarUrl } from '@nextcloud/router'\nimport { checkIfDarkTheme } from '../functions/isDarkTheme/index.ts'\n\ninterface AvatarUrlOptions {\n\t/**\n\t * Should the dark theme variant be used.\n\t */\n\tisDarkTheme?: boolean\n\n\t/**\n\t * Is the user a guest user.\n\t */\n\tisGuest?: boolean\n\n\t/**\n\t * Size of the avatar.\n\t *\n\t * @default 64\n\t */\n\tsize?: 64 | 512\n\n\t/**\n\t * The user's avatar version. Including it earns a much longer cache lifetime.\n\t */\n\tversion?: string | number\n}\n\n/**\n * Get the avatar URL for a given user.\n *\n * @param user - The user id\n * @param options - Adjustments for the avatar format\n */\nexport function getAvatarUrl(user: string, options?: AvatarUrlOptions): string {\n\treturn generateAvatarUrl(user, {\n\t\tsize: options?.size,\n\t\tisGuestUser: options?.isGuest,\n\t\tisDarkTheme: options?.isDarkTheme ?? checkIfDarkTheme(document.body),\n\t\tguestFallback: true,\n\t\tversion: options?.version,\n\t})\n}\n"],"names":[],"mappings":";;AAsCO,SAAS,aAAa,MAAc,SAAoC;AAC9E,SAAO,kBAAkB,MAAM;AAAA,IAC9B,MAAM,SAAS;AAAA,IACf,aAAa,SAAS;AAAA,IACtB,aAAa,SAAS,eAAe,iBAAiB,SAAS,IAAI;AAAA,IACnE,eAAe;AAAA,IACf,SAAS,SAAS;AAAA,EAAA,CAClB;AACF;"}

package/dist/chunks/NcModal.mjs

@@ -86,15 +86,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     setReturnFocus: { default: void 0 }
   }, {
     "show": { type: Boolean, ...{ default: true } },
-    "showModifiers": {}
+    "showModifiers": {},
+    "slideshowRunning": { type: Boolean, ...{ default: false } },
+    "slideshowRunningModifiers": {}
   }),
-  emits: /* @__PURE__ */ mergeModels(["next", "previous", "close", "update:show"], ["update:show"]),
+  emits: /* @__PURE__ */ mergeModels(["next", "previous", "close", "update:show"], ["update:show", "update:slideshowRunning"]),
   setup(__props, { emit: __emit }) {
     useCssVars((_ctx) => ({
-      "v56ab185f": numHeaderActions.value,
-      "v86f86e3a": cssSlideshowDelay.value
+      "v46e58dab": numHeaderActions.value,
+      "v58d005d2": cssSlideshowDelay.value
     }));
     const showModal = useModel(__props, "show");
+    const runSlideshow = useModel(__props, "slideshowRunning");
     const props = __props;
     const emit = __emit;
     const scopeIdAttrs = useScopeIdAttrs();
@@ -113,7 +116,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       resume: startSlideshow
     } = useIntervalFn(nextSlide, toRef(() => props.slideshowDelay), { immediate: false });
     const animationKey = ref(0);
-    const runSlideshow = ref(false);
     watchEffect(() => {
       if (runSlideshow.value && !props.slideshowPaused) {
         startSlideshow();
@@ -292,18 +294,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         }, null, 8, ["name", "path"]),
                         unref(isPlaying) ? (openBlock(), createElementBlock("svg", {
                           key: `${unref(modalId)}-animation-${animationKey.value}`,
-                          class: "progress-ring",
-                          height: "50",
-                          width: "50"
+                          class: "progress-ring"
                         }, [..._cache[1] || (_cache[1] = [
                           createElementVNode("circle", {
                             class: "progress-ring__circle",
                             stroke: "white",
                             "stroke-width": "2",
                             fill: "transparent",
-                            r: "15",
-                            cx: "25",
-                            cy: "25"
+                            cx: "50%",
+                            cy: "50%"
                           }, null, -1)
                         ])])) : createCommentVNode("", true)
                       ], 10, _hoisted_5)) : createCommentVNode("", true),
@@ -434,7 +433,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const NcModal = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3aeb69e6"]]);
+const NcModal = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c6039372"]]);
 export {
   NcModal as N
 };

package/dist/chunks/NcModal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcModal.mjs","sources":["../../src/composables/useScopeIdAttrs.ts","../../src/components/NcModal/NcModal.vue"],"sourcesContent":["/*!\n * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport type { ComponentInternalInstance } from 'vue'\n\nimport { getCurrentInstance, warn } from 'vue'\n\n/**\n * Get the parent instance of the instance only if the instance is the root node of the parent\n * - Parent > Child - same root node\n * - Parent > div > Child - different root node\n * - Parent > WrapperWithSlot > Child - different root node\n *\n * @param instance - Current instance (internal)\n */\nfunction getSameNodeParent(instance: ComponentInternalInstance): ComponentInternalInstance | null {\n\tif (!instance.parent) {\n\t\treturn null\n\t}\n\n\tif ('vapor' in instance || 'vapor' in instance.parent) {\n\t\twarn('Vapor instances are not supported in useScopeIdAttrs :(')\n\t\treturn null\n\t}\n\n\tif (instance.parent.subTree !== instance.vnode) {\n\t\treturn null\n\t}\n\n\treturn instance.parent\n}\n\n/**\n * Get all ancestor instances of the instance that are on the same root node\n *\n * @param instance - Current instance (internal)\n */\nfunction getSameNodeAncestors(instance: ComponentInternalInstance): ComponentInternalInstance[] {\n\tconst ancestors: ComponentInternalInstance[] = [instance]\n\tlet parent = getSameNodeParent(instance)\n\twhile (parent) {\n\t\tancestors.push(parent)\n\t\tparent = getSameNodeParent(parent)\n\t}\n\treturn ancestors\n}\n\n/**\n * Get a binding object for all data-v-scopeid attributes that are supposed to be on the root node.\n * It allows to have scoped styles from parents in edge cases not covered by Vue:\n * - Teleport on the root\n * - Fragments\n *\n * @todo Do we need to support slotScopeIds for `:slotted()`?\n *\n * @example\n * ```ts\n * <script setup>\n * import { useScopeIdAttrs } from './useScopeIdAttrs.ts'\n * const scopeIdAttrs = useScopeIdAttrs()\n * </script>\n * <template>\n *   <teleport to=\"body\">\n *     <div v-bind=\"scopeIdAttrs\" />\n *   </teleport>\n * </template>\n * ```\n */\nexport function useScopeIdAttrs() {\n\tconst instance = getCurrentInstance()\n\n\tif (!instance) {\n\t\tthrow new Error('useScopeId must be called within a setup context')\n\t}\n\n\tconst sameNodeAncestors = getSameNodeAncestors(instance)\n\tconst scopeIds = sameNodeAncestors.map((instance) => instance.vnode.scopeId).filter(Boolean)\n\tconst scopeIdAttrs = Object.fromEntries(scopeIds.map((scopeId) => [scopeId, '']))\n\treturn scopeIdAttrs\n}\n","<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { UseSwipeDirection } from '@vueuse/core'\nimport type { FocusTargetValueOrFalse, FocusTrap, Options as FocusTrapOptions } from 'focus-trap'\nimport type { Slot } from 'vue'\n\nimport { mdiChevronLeft, mdiChevronRight, mdiClose, mdiPause, mdiPlay } from '@mdi/js'\nimport { useIntervalFn, useSwipe } from '@vueuse/core'\nimport { createFocusTrap } from 'focus-trap'\nimport { computed, nextTick, onMounted, onUnmounted, ref, toRef, useSlots, useTemplateRef, warn, watch, watchEffect } from 'vue'\nimport NcActions from '../NcActions/NcActions.vue'\nimport NcButton from '../NcButton/NcButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { useHotKey } from '../../composables/index.ts'\nimport { useScopeIdAttrs } from '../../composables/useScopeIdAttrs.ts'\nimport { t } from '../../l10n.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { getTrapStack } from '../../utils/focusTrap.ts'\nimport { isRtl } from '../../utils/rtl.ts'\n\ndefineOptions({ inheritAttrs: false })\n\n/**\n * The show-state of the modal.\n */\nconst showModal = defineModel<boolean>('show', { default: true })\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * Name to be shown with the modal\n\t */\n\tname?: string\n\n\t/**\n\t * Declare if a previous slide is available\n\t */\n\thasPrevious?: boolean\n\n\t/**\n\t * Declare if a next slide is available\n\t */\n\thasNext?: boolean\n\n\t/**\n\t * Declare if hiding the modal should be animated\n\t */\n\toutTransition?: boolean\n\n\t/**\n\t * Declare if the slideshow functionality should be enabled\n\t */\n\tenableSlideshow?: boolean\n\n\t/**\n\t * Declare the slide interval\n\t */\n\tslideshowDelay?: number\n\n\t/**\n\t * Allow to pause an ongoing slideshow\n\t */\n\tslideshowPaused?: boolean\n\n\t/**\n\t * Disable swipe between slides\n\t */\n\tdisableSwipe?: boolean\n\n\t/**\n\t * Enable spread navigation\n\t */\n\tspreadNavigation?: boolean\n\n\t/**\n\t * Defines the modal size.\n\t * All sizes except 'small' change automatically to full-screen on mobile.\n\t */\n\tsize?: 'small' | 'normal' | 'large' | 'full'\n\n\t/**\n\t * Do not show the close button for the dialog.\n\t */\n\tnoClose?: boolean\n\n\t/**\n\t * Close the modal if the user clicked outside the modal\n\t * Only relevant if `noClose` is not set.\n\t */\n\tcloseOnClickOutside?: boolean\n\n\t/**\n\t * Makes the modal backdrop opaque if true\n\t * Will be overwritten if some buttons are shown outside\n\t */\n\tdark?: boolean\n\n\t/**\n\t * Set light backdrop. Makes the modal header appear light.\n\t */\n\tlightBackdrop?: boolean\n\n\t/**\n\t * Selector for the modal container, pass `null` to prevent automatic container mounting\n\t */\n\tcontainer?: string | null\n\n\t/**\n\t * Pass in `true` if you want the modal 'close' button to be displayed\n\t * outside the modal boundaries, in the top right corner of the window.\n\t *\n\t * @since 8.25.0\n\t */\n\tcloseButtonOutside?: boolean\n\n\t/**\n\t * Additional elements to add to the focus trap\n\t */\n\tadditionalTrapElements?: (string | HTMLElement)[]\n\n\t/**\n\t * Display x items inline\n\t *\n\t * @see NcActions component usage\n\t */\n\tinlineActions?: number\n\n\t/**\n\t * Id of the element that labels the dialog (the name)\n\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 */\n\tlabelId?: string\n\n\t/**\n\t * Set element to return focus to after focus trap deactivation\n\t */\n\tsetReturnFocus?: FocusTargetValueOrFalse\n}>(), {\n\tadditionalTrapElements: () => [],\n\tcontainer: 'body',\n\tinlineActions: 0,\n\tlabelId: '',\n\tslideshowDelay: 5000,\n\tsize: 'normal',\n\tname: '',\n\tsetReturnFocus: undefined,\n})\n\nconst emit = defineEmits<{\n\t/**\n\t * Trigger showing the next slide.\n\t *\n\t * @param payload - The event that triggered showing the next slide\n\t */\n\tnext: [payload?: Event]\n\n\t/**\n\t * Trigger showing the previous slide.\n\t *\n\t * @param payload - The event that triggered showing the previous slide\n\t */\n\tprevious: [payload?: Event]\n\n\t/**\n\t * Emitted when the closing animation is finished\n\t *\n\t * @param payload - The event that triggered the close\n\t */\n\tclose: [payload?: Event]\n\n\t/**\n\t * @param payload - The new show-state\n\t */\n\t'update:show': [payload: boolean]\n}>()\n\ndefineSlots<{\n\t/**\n\t * Actions to show (one or more NcAction* components)\n\t */\n\tactions?: Slot\n\n\t/**\n\t * The modal content to show.\n\t */\n\tdefault?: Slot\n}>()\n\nconst scopeIdAttrs = useScopeIdAttrs()\n\nconst modalId = createElementId()\nconst maskElement = useTemplateRef('mask')\n\n// Set up the focus trap (handled by transition event listeners)\nlet focusTrap: FocusTrap | undefined\n// Ensure focus trap is cleared when the component is unmounted\nonUnmounted(() => clearFocusTrap())\n// and update the focus trap container elements when props change\nwatch(() => props.additionalTrapElements, (elements) => {\n\tif (focusTrap) {\n\t\tfocusTrap.updateContainerElements([maskElement.value!, ...elements])\n\t}\n})\n\n// Set up the slideshow\nconst {\n\tisActive: isPlaying,\n\tpause: stopSlideshow,\n\tresume: startSlideshow,\n} = useIntervalFn(nextSlide, toRef(() => props.slideshowDelay), { immediate: false })\n\nconst animationKey = ref(0)\nconst runSlideshow = ref(false)\nwatchEffect(() => {\n\tif (runSlideshow.value && !props.slideshowPaused) {\n\t\tstartSlideshow()\n\t} else if (isPlaying.value) {\n\t\tstopSlideshow()\n\t}\n})\n\nconst cssSlideshowDelay = computed(() => `${props.slideshowDelay}ms`)\n\n// Setup swipe navigation\nconst { stop: stopSwipe } = useSwipe(maskElement, {\n\tonSwipeEnd: handleSwipe,\n})\nonUnmounted(stopSwipe)\n\n// Setup hotkeys (keyboard navigation)\nuseHotKey('Escape', () => {\n\tconst trapStack = getTrapStack()\n\t// Only close the most recent focus trap modal\n\tif (trapStack.at(-1) === focusTrap) {\n\t\tclose()\n\t}\n}, { allowInModal: true })\n\nuseHotKey(['ArrowLeft', 'ArrowRight'], (event) => {\n\t// Ignore arrow navigation, if there is a current focus outside the modal.\n\t// For example, when the focus is in Sidebar or NcActions' items,\n\t// arrow navigation should not be intercepted by modal slider\n\tif (document.activeElement && !maskElement.value!.contains(document.activeElement)) {\n\t\treturn\n\t}\n\n\tif ((event.key === 'ArrowLeft') !== isRtl) {\n\t\tpreviousSlide()\n\t} else {\n\t\tnextSlide()\n\t}\n}, { allowInModal: true })\n\nconst slots = useSlots()\nconst numHeaderActions = computed(() => {\n\tlet actions = 0\n\tif (props.hasNext && props.enableSlideshow) {\n\t\tactions++\n\t}\n\tif (!props.noClose && props.closeButtonOutside) {\n\t\tactions++\n\t}\n\tif (slots.actions) {\n\t\tactions++\n\t}\n\n\treturn actions\n})\n\n/**\n * Whether the modal header is needed.\n * Only show it when there is a title, outside close button, or header actions —\n * otherwise the area can be used for the modal content (full height on mobile / full size).\n */\nconst hasHeader = computed(() => props.name.trim() !== '' || numHeaderActions.value > 0)\n\n// for developers we should add a warning if used with invalid props combination\nonMounted(() => {\n\tif (!props.name && !props.labelId) {\n\t\twarn('[NcModal] You need either set the name or set a `labelId` for accessibility.')\n\t}\n})\n\n/**\n * Trigger showing the next slide\n *\n * @param event - The mouse click event if triggered by user\n */\nfunction nextSlide(event?: Event) {\n\tif (!props.hasNext) {\n\t\trunSlideshow.value = false\n\t\t// do not send the event if nothing is available\n\t\treturn\n\t}\n\n\tif (event && isPlaying.value) {\n\t\trestartSlideshow()\n\t}\n\temit('next', event)\n}\n\n/**\n * Trigger showing the previous slide\n *\n * @param event - The mouse click event if triggered by user\n */\nfunction previousSlide(event?: Event) {\n\tif (!props.hasPrevious) {\n\t\t// do not send the event if nothing is available\n\t\treturn\n\t}\n\n\tif (event && isPlaying.value) {\n\t\trestartSlideshow()\n\t}\n\temit('previous', event)\n}\n\n/**\n * handle the swipe event\n *\n * @param e - The touch event\n * @param direction - Swipe direction\n */\nfunction handleSwipe(e: TouchEvent, direction: UseSwipeDirection) {\n\tif (!props.disableSwipe) {\n\t\tif (direction !== 'left' && direction !== 'right') {\n\t\t\treturn\n\t\t}\n\n\t\tif ((direction === 'left') !== isRtl) {\n\t\t\tnextSlide(e)\n\t\t} else {\n\t\t\tpreviousSlide(e)\n\t\t}\n\t}\n}\n\n/**\n * Reset the slideshow interval and animation\n */\nfunction restartSlideshow() {\n\tstopSlideshow()\n\tstartSlideshow()\n\tanimationKey.value++\n}\n\n/**\n * Handle closing the modal.\n *\n * @param event - The event that triggered closing the modal\n */\nfunction close(event?: Event) {\n\t// do not fire event if forbidden\n\tif (props.noClose) {\n\t\treturn\n\t}\n\n\tshowModal.value = false\n\n\t// delay closing for animation\n\tsetTimeout(() => {\n\t\temit('close', event)\n\t}, 300)\n}\n\n/**\n * Handle click on modal wrapper\n * If `closeOnClickOutside` is set the modal will be closed\n *\n * @param event - The click event\n */\nfunction handleClickModalWrapper(event: MouseEvent) {\n\tif (props.closeOnClickOutside) {\n\t\tclose(event)\n\t}\n}\n\n/**\n * Add focus trap for accessibility.\n */\nasync function useFocusTrap() {\n\t// Don't do anything if we have a focus trap already\n\tif (focusTrap) {\n\t\treturn\n\t}\n\n\t// wait until all children are mounted and available in the DOM before focusTrap can be added\n\tawait nextTick()\n\n\tconst options: FocusTrapOptions = {\n\t\tallowOutsideClick: true,\n\t\tfallbackFocus: maskElement.value!,\n\t\ttrapStack: getTrapStack(),\n\t\t// Esc can be used without stop in content or additionalTrapElements where it should not deactivate modal's focus trap.\n\t\t// Focus trap is deactivated on modal close anyway.\n\t\tescapeDeactivates: false,\n\t\tsetReturnFocus: props.setReturnFocus,\n\t}\n\t// Init focus trap\n\tfocusTrap = createFocusTrap([maskElement.value!, ...props.additionalTrapElements], options)\n\tfocusTrap.activate()\n}\n\n/**\n * Deactivate the active focus trap - if any.\n */\nfunction clearFocusTrap() {\n\tif (!focusTrap) {\n\t\treturn\n\t}\n\tfocusTrap?.deactivate()\n\tfocusTrap = undefined\n}\n</script>\n\n<template>\n\t<Teleport :disabled=\"container === null\" :to=\"container\">\n\t\t<transition\n\t\t\tname=\"fade\"\n\t\t\tappear\n\t\t\t@afterEnter=\"useFocusTrap\"\n\t\t\t@beforeLeave=\"clearFocusTrap\">\n\t\t\t<div\n\t\t\t\tv-show=\"showModal\"\n\t\t\t\tv-bind=\"{ ...$attrs, ...scopeIdAttrs }\"\n\t\t\t\tref=\"mask\"\n\t\t\t\tclass=\"modal-mask\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t'modal-mask--opaque': dark || closeButtonOutside || hasPrevious || hasNext,\n\t\t\t\t\t'modal-mask--light': lightBackdrop,\n\t\t\t\t}\"\n\t\t\t\trole=\"dialog\"\n\t\t\t\taria-modal=\"true\"\n\t\t\t\t:aria-labelledby=\"labelId || `modal-name-${modalId}`\"\n\t\t\t\t:aria-describedby=\"'modal-description-' + modalId\"\n\t\t\t\ttabindex=\"-1\">\n\t\t\t\t<!-- Header (only when there is a title, outside close button, or actions) -->\n\t\t\t\t<transition name=\"fade-visibility\" appear>\n\t\t\t\t\t<div\n\t\t\t\t\t\tv-if=\"hasHeader\"\n\t\t\t\t\t\tclass=\"modal-header\"\n\t\t\t\t\t\t:data-theme-light=\"lightBackdrop\"\n\t\t\t\t\t\t:data-theme-dark=\"!lightBackdrop\">\n\t\t\t\t\t\t<h2\n\t\t\t\t\t\t\tv-if=\"name.trim() !== ''\"\n\t\t\t\t\t\t\t:id=\"'modal-name-' + modalId\"\n\t\t\t\t\t\t\tclass=\"modal-header__name\">\n\t\t\t\t\t\t\t{{ name }}\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t<div class=\"icons-menu\">\n\t\t\t\t\t\t\t<!-- Play-pause toggle -->\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tv-if=\"hasNext && enableSlideshow\"\n\t\t\t\t\t\t\t\tclass=\"play-pause-icons\"\n\t\t\t\t\t\t\t\t:class=\"{ 'play-pause-icons--paused': slideshowPaused }\"\n\t\t\t\t\t\t\t\t:title=\"isPlaying ? t('Pause slideshow') : t('Start slideshow')\"\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t@click=\"runSlideshow = !runSlideshow\">\n\t\t\t\t\t\t\t\t<!-- Play/pause icons -->\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper\n\t\t\t\t\t\t\t\t\tclass=\"play-pause-icons__icon\"\n\t\t\t\t\t\t\t\t\tinline\n\t\t\t\t\t\t\t\t\t:name=\"isPlaying ? t('Pause slideshow') : t('Start slideshow')\"\n\t\t\t\t\t\t\t\t\t:path=\"isPlaying ? mdiPause : mdiPlay\" />\n\n\t\t\t\t\t\t\t\t<!-- Progress circle, css animated -->\n\t\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t\tv-if=\"isPlaying\"\n\t\t\t\t\t\t\t\t\t:key=\"`${modalId}-animation-${animationKey}`\"\n\t\t\t\t\t\t\t\t\tclass=\"progress-ring\"\n\t\t\t\t\t\t\t\t\theight=\"50\"\n\t\t\t\t\t\t\t\t\twidth=\"50\">\n\t\t\t\t\t\t\t\t\t<circle\n\t\t\t\t\t\t\t\t\t\tclass=\"progress-ring__circle\"\n\t\t\t\t\t\t\t\t\t\tstroke=\"white\"\n\t\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\t\t\t\t\t\tfill=\"transparent\"\n\t\t\t\t\t\t\t\t\t\tr=\"15\"\n\t\t\t\t\t\t\t\t\t\tcx=\"25\"\n\t\t\t\t\t\t\t\t\t\tcy=\"25\" />\n\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t</button>\n\n\t\t\t\t\t\t\t<!-- Actions menu -->\n\t\t\t\t\t\t\t<NcActions class=\"header-actions\" :inline=\"inlineActions\">\n\t\t\t\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t\t\t\t</NcActions>\n\n\t\t\t\t\t\t\t<!-- Close modal -->\n\t\t\t\t\t\t\t<NcButton\n\t\t\t\t\t\t\t\tv-if=\"!noClose && closeButtonOutside\"\n\t\t\t\t\t\t\t\t:aria-label=\"t('Close')\"\n\t\t\t\t\t\t\t\tclass=\"header-close\"\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t@click=\"close\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiClose\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</transition>\n\n\t\t\t\t<!-- Content wrapper -->\n\t\t\t\t<transition :name=\"`modal-${outTransition ? 'out' : 'in'}`\" appear>\n\t\t\t\t\t<div\n\t\t\t\t\t\tv-show=\"showModal\"\n\t\t\t\t\t\tclass=\"modal-wrapper\"\n\t\t\t\t\t\t:class=\"[\n\t\t\t\t\t\t\t`modal-wrapper--${size}`,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'modal-wrapper--spread-navigation': spreadNavigation,\n\t\t\t\t\t\t\t\t'modal-wrapper--no-header': !hasHeader,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t]\"\n\t\t\t\t\t\t@mousedown.self=\"handleClickModalWrapper\">\n\t\t\t\t\t\t<!-- Navigation button -->\n\t\t\t\t\t\t<transition name=\"fade-visibility\" appear>\n\t\t\t\t\t\t\t<NcButton\n\t\t\t\t\t\t\t\tv-show=\"hasPrevious\"\n\t\t\t\t\t\t\t\t:aria-label=\"t('Previous')\"\n\t\t\t\t\t\t\t\tclass=\"prev\"\n\t\t\t\t\t\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t\t\t\t\t\t@click=\"previousSlide\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<NcIconSvgWrapper\n\t\t\t\t\t\t\t\t\t\tdirectional\n\t\t\t\t\t\t\t\t\t\t:path=\"mdiChevronLeft\"\n\t\t\t\t\t\t\t\t\t\t:size=\"40\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</transition>\n\n\t\t\t\t\t\t<!-- Content -->\n\t\t\t\t\t\t<div :id=\"'modal-description-' + modalId\" class=\"modal-container\">\n\t\t\t\t\t\t\t<div class=\"modal-container__content\">\n\t\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<!-- Close modal -->\n\t\t\t\t\t\t\t<NcButton\n\t\t\t\t\t\t\t\tv-if=\"!noClose && !closeButtonOutside\"\n\t\t\t\t\t\t\t\t:aria-label=\"t('Close')\"\n\t\t\t\t\t\t\t\tclass=\"modal-container__close\"\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t@click=\"close\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiClose\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<!-- Navigation button -->\n\t\t\t\t\t\t<transition name=\"fade-visibility\" appear>\n\t\t\t\t\t\t\t<NcButton\n\t\t\t\t\t\t\t\tv-show=\"hasNext\"\n\t\t\t\t\t\t\t\t:aria-label=\"t('Next')\"\n\t\t\t\t\t\t\t\tclass=\"next\"\n\t\t\t\t\t\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t\t\t\t\t\t@click=\"nextSlide\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<NcIconSvgWrapper\n\t\t\t\t\t\t\t\t\t\tdirectional\n\t\t\t\t\t\t\t\t\t\t:path=\"mdiChevronRight\"\n\t\t\t\t\t\t\t\t\t\t:size=\"40\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</transition>\n\t\t\t\t\t</div>\n\t\t\t\t</transition>\n\t\t\t</div>\n\t\t</transition>\n\t</Teleport>\n</template>\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: space-between;\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-inline: 12px 0;\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\t// On wider screens the name is centered, so we need to compensate for the actions to make the name really centered\n\t\t\tpadding-inline-start: calc(var(--header-height) * v-bind('numHeaderActions'));\n\t\t\ttext-align: center;\n\t\t}\n\t}\n\n\t.icons-menu {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: flex-end;\n\t\talign-self: 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__icon {\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&__icon {\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\t}\n}\n\n.modal-wrapper {\n\t// Space reserved for the modal header; 0 when the header is not shown\n\t--modal-header-offset: var(--header-height);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 100%;\n\theight: 100%;\n\n\t&--no-header {\n\t\t--modal-header-offset: var(--body-container-margin);\n\t}\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\t\toverflow: auto;\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) - 2 * var(--body-container-margin)));\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(--modal-header-offset));\n\t\t\tposition: absolute;\n\t\t\ttop: var(--modal-header-offset);\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(--modal-header-offset));\n\t\t\tposition: absolute;\n\t\t\ttop: var(--modal-header-offset);\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 v-bind('cssSlideshowDelay') 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.play-pause-icons__icon {\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</style>\n\n<docs>\nThe `NcModel` is the base component used for modals and dialogs.\nWhile `NcDialog` should be used for general dialogs like confirmations or forms,\n`NcModal` allows for custom content like showing image multimedia.\n\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\tout-transition>\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 slideshow\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"isOpen = true\">Show Modal</NcButton>\n\t\t<NcModal\n\t\t\tv-if=\"isOpen\"\n\t\t\tclose-button-outside\n\t\t\tenable-slideshow\n\t\t\t:has-next=\"page < lastPage\"\n\t\t\t:has-previous=\"page > 0\"\n\t\t\tname=\"Modal with slideshow\"\n\t\t\t@next=\"page++\"\n\t\t\t@previous=\"page--\"\n\t\t\t@close=\"isOpen = false\">\n\t\t\t<div class=\"modal__content\" :style=\"{ background: currentPage.background }\">\n\t\t\t\t<p class=\"model__content-text\">{{ currentPage.text }}</p>\n\t\t\t</div>\n\t\t</NcModal>\n\t</div>\n</template>\n<script>\nconst PAGES = [\n\t{ text: 'First page', background: 'linear-gradient(#e66465, #9198e5)' },\n\t{ text: 'Second page', background: 'linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c)' },\n\t{ text: 'Third page', background: 'lightblue' },\n\t{ text: 'Last page', background: 'lightgrey' },\n]\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tisOpen: false,\n\t\t\tpage: 0,\n\t\t\tlastPage: PAGES.length - 1,\n\t\t}\n\t},\n\tcomputed: {\n\t\tcurrentPage() {\n\t\t\treturn PAGES[this.page]\n\t\t},\n\t}\n}\n</script>\n<style scoped>\n.modal__content {\n\theight: 100%;\n\tmin-height: 30vh;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.model__content-text {\n\tfont-size: 16px;\n\tfont-weight: var(--font-weight-heading, bold);\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\n\t\t\tv-model:show=\"modal\"\n\t\t\tclass=\"emoji-modal\"\n\t\t\tname=\"Modal with popover\"\n\t\t\tsize=\"small\"\n\t\t\t@close=\"closeModal\">\n\t\t\t<div class=\"emoji-modal__content\">\n\t\t\t\t<NcEmojiPicker container=\".emoji-modal\" @select=\"select\">\n\t\t\t\t\t<NcButton>Select emoji {{ emoji }}</NcButton>\n\t\t\t\t</NcEmojiPicker>\n\t\t\t</div>\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.emoji-modal__content {\n\tdisplay: flex;\n\tjustify-content: center;\n\tmargin: 20px 0px 100px;\n}\n</style>\n```\n</docs>\n"],"names":["instance","_useModel","_createBlock","_Teleport","_createVNode","_Transition","_withDirectives","_createElementVNode","_mergeProps","$attrs","_unref","_createElementBlock","_normalizeClass","_renderSlot"],"mappings":"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"}
+{"version":3,"file":"NcModal.mjs","sources":["../../src/composables/useScopeIdAttrs.ts","../../src/components/NcModal/NcModal.vue"],"sourcesContent":["/*!\n * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport type { ComponentInternalInstance } from 'vue'\n\nimport { getCurrentInstance, warn } from 'vue'\n\n/**\n * Get the parent instance of the instance only if the instance is the root node of the parent\n * - Parent > Child - same root node\n * - Parent > div > Child - different root node\n * - Parent > WrapperWithSlot > Child - different root node\n *\n * @param instance - Current instance (internal)\n */\nfunction getSameNodeParent(instance: ComponentInternalInstance): ComponentInternalInstance | null {\n\tif (!instance.parent) {\n\t\treturn null\n\t}\n\n\tif ('vapor' in instance || 'vapor' in instance.parent) {\n\t\twarn('Vapor instances are not supported in useScopeIdAttrs :(')\n\t\treturn null\n\t}\n\n\tif (instance.parent.subTree !== instance.vnode) {\n\t\treturn null\n\t}\n\n\treturn instance.parent\n}\n\n/**\n * Get all ancestor instances of the instance that are on the same root node\n *\n * @param instance - Current instance (internal)\n */\nfunction getSameNodeAncestors(instance: ComponentInternalInstance): ComponentInternalInstance[] {\n\tconst ancestors: ComponentInternalInstance[] = [instance]\n\tlet parent = getSameNodeParent(instance)\n\twhile (parent) {\n\t\tancestors.push(parent)\n\t\tparent = getSameNodeParent(parent)\n\t}\n\treturn ancestors\n}\n\n/**\n * Get a binding object for all data-v-scopeid attributes that are supposed to be on the root node.\n * It allows to have scoped styles from parents in edge cases not covered by Vue:\n * - Teleport on the root\n * - Fragments\n *\n * @todo Do we need to support slotScopeIds for `:slotted()`?\n *\n * @example\n * ```ts\n * <script setup>\n * import { useScopeIdAttrs } from './useScopeIdAttrs.ts'\n * const scopeIdAttrs = useScopeIdAttrs()\n * </script>\n * <template>\n *   <teleport to=\"body\">\n *     <div v-bind=\"scopeIdAttrs\" />\n *   </teleport>\n * </template>\n * ```\n */\nexport function useScopeIdAttrs() {\n\tconst instance = getCurrentInstance()\n\n\tif (!instance) {\n\t\tthrow new Error('useScopeId must be called within a setup context')\n\t}\n\n\tconst sameNodeAncestors = getSameNodeAncestors(instance)\n\tconst scopeIds = sameNodeAncestors.map((instance) => instance.vnode.scopeId).filter(Boolean)\n\tconst scopeIdAttrs = Object.fromEntries(scopeIds.map((scopeId) => [scopeId, '']))\n\treturn scopeIdAttrs\n}\n","<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { UseSwipeDirection } from '@vueuse/core'\nimport type { FocusTargetValueOrFalse, FocusTrap, Options as FocusTrapOptions } from 'focus-trap'\nimport type { Slot } from 'vue'\n\nimport { mdiChevronLeft, mdiChevronRight, mdiClose, mdiPause, mdiPlay } from '@mdi/js'\nimport { useIntervalFn, useSwipe } from '@vueuse/core'\nimport { createFocusTrap } from 'focus-trap'\nimport { computed, nextTick, onMounted, onUnmounted, ref, toRef, useSlots, useTemplateRef, warn, watch, watchEffect } from 'vue'\nimport NcActions from '../NcActions/NcActions.vue'\nimport NcButton from '../NcButton/NcButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { useHotKey } from '../../composables/index.ts'\nimport { useScopeIdAttrs } from '../../composables/useScopeIdAttrs.ts'\nimport { t } from '../../l10n.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { getTrapStack } from '../../utils/focusTrap.ts'\nimport { isRtl } from '../../utils/rtl.ts'\n\ndefineOptions({ inheritAttrs: false })\n\n/**\n * The show-state of the modal.\n */\nconst showModal = defineModel<boolean>('show', { default: true })\n\n/**\n * Whether the slideshow is running.\n *\n * Bind it to start or stop the slideshow from outside, or to follow the\n * play / pause button. It resets to `false` when the last slide is reached.\n *\n * @since 9.13.0\n */\nconst runSlideshow = defineModel<boolean>('slideshowRunning', { default: false })\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * Name to be shown with the modal\n\t */\n\tname?: string\n\n\t/**\n\t * Declare if a previous slide is available\n\t */\n\thasPrevious?: boolean\n\n\t/**\n\t * Declare if a next slide is available\n\t */\n\thasNext?: boolean\n\n\t/**\n\t * Declare if hiding the modal should be animated\n\t */\n\toutTransition?: boolean\n\n\t/**\n\t * Declare if the slideshow functionality should be enabled\n\t */\n\tenableSlideshow?: boolean\n\n\t/**\n\t * Declare the slide interval\n\t */\n\tslideshowDelay?: number\n\n\t/**\n\t * Allow to pause an ongoing slideshow\n\t */\n\tslideshowPaused?: boolean\n\n\t/**\n\t * Disable swipe between slides\n\t */\n\tdisableSwipe?: boolean\n\n\t/**\n\t * Enable spread navigation\n\t */\n\tspreadNavigation?: boolean\n\n\t/**\n\t * Defines the modal size.\n\t * All sizes except 'small' change automatically to full-screen on mobile.\n\t */\n\tsize?: 'small' | 'normal' | 'large' | 'full'\n\n\t/**\n\t * Do not show the close button for the dialog.\n\t */\n\tnoClose?: boolean\n\n\t/**\n\t * Close the modal if the user clicked outside the modal\n\t * Only relevant if `noClose` is not set.\n\t */\n\tcloseOnClickOutside?: boolean\n\n\t/**\n\t * Makes the modal backdrop opaque if true\n\t * Will be overwritten if some buttons are shown outside\n\t */\n\tdark?: boolean\n\n\t/**\n\t * Set light backdrop. Makes the modal header appear light.\n\t */\n\tlightBackdrop?: boolean\n\n\t/**\n\t * Selector for the modal container, pass `null` to prevent automatic container mounting\n\t */\n\tcontainer?: string | null\n\n\t/**\n\t * Pass in `true` if you want the modal 'close' button to be displayed\n\t * outside the modal boundaries, in the top right corner of the window.\n\t *\n\t * @since 8.25.0\n\t */\n\tcloseButtonOutside?: boolean\n\n\t/**\n\t * Additional elements to add to the focus trap\n\t */\n\tadditionalTrapElements?: (string | HTMLElement)[]\n\n\t/**\n\t * Display x items inline\n\t *\n\t * @see NcActions component usage\n\t */\n\tinlineActions?: number\n\n\t/**\n\t * Id of the element that labels the dialog (the name)\n\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 */\n\tlabelId?: string\n\n\t/**\n\t * Set element to return focus to after focus trap deactivation\n\t */\n\tsetReturnFocus?: FocusTargetValueOrFalse\n}>(), {\n\tadditionalTrapElements: () => [],\n\tcontainer: 'body',\n\tinlineActions: 0,\n\tlabelId: '',\n\tslideshowDelay: 5000,\n\tsize: 'normal',\n\tname: '',\n\tsetReturnFocus: undefined,\n})\n\nconst emit = defineEmits<{\n\t/**\n\t * Trigger showing the next slide.\n\t *\n\t * @param payload - The event that triggered showing the next slide\n\t */\n\tnext: [payload?: Event]\n\n\t/**\n\t * Trigger showing the previous slide.\n\t *\n\t * @param payload - The event that triggered showing the previous slide\n\t */\n\tprevious: [payload?: Event]\n\n\t/**\n\t * Emitted when the closing animation is finished\n\t *\n\t * @param payload - The event that triggered the close\n\t */\n\tclose: [payload?: Event]\n\n\t/**\n\t * @param payload - The new show-state\n\t */\n\t'update:show': [payload: boolean]\n}>()\n\ndefineSlots<{\n\t/**\n\t * Actions to show (one or more NcAction* components)\n\t */\n\tactions?: Slot\n\n\t/**\n\t * The modal content to show.\n\t */\n\tdefault?: Slot\n}>()\n\nconst scopeIdAttrs = useScopeIdAttrs()\n\nconst modalId = createElementId()\nconst maskElement = useTemplateRef('mask')\n\n// Set up the focus trap (handled by transition event listeners)\nlet focusTrap: FocusTrap | undefined\n// Ensure focus trap is cleared when the component is unmounted\nonUnmounted(() => clearFocusTrap())\n// and update the focus trap container elements when props change\nwatch(() => props.additionalTrapElements, (elements) => {\n\tif (focusTrap) {\n\t\tfocusTrap.updateContainerElements([maskElement.value!, ...elements])\n\t}\n})\n\n// Set up the slideshow\nconst {\n\tisActive: isPlaying,\n\tpause: stopSlideshow,\n\tresume: startSlideshow,\n} = useIntervalFn(nextSlide, toRef(() => props.slideshowDelay), { immediate: false })\n\nconst animationKey = ref(0)\nwatchEffect(() => {\n\tif (runSlideshow.value && !props.slideshowPaused) {\n\t\tstartSlideshow()\n\t} else if (isPlaying.value) {\n\t\tstopSlideshow()\n\t}\n})\n\nconst cssSlideshowDelay = computed(() => `${props.slideshowDelay}ms`)\n\n// Setup swipe navigation\nconst { stop: stopSwipe } = useSwipe(maskElement, {\n\tonSwipeEnd: handleSwipe,\n})\nonUnmounted(stopSwipe)\n\n// Setup hotkeys (keyboard navigation)\nuseHotKey('Escape', () => {\n\tconst trapStack = getTrapStack()\n\t// Only close the most recent focus trap modal\n\tif (trapStack.at(-1) === focusTrap) {\n\t\tclose()\n\t}\n}, { allowInModal: true })\n\nuseHotKey(['ArrowLeft', 'ArrowRight'], (event) => {\n\t// Ignore arrow navigation, if there is a current focus outside the modal.\n\t// For example, when the focus is in Sidebar or NcActions' items,\n\t// arrow navigation should not be intercepted by modal slider\n\tif (document.activeElement && !maskElement.value!.contains(document.activeElement)) {\n\t\treturn\n\t}\n\n\tif ((event.key === 'ArrowLeft') !== isRtl) {\n\t\tpreviousSlide()\n\t} else {\n\t\tnextSlide()\n\t}\n}, { allowInModal: true })\n\nconst slots = useSlots()\nconst numHeaderActions = computed(() => {\n\tlet actions = 0\n\tif (props.hasNext && props.enableSlideshow) {\n\t\tactions++\n\t}\n\tif (!props.noClose && props.closeButtonOutside) {\n\t\tactions++\n\t}\n\tif (slots.actions) {\n\t\tactions++\n\t}\n\n\treturn actions\n})\n\n/**\n * Whether the modal header is needed.\n * Only show it when there is a title, outside close button, or header actions —\n * otherwise the area can be used for the modal content (full height on mobile / full size).\n */\nconst hasHeader = computed(() => props.name.trim() !== '' || numHeaderActions.value > 0)\n\n// for developers we should add a warning if used with invalid props combination\nonMounted(() => {\n\tif (!props.name && !props.labelId) {\n\t\twarn('[NcModal] You need either set the name or set a `labelId` for accessibility.')\n\t}\n})\n\n/**\n * Trigger showing the next slide\n *\n * @param event - The mouse click event if triggered by user\n */\nfunction nextSlide(event?: Event) {\n\tif (!props.hasNext) {\n\t\trunSlideshow.value = false\n\t\t// do not send the event if nothing is available\n\t\treturn\n\t}\n\n\tif (event && isPlaying.value) {\n\t\trestartSlideshow()\n\t}\n\temit('next', event)\n}\n\n/**\n * Trigger showing the previous slide\n *\n * @param event - The mouse click event if triggered by user\n */\nfunction previousSlide(event?: Event) {\n\tif (!props.hasPrevious) {\n\t\t// do not send the event if nothing is available\n\t\treturn\n\t}\n\n\tif (event && isPlaying.value) {\n\t\trestartSlideshow()\n\t}\n\temit('previous', event)\n}\n\n/**\n * handle the swipe event\n *\n * @param e - The touch event\n * @param direction - Swipe direction\n */\nfunction handleSwipe(e: TouchEvent, direction: UseSwipeDirection) {\n\tif (!props.disableSwipe) {\n\t\tif (direction !== 'left' && direction !== 'right') {\n\t\t\treturn\n\t\t}\n\n\t\tif ((direction === 'left') !== isRtl) {\n\t\t\tnextSlide(e)\n\t\t} else {\n\t\t\tpreviousSlide(e)\n\t\t}\n\t}\n}\n\n/**\n * Reset the slideshow interval and animation\n */\nfunction restartSlideshow() {\n\tstopSlideshow()\n\tstartSlideshow()\n\tanimationKey.value++\n}\n\n/**\n * Handle closing the modal.\n *\n * @param event - The event that triggered closing the modal\n */\nfunction close(event?: Event) {\n\t// do not fire event if forbidden\n\tif (props.noClose) {\n\t\treturn\n\t}\n\n\tshowModal.value = false\n\n\t// delay closing for animation\n\tsetTimeout(() => {\n\t\temit('close', event)\n\t}, 300)\n}\n\n/**\n * Handle click on modal wrapper\n * If `closeOnClickOutside` is set the modal will be closed\n *\n * @param event - The click event\n */\nfunction handleClickModalWrapper(event: MouseEvent) {\n\tif (props.closeOnClickOutside) {\n\t\tclose(event)\n\t}\n}\n\n/**\n * Add focus trap for accessibility.\n */\nasync function useFocusTrap() {\n\t// Don't do anything if we have a focus trap already\n\tif (focusTrap) {\n\t\treturn\n\t}\n\n\t// wait until all children are mounted and available in the DOM before focusTrap can be added\n\tawait nextTick()\n\n\tconst options: FocusTrapOptions = {\n\t\tallowOutsideClick: true,\n\t\tfallbackFocus: maskElement.value!,\n\t\ttrapStack: getTrapStack(),\n\t\t// Esc can be used without stop in content or additionalTrapElements where it should not deactivate modal's focus trap.\n\t\t// Focus trap is deactivated on modal close anyway.\n\t\tescapeDeactivates: false,\n\t\tsetReturnFocus: props.setReturnFocus,\n\t}\n\t// Init focus trap\n\tfocusTrap = createFocusTrap([maskElement.value!, ...props.additionalTrapElements], options)\n\tfocusTrap.activate()\n}\n\n/**\n * Deactivate the active focus trap - if any.\n */\nfunction clearFocusTrap() {\n\tif (!focusTrap) {\n\t\treturn\n\t}\n\tfocusTrap?.deactivate()\n\tfocusTrap = undefined\n}\n</script>\n\n<template>\n\t<Teleport :disabled=\"container === null\" :to=\"container\">\n\t\t<transition\n\t\t\tname=\"fade\"\n\t\t\tappear\n\t\t\t@afterEnter=\"useFocusTrap\"\n\t\t\t@beforeLeave=\"clearFocusTrap\">\n\t\t\t<div\n\t\t\t\tv-show=\"showModal\"\n\t\t\t\tv-bind=\"{ ...$attrs, ...scopeIdAttrs }\"\n\t\t\t\tref=\"mask\"\n\t\t\t\tclass=\"modal-mask\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t'modal-mask--opaque': dark || closeButtonOutside || hasPrevious || hasNext,\n\t\t\t\t\t'modal-mask--light': lightBackdrop,\n\t\t\t\t}\"\n\t\t\t\trole=\"dialog\"\n\t\t\t\taria-modal=\"true\"\n\t\t\t\t:aria-labelledby=\"labelId || `modal-name-${modalId}`\"\n\t\t\t\t:aria-describedby=\"'modal-description-' + modalId\"\n\t\t\t\ttabindex=\"-1\">\n\t\t\t\t<!-- Header (only when there is a title, outside close button, or actions) -->\n\t\t\t\t<transition name=\"fade-visibility\" appear>\n\t\t\t\t\t<div\n\t\t\t\t\t\tv-if=\"hasHeader\"\n\t\t\t\t\t\tclass=\"modal-header\"\n\t\t\t\t\t\t:data-theme-light=\"lightBackdrop\"\n\t\t\t\t\t\t:data-theme-dark=\"!lightBackdrop\">\n\t\t\t\t\t\t<h2\n\t\t\t\t\t\t\tv-if=\"name.trim() !== ''\"\n\t\t\t\t\t\t\t:id=\"'modal-name-' + modalId\"\n\t\t\t\t\t\t\tclass=\"modal-header__name\">\n\t\t\t\t\t\t\t{{ name }}\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t<div class=\"icons-menu\">\n\t\t\t\t\t\t\t<!-- Play-pause toggle -->\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tv-if=\"hasNext && enableSlideshow\"\n\t\t\t\t\t\t\t\tclass=\"play-pause-icons\"\n\t\t\t\t\t\t\t\t:class=\"{ 'play-pause-icons--paused': slideshowPaused }\"\n\t\t\t\t\t\t\t\t:title=\"isPlaying ? t('Pause slideshow') : t('Start slideshow')\"\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t@click=\"runSlideshow = !runSlideshow\">\n\t\t\t\t\t\t\t\t<!-- Play/pause icons -->\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper\n\t\t\t\t\t\t\t\t\tclass=\"play-pause-icons__icon\"\n\t\t\t\t\t\t\t\t\tinline\n\t\t\t\t\t\t\t\t\t:name=\"isPlaying ? t('Pause slideshow') : t('Start slideshow')\"\n\t\t\t\t\t\t\t\t\t:path=\"isPlaying ? mdiPause : mdiPlay\" />\n\n\t\t\t\t\t\t\t\t<!-- Progress circle, css animated -->\n\t\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t\tv-if=\"isPlaying\"\n\t\t\t\t\t\t\t\t\t:key=\"`${modalId}-animation-${animationKey}`\"\n\t\t\t\t\t\t\t\t\tclass=\"progress-ring\">\n\t\t\t\t\t\t\t\t\t<circle\n\t\t\t\t\t\t\t\t\t\tclass=\"progress-ring__circle\"\n\t\t\t\t\t\t\t\t\t\tstroke=\"white\"\n\t\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\t\t\t\t\t\tfill=\"transparent\"\n\t\t\t\t\t\t\t\t\t\tcx=\"50%\"\n\t\t\t\t\t\t\t\t\t\tcy=\"50%\" />\n\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t</button>\n\n\t\t\t\t\t\t\t<!-- Actions menu -->\n\t\t\t\t\t\t\t<NcActions class=\"header-actions\" :inline=\"inlineActions\">\n\t\t\t\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t\t\t\t</NcActions>\n\n\t\t\t\t\t\t\t<!-- Close modal -->\n\t\t\t\t\t\t\t<NcButton\n\t\t\t\t\t\t\t\tv-if=\"!noClose && closeButtonOutside\"\n\t\t\t\t\t\t\t\t:aria-label=\"t('Close')\"\n\t\t\t\t\t\t\t\tclass=\"header-close\"\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t@click=\"close\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiClose\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</transition>\n\n\t\t\t\t<!-- Content wrapper -->\n\t\t\t\t<transition :name=\"`modal-${outTransition ? 'out' : 'in'}`\" appear>\n\t\t\t\t\t<div\n\t\t\t\t\t\tv-show=\"showModal\"\n\t\t\t\t\t\tclass=\"modal-wrapper\"\n\t\t\t\t\t\t:class=\"[\n\t\t\t\t\t\t\t`modal-wrapper--${size}`,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'modal-wrapper--spread-navigation': spreadNavigation,\n\t\t\t\t\t\t\t\t'modal-wrapper--no-header': !hasHeader,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t]\"\n\t\t\t\t\t\t@mousedown.self=\"handleClickModalWrapper\">\n\t\t\t\t\t\t<!-- Navigation button -->\n\t\t\t\t\t\t<transition name=\"fade-visibility\" appear>\n\t\t\t\t\t\t\t<NcButton\n\t\t\t\t\t\t\t\tv-show=\"hasPrevious\"\n\t\t\t\t\t\t\t\t:aria-label=\"t('Previous')\"\n\t\t\t\t\t\t\t\tclass=\"prev\"\n\t\t\t\t\t\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t\t\t\t\t\t@click=\"previousSlide\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<NcIconSvgWrapper\n\t\t\t\t\t\t\t\t\t\tdirectional\n\t\t\t\t\t\t\t\t\t\t:path=\"mdiChevronLeft\"\n\t\t\t\t\t\t\t\t\t\t:size=\"40\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</transition>\n\n\t\t\t\t\t\t<!-- Content -->\n\t\t\t\t\t\t<div :id=\"'modal-description-' + modalId\" class=\"modal-container\">\n\t\t\t\t\t\t\t<div class=\"modal-container__content\">\n\t\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<!-- Close modal -->\n\t\t\t\t\t\t\t<NcButton\n\t\t\t\t\t\t\t\tv-if=\"!noClose && !closeButtonOutside\"\n\t\t\t\t\t\t\t\t:aria-label=\"t('Close')\"\n\t\t\t\t\t\t\t\tclass=\"modal-container__close\"\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t@click=\"close\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiClose\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<!-- Navigation button -->\n\t\t\t\t\t\t<transition name=\"fade-visibility\" appear>\n\t\t\t\t\t\t\t<NcButton\n\t\t\t\t\t\t\t\tv-show=\"hasNext\"\n\t\t\t\t\t\t\t\t:aria-label=\"t('Next')\"\n\t\t\t\t\t\t\t\tclass=\"next\"\n\t\t\t\t\t\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t\t\t\t\t\t@click=\"nextSlide\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<NcIconSvgWrapper\n\t\t\t\t\t\t\t\t\t\tdirectional\n\t\t\t\t\t\t\t\t\t\t:path=\"mdiChevronRight\"\n\t\t\t\t\t\t\t\t\t\t:size=\"40\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</transition>\n\t\t\t\t\t</div>\n\t\t\t\t</transition>\n\t\t\t</div>\n\t\t</transition>\n\t</Teleport>\n</template>\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: space-between;\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-inline: 12px 0;\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\t// On wider screens the name is centered, so we need to compensate for the actions to make the name really centered\n\t\t\tpadding-inline-start: calc(var(--header-height) * v-bind('numHeaderActions'));\n\t\t\ttext-align: center;\n\t\t}\n\t}\n\n\t.icons-menu {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: flex-end;\n\t\talign-self: 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__icon {\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&__icon {\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\t}\n}\n\n.modal-wrapper {\n\t// Space reserved for the modal header; 0 when the header is not shown\n\t--modal-header-offset: var(--header-height);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 100%;\n\theight: 100%;\n\n\t&--no-header {\n\t\t--modal-header-offset: var(--body-container-margin);\n\t}\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\t\toverflow: auto;\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) - 2 * var(--body-container-margin)));\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(--modal-header-offset));\n\t\t\tposition: absolute;\n\t\t\ttop: var(--modal-header-offset);\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(--modal-header-offset));\n\t\t\tposition: absolute;\n\t\t\ttop: var(--modal-header-offset);\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.modal-mask .play-pause-icons {\n\t// The ring reads as the outline of the disc the button shows on hover, so\n\t// it follows the size of that disc. It is deliberately not tied to\n\t// --header-height: the two are set independently, and a ring that grew\n\t// with the header would drift away from the disc it is drawn around.\n\t--progress-ring-radius: calc(var(--default-clickable-area) / 2 + 1px);\n\t--progress-ring-circumference: calc(2 * pi * var(--progress-ring-radius));\n\n\t.progress-ring {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tinset-inline-start: 0;\n\t\t// The circle is placed at the centre of the svg, so the svg has to\n\t\t// match the button for it to stay centred once --header-height is\n\t\t// anything other than the 50px it used to be\n\t\twidth: 100%;\n\t\theight: 100%;\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 v-bind('cssSlideshowDelay') infinite;\n\n\t\t\tr: var(--progress-ring-radius);\n\t\t\tstroke-linecap: round;\n\t\t\tstroke-dashoffset: var(--progress-ring-circumference);\n\t\t\tstroke-dasharray: var(--progress-ring-circumference);\n\t\t}\n\t}\n\t&--paused {\n\t\t.play-pause-icons__icon {\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: var(--progress-ring-circumference);\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</style>\n\n<docs>\nThe `NcModel` is the base component used for modals and dialogs.\nWhile `NcDialog` should be used for general dialogs like confirmations or forms,\n`NcModal` allows for custom content like showing image multimedia.\n\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\tout-transition>\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 slideshow\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"isOpen = true\">Show Modal</NcButton>\n\t\t<NcButton @click=\"isOpen = true; running = true\">Show Modal and start the slideshow</NcButton>\n\t\t<NcModal\n\t\t\tv-if=\"isOpen\"\n\t\t\tv-model:slideshow-running=\"running\"\n\t\t\tclose-button-outside\n\t\t\tenable-slideshow\n\t\t\t:has-next=\"page < lastPage\"\n\t\t\t:has-previous=\"page > 0\"\n\t\t\tname=\"Modal with slideshow\"\n\t\t\t@next=\"page++\"\n\t\t\t@previous=\"page--\"\n\t\t\t@close=\"isOpen = false\">\n\t\t\t<div class=\"modal__content\" :style=\"{ background: currentPage.background }\">\n\t\t\t\t<p class=\"model__content-text\">{{ currentPage.text }}</p>\n\t\t\t\t<p class=\"model__content-text\">{{ running ? 'Slideshow running' : 'Slideshow stopped' }}</p>\n\t\t\t</div>\n\t\t</NcModal>\n\t</div>\n</template>\n<script>\nconst PAGES = [\n\t{ text: 'First page', background: 'linear-gradient(#e66465, #9198e5)' },\n\t{ text: 'Second page', background: 'linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c)' },\n\t{ text: 'Third page', background: 'lightblue' },\n\t{ text: 'Last page', background: 'lightgrey' },\n]\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tisOpen: false,\n\t\t\trunning: false,\n\t\t\tpage: 0,\n\t\t\tlastPage: PAGES.length - 1,\n\t\t}\n\t},\n\tcomputed: {\n\t\tcurrentPage() {\n\t\t\treturn PAGES[this.page]\n\t\t},\n\t}\n}\n</script>\n<style scoped>\n.modal__content {\n\theight: 100%;\n\tmin-height: 30vh;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.model__content-text {\n\tfont-size: 16px;\n\tfont-weight: var(--font-weight-heading, bold);\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\n\t\t\tv-model:show=\"modal\"\n\t\t\tclass=\"emoji-modal\"\n\t\t\tname=\"Modal with popover\"\n\t\t\tsize=\"small\"\n\t\t\t@close=\"closeModal\">\n\t\t\t<div class=\"emoji-modal__content\">\n\t\t\t\t<NcEmojiPicker container=\".emoji-modal\" @select=\"select\">\n\t\t\t\t\t<NcButton>Select emoji {{ emoji }}</NcButton>\n\t\t\t\t</NcEmojiPicker>\n\t\t\t</div>\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.emoji-modal__content {\n\tdisplay: flex;\n\tjustify-content: center;\n\tmargin: 20px 0px 100px;\n}\n</style>\n```\n</docs>\n"],"names":["instance","_useModel","_createBlock","_Teleport","_createVNode","_Transition","_withDirectives","_createElementVNode","_mergeProps","$attrs","_unref","_createElementBlock","_normalizeClass","_renderSlot"],"mappings":"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"}

package/dist/chunks/NcPopover.mjs

@@ -44,9 +44,9 @@ const _sfc_main$1 = defineComponent({
     });
   }
 });
-const ncPopover = "_ncPopover_oX-YA";
+const ncPopover = "_ncPopover_HD5BC";
 const style0 = {
-  "material-design-icon": "_material-design-icon_CtXvA",
+  "material-design-icon": "_material-design-icon_sCkSO",
   ncPopover
 };
 const theme = "nc-popover-9";