@nextcloud/vue 8.8.0 → 8.9.0

package/dist/chunks/{NcDialog-f6KwlaqC.cjs.map → NcDialog-C6nYgBDF.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcDialog-f6KwlaqC.cjs","sources":["../../src/components/NcDialog/NcDialog.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2023 Ferdinand Thiessen\n  -\n  - @author Ferdinand Thiessen <opensource@fthiessen.de>\n  -\n  - @license AGPL-3.0-or-later\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<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 :open.sync=\"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\" :can-close=\"false\">\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 :open.sync=\"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</docs>\n\n<template>\n\t<NcModal v-if=\"open\"\n\t\tclass=\"dialog__modal\"\n\t\t:enable-slideshow=\"false\"\n\t\t:enable-swipe=\"false\"\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<div class=\"dialog\" :class=\"dialogClasses\">\n\t\t\t<div ref=\"wrapper\" :class=\"['dialog__wrapper', { '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 v-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\" :is-collapsed=\"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 v-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=\"handleButtonClose\" />\n\t\t\t\t</slot>\n\t\t\t</div>\n\t\t</div>\n\t</NcModal>\n</template>\n\n<script>\nimport { useElementSize } from '@vueuse/core'\nimport { computed, defineComponent, ref } from 'vue'\n\nimport NcModal from '../NcModal/index.js'\nimport NcDialogButton from '../NcDialogButton/index.js'\n\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nexport default defineComponent({\n\tname: 'NcDialog',\n\n\tcomponents: {\n\t\tNcDialogButton,\n\t\tNcModal,\n\t},\n\n\tprops: {\n\t\t/** Name of the dialog (the heading) */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/** Text of the dialog */\n\t\tmessage: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Additional elements to add to the focus trap */\n\t\tadditionalTrapElements: {\n\t\t\ttype: Array,\n\t\t\tvalidator: (arr) => {\n\t\t\t\treturn (\n\t\t\t\t\tArray.isArray(arr) && arr.every(\n\t\t\t\t\t\t(element) =>\n\t\t\t\t\t\t\ttypeof element === 'string' || element instanceof HTMLElement,\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t},\n\t\t\tdefault: () => ([]),\n\t\t},\n\n\t\t/**\n\t\t * The element where to mount the dialog, if `null` is passed the dialog is mounted in place\n\t\t * @default 'body'\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/**\n\t\t * Whether the dialog should be shown\n\t\t * @default true\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Size of the underlying NcModal\n\t\t * @default 'small'\n\t\t * @type {'small'|'normal'|'large'|'full'}\n\t\t */\n\t\tsize: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: 'small',\n\t\t\tvalidator: (value) => typeof value === 'string' && ['small', 'normal', 'large', 'full'].includes(value),\n\t\t},\n\n\t\t/**\n\t\t * Buttons to display\n\t\t * @default []\n\t\t */\n\t\tbuttons: {\n\t\t\ttype: Array,\n\t\t\trequired: false,\n\t\t\tdefault: () => ([]),\n\t\t\tvalidator: (value) => Array.isArray(value) && value.every((element) => typeof element === 'object'),\n\t\t},\n\n\t\t/**\n\t\t * Set to false to no show a close button on the dialog\n\t\t * @default true\n\t\t */\n\t\tcanClose: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Close the dialog if the user clicked outside of the dialog\n\t\t * Only relevant if `canClose` is set to true.\n\t\t */\n\t\tcloseOnClickOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Declare if hiding the modal should be animated\n\t\t * @default false\n\t\t */\n\t\toutTransition: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Optionally pass additionaly classes which will be set on the navigation for custom styling\n\t\t * @default ''\n\t\t * @example\n\t\t * ```html\n\t\t * <DialogBase :navigation-classes=\"['mydialog-navigation']\"><!-- --></DialogBase>\n\t\t * <!-- ... -->\n\t\t * <style lang=\"scss\">\n\t\t * :deep(.mydialog-navigation) {\n\t\t *     flex-direction: row-reverse;\n\t\t * }\n\t\t * </style>\n\t\t * ```\n\t\t */\n\t\tnavigationClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * aria-label for the dialog navigation.\n\t\t * Use it when you want to provide a more meaningful label than the dialog name.\n\t\t *\n\t\t * By default, navigation is labeled by the dialog name.\n\t\t */\n\t\tnavigationAriaLabel: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * aria-labelledby for the dialog navigation.\n\t\t * Use it when you have an implicit navigation label (e.g. a heading).\n\t\t *\n\t\t * By default, navigation is labeled by the dialog name.\n\t\t */\n\t\tnavigationAriaLabelledby: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Optionally pass additionaly classes which will be set on the content wrapper for custom styling\n\t\t * @default ''\n\t\t */\n\t\tcontentClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Optionally pass additionaly classes which will be set on the dialog itself\n\t\t * (the default `class` attribute will be set on the modal wrapper)\n\t\t * @default ''\n\t\t */\n\t\tdialogClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: ['closing', 'update:open'],\n\n\tsetup(props, { emit, slots }) {\n\t\t/**\n\t\t * The dialog wrapper element\n\t\t * @type {import('vue').Ref<HTMLDivElement>}\n\t\t */\n\t\tconst wrapper = ref()\n\n\t\t/**\n\t\t * We use the dialog width to decide if we collapse the navigation (flex direction row)\n\t\t */\n\t\tconst { width: dialogWidth } = useElementSize(wrapper, { width: 900 })\n\n\t\t/**\n\t\t * Whether the navigation is collapsed due to dialog and window size\n\t\t * (collapses when modal is below: 900px modal width - 2x 12px margin)\n\t\t */\n\t\tconst isNavigationCollapsed = computed(() => dialogWidth.value < 876)\n\n\t\t/**\n\t\t * Whether a navigation was passed and the element should be displayed\n\t\t */\n\t\tconst hasNavigation = computed(() => slots?.navigation !== undefined)\n\n\t\t/**\n\t\t * The unique id of the nav element\n\t\t */\n\t\tconst navigationId = ref(GenRandomId())\n\n\t\t/**\n\t\t * aria-label attribute for the nav element\n\t\t */\n\t\tconst navigationAriaLabelAttr = computed(() => props.navigationAriaLabel || undefined)\n\n\t\t/**\n\t\t * aria-labelledby attribute for the nav element\n\t\t */\n\t\tconst navigationAriaLabelledbyAttr = computed(() => {\n\t\t\tif (props.navigationAriaLabel) {\n\t\t\t\t// Not needed, already labelled by aria-label\n\t\t\t\treturn undefined\n\t\t\t}\n\t\t\t// Use dialog name as a fallback label for navigation\n\t\t\treturn props.navigationAriaLabelledby || navigationId.value\n\t\t})\n\n\t\t/**\n\t\t * If the underlaying modal is shown\n\t\t */\n\t\tconst showModal = ref(true)\n\n\t\t// Because NcModal does not emit `close` when show prop is changed\n\t\t/**\n\t\t * Handle clicking a dialog button -> should close\n\t\t */\n\t\tconst handleButtonClose = () => {\n\t\t\thandleClosing()\n\t\t\twindow.setTimeout(() => handleClosed(), 300)\n\t\t}\n\n\t\t/**\n\t\t * Handle closing the dialog, optional out transition did not run yet\n\t\t */\n\t\tconst handleClosing = () => {\n\t\t\tshowModal.value = false\n\t\t\t/**\n\t\t\t * Emitted when the dialog is closing, so the out transition did not finish yet\n\t\t\t */\n\t\t\temit('closing')\n\t\t}\n\n\t\t/**\n\t\t * Handle dialog closed (out transition finished)\n\t\t */\n\t\tconst handleClosed = () => {\n\t\t\tshowModal.value = true\n\t\t\t/**\n\t\t\t * Emitted then the dialog is fully closed and the out transition run\n\t\t\t */\n\t\t\temit('update:open', false)\n\t\t}\n\n\t\t/**\n\t\t * Properties to pass to the underlying NcModal\n\t\t */\n\t\tconst modalProps = computed(() => ({\n\t\t\tcanClose: props.canClose,\n\t\t\tcontainer: props.container === undefined ? 'body' : props.container,\n\t\t\t// we do not pass the name as we already have the name as the headline\n\t\t\t// name: props.name,\n\t\t\tsize: props.size,\n\t\t\tshow: props.open && showModal.value,\n\t\t\toutTransition: props.outTransition,\n\t\t\tcloseOnClickOutside: props.closeOnClickOutside,\n\t\t\tadditionalTrapElements: props.additionalTrapElements,\n\t\t}))\n\n\t\treturn {\n\t\t\thandleButtonClose,\n\t\t\thandleClosing,\n\t\t\thandleClosed,\n\t\t\thasNavigation,\n\t\t\tnavigationId,\n\t\t\tnavigationAriaLabelAttr,\n\t\t\tnavigationAriaLabelledbyAttr,\n\t\t\tisNavigationCollapsed,\n\t\t\tmodalProps,\n\t\t\twrapper,\n\t\t}\n\t},\n})\n</script>\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-large);\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\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-end: 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\twidth: fit-content;\n\t\tmargin-inline: auto 12px; // 12px to align with the overall modal padding\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":["_sfc_main","defineComponent","NcDialogButton","NcModal","arr","element","value","props","emit","slots","wrapper","ref","dialogWidth","useElementSize","isNavigationCollapsed","computed","hasNavigation","navigationId","GenRandomId","navigationAriaLabelAttr","navigationAriaLabelledbyAttr","showModal","handleButtonClose","handleClosing","handleClosed","modalProps"],"mappings":"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"}
+{"version":3,"file":"NcDialog-C6nYgBDF.cjs","sources":["../../src/components/NcDialog/NcDialog.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2023 Ferdinand Thiessen\n  -\n  - @author Ferdinand Thiessen <opensource@fthiessen.de>\n  -\n  - @license AGPL-3.0-or-later\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<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 :open.sync=\"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\" :can-close=\"false\">\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 :open.sync=\"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</docs>\n\n<template>\n\t<NcModal v-if=\"open\"\n\t\tclass=\"dialog__modal\"\n\t\t:enable-slideshow=\"false\"\n\t\t:enable-swipe=\"false\"\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<div class=\"dialog\" :class=\"dialogClasses\">\n\t\t\t<div ref=\"wrapper\" :class=\"['dialog__wrapper', { '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 v-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\" :is-collapsed=\"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 v-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=\"handleButtonClose\" />\n\t\t\t\t</slot>\n\t\t\t</div>\n\t\t</div>\n\t</NcModal>\n</template>\n\n<script>\nimport { useElementSize } from '@vueuse/core'\nimport { computed, defineComponent, ref } from 'vue'\n\nimport NcModal from '../NcModal/index.js'\nimport NcDialogButton from '../NcDialogButton/index.js'\n\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nexport default defineComponent({\n\tname: 'NcDialog',\n\n\tcomponents: {\n\t\tNcDialogButton,\n\t\tNcModal,\n\t},\n\n\tprops: {\n\t\t/** Name of the dialog (the heading) */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/** Text of the dialog */\n\t\tmessage: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Additional elements to add to the focus trap */\n\t\tadditionalTrapElements: {\n\t\t\ttype: Array,\n\t\t\tvalidator: (arr) => {\n\t\t\t\treturn (\n\t\t\t\t\tArray.isArray(arr) && arr.every(\n\t\t\t\t\t\t(element) =>\n\t\t\t\t\t\t\ttypeof element === 'string' || element instanceof HTMLElement,\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t},\n\t\t\tdefault: () => ([]),\n\t\t},\n\n\t\t/**\n\t\t * The element where to mount the dialog, if `null` is passed the dialog is mounted in place\n\t\t * @default 'body'\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/**\n\t\t * Whether the dialog should be shown\n\t\t * @default true\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Size of the underlying NcModal\n\t\t * @default 'small'\n\t\t * @type {'small'|'normal'|'large'|'full'}\n\t\t */\n\t\tsize: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: 'small',\n\t\t\tvalidator: (value) => typeof value === 'string' && ['small', 'normal', 'large', 'full'].includes(value),\n\t\t},\n\n\t\t/**\n\t\t * Buttons to display\n\t\t * @default []\n\t\t */\n\t\tbuttons: {\n\t\t\ttype: Array,\n\t\t\trequired: false,\n\t\t\tdefault: () => ([]),\n\t\t\tvalidator: (value) => Array.isArray(value) && value.every((element) => typeof element === 'object'),\n\t\t},\n\n\t\t/**\n\t\t * Set to false to no show a close button on the dialog\n\t\t * @default true\n\t\t */\n\t\tcanClose: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Close the dialog if the user clicked outside of the dialog\n\t\t * Only relevant if `canClose` is set to true.\n\t\t */\n\t\tcloseOnClickOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Declare if hiding the modal should be animated\n\t\t * @default false\n\t\t */\n\t\toutTransition: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Optionally pass additionaly classes which will be set on the navigation for custom styling\n\t\t * @default ''\n\t\t * @example\n\t\t * ```html\n\t\t * <DialogBase :navigation-classes=\"['mydialog-navigation']\"><!-- --></DialogBase>\n\t\t * <!-- ... -->\n\t\t * <style lang=\"scss\">\n\t\t * :deep(.mydialog-navigation) {\n\t\t *     flex-direction: row-reverse;\n\t\t * }\n\t\t * </style>\n\t\t * ```\n\t\t */\n\t\tnavigationClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * aria-label for the dialog navigation.\n\t\t * Use it when you want to provide a more meaningful label than the dialog name.\n\t\t *\n\t\t * By default, navigation is labeled by the dialog name.\n\t\t */\n\t\tnavigationAriaLabel: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * aria-labelledby for the dialog navigation.\n\t\t * Use it when you have an implicit navigation label (e.g. a heading).\n\t\t *\n\t\t * By default, navigation is labeled by the dialog name.\n\t\t */\n\t\tnavigationAriaLabelledby: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Optionally pass additionaly classes which will be set on the content wrapper for custom styling\n\t\t * @default ''\n\t\t */\n\t\tcontentClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Optionally pass additionaly classes which will be set on the dialog itself\n\t\t * (the default `class` attribute will be set on the modal wrapper)\n\t\t * @default ''\n\t\t */\n\t\tdialogClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: ['closing', 'update:open'],\n\n\tsetup(props, { emit, slots }) {\n\t\t/**\n\t\t * The dialog wrapper element\n\t\t * @type {import('vue').Ref<HTMLDivElement>}\n\t\t */\n\t\tconst wrapper = ref()\n\n\t\t/**\n\t\t * We use the dialog width to decide if we collapse the navigation (flex direction row)\n\t\t */\n\t\tconst { width: dialogWidth } = useElementSize(wrapper, { width: 900 })\n\n\t\t/**\n\t\t * Whether the navigation is collapsed due to dialog and window size\n\t\t * (collapses when modal is below: 900px modal width - 2x 12px margin)\n\t\t */\n\t\tconst isNavigationCollapsed = computed(() => dialogWidth.value < 876)\n\n\t\t/**\n\t\t * Whether a navigation was passed and the element should be displayed\n\t\t */\n\t\tconst hasNavigation = computed(() => slots?.navigation !== undefined)\n\n\t\t/**\n\t\t * The unique id of the nav element\n\t\t */\n\t\tconst navigationId = ref(GenRandomId())\n\n\t\t/**\n\t\t * aria-label attribute for the nav element\n\t\t */\n\t\tconst navigationAriaLabelAttr = computed(() => props.navigationAriaLabel || undefined)\n\n\t\t/**\n\t\t * aria-labelledby attribute for the nav element\n\t\t */\n\t\tconst navigationAriaLabelledbyAttr = computed(() => {\n\t\t\tif (props.navigationAriaLabel) {\n\t\t\t\t// Not needed, already labelled by aria-label\n\t\t\t\treturn undefined\n\t\t\t}\n\t\t\t// Use dialog name as a fallback label for navigation\n\t\t\treturn props.navigationAriaLabelledby || navigationId.value\n\t\t})\n\n\t\t/**\n\t\t * If the underlaying modal is shown\n\t\t */\n\t\tconst showModal = ref(true)\n\n\t\t// Because NcModal does not emit `close` when show prop is changed\n\t\t/**\n\t\t * Handle clicking a dialog button -> should close\n\t\t */\n\t\tconst handleButtonClose = () => {\n\t\t\thandleClosing()\n\t\t\twindow.setTimeout(() => handleClosed(), 300)\n\t\t}\n\n\t\t/**\n\t\t * Handle closing the dialog, optional out transition did not run yet\n\t\t */\n\t\tconst handleClosing = () => {\n\t\t\tshowModal.value = false\n\t\t\t/**\n\t\t\t * Emitted when the dialog is closing, so the out transition did not finish yet\n\t\t\t */\n\t\t\temit('closing')\n\t\t}\n\n\t\t/**\n\t\t * Handle dialog closed (out transition finished)\n\t\t */\n\t\tconst handleClosed = () => {\n\t\t\tshowModal.value = true\n\t\t\t/**\n\t\t\t * Emitted then the dialog is fully closed and the out transition run\n\t\t\t */\n\t\t\temit('update:open', false)\n\t\t}\n\n\t\t/**\n\t\t * Properties to pass to the underlying NcModal\n\t\t */\n\t\tconst modalProps = computed(() => ({\n\t\t\tcanClose: props.canClose,\n\t\t\tcontainer: props.container === undefined ? 'body' : props.container,\n\t\t\t// we do not pass the name as we already have the name as the headline\n\t\t\t// name: props.name,\n\t\t\tsize: props.size,\n\t\t\tshow: props.open && showModal.value,\n\t\t\toutTransition: props.outTransition,\n\t\t\tcloseOnClickOutside: props.closeOnClickOutside,\n\t\t\tadditionalTrapElements: props.additionalTrapElements,\n\t\t}))\n\n\t\treturn {\n\t\t\thandleButtonClose,\n\t\t\thandleClosing,\n\t\t\thandleClosed,\n\t\t\thasNavigation,\n\t\t\tnavigationId,\n\t\t\tnavigationAriaLabelAttr,\n\t\t\tnavigationAriaLabelledbyAttr,\n\t\t\tisNavigationCollapsed,\n\t\t\tmodalProps,\n\t\t\twrapper,\n\t\t}\n\t},\n})\n</script>\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-large);\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\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-end: 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\twidth: fit-content;\n\t\tmargin-inline: auto 12px; // 12px to align with the overall modal padding\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":["_sfc_main","defineComponent","NcDialogButton","NcModal","arr","element","value","props","emit","slots","wrapper","ref","dialogWidth","useElementSize","isNavigationCollapsed","computed","hasNavigation","navigationId","GenRandomId","navigationAriaLabelAttr","navigationAriaLabelledbyAttr","showModal","handleButtonClose","handleClosing","handleClosed","modalProps"],"mappings":"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"}

package/dist/chunks/{NcDialog-_HZnlBi4.mjs → NcDialog-D6YSjidf.mjs}

@@ -1,10 +1,10 @@
-import '../assets/NcDialog-DN-rY-55.css';
+import '../assets/NcDialog-M36tj7nk.css';
 import { useElementSize as m } from "@vueuse/core";
 import { defineComponent as y, ref as s, computed as n } from "vue";
 import C from "../Components/NcModal.mjs";
-import { N as b } from "./NcDialogButton-xDZQrfsw.mjs";
-import { G as A } from "./GenRandomId-VodkdWbp.mjs";
-import { n as h } from "./_plugin-vue2_normalizer-u6G_3nkj.mjs";
+import { N as b } from "./NcDialogButton-DQFoaN7q.mjs";
+import { G as A } from "./GenRandomId-BW3iYFf9.mjs";
+import { n as h } from "./_plugin-vue2_normalizer-Bj5bLKV4.mjs";
 const N = y({
   name: "NcDialog",
   components: {
@@ -155,7 +155,7 @@ const N = y({
   },
   emits: ["closing", "update:open"],
   setup(e, { emit: a, slots: t }) {
-    const i = s(), { width: l } = m(i, { width: 900 }), u = n(() => l.value < 876), f = n(() => t?.navigation !== void 0), r = s(A()), g = n(() => e.navigationAriaLabel || void 0), p = n(() => {
+    const i = s(), { width: l } = m(i, { width: 900 }), u = n(() => l.value < 876), f = n(() => (t == null ? void 0 : t.navigation) !== void 0), r = s(A()), g = n(() => e.navigationAriaLabel || void 0), p = n(() => {
       if (!e.navigationAriaLabel)
         return e.navigationAriaLabelledby || r.value;
     }), o = s(!0), _ = () => {

package/dist/chunks/{NcDialog-_HZnlBi4.mjs.map → NcDialog-D6YSjidf.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcDialog-_HZnlBi4.mjs","sources":["../../src/components/NcDialog/NcDialog.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2023 Ferdinand Thiessen\n  -\n  - @author Ferdinand Thiessen <opensource@fthiessen.de>\n  -\n  - @license AGPL-3.0-or-later\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<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 :open.sync=\"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\" :can-close=\"false\">\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 :open.sync=\"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</docs>\n\n<template>\n\t<NcModal v-if=\"open\"\n\t\tclass=\"dialog__modal\"\n\t\t:enable-slideshow=\"false\"\n\t\t:enable-swipe=\"false\"\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<div class=\"dialog\" :class=\"dialogClasses\">\n\t\t\t<div ref=\"wrapper\" :class=\"['dialog__wrapper', { '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 v-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\" :is-collapsed=\"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 v-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=\"handleButtonClose\" />\n\t\t\t\t</slot>\n\t\t\t</div>\n\t\t</div>\n\t</NcModal>\n</template>\n\n<script>\nimport { useElementSize } from '@vueuse/core'\nimport { computed, defineComponent, ref } from 'vue'\n\nimport NcModal from '../NcModal/index.js'\nimport NcDialogButton from '../NcDialogButton/index.js'\n\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nexport default defineComponent({\n\tname: 'NcDialog',\n\n\tcomponents: {\n\t\tNcDialogButton,\n\t\tNcModal,\n\t},\n\n\tprops: {\n\t\t/** Name of the dialog (the heading) */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/** Text of the dialog */\n\t\tmessage: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Additional elements to add to the focus trap */\n\t\tadditionalTrapElements: {\n\t\t\ttype: Array,\n\t\t\tvalidator: (arr) => {\n\t\t\t\treturn (\n\t\t\t\t\tArray.isArray(arr) && arr.every(\n\t\t\t\t\t\t(element) =>\n\t\t\t\t\t\t\ttypeof element === 'string' || element instanceof HTMLElement,\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t},\n\t\t\tdefault: () => ([]),\n\t\t},\n\n\t\t/**\n\t\t * The element where to mount the dialog, if `null` is passed the dialog is mounted in place\n\t\t * @default 'body'\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/**\n\t\t * Whether the dialog should be shown\n\t\t * @default true\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Size of the underlying NcModal\n\t\t * @default 'small'\n\t\t * @type {'small'|'normal'|'large'|'full'}\n\t\t */\n\t\tsize: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: 'small',\n\t\t\tvalidator: (value) => typeof value === 'string' && ['small', 'normal', 'large', 'full'].includes(value),\n\t\t},\n\n\t\t/**\n\t\t * Buttons to display\n\t\t * @default []\n\t\t */\n\t\tbuttons: {\n\t\t\ttype: Array,\n\t\t\trequired: false,\n\t\t\tdefault: () => ([]),\n\t\t\tvalidator: (value) => Array.isArray(value) && value.every((element) => typeof element === 'object'),\n\t\t},\n\n\t\t/**\n\t\t * Set to false to no show a close button on the dialog\n\t\t * @default true\n\t\t */\n\t\tcanClose: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Close the dialog if the user clicked outside of the dialog\n\t\t * Only relevant if `canClose` is set to true.\n\t\t */\n\t\tcloseOnClickOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Declare if hiding the modal should be animated\n\t\t * @default false\n\t\t */\n\t\toutTransition: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Optionally pass additionaly classes which will be set on the navigation for custom styling\n\t\t * @default ''\n\t\t * @example\n\t\t * ```html\n\t\t * <DialogBase :navigation-classes=\"['mydialog-navigation']\"><!-- --></DialogBase>\n\t\t * <!-- ... -->\n\t\t * <style lang=\"scss\">\n\t\t * :deep(.mydialog-navigation) {\n\t\t *     flex-direction: row-reverse;\n\t\t * }\n\t\t * </style>\n\t\t * ```\n\t\t */\n\t\tnavigationClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * aria-label for the dialog navigation.\n\t\t * Use it when you want to provide a more meaningful label than the dialog name.\n\t\t *\n\t\t * By default, navigation is labeled by the dialog name.\n\t\t */\n\t\tnavigationAriaLabel: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * aria-labelledby for the dialog navigation.\n\t\t * Use it when you have an implicit navigation label (e.g. a heading).\n\t\t *\n\t\t * By default, navigation is labeled by the dialog name.\n\t\t */\n\t\tnavigationAriaLabelledby: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Optionally pass additionaly classes which will be set on the content wrapper for custom styling\n\t\t * @default ''\n\t\t */\n\t\tcontentClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Optionally pass additionaly classes which will be set on the dialog itself\n\t\t * (the default `class` attribute will be set on the modal wrapper)\n\t\t * @default ''\n\t\t */\n\t\tdialogClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: ['closing', 'update:open'],\n\n\tsetup(props, { emit, slots }) {\n\t\t/**\n\t\t * The dialog wrapper element\n\t\t * @type {import('vue').Ref<HTMLDivElement>}\n\t\t */\n\t\tconst wrapper = ref()\n\n\t\t/**\n\t\t * We use the dialog width to decide if we collapse the navigation (flex direction row)\n\t\t */\n\t\tconst { width: dialogWidth } = useElementSize(wrapper, { width: 900 })\n\n\t\t/**\n\t\t * Whether the navigation is collapsed due to dialog and window size\n\t\t * (collapses when modal is below: 900px modal width - 2x 12px margin)\n\t\t */\n\t\tconst isNavigationCollapsed = computed(() => dialogWidth.value < 876)\n\n\t\t/**\n\t\t * Whether a navigation was passed and the element should be displayed\n\t\t */\n\t\tconst hasNavigation = computed(() => slots?.navigation !== undefined)\n\n\t\t/**\n\t\t * The unique id of the nav element\n\t\t */\n\t\tconst navigationId = ref(GenRandomId())\n\n\t\t/**\n\t\t * aria-label attribute for the nav element\n\t\t */\n\t\tconst navigationAriaLabelAttr = computed(() => props.navigationAriaLabel || undefined)\n\n\t\t/**\n\t\t * aria-labelledby attribute for the nav element\n\t\t */\n\t\tconst navigationAriaLabelledbyAttr = computed(() => {\n\t\t\tif (props.navigationAriaLabel) {\n\t\t\t\t// Not needed, already labelled by aria-label\n\t\t\t\treturn undefined\n\t\t\t}\n\t\t\t// Use dialog name as a fallback label for navigation\n\t\t\treturn props.navigationAriaLabelledby || navigationId.value\n\t\t})\n\n\t\t/**\n\t\t * If the underlaying modal is shown\n\t\t */\n\t\tconst showModal = ref(true)\n\n\t\t// Because NcModal does not emit `close` when show prop is changed\n\t\t/**\n\t\t * Handle clicking a dialog button -> should close\n\t\t */\n\t\tconst handleButtonClose = () => {\n\t\t\thandleClosing()\n\t\t\twindow.setTimeout(() => handleClosed(), 300)\n\t\t}\n\n\t\t/**\n\t\t * Handle closing the dialog, optional out transition did not run yet\n\t\t */\n\t\tconst handleClosing = () => {\n\t\t\tshowModal.value = false\n\t\t\t/**\n\t\t\t * Emitted when the dialog is closing, so the out transition did not finish yet\n\t\t\t */\n\t\t\temit('closing')\n\t\t}\n\n\t\t/**\n\t\t * Handle dialog closed (out transition finished)\n\t\t */\n\t\tconst handleClosed = () => {\n\t\t\tshowModal.value = true\n\t\t\t/**\n\t\t\t * Emitted then the dialog is fully closed and the out transition run\n\t\t\t */\n\t\t\temit('update:open', false)\n\t\t}\n\n\t\t/**\n\t\t * Properties to pass to the underlying NcModal\n\t\t */\n\t\tconst modalProps = computed(() => ({\n\t\t\tcanClose: props.canClose,\n\t\t\tcontainer: props.container === undefined ? 'body' : props.container,\n\t\t\t// we do not pass the name as we already have the name as the headline\n\t\t\t// name: props.name,\n\t\t\tsize: props.size,\n\t\t\tshow: props.open && showModal.value,\n\t\t\toutTransition: props.outTransition,\n\t\t\tcloseOnClickOutside: props.closeOnClickOutside,\n\t\t\tadditionalTrapElements: props.additionalTrapElements,\n\t\t}))\n\n\t\treturn {\n\t\t\thandleButtonClose,\n\t\t\thandleClosing,\n\t\t\thandleClosed,\n\t\t\thasNavigation,\n\t\t\tnavigationId,\n\t\t\tnavigationAriaLabelAttr,\n\t\t\tnavigationAriaLabelledbyAttr,\n\t\t\tisNavigationCollapsed,\n\t\t\tmodalProps,\n\t\t\twrapper,\n\t\t}\n\t},\n})\n</script>\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-large);\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\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-end: 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\twidth: fit-content;\n\t\tmargin-inline: auto 12px; // 12px to align with the overall modal padding\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":["_sfc_main","defineComponent","NcDialogButton","NcModal","arr","element","value","props","emit","slots","wrapper","ref","dialogWidth","useElementSize","isNavigationCollapsed","computed","hasNavigation","navigationId","GenRandomId","navigationAriaLabelAttr","navigationAriaLabelledbyAttr","showModal","handleButtonClose","handleClosing","handleClosed","modalProps"],"mappings":"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"}
+{"version":3,"file":"NcDialog-D6YSjidf.mjs","sources":["../../src/components/NcDialog/NcDialog.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2023 Ferdinand Thiessen\n  -\n  - @author Ferdinand Thiessen <opensource@fthiessen.de>\n  -\n  - @license AGPL-3.0-or-later\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<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 :open.sync=\"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\" :can-close=\"false\">\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 :open.sync=\"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</docs>\n\n<template>\n\t<NcModal v-if=\"open\"\n\t\tclass=\"dialog__modal\"\n\t\t:enable-slideshow=\"false\"\n\t\t:enable-swipe=\"false\"\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<div class=\"dialog\" :class=\"dialogClasses\">\n\t\t\t<div ref=\"wrapper\" :class=\"['dialog__wrapper', { '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 v-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\" :is-collapsed=\"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 v-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=\"handleButtonClose\" />\n\t\t\t\t</slot>\n\t\t\t</div>\n\t\t</div>\n\t</NcModal>\n</template>\n\n<script>\nimport { useElementSize } from '@vueuse/core'\nimport { computed, defineComponent, ref } from 'vue'\n\nimport NcModal from '../NcModal/index.js'\nimport NcDialogButton from '../NcDialogButton/index.js'\n\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nexport default defineComponent({\n\tname: 'NcDialog',\n\n\tcomponents: {\n\t\tNcDialogButton,\n\t\tNcModal,\n\t},\n\n\tprops: {\n\t\t/** Name of the dialog (the heading) */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/** Text of the dialog */\n\t\tmessage: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Additional elements to add to the focus trap */\n\t\tadditionalTrapElements: {\n\t\t\ttype: Array,\n\t\t\tvalidator: (arr) => {\n\t\t\t\treturn (\n\t\t\t\t\tArray.isArray(arr) && arr.every(\n\t\t\t\t\t\t(element) =>\n\t\t\t\t\t\t\ttypeof element === 'string' || element instanceof HTMLElement,\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t},\n\t\t\tdefault: () => ([]),\n\t\t},\n\n\t\t/**\n\t\t * The element where to mount the dialog, if `null` is passed the dialog is mounted in place\n\t\t * @default 'body'\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/**\n\t\t * Whether the dialog should be shown\n\t\t * @default true\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Size of the underlying NcModal\n\t\t * @default 'small'\n\t\t * @type {'small'|'normal'|'large'|'full'}\n\t\t */\n\t\tsize: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: 'small',\n\t\t\tvalidator: (value) => typeof value === 'string' && ['small', 'normal', 'large', 'full'].includes(value),\n\t\t},\n\n\t\t/**\n\t\t * Buttons to display\n\t\t * @default []\n\t\t */\n\t\tbuttons: {\n\t\t\ttype: Array,\n\t\t\trequired: false,\n\t\t\tdefault: () => ([]),\n\t\t\tvalidator: (value) => Array.isArray(value) && value.every((element) => typeof element === 'object'),\n\t\t},\n\n\t\t/**\n\t\t * Set to false to no show a close button on the dialog\n\t\t * @default true\n\t\t */\n\t\tcanClose: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Close the dialog if the user clicked outside of the dialog\n\t\t * Only relevant if `canClose` is set to true.\n\t\t */\n\t\tcloseOnClickOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Declare if hiding the modal should be animated\n\t\t * @default false\n\t\t */\n\t\toutTransition: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Optionally pass additionaly classes which will be set on the navigation for custom styling\n\t\t * @default ''\n\t\t * @example\n\t\t * ```html\n\t\t * <DialogBase :navigation-classes=\"['mydialog-navigation']\"><!-- --></DialogBase>\n\t\t * <!-- ... -->\n\t\t * <style lang=\"scss\">\n\t\t * :deep(.mydialog-navigation) {\n\t\t *     flex-direction: row-reverse;\n\t\t * }\n\t\t * </style>\n\t\t * ```\n\t\t */\n\t\tnavigationClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * aria-label for the dialog navigation.\n\t\t * Use it when you want to provide a more meaningful label than the dialog name.\n\t\t *\n\t\t * By default, navigation is labeled by the dialog name.\n\t\t */\n\t\tnavigationAriaLabel: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * aria-labelledby for the dialog navigation.\n\t\t * Use it when you have an implicit navigation label (e.g. a heading).\n\t\t *\n\t\t * By default, navigation is labeled by the dialog name.\n\t\t */\n\t\tnavigationAriaLabelledby: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Optionally pass additionaly classes which will be set on the content wrapper for custom styling\n\t\t * @default ''\n\t\t */\n\t\tcontentClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Optionally pass additionaly classes which will be set on the dialog itself\n\t\t * (the default `class` attribute will be set on the modal wrapper)\n\t\t * @default ''\n\t\t */\n\t\tdialogClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: ['closing', 'update:open'],\n\n\tsetup(props, { emit, slots }) {\n\t\t/**\n\t\t * The dialog wrapper element\n\t\t * @type {import('vue').Ref<HTMLDivElement>}\n\t\t */\n\t\tconst wrapper = ref()\n\n\t\t/**\n\t\t * We use the dialog width to decide if we collapse the navigation (flex direction row)\n\t\t */\n\t\tconst { width: dialogWidth } = useElementSize(wrapper, { width: 900 })\n\n\t\t/**\n\t\t * Whether the navigation is collapsed due to dialog and window size\n\t\t * (collapses when modal is below: 900px modal width - 2x 12px margin)\n\t\t */\n\t\tconst isNavigationCollapsed = computed(() => dialogWidth.value < 876)\n\n\t\t/**\n\t\t * Whether a navigation was passed and the element should be displayed\n\t\t */\n\t\tconst hasNavigation = computed(() => slots?.navigation !== undefined)\n\n\t\t/**\n\t\t * The unique id of the nav element\n\t\t */\n\t\tconst navigationId = ref(GenRandomId())\n\n\t\t/**\n\t\t * aria-label attribute for the nav element\n\t\t */\n\t\tconst navigationAriaLabelAttr = computed(() => props.navigationAriaLabel || undefined)\n\n\t\t/**\n\t\t * aria-labelledby attribute for the nav element\n\t\t */\n\t\tconst navigationAriaLabelledbyAttr = computed(() => {\n\t\t\tif (props.navigationAriaLabel) {\n\t\t\t\t// Not needed, already labelled by aria-label\n\t\t\t\treturn undefined\n\t\t\t}\n\t\t\t// Use dialog name as a fallback label for navigation\n\t\t\treturn props.navigationAriaLabelledby || navigationId.value\n\t\t})\n\n\t\t/**\n\t\t * If the underlaying modal is shown\n\t\t */\n\t\tconst showModal = ref(true)\n\n\t\t// Because NcModal does not emit `close` when show prop is changed\n\t\t/**\n\t\t * Handle clicking a dialog button -> should close\n\t\t */\n\t\tconst handleButtonClose = () => {\n\t\t\thandleClosing()\n\t\t\twindow.setTimeout(() => handleClosed(), 300)\n\t\t}\n\n\t\t/**\n\t\t * Handle closing the dialog, optional out transition did not run yet\n\t\t */\n\t\tconst handleClosing = () => {\n\t\t\tshowModal.value = false\n\t\t\t/**\n\t\t\t * Emitted when the dialog is closing, so the out transition did not finish yet\n\t\t\t */\n\t\t\temit('closing')\n\t\t}\n\n\t\t/**\n\t\t * Handle dialog closed (out transition finished)\n\t\t */\n\t\tconst handleClosed = () => {\n\t\t\tshowModal.value = true\n\t\t\t/**\n\t\t\t * Emitted then the dialog is fully closed and the out transition run\n\t\t\t */\n\t\t\temit('update:open', false)\n\t\t}\n\n\t\t/**\n\t\t * Properties to pass to the underlying NcModal\n\t\t */\n\t\tconst modalProps = computed(() => ({\n\t\t\tcanClose: props.canClose,\n\t\t\tcontainer: props.container === undefined ? 'body' : props.container,\n\t\t\t// we do not pass the name as we already have the name as the headline\n\t\t\t// name: props.name,\n\t\t\tsize: props.size,\n\t\t\tshow: props.open && showModal.value,\n\t\t\toutTransition: props.outTransition,\n\t\t\tcloseOnClickOutside: props.closeOnClickOutside,\n\t\t\tadditionalTrapElements: props.additionalTrapElements,\n\t\t}))\n\n\t\treturn {\n\t\t\thandleButtonClose,\n\t\t\thandleClosing,\n\t\t\thandleClosed,\n\t\t\thasNavigation,\n\t\t\tnavigationId,\n\t\t\tnavigationAriaLabelAttr,\n\t\t\tnavigationAriaLabelledbyAttr,\n\t\t\tisNavigationCollapsed,\n\t\t\tmodalProps,\n\t\t\twrapper,\n\t\t}\n\t},\n})\n</script>\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-large);\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\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-end: 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\twidth: fit-content;\n\t\tmargin-inline: auto 12px; // 12px to align with the overall modal padding\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":["_sfc_main","defineComponent","NcDialogButton","NcModal","arr","element","value","props","emit","slots","wrapper","ref","dialogWidth","useElementSize","isNavigationCollapsed","computed","hasNavigation","navigationId","GenRandomId","navigationAriaLabelAttr","navigationAriaLabelledbyAttr","showModal","handleButtonClose","handleClosing","handleClosed","modalProps"],"mappings":"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"}

package/dist/chunks/{NcDialogButton-CtdP0-DO.cjs → NcDialogButton-D7ibBxsQ.cjs}

@@ -1,9 +1,9 @@
 "use strict";
-const c = require("vue"), o = require("../Components/NcButton.cjs"), l = require("./NcIconSvgWrapper-RwagV5P9.cjs"), i = require("./_plugin-vue2_normalizer-DCfUPqga.cjs"), u = c.defineComponent({
+const o = require("vue"), l = require("../Components/NcButton.cjs"), i = require("./NcIconSvgWrapper-kIn1eQyv.cjs"), u = require("./_plugin-vue2_normalizer-GXKvuwrq.cjs"), a = o.defineComponent({
   name: "NcDialogButton",
   components: {
-    NcButton: o,
-    NcIconSvgWrapper: l.NcIconSvgWrapper
+    NcButton: l,
+    NcIconSvgWrapper: i.NcIconSvgWrapper
   },
   props: {
     /**
@@ -42,27 +42,28 @@ const c = require("vue"), o = require("../Components/NcButton.cjs"), l = require
   },
   emits: ["click"],
   setup(n, { emit: e }) {
-    return { handleClick: (t) => {
-      n.callback?.(), e("click", t);
+    return { handleClick: (c) => {
+      var t;
+      (t = n.callback) == null || t.call(n), e("click", c);
     } };
   }
 });
-var a = function() {
+var s = function() {
   var e = this, r = e._self._c;
   return e._self._setupProxy, r("NcButton", { attrs: { "aria-label": e.label, type: e.type }, on: { click: e.handleClick }, scopedSlots: e._u([{ key: "icon", fn: function() {
     return [e._t("icon", function() {
       return [e.icon !== void 0 ? r("NcIconSvgWrapper", { attrs: { svg: e.icon } }) : e._e()];
     })];
   }, proxy: !0 }], null, !0) }, [e._v(" " + e._s(e.label) + " ")]);
-}, s = [], p = /* @__PURE__ */ i.normalizeComponent(
-  u,
+}, _ = [], d = /* @__PURE__ */ u.normalizeComponent(
   a,
   s,
+  _,
   !1,
   null,
   null,
   null,
   null
 );
-const _ = p.exports;
-exports.NcDialogButton = _;
+const p = d.exports;
+exports.NcDialogButton = p;

package/dist/chunks/{NcDialogButton-xDZQrfsw.mjs.map → NcDialogButton-D7ibBxsQ.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcDialogButton-xDZQrfsw.mjs","sources":["../../src/components/NcDialogButton/NcDialogButton.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2023 Ferdinand Thiessen\n  -\n  - @author Ferdinand Thiessen <opensource@fthiessen.de>\n  -\n  - @license AGPL-3.0-or-later\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<docs>\nDialog button component used by NcDialog in the actions slot to display the buttons passed by the `buttons` prop.\n</docs>\n\n<template>\n\t<NcButton :aria-label=\"label\" :type=\"type\" @click=\"handleClick\">\n\t\t{{ label }}\n\t\t<template #icon>\n\t\t\t<!-- @slot Allow to set a custom icon for the button -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<NcIconSvgWrapper v-if=\"icon !== undefined\" :svg=\"icon\" />\n\t\t\t</slot>\n\t\t</template>\n\t</NcButton>\n</template>\n\n<script>\nimport { defineComponent } from 'vue'\nimport NcButton from '../NcButton/index.js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\n\nexport default defineComponent({\n\tname: 'NcDialogButton',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tNcIconSvgWrapper,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The function that will be called when the button is pressed\n\t\t * @type {() => void}\n\t\t */\n\t\tcallback: {\n\t\t\ttype: Function,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * The label of the button\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Optional inline SVG icon for the button\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * The button type, see NcButton\n\t\t * @type {'primary'|'secondary'|'error'|'warning'|'success'}\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: 'secondary',\n\t\t\tvalidator: (type) => typeof type === 'string' && ['primary', 'secondary', 'error', 'warning', 'success'].includes(type),\n\t\t},\n\t},\n\n\temits: ['click'],\n\n\tsetup(props, { emit }) {\n\t\t/**\n\t\t * Handle clicking the button\n\t\t * @param {MouseEvent} e The click event\n\t\t */\n\t\tconst handleClick = (e) => {\n\t\t\tprops.callback?.()\n\t\t\temit('click', e)\n\t\t}\n\n\t\treturn { handleClick }\n\t},\n})\n</script>\n"],"names":["_sfc_main","defineComponent","NcButton","NcIconSvgWrapper","type","props","emit","e"],"mappings":";;;;AA2CA,MAAAA,IAAAC,EAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC;AAAA,IACA,kBAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,OAAAA,KAAA,YAAA,CAAA,WAAA,aAAA,SAAA,WAAA,SAAA,EAAA,SAAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,CAAA,OAAA;AAAA,EAEA,MAAAC,GAAA,EAAA,MAAAC,KAAA;AAUA,WAAA,EAAA,aALA,CAAAC,MAAA;AACA,MAAAF,EAAA,WAAA,GACAC,EAAA,SAAAC,CAAA;AAAA,IACA,EAEA;AAAA,EACA;AACA,CAAA;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcDialogButton-D7ibBxsQ.cjs","sources":["../../src/components/NcDialogButton/NcDialogButton.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2023 Ferdinand Thiessen\n  -\n  - @author Ferdinand Thiessen <opensource@fthiessen.de>\n  -\n  - @license AGPL-3.0-or-later\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<docs>\nDialog button component used by NcDialog in the actions slot to display the buttons passed by the `buttons` prop.\n</docs>\n\n<template>\n\t<NcButton :aria-label=\"label\" :type=\"type\" @click=\"handleClick\">\n\t\t{{ label }}\n\t\t<template #icon>\n\t\t\t<!-- @slot Allow to set a custom icon for the button -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<NcIconSvgWrapper v-if=\"icon !== undefined\" :svg=\"icon\" />\n\t\t\t</slot>\n\t\t</template>\n\t</NcButton>\n</template>\n\n<script>\nimport { defineComponent } from 'vue'\nimport NcButton from '../NcButton/index.js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\n\nexport default defineComponent({\n\tname: 'NcDialogButton',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tNcIconSvgWrapper,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The function that will be called when the button is pressed\n\t\t * @type {() => void}\n\t\t */\n\t\tcallback: {\n\t\t\ttype: Function,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * The label of the button\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Optional inline SVG icon for the button\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * The button type, see NcButton\n\t\t * @type {'primary'|'secondary'|'error'|'warning'|'success'}\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: 'secondary',\n\t\t\tvalidator: (type) => typeof type === 'string' && ['primary', 'secondary', 'error', 'warning', 'success'].includes(type),\n\t\t},\n\t},\n\n\temits: ['click'],\n\n\tsetup(props, { emit }) {\n\t\t/**\n\t\t * Handle clicking the button\n\t\t * @param {MouseEvent} e The click event\n\t\t */\n\t\tconst handleClick = (e) => {\n\t\t\tprops.callback?.()\n\t\t\temit('click', e)\n\t\t}\n\n\t\treturn { handleClick }\n\t},\n})\n</script>\n"],"names":["_sfc_main","defineComponent","NcButton","NcIconSvgWrapper","type","props","emit","e","_a"],"mappings":";4KA2CAA,IAAAC,EAAAA,gBAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC;AAAAA,IACA,kBAAAC,EAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,OAAAA,KAAA,YAAA,CAAA,WAAA,aAAA,SAAA,WAAA,SAAA,EAAA,SAAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,CAAA,OAAA;AAAA,EAEA,MAAAC,GAAA,EAAA,MAAAC,KAAA;AAUA,WAAA,EAAA,aALA,CAAAC,MAAA;;AACA,OAAAC,IAAAH,EAAA,aAAA,QAAAG,EAAA,KAAAH,IACAC,EAAA,SAAAC,CAAA;AAAA,IACA,EAEA;AAAA,EACA;AACA,CAAA;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcDialogButton-xDZQrfsw.mjs → NcDialogButton-DQFoaN7q.mjs}

@@ -1,12 +1,12 @@
 import { defineComponent as o } from "vue";
-import c from "../Components/NcButton.mjs";
-import { N as l } from "./NcIconSvgWrapper-CvnWKK7h.mjs";
-import { n as i } from "./_plugin-vue2_normalizer-u6G_3nkj.mjs";
-const a = o({
+import l from "../Components/NcButton.mjs";
+import { N as i } from "./NcIconSvgWrapper-BTdzvQGV.mjs";
+import { n as a } from "./_plugin-vue2_normalizer-Bj5bLKV4.mjs";
+const u = o({
   name: "NcDialogButton",
   components: {
-    NcButton: c,
-    NcIconSvgWrapper: l
+    NcButton: l,
+    NcIconSvgWrapper: i
   },
   props: {
     /**
@@ -45,8 +45,9 @@ const a = o({
   },
   emits: ["click"],
   setup(n, { emit: e }) {
-    return { handleClick: (t) => {
-      n.callback?.(), e("click", t);
+    return { handleClick: (c) => {
+      var t;
+      (t = n.callback) == null || t.call(n), e("click", c);
     } };
   }
 });
@@ -57,17 +58,17 @@ var s = function() {
       return [e.icon !== void 0 ? r("NcIconSvgWrapper", { attrs: { svg: e.icon } }) : e._e()];
     })];
   }, proxy: !0 }], null, !0) }, [e._v(" " + e._s(e.label) + " ")]);
-}, u = [], p = /* @__PURE__ */ i(
-  a,
-  s,
+}, d = [], f = /* @__PURE__ */ a(
   u,
+  s,
+  d,
   !1,
   null,
   null,
   null,
   null
 );
-const y = p.exports;
+const g = f.exports;
 export {
-  y as N
+  g as N
 };

package/dist/chunks/{NcDialogButton-CtdP0-DO.cjs.map → NcDialogButton-DQFoaN7q.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcDialogButton-CtdP0-DO.cjs","sources":["../../src/components/NcDialogButton/NcDialogButton.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2023 Ferdinand Thiessen\n  -\n  - @author Ferdinand Thiessen <opensource@fthiessen.de>\n  -\n  - @license AGPL-3.0-or-later\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<docs>\nDialog button component used by NcDialog in the actions slot to display the buttons passed by the `buttons` prop.\n</docs>\n\n<template>\n\t<NcButton :aria-label=\"label\" :type=\"type\" @click=\"handleClick\">\n\t\t{{ label }}\n\t\t<template #icon>\n\t\t\t<!-- @slot Allow to set a custom icon for the button -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<NcIconSvgWrapper v-if=\"icon !== undefined\" :svg=\"icon\" />\n\t\t\t</slot>\n\t\t</template>\n\t</NcButton>\n</template>\n\n<script>\nimport { defineComponent } from 'vue'\nimport NcButton from '../NcButton/index.js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\n\nexport default defineComponent({\n\tname: 'NcDialogButton',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tNcIconSvgWrapper,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The function that will be called when the button is pressed\n\t\t * @type {() => void}\n\t\t */\n\t\tcallback: {\n\t\t\ttype: Function,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * The label of the button\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Optional inline SVG icon for the button\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * The button type, see NcButton\n\t\t * @type {'primary'|'secondary'|'error'|'warning'|'success'}\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: 'secondary',\n\t\t\tvalidator: (type) => typeof type === 'string' && ['primary', 'secondary', 'error', 'warning', 'success'].includes(type),\n\t\t},\n\t},\n\n\temits: ['click'],\n\n\tsetup(props, { emit }) {\n\t\t/**\n\t\t * Handle clicking the button\n\t\t * @param {MouseEvent} e The click event\n\t\t */\n\t\tconst handleClick = (e) => {\n\t\t\tprops.callback?.()\n\t\t\temit('click', e)\n\t\t}\n\n\t\treturn { handleClick }\n\t},\n})\n</script>\n"],"names":["_sfc_main","defineComponent","NcButton","NcIconSvgWrapper","type","props","emit","e"],"mappings":";4KA2CAA,IAAAC,EAAAA,gBAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC;AAAAA,IACA,kBAAAC,EAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,OAAAA,KAAA,YAAA,CAAA,WAAA,aAAA,SAAA,WAAA,SAAA,EAAA,SAAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,CAAA,OAAA;AAAA,EAEA,MAAAC,GAAA,EAAA,MAAAC,KAAA;AAUA,WAAA,EAAA,aALA,CAAAC,MAAA;AACA,MAAAF,EAAA,WAAA,GACAC,EAAA,SAAAC,CAAA;AAAA,IACA,EAEA;AAAA,EACA;AACA,CAAA;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcDialogButton-DQFoaN7q.mjs","sources":["../../src/components/NcDialogButton/NcDialogButton.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2023 Ferdinand Thiessen\n  -\n  - @author Ferdinand Thiessen <opensource@fthiessen.de>\n  -\n  - @license AGPL-3.0-or-later\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<docs>\nDialog button component used by NcDialog in the actions slot to display the buttons passed by the `buttons` prop.\n</docs>\n\n<template>\n\t<NcButton :aria-label=\"label\" :type=\"type\" @click=\"handleClick\">\n\t\t{{ label }}\n\t\t<template #icon>\n\t\t\t<!-- @slot Allow to set a custom icon for the button -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<NcIconSvgWrapper v-if=\"icon !== undefined\" :svg=\"icon\" />\n\t\t\t</slot>\n\t\t</template>\n\t</NcButton>\n</template>\n\n<script>\nimport { defineComponent } from 'vue'\nimport NcButton from '../NcButton/index.js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\n\nexport default defineComponent({\n\tname: 'NcDialogButton',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tNcIconSvgWrapper,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The function that will be called when the button is pressed\n\t\t * @type {() => void}\n\t\t */\n\t\tcallback: {\n\t\t\ttype: Function,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * The label of the button\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Optional inline SVG icon for the button\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * The button type, see NcButton\n\t\t * @type {'primary'|'secondary'|'error'|'warning'|'success'}\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: 'secondary',\n\t\t\tvalidator: (type) => typeof type === 'string' && ['primary', 'secondary', 'error', 'warning', 'success'].includes(type),\n\t\t},\n\t},\n\n\temits: ['click'],\n\n\tsetup(props, { emit }) {\n\t\t/**\n\t\t * Handle clicking the button\n\t\t * @param {MouseEvent} e The click event\n\t\t */\n\t\tconst handleClick = (e) => {\n\t\t\tprops.callback?.()\n\t\t\temit('click', e)\n\t\t}\n\n\t\treturn { handleClick }\n\t},\n})\n</script>\n"],"names":["_sfc_main","defineComponent","NcButton","NcIconSvgWrapper","type","props","emit","e","_a"],"mappings":";;;;AA2CA,MAAAA,IAAAC,EAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC;AAAA,IACA,kBAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,OAAAA,KAAA,YAAA,CAAA,WAAA,aAAA,SAAA,WAAA,SAAA,EAAA,SAAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,CAAA,OAAA;AAAA,EAEA,MAAAC,GAAA,EAAA,MAAAC,KAAA;AAUA,WAAA,EAAA,aALA,CAAAC,MAAA;;AACA,OAAAC,IAAAH,EAAA,aAAA,QAAAG,EAAA,KAAAH,IACAC,EAAA,SAAAC,CAAA;AAAA,IACA,EAEA;AAAA,EACA;AACA,CAAA;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcEmojiPicker-gZaqE1rk.cjs → NcEmojiPicker-BCdoIKXJ.cjs}

@@ -1,7 +1,7 @@
-require('../assets/NcEmojiPicker-hTlSVIq0.css');
+require('../assets/NcEmojiPicker-B-4WNYcx.css');
 "use strict";
-const l = require("emoji-mart-vue-fast"), r = require("./_l10n-AmjncLyn.cjs"), c = require("./emoji-mJIuLpNR.cjs"), o = require("./GenColors-LzmNxRE8.cjs"), p = require("emoji-mart-vue-fast/data/all.json"), f = require("./_plugin-vue2_normalizer-DCfUPqga.cjs"), d = require("../Components/NcButton.cjs"), m = require("./NcColorPicker-7PNp6DUg.cjs"), h = require("./NcPopover-fv7OFtxM.cjs"), k = require("./NcTextField-_LseQJYw.cjs"), _ = (t) => t && t.__esModule ? t : { default: t }, v = /* @__PURE__ */ _(p);
-r.register(r.t6, r.t30, r.t34);
+const l = require("emoji-mart-vue-fast"), n = require("./_l10n-B986q8RC.cjs"), c = require("./emoji-DEH9dtOa.cjs"), o = require("./GenColors-vI-bx9ZY.cjs"), p = require("emoji-mart-vue-fast/data/all.json"), f = require("./_plugin-vue2_normalizer-GXKvuwrq.cjs"), d = require("../Components/NcButton.cjs"), m = require("./NcColorPicker-BVqwn1Fr.cjs"), h = require("./NcPopover-h-t7Dnjk.cjs"), k = require("./NcTextField-CsnzlYWD.cjs"), _ = (r) => r && r.__esModule ? r : { default: r }, v = /* @__PURE__ */ _(p);
+n.register(n.t6, n.t31, n.t36);
 const y = {
   name: "CircleIcon",
   emits: ["click"],
@@ -20,10 +20,10 @@ const y = {
   }
 };
 var g = function() {
-  var e = this, n = e._self._c;
-  return n("span", e._b({ staticClass: "material-design-icon circle-icon", attrs: { "aria-hidden": e.title ? null : !0, "aria-label": e.title, role: "img" }, on: { click: function(i) {
+  var e = this, t = e._self._c;
+  return t("span", e._b({ staticClass: "material-design-icon circle-icon", attrs: { "aria-hidden": e.title ? null : !0, "aria-label": e.title, role: "img" }, on: { click: function(i) {
     return e.$emit("click", i);
-  } } }, "span", e.$attrs, !1), [n("svg", { staticClass: "material-design-icon__svg", attrs: { fill: e.fillColor, width: e.size, height: e.size, viewBox: "0 0 24 24" } }, [n("path", { attrs: { d: "M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" } }, [e.title ? n("title", [e._v(e._s(e.title))]) : e._e()])])]);
+  } } }, "span", e.$attrs, !1), [t("svg", { staticClass: "material-design-icon__svg", attrs: { fill: e.fillColor, width: e.size, height: e.size, viewBox: "0 0 24 24" } }, [t("path", { attrs: { d: "M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" } }, [e.title ? t("title", [e._v(e._s(e.title))]) : e._e()])])]);
 }, C = [], S = /* @__PURE__ */ f.normalizeComponent(
   y,
   g,
@@ -37,29 +37,29 @@ var g = function() {
 const w = S.exports;
 let a;
 const b = {
-  search: r.t("Search emoji"),
-  notfound: r.t("No emoji found"),
+  search: n.t("Search emoji"),
+  notfound: n.t("No emoji found"),
   categories: {
-    search: r.t("Search results"),
-    recent: r.t("Frequently used"),
-    smileys: r.t("Smileys & Emotion"),
-    people: r.t("People & Body"),
-    nature: r.t("Animals & Nature"),
-    foods: r.t("Food & Drink"),
-    activity: r.t("Activities"),
-    places: r.t("Travel & Places"),
-    objects: r.t("Objects"),
-    symbols: r.t("Symbols"),
-    flags: r.t("Flags"),
-    custom: r.t("Custom")
+    search: n.t("Search results"),
+    recent: n.t("Frequently used"),
+    smileys: n.t("Smileys & Emotion"),
+    people: n.t("People & Body"),
+    nature: n.t("Animals & Nature"),
+    foods: n.t("Food & Drink"),
+    activity: n.t("Activities"),
+    places: n.t("Travel & Places"),
+    objects: n.t("Objects"),
+    symbols: n.t("Symbols"),
+    flags: n.t("Flags"),
+    custom: n.t("Custom")
   }
 }, u = [
-  new o.Color(255, 222, 52, r.t("Neutral skin color")),
-  new o.Color(228, 205, 166, r.t("Light skin tone")),
-  new o.Color(250, 221, 192, r.t("Medium light skin tone")),
-  new o.Color(174, 129, 87, r.t("Medium skin tone")),
-  new o.Color(158, 113, 88, r.t("Medium dark skin tone")),
-  new o.Color(96, 79, 69, r.t("Dark skin tone"))
+  new o.Color(255, 222, 52, n.t("Neutral skin color")),
+  new o.Color(228, 205, 166, n.t("Light skin tone")),
+  new o.Color(250, 221, 192, n.t("Medium light skin tone")),
+  new o.Color(174, 129, 87, n.t("Medium skin tone")),
+  new o.Color(158, 113, 88, n.t("Medium dark skin tone")),
+  new o.Color(96, 79, 69, n.t("Dark skin tone"))
 ], j = {
   name: "NcEmojiPicker",
   components: {
@@ -112,7 +112,7 @@ const b = {
      */
     previewFallbackName: {
       type: String,
-      default: r.t("Pick an emoji")
+      default: n.t("Pick an emoji")
     },
     /**
      * Whether to close the emoji picker after picking one
@@ -143,17 +143,17 @@ const b = {
     };
   },
   data() {
-    const t = c.getCurrentSkinTone();
+    const r = c.getCurrentSkinTone();
     return {
       /**
        * The current active color from the skin tone palette
        */
-      currentColor: u[t - 1],
+      currentColor: u[r - 1],
       /**
        * The current active skin tone
        * @type {1|2|3|4|5|6}
        */
-      currentSkinTone: t,
+      currentSkinTone: r,
       search: "",
       open: !1
     };
@@ -164,66 +164,68 @@ const b = {
     }
   },
   methods: {
-    t: r.t,
+    t: n.t,
     clearSearch() {
+      var e, t;
       this.search = "";
-      const t = this.$refs.search?.$refs.inputField?.$refs.input;
-      t && t.focus();
+      const r = (t = (e = this.$refs.search) == null ? void 0 : e.$refs.inputField) == null ? void 0 : t.$refs.input;
+      r && r.focus();
     },
     /**
      * Update the current skin tone by the result of the color picker
      * @param {string} color Color set
      */
-    onChangeSkinTone(t) {
-      const e = this.skinTonePalette.findIndex((n) => n.color.toLowerCase() === t.toLowerCase());
+    onChangeSkinTone(r) {
+      const e = this.skinTonePalette.findIndex((t) => t.color.toLowerCase() === r.toLowerCase());
       e > -1 && (this.currentSkinTone = e + 1, this.currentColor = this.skinTonePalette[e], c.setCurrentSkinTone(this.currentSkinTone));
     },
-    select(t) {
-      this.$emit("select", t.native), this.$emit("select-data", t), this.closeOnSelect && (this.open = !1);
+    select(r) {
+      this.$emit("select", r.native), this.$emit("select-data", r), this.closeOnSelect && (this.open = !1);
     },
     unselect() {
       this.$emit("unselect");
     },
     afterShow() {
+      var t, i;
       this.$refs.picker.$el.addEventListener("keydown", this.checkKeyEvent);
-      const e = this.$refs.search?.$refs.inputField?.$refs.input;
+      const e = (i = (t = this.$refs.search) == null ? void 0 : t.$refs.inputField) == null ? void 0 : i.$refs.input;
       e && e.focus();
     },
     afterHide() {
       this.$refs.picker.$el.removeEventListener("keydown", this.checkKeyEvent);
     },
-    checkKeyEvent(t) {
-      if (t.key !== "Tab")
+    checkKeyEvent(r) {
+      if (r.key !== "Tab")
         return;
-      const n = this.$refs.picker.$el.querySelectorAll(
+      const t = this.$refs.picker.$el.querySelectorAll(
         "button, input"
-      ), i = n.length - 1;
-      if (n.length <= 1) {
-        t.preventDefault();
+      ), i = t.length - 1;
+      if (t.length <= 1) {
+        r.preventDefault();
         return;
       }
-      t.shiftKey === !1 && t.target === n[i] ? (t.preventDefault(), n[0].focus()) : t.shiftKey === !0 && t.target === n[0] && (t.preventDefault(), n[i].focus());
+      r.shiftKey === !1 && r.target === t[i] ? (r.preventDefault(), t[0].focus()) : r.shiftKey === !0 && r.target === t[0] && (r.preventDefault(), t[i].focus());
     }
   }
 };
 var $ = function() {
-  var e = this, n = e._self._c;
-  return n("NcPopover", e._g(e._b({ attrs: { shown: e.open, container: e.container, "popup-role": "dialog" }, on: { "update:shown": function(i) {
+  var e = this, t = e._self._c;
+  return t("NcPopover", e._g(e._b({ attrs: { shown: e.open, container: e.container, "popup-role": "dialog" }, on: { "update:shown": function(i) {
     e.open = i;
   }, "after-show": e.afterShow, "after-hide": e.afterHide }, scopedSlots: e._u([{ key: "trigger", fn: function(i) {
     return [e._t("default", null, null, i)];
-  } }], null, !0) }, "NcPopover", e.$attrs, !1), e.$listeners), [n("Picker", e._b({ ref: "picker", attrs: { "auto-focus": !1, color: "var(--color-primary-element)", data: e.emojiIndex, emoji: e.previewFallbackEmoji, i18n: e.i18n, native: e.native, "emoji-size": 20, "per-line": 8, "picker-styles": { width: "320px" }, "show-preview": e.showPreview, skin: e.currentSkinTone, "show-skin-tones": !1, title: e.previewFallbackName, role: "dialog", "aria-modal": "true", "aria-label": e.t("Emoji picker") }, on: { select: e.select }, scopedSlots: e._u([{ key: "searchTemplate", fn: function(i) {
-    return [n("div", { staticClass: "search__wrapper" }, [n("NcTextField", { ref: "search", staticClass: "search", attrs: { value: e.search, label: e.t("Search"), "label-visible": !0, placeholder: e.i18n.search, "trailing-button-icon": "close", "trailing-button-label": e.t("Clear search"), "show-trailing-button": e.search !== "" }, on: { "update:value": [function(s) {
+  } }], null, !0) }, "NcPopover", e.$attrs, !1), e.$listeners), [t("Picker", e._b({ ref: "picker", attrs: { "auto-focus": !1, color: "var(--color-primary-element)", data: e.emojiIndex, emoji: e.previewFallbackEmoji, i18n: e.i18n, native: e.native, "emoji-size": 20, "per-line": 8, "picker-styles": { width: "320px" }, "show-preview": e.showPreview, skin: e.currentSkinTone, "show-skin-tones": !1, title: e.previewFallbackName, role: "dialog", "aria-modal": "true", "aria-label": e.t("Emoji picker") }, on: { select: e.select }, scopedSlots: e._u([{ key: "searchTemplate", fn: function(i) {
+    return [t("div", { staticClass: "search__wrapper" }, [t("NcTextField", { ref: "search", staticClass: "search", attrs: { value: e.search, label: e.t("Search"), "label-visible": !0, placeholder: e.i18n.search, "trailing-button-icon": "close", "trailing-button-label": e.t("Clear search"), "show-trailing-button": e.search !== "" }, on: { "update:value": [function(s) {
       e.search = s;
     }, function(s) {
       return i.onSearch(e.search);
     }], "trailing-button-click": function(s) {
       e.clearSearch(), i.onSearch(e.search);
-    } } }), n("NcColorPicker", { attrs: { "palette-only": "", container: e.container, palette: e.skinTonePalette, value: e.currentColor.color }, on: { "update:value": e.onChangeSkinTone } }, [n("NcButton", { attrs: { "aria-label": e.t("Skin tone"), type: "tertiary-no-background" }, scopedSlots: e._u([{ key: "icon", fn: function() {
-      return [n("IconCircle", { style: { color: e.currentColor.color }, attrs: { title: e.currentColor.name, size: 20 } })];
+    } } }), t("NcColorPicker", { attrs: { "palette-only": "", container: e.container, palette: e.skinTonePalette, value: e.currentColor.color }, on: { "update:value": e.onChangeSkinTone } }, [t("NcButton", { attrs: { "aria-label": e.t("Skin tone"), type: "tertiary-no-background" }, scopedSlots: e._u([{ key: "icon", fn: function() {
+      return [t("IconCircle", { style: { color: e.currentColor.color }, attrs: { title: e.currentColor.name, size: 20 } })];
     }, proxy: !0 }], null, !0) })], 1)], 1)];
   } }, e.allowUnselect && e.selectedEmoji ? { key: "customCategory", fn: function() {
-    return [n("div", { staticClass: "emoji-mart-category-label" }, [n("h3", { staticClass: "emoji-mart-category-label" }, [e._v(" " + e._s(e.t("Selected")) + " ")])]), n("Emoji", { staticClass: "emoji-selected", attrs: { data: e.emojiIndex, emoji: e.selectedEmoji, native: !0, size: 32 }, on: { click: e.unselect } }), n("Emoji", { staticClass: "emoji-delete", attrs: { data: e.emojiIndex, emoji: ":x:", native: !0, size: 10 }, on: { click: e.unselect } })];
+    return [t("div", { staticClass: "emoji-mart-category-label" }, [t("h3", { staticClass: "emoji-mart-category-label" }, [e._v(" " + e._s(e.t("Selected")) + " ")])]), t("Emoji", { staticClass: "emoji-selected", attrs: { data: e.emojiIndex, emoji: e.selectedEmoji, native: !0, size: 32 }, on: { click: e.unselect } }), t("Emoji", { staticClass: "emoji-delete", attrs: { data: e.emojiIndex, emoji: ":x:", native: !0, size: 10 }, on: { click: e.unselect } })];
   }, proxy: !0 } : null], null, !0) }, "Picker", e.$attrs, !1))], 1);
 }, N = [], P = /* @__PURE__ */ f.normalizeComponent(
   j,